/* 📱 AGENDA DAL TELEFONO — SOLO LA TESTATA E IL PIÈ DI PAGINA
   13/09/2026 ore 18:45 · MASTER · task #1249 · mockup v7 (artifact 54052ea0)

   ⚠️ QUESTO FILE TOCCA DUE FASCE, E NIENT'ALTRO.
      Ordine di Pietro: «basta che non tocchi un cazzo e lavori su testata e piè di pagina».
      Il corpo della pagina — le carte, la giornata, le finestre, la modalità a schermo
      intero — resta esattamente com'è. Se una regola qui sotto tocca qualcosa che non sia
      la fascia in alto o quella in basso, è un errore, non una scelta.

   📌 E vale solo sotto i 620 px: da computer non cambia niente, mai.

   🕳 La versione di ieri sera è stata staccata perché metteva pezzi sopra tutta la pagina
      mentre Pietro la usava. Quella sta in agenda_mobile.css.vecchio_staccato. */

@media (max-width: 620px) {

  /* ── ① VIA LE QUATTRO FASCE CHE STANNO SOPRA IL LAVORO ────────────────
     La testata blu, il mese con le frecce piccole, la fila dei filtri con «Regole».
     Restano nel DOM — non si cancella niente — e sul computer si vedono come prima. */
  body.tel-nuovo header .head { display: none !important; }
  body.tel-nuovo .panel > .bar { display: none !important; }

  /* 🚨 LA TESTATA BLU NON È NEL FILE DELLA PAGINA: la inietta `dpo_testata.js` come primo
        figlio del body, ed è un <header> senza id né classe propria (dentro ha
        `nav.dpo-testata-in`). Nasconderla con `header .head` non la toccava nemmeno — e
        la prima foto me l'ha fatta vedere ancora lì, con tutte e otto le voci.
        👉 La classe qui sotto gliela mette il JS, che la trova partendo da quel `nav`. */
  body.tel-nuovo .tel-via { display: none !important; }

  /* la barra vecchia a sei voci lascia il posto a quella nuova a quattro */
  body.tel-nuovo .mobile-nav { display: none !important; }

  /* i due bottoni tondi che coprivano l'ultimo giorno dell'elenco */
  body.tel-nuovo .planning-pie { display: none !important; }

  /* ── ② LA RIGA IN ALTO ────────────────────────────────────────────────
     Due righe: sopra dove sei, sotto cosa stai guardando. */
  .tel-testa {
    position: sticky; top: 0; z-index: 50;
    display: grid; grid-template-columns: 52px minmax(0, 1fr) 52px;
    gap: 7px; padding: 10px;
    background: #eaf2fc; border-bottom: 1px solid #d6dfea;
  }

  /* 🖐 58 px per lato: sotto i 44 un dito non centra con sicurezza, e queste frecce
        si premono col pollice senza guardare lo schermo. Prima erano alte 25. */
  .tel-testa .tel-frec {
    min-height: 58px; border: 1.5px solid #062c74; border-radius: 12px;
    background: #fff; color: #062c74; font-size: 25px; font-weight: 700; line-height: 1;
    display: flex; align-items: center; justify-content: center;
  }
  .tel-testa .tel-frec:active { background: #eaf2fc; }

  .tel-testa .tel-giorno {
    min-height: 58px; border: 1px solid #d6dfea; border-radius: 12px;
    background: #fff; padding: 0 6px; gap: 1px;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
  }
  .tel-testa .tel-giorno b {
    font-size: 15.5px; color: #062c74; line-height: 1.12; text-align: center;
  }
  .tel-testa .tel-giorno small {
    font-family: ui-monospace, Menlo, monospace; font-size: 9.5px; color: #78899e;
  }

  /* IL CENTRO DELLA RIGA, diviso a metà: la data e il tasto dello stato.
     Le due righe di prima erano 53 pixel che non vedevano mai una visita. */
  .tel-testa .tel-centro { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; min-width: 0; }
  .tel-modi > button {
    width: 100%; min-height: 58px; border-radius: 12px;
    border: 1.5px solid #d6dfea; background: #fff; color: #4a5a70;
    font: 700 13.5px inherit; letter-spacing: .03em;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  }
  .tel-modi > button b { font-size: 13.5px; }
  .tel-modi > button small { font-family: ui-monospace, Menlo, monospace; font-size: 9.5px; opacity: .8; font-weight: 500; }
  .tel-modi > button.on { background: #062c74; border-color: #062c74; color: #fff; }

  /* 🧹 QUI STAVA LA VECCHIA SECONDA RIGA, e l'avevo lasciata «per non rompere niente».
        Ha rotto proprio la cosa nuova: `grid-column: 1 / -1` continuava a mandare il tasto
        a capo sotto la data, e la testata restava alta 132 px invece di 78 — cioè i 53
        pixel che dovevo restituire ai sei giorni non tornavano affatto, e le carte
        restavano schiacciate come prima.
        📌 Una regola vecchia tenuta per sicurezza non è neutra: continua a valere, e vale
           contro quella nuova. Si toglie. */
  .tel-modi { display: block; min-width: 0; }

  /* ── 🩺 IL TASTO BRUNO, dentro la carta del giorno ─────────────────────
     Il tasto c'è già nella pagina (`.btn-bruno`, chiama `fogliomedico`): qui si fa una
     cosa sola, renderlo premibile. Era alto una decina di pixel — un dito non lo centra. */
  .week-day .btn-bruno.tel-bruno {
    display: inline-flex; align-items: center; gap: 4px; flex: 0 0 auto;
    min-height: 30px; padding: 4px 10px; margin-left: 0;
    border: 1px solid #1a4a9c; border-radius: 999px;
    background: #fff; color: #1a4a9c; font-size: 11.5px; font-weight: 700;
    white-space: nowrap; vertical-align: middle;
  }

  /* ── LA RIGA DEGLI ORARI ────────────────────────────────────────────────
     Cinque colonne UGUALI, non pillole che vanno a capo quando capita: con le pillole
     libere una giornata di orari lunghi ne fa stare quattro e quella dopo sei, e due
     carte vicine non si somigliano più. */
  .tel-ore { display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; margin-top: 8px; }
  .tel-ore b {
    font-family: ui-monospace, Menlo, monospace; font-size: 11px; font-weight: 500;
    border: 1px solid #d6dfea; border-radius: 999px; padding: 4px 2px;
    background: #f5f9ff; color: #132033; min-height: 28px;
    display: flex; align-items: center; justify-content: center;
  }
  /* l'ultima casella è il conto di quelle che non ci stanno, e si preme: bordo
     tratteggiato perché fa una cosa diversa dalle altre */
  .tel-ore b.ancora {
    border: 1.5px dashed #062c74; color: #062c74; font-weight: 700; background: #fff;
  }
  .tel-ore b.senzora { border-style: dashed; color: #9a5b06; background: #fdf3e3; font-size: 9.5px; }

  /* 🚨 QUI C'ERA UNA REGOLA MIA CHE ROMPEVA IL «+N», e l'ho vista solo provandola:
        `body.tel-nuovo .week-day .week-events{display:none!important}` nascondeva le
        pillole SEMPRE — anche dopo aver premuto «+14». La carta si apriva (la classe
        `closed` se ne andava davvero) e dentro non compariva niente: un tasto che
        sembrava non fare nulla, senza nessun errore da nessuna parte.
     ✅ E soprattutto era SUPERFLUA: la pagina ha già `.week-day.closed .week-events
        {display:none}`, cioè le nasconde da sé finché la carta è chiusa — che è
        esattamente quello che serviva. La mia regola non aggiungeva niente e toglieva
        il rimedio.
     📌 Sempre la stessa lezione: prima di scrivere una regola, guardare se quella
        giusta c'è già. */

  /* ── ③ IL CALENDARIO CHE SI APRE DAL GIORNO ───────────────────────────
     Sta sotto la riga in alto, non è una finestra: si apre, si sceglie, si chiude. */
  .tel-cal { padding: 12px; background: #f5f9ff; border-bottom: 1px solid #d6dfea; }
  /* 🚨 `hidden` da solo NON basta quando c'è un display esplicito: il display vince,
        e la cosa nascosta resta a schermo senza nessun errore. Pagata due volte. */
  .tel-cal[hidden] { display: none !important; }
  .tel-cal-testa { display: flex; align-items: center; gap: 8px; margin-bottom: 9px; }
  .tel-cal-testa b { font-size: 14.5px; color: #062c74; }
  .tel-cal-testa button {
    margin-left: auto; border: 1px solid #062c74; color: #062c74; background: #fff;
    border-radius: 8px; font: 600 11px inherit; padding: 6px 12px; min-height: 34px;
  }
  /* le tre viste, dentro il calendario: è il posto dove uno va per spostarsi nel tempo */
  .tel-viste { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; margin-bottom: 10px; }
  .tel-viste button {
    min-height: 38px; border-radius: 9px; border: 1px solid #d6dfea;
    background: #fff; color: #4a5a70; font: 600 12.5px inherit;
  }
  .tel-viste button.on { background: #062c74; border-color: #062c74; color: #fff; }
  body.tel-nuovo.tel-falconi .tel-viste button { background: #0d2144; border-color: #2a4a7d; color: #a9c2e6; }
  body.tel-nuovo.tel-falconi .tel-viste button.on { background: #e8f0fb; border-color: #e8f0fb; color: #0d2144; }
  body.tel-nuovo.tel-ambulatorio .tel-viste button.on { background: #146b51; border-color: #146b51; }

  .tel-cal-griglia { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
  .tel-cal-griglia i {
    font-style: normal; font-family: ui-monospace, Menlo, monospace;
    font-size: 9.5px; color: #78899e; text-align: center; padding-bottom: 2px;
  }
  .tel-cal-griglia button {
    background: #fff; border: 1px solid #d6dfea; border-radius: 8px; min-height: 38px;
    font: 500 13px inherit; color: #132033;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  }
  .tel-cal-griglia button.fuori { opacity: .3; }
  .tel-cal-griglia button.oggi { border: 2px solid #062c74; font-weight: 700; color: #062c74; background: #eaf2fc; }
  .tel-cal-griglia button.sel { background: #062c74; color: #fff; border-color: #062c74; font-weight: 700; }
  .tel-cal-griglia button u { width: 4px; height: 4px; border-radius: 50%; background: #c2410c; text-decoration: none; }
  .tel-cal-griglia button.sel u { background: #fff; }

  /* ── ④ IL PIÈ DI PAGINA: QUATTRO VOCI ─────────────────────────────────
     Icona 23, riga 10,5, alte 64: si prendono col pollice. */
  .tel-sotto {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 51;
    display: grid; grid-template-columns: repeat(4, 1fr);
    background: #fff; border-top: 1px solid #cedbe5;
    box-shadow: 0 -10px 30px #12366320;
    padding-bottom: env(safe-area-inset-bottom);
  }
  .tel-sotto button {
    border: 0; background: transparent; color: #062c74;
    min-height: 64px; padding: 9px 2px; gap: 4px;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center;
  }
  /* 🚨 `hidden` NON VINCE SU UN `display` ESPLICITO, e qui è costato la barra a due righe.
        Il bottone «Contabilità» viene nascosto a chi non è abilitato scrivendo
        `voce.hidden = true` — ma la riga qui sopra gli dà `display:flex`, che è più
        specifico e vince: il bottone restava a schermo, quattro voci in tre colonne, e la
        quarta andava a capo. Nessun errore, solo una barra alta il doppio.
        È la terza volta che pago questa trappola: `hidden` da solo è una speranza. */
  .tel-sotto button[hidden] { display: none !important; }
  .tel-sotto button i { font-style: normal; font-size: 23px; line-height: 1; }
  .tel-sotto button span { font-size: 10.5px; font-weight: 600; line-height: 1.1; }
  /* la prima voce non è una pagina, è un interruttore: si vede che è diversa */
  .tel-sotto button.scambio { background: #eaf2fc; }
  .tel-sotto button.scambio i { font-size: 20px; }

  /* ── ⑥ I SEI GIORNI OCCUPANO TUTTO LO SPAZIO, IN PARTI UGUALI ────────────
     Ordine di Pietro, 13/09 ore 21:20: «a prescindere che ci siano appuntamenti o meno,
     i 6 giorni a settimana devono occupare in maniera uguale e proporzionata tutta la
     parte della pagina tra le due testate».

     🎯 Perché conta, e non è estetica: con le carte alte quanto il loro contenuto, un
        mercoledì da una visita diventa una striscia e un martedì da diciassette un
        muro. L'occhio legge l'altezza come «quanto c'è» e la usa per orientarsi — ma
        l'altezza dipendeva dal caso, e la settimana cambiava forma ogni volta che si
        girava pagina. Sei riquadri uguali si imparano una volta: il terzo dall'alto è
        sempre mercoledì.
     🔑 `1fr` sei volte, non `min-height`: le frazioni si dividono lo spazio che c'è
        davvero, quindi restano uguali su un telefono piccolo come su uno grande. Lo
        spazio disponibile lo misura il JavaScript (le due fasce sono alte quanto sono) e
        lo scrive in `--tel-spazio`. */
  body.tel-nuovo .week-view {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: repeat(6, minmax(0, 1fr)) !important;
    gap: 8px !important;
    height: var(--tel-spazio, calc(100dvh - 220px));
    padding: 8px !important;
    overflow: hidden !important;
  }
  body.tel-nuovo .week-view .week-day {
    min-height: 0 !important; margin-bottom: 0 !important;
    display: flex !important; flex-direction: column !important; justify-content: center !important;
    overflow: hidden !important;
  }
  /* 🚨 E QUANDO SI APRE UN GIORNO, LA GRIGLIA UNIFORME SI SCIOGLIE.
        Parole di Pietro: «quando apri un giorno della settimana in modalità agenda non si
        apre un cazzo». Misurato: la carta si apriva davvero — la classe `closed` se ne
        andava e la lista passava a `display:block` — ma dentro una riga alta 84 px la
        lista risultava alta DIECI pixel. Apriva, e non si vedeva niente.
     👉 Sei riquadri uguali servono a leggere la settimana a colpo d'occhio. Nel momento in
        cui uno lo apri non stai più guardando la settimana: stai guardando quel giorno, e
        quel giorno deve avere lo spazio che gli serve. Quindi la griglia vale finché sono
        tutte chiuse; appena una si apre la pagina torna a scorrere.
     📌 La classe la mette il JavaScript guardando se esiste una carta aperta: `:has()` in
        un foglio di stile farebbe lo stesso, ma se un browser non lo capisce fallisce in
        silenzio — e il silenzio qui vuol dire di nuovo dieci pixel. */
  body.tel-nuovo .week-view.tel-aperta {
    display: block !important;
    height: auto !important;
    overflow: visible !important;
  }
  body.tel-nuovo .week-view.tel-aperta .week-day {
    display: block !important;
    margin-bottom: 10px !important;
  }
  /* 🚨 `:not(.closed)` — E SENZA QUELLO SI APRIVA TUTTA LA SETTIMANA.
        La regola diceva «dentro una vista che ha una carta aperta, mostra gli
        appuntamenti»: ma `.week-day .week-events` sono TUTTE le carte, comprese le cinque
        ancora chiuse. Toccavi lunedì e ti si aprivano lunedì, martedì, mercoledì e il
        resto — e il `!important` scavalcava proprio la regola della pagina
        (`.week-day.closed .week-events{display:none}`) che le teneva chiuse.
     📌 Un `!important` messo per far vedere una cosa fa vedere anche tutte le sue sorelle,
        se il selettore non dice QUALE. Qui lo dice. */
  body.tel-nuovo .week-view.tel-aperta .week-day:not(.closed) .week-events {
    display: block !important; overflow: visible !important;
  }
  /* ── 🏷 LA CARTA DEL GIORNO, COME NEL DISEGNO ────────────────────────────
     Una riga: GIORNO · [Bruno] · N visite. Sotto: gli orari. Nient'altro. */
  /* ── LE CARTE, COME NEL DISEGNO ────────────────────────────────────────
     Pietro: «le carte del mockup hanno un bordo colorato in basso, sono più alte, sono
     diverse». Aveva ragione su tutte e tre: il bordo l'avevo lasciato spegnere, e
     l'altezza non bastava — gli orari finivano tagliati a metà dal bordo inferiore.
     👉 Con la riga FULL/AGENDA tolta dalla testata ci sono 53 pixel in più da dividere
        fra i sei giorni: adesso le carte respirano e gli orari ci stanno interi. */
  body.tel-nuovo .week-view .week-day {
    padding: 10px 12px 12px !important;
    border-radius: 12px !important;
    border-bottom-width: 4px !important; border-bottom-style: solid !important;
  }
  /* ── IL COLORE DEL BORDO IN BASSO LO DECIDE IL CONTENUTO ─────────────────
     🚨 E per un po' non si è visto affatto: il colore del bordo veniva dal TEMA
        (`border-color: #c3ded3`, verde acqua chiarissimo), che scriveva tutti e quattro i
        lati e cancellava anche quello di sotto. Il bordo c'era — quattro pixel, misurati —
        ed era del colore dello sfondo. Il modo peggiore di essere invisibile: presente.
     👉 Adesso il tema tocca solo i tre lati che non dicono niente, e il bordo di sotto
        prende il colore dalle classi che la pagina mette già da sé:
        `has-falconi` = medicina del lavoro (ruggine), `has-private` = visite private
        (verde). Non invento una terza verità: leggo la sua. */
  body.tel-nuovo .week-view .week-day.has-falconi { border-bottom-color: #c2410c !important; }
  body.tel-nuovo .week-view .week-day.has-private { border-bottom-color: #11865b !important; }
  body.tel-nuovo .week-view .week-day:not(.has-falconi):not(.has-private) {
    border-bottom-color: #94a7bd !important;
  }
  /* oggi si vede: bordo pieno, fondo appena azzurro, ombra che lo stacca */
  body.tel-nuovo .week-view .week-day.today {
    border: 2px solid #062c74 !important; border-bottom-width: 5px !important;
    background: #f5f9ff !important; box-shadow: 0 4px 14px rgba(6,44,116,.22) !important;
  }
  body.tel-nuovo .week-view .week-summary {
    display: flex !important; align-items: center !important; gap: 8px !important;
    flex-wrap: nowrap !important; width: 100% !important;
  }
  /* 🔤 IL NOME DEL GIORNO NON SI TAGLIA, VA A CAPO.
        Con l'ellissi uscivano «Mercoledì · 9», «Giovedì · 10 S», «Sabato · 12 Se»: il
        giorno c'era, la data no — e la data è il motivo per cui si guarda quella riga.
        Nel disegno infatti «Mercoledì · 23 Set» sta su due righe, e va benissimo: lo
        spazio nella carta c'è. Tagliare per tenere una riga sola è scambiare la forma
        con il contenuto. */
  body.tel-nuovo .week-view .week-summary b {
    font-size: 14.5px !important; line-height: 1.2 !important;
    white-space: normal !important; overflow: visible !important;
    flex: 1 1 auto !important; min-width: 0 !important;
  }
  body.tel-nuovo .week-view .tel-quante {
    margin-left: auto !important; flex: 0 0 auto !important;
    font-family: ui-monospace, Menlo, monospace; font-size: 11.5px; color: #4a5a70;
    white-space: nowrap;
  }
  /* 🚫 VIA I DUE SEGNI CHE RUBAVANO LA RIGA:
        · il badge «Full» — è lo stato in cui sei, e sta scritto una volta in alto;
        · la freccetta ∨ — la carta si apre toccandola, e la freccetta indicava una cosa
          che si capisce già premendola.
        Non è pulizia per bellezza: con loro la carta andava oltre lo spazio che ha, e gli
        orari uscivano TAGLIATI A METÀ dal bordo. */
  body.tel-nuovo .week-view .week-summary i,
  body.tel-nuovo .week-view .week-summary small,
  body.tel-nuovo .week-view .week-day .btn-full,
  body.tel-nuovo .week-view .week-day .badge { display: none !important; }
  /* ⚠️ `.btn-full`, non `.full`: il nome me l'ero portato dietro dal MOCKUP, dove l'avevo
        chiamato io in quel modo. Nella pagina vera si chiama `btn-full`, e la mia regola
        non toccava niente — nessun errore, il badge semplicemente restava lì in mezzo al
        nome del giorno, spingendolo a capo.
        📌 Un nome preso dal proprio disegno invece che dalla pagina è la stessa famiglia
           di `#sofiaBolla` di stasera: si legge dal codice, non dalla memoria. */

  /* gli orari restano leggibili anche quando la riga è bassa, e NON si tagliano */
  body.tel-nuovo .week-view .tel-ore { margin-top: 7px !important; flex: 0 0 auto !important; }
  body.tel-nuovo .week-view .week-day.closed { overflow: hidden !important; }

  /* ── 🪟 LE FINESTRE DELLA PAGINA, DA TELEFONO ────────────────────────────
     Pietro, 14/09 ore 00:15: «in modalità FULL da mobile, se si preme TOX si apre una
     modale che non arriva in fondo per i bottoni della firma; rimane lì incastrata».

     🔎 MISURATO, ed è esattamente così: il corpo della finestra del verbale è alto
        1544 px dentro uno schermo di 844, e NON SCORRE — altezza del contenuto e altezza
        visibile coincidono, cioè non c'è nessuna barra di scorrimento da nessuna parte.
        Tutto quello che sta oltre gli 844 px non è raggiungibile in nessun modo: non è
        nascosto, è irraggiungibile. Su un computer la finestra ci sta e il difetto non
        esiste; su un telefono si perde la metà di sotto, firma compresa.
     🚨 E la mia barra delle quattro voci peggiorava le cose: sta fissa in basso a quota
        alta, e copriva anche l'ultimo pezzo che si sarebbe visto.

     👉 Due cure, e nessuna delle due inventa niente di nuovo:
        ① il corpo della finestra SCORRE, dentro l'altezza che ha davvero;
        ② quando una finestra è aperta la barra in basso si toglie di mezzo — una finestra
           a schermo pieno vuole tutto lo schermo, ed è la stessa idea per cui le bolle
           spariscono: da telefono non esiste «accanto», esiste solo «sopra». */
  body.tel-nuovo .overlay:not(.hide) { align-items: stretch !important; padding: 0 !important; }
  body.tel-nuovo .overlay:not(.hide) > .modal {
    display: flex !important; flex-direction: column !important;
    max-height: 100dvh !important; height: 100dvh !important;
    border-radius: 0 !important; margin: 0 !important; width: 100% !important;
  }
  body.tel-nuovo .overlay:not(.hide) > .modal > .modal-head { flex: 0 0 auto !important; }
  body.tel-nuovo .overlay:not(.hide) > .modal > .modal-body,
  body.tel-nuovo .overlay:not(.hide) > .modal > form.modal-body {
    flex: 1 1 auto !important; min-height: 0 !important;
    overflow-y: auto !important; -webkit-overflow-scrolling: touch;
    padding-bottom: 18px !important;
  }
  /* il piede della finestra resta attaccato in fondo e sopra la tacca del telefono */
  body.tel-nuovo .overlay:not(.hide) .v-footer {
    padding-bottom: calc(12px + env(safe-area-inset-bottom)) !important;
  }
  /* ② la barra in basso si toglie quando c'è una finestra aperta */
  body.tel-nuovo.tel-finestra .tel-sotto { display: none !important; }

  /* ── 🏠 LA FINESTRA DI HOME ──────────────────────────────────────────────
     Due strade opposte — ricominciare o andarsene — e si sceglie, non si indovina. */
  .tel-home {
    position: fixed; inset: 0; z-index: 70;
    background: rgba(9, 22, 44, .55);
    display: flex; align-items: flex-end; justify-content: center;
    padding: 0 0 env(safe-area-inset-bottom);
  }
  .tel-home-carta {
    width: 100%; background: #fff; border-radius: 20px 20px 0 0;
    padding: 14px 14px 20px; display: grid; gap: 9px;
    box-shadow: 0 -12px 40px rgba(6, 44, 116, .3);
  }
  .tel-home-carta button {
    display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 12px;
    align-items: center; text-align: left;
    min-height: 62px; padding: 10px 14px; border-radius: 14px;
    border: 1.5px solid #d6dfea; background: #fff; color: #062c74;
  }
  .tel-home-carta button i {
    font-style: normal; font-size: 24px; line-height: 1; grid-row: 1 / 3; align-self: center;
  }
  .tel-home-carta button b { font-size: 15.5px; }
  .tel-home-carta button small { font-size: 12.5px; color: #4a5a70; grid-column: 2; }
  .tel-home-carta button.annulla {
    display: flex; justify-content: center; min-height: 48px;
    border-color: transparent; color: #4a5a70; font-weight: 600;
  }

  /* il corpo non deve finire sotto la barra fissa */
  body.tel-nuovo main { padding-bottom: 84px; }

  /* ── ⑤ LA MODALITÀ FULL DAL TELEFONO ───────────────────────────────────
     Quattro cose che Pietro ha sbarrato sulla foto del 13/09 ore 20:30.

     ① LE DATE DEGLI ESAMI SI IMPASTAVANO: «30/06/202524/10/2023».
        Le caselle erano larghe 39 px — misurato — e dentro ci devono stare una data
        intera più la cadenza («30/06/2025 · 12m»). Non ci stavano, e uscivano una
        sull'altra: due date attaccate sembrano un numero solo, e non si capisce più
        quale esame è vecchio.
        ⚠️ Non è colpa di una regola per il telefono: quelle misure arrivano da
           `@media(max-width:1240px)`, scritta per stringere le carte sul portatile.
           Sotto i 620 px continua a valere, e lì stringe troppo. */
  body.tel-nuovo .carta-visita .cv-esami {
    max-width: 100% !important;
    display: flex; flex-wrap: wrap; gap: 6px !important;
  }
  body.tel-nuovo .carta-visita .cv-esami i {
    flex: 0 0 auto; min-width: 96px;
    padding: 5px 9px !important; font-size: 11px !important;
    display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  }
  /* la data va su una riga sua e per intero: tagliata non serve a niente */
  body.tel-nuovo .carta-visita .cv-esami i u {
    font-size: 10px !important; white-space: nowrap; text-decoration: none; opacity: .85;
  }
  /* con le caselle più larghe il nome non deve più stare stretto sotto l'ora */
  body.tel-nuovo .carta-visita h4,
  body.tel-nuovo .carta-visita .cv-occhiello { padding-right: 0 !important; }

  /* ② IL CRONOMETRO GIGANTE: 104 px di altezza per dire l'ora, che il telefono ha già
        scritta in cima al suo schermo. Occupa lo spazio della prima visita. */
  body.tel-nuovo .giornata-orologio { display: none !important; }

  /* ③ IL TONDO IN ALTO A DESTRA (il microfono) copriva il giorno in testata. */
  body.tel-nuovo #dpo-voce-bottone { display: none !important; }

  /* ④ VIA LE BOLLE, TUTTE, DA TELEFONO — ordine di Pietro, 13/09 ore 20:55:
        «via le bolle, anche quelle in basso di chat e attività».

     ⚠️ CI SONO ARRIVATO IN TRE PASSI, e i primi due erano sbagliati nello stesso modo.
        Alle 20:40 avevo SPOSTATO la bolla di Sofia (z-index più basso, alzata da terra):
        nella foto dopo era ancora addosso al giorno. Alle 20:50 l'avevo tolta solo in
        FULL: restava in agenda. Spostare o restringere non serve — su un telefono lo
        schermo è tutto lì, e qualunque posto dài a una cosa che galleggia è sopra
        qualcosa che serve.
     👉 Da telefono non ne resta nessuna: né Sofia, né la chat, né le attività.
        Non si perde niente: Sofia sta nella barra in basso, sempre a fondo schermo e
        senza coprire nulla — ed è una voce che si preme, non una bolla che si schiva.
     📌 Si NASCONDONO, non si cancellano: sul computer sono esattamente come prima, e
        staccando le due righe di aggancio tornano anche qui. */
  body.tel-nuovo .dpb-bolla,
  body.tel-nuovo .dpb-attrezzi-bolla,
  body.tel-nuovo .dpb-avviso-voce,
  body.tel-nuovo .dpb-barra,
  body.tel-nuovo .t-bolla,
  body.tel-nuovo #nomina-toast-wrap,
  body.tel-nuovo [class*="toast"],
  body.tel-nuovo .planning-pie { display: none !important; }

  /* ⑤ LA FASCIA DELLA GIORNATA: resta solo «Esci».
        Pietro l'ha sbarrata tutta sulla foto delle 20:50, e ha ragione: «Lunedì 7
        Settembre 2026 · 8 visite» è la STESSA data che la riga in alto scrive due
        centimetri più su. Due volte lo stesso dato non è una conferma: è una riga rubata
        alla prima visita, e su un telefono le righe sono contate.
     👉 Resta «Esci», che è l'unica cosa che la riga in alto non fa. Il conto delle visite
        non si perde: sta nella carta di ogni giorno, in agenda.
     ⚠️ Alle 20:50 l'avevo solo COMPATTATA (titolo su una riga, via l'istruzione col
        mouse): è tornata indietro sbarrata uguale. Quando una cosa è di troppo,
        stringerla la lascia di troppo — più piccola. */
  body.tel-nuovo .giornata-testa {
    padding: 6px 12px !important; min-height: 0 !important;
    display: flex !important; justify-content: flex-end !important; align-items: center !important;
    background: transparent !important; border: 0 !important; box-shadow: none !important;
  }
  body.tel-nuovo .giornata-testa .giornata-nav,
  body.tel-nuovo .giornata-testa h3,
  body.tel-nuovo .giornata-testa small,
  body.tel-nuovo .giornata-testa .g-freccia,
  body.tel-nuovo .giornata-torna { display: none !important; }
  body.tel-nuovo .giornata-esci { margin-left: auto !important; min-height: 40px; }

  /* 🧹 Qui c'era la regola che ALZAVA gli avvisi di 84 px per non farli coprire la barra.
        Non serve più: adesso non ci sono. Una regola che sposta una cosa tolta è la
        prossima che qualcuno legge credendo che faccia ancora qualcosa. */


  /* 🕳 I 60 px VUOTI IN CIMA NON SONO UN ELEMENTO: sono il `padding-top` che
        `dpo_testata.js` mette sul BODY per far posto alla sua barra. Nascosta la barra,
        il posto restava. Cercarlo fra gli elementi non lo trova — non c'è niente da
        trovare. Già pagata ieri, riscritta qui perché è la stessa trappola. */
  body.tel-nuovo { padding-top: 0 !important; }
}

/* 🖨 La stampa del foglio di Falconi NON è qui: la fa `fogliomedico()` dentro
      agende_studio.html, che esisteva già. Qui c'era una mia seconda stampa, tolta il
      13/09 alle 19:50 — due strade per la stessa cosa, e quella nuova si rompe per prima
      perché nessuno si ricorda che esiste. */

/* ══════════════════════════════════════════════════════════════════════════
   🎨 UN TEMA PER AGENDA — Pietro, 13/09/2026 ore 22:45
   «colori diversi tra le agende di Falconi e Lab, senno' sembrano identiche.
    Falconi falle blu scuro, anche lo sfondo e quei piccoli spazi che ci sono»

   Il colore sta nel FONDO, non in un bordo: il fondo si vede anche NEGLI SPAZI fra una
   carta e l'altra — sono quelli che ha indicato — e resta sotto gli occhi mentre si
   scorre, quando i titoli sono già passati. Un bordo invece lo si nota solo se lo si
   guarda, ed è esattamente quando non serve.
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 620px) {

  /* ── 🩺 FALCONI — blu scuro, come ha chiesto ───────────────────────────── */
  body.tel-nuovo.tel-falconi { background: #0d2144 !important; }
  body.tel-nuovo.tel-falconi main { background: #0d2144 !important; }
  body.tel-nuovo.tel-falconi .panel { background: transparent !important; border: 0 !important;
    box-shadow: none !important; }
  body.tel-nuovo.tel-falconi .tel-testa {
    background: #0a1a36 !important; border-bottom-color: #1d3a68 !important;
  }
  body.tel-nuovo.tel-falconi .tel-testa .tel-frec,
  body.tel-nuovo.tel-falconi .tel-testa .tel-giorno {
    background: #14294f !important; border-color: #2a4a7d !important; color: #dbe8ff !important;
  }
  body.tel-nuovo.tel-falconi .tel-giorno b { color: #ffffff !important; }
  body.tel-nuovo.tel-falconi .tel-giorno small { color: #8fa8cd !important; }
  body.tel-nuovo.tel-falconi .tel-modi button {
    background: #14294f !important; border-color: #2a4a7d !important; color: #a9c2e6 !important;
  }
  body.tel-nuovo.tel-falconi .tel-modi button.on {
    background: #e8f0fb !important; border-color: #e8f0fb !important; color: #0d2144 !important;
  }
  /* le carte restano chiare: il contrasto sul fondo scuro è quello che le fa leggere */
  body.tel-nuovo.tel-falconi .week-view .week-day {
    background: #ffffff !important;
    border-top-color: #1d3a68 !important; border-left-color: #1d3a68 !important;
    border-right-color: #1d3a68 !important;   /* ⚠️ NON border-color: cancellerebbe quello di sotto */
  }
  body.tel-nuovo.tel-falconi .tel-cal { background: #14294f !important; border-bottom-color: #2a4a7d !important; }
  body.tel-nuovo.tel-falconi .tel-cal-testa b { color: #ffffff !important; }
  body.tel-nuovo.tel-falconi .tel-cal-testa button { background: #0d2144 !important;
    border-color: #4a74b5 !important; color: #dbe8ff !important; }
  body.tel-nuovo.tel-falconi .tel-cal-griglia i { color: #8fa8cd !important; }
  body.tel-nuovo.tel-falconi .tel-sotto {
    background: #0a1a36 !important; border-top-color: #1d3a68 !important;
  }
  body.tel-nuovo.tel-falconi .tel-sotto button { color: #cfe0f8 !important; }
  body.tel-nuovo.tel-falconi .tel-sotto button.scambio { background: #16305c !important; }
  /* la fascia della giornata in FULL */
  body.tel-nuovo.tel-falconi .giornata-esci {
    background: #14294f !important; border-color: #4a74b5 !important; color: #dbe8ff !important;
  }

  /* ── 🧪 AMBULATORIO — chiaro, con il verde acqua che ha già nei filtri ──── */
  body.tel-nuovo.tel-ambulatorio { background: #eef6f3 !important; }
  body.tel-nuovo.tel-ambulatorio main { background: #eef6f3 !important; }
  body.tel-nuovo.tel-ambulatorio .tel-testa {
    background: #ddefe8 !important; border-bottom-color: #b9d9cd !important;
  }
  body.tel-nuovo.tel-ambulatorio .tel-testa .tel-frec {
    border-color: #146b51 !important; color: #0f5f47 !important;
  }
  body.tel-nuovo.tel-ambulatorio .tel-giorno b { color: #0f5f47 !important; }
  body.tel-nuovo.tel-ambulatorio .tel-modi button.on {
    background: #146b51 !important; border-color: #146b51 !important;
  }
  body.tel-nuovo.tel-ambulatorio .week-view .week-day {
    border-top-color: #c3ded3 !important; border-left-color: #c3ded3 !important;
    border-right-color: #c3ded3 !important;
  }
  body.tel-nuovo.tel-ambulatorio .tel-sotto { border-top-color: #b9d9cd !important; }
  body.tel-nuovo.tel-ambulatorio .tel-sotto button { color: #0f5f47 !important; }
  body.tel-nuovo.tel-ambulatorio .tel-sotto button.scambio { background: #ddefe8 !important; }
  body.tel-nuovo.tel-ambulatorio .tel-cal { background: #e6f3ee !important; }
  body.tel-nuovo.tel-ambulatorio .tel-cal-testa b { color: #0f5f47 !important; }
}

/* ── 🚪 IL BOTTONE DI SICUREZZA IN FULL — telefono E computer ──────────────
   Quando si entra con `?full=1` la pagina non disegna il suo «Esci», perché per l'app del
   medico la giornata è tutto. Chi ci arriva da un browser normale resterebbe chiuso dentro
   senza via d'uscita visibile — ed ESC, che pure funziona, non si vede: un tasto che non si
   vede non esiste. */
.tel-esci {
  position: fixed; top: 10px; right: 12px; z-index: 62;
  min-height: 40px; padding: 8px 15px; border-radius: 10px;
  border: 1px solid #c3d2e4; background: #ffffffee; color: #12315c;
  font: 700 13px 'IBM Plex Sans', system-ui, -apple-system, sans-serif;
  box-shadow: 0 4px 14px rgba(18, 49, 92, .18); cursor: pointer;
}
.tel-esci:hover { background: #12315c; color: #fff; border-color: #12315c; }
/* sul tema scuro di Falconi resta leggibile */
body.tel-falconi .tel-esci { background: #14294fee; border-color: #4a74b5; color: #dbe8ff; }
/* mentre è aperta una finestra il bottone si toglie: lì si esce dalla finestra, non dalla
   giornata, e due uscite vicine si sbagliano */
body.tel-finestra .tel-esci { display: none !important; }
@media print { .tel-esci { display: none !important; } }

/* ══════════════════════════════════════════════════════════════════════════
   ⏱ L'ORA SULLA RIGA DEL NOME — Pietro, 14/09/2026 ore 01:20

   DUE cose cambiano, e nient'altro:
     ① DOV'È — accanto al nome, a destra, invece che in un riquadro staccato in basso;
     ② IL RIQUADRO SPARISCE — niente bordo, niente sfondo, niente ombra.

   Resta grande com'era, resta a destra, e resta il TASTO che è: si preme per avviare la
   visita e per chiuderla, e la scritta sopra cambia da sola secondo lo stato.

   🎯 Il guadagno è tutto in ALTEZZA. Il riquadro stava in basso a destra in posizione
      assoluta, e la carta doveva essere alta abbastanza da contenerlo: metà carta vuota
      per fare posto a una cornice. Su una giornata da venti persone sono schermate intere.
   ⚠️ E le caselle degli esami sotto NON si stringono: l'ora sta sulla riga del titolo, non
      dentro la loro. Restano larghe come adesso, con le date leggibili.
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 620px) {

  /* 🔎 GUARDATO, NON SUPPOSTO: l'ora finiva a metà carta, non a destra. Misurato — l'h4
        era largo 284 px su una carta larga 380: non occupava tutta la riga, quindi il suo
        bordo destro NON era il bordo della carta, e spingere l'ora «a destra» la portava
        a destra di un contenitore corto. `margin-left:auto` risultava 0: la regola non
        arrivava nemmeno.
     📌 «A destra» non vuol dire niente finché non si sa a destra DI COSA. */
  /* ↗️ L'ORA NELL'ANGOLO IN ALTO A DESTRA, senza riquadro.
     🔎 Guardato, non supposto — due volte. Prima l'avevo spinta a destra dentro il titolo:
        finiva a metà carta, perché il titolo era largo 284 px su una carta di 380 e il suo
        bordo destro non era il bordo della carta. Poi, messa in fondo al titolo, scendeva
        di una riga: il titolo comincia sotto il nome dell'azienda.
     📌 «A destra» non vuol dire niente finché non si sa a destra DI COSA, e «in alto» solo
        se si sa in alto di che cosa. L'angolo è della CARTA: si aggancia a quella.
     🎯 Il guadagno resta quello di prima: il riquadro in basso a destra obbligava la carta
        a essere alta il doppio del suo contenuto. Adesso la carta è alta quanto quello che
        contiene, e gli esami salgono. */
  body.tel-nuovo .carta-visita { position: relative !important; }
  /* 🕐 LA REGOLA VALE SUBITO, SENZA ASPETTARE IL JAVASCRIPT.
        Pietro: «perché se ricarico la pagina prima si vede nella vecchia posizione col
        bordo, e poi si alza in alto a destra?». Perché la regola era legata a una classe
        (`.tel-ora-riga`) che mette il JavaScript: fra il disegno della pagina e il suo
        primo giro passa qualche decimo, e in quei decimi si vede la versione vecchia —
        poi salta al posto nuovo. Un salto a schermo è un difetto anche quando il risultato
        finale è giusto: chi guarda vede la pagina «pensarci su».
     👉 Adesso la regola vale su `.cv-ora` e basta, cioè dal primo istante in cui la carta
        esiste. La classe resta solo come segno di passaggio, non serve più a niente. */
  body.tel-nuovo .carta-visita .cv-ora,
  body.tel-nuovo .carta-visita .cv-ora.tel-ora-riga {
    position: absolute !important; top: 8px !important; right: 14px !important;
    bottom: auto !important; left: auto !important; margin: 0 !important;
    display: flex !important; flex-direction: column !important;
    align-items: flex-end !important; gap: 0 !important;
    background: none !important; border: 0 !important; box-shadow: none !important;
    border-radius: 0 !important; padding: 0 !important;
    /* ⚠️ Via il riquadro, ma DENTRO non si tocca niente: la scritta sopra e l'ora sotto
          restano come sono, ed è quella che cambia quando lo premi per avviare o chiudere
          la visita. */
  }
  /* il titolo lascia libero l'angolo dell'ora, così non ci finisce sotto */
  body.tel-nuovo .carta-visita h4,
  body.tel-nuovo .carta-visita .cv-occhiello { padding-right: 92px !important; }

  /* 🏷 E LO STATO SI SPOSTA A SINISTRA: stava nello stesso angolo dell'ora (top 12,
        right 22) e si accavallavano — «INIZIA» sopra «FATTO», illeggibili tutti e due.
        Lo stato va in fondo alla carta, dove c'è spazio, e l'angolo resta all'ora. */
  body.tel-nuovo .carta-visita .cv-alto {
    position: static !important; top: auto !important; right: auto !important;
    margin-top: 8px !important; display: flex !important; justify-content: flex-start !important;
  }

  /* la carta adesso può essere alta quanto il suo contenuto: la fascia vuota in basso,
     che esisteva solo per ospitare il riquadro, non serve più */
  body.tel-nuovo .carta-visita { min-height: 0 !important; padding-bottom: 12px !important; }
  body.tel-nuovo .carta-visita .cv-basso { position: static !important; margin-top: 8px !important; }
  /* gli esami restano larghi: l'ora è sopra, non in mezzo a loro */
  body.tel-nuovo .carta-visita .cv-esami { max-width: 100% !important; }

  /* 🚪 IL BOTTONE «ESCI» È SOLO PER IL COMPUTER — Pietro: «Esci è solo per desktop, se Esc
        non funziona». Da telefono copriva l'angolo in alto a destra di ogni schermata, e
        la via d'uscita dal telefono è la voce Home in fondo, che c'è sempre. ESC invece è
        un tasto: ce l'ha chi sta al computer, ed è lì che serve un appiglio visibile. */
  .tel-esci { display: none !important; }

  /* 🚪 E VIA ANCHE «ESCI» DELLA PAGINA, da telefono: è quello che Pietro ha sbarrato sulla
        foto, e stava nell'angolo in alto a destra della giornata.
        Non si resta chiusi dentro: da telefono si esce con il tasto in testata, che dice
        FULL e premuto diventa AGENDA — è lì che uno guarda, ed è sempre a schermo. Due
        uscite a un centimetro l'una dall'altra non sono una sicurezza in più: sono una
        riga in meno per le visite, e un dubbio su quale delle due premere. */
  body.tel-nuovo .giornata-esci { display: none !important; }
  /* senza il bottone, la fascia della giornata non ha più niente da mostrare */
  body.tel-nuovo .giornata-testa { padding: 0 !important; min-height: 0 !important; }
}

/* ══════════════════════════════════════════════════════════════════════════
   ➖ DISTANZA E LINEA FRA UNA CARTA E L'ALTRA — Pietro, 14/09/2026 ore 02:00

   Le carte si toccavano: su un fondo scuro, due riquadri scuri attaccati sembrano un
   riquadro solo, e il nome della persona dopo sembra l'ultima riga di quella prima. Una
   riga di spazio e un filo chiaro bastano: non serve un bordo per ogni carta, serve che
   si veda DOVE FINISCE una e comincia l'altra.
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 620px) {
  body.tel-nuovo .giornata-carte {
    display: flex !important; flex-direction: column !important;
    gap: 0 !important; padding: 0 10px 16px !important;
  }
  body.tel-nuovo .giornata-carte > .carta-visita { margin: 0 !important; }
  /* il filo sta FRA le carte, non attorno: niente riga sopra la prima */
  body.tel-nuovo .giornata-carte > .carta-visita + .carta-visita {
    margin-top: 14px !important;
    border-top: 1px solid rgba(255, 255, 255, .16) !important;
    padding-top: 14px !important;
  }
  body.tel-nuovo.tel-ambulatorio .giornata-carte > .carta-visita + .carta-visita {
    border-top-color: rgba(6, 44, 116, .14) !important;
  }

  /* 👤 il nome si può premere, e si vede che si può */
  body.tel-nuovo .carta-visita h4.tel-nome-premibile { cursor: pointer; }
  body.tel-nuovo .carta-visita h4.tel-nome-premibile:active { opacity: .65; }
}

/* ══════════════════════════════════════════════════════════════════════════
   🎨 IL TEMA DI FALCONI, RIFATTO CON PIÙ ARIA — Pietro, 14/09/2026 ore 02:15
   «tutto troppo blu, non si capisce una minchia di niente»

   Aveva ragione, e il difetto ha un nome: NESSUNA GERARCHIA. Fondo blu scuro, carte blu
   scuro, barra blu scuro, caselle blu scuro — quattro cose diverse con lo stesso peso, e
   l'occhio non ha niente a cui aggrapparsi per capire dove finisce una e comincia l'altra.
   Un colore da solo non organizza una schermata: quello che organizza è la DIFFERENZA fra
   un livello e l'altro.

   👉 Adesso ci sono tre piani, e si vedono:
      ① il FONDO, il più scuro — è il tavolo, non deve farsi notare;
      ② le CARTE, più chiare del fondo e con un filo di luce sopra — sono gli oggetti;
      ③ quello che sta DENTRO le carte (caselle degli esami, nome, ora) — il più chiaro,
        perché è la roba da leggere.
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 620px) {

  /* ① il tavolo */
  body.tel-nuovo.tel-falconi,
  body.tel-nuovo.tel-falconi main { background: #071528 !important; }

  /* ② gli oggetti: staccati dal fondo, con un filo di luce in cima che li fa sembrare
        appoggiati invece che disegnati */
  /* 🤝 L'ECCEZIONE PER LA VISITA IN CORSO, e l'ho messa PRIMA che servisse.
        Codex sta facendo il task 496 su ordine di Pietro: fondo GIALLO sulla carta di chi
        è in visita, così si vede da lontano chi è dentro adesso. Mi ha scritto che userà
        «regole più specifiche per superare il fondo blu mobile» — cioè avrebbe dovuto
        combattere contro il mio `!important`.
     🚨 Una gara di specificità fra due file è il modo peggiore di mettersi d'accordo: vince
        chi scrive il selettore più lungo, e la prossima persona che tocca uno dei due la
        perde senza sapere di averla giocata. Nessun errore, solo un giallo che un giorno
        smette di vedersi.
     👉 Allora il posto glielo faccio io: il mio fondo blu NON si applica alle carte in
        visita. Lui scrive la sua regola normale, senza forzature, e passa.
     📌 Il patto vale in tutte e due i versi: questa riga è un impegno a non riprendermi
        quello spazio. Se un giorno il fondo blu tornasse anche lì, il suo giallo
        sparirebbe e lui non saprebbe perché. */
  body.tel-nuovo.tel-falconi .carta-visita:not(.stato-in_visita):where(:not(.visita-completata)) {
    background: #132b4d !important;
    border: 1px solid #234a7d !important; border-radius: 14px !important;
    box-shadow: 0 2px 0 rgba(255,255,255,.06) inset, 0 6px 18px rgba(0,0,0,.35) !important;
    padding: 12px 14px 14px !important;
  }
  /* fra una carta e l'altra basta lo spazio: con le carte staccate il filo non serve più,
     e due segni per la stessa cosa sono rumore */
  body.tel-nuovo.tel-falconi .giornata-carte > .carta-visita + .carta-visita {
    border-top: 0 !important; padding-top: 12px !important; margin-top: 12px !important;
  }

  /* Il tema blu lascia alle visite concluse i colori grigi comuni a PC e telefono. */
  /* ③ la roba da leggere: il nome pieno, l'azienda tenue, l'ora accesa */
  body.tel-nuovo.tel-falconi .carta-visita:where(:not(.visita-completata)) h4 { color: #ffffff !important; }
  body.tel-nuovo.tel-falconi .carta-visita:where(:not(.visita-completata)) .cv-occhiello { color: #7fb0e8 !important; }
  body.tel-nuovo.tel-falconi .carta-visita:where(:not(.visita-completata)) .cv-ora b { color: #ffffff !important; }
  body.tel-nuovo.tel-falconi .carta-visita:where(:not(.visita-completata)) .cv-ora small { color: #9ec2ec !important; }
  /* le caselle degli esami: chiare, che sono la cosa che si legge una per una */
  body.tel-nuovo.tel-falconi .carta-visita:where(:not(.visita-completata)) .cv-esami i {
    background: #1e3d68 !important; border-color: #3a6299 !important; color: #eaf3ff !important;
  }
  body.tel-nuovo.tel-falconi .carta-visita:where(:not(.visita-completata)) .cv-esami i u { color: #a8c8ee !important; }
  /* TOX e LAB restano rossi: è l'unico rosso della schermata e vuol dire «attenzione» */
  body.tel-nuovo.tel-falconi .carta-visita .cv-esami i.spicca {
    background: #b8371f !important; border-color: #d4462b !important;
  }
  body.tel-nuovo.tel-falconi .carta-visita:where(:not(.visita-completata)) .cv-stato {
    background: #0d2340 !important; border: 1px solid #2f5a8c !important;
  }

  /* la testata sta sotto il tavolo, non sopra le carte */
  body.tel-nuovo.tel-falconi .tel-testa { background: #04101f !important; border-bottom-color: #1b3557 !important; }
  body.tel-nuovo.tel-falconi .tel-testa .tel-frec,
  body.tel-nuovo.tel-falconi .tel-testa .tel-giorno { background: #11294a !important; border-color: #2d588c !important; }

  /* ── IL PIÈ DI PAGINA, che era la parte peggiore ────────────────────────
     Era dello stesso blu del resto: quattro voci che galleggiavano nel nulla. Adesso è
     una fascia scura separata, la voce dove sei è accesa e le altre no — così si vede
     dove si è senza leggere. */
  body.tel-nuovo.tel-falconi .tel-sotto {
    background: #04101f !important;
    border-top: 1px solid #2a5a8a !important;
    box-shadow: 0 -8px 24px rgba(0,0,0,.45) !important;
  }
  body.tel-nuovo.tel-falconi .tel-sotto button { color: #8fb5de !important; }
  body.tel-nuovo.tel-falconi .tel-sotto button i { color: #8fb5de !important; }
  body.tel-nuovo.tel-falconi .tel-sotto button.scambio {
    background: #163963 !important; color: #ffffff !important;
  }
  body.tel-nuovo.tel-falconi .tel-sotto button.scambio i { color: #ffffff !important; }
}


/* ══════════════════════════════════════════════════════════════════════════
   🧱 LA RIGA IN CIMA DELL'AGENDA, DA COMPUTER — task #1250, 14/09/2026 ore 01:45
   «la UI di sta testata fa schifo» (Pietro)

   ⚠️ QUESTO BLOCCO VALE DA COMPUTER, cioè FUORI dalla media query del telefono: da
      telefono la barra è nascosta e sostituita dalla riga mia. Sta in questo file perché
      è lo stesso lavoro — la testata dell'agenda — e tenerlo qui vuol dire che chi stacca
      le due righe di aggancio si riprende anche la barra di prima, tutta insieme.

   I tre gruppi: QUANDO (frecce, mese, Oggi) · QUALE AGENDA (i filtri) · DOVE (la sede).
   ══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 621px) {
  /* 🎯 CENTRATI, e questo l'avevo rotto io. Pietro il 12/09 aveva chiesto «bottoni più
        piccoli, barra più bassa, TUTTO ALLINEATO AL CENTRO», e la pagina infatti aveva
        `justify-content:center`. Ieri notte, per portare la sede in fondo a destra, ho
        scritto `flex-start` e li ho schiacciati tutti a sinistra: ho tolto una cosa che
        lui aveva chiesto per farne stare una che avevo deciso io.
     📌 Quando una regola esistente dà fastidio a quello che sto facendo, la domanda giusta
        non è «come la scavalco» ma «perché c'è». Qui c'era un ordine, scritto due righe
        sopra, e non l'avevo letto. */
  .panel > .bar { align-items: center; gap: 12px; justify-content: center !important; }
  /* lo spazio elastico spingeva la sede in fondo: con tutto centrato non serve */
  .panel > .bar .grow { display: none !important; }

  /* ① QUANDO — un gruppo solo, con le frecce attaccate al mese: sono la stessa cosa */
  .bar-quando { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
  .bar-quando #prev, .bar-quando #next {
    width: 38px; padding: 0; font-size: 20px; border-radius: 10px;
  }
  .bar-quando .month-picker { min-width: 158px; }
  /* «Oggi» si stacca di un soffio dalle frecce: è un salto, non un passo */
  .bar-quando #today { margin-left: 6px; }

  /* ② QUALE AGENDA — i quattro tasti sono ALTERNATIVE, e devono sembrarlo: attaccati,
        dentro una vaschetta, con quello acceso in rilievo. Come i tasti di una radio.
        Prima erano quattro bottoni staccati identici a tutti gli altri della riga, e
        niente diceva che sceglierne uno spegnesse gli altri. */
  .panel > .bar .quick {
    display: inline-flex; gap: 3px; padding: 3px;
    background: #eaf0f5; border-radius: 12px; flex: 0 0 auto;
  }
  .panel > .bar .quick .bt.agenda {
    border-color: transparent; background: transparent; box-shadow: none;
  }
  .panel > .bar .quick .bt.agenda:hover { background: #ffffff88; }
  .panel > .bar .quick .bt.agenda.on {
    background: #fff; color: var(--navy); box-shadow: 0 3px 10px #12366320;
    border-color: #d5e0e9; font-weight: 700;
  }

  /* ③ DOVE — la sede, staccata in fondo. Non è la quinta agenda: convive con quella
        accesa, e in mezzo alle altre faceva credere il contrario.
     🚨 E QUI HO FATTO UN DANNO IERI NOTTE, che Pietro ha visto subito: «i bottoni cambia
        data sono a sinistra e sballati». Tirando `siteToggle` FUORI dal gruppo `.quick`
        gli ho tolto la regola che lo rimpiccioliva — `.quick .bt.agenda{height:25px}` —
        e lui è rimasto alto 41 mentre tutti gli altri stanno a 25. Un bottone più alto
        del doppio in fondo a una riga fa sembrare storta tutta la riga.
     📌 Spostare un elemento non porta con sé le regole che aveva: le regole seguono il
        SELETTORE, non l'elemento. È la stessa famiglia della classe presa in prestito.
     👉 Le misure gliele ridò qui, uguali alle altre. E restano quelle volute da Pietro il
        12/09 — «bottoni più piccoli, barra più bassa, tutto allineato al centro»: non si
        ingrandisce niente, si rimpicciolisce quello che era rimasto indietro. */
  /* ⬅️ E STA IN FILA CON GLI ALTRI, non spinta in fondo.
        Ieri notte l'avevo mandata all'estremo destro per dire «è un'altra cosa». A schermo
        largo il risultato era mezza riga vuota in mezzo e un bottone solo, lontano, in un
        angolo: Pietro me l'ha rimandata indietro con una freccia che dice «portalo qui».
        Ha ragione: distinguere due cose non vuol dire allontanarle finché non si toccano
        più — bastava lo spazio di un respiro. Che è quello che c'è adesso. */
  .panel > .bar #siteToggle {
    flex: 0 0 auto; margin-left: 10px;
    height: 25px !important; min-height: 0 !important; padding: 0 11px !important;
    font-size: 12px !important; font-weight: 700 !important; border-radius: 999px !important;
    border: 1px solid #c8d6ea !important; background: #fff !important; color: #2a4a73 !important;
    box-shadow: none !important; line-height: 1 !important;
    display: inline-flex !important; align-items: center !important;
  }
  .panel > .bar #siteToggle.on {
    background: #7753a6 !important; border-color: #7753a6 !important; color: #fff !important;
  }
  /* anche «Oggi» è un bottone della riga: stessa altezza, o sballa il gruppo di sinistra */
  .bar-quando #today, .bar-quando #rpApri, .bar-quando #mSearch581 {
    height: 25px !important; min-height: 0 !important; padding: 0 11px !important;
    font-size: 12px !important; border-radius: 999px !important; line-height: 1 !important;
    display: inline-flex !important; align-items: center !important;
  }
  .bar-quando #prev, .bar-quando #next { width: 25px !important; font-size: 15px !important; }

  /* i due comandi trasferiti nel Planning stanno in fila con «Prelievi e risultati» */
  #recallOverlay .modal-head > div { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
  #recallOverlay .modal-head > div h2,
  #recallOverlay .modal-head > div p { flex: 0 0 100%; margin: 0; }
}

/* ══════════════════════════════════════════════════════════════════════════
   📅 IL CALENDARIO DELLA TESTATA, DA COMPUTER — Pietro, 14/09/2026 ore 09:30
   «vorrei cambiare anche tipo di calendario, questo non mi piace»

   Quello di prima era il campo mese nativo del browser. Non era brutto per caso: non era
   NOSTRO. Lo disegnava il browser con la sua iconcina e la sua lingua — sullo stesso
   gestionale, io leggevo «September 2026» e Pietro «settembre». Un pezzo di schermata che
   cambia faccia a seconda di chi la apre non si può nemmeno descrivere a parole.
   ══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 621px) {
  /* il campo vero resta VIVO, solo invisibile: la pagina lo legge e ne ascolta il change
     in più punti, e toglierlo vorrebbe dire rincorrere tutti quelli che lo usano */
  .tel-mese-nascosto {
    position: absolute !important; width: 1px !important; height: 1px !important;
    padding: 0 !important; margin: -1px !important; overflow: hidden !important;
    clip-path: inset(50%) !important; border: 0 !important;
  }
  .panel > .bar .bt.tel-mese {
    height: 25px !important; min-height: 0 !important; padding: 0 13px !important;
    font-size: 12px !important; font-weight: 700 !important; border-radius: 999px !important;
    border: 1px solid #c8d6ea !important; background: #fff !important; color: #12315c !important;
    line-height: 1 !important; display: inline-flex !important; align-items: center !important;
    min-width: 128px; justify-content: center; text-transform: capitalize;
  }
  .panel > .bar .bt.tel-mese:hover { border-color: #7ea4d6 !important; background: #f2f7ff !important; }

  .tel-mesi {
    position: fixed; z-index: 80; background: #fff; border: 1px solid #c8d6ea;
    border-radius: 14px; box-shadow: 0 12px 34px rgba(6, 44, 116, .22); padding: 10px;
    font-family: 'IBM Plex Sans', system-ui, -apple-system, sans-serif;
  }
  .tel-mesi .anno {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    margin-bottom: 8px;
  }
  .tel-mesi .anno b { font-size: 15px; color: #12315c; font-variant-numeric: tabular-nums; }
  .tel-mesi .anno button {
    width: 30px; height: 30px; border-radius: 8px; border: 1px solid #c8d6ea;
    background: #fff; color: #12315c; font-size: 16px; line-height: 1; cursor: pointer;
  }
  .tel-mesi .griglia { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }
  .tel-mesi .griglia button {
    min-width: 62px; min-height: 34px; border-radius: 9px; border: 1px solid #dde6f0;
    background: #fff; color: #2a4a73; font: 600 12.5px inherit; cursor: pointer;
    text-transform: capitalize;
  }
  .tel-mesi .griglia button:hover { background: #f2f7ff; border-color: #7ea4d6; }
  .tel-mesi .griglia button.on { background: #12315c; border-color: #12315c; color: #fff; }
}