@charset "UTF-8";
/* =====================================================================
   Piattaforma Formazione — foglio di stile unico

   Impianto visivo: "documento ufficiale". Carta calda invece del bianco
   accecante, inchiostro blu profondo, filetti sottili al posto dei bordi
   spessi, serif istituzionale per i titoli. Il corso deve somigliare a un
   documento aziendale, non a un'app: e' formazione obbligatoria che finisce
   in un fascicolo di audit.

   Corpo del testo volutamente grande (17px): lo leggono lavoratori di ogni
   eta', spesso da telefono, a volte in condizioni di luce pessime.
   ===================================================================== */

/* ------------------------------------------------------------ variabili */

:root {
    /* Il colore d'accento e' sovrascritto a runtime dalle impostazioni. */
    --accento: #1f4e6b;
    --accento-scuro: #16394f;
    --accento-chiaro: #e7eff4;

    --carta: #faf8f4;
    --carta-alt: #f3efe7;
    --superficie: #ffffff;
    --inchiostro: #1c1a17;
    --inchiostro-medio: #4a4640;
    --inchiostro-tenue: #7d776e;
    --filetto: #ddd7cb;
    --filetto-forte: #c4bcac;

    --successo: #2f6b3f;
    --successo-sfondo: #e8f1ea;
    --errore: #9c2b2b;
    --errore-sfondo: #f8eaea;
    --avviso: #8a5a12;
    --avviso-sfondo: #fbf1de;

    --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua",
             Georgia, "Times New Roman", serif;
    --sans: "Segoe UI", "Helvetica Neue", "Liberation Sans", "Noto Sans",
            "DejaVu Sans", sans-serif;
    --mono: "Cascadia Mono", "SF Mono", Consolas, "Liberation Mono", monospace;

    --r: 3px;                       /* raggio minimo: e' carta, non plastica */
    --ombra: 0 1px 2px rgba(28, 26, 23, .06), 0 8px 24px -14px rgba(28, 26, 23, .28);
    --ombra-alta: 0 2px 6px rgba(28, 26, 23, .08), 0 24px 48px -24px rgba(28, 26, 23, .34);
    --colonna: 74rem;
    --transizione: 140ms cubic-bezier(.4, 0, .2, 1);
}

@media (prefers-color-scheme: dark) {
    :root {
        --carta: #16161a;
        --carta-alt: #1d1d22;
        --superficie: #1f1f25;
        --inchiostro: #ece8e1;
        --inchiostro-medio: #b5afa6;
        --inchiostro-tenue: #8b857c;
        --filetto: #33333b;
        --filetto-forte: #4a4a54;
        --accento-chiaro: #1c2f3c;
        --successo-sfondo: #17291d;
        --errore-sfondo: #2d1818;
        --avviso-sfondo: #2b2213;
        --ombra: 0 1px 2px rgba(0, 0, 0, .5), 0 8px 24px -14px rgba(0, 0, 0, .8);
        --ombra-alta: 0 2px 6px rgba(0, 0, 0, .5), 0 24px 48px -24px rgba(0, 0, 0, .9);
    }
}

/* --------------------------------------------------- temi selezionabili */
/* "documento" e' il :root di base qui sopra: nessun blocco proprio. Gli altri
   tre ridefiniscono solo le variabili. L'accento e' iniettato a runtime da
   testa.php e vince sempre (non lo tocca nessun tema). In modalita' scura del
   dispositivo, "moderno" e "istituzionale" adottano la palette scura condivisa:
   la loro identita' e' in chiaro e nella forma (angoli, caratteri). "notturno"
   resta scuro comunque, a prescindere dal dispositivo. */

/* forma: vale in chiaro e in scuro */
:root[data-tema="moderno"] {
    --serif: var(--sans);          /* titoli lineari, non piu' con grazie */
    --r: 12px;                      /* angoli morbidi */
    --ombra: 0 1px 2px rgba(15, 23, 42, .05), 0 12px 32px -12px rgba(15, 23, 42, .20);
    --ombra-alta: 0 2px 8px rgba(15, 23, 42, .07), 0 32px 64px -24px rgba(15, 23, 42, .26);
}
:root[data-tema="istituzionale"] {
    --r: 0;                         /* spigoli netti, sobri */
    --ombra: 0 1px 0 rgba(24, 24, 27, .06), 0 1px 3px rgba(24, 24, 27, .05);
    --ombra-alta: 0 1px 0 rgba(24, 24, 27, .08), 0 6px 16px -8px rgba(24, 24, 27, .18);
}

/* colori: solo in chiaro. In scuro subentra la palette scura condivisa. */
@media (prefers-color-scheme: light) {
    :root[data-tema="moderno"] {
        --carta: #f5f7fa;  --carta-alt: #eef2f7;  --superficie: #ffffff;
        --inchiostro: #0f172a;  --inchiostro-medio: #475569;  --inchiostro-tenue: #94a3b8;
        --filetto: #e2e8f0;  --filetto-forte: #cbd5e1;
    }
    :root[data-tema="istituzionale"] {
        --carta: #ffffff;  --carta-alt: #f4f4f5;  --superficie: #ffffff;
        --inchiostro: #18181b;  --inchiostro-medio: #3f3f46;  --inchiostro-tenue: #71717a;
        --filetto: #d4d4d8;  --filetto-forte: #a1a1aa;
    }
}

/* notturno: scuro sempre. Specificita' (0,1,1) > @media :root (0,0,1): vince. */
:root[data-tema="notturno"] {
    --carta: #0f1115;  --carta-alt: #161922;  --superficie: #1a1e27;
    --inchiostro: #e6e8ec;  --inchiostro-medio: #b0b4bd;  --inchiostro-tenue: #7e8490;
    --filetto: #2a2f3a;  --filetto-forte: #3d4350;
    --accento-chiaro: color-mix(in srgb, var(--accento) 26%, #0f1115);
    /* Sfondi dei riquadri: senza questi, in notturno .esempio/.nota-errore
       resterebbero chiari (testo chiaro su fondo chiaro). Stessi valori della
       palette scura di sistema qui sopra, cosi' il riquadro «Esempio pratico»
       e gli avvisi restano leggibili anche nel tema scuro fisso. */
    --successo-sfondo: #17291d;  --errore-sfondo: #2d1818;  --avviso-sfondo: #2b2213;
    --ombra: 0 1px 2px rgba(0, 0, 0, .5), 0 8px 24px -14px rgba(0, 0, 0, .8);
    --ombra-alta: 0 2px 6px rgba(0, 0, 0, .5), 0 24px 48px -24px rgba(0, 0, 0, .9);
}

/* ------------------------------------------------------------- reset */

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

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}

body {
    margin: 0;
    background: var(--carta);
    color: var(--inchiostro);
    font: 400 17px/1.65 var(--sans);
    font-synthesis-weight: none;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* Grana appena percettibile: toglie l'effetto "schermo" dal fondo carta. */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    opacity: .5;
    background-image: radial-gradient(rgba(120, 110, 95, .05) 1px, transparent 1px);
    background-size: 3px 3px;
}

@media (prefers-color-scheme: dark) {
    body::before { opacity: .35; background-image: radial-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px); }
}

img, svg { max-width: 100%; height: auto; display: block; }

/* ---------------------------------------------------------- tipografia */

h1, h2, h3, h4 {
    font-family: var(--serif);
    font-weight: 600;
    line-height: 1.22;
    letter-spacing: -.011em;
    margin: 0 0 .5em;
    color: var(--inchiostro);
    text-wrap: balance;
}

h1 { font-size: clamp(1.75rem, 1.35rem + 1.7vw, 2.5rem); }
h2 { font-size: clamp(1.35rem, 1.15rem + .8vw, 1.75rem); }
h3 { font-size: 1.2rem; }
h4 { font-size: 1.02rem; font-family: var(--sans); font-weight: 650; }

p { margin: 0 0 1em; max-width: 68ch; }
ul, ol { margin: 0 0 1em; padding-left: 1.35em; max-width: 68ch; }
li { margin-bottom: .35em; }
li::marker { color: var(--accento); }

a {
    color: var(--accento);
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
}
a:hover { text-decoration-thickness: 2px; }

strong, b { font-weight: 650; }
small { font-size: .85rem; }
code, kbd { font-family: var(--mono); font-size: .9em; }

.occhiello {
    font: 600 .72rem/1.3 var(--sans);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--inchiostro-tenue);
    margin: 0 0 .5rem;
}

.tenue { color: var(--inchiostro-tenue); }
.medio { color: var(--inchiostro-medio); }
.mono { font-family: var(--mono); }
.centrato { text-align: center; }
.nowrap { white-space: nowrap; }

/* Sottotitolo "guida", quello che spiega la pagina in una riga. */
.guida {
    color: var(--inchiostro-medio);
    font-size: 1.02rem;
    max-width: 70ch;
    margin: -.25rem 0 1.75rem;
}

/* Solo per lettori di schermo. */
.solo-lettore {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.salta-al-contenuto {
    position: absolute;
    left: 1rem;
    top: -4rem;
    z-index: 100;
    background: var(--accento);
    color: #fff;
    padding: .7rem 1.1rem;
    border-radius: var(--r);
    transition: top var(--transizione);
}
.salta-al-contenuto:focus { top: 1rem; }

:focus-visible {
    outline: 2.5px solid var(--accento);
    outline-offset: 2px;
    border-radius: 2px;
}

/* ------------------------------------------------------------- impianto */

.guscio { position: relative; z-index: 1; display: contents; }

.contenitore {
    width: 100%;
    max-width: var(--colonna);
    margin-inline: auto;
    padding-inline: clamp(1rem, 4vw, 2.5rem);
}

.contenitore-stretto { max-width: 52rem; }

main { flex: 1 0 auto; padding-block: clamp(1.75rem, 4vw, 3rem); position: relative; z-index: 1; }

/* ------------------------------------------------------ testata globale */

.testata {
    position: sticky;
    top: 0;
    z-index: 20;
    background: color-mix(in srgb, var(--carta) 88%, transparent);
    backdrop-filter: saturate(1.4) blur(10px);
    border-bottom: 1px solid var(--filetto);
}

.testata-riga {
    display: flex;
    align-items: center;
    gap: clamp(.75rem, 2vw, 1.5rem);
    min-height: 66px;
}

.marchio {
    display: flex;
    align-items: center;
    gap: .7rem;
    text-decoration: none;
    color: inherit;
    font-family: var(--serif);
    font-size: 1.12rem;
    font-weight: 600;
    letter-spacing: -.01em;
    margin-right: auto;
    padding: .25rem 0;
}
.marchio:hover { text-decoration: none; }
.marchio img { max-height: 34px; width: auto; }

.marchio-sigla {
    display: grid;
    place-items: center;
    width: 34px; height: 34px;
    flex: none;
    background: var(--accento);
    color: #fff;
    border-radius: var(--r);
    font: 650 .82rem/1 var(--sans);
    letter-spacing: .02em;
}

.nav-principale {
    display: flex;
    align-items: center;
    gap: .2rem;
    flex-wrap: wrap;
}

.nav-principale a {
    display: inline-block;
    padding: .5rem .8rem;
    color: var(--inchiostro-medio);
    text-decoration: none;
    font-size: .95rem;
    font-weight: 500;
    border-radius: var(--r);
    position: relative;
}
.nav-principale a:hover { color: var(--inchiostro); background: var(--carta-alt); }
.nav-principale a[aria-current="page"] { color: var(--accento); font-weight: 600; }
.nav-principale a[aria-current="page"]::after {
    content: "";
    position: absolute;
    left: .8rem; right: .8rem; bottom: .1rem;
    height: 2px;
    background: var(--accento);
}

.utente-corrente {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding-left: clamp(.5rem, 2vw, 1rem);
    border-left: 1px solid var(--filetto);
    font-size: .88rem;
    color: var(--inchiostro-medio);
}
.utente-corrente strong { display: block; color: var(--inchiostro); font-size: .93rem; }

@media (max-width: 700px) {
    .testata-riga { flex-wrap: wrap; padding-block: .6rem; min-height: 0; }
    .marchio { font-size: 1rem; }
    .utente-corrente { border-left: 0; padding-left: 0; }
    .nav-principale { order: 3; width: 100%; border-top: 1px solid var(--filetto); padding-top: .4rem; overflow-x: auto; flex-wrap: nowrap; }
    .nav-principale a { white-space: nowrap; }
}

/* ----------------------------------------------------------- pie' pagina */

.pie {
    border-top: 1px solid var(--filetto);
    padding-block: 1.5rem 2rem;
    font-size: .82rem;
    color: var(--inchiostro-tenue);
    position: relative;
    z-index: 1;
}
.pie-riga { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; align-items: center; }
.pie a { color: var(--inchiostro-medio); }

/* --------------------------------------------------------------- schede */

.scheda {
    background: var(--superficie);
    border: 1px solid var(--filetto);
    border-radius: var(--r);
    padding: clamp(1.25rem, 3vw, 1.9rem);
    box-shadow: var(--ombra);
}

.scheda + .scheda { margin-top: 1.25rem; }
.scheda-titolo { margin-top: 0; }
.scheda-piatta { box-shadow: none; background: var(--carta-alt); }

.griglia { display: grid; gap: 1.25rem; }
.griglia-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }
.griglia-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
.griglia-4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); }

