/*
  Sistema visivo — «il vestito» (MOCKUP-VESTITO.md, DC36 e DC54; Ondata 1).
  Sostituisce le regole di SPEC-INTERFACCIA.md §2 dove dicono altro. Regole ferme:
  - UN SOLO FOGLIO: i gettoni (colori, caratteri, raggi) stanno qui sotto, in
    :root, e ogni regola li usa. Nessun colore scritto a mano più in basso;
  - il blu si guadagna: barra in alto, comando principale della pagina,
    elemento selezionato, link. Mai come decorazione o fondo di riquadri;
  - un comando principale per pagina (pieno); gli altri contornati o testuali;
  - densi gli elenchi (righe da 36 px, testo 14 px), ariose le schede (16 px);
  - lo stato si legge dalla parola, non solo dal colore;
  - contrasto del testo almeno 4,5:1, tocco minimo 44 px, focus visibile;
  - i caratteri li serve il server (woff2 in static/nucleo/caratteri, licenza
    OFL accanto ai file): mai caricati da Google in esecuzione.

  --colore-primario è l'unica variabile NON definita qui: viene iniettata in
  nucleo/templates/nucleo/scheletro.html da COLORE_PRIMARIO (.env), perché un
  file .css statico non può leggere una variabile d'ambiente. È il colore
  "azione" (link, selezione, comando principale); se non è impostata vale il
  blu ftalo.
*/

/* ── Caratteri (serviti dal server) ───────────────────────────────────────
   Atkinson Hyperlegible Next per testo e dati, Bricolage Grotesque per i
   titoli. File variabili (un file copre tutti i pesi), divisi in «latin» e
   «latin-ext»: il browser scarica il secondo solo se la pagina ne ha bisogno. */

@font-face {
  font-family: "Atkinson Hyperlegible Next";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("../caratteri/atkinson-hyperlegible-next-latin.fe43d3268c0a.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
    U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Atkinson Hyperlegible Next";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("../caratteri/atkinson-hyperlegible-next-latin-ext.592a99bc98c0.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308,
    U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
    U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Atkinson Hyperlegible Next";
  font-style: italic;
  font-weight: 200 800;
  font-display: swap;
  src: url("../caratteri/atkinson-hyperlegible-next-corsivo-latin.3dfa899b92d7.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
    U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Atkinson Hyperlegible Next";
  font-style: italic;
  font-weight: 200 800;
  font-display: swap;
  src: url("../caratteri/atkinson-hyperlegible-next-corsivo-latin-ext.b74b4ab7bb5e.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308,
    U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
    U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Bricolage Grotesque";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("../caratteri/bricolage-grotesque-latin.c47ac31e5437.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
    U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Bricolage Grotesque";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("../caratteri/bricolage-grotesque-latin-ext.b21945eb5067.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308,
    U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
    U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* ── Gettoni del vestito (MOCKUP-VESTITO.md §2) ── */
  --blu-ftalo: #000f89; /* barra, comando principale, selezione, link */
  --blu-ftalo-scuro: #000a5e; /* link al passaggio del mouse */
  --blu-ftalo-contorno: #b9c0f2; /* bordo dei comandi secondari */
  --velatura: #e6e9fb; /* voce attiva del menu, riquadri di icona */
  --velatura-chiara: #f0f2fd; /* righe evidenziate */
  --inchiostro: #121726; /* testo */
  --grafite: #4a5263; /* testo secondario */
  --carta: #f4f5f9; /* fondo delle pagine */
  --bianco: #ffffff; /* riquadri, tabelle */
  --filo: #dde1e8; /* bordi */
  --filo-tabella: #edeff3; /* righe di tabella */
  --filo-campo: #c4cad4; /* bordi dei campi */
  --fondo-testata: #fafbfc; /* intestazione delle tabelle */

  /* stati: fondo / testo */
  --stato-grigio-fondo: #eef0f4;
  --stato-grigio-testo: #3e4656;
  --stato-blu-fondo: #e6e9fb;
  --stato-blu-testo: #000f89;
  --stato-verde-fondo: #e3f3ec;
  --stato-verde-testo: #0a5c41;
  --stato-ambra-fondo: #fdf0d5;
  --stato-ambra-testo: #7a4e00;
  --stato-rosso-fondo: #fbe7e5;
  --stato-rosso-testo: #9a2219;
  --mancanze-testo: #5c3b00; /* riquadro «cosa manca» (Sessione 20) */
  --rifiuto-testo: #a3271f; /* comando di rifiuto */
  --rifiuto-contorno: #e9b8b3;

  /* ── I nomi usati dal resto del foglio, legati ai gettoni ── */
  --colore-profondo: var(--blu-ftalo);
  --colore-errore: var(--stato-rosso-testo);
  --colore-errore-sfondo: var(--stato-rosso-fondo);
  --colore-attenzione: var(--stato-ambra-testo);
  --colore-attenzione-sfondo: var(--stato-ambra-fondo);
  --colore-positivo: var(--stato-verde-testo);
  --colore-positivo-sfondo: var(--stato-verde-fondo);
  --colore-selezione-sfondo: var(--velatura);

  /* neutri */
  --grigio-950: var(--inchiostro);
  --grigio-800: #2b323d;
  --grigio-600: var(--grafite);
  --grigio-400: #8b93a3;
  --grigio-200: var(--filo);
  --grigio-100: var(--stato-grigio-fondo);
  --grigio-050: #f6f7fa;

  --colore-testo: var(--inchiostro);
  --colore-testo-attenuato: var(--grafite);
  --colore-sfondo: var(--carta);
  --colore-sfondo-laterale: var(--bianco); /* il menu laterale è bianco, col suo filo */
  --colore-superficie: var(--bianco);
  --colore-bordo: var(--filo);

  /* caratteri */
  --carattere: "Atkinson Hyperlegible Next", system-ui, -apple-system, "Segoe UI", Roboto,
    Helvetica, Arial, sans-serif;
  --carattere-titoli: "Bricolage Grotesque", "Atkinson Hyperlegible Next", system-ui, sans-serif;
  /* logo e titolo nella barra restano col carattere di sistema (MOCKUP §3) */
  --carattere-sistema: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --testo-piccolo: 14px; /* minimo consentito */
  --testo-corpo: 16px;
  --testo-titolo: 20px;
  --testo-titolone: 34px;

  /* spaziature: scala fissa, niente valori arbitrari */
  --spazio-1: 4px;
  --spazio-2: 8px;
  --spazio-3: 12px;
  --spazio-4: 16px;
  --spazio-5: 24px;
  --spazio-6: 32px;
  --spazio-7: 40px;
  --spazio-8: 48px;
  --spazio-9: 64px;

  /* raggi (MOCKUP §2): 6 comandi e campi · 8 riquadri interni · 10 riquadri principali */
  --raggio-comando: 6px;
  --raggio-piccolo: 8px;
  --raggio-medio: 8px;
  --raggio-grande: 10px;

  /* ombra: solo sulle tendine (menu degli spazi, notifiche, account) */
  --ombra-scheda: none;
  --ombra-popover: 0 12px 32px rgba(18, 23, 38, 0.14);

  --larghezza-colonna-contestuale: 248px;
  --larghezza-contenuto-massima: 1240px;
  --area-toccabile-minima: 44px;
  --altezza-voce-laterale: 40px;
  --altezza-barra: 56px; /* 52px sotto i 640px (media più in basso) */
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--carattere);
  font-size: var(--testo-corpo);
  line-height: 1.5;
  color: var(--colore-testo);
  background: var(--colore-sfondo);
}

h1,
h2,
h3 {
  margin: 0 0 var(--spazio-3);
  font-weight: 700;
  line-height: 1.25;
}

/* Titoli di pagina e di sezione: Bricolage Grotesque (MOCKUP §3). I titoli dei
   riquadri dentro una scheda restano in Atkinson: vedi .blocco-scheda-titolo. */
h1 {
  font-family: var(--carattere-titoli);
  font-size: var(--testo-titolone);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.5px;
}

h2 {
  font-family: var(--carattere-titoli);
  font-size: var(--testo-titolo);
}

p {
  margin: 0 0 var(--spazio-3);
}

a {
  color: var(--colore-primario);
}

a:hover {
  color: var(--blu-ftalo-scuro);
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--colore-primario);
  outline-offset: 2px;
}

small,
.nota-piccola {
  font-size: var(--testo-piccolo);
  color: var(--colore-testo-attenuato);
}

.testo-introduttivo {
  margin: 0 0 var(--spazio-6);
  font-size: var(--testo-corpo);
  color: var(--colore-testo-attenuato);
}

/* ── Bottoni e moduli ──────────────────────────────────────────────────── */

/* I comandi (MOCKUP §4): uno solo, dappertutto. `.bottone` da solo è il
   comando secondario (contornato, testo blu); `.bottone-primario` è il comando
   principale della pagina (pieno), uno per pagina; `.bottone-testo` è quello
   testuale («Annulla»); `.bottone-pericolo-testo` il rifiuto (contornato
   rosso); `.bottone-pericolo` la conferma di un'azione che distrugge. */
.bottone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spazio-2);
  min-height: var(--area-toccabile-minima);
  padding: var(--spazio-2) var(--spazio-4);
  border: 1px solid var(--blu-ftalo-contorno);
  border-radius: var(--raggio-comando);
  background: var(--bianco);
  color: var(--colore-primario);
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
}

.bottone:hover {
  background: var(--velatura-chiara);
  color: var(--colore-primario);
}

.bottone-primario,
.bottone-primario:hover {
  background: var(--colore-primario);
  border-color: var(--colore-primario);
  color: var(--bianco);
}

.bottone-primario:hover {
  background: var(--blu-ftalo-scuro);
  border-color: var(--blu-ftalo-scuro);
}

.bottone-testo {
  border-color: transparent;
  background: transparent;
  color: var(--colore-testo);
}

.bottone-testo:hover {
  background: var(--grigio-100);
  color: var(--colore-testo);
}

.bottone[disabled],
.bottone:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

label {
  display: block;
  margin-top: var(--spazio-3);
  margin-bottom: 6px;
  font-size: var(--testo-piccolo);
  font-weight: 700;
  color: var(--colore-testo);
}

input[type="text"],
input[type="password"],
input[type="email"],
input[type="date"],
input[type="number"],
input[type="search"],
select,
textarea {
  width: 100%;
  /* C6: il riquadro si allunga, non si allarga oltre chi lo contiene. */
  max-width: 100%;
  min-height: var(--area-toccabile-minima);
  padding: var(--spazio-2) var(--spazio-3);
  font-family: inherit;
  font-size: 15px;
  border: 1px solid var(--filo-campo);
  border-radius: var(--raggio-comando);
  background: var(--colore-superficie);
  color: var(--colore-testo);
}

/* ── Avvisi (mai il solo colore: sempre anche una parola, SPEC §8) ──────── */

.avviso {
  padding: var(--spazio-3) var(--spazio-4);
  border-radius: 6px;
  margin-bottom: var(--spazio-4);
  font-size: var(--testo-piccolo);
}

.avviso-errore {
  background: var(--colore-errore-sfondo);
  color: var(--colore-errore);
  border: 1px solid var(--colore-errore);
}

.avviso-successo {
  background: var(--colore-positivo-sfondo);
  color: var(--colore-positivo);
  border: 1px solid var(--colore-positivo);
}

.avviso-informativo {
  background: var(--grigio-100);
  color: var(--colore-testo-attenuato);
  border: 1px solid var(--colore-bordo);
}

.avviso-attenzione {
  background: var(--colore-attenzione-sfondo);
  color: var(--mancanze-testo);
  border: 1px solid transparent;
}

/* ── Diagnostica: elenco delle anomalie aperte (amministrazione, sessione 9b) ── */

.elenco-anomalie {
  display: flex;
  flex-direction: column;
  gap: var(--spazio-4);
  margin-top: var(--spazio-5);
}

.scheda-anomalia {
  border: 1px solid var(--colore-bordo);
  border-left-width: 4px;
  border-radius: var(--raggio-grande);
  background: var(--colore-superficie);
  box-shadow: var(--ombra-scheda);
  padding: var(--spazio-4) var(--spazio-5);
}

.scheda-anomalia h2 {
  margin: 0 0 var(--spazio-2);
  font-size: var(--testo-titolo);
}

.scheda-anomalia-critico {
  border-left-color: var(--colore-errore);
}

.scheda-anomalia-avviso {
  border-left-color: var(--colore-attenzione);
}

.gravita-anomalia {
  color: var(--colore-testo-attenuato);
  font-size: var(--testo-piccolo);
  margin: 0 0 var(--spazio-3);
  text-transform: uppercase;
}

.cosa-fare {
  margin-top: var(--spazio-3);
}

/* ── Tabella diagnostica (`/health/dettaglio/`, sessione 9a) ─────────────── */

.tabella-diagnostica {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--testo-piccolo);
}

.tabella-diagnostica th,
.tabella-diagnostica td {
  text-align: left;
  padding: var(--spazio-2) var(--spazio-3);
  border-bottom: 1px solid var(--colore-bordo);
  vertical-align: top;
}

.tabella-diagnostica .esito {
  font-weight: 600;
  white-space: nowrap;
}

.tabella-diagnostica .esito-ok {
  color: var(--colore-positivo);
}

.tabella-diagnostica .esito-errore {
  color: var(--colore-errore);
}

.tabella-diagnostica .esito-informativo {
  color: var(--colore-testo-attenuato);
}

.tabella-diagnostica .durata {
  color: var(--colore-testo-attenuato);
  white-space: nowrap;
}

.messaggi {
  list-style: none;
  margin: 0 0 var(--spazio-4);
  padding: 0;
}

.messaggio {
  padding: var(--spazio-2) var(--spazio-3);
  border-radius: 6px;
  margin-bottom: var(--spazio-2);
  font-size: var(--testo-piccolo);
  background: var(--grigio-100);
}

.messaggio-error {
  background: var(--colore-errore-sfondo);
  color: var(--colore-errore);
}

.messaggio-success {
  background: var(--colore-positivo-sfondo);
  color: var(--colore-positivo);
}

/* ── Struttura comune: navigazione su due livelli (SPEC-INTERFACCIA.md §3) ──
   Livello 1, barra superiore: sempre presente, in ogni schermata.
   Livello 2, colonna contestuale: solo dentro uno spazio (SESSIONE-6A-BIS).
   Manutenzione M2: barra allineata a quella di F-Lab — altezza FISSA (56px,
   52px da telefono) invece che ricavata dagli spazi, logo alto 18px, avatar
   piccolo e traslucido, tendine con voci basse e separatori sottili. */

.barra-superiore {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spazio-3);
  height: var(--altezza-barra);
  padding: 0 var(--spazio-5);
  border-bottom: 1px solid var(--colore-profondo);
  background: var(--colore-profondo);
  color: var(--bianco);
}

.barra-superiore-sinistra,
.barra-superiore-destra {
  display: flex;
  align-items: center;
  gap: var(--spazio-5);
  min-width: 0;
}

.barra-superiore-destra {
  gap: var(--spazio-1);
  flex-shrink: 0;
}

/* La ricerca al centro della barra (l'unica aggiunta del vestito). */
.barra-ricerca {
  position: relative;
  flex: 1 1 auto;
  max-width: 460px;
  min-width: 0;
  margin: 0 auto;
}

.barra-ricerca svg {
  position: absolute;
  left: 12px;
  top: 50%;
  width: 18px;
  height: 18px;
  transform: translateY(-50%);
  stroke: rgba(255, 255, 255, 0.75);
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  pointer-events: none;
}

.barra-ricerca input[type="search"] {
  width: 100%;
  min-height: 38px;
  padding: 0 var(--spazio-3) 0 38px;
  border: 0;
  border-radius: var(--raggio-piccolo);
  background: rgba(255, 255, 255, 0.14);
  color: var(--bianco);
  font-size: var(--testo-piccolo);
}

.barra-ricerca input[type="search"]::placeholder {
  color: rgba(255, 255, 255, 0.78);
  opacity: 1;
}

.barra-ricerca input[type="search"]:focus-visible {
  outline: 2px solid var(--bianco);
  outline-offset: 1px;
  background: rgba(255, 255, 255, 0.22);
}

