/* Font del committente (passo 2b). Quattro tagli .woff2 locali in fonts/,
   percorsi relativi a questo foglio. Solo i pesi in uso, nessun italico.
   Nessuna richiesta di rete a terzi: qui, nelle schermate e nel documento di
   stampa (che ha un proprio <style> inline con font-family: sans-serif).
   Licenza SIL OFL: fonts/OFL inter.txt, fonts/OFL mont.txt.
   font-display: swap — il fallback di sistema regge il confronto verbatim
   finche' il woff2 non arriva. */
@font-face {
  font-family: Montserrat;
  src: url("fonts/montserrat-500.woff2?v=548f743") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: Montserrat;
  src: url("fonts/montserrat-700.woff2?v=548f743") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: Inter;
  src: url("fonts/inter-400.woff2?v=548f743") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: Inter;
  src: url("fonts/inter-500.woff2?v=548f743") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Grafica, G2 (M2299): palette dalle variazioni dei due colori del brand
     Nous Lab. RAINSTORM #244653 (gradino 700): titoli, bordi di enfasi, azione
     primaria piena. ANDROID #A4C639 (gradino 500): pieno solo sullo stato
     «Presente» (marcatore); le sue tinte chiare sono gli accenti di selezione e
     fuoco, le ombre scure il tono favorevole. Grigi virati verso Rainstorm.
     Ogni testo di un elemento attivo su sfondo chiaro resta almeno a 4,5:1
     (WCAG AA); i testi con opacità degli elementi inattivi o disabilitati ne
     sono esenti. */
  --rainstorm-50: #f4f6f6;
  --rainstorm-100: #e7ebec;
  --rainstorm-200: #cfd6d9;
  --rainstorm-300: #a7b5ba;
  --rainstorm-500: #506b75;
  --rainstorm: #244653;
  --rainstorm-800: #1b353e;
  --rainstorm-900: #14272e;
  --android-50: #f8faef;
  --android-100: #eff5db;
  --android-200: #dce9b4;
  --android-300: #c4da7e;
  --android: #a4c639;
  --android-700: #667b23;
  --android-800: #4f5f1b;

  /* Montserrat 500/700 per titoli/label/badge, Inter 400/500 per corpo e
     microcopy. Fallback di sistema in coda a entrambi gli stack. */
  --font-titoli: Montserrat, system-ui, -apple-system, sans-serif;
  --font-corpo: Inter, system-ui, -apple-system, sans-serif;

  --bg: #ffffff;
  --bg-alt: var(--rainstorm-50);
  --testo: var(--rainstorm-900);
  --testo-attenuato: var(--rainstorm-500);
  --bordo: var(--rainstorm-200);
  --accento: var(--rainstorm);
  --accento-bg: var(--rainstorm-100);
  --selezione-bg: var(--android-50);
  --fuoco-alone: var(--android-200);
  --ok: var(--android-800);
  --ok-bg: var(--android-100);
  --no: #a3341f;
  --no-bg: #fbeae6;
  --attesa: #8a5a12;
  --attesa-bg: #fcf0dc;
  /* Marcatori di stato_risposta: un solo inchiostro + pattern, leggibili in B/N
     (memoria rework-visivo: parziale/assente confusi in monocromia se resi a
     tinta piena). L'etichetta testuale resta il portatore del significato — il
     marcatore e' decorativo (::before, non entra nel textContent). Inchiostro =
     RAINSTORM; «Presente» = ANDROID pieno. */
  --marcatore-ink: var(--rainstorm);
  --marcatore-pieno: var(--android);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-corpo);
  color: var(--testo);
  background: var(--bg);
  line-height: 1.5;
}

/* Titoli in RAINSTORM (identita' committente). I titolini funzionali che
   dichiarano gia' un colore proprio — .pannello h2 (etichetta piccola
   maiuscola, --testo-attenuato) — restano tali per specificita'. */
h1, h2, h3, h4 { color: var(--rainstorm); font-family: var(--font-titoli); }

/* B87 — shell a quattro righe. Quinto collaudo esterno, lotto 2b (M2383;
   domanda 5 sul piano di dettaglio): la testata è una riga sola da 1024 px,
   logo, sottotitolo e versione a sinistra, comandi a destra; sotto i 1024 px
   i comandi vanno a capo su una seconda riga. Stepper e menu «Sezione» (barra
   delle fasi), barra e contatore (barra fissa in basso) si montano in
   #contenuto perché dipendono dallo stato. */
header.app {
  display: flex;
  align-items: center;
  gap: 0.4rem 0.6rem;
  padding: 0.5rem 1rem;
  border-bottom: 1px solid var(--bordo);
  background: var(--bg-alt);
  position: sticky;
  top: 0;
  z-index: 10;
}
@media (max-width: 1023px) {
  header.app { flex-wrap: wrap; }
  header.app .strumenti { flex-basis: 100%; }
}

header.app h1 {
  font-size: 1rem;
  font-weight: 600;
  margin: 0;
}
/* Grafica, G7 (M2300): il logo orizzontale al posto visivo della scritta;
   «EMAS Map» resta testo dell'h1 (.visually-hidden) per i lettori di schermo. */
header.app h1 .logo-testata { display: block; height: 32px; width: auto; }

header.app .sottotitolo {
  font-family: var(--font-titoli);
  font-weight: 500;
  font-size: 0.85rem;
  color: var(--testo);
  white-space: nowrap;
}

header.app .versione {
  color: var(--testo-attenuato);
  font-size: 0.8rem;
}

/* Passo 5.0e: «Salva sessione» e «Carica sessione» in r1, accanto al titolo. */
header.app .strumenti {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
  margin-left: auto;
}
/* Lotto 2b (M2383): comandi della testata compatti, perché stiano nella riga
   anche col comando di cancellazione del salvataggio nel browser. */
header.app .strumenti button { font-size: 0.8rem; padding: 0.3rem 0.55rem; }

/* Quinto collaudo esterno, lotto 1c (M2389; T9). Lotto 2b (domanda 4 sul
   piano di dettaglio): la nota del salvataggio nel browser non sta nella riga
   della testata e va in una tendina con le regole di quella del file di
   sessione (G1, G2); il pannello è lo stesso, sotto. */
/* Passo 6, L9-a (M417): la nota del file di lavoro accanto ai comandi di
   sessione. Grafica, G1 (M2298, M2303): in una tendina; il titolo è un link
   testuale, il pannello si sovrappone alla pagina, ancorato a header.app
   (sticky, quindi posizionato) e non al <details>: la testata non cambia
   altezza e a schermo stretto il pannello non esce dalla finestra. */
header.app .nota-sessione summary {
  list-style: none;
  cursor: pointer;
  font-family: var(--font-corpo);
  font-size: 0.78rem;
  color: var(--rainstorm);
  text-decoration: underline;
  text-underline-offset: 0.15em;
  white-space: nowrap;
}
header.app .nota-sessione summary::-webkit-details-marker { display: none; }
header.app .nota-sessione summary:focus-visible { outline: 2px solid var(--rainstorm); outline-offset: 2px; box-shadow: 0 0 0 5px var(--fuoco-alone); }
header.app .nota-file-di-lavoro, header.app .nota-dati-browser {
  position: absolute;
  top: calc(100% + 0.25rem);
  right: 1.25rem;
  width: min(26rem, calc(100vw - 2.5rem));
  box-sizing: border-box;
  margin: 0;
  padding: 0.75rem 0.9rem;
  background: var(--bg);
  border: 1px solid var(--bordo);
  border-radius: 6px;
  box-shadow: 0 6px 20px rgba(36, 70, 83, 0.12);
  font-size: 0.8rem;
  line-height: 1.45;
  color: var(--testo);
  /* Grafica, G2 (M2309): mai più alto dello spazio sotto la testata; oltre,
     scorre. */
  max-height: calc(100vh - var(--altezza-testata, 4rem) - var(--altezza-barra, 0px) - 1rem);
  overflow-y: auto;
}

/* r3 + r4: stepper delle fasi e contatore di fase. Montati in testa a
   #contenuto da disegnaShell. Stato corrente marcato anche in monocromia
   (grassetto + segno ▸), fasi non raggiunte inattive. */
/* Lotto 2b (M2380): la barra delle fasi si ferma sotto la testata; a destra
   il menu «Sezione». Barra e contatore sono nella barra fissa in basso. */
.shell {
  max-width: 1100px;
  margin: 0 auto 1.25rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--bordo);
  position: sticky;
  top: var(--altezza-testata, 4rem);
  z-index: 8;
  background: var(--bg);
}
main > .shell:first-child { margin-top: -1.5rem; }
.shell-fasi { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem 1.5rem; flex-wrap: wrap; }
.shell-fasi .shell-stepper { margin: 0; }
.shell-sezione:empty { display: none; }
.menu-sezione { position: relative; }
.menu-sezione-pulsante { display: flex; align-items: center; gap: 0.6rem; font-size: 0.82rem; text-align: left; }
.menu-sezione-etichetta { color: var(--testo-attenuato); }
.menu-sezione-segno::after { content: ""; display: inline-block; width: 0.45rem; height: 0.45rem; border-right: 1.5px solid var(--rainstorm); border-bottom: 1.5px solid var(--rainstorm); transform: translateY(-0.15rem) rotate(45deg); }
.menu-sezione-pulsante[aria-expanded="true"] .menu-sezione-segno::after { transform: translateY(0.1rem) rotate(-135deg); }
.menu-sezione-elenco { position: absolute; right: 0; top: calc(100% + 0.25rem); z-index: 11; width: max-content; max-width: min(30rem, calc(100vw - 2rem)); max-height: calc(100vh - var(--altezza-testata, 4rem) - var(--altezza-fasi, 0px) - var(--altezza-barra, 0px) - 1rem); overflow-y: auto; list-style: none; margin: 0; padding: 0.4rem; background: var(--bg); border: 1px solid var(--bordo); border-radius: 8px; box-shadow: 0 6px 20px rgba(36, 70, 83, 0.12); display: flex; flex-direction: column; gap: 0.15rem; }
.menu-sezione-elenco[hidden] { display: none; }
.menu-sezione-voce { width: 100%; text-align: left; border: 0; background: transparent; font-size: 0.85rem; }
.menu-sezione-voce:hover:not(:disabled) { background: var(--bg-alt); }
.menu-sezione-voce[aria-current="true"] { font-weight: 600; box-shadow: inset 3px 0 0 var(--accento); }
.shell-stepper {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.1rem;
  margin: 0 0 0.7rem;
  font-size: 0.82rem;
}
.shell-stepper .tappa { color: var(--testo-attenuato); }
.shell-stepper .tappa[aria-disabled="true"] { opacity: 0.55; }
.shell-stepper .tappa-corrente {
  color: var(--rainstorm);
  font-weight: 700;
}
.shell-stepper .tappa-segno { font-weight: 700; }
/* Passo 6, L10-a (M082, M162): le fasi precedenti alla corrente sono pulsanti. */
.shell-stepper button.tappa-raggiunta { font: inherit; color: var(--testo-attenuato); background: none; border: 0; padding: 0; text-decoration: underline; cursor: pointer; }
.shell-stepper button.tappa-raggiunta:focus-visible { outline: 2px solid var(--rainstorm); outline-offset: 2px; box-shadow: 0 0 0 5px var(--fuoco-alone); }
.shell-progress { display: flex; flex-direction: column; gap: 0.3rem; }
.shell-barra {
  height: 3px;
  background: var(--bordo);
  border-radius: 2px;
  overflow: hidden;
}
.shell-barra-riempimento {
  height: 100%;
  background: var(--rainstorm);
}
.shell-conteggio { font-size: 0.8rem; color: var(--testo-attenuato); }

