/*
 * Telefono (finestre): regole SOLO per schermi larghi meno di 768 px.
 * Il foglio e' caricato con media="(max-width: 767.98px)" da
 * resources/views/includes/telefono-css.blade.php: sul computer e sul
 * tablet non viene applicato, quindi la loro impaginazione non cambia.
 *
 * Zona: le finestre e i pannelli che si aprono dalla scrivania.
 * Regole di fondo sul telefono:
 *   - le finestre occupano tutto lo schermo: intestazione compatta in alto,
 *     corpo che scorre, pulsanti d'azione nel piede sempre in vista;
 *   - bersagli da toccare di almeno 44 px, campi di scrittura a 16 px
 *     (sotto i 16 px l'iPhone ingrandisce la pagina al tocco), testi da 14 px;
 *   - aree sicure dello schermo (tacca, barra in basso) con env(safe-area-inset-*);
 *   - stessi colori e componenti del computer: cambiano solo misure e disposizione.
 * Le finestre "modal-overlay" sono prese per id: la stessa classe esiste anche
 * in Fatturazione (#fattModal), che e' di un'altra zona.
 * L'altezza visibile con la tastiera aperta arriva da public/js/chat-telefono.js
 * (variabili --tel-vv-alto e --tel-vv-altezza): senza, vale lo schermo intero.
 *
 * Tutto sta dentro @media screen: stampando su un foglio stretto (A5, 559 px)
 * la condizione dei 768 px sarebbe vera anche per la carta.
 */
