/* =========================================================================
   NAVIGAZIONE SUL TELEFONO (sotto i 768 px) — includes/telefono-css
   Il foglio e' caricato con media="(max-width: 767.98px)": sul computer e
   sul tablet non vale nessuna regola di questo file.

   1. La barra in basso (includes/menu-mobile) al posto dei tre tondi.
   2. La barra in alto su una riga sola: logo e menu.
   3. Il menu a tre righe riordinato (includes/navbar, .menu-tel).
   4. Il pie' di pagina dell'area riservata su due righe.
   5. Fluidita': sipario solo al primo ingresso, stato «premuto».
   6. Bordi dell'iPhone (tacca e striscia di sistema in basso).

   «Area riservata» = la pagina ha la barra in basso: body:has(#barraTelefono).
   Le pagine senza barra (ospiti, amministratore, /messages/*) restano come prima.
   Misure di riferimento: bersagli da 44 px e oltre, testi da 13-16 px.

   STAMPA. Tutto il foglio sta dentro @media screen: in stampa la larghezza
   che conta e' quella della carta (un A4 con i margini normali di Chrome e'
   largo 718 px, sotto la soglia dei 768) e, senza questo recinto, la stampa
   dal computer prenderebbe la barra in basso e lo spazio per lei (un foglio
   in piu' nell'anteprima di stampa del referto).
   ========================================================================= */
@media screen {

/* BROWSER VECCHI. Le regole che fanno posto alla barra (via i tondi, spazio
   in fondo, barra nascosta con la visita, la tastiera e il menu) usano :has().
   Un telefono che non lo conosce (iPhone con iOS 15.3 o piu' vecchio, Chrome
   prima della 105, Samsung Internet prima della 20, Firefox prima della 121)
   le scarterebbe e avrebbe la barra sopra la visita e sopra la tastiera,
   insieme ai tondi. Per questo barra, misura della barra e menu del telefono
   si accendono solo dentro @supports selector(:has(a)): li', tutto resta
   come prima (tre tondi, menu di sempre). */
@supports selector(:has(a)){
:root{
    /* Altezza della barra in basso senza la striscia di sistema dell'iPhone.
       --barra-tel e' l'ingombro vero: chi mette qualcosa di fisso in basso
       sopra la barra puo' usare bottom: var(--barra-tel, 0px). */
    --barra-tel-h: 62px;
    --barra-tel: calc(var(--barra-tel-h) + env(safe-area-inset-bottom, 0px));
}

/* ---------------------------------------------------------------------------
   1. LA BARRA IN BASSO
   --------------------------------------------------------------------------- */
/* Nel documento ha hidden (sul computer resta nascosta anche senza questo
   foglio): qui la si mostra. L'id batte il [hidden]{display:none!important}
   di Bootstrap. */
#barraTelefono.barra-tel{
    display:flex !important;
    position:fixed;left:0;right:0;bottom:0;z-index:1035;
    align-items:stretch;justify-content:space-around;
    height:var(--barra-tel);
    margin:0;
    padding:0 env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
    background:rgba(10,16,30,.95);
    -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
    border-top:1px solid rgba(148,163,184,.20);
    box-shadow:0 -8px 24px rgba(2,6,23,.38);
    font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
}
}
/* I tondi flottanti lasciano il posto alla barra (sul computer restano). */
body:has(#barraTelefono) #MainFooterButtons.MainFooterButtons{display:none !important;}

#barraTelefono .bt-voce{
    position:relative;flex:1 1 0;min-width:0;
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
    margin:0;padding:6px 2px 6px;border:0;border-radius:0;
    background:transparent;color:#A3B1C6;
    font:inherit;text-decoration:none;cursor:pointer;
    -webkit-tap-highlight-color:transparent;
    -webkit-user-select:none;user-select:none;
}
#barraTelefono .bt-voce:hover,
#barraTelefono .bt-voce:focus{color:#A3B1C6;text-decoration:none;}
#barraTelefono .bt-voce:focus-visible{outline:3px solid #38BDF8;outline-offset:-3px;border-radius:10px;}
/* La pillola dietro il simbolo: si accende sulla pagina in cui si e'. */
#barraTelefono .bt-icona{
    position:relative;display:flex;align-items:center;justify-content:center;
    width:56px;height:30px;border-radius:999px;
    transition:background-color .12s ease,box-shadow .12s ease;
}
#barraTelefono .bt-icona i{font-size:20px;line-height:1;}
#barraTelefono .bt-nome{
    display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
    font-size:13px;font-weight:600;line-height:16px;letter-spacing:-.005em;
}
/* La voce della pagina attuale: pillola ciano, simbolo ciano, nome marcato
   (non solo colore: anche la pillola e il peso del nome). */