button, input[type="file"]::file-selector-button {
  font: inherit;
  border: 1px solid var(--bordo);
  background: var(--bg);
  color: var(--testo);
  padding: 0.4rem 0.75rem;
  border-radius: 6px;
  cursor: pointer;
}

button.primario {
  background: var(--accento);
  border-color: var(--accento);
  color: white;
}
button.primario:hover:not(:disabled) { background: var(--rainstorm-800); border-color: var(--rainstorm-800); }
button.primario.contorno:hover:not(:disabled) { background: var(--rainstorm-50); border-color: var(--accento); }
/* Grafica, G2 (M2299, domanda 4 sul piano): un solo anello di fuoco, Rainstorm
   con alone verde chiaro, su pulsanti, campi, link e riquadri apribili. Il radio
   della radio-card no: il fuoco lo mostra la card. */
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, a:focus-visible, summary:focus-visible, header.app .nota-file-di-lavoro:focus-visible, header.app .nota-dati-browser:focus-visible { outline: 2px solid var(--rainstorm); outline-offset: 2px; box-shadow: 0 0 0 5px var(--fuoco-alone); }
.radio-card input:focus-visible { outline: none; box-shadow: none; }
/* Grafica, G3 (M2323): la card senza controlli che prende il fuoco dopo
   «Conferma» (emas-render-schema.mjs, tabIndex -1) mostra lo stesso anello. */
.requisito:focus-visible { outline: 2px solid var(--rainstorm); outline-offset: 2px; box-shadow: 0 0 0 5px var(--fuoco-alone); }
/* Azione RAINSTORM di contorno: stesso peso visivo, riempimento vuoto. */
button.primario.contorno {
  background: transparent;
  color: var(--accento);
}

button:disabled { opacity: 0.5; cursor: not-allowed; }

main { max-width: 1100px; margin: 0 auto; padding: 1.5rem; padding-bottom: calc(var(--altezza-barra, 0px) + 1.5rem); }
/* Grafica, G4 (M2197, domanda 2 sul piano): un controllo che prende il fuoco
   sotto la testata fissa scorre fuori. Solo sul contenuto: sulla pagina intera
   (scroll-padding-top) il fuoco su «Salva sessione» la farebbe saltare in cima
   (referti/sonda-fuoco-testata-g4.uscita.txt). */
/* Grafica, G6 (M2342): con specificità zero, così sulle bande dell'esito
   decide la loro regola (M2187). Oltre gli 800 px l'indice dell'esito è fermo
   sotto la testata: i suoi link col fuoco non devono far scorrere la pagina. */
/* Lotto 2b (E10 della revisione del piano di dettaglio): stessa forma per la
   barra delle fasi, che si ferma sotto la testata, e per la barra fissa in
   basso (scroll-margin-bottom), mai scroll-padding sulla pagina. */
:where(#contenuto *) { scroll-margin-top: calc(var(--altezza-testata, 4rem) + var(--altezza-fasi, 0px) + 0.75rem); scroll-margin-bottom: calc(var(--altezza-barra, 0px) + 0.75rem); }
@media (min-width: 801px) { .esito-indice a { scroll-margin-top: 0; } }

/* Schermata di confine */
/* meta.confine.testo_blocco_1 / testo_utente / testo_utente_chiusura portano
   paragrafi separati da riga vuota (\n\n): pre-line li rende senza spezzare il
   confronto carattere-per-carattere fra il testo mostrato e il campo del
   dataset (nessun tag <p> aggiuntivo). */
.testo-utente, .testo-utente-chiusura, .testo-strumento, .perimetro-soggetti { white-space: pre-line; }
.confine .testo-utente, .confine .testo-utente-chiusura, .confine .testo-strumento, .confine .perimetro-soggetti { font-size: 1.05rem; max-width: 60ch; }
.confine ul.aree { padding-left: 1.25rem; }
.confine ul.aree li { margin: 0.4rem 0; }
.confine .accettazione {
  margin-top: 1.5rem;
  padding: 1rem;
  border: 1px solid var(--bordo);
  border-radius: 8px;
  background: var(--bg-alt);
}
.confine .accettazione label { display: flex; gap: 0.6rem; align-items: flex-start; }
.confine .accettazione button { margin-top: 1rem; }

/* B87 — Schermo 1: ingresso. La sola decisione ISO 14001 (sistema_gestione
   di P-11) in una card composta da disegnaIngresso. È layout, non palette:
   riusa --rainstorm (azione/stato attivo), nessun colore nuovo. */
.card-ingresso {
  max-width: 880px;
  margin: 1.5rem 0 0;
  padding: 1.5rem;
  background: var(--bg);
  border: 1px solid var(--bordo);
  border-radius: 10px;
  box-shadow: 0 1px 2px rgba(36, 70, 83, 0.06);
}
.card-eyebrow {
  margin: 0 0 0.5rem;
  font-family: var(--font-titoli);
  font-weight: 600;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--testo-attenuato);
}
.card-domanda {
  margin: 0 0 0.75rem;
  color: var(--testo);
  font-size: 1.15rem;
  line-height: 1.35;
}
.card-ingresso .nota-utente { margin: 0 0 1.1rem; }
.card-controlli { margin: 0 0 1.25rem; }

/* Nome accessibile fuori dal flusso visivo: 1px + clip-path, MAI display:none
   (che lo toglierebbe anche all'albero di accessibilità). Usato dal <legend>
   del gruppo di radio-card, ridondante a vista con la domanda della card. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Passo 6, L5, primo gruppo (M147, R24): l'attributo hidden vince su ogni
   regola di display del foglio — .campo-nota { display: block } mostrava la
   nota «obbligatoria» prima della scelta. */
[hidden] { display: none !important; }

/* Radio-card (campoFoglia, enum con spec.descrizioni): etichetta in grassetto
   + descrizione su riga secondaria. Selezione = bordo marcato + segno di
   spunta (::after), mai il solo colore — regge in stampa monocroma.
   Il gruppo è un <fieldset>: si azzerano bordo/margine/padding di default e
   min-inline-size (che altrimenti spinge il contenuto oltre il contenitore). */
.radio-card-gruppo { display: flex; flex-direction: column; gap: 0.6rem; border: 0; margin: 0; padding: 0; min-width: 0; }
.radio-card {
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
  padding: 0.85rem 1rem;
  border: 1px solid var(--bordo);
  border-radius: 8px;
  cursor: pointer;
}
.radio-card input[type="radio"] { margin: 0.15rem 0 0; accent-color: var(--rainstorm); }
.radio-card .rc-testi { display: flex; flex-direction: column; gap: 0.15rem; }
.radio-card .rc-etichetta { font-family: var(--font-titoli); font-weight: 600; color: var(--testo); }
.radio-card .rc-descrizione { font-size: 0.88rem; color: var(--testo-attenuato); line-height: 1.4; }
/* Correzione di P-01 (L7, M1515): descrizioni a parti. La citazione alla lettera
   rientrata con filetto e a capo conservati; la fonte sotto, come .pc-riferimento. */
.radio-card .rc-descrizione > span { display: block; }
.radio-card .rc-citazione { border-left: 2px solid var(--testo-attenuato); padding-left: 0.6rem; margin: 0.2rem 0 0; white-space: pre-line; }
.radio-card .rc-fonte { padding-left: 0.6rem; margin: 0 0 0.2rem; color: var(--testo-attenuato); line-height: 1.45; }
.radio-card:hover { border-color: var(--rainstorm); }
/* Focus da tastiera visibile a livello di card (le frecce spostano il radio
   nativo dentro il gruppo): non solo l'anello del radio. */
.radio-card:has(input:focus-visible) { outline: 2px solid var(--rainstorm); outline-offset: 2px; box-shadow: 0 0 0 5px var(--fuoco-alone); }
.radio-card:has(input:checked) {
  background: var(--selezione-bg);
  border-color: var(--rainstorm);
  border-width: 2px;
  padding: calc(0.85rem - 1px) calc(1rem - 1px);
}
.radio-card:has(input:checked) .rc-testi { position: relative; padding-right: 1.5rem; }
.radio-card:has(input:checked) .rc-testi::after {
  content: "✓";
  position: absolute;
  top: 0;
  right: 0;
  font-weight: 700;
  color: var(--rainstorm);
}

/* v0.93, B132: il callout «Dove verificare» (sfondo tenue, bordo sinistro,
   icona) è rimosso come blocco a parte — evidenza_attesa è ora un paragrafo
   .nota-campo come le altre note di campo (emas-render-schema.mjs,
   evidenzaAttesaTesto). La regola sotto è la sola aggiunta: le regole
   .nota-campo esistenti sono tutte scoped sotto .campo, e questo paragrafo
   vive fuori da un .campo (accanto ai controlli, non dentro uno di essi) —
   stessi valori della regola .campo .nota-campo più sotto (specificità
   maggiore: dove un .campo c'è, resta lei a decidere), non una scelta
   tipografica nuova — solo la stessa resa dov'è mancato l'antenato .campo
   che la portasse. */
.nota-campo { font-size: 0.78rem; color: var(--testo-attenuato); margin: 0 0 0.3rem; }

/* «Perché te lo chiediamo»: id nodo + riferimento normativo, fuori dal flusso
   principale. Chiuso di default, tipografia distinta dal corpo. */
.perche-chiediamo {
  margin: 0;
  padding-top: 0.9rem;
  border-top: 1px solid var(--bordo);
  font-size: 0.85rem;
}
.perche-chiediamo > summary {
  cursor: pointer;
  font-family: var(--font-titoli);
  font-weight: 600;
  color: var(--testo-attenuato);
}
.perche-chiediamo .pc-id {
  margin: 0.6rem 0 0.2rem;
  font-family: var(--font-titoli);
  font-weight: 700;
  letter-spacing: 0.02em;
}
.perche-chiediamo .pc-riferimento { margin: 0; color: var(--testo-attenuato); line-height: 1.45; }
/* Fonti aggiuntive (P-05): stesso blocco, rientrate sotto il riferimento
   primario, non un secondo pattern. Ogni fonte con un documento nel registro
   porta accanto la propria data di verifica (per fonte, mai aggregata). */