.icona-bottone.barra-ricerca-lente {
  display: none;
}

/* Il menu degli spazi: una tendina nativa (<details>), con l'unica ombra
   ammessa dal vestito. */
.menu-spazi {
  position: relative;
}

.menu-spazi > summary {
  list-style: none;
}

.menu-spazi > summary::-webkit-details-marker {
  display: none;
}

.menu-spazi[open] > summary {
  background: rgba(255, 255, 255, 0.16);
}

.menu-spazi-tendina {
  position: absolute;
  right: -8px;
  top: calc(100% + 6px);
  z-index: 110;
  width: 340px;
  max-width: calc(100vw - 24px);
  max-height: 75vh;
  overflow-y: auto;
  padding: 10px;
  border: 1px solid var(--colore-bordo);
  border-radius: 12px;
  background: var(--bianco);
  color: var(--colore-testo);
  box-shadow: var(--ombra-popover);
}

.menu-spazi-titolo {
  margin: 0;
  padding: 6px 10px 8px;
  font-size: 13px;
  color: var(--colore-testo-attenuato);
}

.menu-spazi-voce {
  display: flex;
  align-items: center;
  gap: var(--spazio-3);
  min-height: var(--area-toccabile-minima);
  padding: var(--spazio-1) 10px;
  border-radius: var(--raggio-piccolo);
  color: var(--colore-testo);
  text-decoration: none;
}

.menu-spazi-voce:hover,
.menu-spazi-voce:focus-visible {
  background: var(--velatura-chiara);
  color: var(--colore-testo);
}

.menu-spazi-nome {
  flex: 1;
  min-width: 0;
  font-size: 15px;
  font-weight: 700;
}

.menu-spazi-attese {
  flex-shrink: 0;
  font-size: 13px;
  color: var(--colore-testo-attenuato);
}

.menu-spazi-tutti {
  display: block;
  margin-top: var(--spazio-2);
  padding: var(--spazio-3) 10px var(--spazio-1);
  border-top: 1px solid var(--filo-tabella);
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
}

/* Il riquadro con l'icona di uno spazio (DC58): velatura, tratto blu. */
.icona-spazio {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border-radius: 9px;
  background: var(--velatura);
}

.icona-spazio svg {
  width: 20px;
  height: 20px;
  stroke: var(--blu-ftalo);
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.marchio {
  display: flex;
  align-items: center;
  gap: var(--spazio-2);
  font-weight: 600;
  color: var(--bianco);
  text-decoration: none;
  flex-shrink: 0;
}

.marchio-logo-cliente {
  max-height: 28px;
  max-width: 120px;
}

.marchio-logo-ftalo {
  display: block;
  height: 18px;
  width: auto;
}

.posizione-corrente {
  display: flex;
  align-items: center;
  padding-left: var(--spazio-5);
  border-left: 1px solid rgba(255, 255, 255, 0.3);
  color: var(--bianco);
  font-family: var(--carattere-sistema);
  font-size: 15px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.icona-bottone {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--area-toccabile-minima);
  height: var(--area-toccabile-minima);
  border: none;
  border-radius: var(--raggio-piccolo);
  background: none;
  color: var(--bianco);
  cursor: pointer;
}

.icona-bottone svg {
  width: 22px;
  height: 22px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.75;
}

.icona-bottone:hover,
.icona-bottone:focus-visible {
  background: rgba(255, 255, 255, 0.16);
}

.bottone-notifiche {
  position: relative;
}

.distintivo-notifiche {
  position: absolute;
  top: 6px;
  right: 6px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: #ffb020;
  color: var(--inchiostro);
  font-size: 11px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
}

/* L'account è solo il cerchio con l'iniziale (nome e organizzazione sono in
   testa alla tendina). Il cerchio è piccolo, ma l'area che si tocca resta
   44px: il bottone intorno lo allarga. */
.bottone-account {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--area-toccabile-minima);
  height: var(--area-toccabile-minima);
  padding: 0;
  border: none;
  background: none;
  color: var(--bianco);
  font-family: inherit;
  cursor: pointer;
}

.icona-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
  color: var(--bianco);
  font-family: var(--carattere-sistema);
  font-weight: 700;
  font-size: var(--testo-piccolo);
}

.bottone-account:hover .icona-avatar,
.bottone-account:focus-visible .icona-avatar {
  background: rgba(255, 255, 255, 0.3);
}

.bottone-colonna {
  display: none;
  align-items: center;
  gap: var(--spazio-1);
  min-height: var(--area-toccabile-minima);
  padding: 0 var(--spazio-3);
  border-radius: var(--raggio-piccolo);
  color: rgba(255, 255, 255, 0.82);
  font-size: var(--testo-piccolo);
  cursor: pointer;
}

.bottone-colonna:hover {
  color: var(--bianco);
}

/* Pannelli a comparsa (selettore, account): Popover API nativa — chiusura
   con Esc e al clic fuori arrivano gratis dal browser, zero JavaScript. */
[popover] {
  margin: 0;
}

.pannello {
  position: fixed;
  top: calc(var(--altezza-barra) + var(--spazio-2));
  width: 270px;
  max-height: 70vh;
  overflow-y: auto;
  padding: var(--spazio-2);
  border: 1px solid var(--colore-bordo);
  border-radius: var(--raggio-grande);
  background: var(--colore-superficie);
  color: var(--colore-testo);
  box-shadow: var(--ombra-popover);
}

.pannello-sezione {
  padding: var(--spazio-2);
}

.pannello-sezione + .pannello-sezione {
  margin-top: var(--spazio-2);
  padding-top: var(--spazio-2);
  border-top: 1px solid var(--colore-bordo);
}

.pannello-titolo {
  margin: 0 0 var(--spazio-1);
  padding: 0 var(--spazio-2);
  font-size: var(--testo-piccolo);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--colore-testo-attenuato);
}

/* Voci da 40px col mouse; da telefono tornano a 44px (le aree toccabili non
   scendono sotto i 44px, SPEC-INTERFACCIA.md §7: media più in basso). */
.pannello a,
.pannello-voce-statica {
  display: flex;
  align-items: center;
  gap: var(--spazio-2);
  min-height: 40px;
  padding: 0 var(--spazio-2);
  border-radius: var(--raggio-piccolo);
  color: var(--colore-testo);
  text-decoration: none;
  font-size: var(--testo-corpo);
}

.pannello a:hover,
.pannello a:focus-visible {
  background: var(--grigio-050);
}

.pannello a svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.75;
  color: var(--colore-testo-attenuato);
}

.pannello-vuoto {
  padding: 0 var(--spazio-2);
  font-size: var(--testo-piccolo);
  color: var(--colore-testo-attenuato);
}

.pannello-vedi-tutti {
  margin: var(--spazio-1) var(--spazio-2) 0;
  padding-top: var(--spazio-3);
  border-top: 1px solid var(--colore-bordo);
  font-size: var(--testo-piccolo);
}

.pannello-notifiche {
  width: 340px;
}

.pannello-notifiche-intestazione {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spazio-2);
  padding: 0 var(--spazio-2);
}

.pannello-notifiche-segna-tutte {
  border: none;
  background: none;
  padding: 0;
  color: var(--colore-primario);
  font-size: var(--testo-piccolo);
  font-family: inherit;
  cursor: pointer;
}

.pannello-notifiche-segna-tutte:hover,
.pannello-notifiche-segna-tutte:focus-visible {
  text-decoration: underline;
}

/* Righe di notifica: un bottone dentro un form (l'apertura segna come letta,
   CLAUDE.md regola 9 — mai una modifica da un semplice collegamento), reso
   identico alla riga di "Oggi" (.riga-oggi a). */
.riga-oggi form {
  display: contents;
}

.riga-oggi button {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spazio-1);
  width: 100%;
  min-height: var(--area-toccabile-minima);
  padding: var(--spazio-3) var(--spazio-3);
  border: none;
  border-radius: var(--raggio-piccolo);
  background: none;
  font-family: inherit;
  text-align: left;
  color: var(--colore-testo);
  cursor: pointer;
}

.riga-oggi button:hover,
.riga-oggi button:focus-visible {
  background: var(--colore-sfondo-laterale);
}

/* Non letto = grassetto (SPEC-INTERFACCIA.md §8: l'informazione non è mai
   data dal solo colore — qui non serve nemmeno un colore, basta il peso). */
.notifica-letta .riga-titolo {
  font-weight: 400;
  color: var(--colore-testo-attenuato);
}

.account-intestazione {
  padding: var(--spazio-2) var(--spazio-2) var(--spazio-3);
}

.account-nome {
  margin: 0;
  font-weight: 600;
}

.account-org {
  margin: 0;
  color: var(--grigio-600);
  font-size: var(--testo-piccolo);
}

.pannello-account {
  width: auto;
  min-width: 230px;
  max-width: calc(100vw - 24px);
}

.account-esci {
  margin-top: var(--spazio-2);
  padding-top: var(--spazio-2);
  border-top: 1px solid var(--colore-bordo);
}

.account-esci button {
  width: 100%;
  min-height: 40px;
  padding: 0 var(--spazio-2);
  border: none;
  border-radius: var(--raggio-piccolo);
  background: none;
  color: var(--colore-testo);
  font-family: inherit;
  font-size: var(--testo-corpo);
  text-align: left;
  cursor: pointer;
}

.account-esci button:hover,
.account-esci button:focus-visible {
  background: var(--grigio-050);
}

.pagina {
  min-height: 100vh;
}

/* Colonna contestuale (livello 2): solo dentro uno spazio. Sfondo grigio
   chiarissimo apposta diverso dal bianco delle schede: la barra è forte,
   la colonna è discreta, il contenuto è il protagonista. Niente marchio,
   niente decorazioni: solo la navigazione dello spazio corrente. */

/* `stretch` e non `flex-start`: il menu laterale è alto quanto la pagina, così
   il suo fondo e il suo filo arrivano in fondo anche nelle schede lunghe
   (difetto visto negli screenshot dell'Ondata 0: finiva a metà pagina). Le
   voci restano in vista perché stanno in un contenitore appiccicato sotto la
   barra (.colonna-interna), che scorre per conto suo se sono tante. */
.corpo-app {
  display: flex;
  align-items: stretch;
  min-height: calc(100vh - var(--altezza-barra));
}

.colonna-interruttore {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.colonna-sfondo {
  display: none;
}

.colonna-contestuale {
  width: var(--larghezza-colonna-contestuale);
  flex-shrink: 0;
  border-right: 1px solid var(--colore-bordo);
  background: var(--colore-sfondo-laterale);
}

.colonna-interna {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--spazio-5) var(--spazio-3) var(--spazio-4);
}

/* In cima al menu laterale: icona e nome dello spazio. */
.colonna-spazio {
  display: flex;
  align-items: center;
  gap: var(--spazio-3);
  padding: 0 var(--spazio-3) var(--spazio-4);
}

.colonna-spazio .icona-spazio {
  width: 40px;
  height: 40px;
}

.colonna-spazio .icona-spazio svg {
  width: 22px;
  height: 22px;
}

.colonna-spazio-etichetta {
  display: block;
  font-size: 13px;
  color: var(--colore-testo-attenuato);
}

.colonna-spazio-nome {
  display: block;
  font-family: var(--carattere-titoli);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.15;
}

.colonna-separatore {
  margin: var(--spazio-3) 0;
  border-top: 1px solid var(--filo-tabella);
}

.voce-colonna {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: var(--altezza-voce-laterale);
  padding: var(--spazio-2) var(--spazio-3);
  border-radius: var(--raggio-comando);
  color: var(--colore-testo);
  font-size: 15px;
  text-decoration: none;
}

.voce-colonna:hover,
.voce-colonna:focus-visible {
  background: var(--grigio-050);
  color: var(--colore-testo);
}

.voce-colonna svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  color: var(--colore-testo-attenuato);
}

.voce-colonna-nome {
  flex: 1;
  min-width: 0;
}

.voce-colonna-conteggio {
  flex-shrink: 0;
  font-size: 13px;
  font-weight: 400;
  color: var(--colore-testo-attenuato);
  font-variant-numeric: tabular-nums;
}

.voce-colonna-secondaria {
  color: var(--colore-testo-attenuato);
}

.voce-colonna-selezionata {
  background: var(--colore-selezione-sfondo);
  color: var(--colore-primario);
  font-weight: 700;
}

.voce-colonna-selezionata:hover,
.voce-colonna-selezionata:focus-visible {
  background: var(--colore-selezione-sfondo);
  color: var(--colore-primario);
}

.voce-colonna-selezionata .voce-colonna-conteggio {
  color: var(--colore-primario);
}

.voce-colonna-selezionata svg {
  color: var(--colore-primario);
}

.colonna-vuota {
  padding: 0 var(--spazio-4);
  font-size: var(--testo-piccolo);
  color: var(--colore-testo-attenuato);
}

.area-contenuto {
  flex: 1;
  min-width: 0;
  padding: var(--spazio-6) var(--spazio-6) var(--spazio-6);
}

.area-contenuto-corpo {
  max-width: var(--larghezza-contenuto-massima);
  margin: 0 auto;
}

.percorso {
  margin-bottom: var(--spazio-5);
  font-size: var(--testo-piccolo);
  color: var(--colore-testo-attenuato);
}

.percorso a {
  color: var(--colore-testo-attenuato);
}

.percorso:empty {
  display: none;
}

/* ── Registro a tutto schermo (Ondata 1, DC59; tavola «RegistroPieno») ───── */

.comando-tutto-schermo svg,
.comando-esci svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Due classi: deve vincere anche sul margine che `.area-contenuto` riceve
   sugli schermi stretti, più in basso in questo file. */
.area-contenuto.area-piena {
  padding: 0;
}

.area-piena .area-contenuto-corpo {
  max-width: none;
  padding-bottom: var(--spazio-8);
}

.area-piena .messaggi {
  margin: var(--spazio-3) var(--spazio-4) 0;
}

/* I comandi del registro, su una riga. Sugli schermi stretti va a capo, coi
   comandi alti quanto serve a un dito (44 px). */
.riga-comandi {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spazio-2) var(--spazio-3);
  min-height: 44px;
  padding: var(--spazio-2) var(--spazio-4);
  border-bottom: 1px solid var(--colore-bordo);
  background: var(--colore-superficie);
}

h1.riga-comandi-nome {
  margin: 0;
  font-family: var(--carattere-titoli);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0;
}

.riga-comandi-quanti {
  margin-right: auto;
  font-size: 14px;
}

.riga-comandi-filtro {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spazio-2);
}

.riga-comandi-filtro input[type="search"],
.riga-comandi-filtro select {
  width: auto;
}

.riga-comandi-filtro input[type="search"] {
  width: 200px;
}

.riga-comandi-viste {
  display: flex;
  gap: var(--spazio-3);
}

/* Sugli schermi larghi (tavola): UNA riga, alta 44 px, coi comandi piccoli.
   Se i comandi non ci stanno la riga scorre di lato, senza crescere. */
@media (min-width: 900px) {
  .riga-comandi {
    flex-wrap: nowrap;
    height: 44px;
    padding: 0 var(--spazio-4);
    overflow-x: auto;
    scrollbar-width: none;
    white-space: nowrap;
  }

  .riga-comandi-filtro {
    flex-wrap: nowrap;
  }

  .riga-comandi .bottone,
  .area-piena .barra-azioni .bottone {
    min-height: 32px;
    padding: 4px 10px;
    font-size: 14px;
  }

  .riga-comandi-filtro input[type="search"],
  .riga-comandi-filtro select,
  .area-piena .barra-azioni select {
    min-height: 32px;
    padding: 4px 8px;
    font-size: 14px;
  }
}

.area-contenuto.area-piena .barra-azioni {
  margin: 0;
  padding: 4px var(--spazio-4);
  border-width: 0 0 1px;
  border-radius: 0;
}

/* Più specifica della regola che ridà bordo e raggio alle tabelle modificabili. */
.area-contenuto.area-piena .scheda-tabella {
  border-width: 0 0 1px;
  border-radius: 0;
  box-shadow: none;
  overflow-x: auto;
}

@media (max-width: 899.98px) {
  /* Qui le righe diventano schede: non devono toccare i bordi dello schermo. */
  .area-contenuto.area-piena .scheda-tabella {
    padding: var(--spazio-3) var(--spazio-4) 0;
    border-width: 0;
    background: transparent;
  }
}

