:root {
    /* Redesign "Tutelius" — vedi design_handoff_tutelius_dvr/README.md */
    --colore-accento: #1565c0;
    --colore-accento-scuro: #0d47a1;
    --colore-accento-tenue: #eaf1fb;
    --colore-bordo-accento-tenue: #b8d4ee;
    --colore-testo: #1a1a1a;
    --colore-testo-secondario: #555;
    --colore-testo-terziario: #6b7480;
    --colore-sfondo: #f7f8fa;
    --colore-sfondo-pannello: #fcfcfd;
    --colore-superficie: #ffffff;
    --colore-bordo: #e8eaee;
    /* Bordo di riposo/hover dei controlli (input, checkbox, chip...): scuriti rispetto
       all'originale (#d0d5dd/#b6bec9, 1.47:1 / 1.88:1 su bianco) per rispettare il minimo di
       3:1 richiesto dalla WCAG 2.1 SC 1.4.11 (Non-text Contrast) per i confini dei componenti
       - qui è l'unico segnale del bordo del campo, dato che lo sfondo del controllo (bianco) è
       quasi identico a quello della pagina (#f7f8fa). */
    --colore-bordo-controllo: #8390a5;
    --colore-bordo-controllo-hover: #6c7c93;
    /* Prima non era mai collegata a ::placeholder (vedi sotto), quindi i placeholder usavano il
       colore di default del browser: ora che è agganciata, va scurita per rispettare il 4.5:1
       richiesto dalla WCAG 2.1 SC 1.4.3 per il testo (2.58:1 con il valore originale #9aa2ad). */
    --colore-placeholder: #6c7684;
    --colore-disabilitato: #c7cdd6;
    --colore-scheletro: #eceef1;
    --colore-errore: #c0392b;
    --colore-errore-sfondo: #fdecea;
    --colore-errore-bordo: #f0b8ae;
    --colore-successo: #27ae60;
    --colore-successo-testo: #1d7a49;
    --colore-successo-sfondo: #e7f7ee;
    --colore-successo-bordo: #a9ddc0;
    /* Scurito da #b8860b (3.25:1 su bianco, 3.06:1 sul proprio sfondo .message.warning: sotto
       il 4.5:1 richiesto per il testo dalla WCAG 2.1 SC 1.4.3) mantenendo la stessa tonalità. */
    --colore-avviso: #916a08;
    --colore-avviso-sfondo: #fff8e1;
    --colore-avviso-bordo: #f0e0a0;
    --font-titoli: "Geist", "Helvetica Neue", Arial, sans-serif;
    --font-corpo: "Geist", "Helvetica Neue", Arial, sans-serif;
    /* Superfici (pannelli, card, bottoni) uniformate allo stesso valore, quello di .qr-card:
       prima erano quattro raggi diversi (9/12/16/8px) senza un criterio, oltre a diversi valori
       letterali sparsi nel foglio non legati a nessun token. --raggio-chip resta a parte: è un
       raggio "a pillola" (sempre più largo di metà altezza dell'elemento), categoria diversa da
       uno spigolo arrotondato in px fisso, non va uniformato con gli altri.
       --raggio-campo è tornato al suo valore originale (9px): i campi compilabili sono incassati
       nella card, non superfici che poggiano su di essa, e con lo stesso raggio del contenitore
       si leggevano come un blocco unico. Con l'ombra interna (--ombra-campo-interna) lo scarto
       di raggio è quello che li fa leggere come "scavati". */
    --raggio-campo: 9px;
    --raggio-pannello: 18px;
    --raggio-card: 18px;
    --raggio-chip: 999px;
    --raggio-bottone-testo: 18px;
    --altezza-controllo: 48px;
    --altezza-controllo-protagonista: 56px;
    --altezza-chip: 42px;
    --altezza-bottone-testo: 36px;
    --ombra-card: 0 1px 3px rgba(16, 24, 40, 0.05);
    --ombra-blocco-aperto: 0 2px 8px rgba(21, 101, 192, 0.07);
    --ombra-focus: 0 0 0 3px rgba(21, 101, 192, 0.13);
    /* Ombra interna dei campi compilabili: appena accennata, serve solo a far leggere il campo
       come "incassato" rispetto alla superficie della card su cui poggia. Va sempre tenuta
       insieme a --ombra-focus quando il campo ha il focus, non sostituita. */
    --ombra-campo-interna: inset 0 1px 2px rgba(16, 24, 40, 0.06);
    --transizione: 0.15s ease;

    /* Redesign schermate livello/tempo/misure di rumore e vibrazioni — vedi
       design_handoff_questionario_rischi/README.md. Token dedicati (prefisso --qr-) per i
       grigi/bordi neutri di queste schermate (che restano distinti da quelli globali per non
       toccare il resto dell'app), ma l'accento riusa lo stesso blu del brand (--colore-accento):
       avere due blu-brand paralleli (prima: oklch(0.55 0.19 258) ≈ #156ddd contro #1565c0)
       non ha motivo di esistere ed era solo fonte di deriva visiva. */
    --qr-accento: var(--colore-accento);
    --qr-accento-hover: var(--colore-accento-scuro);
    --qr-bordo: oklch(0.93 0.005 258);
    --qr-bordo-input: oklch(0.9 0.005 258);
    --qr-testo-label: oklch(0.45 0.01 258);
    --qr-testo-secondario: oklch(0.5 0.01 258);
    --qr-testo-eyebrow: oklch(0.55 0.01 258);
    /* Scurito da oklch(0.58 ...) (4.26:1 su bianco, sotto il 4.5:1 richiesto dalla WCAG 2.1 SC
       1.4.3 per il testo normale) mantenendo lo stesso hue/chroma. */
    --qr-testo-contatore: oklch(0.56 0.01 258);
    --qr-testo-hint: oklch(0.52 0.01 258);
    --qr-testo-lavoratori-count: oklch(0.42 0.01 258);
    --qr-nota-sfondo: oklch(0.55 0.19 258 / 0.05);
    --qr-nota-bordo: oklch(0.55 0.19 258 / 0.14);
    --qr-nota-testo: oklch(0.4 0.03 258);
    --qr-ombra-card: 0 1px 3px oklch(0.2 0.01 258 / 0.04);
    --qr-ombra-strip: 0 1px 2px oklch(0.2 0.01 258 / 0.03);
    --qr-ombra-focus: 0 0 0 3px oklch(0.55 0.19 258 / 0.12);
    --qr-avatar-sfondo: oklch(0.55 0.19 258 / 0.12);
    --qr-avatar-testo: oklch(0.45 0.15 258);
    --qr-pill-sfondo: oklch(0.955 0.003 258);
    --qr-pill-bordo: oklch(0.9 0.005 258);
    --qr-pill-testo: oklch(0.44 0.01 258);
    --qr-obbligo-sfondo: oklch(0.6 0.15 145 / 0.11);
    --qr-obbligo-testo: oklch(0.44 0.13 150);
    --qr-riga-sfondo-sel: oklch(0.55 0.19 258 / 0.045);
    --qr-riga-bordo-sel: oklch(0.55 0.19 258 / 0.45);
    --qr-riga-sfondo-lock: oklch(0.6 0.15 145 / 0.05);
    --qr-riga-bordo-lock: oklch(0.6 0.15 145 / 0.28);
    --qr-checkbox-bordo: oklch(0.82 0.008 258);
    --qr-checkbox-bordo-lock: oklch(0.55 0.14 150);
    --qr-checkbox-sfondo-lock: oklch(0.58 0.14 150);

    /* Checklist obblighi esito VDT — vedi esito_1c/ISTRUZIONI.md. Verde/ambra dedicati: i token
       --qr-successo e --qr-avviso-forte sono stati rimossi insieme al verdetto delle card
       livello/tempo di rumore-vibrazioni, quindi qui se ne introduce un set indipendente invece
       di farli rivivere per un componente diverso. */
    --esito-ok: oklch(0.6 0.15 145);
    --esito-ok-ink: oklch(0.44 0.13 150);
    --esito-ok-tint: oklch(0.6 0.15 145 / 0.12);
    /* Giallo di esito unico per tutta l'app: oklch(0.895 0.132 95.7) è esattamente il #f7dc6f
       delle schermate degli agenti fisici (rumore e simili), che qui fa da base anche per il
       verdetto VDT — prima un ambra molto più scuro e saturo (oklch(0.72 0.16 80)), che accanto
       al paglierino delle altre schermate di esito non si leggeva come lo stesso giallo.
       Alfa rialzate rispetto alle vecchie perché la tinta di partenza è molto più chiara: sono
       calcolate per ricomporre su bianco la stessa luminosità dei velati precedenti. L'inchiostro
       resta alla lucentezza di prima (0.48), solo spostato su questa tonalità. */
    --esito-warn: oklch(0.895 0.132 95.7);
    --esito-warn-ink: oklch(0.48 0.11 95.7);
    --esito-warn-tint: oklch(0.895 0.132 95.7 / 0.45);
    --esito-warn-panel: oklch(0.895 0.132 95.7 / 0.19);
    --esito-warn-panel-border: oklch(0.895 0.132 95.7 / 0.85);
    --esito-muted-bg: oklch(0.96 0.004 258);
}

* {
    box-sizing: border-box;
}

/* Regola valida per tutta l'app: un elemento con l'attributo hidden deve sempre sparire, a
   prescindere da qualunque display/flex/grid dichiarato dalla sua classe. Senza questo, una
   classe con un proprio "display" (es. .bt { display: inline-flex }) ha la STESSA specificità
   della regola [hidden] dello user-agent (0,1,0 anche lei) — e vince comunque, perché l'origine
   "author" ha sempre priorità sull'origine "user-agent" a parità di specificità: impostare
   l'attributo hidden via JS non basta più a nascondere l'elemento (bug reale, trovato su
   #back-btn/.bt). Prima di questa regola il rimedio era una `.classe[hidden] { display: none }`
   scritta a mano per ogni singola classe che se ne è accorta (ne restavano più di una decina
   sparse nel foglio); [hidden]:not(.prog) ha specificità 0,2,0 (l'attributo più la classe dentro
   :not), quindi batte da sola qualsiasi classe singola presente o futura senza bisogno di
   companion rule ad-hoc, e !important la rende valida anche contro selettori più specifici.
   .prog è l'unica eccezione voluta: nasconde solo la visibilità (vedi .prog[hidden] più sotto),
   non il display, per non far "saltare" la larghezza delle colonne della barra in alto. */
[hidden]:not(.prog) {
    display: none !important;
}

html {
    scrollbar-gutter: stable;
}

html, body {
    min-height: 100%;
}

body {
    margin: 0;
    background: var(--colore-sfondo);
    font-family: var(--font-titoli);
    color: var(--colore-testo);
    scrollbar-gutter: stable;
}

/* --- Guscio dell'app: full-screen desktop e mobile con header e footer sticky --- */

.app-shell {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    width: 100%;
    padding: 0;
    margin: 0;
    background: var(--colore-sfondo);
}

.scr {
    width: 100%;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--colore-sfondo);
    border: none;
    border-radius: 0;
    box-shadow: none;
    position: relative;
}

.top {
    position: sticky;
    top: 0;
    z-index: 100;
    width: 100%;
    background: var(--colore-superficie);
    border-bottom: 1px solid var(--colore-bordo);
    padding: 16px 0;
    flex: none;
    transition: box-shadow 0.15s ease;
}

/* Ombra lieve che stacca le barre sticky dal contenuto che scorre sotto/sopra, visibile solo
   quando la pagina è davvero scorribile (body.contenuto-scorribile, vedi aggiornaOmbraScroll in
   script.js): se la schermata sta tutta nel viewport non c'è nulla da cui staccarsi.

   Prende il posto della sfumatura "in stile chat AI" introdotta in 49d626b, che dava due
   artefatti distinti: sfumava verso `transparent`, cioè nero trasparente, e a metà corsa passava
   per un grigio sporco invece di restare sulla tinta di sfondo; ed era uno pseudo-elemento
   dipinto FUORI dal box di un elemento sticky, da cui i "fantasmi" sullo scroll rapido che un
   layer di composizione dedicato (transform: translateZ(0), rimosso qui insieme al resto) non
   era bastato a togliere. L'ombra sta dentro il box del suo elemento e non interpola alfa. */
body.contenuto-scorribile .top {
    box-shadow: 0 4px 14px rgba(16, 24, 40, 0.04);
}

.top-contenitore {
    width: 100%;
    max-width: 70%;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 16px;
}

.top-sinistra {
    display: flex;
    align-items: center;
    gap: 12px;
    justify-self: start;
}

.brand {
    height: 22px;
    width: auto;
    display: block;
}

.prog {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 320px;
    max-width: 100%;
    justify-self: center;
}

.prog[hidden] {
    visibility: hidden;
}

.progt {
    flex: 1;
    height: 6px;
    border-radius: var(--raggio-chip);
    background: var(--colore-bordo);
    overflow: hidden;
}

.progf {
    height: 100%;
    min-width: 20px;
    border-radius: var(--raggio-chip);
    background: var(--colore-accento);
    transition: width 0.2s ease;
}

.progl {
    font-family: var(--font-titoli);
    font-weight: 500;
    font-size: 13px;
    color: var(--colore-testo-secondario);
    white-space: nowrap;
}

.top-destra {
    justify-self: end;
    display: flex;
    align-items: center;
}

.body {
    padding: 44px 0 54px;
    display: flex;
    /* .body ha come figli diretti <form id="pdf-form"> e <p id="message">: senza
       flex-direction: column finiscono affiancati in riga invece che impilati, e un
       messaggio con testo lungo (es. quello dell'ambiente di test) appare a destra del
       form invece che sotto, sfasando il layout. */
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    flex: 1;
    width: 100%;
    min-height: 0;
    background: var(--colore-sfondo);
    scrollbar-gutter: stable;
    scrollbar-width: thin;
    scrollbar-color: var(--colore-bordo-controllo) transparent;
}

