/* Il Gestionale medici sul telefono: lo stile della webapp.

   Si carica dopo css/colori.css (i colori dello studio: istanza/sito/
   css/colori.css ne prende il posto) e css/gestionale.css (gli stessi
   pezzi del computer: pastiglie degli stati, righe dei pazienti, avvisi in
   riga, il blocco). Qui le misure per il pollice: ogni cosa da toccare è
   alta almeno 44 px, i campi da scrivere hanno caratteri da 16 px (sotto,
   l'iPhone ingrandisce la pagina quando ci si tocca dentro), niente scorre
   di lato tranne le file fatte per scorrere (le pastiglie, la griglia), e i
   bordi del telefono (la tacca, la barra di Home) restano liberi
   (env(safe-area-inset-*)). I nomi delle classi della webapp non sono quelli
   del computer (.app, .menu, .testata…), così i due stili non si toccano. */

:root {
  --barra: 60px;                                   /* la barra delle sezioni, senza il bordo del telefono */
  --sotto: env(safe-area-inset-bottom, 0px);
  --sopra: env(safe-area-inset-top, 0px);
  --sinistra: env(safe-area-inset-left, 0px);
  --destra: env(safe-area-inset-right, 0px);
  --margine: 16px;
}

/* overflow-x solo su html, che lo passa alla finestra: messo anche su body,
   body diventerebbe lui il riquadro che scorre e la testata, la barra di
   Prenota e le teste della griglia non resterebbero più ferme (sticky) */
html[data-guscio="telefono"] {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  height: auto;
  overflow-x: hidden;
}
html[data-guscio="telefono"] body {
  height: auto;
  min-height: 100vh;
  min-height: 100dvh;
  font-size: 15px;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior-y: none;
}
/* con un foglio aperto la pagina sotto sta ferma */
html.con-foglio, html.con-foglio body { overflow: hidden; }

/* ============ i pezzi comuni, alla misura del pollice ============ */

html[data-guscio="telefono"] .btn {
  height: auto;
  min-height: 44px;
  padding: 0 16px;
  border-radius: 12px;
  font-size: 15px;
  touch-action: manipulation;
  white-space: normal;
  text-align: center;
  line-height: 1.2;
}
html[data-guscio="telefono"] .btn svg { width: 19px; height: 19px; }
html[data-guscio="telefono"] .btn--piccolo { min-height: 44px; padding: 0 12px; font-size: 14px; border-radius: 10px; }
html[data-guscio="telefono"] .btn--icona { width: 44px; min-width: 44px; padding: 0; }
html[data-guscio="telefono"] .btn--largo { width: 100%; }
html[data-guscio="telefono"] .btn:hover { background: var(--carta); }
html[data-guscio="telefono"] .btn--primario:hover { background: var(--blu); }
html[data-guscio="telefono"] .btn--verde:hover { background: var(--verde); }
html[data-guscio="telefono"] .btn--whatsapp:hover { background: var(--whatsapp); }
html[data-guscio="telefono"] .btn--pieno-rosso:hover { background: var(--rosso); }
html[data-guscio="telefono"] .btn--leggero:hover { background: transparent; }
html[data-guscio="telefono"] .btn:active { transform: scale(.98); }

html[data-guscio="telefono"] input[type="text"], html[data-guscio="telefono"] input[type="email"],
html[data-guscio="telefono"] input[type="password"], html[data-guscio="telefono"] input[type="tel"],
html[data-guscio="telefono"] input[type="number"], html[data-guscio="telefono"] input[type="date"],
html[data-guscio="telefono"] input[type="time"], html[data-guscio="telefono"] input[type="search"],
html[data-guscio="telefono"] input:not([type]), html[data-guscio="telefono"] select, html[data-guscio="telefono"] textarea {
  font-size: 16px;
  min-height: 46px;
  padding: 10px 12px;
  border-radius: 12px;
  max-width: 100%;
}
html[data-guscio="telefono"] textarea { min-height: 90px; }
html[data-guscio="telefono"] .campo { gap: 6px; }
html[data-guscio="telefono"] .campo__etichetta { font-size: 13.5px; }
html[data-guscio="telefono"] .campo__aiuto { font-size: 13px; }
html[data-guscio="telefono"] .spunta { min-height: 44px; align-items: center; }
html[data-guscio="telefono"] .spunta input { width: 22px; height: 22px; margin: 0; }
.spunta--grande { align-items: flex-start !important; padding: 6px 0; }
.spunta--grande > span { display: grid; gap: 2px; }
.campo--giusto input { border-color: var(--verde); }
.maiuscolo { text-transform: uppercase; }
.obbligatorio { color: var(--rosso); }
.testo-giallo { color: var(--giallo) !important; }
html[data-guscio="telefono"] .etichetta { height: 26px; padding: 0 10px; font-size: 12.5px; border-radius: 13px; }
html[data-guscio="telefono"] .paziente-riga__iniziali { width: 40px; height: 40px; font-size: 14px; }
html[data-guscio="telefono"] .paziente-riga__nome { font-size: 16px; }
html[data-guscio="telefono"] .paziente-riga__info { font-size: 13px; }
html[data-guscio="telefono"] .vuoto { padding: 32px 12px; }
html[data-guscio="telefono"] .avviso-riga { font-size: 14px; }
fieldset.scelte { display: grid; gap: 2px; padding: 8px 12px 10px; border-radius: 12px; }
.campo-pila { display: grid; gap: 8px; }

