/* ==========================================================================
   PediaCall — interfaccia del genitore
   --------------------------------------------------------------------------
   Costruita sulle mockup di Rosafio e Venturelli (MOCKUP 1, 2 e «Riepilogo
   finale»): barra di navigazione in basso sempre visibile, chat a bolle,
   card arrotondate con elevazione leggera, ampio spazio bianco.

   UNO SCOSTAMENTO STRUTTURALE, VOLUTO
   Nella mockup la chat è a testo libero e il sistema «capisce» le risposte.
   Qui le domande vengono dal libretto del pediatra e le risposte si danno con
   controlli: la forma resta quella della conversazione, ma nulla viene
   interpretato. È lo stesso motivo per cui la schermata «Fallback red flag»
   delle mockup non esiste — vedi `docs/nota-mockup-fase-1.md`.
   ========================================================================== */

body {
  /* Lo spazio che la barra sottrae alla pagina: l'oggetto è alto
     `--altezza-nav` meno `--stacco-nav`, e il resto è il vuoto sotto. */
  --altezza-nav: 68px;
  --stacco-nav: 10px;
  --altezza-uscita: 46px;
  /* Quanto occupa l'uscita **aperta**. Lo misura il codice quando si apre:
     a schermo scritto qui sarebbe sbagliato appena cambia una riga di testo. */
  --uscita-aperta: 0px;
  /* La tinta di riserva mentre l'aurora di `base.css` non è ancora dipinta:
     lo stesso bianco freddo su cui l'aurora poggia, così non c'è un lampo. */
  background: #fbfcfe;
}

/* Prima dell'accesso la barra di navigazione non c'è: lo spazio che le
   spetterebbe non va tenuto libero. */
body.senza-nav { --altezza-nav: 0px; --stacco-nav: 0px; }

.salta-al-contenuto {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  padding: .75rem 1rem; background: var(--carta); border-radius: 0 0 var(--r-m) 0;
}
.salta-al-contenuto:focus { left: 0; }

/* Il telaio: una colonna centrata che su desktop non si allarga oltre la
   larghezza di un telefono, perché è lì che questa interfaccia vive. */
.telaio {
  display: flex; flex-direction: column;
  min-height: 100dvh;
  max-width: 30rem; margin: 0 auto;
  /* Trasparente: il fondo è l'aurora di `base.css`, e una tinta piena qui la
     coprirebbe — il telaio è posizionato, quindi vince su `z-index: -1`. */
  background: transparent;
  position: relative;
}
@media (min-width: 34rem) {
  /* Su schermo largo il telaio resta una lastra: un filo di bordo chiaro e
     un'ombra, senza fondo proprio. L'aurora attraversa e continua fuori. */
  .telaio {
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .75), 0 24px 60px -30px rgba(38, 50, 80, .45);
  }
}

/* -------------------------------------------------------------- la testata */

.testata {
  position: sticky; top: 0; z-index: 20;
  background: var(--vetro);
  backdrop-filter: var(--sfocatura);
  -webkit-backdrop-filter: var(--sfocatura);
  border-bottom: 1px solid rgba(255, 255, 255, .8);
  box-shadow: 0 1px 0 rgba(38, 50, 80, .04);
}
.testata:empty { display: none; }