.body::-webkit-scrollbar {
    width: 7px;
}

.body::-webkit-scrollbar-track {
    background: transparent;
}

.body::-webkit-scrollbar-thumb {
    background-color: var(--colore-bordo-controllo);
    border-radius: var(--raggio-chip);
}

.body::-webkit-scrollbar-thumb:hover {
    background-color: var(--colore-bordo-controllo-hover);
}

.foot {
    position: sticky;
    bottom: 0;
    z-index: 100;
    width: 100%;
    background: var(--colore-sfondo-pannello);
    border-top: 1px solid var(--colore-bordo);
    padding: 16px 0;
    flex: none;
    transition: box-shadow 0.15s ease;
}

/* Speculare all'ombra di .top, stessa condizione di visibilità. */
body.contenuto-scorribile .foot {
    box-shadow: 0 -4px 14px rgba(16, 24, 40, 0.05);
}

.foot-contenitore {
    width: 100%;
    max-width: 70%;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

/* Contenitore generico per pagine fuori dal wizard (login, dashboard) che devono
   condividere la stessa larghezza/centratura del contenuto del wizard: vedi
   .top-contenitore/.foot-contenitore e i relativi breakpoint qui sotto. */
.contenitore-pagina {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 70%;
    margin: 0 auto;
}

/* --- Form ---
   Va definita prima dei breakpoint qui sotto (come .top-contenitore/.foot-contenitore/
   .contenitore-pagina), non dopo: a parità di specificità vince l'ultima regola
   nell'ordine del foglio, quindi dopo i breakpoint la regola base ne annullerebbe
   l'effetto e il form non si allargherebbe mai sotto i 900px. */
form {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    max-width: 70%;
    margin: 0 auto;
}

.foot-destra {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-left: auto;
}

.saved {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-family: var(--font-titoli);
    font-weight: 500;
    font-size: 13px;
    color: var(--colore-testo-secondario);
}


.dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--colore-successo);
}

/* --- Indice di navigazione a fasi (design_handoff_nav_indice) --- */

.navbtn {
    width: 36px;
    height: 36px;
    border-radius: var(--raggio-card);
    border: none;
    background: transparent;
    color: var(--colore-testo-secondario);
    display: grid;
    place-items: center;
    cursor: pointer;
    flex: none;
}

.navbtn:hover {
    background: var(--colore-sfondo-pannello);
    color: var(--colore-testo);
}

.navov {
    position: fixed;
    inset: 0;
    background: rgba(20, 24, 30, 0.34);
    display: flex;
    z-index: 200;
    opacity: 0;
    transition: opacity 0.22s ease;
}

.navov.aperto {
    opacity: 1;
}

.navrail {
    width: 300px;
    max-width: 85%;
    height: 100%;
    background: var(--colore-superficie);
    border-right: 1px solid var(--colore-bordo);
    /* Solo il lato destro è arrotondato: il sinistro è a filo del bordo della finestra, dove un
       raggio lascerebbe vedere lo sfondo negli angoli. Stesso raggio dei pannelli. */
    border-radius: 0 var(--raggio-pannello) var(--raggio-pannello) 0;
    display: flex;
    flex-direction: column;
    box-shadow: 2px 0 18px rgba(16, 24, 40, 0.12);
    transform: translateX(-100%);
    transition: transform 0.22s ease;
}

.navov.aperto .navrail {
    transform: translateX(0);
}

@media (prefers-reduced-motion: reduce) {
    .navov,
    .navrail {
        transition: none;
    }
}

.navhd {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 20px;
    border-bottom: 1px solid var(--colore-bordo);
}

.navttl {
    font-family: var(--font-titoli);
    font-weight: 700;
    font-size: 15px;
    letter-spacing: -0.01em;
}

.navbody {
    flex: 1;
    overflow-y: auto;
    padding: 12px 16px 28px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    scrollbar-gutter: stable;
    scrollbar-width: thin;
    scrollbar-color: var(--colore-bordo-controllo) transparent;
}

.navbody::-webkit-scrollbar {
    width: 6px;
}

.navbody::-webkit-scrollbar-track {
    background: transparent;
}

.navbody::-webkit-scrollbar-thumb {
    background-color: var(--colore-bordo-controllo);
    border-radius: var(--raggio-chip);
}

.nav-modulo {
    display: flex;
    align-items: center;
    padding: 18px 4px 6px;
    font-family: var(--font-titoli);
    font-weight: 800;
    font-size: 11px;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--colore-accento);
    border-bottom: 1px solid var(--colore-bordo);
    margin-top: 8px;
    margin-bottom: 6px;
}

.nav-modulo:first-child {
    margin-top: 0;
    padding-top: 4px;
}

.nav-fase-item {
    display: flex;
    flex-direction: column;
    background: transparent;
}

/* Intestazione di fase: titolo e chevron sono due bottoni affiancati, con bersagli diversi (vedi
   renderIndiceNavigazione in script.js). Il titolo prende tutto lo spazio residuo, il chevron
   resta della sua larghezza con un'area di click propria. */
.nav-fase-riga {
    display: flex;
    align-items: center;
}

.nav-chevron-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    padding: 8px 4px;
    border: none;
    background: transparent;
    cursor: pointer;
    color: inherit;
}

/* Neutralizza la regola globale "button:hover" (0-1-1), che qui dipingerebbe di blu il quadratino
   del chevron. Serve una regola sullo stato :hover, non basta il background della regola base:
   quella non entra in gioco quando il puntatore è sopra. Stesso motivo per cui .nav-fase-btn ha
   la sua .nav-fase-btn:hover. */
.nav-chevron-btn:hover {
    background: transparent;
}

.nav-fase-btn {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    min-width: 0;
    padding: 8px 4px;
    border: none;
    background: transparent;
    font-family: var(--font-titoli);
    font-weight: 500;
    font-size: 13.5px;
    text-align: left;
    color: var(--colore-testo);
    cursor: pointer;
    transition: color 0.15s ease;
    user-select: none;
}

.nav-fase-btn:hover:not(:disabled) {
    background: transparent;
    color: var(--colore-accento);
}

.nav-fase-btn.in_corso {
    font-weight: 700;
    color: var(--colore-testo);
    background: transparent;
}

.nav-fase-btn.completata {
    color: var(--colore-testo);
    background: transparent;
}

.nav-fase-btn.bloccata {
    color: var(--colore-testo-terziario);
    background: transparent;
    cursor: default;
}

.nav-fase-titolo {
    flex: 1;
}

/* Indicatore di stato a pallino / badge */
.nav-dot-stato {
    width: 18px;
    height: 18px;
    flex: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.nav-dot-stato.completata {
    background: var(--colore-successo);
    color: #ffffff;
}

.nav-dot-stato.completata svg {
    width: 11px;
    height: 11px;
}

.nav-dot-stato.in_corso {
    background: var(--colore-accento);
}

.nav-dot-stato.in_corso::after {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #ffffff;
}

.nav-dot-stato.bloccata {
    background: var(--colore-bordo);
    color: var(--colore-testo-terziario);
}

.nav-dot-stato.bloccata svg {
    width: 10px;
    height: 10px;
}

/* Chevron per fasi con passi */
.nav-chevron {
    width: 16px;
    height: 16px;
    flex: none;
    color: var(--colore-testo-terziario);
    transition: transform 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.nav-fase-item.aperto .nav-chevron {
    transform: rotate(90deg);
}

/* Accordion body per i passi */
.nav-accordion-corpo {
    display: none;
    flex-direction: column;
    gap: 2px;
    padding-left: 18px;
    padding-bottom: 6px;
    padding-top: 2px;
}

.nav-fase-item.aperto .nav-accordion-corpo {
    display: flex;
}

/* Passo Item */
.nav-passo-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 6px 4px;
    border: none;
    background: transparent;
    font-family: var(--font-titoli);
    font-weight: 500;
    font-size: 12.5px;
    text-align: left;
    color: var(--colore-testo-secondario);
    cursor: pointer;
    transition: color 0.15s ease;
}

.nav-passo-btn:hover:not(:disabled) {
    background: transparent;
    color: var(--colore-accento);
}

.nav-passo-btn.in_corso {
    font-weight: 700;
    color: var(--colore-testo);
    background: transparent;
}

.nav-passo-btn.completata {
    color: var(--colore-testo-secondario);
    background: transparent;
}

.nav-passo-btn.bloccata {
    color: var(--colore-testo-terziario);
    background: transparent;
    cursor: default;
}

.nav-passo-btn .nav-dot-stato {
    width: 14px;
    height: 14px;
}

.nav-passo-btn .nav-dot-stato.completata svg {
    width: 9px;
    height: 9px;
}

.nav-passo-btn .nav-dot-stato.in_corso::after {
    width: 4px;
    height: 4px;
}

.nav-passo-btn .nav-dot-stato.bloccata svg {
    width: 8px;
    height: 8px;
}

@media (max-width: 900px) {
    .top-contenitore,
    .foot-contenitore,
    form,
    .contenitore-pagina {
        max-width: 92%;
    }

    .prog {
        width: 220px;
    }
}

@media (max-width: 650px) {
    .top-contenitore {
        grid-template-columns: auto 1fr auto;
        gap: 8px;
    }

    .prog {
        width: auto;
    }

    .progl {
        display: none;
    }
}

/* --- Tipografia --- */

h1, h2, h3, h4, h5, label, .fase-titolo, button {
    font-family: var(--font-titoli);
}

h2 {
    font-size: 30px;
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--colore-testo);
    margin: 0 0 0.5rem;
}

h3 {
    font-size: 17px;
    line-height: 1.3;
    font-weight: 600;
    color: var(--colore-testo);
    margin: 1.2rem 0 0.8rem;
}

/* h3 con icona lucide davanti (es. "Sede legale", "Ulteriori sedi operative"): senza questo
   l'icona segue il default inline/baseline e non risulta centrata verticalmente col testo. */
h3:has(svg) {
    display: flex;
    align-items: center;
    gap: 8px;
}

h3 svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

h4 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--colore-testo);
    margin: 0;
}

.descrizione {
    font-family: var(--font-titoli);
    font-weight: 400;
    font-size: 15px;
    line-height: 1.55;
    color: var(--colore-testo-secondario);
    margin: 0 0 1.6rem;
    text-wrap: pretty;
}

label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: var(--colore-testo-secondario);
    margin-bottom: 7px;
}

.schermata {
    display: flex;
    flex-direction: column;
    width: 100%;
}

/* Colonna per schermate a più elementi (lavoratori, assegnazione mansioni, SPP, bozza) */
.schermata-larga {
    width: 100%;
}

/* --- Spaziatura verticale unificata, pulita ed equilibrata per gli elementi delle schermate --- */

/* 1. Titoli, sovratitoli e descrizioni introduttive */
.schermata > h2,
.subpasso-fase3 > h2 {
    margin-top: 0;
    margin-bottom: 8px;
}

.schermata > .descrizione,
.subpasso-fase3 > .descrizione {
    margin-top: 0;
    margin-bottom: 20px;
}

.schermata > h2 + .descrizione,
.subpasso-fase3 > h2 + .descrizione {
    margin-top: 0;
    margin-bottom: 20px;
}

/* Quando il titolo della schermata porta con sé una pillola (es. "Obbligatorio per legge"), h2
   viene messo dentro un .misure-sezione-titolo-riga al posto di stare da solo: qui gli va dato lo
   stesso spazio che avrebbe come h2 diretto (specificità più alta di quella usata per lo stesso
   wrapper a metà passo, vedi .misure-sezione-titolo-riga più sotto, cosi non confligge). Il
   secondo selettore di ogni coppia copre il caso in cui prima ci sia anche la pillola-agente-
   fisico (span.pillola-agente-fisico, inserita da JS prima della riga titolo): in quel caso la
   riga titolo non è più il primo figlio della schermata. */
.schermata > .misure-sezione-titolo-riga:first-child,
.schermata > .pillola-agente-fisico + .misure-sezione-titolo-riga {
    margin-top: 0;
    margin-bottom: 8px;
}

.schermata > .misure-sezione-titolo-riga:first-child + .descrizione,
.schermata > .pillola-agente-fisico + .misure-sezione-titolo-riga + .descrizione {
    margin-top: 0;
    margin-bottom: 20px;
}

.schermata > .pillola-agente-fisico,
.subpasso-fase3 > .sopratitolo {
    margin-top: 0;
    margin-bottom: 10px;
}

.schermata > .badge-bozza {
    margin-top: 0;
    margin-bottom: 12px;
}

.schermata > .nuvola {
    margin-top: 0;
    margin-bottom: 20px;
}

/* 2. Etichette di campo e domande */
.schermata > label,
.subpasso-fase3 > label {
    margin-top: 18px;
    margin-bottom: 6px;
}

.schermata > h2 + label,
.schermata > .descrizione + label,
.schermata > .nuvola + label,
.subpasso-fase3 > h2 + label,
.subpasso-fase3 > .descrizione + label {
    margin-top: 0;
}

.schermata > .etichetta-campo,
.schermata > p.etichetta-campo,
.subpasso-fase3 > .etichetta-campo,
.subpasso-fase3 > p.etichetta-campo {
    margin-top: 22px;
    margin-bottom: 8px;
}

.schermata > h2 + .etichetta-campo,
.schermata > h2 + p.etichetta-campo,
.schermata > .descrizione + .etichetta-campo,
.schermata > .descrizione + p.etichetta-campo,
.schermata > .nuvola + .etichetta-campo,
.schermata > .nuvola + p.etichetta-campo,
.subpasso-fase3 > h2 + .etichetta-campo,
.subpasso-fase3 > .descrizione + .etichetta-campo {
    margin-top: 0;
}

.schermata > .misure-sezione-sottotitolo,
.subpasso-fase3 > .misure-sezione-sottotitolo {
    margin-top: -2px;
    margin-bottom: 12px;
}