/* ============ l'accesso ============ */

html[data-guscio="telefono"] .accesso {
  min-height: 100vh;
  min-height: 100dvh;
  padding: calc(20px + var(--sopra)) calc(16px + var(--destra)) calc(20px + var(--sotto)) calc(16px + var(--sinistra));
}
html[data-guscio="telefono"] .accesso__box { padding: 26px 20px 20px; gap: 14px; }
html[data-guscio="telefono"] .accesso__box .btn--primario { min-height: 50px; font-size: 16px; }
.accesso .errore[hidden] { display: none; }

/* ============ la testata ============ */

.guscio { min-height: 100vh; min-height: 100dvh; padding-bottom: calc(var(--barra) + var(--sotto) + 12px); }
.testa {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: 10px;
  min-height: calc(58px + var(--sopra));
  padding: calc(6px + var(--sopra)) calc(6px + var(--destra)) 6px calc(14px + var(--sinistra));
  background: rgba(255, 255, 255, .94);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--bordo);
}
.testa__simbolo { width: 34px; height: 34px; flex: none; object-fit: contain; border-radius: 9px; }
.testa__titoli { flex: 1; min-width: 0; display: grid; line-height: 1.15; }
.testa__titolo { font-size: 20px; font-weight: 750; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--blu-scuro); }
.testa__studio { font-size: 12px; color: var(--testo-2); }
.testa__strumenti { flex: none; display: flex; align-items: center; gap: 6px; min-width: 0; }
.testa__strumenti:empty { display: none; }
.testa__tasto {
  position: relative; flex: none; width: 44px; height: 44px; display: grid; place-items: center;
  border: 0; border-radius: 50%; background: none; color: var(--testo-2); cursor: pointer; touch-action: manipulation;
}
.testa__tasto svg { width: 23px; height: 23px; }
.testa__tasto:active { background: var(--fondo); }
.testa__bottone { color: var(--blu) !important; }
.numerino {
  position: absolute; top: 3px; right: 1px; min-width: 19px; height: 19px; padding: 0 5px;
  border-radius: 999px; background: var(--rosso); color: #fff; font-size: 11px; font-weight: 700;
  line-height: 19px; text-align: center; box-shadow: 0 0 0 2px #fff;
}

/* Lista o Griglia, in testata: due segmenti; si vedono alti 38, si toccano su 44 */
.modo { display: flex; gap: 2px; padding: 3px; border-radius: 12px; background: var(--fondo); border: 1px solid var(--bordo); }
.modo__tasto {
  position: relative; min-height: 38px; padding: 0 10px; border: 0; border-radius: 9px; background: none;
  display: inline-flex; align-items: center; gap: 5px; color: var(--testo-2); font-weight: 650; font-size: 13.5px; cursor: pointer; touch-action: manipulation;
}
.modo__tasto::after { content: ''; position: absolute; inset: -3px -1px; }
.modo__tasto svg { width: 17px; height: 17px; }
.modo__tasto[aria-pressed="true"] { background: var(--carta); color: var(--blu-scuro); box-shadow: var(--ombra-1); }
/* sul telefono il titolo e il nome dello studio devono starci accanto al selettore: le icone, senza le parole */
@media (max-width: 430px) {
  .modo__tasto span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .modo__tasto { padding: 0 11px; }
  .testa { gap: 8px; }
}
/* col testo grande (Safari «aA», Chrome «Dimensioni testo»: la pagina larga meno di 340 punti) il
   titolo intero conta più del simbolo dello studio, che c'è già sotto l'icona: via il simbolo, e
   «Nuovo» e «Ricomincia» solo con l'icona (il nome resta per chi legge lo schermo) */