.area-piena .stato-vuoto {
  margin: var(--spazio-6) var(--spazio-4);
}

.piede-pieno {
  margin: var(--spazio-3) var(--spazio-4);
}

/* ── Ricerca globale (Ondata 1, DC29) ────────────────────────────────────── */

.risultati-spazio {
  display: flex;
  align-items: center;
  gap: var(--spazio-2);
  margin: var(--spazio-5) 0 var(--spazio-3);
  font-size: 20px;
}

.risultati-gruppo {
  margin-bottom: var(--spazio-3);
  padding: var(--spazio-4);
}

.risultati-registro {
  margin: 0 0 var(--spazio-2);
  color: var(--colore-testo-attenuato);
  font-family: var(--carattere);
  font-size: 13px;
  font-weight: 700;
}

.risultati-ricerca {
  margin: 0;
  padding: 0;
  list-style: none;
}

.risultati-ricerca li + li {
  border-top: 1px solid var(--colore-bordo);
}

.risultato {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 0;
  color: var(--colore-testo);
  text-decoration: none;
}

.risultato-testa {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spazio-2);
}

.risultato-titolo {
  font-weight: 700;
}

.risultato:hover .risultato-titolo,
.risultato:focus-visible .risultato-titolo {
  text-decoration: underline;
}

.risultato-estratto {
  color: var(--colore-testo-attenuato);
  font-size: 14px;
}

.risultato-estratto mark {
  padding: 0 2px;
  border-radius: 3px;
  background: var(--stato-ambra-fondo);
  color: var(--colore-testo);
}

/* ── Azioni in serie (Ondata 1, DC19; tavola «Registro») ─────────────────── */

.barra-azioni {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spazio-3);
  margin: 0 0 var(--spazio-3);
  padding: 8px 12px;
  border: 1px solid var(--colore-bordo);
  border-radius: var(--raggio-piccolo);
  background: var(--colore-superficie);
}

.barra-azioni-attiva {
  border-color: var(--colore-primario);
  background: var(--velatura-chiara);
}

.barra-azioni select {
  width: auto;
  min-width: 220px;
  max-width: 100%;
}

.barra-azioni-quante {
  margin-right: auto;
  font-size: 14px;
}

.cella-selezione {
  width: 36px;
  text-align: center;
}

.cella-selezione input {
  width: 18px;
  height: 18px;
  margin: 0;
}

.riga-selezionata td {
  background: var(--velatura-chiara);
}

.elenco-selezionati {
  max-height: 260px;
  margin: var(--spazio-3) 0 var(--spazio-4);
  padding: var(--spazio-3) var(--spazio-4) var(--spazio-3) var(--spazio-6);
  overflow-y: auto;
  border: 1px solid var(--colore-bordo);
  border-radius: var(--raggio-piccolo);
}

.esito-serie strong {
  font-family: var(--carattere-titoli);
  font-size: 24px;
}

/* ── La bacheca (Ondata 1, DC56; tavole «Home» e «Spazio») ───────────────── */

.tipo-voce {
  display: inline-block;
  min-width: 92px;
  padding: 3px 8px;
  border-radius: var(--raggio-piccolo);
  background: var(--velatura);
  color: var(--colore-primario);
  font-size: 12px;
  font-weight: 700;
  text-align: center;
  white-space: nowrap;
}

.bacheca-testa {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--spazio-3);
}

.bacheca-testa .riquadro-titolo {
  margin: 0;
}

.filtro-spazi {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.pastiglia {
  padding: 4px 12px;
  border: 1px solid var(--colore-bordo);
  border-radius: 999px;
  color: var(--colore-testo);
  font-size: 13px;
  text-decoration: none;
}

.pastiglia:hover,
.pastiglia:focus-visible {
  border-color: var(--colore-primario);
}

.pastiglia-attiva {
  border-color: var(--colore-primario);
  background: var(--velatura);
  color: var(--colore-primario);
  font-weight: 700;
}

.voci-bacheca {
  display: flex;
  flex-direction: column;
  margin-top: var(--spazio-3);
}

.voce-bacheca {
  display: flex;
  align-items: center;
  gap: var(--spazio-4);
  padding: 12px 0;
  border-top: 1px solid var(--colore-bordo);
  color: var(--colore-testo);
  text-decoration: none;
}

.voce-bacheca:hover .voce-bacheca-titolo,
.voce-bacheca:focus-visible .voce-bacheca-titolo,
.voce-dedicata:hover .voce-dedicata-titolo,
.voce-dedicata:focus-visible .voce-dedicata-titolo {
  text-decoration: underline;
}

.riquadro-bacheca-intera {
  margin-top: var(--spazio-4);
  padding-top: 0;
  padding-bottom: 0;
}

.riquadro-bacheca-intera .voci-bacheca {
  margin-top: 0;
}

.riquadro-bacheca-intera .voce-bacheca:first-child {
  border-top: 0;
}

/* Ondata 2 (DC66): il comando «Compila» di un modulo fissato in bacheca. */
.voce-bacheca-comando {
  color: var(--colore-primario);
  font-weight: 700;
  white-space: nowrap;
}

a.voce-bacheca-titolo {
  color: var(--colore-testo);
  text-decoration: none;
}

a.voce-bacheca-titolo:hover {
  text-decoration: underline;
}

.voce-bacheca-testo {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
}

.voce-bacheca-titolo,
.voce-dedicata-titolo,
.scheda-bacheca-titolo {
  font-weight: 700;
}

.bacheca-dedicata-testa {
  display: flex;
  align-items: center;
  gap: var(--spazio-3);
  margin-bottom: var(--spazio-4);
}

.bacheca-dedicata-testa .riquadro-titolo {
  margin: 0;
}

.icona-sezione {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--raggio-piccolo);
  background: var(--velatura);
  color: var(--colore-primario);
}

.voci-dedicate {
  display: grid;
  gap: var(--spazio-4);
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}

.voce-dedicata {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  color: var(--colore-testo);
  text-decoration: none;
}

.voce-dedicata-titolo {
  font-family: var(--carattere-titoli);
  font-size: 18px;
  line-height: 1.25;
}

.sezione-spazio {
  margin-bottom: var(--spazio-6);
}

.sezione-spazio > .riquadro-titolo {
  margin-bottom: 4px;
}

.spazio-testa {
  align-items: flex-start;
  margin-bottom: var(--spazio-5);
}

.spazio-testa .testo-introduttivo {
  margin: 4px 0 0;
}

.schede-bacheca {
  display: grid;
  gap: var(--spazio-4);
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  margin-top: var(--spazio-4);
}

.scheda-bacheca {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: var(--spazio-4);
}

.scheda-bacheca-testa {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spazio-2);
  min-height: 32px;
}

.scheda-bacheca-piede {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spazio-4);
  margin-top: auto;
  padding-top: 4px;
  font-size: 14px;
}

.scelta-gruppi {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: var(--spazio-4) 0 var(--spazio-2);
  padding: 0;
  border: 0;
}

.scelta-gruppi legend {
  margin-bottom: 6px;
  padding: 0;
  font-weight: 700;
}

.scelta-gruppo {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--colore-bordo);
  border-radius: var(--raggio-piccolo);
  font-weight: 400;
  cursor: pointer;
}

.scelta-gruppo input {
  width: auto;
  margin: 0;
}

/* ── La pagina di lettura (tavola «Lettura»; il vestito completo col blocco 7) */

.lettura {
  display: grid;
  gap: var(--spazio-6);
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  max-width: 1120px;
}

@media (min-width: 900px) {
  .lettura {
    grid-template-columns: 220px minmax(0, 1fr);
  }

  .lettura-indice {
    position: sticky;
    top: var(--spazio-5);
  }
}

.lettura-indice {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 14px;
}

.lettura-torna {
  margin-bottom: var(--spazio-3);
}

.lettura-voce {
  padding: 6px 10px;
  border-radius: var(--raggio-piccolo);
  color: var(--colore-testo);
  text-decoration: none;
}

.lettura-voce:hover,
.lettura-voce:focus-visible {
  background: var(--velatura);
}

.lettura-voce-interna {
  padding-left: 22px;
  color: var(--colore-testo-attenuato);
  font-size: 13px;
}

.lettura-separatore {
  margin: var(--spazio-3) 0;
  border-top: 1px solid var(--colore-bordo);
}

.lettura-articolo {
  display: flex;
  flex-direction: column;
  gap: var(--spazio-5);
  min-width: 0;
}

.lettura-dove {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 0 0 8px;
  font-size: 14px;
}

.lettura-testa h1 {
  margin: 0;
  font-size: 40px;
  line-height: 1.12;
  letter-spacing: -0.8px;
}

.lettura-foglio {
  display: flex;
  flex-direction: column;
  gap: var(--spazio-5);
  padding: 36px 44px;
  border: 1px solid var(--colore-bordo);
  border-radius: var(--raggio-grande);
  background: var(--colore-superficie);
  font-size: 17px;
  line-height: 1.7;
}

.lettura-foglio h2 {
  margin: 0 0 8px;
  font-size: 24px;
}

.lettura-foglio section,
.lettura-foglio [id] {
  scroll-margin-top: var(--spazio-5);
}

.lettura-dati {
  display: grid;
  gap: 4px var(--spazio-5);
  grid-template-columns: max-content minmax(0, 1fr);
  margin: 0;
  font-size: 15px;
}

.lettura-dati dt {
  color: var(--colore-testo-attenuato);
}

.lettura-dati dd {
  margin: 0;
}

.lettura-semplice {
  margin: 0;
  white-space: pre-line;
}

.lettura-avviso {
  margin: var(--spazio-3) 0 0;
  padding: 12px 16px;
  border-radius: var(--raggio-piccolo);
  background: var(--stato-blu-fondo);
  color: var(--stato-blu-testo);
  font-size: 15px;
}

.lettura-avviso-ambra {
  background: var(--stato-ambra-fondo);
  color: var(--stato-ambra-testo);
}

.lettura-avviso-fatto {
  background: var(--stato-verde-fondo);
  color: var(--stato-verde-testo);
}

.lettura-avviso-rosso {
  background: var(--stato-rosso-fondo);
  color: var(--stato-rosso-testo);
}

.lettura-conferma {
  scroll-margin-top: var(--spazio-5);
}

.lettura-conferma-fissa {
  display: flex;
  justify-content: flex-end;
}

.numeri-letture {
  display: grid;
  gap: var(--spazio-4);
  grid-template-columns: repeat(auto-fit, minmax(200px, 280px));
  margin: var(--spazio-4) 0;
}

.numero-lettura {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--spazio-4);
}

.numero-grande {
  font-family: var(--carattere-titoli);
  font-size: 32px;
  font-weight: 700;
  line-height: 1.1;
}

.campo-corto {
  max-width: 140px;
}

/* Da telefono (tavola «LetturaTelefono»): l'indice va sopra, compatto, e la
   conferma resta fissa in basso, a tutta larghezza, sempre a portata di pollice. */
@media (max-width: 899px) {
  .lettura-indice .lettura-voce,
  .lettura-indice > .nota-piccola {
    display: none;
  }

  .lettura-conferma-fissa {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 15;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--colore-bordo);
    background: var(--colore-superficie);
  }

  .lettura-conferma-fissa .bottone {
    width: 100%;
    justify-content: center;
  }

  .lettura-con-conferma {
    padding-bottom: 88px;
  }

  /* Una tabella larga scorre dentro il foglio, non spezza le parole. */
  .lettura-foglio .testo-markdown {
    overflow-x: auto;
  }

  .lettura-foglio .testo-markdown th,
  .lettura-foglio .testo-markdown td {
    white-space: nowrap;
  }
}

@media (max-width: 899px) {
  .lettura-testa h1 {
    font-size: 28px;
  }

  .lettura-foglio {
    padding: var(--spazio-4);
    font-size: 16px;
  }
}

/* ── La home personale (Ondata 1, tavola «Home») ─────────────────────────── */

.home-testa h1 {
  margin: 0;
  font-size: 40px;
  letter-spacing: -1px;
}

.home-testa .testo-introduttivo {
  margin: 6px 0 var(--spazio-5);
}

.home-griglia {
  display: grid;
  gap: var(--spazio-5);
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}

@media (min-width: 1000px) {
  .home-griglia {
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  }
}

.home-colonna {
  display: flex;
  flex-direction: column;
  gap: var(--spazio-5);
  min-width: 0;
}

/* Il riquadro principale del vestito: bianco, bordo, raggio 10, niente ombra. */
.riquadro {
  padding: var(--spazio-5);
  border: 1px solid var(--colore-bordo);
  border-radius: var(--raggio-grande);
  background: var(--colore-superficie);
}

.riquadro-titolo {
  margin: 0 0 var(--spazio-4);
  font-size: 24px;
}

.riquadro-titolo-piccolo {
  margin-bottom: var(--spazio-3);
  font-size: 20px;
}

.riquadro .stato-vuoto {
  padding: var(--spazio-4);
}

.tabella-scorre {
  overflow-x: auto;
}

@media (min-width: 900px) {
  .tabella-home th:first-child,
  .tabella-home td:first-child {
    padding-left: 0;
  }
}

.collegamento-forte {
  font-weight: 700;
  text-decoration: none;
}

.collegamento-forte:hover {
  text-decoration: underline;
}

.attenuato {
  color: var(--colore-testo-attenuato);
}

.sibilla-testa {
  display: flex;
  align-items: center;
  gap: var(--spazio-3);
  margin-bottom: var(--spazio-3);
}

.sibilla-avatar {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 2px solid var(--bianco);
  box-shadow: 0 0 0 1px var(--blu-ftalo-contorno);
  object-fit: cover;
}

.sibilla-avatar-grande {
  width: 88px;
  height: 88px;
}

.sibilla-nome {
  margin: 0;
  font-family: var(--carattere);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0;
}

.sibilla-testa .nota-piccola {
  margin: 0;
  font-size: 13px;
}

.riquadro-sibilla textarea {
  resize: vertical;
  line-height: 1.5;
}

.sibilla-azioni {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spazio-3);
  margin-top: var(--spazio-3);
}

.riquadro-in-arrivo {
  max-width: 640px;
  margin: var(--spazio-6) auto;
  text-align: center;
}

.riquadro-in-arrivo .sibilla-avatar {
  margin: 0 auto var(--spazio-4);
  display: block;
}

.elenco-scadenze {
  display: flex;
  flex-direction: column;
  gap: var(--spazio-3);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 15px;
}

.elenco-scadenze li {
  display: flex;
  justify-content: space-between;
  gap: var(--spazio-3);
}

.elenco-scadenze a {
  color: var(--colore-testo);
  text-decoration: none;
}

.elenco-scadenze a:hover {
  text-decoration: underline;
}

.scadenza-quando {
  flex-shrink: 0;
  color: var(--colore-testo-attenuato);
  white-space: nowrap;
}

.scadenza-ritardo {
  font-weight: 700;
  color: var(--stato-rosso-testo);
}

.scadenza-vicina {
  font-weight: 700;
  color: var(--stato-ambra-testo);
}

/* ── "Oggi" e liste di cose da fare ──────────────────────────────────────── */

.griglia-oggi {
  display: grid;
  gap: var(--spazio-5);
  grid-template-columns: 1fr;
}

@media (min-width: 900px) {
  .griglia-oggi {
    grid-template-columns: 1fr 1fr;
  }

  .scheda-oggi-piena {
    grid-column: 1 / -1;
  }
}

.scheda-oggi {
  border: 1px solid var(--colore-bordo);
  border-radius: var(--raggio-grande);
  background: var(--colore-superficie);
  box-shadow: var(--ombra-scheda);
  overflow: hidden;
}

.scheda-oggi-intestazione {
  padding: var(--spazio-4) var(--spazio-5);
  border-bottom: 1px solid var(--colore-bordo);
}

.scheda-oggi-intestazione h2 {
  margin: 0;
  font-size: var(--testo-titolo);
}

.scheda-oggi-corpo {
  padding: var(--spazio-2);
}

.elenco-oggi {
  list-style: none;
  margin: 0;
  padding: 0;
}

