/* ALNIRA sul telefono, M1 (13/10/2026): il guscio. Lo stile del primo avvio del PC, direzione «Costellazione» (renderer/benvenuto.css):
   notte blu, la sfera, Plus Jakarta Sans (SIL OFL 1.1, font/), pulsante a pillola. Il tema segue quello del telefono, scuro o chiaro;
   la sfera sta sempre nel suo fondo di notte. Nessuna richiesta esce dalla pagina: carattere e icone sono file dell'app.
   Niente `style=` in linea e niente `<style>`: la CSP non li ammette. I tocchi sono di almeno 48 px; la pagina scorre se non ci sta. */

@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("/font/plus-jakarta-sans-wght.woff2") format("woff2");
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
}

:root {
  --fondo: #061428;
  --luce: rgba(155, 212, 238, .085);
  --guscio: rgba(190, 215, 240, .05);
  --nucleo: #0C2140;
  --testo: #EEF2F6;
  --tenue: #A9B8C8;
  --filo: rgba(190, 215, 240, .14);
  --accento: #9BD4EE;
  --primario-fondo: #F4F2EC;
  --primario-testo: #061428;
  --avviso-fondo: rgba(155, 212, 238, .10);
  --ombra: 0 30px 60px -30px rgba(0, 0, 0, .6);
  --font: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --curva: cubic-bezier(.16, 1, .3, 1);
  color-scheme: dark;
}
@media (prefers-color-scheme: light) {
  :root {
    --fondo: #EDF1F4;
    --luce: rgba(43, 106, 138, .07);
    --guscio: rgba(11, 28, 48, .045);
    --nucleo: #FBFCFD;
    --testo: #0B1C30;
    --tenue: #4A5B6D;
    --filo: rgba(11, 28, 48, .12);
    --accento: #245F7D;
    --primario-fondo: #0B1C30;
    --primario-testo: #F4F2EC;
    --avviso-fondo: rgba(36, 95, 125, .10);
    --ombra: 0 30px 60px -36px rgba(11, 28, 48, .35);
    color-scheme: light;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html, body { margin: 0; min-height: 100%; background: var(--fondo); }
body {
  min-height: 100vh;
  min-height: 100dvh;
  font-family: var(--font);
  font-synthesis: none;
  font-size: 16px;
  line-height: 1.55;
  color: var(--testo);
  background:
    radial-gradient(120% 70% at 50% -10%, var(--luce), transparent 70%),
    var(--fondo);
  -webkit-font-smoothing: antialiased;
}

.guscio {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
  max-width: 28rem;
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0 auto;
  padding: max(20px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) max(20px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left));
}

.testata { display: flex; align-items: center; gap: 12px; }
.segno { display: block; width: 40px; height: 40px; border-radius: 12px; }
.nome { font-size: 1.05rem; font-weight: 700; letter-spacing: .14em; }

.rete {
  margin: 0;
  padding: 12px 16px;
  border: 1px solid var(--filo);
  border-radius: 16px;
  background: var(--avviso-fondo);
  font-size: .95rem;
  font-weight: 600;
}
.rete[hidden], .riquadro[hidden], .primario[hidden], .secondario[hidden] { display: none; }

/* La scheda: il guscio del primo avvio, con il suo respiro dentro (padding, non margini: i paragrafi hanno i loro). */
.scheda {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 26px 22px 22px;
  border: 1px solid var(--filo);
  border-radius: 28px;
  background: var(--guscio);
  box-shadow: var(--ombra);
}
.scheda h1 { margin: 0; font-size: 1.6rem; font-weight: 700; line-height: 1.2; letter-spacing: -.01em; }
.introduzione { margin: 0; color: var(--tenue); }

.riquadro {
  overflow: hidden;
  aspect-ratio: 1;
  border-radius: 20px;
  background: #000;
}
.video { display: block; width: 100%; height: 100%; object-fit: cover; }

.esito { margin: 0; color: var(--tenue); font-size: .95rem; }
.esito:empty { display: block; height: 0; }
.esito[data-stato="negata"], .esito[data-stato="assente"], .esito[data-stato="occupata"], .esito[data-stato="errore"], .esito[data-stato="non_disponibile"] { color: var(--testo); }

button {
  font: inherit;
  min-height: 52px;
  padding: 0 28px;
  border-radius: 999px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 160ms var(--curva), opacity 160ms var(--curva);
}
button:active { transform: scale(.98); }
button:disabled { opacity: .6; cursor: default; }
.primario { border: 0; background: var(--primario-fondo); color: var(--primario-testo); font-weight: 700; }
.secondario { border: 1px solid var(--filo); background: transparent; color: var(--testo); font-weight: 600; }
button:focus-visible { outline: 3px solid var(--accento); outline-offset: 3px; }

.piede { margin-top: auto; color: var(--tenue); font-size: .8rem; text-align: center; }
.senza-script { margin: 24px; text-align: center; }

/* M2b (13/10/2026): le schermate del collegamento. Una sola e visibile alla volta (l'attributo `hidden` vince su `display: flex` di .scheda). */
[hidden] { display: none !important; }
.scheda h2 { margin: 0; font-size: 1.6rem; font-weight: 700; line-height: 1.2; letter-spacing: -.01em; }
.lettura { display: none; }
.aiuto { margin: 0; color: var(--tenue); font-size: .9rem; }
.manuale { display: flex; flex-direction: column; gap: 10px; }
.manuale label { font-weight: 600; }
.campo {
  font: inherit; font-size: 1.05rem; letter-spacing: .06em; min-height: 52px; padding: 0 16px; width: 100%;
  border: 1px solid var(--filo); border-radius: 16px; background: var(--nucleo); color: var(--testo);
}
.campo:focus-visible { outline: 3px solid var(--accento); outline-offset: 2px; }
.verifica { display: flex; flex-direction: column; gap: 12px; }
.verifica[hidden] { display: none; }
.numero {
  margin: 4px 0; padding: 18px 12px; text-align: center; border: 1px solid var(--filo); border-radius: 20px; background: var(--nucleo);
  font-size: 2.4rem; font-weight: 700; letter-spacing: .12em; font-variant-numeric: tabular-nums;
}

@media (prefers-reduced-motion: reduce) {
  button { transition: none; }
  button:active { transform: none; }
}

/* M3 (13/10/2026): i lavori del computer, in sola lettura. La fascia dello stato del computer in cima; la Bacheca con le colonne UNA SOTTO L'ALTRA nell'ordine del PC;
   ogni scheda dice titolo, pratica, una pastiglia e chi fa il lavoro. Stessi colori e stesso carattere del resto; niente stili in linea. */
.collegato { display: flex; flex-direction: column; gap: 20px; }
.fascia {
  margin: 0; padding: 12px 16px; border: 1px solid var(--filo); border-radius: 16px; background: var(--avviso-fondo);
  font-size: .95rem; font-weight: 600; display: flex; align-items: center; gap: 10px;
}
.fascia::before { content: ""; flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--tenue); }
.fascia[data-stato="raggiungibile"]::before { background: #3FB67B; }
.fascia[data-stato="occupato"]::before { background: var(--accento); }
.fascia[data-stato="non_raggiungibile"]::before, .fascia[data-stato="revocato"]::before { background: #E0735C; }
.fascia[data-stato="da_aggiornare"]::before, .fascia[data-stato="in_attesa"]::before { background: #D9A441; }
.fascia[data-stato="non_raggiungibile"] { border-color: #E0735C; }
.bacheca { display: flex; flex-direction: column; gap: 22px; }
.bacheca .vuota { margin: 0; color: var(--tenue); }
.colonna { display: flex; flex-direction: column; gap: 10px; }
.colonna-testa { display: flex; align-items: center; justify-content: space-between; margin: 0; font-size: 1rem; font-weight: 700; letter-spacing: .01em; }
.colonna-conta {
  min-width: 28px; padding: 2px 9px; border-radius: 999px; border: 1px solid var(--filo); background: var(--nucleo);
  font-size: .85rem; font-weight: 700; text-align: center; font-variant-numeric: tabular-nums;
}
.schede { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; }
.scheda-lavoro {
  display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; border: 1px solid var(--filo); border-radius: 18px; background: var(--nucleo);
}
.scheda-lavoro[data-corsia="tu"] { border-style: dashed; }
.scheda-titolo { font-size: 1rem; font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; }
.scheda-pratica { color: var(--tenue); font-size: .88rem; overflow-wrap: anywhere; }
.scheda-riga { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 2px; }
.chip {
  display: inline-flex; align-items: center; padding: 3px 11px; border-radius: 999px; border: 1px solid var(--filo); background: var(--guscio);
  font-size: .82rem; font-weight: 600; line-height: 1.4;
}
.chip[data-tono="oggi"] { border-color: var(--accento); color: var(--accento); }
.chip[data-tono="attesa"] { background: var(--avviso-fondo); }
.chip[data-tono="blocco"] { border-color: #E0735C; color: #E0735C; }
.chi {
  flex: none; margin-left: auto; min-width: 28px; height: 28px; padding: 0 8px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px;
  background: var(--primario-fondo); color: var(--primario-testo); font-size: .78rem; font-weight: 700;
}
.chi[data-chi="tu"] { background: transparent; color: var(--testo); border: 1px solid var(--filo); }
.bacheca-nota { margin-top: 4px; }
@media (prefers-color-scheme: light) {
  .chip[data-tono="blocco"], .fascia[data-stato="non_raggiungibile"] { color: #A33B27; border-color: #C9533C; }
  .chip[data-tono="blocco"] { color: #A33B27; }
}

/* M4 (13/10/2026): conversazioni, Studio e domande, in sola lettura. Le sezioni si scelgono da una fila di schede in cima; ogni elenco e una colonna di righe che si aprono;
   i messaggi sono fumetti. Nessun campo e nessun modulo. */
.sezioni { display: flex; gap: 2px; padding: 4px; border: 1px solid var(--filo); border-radius: 999px; background: var(--guscio); overflow-x: auto; }
.sezione-tab { flex: 1 1 auto; min-width: 0; min-height: 44px; padding: 0 9px; border: 0; background: transparent; color: var(--tenue); font-weight: 600; font-size: .8rem; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.sezione-tab[aria-selected="true"] { background: var(--primario-fondo); color: var(--primario-testo); }
.tab-conta { min-width: 20px; padding: 0 6px; border-radius: 999px; background: var(--accento); color: var(--primario-testo); font-size: .75rem; font-weight: 700; line-height: 20px; text-align: center; }
.sezione { display: flex; flex-direction: column; gap: 12px; }
.sezione .vuota { margin: 0; color: var(--tenue); }
.righe { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; }
.riga-voce { display: flex; flex-direction: column; gap: 4px; padding: 0; border: 1px solid var(--filo); border-radius: 18px; background: var(--nucleo); }
.riga-voce[data-solo-sul-computer] { padding: 14px 16px; border-style: dashed; color: var(--tenue); }
.riga { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; width: 100%; min-height: 64px; padding: 14px 16px; border: 0; border-radius: 18px; background: transparent; color: var(--testo); text-align: left; }
.riga-testa { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 10px; }
.riga-titolo { font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; }
.riga-sotto { color: var(--tenue); font-size: .88rem; overflow-wrap: anywhere; }
.pallino { flex: none; min-width: 24px; height: 24px; padding: 0 7px; border-radius: 999px; background: #3FB67B; color: #04210f; font-size: .78rem; font-weight: 700; line-height: 24px; text-align: center; }
.indietro { align-self: flex-start; min-height: 44px; padding: 0 18px; border: 1px solid var(--filo); background: transparent; color: var(--testo); font-weight: 600; }
.dettaglio { display: flex; flex-direction: column; gap: 14px; }
.dettaglio-titolo { margin: 0; font-size: 1.15rem; font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; }
.messaggi { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; }
.messaggio { display: flex; flex-direction: column; gap: 4px; max-width: 92%; padding: 10px 14px; border: 1px solid var(--filo); border-radius: 18px; background: var(--nucleo); }
.messaggio[data-ruolo="collega"] { align-self: flex-end; background: var(--avviso-fondo); }
.messaggio[data-ruolo="evento"] { align-self: stretch; max-width: 100%; border-style: dashed; background: transparent; }
.messaggio-autore { color: var(--tenue); font-size: .78rem; font-weight: 700; letter-spacing: .02em; }
.messaggio-testo { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.messaggio-ora { align-self: flex-end; color: var(--tenue); font-size: .75rem; }
.carta-studio { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border: 1px solid var(--accento); border-radius: 18px; background: var(--nucleo); }
.carta-titolo { margin: 0; font-size: .95rem; font-weight: 700; }
.carta-testo { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.domanda { display: flex; flex-direction: column; gap: 10px; padding: 16px; border: 1px solid var(--filo); border-radius: 20px; background: var(--nucleo); }
.domanda-origine { margin: 0; color: var(--tenue); font-size: .78rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; }
.domanda-titolo { margin: 0; font-size: 1.05rem; font-weight: 700; }
.domanda-testo { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.domanda-avviso { margin: 0; padding: 10px 12px; border: 1px solid #D9A441; border-radius: 14px; background: var(--avviso-fondo); font-size: .9rem; }
.opzioni { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.opzione { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border: 1px solid var(--filo); border-radius: 14px; }
.opzione-etichetta { display: flex; align-items: center; gap: 8px; font-weight: 700; overflow-wrap: anywhere; }
.opzione-descrizione { color: var(--tenue); font-size: .88rem; overflow-wrap: anywhere; }
.rispondi-dal-computer { margin: 0; padding: 8px 12px; border: 1px dashed var(--filo); border-radius: 14px; color: var(--tenue); font-weight: 600; font-size: .9rem; text-align: center; }

/* S2 (15/10/2026): rispondere dal telefono. Le opzioni si toccano (almeno 44 px), il campo «Altro» e un campo di testo normale, «Invia» sta sotto l'ultima domanda del gruppo. */
.scelte { margin: 0; padding: 0; border: 0; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.scelte-legenda { padding: 0; color: var(--tenue); font-size: .85rem; font-weight: 600; }
.opzione-scelta { display: flex; align-items: flex-start; gap: 12px; min-height: 44px; cursor: pointer; }
.opzione-scelta input { flex: none; width: 24px; height: 24px; margin: 2px 0 0; accent-color: var(--accento); }
.opzione-testo { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.altro { display: flex; flex-direction: column; gap: 4px; }
.altro-etichetta { color: var(--tenue); font-size: .85rem; font-weight: 600; }
.altro input { min-height: 44px; padding: 8px 12px; border: 1px solid var(--filo); border-radius: 14px; background: var(--nucleo); color: var(--testo); font: inherit; }
.altro input:focus-visible { outline: 3px solid var(--accento); outline-offset: 2px; }
.piede-risposta { display: flex; flex-direction: column; gap: 8px; margin: -4px 0 8px; }
.piede-risposta button { min-height: 48px; }
.stato-risposta { margin: 0; padding: 10px 12px; border: 1px solid var(--filo); border-radius: 14px; font-weight: 700; }
.stato-risposta[data-esito="ok"] { border-color: var(--accento); }
.stato-risposta[data-esito="no"] { border-color: #E0735C; }
.esito-errore { margin: 0; padding: 10px 12px; border: 1px solid #E0735C; border-radius: 14px; }
.avviso-scrittura { margin: 0; padding: 10px 12px; border: 1px dashed var(--filo); border-radius: 14px; color: var(--tenue); font-size: .9rem; }
.riga-fissa { padding: 0 4px; }
.storico-risposte { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.storico-titolo { margin: 0; color: var(--tenue); font-size: .85rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; }
.storico-risposte .riga-voce { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border: 1px solid var(--filo); border-radius: 14px; background: var(--nucleo); }
.storico-risposte .stato-risposta { padding: 0; border: 0; }
.storico-risposte .riga-sotto { color: var(--tenue); font-size: .85rem; }

/* S3 (19/10/2026): scrivere in una conversazione. Il campo sta in fondo ai messaggi; riusa le classi di S2 (`piede-risposta`, `stato-risposta`, `aiuto`, `riga-fissa`, `esito-errore`, `avviso-sensibile`,
   `primario`, `secondario`). Il carattere e di 16 px: sotto, Safari ingrandisce la pagina quando il campo prende il fuoco. L'etichetta c'e per chi usa il lettore di schermo ma non si vede. */
.scrivi-messaggio { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; padding-top: 14px; border-top: 1px solid var(--filo); }
.scrivi-messaggio .piede-risposta { margin: 0; }
.messaggio-etichetta { display: block; }
.messaggio-campo { display: block; width: 100%; min-height: 104px; padding: 10px 12px; border: 1px solid var(--filo); border-radius: 14px; background: var(--nucleo); color: var(--testo); font: inherit; line-height: 1.45; resize: vertical; }
.messaggio-campo:focus-visible { outline: 3px solid var(--accento); outline-offset: 2px; }
.messaggio-campo::placeholder { color: var(--tenue); opacity: 1; } /* il grigio di serie del browser dava 3,49:1 sul blu del tema scuro (collaudo visivo del 20/10) */
.messaggio-campo[readonly] { opacity: .7; }
.messaggio-conteggio { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.messaggio-conteggio[data-oltre] { color: #E0735C; font-weight: 700; }
.solo-lettore { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
@media (prefers-color-scheme: light) {
  .messaggio-conteggio[data-oltre] { color: #A33B27; }
}

/* S5 (20/10/2026): il pulsante «Nuova conversazione» in testa all'elenco; il campo che si apre sotto e quello di S3 */
.nuova-conversazione { align-self: flex-start; }