@media (max-width: 340px) {
  .testa__simbolo { display: none; }
  .testa { padding-left: calc(12px + var(--sinistra)); }
  .testa__titolo { font-size: 19px; }
  .testa__bottone { width: 44px; padding: 0 !important; justify-content: center; }
  .testa__bottone span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
}

/* la fascia della licenza */
html[data-guscio="telefono"] .fascia { padding: 10px calc(16px + var(--destra)) 10px calc(16px + var(--sinistra)); font-size: 13.5px; }

/* ============ le sezioni ============ */

.viste { padding: 12px calc(var(--margine) + var(--destra)) 0 calc(var(--margine) + var(--sinistra)); max-width: 760px; margin: 0 auto; min-width: 0; }
.vista { min-width: 0; }
.vista > * { min-width: 0; }

/* ============ la barra delle sezioni ============ */

.barra {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  display: grid; grid-template-columns: repeat(var(--voci, 3), minmax(0, 1fr));
  height: calc(var(--barra) + var(--sotto));
  padding: 0 var(--destra) var(--sotto) var(--sinistra);
  background: rgba(255, 255, 255, .97);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-top: 1px solid var(--bordo);
}
.barra:empty { display: none; }
.barra__voce {
  position: relative; min-width: 0; height: var(--barra); display: grid; place-content: center; justify-items: center; gap: 3px;
  border: 0; background: none; color: var(--testo-3); cursor: pointer; touch-action: manipulation; padding: 0 2px;
}
.barra__icona { width: 46px; height: 28px; display: grid; place-items: center; border-radius: 14px; transition: background .15s; }
.barra__icona svg { width: 23px; height: 23px; }
.barra__nome { font-size: 11.5px; font-weight: 650; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.barra__voce[aria-current="page"] { color: var(--blu-scuro); }
.barra__voce[aria-current="page"] .barra__icona { background: var(--blu-chiaro); color: var(--blu); }
/* Prenota: il tondo pieno in mezzo, quello che si cerca col pollice */
.barra__voce--rilievo { color: var(--blu); }
.barra__voce--rilievo .barra__icona { width: 46px; height: 30px; background: var(--blu); color: #fff; border-radius: 15px; box-shadow: 0 2px 6px rgba(var(--blu-scuro-rgb), .3); }
.barra__voce--rilievo[aria-current="page"] .barra__icona { background: var(--blu-scuro); color: #fff; }
.numerino--barra { top: 5px; right: calc(50% - 26px); }

/* ============ gli avvisi, sopra la barra ============ */

html[data-guscio="telefono"] .avvisi {
  left: calc(12px + var(--sinistra)); right: calc(12px + var(--destra)); width: auto;
  bottom: calc(var(--barra) + var(--sotto) + 10px); z-index: 1200;
}
html[data-guscio="telefono"] .avviso { font-size: 14.5px; padding: 12px 14px; border-radius: 14px; }
/* con un foglio aperto gli avvisi vanno in alto: in basso coprirebbero i suoi bottoni */
html.con-foglio[data-guscio="telefono"] .avvisi { top: calc(var(--sopra) + 10px); bottom: auto; }
html[data-guscio="telefono"] .avviso button { min-width: 44px; min-height: 44px; margin: -12px -10px -12px auto; font-size: 20px; }
.avviso--versione { width: 100%; border: 0; text-align: left; cursor: pointer; font: inherit; color: #fff; background: var(--blu-scuro); }

/* ============ i fogli che salgono dal basso ============ */

.velo {
  position: fixed; inset: 0; z-index: 900;
  display: flex; align-items: flex-end; justify-content: center;
  background: rgba(16, 26, 42, .42);
  animation: velo .16s ease-out;
}
.velo + .velo { background: rgba(16, 26, 42, .22); }
@keyframes velo { from { opacity: 0; } }
.foglio {
  width: min(760px, 100%); max-height: calc(100dvh - var(--sopra) - 24px);
  display: flex; flex-direction: column; min-height: 0;
  background: var(--carta); border-radius: 20px 20px 0 0; box-shadow: var(--ombra-3);
  padding: 0 var(--destra) var(--sotto) var(--sinistra);
  animation: sale .2s ease-out;
  outline: none;
}
.foglio--alto { height: calc(100dvh - var(--sopra) - 24px); }
@keyframes sale { from { transform: translateY(24px); opacity: .6; } }
.foglio__testa { display: flex; align-items: flex-start; gap: 8px; padding: 14px 8px 10px 18px; border-bottom: 1px solid var(--bordo); }
.foglio__titoli { flex: 1; min-width: 0; display: grid; gap: 2px; padding-top: 8px; }
.foglio__titolo { font-size: 19px; font-weight: 750; color: var(--blu-scuro); overflow-wrap: anywhere; }
.foglio__sotto { font-size: 13.5px; color: var(--testo-2); overflow-wrap: anywhere; }
.foglio__chiudi { flex: none; width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--fondo); color: var(--testo-2); display: grid; place-items: center; cursor: pointer; }
.foglio__chiudi svg { width: 20px; height: 20px; }
.foglio__corpo {
  flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  padding: 16px 18px 20px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; align-content: start;
}
.foglio__piede { display: flex; gap: 10px; padding: 10px 18px 12px; border-top: 1px solid var(--bordo); background: #FAFBFC; }
.foglio__piede .btn { flex: 1; min-height: 48px; }
.foglio__piede .btn--leggero { flex: 0 1 auto; }

/* la domanda, sopra a tutto */
.domanda {
  position: fixed; inset: 0; z-index: 1100; display: grid; place-items: center;
  padding: 20px calc(16px + var(--destra)) calc(20px + var(--sotto)) calc(16px + var(--sinistra));
  background: rgba(16, 26, 42, .48); animation: velo .14s ease-out;
}
.domanda__box {
  width: min(440px, 100%); max-height: calc(100dvh - 40px); overflow-y: auto;
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 22px 18px 16px; border-radius: 20px; background: var(--carta); box-shadow: var(--ombra-3); outline: none;
}
.domanda__titolo { font-size: 18px; color: var(--blu-scuro); }
.domanda__testo { margin: 0; color: var(--testo-2); font-size: 15px; }
.domanda__tasti { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 6px; }
.domanda__tasti .btn { min-height: 50px; }

/* una finestra del computer (App.dialogo) arrivata fin qui: anche lei dal basso */
html[data-guscio="telefono"] dialog.dialogo {
  width: 100%; max-width: 100%; margin: auto 0 0; max-height: calc(100dvh - 24px); border-radius: 20px 20px 0 0;
  padding-bottom: var(--sotto);
}
html[data-guscio="telefono"] .dialogo__piede .btn { flex: 1; }

/* il blocco: il velo del computer, a misura di telefono */
html[data-guscio="telefono"] dialog.blocco[open] { width: 100vw; height: 100dvh; padding: 16px; }
.guscio--bloccato { filter: blur(14px); }

/* ============ il giorno: ‹ data › Oggi ============ */

.giorno { display: flex; align-items: center; gap: 6px; margin: 0 0 10px; min-width: 0; }
.giorno__freccia { flex: none; }
.giorno__data {
  position: relative; flex: 1; min-width: 0; display: grid; justify-items: center; gap: 0;
  padding: 2px 4px; text-align: center; cursor: pointer; min-height: 44px; align-content: center;
}
.giorno__data strong { font-size: 18px; font-weight: 750; line-height: 1.2; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--blu-scuro); }
.giorno__data small { font-size: 12.5px; color: var(--testo-2); }
.giorno__data strong::first-letter, .giorno__data small::first-letter { text-transform: uppercase; }
/* il calendario del telefono, invisibile sopra la data: toccandola si apre */
html[data-guscio="telefono"] .giorno__scelta { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; opacity: 0; border: 0; padding: 0; cursor: pointer; }
.giorno__oggi { flex: none; }

/* ============ Oggi ============ */

/* le pastiglie dei medici: una fila che scorre di lato, mai la pagina */
.oggi-chip {
  display: flex; gap: 8px; overflow-x: auto; margin: 0 calc(-1 * var(--margine)) 6px; padding: 2px var(--margine) 6px;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.oggi-chip::-webkit-scrollbar { display: none; }
.oggi-pastiglia {
  --c: var(--blu);
  flex: none; display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 0 14px;
  border-radius: 999px; border: 1px solid var(--bordo-forte); background: var(--carta); color: var(--testo-2);
  font-weight: 650; font-size: 14px; white-space: nowrap; cursor: pointer; touch-action: manipulation; position: relative;
}
.oggi-pastiglia::after { content: ''; position: absolute; inset: -2px 0; }
.oggi-pastiglia .pallino { background: var(--c); }
.oggi-pastiglia[aria-pressed="true"] { background: color-mix(in srgb, var(--c) 13%, white); border-color: color-mix(in srgb, var(--c) 45%, white); color: var(--testo); }
.oggi-pastiglia--tutti[aria-pressed="true"] { background: var(--blu-chiaro); border-color: var(--blu-bordo); color: var(--blu-scuro); }
.oggi-pastiglia--libero:not([aria-pressed="true"]) { opacity: .62; }
.oggi-pastiglia__n { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--fondo); font-size: 12px; display: grid; place-items: center; color: var(--testo-2); }
.oggi-riassunto { margin: 0 2px 10px; color: var(--testo-2); font-size: 13.5px; }
.oggi-riassunto:empty { display: none; }
.oggi-corpo { min-width: 0; transition: opacity .15s; }
.oggi-corpo--carica { opacity: .55; }

.oggi-lista { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 9px; }
.oggi-carta {
  --c: var(--blu);
  width: 100%; min-height: 66px; display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; align-items: center; gap: 10px;
  padding: 10px 10px 10px 10px; border: 1px solid var(--bordo); border-left: 6px solid var(--c); border-radius: 14px;
  background: var(--carta); box-shadow: var(--ombra-1); text-align: left; cursor: pointer; touch-action: manipulation; color: var(--testo);
}
.oggi-carta:active { background: var(--blu-tenue); }
.oggi-carta__ora { display: grid; line-height: 1.15; font-variant-numeric: tabular-nums; }
.oggi-carta__ora b { font-size: 17px; font-weight: 750; }
.oggi-carta__ora small { font-size: 12.5px; color: var(--testo-3); }
.oggi-carta__corpo { display: grid; gap: 3px; min-width: 0; }
.oggi-carta__riga { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.oggi-carta__nome { font-size: 16px; font-weight: 650; flex: 0 1 auto; min-width: 0; }
/* la nota accanto al nome: almeno una parola si legge sempre, anche con un nome lungo */
.oggi-nota { flex: 1 1 0; min-width: 4.5em; color: var(--testo-2); font-size: 13.5px; font-weight: 500; }
.oggi-carta__sotto { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 13px; color: var(--testo-2); }
.oggi-carta__sotto .pallino { background: var(--c); width: 9px; height: 9px; }
.oggi-carta__stato { justify-self: end; }
.oggi-carta--finita { background: #FAFBFC; }
.oggi-carta--finita .oggi-carta__ora, .oggi-carta--finita .oggi-carta__corpo { opacity: .6; }
.oggi-carta--annullato .oggi-carta__nome { text-decoration: line-through; }
.oggi-carta--in-visita { box-shadow: 0 0 0 2px rgba(var(--blu-rgb), .35), var(--ombra-1); }
.oggi-carta--arrivato { box-shadow: 0 0 0 2px rgba(194, 94, 0, .28), var(--ombra-1); }
.oggi-segno { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; color: var(--testo-3); background: var(--fondo); }
.oggi-segno svg { width: 16px; height: 16px; }
.oggi-segno--ok { color: var(--whatsapp); background: #E7F6EC; }
.oggi-segno--errore { color: var(--rosso); background: var(--rosso-chiaro); }
.oggi-segno--confermato { color: #fff; background: var(--verde); }
.oggi-segno--fatto { color: #3E7D3A; background: #E6F1E5; }
.oggi-adesso { display: flex; align-items: center; gap: 8px; color: var(--rosso); font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.oggi-adesso::before, .oggi-adesso::after { content: ''; height: 2px; background: var(--rosso); border-radius: 2px; }
.oggi-adesso::before { flex: 0 0 10px; }
.oggi-adesso::after { flex: 1; }
.oggi-piede { display: flex; justify-content: center; padding: 10px 0 4px; }
.oggi-piede:empty { display: none; }

/* la griglia: una colonna per medico, le ore a sinistra; scorre lei, in su e di lato */
.oggi-griglia {
  --ore: 40px; --col: 112px;
  position: relative; height: 60vh; overflow: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  border: 1px solid var(--bordo); border-radius: 14px; background: var(--carta); box-shadow: var(--ombra-1);
}
.oggi-griglia__testa, .oggi-griglia__corpo { min-width: calc(var(--ore) + var(--n, 1) * var(--col)); }
.oggi-griglia__testa {
  position: sticky; top: 0; z-index: 5; display: grid; grid-template-columns: var(--ore) repeat(var(--n, 1), minmax(var(--col), 1fr));
  background: #F7F9FB; border-bottom: 1px solid var(--bordo);
}
.oggi-griglia__angolo { position: sticky; left: 0; z-index: 6; background: #F7F9FB; border-right: 1px solid var(--bordo); }
.oggi-griglia__medico { --c: var(--blu); min-width: 0; padding: 7px 6px 8px; text-align: center; border-left: 1px solid var(--bordo); box-shadow: inset 0 -3px 0 var(--c); }
.oggi-griglia__testa > .oggi-griglia__medico:nth-child(2) { border-left: 0; }
.oggi-griglia__medico strong { display: flex; align-items: center; justify-content: center; gap: 5px; font-size: 13px; }
.oggi-griglia__medico strong .pallino { background: var(--c); width: 8px; height: 8px; }
.oggi-griglia__medico small { display: block; font-size: 11px; color: var(--testo-2); }
.oggi-griglia__corpo { display: grid; grid-template-columns: var(--ore) minmax(0, 1fr); }
.oggi-griglia__ore { position: sticky; left: 0; z-index: 3; background: var(--carta); border-right: 1px solid var(--bordo); }
.oggi-griglia__ora { position: absolute; right: 5px; transform: translateY(3px); font-size: 11px; color: var(--testo-3); font-variant-numeric: tabular-nums; }
.oggi-griglia__colonne { position: relative; display: grid; grid-template-columns: repeat(var(--n, 1), minmax(var(--col), 1fr)); }
.oggi-griglia__colonna {
  position: relative; border-left: 1px solid var(--bordo);
  background-image: linear-gradient(to bottom, var(--bordo) 1px, transparent 1px);
  background-size: 100% var(--ora);
}
.oggi-griglia__colonna:first-child { border-left: 0; }
.oggi-griglia__fuori { position: absolute; left: 0; right: 0; background: repeating-linear-gradient(-45deg, rgba(20, 32, 51, .045) 0 6px, rgba(20, 32, 51, .02) 6px 12px); pointer-events: none; }
.oggi-griglia__adesso { position: absolute; left: 0; right: 0; height: 2px; background: var(--rosso); z-index: 2; pointer-events: none; }
.oggi-blocco {
  --c: var(--blu); --t: #fff;
  position: absolute; z-index: 1; display: grid; align-content: start; gap: 1px; overflow: hidden;
  padding: 3px 5px; border: 0; border-radius: 7px; background: var(--c); color: var(--t);
  text-align: left; cursor: pointer; font-size: 12px; line-height: 1.25; box-shadow: 0 1px 2px rgba(20, 32, 51, .2);
}
.oggi-blocco__riga { display: flex; gap: 4px; min-width: 0; }
.oggi-blocco__riga b { flex: none; }
.oggi-blocco__nota, .oggi-blocco__cosa { opacity: .88; font-size: 11.5px; }
.oggi-blocco--completato, .oggi-blocco--assente, .oggi-blocco--annullato { opacity: .45; }
.oggi-blocco--annullato .oggi-blocco__riga span { text-decoration: line-through; }
.oggi-blocco--in-visita { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--c); }
.oggi-griglia__nota { margin: 8px 2px 0; font-size: 12.5px; text-align: center; }

/* ============ il dettaglio di un appuntamento ============ */

.dett-testa {
  --c: var(--blu);
  display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
  padding: 10px 12px; border-radius: 12px; background: color-mix(in srgb, var(--c) 12%, white); border-left: 6px solid var(--c);
}
.dett-testa__cosa { font-weight: 700; font-size: 16px; min-width: 0; overflow-wrap: anywhere; }
.dett-testa__cosa small { font-weight: 500; color: var(--testo-2); }
.dett-paziente { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 12px; border: 1px solid var(--bordo); border-radius: 14px; }
/* il nome intero, anche lungo («Dell'Acquasanta Maria Concetta»): va a capo, e la nota accanto
   se non ci sta va sotto (intera è più giù, in «Note») */
.dett-nome { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 6px; min-width: 0; }
.dett-nome__testo { flex: 0 1 auto; min-width: 0; overflow-wrap: anywhere; }
.dett-contatti { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 8px; }
.dett-azioni { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.dett-azioni .btn { min-height: 48px; }
.dett-azioni--altre .btn--pericolo { grid-column: 1 / -1; }
.dett-dati { grid-template-columns: max-content minmax(0, 1fr); font-size: 14.5px; }
.dett-fatte h3 { font-size: 15px; margin-bottom: 4px; }
.dett-fatte .elenco > li { gap: 8px; align-items: baseline; }

/* le ore libere: Sposta e Prenota */
.ore-libere { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; min-width: 0; }
.ore-libere__gruppo { display: grid; gap: 6px; }
.ore-libere__titolo { font-size: 13px; font-weight: 650; color: var(--testo-2); }
.ore-libere__ore { display: grid; grid-template-columns: repeat(auto-fill, minmax(68px, 1fr)); gap: 8px; }
.ora-libera {
  min-height: 46px; border: 1px solid var(--bordo-forte); border-radius: 12px; background: var(--carta);
  font-size: 16px; font-weight: 650; font-variant-numeric: tabular-nums; color: var(--testo); cursor: pointer; touch-action: manipulation;
}
.ora-libera[aria-pressed="true"] { background: var(--blu); border-color: var(--blu); color: #fff; }
.ore-libere__aiuto { margin: 0; }
.ore-libere__altro { justify-self: start; }
.ore-libere__altra { margin-top: 2px; }

/* ============ Prenota ============ */

.prenota { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; min-width: 0; }
.passo { background: var(--carta); border: 1px solid var(--bordo); border-radius: 16px; padding: 14px 14px 16px; box-shadow: var(--ombra-1); min-width: 0; }
.passo__titolo { display: flex; align-items: center; gap: 10px; font-size: 16px; margin: 0 0 12px; color: var(--blu-scuro); }
.passo__n { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--blu-chiaro); color: var(--blu-scuro); font-size: 13px; font-weight: 750; flex: none; }
/* minmax(0, 1fr): la colonna è larga quanto lo schermo; una riga lunga (un paziente col codice
   fiscale) si accorcia coi puntini invece di allargare la pagina */
.passo__corpo { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; min-width: 0; }
.prenota-pazienti { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; }
.prenota-pazienti:empty { display: none; }
.prenota-pazienti__nota { margin: 0; }
.prenota-pazienti__nota:empty { display: none; }
.prenota-paziente { width: 100%; min-height: 56px; padding: 8px 10px; border: 1px solid var(--bordo); border-radius: 12px; background: var(--carta); text-align: left; cursor: pointer; color: var(--testo); touch-action: manipulation; }
.prenota-paziente:active { background: var(--blu-tenue); }
.prenota-paziente .paziente-riga > div, .doppione .paziente-riga > div { min-width: 0; }
.prenota-scelto { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 6px 8px 10px; border-radius: 12px; background: var(--blu-tenue); border: 1px solid var(--blu-chiaro); }
.prenota-scelto .paziente-riga { flex: 1; min-width: 0; }
.prenota-scelto .paziente-riga > div { min-width: 0; }
.scelte-medici { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.scelte-medici__gruppo { grid-column: 1 / -1; font-size: 13px; font-weight: 650; color: var(--testo-2); margin-top: 4px; }
.scelta-medico {
  --c: var(--blu);
  display: flex; align-items: center; gap: 9px; min-height: 52px; padding: 8px 12px; text-align: left;
  border: 1px solid var(--bordo-forte); border-radius: 12px; background: var(--carta); color: var(--testo); cursor: pointer; touch-action: manipulation; min-width: 0;
}
.scelta-medico .pallino { background: var(--c); }
.scelta-medico__nome { display: grid; min-width: 0; }
.scelta-medico__nome strong, .scelta-medico__nome small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.scelta-medico__nome small { color: var(--testo-2); font-size: 12px; }
.scelta-medico[aria-checked="true"] { border-color: var(--c); box-shadow: 0 0 0 2px color-mix(in srgb, var(--c) 40%, white); background: color-mix(in srgb, var(--c) 9%, white); }
.prenota-anteprima { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; color: var(--testo-2); font-size: 14px; }
.prenota-anteprima:empty { display: none; }
.prenota-anteprima__colore { width: 14px; height: 14px; border-radius: 4px; flex: none; }
/* il bottone in fondo resta sotto il pollice, sopra la barra delle sezioni: basso, il riepilogo
   al più su due righe (quello che il database dice che non va sta nel passo «Quando»), così il
   modulo resta da scorrere anche col testo grande */
.prenota-fissa {
  position: sticky; bottom: calc(var(--barra) + var(--sotto) + 8px); z-index: 5; display: grid; gap: 8px;
  padding: 10px; border-radius: 16px; background: rgba(255, 255, 255, .96); border: 1px solid var(--bordo); box-shadow: var(--ombra-2);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.prenota-fissa .btn { min-height: 52px; font-size: 16px; }
.prenota-riepilogo {
  margin: 0; font-size: 13.5px; color: var(--testo-2); text-align: center; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
}
.prenota-riepilogo[hidden], .prenota-avvisi:empty { display: none; }
/* il telefono di lato (o uno schermo basso): fra testata e barra resta poco, e il bottone sta in fondo al modulo */
@media (max-height: 500px) {
  .prenota-fissa { position: static; }
}
.modulo-telefono { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; min-width: 0; }
.doppioni { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.doppione { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 10px; border: 1px solid var(--bordo); border-radius: 12px; }

/* ============ Altro ============ */

.scheda-telefono { background: var(--carta); border: 1px solid var(--bordo); border-radius: 16px; padding: 14px; box-shadow: var(--ombra-1); margin-bottom: 12px; min-width: 0; }
.chi-sei { display: flex; align-items: center; gap: 12px; }
.chi-sei > div { display: grid; }
html[data-guscio="telefono"] .chi-sei .utente__iniziali { width: 44px; height: 44px; font-size: 15px; display: grid; place-items: center; border-radius: 50%; background: var(--blu-chiaro); color: var(--blu-scuro); font-weight: 700; flex: none; }
.consiglio-home { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; background: var(--blu-tenue); border-color: var(--blu-chiaro); }
.consiglio-home p { margin: 0; }
.consiglio-home__testa { display: flex; align-items: center; gap: 8px; color: var(--blu-scuro); }
.consiglio-home__testa svg { width: 22px; height: 22px; }
.altro-lista { display: grid; grid-template-columns: minmax(0, 1fr); background: var(--carta); border: 1px solid var(--bordo); border-radius: 16px; overflow: hidden; box-shadow: var(--ombra-1); }
.altro-voce {
  display: grid; grid-template-columns: 30px minmax(0, 1fr) 20px; align-items: center; gap: 12px; min-height: 60px;
  padding: 10px 12px 10px 14px; border: 0; border-bottom: 1px solid var(--bordo); background: none; text-align: left;
  color: var(--testo); cursor: pointer; text-decoration: none !important; font: inherit;
}
.altro-voce:last-child { border-bottom: 0; }
.altro-voce:active { background: var(--blu-tenue); }
.altro-voce__icona { color: var(--blu); display: grid; place-items: center; }
.altro-voce__icona svg { width: 23px; height: 23px; }
.altro-voce__testo { display: grid; gap: 2px; min-width: 0; }
.altro-voce__testo span { font-size: 13px; color: var(--testo-2); }
.altro-voce__freccia { color: var(--testo-3); }
.altro-voce__freccia svg { width: 18px; height: 18px; }
.altro-versione { margin: 14px 2px 0; font-size: 12px; text-align: center; }

/* ============ la campanella ============ */

.notifiche-lista { display: grid; grid-template-columns: minmax(0, 1fr); border: 1px solid var(--bordo); border-radius: 14px; overflow: hidden; }
html[data-guscio="telefono"] .notifica { width: 100%; border: 0; border-bottom: 1px solid var(--bordo); background: var(--carta); text-align: left; font: inherit; color: var(--testo); min-height: 56px; padding: 12px 14px; }
html[data-guscio="telefono"] .notifica:last-child { border-bottom: 0; }
html[data-guscio="telefono"] .notifica--nuova { background: var(--blu-tenue); box-shadow: inset 4px 0 0 var(--blu); }
.notifiche__tutte { justify-self: end; }

/* un tablet di lato, o un telefono grande: le carte un po' più larghe, le azioni su tre colonne */
@media (min-width: 600px) {
  :root { --margine: 22px; }
  .dett-azioni { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
  .velo, .foglio, .domanda { animation: none; }
}