.riga-oggi + .riga-oggi {
  border-top: 1px solid var(--colore-bordo);
}

.riga-oggi a {
  display: flex;
  flex-direction: column;
  gap: var(--spazio-1);
  min-height: var(--area-toccabile-minima);
  padding: var(--spazio-3) var(--spazio-3);
  border-radius: var(--raggio-piccolo);
  text-decoration: none;
  color: var(--colore-testo);
}

.riga-oggi a:hover,
.riga-oggi a:focus-visible {
  background: var(--colore-sfondo-laterale);
}

.riga-titolo {
  font-weight: 600;
}

.riga-dettaglio {
  font-size: var(--testo-piccolo);
  color: var(--colore-testo-attenuato);
}

.riga-in-ritardo .riga-dettaglio {
  color: var(--colore-errore);
  font-weight: 600;
}

.stato-vuoto {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spazio-2);
  padding: var(--spazio-6) var(--spazio-4);
  text-align: center;
  color: var(--colore-testo-attenuato);
}

.stato-vuoto svg {
  width: 28px;
  height: 28px;
  stroke: var(--colore-positivo);
  fill: none;
  stroke-width: 1.75;
}

.stato-vuoto p {
  margin: 0;
  font-size: var(--testo-piccolo);
}

/* L'etichetta di stato (MOCKUP §2): la parola sempre, il colore in più. I
   cinque colori sono l'elenco chiuso della chiave `colore` degli stati. */
.etichetta-stato {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--stato-grigio-fondo);
  color: var(--stato-grigio-testo);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
  white-space: nowrap;
}

.etichetta-stato-punto {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}

.etichetta-stato-blu {
  background: var(--stato-blu-fondo);
  color: var(--stato-blu-testo);
}

.etichetta-stato-verde {
  background: var(--stato-verde-fondo);
  color: var(--stato-verde-testo);
}

.etichetta-stato-ambra {
  background: var(--stato-ambra-fondo);
  color: var(--stato-ambra-testo);
}

.etichetta-stato-rosso {
  background: var(--stato-rosso-fondo);
  color: var(--stato-rosso-testo);
}

/* Funzione vacante (SESSIONE 15, D3): stesso trattamento a pillola di
   .etichetta-stato, ma nel colore di attenzione — non è un errore, ma va
   notato subito. */
.etichetta-vacante {
  display: inline-block;
  padding: var(--spazio-1) var(--spazio-3);
  border-radius: 999px;
  background: var(--colore-attenzione-sfondo);
  color: var(--colore-attenzione);
  font-size: var(--testo-piccolo);
  font-weight: 600;
}

/* Proposta dalla configurazione (Sessione 16b): una cella o una transizione
   cambiata a mano rispetto all'ultima proposta riconosciuta. Il testo
   "modificato" c'è sempre: il colore da solo non basta (SPEC-INTERFACCIA §2). */
.cella-modificata {
  background: var(--colore-attenzione-sfondo);
}

.etichetta-modificato {
  display: block;
  color: var(--colore-attenzione);
  font-size: var(--testo-piccolo);
  font-weight: 600;
}

.selezione-multipla {
  width: 100%;
  min-width: 16rem;
  max-width: 100%;
  margin-bottom: var(--spazio-2);
}

.lista-differenze {
  list-style: none;
  margin: 0;
  padding: 0;
}

.lista-differenze li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spazio-2);
  padding: var(--spazio-2) 0;
  border-bottom: 1px solid var(--colore-bordo);
}

.lista-differenze form {
  display: inline;
}

/* Assegnare una persona diretta è l'eccezione (D4): resta chiusa di
   default, visibilmente secondaria rispetto al selettore di funzione. */
.assegna-persona-dettaglio {
  margin-top: var(--spazio-2);
}

.assegna-persona-dettaglio summary {
  cursor: pointer;
  color: var(--colore-testo-attenuato);
  font-size: var(--testo-piccolo);
}

/* Anteprima della riassegnazione di una funzione (SESSIONE 15, punto 4):
   quanto lavoro passa, prima di confermare. */
.riepilogo-riassegnazione {
  display: flex;
  gap: var(--spazio-4);
  margin: var(--spazio-3) 0;
}

.riquadro-numero {
  flex: 1;
  padding: var(--spazio-3);
  border: 1px solid var(--colore-bordo);
  border-radius: 10px;
  background: var(--colore-superficie);
  text-align: center;
  font-size: var(--testo-piccolo);
  color: var(--colore-testo-attenuato);
}

.numero-grande {
  display: block;
  font-size: var(--testo-titolo);
  font-weight: 700;
  color: var(--colore-testo);
}

/* ── Profilo ──────────────────────────────────────────────────────────── */

.scheda-profilo {
  max-width: 480px;
  margin: 0;
}

.scheda-profilo dt {
  margin-top: var(--spazio-3);
  font-size: var(--testo-piccolo);
  color: var(--colore-testo-attenuato);
}

.scheda-profilo dd {
  margin: 0;
  font-size: var(--testo-corpo);
}

/* ── Elenco: vista tabella (SESSIONE-6, parte b) ─────────────────────────
   Tabella vera su schermo largo; sotto i 900px si legge come una fila di
   schede (SPEC-INTERFACCIA.md §7), con lo stesso markup — solo CSS, senza
   duplicare il template. */

.viste-elenco {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spazio-2);
  margin-bottom: var(--spazio-4);
}

.vista-scelta {
  padding: var(--spazio-1) var(--spazio-3);
  border-radius: var(--raggio-comando);
  font-size: var(--testo-piccolo);
  text-decoration: none;
}

.vista-scelta-attiva {
  background: var(--colore-selezione-sfondo);
  color: var(--colore-primario);
  font-weight: 600;
}

.filtro-elenco {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spazio-3);
  align-items: center;
  margin-bottom: var(--spazio-5);
}

.filtro-elenco input[type="search"] {
  flex: 1 1 240px;
  width: auto;
}

.filtro-elenco select {
  flex: 0 1 200px;
  width: auto;
}

.filtro-notifiche {
  display: flex;
  gap: var(--spazio-4);
  margin-bottom: var(--spazio-5);
}

.filtro-notifiche a {
  color: var(--colore-testo-attenuato);
  text-decoration: none;
}

.filtro-notifiche a:hover,
.filtro-notifiche a:focus-visible {
  text-decoration: underline;
}

.filtro-notifiche a.filtro-attivo {
  color: var(--colore-testo);
  font-weight: 600;
}

.scheda-tabella {
  border: 1px solid var(--colore-bordo);
  border-radius: var(--raggio-grande);
  background: var(--colore-superficie);
  box-shadow: var(--ombra-scheda);
  /* Collaudo Valtorre (G3): una tabella con molte colonne non esce dai margini
     e non viene tagliata — scorre di lato dentro la sua scheda. */
  overflow-x: auto;
}

/* Una data si legge su una riga sola, anche nelle tabelle strette. */
textarea {
  resize: vertical;
}

.tabella-elementi td.cella-data,
.tabella-elementi td.cella-data .cella-link {
  white-space: nowrap;
}

.tabella-elementi {
  width: 100%;
  border-collapse: collapse;
}

/* Densi gli elenchi (MOCKUP §1.4): righe da circa 36 px, testo 14 px, cifre
   tabellari. */
.tabella-elementi th,
.tabella-elementi td {
  padding: 7px var(--spazio-3);
  text-align: left;
  border-bottom: 1px solid var(--filo-tabella);
  font-size: var(--testo-piccolo);
  font-variant-numeric: tabular-nums;
}

.tabella-elementi thead th {
  padding: var(--spazio-2) var(--spazio-3);
  border-bottom-color: var(--colore-bordo);
  color: var(--colore-testo-attenuato);
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  background: var(--fondo-testata);
}

.tabella-elementi thead th a {
  color: inherit;
  text-decoration: none;
}

.tabella-elementi tbody tr:last-child td {
  border-bottom: none;
}

.tabella-elementi tbody tr:hover {
  background: var(--velatura-chiara);
}

.tabella-elementi .cella-link {
  display: block;
  min-height: 24px;
  color: inherit;
  text-decoration: none;
}

.paginazione {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spazio-5);
  margin-top: var(--spazio-5);
}

@media (max-width: 899.98px) {
  .tabella-elementi thead {
    display: none;
  }

  .tabella-elementi,
  .tabella-elementi tbody,
  .tabella-elementi tr,
  .tabella-elementi td {
    display: block;
    width: 100%;
  }

  .scheda-tabella {
    background: none;
    border: none;
    box-shadow: none;
  }

  .tabella-elementi tbody tr {
    margin-bottom: var(--spazio-4);
    border: 1px solid var(--colore-bordo);
    border-radius: var(--raggio-grande);
    background: var(--colore-superficie);
    box-shadow: var(--ombra-scheda);
    overflow: hidden;
  }

  .tabella-elementi td {
    min-height: var(--area-toccabile-minima);
    display: flex;
    align-items: center;
  }

  .tabella-elementi td .cella-link {
    min-height: var(--area-toccabile-minima);
    display: flex;
    align-items: center;
    width: 100%;
  }

  .tabella-elementi td::before {
    content: attr(data-etichetta);
    flex: 0 0 40%;
    font-size: 12px;
    font-weight: 600;
    color: var(--colore-testo-attenuato);
  }
}

/* ── Elenco: vista calendario ─────────────────────────────────────────── */

.navigazione-mese {
  display: flex;
  justify-content: space-between;
  gap: var(--spazio-4);
  margin-bottom: var(--spazio-4);
}

.calendario-scroll {
  overflow-x: auto;
}

.calendario-griglia {
  display: grid;
  grid-template-columns: repeat(7, minmax(120px, 1fr));
  gap: 1px;
  min-width: 700px;
  border: 1px solid var(--colore-bordo);
  border-radius: var(--raggio-grande);
  overflow: hidden;
  background: var(--colore-bordo);
}

.calendario-intestazione {
  padding: var(--spazio-2);
  background: var(--colore-sfondo-laterale);
  color: var(--colore-testo-attenuato);
  font-size: var(--testo-piccolo);
  font-weight: 600;
  text-align: center;
}

.calendario-cella {
  min-height: 110px;
  padding: var(--spazio-2);
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: var(--colore-superficie);
}

.calendario-cella-vuota {
  background: var(--colore-sfondo);
}

.calendario-giorno-numero {
  font-size: var(--testo-piccolo);
  font-weight: 600;
  color: var(--colore-testo-attenuato);
}

.calendario-evento {
  display: block;
  padding: 2px var(--spazio-1);
  border-radius: 4px;
  background: var(--colore-selezione-sfondo);
  color: var(--colore-primario);
  font-size: 12px;
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Login ────────────────────────────────────────────────────────────── */

.pagina-login {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: var(--spazio-5);
  background: var(--colore-profondo);
}

.scheda-login {
  width: 100%;
  max-width: 360px;
  padding: var(--spazio-6);
  border-radius: var(--raggio-grande);
  background: var(--colore-superficie);
}

.marchio-login {
  justify-content: center;
  margin-bottom: var(--spazio-6);
}

.marchio-logo-ftalo-login {
  height: 26px;
}

.powered-by-login {
  color: var(--grigio-400);
  margin-top: var(--spazio-4);
}

/* Sessione 25: password dimenticata, collegamento d'invito o di recupero. */
.scheda-login h1 + p,
.scheda-login p {
  margin-bottom: var(--spazio-3);
}

.bottone-pieno {
  width: 100%;
  margin-top: var(--spazio-4);
}

.collegamento-login {
  margin-top: var(--spazio-4);
  text-align: center;
}

.collegamento-login a {
  color: var(--colore-profondo);
}

/* Sessione 25: profilo — cambio password e avvisi via mail. */
.sezione-profilo {
  margin-top: var(--spazio-6);
}

.sezione-profilo h2 {
  margin-bottom: var(--spazio-4);
}

.preferenze-avvisi {
  border: 0;
  padding: 0;
  margin: var(--spazio-3) 0;
}

.preferenze-avvisi legend {
  margin-bottom: var(--spazio-3);
}

.preferenze-avvisi label {
  display: flex;
  align-items: center;
  gap: var(--spazio-2);
  padding: var(--spazio-2) 0;
  border-bottom: 1px solid var(--colore-bordo);
}

/* ── Pagine di errore ─────────────────────────────────────────────────── */

.pagina-errore {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: var(--spazio-5);
}

.scheda-errore {
  max-width: 480px;
  text-align: center;
}

.codice-riferimento code {
  background: var(--grigio-100);
  padding: var(--spazio-1) var(--spazio-2);
  border-radius: 4px;
}

/* ── Sotto i 900px: barra compattata, colonna contestuale come pannello
   apribile da un pulsante (SPEC-INTERFACCIA.md §3 e §7) ────────────────── */

@media (max-width: 899.98px) {
  .posizione-corrente {
    max-width: 32vw;
    padding-left: var(--spazio-3);
  }

  .pannello a,
  .pannello-voce-statica,
  .account-esci button {
    min-height: var(--area-toccabile-minima);
  }

  .bottone-colonna {
    display: flex;
  }

  .pannello {
    left: var(--spazio-3);
    right: var(--spazio-3);
    width: auto;
  }

  .colonna-contestuale {
    position: fixed;
    z-index: 25;
    inset: var(--altezza-barra) auto 0 0;
    width: min(80vw, 320px);
    overflow-y: auto;
    transform: translateX(-100%);
    transition: transform 0.2s ease;
  }

  .colonna-interruttore:checked ~ .colonna-sfondo {
    display: block;
    position: fixed;
    z-index: 20;
    inset: var(--altezza-barra) 0 0 0;
    background: rgba(0, 15, 137, 0.5);
  }

  .colonna-interruttore:checked ~ .colonna-contestuale {
    transform: translateX(0);
  }

  .area-contenuto {
    padding: var(--spazio-4);
  }
}

/* Su schermo largo il menu laterale è alto quanto la pagina (vedi .corpo-app):
   nessuna altezza fissa sul menu, o il suo fondo finirebbe a metà di una scheda
   lunga. A restare in vista mentre si scorre è il contenitore delle voci. */
@media (min-width: 900px) {
  .colonna-interna {
    position: sticky;
    top: var(--altezza-barra);
    max-height: calc(100vh - var(--altezza-barra));
    overflow-y: auto;
  }
}

/* ── Scheda elemento (SESSIONE-6, parte c; SPEC-INTERFACCIA.md §5) ──────── */

.intestazione-elenco {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--spazio-3);
}

.intestazione-elenco {
  margin-bottom: var(--spazio-4);
}

.intestazione-elenco h1 {
  margin: 0;
}

.intestazione-scheda {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--spazio-4);
  margin-bottom: var(--spazio-5);
}

.intestazione-scheda h1 {
  margin: 0;
}

.codice-elemento {
  color: var(--colore-testo-attenuato);
  font-weight: 500;
}

.azioni-scheda {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--spazio-2);
}

.bottone-pericolo,
.bottone-pericolo:hover {
  background: var(--colore-errore);
  border-color: var(--colore-errore);
  color: var(--bianco);
}

.bottone-pericolo-testo,
.bottone-pericolo-testo:hover {
  color: var(--rifiuto-testo);
  border-color: var(--rifiuto-contorno);
}

.bottone-pericolo-testo:hover {
  background: var(--stato-rosso-fondo);
}

.badge-ia {
  display: inline-flex;
  align-items: center;
  gap: var(--spazio-1);
  margin: var(--spazio-2) 0 0;
  padding: var(--spazio-1) var(--spazio-3);
  border-radius: 999px;
  background: var(--colore-selezione-sfondo);
  color: var(--colore-primario);
  font-size: var(--testo-piccolo);
  font-weight: 600;
}

.badge-ia svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
}

.blocco-scheda {
  padding: var(--spazio-5);
  margin-bottom: var(--spazio-4);
  border: 1px solid var(--colore-bordo);
  border-radius: var(--raggio-grande);
  background: var(--colore-superficie);
  box-shadow: var(--ombra-scheda);
}

.blocco-scheda-titolo {
  margin: 0 0 var(--spazio-3);
  font-family: var(--carattere);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0;
  cursor: default;
}

.blocco-storico summary.blocco-scheda-titolo {
  cursor: pointer;
}