/* 3. Gruppi di input, radio, checkbox e select */
.schermata > .radio-gruppo,
.schermata > .radio-group,
.schermata > .radio-gruppo-colonna,
.schermata > .checkbox-gruppo,
.schermata > fieldset,
.subpasso-fase3 > .radio-gruppo,
.subpasso-fase3 > .radio-group,
.subpasso-fase3 > .radio-gruppo-colonna,
.subpasso-fase3 > .checkbox-gruppo,
.subpasso-fase3 > fieldset {
    margin-top: 0;
    margin-bottom: 20px;
}

/* Le griglie radio portano lo spazio sopra invece che sotto, della stessa altezza che avevano. */
.schermata > .radio-gruppo.radio-gruppo-griglia,
.schermata > .radio-gruppo.radio-gruppo-griglia-2,
.schermata > .radio-group.radio-gruppo-griglia,
.schermata > .radio-group.radio-gruppo-griglia-2,
.schermata > .radio-gruppo-colonna.radio-gruppo-griglia,
.schermata > fieldset.radio-gruppo-griglia,
.schermata > fieldset.radio-gruppo-griglia-2,
.subpasso-fase3 > .radio-gruppo.radio-gruppo-griglia,
.subpasso-fase3 > .radio-gruppo.radio-gruppo-griglia-2,
.subpasso-fase3 > .radio-group.radio-gruppo-griglia,
.subpasso-fase3 > .radio-group.radio-gruppo-griglia-2 {
    margin-top: 20px;
    margin-bottom: 0;
}

.schermata > .radio-option,
.schermata > .checkbox-option,
.subpasso-fase3 > .radio-option,
.subpasso-fase3 > .checkbox-option {
    margin-top: 18px;
    margin-bottom: 16px;
}

input + .checkbox-option,
select + .checkbox-option,
textarea + .checkbox-option,
.row2 + .checkbox-option,
.campo-con-unita + .checkbox-option,
input + .radio-option,
select + .radio-option,
textarea + .radio-option,
.row2 + .radio-option,
.campo-con-unita + .radio-option {
    margin-top: 20px;
}

.schermata > input,
.schermata > select,
.schermata > textarea,
.schermata > .campo-con-unita,
.schermata > .row2,
.subpasso-fase3 > input,
.subpasso-fase3 > select,
.subpasso-fase3 > textarea {
    margin-top: 0;
    margin-bottom: 16px;
}

.schermata > .nota-campo,
.subpasso-fase3 > .nota-campo {
    margin-top: 10px;
    margin-bottom: 22px;
}

/* 4. Blocchi complessi, card ed esiti */
.schermata > .gruppo,
.subpasso-fase3 > .gruppo {
    margin-top: 0;
    margin-bottom: 20px;
}

.schermata > .box-info {
    margin-top: 8px;
    margin-bottom: 20px;
}

.schermata > .lst {
    margin-top: 4px;
    margin-bottom: 20px;
}

.schermata > .misure-sezione-titolo-riga {
    margin-top: 22px;
    margin-bottom: 4px;
}

.schermata > .misure-obblighi-sezione {
    margin-top: 20px;
    margin-bottom: 20px;
}

.schermata > .griglia-pool {
    margin-top: 0;
    margin-bottom: 20px;
}

.schermata > h3 {
    margin-top: 18px;
    margin-bottom: 8px;
}

.schermata > .message {
    margin-top: 0;
    margin-bottom: 16px;
}

/* 4-bis. Campi di un passo raccolti in una card (<div class="qr-card qr-card-campi">)
   Tutta la spaziatura qui sopra è costruita su selettori di FIGLIO DIRETTO (".schermata > input",
   ".schermata > label", ...): mettere i campi dentro una card aggiunge un livello di annidamento e
   quei selettori smettono di applicarsi in blocco - è lo stesso inciampo già visto con
   .misure-sezione-titolo-riga quando .misure-sezione è finita dentro una .qr-card. Invece di
   inseguire le regole rotte una a una, qui la card diventa un terzo "contesto di layout" accanto a
   .schermata e .subpasso-fase3, con gli STESSI valori del blocco qui sopra: se cambiano lì, vanno
   cambiati anche qui.
   Nota: gli <input> non compaiono in questo elenco di proposito - il loro margine sotto è già 0
   per via della regola base (input:not(...), specificità più alta di quella dei selettori di
   contesto), e lo spazio dopo un campo lo dà il margin-top della label successiva. */
.qr-card-campi > label {
    margin-top: 18px;
    margin-bottom: 6px;
}

.qr-card-campi > .etichetta-campo,
.qr-card-campi > p.etichetta-campo {
    margin-top: 22px;
    margin-bottom: 8px;
}

.qr-card-campi > select,
.qr-card-campi > textarea,
.qr-card-campi > .campo-con-unita,
.qr-card-campi > .row2 {
    margin-top: 0;
    margin-bottom: 16px;
}

.qr-card-campi > .radio-gruppo,
.qr-card-campi > .radio-group,
.qr-card-campi > .radio-gruppo-colonna,
.qr-card-campi > .checkbox-gruppo,
.qr-card-campi > fieldset {
    margin-top: 0;
    margin-bottom: 20px;
}

.qr-card-campi > .radio-gruppo.radio-gruppo-griglia,
.qr-card-campi > .radio-gruppo.radio-gruppo-griglia-2,
.qr-card-campi > .radio-group.radio-gruppo-griglia,
.qr-card-campi > .radio-group.radio-gruppo-griglia-2,
.qr-card-campi > .radio-gruppo-colonna.radio-gruppo-griglia,
.qr-card-campi > fieldset.radio-gruppo-griglia,
.qr-card-campi > fieldset.radio-gruppo-griglia-2 {
    margin-top: 20px;
    margin-bottom: 0;
}

.qr-card-campi > .radio-option,
.qr-card-campi > .checkbox-option {
    margin-top: 18px;
    margin-bottom: 16px;
}

.qr-card-campi > .nota-campo {
    margin-top: 10px;
    margin-bottom: 22px;
}

/* Primo e ultimo figlio: lo spazio contro il bordo lo dà il padding della card, non il margine
   dell'elemento. La classe è ripetuta (.qr-card-campi.qr-card-campi, 0-3-0) per stare sopra a
   TUTTE le regole qui sopra: contarci sull'ordine di dichiarazione non basta, perché quelle
   qualificate anche per tipo - "p.etichetta-campo" - valgono 0-2-1 e batterebbero un
   ":first-child" a 0-2-0. Bug vero: un p.etichetta-campo primo figlio della card (sotto-passo
   "Vuoi aggiungere un'altra attività") si teneva i suoi 22px di margine sopra il padding.
   Il selettore di "ultimo" salta gli elementi nascosti - es. #titolare-container nella schermata
   2, hidden finché non si sceglie "No": senza quel ramo resterebbe lui l'ultimo figlio
   strutturale e l'elemento davvero visibile terrebbe il suo margine sotto. */
.qr-card-campi.qr-card-campi > :first-child {
    margin-top: 0;
}

.qr-card-campi.qr-card-campi > :last-child,
.qr-card-campi.qr-card-campi:has(> :last-child[hidden]) > :nth-last-child(2) {
    margin-bottom: 0;
}

/* Il campo del titolare compare sotto la griglia radio quando si risponde "No". Da quando le
   griglie portano lo spazio sopra invece che sotto non spingono più giù ciò che le segue, quindi
   lo stacco lo mette lui: stesso valore che la griglia usa sopra di sé. */
#titolare-container {
    margin-top: 20px;
}

/* 5. Schermata presentazione fase (intro) */
.schermata-fase-intro {
    align-items: flex-start;
    text-align: left;
    justify-content: center;
    min-height: 45vh;
}

.schermata-fase-intro > .fase-emoji {
    margin-top: 0;
    margin-bottom: 20px;
}

.schermata-fase-intro > .fase-titolo {
    margin-top: 0;
    margin-bottom: 8px;
}

.schermata-fase-intro > .fase-sottotitolo {
    margin-top: 0;
    margin-bottom: 0;
}