/* --------------------------------------------------------- intestazione */

.intestazione-pagina {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.75rem;
    padding-bottom: 1.1rem;
    border-bottom: 2px solid var(--inchiostro);
}
.intestazione-pagina h1 { margin-bottom: .15rem; }
.intestazione-pagina .guida { margin: 0; }
.intestazione-azioni { display: flex; flex-wrap: wrap; gap: .6rem; }

/* -------------------------------------------------------------- bottoni */

.bottone {
    --b-sfondo: var(--accento);
    --b-testo: #fff;
    --b-bordo: var(--accento);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    min-height: 46px;
    padding: .6rem 1.2rem;
    background: var(--b-sfondo);
    color: var(--b-testo);
    border: 1px solid var(--b-bordo);
    border-radius: var(--r);
    font: 600 .96rem/1.2 var(--sans);
    text-decoration: none;
    cursor: pointer;
    transition: background var(--transizione), border-color var(--transizione),
                transform var(--transizione), box-shadow var(--transizione);
    text-align: center;
}
.bottone:hover { background: var(--accento-scuro); border-color: var(--accento-scuro); text-decoration: none; }
.bottone:active { transform: translateY(1px); }
.bottone[disabled], .bottone[aria-disabled="true"] {
    opacity: .45;
    cursor: not-allowed;
    pointer-events: none;
}

.bottone-secondario {
    --b-sfondo: transparent;
    --b-testo: var(--inchiostro);
    --b-bordo: var(--filetto-forte);
}
.bottone-secondario:hover { background: var(--carta-alt); border-color: var(--inchiostro-tenue); }

.bottone-fantasma {
    --b-sfondo: transparent;
    --b-testo: var(--inchiostro-medio);
    --b-bordo: transparent;
    min-height: 40px;
    padding: .4rem .7rem;
    font-weight: 500;
}
.bottone-fantasma:hover { background: var(--carta-alt); color: var(--inchiostro); border-color: transparent; }

.bottone-pericolo {
    --b-sfondo: transparent;
    --b-testo: var(--errore);
    --b-bordo: color-mix(in srgb, var(--errore) 40%, transparent);
}
.bottone-pericolo:hover { background: var(--errore); color: #fff; border-color: var(--errore); }

.bottone-grande { min-height: 54px; padding: .8rem 1.9rem; font-size: 1.05rem; }
.bottone-blocco { width: 100%; }
.bottone-piccolo { min-height: 36px; padding: .3rem .65rem; font-size: .85rem; }

.gruppo-bottoni { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }
.gruppo-bottoni-fine { justify-content: flex-end; }

/* ---------------------------------------------------------------- form */

.campo { margin-bottom: 1.15rem; }
.campo:last-child { margin-bottom: 0; }

label, .etichetta-campo {
    display: block;
    font-size: .9rem;
    font-weight: 600;
    color: var(--inchiostro-medio);
    margin-bottom: .35rem;
}

.aiuto-campo {
    display: block;
    font-size: .84rem;
    color: var(--inchiostro-tenue);
    margin-top: .35rem;
    max-width: 60ch;
}

input[type="text"], input[type="password"], input[type="email"], input[type="date"],
input[type="number"], input[type="search"], input[type="url"], input[type="file"],
select, textarea {
    width: 100%;
    min-height: 46px;
    padding: .55rem .75rem;
    background: var(--superficie);
    color: var(--inchiostro);
    border: 1px solid var(--filetto-forte);
    border-radius: var(--r);
    font: 400 1rem/1.5 var(--sans);
    transition: border-color var(--transizione), box-shadow var(--transizione);
}
textarea { min-height: 8rem; resize: vertical; line-height: 1.6; }
textarea.alta { min-height: 16rem; }
textarea.mono { font-family: var(--mono); font-size: .92rem; }

input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--accento);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accento) 18%, transparent);
}
input[readonly], input[disabled], select[disabled], textarea[disabled] {
    background: var(--carta-alt);
    color: var(--inchiostro-tenue);
    cursor: not-allowed;
}
input[type="file"] { padding: .55rem; font-size: .92rem; }

select {
    appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, var(--inchiostro-medio) 50%),
                      linear-gradient(135deg, var(--inchiostro-medio) 50%, transparent 50%);
    background-position: calc(100% - 18px) center, calc(100% - 13px) center;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    padding-right: 2.4rem;
}

.riga-campi { display: grid; gap: 0 1.1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); }

.scelta {
    display: flex;
    align-items: flex-start;
    gap: .65rem;
    margin-bottom: .55rem;
    cursor: pointer;
    font-weight: 400;
    color: var(--inchiostro);
    line-height: 1.5;
}
.scelta input[type="checkbox"], .scelta input[type="radio"] {
    width: 21px; height: 21px;
    min-height: 0;
    margin: .18rem 0 0;
    flex: none;
    accent-color: var(--accento);
    cursor: pointer;
}
.scelta span { flex: 1; }

fieldset {
    border: 1px solid var(--filetto);
    border-radius: var(--r);
    padding: 1rem 1.15rem;
    margin: 0 0 1.15rem;
}
legend { font-size: .82rem; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; color: var(--inchiostro-tenue); padding-inline: .4rem; }

/* Barra dei filtri sopra le tabelle. */
.filtri {
    display: flex;
    flex-wrap: wrap;
    gap: .7rem;
    align-items: flex-end;
    margin-bottom: 1.25rem;
    padding: 1rem 1.1rem;
    background: var(--carta-alt);
    border: 1px solid var(--filetto);
    border-radius: var(--r);
}
.filtri .campo { margin: 0; min-width: 9rem; flex: 1 1 9rem; }
.filtri .campo-largo { flex: 2 1 15rem; }
.filtri label { font-size: .78rem; text-transform: uppercase; letter-spacing: .07em; }

/* -------------------------------------------------------------- avvisi */

.avviso {
    display: flex;
    gap: .8rem;
    padding: .9rem 1.1rem;
    border: 1px solid var(--filetto-forte);
    border-left: 4px solid var(--inchiostro-tenue);
    border-radius: var(--r);
    background: var(--carta-alt);
    margin-bottom: 1.25rem;
    font-size: .96rem;
}
.avviso p:last-child, .avviso ul:last-child { margin-bottom: 0; }
.avviso-successo { border-left-color: var(--successo); background: var(--successo-sfondo); }
.avviso-errore   { border-left-color: var(--errore);   background: var(--errore-sfondo); }
.avviso-attenzione { border-left-color: var(--avviso); background: var(--avviso-sfondo); }
.avviso-info     { border-left-color: var(--accento);  background: var(--accento-chiaro); }
.avviso-titolo { font-weight: 650; margin-bottom: .2rem; }

/* ------------------------------------------------------------ etichette */

.etichetta {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .18rem .55rem;
    border-radius: 100px;
    font: 600 .76rem/1.5 var(--sans);
    letter-spacing: .02em;
    background: var(--carta-alt);
    color: var(--inchiostro-medio);
    border: 1px solid var(--filetto);
    white-space: nowrap;
}
.etichetta-successo { background: var(--successo-sfondo); color: var(--successo); border-color: color-mix(in srgb, var(--successo) 30%, transparent); }
.etichetta-errore   { background: var(--errore-sfondo);   color: var(--errore);   border-color: color-mix(in srgb, var(--errore) 30%, transparent); }
.etichetta-attesa   { background: var(--avviso-sfondo);   color: var(--avviso);   border-color: color-mix(in srgb, var(--avviso) 30%, transparent); }
.etichetta-corso    { background: var(--accento-chiaro);  color: var(--accento);  border-color: color-mix(in srgb, var(--accento) 25%, transparent); }

/* -------------------------------------------------------------- tabelle */

.tabella-guscio {
    overflow-x: auto;
    border: 1px solid var(--filetto);
    border-radius: var(--r);
    background: var(--superficie);
}

table.tabella {
    width: 100%;
    border-collapse: collapse;
    font-size: .94rem;
}
.tabella th, .tabella td {
    padding: .7rem .85rem;
    text-align: left;
    border-bottom: 1px solid var(--filetto);
    vertical-align: middle;
}
.tabella thead th {
    background: var(--carta-alt);
    font: 650 .76rem/1.4 var(--sans);
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--inchiostro-tenue);
    white-space: nowrap;
    position: sticky;
    top: 0;
    z-index: 1;
}
.tabella tbody tr:last-child td { border-bottom: 0; }
.tabella tbody tr:hover { background: var(--carta-alt); }
.tabella .num { text-align: right; font-variant-numeric: tabular-nums; }
.tabella .azioni { text-align: right; white-space: nowrap; }
.tabella .principale { font-weight: 600; }
.tabella caption { caption-side: bottom; padding: .7rem; font-size: .84rem; color: var(--inchiostro-tenue); text-align: left; }

/* --------------------------------------------------- barra avanzamento */

.avanzamento {
    display: block;
    height: 5px;
    background: var(--filetto);
    border-radius: 100px;
    overflow: hidden;
}
.avanzamento > i {
    display: block;
    height: 100%;
    background: var(--accento);
    border-radius: inherit;
    transition: width 300ms ease;
}
.avanzamento-completo > i { background: var(--successo); }

.avanzamento-riga { display: flex; align-items: center; gap: .7rem; }
.avanzamento-riga .avanzamento { flex: 1; min-width: 5rem; }
.avanzamento-riga small { font-variant-numeric: tabular-nums; color: var(--inchiostro-tenue); white-space: nowrap; }

/* ---------------------------------------------------------- statistiche */

.dato {
    background: var(--superficie);
    border: 1px solid var(--filetto);
    border-radius: var(--r);
    padding: 1.1rem 1.25rem;
}
.dato-valore {
    font-family: var(--serif);
    font-size: clamp(1.7rem, 1.4rem + 1.2vw, 2.3rem);
    font-weight: 600;
    line-height: 1.05;
    font-variant-numeric: tabular-nums;
    color: var(--accento);
    display: block;
}
.dato-nome {
    font-size: .8rem;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--inchiostro-tenue);
    font-weight: 600;
    margin-top: .35rem;
    display: block;
}

/* --------------------------------------------------------- stato vuoto */

.vuoto {
    text-align: center;
    padding: clamp(2rem, 6vw, 3.5rem) 1.5rem;
    color: var(--inchiostro-tenue);
    border: 1px dashed var(--filetto-forte);
    border-radius: var(--r);
    background: var(--carta-alt);
}
.vuoto h3 { color: var(--inchiostro-medio); margin-bottom: .3rem; }
.vuoto p { margin-inline: auto; }

/* ============================ AREA CORSISTA ============================ */

/* Elenco corsi assegnati. */
.corso-scheda {
    display: flex;
    flex-direction: column;
    gap: .9rem;
    background: var(--superficie);
    border: 1px solid var(--filetto);
    border-left: 4px solid var(--accento);
    border-radius: var(--r);
    padding: 1.4rem 1.5rem;
    box-shadow: var(--ombra);
    transition: box-shadow var(--transizione), transform var(--transizione);
}
.corso-scheda:hover { box-shadow: var(--ombra-alta); }
.corso-scheda.completato { border-left-color: var(--successo); }
.corso-scheda.scaduto { border-left-color: var(--errore); }
.corso-scheda h2 { font-size: 1.3rem; margin-bottom: .2rem; }
.corso-scheda-meta { display: flex; flex-wrap: wrap; gap: .45rem .9rem; font-size: .86rem; color: var(--inchiostro-tenue); }
.corso-scheda-azioni { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: auto; padding-top: .3rem; }

/* --- Player -------------------------------------------------------- */

.player {
    display: grid;
    grid-template-columns: 17.5rem 1fr;
    gap: clamp(1.25rem, 3vw, 2.25rem);
    align-items: start;
}