.transizioni-stato {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spazio-2);
  margin-top: var(--spazio-3);
}

.transizioni-stato form {
  margin: 0;
}

/* Sessione 20 (C5): il riquadro della nota obbligatoria, accanto al bottone del
   passaggio. È un <details>: si apre e si chiude da solo, senza JavaScript. */
.transizione-con-nota {
  margin: 0;
}

.transizione-con-nota > summary {
  display: inline-block;
  list-style: none;
  cursor: pointer;
}

.transizione-con-nota > summary::-webkit-details-marker {
  display: none;
}

.transizione-con-nota form {
  margin-top: var(--spazio-2);
  display: flex;
  flex-direction: column;
  gap: var(--spazio-1);
  max-width: 28rem;
}

/* Sessione 21 (DC11): i due esiti dell'approvazione, in un riquadro che li
   tiene insieme e li separa dai passaggi normali — approvare non è passare a
   uno stato, è decidere. «Rifiuta» è lo stesso <details> della Sessione 20:
   nessuna riga di JavaScript, e senza JavaScript funziona lo stesso. */
.riquadro-approvazione {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--spazio-2);
  margin-top: var(--spazio-3);
  padding: var(--spazio-3);
  border: 1px solid var(--colore-bordo);
  border-radius: var(--raggio-medio);
}

.riquadro-approvazione form {
  margin: 0;
}

/* Sessione 20 (DC13): l'elenco di ciò che manca per eseguire un passaggio.
   Tutto insieme, mai una cosa alla volta. È il contenuto principale della
   pagina, non una nota a margine: testo di dimensione normale, non piccola
   come negli altri avvisi. */
.riquadro-mancanze {
  max-width: 640px;
  font-size: inherit;
}

.lista-mancanze {
  margin: 0;
  padding-left: var(--spazio-4);
}

.lista-mancanze li {
  margin-bottom: var(--spazio-2);
}

.lista-mancanze .nota-piccola {
  display: block;
}

.condizioni-passaggio {
  margin-top: var(--spazio-2);
}

/* La nota di un passaggio, dentro lo storico della scheda. */
.storico-nota {
  margin: var(--spazio-1) 0 0;
  padding-left: var(--spazio-3);
  border-left: 3px solid var(--colore-bordo);
  font-style: italic;
}

.form-riga {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spazio-2);
  align-items: center;
  margin-top: var(--spazio-3);
}

.form-riga select {
  width: auto;
  flex: 1 1 200px;
}

/* Campi della scheda in colonne compatte (Sessione 17): tante coppie
   etichetta/valore su schermo largo senza una lunga colonna sola; una colonna
   sola su telefono. */
.campi-elemento {
  margin: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--spazio-3) var(--spazio-6);
}

@media (min-width: 640px) {
  .campi-elemento {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Stato e responsabile affiancati su schermo largo: la scheda si legge meglio
   e i blocchi che contano (campi, registri figli) salgono. */
.scheda-riga-doppia {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--spazio-4);
  margin-bottom: var(--spazio-4);
}

.scheda-riga-doppia .blocco-scheda {
  margin-bottom: 0;
}

.scheda-riga-doppia .blocco-scheda:only-child {
  grid-column: 1 / -1;
}

@media (min-width: 900px) {
  .scheda-riga-doppia {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.campo-elemento dt {
  font-size: var(--testo-piccolo);
  color: var(--colore-testo-attenuato);
}

.campo-elemento dd {
  margin: 0;
  font-size: var(--testo-corpo);
  overflow-wrap: anywhere;
}

/* ── Registro figlio dentro la scheda del padre (Sessione 17) ─────────────
   Riusa .blocco-scheda e .tabella-elementi. Colori con significato fisso
   (SPEC-INTERFACCIA.md §2): verde = conforme/positivo, rosso = critico. */

.torna-al-padre {
  margin: 0 0 var(--spazio-3);
  font-size: var(--testo-piccolo);
}

.blocco-figli-testa {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--spazio-3);
}

.blocco-figli-testa .blocco-scheda-titolo {
  margin: 0;
}

.stato-salvataggio {
  min-height: 24px;
  margin: var(--spazio-2) 0;
  font-size: var(--testo-piccolo);
}

.stato-salvataggio .avviso {
  margin: 0;
}

.salvato-testo {
  color: var(--colore-positivo);
  font-weight: 600;
}

.riepilogo-figli {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spazio-3) var(--spazio-6);
  margin-bottom: var(--spazio-4);
}

.avanzamento {
  display: flex;
  align-items: center;
  gap: var(--spazio-3);
  font-size: var(--testo-piccolo);
}

.avanzamento-barra {
  width: 180px;
  height: 10px;
  border: none;
  border-radius: 999px;
  overflow: hidden;
  background: var(--grigio-100);
  accent-color: var(--colore-primario);
}

.avanzamento-barra::-webkit-progress-bar {
  background: var(--grigio-100);
}

.avanzamento-barra::-webkit-progress-value {
  background: var(--colore-primario);
  border-radius: 999px;
}

.avanzamento-barra::-moz-progress-bar {
  background: var(--colore-primario);
  border-radius: 999px;
}

.riepilogo-conteggi {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spazio-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.conteggio {
  padding: var(--spazio-1) var(--spazio-3);
  border-radius: 999px;
  border: 1px solid var(--colore-bordo);
  background: var(--grigio-100);
  font-size: var(--testo-piccolo);
}

.conteggio-positivo {
  background: var(--colore-positivo-sfondo);
  border-color: var(--colore-positivo);
  color: var(--colore-positivo);
}

.conteggio-critico {
  background: var(--colore-errore-sfondo);
  border-color: var(--colore-errore);
  color: var(--colore-errore);
}

.tabella-figli tbody tr.riga-critica td:first-child {
  box-shadow: inset 4px 0 0 var(--colore-errore);
}

.tabella-figli tbody tr.riga-salvata td,
.tabella-editabile tbody tr.riga-salvata td {
  animation: riga-salvata 2.4s ease-out;
}

@keyframes riga-salvata {
  from { background: var(--colore-positivo-sfondo); }
  to { background: transparent; }
}

@media (prefers-reduced-motion: reduce) {
  .tabella-figli tbody tr.riga-salvata td,
  .tabella-editabile tbody tr.riga-salvata td {
    animation: none;
    background: var(--colore-positivo-sfondo);
  }
}

.cella-modifica {
  margin: 0;
}

.cella-modifica select {
  min-width: 9.5rem;
}

.cella-modifica input[type="text"] {
  min-width: 11rem;
}

.cella-modifica select,
.cella-modifica input[type="text"],
.cella-modifica input[type="number"],
.cella-modifica input[type="date"] {
  width: 100%;
  min-height: 36px;
  padding: var(--spazio-1) var(--spazio-2);
  font-family: inherit;
  font-size: var(--testo-piccolo);
  border: 1px solid var(--colore-bordo);
  border-radius: 6px;
  background: var(--colore-superficie);
  color: var(--colore-testo);
}

.cella-modifica.cella-in-salvataggio {
  opacity: 0.6;
}

.testo-espandibile summary {
  cursor: pointer;
}

.testo-espandibile p {
  margin: var(--spazio-2) 0 0;
}

.link-apri {
  white-space: nowrap;
  font-size: var(--testo-piccolo);
}

.solo-lettori-schermo {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

@media (min-width: 900px) {
  .tabella-figli {
    table-layout: auto;
  }

  .tabella-figli td:nth-child(2) {
    min-width: 260px;
  }
}

/* La tabella dei figli resta una tabella anche su tablet (da 640px): una
   checklist di decine di righe, ognuna trasformata in una scheda alta, sarebbe
   illeggibile. Solo sotto i 640px (telefono) diventa una scheda per riga, come
   le altre tabelle (regola generale di .tabella-elementi). */
@media (min-width: 640px) and (max-width: 899.98px) {
  :is(.tabella-figli, .tabella-editabile) thead {
    display: table-header-group;
  }

  :is(.tabella-figli, .tabella-editabile) {
    display: table;
  }

  :is(.tabella-figli, .tabella-editabile) tbody {
    display: table-row-group;
  }

  :is(.tabella-figli, .tabella-editabile) tr {
    display: table-row;
    margin: 0;
    border: none;
    border-radius: 0;
    box-shadow: none;
    background: none;
  }

  :is(.tabella-figli, .tabella-editabile) td {
    display: table-cell;
    width: auto;
    min-height: 0;
  }

  :is(.tabella-figli, .tabella-editabile) td::before {
    content: none;
  }

  :is(.tabella-figli, .tabella-editabile) td .cella-link {
    display: block;
    min-height: 24px;
    width: auto;
  }

  .scheda-tabella:has(:is(.tabella-figli, .tabella-editabile)) {
    background: var(--colore-superficie);
    border: 1px solid var(--colore-bordo);
    border-radius: var(--raggio-grande);
    box-shadow: var(--ombra-scheda);
    overflow-x: auto;
  }
}

@media (max-width: 639.98px) {
  .tabella-figli tbody tr.riga-critica {
    box-shadow: inset 4px 0 0 var(--colore-errore), var(--ombra-scheda);
  }

  .tabella-figli tbody tr.riga-critica td:first-child {
    box-shadow: none;
  }

  .cella-modifica {
    flex: 1;
  }
}

.scadenze-lista,
.allegati-lista,
.storico-lista {
  list-style: none;
  margin: 0;
  padding: 0;
}

.scadenze-lista li,
.allegati-lista li,
.storico-lista li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--spazio-2);
  min-height: var(--area-toccabile-minima);
  padding: var(--spazio-2) 0;
}

.scadenze-lista li + li,
.allegati-lista li + li,
.storico-lista li + li {
  border-top: 1px solid var(--colore-bordo);
}

.scadenza-in-ritardo span:first-child {
  color: var(--colore-errore);
  font-weight: 600;
}

.azioni-riga {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spazio-2);
}

.azioni-riga form {
  margin: 0;
}

.storico-azione,
.storico-campo {
  font-weight: 500;
}

.storico-valore-lungo {
  display: inline;
}

.storico-valore-lungo summary {
  display: inline;
  cursor: pointer;
  color: var(--colore-primario);
}

/* ── Form della scheda (creazione e modifica) ────────────────────────────── */

.scheda-form {
  max-width: 640px;
  padding: var(--spazio-5);
  border: 1px solid var(--colore-bordo);
  border-radius: var(--raggio-grande);
  background: var(--colore-superficie);
  box-shadow: var(--ombra-scheda);
}

.campo-form {
  margin-bottom: var(--spazio-3);
}

/* Ondata 2 (DC51): scelta multipla — caselle vere sotto la loro domanda. La
   legenda si legge come l'etichetta di ogni altro campo; ogni casella ha
   un'area da toccare piena. */
.campo-caselle {
  margin: 0;
  padding: 0;
  border: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--spazio-4);
}

.campo-caselle legend {
  width: 100%;
  padding: 0;
  margin-top: var(--spazio-3);
  margin-bottom: 6px;
  font-size: var(--testo-piccolo);
  font-weight: 700;
  color: var(--colore-testo);
}

.campo-caselle label {
  display: inline-flex;
  align-items: center;
  gap: var(--spazio-2);
  min-height: var(--area-toccabile-minima);
  margin: 0;
  font-size: var(--testo-corpo);
  font-weight: normal;
  color: var(--colore-testo);
}

.campo-form-checkbox label {
  display: flex;
  align-items: center;
  gap: var(--spazio-2);
  min-height: var(--area-toccabile-minima);
  margin: 0;
  font-size: var(--testo-corpo);
  color: var(--colore-testo);
}

input[type="checkbox"] {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

input[type="file"] {
  min-height: var(--area-toccabile-minima);
  padding: var(--spazio-2) 0;
  font-size: var(--testo-piccolo);
}

.form-azioni {
  display: flex;
  gap: var(--spazio-3);
  margin-top: var(--spazio-5);
}

/* ── Amministrazione (SESSIONE 11) ────────────────────────────────────────
   La schermata riusa la barra superiore e la colonna contestuale di uno
   spazio (.colonna-contestuale, .voce-colonna) e le tabelle di elenco
   (.tabella-elementi). Qui solo il riquadro d'esito dell'applicazione di
   una configurazione, che non ha un equivalente altrove. */

.esito-configurazione {
  margin-top: var(--spazio-6);
  padding: var(--spazio-5);
  border: 1px solid var(--colore-bordo);
  border-radius: var(--raggio-grande);
  background: var(--colore-superficie);
  box-shadow: var(--ombra-scheda);
}

.esito-configurazione h2 {
  margin-top: 0;
}

.esito-configurazione ul {
  margin: 0 0 var(--spazio-4);
  padding-left: var(--spazio-5);
  font-size: var(--testo-piccolo);
}

/* ── Matrice dei permessi (Sessione 16a) ──────────────────────────────────
   Riusa .tabella-elementi e .azioni-riga: qui solo le colonne di
   spunta (centrate) e i pulsanti di profilo, più piccoli dei bottoni
   normali perché ce ne sono tre per riga. */

.matrice-permessi td.permesso {
  text-align: center;
}

.bottone-piccolo {
  min-height: 36px;
  padding: var(--spazio-1) var(--spazio-3);
  font-size: var(--testo-piccolo);
}

/* ── Sessione 18: catalogo, caricamento da file, colonne calcolate, blocco ─
   Riusano i colori con significato fisso (SPEC-INTERFACCIA.md §2): verde =
   positivo, rosso = critico. Nessun colore nuovo. */

.azioni-intestazione,
.blocco-figli-azioni {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spazio-2);
}

.colonna-sezione {
  margin: var(--spazio-4) 0 var(--spazio-1);
  padding: 0 var(--spazio-3);
  font-size: 13px;
  font-weight: 400;
  color: var(--colore-testo-attenuato);
}

/* C5 — la fascia grigia con il lucchetto sopra i figli bloccati */
.fascia-blocco {
  display: flex;
  align-items: flex-start;
  gap: var(--spazio-3);
  margin: var(--spazio-3) 0 var(--spazio-4);
  padding: var(--spazio-3) var(--spazio-4);
  border: 1px solid var(--grigio-200);
  border-radius: var(--raggio-grande);
  background: var(--grigio-100);
  color: var(--grigio-800);
  font-size: var(--testo-piccolo);
}

.fascia-blocco svg {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.fascia-blocco .nota-piccola {
  display: block;
  margin-top: var(--spazio-1);
}

/* C1 — il riquadro della checklist vuota, con il pulsante che la genera */
.stato-vuoto-catalogo {
  padding: var(--spazio-5);
  border: 1px dashed var(--grigio-400);
  border-radius: var(--raggio-grande);
  background: var(--grigio-050);
  text-align: center;
}

.stato-vuoto-catalogo p {
  margin: 0 0 var(--spazio-3);
}

.messaggio-conferma {
  font-size: var(--testo-corpo);
}

/* C4 — colonne calcolate: un numero, oppure una barra piccola con la percentuale */
.avanzamento-mini {
  display: inline-flex;
  align-items: center;
  gap: var(--spazio-2);
  white-space: nowrap;
  font-size: var(--testo-piccolo);
}

.avanzamento-mini progress {
  width: 64px;
  height: 8px;
  border: none;
  border-radius: 999px;
  overflow: hidden;
  background: var(--grigio-100);
  accent-color: var(--colore-primario);
}

.avanzamento-mini progress::-webkit-progress-bar {
  background: var(--grigio-100);
}

.avanzamento-mini progress::-webkit-progress-value {
  background: var(--colore-primario);
  border-radius: 999px;
}

.avanzamento-mini progress::-moz-progress-bar {
  background: var(--colore-primario);
  border-radius: 999px;
}

.valore-calcolato {
  font-variant-numeric: tabular-nums;
}

.valore-critico {
  color: var(--colore-errore);
  font-weight: 700;
}

.valore-positivo {
  color: var(--colore-positivo);
  font-weight: 700;
}

.etichetta-calcolato {
  margin-left: var(--spazio-1);
  padding: 0 var(--spazio-2);
  border-radius: 999px;
  background: var(--grigio-100);
  color: var(--colore-testo-attenuato);
  font-size: 12px;
  font-weight: 400;
}

/* C2 — il percorso in tre passi */
.passi {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spazio-2) var(--spazio-5);
  margin: var(--spazio-4) 0 var(--spazio-5);
  padding: 0;
  list-style: none;
}