@keyframes ingresso-passo {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.schermata:not([hidden]) {
    animation: ingresso-passo 0.3s ease;
}

@keyframes ingresso-contenuto {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Rigiocata via JS (vedi animaIngressoContenuto) ogni volta che un container ricostruisce il
   proprio contenuto restando sulla stessa schermata (es. passando da un impianto al successivo
   in una serie ripetuta): l'animazione della sezione (.schermata sopra) non basta da sola,
   perché in quel caso la <section> non si nasconde/mostra di nuovo. */
.qr-ingresso-contenuto {
    animation: ingresso-contenuto 0.25s ease;
}

/* Riquadro colorato attorno all'icona di ogni schermata di presentazione fase: sfondo pastello +
   icona in una tonalità più accesa della stessa sfumatura (una coppia per fase, sotto). Il
   colore di base qui è un fallback per le sole fasi ancora senza coppia dedicata. */
.fase-emoji {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    border-radius: var(--raggio-card);
    background: var(--colore-accento-tenue);
    color: var(--colore-accento);
    margin-bottom: 1.4rem;
}

.fase-emoji svg {
    width: 2.5rem;
    height: 2.5rem;
    stroke-width: 1.6;
}

.fase-emoji-presentazione { background: #dce9fa; color: #1565c0; }
.fase-emoji-lavoratori { background: #e8def8; color: #6a3fa0; }
.fase-emoji-ambiente { background: #fbe4cf; color: #c05e00; }
.fase-emoji-macchinari { background: #e4e8eb; color: #455a64; }
.fase-emoji-videoterminali { background: #d8ecfa; color: #0277bd; }
.fase-emoji-agenti-fisici { background: #d8f0ec; color: #00695c; }
.fase-emoji-mmc { background: #ece1da; color: #6d4c41; }
.fase-emoji-chimico { background: #eddcf5; color: #7b1fa2; }
.fase-emoji-cmr { background: #fbe2e2; color: #b71c1c; }
.fase-emoji-biologico { background: #e1f0da; color: #33691e; }
.fase-emoji-condizioni-particolari { background: #dde3fa; color: #303f9f; }
.fase-emoji-stress { background: #fbdde8; color: #ad1457; }
.fase-emoji-microclima { background: #d5eef1; color: #00697a; }

.fase-titolo {
    font-size: 34px;
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--colore-testo);
    margin: 0 0 0.8rem;
}

.fase-sottotitolo {
    font-family: var(--font-titoli);
    font-weight: 400;
    font-size: 16px;
    line-height: 1.55;
    color: var(--colore-testo-secondario);
    margin: 0;
    /* .schermata-fase-intro ha align-items: flex-start (per allineare emoji/titolo a sinistra
       nel layout "hero" verticalmente centrato): senza width:100% qui, questo <p> si
       restringerebbe al proprio contenuto invece di occupare tutta la larghezza del
       container, come fa .descrizione nelle schermate normali (dove align-items resta
       stretch di default). */
    width: 100%;
    text-wrap: pretty;
}

.box-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px 16px;
    padding: 15px 17px;
    margin: 0 0 1.2rem;
    border-radius: var(--raggio-pannello);
    background: var(--colore-accento-tenue);
    border: 1px solid var(--colore-bordo-accento-tenue);
    font-family: var(--font-titoli);
    font-weight: 400;
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--colore-testo);
}

.box-info .badge-norma {
    margin-left: auto;
    flex-shrink: 0;
}

.nota-campo,
p.nota-campo {
    margin: 10px 0 22px 0;
    font-family: var(--font-titoli);
    font-size: 0.85rem;
    line-height: 1.45;
    color: var(--colore-testo-secondario);
}

.gruppo > .nota-campo {
    /* Stesso stacco che la nota ha nelle card (22px): è la nota a distanziare i campi che seguono,
       ora che né il gap di .gruppo né un margine su .row2 ci mettono più del loro. */
    margin: 2px 0 22px 0;
}

/* --- Campi --- */

input:not([type="checkbox"]):not([type="radio"]):not([type="number"]),
select,
textarea {
    display: block;
    width: 100%;
    height: var(--altezza-controllo);
    padding: 0 14px;
    margin-bottom: 0;
    border: 1px solid var(--colore-bordo-controllo);
    border-radius: var(--raggio-campo);
    background: var(--colore-superficie);
    color: var(--colore-testo);
    font-family: var(--font-titoli);
    font-size: 16px;
    box-shadow: var(--ombra-campo-interna);
    transition: border-color var(--transizione), box-shadow var(--transizione);
}

/* --colore-placeholder non era mai stata collegata qui prima: i placeholder usavano il grigio
   di default del browser (opacità ridotta in Firefox, che va annullata esplicitamente per non
   perdere di nuovo il contrasto appena corretto sulla variabile). */
input::placeholder,
textarea::placeholder {
    color: var(--colore-placeholder);
    opacity: 1;
}

/* Campi numerici compatti (3-4 cifre) per evitare allungamenti e impedire che gli span trasbordino */
input[type="number"] {
    display: block;
    width: 80px;
    max-width: 80px;
    height: var(--altezza-controllo);
    padding: 0 10px;
    margin-bottom: 0;
    border: 1px solid var(--colore-bordo-controllo);
    border-radius: var(--raggio-campo);
    background: var(--colore-superficie);
    color: var(--colore-testo);
    font-family: var(--font-titoli);
    font-size: 15px;
    box-shadow: var(--ombra-campo-interna);
    box-sizing: border-box;
    flex: 0 0 80px;
    transition: border-color var(--transizione), box-shadow var(--transizione);
}

#sl-cap,
#so-cap {
    width: 110px;
    max-width: 110px;
    flex: 0 0 110px;
}

input:hover,
select:hover,
textarea:hover {
    border-color: var(--colore-bordo-controllo-hover);
}

input:focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: var(--colore-accento);
    box-shadow: var(--ombra-focus);
}

/* Anello di focus + ombra interna insieme: con il solo anello il campo perderebbe l'incasso
   proprio mentre lo si sta compilando. Stesso filtro :not() della regola base qui sopra, perché
   "input:focus" da solo prenderebbe anche checkbox e radio - che sono disegnati su misura
   (appearance: none) e su cui un'ombra interna si vedrebbe eccome. */
input:not([type="checkbox"]):not([type="radio"]):focus,
select:focus,
textarea:focus {
    box-shadow: var(--ombra-focus), var(--ombra-campo-interna);
}

textarea {
    height: auto;
    min-height: 84px;
    padding: 13px 14px;
    line-height: 1.55;
    resize: vertical;
}

/* Stile uniformato al redesign rumore/vibrazioni (vedi .qr-riga-opzione più sotto): card bianca,
   bordo/raggio/padding maggiorati, checkbox/radio custom più grandi, sfondo che segue lo stato
   (selezionato = tenue blu, bloccato/obbligatorio = tenue verde). Applicato a livello globale così
   ogni categoria del documento (non solo rumore/vibrazioni) eredita lo stesso linguaggio visivo. */
.checkbox-option,
.radio-option {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 17px 20px;
    border: 1.5px solid var(--qr-bordo);
    border-radius: var(--raggio-card);
    background: #fff;
    cursor: pointer;
    font-family: var(--font-titoli);
    font-weight: 500;
    font-size: 15.5px;
    line-height: 1.4;
    color: var(--colore-testo);
    box-sizing: border-box;
    transition: border-color 0.15s, background 0.15s;
}

.radio-option {
    margin-bottom: 0.7rem;
}

.checkbox-option {
    margin-bottom: 14px;
}

.checkbox-option:has(input:checked),
.radio-option:has(input:checked) {
    background: var(--qr-riga-sfondo-sel);
    border-color: var(--qr-riga-bordo-sel);
}

.checkbox-option:has(input:disabled),
.radio-option:has(input:disabled) {
    background: var(--qr-riga-sfondo-lock);
    border-color: var(--qr-riga-bordo-lock);
    cursor: default;
}

.checkbox-option input,
.radio-option input {
    appearance: none;
    -webkit-appearance: none;
    width: 21px;
    height: 21px;
    margin: 1px 0 0 0;
    border: 1.5px solid var(--qr-checkbox-bordo);
    border-radius: 6px;
    background: #fff;
    flex: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: none;
    transition: border-color 0.15s, background 0.15s;
}

.radio-option input {
    border-radius: 50%;
}

.checkbox-option input::before {
    content: "";
    color: #fff;
    font-size: 13px;
    font-weight: 800;
    line-height: 1;
}

.radio-option input::before {
    content: "";
    display: block;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: transparent;
    transition: background 0.15s ease, transform 0.15s ease;
    transform: scale(0);
}

.checkbox-option input:checked::before {
    content: "✓";
}

.checkbox-option input:checked {
    border-color: var(--qr-accento);
    background: var(--qr-accento);
}

.radio-option input:checked {
    border-color: var(--qr-accento);
    background: #fff;
}

.radio-option input:checked::before {
    background: var(--qr-accento);
    transform: scale(1);
}

.checkbox-option input:disabled,
.radio-option input:disabled {
    cursor: default;
}

.checkbox-option input:disabled:checked {
    border-color: var(--qr-checkbox-bordo-lock);
    background: var(--qr-checkbox-sfondo-lock);
}

.radio-option input:disabled:checked {
    border-color: var(--qr-checkbox-bordo-lock);
    background: #fff;
}

.radio-option input:disabled:checked::before {
    background: var(--qr-checkbox-sfondo-lock);
}

/* Miniature fotografiche e didattiche per checkbox e radio */
.checkbox-img {
    width: 60px;
    height: 60px;
    object-fit: contain;
    border-radius: var(--raggio-card);
    flex-shrink: 0;
    mix-blend-mode: multiply;
    background: transparent;
}

.checkbox-option:has(.checkbox-img),
.radio-option:has(.checkbox-img),
.qr-riga-opzione:has(.checkbox-img) {
    align-items: center;
    gap: 16px;
}

fieldset {
    border: none;
    padding: 0;
    margin: 0;
    min-width: 0;
}

/* Checkbox (scelta multipla): disposte una sotto l'altra a tutta larghezza */
.checkbox-gruppo {
    border: none;
    padding: 0;
    margin: 0 0 1.3rem;
    display: flex;
    flex-direction: column;
}

.checkbox-gruppo .checkbox-option:last-child {
    margin-bottom: 0;
}

/* Layout per gruppi di opzioni radio:
   Di default (e per numero dispari o testo lungo > 140 caratteri), gli elementi sono disposti uno sotto l'altro.
   Quando il numero di opzioni è pari e il testo di ciascuna opzione è breve (<= 140 caratteri), viene applicata la classe .radio-gruppo-griglia (griglia a 2 colonne). */
fieldset.radio-group,
fieldset.radio-gruppo,
.radio-group,
.radio-gruppo,
.radio-gruppo-colonna {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0 0 1.3rem;
}

/* Griglia a 2 colonne applicata solo per opzioni pari con testo compatto */
.radio-group.radio-gruppo-griglia,
.radio-gruppo.radio-gruppo-griglia,
.radio-group.radio-gruppo-griglia-2,
.radio-gruppo.radio-gruppo-griglia-2,
fieldset.radio-group.radio-gruppo-griglia,
fieldset.radio-gruppo.radio-gruppo-griglia {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
}

/* Ribalta anche il margine che .radio-gruppo dà a tutti i suoi gruppi (1.3rem): per le griglie
   lo spazio sta sopra. Le griglie dentro contenitori che azzerano entrambi i margini non sono
   toccate, perché quella regola ha specificità maggiore e non c'è nessuno spazio da spostare. */
/* Ribalta sopra il margine che la regola base qui sopra dà ai gruppi radio. Ogni selettore ripete
   la classe di base (.radio-group / .radio-gruppo): così il ribaltamento tocca solo le griglie che
   quel margine ce l'avevano davvero, e non quelle che non ne hanno mai avuto uno. I selettori con
   fieldset pareggiano la specificità di "fieldset.radio-group" (0-1-1). */
fieldset.radio-group.radio-gruppo-griglia,
fieldset.radio-group.radio-gruppo-griglia-2,
fieldset.radio-gruppo.radio-gruppo-griglia,
fieldset.radio-gruppo.radio-gruppo-griglia-2,
.radio-group.radio-gruppo-griglia,
.radio-group.radio-gruppo-griglia-2,
.radio-gruppo.radio-gruppo-griglia,
.radio-gruppo.radio-gruppo-griglia-2 {
    margin-top: 1.3rem;
    margin-bottom: 0;
}

.radio-gruppo .radio-option,
.radio-group .radio-option,
.radio-gruppo-colonna .radio-option {
    margin-bottom: 0;
    box-sizing: border-box;
}

.radio-gruppo.radio-gruppo-griglia .radio-option,
.radio-group.radio-gruppo-griglia .radio-option,
.radio-gruppo-griglia-2 .radio-option {
    height: 100%;
}

@media (max-width: 650px) {
    .radio-group.radio-gruppo-griglia,
    .radio-gruppo.radio-gruppo-griglia,
    .radio-group.radio-gruppo-griglia-2,
    .radio-gruppo.radio-gruppo-griglia-2 {
        grid-template-columns: 1fr !important;
    }
}

/* Variante inline della checkbox, senza contenitore a card: per accostare una checkbox
   secondaria a un altro campo nella stessa riga (es. "Lavoratore disabile" accanto alla
   disponibilità oraria). */
.chkb {
    display: flex;
    align-items: center;
    gap: 11px;
    cursor: pointer;
    font-family: var(--font-titoli);
    font-weight: 400;
    font-size: 14.5px;
    line-height: 1.45;
    color: var(--colore-testo);
}

.chkb input {
    width: 18px;
    height: 18px;
    margin: 0;
    flex: none;
    accent-color: var(--colore-accento);
    box-shadow: none;
}

.radio-group legend,
.radio-gruppo legend,
.etichetta-campo,
p.etichetta-campo {
    font-family: var(--font-titoli);
    /* 17px come .misure-obbligo-titolo, .misure-sezione-titolo e .qr-gruppo-titolo: è lo stesso
       ruolo di "primo titolo sotto l'h2" che introduce un gruppo di campi/opzioni. */
    font-size: 17px;
    font-weight: 600;
    color: var(--colore-testo);
    margin-top: 0;
    margin-bottom: 7px;
    padding: 0;
    line-height: 1.4;
}

.radio-gruppo + .etichetta-campo,
.radio-group + .etichetta-campo,
.checkbox-gruppo + .etichetta-campo,
.campo-con-unita + .etichetta-campo,
.row2 + .etichetta-campo,
input + .etichetta-campo,
select + .etichetta-campo,
textarea + .etichetta-campo {
    margin-top: 20px;
}

/* --- Contenitori/gruppi --- */

/* Sotto-form raccolto in un pannello (form sede, form lavoratore, figure dello SPP...). Stessa
   superficie di .qr-card - bianca, stesso bordo, stessa ombra - invece del grigino
   --colore-sfondo-pannello con un bordo diverso e niente ombra: erano due trattamenti a pannello
   quasi identici ma divergenti, cioè due dialetti dello stesso linguaggio. Padding e gap restano
   più compatti di quelli di .qr-card: qui dentro ci sono form fitti, non contenuto da leggere. */
.gruppo {
    display: flex;
    flex-direction: column;
    /* Nessun gap: la spaziatura verticale la danno i margini dei singoli elementi, e dove il
       titolo o la nota ne hanno gia' uno il gap la raddoppiava. Le coppie che invece si
       reggevano solo sul gap sono elencate subito sotto: senza, si toccherebbero. */
    padding: 20px;
    margin-bottom: 1.3rem;
    border: 1px solid var(--qr-bordo);
    border-radius: var(--raggio-pannello);
    background: var(--colore-superficie);
    box-shadow: var(--qr-ombra-card);
}

/* Coppie di figli di .gruppo che non hanno margini propri: senza il gap si toccherebbero.
   Ripristinano esattamente i 14px che il gap dava loro. Le altre coppie restano piu' compatte,
   che e' l'effetto voluto. */
.gruppo > .pannello-figura-titolo + .radio-gruppo,
.gruppo > .pannello-figura-titolo + .row2,
.gruppo > .pannello-figura-titolo-riga + .row2,
.gruppo > .row2 + .row2,
.gruppo > .row2 + div,
.gruppo > * + .form-lavoratore-azioni,
.gruppo > h3 + .documento-lista {
    margin-top: 14px;
}

/* --- SPP: un .gruppo per figura (RLS/RSPP/Medico competente) --- */

.pannello-figura-titolo {
    font-family: var(--font-titoli);
    font-weight: 600;
    font-size: 15px;
    color: var(--colore-testo);
}

.pannello-figura-titolo-riga {
    display: inline-flex;
    align-items: center;
    gap: 9px;
}

/* Box degli obblighi che scattano quando la sostituzione di un cancerogeno non è possibile
   (schermata CMR). Era interamente in attributi style sull'elemento: stessi identici valori,
   spostati qui. Il "display" resta inline perché è il JS ad accenderlo e spegnerlo.
   I tre rossi sono quelli originali del box, non i token di errore dell'app: cambiarli
   cambierebbe l'aspetto, quindi restano com'erano.
   Il selettore è carico apposta: lo stile inline vinceva su tutto, mentre un semplice
   ".box-info-danger" (0-1-0) perderebbe il margin-top contro ".schermata > .box-info" (0-2-0). */
.schermata > .box-info.box-info-danger {
    margin-top: 20px;
    background-color: #fef2f2;
    border-left: 4px solid #ef4444;
    color: #991b1b;
    padding: 14px 16px;
    border-radius: 6px;
}

.box-info-danger > p {
    font-weight: 600;
    margin-bottom: 8px;
}

.box-info-danger > ul {
    margin: 0;
    padding-left: 20px;
    line-height: 1.5;
    font-size: 13.5px;
}


/* --- Fase 4: bozza e invio per la firma --- */

.badge-bozza {
    display: inline-block;
    padding: 0.3rem 0.9rem;
    margin-bottom: 1rem;
    /* Stesso significato (attenzione/in sospeso) di .message.warning: riusa i suoi token invece
       di un giallo quasi identico ma dichiarato a parte. */
    background: var(--colore-avviso-sfondo);
    border: 1px solid var(--colore-avviso-bordo);
    color: var(--colore-avviso);
    font-family: var(--font-titoli);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.anteprima-pdf,
.visualizzatore-pdf {
    width: 100%;
    max-height: 65vh;
    min-height: 380px;
    overflow-y: auto;
    overflow-x: hidden;
    margin: 0 0 1.6rem;
    border: 1px solid var(--colore-bordo-controllo);
    border-radius: var(--raggio-pannello);
    background: #eceef1;
    padding: 0.8rem 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
    user-select: none;
    -webkit-user-select: none;
}

.visualizzatore-pdf canvas {
    width: 100%;
    height: auto;
    display: block;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
    background: #ffffff;
}

.visualizzatore-pdf .caricamento {
    padding: 3rem 0;
    color: var(--colore-testo-secondario);
    font-size: 0.95rem;
    text-align: center;
}

.azioni-fase4 {
    display: flex;
    gap: 0.8rem;
    margin-top: auto;
    padding-top: 1.4rem;
}

.azioni-fase4 button {
    flex: 1;
}

/* --- Fase 4: attesa delle firme --- */

.roster-firmatari {
    list-style: none;
    margin: 0 0 1.6rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.roster-voce {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 20px;
    border: 1px solid var(--colore-bordo);
    border-radius: var(--raggio-pannello);
    background: var(--colore-superficie);
    font-family: var(--font-titoli);
    font-weight: 500;
    font-size: 15px;
    color: var(--colore-testo);
}

.roster-voce.firmato {
    color: var(--colore-successo-testo);
}

.roster-voce.turno-corrente {
    border-color: var(--colore-bordo-accento-tenue);
    background: var(--colore-accento-tenue);
    color: var(--colore-accento-scuro);
}

.roster-voce.in-attesa {
    color: var(--colore-testo-secondario);
}

.roster-pallino {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--colore-scheletro);
    color: #fff;
}

.roster-pallino svg {
    width: 13px;
    height: 13px;
}

.roster-voce.firmato .roster-pallino {
    background: var(--colore-successo);
}

.roster-voce.turno-corrente .roster-pallino {
    background: var(--colore-accento);
}

.roster-ruolo {
    color: inherit;
    opacity: 0.75;
    font-size: 0.9em;
}

/* --- Rischio rumore: un campo (o coppia ore/minuti) per attrezzatura --- */

#rumore-livelli-container,
#rumore-esposizione-container,
#vibrazioni-mano-livelli-container,
#vibrazioni-mano-esposizione-container,
#vibrazioni-corpo-livelli-container,
#vibrazioni-corpo-esposizione-container,
#cem-distanza-container,
#cem-esposizione-container {
    display: flex;
    flex-direction: column;
    /* Spaziatura verticale data da .qr-card { margin-bottom } (vedi sotto), non serve un altro
       gap qui: altrimenti si sommerebbero producendo uno spazio doppio tra le card. */
}

.campo-con-unita {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: auto;
    max-width: 100%;
    box-sizing: border-box;
}

.campo-con-unita input,
.campo-con-unita-piccolo input {
    width: 80px;
    max-width: 80px;
    flex: 0 0 80px;
    min-width: 0;
    box-sizing: border-box;
}

/* L'unità di misura accanto a un campo numerico, con una resa unica per tutte le schermate.
   Prima .unita-campo era più piccola (14px), meno marcata (500) e di un grigio suo
   (--colore-testo-secondario) rispetto a .qr-unita delle schermate del rumore: lo stesso campo
   cambiava aspetto da una schermata all'altra. Vince la variante del rumore, presa a riferimento.
   flex/white-space servono dentro .campo-con-unita, che è un contenitore flex. */
.unita-campo,
.qr-unita {
    flex: 0 0 auto;
    white-space: nowrap;
    font-family: var(--font-titoli);
    font-weight: 600;
    font-size: 16px;
    color: var(--qr-testo-secondario);
}

.pallino-esito {
    flex: none;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--colore-scheletro);
}

.pallino-esito-verde {
    background: var(--colore-successo);
}

/* Giallo paglierino, volutamente più chiaro e slavato del giallo usato per le etichette
   (message.warning). È --esito-warn: lo stesso giallo del numero grande delle schermate di
   esito (.riga-esito-af-valore-blocco-giallo), del bollino sul resto del sito e del verdetto
   della checklist obblighi VDT. */
.pallino-esito-giallo {
    background: var(--esito-warn);
}

.pallino-esito-rosso {
    background: var(--colore-errore);
}

/* Box di riepilogo di uno strumento/valutazione nelle schermate "Esito della valutazione del
   rischio X": a sinistra il valore numerico misurato (grande, colorato secondo il bollino, con
   l'unità di misura sotto) o, quando non c'è una misura numerica, il pallino colorato; a destra
   nome in grassetto, livello in grigio sotto, messaggio sotto ancora. La normativa di
   riferimento (una o più pillole grigie, vedi .badge-norma) è affiancata al nome, spinta
   all'estrema destra della riga (stessa striscia superiore del corpo). */
.riga-esito-af {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    padding: 20px 24px;
    border: 1px solid var(--colore-bordo);
    border-radius: var(--raggio-pannello);
    background: var(--colore-superficie);
}

.riga-esito-af-valore-blocco {
    flex: 0 0 140px;
    min-width: 140px;
    width: 140px;
}

.riga-esito-af-numero {
    font-family: var(--font-titoli);
    font-weight: 800;
    font-size: 40px;
    line-height: 1;
    white-space: nowrap;
    min-width: 3.5em;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
}

.riga-esito-af-unita {
    font-family: var(--font-titoli);
    font-weight: 700;
    font-size: 14px;
    margin-top: 4px;
}

/* Quando .riga-esito-af-unita viene spostata prima di .riga-esito-af-numero (vedi
   spostaUnitaSopraNumero, usato per il punteggio dello stress), lo spazio va sotto invece che
   sopra: per tutti gli altri usi (unita sempre dopo numero) questa regola non si applica mai. */
.riga-esito-af-unita:first-child {
    margin-top: 0;
    margin-bottom: 4px;
}

.riga-esito-af-valore-blocco-verde .riga-esito-af-numero,
.riga-esito-af-valore-blocco-verde .riga-esito-af-unita {
    color: var(--colore-successo);
}

.riga-esito-af-valore-blocco-giallo .riga-esito-af-numero,
.riga-esito-af-valore-blocco-giallo .riga-esito-af-unita {
    color: var(--esito-warn);
}

.riga-esito-af-valore-blocco-rosso .riga-esito-af-numero,
.riga-esito-af-valore-blocco-rosso .riga-esito-af-unita {
    color: var(--colore-errore);
}

/* Barra colorata a sinistra secondo il verdetto (bollino), in aggiunta al colore del numero/
   pallino: si legge a colpo d'occhio anche senza fermarsi a leggere il numero. -3px di
   padding-left compensa la differenza tra questo bordo (4px) e quello base (1px, invariato sugli
   altri tre lati), così il contenuto non si sposta. Copre sia il caso con numero
   (.riga-esito-af-valore-blocco-*) sia quello senza (.pallino-esito-*, vedi
   creaRigaEsitoAgenteFisico). */
.riga-esito-af:has(.riga-esito-af-valore-blocco-verde),
.riga-esito-af:has(.pallino-esito-verde) {
    border-left: 4px solid var(--colore-successo);
    padding-left: 21px;
}

.riga-esito-af:has(.riga-esito-af-valore-blocco-giallo),
.riga-esito-af:has(.pallino-esito-giallo) {
    border-left: 4px solid var(--esito-warn);
    padding-left: 21px;
}

.riga-esito-af:has(.riga-esito-af-valore-blocco-rosso),
.riga-esito-af:has(.pallino-esito-rosso) {
    border-left: 4px solid var(--colore-errore);
    padding-left: 21px;
}

.riga-esito-af-corpo {
    flex: 1;
    min-width: 0;
}

.riga-esito-af-intestazione {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.riga-esito-af-nome {
    font-family: var(--font-titoli);
    font-weight: 700;
    font-size: 17px;
    color: var(--colore-testo);
}

/* Nuvola di pillole (vedi .badge-norma): se ci sono più normative separate da ";" nel dato
   sorgente, vengono spezzate in più pillole distinte invece di stare tutte in una riga unica. */
.riga-esito-af-normativa {
    flex: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px;
    max-width: 60%;
}

/* Stesso corpo del messaggio qui sotto (15px): livello e messaggio sono due righe di testo
   consecutive sotto il nome, e tenerle di dimensioni diverse faceva sembrare il livello - che è
   l'informazione più importante delle due - un sottotitolo minore della spiegazione. A
   distinguerli restano il peso (500 contro 400) e il margine. */
.riga-esito-af-livello {
    font-family: var(--font-titoli);
    font-weight: 500;
    font-size: 15px;
    color: var(--colore-testo-secondario);
    margin-top: 2px;
}

/* 15px come .descrizione, il corpo di lettura dell'app: a 13px il messaggio risultava più
   piccolo di ogni altro testo esplicativo (gli altri secondari stanno a 13.5px). */
.riga-esito-af-messaggio {
    font-family: var(--font-titoli);
    font-weight: 400;
    font-size: 15px;
    line-height: 1.5;
    color: var(--colore-testo-secondario);
}

/* Titolo breve ("Sorveglianza sanitaria" / "Formazione e informazione") sopra ciascun checkbox
   di misura obbligatoria, affiancato dal badge rosso "Obbligatorio" (vedi
   aggiornaObbligoCheckbox in script.js): il badge è visibile solo quando l'esito della
   valutazione rende quella misura non deselezionabile, al posto del vecchio messaggio rosso
   sotto il checkbox. */
.misure-obbligo-riga {
    display: flex;
    align-items: center;
    gap: 9px;
}

/* Contenitore di "Sorveglianza sanitaria" + "Formazione e informazione": gap di base 32px tra i
   figli diretti (per separare i due blocchi, checkbox -> riga successiva), stesso valore usato
   sopra per .misure-sezione. La coppia riga titolo -> proprio checkbox sotto è invece corretta
   con un margine negativo mirato (vedi sotto) per restare stretta: sono correlati, non due
   blocchi distinti. */
.misure-obblighi-sezione {
    display: flex;
    flex-direction: column;
    gap: 32px;
    margin-top: 8px; /* 24 (gap di .schermata) + 8 = 32px uniformi anche sopra il blocco */
}

/* Accoppiamento stretto: titolo/pillola -> checkbox che descrivono. */
.misure-obblighi-sezione > .misure-obbligo-riga + .checkbox-option {
    margin-top: -25px; /* 32 (gap) - 7 (spaziatura stretta titolo -> checkbox) */
}

.misure-obblighi-sezione > .checkbox-option {
    margin-bottom: 0;
}

.misure-obbligo-titolo {
    font-family: var(--font-titoli);
    font-weight: 700;
    font-size: 17px;
    color: var(--colore-testo);
}

.badge-obbligatorio {
    display: inline-block;
    padding: 4px 10px;
    border-radius: var(--raggio-chip);
    background: var(--qr-obbligo-sfondo);
    color: var(--qr-obbligo-testo);
    font-family: var(--font-titoli);
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

/* Riga titolo + badge per un titolo di sezione (.misure-sezione-titolo). flex-wrap serve
   soprattutto quando dentro c'è l'h2 della schermata (vedi sopra): su schermi stretti l'h2 può
   andare a capo su più righe ed essere già largo quanto il container, la pillola deve poter
   scendere sotto invece di uscire dal bordo. */
.misure-sezione-titolo-riga {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 9px;
    margin-top: 22px;
    margin-bottom: 8px;
}

.misure-sezione-titolo-riga > .misure-sezione-titolo,
.misure-sezione-titolo-riga > .etichetta-campo,
.misure-sezione-titolo-riga > h2 {
    margin: 0;
}

/* Quando la riga titolo è il primo elemento dentro una qr-card, il padding della card fa già da
   spazio: il margin-top di 22px si sommerebbe creando un distacco eccessivo dal bordo alto. Il
   secondo selettore copre il caso in cui in mezzo ci sia anche un div.misure-sezione (la riga
   titolo resta comunque la prima cosa visibile dentro la card). */
.qr-card > .misure-sezione-titolo-riga:first-child,
.qr-card > .misure-sezione:first-child > .misure-sezione-titolo-riga:first-child {
    margin-top: 0;
}

/* Etichetta sopra il titolo di ogni schermata della fase "agenti fisici" (stesso linguaggio
   visivo dell'handoff di design: design_handoff_questionario_rischi/README.md, "agent tag"):
   un puntino colorato per categoria (stessa dimensione del .dot dello stato "Salvato") più il
   nome dell'agente in maiuscolo, sempre grigio - non più una pillola con sfondo pastello. Il
   colore del puntino è impostato inline per categoria (vedi aggiornaPillolaAgenteFisico). */
.pillola-agente-fisico {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    align-self: flex-start;
    font-family: var(--font-titoli);
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--colore-testo-secondario);
}

.pillola-agente-fisico::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--colore-puntino-agente, var(--colore-testo-terziario));
    flex-shrink: 0;
}

/* --- Commenti in modalità modifica --- */

.documento-gruppo h3 {
    margin: 0;
}

.documento-lista {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.commento-riga {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.commento-corpo {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.commento-meta {
    font-family: var(--font-titoli);
    font-weight: 600;
    font-size: 12.5px;
    color: var(--colore-testo-secondario);
}

.commento-testo {
    font-family: var(--font-titoli);
    font-size: 14.5px;
    color: var(--colore-testo);
}

.aggiungi-elemento {
    display: flex;
    gap: 0.6rem;
    align-items: flex-start;
    margin-bottom: 0.9rem;
}

.aggiungi-elemento input {
    flex: 1;
    margin-bottom: 0;
}

.aggiungi-elemento button {
    flex-shrink: 0;
}

/* --- Fase 3: loop attività/fasi --- */

.subpasso-fase3 {
    display: flex;
    flex-direction: column;
    /* Niente gap qui: la spaziatura verticale tra gli elementi è già data dalle regole
       margin-top/margin-bottom di ".subpasso-fase3 > ..." più sopra (stesso sistema di
       ".schermata", che infatti non ha gap) - un gap qui si sommerebbe a quei margini invece
       di sostituirli, raddoppiando lo spazio tra un elemento e l'altro. */
}

/* Campo protagonista (S15: nome attività), input grande con esempio sotto invece che nel placeholder */
input:not([type="checkbox"]):not([type="radio"]).campo-grande {
    height: var(--altezza-controllo-protagonista);
    font-size: 18px;
}

/* Overline sopra il titolo (S17: "Attività: <nome>") */
.sopratitolo {
    display: block;
    font-family: var(--font-titoli);
    font-weight: 500;
    font-size: 13px;
    color: var(--colore-testo-secondario);
    margin-bottom: 0.5rem;
}

.sopratitolo b {
    font-weight: 600;
    color: var(--colore-testo);
}

/* --- Elenco fasi (sotto-passo "In quante fasi si divide...") --- */

#elenco-fasi {
    list-style: none;
    margin: 0;
    padding: 0;
}

.lrow .voce-elenco-fase-azioni {
    display: flex;
    gap: 0.2rem;
    flex-shrink: 0;
    margin-left: auto;
}

.voce-elenco-fase-elimina {
    color: var(--colore-errore);
}

.voce-elenco-fase-elimina:hover {
    background: var(--colore-errore-sfondo);
    color: var(--colore-errore);
}

.voce-elenco-fase-input {
    flex: 1;
    margin-bottom: 0;
}

/* Stacca il campo "Fase N" dall'elenco delle fasi già inserite: .lst distanzia le proprie righe
   con il gap e non ha un margine sotto, quindi senza questa regola l'etichetta resta incollata
   all'ultima riga. 18px è lo stesso margine che il sistema dà a una label a metà passo (vedi
   ".subpasso-fase3 > label"), che qui non si applica perché la label sta dentro il container.
   La regola è legata all'elenco VISIBILE di proposito: finché non c'è nessuna fase, #elenco-fasi
   è hidden e sopra il container resta la .descrizione, che porta già il suo margine sotto - un
   margin-top incondizionato si sommerebbe a quello. */
#elenco-fasi:not([hidden]) + #aggiungi-fase-elenco-container {
    margin-top: 18px;
}

.campo-con-bottone {
    display: flex;
    gap: 0.6rem;
    align-items: flex-start;
}

.campo-con-bottone input {
    flex: 1;
    height: 52px;
}

.campo-con-bottone button {
    flex-shrink: 0;
    white-space: nowrap;
    height: 52px;
}


.blocco-lavoratore {
    padding: 1.2rem;
    margin-bottom: 1.3rem;
    border: 1px solid #e4e7eb;
    border-radius: var(--raggio-pannello);
    background: #fafbfc;
}

.blocco-lavoratore h3 {
    margin-top: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.blocco-lavoratore h3 .qr-avatar {
    flex-shrink: 0;
}

/* --- Domande stress lavoro-correlato (una per dimensione, Sì/No) --- */

/* Ogni domanda e' una .qr-card (vedi renderDomandeStress): prima erano blocchi separati solo da
   una riga orizzontale, lo stesso trattamento che aveva .categoria-pool. Lo spazio tra una card e
   l'altra lo da' il gap del contenitore, non un margine sulla card. */
.stress-domande-elenco {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 20px;
}

.domanda-stress {
    /* Annulla il margine di .qr-card: qui la spaziatura e' del contenitore (gap). */
    margin-bottom: 0;
}

.domanda-stress-label {
    font-family: var(--font-titoli);
    font-weight: 600;
    margin: 0 0 0.7rem;
}

.domanda-stress input[type="text"] {
    margin-top: 0.7rem;
}

/* --- Pool categorizzate (es. impianti, attrezzature) ---
   Ogni categoria è una .qr-card (vedi creaSezionePoolCategorizzate): prima erano blocchi separati
   solo da una riga orizzontale, un trattamento che non esisteva da nessun'altra parte nell'app.
   Lo spazio tra una card e l'altra lo dà il "gap" del contenitore, non un margine sulla card. */

.categorie-pool-elenco {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-top: 4px;
    margin-bottom: 20px;
}

.categoria-pool {
    /* Annulla il margine di .qr-card: qui la spaziatura è del contenitore (gap). */
    margin-bottom: 0;
}

/* La nuvola di chip porta con sé un margine sotto pensato per quando sta sciolta nella schermata:
   dentro la card, se è l'ultimo elemento, quel margine diventerebbe spazio morto sopra il bordo. */
.categoria-pool > .nuvola:last-child {
    margin-bottom: 0;
}

.categoria-pool-titolo {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0 0 0.9rem;
}

.categoria-pool-icona {
    flex: none;
    width: 19px;
    height: 19px;
    color: var(--colore-testo-secondario);
}

/* --- Nuvole e chip (restano a pillola) --- */

.nuvola {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    margin-bottom: 1.3rem;
}

/* Come .nuvola ma senza margine sotto: per righe di chip dentro un contenitore che gestisce
   già lo spazio con il proprio gap (es. la riga di un lavoratore in S13). */
.chips {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
}

.chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: var(--altezza-chip);
    padding: 0 17px;
    border-radius: var(--raggio-chip);
    border: 1px solid var(--colore-bordo-controllo);
    background: var(--colore-superficie);
    font-family: var(--font-titoli);
    font-weight: 500;
    font-size: 14.5px;
    color: var(--colore-testo);
    box-shadow: none;
}

.pool-chip {
    cursor: pointer;
    transition: background var(--transizione), color var(--transizione), border-color var(--transizione);
}

.pool-chip:hover {
    background: var(--colore-accento-tenue);
    border-color: var(--colore-bordo-accento-tenue);
}

.pool-chip.attivo {
    background: var(--colore-accento);
    color: #fff;
    border-color: var(--colore-accento);
}

/* --- Pool a griglia di riquadri (es. "In quale settore lavori?") --- */

.griglia-pool {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.9rem;
    margin: 1rem 0 1.3rem;
}

.riquadro-griglia {
    display: grid;
    height: auto;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    padding: 1.4rem 0.8rem;
    border-radius: var(--raggio-pannello);
    border: 1px solid var(--colore-bordo-controllo);
    background: var(--colore-sfondo-pannello);
    cursor: pointer;
    transition: background var(--transizione), border-color var(--transizione);
}

.riquadro-griglia:hover {
    background: var(--colore-accento-tenue);
    border-color: var(--colore-bordo-accento-tenue);
}

.riquadro-griglia.attivo {
    background: var(--colore-accento-tenue);
    border-color: var(--colore-accento);
}

.riquadro-griglia-emoji {
    display: flex;
    justify-content: center;
    color: var(--colore-testo);
}

.riquadro-griglia-emoji svg {
    width: 2.3rem;
    height: 2.3rem;
    stroke-width: 1.5;
}

.riquadro-griglia-testo {
    font-family: var(--font-titoli);
    font-weight: 700;
    font-size: 1rem;
    color: var(--colore-testo);
    text-align: center;
}

.riquadro-griglia-esempio {
    font-family: var(--font-titoli);
    font-size: 0.85rem;
    color: var(--colore-testo-secondario);
    text-align: center;
}

/* Variante a colonna singola per pool con opzioni dal testo lungo (es. "settore",
   dove ogni riquadro ha anche una riga di esempio) e selezione singola (max="1"). */
.griglia-pool-singola {
    grid-template-columns: auto auto auto;
}

.griglia-pool-singola .riquadro-griglia {
    flex-direction: row;
    align-items: flex-start;
    padding: 1rem 1.2rem;
    text-align: center;
}

.griglia-pool-singola .riquadro-griglia-emoji svg {
    width: 1.8rem;
    height: 1.8rem;
}

.griglia-pool-singola .riquadro-griglia-testo,
.griglia-pool-singola .riquadro-griglia-esempio {
    text-align: center;
}

@media (max-width: 600px) {
    .griglia-pool {
        grid-template-columns: repeat(2, 1fr);
    }

    .griglia-pool-singola {
        grid-template-columns: 1fr;
    }
}

.chip-altro {
    border-style: dashed;
    color: var(--colore-testo-secondario);
}

.chip-testo {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    outline: none;
}

.chip svg {
    flex: none;
    width: 15px;
    height: 15px;
}

.chip-lavoratore .chip-testo {
    cursor: pointer;
}

.chip .rimuovi {
    height: auto;
    background: none;
    border: none;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
    color: inherit;
    opacity: 0.6;
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
}

.chip .rimuovi:hover {
    opacity: 1;
    background: none;
    box-shadow: none;
}

/* --- Bottoni: stile Material flat --- */

button {
    height: var(--altezza-controllo);
    padding: 0 24px;
    background: var(--colore-accento);
    color: #fff;
    border: none;
    /* Non --raggio-campo: i bottoni lo usavano solo perché i due valori coincidevano, e al
       ripristino di --raggio-campo a 9px si sarebbero stretti anche loro. Un bottone è una
       superficie, non un campo compilabile: qui usa il token dei bottoni. */
    border-radius: var(--raggio-bottone-testo);
    font-weight: 600;
    font-size: 15.5px;
    cursor: pointer;
    box-shadow: none;
    transition: background-color var(--transizione), opacity 0.3s ease;
}

button:hover {
    background: var(--colore-accento-scuro);
}

button:disabled {
    background: var(--colore-disabilitato);
    box-shadow: none;
    cursor: not-allowed;
    opacity: 1;
}

button.secondario {
    background: var(--colore-superficie);
    color: var(--colore-testo);
    font-weight: 500;
    font-size: 15px;
    border: 1px solid var(--colore-bordo-controllo);
}

button.secondario:hover {
    background: var(--colore-accento-tenue);
    border-color: var(--colore-bordo-accento-tenue);
    color: var(--colore-accento-scuro);
}

.form-lavoratore-azioni {
    display: flex;
    gap: 0.6rem;
}

.form-lavoratore-azioni button {
    flex: 1;
}

/* --- Barra di navigazione (Indietro/Avanti/Genera PDF) --- */

.nav-buttons {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 0;
}

/* Bottone di testo (era solo #back-btn): "← Indietro" nel footer, "Salva e riprendi dopo" e
   "Scarica una copia" nella barra superiore. */
.bt {
    height: var(--altezza-bottone-testo);
    padding: 0 12px;
    background: transparent;
    color: var(--colore-testo-secondario);
    font-weight: 500;
    font-size: 13.5px;
    border: none;
    border-radius: var(--raggio-bottone-testo);
    /* Senza questo, il min-content di .top-contenitore (grid: 1fr auto 1fr tra 650px e 1300px)
       corrisponde solo alla parola più lunga: la colonna destra può restringersi abbastanza da
       far andare il testo a capo su due righe, per poi tornare su una riga di scatto appena si
       raggiunge il breakpoint dei 650px (dove la colonna passa ad auto). Bloccando il wrap qui,
       il min-content dell'intera frase forza la colonna a restare sempre larga a sufficienza,
       eliminando lo scatto e rendendo la transizione fluida su tutte le larghezze intermedie. */
    white-space: nowrap;
    /* display/align/gap servono solo a #back-btn (icona chevron-left + testo): gli altri usi di
       .bt sono testo puro, quindi restano invariati. */
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.bt:hover {
    background: #eef0f3;
    color: var(--colore-testo);
}

#back-btn svg {
    width: 16px;
    height: 16px;
}

/* #next-btn: pulsante "Avanti"/"Prosegui"/... con icona chevron-right accanto al testo (scritto
   sempre in #next-btn-testo, mai in nextBtn.textContent, per non cancellare l'icona). */
#next-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

#next-btn svg {
    width: 18px;
    height: 18px;
}

/* --- Messaggi di stato --- */

.message {
    margin-top: 1.1rem;
    font-family: var(--font-titoli);
    font-size: 14px;
    line-height: 1.5;
    font-weight: 500;
}

.message.error,
.message.success,
.message.warning,
.message.info {
    padding: 14px 16px;
    border-radius: var(--raggio-pannello);
    border: 1px solid transparent;
}

.message.error {
    color: var(--colore-errore);
    background: var(--colore-errore-sfondo);
    border-color: var(--colore-errore-bordo);
}

.message.success {
    color: var(--colore-successo-testo);
    background: var(--colore-successo-sfondo);
    border-color: var(--colore-successo-bordo);
}

.message.warning {
    color: var(--colore-avviso);
    background: var(--colore-avviso-sfondo);
    border-color: var(--colore-avviso-bordo);
}

.message.info {
    color: var(--colore-accento-scuro);
    background: var(--colore-accento-tenue);
    border-color: var(--colore-bordo-accento-tenue);
}

/* --- Campi obbligatori mancanti --- */

.campo-invalido {
    border-color: var(--colore-errore) !important;
}

.errore-campo {
    margin: -1.1rem 0 1rem;
    color: var(--colore-errore);
    font-family: var(--font-titoli);
    font-size: 13px;
    font-weight: 500;
}

/* --- Tecnicismo + fumetto: termine tecnico evidenziato con spiegazione a comparsa --- */
/* Pattern riusabile per qualsiasi <span class="tecnicismo" tabindex="0">termine<span
   class="fumetto">spiegazione</span></span> nel testo (non solo per "videoterminali"). */

.tecnicismo {
    position: relative;
    display: inline-block;
    color: var(--colore-accento-scuro);
    font-weight: 700;
    border-bottom: 2px dotted var(--colore-accento);
    cursor: help;
}

.tecnicismo .fumetto {
    position: absolute;
    bottom: calc(100% + 12px);
    left: 50%;
    transform: translate(-50%, 4px);
    width: max-content;
    max-width: min(340px, 80vw);
    background: var(--colore-accento-scuro);
    color: #fff;
    font-family: var(--font-titoli);
    font-weight: 500;
    font-size: 0.95rem;
    line-height: 1.45;
    text-align: left;
    padding: 0.85rem 1.1rem;
    border-radius: var(--raggio-pannello);
    box-shadow: 0 12px 28px rgba(13, 71, 161, 0.28);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
    z-index: 30;
}

.tecnicismo .fumetto::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 8px solid transparent;
    border-top-color: var(--colore-accento-scuro);
}

.tecnicismo:hover .fumetto,
.tecnicismo:focus .fumetto,
.tecnicismo:focus-within .fumetto,
.tecnicismo.aperto .fumetto {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate(-50%, 0);
}

@media (max-width: 600px) {
    .tecnicismo .fumetto {
        left: 0;
        transform: translate(0, 4px);
    }
    .tecnicismo .fumetto::after {
        left: 1.2rem;
        transform: none;
    }
    .tecnicismo:hover .fumetto,
    .tecnicismo:focus .fumetto,
    .tecnicismo:focus-within .fumetto,
    .tecnicismo.aperto .fumetto {
        transform: translate(0, 0);
    }
}

/* --- Coppia di campi affiancati (es. Nome/Cognome) --- */

.row2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

/* Quando la coppia di campi contiene selettori numerici/compatti nei pannelli .gruppo,
   i due selettori vengono affiancati con larghezza naturale e spazio ridotto per apparire visivamente correlati */
.gruppo .row2:has(input[type="number"]) {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 20px;
}

.gruppo .row2:has(input[type="number"]) > div {
    flex: 0 0 auto;
    width: auto;
}

/* Due coppie di campi affiancate (ultimo anno e triennio negli eventi sentinella): la riga esterna
   le divide a metà invece di lasciarle alla larghezza naturale dei campi, che le farebbe risultare
   di ampiezza diversa fra loro. Il selettore ripete :has(input[type="number"]) perché deve
   scavalcare la regola qui sopra, che ha specificità maggiore di un semplice .row2 > .row2. */
.gruppo .row2:has(input[type="number"]) > .row2 {
    flex: 1 1 0;
    min-width: 0;
}

@media (max-width: 1000px) {
    .row2:not(:has(input[type="number"])) {
        grid-template-columns: 1fr;
    }
}

/* --- Checkbox/radio con testo forte + descrizione secondaria --- */

.checkbox-testo,
.radio-testo {
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex: 1 1 auto;
    min-width: 0;
}

.checkbox-titolo,
.radio-titolo {
    font-family: var(--font-titoli);
    font-weight: 500;
    font-size: 15.5px;
    line-height: 1.4;
    color: var(--colore-testo);
}

.checkbox-descrizione,
.radio-descrizione {
    font-family: var(--font-titoli);
    font-weight: 400;
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--colore-testo-secondario);
}

/* Pillola grigia con la norma tecnica di riferimento di un DPI (es. "UNI EN 166"), in alto a
   destra dell'opzione: terzo figlio di .checkbox-option/.radio-option, allineata in cima alla
   riga (align-self) e spinta a destra (margin-left: auto) invece che al centro come
   checkbox/testo, senza toccarne il layout esistente. */
.badge-norma {
    align-self: flex-start;
    flex: none;
    margin-left: auto;
    padding: 5px 11px;
    border-radius: var(--raggio-chip);
    background: var(--qr-pill-sfondo);
    border: 1px solid var(--qr-pill-bordo);
    color: var(--qr-pill-testo);
    font-family: var(--font-titoli);
    font-weight: 600;
    font-size: 11.5px;
    line-height: 1.3;
    letter-spacing: normal;
    text-align: center;
    white-space: nowrap;
}

/* Nuvola di pillole: quando un DPI cita più norme distinte (es. UNI EN 175 e UNI EN 169), invece
   di un'unica pillola con "/" ne servono due separate che vanno a capo se non c'entrano - stessa
   idea di .riga-esito-af-normativa ma riusabile ovunque compaia più di un .badge-norma. È lei,
   non i singoli .badge-norma al suo interno, ad avere align-self/margin-left: auto per spingersi
   in alto a destra nella riga del DPI. */
.badge-norma-nuvola {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    gap: 6px;
    align-self: flex-start;
    flex: 0 1 auto;
    margin-left: auto;
    max-width: 55%;
}

.badge-norma-nuvola .badge-norma {
    margin-left: 0 !important;
    margin: 0;
    white-space: nowrap;
}

@media (max-width: 900px) {
    .badge-norma-nuvola {
        max-width: 60%;
    }
}

@media (max-width: 768px) {
    .checkbox-option:has(.badge-norma-nuvola),
    .radio-option:has(.badge-norma-nuvola) {
        flex-wrap: wrap;
    }

    .badge-norma-nuvola {
        max-width: 100%;
        width: 100%;
        justify-content: flex-start;
        margin-left: 0;
        margin-top: 6px;
        padding-left: 36px;
    }

    .checkbox-option:has(.checkbox-img):has(.badge-norma-nuvola) .badge-norma-nuvola,
    .radio-option:has(.checkbox-img):has(.badge-norma-nuvola) .badge-norma-nuvola {
        padding-left: 76px;
    }
}

@media (max-width: 650px) {
    .badge-norma-nuvola {
        padding-left: 0 !important;
    }
}

/* --- Variante compatta della chip (es. mansioni nella riga di un lavoratore) --- */

.chip.sm {
    height: 34px;
    padding: 0 13px;
    font-size: 13.5px;
}

/* --- Elenco a righe con pallino numerato (es. assegnazione mansioni) --- */

.lst {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.lrow {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 20px;
    border: 1px solid var(--colore-bordo);
    border-radius: var(--raggio-pannello);
    background: var(--colore-superficie);
}

.lnum {
    width: 26px;
    height: 26px;
    flex: none;
    border-radius: 50%;
    background: var(--colore-accento-tenue);
    color: var(--colore-accento-scuro);
    display: grid;
    place-items: center;
    font-family: var(--font-titoli);
    font-weight: 600;
    font-size: 12.5px;
}

.lnum.on {
    background: var(--colore-accento);
    color: #fff;
}

.ltx {
    flex: 1;
    font-family: var(--font-titoli);
    font-weight: 500;
    font-size: 16px;
    color: var(--colore-testo);
}

.ltx-conteggio {
    font-family: var(--font-titoli);
    font-weight: 500;
    font-size: 13px;
    color: var(--colore-testo-secondario);
}

.ltx-conteggio.da-assegnare {
    color: var(--colore-accento);
}

/* --- Accessibilità: focus visibile da tastiera --- */
/* input/select/textarea hanno già un anello dedicato via box-shadow (vedi sopra). Qui
   copriamo tutto il resto: bottoni, chip (sono <button>), checkbox/radio nativi, e
   qualsiasi elemento reso interattivo con tabindex (es. .tecnicismo). :focus-visible
   evita l'anello al click del mouse, mostrandolo solo per la navigazione da tastiera. */
button:focus-visible,
a:focus-visible,
input[type="checkbox"]:focus-visible,
input[type="radio"]:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--colore-accento);
    outline-offset: 2px;
}

/* .misure-sezione è figlio diretto di .schermata (gap: 24px): margin-top: 8px porta lo
   spazio effettivo sopra ogni blocco a 32px uniformi (24 + 8), coerente con lo spazio interno
   di .misure-obblighi-sezione qui sotto. */
.misure-sezione {
    margin-top: 8px;
}

.misure-sezione-titolo {
    font-size: 17px;
    font-weight: 700;
    color: var(--colore-testo);
    margin: 0 0 4px 0;
}

.misure-sezione-sottotitolo {
    font-size: 14px;
    line-height: 1.55;
    color: var(--colore-testo-secondario);
    margin: 0 0 12px 0;
}

/* ==========================================================================
   Redesign schermate livello / tempo / misure — rumore, vibrazioni mano-braccio,
   vibrazioni corpo intero. Vedi design_handoff_questionario_rischi/README.md.
   Classi dedicate (prefisso .qr-) usate SOLO in queste schermate: non toccano
   .checkbox-option/.radio-option/.misure-sezione ecc. usate dalle altre categorie
   di agenti fisici (CEM, ROA, ...), che restano invariate.
   ========================================================================== */

.qr-card {
    background: var(--colore-superficie);
    border: 1px solid var(--qr-bordo);
    border-radius: var(--raggio-card);
    padding: 26px 28px;
    margin-bottom: 1.3rem;
    box-shadow: var(--qr-ombra-card);
}

.qr-eyebrow {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--qr-testo-eyebrow);
    margin: 0 0 16px 0;
}

.qr-nome-attrezzatura {
    font-size: 19px;
    font-weight: 700;
    color: var(--colore-testo);
    margin-bottom: 24px;
}

.qr-riga-input {
    display: flex;
    align-items: stretch;
    gap: 24px;
}

.qr-blocco-campo {
    flex: 1 1 0;
    min-width: 0;
}

.qr-divisore-verticale {
    width: 1px;
    background: var(--qr-bordo-input);
    flex-shrink: 0;
}

.qr-campo-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--qr-testo-label);
    margin-bottom: 7px;
}

.qr-valori-riga {
    display: flex;
    align-items: center;
    gap: 22px;
    flex-wrap: wrap;
}

.qr-coppia-valore {
    display: flex;
    align-items: center;
    gap: 10px;
}

.qr-input {
    width: 132px;
    padding: 14px 16px;
    font-size: 24px;
    font-weight: 700;
    font-family: inherit;
    color: var(--colore-testo);
    border: 1.5px solid var(--qr-bordo-input);
    border-radius: var(--raggio-campo);
    box-sizing: border-box;
    box-shadow: var(--ombra-campo-interna);
    outline: none;
    font-variant-numeric: tabular-nums;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.qr-input.qr-input-tempo {
    width: 88px;
}

.qr-input:focus {
    border-color: var(--qr-accento);
    box-shadow: var(--qr-ombra-focus), var(--ombra-campo-interna);
}

.qr-nota-info {
    margin-top: 18px;
    padding: 18px 22px;
    border-radius: var(--raggio-pannello);
    background: var(--qr-nota-sfondo);
    border: 1px solid var(--qr-nota-bordo);
    font-size: 14px;
    line-height: 1.55;
    color: var(--qr-nota-testo);
}

.qr-nota-info a {
    color: var(--qr-accento-hover);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.qr-gruppo-schede {
    display: flex;
    flex-direction: column;
    /* Spaziatura verticale data da .qr-card { margin-bottom }, non serve un altro gap qui:
       altrimenti si sommerebbero producendo uno spazio doppio tra le card. */
}

.qr-lavoratori-strip {
    background: #fff;
    border: 1px solid var(--qr-bordo);
    border-radius: var(--raggio-pannello);
    padding: 18px 22px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    margin-bottom: 34px;
    box-shadow: var(--qr-ombra-strip);
}

.qr-lavoratori-strip .qr-eyebrow {
    margin-bottom: 0;
}

.qr-lavoratori-spacer {
    flex: 1;
}

.qr-lavoratori-avatars {
    display: flex;
    /* Difesa in profondità: il numero di avatar è già limitato via JS (vedi
       renderStripLavoratori), ma su schermi molto stretti anche quel numero potrebbe non
       bastare a restare su una riga sola dentro .qr-lavoratori-strip. */
    flex-wrap: wrap;
    row-gap: 6px;
    max-width: 100%;
}

.qr-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--qr-avatar-sfondo);
    border: 2px solid #fff;
    margin-left: -8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    color: var(--qr-avatar-testo);
    flex-shrink: 0;
}

/* Ultimo avatar "+N": indica i lavoratori oltre al massimo mostrato (vedi
   renderStripLavoratori). Colore neutro per distinguerlo dagli avatar delle persone. */
.qr-avatar-extra {
    background: var(--colore-disabilitato);
    color: var(--colore-testo-secondario);
}

/* L'avatar "+N" è anche il comando che apre l'elenco completo dei nomi: prima quel ruolo ce
   l'aveva il testo "N lavoratori" con la freccina accanto, ora rimosso. Lo stile interattivo è
   agganciato a [role="button"], che mette abilitaEspansioneStripLavoratori: così resta un
   semplice contatore nei casi in cui non c'è nulla da espandere. Da aperto tiene il colore
   dell'accento, che fa da indicatore di stato al posto della freccina. */
.qr-avatar-extra[role="button"] {
    cursor: pointer;
    user-select: none;
    transition: background var(--transizione), color var(--transizione);
}

.qr-avatar-extra[role="button"]:hover,
.qr-avatar-extra[role="button"].espanso {
    background: var(--qr-accento);
    color: #fff;
}

.qr-avatar-extra[role="button"]:focus-visible {
    outline: 2px solid var(--colore-accento);
    outline-offset: 2px;
}

.qr-avatar:first-child {
    margin-left: 0;
}

/* Nuvola di chip coi nomi completi (Nome Cognome) dei lavoratori, mostrata sotto la riga
   principale quando si clicca sull'avatar "+N": va a capo su tutta la larghezza della
   strip grazie a flex-basis:100% (che richiede flex-wrap sul contenitore, vedi sopra). */
.qr-lavoratori-espansi {
    flex-basis: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 4px;
    padding-top: 14px;
    border-top: 1px solid var(--qr-bordo);
}

.qr-gruppo {
    background: #fff;
    border: 1px solid var(--qr-bordo);
    border-radius: var(--raggio-card);
    padding: 26px 28px;
    box-shadow: var(--qr-ombra-card);
    margin-bottom: 34px;
}

.qr-gruppo:last-child {
    margin-bottom: 0;
}

.qr-gruppo-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 5px;
    flex-wrap: wrap;
}

.qr-gruppo-titolo {
    font-size: 17px;
    font-weight: 700;
    color: var(--colore-testo);
    margin: 0;
}

.qr-pillola-obbligatorio {
    padding: 4px 10px;
    border-radius: var(--raggio-chip);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    white-space: nowrap;
    background: var(--qr-obbligo-sfondo);
    color: var(--qr-obbligo-testo);
}

.qr-gruppo-contatore {
    font-size: 13px;
    font-weight: 400;
    color: var(--qr-testo-contatore);
    font-variant-numeric: tabular-nums;
    margin-left: auto;
    flex-shrink: 0;
}

.qr-gruppo-hint {
    font-size: 14px;
    line-height: 1.55;
    color: var(--qr-testo-hint);
    max-width: 620px;
    margin: 0 0 14px 0;
}

.qr-righe {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.qr-riga-opzione {
    background: #fff;
    border: 1.5px solid var(--qr-bordo);
    border-radius: var(--raggio-card);
    padding: 17px 20px;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}

.qr-riga-opzione:has(input:checked) {
    background: var(--qr-riga-sfondo-sel);
    border-color: var(--qr-riga-bordo-sel);
}

.qr-riga-opzione:has(input:disabled) {
    background: var(--qr-riga-sfondo-lock);
    border-color: var(--qr-riga-bordo-lock);
    cursor: default;
}

.qr-riga-opzione input[type="checkbox"],
.qr-riga-opzione input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    width: 21px;
    height: 21px;
    border-radius: 6px;
    border: 1.5px solid var(--qr-checkbox-bordo);
    background: #fff;
    flex-shrink: 0;
    margin: 1px 0 0 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.15s, background 0.15s;
}

.qr-riga-opzione input[type="radio"] {
    border-radius: 50%;
}

.qr-riga-opzione input[type="checkbox"]::before {
    content: "";
    color: #fff;
    font-size: 13px;
    font-weight: 800;
    line-height: 1;
}

.qr-riga-opzione input[type="radio"]::before {
    content: "";
    display: block;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: transparent;
    transition: background 0.15s ease, transform 0.15s ease;
    transform: scale(0);
}

.qr-riga-opzione input[type="checkbox"]:checked::before {
    content: "✓";
}

.qr-riga-opzione input[type="checkbox"]:checked {
    border-color: var(--qr-accento);
    background: var(--qr-accento);
}

.qr-riga-opzione input[type="radio"]:checked {
    border-color: var(--qr-accento);
    background: #fff;
}

.qr-riga-opzione input[type="radio"]:checked::before {
    background: var(--qr-accento);
    transform: scale(1);
}

.qr-riga-opzione input:disabled {
    cursor: default;
}

.qr-riga-opzione input[type="checkbox"]:disabled:checked {
    border-color: var(--qr-checkbox-bordo-lock);
    background: var(--qr-checkbox-sfondo-lock);
}

.qr-riga-opzione input[type="radio"]:disabled:checked {
    border-color: var(--qr-checkbox-bordo-lock);
    background: #fff;
}

.qr-riga-opzione input[type="radio"]:disabled:checked::before {
    background: var(--qr-checkbox-sfondo-lock);
}

.qr-riga-corpo {
    flex: 1;
    min-width: 0;
}

.qr-riga-titolo {
    display: block;
    font-size: 15.5px;
    font-weight: 500;
    color: var(--colore-testo);
    line-height: 1.4;
}

.qr-riga-nota {
    display: block;
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--qr-testo-hint);
    margin-top: 4px;
}