.indice {
    position: sticky;
    top: 84px;
    background: var(--superficie);
    border: 1px solid var(--filetto);
    border-radius: var(--r);
    padding: 1.1rem;
    max-height: calc(100vh - 110px);
    overflow-y: auto;
}
.indice h2 { font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; font-family: var(--sans); color: var(--inchiostro-tenue); margin-bottom: .8rem; }
.indice ol { list-style: none; margin: 0 0 1rem; padding: 0; }
.indice > ol > li { margin-bottom: 1rem; }
.indice-modulo {
    font: 650 .88rem/1.4 var(--sans);
    color: var(--inchiostro);
    margin-bottom: .4rem;
    display: flex;
    gap: .5rem;
}
.indice-modulo span:first-child { color: var(--accento); font-variant-numeric: tabular-nums; }
.indice ol ol { margin: 0; padding: 0; border-left: 1px solid var(--filetto); margin-left: .45rem; }

.indice-slide {
    display: flex;
    align-items: baseline;
    gap: .5rem;
    padding: .38rem .5rem .38rem .75rem;
    font-size: .89rem;
    line-height: 1.4;
    color: var(--inchiostro-medio);
    text-decoration: none;
    border-radius: 0 var(--r) var(--r) 0;
    margin-left: -1px;
    border-left: 2px solid transparent;
}
.indice-slide:hover { background: var(--carta-alt); text-decoration: none; color: var(--inchiostro); }
.indice-slide[aria-current="true"] {
    background: var(--accento-chiaro);
    border-left-color: var(--accento);
    color: var(--accento);
    font-weight: 600;
}
.indice-slide.bloccata { color: var(--inchiostro-tenue); cursor: not-allowed; opacity: .6; }
.indice-segno { flex: none; width: 1.1rem; font-size: .8rem; text-align: center; }
.indice-slide.fatta .indice-segno { color: var(--successo); }

/* La slide vera e propria: impaginata come una pagina stampata. */
.slide {
    background: var(--superficie);
    border: 1px solid var(--filetto);
    border-radius: var(--r);
    box-shadow: var(--ombra);
    padding: clamp(1.5rem, 4vw, 3.25rem);
    min-height: 26rem;
    position: relative;
}
.slide::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 3px;
    background: var(--accento);
    border-radius: var(--r) var(--r) 0 0;
}

.slide-occhiello {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem .8rem;
    align-items: baseline;
    font: 600 .74rem/1.4 var(--sans);
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--inchiostro-tenue);
    margin-bottom: .9rem;
}
.slide-occhiello .modulo { color: var(--accento); }

.slide h1 { font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.1rem); margin-bottom: 1.1rem; }

.slide-corpo { font-size: 1.06rem; line-height: 1.72; }
.slide-corpo > *:first-child { margin-top: 0; }
.slide-corpo h2 { font-size: 1.28rem; margin-top: 1.8rem; }
.slide-corpo h3 { font-size: 1.1rem; font-family: var(--sans); font-weight: 650; margin-top: 1.4rem; }
.slide-corpo ul, .slide-corpo ol { margin-bottom: 1.15rem; }
.slide-corpo li { margin-bottom: .5rem; }

/* Citazione testuale di un criterio della norma. */
.slide-corpo blockquote,
.citazione {
    margin: 1.4rem 0;
    padding: 1rem 1.3rem;
    border-left: 3px solid var(--accento);
    background: var(--accento-chiaro);
    border-radius: 0 var(--r) var(--r) 0;
    font-size: .99rem;
}
.slide-corpo blockquote p:last-child, .citazione p:last-child { margin-bottom: 0; }
.citazione cite, .slide-corpo blockquote cite {
    display: block;
    margin-top: .5rem;
    font-size: .82rem;
    font-style: normal;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--inchiostro-tenue);
    font-weight: 600;
}

/* Riquadro "da ricordare". */
.slide-corpo .nota,
.nota {
    margin: 1.4rem 0;
    padding: 1rem 1.25rem;
    border: 1px solid var(--filetto-forte);
    border-radius: var(--r);
    background: var(--carta-alt);
    font-size: .98rem;
}
.nota-titolo {
    font: 650 .74rem/1.4 var(--sans);
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--inchiostro-tenue);
    margin-bottom: .45rem;
}

/* Elenco di ruoli / organigramma. */
.ruoli { display: grid; gap: .7rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); margin: 1.3rem 0; list-style: none; padding: 0; }
.ruoli li { margin: 0; padding: .85rem 1rem; border: 1px solid var(--filetto); border-radius: var(--r); background: var(--carta-alt); }
.ruoli strong { display: block; font-size: .95rem; }
.ruoli span { font-size: .87rem; color: var(--inchiostro-tenue); }

.slide-figura { margin: 1.5rem 0; }
.slide-figura img { border: 1px solid var(--filetto); border-radius: var(--r); margin-inline: auto; }
.slide-figura figcaption { margin-top: .6rem; font-size: .86rem; color: var(--inchiostro-tenue); text-align: center; }

.slide-fonte {
    margin-top: 2rem;
    padding-top: .9rem;
    border-top: 1px solid var(--filetto);
    font-size: .82rem;
    color: var(--inchiostro-tenue);
}

/* Navigazione fra le slide. */
.navigazione {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .8rem;
    margin-top: 1.25rem;
    padding: 1rem 1.15rem;
    background: var(--superficie);
    border: 1px solid var(--filetto);
    border-radius: var(--r);
    position: sticky;
    bottom: .75rem;
    box-shadow: var(--ombra-alta);
}
.navigazione .spinta { margin-left: auto; }

.contatempo {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    font-size: .87rem;
    color: var(--inchiostro-tenue);
    font-variant-numeric: tabular-nums;
}
.contatempo b { color: var(--accento); font-weight: 650; }
.contatempo.pronto b { color: var(--successo); }

.barra-corso {
    display: flex;
    align-items: center;
    gap: .9rem;
    margin-bottom: 1.25rem;
    padding-bottom: .9rem;
    border-bottom: 1px solid var(--filetto);
    font-size: .88rem;
}
.barra-corso .avanzamento { flex: 1; }
.barra-corso b { font-variant-numeric: tabular-nums; }

@media (max-width: 900px) {
    .player { grid-template-columns: 1fr; }
    .indice { position: static; max-height: none; order: 2; }
    .navigazione { position: sticky; bottom: 0; border-radius: var(--r) var(--r) 0 0; }
}

/* --- Test ---------------------------------------------------------- */

.quiz-testata {
    display: flex;
    flex-wrap: wrap;
    gap: .8rem 1.5rem;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 66px;
    z-index: 10;
    background: color-mix(in srgb, var(--carta) 92%, transparent);
    backdrop-filter: blur(8px);
    padding: .8rem 0;
    border-bottom: 1px solid var(--filetto);
    margin-bottom: 1.5rem;
}
.quiz-cronometro { font-family: var(--mono); font-size: 1.1rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.quiz-cronometro.allarme { color: var(--errore); }

.domanda {
    background: var(--superficie);
    border: 1px solid var(--filetto);
    border-radius: var(--r);
    padding: clamp(1.15rem, 3vw, 1.75rem);
    margin-bottom: 1.15rem;
    counter-increment: domanda;
}
.domanda-numero {
    font: 650 .74rem/1.4 var(--sans);
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--accento);
    margin-bottom: .5rem;
}
.domanda-testo { font-size: 1.09rem; font-weight: 600; line-height: 1.5; margin-bottom: 1.1rem; max-width: 70ch; }

.opzioni { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; max-width: none; }
.opzione {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    padding: .85rem 1rem;
    border: 1px solid var(--filetto-forte);
    border-radius: var(--r);
    cursor: pointer;
    background: var(--superficie);
    transition: border-color var(--transizione), background var(--transizione);
    font-weight: 400;
    margin: 0;
    line-height: 1.5;
}
.opzione:hover { border-color: var(--accento); background: var(--accento-chiaro); }
.opzione input { margin: .2rem 0 0; }
.opzione:has(input:checked) {
    border-color: var(--accento);
    background: var(--accento-chiaro);
    box-shadow: inset 0 0 0 1px var(--accento);
}

/* Correzione mostrata dopo la consegna. */
.opzione.giusta { border-color: var(--successo); background: var(--successo-sfondo); box-shadow: inset 0 0 0 1px var(--successo); }
.opzione.sbagliata { border-color: var(--errore); background: var(--errore-sfondo); box-shadow: inset 0 0 0 1px var(--errore); }
.opzione-esito { margin-left: auto; font-size: .78rem; font-weight: 650; text-transform: uppercase; letter-spacing: .06em; white-space: nowrap; }
.opzione.giusta .opzione-esito { color: var(--successo); }
.opzione.sbagliata .opzione-esito { color: var(--errore); }

.spiegazione {
    margin-top: .9rem;
    padding: .8rem 1rem;
    border-left: 3px solid var(--accento);
    background: var(--accento-chiaro);
    border-radius: 0 var(--r) var(--r) 0;
    font-size: .94rem;
}

/* Esito finale. */
.esito {
    text-align: center;
    padding: clamp(1.75rem, 5vw, 3rem);
    border: 1px solid var(--filetto);
    border-top: 4px solid var(--accento);
    border-radius: var(--r);
    background: var(--superficie);
    box-shadow: var(--ombra);
    margin-bottom: 1.5rem;
}
.esito.superato { border-top-color: var(--successo); }
.esito.non-superato { border-top-color: var(--errore); }
.esito-punteggio {
    font-family: var(--serif);
    font-size: clamp(3rem, 2rem + 6vw, 5rem);
    font-weight: 600;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    color: var(--accento);
    display: block;
    margin-bottom: .3rem;
}
.esito.superato .esito-punteggio { color: var(--successo); }
.esito.non-superato .esito-punteggio { color: var(--errore); }
.esito p { margin-inline: auto; }

/* ============================== ADMIN ================================= */

.admin-nav {
    display: flex;
    gap: .15rem;
    overflow-x: auto;
    border-bottom: 1px solid var(--filetto);
    margin-bottom: 1.75rem;
    padding-bottom: 0;
    scrollbar-width: thin;
}
.admin-nav a {
    padding: .65rem 1rem;
    color: var(--inchiostro-medio);
    text-decoration: none;
    font-size: .93rem;
    font-weight: 500;
    white-space: nowrap;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}
.admin-nav a:hover { color: var(--inchiostro); background: var(--carta-alt); }
.admin-nav a[aria-current="page"] { color: var(--accento); border-bottom-color: var(--accento); font-weight: 650; }

.briciole { font-size: .86rem; color: var(--inchiostro-tenue); margin-bottom: .75rem; }
.briciole a { color: var(--inchiostro-medio); }
.briciole span { margin-inline: .35rem; }

/* Elenco ordinabile di moduli e slide. */
.elenco-ordinato { list-style: none; margin: 0; padding: 0; max-width: none; }
.elenco-ordinato li {
    display: flex;
    align-items: center;
    gap: .8rem;
    padding: .7rem .9rem;
    border: 1px solid var(--filetto);
    border-radius: var(--r);
    background: var(--superficie);
    margin-bottom: .5rem;
}
.elenco-ordinato .titolo { flex: 1; min-width: 0; }
.elenco-ordinato .titolo strong { display: block; }
.elenco-ordinato .titolo small { color: var(--inchiostro-tenue); }
.elenco-ordinato .maniglia { color: var(--inchiostro-tenue); font-variant-numeric: tabular-nums; font-size: .85rem; min-width: 2ch; }
.elenco-ordinato .azioni { display: flex; gap: .3rem; flex: none; }

.sotto-elenco { margin: .3rem 0 1.1rem 1.75rem; padding-left: 1rem; border-left: 2px solid var(--filetto); }

/* Modulo di conferma incorporato nelle azioni distruttive. */
form.in-linea { display: inline; }

/* ------------------------------------------------------- login / nudo */

.pagina-nuda {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: clamp(1.25rem, 5vw, 3rem);
    position: relative;
    z-index: 1;
}
.riquadro-accesso {
    width: 100%;
    max-width: 28rem;
    background: var(--superficie);
    border: 1px solid var(--filetto);
    border-top: 4px solid var(--accento);
    border-radius: var(--r);
    padding: clamp(1.75rem, 5vw, 2.75rem);
    box-shadow: var(--ombra-alta);
}
.riquadro-accesso .marchio-blocco { text-align: center; margin-bottom: 1.75rem; }
.riquadro-accesso .marchio-blocco img { max-height: 64px; width: auto; margin: 0 auto 1rem; }
.riquadro-accesso h1 { font-size: 1.55rem; margin-bottom: .3rem; }
.riquadro-accesso .guida { margin-bottom: 1.5rem; font-size: .95rem; }
/* La registrazione con codice chiede piu' campi dell'accesso e ne mette due
   per riga (cognome/nome): con la larghezza dell'accesso starebbero stretti. */