.perche-chiediamo .pc-fonte { margin: 0.35rem 0 0; padding-left: 0.9rem; color: var(--testo-attenuato); line-height: 1.45; border-left: 2px solid var(--bordo); }
.perche-chiediamo .pc-fonte-data { color: var(--testo-attenuato); font-style: italic; white-space: nowrap; }

/* Passo 6, L5, primo gruppo (M079, R4): titolo «Dove trovi il dato» sopra il
   paragrafo di evidenza_attesa — stessa tipografia di .card-sezione-titolo,
   un gradino più piccolo. */
.evidenza-attesa-titolo { margin: 0.75rem 0 0.3rem; font-family: var(--font-titoli); font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--testo-attenuato); }

/* Passo 6, L5, primo gruppo (M149, R32): marcatura della cogenza sopra la
   domanda (oggi solo «Raccomandazione»). */
.marcatura-cogenza { display: inline-block; margin: 0 0 0.5rem; padding: 0.1rem 0.55rem; border: 1px solid var(--bordo); border-radius: 999px; font-family: var(--font-titoli); font-size: 0.75rem; font-weight: 600; color: var(--testo-attenuato); }

/* Barra di navigazione della card: allineata ai margini della card, non a
   filo pagina. */
.barra-navigazione-card { max-width: 880px; }

/* B88 — Schermo 2: profilo e perimetro, questionario guidato (una domanda per
   schermata). Riusa la griglia .una-domanda-griglia (corpo autoritativo +
   colonna laterale coi pannelli live). */
.cancello-una-domanda .passo-corrente { min-width: 0; }

/* Telaio comune del cancello (B97): tre sotto-blocchi impilati (card quesito,
   sezione risposta, sezione stato), stessa griglia sulle nove schermate
   applicabili — .card-domanda-singola è ora solo il contenitore che li
   allinea, data-id porta l'id del requisito (letto dagli helper e2e, non dal
   DOM interno). */
.card-domanda-singola { max-width: 880px; margin: 0; display: flex; flex-direction: column; gap: 1.25rem; }

/* 1. Card quesito: dominante — peso tipografico e spaziatura maggiori di ogni
   altro blocco della schermata. */
.card-quesito {
  padding: 1.75rem;
  background: var(--bg);
  border: 1px solid var(--bordo);
  border-radius: 10px;
  box-shadow: 0 1px 2px rgba(36, 70, 83, 0.06);
}
.card-quesito .card-domanda { margin: 0 0 0.85rem; color: var(--testo); font-size: 1.3rem; line-height: 1.3; }

/* 2/3. Sezioni sotto la card quesito: peso minore, stesso trattamento dei
   pannelli laterali (.pannello h2) per il titolo — la card quesito resta
   l'unico blocco dominante. */
.card-sezione { padding: 1.1rem 1.25rem; border: 1px solid var(--bordo); border-radius: 8px; background: var(--bg-alt); }
.card-sezione-titolo { margin: 0 0 0.75rem; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--testo-attenuato); }
/* Sezione stato: il controllo non è un quarto campo del modulo — azzera lo
   stacco interno di .campo-stato, la sezione fa già da contenitore. */
.card-sezione-stato .campo-stato { margin-top: 0; padding-top: 0; border-top: 0; }
/* Etichetta di campo (identifica) e microistruzione (come si compila) con
   gerarchia distinta — la label più marcata, la nota più tenue e minuta. */
.card-domanda-singola .campo > label { font-family: var(--font-titoli); font-weight: 700; color: var(--testo); font-size: 0.85rem; }
.card-domanda-singola .campo .nota-campo { font-size: 0.78rem; color: var(--testo-attenuato); font-style: italic; }
.card-domanda-singola .campo input[type="text"] { width: 100%; max-width: 32rem; }
/* Collaudo esterno, P5 (M2276; decisione sul piano 7): i campi numerici sono
   campi di testo; restano larghi come il controllo numerico di prima. Dopo la
   regola sopra, stessa specificità. */
.card-domanda-singola .campo input.campo-numero { width: auto; }

/* Nota esplicativa dello stato (B97, sezione 3): def.criterio_generale.
   B100: nel cancello vive dentro .guida-stati, in coda alla legenda dei
   quattro stati — non più fra la legenda e il campo nota (quest'ultimo è
   ora fuori dal <details>, sempre visibile). B99 (v0.90): def.nota_verificatore
   rimossa dal dataset — il paragrafo .legenda-verificatore che criterio_
   generale precedeva non si rende più. */
.nota-esplicativa-stato { margin: 0.6rem 0 0; }
.nota-esplicativa-stato .criterio-generale { font-size: 0.85rem; margin: 0; white-space: pre-line; color: var(--testo); }

/* Guida ai quattro stati (B100, estesa in B102): dentro campoStatoRisposta
   quando opzioni.guidaComprimibile è vero — sia il cancello
   (disegnaCardPerimetro) sia renderRequisito (sistema/evidenze/presentazione,
   telaio diviso) lo passano. <details> chiuso di default, stesso non-meccanismo
   di persistenza di .perche-chiediamo
   (nessun 'open' impostato, nessuno stato di sessione: un ridisegno lo
   richiude sempre). Intestazione su una riga (summary in flex,
   space-between): etichetta + le quattro etichette del dataset a sinistra,
   comando «Mostra guida» a destra. Tipografia sommessa come .perche-
   chiediamo — la card non deve competere con .card-quesito. */
.guida-stati {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--bordo);
  font-size: 0.82rem;
}
.guida-stati summary {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.6rem;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-titoli);
  font-weight: 600;
  color: var(--testo-attenuato);
}
.guida-stati summary::-webkit-details-marker { display: none; }
.guida-stati[open] summary { margin-bottom: 0.6rem; }
.guida-stati-titolo::before { content: "\24D8"; margin-right: 0.35rem; color: var(--rainstorm); }
.guida-stati-cta { flex-shrink: 0; }
.guida-stati-cta::after { content: " \25BE"; }
.guida-stati .stato-definizioni { margin-top: 0; }

/* P-02 — elenco dei siti (B88, sezione B). Ogni sito è un blocco su più righe,
   non una riga compressa: intestazione «Sito N» + rimozione secondaria, poi i
   campi. La larghezza deriva dal tipo dichiarato: 'testo' nudo = riga intera
   (.sito-campo-largo), campo tipizzato = colonna stretta (.sito-campo-stretto)
   che si affianca al successivo. */
.lista-siti { display: flex; flex-direction: column; gap: 1rem; }
.lista-siti-elenco { display: flex; flex-direction: column; gap: 0.75rem; }
.lista-siti-barra { display: flex; align-items: baseline; gap: 0.75rem; flex-wrap: wrap; }
.lista-siti-conteggio { font-size: 0.8rem; color: var(--testo-attenuato); }
.lista-siti .avviso-vuoto { margin: 0; }

.sito-blocco {
  border: 1px solid var(--bordo);
  border-radius: 8px;
  background: var(--bg-alt);
  padding: 0.9rem 1rem;
}
.sito-testa { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-bottom: 0.75rem; }
.sito-titolo { font-family: var(--font-titoli); font-weight: 600; font-size: 0.9rem; color: var(--testo); }
/* Rimozione: azione secondaria, non un pulsante di pari peso rispetto ad
   «Aggiungi». */
.sito-rimuovi {
  background: none;
  border: none;
  padding: 0.2rem 0;
  font-size: 0.8rem;
  color: var(--testo-attenuato);
  text-decoration: underline;
  cursor: pointer;
}
.sito-rimuovi:hover { color: var(--testo); }

.sito-campi { display: flex; flex-wrap: wrap; gap: 0.75rem 1rem; }
.sito-campo { display: flex; flex-direction: column; gap: 0.3rem; }
.sito-campo > label { font-size: 0.75rem; color: var(--testo-attenuato); }
.sito-campo-largo { flex: 1 1 100%; }
.sito-campo-largo input[type="text"] { width: 100%; }
.sito-campo-stretto { flex: 0 1 auto; }
.sito-campo-stretto input[type="text"] { min-width: 8rem; }

/* Nota facoltativa (B88, sezione F): etichetta esplicita sopra il campo, non
   affidata al solo segnaposto. Controllo condiviso da ogni fase. */
.campo-nota { display: block; margin-top: 0.75rem; }
.campo-nota-etichetta { display: block; font-size: 0.75rem; color: var(--testo-attenuato); margin-bottom: 0.3rem; }
.campo-nota input[type="text"] { display: block; width: 100%; max-width: 28rem; margin: 0; }

.perimetro-chiusura { display: flex; flex-direction: column; gap: 1.25rem; }
.perimetro-gate { margin-top: 0; padding: 1rem; border: 1px solid var(--rainstorm); border-radius: 8px; background: var(--bg-alt); }
/* A55/A1: spiegazione per condizione di gate1 non superato — stessa tonalità
   di .motivazione-obbligatoria (var(--attesa)): non è
   un errore bloccante nuovo, è lo stesso «manca ancora qualcosa». */
.perimetro-gate-spiegazione { list-style: none; margin: 0.75rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; }
.perimetro-gate-spiegazione:empty { display: none; }
.perimetro-gate-spiegazione li { background: var(--attesa-bg); color: var(--attesa); border-radius: 6px; padding: 0.5rem 0.7rem; font-size: 0.85rem; }

.requisito {
  border: 1px solid var(--bordo);
  border-radius: 8px;
  padding: 1rem;
  background: var(--bg);
}
.requisito h3 { margin: 0 0 0.3rem; font-size: 0.95rem; }
/* opzioni.telaioDiviso (renderRequisito, perimetro-in-fase-sistema, secondo
   turno): quando il primo figlio è .card-quesito, .requisito porta già i tre
   sotto-blocchi bordati del Perimetro al suo interno — la propria cornice
   diventerebbe una quarta, mai presente in .card-domanda-singola. Stessa
   riduzione a puro contenitore flex, stesso gap: nessuna classe nuova, il
   telaio piatto di P-11 (nessun .card-quesito come figlio) resta invariato. */