.qr-riga-nota:empty {
    display: none;
}

.qr-riga-norme {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.qr-riga-norma-pill {
    padding: 5px 11px;
    border-radius: var(--raggio-chip);
    background: var(--qr-pill-sfondo);
    border: 1px solid var(--qr-pill-bordo);
    color: var(--qr-pill-testo);
    font-size: 11.5px;
    font-weight: 600;
    white-space: nowrap;
}

@media (max-width: 600px) {
    .qr-card {
        padding: 20px 18px;
    }

    .qr-riga-opzione {
        padding: 14px 16px;
    }
}

/* ==========================================================================
   Checklist obblighi — esito VDT (videoterminali). Vedi esito_1c/ISTRUZIONI.md.
   Sostituisce il vecchio "muro di testo" (.card-esito, mai stilato) con verdetto +
   checklist di card. Scoped a .schermata-esito-obblighi (solo la schermata vdt_risultati):
   non tocca l'h2/.descrizione delle altre schermate né .riga-esito-af usata altrove.
   ========================================================================== */

.schermata-esito-obblighi > h2 {
    font-size: 34px;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.15;
    margin: 0 0 10px;
}

.schermata-esito-obblighi > .descrizione {
    font-size: 16px;
    line-height: 1.6;
    max-width: 520px;
    margin: 0 0 30px;
}

/* Stessa forma di .riga-esito-af (vedi più sopra): card bianca con il bordo sinistro colorato
   secondo il verdetto. Prima era una riga senza sfondo con una barretta colorata come primo
   figlio; il bordo fa lo stesso lavoro ma segue il raggio della card agli angoli, e il blocco si
   legge come le altre card di esito dell'app. I colori restano quelli propri del componente
   (--esito-ok / --esito-warn), gli stessi che tingono l'eyebrow qui sotto.
   padding-left ridotto di 3px per compensare i 4px del bordo colorato contro l'1px degli altri
   lati, così il testo non si sposta rispetto agli altri bordi. */
.esito-obblighi-verdetto {
    padding: 20px 24px;
    padding-left: 21px;
    border: 1px solid var(--colore-bordo);
    border-left: 4px solid var(--esito-ok);
    border-radius: var(--raggio-pannello);
    background: var(--colore-superficie);
}

.esito-obblighi-verdetto.giallo {
    border-left-color: var(--esito-warn);
}

.esito-obblighi-verdetto-eyebrow {
    display: block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--esito-ok-ink);
    margin-bottom: 6px;
}

