*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; font-family: var(--font-testo); font-size: var(--testo-base); line-height: var(--interlinea-testo); color: var(--testo); background: var(--sfondo-pagina); }
main { flex: 1; }
h1, h2, h3, h4 { font-family: var(--font-titoli); line-height: var(--interlinea-titoli); font-weight: var(--peso-forte); margin: 0 0 var(--spazio-4); text-wrap: balance; overflow-wrap: anywhere; }
h1 { font-size: var(--titolo-h1); letter-spacing: -0.01em; }
h2 { font-size: var(--titolo-h2); }
h3 { font-size: var(--titolo-h3); }
h4 { font-size: var(--titolo-h4); }
p { margin: 0 0 var(--spazio-4); }
ul, ol { margin: 0 0 var(--spazio-4); padding-left: 1.25em; }
a { color: var(--colore-link); text-underline-offset: 0.15em; overflow-wrap: anywhere; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible, .tabella-scroll:focus-visible { outline: 3px solid var(--colore-link); outline-offset: 2px; }
.su-scuro a:focus-visible, .su-scuro button:focus-visible, .su-scuro select:focus-visible { outline-color: var(--testo-su-scuro); }

.contenitore { width: 100%; max-width: var(--contenitore); margin-inline: auto; padding-inline: var(--margine-laterale); }
.lettura { max-width: var(--colonna-lettura); }
.salta { position: absolute; left: -999px; top: 0; background: var(--sfondo-pagina); color: var(--colore-link); padding: var(--spazio-3) var(--spazio-4); z-index: 10; }
.salta:focus { left: var(--spazio-3); top: var(--spazio-3); }

.sezione { padding-block: var(--spazio-sezione); }
.sezione--chiara { background: var(--sfondo-chiaro); }
.sezione--stretta { padding-block: var(--spazio-6); }
.sezione__intro { max-width: 65ch; margin-bottom: var(--spazio-5); color: var(--testo-secondario); }
.griglia { display: grid; gap: var(--spazio-5); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 600px) { .griglia--2, .griglia--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .griglia--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.affiancati { display: grid; gap: var(--spazio-6); grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 1024px) { .affiancati { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); } }

.testata { background: var(--sfondo-pagina); border-bottom: 1px solid var(--bordo); }
.testata__interno { display: flex; align-items: center; justify-content: space-between; gap: var(--spazio-3) var(--spazio-5); min-height: 72px; flex-wrap: wrap; padding-block: var(--spazio-3); }
.testata__marchio { font-family: var(--font-titoli); font-weight: var(--peso-forte); font-size: 1.5rem; color: var(--colore-primario); text-decoration: none; }
.testata__destra { display: flex; align-items: center; gap: var(--spazio-3) var(--spazio-5); flex-wrap: wrap; }
.testata__menu { display: flex; gap: var(--spazio-5); list-style: none; margin: 0; padding: 0; flex-wrap: wrap; }
.testata__menu a { color: var(--testo); text-decoration: none; font-weight: var(--peso-medio); padding-block: var(--spazio-2); }
.testata__menu a:hover, .testata__menu a[aria-current] { color: var(--colore-link); text-decoration: underline; }
.testata form { margin: 0; }

.bottone { display: inline-flex; align-items: center; justify-content: center; gap: var(--spazio-2); min-height: 44px; padding: var(--spazio-2) var(--spazio-5); border: 2px solid transparent; border-radius: var(--raggio); font: inherit; font-weight: var(--peso-medio); text-decoration: none; cursor: pointer; text-align: center; }
.bottone--primario { background: var(--colore-accento); color: var(--testo-su-accento); }
.bottone--primario:hover { background: var(--colore-accento-scuro); }
.bottone--contorno { background: transparent; color: var(--colore-link); border-color: var(--colore-link); }
.bottone--contorno:hover { background: var(--sfondo-chiaro); }
.su-scuro .bottone--contorno { color: var(--testo-su-primario); border-color: var(--testo-su-primario); }
.su-scuro .bottone--contorno:hover { background: rgba(255, 255, 255, 0.12); }
.bottone--piccolo { min-height: 36px; padding: var(--spazio-1) var(--spazio-4); font-size: var(--testo-sm); }
.bottoni { display: flex; gap: var(--spazio-3); flex-wrap: wrap; }
.bottoni--staccati { margin-top: var(--spazio-5); }

.intestazione { background: var(--colore-primario); color: var(--testo-su-primario); padding-block: var(--spazio-7); }
.intestazione h1 { margin-bottom: var(--spazio-3); }
.intestazione a:not(.bottone) { color: inherit; }
.intestazione__sotto { color: var(--testo-secondario-su-primario); max-width: 70ch; margin-bottom: var(--spazio-5); }
.intestazione__righe { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: var(--spazio-5); }
.intestazione__righe > :first-child { flex: 1 1 26rem; min-width: 0; }
.percorso { font-size: var(--testo-sm); color: var(--testo-secondario-su-primario); margin-bottom: var(--spazio-2); }

/* Semaforo: mai solo colore, c'è sempre anche la parola */
.semaforo { display: inline-flex; align-items: center; gap: var(--spazio-2); padding: 0.15em 0.75em 0.15em 0.55em; border-radius: 999px; font-size: var(--testo-sm); font-weight: var(--peso-medio); white-space: nowrap; }
.semaforo::before { content: ""; width: 0.75em; height: 0.75em; border-radius: 50%; flex: none; }
.semaforo--ROSSO { background: var(--rosso-fondo); color: var(--rosso); }
.semaforo--ROSSO::before { background: var(--rosso-pieno); }
.semaforo--ARANCIO { background: var(--arancio-fondo); color: var(--arancio); }
.semaforo--ARANCIO::before { background: var(--arancio-pieno); }
.semaforo--GIALLO { background: var(--giallo-fondo); color: var(--giallo); }
.semaforo--GIALLO::before { background: var(--giallo-pieno); outline: 1px solid var(--giallo); }
.semaforo--VERDE { background: var(--verde-fondo); color: var(--verde); }
.semaforo--VERDE::before { background: var(--verde-pieno); }

.esito { background: var(--sfondo-pagina); color: var(--testo); border-radius: var(--raggio); padding: var(--spazio-5); display: grid; gap: var(--spazio-3); justify-items: start; max-width: 60rem; }
.esito__testo { font-family: var(--font-titoli); font-size: var(--titolo-h3); line-height: var(--interlinea-titoli); font-weight: var(--peso-forte); margin: 0; }
.avvertenza { font-size: var(--testo-sm); border-left: 4px solid var(--colore-link); background: var(--sfondo-pagina); color: var(--testo); padding: var(--spazio-3) var(--spazio-4); margin: var(--spazio-5) 0 0; }
.sezione--chiara .avvertenza { background: var(--sfondo-pagina); }

/* Voci del rapporto */
.voci { display: grid; gap: var(--spazio-4); list-style: none; padding: 0; margin: 0; }
@media (min-width: 1024px) { .voci--due { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.voce { background: var(--sfondo-pagina); border: 1px solid var(--bordo); border-left-width: 6px; border-radius: var(--raggio); padding: var(--spazio-5); min-width: 0; }
.voce--ROSSO { border-left-color: var(--rosso-pieno); }
.voce--ARANCIO { border-left-color: var(--arancio-pieno); }
.voce--GIALLO { border-left-color: var(--giallo-pieno); }
.voce--VERDE { border-left-color: var(--verde-pieno); }
.voce--neutra { border-left-color: var(--colore-primario); }
.voce__testa { display: flex; flex-wrap: wrap; gap: var(--spazio-2) var(--spazio-3); align-items: center; margin-bottom: var(--spazio-3); }
.voce__testa h3 { margin: 0; font-size: var(--titolo-h4); flex: 1 1 20rem; min-width: 0; }
.voce p { margin-bottom: var(--spazio-3); }
.voce > :last-child { margin-bottom: 0; }
.voce__norma { font-size: var(--testo-sm); color: var(--testo-secondario); }
.voce__cambiare { background: var(--sfondo-chiaro); border-radius: var(--raggio-sm); padding: var(--spazio-3) var(--spazio-4); }
.citazione { border-left: 3px solid var(--bordo-forte); padding-left: var(--spazio-3); font-size: var(--testo-sm); color: var(--testo-secondario); overflow-wrap: anywhere; }

.casi-titolo { font-size: var(--testo-sm); font-weight: var(--peso-medio); margin: var(--spazio-3) 0 var(--spazio-1); }
.caso { border-top: 1px solid var(--bordo); padding-block: var(--spazio-2); font-size: var(--testo-sm); }
.caso summary { cursor: pointer; }
.caso__chi { font-weight: var(--peso-medio); }
.caso__misura { display: block; color: var(--testo-secondario); }
.caso dl { margin: var(--spazio-2) 0 0; display: grid; gap: var(--spazio-1); }
.caso dl div { display: grid; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 600px) { .caso dl div { grid-template-columns: 7rem minmax(0, 1fr); gap: var(--spazio-3); } }
.caso dt { font-weight: var(--peso-medio); color: var(--testo-secondario); }
.caso dd { margin: 0; }
.nota { font-size: var(--testo-sm); color: var(--testo-secondario); }

.frasi { font-size: var(--testo-base); }
.frasi mark { background: var(--evidenza); color: var(--testo); padding: 0.05em 0.15em; border-radius: var(--raggio-sm); }
.etichetta { display: inline-block; font-size: var(--testo-xs); font-weight: var(--peso-medio); padding: 0 0.5em; border-radius: var(--raggio-sm); background: var(--sfondo-chiaro); color: var(--colore-primario); }
.etichetta--contrasto { background: var(--rosso-fondo); color: var(--rosso); }

.riquadro { background: var(--sfondo-pagina); border: 1px solid var(--bordo); border-top: 4px solid var(--colore-primario); border-radius: var(--raggio); padding: var(--spazio-5); min-width: 0; }
.riquadro h2, .riquadro h3 { font-size: var(--titolo-h4); }
.riquadro > :last-child { margin-bottom: 0; }
.elenco-semplice { list-style: none; padding: 0; display: grid; gap: var(--spazio-2); margin: 0 0 var(--spazio-4); }
.vuoto { text-align: left; }

/* Tabelle */
.tabella-scroll { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--bordo); border-radius: var(--raggio); background: var(--sfondo-pagina); }
.tabella { width: 100%; min-width: 760px; border-collapse: collapse; font-size: var(--testo-sm); }
.tabella caption { text-align: left; padding: var(--spazio-3) var(--spazio-4); font-weight: var(--peso-medio); }
.tabella th, .tabella td { padding: var(--spazio-3) var(--spazio-4); text-align: left; vertical-align: top; }
.tabella thead th { background: var(--colore-primario); color: var(--testo-su-primario); font-weight: var(--peso-medio); white-space: nowrap; }
.tabella tbody tr:nth-child(even) { background: var(--sfondo-riga-alterna); }
.tabella tbody td { border-top: 1px solid var(--bordo); }
.tabella .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Form */
.form-idea { display: grid; gap: var(--spazio-5); }
.griglia-domande { display: grid; gap: var(--spazio-5); grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 768px) { .griglia-domande { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.domanda { border: 0; padding: 0; margin: 0; min-width: 0; display: grid; gap: var(--spazio-2); }
.domanda--intera { grid-column: 1 / -1; }
.domanda[hidden] { display: none; }
.domanda__titolo { font-weight: var(--peso-medio); padding: 0; font-size: var(--testo-base); line-height: 1.4; }
.domanda__aiuto { font-size: var(--testo-sm); color: var(--testo-secondario); margin: 0; }
.domanda__errore { font-size: var(--testo-sm); color: var(--rosso); font-weight: var(--peso-medio); margin: 0; }
.domanda input[type="text"], .domanda input[type="email"], .domanda input[type="password"], .domanda textarea { font: inherit; color: var(--testo); background: var(--sfondo-pagina); border: 1px solid var(--bordo-forte); border-radius: var(--raggio); padding: var(--spazio-3); min-height: 48px; width: 100%; }
.domanda textarea { min-height: 200px; resize: vertical; }
.scelte { display: grid; gap: var(--spazio-1); }
.spunta { display: flex; gap: var(--spazio-2); align-items: flex-start; padding-block: var(--spazio-1); cursor: pointer; }
.spunta input { width: 20px; height: 20px; margin: 0.2em 0 0; flex: none; accent-color: var(--colore-link); }
.azioni-form { display: flex; flex-wrap: wrap; align-items: center; gap: var(--spazio-4); }
.errore-riepilogo { background: var(--rosso-fondo); color: var(--rosso); border-radius: var(--raggio); padding: var(--spazio-3) var(--spazio-4); font-weight: var(--peso-medio); margin: 0; }

/* Accesso */
.accesso { display: grid; gap: var(--spazio-6); grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 1024px) { .accesso { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); } }
.accesso .riquadro { color: var(--testo); }
.modulo { display: grid; gap: var(--spazio-4); align-content: start; }

/* Confronto */
.selettore { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--spazio-4); margin: 0; }
.selettore label { display: grid; gap: var(--spazio-1); font-size: var(--testo-sm); font-weight: var(--peso-medio); }
.selettore select { font: inherit; min-height: 44px; padding: var(--spazio-1) var(--spazio-3); border: 1px solid var(--bordo-forte); border-radius: var(--raggio); background: var(--sfondo-pagina); color: var(--testo); max-width: 100%; }
.confronto-esiti { display: grid; gap: var(--spazio-5); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 768px) { .confronto-esiti { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.confronto-esiti .esito { max-width: none; align-content: start; border: 1px solid var(--bordo); }
.confronto-esiti .esito__testo { font-size: var(--titolo-h4); }
.piccola-etichetta { font-size: var(--testo-sm); font-weight: var(--peso-medio); color: var(--testo-secondario); margin: 0; }

/* Testi lunghi */
.testo-lungo h1 { font-size: var(--titolo-h2); }
.testo-lungo h2 { font-size: var(--titolo-h3); margin-top: var(--spazio-6); }
.testo-lungo table { display: block; overflow-x: auto; border-collapse: collapse; font-size: var(--testo-sm); margin-bottom: var(--spazio-5); max-width: 100%; }
.testo-lungo th, .testo-lungo td { padding: var(--spazio-3) var(--spazio-4); text-align: left; vertical-align: top; border-top: 1px solid var(--bordo); min-width: 9rem; }
.testo-lungo th { background: var(--colore-primario); color: var(--testo-su-primario); }
.testo-lungo tr:nth-child(even) td { background: var(--sfondo-riga-alterna); }
.laterale { display: grid; gap: var(--spazio-4); }
@media (min-width: 1024px) { .laterale { position: sticky; top: var(--spazio-4); } }
.ampio { display: grid; gap: var(--spazio-6); grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 1024px) { .ampio { grid-template-columns: minmax(0, 3fr) minmax(0, 1fr); } }

/* Piede */
.piede { background: var(--sfondo-scuro); color: var(--testo-secondario-su-scuro); padding-top: var(--spazio-7); font-size: var(--testo-sm); margin-top: auto; }
.piede__colonne { display: grid; gap: var(--spazio-6); grid-template-columns: minmax(0, 1fr); padding-bottom: var(--spazio-6); }
@media (min-width: 600px) { .piede__colonne { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .piede__colonne { grid-template-columns: 1.3fr 1fr 1fr 1fr; } }
.piede h2 { font-family: var(--font-testo); font-size: 1rem; color: var(--testo-su-scuro); margin-bottom: var(--spazio-3); }
.piede ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--spazio-2); }
.piede a { color: var(--testo-secondario-su-scuro); text-decoration: underline; }
.piede a:hover { color: var(--testo-su-scuro); }
.piede a:focus-visible { outline-color: var(--testo-su-scuro); }
.piede__legale { border-top: 1px solid rgba(255, 255, 255, 0.18); padding-block: var(--spazio-4); display: flex; flex-wrap: wrap; gap: var(--spazio-2) var(--spazio-5); justify-content: space-between; font-size: var(--testo-xs); }

@media print {
  .testata, .piede, .bottoni, .selettore { display: none; }
  .intestazione { background: none; color: var(--testo); padding-block: var(--spazio-4); }
  .intestazione__sotto, .percorso { color: var(--testo-secondario); }
  .sezione { padding-block: var(--spazio-4); background: none; }
}

/* Tabelle di righe nel form del progetto */
.righe-form { width: 100%; min-width: 720px; border-collapse: collapse; font-size: var(--testo-sm); }
.righe-form th { background: var(--colore-primario); color: var(--testo-su-primario); padding: var(--spazio-2) var(--spazio-3); text-align: left; font-weight: var(--peso-medio); }
.righe-form td { padding: var(--spazio-2) var(--spazio-3); border-top: 1px solid var(--bordo); vertical-align: middle; }
.righe-form tbody tr:nth-child(even) { background: var(--sfondo-riga-alterna); }
.righe-form input[type="text"], .righe-form input[type="date"] { font: inherit; color: var(--testo); background: var(--sfondo-pagina); border: 1px solid var(--bordo-forte); border-radius: var(--raggio); padding: var(--spazio-2); width: 100%; min-height: 40px; }
.righe-form input[type="checkbox"] { width: 20px; height: 20px; accent-color: var(--colore-link); }
.domanda input[type="date"], .domanda input[type="file"], .domanda select { font: inherit; color: var(--testo); background: var(--sfondo-pagina); border: 1px solid var(--bordo-forte); border-radius: var(--raggio); padding: var(--spazio-3); min-height: 48px; width: 100%; }

/* Testo verificato */
.testo-numerato { list-style: none; margin: 0; padding: 0; max-height: 34rem; overflow: auto; border: 1px solid var(--bordo); border-radius: var(--raggio); background: var(--sfondo-pagina); font-size: var(--testo-sm); }
.testo-numerato li { display: grid; grid-template-columns: 3.25rem minmax(0, 1fr); gap: var(--spazio-3); padding: var(--spazio-1) var(--spazio-3); border-left: 4px solid transparent; overflow-wrap: anywhere; }
.testo-numerato__n { color: var(--testo-secondario); text-align: right; font-variant-numeric: tabular-nums; }
.testo-numerato .riga--ROSSO { background: var(--rosso-fondo); border-left-color: var(--rosso-pieno); }
.testo-numerato .riga--ARANCIO { background: var(--arancio-fondo); border-left-color: var(--arancio-pieno); }
.testo-numerato .riga--GIALLO { background: var(--giallo-fondo); border-left-color: var(--giallo-pieno); }
.conteggi { display: flex; flex-wrap: wrap; gap: var(--spazio-2); margin: 0; padding: 0; list-style: none; }

/* Numeri in evidenza */
.numeri { display: grid; gap: var(--spazio-4); grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; }
@media (min-width: 1024px) { .numeri { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.numeri div { display: flex; flex-direction: column-reverse; gap: var(--spazio-1); }
.numeri dt { font-size: var(--testo-sm); color: var(--testo-secondario-su-primario); }
.numeri dd { margin: 0; font-family: var(--font-titoli); font-size: var(--titolo-h2); font-weight: var(--peso-forte); font-variant-numeric: tabular-nums; }
.filtri { display: grid; gap: var(--spazio-4); grid-template-columns: minmax(0, 1fr); align-items: end; margin-bottom: var(--spazio-5); }
@media (min-width: 600px) { .filtri { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .filtri { grid-template-columns: 2fr 1fr 1fr 2fr auto; } }
.filtri label { display: grid; gap: var(--spazio-1); font-size: var(--testo-sm); font-weight: var(--peso-medio); min-width: 0; }
.filtri input, .filtri select { font: inherit; min-height: 44px; padding: var(--spazio-1) var(--spazio-3); border: 1px solid var(--bordo-forte); border-radius: var(--raggio); background: var(--sfondo-pagina); color: var(--testo); width: 100%; min-width: 0; }