.requisito:has(> .card-quesito) {
  border: 0;
  padding: 0;
  background: transparent;
  max-width: 880px;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.campo { margin-top: 0.75rem; }
.campo > label { display: block; font-size: 0.8rem; font-weight: 600; color: var(--testo-attenuato); margin-bottom: 0.3rem; }
.campo .nota-campo { font-size: 0.78rem; color: var(--testo-attenuato); margin: 0 0 0.3rem; }
.campo .aiuto-espandibile { margin: 0.3rem 0; }
.campo .aiuto-espandibile summary { color: var(--testo-attenuato); font-size: 0.78rem; cursor: pointer; }
.campo .aiuto-espandibile .nota-campo { margin: 0.3rem 0 0; }

select, input[type="text"] {
  font: inherit;
  padding: 0.4rem 0.5rem;
  border: 1px solid var(--bordo);
  border-radius: 6px;
  min-width: 14rem;
  background: var(--bg);
  color: var(--testo);
}
/* Grafica, G6 (M2343): un menu è largo quanto la sua opzione più lunga; non
   oltre il suo contenitore. Solo i menu: i campi di testo hanno già i loro
   limiti (.codici-input, campi delle card). */
select { max-width: 100%; }
/* Solo sui telefoni più stretti (sotto i 360 px) il minimo di 14rem non
   supera la card. Computer e tablet sono il riferimento della grafica
   (decisione di Bruno dopo la revisione di G6): lì i campi restano come prima. */
@media (max-width: 359px) { select, input[type="text"] { min-width: min(14rem, 100%); } }
/* B90 (addizione 1): valore salvato che non è più un'opzione valida dell'enum —
   mostrato e segnalato, non silenziosamente perso. Il <select> col valore
   orfano selezionato prende un bordo d'allarme. */
select:has(option.opzione-non-riconosciuta:checked) { border-color: var(--no); }
option.opzione-non-riconosciuta { color: var(--no); font-style: italic; }

.booleano { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; }
/* Passo 7, chiusura-3 (M917): il Sì/No è un <fieldset>; via bordo, margine e padding di default. */
fieldset.booleano { border: 0; margin: 0; padding: 0; min-width: 0; }
.booleano label { display: flex; align-items: center; gap: 0.3rem; font-weight: normal; }

.lista-righe .riga {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: flex-end;
  padding: 0.6rem;
  border: 1px solid var(--bordo);
  border-radius: 6px;
  margin-bottom: 0.5rem;
  background: var(--bg-alt);
}
.lista-righe .sotto-campo label { display: block; font-size: 0.75rem; color: var(--testo-attenuato); }
.lista-righe button.rimuovi { align-self: center; }
.lista-righe button.aggiungi { margin-top: 0.25rem; }

/* Passo 6, L5, terzo gruppo, 3b (M139, M108): codici scelti da un elenco di
   normativa/ (campoCodici) — valori aggiunti, campo, avvisi. */
.codici { display: flex; flex-direction: column; gap: 0.35rem; }
.codici-valori { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.codici-valore { display: flex; align-items: center; gap: 0.4rem; padding: 0.15rem 0.5rem; border: 1px solid var(--bordo); border-radius: 6px; background: var(--bg-alt); }
.codici-input { max-width: 28rem; }
.codici-avviso, .codici-non-considerati { margin: 0; font-size: 0.85rem; color: var(--no); }

.sottoinsieme { display: flex; flex-direction: column; gap: 0.3rem; }
.voce-sottoinsieme { display: flex; align-items: center; gap: 0.5rem; font-weight: normal; }
.avviso-vuoto { color: var(--testo-attenuato); font-size: 0.85rem; font-style: italic; }

.campo-stato { margin-top: 1rem; padding-top: 0.75rem; border-top: 1px dashed var(--bordo); }
/* Passo 6, L5, secondo gruppo (M091): l'etichetta dei calcolati non è un <label>, stesso aspetto. */
.campo-stato > label, .campo-stato > .etichetta-stato-calcolato { display: block; margin-top: 0; font-size: 0.8rem; font-weight: 600; color: var(--testo-attenuato); margin-bottom: 0.4rem; }
.campo-stato input[type="text"] { display: block; margin-top: 0.75rem; width: 100%; max-width: 28rem; }

/* B88 — controllo di stato: quattro opzioni segmentate a tocco ampio.
   L'etichetta testuale (.segmento-etichetta) è sempre visibile e resta il
   portatore del significato; il marcatore a trama (::before via marcatore-<v>,
   un solo inchiostro) distingue gli stati anche in stampa monocroma. Il radio
   nativo resta nel DOM (name condiviso -> frecce fra le opzioni), nascosto con
   .visually-hidden. Selezione = bordo marcato + sfondo tenue, mai il solo
   colore; il verde pieno sta su «Presente» (dentro il marcatore); la
   selezione usa la sua tinta chiara, --selezione-bg (G2, M2299). */
.stato-controllo { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; }
.stato-segmenti { display: flex; flex-wrap: wrap; gap: 0; border: 1px solid var(--bordo); border-radius: 8px; overflow: hidden; }
.stato-segmenti .segmento {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.55rem 0.9rem;
  font-size: 0.88rem;
  cursor: pointer;
  border-left: 1px solid var(--bordo);
}
.stato-segmenti .segmento:first-child { border-left: 0; }
.stato-segmenti .segmento:hover { background: var(--bg-alt); }
.stato-segmenti .segmento:has(input:focus-visible) { outline: 2px solid var(--rainstorm); outline-offset: -2px; }
.stato-segmenti .segmento:has(input:checked) {
  background: var(--selezione-bg);
  box-shadow: inset 0 0 0 2px var(--rainstorm);
}
.stato-segmenti .segmento-etichetta { font-family: var(--font-titoli); font-weight: 600; color: var(--testo); }
.stato-controllo .annulla-risposta {
  font-size: 0.8rem;
  background: none;
  border: none;
  color: var(--testo-attenuato);
  text-decoration: underline;
  cursor: pointer;
  padding: 0.25rem 0;
}
.stato-controllo .annulla-risposta:disabled { text-decoration: none; cursor: not-allowed; opacity: 0.6; }

/* Definizioni dei quattro stati (meta.definizioni_stato_risposta.valori), rese
   sotto il controllo: contenuto metodologico dal dataset, non riscritto qui. */
.stato-definizioni { margin: 0.75rem 0 0; display: grid; grid-template-columns: auto 1fr; gap: 0.15rem 0.6rem; font-size: 0.8rem; }
.stato-definizioni dt { font-weight: 600; color: var(--testo); white-space: nowrap; }
.stato-definizioni dd { margin: 0; color: var(--testo-attenuato); }

@media (max-width: 560px) {
  .stato-segmenti { flex-direction: column; width: 100%; }
  .stato-segmenti .segmento { border-left: 0; border-top: 1px solid var(--bordo); }
  .stato-segmenti .segmento:first-child { border-top: 0; }
  .stato-definizioni { grid-template-columns: minmax(0, 1fr); }
  .stato-definizioni dt { margin-top: 0.4rem; }
}

.sotto-domande { margin-top: 1rem; padding-top: 0.75rem; border-top: 1px dashed var(--bordo); }
/* Passo 6, L5, primo gruppo (M148, R15): etichetta a larghezza flessibile,
   controlli in una colonna propria, nota sotto su tutta la riga — un'etichetta
   lunga (E5-03) non manda più a capo il gruppo dei controlli. Sotto i 560px,
   la soglia a cui .stato-segmenti passa a colonna, una colonna sola. */
.sotto-domanda-riga { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0.5rem 0.75rem; padding: 0.35rem 0; }
.sotto-domanda-riga > .campo-nota { grid-column: 1 / -1; }
@media (max-width: 560px) {
  .sotto-domanda-riga { grid-template-columns: minmax(0, 1fr); }
}
.sotto-domanda-riga .voce-testo { font-size: 0.88rem; }
.riepilogo-aggregato { margin-top: 0.5rem; font-size: 0.82rem; color: var(--testo-attenuato); font-style: italic; }

.gruppo-rinvio { border: 1px solid var(--accento); border-radius: 8px; padding: 1rem; background: var(--accento-bg); margin-bottom: 0; }
.gruppo-rinvio .requisito { border: none; background: transparent; padding: 0; }
.gruppo-collegato { margin-top: 1rem; padding-left: 1rem; border-left: 3px solid var(--bordo); display: flex; flex-direction: column; gap: 1.25rem; }
.gruppo-collassato { padding: 0.6rem; background: var(--attesa-bg); border-radius: 6px; font-size: 0.85rem; color: var(--attesa); }
.gruppo-collassato button { margin-left: 0.5rem; }

.blocco-titolo { font-size: 1.05rem; font-weight: 600; margin: 1.75rem 0 0.75rem; }
.blocco-titolo:first-child { margin-top: 0; }
/* v0.72, B74: evidenza attesa condivisa dall'intera sezione (meta.blocchi[].
   evidenza_attesa_sezione) — resa una sola volta, sotto il titolo del blocco. */
.evidenza-attesa-sezione { color: var(--testo-attenuato); font-size: 0.85rem; font-style: italic; margin: -0.4rem 0 1rem; }
/* B102 (terzo turno): req.sottotitolo (E6-01/E6-02) non aveva mai una regola
   propria — solo il tag h4 e il reset globale 'h1,h2,h3,h4{color,font-family}'
   la stilavano, per accidente del tag, non per una scelta di scala. Scoped a
   .passo-corrente (il corpo della fase), non a .sottotitolo nudo: non deve
   raggiungere header.app .sottotitolo (l'etichetta "Valutazione preliminare"),
   un elemento diverso che condivide solo il nome di classe. Valori presi
   verbatim da .card-eyebrow (sopra): stesso ruolo strutturale, un'etichetta
   corta subito sopra la domanda — qui sopra la domanda del requisito invece
   che sopra quella di P-11 in disegnaIngresso. */
.passo-corrente .sottotitolo {
  margin: 0 0 0.5rem;
  font-family: var(--font-titoli);
  font-weight: 600;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--testo-attenuato);
}

/* v0.72, B74: avviso non bloccante e chiudibile all'import — una risposta
   caricata riguardava un requisito non più nel dataset (meta.migrazioni_
   requisiti_rimossi). Variante --accento/--accento-bg: non è un errore
   (l'import riesce comunque), .gruppo-collassato ha un solo stile (--attesa,
   di attesa/attenzione), non una variante neutra da riusare qui. */
.avviso-import { position: relative; border: 1px solid var(--accento); background: var(--accento-bg); border-radius: 8px; padding: 0.75rem 2.25rem 0.75rem 1rem; margin: 0 0 1rem; }
.avviso-import h3 { margin: 0 0 0.3rem; font-size: 0.95rem; }
.avviso-import p { margin: 0; font-size: 0.85rem; }
.avviso-import .chiudi-avviso { position: absolute; top: 0.5rem; right: 0.6rem; background: none; border: none; font-size: 1.15rem; line-height: 1; cursor: pointer; color: var(--testo-attenuato); padding: 0.15rem 0.4rem; }

/* Collaudo esterno, P3 (M2231; domanda 8 sul piano): la schermata che non si
   è potuta disegnare. Stile di attenzione (--attesa), non --accento: qui
   qualcosa non è riuscito. Il dettaglio va a capo, nessuno scorrimento
   orizzontale. */
.errore-schermata { border: 1px solid var(--attesa); background: var(--attesa-bg); border-radius: 8px; padding: 0.75rem 1rem; margin: 0 0 1rem; }
.errore-schermata p { margin: 0 0 0.5rem; }
.errore-schermata summary { cursor: pointer; font-size: 0.85rem; color: var(--attesa); }
.errore-schermata pre { margin: 0.5rem 0 0; font-size: 0.75rem; white-space: pre-wrap; overflow-wrap: anywhere; }

/* v0.93, B132: la legenda a parte (renderLegendaStatoRisposta) non aveva più
   chiamanti da B102 — funzione rimossa (emas-render-schema.mjs), regole qui
   con lei: nessuna le usava più. */

/* Marcatore di stato_risposta — quattro segni distinti, uno per valore di
   meta.definizioni_stato_risposta: «Presente» pieno in ANDROID (G2, decisione
   sul § 13 del piano: era «coperto», stato non più nel dataset, come
   «parziale»), gli altri a un solo inchiostro. Grafica, G3 (M2321): «Carenza»
   (vocabolario stato_valutazione) prende il segno di «Assente»; «Dichiarato»
   resta senza segno, perché comprende anche risposte sfavorevoli (B4-05, D-03).
   Reso solo dove c'e' un modificatore noto: un token sconosciuto (es. uno stato
   calcolato fuori dai quattro) non fa comparire una scatola vuota. «Senza
   risposta» e' l'unico senza riempimento (assenza di risposta != assenza di
   evidenza). .marcatore-muto sopprime il ::before dove la dimensione lo
   renderebbe ambiguo: resta la sola etichetta. */
.marcatore-presente::before,
.indice-inventario .marcatore-dichiarato::before,
.marcatore-assente::before,
.marcatore-carenza::before,
.marcatore-non_applicabile::before,
.marcatore-senza_risposta::before {
  content: "";
  display: inline-block;
  width: 0.72em;
  height: 0.72em;
  margin-right: 0.4em;
  vertical-align: -0.04em;
  border: 1px solid var(--marcatore-ink);
  background-color: transparent;
  flex-shrink: 0;
}
/* Lotto 2a (decisione 11): «Dichiarato» nell'indice dell'inventario col
   segno pieno di «Presente»; altrove resta senza segno (test197). */
.marcatore-presente::before, .indice-inventario .marcatore-dichiarato::before { background-color: var(--marcatore-pieno); border-color: var(--marcatore-pieno); }
.marcatore-assente::before, .marcatore-carenza::before { background-image: repeating-linear-gradient(45deg, var(--marcatore-ink) 0 1.5px, transparent 1.5px 3.5px); }
.marcatore-non_applicabile::before { background-image: radial-gradient(var(--marcatore-ink) 0.9px, transparent 1px); background-size: 4px 4px; }
.marcatore-senza_risposta::before { border-style: dashed; }
.marcatore-muto::before { content: none; }

/* Sottosezioni della fase sistema (meta.sequenza_domande.sottosezioni) —
   rework passo 7: i tab non aprono una schermata, portano il cursore al primo
   requisito del gruppo. */
.sottosezioni-nav { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0 0 1.25rem; }
.sottosezioni-nav button { font-size: 0.85rem; }
.sottosezioni-nav button.attivo { background: var(--accento); border-color: var(--accento); color: white; }

/* Passo 3: compilazione una domanda alla volta. Corpo autoritativo a
   sinistra, colonna laterale (eco compatta + rientro al perimetro) a destra. */
.una-domanda-griglia { display: grid; grid-template-columns: minmax(0, 1fr) minmax(13rem, 17rem); gap: 2rem; align-items: start; }
/* Grafica, G4 (M2197): le colonne laterali si fermano sotto la testata, come
   l'indice dell'esito. Vale anche per quella del cancello, che porta .pannelli. */
/* Lotto 2b (B-20; R1 della revisione del piano di dettaglio): sotto testata e
   barra delle fasi, mai più alta dello spazio fra queste e la barra fissa;
   oltre, scorre. */
.colonna-laterale { position: sticky; top: calc(var(--altezza-testata, 4rem) + var(--altezza-fasi, 0px) + 0.5rem); max-height: calc(100vh - var(--altezza-testata, 4rem) - var(--altezza-fasi, 0px) - var(--altezza-barra, 0px) - 1rem); overflow-y: auto; display: flex; flex-direction: column; gap: 0.9rem; font-size: 0.85rem; }
.laterale-stato { display: flex; align-items: center; gap: 0.4rem; }
.laterale-label { font-weight: 600; color: var(--testo-attenuato); }
.laterale-evidenza { margin: 0; color: var(--testo-attenuato); font-style: italic; }
.laterale-riferimento { margin: 0; color: var(--testo-attenuato); overflow-wrap: anywhere; }
.laterale-perimetro { margin: 0; padding: 0.75rem; border: 1px solid var(--bordo); border-radius: 8px; background: var(--bg-alt); }
.laterale-perimetro h2 { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--testo-attenuato); margin: 0 0 0.4rem; }
.passo-corrente.fase-riepilogo .riepilogo-intermedio { margin-top: 0; }
.rinvii-nascosti { padding: 0.6rem; background: var(--attesa-bg); border-radius: 6px; font-size: 0.85rem; color: var(--attesa); margin: 0 0 1.25rem; }
.rinvii-nascosti button { margin-left: 0.5rem; }
@media (max-width: 860px) {
  /* Grafica, G6 (M2343): minmax(0, 1fr), non 1fr, perché un contenuto largo
     non allarghi la colonna oltre la finestra. */
  .una-domanda-griglia { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
  .colonna-laterale { position: static; order: -1; max-height: none; overflow: visible; }
}

/* riepilogo_intermedio: completezza, non verdetto — niente colori ok/no. */
.riepilogo-intermedio { margin-top: 2rem; padding: 1rem; border: 1px solid var(--bordo); border-radius: 8px; background: var(--bg-alt); }
.riepilogo-intermedio h3 { margin: 0 0 0.3rem; font-size: 0.95rem; }
.riepilogo-didascalia { margin: 0 0 0.8rem; font-size: 0.8rem; color: var(--testo-attenuato); }
.riepilogo-sottotitolo { margin: 0 0 0.4rem; font-size: 0.8rem; color: var(--testo-attenuato); }
/* Passo 6, L3: testa con il denominatore della fase, poi una riga per gruppo
   (le righe sommano al denominatore), poi le frasi condizionali. */
.riepilogo-testa { margin: 0 0 0.5rem; font-size: 0.9rem; font-weight: 600; }
.riepilogo-righe { display: flex; flex-direction: column; gap: 0.35rem; }
.riepilogo-riga { margin: 0; font-size: 0.85rem; }
.riepilogo-perimetro, .riepilogo-senza-risposta, .elenco-da-completare { margin: 0.8rem 0 0; font-size: 0.82rem; }
.riepilogo-riga-finale { margin: 0.8rem 0 0; font-size: 0.85rem; font-weight: 600; }

/* Quinto collaudo esterno, lotto 2a (M2385–M2387): indice per area a
   sinistra, una voce aperta a destra; sotto 1024 px l'indice è una tendina
   sopra la voce. Sul passo dell'inventario non c'è la colonna laterale. */
.una-domanda-griglia.griglia-passo-inventario { grid-template-columns: minmax(0, 1fr); }
.riepilogo-stati { margin: -0.25rem 0 1rem; font-size: 0.9rem; color: var(--testo-attenuato); }
.inventario-disposizione { display: grid; grid-template-columns: 17.5rem minmax(0, 1fr); gap: 2rem; align-items: start; }
.indice-inventario { position: sticky; top: calc(var(--altezza-testata, 4rem) + var(--altezza-fasi, 0px) + 0.5rem); max-height: calc(100vh - var(--altezza-testata, 4rem) - var(--altezza-fasi, 0px) - var(--altezza-barra, 0px) - 1rem); overflow-y: auto; border: 1px solid var(--bordo); border-radius: 14px; background: var(--bg-alt); padding: 0.6rem; }
.indice-elenco { display: flex; flex-direction: column; gap: 0.1rem; }
.indice-area { display: flex; flex-direction: column; gap: 0.1rem; padding-top: 0.6rem; }
.indice-area-titolo { margin: 0; padding: 0 0.75rem 0.25rem; font-family: var(--font-titoli); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--testo-attenuato); }
.voce-indice, .indice-comando { display: flex; align-items: center; gap: 0.5rem; width: 100%; text-align: left; padding: 0.45rem 0.6rem 0.45rem 0.75rem; border: 0; border-radius: 8px; background: transparent; font-size: 0.85rem; font-weight: 400; color: var(--testo); }
.voce-indice:hover { background: var(--bg); }
.voce-indice[aria-current="true"] { background: var(--bg); box-shadow: inset 3px 0 0 var(--accento); font-weight: 600; }
.voce-indice[data-voce="comuni"] { border: 1px solid var(--bordo); background: var(--bg); font-weight: 600; }
/* Titoli interi, su più righe: troncati, i due indicatori dell'energia si
   leggevano uguali («Consumo totale …»). */