.esito-obblighi-verdetto.giallo .esito-obblighi-verdetto-eyebrow {
    color: var(--esito-warn-ink);
}

.esito-obblighi-verdetto-frase {
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.3;
    margin: 0;
}

.esito-obblighi-checklist {
    margin-top: 30px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.esito-obblighi-riga {
    background: #fff;
    border: 1px solid var(--qr-bordo);
    border-radius: var(--raggio-pannello);
    padding: 18px 22px;
    display: flex;
    align-items: center;
    gap: 16px;
}

.esito-obblighi-riga.critica {
    background: var(--esito-warn-panel);
    border-color: var(--esito-warn-panel-border);
}

.esito-obblighi-riga-badge {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    border-radius: var(--raggio-card);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 800;
    line-height: 1;
    background: var(--esito-ok-tint);
    color: var(--esito-ok-ink);
}

.esito-obblighi-riga.critica .esito-obblighi-riga-badge {
    background: var(--esito-warn-tint);
    color: var(--esito-warn-ink);
}

.esito-obblighi-riga-etichetta {
    flex: 1;
    min-width: 0;
    font-size: 15.5px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--colore-testo);
}

.esito-obblighi-riga-valore {
    flex-shrink: 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--qr-testo-contatore);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.esito-obblighi-riga-norma {
    flex-shrink: 0;
    padding: 5px 12px;
    border-radius: var(--raggio-chip);
    background: var(--qr-pill-sfondo);
    border: 1px solid var(--qr-pill-bordo);
    font-size: 11.5px;
    font-weight: 600;
    color: var(--qr-testo-label);
    white-space: nowrap;
}