#barraTelefono .bt-voce.e-attiva,
#barraTelefono .bt-voce.e-attiva:hover,
#barraTelefono .bt-voce.e-attiva:focus{color:#FFFFFF;}
#barraTelefono .bt-voce.e-attiva .bt-icona{background:rgba(34,211,238,.18);box-shadow:inset 0 0 0 1px rgba(34,211,238,.65);}
#barraTelefono .bt-voce.e-attiva .bt-icona i{color:#22D3EE;}
#barraTelefono .bt-voce.e-attiva .bt-nome{font-weight:800;}
/* In grassetto «Appuntamenti» del paziente e' qualche pixel piu' largo
   della sua colonna (92 px su 86-90 a 360-375 px) e si leggeva
   «Appuntame…»: la voce accesa puo' uscire di poco dal suo spazio, al
   centro, invece di troncarsi (le voci accanto hanno nomi corti). */
#barraTelefono .bt-voce.e-attiva .bt-nome{max-width:calc(100% + 12px);overflow:visible;text-overflow:clip;}
/* Finestra dei messaggi aperta: il fumetto resta acceso finche' e' aperta. */
#barraTelefono .bt-voce[aria-expanded="true"] .bt-icona{background:rgba(34,211,238,.14);}
/* Aria: lo stesso viola-blu del tondo, del Briefing e della visita. */
#barraTelefono .bt-aria .bt-icona{width:46px;background:linear-gradient(135deg,#A855F7 0%,#3B82F6 100%);
    color:#FFFFFF;box-shadow:0 4px 12px rgba(139,92,246,.40);}
#barraTelefono .bt-aria .bt-icona i{font-size:18px;color:#FFFFFF;}
/* Il pallino dei non letti, come quello dei tondi (99+ al massimo). La
   classe noti_msg / noti_notifications lo fa aggiornare da app-functions.js. */
#barraTelefono .bt-num{
    position:absolute;top:-5px;left:calc(50% + 5px);
    display:flex;align-items:center;justify-content:center;
    min-width:20px;height:20px;padding:0 5px;border-radius:999px;
    background:#DC2626;color:#FFFFFF;border:2px solid #0A101E;
    font-size:11.5px;font-weight:800;line-height:1;white-space:nowrap;font-variant-numeric:tabular-nums;
}
#barraTelefono .bt-num.e-vuoto{display:none;}
/* Al tocco la pillola si scurisce e si stringe appena. */
#barraTelefono .bt-voce:active .bt-icona{background:rgba(148,163,184,.24);scale:.94;}
#barraTelefono .bt-aria:active .bt-icona{background:linear-gradient(135deg,#A855F7 0%,#3B82F6 100%);filter:brightness(.85);}

/* Giorno */
html[data-tema="giorno"] #barraTelefono.barra-tel{background:rgba(255,255,255,.97);border-top-color:#DCE3EC;
    box-shadow:0 -6px 18px rgba(15,23,42,.08);}