.voce-indice, .indice-comando { align-items: flex-start; line-height: 1.3; }
.voce-titolo { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.voce-stato { flex: 0 0 auto; padding-top: 0.08rem; font-size: 0.72rem; font-weight: 500; color: var(--testo-attenuato); white-space: nowrap; }
.segno-voce { flex: 0 0 auto; line-height: 0; padding-top: 0.28rem; }
.segno-voce::before { margin-right: 0; }
.segno-voce:not([class*="marcatore-"]) { width: 0.7rem; }
.indice-inventario .indice-comando { display: none; }
@media (max-width: 1023px) {
  .inventario-disposizione { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
  .indice-inventario { position: static; max-height: none; padding: 0.4rem; }
  .indice-inventario .indice-comando { display: flex; font-weight: 600; }
  .indice-comando::after { content: ""; flex: 0 0 auto; width: 0.45rem; height: 0.45rem; margin: 0 0.3rem 0.2rem 0.3rem; border-right: 2px solid var(--accento); border-bottom: 2px solid var(--accento); transform: rotate(45deg); }
  .indice-comando[aria-expanded="true"]::after { transform: rotate(-135deg); margin-bottom: -0.2rem; }
  .indice-inventario.tendina-chiusa .indice-elenco { display: none; }
  .indice-elenco { padding-top: 0.4rem; }
}
.pannello-inventario { border: 1px solid var(--bordo); border-radius: 14px; background: var(--bg); overflow: hidden; }
.pannello-inventario > .riga-indicatore, .pannello-inventario > .inventario-comuni { padding: 1.4rem 1.75rem 1.25rem; }
/* Lotto 2d (M2534, R1 del secondo mock): il titolo dell'indicatore vale
   nell'inventario, non negli elenchi dell'esito che usano la stessa classe. */
.inventario-disposizione .titolo-voce { margin: 0; font-family: var(--font-titoli); font-size: 1.3rem; line-height: 1.3; color: var(--accento); }
.inventario-disposizione .titolo-voce:focus { outline: none; }
.inventario-disposizione .titolo-voce:focus-visible { outline: 2px solid var(--rainstorm); outline-offset: 2px; }
.indicatore-testa { display: flex; gap: 1.5rem; align-items: flex-start; padding-bottom: 1rem; margin-bottom: 1rem; border-bottom: 1px solid var(--bordo); }
.indicatore-intestazione { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 0.25rem; }
.posizione-indicatore { margin: 0; font-family: var(--font-titoli); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--testo-attenuato); }
.riga-riferimento { margin: 0; }
button.che-cosa-dice { align-self: flex-start; margin-top: 0.25rem; padding: 0; border: 0; background: none; color: var(--accento); font-size: 0.82rem; font-weight: 600; }
button.che-cosa-dice::before { content: ""; display: inline-block; width: 0.4rem; height: 0.4rem; margin: 0 0.45rem 0.1rem 0.1rem; border-right: 2px solid var(--accento); border-bottom: 2px solid var(--accento); transform: rotate(-45deg); }
button.che-cosa-dice[aria-expanded="true"]::before { transform: rotate(45deg); }
.note-indicatore { margin-top: 0.4rem; padding: 0.6rem 0.8rem; border-radius: 8px; background: var(--bg-alt); }
/* «Non pertinente» come interruttore accanto al titolo (M2387, A-C1b). */
.azione-non-pertinente { flex: 0 0 auto; display: flex; align-items: center; gap: 0.6rem; padding: 0.45rem 0.75rem; border: 1px solid var(--bordo); border-radius: 10px; font-size: 0.88rem; cursor: pointer; }
.azione-non-pertinente:has(input:checked) { border: 2px solid var(--accento); background: var(--selezione-bg); font-weight: 600; }
input.non-pertinente[role="switch"] { appearance: none; -webkit-appearance: none; position: relative; flex: 0 0 auto; width: 2.15rem; height: 1.25rem; margin: 0; border-radius: 999px; background: var(--rainstorm-200); cursor: pointer; transition: background 0.15s; }
input.non-pertinente[role="switch"]::before { content: ""; position: absolute; top: 0.125rem; left: 0.125rem; width: 1rem; height: 1rem; border-radius: 50%; background: #fff; transition: left 0.15s; }
input.non-pertinente[role="switch"]:checked { background: var(--accento); }
input.non-pertinente[role="switch"]:checked::before { left: 1.025rem; }
.nota-non-pertinente { margin-top: 0.8rem; }
.riga-indicatore > .stato-indicatore { margin: 0 0 0.5rem; }
/* Sezioni del pannello: campi del dato, poi valori annui. */
.come-costruito, .valori-annui { padding: 1rem 0; border-top: 1px solid var(--bordo); }
.sezione-titolo { margin: 0 0 0.6rem; font-family: var(--font-titoli); font-size: 0.9rem; color: var(--accento); }
.campi-riga { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1.25rem; }
.campi-riga .campo-metodologia_di_calcolo { grid-column: 1 / -1; }
.campi-riga .campo { margin-top: 0.6rem; }
.campi-riga .campo > label { color: var(--testo); }
.campi-riga input[type="text"] { width: 100%; }
@media (max-width: 767px) { .campi-riga { grid-template-columns: minmax(0, 1fr); } .indicatore-testa { flex-direction: column; gap: 0.75rem; } }
.usa-fonte { margin-top: 0.35rem; }
button.usa-fonte-comando { padding: 0; border: 0; background: none; color: var(--accento); font-size: 0.82rem; text-decoration: underline; text-underline-offset: 2px; }
button.usa-fonte-comando:disabled { color: var(--testo-attenuato); text-decoration: none; }
.usa-fonte-riquadro { margin-top: 0.5rem; padding: 0.75rem 0.9rem; border: 1px solid var(--bordo); border-radius: 10px; background: var(--bg-alt); font-size: 0.85rem; }
.usa-fonte-titolo { margin: 0 0 0.4rem; font-weight: 600; }
.usa-fonte-area { margin: 0.6rem 0 0.2rem; font-family: var(--font-titoli); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--testo-attenuato); }
.usa-fonte-indicatore { margin: 0.3rem 0 0.1rem; }
.usa-fonte-gruppo .usa-fonte-voce { padding-left: 1.2rem; }
.usa-fonte-voce { display: flex; align-items: baseline; gap: 0.45rem; flex-wrap: wrap; padding: 0.15rem 0; }
.usa-fonte-voce .usa-fonte-motivo { margin: 0; }
.usa-fonte-comandi { display: flex; gap: 0.6rem; margin-top: 0.75rem; }
.usa-fonte-esito { margin: 0.3rem 0 0; }
/* Valori annui in tabella, anni in colonna (M2386). */
.tabella-scorrimento { overflow-x: auto; }
.tabella-valori { border-collapse: collapse; width: 100%; table-layout: fixed; font-size: 0.88rem; }
.tabella-valori td.cella-vuota { width: 34%; }
.tabella-valori th, .tabella-valori td { padding: 0.4rem 0.5rem; text-align: left; vertical-align: middle; }
.tabella-valori thead th { font-family: var(--font-titoli); font-size: 0.82rem; color: var(--accento); }
.tabella-valori tbody th { font-size: 0.82rem; font-weight: 600; overflow-wrap: anywhere; }
.tabella-valori tr.riga-a, .tabella-valori tr.riga-articolazione, .tabella-valori tr.riga-b { border-top: 1px solid var(--bordo); }
.tabella-valori tr.riga-nd th, .tabella-valori tr.riga-nd td { padding-top: 0; font-size: 0.8rem; font-weight: 400; color: var(--testo-attenuato); }
.tabella-valori .cella-nd label { display: flex; align-items: center; gap: 0.4rem; }
.tabella-valori .cella-valore input { width: 100%; min-width: 5rem; text-align: right; }
.tabella-valori .cella-valore input:disabled { border-style: dashed; background: var(--bg-alt); }
.tabella-valori .cella-valore .nota-campo { margin: 0.2rem 0 0; }
.tabella-valori .unita-a { margin-left: 0.4rem; font-weight: 400; color: var(--testo-attenuato); }
.tabella-valori .intestazione-articolazione { display: table-cell; }
.tabella-valori .intestazione-articolazione .etichetta-tipo { display: block; font-size: 0.75rem; font-weight: 400; color: var(--testo-attenuato); }
.tabella-valori .intestazione-articolazione input { width: calc(100% - 2.6rem); }
.tabella-valori .intestazione-articolazione .rimuovi { margin-left: 0.3rem; padding: 0.2rem 0.45rem; }
.tabella-valori tr.r-per-anno { border-top: 1px solid var(--bordo); background: var(--bg-alt); }
.tabella-valori tr.r-per-anno th { color: var(--accento); }
.tabella-valori tr.r-per-anno td { font-variant-numeric: tabular-nums; }
/* Menu del dato B: <select> nativo restilizzato (decisione 7). */
.tabella-valori select[data-campo="definizione_B"], .valori-annui select[data-campo="definizione_B"] { appearance: none; -webkit-appearance: none; min-width: 14rem; padding-right: 2rem; background-image: linear-gradient(45deg, transparent 50%, var(--accento) 50%), linear-gradient(135deg, var(--accento) 50%, transparent 50%); background-position: calc(100% - 1rem) 50%, calc(100% - 0.65rem) 50%; background-size: 0.35rem 0.35rem; background-repeat: no-repeat; }
.articolazioni { display: flex; align-items: center; gap: 1rem; margin-top: 0.6rem; }
.articolazioni-titolo { margin: 0; font-size: 0.82rem; color: var(--testo-attenuato); }
.articolazioni button.aggiungi { border-style: dashed; }
.sotto-indicatore { margin-top: 1rem; padding-top: 1rem; border-top: 2px solid var(--bordo); }
.sotto-indicatore > .riga-titolo { margin: 0 0 0.3rem; font-family: var(--font-titoli); font-size: 1.05rem; color: var(--accento); }
.riga-indicatore > button.applica-a-tutti, .riga-indicatore > button.aggiungi { margin-top: 0.75rem; }
.voci-vicine { display: flex; justify-content: space-between; gap: 1rem; padding: 0.8rem 1.75rem; border-top: 1px solid var(--bordo); background: var(--bg-alt); }
.voci-vicine button { border: 0; background: none; padding: 0.25rem 0; color: var(--accento); font-size: 0.88rem; }
.voci-vicine .voce-successiva { margin-left: auto; font-weight: 600; }
/* Impostazioni comuni: anni, screening, riepilogo del dato B. */
.inventario-comuni .spiegazione-comuni { margin: 0.3rem 0 0.4rem; font-size: 0.85rem; }
.inventario-comuni .screening, .inventario-comuni .dato-b-riepilogo { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--bordo); }
.inventario-comuni .dato-b-riepilogo .blocco-titolo, .inventario-comuni .screening .blocco-titolo { margin: 0 0 0.5rem; font-size: 0.9rem; }
.dato-b-comune { margin: 0 0 0.3rem; }
.dato-b-altre { margin: 0 0 0.5rem; padding-left: 1.2rem; font-size: 0.9rem; }