.testata-riga {
  display: grid; grid-template-columns: 40px 1fr 40px;
  align-items: center; gap: .5rem;
  padding: .5rem .75rem; min-height: 54px;
}
.testata-tondo {
  width: 40px; height: 40px; display: grid; place-items: center;
  border: 0; border-radius: 50%; background: transparent;
  color: var(--testo); cursor: pointer;
}
.testata-tondo:hover { background: var(--neutro-2); }
.testata-titoli { text-align: center; min-width: 0; }
.testata-titolo { font-weight: 650; font-size: .9375rem; letter-spacing: -.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.testata-sottotitolo { font-size: .75rem; color: var(--testo-tenue); }

/* «Nessuna barra di progresso visibile» è la scelta delle mockup per la chat.
   Qui la barra esiste, sottile: le nostre domande sono quarantacinque e sono
   note in anticipo, e nascondere quanto manca a chi è in ansia non è gentile,
   è opaco. */
.avanzamento { height: 3px; background: rgba(255, 255, 255, .55); overflow: hidden; }
.avanzamento-riempimento {
  height: 100%; width: 100%;
  background: linear-gradient(90deg, rgb(var(--acceso-acqua)), rgb(var(--acceso-blu)));
  box-shadow: 0 0 12px rgb(var(--acceso-blu) / .8);
  transform-origin: left center;
  transition: transform 340ms cubic-bezier(.16, 1, .3, 1);
}

/* ------------------------------------------------------------ il contenuto */

/* Lo spazio in fondo tiene conto di tutto ciò che è fissato sopra la pagina:
   la barra di navigazione, l'uscita chiusa e — quando è aperta — anche il suo
   pannello. Senza l'ultimo pezzo il pannello copriva i pulsanti principali,
   ed è capitato davvero: sulla schermata d'accesso nascondeva «Entra». */
.contenuto {
  flex: 1;
  padding: 1.25rem 1rem
    calc(var(--altezza-nav) + var(--altezza-uscita) + var(--uscita-aperta) + 1.5rem);
  /* Senza transizione, deliberatamente: animare il `padding` fa ricalcolare
     il layout a ogni fotogramma, e qui non c'è niente da guardare — è spazio
     vuoto in fondo alla pagina che cresce. Il movimento che conta è quello
     del pannello, che scorre da solo. */
}
.contenuto:focus { outline: none; }
.schermata { display: flex; flex-direction: column; gap: 1.25rem; }

.saluto { font-size: 1.5rem; font-weight: 700; letter-spacing: -.025em; }
.saluto-sotto { color: var(--testo-tenue); margin-top: .125rem; }

.sezione-titolo {
  display: flex; align-items: center; justify-content: space-between;
  font-size: .9375rem; font-weight: 650; margin-bottom: .625rem;
}
.sezione-azione { font-size: .8125rem; font-weight: 620; color: var(--blu-testo); text-decoration: none; }

/* ------------------------------------------------------- righe con freccia
   «> box bambino», «> box ultime sessioni»: la card cliccabile che porta
   dentro. Stessa forma per bambini, percorsi e sessioni. */

.righe { display: flex; flex-direction: column; gap: .5rem; }

.riga-carta {
  display: flex; align-items: center; gap: .875rem;
  width: 100%; text-align: left;
  padding: .875rem 1rem;
  background: var(--vetro-forte); border: 1px solid var(--vetro-bordo);
  backdrop-filter: var(--sfocatura);
  -webkit-backdrop-filter: var(--sfocatura);
  border-radius: var(--r-l);
  box-shadow: 0 1px 2px rgba(38, 50, 80, .05), inset 0 1px 0 rgba(255, 255, 255, .8);
  cursor: pointer; text-decoration: none; color: inherit;
  transition: border-color 140ms ease, box-shadow 200ms ease, transform 80ms ease, background-color 140ms ease;
}
/* Passandoci sopra la riga si accende: è l'unico momento in cui una riga
   dell'elenco si distingue dalle altre, e dipende dal dito, non dal contenuto. */
.riga-carta:hover {
  background: var(--vetro-pieno);
  border-color: rgb(var(--acceso-blu) / .4);
  box-shadow: 0 2px 4px rgba(38, 50, 80, .04),
              0 14px 30px -14px rgb(var(--acceso-blu) / .65),
              inset 0 1px 0 rgba(255, 255, 255, .9);
}
.riga-carta:active { transform: translateY(1px); }
.riga-corpo { flex: 1; min-width: 0; }
.riga-titolo { font-weight: 620; }
.riga-dettaglio { font-size: .8125rem; color: var(--testo-tenue); margin-top: .0625rem; }
.riga-freccia { color: var(--testo-tenue); }

/* La chiamata all'azione principale della home: piena, in blu. */
.azione-piena {
  display: flex; align-items: center; gap: .875rem;
  width: 100%; text-align: left;
  padding: 1rem; border: 0; border-radius: var(--r-l);
  background: var(--blu-testo); color: #fff;
  background-image: linear-gradient(150deg, rgb(var(--acceso-blu) / .6), transparent 60%);
  box-shadow:
    0 2px 4px rgb(var(--acceso-indaco) / .18),
    0 16px 34px -14px rgb(var(--acceso-blu) / .7),
    inset 0 1px 0 rgba(255, 255, 255, .28);
  cursor: pointer; text-decoration: none;
  transition: box-shadow 200ms ease, background-color 140ms ease;
}
.azione-piena:hover {
  background: var(--blu-scuro);
  box-shadow:
    0 2px 4px rgb(var(--acceso-indaco) / .2),
    0 20px 42px -14px rgb(var(--acceso-blu) / .85),
    inset 0 1px 0 rgba(255, 255, 255, .3);
}
.azione-tondo {
  width: 34px; height: 34px; flex: none; border-radius: 50%;
  background: rgba(255,255,255,.18); display: grid; place-items: center;
}
.azione-titolo { font-weight: 650; }
.azione-sotto { font-size: .8125rem; opacity: .85; }

/* ==================================================== la chat ============= */

.chat { display: flex; flex-direction: column; gap: .625rem; }

.scambio { display: flex; gap: .5rem; align-items: flex-end; }
.scambio-avatar {
  width: 26px; height: 26px; flex: none; border-radius: 50%;
  background: rgb(var(--acceso-blu) / .16); color: var(--blu-testo);
  box-shadow: 0 2px 8px -3px rgb(var(--acceso-blu) / .7);
  display: grid; place-items: center;
}
.bolla {
  max-width: 78%; padding: .6875rem .875rem;
  font-size: .9375rem; line-height: 1.45;
  border-radius: 18px;
}
/* «Bolle chat arrotondate e morbide» — l'angolo verso chi parla si stringe. */
/* Le bolle sono di vetro: quella del sistema riflette, la mia emette. */
.bolla-sistema {
  background: var(--vetro-forte); border: 1px solid var(--vetro-bordo);
  backdrop-filter: var(--sfocatura); -webkit-backdrop-filter: var(--sfocatura);
  box-shadow: 0 2px 10px -6px rgba(38, 50, 80, .35), inset 0 1px 0 rgba(255,255,255,.8);
  border-bottom-left-radius: 6px;
}
.scambio-mio { justify-content: flex-end; }
.bolla-mia {
  background: rgb(var(--acceso-blu) / .16); color: var(--blu-scuro); font-weight: 550;
  border: 1px solid rgb(var(--acceso-blu) / .28);
  box-shadow: 0 4px 16px -8px rgb(var(--acceso-blu) / .8);
  border-bottom-right-radius: 6px;
}
.bolla-mia.saltata { background: var(--neutro-2); color: var(--testo-tenue); font-weight: 400; font-style: italic; }
.bolla-ora { font-size: .6875rem; color: var(--testo-tenue); margin-top: .25rem; text-align: right; }

/* La domanda corrente: la bolla che sta per essere risposta, in evidenza. */
.bolla-corrente {
  background: var(--vetro-pieno); border: 1px solid rgb(var(--acceso-blu) / .3);
  backdrop-filter: var(--sfocatura); -webkit-backdrop-filter: var(--sfocatura);
  box-shadow: 0 10px 30px -14px rgb(var(--acceso-blu) / .75), inset 0 1px 0 rgba(255,255,255,.9);
  font-size: 1.0625rem; font-weight: 600; line-height: 1.35;
  max-width: 88%;
}
.bolla-guida {
  display: flex; gap: .5rem; align-items: flex-start;
  margin-top: .625rem; padding-top: .625rem;
  border-top: 1px solid var(--bordo);
  font-size: .8125rem; font-weight: 400; color: var(--testo-medio); line-height: 1.5;
}
.bolla-guida .icona { color: var(--blu); margin-top: .125rem; }

/* --- il compositore: dove si risponde ------------------------------------
   Sta in fondo come la barra di scrittura della mockup, ma invece del campo
   libero porta il controllo che la domanda richiede. */

.compositore {
  position: sticky;
  bottom: calc(var(--altezza-nav) + var(--altezza-uscita));
  margin: .5rem -1rem 0; padding: .875rem 1rem 1rem;
  background: var(--vetro);
  backdrop-filter: var(--sfocatura);
  -webkit-backdrop-filter: var(--sfocatura);
  border-top: 1px solid rgba(255, 255, 255, .8);
  display: flex; flex-direction: column; gap: .625rem;
}

.opzioni { display: flex; flex-direction: column; gap: .5rem; max-height: 42vh; overflow-y: auto; }

.opzione {
  display: flex; align-items: center; gap: .75rem;
  width: 100%; text-align: left; min-height: 50px;
  padding: .6875rem .875rem;
  background: var(--carta); border: 1.5px solid var(--bordo-forte);
  border-radius: var(--r-m); cursor: pointer; font-size: .9375rem;
  transition: border-color 120ms ease, background-color 120ms ease;
}
.opzione:hover { border-color: var(--blu-tenue); background: var(--informativo); }
.opzione[aria-pressed="true"] { border-color: var(--blu); background: var(--informativo); color: var(--blu-scuro); font-weight: 600; }

.opzione-segno {
  width: 22px; height: 22px; flex: none;
  border: 1.5px solid var(--bordo-forte); border-radius: 6px;
  display: grid; place-items: center; color: #fff;
  transition: background-color 120ms ease, border-color 120ms ease;
}
.opzione-segno.tondo { border-radius: 50%; }
.opzione-segno .icona { opacity: 0; transition: opacity 120ms ease; }
.opzione[aria-pressed="true"] .opzione-segno { background: var(--blu-testo); border-color: var(--blu-testo); }
.opzione[aria-pressed="true"] .opzione-segno .icona { opacity: 1; }
.opzione-segno.tondo::after {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: #fff; transform: scale(0);
  transition: transform 140ms cubic-bezier(.16, 1, .3, 1);
}
.opzione[aria-pressed="true"] .opzione-segno.tondo::after { transform: scale(1); }

.sino { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.sino .opzione { justify-content: center; min-height: 56px; font-size: 1rem; font-weight: 620; }
.durata { display: grid; grid-template-columns: 1fr 1fr; gap: .625rem; }

.piede-compositore { display: flex; gap: .625rem; align-items: center; }
.piede-compositore .btn-primario { flex: 1; }

/* ==================================================== il riepilogo ======== */

/* «Stato completamento in verde rassicurante»: dice che la raccolta è finita,
   non che il bambino stia bene. */
.esito-verde {
  display: flex; gap: .75rem; align-items: flex-start;
  padding: 1rem; border-radius: var(--r-l);
  background: var(--verde-tenue); border: 1px solid #cfe6da;
}
.esito-verde .icona { color: var(--verde-testo); margin-top: .125rem; }
.esito-verde b { display: block; color: var(--verde-testo); }
.esito-verde span { font-size: .875rem; color: var(--testo-medio); }

.gruppo-titolo {
  display: flex; align-items: center; gap: .5rem;
  font-size: .8125rem; font-weight: 650; color: var(--testo-medio);
  margin-bottom: .5rem;
}
.gruppo-titolo .icona { color: var(--blu-testo); }
/* Nelle righe la pastiglia è un po' più piccola: l'elenco resta compatto. */
.riga-carta .pastiglia { width: 34px; height: 34px; border-radius: 11px; }
.voci { background: var(--vetro-forte); border: 1px solid var(--vetro-bordo);
  backdrop-filter: var(--sfocatura); -webkit-backdrop-filter: var(--sfocatura);
  box-shadow: var(--ombra-vetro), inset 0 1px 0 rgba(255, 255, 255, .85); border-radius: var(--r-l); overflow: hidden; }
.voce { display: flex; justify-content: space-between; gap: 1rem; padding: .75rem 1rem; border-bottom: 1px solid var(--bordo); font-size: .9375rem; }
.voce:last-child { border-bottom: 0; }
.voce-etichetta { color: var(--testo-medio); }
.voce-valore { font-weight: 620; text-align: right; }

.prosa-riepilogo {
  background: var(--vetro-forte); border: 1px solid var(--vetro-bordo);
  backdrop-filter: var(--sfocatura); -webkit-backdrop-filter: var(--sfocatura);
  box-shadow: var(--ombra-vetro), inset 0 1px 0 rgba(255, 255, 255, .85); border-radius: var(--r-l);
  padding: 1rem; font-size: .9375rem; line-height: 1.6; color: var(--testo-medio);
}

/* --------------------------------------------------- contatta il pediatra */

.contatto { display: flex; align-items: center; gap: .875rem; width: 100%;
  padding: .875rem 1rem; background: var(--vetro-forte); border: 1px solid var(--vetro-bordo);
  backdrop-filter: var(--sfocatura); -webkit-backdrop-filter: var(--sfocatura);
  box-shadow: var(--ombra-vetro), inset 0 1px 0 rgba(255, 255, 255, .85);
  border-radius: var(--r-l); text-decoration: none; color: inherit;
  transition: border-color 140ms ease, box-shadow 200ms ease; }
.contatto:hover {
  border-color: rgb(var(--acceso-blu) / .4);
  box-shadow: 0 14px 30px -14px rgb(var(--acceso-blu) / .65), inset 0 1px 0 rgba(255,255,255,.9); }
.contatto-tondo { width: 40px; height: 40px; flex: none; border-radius: 50%;
  background: var(--verde-tenue); color: var(--verde-testo); display: grid; place-items: center; }
.contatto-etichetta { font-size: .75rem; color: var(--testo-tenue); }
.contatto-valore { font-weight: 620; }

/* ------------------------------------------ la cornice delle informative ---
   Sta prima e dopo il contenuto clinico, ed è visivamente distinta da esso:
   il genitore deve poter vedere a colpo d'occhio dove finisce quello che ha
   scritto il pediatra e dove comincia quello che diciamo noi sul prodotto. */

.cornice {
  padding: 1rem 1.125rem;
  background: rgb(var(--acceso-blu) / .1);
  backdrop-filter: var(--sfocatura);
  -webkit-backdrop-filter: var(--sfocatura);
  border: 1px solid rgb(var(--acceso-blu) / .25);
  border-radius: var(--r-l);
  box-shadow: 0 8px 24px -16px rgb(var(--acceso-blu) / .9);
}
.cornice-prima { margin-bottom: .25rem; }
/* La premessa di un percorso porta la stessa cornice delle schede informative,
   ed è la stessa cosa: testo dell'autore clinico, fermo, uguale per chiunque
   apra quel percorso. Vestirla come una risposta del sistema sarebbe dirle
   una bugia col colore. */
.premessa-percorso { margin: .25rem 0 .5rem; }

.cornice-titolo {
  display: flex; align-items: center; gap: .5rem;
  font-size: .9375rem; font-weight: 660; color: var(--blu-scuro);
  margin-bottom: .625rem;
}
.cornice-titolo .icona { color: var(--blu-testo); }

.cornice-testo { font-size: .875rem; line-height: 1.6; color: var(--testo-medio); }
.cornice-testo + .cornice-testo { margin-top: .75rem; }
.cornice-testo strong { color: var(--testo); }


/* Il blocco dei numeri è l'unico che porta il rosso, ed è lo stesso rosso
   dell'uscita permanente: è la stessa cosa, detta per esteso. */
.cornice-numeri { background: var(--rosso-tenue); border-color: var(--rosso-bordo); }
.cornice-numeri .cornice-titolo { color: var(--rosso); }
.cornice-numeri .cornice-titolo .icona { color: var(--rosso); }
.cornice-numeri .cornice-testo strong { color: var(--rosso); }
/* La copia clonata porta con sé le proprie classi: qui dentro non serve
   ritingerla, è già rossa dove deve. */
.cornice-numeri .testo-emergenza .uscita-testo:last-child { margin-bottom: 0; }


/* -------------------------------------------------- schede informative --- */

.prosa { font-size: .9375rem; }
.prosa h1 { font-size: 1.375rem; margin: 0 0 .75rem; letter-spacing: -.02em; }
.prosa h2 { font-size: 1.0625rem; margin: 1.75rem 0 .5rem; }
.prosa h3 { font-size: .9375rem; margin: 1.25rem 0 .375rem; }
.prosa p, .prosa li { color: var(--testo-medio); max-width: 62ch; }
.prosa p { margin: 0 0 .75rem; }
.prosa ul, .prosa ol { margin: 0 0 1rem; padding-left: 1.25rem; }
.prosa li { margin-bottom: .5rem; }
.prosa li strong, .prosa p strong { color: var(--testo); }
.prosa hr { border: 0; border-top: 1px solid var(--bordo); margin: 1.5rem 0; }
.prosa blockquote {
  margin: 0 0 1.25rem; padding: 1rem;
  background: var(--informativo); border: 1px solid var(--blu-tenue);
  border-radius: var(--r-m);
}
.prosa blockquote p { margin: 0 0 .5rem; font-size: .875rem; }
.prosa blockquote p:last-child { margin: 0; }

/* ============================================ la barra di navigazione =====
   «Bottom navigation semplice e coerente», «sempre visibile». Quattro voci,
   quelle delle mockup. */

/* La barra si stacca dal bordo: angoli tondi e un'ombra vera, invece del filo
   da 1 px che era tutto ciò che la separava dalla pagina bianca. Galleggiando
   prende aria anche dalla fascia rossa dell'uscita, che sta subito sotto.

   `--altezza-nav` è lo spazio che la barra sottrae alla pagina, non la sua
   altezza: 58 dell'oggetto più i 10 di stacco. L'ombra non occupa spazio. */
.nav {
  position: fixed; z-index: 30;
  bottom: calc(var(--altezza-uscita) + var(--stacco-nav));
  left: var(--stacco-nav); right: var(--stacco-nav);
  max-width: calc(30rem - var(--stacco-nav) * 2); margin: 0 auto;
  height: calc(var(--altezza-nav) - var(--stacco-nav));
  background: var(--vetro-forte);
  backdrop-filter: var(--sfocatura);
  -webkit-backdrop-filter: var(--sfocatura);
  border: 1px solid var(--vetro-bordo);
  border-radius: var(--r-xl);
  box-shadow:
    0 1px 2px rgba(38, 50, 80, .05),
    0 14px 34px -16px rgba(38, 50, 80, .5),
    inset 0 1px 0 rgba(255, 255, 255, .85);
  display: grid; grid-template-columns: repeat(4, 1fr);
}

/* Quattro tinte, sempre accese. Sono le stesse coppie delle pastiglie dei
   disturbi — stessi token — ma qui non significano niente: non c'è un ordine,
   non c'è una gerarchia, e nessuna delle quattro è rossa. Il rosso, in tutta
   l'applicazione, è di una cosa sola: l'uscita verso il 112, che sta dieci
   pixel più in basso e non deve avere concorrenti. */
.nav-voce {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .1875rem;
  border: 0; background: transparent; cursor: pointer; text-decoration: none;
  font-size: .6875rem; font-weight: 560;
  color: var(--nav-inchiostro);
  border-radius: var(--r-l);
}
.nav-guscio {
  display: grid; place-items: center;
  width: 34px; height: 30px; border-radius: 11px;
}
/* Il velo di colore compare solo sotto la voce corrente: le altre tre restano
   colorate ma senza fondo, così l'attiva si legge da lontano e non solo da
   una sfumatura di grigio. */
/* La voce corrente non cambia solo tinta: si accende. Il bagliore è del suo
   colore, con scostamento e sfocatura — e ce l'ha una voce sola alla volta,
   quella dove sei, che è un fatto di navigazione e non di contenuto. */
.nav-voce[aria-current="page"] { font-weight: 620; }
.nav-voce[aria-current="page"] .nav-guscio {
  background: var(--nav-velo);
  box-shadow: 0 3px 12px -3px rgb(var(--nav-alone) / .75), inset 0 1px 0 rgba(255,255,255,.7);
}
.nav-voce .icona path.pieno { fill: currentColor; fill-opacity: .2; }

.nav-blu   { --nav-inchiostro: var(--tinta-blu-inchiostro);   --nav-velo: var(--tinta-blu-fondo); --nav-alone: var(--acceso-blu); }
.nav-verde { --nav-inchiostro: var(--tinta-verde-inchiostro); --nav-velo: var(--tinta-verde-fondo); --nav-alone: var(--acceso-verde); }
.nav-viola { --nav-inchiostro: var(--tinta-viola-inchiostro); --nav-velo: var(--tinta-viola-fondo); --nav-alone: var(--acceso-viola); }
.nav-acqua { --nav-inchiostro: var(--tinta-acqua-inchiostro); --nav-velo: var(--tinta-acqua-fondo); --nav-alone: var(--acceso-acqua); }

/* ======================================================= l'uscita permanente
   Non è nelle mockup, ed è la cosa che sostituisce la loro schermata
   «Fallback red flag»: una porta sempre aperta, identica per tutti e
   indipendente da qualunque risposta. Proprio perché non dipende da nulla non
   è un'interpretazione dei dati del bambino. */

.uscita {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 40;
  max-width: 30rem; margin: 0 auto;
  /* Rosso translucido, come tutto il resto è vetro. Resta l'unica cosa rossa
     dell'applicazione: se il neon la imitasse altrove, smetterebbe di
     significare «qui si chiama». */
  background: rgba(253, 238, 238, .82);
  backdrop-filter: var(--sfocatura);
  -webkit-backdrop-filter: var(--sfocatura);
  border-top: 1px solid rgba(246, 214, 214, .9);
  box-shadow: 0 -8px 26px -18px rgba(180, 67, 61, .6);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.uscita-barra {
  display: flex; align-items: center; justify-content: center; gap: .5rem;
  width: 100%; min-height: var(--altezza-uscita);
  border: 0; background: transparent;
  color: var(--rosso); font-weight: 620; font-size: .8125rem; cursor: pointer;
}
.uscita-barra:hover { background: rgba(180, 67, 61, .06); }
.uscita-freccia { transition: transform 220ms cubic-bezier(.16, 1, .3, 1); }
.uscita-barra[aria-expanded="true"] .uscita-freccia { transform: rotate(180deg); }
/* `hidden` è un attributo, e il browser lo rende con `display: none` nel
   proprio foglio di stile. Ma qualunque regola d'autore che imposti `display`
   lo batte: il `display: flex` qui sotto teneva il pannello sempre aperto, e
   nessuno se ne accorgeva guardando l'HTML, dove `hidden` c'è.
   Questa riga va prima, e vince perché è più specifica. */
.uscita-pannello[hidden] { display: none; }

.uscita-pannello {
  padding: 0 1rem 1rem;
  display: flex; flex-direction: column; gap: .75rem;
  /* Su uno schermo corto il pannello non deve mangiarsi tutta la pagina:
     oltre una certa altezza scorre per conto proprio. */
  max-height: 58dvh; overflow-y: auto;
}
/* ============================================ il blocco d'emergenza, uno solo
   L'originale sta nel pannello dell'uscita, in `index.html`; la copia in fondo
   a ogni scheda informativa la clona `corniceDopo()`. Un solo insieme di
   regole, come per il testo: due fogli di stile per lo stesso blocco
   divergerebbero come due copie del testo. */

.uscita-testo { font-size: .875rem; line-height: 1.6; color: var(--testo-medio); }
.uscita-testo strong { color: var(--rosso); }

.uscita-elenco {
  list-style: none; display: flex; flex-direction: column; gap: .625rem;
  margin: 0 0 .875rem;
}
.uscita-elenco li {
  position: relative; padding-left: 1.125rem;
  font-size: .875rem; line-height: 1.55; color: var(--testo-medio);
}
.uscita-elenco li::before {
  content: ""; position: absolute; left: 0; top: .625em;
  width: 6px; height: 6px; border-radius: 50%; background: var(--rosso);
}
/* Nell'elenco il grassetto nomina chi chiamare — il pediatra, la guardia
   medica — e non è un allarme: resta inchiostro normale. Il rosso è dei
   numeri e della frase «se sei in dubbio, chiama». */
.uscita-elenco strong { color: var(--testo); }
.uscita-numeri { display: flex; flex-direction: column; gap: .5rem; }

/* `.btn-uscita` era un pulsante rosso pieno a tutta larghezza con «112»
   dentro. Non c'è più, in nessuna schermata. Il numero è rimasto dov'era
   l'unica cosa che contava — dentro la frase, componibile con un tocco —
   perché la garanzia è che l'invito a chiamare sia sempre presente, non che
   sia grande. 4,88:1 sul fondo del pannello: sopra il minimo. */
.uscita-numero {
  font-weight: 700; color: var(--rosso);
  text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px;
}

/* ------------------------------------------------------------- accoglienza */

/* ==================================================== la pagina introduttiva
   È la prima cosa che il genitore legge, e la parte che pesa di più è quella
   che dice ciò che l'applicazione **non** fa. Per questo non sta in fondo in
   caratteri piccoli: sta in mezzo alla pagina, con la stessa dimensione del
   resto e un riquadro che la tiene insieme.

   Il riquadro è azzurro e non rosso: dice come funziona il prodotto, non che
   c'è un pericolo. Il rosso qui è dell'uscita verso il 112, e basta. */

/* La luce.

   La scena di questa applicazione è un genitore preoccupato, spesso di notte.
   La risposta ovvia sarebbe una schermata scura, e sarebbe sbagliata due
   volte: il committente non la vuole, e il compito del prodotto è essere
   calmo e chiaro, non cupo. Quindi luce, ma non il bianco d'ospedale — tre
   campiture morbidissime nelle tinte del prodotto, come un'alba.

   Il fondo si allarga oltre il padding del contenitore con margini negativi e
   se lo riprende come padding proprio: un elemento fisso dietro tutto non
   funzionerebbe, perché su schermo largo il telaio è posizionato e la sua
   tinta piena coprirebbe qualunque cosa stia a `z-index: -1`. */
.benvenuto {
  display: flex; flex-direction: column; gap: 1.5rem;
  position: relative; isolation: isolate; overflow: hidden;
  margin: -1.25rem -1rem 0;
  padding: 1.25rem 1rem 2rem;
  min-height: calc(100dvh - var(--altezza-uscita) - 1.25rem);
}
/* L'aurora ora è di tutta l'applicazione e sta in `base.css`. Qui resta il
   respiro — sulla schermata d'apertura, e solo lì, il fondo si muove — più una
   campitura in più, perché questa è la pagina che deve accogliere. */
.benvenuto::before {
  content: ""; position: absolute; inset: -30% -20%; z-index: -1;
  background:
    radial-gradient(30rem 24rem at 26% 16%, rgb(var(--acceso-viola) / .16), transparent 62%),
    radial-gradient(26rem 22rem at 82% 8%, rgb(var(--acceso-acqua) / .18), transparent 64%);
  animation: respiro 38s ease-in-out infinite alternate;
}
/* Il respiro è un movimento continuo: la regola globale che accorcia le
   durate lo farebbe oscillare all'impazzata invece che fermarlo. */
@media (prefers-reduced-motion: reduce) { .benvenuto::before { animation-name: none; } }
@keyframes respiro {
  from { transform: translate3d(-1.4%, -1%, 0) scale(1); }
  to   { transform: translate3d(1.4%, 1%, 0) scale(1.05); }
}

.intro { display: flex; flex-direction: column; gap: 1.25rem; }

/* Il marchio arrivava come un quadrato bianco di 979 KB su una pagina che
   bianca non è, e si vedeva. Ora il bianco è trasparente nel file — ritagliato
   il margine, tolto il fondo, ridotto a 480 px: 21 KB, il 98% in meno.
   `mix-blend-mode` avrebbe fatto lo stesso effetto ma solo a riposo: un
   elemento in animazione apre un contesto di composizione, e per mezzo secondo
   il riquadro sarebbe tornato. Vedi `04-questioni-aperte-api` § 1.12. */
.intro-marchio {
  align-self: center; margin-bottom: -.25rem;
  display: block; width: 200px; max-width: 62%; height: auto;
}

/* Il titolo prende i colori del marchio invece del grigio d'inchiostro: era
   l'unica cosa scura in una pagina che il logo aveva già dipinto di blu e
   verde. Il verde sta sulle ultime parole, come nel logo sta su «Call» — e su
   uno `span`, non su una riga, perché la riga cambia con la larghezza. */
/* Il titolo è sceso di una taglia il 4 agosto 2026, con «Racconta del tuo
   bambino al tuo pediatra»: è più lungo del precedente e alla misura di prima
   occupava tre righe piene, spingendo in basso il riquadro che dice ciò che
   PediaCall non fa — che è la cosa più importante della schermata. */
.intro-titolo {
  font-size: clamp(1.5rem, 1.15rem + 1.9vw, 2rem);
  font-weight: 700; letter-spacing: -.035em; line-height: 1.08; text-wrap: balance;
  color: var(--marchio-blu);
}
.intro-titolo-verde { color: var(--marchio-verde); }
.intro-guida { color: var(--testo-medio); font-size: 1.0625rem; line-height: 1.55; max-width: 40ch; }

/* Il riquadro che dice ciò che il prodotto non fa.

   È bianco e non azzurro perché ora galleggia sopra una pagina colorata: è
   lui a dover essere il punto fermo. Ed è la cosa più importante della
   schermata, quindi ha la carta, l'ombra e il testo più grande dell'elenco. */
.intro-limiti {
  padding: 1.25rem 1.25rem 1.375rem;
  background: var(--vetro-forte);
  backdrop-filter: var(--sfocatura);
  -webkit-backdrop-filter: var(--sfocatura);
  border: 1px solid var(--vetro-bordo);
  border-radius: var(--r-xl);
  box-shadow: var(--ombra-vetro), inset 0 1px 0 rgba(255, 255, 255, .85);
}
.intro-limiti-titolo {
  font-size: 1rem; font-weight: 700; color: var(--testo);
  letter-spacing: -.015em; margin-bottom: .875rem;
}

.intro-elenco { list-style: none; display: flex; flex-direction: column; gap: .75rem; }
.intro-riga {
  display: flex; align-items: center; gap: .75rem;
  font-size: 1rem; color: var(--testo); line-height: 1.4;
}
/* I tre segni sbarrati. Le tinte sono fredde e vicine di proposito: tre punti
   di uno stesso discorso, non tre categorie da distinguere. Nessuna è rossa —
   il rosso è dell'uscita verso il 112, e questa non è un'emergenza: è come
   funziona il prodotto. */
.intro-segno {
  flex: none; width: 40px; height: 40px; border-radius: 13px;
  display: grid; place-items: center;
  background-image: linear-gradient(160deg, rgba(255,255,255,.55), rgba(255,255,255,0) 58%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.8), inset 0 -1px 0 rgba(0,0,0,.06),
    0 3px 12px -3px rgb(var(--alone, 55 65 81) / .6);
}
/* La sbarra si legge solo se prima apre un solco nella sagoma: il `taglio` è
   lo stesso tratto, più spesso, nel colore del fondo della pastiglia. */
.intro-segno.tinta-blu   { --solco: var(--tinta-blu-fondo); }
.intro-segno.tinta-acqua { --solco: var(--tinta-acqua-fondo); }
.intro-segno.tinta-viola { --solco: var(--tinta-viola-fondo); }
.intro-segno .icona path.taglio { stroke: var(--solco); stroke-width: 4.2; }
.intro-segno .icona path.sbarra { stroke-width: 2; }

.intro-decidi { font-size: 1.0625rem; line-height: 1.55; color: var(--testo-medio); }
.intro-decidi strong { color: var(--testo); font-weight: 680; }
.intro-numero {
  font-weight: 700; color: var(--rosso); text-decoration: none;
  border-bottom: 2px solid var(--rosso-bordo); white-space: nowrap;
}
.intro-numero:hover { border-bottom-color: var(--rosso); }

.intro-nota {
  font-size: .875rem; color: var(--testo-tenue); line-height: 1.55;
  padding-top: 1rem; border-top: 1px solid var(--bordo);
}

/* ------------------------------------------------- l'entrata, una volta sola

   Un solo movimento d'autore: la pagina sale di quattordici pixel a scalare,
   e dentro il riquadro le tre sbarre si tracciano. Non è decorazione — è la
   sola cosa animata dell'intera applicazione, ed è qui perché quel gesto dice
   ciò che il testo accanto afferma: non guarda, non decide, non avvisa.

   Tutto sta dentro `no-preference`: chi ha chiesto meno movimento non riceve
   né l'animazione né i suoi ritardi, e quindi nemmeno un lampo di pagina
   vuota mentre aspetta il proprio turno. */
@media (prefers-reduced-motion: no-preference) {
  .intro > * { animation: sali 640ms cubic-bezier(.16, 1, .3, 1) both; }
  .intro > *:nth-child(1) { animation-delay: 40ms; }
  .intro > *:nth-child(2) { animation-delay: 110ms; }
  .intro > *:nth-child(3) { animation-delay: 180ms; }
  .intro > *:nth-child(4) { animation-delay: 250ms; }
  .intro > *:nth-child(5) { animation-delay: 320ms; }
  .intro > *:nth-child(6) { animation-delay: 390ms; }
  .intro > *:nth-child(7) { animation-delay: 460ms; }

  /* Il tratto è lungo 20,4 unità sulla griglia da 24: 21 basta a nasconderlo
     tutto, e il `taglio` parte con la sbarra perché è la stessa linea. */
  .intro-segno .icona path.taglio,
  .intro-segno .icona path.sbarra {
    stroke-dasharray: 21; stroke-dashoffset: 21;
    animation: traccia 520ms cubic-bezier(.16, 1, .3, 1) both;
  }
  .intro-riga:nth-child(1) .intro-segno .icona path { animation-delay: 620ms; }
  .intro-riga:nth-child(2) .intro-segno .icona path { animation-delay: 720ms; }
  .intro-riga:nth-child(3) .intro-segno .icona path { animation-delay: 820ms; }
}

@keyframes sali {
  from { opacity: 0; transform: translateY(14px); }
}
@keyframes traccia {
  from { stroke-dashoffset: 21; }
  to { stroke-dashoffset: 0; }
}

/* ================================================== i riquadri dei consensi
   Il testo lungo — che cosa fa e che cosa non fa PediaCall — non è una riga
   accanto a una casella: è la cosa che il genitore deve davvero leggere, e
   ha la carta e lo spazio di un documento. La casella sta in fondo, dopo. */

.consenso { display: flex; flex-direction: column; gap: .625rem; }
.consenso-lungo {
  padding: 1rem 1.125rem;
  background: var(--vetro-forte);
  backdrop-filter: var(--sfocatura); -webkit-backdrop-filter: var(--sfocatura);
  border: 1px solid var(--vetro-bordo);
  border-radius: var(--r-l);
  box-shadow: var(--ombra-vetro), inset 0 1px 0 rgba(255, 255, 255, .85);
}
.consenso-lungo .prosa { font-size: .875rem; }
.consenso-lungo .prosa p { margin-bottom: .625rem; }
.consenso-lungo .prosa ul { margin-bottom: .625rem; padding-left: 1.125rem; }
.consenso-lungo .prosa li { margin-bottom: .375rem; color: var(--testo-medio); }
/* La casella si stacca dal testo che qualifica. */
.consenso-lungo > .riga {
  padding-top: .75rem; margin-top: .125rem;
  border-top: 1px solid rgba(38, 50, 80, .08);
}
.consenso-lungo input[type="checkbox"] { margin-top: .1875rem; flex: none; }
/* Tre documenti lunghi uno sotto l'altro erano un muro unico: l'intestazione
   dice dove comincia ognuno, e la riga la separa dal testo che introduce. */
.consenso-intestazione {
  padding-bottom: .625rem;
  border-bottom: 1px solid rgba(38, 50, 80, .08);
}

/* ============================================ la riga di «I tuoi bambini»
   Il tocco principale è il nome, che porta a scegliere il percorso. Il peso
   si aggiorna da un secondo comando accanto: sono due destinazioni diverse,
   quindi due elementi affiancati e non uno dentro l'altro. */

.riga-bambino { gap: .5rem; }
.riga-principale {
  display: flex; align-items: center; gap: .875rem;
  flex: 1; min-width: 0;
  text-decoration: none; color: inherit;
  /* Il margine negativo restituisce al tocco l'area che il padding della
     carta gli aveva tolto: il bersaglio arriva fino ai bordi. */
  margin: -.875rem 0 -.875rem -1rem; padding: .875rem 0 .875rem 1rem;
}
.riga-peso {
  flex: none; min-height: 38px; padding: .4rem .75rem; font-size: .8125rem;
}

/* ======================================== i consensi già accettati, rileggibili
   Non è un modulo da compilare: è un documento da rileggere. Ogni consenso ha
   il suo titolo, la riga che dice quando lo hai accettato e in che versione, e
   il testo com'era allora. */

.consenso-letto {
  padding: 1rem 1.125rem;
  background: var(--vetro-forte);
  backdrop-filter: var(--sfocatura); -webkit-backdrop-filter: var(--sfocatura);
  border: 1px solid var(--vetro-bordo);
  border-radius: var(--r-l);
  box-shadow: var(--ombra-vetro), inset 0 1px 0 rgba(255, 255, 255, .85);
}
.consenso-letto-titolo { font-size: 1rem; font-weight: 680; letter-spacing: -.01em; }
/* Il nome ufficiale del documento sta sotto quello con cui lo chiama il
   genitore, in piccolo: serve a chi lo deve verificare — un legale, un
   responsabile della protezione dei dati, un'autorità — e a lui non serve
   affatto. È un'etichetta, non una parte del testo, e si vede che lo è. */
.consenso-ufficiale {
  font-size: .75rem; color: var(--testo-tenue); letter-spacing: .005em;
  margin-top: .1875rem;
}
/* La data e la versione sono la parte che rende verificabile «l'ho letto»:
   stanno sotto il titolo, non in fondo in caratteri piccoli. */
.consenso-letto-quando {
  font-size: .8125rem; color: var(--tinta-verde-inchiostro);
  background: var(--tinta-verde-fondo);
  display: inline-block; padding: .1875rem .5rem; border-radius: var(--r-pillola);
  margin: .375rem 0 .75rem;
}
.consenso-letto .prosa { font-size: .875rem; }
.consenso-letto .prosa p { margin-bottom: .625rem; }
.consenso-letto .prosa ul { margin-bottom: .625rem; padding-left: 1.125rem; }
.consenso-letto .prosa li { margin-bottom: .375rem; color: var(--testo-medio); }

/* ------------------------------------------ il testo lungo, a scomparsa
   `<details>` nativo: si apre col tocco e con la tastiera, e un lettore di
   schermo lo annuncia già come apribile. L'etichetta cambia da sola perché
   sono due frasi, e il CSS mostra quella giusta — niente JavaScript che
   riscriva il testo a mano. */

.consenso-piega { margin-top: .25rem; }
.consenso-piega > summary {
  display: flex; align-items: center; gap: .375rem;
  cursor: pointer; list-style: none;
  font-size: .875rem; font-weight: 620; color: var(--blu-testo);
  padding: .375rem 0;
}
/* Il triangolino di serie va via: al suo posto la nostra freccia, che gira. */
.consenso-piega > summary::-webkit-details-marker { display: none; }
.consenso-piega > summary::marker { content: ''; }
.piega-freccia { transition: transform 180ms ease; }
.consenso-piega[open] > summary .piega-freccia { transform: rotate(180deg); }

.consenso-piega:not([open]) .piega-chiudi { display: none; }
.consenso-piega[open] .piega-apri { display: none; }

/* Il testo entra scorrendo, una volta sola e senza spostare quello che sta
   sotto più di quanto serva. */
@media (prefers-reduced-motion: no-preference) {
  .consenso-piega[open] > .prosa { animation: sali 260ms cubic-bezier(.16, 1, .3, 1) both; }
}

/* ------------------------------- i testi lunghi dei consensi, dentro le carte
   Il renderer è tarato su una pagina intera — «Segnali da conoscere» — e qui
   sta dentro una scheda: titoli più piccoli, aria più stretta, e le note di
   lavorazione visibilmente fuori dal discorso. */

.consenso-lungo .prosa h2,
.consenso-letto .prosa h2 {
  font-size: .9375rem; font-weight: 700; letter-spacing: -.01em;
  color: var(--blu-scuro);
  margin: 1.125rem 0 .375rem;
}
.consenso-lungo .prosa h2:first-child,
.consenso-letto .prosa h2:first-child { margin-top: .25rem; }

/* I marcatori [DA DECIDERE] sono citazioni: si vedono a colpo d'occhio come
   note di lavorazione e non come testo per il genitore. Ambra, che in questo
   prodotto non è mai un giudizio clinico — il rosso resta dell'uscita. */
.consenso-lungo .prosa blockquote,
.consenso-letto .prosa blockquote {
  margin: .5rem 0; padding: .5rem .75rem;
  background: rgb(var(--acceso-ambra) / .12);
  border: 1px dashed rgb(var(--acceso-ambra) / .45);
  border-radius: var(--r-s);
}
.consenso-lungo .prosa blockquote p,
.consenso-letto .prosa blockquote p {
  margin: 0; font-size: .8125rem; color: var(--ambra-testo);
}

/* Le versioni precedenti non si mostrano più: restano registrate, e chi le
   vuole le chiede. Le regole che le vestivano se ne vanno con loro — un
   selettore senza niente da vestire è solo un indizio falso per chi legge. */