html[data-tema="giorno"] #barraTelefono .bt-voce,
html[data-tema="giorno"] #barraTelefono .bt-voce:hover,
html[data-tema="giorno"] #barraTelefono .bt-voce:focus{color:#475569;}
html[data-tema="giorno"] #barraTelefono .bt-voce.e-attiva,
html[data-tema="giorno"] #barraTelefono .bt-voce.e-attiva:hover{color:#0B5F73;}
html[data-tema="giorno"] #barraTelefono .bt-voce.e-attiva .bt-icona{background:#E0F2F7;box-shadow:inset 0 0 0 1px #0E7490;}
html[data-tema="giorno"] #barraTelefono .bt-voce.e-attiva .bt-icona i{color:#0E7490;}
html[data-tema="giorno"] #barraTelefono .bt-voce[aria-expanded="true"] .bt-icona{background:#E0F2F7;}
html[data-tema="giorno"] #barraTelefono .bt-voce:active .bt-icona{background:#E2E8F0;}
html[data-tema="giorno"] #barraTelefono .bt-aria .bt-icona,
html[data-tema="giorno"] #barraTelefono .bt-aria .bt-icona i{color:#FFFFFF;}
html[data-tema="giorno"] #barraTelefono .bt-num{border-color:#FFFFFF;}
html[data-tema="giorno"] #barraTelefono .bt-voce:focus-visible{outline-color:#0E7490;}

/* Telefoni stretti (320-359 px): un quinto di schermo e' 64 px, un quarto 80.
   «Appuntamenti» del paziente (circa 82 px) puo' uscire di qualche pixel dal
   suo spazio invece di troncarsi: le voci accanto hanno nomi corti. */
@media (max-width:359.98px){
    #barraTelefono .bt-icona{width:50px;}
    #barraTelefono .bt-aria .bt-icona{width:42px;}
    #barraTelefono .bt-nome{font-size:12.5px;letter-spacing:-.015em;max-width:calc(100% + 10px);overflow:visible;text-overflow:clip;}
}

/* Telefono coricato (schermo basso): barra da 48 px, simbolo e nome affiancati,
   per lasciare piu' pagina in vista. */
@media (max-height:480px) and (orientation:landscape){
    :root{--barra-tel-h:48px;}
    #barraTelefono .bt-voce{flex-direction:row;gap:7px;padding:4px 2px;}
    #barraTelefono .bt-icona{width:40px;height:28px;}
    #barraTelefono .bt-aria .bt-icona{width:36px;}
}

/* La barra si toglie di mezzo quando non serve:
   - la visita aperta a tutto schermo ha i suoi pulsanti in basso;
   - con la tastiera aperta in un campo (telefono-navigazione.js) starebbe
     sopra la tastiera e coprirebbe quello che si scrive;
   - con il menu aperto.
   Le finestre a tutto schermo (pazienti, ricettario, chat, Aria, pannelli,
   richieste...) hanno uno z-index piu' alto (1050-1900) e la coprono da sole.
   Tre regole separate: in una lista unica un browser che non conosce :has()
   scarterebbe anche le altre due. */