.motivazione-obbligatoria { background: var(--attesa-bg); border: 1px solid var(--attesa); border-radius: 6px; padding: 0.6rem; margin-top: 0.4rem; }
.motivazione-obbligatoria textarea { width: 100%; min-height: 3rem; font: inherit; padding: 0.4rem; border: 1px solid var(--bordo); border-radius: 6px; }

.barra-navigazione { display: flex; justify-content: space-between; margin-top: 2rem; padding-top: 1rem; border-top: 1px solid var(--bordo); }
/* Quinto collaudo esterno, lotto 2b (M2381, M2404): la barra di ogni
   schermata è fissa in basso, sempre in vista: «Indietro», barra e contatore
   al centro, il comando che avanza a destra (montaBarraFissa). */
.barra-navigazione.barra-fissa { position: fixed; left: 0; right: 0; bottom: 0; z-index: 9; max-width: none; margin: 0; padding: 0.75rem max(1.5rem, calc((100% - 1100px) / 2 + 1.5rem)); background: var(--bg); border-top: 1px solid var(--bordo); box-shadow: 0 -6px 16px rgba(20, 39, 46, 0.05); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 20rem) minmax(0, 1fr); align-items: center; gap: 1rem; }
.barra-fissa > :first-child { justify-self: start; }
.barra-fissa > :last-child { justify-self: end; }
.barra-fissa .shell-progress { flex-direction: column-reverse; align-items: center; gap: 0.35rem; }
.barra-fissa .shell-barra { width: 100%; }