@media screen {

/* =========================================================================
   1. FINESTRE A TUTTO SCHERMO (Nuova Visita, Nuovo Paziente, I miei Pazienti,
      Importazione, Ricettari, Modifica Visita)
   ========================================================================= */
:is(#nuovaVisitaModal,#nuovoPazienteModal,#listaPazientiModal,#importazioneModal,#ricettarioModal,#modalePosticipo).modal-overlay{
    top:var(--tel-vv-alto,0);bottom:auto;height:var(--tel-vv-altezza,100%);
    padding:0;align-items:stretch;justify-content:stretch;overflow:hidden;
    backdrop-filter:none;-webkit-backdrop-filter:none;
}
:is(#nuovaVisitaModal,#nuovoPazienteModal,#listaPazientiModal,#importazioneModal,#ricettarioModal,#modalePosticipo) > :is(.modal-medium,.modal-large){
    width:100%;max-width:none;height:100%;max-height:none;margin:0;
    border:0;border-radius:0;box-shadow:none;overflow:hidden;
    display:flex;flex-direction:column;
}
/* Nuova Visita e Nuovo Paziente hanno il modulo attorno a testa, corpo e piede. */
:is(#nuovaVisitaModal,#nuovoPazienteModal) form{display:flex;flex-direction:column;flex:1 1 auto;min-height:0;}

/* Intestazione compatta: titolo, "?" e la X da 44 px. */
:is(#nuovaVisitaModal,#nuovoPazienteModal,#listaPazientiModal,#importazioneModal,#ricettarioModal,#modalePosticipo) .modal-header{
    flex-shrink:0;gap:.5rem;
    padding:calc(.4rem + env(safe-area-inset-top)) max(.35rem, env(safe-area-inset-right)) .4rem max(1rem, env(safe-area-inset-left));
}
:is(#nuovaVisitaModal,#nuovoPazienteModal,#listaPazientiModal,#importazioneModal,#ricettarioModal,#modalePosticipo) .modal-header h2{
    font-size:1.1rem;gap:.5rem;min-width:0;line-height:1.25;
}
:is(#nuovaVisitaModal,#nuovoPazienteModal,#listaPazientiModal,#importazioneModal,#ricettarioModal,#modalePosticipo) .btn-close-modal{
    width:44px;height:44px;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;
    padding:0;border-radius:10px;font-size:1.75rem;line-height:1;
}

/* Corpo: l'unica parte che scorre. */
:is(#nuovaVisitaModal,#nuovoPazienteModal,#listaPazientiModal,#importazioneModal,#ricettarioModal,#modalePosticipo) .modal-body{
    flex:1 1 auto;min-height:0;overflow-x:hidden;overflow-y:auto;
    overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
    padding:1rem max(1rem, env(safe-area-inset-right)) 1.5rem max(1rem, env(safe-area-inset-left));
}

/* Piede sempre in vista, pulsanti grandi e affiancati. */
:is(#nuovaVisitaModal,#nuovoPazienteModal,#listaPazientiModal,#importazioneModal,#ricettarioModal,#modalePosticipo) .modal-footer{
    flex-shrink:0;flex-wrap:wrap;gap:.6rem;
    padding:.65rem max(1rem, env(safe-area-inset-right)) calc(.65rem + env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left));
}
:is(#nuovaVisitaModal,#nuovoPazienteModal,#listaPazientiModal,#importazioneModal,#ricettarioModal,#modalePosticipo) .modal-footer > .btn{
    flex:1 1 auto;min-height:48px;margin:0;justify-content:center;text-align:center;font-size:.95rem;
}
/* Telefoni stretti (320-359 px): pulsanti del piede un po' meno imbottiti,
   cosi' due restano sulla stessa riga. */
@media (max-width:359.98px){
    :is(#nuovaVisitaModal,#nuovoPazienteModal,#listaPazientiModal,#importazioneModal,#ricettarioModal,#modalePosticipo,#studioMedicoModal,#privateEventModal) .modal-footer > .btn{
        padding-left:.75rem;padding-right:.75rem;font-size:.9rem;
    }
}
/* L'esito di Modifica Visita sta fra corpo e piede: stessi margini del corpo. */
#posticipoErrore{padding:.5rem 1rem .25rem !important;}
:is(#nuovaVisitaModal,#nuovoPazienteModal,#listaPazientiModal,#importazioneModal,#ricettarioModal,#modalePosticipo) .modal-errore{margin:0 1rem .6rem;}

/* =========================================================================
   2. CAMPI, ETICHETTE E PULSANTI DENTRO LE FINESTRE
   ========================================================================= */
:is(#nuovaVisitaModal,#nuovoPazienteModal,#listaPazientiModal,#importazioneModal,#ricettarioModal,#modalePosticipo,#studioMedicoModal,#privateEventModal,#pannelloOverlay,.strum-overlay,.cf-velo)
  :is(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=hidden]):not([type=color]),select,textarea){
    font-size:16px;
}
:is(#nuovaVisitaModal,#nuovoPazienteModal,#listaPazientiModal,#importazioneModal,#ricettarioModal,#modalePosticipo,#studioMedicoModal,#privateEventModal,#pannelloOverlay,.strum-overlay)
  :is(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=hidden]):not([type=color]),select){
    min-height:44px;
}
:is(#nuovaVisitaModal,#nuovoPazienteModal,#listaPazientiModal,#importazioneModal,#ricettarioModal,#modalePosticipo) :is(.form-field-label,.form-field-label-min){font-size:.875rem;}
:is(#nuovaVisitaModal,#nuovoPazienteModal,#listaPazientiModal,#importazioneModal,#ricettarioModal,#modalePosticipo) .form-help{font-size:.875rem;line-height:1.45;}
:is(#nuovaVisitaModal,#nuovoPazienteModal) .form-opz{font-size:.75rem;}
:is(#nuovaVisitaModal,#nuovoPazienteModal) .radio-option-title{font-size:.95rem;}
:is(#nuovaVisitaModal,#nuovoPazienteModal) .radio-option-desc{font-size:.875rem;}
:is(#nuovaVisitaModal,#nuovoPazienteModal) .radio-option-main{min-height:44px;}
/* Contrasto di notte (uguale difetto sul computer): la descrizione della sede
   scelta (#94A3B8 sul riquadro ciano) era a 4,38 e le iniziali dei pazienti
   (#60A5FA) a 4,45; il minimo e' 4,5. */
html:not([data-tema="giorno"]) :is(#nuovaVisitaModal,#nuovoPazienteModal) .radio-option.is-checked .radio-option-desc{color:#A0AEC0;}
html:not([data-tema="giorno"]) #listaPazientiModal .patient-avatar{color:#93C5FD;}
:is(#nuovaVisitaModal,#nuovoPazienteModal,#listaPazientiModal,#importazioneModal,#ricettarioModal,#modalePosticipo) .modal-body .btn{min-height:44px;font-size:.9rem;}
/* L'interruttore resta disegnato uguale, ma si tocca su 44 px. */
:is(#nuovaVisitaModal,#nuovoPazienteModal) .switch::after{content:'';position:absolute;inset:-11px -6px;}
#nuovoPazienteModal .np-ps-riga{min-height:44px;}
:is(#nuovaVisitaModal,#nuovoPazienteModal) .imp-rimando{min-height:44px;font-size:.875rem;}
:is(#nuovaVisitaModal,#nuovoPazienteModal) .imp-rimando :is(span,b){font-size:inherit;}
/* Prefisso e numero affiancati, come nella pagina Nuovo Paziente: il foglio
   telefono-pagine.css da' al prefisso 7,5rem pensando alla riga, e qui il
   gruppo era in colonna (il prefisso diventava un quadrato alto 120 px). */
#nuovoPazienteModal .form-input-group{flex-direction:row;gap:.5rem;}
#nuovoPazienteModal .form-input-group select[name=phone_dial]{flex:0 0 7.5rem;min-width:0;}
#nuovoPazienteModal .form-input-group .form-input{flex:1 1 auto;min-width:0;}
/* .form-row porta anche il margine di Bootstrap (-5 px per lato): la riga
   "Durata" sporgeva oltre gli altri campi. */
:is(#nuovaVisitaModal,#nuovoPazienteModal) .form-row{margin-left:0;margin-right:0;}
/* Data e luogo di nascita affiancati solo se c'e' posto. */
@media (max-width:374.98px){ #nuovoPazienteModal .form-row-3{grid-template-columns:minmax(0,1fr);} }
/* "Aggiungi il tuo primo studio": pulsante intero sotto il suo avviso. */
:is(#nuovaVisitaModal,#nuovoPazienteModal,#modalePosticipo) .sede-primo-studio .form-help{flex-basis:100%;}
:is(#nuovaVisitaModal,#nuovoPazienteModal,#modalePosticipo) .sede-primo-studio-btn{
    width:100%;min-height:44px;justify-content:center;font-size:.9rem;
}

/* =========================================================================
   3. SELETTORE DI GIORNO E ORARIO (Nuova Visita, Nuovo Paziente, Modifica Visita)
   ========================================================================= */
:is(#nuovaVisitaModal,#nuovoPazienteModal,#modalePosticipo) .sel-appuntamento{padding:.75rem;}
:is(#nuovaVisitaModal,#nuovoPazienteModal,#modalePosticipo) .sel-riga{gap:.5rem;}
:is(#nuovaVisitaModal,#nuovoPazienteModal,#modalePosticipo) .sel-riga .form-field-label{flex:1 1 100%;min-width:0;}
:is(#nuovaVisitaModal,#nuovoPazienteModal,#modalePosticipo) .sel-data-nav{flex:1 1 100%;justify-content:space-between;}
:is(#nuovaVisitaModal,#nuovoPazienteModal,#modalePosticipo) .sel-freccia{width:44px;height:44px;font-size:.9rem;}
:is(#nuovaVisitaModal,#nuovoPazienteModal,#modalePosticipo) .sel-data-pastiglia{flex:1;justify-content:center;height:44px;font-size:.95rem;}
:is(#nuovaVisitaModal,#nuovoPazienteModal,#modalePosticipo) .sel-data-pastiglia input[type=date]{min-height:0;}
:is(#nuovaVisitaModal,#nuovoPazienteModal,#modalePosticipo) .sel-scorciatoie{flex:1 1 100%;}
:is(#nuovaVisitaModal,#nuovoPazienteModal,#modalePosticipo) .sel-scorciatoie .sel-chip{flex:1 1 0;}
:is(#nuovaVisitaModal,#nuovoPazienteModal,#modalePosticipo) .sel-chip{min-height:44px;padding:.4rem .9rem;font-size:.875rem;}
:is(#nuovaVisitaModal,#nuovoPazienteModal,#modalePosticipo) .sel-chip-manuale{flex:1 1 100%;}
:is(#nuovaVisitaModal,#nuovoPazienteModal,#modalePosticipo) .sel-manuale-campo{flex:1 1 100%;flex-wrap:wrap;}
:is(#nuovaVisitaModal,#nuovoPazienteModal,#modalePosticipo) .sel-manuale-campo input[type=time]{flex:1 1 auto;font-size:16px;}
:is(#nuovaVisitaModal,#nuovoPazienteModal,#modalePosticipo) .sel-orari{grid-template-columns:repeat(auto-fill,minmax(68px,1fr));gap:.45rem;}
:is(#nuovaVisitaModal,#nuovoPazienteModal,#modalePosticipo) .sel-ora{min-height:44px;font-size:.9rem;}
:is(#nuovaVisitaModal,#nuovoPazienteModal,#modalePosticipo) .sel-riepilogo{font-size:.875rem;}

/* =========================================================================
   4. I MIEI PAZIENTI: la tabella diventa un elenco di schede
   ========================================================================= */
#listaPazientiModal .patients-toolbar{flex-wrap:wrap;gap:.6rem;margin-bottom:.9rem;}
#listaPazientiModal .patients-search{flex:1 1 100%;min-width:0;}
#listaPazientiModal .richiami-strumento{flex:1 1 auto;min-width:0;flex-wrap:wrap;}
#listaPazientiModal #pzRichiami{min-height:44px;}
#listaPazientiModal .richiami-strumento .form-select{font-size:16px;min-height:44px;}
#listaPazientiModal .patients-count{font-size:.875rem;margin-left:auto;}
#listaPazientiModal .patients-table-wrap{overflow:visible;}
#listaPazientiModal .patients-table,
#listaPazientiModal .patients-table tbody{display:block;width:100%;}
#listaPazientiModal .patients-table thead{display:none;}
#listaPazientiModal .patients-table tbody tr{
    display:grid;grid-template-columns:minmax(0,1fr) auto;
    grid-template-areas:"nome stato" "tel tel" "data data" "azioni azioni";
    align-items:center;gap:.2rem .75rem;
    padding:.6rem .85rem .85rem;margin-bottom:.7rem;
    border:1px solid var(--doc-border);border-radius:12px;background:rgba(255,255,255,.025);
}
#listaPazientiModal .patients-table tbody tr[hidden]{display:none;}
#listaPazientiModal .patients-table td{display:block;padding:0;border:0;background:none !important;font-size:.875rem;}
#listaPazientiModal .patients-table td[colspan]{grid-column:1 / -1;}
#listaPazientiModal .patients-table td:nth-child(1){grid-area:nome;min-width:0;}
#listaPazientiModal .patients-table td:nth-child(2){grid-area:tel;}
#listaPazientiModal .patients-table td:nth-child(3){grid-area:data;}
#listaPazientiModal .patients-table td:nth-child(4){grid-area:stato;display:block;justify-self:end;}
#listaPazientiModal .patients-table td:nth-child(5){grid-area:azioni;margin-top:.55rem;}
/* Le intestazioni della tabella non ci sono piu': ogni dato dice cos'e'. */
#listaPazientiModal td.patient-phone::before{content:'Cellulare ';color:var(--doc-text-muted);}
#listaPazientiModal td.patient-date::before{content:'Ultima visita ';color:var(--doc-text-muted);}
/* Il nome intero, anche su due righe: troncato non si riconosceva. */
#listaPazientiModal .patient-name{
    display:block;min-height:44px;padding:.65rem 0;max-width:100%;
    font-size:1rem;line-height:1.3;white-space:normal;overflow:visible;overflow-wrap:anywhere;
}
#listaPazientiModal .patient-avatar{width:38px;height:38px;font-size:.8rem;}
#listaPazientiModal .status-pill{font-size:.75rem;}
#listaPazientiModal .row-actions{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:.5rem;justify-content:stretch;}
#listaPazientiModal .row-actions form{display:block;}
#listaPazientiModal .row-actions .action-btn{width:100%;height:44px;font-size:1rem;border-radius:10px;}
/* Sotto ogni simbolo una parola: sul telefono non c'e' il passaggio del
   mouse che mostra il titolo, e cinque simboli colorati da soli non
   dicevano che cosa fanno. */
#listaPazientiModal .row-actions .action-btn{
  height:auto;min-height:54px;padding:.4rem .15rem .35rem;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.25rem;
}
#listaPazientiModal .row-actions .action-btn::after{font-size:.75rem;font-weight:700;line-height:1.1;letter-spacing:0;white-space:nowrap;}
#listaPazientiModal .row-actions .action-btn.is-scheda::after{content:"Cartella";}
#listaPazientiModal .row-actions .action-btn.is-messaggio::after{content:"Scrivi";}
#listaPazientiModal .row-actions .action-btn.is-invito::after{content:"Controllo";}
#listaPazientiModal .row-actions .action-btn.is-prenota::after{content:"Prenota";}
#listaPazientiModal .row-actions .action-btn.is-credenziali::after{content:"Accesso";}
#listaPazientiModal .row-actions .action-btn.is-rimuovi::after{content:"Rimuovi";}
/* L'invito al controllo resta visibile solo con "Da richiamare" acceso
   (doctor-dashboard.css): la regola qui sopra non deve riaccenderlo. */
#listaPazientiModal:not(.lista-richiami) .row-actions .js-invita-controllo{display:none;}
/* Sei pulsanti (con "Da richiamare") o un telefono stretto: due righe da
   tre, cosi' le parole non escono dalla scheda. */
#listaPazientiModal.lista-richiami .row-actions{grid-auto-flow:row;grid-template-columns:repeat(3,minmax(0,1fr));}
@media (max-width:374.98px){
  #listaPazientiModal .row-actions{grid-auto-flow:row;grid-template-columns:repeat(3,minmax(0,1fr));}
}
/* Piede: "Chiudi" e "Importazione Massiva" in fila, "Nuovo Paziente" sotto a tutta larghezza. */
#listaPazientiModal .modal-footer{display:grid;grid-template-columns:auto minmax(0,1fr);}
#listaPazientiModal .modal-footer > .btn-primary{grid-column:1 / -1;}
#listaPazientiModal .modal-footer > .btn{white-space:normal;}

/* =========================================================================
   5. MODIFICA VISITA
   ========================================================================= */
#modalePosticipo .modv-intro{font-size:.95rem;}
#modalePosticipo .modv-sezione summary{min-height:48px;}
#modalePosticipo .modv-chips{gap:.5rem;}
#modalePosticipo .modv-chip{min-height:44px;font-size:.875rem;flex:1 1 calc(50% - .5rem);}
#modalePosticipo .modv-avviso{font-size:.875rem;}
#modalePosticipo :is(.modv-annulla-btn,.modv-annulla-si,.modv-annulla-no){min-height:44px;font-size:.9rem;}
#modalePosticipo .modv-annulla-btn{width:100%;justify-content:center;}
#modalePosticipo .modv-annulla-conferma{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;}
#modalePosticipo .modv-annulla-conferma[hidden]{display:none;}
#modalePosticipo .modv-annulla-si{flex:1 1 auto;}

/* =========================================================================
   6. IMPORTAZIONE MASSIVA
   ========================================================================= */
#importazioneModal .imp-via{min-height:48px;font-size:.875rem;}
#importazioneModal .imp-campo{font-size:16px;min-height:44px;}
#importazioneModal .imp-togli{width:44px;height:44px;}
#importazioneModal :is(.imp-suggerimento,.imp-aiuto-testo){font-size:.875rem;}
#importazioneModal .imp-aiuto-btn{min-height:44px;font-size:.9rem;}

/* =========================================================================
   7. RICETTARI: l'anteprima del foglio A4 si stringe alla larghezza del telefono
   ========================================================================= */
#ricettarioModal .rx-picker{gap:1rem;}
#ricettarioModal .rx-picker-detail,
#ricettarioModal .rx-picker-lato{padding:.75rem;}
#ricettarioModal .rx-picker-detail-head{flex-wrap:wrap;gap:.25rem .75rem;}
#ricettarioModal .rx-scaler.is-detail{--rx-scale:.4;}
#ricettarioModal :is(.rx-option-desc,.rx-upload-note,.rx-intestazione label,.rx-picker-detail-head span){font-size:.875rem;}
#ricettarioModal .rx-option{min-height:56px;}
#ricettarioModal .rx-intestazione textarea{font-size:16px;}
@media (max-width:374.98px){ #ricettarioModal .rx-scaler.is-detail{--rx-scale:.36;} }
@media (max-width:339.98px){ #ricettarioModal .rx-scaler.is-detail{--rx-scale:.31;} }

/* =========================================================================
   8. STUDIO MEDICO ED EVENTO PRIVATO (finestre Bootstrap): tutto schermo
   ========================================================================= */
:is(#studioMedicoModal,#privateEventModal){
    top:var(--tel-vv-alto,0);bottom:auto;height:var(--tel-vv-altezza,100%);overflow:hidden;padding:0 !important;
}
:is(#studioMedicoModal,#privateEventModal) .modal-dialog{
    margin:0;width:100%;max-width:none;height:100%;min-height:0;align-items:stretch;
}
:is(#studioMedicoModal,#privateEventModal) .modal-content{
    height:100%;border:0;border-radius:0;display:flex;flex-direction:column;overflow:hidden;
}
:is(#studioMedicoModal,#privateEventModal) .modal-header{
    flex-shrink:0;align-items:center;
    padding:calc(.4rem + env(safe-area-inset-top)) max(.35rem, env(safe-area-inset-right)) .4rem max(1rem, env(safe-area-inset-left));
}
:is(#studioMedicoModal,#privateEventModal) .modal-title{font-size:1.1rem;}
:is(#studioMedicoModal,#privateEventModal) .modal-header .close{
    width:44px;height:44px;margin:0 0 0 auto;padding:0;display:inline-flex;align-items:center;justify-content:center;font-size:1.75rem;
}
:is(#studioMedicoModal,#privateEventModal) .modal-body{
    flex:1 1 auto;min-height:0;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
    padding:1rem max(1rem, env(safe-area-inset-right)) 1.5rem max(1rem, env(safe-area-inset-left));
}
:is(#studioMedicoModal,#privateEventModal) .modal-footer{
    flex-shrink:0;flex-wrap:nowrap;gap:.6rem;
    padding:.65rem max(1rem, env(safe-area-inset-right)) calc(.65rem + env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left));
}
:is(#studioMedicoModal,#privateEventModal) .modal-footer > .btn{flex:1 1 0;min-height:48px;margin:0;justify-content:center;font-size:.95rem;}
:is(#studioMedicoModal,#privateEventModal) :is(.form-label,.form-check-label){font-size:.875rem;}
:is(#studioMedicoModal,#privateEventModal) .form-check{min-height:44px;display:flex;align-items:center;gap:.5rem;}
#studioMedicoModal .orari-scorcia{min-height:44px;font-size:.875rem;}
#studioMedicoModal .orari-giorno{flex-wrap:wrap;row-gap:.35rem;}
#studioMedicoModal .orari-giorno-nome{min-height:44px;font-size:.9rem;}
#studioMedicoModal .orari-fascia input[type="time"]{font-size:16px;min-height:44px;}
#studioMedicoModal .orari-festivi{min-height:44px;}
/* Mattina e pomeriggio vanno su due righe: il puntino della pausa, che le
   separava in fila, resterebbe solo sul bordo destro. */
#studioMedicoModal .orari-pausa{display:none;}
:is(#studioMedicoModal,#privateEventModal) .form-check{padding-left:0;}
:is(#studioMedicoModal,#privateEventModal) .form-check-input{width:22px;height:22px;margin:0;float:none;position:static;flex-shrink:0;}
:is(#studioMedicoModal,#privateEventModal) .form-check-label{padding:.6rem 0;}
/* Un po' d'aria fra un campo e l'etichetta del successivo: le colonne di
   Bootstrap sul telefono vanno a capo senza spazio in mezzo e l'etichetta
   sembrava appartenere al campo di sopra. */
:is(#studioMedicoModal,#privateEventModal) .modal-body form > .row > [class*="col-"]{margin-bottom:.9rem;}
:is(#studioMedicoModal,#privateEventModal) .modal-body form > .row > [class*="col-"]:last-child{margin-bottom:0;}
/* Studio: le Iniziali accanto a "Principale", la Citta' accanto al CAP. */
#studioMedicoModal .modal-body form > .row > .col-md-3:has(#studioInitials),
#studioMedicoModal .modal-body form > .row > .col-md-2:has(#studioIsPrimary){flex:0 0 50%;max-width:50%;}
#studioMedicoModal .modal-body form > .row > .col-md-4:has(#studioCity){flex:0 0 62%;max-width:62%;}
#studioMedicoModal .modal-body form > .row > .col-md-3:has(#studioPostalCode){flex:0 0 38%;max-width:38%;}
/* Evento privato: il pulsante della data scritto come gli altri campi (16 px). */
#privateEventModal .pv-quando{font-size:1rem;min-height:44px;}

/* Il selettore di data e ora dell'evento privato */
#privateEventModal .pv-fr{width:44px;height:44px;}
#privateEventModal .pv-g-di{min-height:44px;}
#privateEventModal :is(.pv-g-sett,.pv-eti){font-size:.8125rem;}
#privateEventModal :is(.pv-oggi,.pv-fatto){min-height:44px;min-width:44px;font-size:.9rem;}
#privateEventModal .pv-riepilogo{font-size:.875rem;}
#privateEventModal .pv-t{min-height:44px;}

/* =========================================================================
   9. PANNELLI (Notifiche, scheda del paziente): tutto schermo
      Il contenuto clinico della scheda e' della zona "visita".
   ========================================================================= */
#pannelloOverlay{
    top:var(--tel-vv-alto,0);bottom:auto;height:var(--tel-vv-altezza,100%);
    padding:0;align-items:stretch;backdrop-filter:none;-webkit-backdrop-filter:none;
}
#pannelloOverlay .pannello{max-width:none;max-height:none;height:100%;border:0;border-radius:0;box-shadow:none;}
#pannelloOverlay .pannello-testa{
    flex-shrink:0;gap:.5rem;
    padding:calc(.4rem + env(safe-area-inset-top)) max(.35rem, env(safe-area-inset-right)) .4rem max(1rem, env(safe-area-inset-left));
}
#pannelloOverlay .pannello-testa h3{font-size:1.1rem;}
#pannelloOverlay .pannello-chiudi{width:44px;height:44px;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;padding:0;font-size:1.9rem;}
#pannelloOverlay .pannello-corpo{
    overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
    padding:1rem max(1rem, env(safe-area-inset-right)) calc(1.5rem + env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left));
}
/* Notifiche: il nome si tocca comodo, le azioni sono pulsanti veri. */
#pannelloOverlay .noty-paziente{padding:.55rem 0;margin:-.55rem 0;font-size:1rem;}
#pannelloOverlay .noty-quando{font-size:.8125rem;}
#pannelloOverlay .noty-visita{font-size:.875rem;}
#pannelloOverlay .noty-azioni{display:flex;flex-wrap:wrap;gap:.5rem;align-items:stretch;}
#pannelloOverlay .noty-azioni .btn{flex:1 1 auto;min-height:44px;justify-content:center;font-size:.9rem;}
#pannelloOverlay .noty-durata{flex:1 1 100%;display:flex;align-items:center;gap:.6rem;font-size:.875rem;}
#pannelloOverlay .noty-durata select{flex:1;}
#pannelloOverlay .noty-archivio summary{min-height:44px;}

/* =========================================================================
   10. POSOLOGIA E STRUMENTI CLINICI: stanno in telefono-strumenti.css
   ========================================================================= */

/* =========================================================================
   11. CONFERME DI CASA (confermaDiCasa) e "visite fuori orario":
       un foglio che sale dal basso, pulsanti grandi a portata di pollice
   ========================================================================= */
.cf-velo{align-items:flex-end;padding:0;}
.cf-carta{
    max-width:none;border-radius:20px 20px 0 0;border-bottom:0;
    padding:1.4rem max(1.1rem, env(safe-area-inset-right)) calc(1.1rem + env(safe-area-inset-bottom)) max(1.1rem, env(safe-area-inset-left));
    max-height:calc(var(--tel-vv-altezza,100vh) - 1.5rem);overflow-y:auto;overscroll-behavior:contain;
}
.cf-carta p{font-size:.95rem;}
.cf-azioni{flex-wrap:wrap;}
.cf-btn{flex:1 1 auto;min-height:48px;font-size:.95rem;}
.cfs-carta .cfs-riga{min-height:56px;}
.cfs-chi strong{font-size:.95rem;}
.cfs-quando,.cfs-carta .cfs-altre{font-size:.875rem;}
.cfs-btn{min-height:44px;font-size:.9rem;}
.cfs-btn.e-piccolo{min-height:44px;padding:.4rem 1rem;font-size:.875rem;}
.cfs-elenco{max-height:none;}

/* =========================================================================
   12. AIUTO "?": il dischetto resta piccolo ma si tocca su 44 px;
       la finestrella dell'aiuto sale dal basso
   ========================================================================= */
.aiuto-funzione{position:relative;}
.aiuto-funzione::after{content:'';position:absolute;left:50%;top:50%;width:44px;height:44px;transform:translate(-50%,-50%);}
.aiuto-velo{align-items:flex-end;padding:0;}
.aiuto-carta{
    max-width:none;border-radius:20px 20px 0 0;border-bottom:0;
    max-height:calc(var(--tel-vv-altezza,100vh) - 1.5rem);overscroll-behavior:contain;
    padding:1.1rem max(1.1rem, env(safe-area-inset-right)) calc(1rem + env(safe-area-inset-bottom)) max(1.1rem, env(safe-area-inset-left));
}
.aiuto-testa .aiuto-chiudi{width:44px;height:44px;margin-right:-.5rem;display:inline-flex;align-items:center;justify-content:center;font-size:1.6rem;}
.aiuto-righe > li{font-size:.95rem;}
.aiuto-tasto{font-size:.8125rem;}
.aiuto-carta a.aiuto-tutorial{min-height:44px;display:inline-flex;align-items:center;font-size:.9rem;}
.aiuto-piede .aiuto-ok{flex:1 1 100%;min-height:48px;justify-content:center;font-size:.95rem;}

/* =========================================================================
   13. CHAT "DA TELEFONO" (public/css/chat-telefono.css): gia' a tutto
       schermo sotto i 600 px; qui campi a 16 px e bersagli da 44 px.
       Il foglio della chat arriva DOPO questo (lo carica menu-mobile nel
       corpo della pagina): "html" davanti basta a vincere a parita' di regola.
   ========================================================================= */
html #chatTelefono #msgCercaPaziente,
html #chatTelefono .ct-campo{font-size:16px;}
html #chatTelefono .ct-nuovo-campo input{min-height:44px;}
html #chatTelefono .ct-campo{min-height:44px;}
html #chatTelefono .ct-invia{width:44px;height:44px;}
html #chatTelefono .chat-tel-chiudi{width:44px;height:44px;margin-right:-4px;}
html #chatTelefono .chat-tel-indietro,
html #chatTelefono .chat-tel-scheda{position:relative;font-size:14px;}
html #chatTelefono .chat-tel-indietro::after{content:'';position:absolute;left:0;right:0;top:50%;height:44px;transform:translateY(-50%);}
html #chatTelefono .chat-tel-scheda::after{content:'';position:absolute;left:-4px;right:-4px;top:50%;height:32px;transform:translateY(-50%);}
html #chatTelefono .ct-nuovo-eti,
html #chatTelefono .ct-sezione{font-size:12.5px;}
html #chatTelefono :is(.ct-anteprima,.ct-tu){font-size:14px;}
html #chatTelefono .ct-quando{font-size:13px;}
html #chatTelefono .ct-giorno span{font-size:12.5px;}
html #chatTelefono .ct-bolla{font-size:15.5px;}
html #chatTelefono .ct-bolla-ora{font-size:12px;}
html #chatTelefono .ct-bolla-auto{font-size:12px;}
/* La conversazione con un professionista del Team: il tondo in testa ha il
   colore del Team, come la sua riga nell'elenco e l'appuntamento in agenda.
   Il nome va su due righe: accanto a "Conversazioni" si tagliava
   ("Broker assicurati..."). L'avviso sopra la casella (era a 12 px) e le
   righe di servizio si leggono a 13-14 px. */
html #chatTelefono:has(.ct-thread[data-utente^="team-"]) .chat-tel-avatar{background:var(--team-pieno, #6063EE);color:var(--team-colore-testo, #FFFFFF);}
html #chatTelefono .chat-tel-titolo{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.2;}
html #chatTelefono .ct-avviso-team p{font-size:13px;line-height:1.45;}
html #chatTelefono .ct-avviso-team i{font-size:13px;}
html #chatTelefono .ct-team-vuoto{font-size:14px;}
html #chatTelefono .ct-suggerimento{font-size:12.5px;}

/* =========================================================================
   14. CALENDARIETTO DELL'AGENDA PRIVATA: largo quanto tutta la barra della
       data (a 390 px usciva a destra dallo schermo). Si appoggia alla barra
       e non allo schermo: la colonna che lo contiene si muove (transform) e
       una posizione "fixed" finirebbe fuori posto.
   ========================================================================= */
.priv-data-barra:has(#privMiniCal){position:relative;}
.priv-data-barra:has(#privMiniCal) .priv-data-guscio{position:static;}
#privMiniCal{left:0;right:0;width:auto;padding:.6rem;}
#privMiniCal .mini-cal-titolo{font-size:1rem;}
#privMiniCal .mini-cal-nav{width:44px;height:44px;font-size:.9rem;}
#privMiniCal .mini-cal-settimana span{font-size:.8125rem;}
/* Caselle quadrate larghe 1/7 della barra (42 px a 390): un'altezza minima
   le allargherebbe oltre il bordo sui telefoni da 320. */
#privMiniCal .mini-cal-giorno{font-size:.95rem;}

} /* fine @media screen */