.passo {
  display: flex;
  align-items: center;
  gap: var(--spazio-2);
  color: var(--colore-testo-attenuato);
  font-size: var(--testo-piccolo);
}

.passo-numero {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 1px solid var(--grigio-400);
  border-radius: 50%;
  font-weight: 600;
}

.passo-attivo {
  color: var(--colore-primario);
  font-weight: 600;
}

.passo-attivo .passo-numero {
  border-color: var(--colore-primario);
  background: var(--colore-primario);
  color: var(--bianco);
}

.passo-fatto .passo-numero {
  border-color: var(--colore-positivo);
  background: var(--colore-positivo-sfondo);
  color: var(--colore-positivo);
}

.riepilogo-caricamento {
  margin: 0 0 var(--spazio-4);
  padding: var(--spazio-3) var(--spazio-4);
  border: 1px solid var(--colore-bordo);
  border-radius: var(--raggio-grande);
  font-size: var(--testo-corpo);
}

.riepilogo-pronto {
  border-color: var(--colore-positivo);
  background: var(--colore-positivo-sfondo);
  color: var(--colore-positivo);
}

.riepilogo-errore {
  border-color: var(--colore-errore);
  background: var(--colore-errore-sfondo);
  color: var(--colore-errore);
}

.elenco-errori-file {
  margin: 0 0 var(--spazio-4);
  padding: 0;
  list-style: none;
}

.tabella-anteprima tr.riga-errore td,
.tabella-anteprima td.cella-errore {
  background: var(--colore-errore-sfondo);
}

.testo-errore {
  display: block;
  color: var(--colore-errore);
  font-size: var(--testo-piccolo);
  font-weight: 600;
}

.titolo-sezione {
  margin: var(--spazio-5) 0 var(--spazio-2);
  font-size: var(--testo-corpo);
}

.form-annulla {
  margin-top: var(--spazio-4);
}

.bottone-link {
  padding: 0;
  border: none;
  background: none;
  color: var(--colore-testo-attenuato);
  font: inherit;
  font-size: var(--testo-piccolo);
  text-decoration: underline;
  cursor: pointer;
}

.form-caricamento label {
  display: block;
  margin-bottom: var(--spazio-2);
  font-weight: 600;
}

.tabella-colonne select {
  width: 100%;
  min-height: 36px;
}

/* Nella tabella di un registro la riga dei messaggi di salvataggio compare solo quando serve. */
.scheda-tabella > .stato-salvataggio:empty {
  display: none;
}

.scheda-tabella > .stato-salvataggio {
  margin: var(--spazio-3) var(--spazio-4) 0;
}

.dopo-tabella {
  margin-top: var(--spazio-3);
}

/* ───────────────────────────────────────────────────────────────────────
   Selettore unico riutilizzabile (Sessione 16c, Parte 2).
   Senza JavaScript: elenco di caselle/radio raggruppate per tipo, sempre
   visibile (nessuna delle regole qui sotto lo nasconde). Con JavaScript
   (classe .selettore-js, aggiunta da nucleo/js/selettore.js): stessi
   controlli, spostati in una tendina che si apre sotto una casella di
   ricerca, con le voci scelte mostrate come etichette con ×.
   ─────────────────────────────────────────────────────────────────────── */

.selettore-sezione {
  margin-bottom: var(--spazio-3);
}

.selettore-intestazione {
  margin: 0 0 var(--spazio-1);
  font-size: var(--testo-piccolo);
  font-weight: 600;
  color: var(--colore-testo-attenuato);
}

.selettore-voce {
  display: flex;
  align-items: center;
  gap: var(--spazio-2);
  padding: var(--spazio-1) 0;
  cursor: pointer;
}

.selettore-voce[hidden] {
  display: none;
}

.selettore-js .selettore-sezione {
  margin-bottom: 0;
  padding: var(--spazio-2) var(--spazio-3);
}

.selettore-intestazione-js {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spazio-2);
  border: 1px solid var(--colore-bordo);
  border-radius: var(--raggio-piccolo);
  padding: var(--spazio-2);
  background: var(--colore-superficie);
}

.selettore-scelte {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spazio-2);
}

.selettore-etichetta-scelta {
  display: inline-flex;
  align-items: center;
  gap: var(--spazio-1);
  padding: var(--spazio-1) var(--spazio-2);
  border-radius: var(--raggio-piccolo);
  background: var(--colore-selezione-sfondo);
  color: var(--colore-testo);
  font-size: var(--testo-piccolo);
}

.selettore-togli {
  border: none;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
  padding: 0 var(--spazio-1);
  line-height: 1;
}

.selettore-togli:hover,
.selettore-togli:focus-visible {
  color: var(--colore-errore);
}

.selettore-ricerca {
  flex: 1 1 160px;
  min-width: 120px;
  border: none;
  font: inherit;
  font-size: var(--testo-corpo);
  padding: var(--spazio-1) 0;
  background: transparent;
  color: var(--colore-testo);
}

.selettore-ricerca:focus {
  outline: none;
}

.selettore-tendina {
  margin-top: var(--spazio-1);
  max-height: 260px;
  overflow-y: auto;
  border: 1px solid var(--colore-bordo);
  border-radius: var(--raggio-piccolo);
  background: var(--colore-superficie);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.selettore-tendina[hidden] {
  display: none;
}

/* ─── Sessione 22 (DC23, DC24): il documento è il registro ─────────────── */

/* Un capitolo (campo Markdown) reso dal server: tipografia da lettura, non da
   modulo. Stessa classe per la scheda e per l'anteprima dell'editor. */
.testo-markdown {
  max-width: 72ch;
  line-height: 1.6;
  overflow-wrap: anywhere;
}

/* A12 (Ondata 1): le immagini nel testo, sempre dentro la colonna. */
.testo-markdown img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: var(--spazio-3) 0;
  border-radius: var(--raggio-piccolo);
}

.immagine-mancante {
  color: var(--colore-testo-attenuato);
  font-style: italic;
}

.testo-markdown > :first-child {
  margin-top: 0;
}

.testo-markdown h1,
.testo-markdown h2,
.testo-markdown h3 {
  margin: var(--spazio-5) 0 var(--spazio-2);
  font-size: 17px;
}

.testo-markdown h3 {
  font-size: 15px;
}

.testo-markdown table {
  border-collapse: collapse;
  margin: var(--spazio-3) 0;
  display: block;
  overflow-x: auto;
}

.testo-markdown th,
.testo-markdown td {
  padding: var(--spazio-1) var(--spazio-3);
  border: 1px solid var(--colore-bordo);
  text-align: left;
}

.testo-markdown pre,
.testo-markdown code {
  background: var(--grigio-100);
  border-radius: var(--raggio-piccolo, 4px);
}

.testo-markdown pre {
  padding: var(--spazio-3);
  overflow-x: auto;
}

/* L'editor: la textarea resta un campo normale; la barra compare solo con il
   JavaScript (markdown.js). */
.editor-markdown {
  width: 100%;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 14px;
  line-height: 1.5;
}

.barra-markdown {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spazio-1);
  margin-bottom: var(--spazio-2);
}

.bottone-barra {
  padding: var(--spazio-1) var(--spazio-2);
  font-size: 13px;
}

.bottone-barra[aria-pressed="true"] {
  background: var(--colore-selezione-sfondo);
  border-color: var(--colore-primario);
}

.barra-markdown-separatore {
  width: 1px;
  margin: 0 var(--spazio-1);
  background: var(--colore-bordo);
}

.anteprima-markdown {
  min-height: 8em;
  padding: var(--spazio-3);
  border: 1px dashed var(--colore-bordo);
  border-radius: var(--raggio-medio);
  background: var(--colore-superficie);
}

.anteprima-markdown[hidden],
.editor-markdown[hidden] {
  display: none;
}

/* DC24: la revisione approvata nel riquadro Stato, e il segno «non eliminabile»
   sull'allegato che ne è la prova. */
.riquadro-revisione {
  margin-top: var(--spazio-3);
  padding: var(--spazio-3);
  border: 1px solid var(--colore-bordo);
  border-radius: var(--raggio-medio);
}

.riquadro-revisione p {
  margin: 0 0 var(--spazio-1);
}

.etichetta-protetto {
  margin-left: var(--spazio-1);
  padding: 0 var(--spazio-2);
  border-radius: 999px;
  background: var(--colore-positivo-sfondo);
  color: var(--colore-positivo);
  font-size: 12px;
  white-space: nowrap;
}

.elenco-composizione {
  margin: 0 0 var(--spazio-1);
  padding-left: var(--spazio-5);
}

/* Sessione 22b (R1, R2): la versione approvata si apre o si scarica; lo storico
   mostra le uscite solo a richiesta. */
.riga-versione {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spazio-1) var(--spazio-2);
}

.riga-versione .etichetta-protetto {
  margin-left: 0;
}

/* Sessione 23 (DC34): «Esporta PDF» nel riquadro Stato; la pagina della carta
   intestata con l'area libera in una tabella a due colonne. */
/* Ondata 1 (DC53): l'elenco delle automazioni, in parole. */
.elenco-automazioni {
  display: flex;
  flex-direction: column;
  gap: var(--spazio-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.elenco-automazioni li {
  display: flex;
  flex-direction: column;
  gap: var(--spazio-1);
  padding-top: var(--spazio-3);
  border-top: 1px solid var(--filo-tabella);
}

.elenco-automazioni li:first-child {
  padding-top: 0;
  border-top: none;
}

/* Ondata 1 (DC46): «tocca a …», sotto lo stato. */
.tocca-a {
  margin: var(--spazio-2) 0 0;
}

.riga-esporta {
  margin: var(--spazio-2) 0 0;
}

.area-libera,
.scheda-form fieldset.campo-form {
  border: 1px solid var(--colore-bordo);
  border-radius: var(--raggio-medio);
  padding: var(--spazio-2) var(--spazio-3) var(--spazio-3);
  margin: 0 0 var(--spazio-4);
  min-width: 0;
}

.area-libera legend,
.scheda-form fieldset.campo-form legend {
  font-weight: 600;
  padding: 0 var(--spazio-1);
}

.tabella-area {
  border-collapse: collapse;
  margin: var(--spazio-2) 0;
}

.tabella-area th,
.tabella-area td {
  padding: var(--spazio-1) var(--spazio-3) var(--spazio-1) 0;
  text-align: left;
  vertical-align: middle;
}

.tabella-area input.campo-mm {
  width: 5.5em;
}

.riga-proposta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spazio-1) var(--spazio-2);
}

.scelta-in-linea {
  display: inline-flex;
  align-items: center;
  gap: var(--spazio-1);
  margin-right: var(--spazio-3);
  font-weight: normal;
}

.riga-carta-pdf {
  margin: 0 0 var(--spazio-1);
}

.filtro-storico {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--spazio-1);
  margin-bottom: var(--spazio-2);
  font-size: 14px;
}

/* Sessione 22b (R7): l'editor completo. L'anteprima sta accanto alla textarea su
   schermo largo, sotto su schermo stretto; il modulo si allarga solo mentre
   l'anteprima è aperta. */
.scheda-form.scheda-form-larga {
  max-width: 1280px;
}

.editor-markdown-riquadro {
  display: grid;
  gap: var(--spazio-3);
}

@media (min-width: 1000px) {
  .editor-markdown-riquadro.con-anteprima {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
  }

  .editor-markdown-riquadro.con-anteprima .anteprima-markdown {
    max-height: 70vh;
    overflow-y: auto;
  }
}

.bottone-grassetto {
  font-weight: 700;
  min-width: 2.2em;
}

.bottone-corsivo {
  font-style: italic;
  font-family: Georgia, "Times New Roman", serif;
  min-width: 2.2em;
}

.finestra-markdown {
  max-width: min(360px, calc(100vw - 32px));
  padding: var(--spazio-4);
  border: 1px solid var(--colore-bordo);
  border-radius: var(--raggio-grande);
  background: var(--colore-superficie);
  color: inherit;
}

.finestra-markdown::backdrop {
  background: rgb(0 0 0 / 35%);
}

.finestra-markdown h2 {
  margin: 0 0 var(--spazio-3);
  font-size: 1.05rem;
}

.finestra-markdown label {
  display: grid;
  gap: var(--spazio-1);
}

.finestra-markdown input {
  width: 100%;
}

.aiuto-markdown code {
  white-space: nowrap;
}

/* Da telefono la barra si abbassa a 52px e stringe i lati (manutenzione M2). */
@media (max-width: 640px) {
  :root {
    --altezza-barra: 52px;
  }

  .barra-superiore {
    padding: 0 var(--spazio-4);
    gap: var(--spazio-2);
  }

  .barra-superiore-sinistra {
    gap: var(--spazio-3);
  }

  .barra-superiore-destra {
    gap: 0;
  }

  /* Il nome dello spazio o della pagina non ci sta: è già nel percorso e nel
     titolo subito sotto. «Menu dello spazio» resta, solo con l'icona. */
  .posizione-corrente {
    display: none;
  }

  .bottone-colonna-testo {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .bottone-colonna {
    justify-content: center;
    min-width: var(--area-toccabile-minima);
    padding: 0;
    font-size: var(--testo-titolo);
  }
}

/* ── Sessione 25: «Segnala un problema» ───────────────────────────────── */

/* Spazio in fondo, perché il bottone fisso non copra l'ultima riga. */
.area-contenuto-corpo {
  padding-bottom: var(--spazio-8);
}

.segnala-problema {
  position: fixed;
  right: var(--spazio-4);
  bottom: var(--spazio-4);
  z-index: 20;
  display: inline-flex;
  align-items: center;
  gap: var(--spazio-2);
  padding: var(--spazio-2) var(--spazio-3);
  border: 1px solid var(--colore-bordo);
  border-radius: 999px;
  background: var(--colore-superficie);
  box-shadow: var(--ombra-scheda);
  color: var(--colore-testo-attenuato);
  font-size: 13px;
  text-decoration: none;
}

.segnala-problema:hover,
.segnala-problema:focus-visible {
  color: var(--colore-profondo);
  border-color: var(--colore-profondo);
}

@media print {
  .segnala-problema { display: none; }
}

.scelta-tipo-segnalazione {
  border: 0;
  padding: 0;
}

.scelta-tipo-segnalazione legend {
  font-weight: 600;
  margin-bottom: var(--spazio-2);
}

.scelta-tipo-segnalazione label {
  display: flex;
  align-items: center;
  gap: var(--spazio-2);
  padding: var(--spazio-1) 0;
}

.scheda-form textarea {
  width: 100%;
}

.testo-segnalazione {
  max-width: 360px;
  white-space: normal;
}

/* ── Vestito (Ondata 1): la ricerca nella barra sugli schermi stretti ──────
   Sotto i 760 px il campo non ci sta: resta la lente, che porta alla pagina
   di ricerca. */
@media (max-width: 759.98px) {
  .barra-ricerca {
    display: none;
  }

  .icona-bottone.barra-ricerca-lente {
    display: flex;
  }

  .barra-superiore-destra {
    margin-left: auto;
  }
}

@media (max-width: 899.98px) {
  .menu-spazi {
    position: static;
  }

  .menu-spazi-tendina {
    position: fixed;
    top: calc(var(--altezza-barra) + var(--spazio-2));
    left: var(--spazio-3);
    right: var(--spazio-3);
    width: auto;
    max-width: none;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   Ondata 2 — il modulo (DC51, DC66; tavole «ModuloInterno», «ModuloPubblico»).
   Una colonna stretta e ariosa: è una pagina dove si scrive, non un elenco.
   ══════════════════════════════════════════════════════════════════════════ */
.pagina-modulo {
  max-width: 680px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--spazio-4);
}

.modulo-testa h1 {
  margin: 0;
}

.modulo-descrizione {
  margin: 6px 0 0;
  font-size: var(--testo-corpo);
  color: var(--colore-testo-attenuato);
}

.modulo-corpo {
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.modulo-passo {
  margin: 0;
  font-size: var(--testo-piccolo);
  color: var(--colore-testo-attenuato);
}

.modulo-domanda label,
.modulo-domanda legend {
  margin-top: 0;
}

.modulo-domanda input[type="text"],
.modulo-domanda input[type="number"],
.modulo-domanda input[type="date"],
.modulo-domanda select,
.modulo-domanda textarea {
  width: 100%;
  font-size: var(--testo-corpo);
}

.modulo-domanda-errore input,
.modulo-domanda-errore textarea,
.modulo-domanda-errore select {
  border-color: var(--stato-rosso-testo);
}

.modulo-aiuto {
  margin: 4px 0 0;
}

.obbligatorio {
  color: var(--stato-rosso-testo);
}

.modulo-scelte {
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}

.modulo-scelte legend {
  padding: 0;
  margin-bottom: 6px;
  font-size: var(--testo-piccolo);
  font-weight: 700;
  color: var(--colore-testo);
}

.pillole {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* Una scelta è una pillola intera da toccare: la casella vera c'è, ma si
   vede la pillola. Selezionata = velatura e bordo blu, più il segno. */
.pillola {
  position: relative;
  display: inline-flex;
  margin: 0;
  font-weight: normal;
  cursor: pointer;
}

.pillola input {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
}

.pillola span {
  display: inline-flex;
  align-items: center;
  min-height: var(--area-toccabile-minima);
  padding: 0 16px;
  border: 1px solid var(--filo-campo);
  border-radius: 999px;
  background: var(--bianco);
  font-size: var(--testo-corpo);
  color: var(--colore-testo);
}

.pillola input:checked + span {
  border-color: var(--colore-primario);
  background: var(--velatura);
  color: var(--colore-primario);
  font-weight: 700;
}

.pillola-casella input:checked + span::before {
  content: "✓";
  margin-right: 6px;
}

.pillola input:focus-visible + span {
  outline: 2px solid var(--colore-primario);
  outline-offset: 2px;
}

.modulo-spunta {
  display: flex;
  align-items: center;
  gap: var(--spazio-2);
  min-height: var(--area-toccabile-minima);
  margin: 0;
  font-size: var(--testo-corpo);
  font-weight: 700;
}

.modulo-file {
  display: flex;
  align-items: center;
  padding: 18px;
  border: 1.5px dashed var(--blu-ftalo-contorno);
  border-radius: var(--raggio-medio, 8px);
  background: var(--velatura-chiara);
}

.modulo-file input[type="file"] {
  width: 100%;
  font-size: var(--testo-corpo);
}

/* Ciò che il modulo non chiede e si compila da sé («chi compila», «oggi»). */
.modulo-da-soli {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--spazio-4);
  margin: 0;
  padding: 12px 14px;
  border-radius: var(--raggio-medio, 8px);
  background: var(--carta);
  font-size: var(--testo-piccolo);
}

.modulo-da-soli dt {
  color: var(--colore-testo-attenuato);
}

.modulo-da-soli dd {
  margin: 0;
}

.modulo-comandi {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--spazio-2);
  padding-top: 18px;
  border-top: 1px solid var(--filo-tabella);
}

.modulo-comandi-destra {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spazio-2);
}

@media (max-width: 560px) {
  .modulo-corpo {
    padding: var(--spazio-4);
  }

  .modulo-comandi-destra,
  .modulo-comandi-destra .bottone {
    width: 100%;
  }
}

/* Le impostazioni del modulo (tavola «ModuloConfig»). La tavola mette le
   domande a sinistra e il resto a destra; qui le domande hanno in più ordine,
   pagina e testo di aiuto, e a fianco non ci starebbero: le domande prendono
   tutta la larghezza e il resto sta sotto, in due colonne. */
.impostazioni-modulo-colonne {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--spazio-5);
  align-items: start;
}