.riquadro-accesso.largo { max-width: 34rem; }
.riquadro-accesso .campi-appaiati {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 1rem;
}
@media (max-width: 30rem) {
    .riquadro-accesso .campi-appaiati { grid-template-columns: 1fr; }
}

/* -------------------------------------------------------- stampa */

@media print {
    .testata, .pie, .navigazione, .indice, .admin-nav, .filtri, .bottone, .bottone-schermo, .salta-al-contenuto { display: none !important; }
    body { background: #fff; color: #000; font-size: 11pt; }
    body::before { display: none; }
    .scheda, .slide, .tabella-guscio { box-shadow: none; border-color: #999; }
    .player { display: block; }
    a[href]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }
}

/* --------------------------------------------------- aggiunte successive */

/* Contatore delle risposte date nel test: public/js/quiz.js gli assegna la
   classe "completo" quando tutte le domande hanno una risposta, ma nel foglio
   mancava la regola corrispondente e il segnale non si vedeva. */
#quiz-risposte.completo { color: var(--successo); }

/* --------------------------------------------------- paginazione tabelle */
/* La usa il parziale views/admin/parti/paginazione.php. */

.paginazione {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem 1rem;
    align-items: center;
    justify-content: space-between;
    margin-top: 1rem;
}
.paginazione-conteggio {
    margin: .6rem 0 0;
    font-size: .84rem;
    color: var(--inchiostro-tenue);
}
.paginazione .paginazione-conteggio { margin: 0; }
.paginazione-numeri {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem;
    align-items: center;
}
.paginazione-numeri a,
.paginazione-numeri span {
    display: inline-block;
    min-width: 2.1rem;
    padding: .35rem .55rem;
    text-align: center;
    font-size: .88rem;
    border: 1px solid var(--filetto);
    border-radius: var(--r);
    text-decoration: none;
}
.paginazione-numeri a { color: var(--accento); background: var(--superficie); }
.paginazione-numeri a:hover { background: var(--carta-alt); border-color: var(--filetto-forte); }
.paginazione-corrente {
    background: var(--accento);
    border-color: var(--accento);
    color: #fff;
    font-weight: 600;
}
.paginazione-spenta { color: var(--inchiostro-tenue); border-color: transparent; }

/* ------------------------------------------------ correzioni area admin */

/* .scheda + .scheda mette un margine sopra, giusto quando le schede sono
   impilate ma sbagliato quando la griglia le affianca: le sfalsa in altezza. */
.griglia > .scheda + .scheda,
.griglia > .scheda-piatta + .scheda-piatta { margin-top: 0; }

/* Riga secondaria dentro un riquadro .dato (es. «di cui 3 in scadenza»). */
.dato-nota {
    margin: .35rem 0 0;
    font-size: .84rem;
    color: var(--inchiostro-tenue);
}

/* ----------------------------------------------------- scelta del tema */
.temi-scelta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    gap: 1rem;
}
.tema-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: .5rem;
    padding: 1rem;
    border: 1px solid var(--filetto);
    border-radius: var(--r);
    background: var(--superficie);
    cursor: pointer;
    transition: border-color var(--transizione), box-shadow var(--transizione);
}
.tema-card:hover { border-color: var(--filetto-forte); }
.tema-card:focus-within { outline: 2px solid var(--accento); outline-offset: 2px; }
.tema-card input { position: absolute; opacity: 0; width: 0; height: 0; }
/* stato attivo: reso dal server (classe) e, dove supportato, live con :has() */
.tema-card-attiva,
.tema-card:has(input:checked) { border-color: var(--accento); box-shadow: var(--ombra); }
.tema-campioni { display: flex; gap: .3rem; }
.tema-campioni span {
    width: 1.5rem; height: 1.5rem; border-radius: 4px;
    border: 1px solid rgba(0, 0, 0, .08);
}
.tema-nome { font-weight: 600; }
.tema-descrizione { font-size: .85rem; color: var(--inchiostro-tenue); line-height: 1.4; }

/* =====================================================================
   Illustrazioni delle slide (versione 0.4.0 «Illustrazioni»)

   Disegni in linea (SVG) al posto delle slide di solo testo. I colori NON
   stanno mai nell'SVG: i disegni usano solo le classi .ill-* qui sotto, che
   leggono le variabili del tema. Cosi' un unico file disegno resta coerente
   con i quattro temi, la modalita' scura e la stampa, senza ritocchi.
   ===================================================================== */

/* Contenitore dell'illustrazione nel player (fra il titolo e il corpo). */
.slide-illustrazione { margin: .4rem 0 1.7rem; }
.slide-illustrazione .illustrazione { margin: 0; }
/* Il disegno vero: centrato e non troppo largo, il resto (esempio, rivela)
   resta a piena larghezza della slide perche' e' testo da leggere. */
.slide-illustrazione svg.ill,
.illustrazione svg.ill {
    width: 100%;
    max-width: 34rem;
    height: auto;
    margin: 0 auto;
    display: block;
}