.esito-obblighi-nota {
    margin-top: 22px;
    padding: 16px 20px;
    border-radius: var(--raggio-pannello);
    background: var(--esito-muted-bg);
    font-size: 14px;
    line-height: 1.55;
    color: var(--qr-testo-label);
}

.esito-obblighi-nota.giallo {
    background: var(--esito-warn-panel);
    color: var(--esito-warn-ink);
}

@media (max-width: 640px) {
    .schermata-esito-obblighi > h2 {
        font-size: 27px;
    }

    .esito-obblighi-verdetto-frase {
        font-size: 20px;
    }

    .esito-obblighi-riga {
        flex-wrap: wrap;
    }

    .esito-obblighi-riga-etichetta {
        flex-basis: 100%;
    }

    .esito-obblighi-riga-badge {
        order: -1;
    }
}

/* ==========================================================================
   Utility: Screen Reader Only (.sr-only)
   ========================================================================== */

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* ==========================================================================
   Ambiente <drag>: Colonne Drag-and-Drop accessibili

   Ricolorato per usare i token dell'app (era scritto con una palette slate/blue-600 da
   generico esempio Tailwind, del tutto scollegata da --colore-*/--qr-*: due grigi paralleli
   e un blu accento diverso da quello del brand, #2563eb invece di --qr-accento/#1565c0). I
   raggi in px fissi (18px/999px) sono diventati --raggio-card/--raggio-chip per lo stesso
   motivo per cui lo sono già .qr-card e gli altri pannelli dell'app.
   ========================================================================== */