.impostazioni-modulo-lato {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--spazio-4);
  align-items: start;
}

.tabella-domande .campo-stretto {
  width: 64px;
}

.tabella-domande input[type="text"] {
  width: 100%;
  min-width: 140px;
}

.tabella-domande input[type="checkbox"] {
  width: 18px;
  height: 18px;
}

.etichetta-colonna {
  margin: 0;
  font-size: var(--testo-piccolo);
  font-weight: 700;
}

.riga-attenzione td {
  background: var(--stato-ambra-fondo);
}

.testo-positivo {
  color: var(--stato-verde-testo);
}

.testo-attenzione {
  color: var(--stato-ambra-testo);
}

.voce-impostazione {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--spazio-4);
  padding: 14px 0;
  border-top: 1px solid var(--filo-tabella);
}

.voce-impostazione p {
  margin: 2px 0 0;
}

.voce-impostazione .scelta-in-linea {
  flex-shrink: 0;
  margin: 0;
}

/* ══════════════════════════════════════════════════════════════════════════
   Ondata 2 — il modulo pubblico (DC52; tavola «ModuloPubblico»). Una pagina
   senza Ftalo intorno: in testa il nome dell'organizzazione che chiede.
   ══════════════════════════════════════════════════════════════════════════ */
.pubblico {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--carta);
}

.pubblico-testa {
  width: 100%;
  display: flex;
  justify-content: center;
  background: var(--bianco);
  border-bottom: 1px solid var(--filo);
}

.pubblico-testa-interno {
  width: 100%;
  max-width: 640px;
  padding: 18px 24px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.pubblico-iniziali {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: var(--inchiostro);
  color: var(--bianco);
  font-weight: 700;
}

.pubblico-organizzazione {
  font-size: var(--testo-corpo);
  font-weight: 700;
}

.pubblico-corpo {
  width: 100%;
  max-width: 640px;
  padding: 36px 24px 24px;
  display: flex;
  flex-direction: column;
  gap: var(--spazio-5);
}

.pubblico-messaggio,
.pubblico-testo {
  padding: 28px;
}

.pubblico-messaggio h1 {
  margin-top: 0;
}

.pubblico-testo {
  font-size: var(--testo-corpo);
  line-height: 1.65;
}

.pubblico-informativa {
  margin: 0;
}

.pubblico-piede {
  margin: auto 0 0;
  padding: 24px;
  font-size: 13px;
  color: var(--colore-testo-attenuato);
}

/* Il campo trappola: c'è nella pagina, ma una persona non lo vede, non lo
   raggiunge col tabulatore e non se lo sente leggere. */
.trappola {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Gli invii pubblici in attesa di verifica. */
.invii-da-verificare {
  display: flex;
  flex-direction: column;
  gap: var(--spazio-4);
}

.invio-risposte {
  display: grid;
  gap: var(--spazio-2);
  margin: var(--spazio-3) 0;
}

.invio-risposte dt {
  font-size: var(--testo-piccolo);
  color: var(--colore-testo-attenuato);
}

.invio-risposte dd {
  margin: 0;
  overflow-wrap: anywhere;
}

@media (max-width: 560px) {
  .pubblico-corpo {
    padding: var(--spazio-5) var(--spazio-4);
  }
}

.link-pubblico {
  display: flex;
  flex-direction: column;
  gap: var(--spazio-2);
  padding: 12px 0 4px;
  border-top: 1px solid var(--filo-tabella);
}

.link-pubblico label {
  margin: 0;
}

.campo-link {
  width: 100%;
  font-size: var(--testo-piccolo);
  font-variant-numeric: tabular-nums;
}

.link-pubblico-comandi {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spazio-2);
}

/* ══════════════════════════════════════════════════════════════════════════
   Ondata 2 — punteggio ed esito di un modulo (DC60, DC61; tavola «QuizEditor»).
   ══════════════════════════════════════════════════════════════════════════ */
.punteggio-colonne {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: var(--spazio-5);
  align-items: start;
}

.punteggio-domande {
  display: flex;
  flex-direction: column;
  gap: var(--spazio-4);
}

.punteggio-lato {
  grid-template-columns: minmax(0, 1fr);
}

.punti-opzioni {
  display: flex;
  flex-direction: column;
}

.punti-opzione {
  display: flex;
  align-items: center;
  gap: var(--spazio-3);
  padding: 6px 0;
  border-top: 1px solid var(--filo-tabella);
}

.punti-opzione label {
  flex: 1;
  margin: 0;
  font-weight: normal;
  font-size: var(--testo-corpo);
}

.punti-opzione .campo-stretto {
  width: 72px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.campo-form .punti-opzione {
  border-top: 0;
}

/* L'esito di un tentativo, per chi lo ha fatto. */
.esito-modulo {
  padding: var(--spazio-4);
  border-radius: var(--raggio-medio, 8px);
  background: var(--carta);
}

.esito-modulo-superato {
  background: var(--stato-verde-fondo);
  color: var(--stato-verde-testo);
}

.esito-modulo-non-superato {
  background: var(--stato-ambra-fondo);
  color: var(--mancanze-testo);
}

.esito-modulo-titolo {
  margin: 0 0 var(--spazio-2);
  font-size: 20px;
  font-weight: 700;
}

.esito-modulo p:last-child {
  margin-bottom: 0;
}

.esito-modulo-sbagliate {
  margin: var(--spazio-2) 0;
  padding-left: 1.2em;
}

@media (max-width: 1100px) {
  .punteggio-colonne {
    grid-template-columns: minmax(0, 1fr);
  }
}


/* Ondata 2 (DC49): il modulo collegato dentro la pagina di lettura (tavola «Lettura»). */
.lettura-verifica {
  margin-top: var(--spazio-5);
}

.lettura-verifica-domande {
  margin-top: var(--spazio-3);
}

.lettura-conferma .bottone[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
}

/* Ondata 2 (DC63): i comandi dell'anteprima «persone da file», uno accanto all'altro. */
.azioni-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spazio-2);
}

/* Ondata 2 (DC64; tavola «Spazio»): «Come va», i riquadri dei numeri. */
.come-va {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: var(--spazio-3);
}

.numero-spazio {
  margin: 0;
  padding: var(--spazio-4);
}

.numero-spazio-elenco {
  grid-column: span 2;
}

.numero-spazio-valore {
  display: block;
  font-family: var(--carattere-titoli);
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--colore-testo);
  text-decoration: none;
}

a.numero-spazio-valore:hover,
a.numero-spazio-valore:focus-visible {
  text-decoration: underline;
}

.numero-spazio-verde {
  color: var(--colore-positivo);
}

.numero-spazio-ambra {
  color: var(--colore-attenzione);
}

.numero-spazio-rosso {
  color: var(--colore-errore);
}

/* Collaudo Valtorre (DC87): il riquadro «andamento», disegnato dal server. */
.andamento {
  display: block;
  width: 100%;
  height: 64px;
  margin: var(--spazio-2) 0;
}

.andamento-linea {
  stroke: var(--colore-primario);
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

.andamento-obiettivo {
  stroke: var(--grigio-400);
  stroke-width: 1;
  stroke-dasharray: 4 3;
  vector-effect: non-scaling-stroke;
}

.andamento-ultimo {
  fill: var(--colore-primario);
}

.numero-spazio-titolo {
  margin-top: var(--spazio-1);
  font-weight: 600;
}

.numero-spazio-righe {
  margin: var(--spazio-2) 0 0;
  padding: 0;
  list-style: none;
}

.numero-spazio-righe li {
  display: flex;
  justify-content: space-between;
  gap: var(--spazio-3);
  padding: var(--spazio-1) 0;
  border-top: 1px solid var(--colore-bordo);
  font-size: var(--testo-piccolo);
}

@media (max-width: 640px) {
  .numero-spazio-elenco {
    grid-column: span 1;
  }
}

/* ── Ondata 3 — Sibilla: «Sistema con Sibilla», attesa, differenze, consumi ──
   Stessi gettoni del vestito. Il blu resta al comando principale: il comando
   di Sibilla è testuale (tavola «Scheda»), con la sua stellina. */

.capitolo-testa {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spazio-3);
  flex-wrap: wrap;
}

.capitolo-testa .blocco-scheda-titolo {
  margin-bottom: 0;
}

.sistema-con-sibilla {
  display: inline-flex;
  align-items: center;
}

.campo-elemento .sistema-con-sibilla {
  display: flex;
  margin-top: var(--spazio-2);
}

.bottone-sibilla {
  display: inline-flex;
  align-items: center;
  gap: var(--spazio-2);
  min-height: var(--area-toccabile-minima);
  padding: var(--spazio-1) var(--spazio-3);
  color: var(--blu-ftalo);
  font-size: var(--testo-piccolo);
  font-weight: 700;
  text-decoration: none;
}

.bottone-sibilla svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.sibilla-ferma {
  max-width: 420px;
}

.storico-sibilla {
  display: block;
  color: var(--blu-ftalo);
}

.sibilla-testa-pagina {
  margin-bottom: var(--spazio-5);
}

.sibilla-testa-pagina h1 {
  margin: 0 0 var(--spazio-1);
}

/* L'attesa: tre puntini che respirano. Solo CSS; chi ha chiesto meno
   movimento li vede fermi. */
.sibilla-puntini {
  display: flex;
  justify-content: center;
  gap: var(--spazio-2);
  margin: var(--spazio-5) 0;
}

.sibilla-puntini span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--blu-ftalo);
  opacity: 0.25;
  animation: sibilla-respira 1.2s ease-in-out infinite;
}

.sibilla-puntini span:nth-child(2) {
  animation-delay: 0.2s;
}

.sibilla-puntini span:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes sibilla-respira {
  0%,
  80%,
  100% {
    opacity: 0.25;
  }
  40% {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sibilla-puntini span {
    animation: none;
    opacity: 0.6;
  }
}

/* Le differenze: due colonne affiancate, una sotto l'altra sul telefono. */
.differenze {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spazio-4);
  margin: var(--spazio-4) 0;
}

@media (max-width: 900px) {
  .differenze {
    grid-template-columns: 1fr;
  }
}

.differenze-colonna {
  min-width: 0;
}

.differenze-testo {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-size: var(--testo-corpo);
  line-height: 1.65;
}

.diff-tolto {
  background: var(--stato-rosso-fondo);
  color: var(--stato-rosso-testo);
  text-decoration: line-through;
  border-radius: 3px;
}

.diff-aggiunto {
  background: var(--stato-verde-fondo);
  color: var(--stato-verde-testo);
  text-decoration: none;
  border-radius: 3px;
}

.controllo-numeri {
  margin: var(--spazio-4) 0;
  border-left: 4px solid var(--stato-verde-testo);
}

.controllo-numeri-attenzione {
  border-left-color: var(--stato-ambra-testo);
  background: var(--stato-ambra-fondo);
  color: var(--mancanze-testo);
}

.controllo-numeri p {
  margin: var(--spazio-1) 0;
}

.cifra {
  display: inline-block;
  padding: 0 var(--spazio-2);
  border-radius: 999px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  background: var(--bianco);
  border: 1px solid currentColor;
}

.decisione-proposta,
.segnala-proposta,
.anteprima-proposta {
  margin: var(--spazio-4) 0;
}

.decisione-proposta .form-azioni {
  flex-wrap: wrap;
}

.modifica-proposta {
  margin-top: var(--spazio-3);
}

.modifica-proposta textarea,
.segnala-proposta textarea {
  width: 100%;
  margin: var(--spazio-2) 0;
  line-height: 1.5;
}

.anteprima-proposta summary,
.modifica-proposta summary,
.segnala-proposta summary {
  cursor: pointer;
  color: var(--blu-ftalo);
  font-weight: 700;
}

.anteprima-proposta summary {
  margin-bottom: 0;
  font-family: var(--carattere);
  font-size: var(--testo-corpo);
}

/* I contatori dell'IA (fornitore e cliente). */
.riquadri-numeri {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spazio-4);
  margin: var(--spazio-4) 0;
}

.riquadri-numeri .riquadro-numero {
  min-width: 200px;
}

.tabella-elementi th.cella-numero,
.tabella-elementi td.cella-numero {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.barra-uso {
  display: inline-block;
  width: 140px;
  height: 8px;
  vertical-align: middle;
  border-radius: 999px;
  background: var(--stato-grigio-fondo);
  overflow: hidden;
}

.barra-uso-larga {
  display: block;
  width: 100%;
  max-width: 520px;
  height: 12px;
}

.barra-uso-piena {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--stato-verde-testo);
}

.barra-uso-ambra {
  background: var(--stato-ambra-testo);
}

.barra-uso-rosso {
  background: var(--stato-rosso-testo);
}