/* --- tavolozza condivisa dei disegni: le uniche «matite» ammesse --- */
.ill-tratto { fill: none; stroke: var(--inchiostro-medio); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.ill-tratto-fine { fill: none; stroke: var(--inchiostro-medio); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.ill-accento { stroke: var(--accento); }
.ill-area { fill: var(--carta-alt); }
.ill-area-accento { fill: var(--accento-chiaro); }
.ill-superficie { fill: var(--superficie); }
.ill-pieno { fill: var(--inchiostro-medio); stroke: none; }
.ill-pieno-accento { fill: var(--accento); stroke: none; }
.ill-vietato { stroke: var(--errore); }
.ill-vietato-pieno { fill: var(--errore); stroke: none; }
.ill-ok { stroke: var(--successo); }
.ill-ok-pieno { fill: var(--successo); stroke: none; }
.ill-testo { fill: var(--inchiostro); font: 600 15px var(--sans); }
.ill-testo-forte { fill: var(--accento); font: 700 16px var(--sans); }
.ill-testo-tenue { fill: var(--inchiostro-tenue); font: 500 12.5px var(--sans); letter-spacing: .06em; text-transform: uppercase; }

/* --- riquadro «Esempio pratico»: sempre visibile, niente click --- */
/* Gemello di .nota ma verde: la situazione concreta che chiarisce la regola. */
.slide-corpo .esempio,
.esempio {
    margin: 1.4rem 0;
    padding: .95rem 1.2rem;
    border: 1px solid var(--filetto);
    border-left: 3px solid var(--successo);
    border-radius: var(--r);
    background: var(--successo-sfondo);
    font-size: .95rem;
}
.slide-illustrazione .esempio { margin: 1.1rem 0 0; }
.esempio-titolo {
    font: 700 .78rem/1.4 var(--sans);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--successo);
    margin: 0 0 .4rem;
}
.esempio p { margin: 0 0 .5rem; }
.esempio p:last-child { margin-bottom: 0; }
/* In scuro il verde di sistema e' troppo cupo sul fondo verde scuro: schiarito
   solo il titoletto (stesso schema del file: forma via selettore, colore via
   media query, «notturno» esplicito perche' e' scuro anche a dispositivo chiaro). */
@media (prefers-color-scheme: dark) {
    .esempio-titolo { color: #6cc48a; }
}
:root[data-tema="notturno"] .esempio-titolo { color: #6cc48a; }

/* --- strato interattivo: «tocca per aprire» nativo (details), JS non serve --- */
.illustrazione-rivela { display: grid; gap: .5rem; margin-top: .9rem; }
@media (min-width: 700px) {
    .illustrazione-rivela { grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }
}
details.rivela {
    border: 1px solid var(--filetto);
    border-radius: var(--r);
    background: var(--superficie);
    transition: border-color var(--transizione), background var(--transizione);
}
details.rivela[open] { border-color: var(--filetto-forte); }
.rivela summary {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .6rem .85rem;
    cursor: pointer;
    font: 600 .92rem/1.35 var(--sans);
    color: var(--accento);
    list-style: none;
}
.rivela summary::-webkit-details-marker { display: none; }
.rivela summary::after {
    content: "+";
    margin-left: auto;
    font-weight: 700;
    font-size: 1.15rem;
    line-height: 1;
    color: var(--inchiostro-tenue);
}
.rivela[open] summary::after { content: "\2212"; }   /* segno meno */
.rivela summary:hover { background: var(--carta-alt); }
.rivela summary:focus-visible { outline: 2px solid var(--accento); outline-offset: 2px; }
.rivela > p {
    margin: 0;
    padding: 0 .85rem .7rem;
    font-size: .92rem;
    line-height: 1.55;
    color: var(--inchiostro);
}

/* --- comparsa morbida della slide (spenta da prefers-reduced-motion sopra) --- */
@keyframes slide-entra {
    from { opacity: 0; transform: translateY(8px); }
}
.slide { animation: slide-entra .35s ease-out both; }

/* --- stampa: il fascicolo di audit va su carta bianca --- */
/* Le variabili sopravvivono a @media print: un tema scuro stamperebbe tratti
   chiari su bianco. Qui si ridefiniscono su carta/inchiostro neutri per TUTTI i
   temi (corregge anche un difetto gia' presente delle slide scure in stampa).
   L'accento resta: e' iniettato a runtime ed e' leggibile su bianco. */
@media print {
    :root,
    :root[data-tema="moderno"],
    :root[data-tema="istituzionale"],
    :root[data-tema="notturno"] {
        --carta: #ffffff; --carta-alt: #f2f2f2; --superficie: #ffffff;
        --inchiostro: #000000; --inchiostro-medio: #333333; --inchiostro-tenue: #555555;
        --filetto: #999999; --filetto-forte: #777777; --accento-chiaro: #eeeeee;
    }
    .slide { animation: none; }
    details.rivela { border-color: #999999; }
    .rivela summary::after { content: ""; }
    .slide-illustrazione, .esempio, details.rivela { break-inside: avoid; }
}

/* =====================================================================
   0.5.0 «Attestato su misura»

   Linguette che legano le pagine delle impostazioni (Generali | Attestato |
   Attività | Diagnostica) e cornice dell'anteprima PDF incorporata. Tutti i
   colori vengono dalle variabili del tema: le linguette seguono i quattro temi
   e la modalita' scura senza ritocchi.
   ===================================================================== */

/* --- sotto-navigazione a linguette fra le pagine delle impostazioni --- */
/* La voce attiva e' marcata con aria-current="page", come la nav principale. */
.sotto-nav {
    display: flex;
    flex-wrap: wrap;
    gap: .15rem;
    margin: 0 0 1.7rem;
    border-bottom: 1px solid var(--filetto);
}
.sotto-nav a {
    padding: .55rem 1rem;
    border: 1px solid transparent;
    border-bottom: none;
    border-radius: var(--r) var(--r) 0 0;
    margin-bottom: -1px;                 /* la linguetta attiva si siede sul filetto */
    color: var(--inchiostro-medio);
    text-decoration: none;
    font: 600 .93rem/1.2 var(--sans);
    white-space: nowrap;
    transition: background var(--transizione), color var(--transizione);
}
.sotto-nav a:hover { background: var(--carta-alt); color: var(--inchiostro); }
.sotto-nav a:focus-visible { outline: 2px solid var(--accento); outline-offset: 2px; }
.sotto-nav a[aria-current="page"] {
    color: var(--accento);
    background: var(--carta);
    border-color: var(--filetto);
    border-bottom-color: var(--carta);   /* «buca» il filetto sotto la linguetta attiva */
    cursor: default;
}

/* --- anteprima dell'attestato: il PDF vero, incorporato senza salvare --- */
.anteprima-attestato {
    width: 100%;
    height: 70vh;
    min-height: 28rem;
    border: 1px solid var(--filetto);
    border-radius: var(--r);
    background: var(--carta-alt);
}
/* Segnaposto mostrato prima della prima anteprima (nessun iframe ancora). */
.anteprima-attestato-vuota {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: 28rem;
    padding: 2rem;
    border: 1px dashed var(--filetto);
    border-radius: var(--r);
    background: var(--carta-alt);
    color: var(--inchiostro-tenue);
}

/* =====================================================================
   0.7.0 «Corso interattivo»

   Tre famiglie di aggiunte, tutte scritte QUI dal coordinatore perche'
   questo file e' l'unico punto in cui i quattro temi si incontrano: nessun
   agente e nessuna vista deve ridefinire queste classi.

   1) identita' di modulo     -> --tinta-modulo, .modulo-tinta-1..5
   2) illustrazioni vive      -> .ill-accento-2, .ill-campitura*, .ill-anima,
                                 .ill-hotspot, .ill-hotspot-zona, .ill-fluttua
   3) interazione e traguardi -> .quiz-lampo*, .card-*, .badge-modulo,
                                 .celebrazione, .traguardo*, .modulo-scheda*

   Regola d'oro di questo rilascio: senza JavaScript la pagina deve restare
   utilizzabile esattamente come prima. Percio' nulla di essenziale sta dietro
   una classe che solo il JavaScript aggiunge, ogni animazione sta dietro
   prefers-reduced-motion: no-preference e viene spenta in stampa.
   ===================================================================== */

/* ------------------------------------------ identita' cromatica dei moduli */
/* Cinque tinte sobrie, una per modulo. Non sostituiscono l'accento
   dell'installazione (quello resta iniettato a runtime e comanda bottoni e
   collegamenti): colorano solo l'occhiello, il filetto della slide, la cornice
   dell'illustrazione e i badge, cioe' i segni che dicono «sei nel modulo N».
   --accento-2 e' il ripiego quando si e' fuori da un modulo, per esempio
   nell'anteprima dell'illustrazione dentro il pannello di amministrazione. */

:root {
    --accento-2: #8a5a24;
    --accento-2-tenue: #f5ece0;
}
@media (prefers-color-scheme: dark) {
    :root { --accento-2: #d3a468; --accento-2-tenue: #2a2318; }
}
:root[data-tema="notturno"] { --accento-2: #d3a468; --accento-2-tenue: #2a2318; }

.modulo-tinta-1 { --tinta-modulo: #1f4e6b; --tinta-modulo-tenue: #e9eff4; }
.modulo-tinta-2 { --tinta-modulo: #2c6157; --tinta-modulo-tenue: #e5f0ec; }
.modulo-tinta-3 { --tinta-modulo: #8a5a24; --tinta-modulo-tenue: #f5ece0; }
.modulo-tinta-4 { --tinta-modulo: #5a3d72; --tinta-modulo-tenue: #efe9f5; }
.modulo-tinta-5 { --tinta-modulo: #7d3a45; --tinta-modulo-tenue: #f6e9eb; }

/* In scuro le stesse cinque tinte, schiarite: sul fondo scuro il colore pieno
   diventa illeggibile, e il fondo lavato deve restare piu' scuro del testo. */
@media (prefers-color-scheme: dark) {
    .modulo-tinta-1 { --tinta-modulo: #6fa8cd; --tinta-modulo-tenue: #16232c; }
    .modulo-tinta-2 { --tinta-modulo: #6cbfaf; --tinta-modulo-tenue: #142623; }
    .modulo-tinta-3 { --tinta-modulo: #d3a468; --tinta-modulo-tenue: #2a2318; }
    .modulo-tinta-4 { --tinta-modulo: #ab8fd0; --tinta-modulo-tenue: #221c2b; }
    .modulo-tinta-5 { --tinta-modulo: #d18d99; --tinta-modulo-tenue: #2b1c1f; }
}
:root[data-tema="notturno"] .modulo-tinta-1 { --tinta-modulo: #6fa8cd; --tinta-modulo-tenue: #16232c; }
:root[data-tema="notturno"] .modulo-tinta-2 { --tinta-modulo: #6cbfaf; --tinta-modulo-tenue: #142623; }
:root[data-tema="notturno"] .modulo-tinta-3 { --tinta-modulo: #d3a468; --tinta-modulo-tenue: #2a2318; }
:root[data-tema="notturno"] .modulo-tinta-4 { --tinta-modulo: #ab8fd0; --tinta-modulo-tenue: #221c2b; }
:root[data-tema="notturno"] .modulo-tinta-5 { --tinta-modulo: #d18d99; --tinta-modulo-tenue: #2b1c1f; }

/* Dove la tinta si vede sulla slide. Se la classe non c'e' (slide fuori da un
   modulo numerato) il ripiego riporta tutto all'accento di sempre. */
.slide[class*="modulo-tinta-"]::before { background: var(--tinta-modulo, var(--accento)); }
.slide[class*="modulo-tinta-"] .slide-occhiello .modulo { color: var(--tinta-modulo, var(--accento)); }
.slide[class*="modulo-tinta-"] .slide-illustrazione {
    border-left: 3px solid var(--tinta-modulo, var(--accento));
    padding-left: clamp(.7rem, 2vw, 1.2rem);
    background: linear-gradient(90deg, var(--tinta-modulo-tenue, var(--carta-alt)), transparent 55%);
    border-radius: 0 var(--r) var(--r) 0;
}

/* ------------------------------------------- illustrazioni: tinte in piu' */
/* Seconda matita: nei disegni serve un colore che non sia ne' l'inchiostro ne'
   l'accento, per distinguere «l'altra cosa» dentro la stessa figura. Dentro
   una slide di modulo diventa da sola la tinta del modulo. */
.ill-accento-2 { stroke: var(--tinta-modulo, var(--accento-2)); }
.ill-pieno-accento-2 { fill: var(--tinta-modulo, var(--accento-2)); stroke: none; }
.ill-testo-accento-2 { fill: var(--tinta-modulo, var(--accento-2)); font: 700 15px var(--sans); }

/* Campiture: velature translucide da mettere SOTTO i tratti, non riempimenti
   pieni (per quelli restano .ill-area e .ill-superficie della 0.4.0). Essendo
   translucide funzionano sia su carta chiara sia su fondo scuro, senza
   varianti per tema. */
.ill-campitura { fill: var(--inchiostro-medio); fill-opacity: .09; stroke: none; }
.ill-campitura-accento { fill: var(--tinta-modulo, var(--accento-2)); fill-opacity: .16; stroke: none; }

/* ------------------------------ illustrazioni: il disegno che si traccia */
/* .ill-anima va sul nodo <svg class="ill ill-anima">. I tratti entrano
   «disegnandosi» (stroke-dashoffset), i riempimenti e i testi sfumano dopo.
   Il valore 1400 della dasharray e' volutamente generoso: copre la lunghezza
   di qualunque tracciato dentro un viewBox 640x360, e un tratto piu' corto
   semplicemente finisce prima. Niente JavaScript, nessun pathLength da
   calcolare a mano disegno per disegno. */
@keyframes ill-traccia {
    from { stroke-dashoffset: 1400; }
    to   { stroke-dashoffset: 0; }
}
@keyframes ill-appare {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes ill-fluttua {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-3px); }
}
@keyframes ill-pulsa {
    0%, 100% { opacity: .8; }
    50%      { opacity: 1; }
}

/* L'ordine dei due blocchi qui sotto NON e' casuale e non va invertito.
   Moltissimi elementi dei disegni portano due classi insieme (per esempio
   class="ill-area ill-tratto": campitura chiara piu' contorno). A parita' di
   specificita' vince la regola scritta dopo, quindi il blocco dei TRATTI sta
   per secondo: cosi' un elemento misto si disegna davvero, invece di limitarsi
   a comparire. Il tratto porta con se' anche una comparsa breve, cosi' il suo
   riempimento non appare di colpo prima del contorno. */
@media (prefers-reduced-motion: no-preference) {
    svg.ill-anima .ill-area,
    svg.ill-anima .ill-area-accento,
    svg.ill-anima .ill-superficie,
    svg.ill-anima .ill-campitura,
    svg.ill-anima .ill-campitura-accento,
    svg.ill-anima .ill-pieno,
    svg.ill-anima .ill-pieno-accento,
    svg.ill-anima .ill-pieno-accento-2,
    svg.ill-anima .ill-vietato-pieno,
    svg.ill-anima .ill-ok-pieno,
    svg.ill-anima .ill-testo,
    svg.ill-anima .ill-testo-forte,
    svg.ill-anima .ill-testo-tenue,
    svg.ill-anima .ill-testo-accento-2 {
        animation: ill-appare .55s ease-out .3s both;
    }
    svg.ill-anima .ill-tratto,
    svg.ill-anima .ill-tratto-fine {
        stroke-dasharray: 1400;
        animation: ill-traccia 1.15s cubic-bezier(.35, 0, .2, 1) both,
                   ill-appare .4s ease-out both;
    }

    /* Micro-movimenti d'ambiente: si mettono a mano su POCHI elementi per
       disegno (fumo, lancetta, foglia). Partono dopo il tracciamento.
       ATTENZIONE: vanno su un <g> che avvolge la forma, MAI sullo stesso
       elemento che porta .ill-tratto. Sarebbero due valori della stessa
       proprieta' animation: l'ultimo vincerebbe e il tracciamento sparirebbe. */
    .ill-fluttua {
        transform-box: fill-box;
        transform-origin: center;
        animation: ill-fluttua 4.5s ease-in-out 1.5s infinite;
    }
    .ill-pulsa { animation: ill-pulsa 3.2s ease-in-out 1.5s infinite; }
}

/* --------------------------------- illustrazioni: parti cliccabili */
/* Contratto con public/js/illustrazioni.js: un elemento SVG con
   data-rivela="N" (1-based) apre l'N-esimo <details class="rivela"> della
   stessa .illustrazione. La classe .ill-hotspot serve solo all'aspetto, e
   l'aspetto «cliccabile» si accende soltanto quando il JavaScript ha aggiunto
   .illustrazione-viva sul contenitore: cosi' non si promette mai un click che
   senza JavaScript non succederebbe. */
.illustrazione-viva .ill-hotspot { cursor: pointer; }
.illustrazione-viva .ill-hotspot:hover,
.illustrazione-viva .ill-hotspot.evidenziato {
    filter: drop-shadow(0 0 4px var(--tinta-modulo, var(--accento-2)));
}
.illustrazione-viva .ill-hotspot:focus-visible {
    outline: 2px solid var(--accento);
    outline-offset: 3px;
}
/* Zona di presa invisibile: un <g> fatto di soli tratti si «prende» male col
   mouse. Dentro al gruppo si mette un rettangolo con questa classe: e'
   trasparente ma riceve i click, a differenza di fill:none. */
.ill-hotspot-zona { fill: #ffffff; fill-opacity: 0; stroke: none; }

/* Il riquadro appena aperto da un click sul disegno: un lampo di colore per
   far capire dove e' finito lo sguardo. La classe la toglie il JavaScript. */
.rivela.appena-aperto { border-color: var(--tinta-modulo, var(--accento)); }
@keyframes rivela-richiama {
    from { background: var(--tinta-modulo-tenue, var(--accento-chiaro)); }
    to   { background: var(--superficie); }
}
@media (prefers-reduced-motion: no-preference) {
    .rivela.appena-aperto { animation: rivela-richiama 1.2s ease-out both; }
}

/* ------------------------------- card «Da ricordare» / «Esempio pratico» */
/* I due riquadri esistono gia' dalla 0.2.0: li produce slideCorpoFormattato()
   in app/core/helpers.php come .nota e .esempio. Qui NON si cambia il PHP: si
   ridisegnano in CSS, con l'icona disegnata da ::before. .card-ricorda e
   .card-esempio sono i nomi nuovi previsti dal piano e valgono come sinonimi,
   utili a chi scrivesse il riquadro a mano dentro una vista. */
.slide-corpo .nota,
.card-ricorda,
.slide-corpo .esempio,
.card-esempio,
.esempio {
    position: relative;
    padding-left: 3.1rem;
}
.slide-corpo .nota::before,
.card-ricorda::before,
.slide-corpo .esempio::before,
.card-esempio::before,
.esempio::before {
    content: "";
    position: absolute;
    left: 1rem;
    top: 1rem;
    width: 1.4rem;
    height: 1.4rem;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    opacity: .85;
}
/* Segnalibro per «Da ricordare». */
.slide-corpo .nota::before,
.card-ricorda::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237d776e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3h12v18l-6-4.5L6 21z'/%3E%3C/svg%3E");
}
/* Lampadina per «Esempio pratico». */
.slide-corpo .esempio::before,
.card-esempio::before,
.esempio::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232f6b3f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18h6M10 21h4M12 3a6 6 0 0 0-3.6 10.8c.6.5.9 1.2.9 1.9v.3h5.4v-.3c0-.7.3-1.4.9-1.9A6 6 0 0 0 12 3z'/%3E%3C/svg%3E");
}
/* In scuro le due icone sono troppo cupe: si ridisegnano col tratto chiaro. */
@media (prefers-color-scheme: dark) {
    .slide-corpo .nota::before,
    .card-ricorda::before {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b5afa6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3h12v18l-6-4.5L6 21z'/%3E%3C/svg%3E");
    }
    .slide-corpo .esempio::before,
    .card-esempio::before,
    .esempio::before {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236cc48a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18h6M10 21h4M12 3a6 6 0 0 0-3.6 10.8c.6.5.9 1.2.9 1.9v.3h5.4v-.3c0-.7.3-1.4.9-1.9A6 6 0 0 0 12 3z'/%3E%3C/svg%3E");
    }
}
:root[data-tema="notturno"] .slide-corpo .nota::before,
:root[data-tema="notturno"] .card-ricorda::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b5afa6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3h12v18l-6-4.5L6 21z'/%3E%3C/svg%3E");
}
:root[data-tema="notturno"] .slide-corpo .esempio::before,
:root[data-tema="notturno"] .card-esempio::before,
:root[data-tema="notturno"] .esempio::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236cc48a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18h6M10 21h4M12 3a6 6 0 0 0-3.6 10.8c.6.5.9 1.2.9 1.9v.3h5.4v-.3c0-.7.3-1.4.9-1.9A6 6 0 0 0 12 3z'/%3E%3C/svg%3E");
}

/* --------------------------------------- «Verifica lampo» e scenari */
/* Dalla 0.13.0 la stessa <section> si presenta in DUE marcature diverse, rese
   da app/views/corso/slide.php a seconda di chi guarda. Le regole di questo
   blocco valgono per tutt'e due; quelle che valgono per una sola sono marcate.

   1) LAVORATORE (0.13.0) — il quiz e' un modulo giudicato dal server:

   <section class="quiz-lampo superato" data-quiz-id="12" data-tipo="lampo">
     <p class="quiz-lampo-etichetta">Verifica lampo</p>
     <p class="quiz-lampo-domanda">...</p>
     <form class="quiz-lampo-modulo" method="post" action="corso/1/quiz/12/rispondi">
       <input type="hidden" name="_csrf" ...>
       <div class="quiz-lampo-opzioni">
         <label class="quiz-lampo-opzione giusta">
           <input type="radio" name="indice" value="0" required disabled checked> ...
         </label>
         ...
       </div>
       <button type="submit" class="bottone bottone-secondario quiz-lampo-invia">Rispondi</button>
     </form>
     <p class="quiz-lampo-esito giusta">Risposta corretta. ...</p>
   </section>

   Qui NON ci sono ne' data-corretta ne' data-spiegazione ne' il <details>: la
   risposta giusta non lascia il server. E soprattutto, senza JavaScript il
   modulo si VEDE e FUNZIONA: si sceglie, si preme «Rispondi», la pagina si
   ricarica con l'esito. Per questo .quiz-lampo-modulo .quiz-lampo-opzioni e'
   visibile senza aspettare la classe .attiva, che invece arriva solo se
   quiz-lampo.js e' vivo.

   2) ANTEPRIMA dell'amministratore (0.7.0, invariata) — nessun modulo, il
   giudizio lo fa il browser e la soluzione e' gia' nell'HTML:

   <section class="quiz-lampo" data-quiz-id="12" data-tipo="lampo" data-spiegazione="...">
     <p class="quiz-lampo-etichetta">Verifica lampo</p>
     <p class="quiz-lampo-domanda">...</p>
     <div class="quiz-lampo-opzioni">
       <button type="button" class="quiz-lampo-opzione" data-indice="0" data-corretta="1">...</button>
       ...
     </div>
     <p class="quiz-lampo-esito" hidden></p>
     <details class="rivela quiz-lampo-soluzione">
       <summary>Mostra la risposta</summary><p>...</p>
     </details>
   </section>

   In questo secondo caso, senza JavaScript si vede SOLO il <details>: i bottoni
   restano nascosti, perche' un bottone che non fa niente e' peggio di un
   bottone che non c'e'. public/js/quiz-lampo.js aggiunge .attiva alla <section>
   e ribalta le due visibilita'. */
.quiz-lampo {
    margin: 1.8rem 0 0;
    padding: 1.15rem 1.3rem;
    border: 1px solid var(--filetto);
    border-top: 3px solid var(--tinta-modulo, var(--accento));
    border-radius: var(--r);
    background: var(--carta-alt);
}
.quiz-lampo + .quiz-lampo { margin-top: 1rem; }
.quiz-lampo-etichetta {
    font: 700 .72rem/1.4 var(--sans);
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--tinta-modulo, var(--accento));
    margin: 0 0 .5rem;
}
.quiz-lampo-domanda {
    font-size: 1.02rem;
    font-weight: 600;
    line-height: 1.5;
    margin: 0 0 .9rem;
}
.quiz-lampo-opzioni { display: none; }
.quiz-lampo.attiva .quiz-lampo-opzioni { display: grid; gap: .5rem; }
.quiz-lampo.attiva .quiz-lampo-soluzione { display: none; }

.quiz-lampo-opzione {
    display: block;
    width: 100%;
    text-align: left;
    padding: .68rem .9rem;
    border: 1px solid var(--filetto-forte);
    border-radius: var(--r);
    background: var(--superficie);
    color: var(--inchiostro);
    font: 400 .97rem/1.45 var(--sans);
    cursor: pointer;
    transition: border-color var(--transizione), background var(--transizione);
}
.quiz-lampo-opzione:hover:not([disabled]) { border-color: var(--accento); background: var(--accento-chiaro); }
.quiz-lampo-opzione:focus-visible { outline: 2px solid var(--accento); outline-offset: 2px; }
.quiz-lampo-opzione[disabled] { cursor: default; }
.quiz-lampo-opzione.giusta {
    border-color: var(--successo);
    background: var(--successo-sfondo);
    font-weight: 600;
}
.quiz-lampo-opzione.sbagliata {
    border-color: var(--errore);
    background: var(--errore-sfondo);
}
/* Scenari «Cosa faresti?»: non c'e' una risposta sbagliata, c'e' un riscontro.
   Percio' la scelta si segna in neutro, con la tinta del modulo. */
.quiz-lampo-opzione.scelta {
    border-color: var(--tinta-modulo, var(--accento));
    background: var(--tinta-modulo-tenue, var(--accento-chiaro));
    font-weight: 600;
}
.quiz-lampo-esito {
    margin: .85rem 0 0;
    padding: .7rem .9rem;
    border-left: 3px solid var(--tinta-modulo, var(--accento));
    border-radius: 0 var(--r) var(--r) 0;
    background: var(--superficie);
    font-size: .94rem;
    line-height: 1.55;
}
/* Negli scenari il riscontro della scelta e la nota conclusiva sono due cose
   diverse: la seconda va staccata, altrimenti si legge come un unico blocco.
   La crea quiz-lampo.js come <span>, perche' un "\n" dentro il testo in HTML
   non manda a capo. */
.quiz-lampo-nota {
    display: block;
    margin-top: .45rem;
    color: var(--inchiostro-tenue);
    font-size: .9rem;
}
.quiz-lampo-esito.giusta { border-left-color: var(--successo); }
.quiz-lampo-esito.sbagliata { border-left-color: var(--errore); }
.quiz-lampo-rifai {
    margin-top: .7rem;
    background: none;
    border: 0;
    padding: 0;
    font: 600 .88rem/1.4 var(--sans);
    color: var(--accento);
    cursor: pointer;
    text-decoration: underline;
}
.quiz-lampo-rifai:focus-visible { outline: 2px solid var(--accento); outline-offset: 2px; }
@media (prefers-reduced-motion: no-preference) {
    .quiz-lampo-esito { animation: slide-entra .3s ease-out both; }
}

/* ------- 0.13.0: il quiz del lavoratore e' un modulo, e deve reggersi da solo.
   Tutto quello che segue riguarda SOLO la marcatura n.1 (il <form>): il ramo
   dell'anteprima non ha .quiz-lampo-modulo e non incontra nessuna di queste
   regole. */

/* La riga che tiene in piedi il degrado: le opzioni si vedono SENZA .attiva,
   cioe' anche senza JavaScript. Vince su .quiz-lampo-opzioni{display:none} per
   specificita' (due classi contro una), non per ordine. */
.quiz-lampo-modulo .quiz-lampo-opzioni { display: grid; gap: .5rem; }

/* La <label> deve avere lo stesso aspetto del <button> dell'anteprima: le
   regole di .quiz-lampo-opzione (bordo, padding, sfondo, cursore) valgono gia'
   su una label, che pero' e' inline per difetto e non ha l'attributo disabled.
   Qui si rimettono a posto le due cose, piu' il position:relative che serve a
   tenere il radio nascosto dentro la label invece che sbattuto in cima alla
   pagina. */
.quiz-lampo-modulo .quiz-lampo-opzione {
    display: block;
    position: relative;
}
.quiz-lampo.superato .quiz-lampo-opzione { cursor: default; }

/* Il radio si nasconde alla vista ma resta raggiungibile con la tastiera e
   annunciato dai lettori di schermo: e' la tecnica di .solo-lettore, copiata
   qui perche' la classe non si puo' mettere sull'<input> senza perdere le sue
   dimensioni. display:none o visibility:hidden lo toglierebbero anche alla
   tastiera, e il modulo diventerebbe inusabile senza mouse. */
.quiz-lampo-modulo .quiz-lampo-opzione input[type="radio"] {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* Il passaggio del mouse si accende solo finche' si puo' ancora rispondere.
   .quiz-lampo-opzione:hover:not([disabled]) piu' sopra non basta: una <label>
   l'attributo disabled non ce l'ha mai, ce l'ha il radio dentro. Due regole
   con le STESSE dichiarazioni, non due effetti diversi: la prima e' precisa
   (guarda il radio) ma richiede :has(); la seconda dice la stessa cosa con la
   classe .superato e funziona ovunque. Dove :has() non si conosce la prima si
   butta via e non cambia niente. */
.quiz-lampo-modulo .quiz-lampo-opzione:hover:not(:has(input:disabled)) {
    border-color: var(--accento);
    background: var(--accento-chiaro);
}
.quiz-lampo:not(.superato) .quiz-lampo-modulo .quiz-lampo-opzione:hover {
    border-color: var(--accento);
    background: var(--accento-chiaro);
}

/* Il fuoco della tastiera: siccome il radio e' invisibile, senza queste righe
   chi naviga col tabulatore non vedrebbe dove si trova. Le due regole restano
   SEPARATE, non unite da una virgola: in un gruppo basta un selettore
   sconosciuto per far buttare via tutto il resto, e :focus-within e' proprio il
   ripiego che deve sopravvivere dove :has() non si conosce. */
.quiz-lampo-modulo .quiz-lampo-opzione:focus-within {
    outline: 2px solid var(--accento);
    outline-offset: 2px;
}
.quiz-lampo-modulo .quiz-lampo-opzione:has(input:focus-visible) {
    outline: 2px solid var(--accento);
    outline-offset: 2px;
}

/* «Rispondi» sparisce quando non serve piu': con JavaScript vivo (.attiva) si
   risponde al clic sull'opzione, e a quiz superato non c'e' piu' niente da
   inviare. Nel secondo caso la vista non lo rende nemmeno: la regola copre il
   caso in cui sia quiz-lampo.js ad aggiungere .superato dopo la risposta. */
.quiz-lampo-invia { margin-top: .9rem; }
.quiz-lampo.attiva .quiz-lampo-invia,
.quiz-lampo.superato .quiz-lampo-invia { display: none; }

/* Il quiz superato si vede da lontano: il filetto in cima passa dalla tinta del
   modulo al verde. E' l'unico segno che serve, visto che l'esito qui sotto
   racconta gia' il resto. */
.quiz-lampo.superato { border-top-color: var(--successo); }

@media print {
    /* Sulla carta il quiz del lavoratore e' la domanda PIU' le opzioni: qui non
       c'e' nessun <details> di scorta da stampare al posto loro, come nel ramo
       dell'anteprima. Senza questa riga la regola di stampa piu' in basso
       (.quiz-lampo.attiva .quiz-lampo-opzioni { display:none }) lascerebbe sul
       foglio una domanda e il vuoto. Vince per specificita', non per ordine. */
    .quiz-lampo.attiva .quiz-lampo-modulo .quiz-lampo-opzioni { display: grid; }
    /* Un bottone stampato non si preme: quello no, non si stampa. */
    .quiz-lampo-modulo .quiz-lampo-invia { display: none; }
}

/* --------------------------------------------------- spunte dell'indice */
/* La spunta di una pagina completata entra con un piccolo scatto: e' l'unico
   posto dove si vede l'avanzamento mentre si legge. Discreto e una volta sola. */
@keyframes indice-spunta {
    from { transform: scale(.4); opacity: 0; }
    to   { transform: scale(1); opacity: 1; }
}
.indice-slide.fatta .indice-segno {
    display: inline-block;
    font-weight: 700;
}
@media (prefers-reduced-motion: no-preference) {
    .indice-slide.fatta .indice-segno { animation: indice-spunta .28s cubic-bezier(.34, 1.56, .64, 1) both; }
}

/* ------------------------------------------------ badge e celebrazioni */
/* Gamification sobria: nessun punteggio, nessuna classifica. Solo un sigillo
   per il modulo concluso e una comparsa tranquilla. */
.badge-modulo {
    width: clamp(6.5rem, 22vw, 9rem);
    height: auto;
    display: block;
    margin: 0 auto;
    color: var(--tinta-modulo, var(--accento));
}
.badge-modulo .badge-anello { fill: none; stroke: currentColor; stroke-width: 3; }
.badge-modulo .badge-fondo { fill: var(--tinta-modulo-tenue, var(--accento-chiaro)); }
.badge-modulo .badge-segno { fill: none; stroke: currentColor; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.badge-modulo .badge-numero { fill: currentColor; font: 700 34px var(--sans); }

@keyframes celebrazione-entra {
    from { opacity: 0; transform: scale(.88); }
    to   { opacity: 1; transform: scale(1); }
}
.celebrazione { text-align: center; }
@media (prefers-reduced-motion: no-preference) {
    .celebrazione { animation: celebrazione-entra .5s cubic-bezier(.34, 1.4, .64, 1) both; }
}

/* Vista «Modulo completato» (app/views/corso/modulo-completato.php). */
.traguardo {
    max-width: 34rem;
    margin: clamp(1.5rem, 6vh, 4rem) auto;
    padding: clamp(1.6rem, 5vw, 2.6rem);
    text-align: center;
    background: var(--superficie);
    border: 1px solid var(--filetto);
    border-top: 3px solid var(--tinta-modulo, var(--accento));
    border-radius: var(--r);
    box-shadow: var(--ombra);
}
.traguardo h1 { font-size: clamp(1.4rem, 1.2rem + 1vw, 1.9rem); margin: 1.1rem 0 .4rem; }
.traguardo-occhiello {
    font: 700 .74rem/1.4 var(--sans);
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--tinta-modulo, var(--accento));
    margin: 0;
}
.traguardo p { color: var(--inchiostro-medio); }
.traguardo-azioni { display: flex; flex-wrap: wrap; gap: .7rem; justify-content: center; margin-top: 1.5rem; }

/* Schede dei moduli nella scheda del corso (app/views/corso/dettaglio.php). */
.moduli-schede {
    display: grid;
    gap: .9rem;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
    margin: 1.2rem 0 0;
    padding: 0;
    list-style: none;
}
.modulo-scheda {
    margin: 0;
    padding: 1rem 1.1rem;
    border: 1px solid var(--filetto);
    border-left: 3px solid var(--tinta-modulo, var(--accento));
    border-radius: 0 var(--r) var(--r) 0;
    background: var(--superficie);
    display: flex;
    gap: .9rem;
    align-items: flex-start;
}
.modulo-scheda-testo { flex: 1; min-width: 0; }
.modulo-scheda-titolo { font: 650 .98rem/1.35 var(--sans); margin: 0 0 .25rem; }
.modulo-scheda-nota { font-size: .85rem; color: var(--inchiostro-tenue); margin: 0; }

/* Anello di avanzamento: la percentuale arriva dalla vista come --p (0-100). */
.modulo-anello {
    flex: none;
    width: 2.9rem;
    height: 2.9rem;
    border-radius: 50%;
    background: conic-gradient(var(--tinta-modulo, var(--accento)) calc(var(--p, 0) * 1%), var(--filetto) 0);
    display: grid;
    place-items: center;
    position: relative;
}
.modulo-anello::before {
    content: "";
    position: absolute;
    inset: 5px;
    border-radius: 50%;
    background: var(--superficie);
}
.modulo-anello span {
    position: relative;
    font: 700 .74rem/1 var(--sans);
    font-variant-numeric: tabular-nums;
    color: var(--tinta-modulo, var(--accento));
}
.modulo-scheda-badge { width: 2.9rem; height: 2.9rem; flex: none; color: var(--tinta-modulo, var(--accento)); }

/* ----------------------------------------------------------- stampa 0.7.0 */
/* Tutto cio' che si muove va fermato, e ogni stato «iniziale» delle animazioni
   va riportato a visibile: in stampa le animazioni non partono, e senza questo
   blocco un tratto con stroke-dashoffset resterebbe invisibile sulla carta. */
@media print {
    svg.ill-anima .ill-tratto,
    svg.ill-anima .ill-tratto-fine {
        stroke-dasharray: none;
        stroke-dashoffset: 0;
        animation: none;
    }
    svg.ill-anima * { animation: none; opacity: 1; }
    .ill-fluttua, .ill-pulsa { animation: none; }
    .celebrazione,
    .quiz-lampo-esito,
    .indice-slide.fatta .indice-segno,
    .rivela.appena-aperto { animation: none; }
    /* Sulla carta il quiz e' materiale di ripasso: si stampano la domanda e la
       soluzione distesa, mai i bottoni. */
    .quiz-lampo.attiva .quiz-lampo-opzioni { display: none; }
    .quiz-lampo.attiva .quiz-lampo-soluzione { display: block; }
    .quiz-lampo, .traguardo, .modulo-scheda { break-inside: avoid; }
    .traguardo { box-shadow: none; }
    .slide[class*="modulo-tinta-"] .slide-illustrazione { background: none; }
}


/* =====================================================================
   0.8.0 «Voce narrante»

   Il lettore audio della lezione. Scritto QUI dal coordinatore, come le
   classi della 0.7.0: nessun agente e nessuna vista le ridefinisce.

   Due stati, e la differenza fra i due e' tutta la regola d'oro:

     - SENZA JavaScript resta l'elemento <audio controls> vero del browser.
       Suona, si mette in pausa, si trascina. Brutto ma funzionante.
     - CON JavaScript, audio.js aggiunge .viva al contenitore: da quel
       momento i comandi del browser spariscono e compaiono i nostri, che
       hanno in piu' la velocita' di lettura.

   Cosi' i comandi belli si mostrano solo quando funzionano davvero, e
   l'ascolto non dipende dal JavaScript. Stessa logica di .illustrazione-viva
   nella 0.7.0.

   Nota di manutenzione: qui NON si mettono transizioni sul colore di fondo.
   Vedi la nota in fondo al file: un fondo preso da una variabile e insieme
   transizionato non si aggiorna se il tema cambia a pagina aperta. Le
   transizioni di questo blocco toccano solo colore del testo, bordo e
   opacita', che quel difetto non ce l'hanno.
   ===================================================================== */

.audio-lezione {
    margin: 1.6rem 0;
    padding: .9rem 1rem;
    border: 1px solid var(--filetto);
    border-left: 3px solid var(--tinta-modulo, var(--accento));
    border-radius: var(--r);
    background: var(--carta-alt);
}

.audio-testata {
    display: flex;
    align-items: baseline;
    gap: .6rem;
    margin-bottom: .6rem;
    font-family: var(--sans);
    font-size: .82rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--tinta-modulo, var(--accento));
}

.audio-testata .audio-durata {
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    color: var(--inchiostro-tenue);
}

/* L'elemento nativo: e' il ripiego, quindi occupa tutta la larghezza. */
.audio-lezione audio { display: block; width: 100%; }

/* I nostri comandi non esistono finche' il JavaScript non li accende. */
.audio-comandi { display: none; }
.audio-lezione.viva audio { display: none; }
.audio-lezione.viva .audio-comandi {
    display: flex;
    align-items: center;
    gap: .7rem;
    flex-wrap: wrap;
}

.audio-bottone {
    flex: none;
    width: 2.6rem;
    height: 2.6rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid var(--tinta-modulo, var(--accento));
    border-radius: 50%;
    background: var(--superficie);
    color: var(--tinta-modulo, var(--accento));
    cursor: pointer;
    transition: color var(--transizione), border-color var(--transizione);
}
.audio-bottone:hover { color: var(--inchiostro); border-color: var(--filetto-forte); }
.audio-bottone svg { width: 1.1rem; height: 1.1rem; fill: currentColor; }
/* Due icone sovrapposte nel markup: si mostra quella che serve. */
.audio-bottone .icona-pausa { display: none; }
.audio-bottone.in-pausa .icona-play { display: none; }
.audio-bottone.in-pausa .icona-pausa { display: block; }

/* La barra e' un <input type="range">: cosi' si trascina col mouse, col dito
   e con le frecce della tastiera senza scrivere una riga di JavaScript per
   l'accessibilita'. Il riempimento lo disegna audio.js scrivendo --p. */
.audio-barra {
    flex: 1 1 12rem;
    min-width: 8rem;
    height: .4rem;
    margin: 0;
    padding: 0;
    appearance: none;
    -webkit-appearance: none;
    border-radius: 999px;
    background: linear-gradient(
        to right,
        var(--tinta-modulo, var(--accento)) calc(var(--p, 0) * 1%),
        var(--filetto) calc(var(--p, 0) * 1%)
    );
    cursor: pointer;
}
.audio-barra::-webkit-slider-thumb {
    appearance: none;
    -webkit-appearance: none;
    width: .9rem;
    height: .9rem;
    border: none;
    border-radius: 50%;
    background: var(--tinta-modulo, var(--accento));
}
.audio-barra::-moz-range-thumb {
    width: .9rem;
    height: .9rem;
    border: none;
    border-radius: 50%;
    background: var(--tinta-modulo, var(--accento));
}

.audio-tempo {
    flex: none;
    font-family: var(--mono);
    font-size: .8rem;
    font-variant-numeric: tabular-nums;
    color: var(--inchiostro-tenue);
    white-space: nowrap;
}

.audio-velocita { flex: none; display: inline-flex; gap: .25rem; }

.audio-velocita-scelta {
    padding: .2rem .45rem;
    border: 1px solid var(--filetto);
    border-radius: var(--r);
    background: var(--superficie);
    font-family: var(--sans);
    font-size: .78rem;
    color: var(--inchiostro-medio);
    cursor: pointer;
    transition: color var(--transizione), border-color var(--transizione);
}
.audio-velocita-scelta:hover { color: var(--inchiostro); }
.audio-velocita-scelta.attiva {
    border-color: var(--tinta-modulo, var(--accento));
    color: var(--tinta-modulo, var(--accento));
    font-weight: 600;
}

/* Detto a chi non puo' sentire: l'audio non porta nulla che non sia scritto
   qui sotto. Serve a non far cercare un contenuto che non c'e'. */
.audio-assente {
    margin: .5rem 0 0;
    font-size: .82rem;
    color: var(--inchiostro-tenue);
}

/* --- 0.13.0: la voce parte da sola ------------------------------------- */
/* Dalla 0.13.0 audio.js chiama play() al caricamento. Le due classi qui sotto
   servono ai due casi che quella scelta si porta dietro, e le mette in pagina
   il JavaScript: nella vista non ci sono, perche' senza JavaScript non c'e'
   nessuna partenza automatica di cui parlare. */

/* L'invito compare solo quando il browser ha rifiutato la partenza (e quasi
   sempre rifiuta, finche' l'utente non ha toccato la pagina). Non e' un
   avviso di errore e non deve averne l'aria: una riga sola sotto i comandi,
   nella tinta del modulo come la testata del blocco, che dice che cosa fare. */
.audio-invito {
    margin: .5rem 0 0;
    font-family: var(--sans);
    font-size: .84rem;
    color: var(--tinta-modulo, var(--accento));
}

/* L'interruttore dell'avvio automatico: in coda ai comandi, piccolo e tenue.
   E' una preferenza, non un comando della lezione, e non deve competere col
   bottone di ascolto. Va a capo tutto intero (white-space: nowrap) perche'
   una casella separata dalla sua etichetta sarebbe incomprensibile. */
.audio-avvio {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-family: var(--sans);
    font-size: .78rem;
    color: var(--inchiostro-tenue);
    white-space: nowrap;
    cursor: pointer;
}
.audio-avvio input { margin: 0; cursor: pointer; }

/* Bottone in evidenza: sta insieme all'invito, per portarci l'occhio. Il
   colore lo ha gia'; qui si aggiunge un alone che pulsa. L'animazione sta
   sotto prefers-reduced-motion: no-preference perche' un alone che batte in
   continuazione, a chi soffre di disturbi vestibolari, da' fastidio davvero:
   senza animazione resta l'alone fermo, che indica lo stesso. */
@keyframes audio-pulsa {
    from { box-shadow: 0 0 0 0 var(--tinta-modulo, var(--accento)); }
    to   { box-shadow: 0 0 0 .55rem transparent; }
}
.audio-bottone.in-evidenza {
    border-color: var(--tinta-modulo, var(--accento));
    box-shadow: 0 0 0 .18rem var(--tinta-modulo-tenue, var(--accento-chiaro));
}
@media (prefers-reduced-motion: no-preference) {
    .audio-bottone.in-evidenza { animation: audio-pulsa 1.9s ease-out infinite; }
}

/* Sulla carta un lettore audio non ha senso: si stampa la lezione, non il
   suono. Sparisce tutto il blocco. */
@media print {
    .audio-lezione { display: none; }
}

/* ========================================================================
   0.9.0  Guida in linea
   ------------------------------------------------------------------------
   Due cose distinte: la «i» di aiuto sparsa per il pannello, e le pagine
   della guida vera e propria.

   Come nel blocco della voce narrante, qui NON ci sono transizioni sul colore
   di fondo: e' l'applicazione della diagnosi scritta in fondo a questo foglio.
   Un fondo preso da una variabile e insieme transizionato non si aggiorna se
   il tema cambia a pagina aperta.
   ======================================================================== */

/* --- la «i» accanto a una voce del pannello ---------------------------- */
/* Deve leggersi come un aiuto disponibile, non come un avviso: sta accanto
   all'etichetta, non la interrompe, e non ruba l'occhio al campo. */
.aiuto-i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.15rem;
    height: 1.15rem;
    margin-left: .4rem;
    border: 1px solid var(--filetto-forte);
    border-radius: 50%;
    color: var(--inchiostro-tenue);
    background: var(--carta-alt);
    font-family: var(--sans);
    font-size: .72rem;
    font-weight: 700;
    font-style: italic;
    line-height: 1;
    text-decoration: none;
    vertical-align: middle;
    transition: color var(--transizione), border-color var(--transizione);
}
.aiuto-i:hover,
.aiuto-i:focus-visible {
    color: var(--accento);
    border-color: var(--accento);
}

/* --- ricerca ----------------------------------------------------------- */
.guida-cerca-riga {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    align-items: center;
}
.guida-cerca-riga input[type="search"] {
    flex: 1 1 18rem;
    min-width: 0;
}

.guida-riscontri {
    margin: .6rem 0 0;
    padding-left: 1.4rem;
}
.guida-riscontri > li { margin-bottom: 1.1rem; }
.guida-riscontro-titolo {
    font-weight: 600;
    margin-right: .4rem;
}
/* Il brano trovato: si legge come una citazione, non come testo della pagina,
   cosi' e' chiaro che e' un pezzo staccato dal suo contesto. */
.guida-brano {
    margin: .35rem 0 0;
    padding-left: .8rem;
    border-left: 2px solid var(--filetto);
    color: var(--inchiostro-medio);
    font-size: .92rem;
}

/* --- indice dei capitoli ----------------------------------------------- */
.guida-indice {
    margin: .8rem 0 0;
    padding-left: 1.5rem;
}
.guida-indice > li { margin-bottom: 1.15rem; }
.guida-indice-titolo {
    font-family: var(--serif);
    font-size: 1.08rem;
    font-weight: 600;
}
.guida-indice-tema {
    display: block;
    color: var(--inchiostro-tenue);
    font-size: .88rem;
}
/* I passi dentro il capitolo: in riga e separati da punti, non un elenco
   verticale. Quindici capitoli per quattro passi ciascuno, incolonnati,
   sarebbero una pagina lunghissima da scorrere invece che un indice. */
.guida-indice-sezioni {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: .1rem .75rem;
    margin: .4rem 0 0;
    padding: 0;
    font-size: .88rem;
}
/* Il separatore sta in coda alla voce PRECEDENTE, non in testa alla
   successiva: cosi' quando l'elenco va a capo la riga nuova comincia con una
   parola e non con un puntino orfano. */
.guida-indice-sezioni li:not(:last-child)::after {
    content: "·";
    margin-left: .75rem;
    color: var(--filetto-forte);
}
.guida-indice-sezioni a { color: var(--inchiostro-medio); }

/* --- scaletta in cima al capitolo -------------------------------------- */
.guida-scaletta ul {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: .3rem 1.1rem;
    margin: .5rem 0 0;
    padding: 0;
    font-size: .93rem;
}

/* --- il capitolo ------------------------------------------------------- */
/* Misura di riga contenuta: un testo che spiega si legge male se la riga e'
   larga tutto lo schermo. Le immagini non seguono questo limite. */
.guida-testo { max-width: 46rem; }
.guida-testo h3 {
    font-family: var(--serif);
    font-size: 1.18rem;
    margin: 1.9rem 0 .5rem;
    /* Con l'ancora nell'indirizzo il titolo non deve finire sotto il bordo
       della finestra: si lascia respiro sopra. */
    scroll-margin-top: 1.5rem;
}
.guida-testo h3:first-child { margin-top: 0; }
.guida-testo h4 {
    font-size: 1rem;
    margin: 1.2rem 0 .3rem;
    color: var(--inchiostro-medio);
}
.guida-testo p { margin: .6rem 0; }
.guida-testo ol,
.guida-testo ul { margin: .5rem 0 .9rem 1.4rem; padding: 0; }
.guida-testo li { margin: .35rem 0; }
.guida-testo code {
    background: var(--carta-alt);
    padding: .05rem .35rem;
    border-radius: var(--r);
    font-family: var(--mono);
    font-size: .88em;
}
/* Le note della guida riusano l'aspetto delle note della lezione, ma con la
   loro classe: se un domani cambia una delle due, l'altra non si muove. */
.guida-testo .nota {
    background: var(--carta-alt);
    border-left: 3px solid var(--accento);
    padding: .6rem .95rem;
    margin: .9rem 0;
    font-size: .95rem;
}
.guida-testo .avviso {
    background: var(--avviso-sfondo);
    border-left: 3px solid var(--avviso);
    padding: .6rem .95rem;
    margin: .9rem 0;
    font-size: .95rem;
}

.guida-figura {
    margin: 0 0 1.4rem;
}
/* La schermata si limita in ALTEZZA, non in larghezza: a piena altezza
   riempirebbe lo schermo e spingerebbe sotto la piega il testo, che e' quello
   per cui si e' aperta la guida. Restando larga quanto serve resta leggibile;
   chi vuole guardarla da vicino la apre in una scheda sua. */
.guida-figura img {
    display: block;
    max-width: 100%;
    max-height: 30rem;
    width: auto;
    height: auto;
    border: 1px solid var(--filetto);
    border-radius: var(--r);
}
.guida-figura figcaption {
    margin-top: .5rem;
    color: var(--inchiostro-tenue);
    font-size: .87rem;
}

/* --- capitolo precedente / successivo ---------------------------------- */
.guida-vicini {
    display: flex;
    justify-content: space-between;
    gap: .75rem;
    margin-top: 1.25rem;
}
@media (max-width: 40rem) {
    .guida-vicini { flex-direction: column; }
}

/* --- carta ------------------------------------------------------------- */
/* La guida si stampa volentieri: e' il manuale. Spariscono solo i comandi,
   che su carta non servono a niente. */
@media print {
    .aiuto-i,
    .guida-cerca,
    .guida-scaletta,
    .guida-vicini,
    .intestazione-azioni { display: none !important; }
    .guida-testo { max-width: none; }
    .guida-capitolo { box-shadow: none; border: 0; padding: 0; }
}

/* =====================================================================
   0.13.0 «Schermo intero»

   Due cose diverse col nome di una sola, e conviene tenerle separate anche
   leggendo il foglio di stile:

     - lo schermo intero VERO e' quello del browser (Fullscreen API): toglie
       le barre del browser e non passa da qui, il CSS non lo vede nemmeno;
     - la MODALITA' DI LETTURA e' tutta in queste righe. La classe
       «lettura-piena» la mette schermo-intero.js su <html> e la ricorda nel
       browser, cosi' sopravvive al cambio di pagina (Firefox esce dallo
       schermo intero a ogni «Avanti»: se dipendessimo da quello, la lettura
       larga si spegnerebbe da sola a ogni pagina).

   Che cosa sparisce: indice, testata e pie' di pagina, cioe' tutto quello
   che non e' la lezione. Che cosa NON sparisce, di proposito: la barra del
   corso, perche' e' li' che sta il bottone per uscire, e la navigazione, che
   serve per andare avanti. Una modalita' da cui non si esce sarebbe una
   trappola.
   ===================================================================== */

/* Il bottone in coda alla barra del corso. Sobrio: e' un comando di
   servizio, non deve pesare piu' del titolo del corso o della percentuale.
   Prende il carattere della barra, che e' gia' piccolo. */
.bottone-schermo {
    flex: none;
    margin-left: auto;
    padding: .2rem .55rem;
    border: 1px solid var(--filetto);
    border-radius: var(--r);
    background: var(--superficie);
    font-family: var(--sans);
    font-size: .8rem;
    color: var(--inchiostro-medio);
    cursor: pointer;
    transition: color var(--transizione), border-color var(--transizione);
}
.bottone-schermo:hover { color: var(--inchiostro); border-color: var(--filetto-forte); }

/* Il bottone nasce con l'attributo hidden e lo toglie il JavaScript. In
   questo foglio non c'e' nessuna regola generale [hidden] { display: none }
   (controllato): funziona quella del browser, che qui non viene scavalcata
   perche' sopra non si dichiara nessun display. La riga seguente e' la
   cintura di sicurezza per il giorno in cui qualcuno ne aggiungesse uno. */
.bottone-schermo[hidden] { display: none; }

.lettura-piena .testata,
.lettura-piena .pie,
.lettura-piena .indice { display: none; }

/* Senza indice la griglia del lettore ha una colonna sola. */
.lettura-piena .player { grid-template-columns: 1fr; }

/* Lo spazio in cima lo lasciava la testata, che adesso non c'e' piu': senza
   questa riga la lezione comincerebbe con un buco. */
.lettura-piena main#contenuto { padding-block-start: 1rem; }

/* Piu' larga di prima, ma non larga quanto lo schermo: oltre una certa
   misura l'occhio perde il capo della riga. 52rem e' la stessa larghezza di
   .contenitore-stretto, cioe' la misura di lettura gia' scelta altrove. */
.lettura-piena article.slide {
    max-width: 52rem;
    margin-left: auto;
    margin-right: auto;
}

/* ------------------------------ nota: temi e transizioni sul fondo */
/* Difetto accertato dal vivo su Chrome il 01/09/2026, gia' presente prima
   della 0.7.0 (riguarda anche details.rivela, che e' della 0.4.0). Si scrive
   qui perche' e' esattamente il genere di cosa che si riscopre da capo ogni
   volta, perdendoci mezz'ora.

   FATTO: se una regola prende il colore di fondo da una variabile
   (`background: var(--superficie)`) E ha una transizione che tocca il fondo,
   quel colore NON si aggiorna quando la variabile cambia a pagina aperta.
   Resta quello di prima. Il testo invece cambia, perche' `color` non e'
   interessato: si finisce con testo chiaro su fondo chiaro.

   PROVA fatta in isolamento, quattro riquadri con la stessa variabile:
     - fondo da variabile, nessuna transizione        -> si aggiorna
     - fondo da variabile + transizione (comunque scritta,
       scorciatoia o proprieta' estesa, in entrambi i posti) -> NON si aggiorna
   Quindi non e' una questione di `background` contro `background-color`:
   e' la transizione. Riscrivere le dichiarazioni in forma estesa non serve, ed
   e' stato provato e annullato.

   QUANDO SI VEDE: solo se la variabile cambia mentre la pagina e' aperta. Il
   tema lo scrive il server sul tag <html> e non cambia mai da solo, quindi in
   pratica capita in un caso: chi passa il sistema operativo alla modalita'
   scura con la lezione aperta. Al primo ricaricamento tutto torna a posto.

   PERCHE' NON E' STATO CORRETTO: l'unica cura sarebbe togliere la transizione
   sul fondo a bottoni, `.opzione`, `details.rivela` e `.quiz-lampo-opzione`,
   cioe' cambiare come rispondono al passaggio del mouse in tutta la
   piattaforma. Sproporzionato rispetto a un caso che si risolve da se' con un
   ricaricamento. Se un domani si rifara' il foglio di stile, questa e' la
   trappola da ricordare. */