/* Pannelli live. Grafica, G4 (M2197): posizione e top vengono da
   .colonna-laterale, così sotto gli 860 px anche la colonna del cancello è
   statica (prima restava sticky e copriva la domanda). */
.pannelli {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.pannello {
  border: 1px solid var(--bordo);
  border-radius: 8px;
  padding: 1rem;
  background: var(--bg-alt);
}
.pannello h2 { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--testo-attenuato); margin: 0 0 0.6rem; }

.riga-sito { display: flex; justify-content: space-between; gap: 0.5rem; padding: 0.25rem 0; font-size: 0.88rem; }
.riga-sito .bandiera { color: var(--testo-attenuato); font-size: 0.78rem; }
.riga-sito.escluso { text-decoration: line-through; color: var(--testo-attenuato); }

.esito {
  padding: 0.6rem 0.7rem;
  border-radius: 6px;
  font-size: 0.85rem;
  margin-bottom: 0.5rem;
}
.esito:last-child { margin-bottom: 0; }
.esito.riconosciuto, .esito.potenziale, .esito.concessa { background: var(--ok-bg); color: var(--ok); }
.esito.negato, .esito.non-ammissibile { background: var(--no-bg); color: var(--no); }
.esito.in-attesa, .esito.non-richiesta, .esito.concessa-non-ammissibile, .esito.concessa-in-attesa, .esito.condizione-non-soddisfatta { background: var(--attesa-bg); color: var(--attesa); }

.vuoto { color: var(--testo-attenuato); font-size: 0.85rem; font-style: italic; }

/* Passo 5: esito — sei bande (passo 6, L11) a tutta larghezza + indice laterale fisso
   (rework renderer, passo 3). L'intestazione (h1, testi obbligatori, etichetta
   prudente, stato di lavorazione) resta a piena larghezza sopra il corpo a due
   colonne. */
.esito-finale { }
.esito-corpo { display: grid; grid-template-columns: minmax(10rem, 13rem) minmax(0, 1fr); gap: 2.5rem; align-items: start; margin-top: 1.5rem; }
.esito-indice { position: sticky; top: calc(var(--altezza-testata, 4rem) + var(--altezza-fasi, 0px) + 0.5rem); max-height: calc(100vh - var(--altezza-testata, 4rem) - var(--altezza-fasi, 0px) - var(--altezza-barra, 0px) - 1rem); overflow-y: auto; }
/* Collaudo esterno, P1, D09 (M2187; domanda 6 sul piano): le destinazioni
   dell'indice si fermano sotto la testata fissa. --altezza-testata la scrive
   emas-app.mjs (misuraTestata) dall'altezza reale di header.app. */
.esito-bande > [id^="esito-banda-"] { scroll-margin-top: calc(var(--altezza-testata, 4rem) + var(--altezza-fasi, 0px) + 0.75rem); }
.esito-indice ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.35rem; }
.esito-indice a { display: block; text-decoration: none; color: var(--rainstorm); font-size: 0.88rem; line-height: 1.35; padding: 0.15rem 0 0.15rem 0.6rem; border-left: 2px solid var(--bordo); }
.esito-indice a:hover, .esito-indice a:focus { border-left-color: var(--rainstorm); }
.esito-indice-sintesi { margin: 0.9rem 0 0; padding-top: 0.6rem; border-top: 1px solid var(--bordo); font-size: 0.8rem; color: var(--testo-attenuato); }
.esito-bande > .pannello-esito:first-child { margin-top: 0; padding-top: 0; border-top: none; }
@media (max-width: 800px) {
  .esito-corpo { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
  .esito-indice { position: static; max-height: none; overflow: visible; }
  .esito-indice ol { flex-direction: row; flex-wrap: wrap; gap: 0.4rem 0.9rem; }
  .esito-indice a { border-left: none; border-bottom: 2px solid var(--bordo); padding: 0 0 0.15rem; }
  .esito-indice-sintesi { margin-top: 0.6rem; }
}
.esito-etichetta { padding: 0.9rem 1.1rem; border-radius: 8px; font-weight: 600; font-size: 1.05rem; background: var(--bg-alt); border: 1px solid var(--bordo); }
/* Passo 6, L2 (M942, M961): la classe viene dal campo `tono` del gradino di
   meta.stati_readiness (favorevole, attenzione, ostacolo, neutro), non dal nome
   dello stato. `neutro` non ha una regola: resta lo stile di .esito-etichetta. */
.esito-tono-favorevole { background: var(--ok-bg); color: var(--ok); border-color: var(--ok); }
.esito-tono-ostacolo { background: var(--no-bg); color: var(--no); border-color: var(--no); }
.esito-tono-attenzione { background: var(--attesa-bg); color: var(--attesa); border-color: var(--attesa); }
/* Passo 6, L2 (M979): motivo di un gap aperto da una regola sulle risposte. */
.riga-gap .motivo-violazione { margin: 0.2rem 0; font-size: 0.9rem; font-weight: 600; }

.pannello-esito { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--bordo); }
.pannello-esito h3 { margin-top: 1.25rem; font-size: 0.95rem; }

.elenco-senza-risposta ul { margin: 0.3rem 0; font-size: 0.85rem; }
/* Lotto correttivo di L3, parte (d): sotto il titolo della voce, le componenti
   mancanti; «Da completare» come l'elenco delle voci senza risposta. */
.riepilogo-senza-risposta ul, .elenco-da-completare ul { margin: 0.3rem 0; font-size: 0.85rem; }
ul.componenti-mancanti { margin: 0.15rem 0 0.3rem; font-size: 0.82rem; }
/* Quinto collaudo esterno, lotto 2c (A-C2): una voce con dettaglio è una riga
   sola, «{titolo} ({n} parti da compilare)»; il dettaglio dietro un <details>
   chiuso. Il sommario resta del colore e della misura della riga, anche dentro
   l'elenco espandibile esterno. */
details.voce-dettaglio > summary { color: inherit; font-size: inherit; margin: 0; cursor: pointer; }
details.voce-dettaglio[open] > summary { margin-bottom: 0.15rem; }
/* Quinto collaudo esterno, lotto 2d (M2530, M2532, M2533): la riga di una voce
   col comando «Completa» a destra e, sotto il titolo, dove sta la voce. */