.drag-wrapper {
    margin-top: 24px;
}

.drag-board {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 18px;
    margin-top: 14px;
    width: 100%;
    box-sizing: border-box;
}

@media (max-width: 768px) {
    .drag-board {
        grid-template-columns: 1fr !important;
        gap: 20px;
    }
}

.drag-colonna {
    background: var(--colore-sfondo);
    border: 1.5px solid var(--qr-bordo);
    border-radius: var(--raggio-card);
    padding: 16px;
    display: flex;
    flex-direction: column;
    min-height: 280px;
    min-width: 0;
    box-sizing: border-box;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.drag-colonna[data-colonna-id="presenti"] {
    background: var(--qr-riga-sfondo-lock);
    border-color: var(--qr-riga-bordo-lock);
}

.drag-colonna-header {
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--qr-bordo);
}

.drag-colonna[data-colonna-id="presenti"] .drag-colonna-header {
    border-bottom-color: oklch(0.6 0.15 145 / 0.15);
}

.drag-colonna-titolo-riga {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.drag-colonna-titolo {
    font-size: 15px;
    font-weight: 700;
    color: var(--colore-testo);
}

.drag-colonna-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 26px;
    height: 22px;
    padding: 0 8px;
    border-radius: var(--raggio-chip);
    font-size: 12px;
    font-weight: 700;
    background: var(--qr-bordo);
    color: var(--colore-testo-secondario);
}

.drag-colonna[data-colonna-id="presenti"] .drag-colonna-badge {
    background: var(--qr-checkbox-sfondo-lock);
    color: var(--colore-superficie);
}

.drag-colonna-sottotitolo {
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--colore-testo-terziario);
    margin: 4px 0 0 0;
}

.drag-dropzone {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
    min-height: 180px;
    padding: 6px;
    border-radius: var(--raggio-card);
    border: 2px dashed transparent;
    /* Solo le proprietà che .drag-over cambia (sotto): "transition: all" includeva anche
       flex/flex-basis, che script.js sovrascrive via JS per bloccare l'altezza (vedi
       "provaBloccaAltezze" in creaDragBoard) - per 200ms il flex-basis animava dal valore
       precedente (spesso lo 0% di default) a quello fissato, dando altezze intermedie sbagliate
       e disallineate tra un .drag-item e l'altro durante la transizione. */
    transition: background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.2s cubic-bezier(0.4, 0, 0.2, 1),
        box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.drag-dropzone.drag-over {
    background: var(--qr-nota-sfondo);
    border-color: var(--qr-accento);
    box-shadow: 0 0 0 4px oklch(0.55 0.19 258 / 0.12);
}

.drag-empty-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    min-height: 140px;
    padding: 24px 16px;
    border: 1.5px dashed var(--qr-bordo-input);
    border-radius: var(--raggio-card);
    background: rgba(255, 255, 255, 0.6);
    color: var(--qr-testo-hint);
    text-align: center;
    font-size: 13px;
    line-height: 1.4;
    gap: 6px;
    user-select: none;
    pointer-events: none;
}

.drag-colonna[data-colonna-id="presenti"] .drag-empty-placeholder {
    border-color: var(--qr-riga-bordo-lock);
    background: rgba(255, 255, 255, 0.75);
    color: var(--qr-obbligo-testo);
}

.drag-item {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--colore-superficie);
    border: 1px solid var(--qr-bordo);
    border-radius: var(--raggio-card);
    padding: 10px 12px;
    box-shadow: var(--qr-ombra-card);
    cursor: grab;
    user-select: none;
    position: relative;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
}

.drag-item:hover {
    border-color: var(--qr-testo-hint);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -2px rgba(0, 0, 0, 0.04);
    transform: translateY(-1px);
}

.drag-item:focus-visible {
    outline: none;
    border-color: var(--qr-accento);
    box-shadow: var(--qr-ombra-focus);
    background: var(--colore-sfondo);
}

.drag-item.dragging {
    opacity: 0.35;
    cursor: grabbing;
    transform: scale(0.97);
    border: 1.5px dashed var(--qr-accento);
}

.drag-item-handle {
    color: var(--qr-testo-hint);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    cursor: grab;
    padding: 2px;
}

.drag-item:active .drag-item-handle {
    cursor: grabbing;
}

.drag-item-img {
    width: 46px;
    height: 46px;
    object-fit: cover;
    border-radius: var(--raggio-card);
    flex-shrink: 0;
    background: var(--colore-sfondo);
}

.drag-item-testo {
    flex: 1;
    min-width: 0;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--colore-testo);
    line-height: 1.35;
}

/* Item con sottotitolo: stesso rapporto fra titolo e descrizione delle checkbox
   (vedi .checkbox-descrizione), così le due presentazioni si somigliano. */
.drag-item-testo:has(.drag-item-titolo) {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.drag-item-descrizione {
    font-family: var(--font-titoli);
    font-weight: 400;
    font-size: 12.5px;
    line-height: 1.4;
    color: var(--colore-testo-secondario);
}

.drag-keyboard-hint {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 0;
    max-height: 0;
    padding: 0 14px;
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
    background: var(--qr-pill-sfondo);
    border: 1px solid transparent;
    border-radius: var(--raggio-card);
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--colore-testo-secondario);
    transform: translateY(-4px);
    /* Elencate esplicitamente (non "all"): stesso motivo del commento su .drag-dropzone più
       sopra, per non rischiare di animare in futuro una proprietà mai pensata per esserlo. */
    transition: margin-top 0.25s cubic-bezier(0.16, 1, 0.3, 1), max-height 0.25s cubic-bezier(0.16, 1, 0.3, 1),
        padding 0.25s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1),
        border-color 0.25s cubic-bezier(0.16, 1, 0.3, 1), transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Mostra il suggerimento di accessibilità solo quando l'utente naviga da tastiera (focus-visible su un elemento) */
.drag-wrapper:has(:focus-visible) .drag-keyboard-hint,
.drag-wrapper.mostra-hint-tastiera .drag-keyboard-hint {
    margin-top: 14px;
    max-height: 120px;
    padding: 10px 14px;
    opacity: 1;
    border-color: var(--qr-bordo);
    transform: translateY(0);
    pointer-events: auto;
}

.drag-keyboard-hint kbd {
    display: inline-block;
    padding: 2px 6px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    color: var(--colore-testo);
    background-color: var(--colore-superficie);
    border: 1px solid var(--qr-bordo-input);
    border-radius: var(--raggio-card);
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
}

.drag-keyboard-icon {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    color: var(--colore-testo-terziario);
}