.barra-uso-grigio {
  background: var(--grigio-400);
}

.scheda-form-stretta {
  max-width: 420px;
}

/* ── Ondata 3 — la chat di Sibilla (tavola «Sibilla») ──────────────────────
   Tre colonne: cronologia, conversazione, fonti. Sotto i 1100 px le fonti
   scendono sotto la conversazione; sotto i 760 px anche la cronologia. */

.sibilla-chat {
  display: grid;
  grid-template-columns: 268px minmax(0, 1fr) 380px;
  min-height: calc(100vh - var(--altezza-barra));
  background: var(--bianco);
}

.sibilla-cronologia {
  display: flex;
  flex-direction: column;
  gap: var(--spazio-1);
  padding: var(--spazio-4) var(--spazio-3);
  border-right: 1px solid var(--filo);
  background: var(--carta);
}

.sibilla-nuova {
  justify-content: center;
  margin-bottom: var(--spazio-3);
  text-align: center;
}

.sibilla-cronologia-gruppo {
  margin: var(--spazio-3) 0 0;
  padding: var(--spazio-1) var(--spazio-2);
  font-size: 13px;
  color: var(--grafite);
}

.sibilla-cronologia-voce {
  display: block;
  padding: var(--spazio-2) var(--spazio-2);
  border-radius: var(--raggio-comando);
  color: var(--inchiostro);
  font-size: var(--testo-piccolo);
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sibilla-cronologia-voce:hover {
  background: var(--velatura-chiara);
}

.sibilla-cronologia-attiva {
  background: var(--velatura);
  color: var(--blu-ftalo);
  font-weight: 700;
}

.sibilla-cronologia-nota {
  margin-top: auto;
  padding: var(--spazio-4) var(--spazio-2) 0;
  font-size: 12px;
  line-height: 1.5;
}

.sibilla-centro {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.sibilla-colonna {
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  padding: 0 var(--spazio-6);
}

.sibilla-centro > .sibilla-colonna {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--spazio-5);
  padding-top: var(--spazio-6);
  padding-bottom: var(--spazio-6);
}

.sibilla-intestazione {
  margin-bottom: 0;
  padding-bottom: var(--spazio-4);
  border-bottom: 1px solid var(--filo-tabella);
}

.sibilla-intestazione .sibilla-nome {
  font-size: 18px;
}

.sibilla-domanda {
  align-self: flex-end;
  max-width: 520px;
  padding: var(--spazio-3) var(--spazio-4);
  border-radius: 14px;
  background: var(--stato-grigio-fondo);
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.sibilla-risposta {
  display: flex;
  gap: var(--spazio-3);
  scroll-margin-top: calc(var(--altezza-barra) + var(--spazio-4));
}

.sibilla-avatar-piccolo {
  width: 36px;
  height: 36px;
}

.sibilla-risposta-corpo {
  display: flex;
  flex-direction: column;
  gap: var(--spazio-2);
  min-width: 0;
  line-height: 1.65;
}

.sibilla-risposta-corpo > p {
  margin: 0;
}

.sibilla-testo > :first-child {
  margin-top: 0;
}

.sibilla-testo > :last-child {
  margin-bottom: 0;
}

.rif-fonte {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 4px;
  background: var(--velatura);
  color: var(--blu-ftalo);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
  text-decoration: none;
  vertical-align: 1px;
}

.sibilla-risposta-azioni {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: var(--spazio-4);
}

.sibilla-sbagliata summary {
  cursor: pointer;
  color: var(--grafite);
}

.sibilla-sbagliata form {
  margin-top: var(--spazio-2);
  max-width: 420px;
}

.sibilla-sbagliata textarea {
  width: 100%;
}

.sibilla-puntini-sinistra {
  justify-content: flex-start;
  margin: var(--spazio-2) 0;
}

.sibilla-vuota {
  padding: var(--spazio-6) 0;
}

.sibilla-scrivi {
  position: sticky;
  bottom: 0;
  padding: var(--spazio-4) 0 var(--spazio-4);
  border-top: 1px solid var(--filo);
  background: var(--bianco);
}

.sibilla-scrivi textarea {
  width: 100%;
  padding: var(--spazio-3) var(--spazio-4);
  border-radius: 12px;
  line-height: 1.5;
  resize: none;
}

.sibilla-elimina {
  padding: 0 var(--spazio-6) var(--spazio-4);
  text-align: center;
}

.sibilla-fonti {
  display: flex;
  flex-direction: column;
  gap: var(--spazio-3);
  padding: var(--spazio-5) var(--spazio-4);
  border-left: 1px solid var(--filo);
  background: var(--fondo-testata);
}

.sibilla-fonti-testa {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}

.sibilla-fonti-testa .riquadro-titolo-piccolo {
  margin: 0;
}

.sibilla-fonte {
  padding: var(--spazio-3) var(--spazio-4);
  border: 1px solid var(--filo);
  border-radius: var(--raggio-grande);
  background: var(--bianco);
  scroll-margin-top: calc(var(--altezza-barra) + var(--spazio-4));
}

.sibilla-fonte:target {
  border-color: var(--blu-ftalo);
  box-shadow: 0 0 0 1px var(--blu-ftalo);
}

.sibilla-fonte p {
  margin: var(--spazio-1) 0 0;
}

.sibilla-fonte-riga {
  display: flex;
  align-items: center;
  gap: var(--spazio-2);
}

.sibilla-fonte-codice {
  color: var(--grafite);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

.sibilla-fonte-spazio {
  margin-left: auto;
  font-size: 13px;
}

.sibilla-fonte-titolo {
  font-size: 15px;
  font-weight: 700;
}

.sibilla-fonte-estratto {
  color: var(--grigio-800);
  font-size: var(--testo-piccolo);
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.sibilla-fonte .collegamento-forte {
  display: inline-block;
  margin-top: var(--spazio-2);
  font-size: var(--testo-piccolo);
}

/* Collaudo Valtorre (4.1): sugli schermi larghi la pagina non scorre tutta
   insieme. Conversazioni, chat e fonti scorrono ognuna per conto suo, e la
   casella per scrivere resta in fondo alla chat. */
@media (min-width: 1100.02px) {
  .sibilla-chat {
    height: calc(100vh - var(--altezza-barra));
    min-height: 0;
  }

  .sibilla-cronologia,
  .sibilla-centro,
  .sibilla-fonti {
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}

@media (max-width: 1100px) {
  .sibilla-chat {
    grid-template-columns: 240px minmax(0, 1fr);
  }

  .sibilla-fonti {
    grid-column: 2;
    border-top: 1px solid var(--filo);
    border-left: 0;
  }
}

@media (max-width: 760px) {
  .sibilla-chat {
    grid-template-columns: minmax(0, 1fr);
  }

  .sibilla-cronologia {
    order: 3;
    border-top: 1px solid var(--filo);
    border-right: 0;
  }

  .sibilla-fonti {
    grid-column: 1;
    order: 2;
  }

  .sibilla-colonna {
    padding: 0 var(--spazio-4);
  }
}


/* ── Collaudo Valtorre, DC81 — il riquadro del padre nella scheda di un figlio ──
   Una riga sola, cliccabile, sopra la scheda: di chi è figlia questa riga. */
.riquadro-padre {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spazio-2) var(--spazio-6);
  align-items: flex-start;
  margin-bottom: var(--spazio-4);
  padding: var(--spazio-3) var(--spazio-4);
  border: 1px solid var(--colore-bordo);
  border-left: 4px solid var(--blu-ftalo);
  border-radius: var(--raggio-grande);
  background: var(--colore-superficie);
  color: inherit;
  text-decoration: none;
}

.riquadro-padre:hover {
  background: var(--velatura-chiara);
}

.riquadro-padre-nome,
.riquadro-padre-campo {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.riquadro-padre .nota-piccola {
  margin: 0;
}


/* ── Collaudo Valtorre, DC81 — la barra di comandi del registro ────────────
   Una sola (`_barra_registro.html`) per tabella, tutto schermo e calendario.
   Nella pagina normale sta su tre righe: nome e comandi, viste, filtro. A
   tutto schermo è la `riga-comandi` di DC59, coi comandi tutti a destra. */
.barra-registro:not(.riga-comandi) {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "nome comandi"
    "viste viste"
    "filtro filtro";
  gap: var(--spazio-3) var(--spazio-4);
  align-items: center;
  margin-bottom: var(--spazio-5);
}

.barra-registro-nome {
  grid-area: nome;
  display: flex;
  align-items: baseline;
  gap: var(--spazio-3);
  min-width: 0;
}

.barra-registro-nome h1 {
  margin: 0;
}

.barra-registro-viste {
  grid-area: viste;
  display: flex;
  flex-wrap: wrap;
  gap: var(--spazio-2);
}

.barra-registro:not(.riga-comandi) .barra-registro-filtro {
  grid-area: filtro;
  margin-bottom: 0;
}

.barra-registro-comandi {
  grid-area: comandi;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--spazio-2);
}

/* A tutto schermo i comandi stanno tutti a destra, «Esci» per ultimo. */
.riga-comandi .barra-registro-comandi {
  flex-wrap: nowrap;
  margin-left: auto;
}

.riga-comandi .riga-comandi-quanti {
  margin-right: 0;
}

.riga-comandi .barra-registro-viste {
  flex-wrap: nowrap;
}

.navigazione-mese-nome {
  margin: 0;
  font-size: 17px;
}

@media (max-width: 639.98px) {
  .barra-registro:not(.riga-comandi) {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "nome" "comandi" "viste" "filtro";
  }

  .barra-registro-comandi {
    justify-content: flex-start;
  }
}

.area-piena .navigazione-mese,
.area-piena .calendario-scroll {
  margin: var(--spazio-3) var(--spazio-4);
}


/* ── Collaudo Valtorre, DC82 — «Tocca a te» in cima alla scheda ─────────── */
.riquadro-tocca-a-te {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--spazio-3) var(--spazio-5);
  margin-bottom: var(--spazio-4);
  padding: var(--spazio-4);
  border: 1px solid var(--blu-ftalo);
  border-radius: var(--raggio-grande);
  background: var(--colore-selezione-sfondo);
}

.riquadro-tocca-a-te p {
  margin: 0;
}

.riquadro-tocca-a-te-titolo {
  font-size: 17px;
}

.riquadro-tocca-a-te-azioni {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spazio-2);
}


/* ── Collaudo Valtorre, DC82d — la bacheca a tutta pagina ──────────────── */
.griglia-bacheca {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--spazio-3);
  margin-bottom: var(--spazio-5);
}

.scheda-bacheca-evidenza {
  display: flex;
  flex-direction: column;
  gap: var(--spazio-2);
  color: inherit;
  text-decoration: none;
}

.scheda-bacheca-evidenza:hover {
  border-color: var(--blu-ftalo);
}

.bacheca-gruppo-titolo {
  margin: 0 0 var(--spazio-2);
  font-size: 15px;
}

.riquadro-bacheca-intera + .riquadro-bacheca-intera {
  margin-top: var(--spazio-3);
}

/* DC82c — il pannello «Modulo» sulla pagina del registro. */
.pannello-modulo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spazio-2) var(--spazio-4);
  margin-bottom: var(--spazio-4);
  padding: var(--spazio-3) var(--spazio-4);
  border: 1px solid var(--colore-bordo);
  border-radius: var(--raggio-grande);
  background: var(--colore-superficie);
  font-size: var(--testo-piccolo);
}

.pannello-modulo input[type="text"] {
  flex: 1 1 320px;
  width: auto;
  min-height: 36px;
  font-size: 13px;
}


/* ── Collaudo Valtorre, DC84 — Sibilla accanto al campo ─────────────────── */
.bollino-ia {
  display: inline-block;
  margin-left: var(--spazio-2);
  padding: 0 6px;
  border: 1px solid var(--blu-ftalo);
  border-radius: 999px;
  color: var(--blu-ftalo);
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  vertical-align: middle;
  cursor: help;
}

.avviso-mancanze-ia {
  margin: var(--spazio-2) 0 0;
  padding: var(--spazio-2) var(--spazio-3);
  border-left: 3px solid var(--blu-ftalo);
  border-radius: var(--raggio-comando);
  background: var(--colore-selezione-sfondo);
  font-size: var(--testo-piccolo);
}

.avviso-mancanze-ia .nota-piccola {
  display: block;
}

/* Il titolo di una riga figlia (ora anche composto, DC78) non si stringe a una
   parola per riga: è la colonna che si legge per prima. */
@media (min-width: 900px) {
  .tabella-figli td:first-child {
    min-width: 220px;
  }
}

/* Collaudo Valtorre (DC88): i modelli da compilare, nella scheda. */
.modelli-compilati-scelte {
  list-style: none;
  margin: var(--spazio-3) 0;
  padding: 0;
  display: grid;
  gap: var(--spazio-2);
}

/* Collaudo Valtorre (DC89): «Collegati», nella scheda. */
.rimando + .rimando {
  margin-top: var(--spazio-4);
}

.rimando-titolo {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--spazio-2);
  margin: 0 0 var(--spazio-2);
  font-size: 1rem;
}

.rimando-righe {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--spazio-1);
}

/* Collaudo Valtorre (DC90): la vista «pianificazione settimanale». Solo CSS:
   sette colonne, le barre si posano con due classi (da quale giorno, quanto
   lunghe). */
.pianifica {
  min-width: 760px;
  border: 1px solid var(--colore-bordo);
  border-radius: 8px;
  background: var(--colore-superficie);
}

.pianifica-riga {
  display: grid;
  grid-template-columns: 180px 1fr;
  border-top: 1px solid var(--colore-bordo);
}

.pianifica-testa {
  border-top: none;
  font-weight: 600;
  font-size: 0.85rem;
}

.pianifica-etichetta {
  padding: var(--spazio-2) var(--spazio-3);
  font-weight: 600;
  overflow-wrap: anywhere;
}

.pianifica-giorni {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 2px;
}

.pianifica-giorno {
  padding: var(--spazio-2);
  text-align: center;
}

.pianifica-oggi {
  background: var(--velatura);
  border-radius: 6px;
}

.pianifica-corsie {
  display: grid;
  gap: 3px;
  padding: var(--spazio-2) 0;
  background-image: repeating-linear-gradient(
    to right, transparent 0, transparent calc(100% / 7 - 1px),
    var(--colore-bordo) calc(100% / 7 - 1px), var(--colore-bordo) calc(100% / 7)
  );
}

.pianifica-barra {
  display: block;
  padding: 3px 8px;
  border-radius: 6px;
  background: var(--velatura);
  border: 1px solid var(--blu-ftalo-contorno);
  color: var(--colore-testo);
  font-size: 0.82rem;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pianifica-barra:hover,
.pianifica-barra:focus-visible {
  border-color: var(--colore-primario);
}

.pianifica-continua-prima { border-top-left-radius: 0; border-bottom-left-radius: 0; border-left-style: dashed; }
.pianifica-continua-dopo { border-top-right-radius: 0; border-bottom-right-radius: 0; border-right-style: dashed; }

.pianifica-riga-sovrapposta .pianifica-barra {
  background: var(--colore-attenzione-sfondo);
  border-color: var(--colore-attenzione);
}

.pianifica-avviso {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--colore-attenzione);
}

.pianifica-da-1 { grid-column-start: 1; }
.pianifica-da-2 { grid-column-start: 2; }
.pianifica-da-3 { grid-column-start: 3; }
.pianifica-da-4 { grid-column-start: 4; }
.pianifica-da-5 { grid-column-start: 5; }
.pianifica-da-6 { grid-column-start: 6; }
.pianifica-da-7 { grid-column-start: 7; }
.pianifica-lungo-1 { grid-column-end: span 1; }
.pianifica-lungo-2 { grid-column-end: span 2; }
.pianifica-lungo-3 { grid-column-end: span 3; }
.pianifica-lungo-4 { grid-column-end: span 4; }
.pianifica-lungo-5 { grid-column-end: span 5; }
.pianifica-lungo-6 { grid-column-end: span 6; }
.pianifica-lungo-7 { grid-column-end: span 7; }

/* Collaudo Valtorre (DC92): nel pannello delle fonti, un numero contato sui registri. */
.sibilla-numero {
  margin: 0;
  font-family: var(--carattere-titoli);
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.1;
}