body.visita-focus #barraTelefono.barra-tel{display:none !important;}
html.tel-tastiera #barraTelefono.barra-tel{display:none !important;}
body:has(#asideMenu.active) #barraTelefono.barra-tel{display:none !important;}

/* La pagina finisce sopra la barra: uno spazio alto quanto lei in fondo al
   corpo (che e' una colonna flex). Il vecchio margine di 70 px per i tondi
   (css_general) non serve piu'. Con la riga dei cookie aperta
   app-functions.js aggiunge in piu' la sua altezza (stile sul body). */
body:has(#barraTelefono)::after{content:"";display:block;flex:0 0 auto;
    height:calc(var(--barra-tel-h) / var(--tz, 1) + env(safe-area-inset-bottom, 0px));}
html body.page-system:has(#barraTelefono),
html body.page-custom:has(#barraTelefono){padding-bottom:0;}
/* L'area del paziente lasciava 84 px in fondo per i tondi (telefono-paziente.css):
   ora lo spazio della barra c'e' gia', e quei 84 px erano un vuoto in piu'. */
body:has(#barraTelefono) .container:has(> .pz-intestazione){padding-bottom:16px;}
/* La riga dei cookie sta sopra la barra, non sopra le voci. */
body:has(#barraTelefono) .showBanner{bottom:var(--barra-tel) !important;}
/* Con il Briefing a tutto schermo e con la visita aperta la barra in basso
   non c'e' e la riga dei cookie copriva righe del Briefing e, nella visita,
   le allergie sopra la barra Posologia/Strumenti/Aria: si nasconde finche'
   sono aperti e torna appena si chiudono (come gia' con il video di
   benvenuto, doctor-dashboard.css). Due regole: una lista con :has() cade
   intera nei browser che non lo conoscono. */
body.visita-focus .showBanner{visibility:hidden;}
body:has(#briefVelo) .showBanner{visibility:hidden;}

/* ---------------------------------------------------------------------------
   2. LA BARRA IN ALTO SU UNA RIGA
   Scrivania e Team sono nella barra in basso; Tutorial, Pausa e Assistenza nel
   menu, con A−/A+, giorno/notte e Installa (gruppo «Aspetto»). Restano il
   logo e il menu. Le regole della vecchia fascia (in includes/navbar) restano
   per chi non ha la barra in basso.
   --------------------------------------------------------------------------- */
/* Stessa altezza per tutti: il medico aveva 60 px (prima 108 con la fascia),
   il paziente era rimasto ai 68 px del computer. */
body:has(#barraTelefono) header .mod-nav .nav-inner{height:60px;padding-bottom:0;}
body:has(#barraTelefono) header .mod-nav .nav-inner > .nav-center{display:none !important;}
body:has(#barraTelefono) header .mod-nav .taglia-testo,
body:has(#barraTelefono) header .mod-nav #btnTema,
body:has(#barraTelefono) header .mod-nav #btnInstalla{display:none !important;}
/* Senza la fascia la pagina non scende piu' dei suoi 40 px. */
html body:has(#barraTelefono){padding-top:env(safe-area-inset-top, 0px);}
/* Le sezioni a cui la pagina scende da sola tornano al margine della barra
   di una riga (84 px, come prima della fascia). */
body:has(#barraTelefono) :is(#agendaSezione, #panel-studi-medici, #colonnaStrumenti),
body:has(#barraTelefono) #cancellation-requests-box{scroll-margin-top:84px;}
/* Le sezioni dell'area del paziente raggiunte dal menu e dalla barra:
   il titolo resta sotto la barra in alto (peso zero: se la pagina del
   paziente ne decide uno suo, vince il suo). */
:where(body:has(#barraTelefono)) :where(#pzAppuntamenti, #pzRicette, #pzDocumenti, #pzMedici, #pzRicetteSezione, #pzFatture, #pzCarica, #pzRacconta, #pzDati, details.pz-miei-dati){scroll-margin-top:76px;}

/* ---------------------------------------------------------------------------
   3. IL MENU A TRE RIGHE
   --------------------------------------------------------------------------- */
/* Solo dove c'e' :has(): altrimenti il menu di sempre non si nasconderebbe
   e si vedrebbero tutti e due (vedi «Browser vecchi» in cima). */
@supports selector(:has(a)){
header #asideMenu .menu-tel{display:block !important;margin:0 0 6px;}
}
header #asideMenu:has(.menu-tel) .menu-classico{display:none !important;}
header #asideMenu:has(.menu-tel){padding-left:16px;padding-right:16px;padding-top:52px;}

header #asideMenu .menu-tel .mt-titolo{
    margin:20px 12px 6px;padding:0;
    font-size:12.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;line-height:1.3;
    color:#8C9BB1;
}
header #asideMenu .menu-tel .mt-titolo:first-child{margin-top:2px;}
header #asideMenu .menu-tel .mt-voce{
    display:flex;align-items:center;gap:14px;min-height:48px;margin:0;padding:0 12px;
    border-radius:12px;color:#E2E8F0;font-size:16px;font-weight:600;line-height:1.25;text-decoration:none;
    -webkit-tap-highlight-color:transparent;
}
header #asideMenu .menu-tel .mt-voce span{min-width:0;}
header #asideMenu .menu-tel .mt-voce i{flex-shrink:0;width:22px;text-align:center;font-size:19px;color:#7DD3FC;}
header #asideMenu .menu-tel .mt-voce.e-pausa i{color:#FB923C;}
header #asideMenu .menu-tel .mt-voce:hover,
header #asideMenu .menu-tel .mt-voce:focus{color:#E2E8F0;text-decoration:none;}
header #asideMenu .menu-tel .mt-voce:focus-visible{outline:3px solid #38BDF8;outline-offset:-3px;}
header #asideMenu .menu-tel .mt-voce:active{background:rgba(148,163,184,.16);}
/* La pagina in cui si e'. */
header #asideMenu .menu-tel .mt-voce.e-attiva{background:rgba(34,211,238,.14);color:#FFFFFF;box-shadow:inset 3px 0 0 #22D3EE;}
header #asideMenu .menu-tel .mt-voce.e-attiva i{color:#22D3EE;}

/* «Aspetto»: taglia del testo, giorno/notte, Installa. */
header #asideMenu .menu-tel .mt-aspetto{display:flex;flex-direction:column;gap:8px;padding:0 2px;}
header #asideMenu .menu-tel .mt-taglia{display:flex;align-items:center;gap:6px;min-height:52px;padding:0 4px 0 12px;
    border-radius:12px;border:1px solid rgba(148,163,184,.22);background:rgba(255,255,255,.03);}
header #asideMenu .menu-tel .mt-taglia-nome{flex:1 1 auto;font-size:16px;font-weight:600;color:#E2E8F0;}
header #asideMenu .menu-tel .mt-taglia-valore{min-width:30px;text-align:center;font-size:14px;font-weight:800;color:#A3B1C6;
    font-variant-numeric:tabular-nums;}
header #asideMenu .menu-tel .mt-tasto{
    display:inline-flex;align-items:center;justify-content:center;gap:8px;
    min-width:44px;height:44px;margin:0;padding:0 10px;border-radius:10px;cursor:pointer;
    border:1px solid rgba(148,163,184,.35);background:rgba(255,255,255,.06);color:#E2E8F0;
    font-family:inherit;font-size:16px;font-weight:800;line-height:1;
    -webkit-tap-highlight-color:transparent;
}
header #asideMenu .menu-tel .mt-tasto:disabled{opacity:.4;cursor:default;}
header #asideMenu .menu-tel .mt-tasto:focus-visible{outline:3px solid #38BDF8;outline-offset:2px;}
header #asideMenu .menu-tel .mt-tasto:active:not(:disabled){background:rgba(148,163,184,.22);scale:.97;}
/* Giorno/notte e «Installa l'app» affiancati; se non ci stanno (telefoni
   stretti, «Apri l'app»...) vanno uno sotto l'altro, larghi quanto il menu. */
header #asideMenu .menu-tel .mt-aspetto-riga{display:flex;flex-wrap:wrap;gap:8px;}
header #asideMenu .menu-tel .mt-tasto.e-largo{flex:1 1 auto;height:48px;border-radius:12px;font-size:15px;font-weight:700;white-space:nowrap;}
header #asideMenu .menu-tel .mt-tasto.e-largo i{font-size:18px;color:#7DD3FC;}
header #asideMenu .menu-tel .mt-tasto[hidden]{display:none;}
/* Il tasto del tema dice dove porta: di notte «Giorno», di giorno «Notte». */
header #asideMenu .menu-tel .e-solo-giorno{display:none;}
html[data-tema="giorno"] header #asideMenu .menu-tel .e-solo-giorno{display:inline;}
html[data-tema="giorno"] header #asideMenu .menu-tel .e-solo-notte{display:none;}

/* «Esci»: staccato e rosso. */
header #asideMenu .menu-tel .mt-esci{margin-top:22px;position:relative;color:#F87171;}
header #asideMenu .menu-tel .mt-esci::before{content:"";position:absolute;left:12px;right:12px;top:-12px;
    border-top:1px solid rgba(148,163,184,.20);}
header #asideMenu .menu-tel .mt-esci i,
header #asideMenu .menu-tel .mt-esci:hover,
header #asideMenu .menu-tel .mt-esci:focus{color:#F87171;}
/* «Elimina account» del paziente: piccolo, grigio, in fondo e lontano. */
header #asideMenu .menu-tel .mt-elimina{display:inline-flex;align-items:center;min-height:44px;margin:26px 0 0 12px;padding:0 2px;
    font-size:13px;font-weight:500;color:#8C9BB1;text-decoration:underline;text-underline-offset:3px;}
header #asideMenu .menu-tel .mt-elimina:hover,
header #asideMenu .menu-tel .mt-elimina:focus{color:#A3B1C6;}

/* I collegamenti legali in fondo al menu: una riga piccola, poi la societa'. */
header #asideMenu:has(.menu-tel) > hr{margin:10px 0 0;border-color:rgba(148,163,184,.16);}
header #asideMenu:has(.menu-tel) > .text-center{padding:8px 0 0 !important;}
header #asideMenu:has(.menu-tel) .card-body{display:flex;flex-direction:column;}
header #asideMenu:has(.menu-tel) .card-body > .list-inline{order:-1;margin:0 0 4px;gap:0 12px;}
header #asideMenu:has(.menu-tel) .list-inline .link-footer{display:inline-flex;align-items:center;min-height:32px;padding:0 2px;line-height:1.2;}
header #asideMenu:has(.menu-tel) .card-body > small{font-size:12px;line-height:1.5;}
header #asideMenu:has(.menu-tel) .foot-legal{font-size:12px;line-height:1.5;margin-top:6px;}

/* Giorno */
html[data-tema="giorno"] header #asideMenu .menu-tel .mt-titolo{color:#5B6B82;}
html[data-tema="giorno"] header #asideMenu .menu-tel .mt-voce,
html[data-tema="giorno"] header #asideMenu .menu-tel .mt-voce:hover,
html[data-tema="giorno"] header #asideMenu .menu-tel .mt-voce:focus{color:#1E293B;}
html[data-tema="giorno"] header #asideMenu .menu-tel .mt-voce i{color:#0E7490;}
html[data-tema="giorno"] header #asideMenu .menu-tel .mt-voce.e-pausa i{color:#EA580C;}
html[data-tema="giorno"] header #asideMenu .menu-tel .mt-voce:active{background:#EEF2F7;}
html[data-tema="giorno"] header #asideMenu .menu-tel .mt-voce.e-attiva{background:#E0F2F7;color:#0B5F73;box-shadow:inset 3px 0 0 #0E7490;}
html[data-tema="giorno"] header #asideMenu .menu-tel .mt-voce.e-attiva i{color:#0E7490;}
html[data-tema="giorno"] header #asideMenu .menu-tel .mt-taglia{border-color:#CBD5E1;background:#FFFFFF;}
html[data-tema="giorno"] header #asideMenu .menu-tel .mt-taglia-nome{color:#1E293B;}
html[data-tema="giorno"] header #asideMenu .menu-tel .mt-taglia-valore{color:#475569;}
html[data-tema="giorno"] header #asideMenu .menu-tel .mt-tasto{border-color:#B9C4D6;background:#FFFFFF;color:#1E293B;}
html[data-tema="giorno"] header #asideMenu .menu-tel .mt-tasto:active:not(:disabled){background:#EEF2F7;}
html[data-tema="giorno"] header #asideMenu .menu-tel .mt-tasto.e-largo i{color:#0E7490;}
html[data-tema="giorno"] header #asideMenu .menu-tel .mt-tasto:focus-visible{outline-color:#0E7490;}
html[data-tema="giorno"] header #asideMenu .menu-tel .mt-esci,
html[data-tema="giorno"] header #asideMenu .menu-tel .mt-esci i,
html[data-tema="giorno"] header #asideMenu .menu-tel .mt-esci:hover{color:#DC2626;}
html[data-tema="giorno"] header #asideMenu .menu-tel .mt-esci::before{border-top-color:#E2E8F0;}
html[data-tema="giorno"] header #asideMenu .menu-tel .mt-elimina{color:#5B6B82;}

/* ---------------------------------------------------------------------------
   4. IL PIE' DI PAGINA DELL'AREA RISERVATA
   Era alto quasi uno schermo (592 px su 812) e ripeteva i collegamenti del
   menu. Ora: i quattro collegamenti in fila, poi copyright e societa' in
   piccolo. I testi legali restano quelli (includes/footer, foot-legal); la
   frase «non formula diagnosi…» resta nelle pagine pubbliche e nelle Condizioni.
   --------------------------------------------------------------------------- */
body:has(#barraTelefono) footer .mod-footer{margin:0;padding:0;background:transparent;border-top:1px solid rgba(148,163,184,.12);border-radius:0;}
body:has(#barraTelefono) footer .mod-footer .foot-inner{max-width:none;margin:0;padding:12px 16px 14px;background:transparent;border:0;border-radius:0;box-shadow:none;}
body:has(#barraTelefono) footer .mod-footer .foot-logo,
body:has(#barraTelefono) footer #mod-footer p.foot-note{display:none !important;}
body:has(#barraTelefono) footer .mod-footer .foot-inner{text-align:center;font-size:12px;line-height:1.5;}
body:has(#barraTelefono) footer .mod-footer .foot-links{display:flex;flex-wrap:wrap;justify-content:center;gap:0 12px;margin:0 0 6px;}
body:has(#barraTelefono) footer .mod-footer .foot-links a{display:inline-flex;align-items:center;min-height:32px;padding:0 2px;font-size:13px;line-height:1.2;}
body:has(#barraTelefono) footer .mod-footer .foot-legal{display:inline;margin:0;padding:0;border:0;font-size:12px;line-height:1.5;}
body:has(#barraTelefono) footer .mod-footer .foot-legal br{display:none;}
body:has(#barraTelefono) footer .mod-footer .foot-legal + .foot-legal::before{content:" · ";}

/* ---------------------------------------------------------------------------
   5. FLUIDITA'
   --------------------------------------------------------------------------- */
/* Il sipario solo al primo ingresso dopo l'accesso (includes/telefono-css):
   nelle pagine dopo, niente velo e niente attesa; barra in alto e barra in
   basso ferme, il contenuto entra con una dissolvenza breve. */
html.tel-subito #page-loader{display:none !important;}
html.tel-subito #page-content{display:block !important;}
/* Senza «both»/«forwards»: un'animazione che resta applicata dopo la fine
   fa del <main> un contesto di sovrapposizione, e le finestre che stanno
   li' dentro (Posticipa, «Ho capito», Avvisi del paziente, Cerca paziente
   dell'Agenda...) finivano sotto le barre e sotto il velo scuro. */
html.tel-subito #page-content > main{animation:telEntra .16s ease-out;}
@keyframes telEntra{from{opacity:0;}to{opacity:1;}}
@media (prefers-reduced-motion: reduce){html.tel-subito #page-content > main{animation:none;}}

/* Stato «premuto»: ogni comando risponde subito al dito, si scurisce e si
   stringe appena (l'evidenziazione del browser e' spenta da Bootstrap).
   «scale» e «filter» non toccano gli spostamenti gia' scritti in transform.
   Gli effetti al passaggio del mouse, sul telefono senza mouse, li spegne
   telefono-navigazione.js. */
:is(button, .btn, [role="button"], input[type="submit"], input[type="button"], summary,
    .doc-stat-card, .list-group-item-action, .nav-ico, .btn-installa, .mobile-menu-btn):not(:disabled):active{
    scale:.97;filter:brightness(.88);
}
a:not(.btn):not(.doc-stat-card):not(.list-group-item-action):not(.nav-ico):not(.bt-voce):not(.mt-voce):active{opacity:.72;}
/* Elementi grandi o che si trascinano: niente rimpicciolimento. */
:is(#barraTelefono .bt-voce, header #asideMenu .mt-voce, #pannelloOverlay, .fc-event, input[type="range"]):active{scale:none;filter:none;}

/* ---------------------------------------------------------------------------
   6. BORDI DELL'IPHONE (con viewport-fit=cover, messo in verticale da
   includes/telefono-css). Valgono zero dove non c'e' tacca.
   --------------------------------------------------------------------------- */
body:has(#barraTelefono) header #mod-nav{padding-top:env(safe-area-inset-top, 0px);
    padding-left:env(safe-area-inset-left, 0px);padding-right:env(safe-area-inset-right, 0px);}

} /* fine di @media screen */