li.voce-con-comando { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 1rem; align-items: start; padding: 0.35rem 0; border-bottom: 1px solid var(--rainstorm-100); }
li.voce-con-comando > .titolo-voce, li.voce-con-comando > details.voce-dettaglio { grid-column: 1; grid-row: 1; }
li.voce-con-comando > .dove-voce { grid-column: 1; grid-row: 2; }
li.voce-con-comando > .comando-completa { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
.dove-voce { display: block; font-size: 0.78rem; color: var(--rainstorm-500); }
.comando-completa { min-height: 2rem; padding: 0 0.75rem; border: 1px solid var(--rainstorm); border-radius: 8px; background: #fff; color: var(--rainstorm); font: 600 0.82rem var(--font-corpo, inherit); cursor: pointer; white-space: nowrap; }
.comando-completa:hover { background: var(--rainstorm-50); }
.comando-completa:focus-visible { outline: 2px solid var(--rainstorm); outline-offset: 2px; }
/* Sintesi in testa all'esito (M2528): conteggi con la loro frase, nessun
   colore per riga, il pannello a destra. */
.esito-sintesi { margin: 1.5rem 0 0.5rem; padding: 1rem 1.25rem 0.5rem; border: 1px solid var(--rainstorm-200); border-radius: 12px; }
.esito-sintesi h2 { margin: 0 0 0.5rem; font-size: 1.15rem; }
.sintesi-riga { display: grid; grid-template-columns: minmax(0, 16rem) minmax(0, 1fr) auto; column-gap: 1.25rem; align-items: center; min-height: 2.75rem; border-top: 1px solid var(--rainstorm-100); font-size: 0.9rem; }
.sintesi-etichetta { font-weight: 600; color: var(--rainstorm); }
.esito-sintesi a { color: var(--rainstorm); }
.esito-sintesi a:hover { color: var(--rainstorm-900); }
.sintesi-azioni { display: flex; gap: 1rem; align-items: center; justify-content: flex-end; font-size: 0.85rem; }
@media (max-width: 767px) {
  .sintesi-riga { grid-template-columns: minmax(0, 1fr); padding: 0.4rem 0; }
  .sintesi-azioni { justify-content: flex-start; }
}
/* La striscia di ritorno (M2530) sotto la barra delle fasi. */
.striscia-ritorno { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; padding: 0.5rem 1rem; background: var(--android-50); border-bottom: 1px solid var(--android-200); font-size: 0.9rem; }
.striscia-ritorno-testo { flex: 1 1 auto; color: var(--rainstorm-800); }
.striscia-ritorno-comando { padding: 0; border: 0; background: none; color: var(--rainstorm); font: 600 0.9rem var(--font-corpo, inherit); cursor: pointer; text-decoration: underline; }
.striscia-ritorno-comando:focus-visible { outline: 2px solid var(--rainstorm); outline-offset: 2px; }
/* Passo 6, L1-b: sezioni dei limiti calcolati (sezioniLimiti, emas-render-esito.mjs).
   Sopra la soglia la sezione dei requisiti non accertabili è un <details>
   chiuso: il <summary> porta il titolo e prende il peso di un h3. */
.sezione-limiti .voce-limite { margin: 0 0 0.75rem; }
.sezione-limiti .limite { margin: 0 0 0.2rem; font-size: 0.9rem; }
details.sezione-limiti { margin-top: 1.25rem; }
details.sezione-limiti > summary.titolo-sezione-limiti { font-size: 0.95rem; font-weight: 700; cursor: pointer; margin-bottom: 0.6rem; }
.pannello-esito h4 { margin: 0.75rem 0 0.2rem; font-size: 0.85rem; }
/* Passo 6, L11: pannello «Delta ISO 14001» — una sezione per area, la parte A
   dell'allegato II distinta dalle aree che EMAS aggiunge (M225). */
.delta-area { margin-top: 0.9rem; }
.delta-area p { margin: 0.15rem 0; }
.delta-area-allegato_II_A { border-left: 3px solid var(--bordo); padding-left: 0.75rem; }
.delta-testa { font-weight: 600; }
.file-portale-citazione { color: var(--testo-attenuato); font-size: 0.85rem; }
.elenco-fonti { margin: 0.3rem 0; font-size: 0.85rem; }
.elenco-espandibile summary { color: var(--testo-attenuato); font-size: 0.85rem; cursor: pointer; margin: 0.3rem 0; }
.elenco-espandibile[open] summary { margin-bottom: 0.3rem; }

.riga-stato-sistema { position: relative; padding: 0.3rem 0 0.3rem 1.2em; font-size: 0.9rem; line-height: 1.5; }
.riga-id { font-weight: 600; }
.riga-stato-testo { color: var(--testo-attenuato); margin-left: 0.35em; white-space: nowrap; }
.riga-evidenza { display: block; color: var(--testo-attenuato); font-size: 0.85rem; }
/* La riga di 'Stato del sistema' usa il marcatore a pattern del passo 1
   (marcatore-<token>, ::before) al posto dei vecchi pallini a tre colori per
   cinque stati; l'etichetta testuale (.riga-stato-testo) resta il portatore.
   Grafica, G3 (M2321): il marcatore sta fermo a sinistra, sulla prima riga
   del titolo; titolo e stato scorrono accanto come testo, l'evidenza sotto. */
.riga-stato-sistema > [class^="marcatore-"] { position: absolute; left: 0; top: calc(0.3rem + 0.39em); line-height: 0; }
.riga-stato-sistema > [class^="marcatore-"]::before { margin-right: 0; vertical-align: top; }

.riga-gap { padding: 0.7rem 0; border-bottom: 1px solid var(--bordo); }
.riga-gap:last-child { border-bottom: none; }

.testo-obbligatorio-titolo { font-size: 1rem; margin-top: 1rem; }
.testo-obbligatorio { font-size: 0.9rem; color: var(--testo-attenuato); max-width: 55rem; }

/* Schermo 4: percorso procedurale (rework passo 8) — la linea dei passaggi
   dell'iter DOPO l'invio, da dataset.fasi_iter. Nessuna durata sui nodi. */
.percorso-procedurale { max-width: 55rem; }
.percorso-linea { list-style: none; margin: 1.5rem 0; padding: 0; }
.percorso-nodo { position: relative; padding: 0 0 1.5rem 1.75rem; border-left: 2px solid var(--rainstorm); }
.percorso-nodo:last-child { border-left-color: transparent; padding-bottom: 0; }
.percorso-nodo::before { content: ""; position: absolute; left: -0.5rem; top: 0.15rem; width: 0.85rem; height: 0.85rem; border-radius: 50%; background: var(--bg); border: 2px solid var(--rainstorm); }
.percorso-descrizione { display: block; font-weight: 600; color: var(--rainstorm); }
.percorso-soggetto { display: block; font-size: 0.85rem; color: var(--testo-attenuato); margin-top: 0.15rem; }
.percorso-nota { font-size: 0.85rem; color: var(--testo-attenuato); max-width: 46rem; }

/* Schermo 5: chiusura — due azioni pari-peso affiancate, poi il contatto. */
.chiusura-azioni { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1rem; }
.report-nota { margin: 0.6rem 0 0; font-size: 0.85rem; color: var(--testo-attenuato); max-width: 40rem; }

/* v0.78, B82: report PDF e contatto facoltativo. Il report è indipendente
   dal contatto. */
.report-stampa { margin-top: 1.5rem; }
.report-stampa .nota-campo { margin: 0.4rem 0 0; font-size: 0.85rem; color: var(--testo-attenuato); max-width: 40rem; }

.contatto {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--bordo);
  max-width: 40rem;
}
.contatto h2 { font-size: 1rem; margin: 0 0 0.5rem; }
.contatto .contatto-informativa { font-size: 0.9rem; color: var(--testo-attenuato); }
.contatto .contatto-campo { display: block; margin: 0.75rem 0 0.25rem; font-size: 0.9rem; }
.contatto .contatto-campo span { display: block; margin-bottom: 0.2rem; }
.contatto .contatto-campo input { width: 100%; max-width: 22rem; padding: 0.4rem; border: 1px solid var(--bordo); border-radius: 6px; }
.contatto .contatto-casella { display: flex; align-items: baseline; gap: 0.5rem; margin: 0.75rem 0 0.25rem; font-size: 0.9rem; }
.contatto .nota-campo { font-size: 0.82rem; color: var(--testo-attenuato); margin: 0.25rem 0; }
.contatto .contatto-destinatario { font-size: 0.85rem; margin: 0.5rem 0; }
.contatto .contatto-esito { font-size: 0.85rem; background: var(--accento-bg); border: 1px solid var(--bordo); border-radius: 6px; padding: 0.5rem 0.7rem; margin: 0.75rem 0; }
.contatto .contatto-esito .copia-indirizzo { margin-left: 0.5rem; font-size: 0.8rem; }
.contatto .contatto-nota-finale { font-style: italic; }

/* Passo 6, L5, terzo gruppo, 3c: dato dichiarato altrove (dato_in_card),
   nota «richiesto da» di un sotto-campo, annotazione del motore sotto la riga
   di un indicatore, messaggi delle regole violate nelle card del Perimetro. */
.dato-in-card { margin: 0 0 0.6rem; font-size: 0.9rem; }
.sotto-campo .nota-richiesto-da { margin: 0.1rem 0 0.3rem; }
.annotazione-riga { flex-basis: 100%; margin: 0.3rem 0 0; font-size: 0.85rem; font-style: italic; color: var(--testo-attenuato); }
.violazioni-card .motivo-violazione { margin: 0 0 0.4rem; font-size: 0.9rem; font-weight: 600; color: var(--no); }

/* Passo 6, lotto L6, sottogruppo a: nota di riga dell'inventario col punto
   citato accanto; frase «richiesto da» sotto «Fonte del dato» nella griglia. */
.griglia-inventario .nota-riga { margin: 0.2rem 0 0; max-width: 48rem; }
.note-indicatore .nota-riga:first-child { margin-top: 0; }
.griglia-inventario .nota-riga-riferimento { margin: 0 0 0.4rem; font-style: italic; }
.griglia-inventario .campo .nota-richiesto-da { margin: 0.1rem 0 0.3rem; }

/* Passo 6, lotto L6, sottogruppo b: avviso degli anni non aggiunti sotto il
   campo degli anni («R per anno» è nella tabella dal lotto 2a). */
.griglia-inventario .anni-non-aggiunti { margin: 0.2rem 0 0; color: var(--no); }

/* Quinto collaudo esterno, lotto 2b (M2382): domanda, riferimento, risposta e
   «Dove trovi il dato» in un solo blocco, occhiello del blocco in testa,
   tendina della spiegazione e nota facoltativa in fondo (piede). Vale per la
   card del perimetro (.card-domanda-singola) e per il telaio diviso delle fasi
   (.requisito); le sezioni interne perdono la propria cornice. */
.blocco-unico, .requisito.blocco-unico {
  max-width: 880px;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.5rem 1.75rem 1.25rem;
  background: var(--bg);
  border: 1px solid var(--bordo);
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(36, 70, 83, 0.06);
}
.blocco-unico > .card-quesito, .blocco-unico > .card-sezione { padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.blocco-unico > .blocco-titolo { margin: 0 0 -0.6rem; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--testo-attenuato); }
.blocco-unico > .evidenza-attesa-sezione { margin: 0; }
.blocco-unico > .sottotitolo { margin: 0 0 -0.6rem; }
.blocco-unico .card-quesito .card-domanda { margin: 0 0 0.35rem; }
.riferimento-domanda { margin: 0; font-size: 0.85rem; line-height: 1.45; color: var(--testo-attenuato); overflow-wrap: anywhere; }
.blocco-unico .card-controlli { margin: 0; }
.blocco-unico > .card-sezione-risposta, .blocco-unico > .sezione-risposta { padding-top: 1rem; border-top: 1px solid var(--bordo); }
.card-piede { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 0.75rem 1.5rem; padding-top: 0.9rem; border-top: 1px solid var(--bordo); }
.card-piede .perche-chiediamo { flex: 1 1 18rem; margin: 0; padding-top: 0; border-top: 0; }
.card-piede .nota-facoltativa { flex: 0 1 auto; }
.card-piede .nota-facoltativa:has(> .campo-nota:not([hidden])) { flex-basis: 100%; }
.nota-facoltativa .campo-nota[hidden], .nota-facoltativa .aggiungi-nota[hidden] { display: none; }
.aggiungi-nota { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0; border: 0; background: none; font-family: var(--font-titoli); font-weight: 600; font-size: 0.85rem; color: var(--rainstorm); }
.aggiungi-nota::before { content: ""; width: 0.7rem; height: 0.7rem; background: linear-gradient(var(--rainstorm), var(--rainstorm)) center / 100% 1.5px no-repeat, linear-gradient(var(--rainstorm), var(--rainstorm)) center / 1.5px 100% no-repeat; }

/* Lotto 2b (M2384, B-05): il colore delle righe di percorso e deroga lo dà il
   tono, non lo stato. Neutro con il segno «i», ambra, verde; il rosso resta
   agli errori e agli ostacoli. Il testo resta il segnale principale. */
.esito.tono-neutro { background: var(--bg-alt); color: var(--testo); }
.esito.tono-neutro::before { content: ""; float: left; width: 1rem; height: 1rem; margin: 0.15rem 0.5rem 0 0; border: 1.4px solid var(--rainstorm); border-radius: 50%; box-sizing: border-box; background: linear-gradient(var(--rainstorm), var(--rainstorm)) center 72% / 1.5px 38% no-repeat, radial-gradient(circle, var(--rainstorm) 0 0.07rem, transparent 0.08rem) center 22% / 0.25rem 0.25rem no-repeat; }
.esito.tono-ambra { background: var(--attesa-bg); color: var(--attesa); }
.esito.tono-verde { background: var(--ok-bg); color: var(--ok); }
/* Il renderRequisito dei soli controlli (card del perimetro) non porta una
   seconda cornice dentro il blocco. */
.blocco-unico .requisito { padding: 0; border: 0; background: transparent; }

/* Quinto collaudo esterno, lotto 5 (R3 della revisione del piano di 2b;
   decisioni sul piano del lotto 5): stampando la schermata, la barra fissa
   non si ripete né copre il testo, e nulla di ancorato o di altezza legata
   alla finestra taglia il contenuto. Testata e barra delle fasi restano. Il
   report («Stampa o salva in PDF») ha il suo stile, in generaDocumentoStampa. */
@media print {
  .barra-navigazione.barra-fissa { display: none; }
  main { padding-bottom: 1.5rem; }
  header.app, .shell, .colonna-laterale, .indice-inventario, .esito-indice {
    position: static; max-height: none; overflow: visible;
  }
  header.app .nota-file-di-lavoro, header.app .nota-dati-browser, .menu-sezione-elenco {
    max-height: none; overflow: visible;
  }
}