/* ==========================================================
   Stile del sito - Formazione OE
   Palette: blu scuro (professionale) + arancio sicurezza (accento)
   ========================================================== */

:root {
    --colore-primario: #1d3557;
    --colore-primario-chiaro: #2a4a75;
    /* Testo che normalmente è blu su una superficie chiara (titoli, link):
       in modalità scura diventa un azzurro più chiaro per restare leggibile,
       mentre --colore-primario resta blu scuro perché è usato anche come
       sfondo (barra laterale, pulsanti) dove non deve cambiare. */
    --colore-primario-testo: var(--colore-primario);
    --colore-accento: #e76f51;
    --colore-accento-scuro: #d35d3f;
    --colore-sfondo: #f4f6f8;
    /* Sfondo di card, form e pannelli (distinto dallo sfondo di pagina) */
    --colore-superficie: #ffffff;
    --colore-testo: #1f2937;
    --colore-testo-chiaro: #6b7280;
    --colore-bordo: #e2e8f0;
    --colore-successo: #2a9d5c;
    --colore-errore: #d64545;
    /* Pannelli "in vetro" semi-trasparenti (panoramica di Amministrazione) */
    --colore-vetro-sfondo: rgba(255, 255, 255, .55);
    --colore-vetro-bordo: rgba(255, 255, 255, .8);
    --raggio: 10px;
    --ombra: 0 2px 8px rgba(29, 53, 87, 0.08);
}

/* Modalità scura: attivata dal pulsante nella barra laterale, che imposta
   data-tema="scuro" su <html> e lo ricorda per le visite successive. */
:root[data-tema="scuro"] {
    --colore-primario-testo: #8fb1e0;
    --colore-sfondo: #12161d;
    --colore-superficie: #1b212b;
    --colore-testo: #e5e9f0;
    --colore-testo-chiaro: #97a1b0;
    --colore-bordo: #2a3342;
    --colore-vetro-sfondo: rgba(255, 255, 255, .045);
    --colore-vetro-bordo: rgba(255, 255, 255, .09);
    --ombra: 0 2px 10px rgba(0, 0, 0, 0.4);
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    background: var(--colore-sfondo);
    color: var(--colore-testo);
    line-height: 1.5;
}

a {
    color: var(--colore-primario-testo);
    text-decoration: none;
}

/* Le immagini inserite nel contenuto (schede, scenari) non
   sforano mai la larghezza del blocco che le contiene. */
img {
    max-width: 100%;
    height: auto;
}

/* Garantisce che l'attributo "hidden" funzioni sempre, anche su elementi
   la cui classe imposta una proprietà display (es. i pulsanti) */
[hidden] {
    display: none !important;
}

/* Icone a linea (SVG inline): si allineano al testo circostante e seguono
   il colore del testo (currentColor), così un solo set funziona ovunque. */
.icona {
    display: inline-block;
    vertical-align: -0.15em;
    flex-shrink: 0;
}

/* Struttura generale: intestazione in alto + dock flottante in basso */
.app-shell {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.intestazione-top {
    position: sticky;
    top: 0;
    z-index: 20;
    padding: 0.9rem 1.5rem;
    background: var(--colore-vetro-sfondo);
    backdrop-filter: blur(22px) saturate(180%);
    -webkit-backdrop-filter: blur(22px) saturate(180%);
    border-bottom: 1px solid var(--colore-vetro-bordo);
}

.intestazione-logo {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    color: var(--colore-primario-testo);
    font-weight: 700;
    font-size: 1.02rem;
}

.icona-tema-scuro {
    display: none;
}

:root[data-tema="scuro"] .icona-tema-chiaro {
    display: none;
}

:root[data-tema="scuro"] .icona-tema-scuro {
    display: inline;
}

.area-principale {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    padding-bottom: 5.5rem; /* lascia spazio al dock flottante */
}

/* Dock flottante in basso: sostituisce la barra laterale su ogni schermo,
   telefono compreso, quindi niente più menu ad hamburger separato. */
.dock {
    position: fixed;
    left: 50%;
    bottom: max(1rem, env(safe-area-inset-bottom, 0px));
    transform: translateX(-50%);
    z-index: 30;
    display: flex;
    align-items: stretch;
    gap: 0.15rem;
    padding: 0.4rem;
    max-width: calc(100vw - 1.5rem);
    background: var(--colore-vetro-sfondo);
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    border: 1px solid var(--colore-vetro-bordo);
    border-radius: 22px;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

.dock-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.2rem;
    width: 4.1rem;
    padding: 0.45rem 0.2rem 0.4rem;
    border-radius: 16px;
    color: var(--colore-testo-chiaro);
    text-align: center;
}

.dock-icona {
    font-size: 1.25rem;
    line-height: 1;
}

.dock-etichetta {
    font-size: 0.66rem;
    font-weight: 600;
    white-space: nowrap;
}

.dock-link:hover {
    background: rgba(127, 168, 222, 0.16);
    color: var(--colore-primario-testo);
}

.dock-link.link-attivo {
    background: var(--colore-accento);
    color: #fff;
}

.dock-link-profilo .dock-avatar {
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 0.62rem;
    font-weight: 700;
    line-height: 1;
}

/* Contenitori */
.contenitore {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    padding: 2rem 1.5rem 4rem;
}

.contenitore-stretto {
    max-width: 720px;
}

h1 {
    margin-top: 0;
    color: var(--colore-primario-testo);
}

/* Griglia di card della dashboard */
.griglia-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 1.25rem;
    margin-top: 1.5rem;
}

.card {
    background: var(--colore-superficie);
    border-radius: var(--raggio);
    padding: 1.5rem;
    box-shadow: var(--ombra);
    border: 1px solid var(--colore-bordo);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.card:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 16px rgba(29, 53, 87, 0.14);
}

.card-icona {
    font-size: 2rem;
}

.card h2 {
    margin: 0.6rem 0 0.4rem;
    font-size: 1.1rem;
    color: var(--colore-primario-testo);
}

.card p {
    margin: 0;
    color: var(--colore-testo-chiaro);
    font-size: 0.9rem;
}

.card-admin {
    border-left: 4px solid var(--colore-accento);
}

.icona-blu {
    background: #e0ecff;
    color: #1d4ed8;
}

.icona-verde {
    background: #dcfce8;
    color: #15803d;
}

.icona-arancio {
    background: #ffe8d9;
    color: #c2410c;
}

.icona-viola {
    background: #f1e3ff;
    color: #7c3aed;
}

/* Pagina di login / installazione */
.pagina-login {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.25rem;
    min-height: 100vh;
    background: linear-gradient(135deg, var(--colore-primario), var(--colore-primario-chiaro));
}

.piede-login {
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.85rem;
    margin: 0.2rem 0;
}

.campo-checkbox {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    margin: 1rem 0;
}

.campo-checkbox input[type="checkbox"] {
    width: auto;
    margin-top: 0.2rem;
    flex-shrink: 0;
    accent-color: var(--colore-accento);
}

.campo-checkbox label {
    display: inline;
    font-weight: 400;
    margin: 0;
    font-size: 0.9rem;
}

.campo-colore {
    width: 4rem;
    height: 2.6rem;
    padding: 0.2rem;
    border: 1px solid var(--colore-bordo);
    border-radius: 6px;
    cursor: pointer;
    background: var(--colore-superficie);
}

.piede-login a {
    color: rgba(255, 255, 255, 0.9);
    text-decoration: underline;
}

.interruttore-tema-mini {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    width: 100%;
    margin-top: 1.2rem;
    padding: 0.5rem;
    border: none;
    background: none;
    color: var(--colore-testo-chiaro);
    font-family: inherit;
    font-size: 0.85rem;
    cursor: pointer;
}

.interruttore-tema-mini:hover {
    color: var(--colore-accento);
}

.scheda-login {
    background: var(--colore-superficie);
    padding: 2.5rem;
    border-radius: var(--raggio);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    width: 100%;
    max-width: 380px;
}

.scheda-login h1 {
    text-align: center;
    margin-bottom: 0.2rem;
}

.sottotitolo {
    text-align: center;
    color: var(--colore-testo-chiaro);
    margin-top: 0;
    margin-bottom: 1.5rem;
}

/* Form generici */
form label {
    display: block;
    font-weight: 600;
    font-size: 0.9rem;
    margin: 1rem 0 0.3rem;
}

form input[type="text"],
form input[type="password"],
form input[type="number"],
form input[type="email"],
form select,
form textarea {
    width: 100%;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--colore-bordo);
    border-radius: 6px;
    font-size: 1rem;
    font-family: inherit;
}

.testo-aiuto {
    margin: 0.3rem 0 0;
    font-size: 0.8rem;
    color: var(--colore-testo-chiaro);
}

form textarea {
    resize: vertical;
}

form button,
.pulsante {
    display: inline-block;
    margin-top: 1.5rem;
    padding: 0.65rem 1.4rem;
    background: var(--colore-accento);
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
}

form button:hover,
.pulsante:hover {
    background: var(--colore-accento-scuro);
}

.messaggio-errore {
    background: #fdecea;
    color: var(--colore-errore);
    padding: 0.6rem 0.9rem;
    border-radius: 6px;
    font-size: 0.9rem;
}

.messaggio-successo {
    background: #e8f7ee;
    color: var(--colore-successo);
    padding: 0.6rem 0.9rem;
    border-radius: 6px;
    font-size: 0.95rem;
}

/* Lezioni */
.link-indietro {
    display: inline-block;
    margin-bottom: 1rem;
    font-size: 0.9rem;
}

.sezione-categoria {
    margin-top: 1.75rem;
}

.sezione-categoria h2 {
    color: var(--colore-primario-testo);
    border-bottom: 2px solid var(--colore-bordo);
    padding-bottom: 0.4rem;
}

.elenco-lezioni {
    list-style: none;
    padding: 0;
    margin: 0.75rem 0 0;
}

.elenco-lezioni li {
    margin-bottom: 0.5rem;
}

.elenco-lezioni li.pannello-vetro {
    padding: 0;
}

.elenco-lezioni a {
    display: block;
    padding: 0.75rem 1rem;
    font-weight: 500;
}

.elenco-lezioni a:hover {
    color: var(--colore-accento);
}

/* Riga di una valutazione convalidata: il rapporto occupa lo spazio
   disponibile, l'attestato resta come azione compatta a destra. */
.riga-valutazione-apprendista {
    display: flex;
    align-items: center;
}

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

.link-attestato-riga {
    display: flex !important;
    align-items: center;
    gap: 0.35rem;
    flex-shrink: 0;
    font-size: 0.82rem;
    color: var(--colore-accento);
    border-left: 1px solid var(--colore-bordo);
    white-space: nowrap;
}

.link-attestato-riga:hover {
    color: var(--colore-accento-scuro);
}

.etichetta-categoria {
    display: inline-block;
    background: var(--colore-primario);
    color: #fff;
    font-size: 0.8rem;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    margin-bottom: 1rem;
}

.etichetta-anno,
.etichetta-orientamento,
.etichetta-competenza,
.etichetta-ruolo-admin,
.etichetta-ruolo-apprendista {
    display: inline-flex;
    align-items: center;
    font-size: 0.78rem;
    font-weight: 600;
    padding: 0.2rem 0.65rem;
    border-radius: 999px;
    margin-left: 0.5rem;
    white-space: nowrap;
}

.etichetta-anno {
    background: #e0ecff;
    color: #1d4ed8;
}

.etichetta-orientamento {
    background: #f1e3ff;
    color: #7c3aed;
}

.etichetta-competenza {
    background: #ffe8d9;
    color: #c2410c;
}

.etichetta-ruolo-admin {
    background: #dcfce8;
    color: #15803d;
}

.etichetta-ruolo-apprendista {
    background: #eef1f5;
    color: #475569;
}

.etichetta-stato-bozza,
.etichetta-stato-convalidata {
    display: inline-flex;
    align-items: center;
    font-size: 0.78rem;
    font-weight: 600;
    padding: 0.2rem 0.65rem;
    border-radius: 999px;
    white-space: nowrap;
}

.etichetta-stato-bozza {
    background: #fef3c7;
    color: #92400e;
}

.etichetta-stato-convalidata {
    background: #dcfce8;
    color: #15803d;
}

.elenco-lezioni .etichetta-anno {
    margin-left: 0.6rem;
}

.riferimento-competenza {
    font-size: 0.85rem;
    color: var(--colore-testo-chiaro);
    margin: 0.3rem 0 0.6rem;
}

.riga-copertura-vuota {
    background: #fdecea;
}

.riga-copertura-vuota td {
    color: var(--colore-errore);
}

.intestazione-lezione {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.btn-pdf {
    flex-shrink: 0;
    background: var(--colore-superficie);
    color: var(--colore-primario-testo);
    border: 1px solid var(--colore-bordo);
    border-radius: 6px;
    padding: 0.55rem 1rem;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
}

.btn-pdf:hover {
    border-color: var(--colore-accento);
    color: var(--colore-accento);
}

.contenuto-lezione table {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 1.2rem;
    font-size: 0.92rem;
}

.contenuto-lezione th,
.contenuto-lezione td {
    text-align: left;
    padding: 0.55rem 0.8rem;
    border-bottom: 1px solid var(--colore-bordo);
}

.contenuto-lezione th {
    background: var(--colore-sfondo);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--colore-testo-chiaro);
}

.contenuto-lezione tbody tr:nth-child(even) {
    background: var(--colore-sfondo);
}

.contenuto-lezione img {
    display: block;
    border-radius: 6px;
    margin: 0 0 1.2rem;
}

/* Stampa / esportazione PDF della scheda di lezione */
.solo-stampa {
    display: none;
}

@media print {
    /* La carta è sempre bianca: la stampa/PDF ignora la modalità scura
       eventualmente attiva a schermo e usa sempre i colori chiari. */
    :root {
        --colore-primario-testo: #1d3557 !important;
        --colore-sfondo: #f4f6f8 !important;
        --colore-superficie: #ffffff !important;
        --colore-testo: #1f2937 !important;
        --colore-testo-chiaro: #6b7280 !important;
        --colore-bordo: #e2e8f0 !important;
    }

    /* Niente vetro/sfocatura in stampa: sempre pannelli piatti su carta
       bianca, indipendentemente dallo stile a schermo. */
    .sfondo-vetro {
        background: none !important;
        padding: 0 !important;
    }

    .pannello-vetro {
        background: #fff !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        box-shadow: none !important;
        border: 1px solid #e2e8f0 !important;
    }

    .pannello-vetro::before {
        display: none !important;
    }

    /* La griglia di riquadri per gli elenchi puntati (vedi schede di
       lezione) torna un semplice elenco puntato in stampa: più compatta
       e senza rischio di tagliare un riquadro a metà pagina. */
    .contenuto-lezione-completa ul {
        display: block !important;
        list-style: disc !important;
        padding-left: 1.3rem !important;
    }

    .contenuto-lezione-completa ul li {
        background: none !important;
        border: none !important;
        padding: 0 !important;
        margin-bottom: 0.4rem !important;
    }

    .nascondi-in-stampa {
        display: none !important;
    }

    .solo-stampa {
        display: block;
    }

    body {
        background: #fff;
    }

    .contenitore {
        max-width: none;
        padding: 0;
    }

    /* Template fisso dell'intestazione del PDF */
    .intestazione-stampa {
        border-bottom: 3px solid var(--colore-primario);
        padding-bottom: 0.7rem;
        margin-bottom: 1.6rem;
    }

    .stampa-eyebrow {
        margin: 0 0 0.3rem;
        font-size: 0.68rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        color: var(--colore-accento);
    }

    .stampa-riga-logo {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .stampa-logo-blocco {
        display: flex;
        align-items: center;
        gap: 0.7rem;
    }

    .stampa-logo-icona {
        flex-shrink: 0;
        display: block;
    }

    .stampa-logo-nome {
        font-size: 1rem;
        font-weight: 700;
        color: var(--colore-primario-testo);
    }

    .stampa-data {
        font-size: 0.8rem;
        color: var(--colore-testo-chiaro);
    }

    .stampa-sottotitolo {
        margin: 0.2rem 0 0;
        font-size: 0.8rem;
        color: var(--colore-testo-chiaro);
    }

    /* Template fisso del piè di pagina del PDF */
    .piede-stampa {
        margin-top: 2.2rem;
        padding-top: 0.6rem;
        border-top: 2px solid var(--colore-accento);
        font-size: 0.75rem;
        color: var(--colore-testo-chiaro);
        text-align: center;
    }

    @page {
        margin: 2cm 1.8cm;
    }

    /* Adattamenti per la stampa/PDF delle schede di lezione */
    .layout-lezione-completa {
        display: block !important;
    }

    .copertina-lezione {
        background: none !important;
        color: var(--colore-testo) !important;
        padding: 0 !important;
    }

    .copertina-lezione h1 {
        color: var(--colore-primario-testo) !important;
    }

    .copertina-lezione .etichetta-categoria {
        background: var(--colore-primario) !important;
    }

    .sottotitolo-lezione {
        color: var(--colore-testo-chiaro) !important;
    }

    .contenuto-lezione-completa {
        border: none !important;
        padding: 0 !important;
    }

    /* Adattamenti per la stampa/PDF delle simulazioni d'esame */
    .blocco-valutazione,
    .blocco-colloquio {
        background: none !important;
        border: none !important;
        border-radius: 0 !important;
        padding: 0 !important;
        margin-top: 1.8rem !important;
    }

    .blocco-valutazione h2,
    .blocco-colloquio h2 {
        border-top: 1px solid var(--colore-bordo);
        padding-top: 1.2rem;
    }

    .criterio-valutazione label {
        padding: 0.4rem 0 !important;
    }

    /* Griglia di valutazione numerata come un vero verbale d'esame */
    .blocco-valutazione .griglia-valutazione {
        counter-reset: passo-valutazione;
        list-style: none !important;
    }

    .blocco-valutazione .griglia-valutazione .criterio-valutazione {
        position: relative;
        padding-left: 1.7rem !important;
    }

    .blocco-valutazione .griglia-valutazione .criterio-valutazione::before {
        counter-increment: passo-valutazione;
        content: counter(passo-valutazione) ".";
        position: absolute;
        left: 0;
        top: 0.4rem;
        font-weight: 700;
        color: var(--colore-primario-testo);
    }

    /* Dati del candidato da compilare a mano (procedura d'esame) */
    .dati-esame-stampa {
        display: flex !important;
        gap: 1.6rem;
        margin: 0 0 1.4rem;
        padding-bottom: 0.9rem;
        border-bottom: 1px solid var(--colore-bordo);
    }

    .campo-dati-stampa {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 0.35rem;
    }

    .campo-dati-stampa span:first-child {
        font-size: 0.65rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        color: var(--colore-testo-chiaro);
    }

    .riga-da-compilare {
        display: block;
        border-bottom: 1px solid var(--colore-testo-chiaro);
        height: 1.1rem;
    }

    /* Rapporto di valutazione: l'anello di avanzamento diventa testo piatto
       (un cerchio SVG non aggiunge nulla su carta), le tessere restano
       colorate come le altre schede a sfondo fisso già usate nel sito. */
    .anello-punteggio svg {
        display: none !important;
    }

    .anello-punteggio {
        position: static !important;
        width: auto !important;
        height: auto !important;
    }

    .anello-testo {
        position: static !important;
        align-items: flex-start !important;
    }

    .anello-numero {
        font-size: 1.6rem !important;
    }

    .tessera-criterio {
        border: 1px solid var(--colore-bordo) !important;
    }

    /* Firme di chiusura del verbale */
    .firme-stampa {
        display: flex !important;
        gap: 3rem;
        margin-top: 3rem;
        break-inside: avoid;
    }

    .firma-blocco {
        flex: 1;
    }

    .firma-blocco .riga-da-compilare {
        height: 2.2rem;
        border-bottom: 1px solid var(--colore-testo);
        margin-bottom: 0.4rem;
    }

    .firma-immagine-stampa {
        display: block;
        height: 2.2rem;
        max-width: 100%;
        object-fit: contain;
        object-position: left bottom;
        margin-bottom: 0.4rem;
    }

    .firma-etichetta {
        font-size: 0.75rem;
        color: var(--colore-testo-chiaro);
    }

    /* Evita interruzioni di pagina scomode: titoli isolati a fine pagina,
       tabelle/immagini/riquadri tagliati a metà */
    h1, h2, h3 {
        break-after: avoid;
    }

    table, img, .riquadro-attenzione, .riquadro-nota, .criterio-valutazione, .tessera-criterio, li {
        break-inside: avoid;
    }

    .intestazione-stampa, .copertina-lezione, .intestazione-lezione, .dati-esame-stampa, .riepilogo-esito {
        break-after: avoid;
    }

    /* Il certificato dell'attestato è l'unico pannello che deve restare a
       colori anche su carta: qui, a differenza del resto del sito, il
       colore è il punto (vedi .pannello-vetro sopra, che invece va sempre
       in bianco/nero). */
    .certificato-attestato {
        background: linear-gradient(135deg, #1d3557, #2a4a75) !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
        break-inside: avoid;
    }

    .certificato-firma-immagine {
        filter: brightness(0) invert(1) !important;
    }
}

/* Attestato di fine percorso: certificato a schermo e in stampa, sempre
   sui colori del marchio (a differenza degli altri pannelli-vetro, che in
   stampa tornano piatti bianco/nero: qui il colore è voluto). */
.certificato-attestato {
    padding: 0.6rem;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--colore-primario), var(--colore-primario-chiaro));
}

.certificato-interno {
    position: relative;
    border: 2px solid rgba(255, 255, 255, 0.5);
    border-radius: 8px;
    padding: 2.6rem 2.2rem 2rem;
    text-align: center;
}

.certificato-interno::before {
    content: "";
    position: absolute;
    inset: 8px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 4px;
    pointer-events: none;
}

.certificato-sigillo {
    width: 56px;
    height: 56px;
    margin: 0 auto 1.1rem;
    border-radius: 50%;
    background: var(--colore-accento);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 26px;
    box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.25);
}

.certificato-eyebrow {
    color: rgba(255, 255, 255, 0.65);
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin: 0 0 0.5rem;
}

.certificato-titolo {
    color: #fff;
    font-size: 1.6rem;
    font-weight: 800;
    margin: 0 0 0.3rem;
}

.certificato-sotto {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.85rem;
    margin: 0 0 1.3rem;
}

.certificato-nome {
    color: #fff;
    font-size: 1.7rem;
    font-weight: 700;
    margin: 0 0 0.3rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}

.certificato-meta {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.8rem;
    margin: 0.7rem 0 1.6rem;
}

.certificato-statistiche {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.7rem;
    margin-bottom: 1.6rem;
}

.certificato-stat {
    text-align: center;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    padding: 0.85rem 0.5rem;
}

.certificato-stat-numero {
    font-size: 1.4rem;
    font-weight: 800;
    color: #fff;
}

.certificato-stat-etichetta {
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.6);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-top: 0.15rem;
}

.certificato-firme {
    display: flex;
    gap: 2rem;
    margin-top: 1.8rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.certificato-firma-blocco {
    flex: 1;
    text-align: center;
}

.certificato-firma-linea {
    display: block;
    border-top: 1px solid rgba(255, 255, 255, 0.5);
    margin: 1.6rem 0.5rem 0.5rem;
}

.certificato-firma-immagine {
    display: block;
    height: 2.2rem;
    max-width: 100%;
    margin: 0 auto 0.5rem;
    object-fit: contain;
    filter: brightness(0) invert(1);
}

.certificato-firma-etichetta {
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.55);
}

.certificato-firme-nota {
    margin: 1rem 0 0;
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.5);
}

@media (max-width: 640px) {
    .certificato-interno {
        padding: 2rem 1.2rem 1.6rem;
    }

    .certificato-nome {
        font-size: 1.35rem;
    }
}

/* Schede di lezione: barra di ricerca + filtro anno */
.barra-strumenti-lezioni {
    display: flex;
    gap: 0.7rem;
    margin-top: 1.5rem;
    flex-wrap: wrap;
}

.campo-ricerca-lezioni {
    flex: 1;
    min-width: 200px;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.6rem 0.9rem;
    color: var(--colore-testo-chiaro);
}

.campo-ricerca-lezioni input {
    flex: 1;
    border: none;
    background: none;
    font: inherit;
    color: var(--colore-testo);
    outline: none;
}

.selezione-filtro-lezioni {
    border: none;
    font: inherit;
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--colore-primario-testo);
    padding: 0.6rem 0.9rem;
    border-radius: 16px;
    cursor: pointer;
}

/* Pillole di filtro per categoria */
.pillole-categorie-lezioni {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.9rem;
    overflow-x: auto;
    padding-bottom: 0.2rem;
}

.pillola-categoria {
    white-space: nowrap;
    font: inherit;
    font-size: 0.78rem;
    font-weight: 600;
    padding: 0.4rem 0.85rem;
    border-radius: 999px;
    border: 1px solid var(--colore-bordo);
    background: var(--colore-superficie);
    color: var(--colore-testo-chiaro);
    cursor: pointer;
}

.pillola-categoria:hover {
    border-color: var(--colore-accento);
    color: var(--colore-accento);
}

.pillola-categoria-attiva,
.pillola-categoria-attiva:hover {
    background: var(--colore-primario);
    border-color: var(--colore-primario);
    color: #fff;
}

.nessun-risultato-lezioni {
    margin-top: 1.5rem;
    color: var(--colore-testo-chiaro);
}

/* Griglia a catalogo: un tassello colorato per categoria in cima ad ogni scheda */
.griglia-lezioni-anteprima {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.1rem;
    margin-top: 1.1rem;
}

.scheda-lezione-anteprima {
    display: block;
    padding: 0;
    overflow: hidden;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.scheda-lezione-anteprima:hover {
    transform: translateY(-3px);
}

.scheda-lezione-anteprima-fascia {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 64px;
    color: #fff;
}

.scheda-lezione-anteprima-icona {
    font-size: 1.5rem;
    opacity: 0.9;
}

.scheda-lezione-anteprima-badge {
    position: absolute;
    top: 0.5rem;
    right: 0.6rem;
    font-size: 0.62rem;
    font-weight: 700;
    background: rgba(0, 0, 0, 0.25);
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
}

.scheda-lezione-anteprima-corpo {
    padding: 0.9rem 1rem 1.1rem;
}

.scheda-lezione-anteprima-categoria {
    display: block;
    font-size: 0.66rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--colore-accento);
    margin-bottom: 0.3rem;
}

.scheda-lezione-anteprima-corpo h3 {
    margin: 0 0 0.3rem;
    font-size: 0.98rem;
    line-height: 1.3;
    color: var(--colore-primario-testo);
}

.scheda-lezione-anteprima-corpo p {
    margin: 0;
    color: var(--colore-testo-chiaro);
    font-size: 0.82rem;
}

.contenitore-lezione-completa {
    max-width: 900px;
}

.copertina-lezione {
    background: var(--colore-vetro-sfondo);
    backdrop-filter: blur(22px) saturate(180%);
    -webkit-backdrop-filter: blur(22px) saturate(180%);
    border: 1px solid var(--colore-vetro-bordo);
    border-radius: var(--raggio);
    padding: 1.2rem 1.4rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
}

.copertina-lezione h1 {
    margin: 0.35rem 0 0;
    font-size: 1.35rem;
}

.copertina-lezione .etichetta-categoria {
    background: var(--colore-accento);
    margin-bottom: 0;
}

.sottotitolo-lezione {
    margin: 0.2rem 0 0;
    color: var(--colore-testo-chiaro);
    font-size: 0.9rem;
}

.layout-lezione-completa {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 2rem;
    align-items: start;
}

.layout-lezione-completa-senza-indice {
    grid-template-columns: 1fr;
}

.indice-lezione {
    position: sticky;
    top: 1rem;
}

.indice-lezione h2 {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--colore-testo-chiaro);
    margin: 0 0 0.8rem;
}

.indice-lezione ol {
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: indice-lezione;
}

.indice-lezione li {
    counter-increment: indice-lezione;
    margin-bottom: 0.25rem;
}

.indice-lezione a {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.4rem 0.5rem;
    border-radius: 10px;
    color: var(--colore-testo);
    font-size: 0.86rem;
}

.indice-lezione a::before {
    content: counter(indice-lezione, decimal-leading-zero);
    flex-shrink: 0;
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--colore-testo-chiaro);
}

.indice-lezione a:hover,
.indice-lezione a.voce-attiva {
    background: var(--colore-sfondo);
    color: var(--colore-accento);
    font-weight: 600;
}

.indice-lezione a.voce-attiva::before {
    color: var(--colore-accento);
}

.contenuto-lezione-completa h2 {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    color: var(--colore-primario-testo);
    font-size: 1.1rem;
    margin: 1.8rem 0 0.9rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--colore-bordo);
}

.contenuto-lezione-completa h2:first-child {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}

.numero-sezione {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 50%;
    background: var(--colore-accento);
    color: #fff;
    font-size: 0.85rem;
    font-weight: 700;
    flex-shrink: 0;
}

.contenuto-lezione-completa p,
.contenuto-lezione-completa ul,
.contenuto-lezione-completa ol {
    margin: 0 0 0.9rem;
}

.contenuto-lezione-completa ol {
    padding-left: 1.3rem;
}

.contenuto-lezione-completa ol li {
    margin-bottom: 0.4rem;
}

/* Gli elenchi puntati diventano una griglia di riquadri: utile per le
   definizioni ("Termine: spiegazione") tipiche delle schede tecniche,
   più leggibili di un semplice elenco quando sono più di due-tre voci. */
.contenuto-lezione-completa ul {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 0.7rem;
    list-style: none;
    padding: 0;
}

.contenuto-lezione-completa ul li {
    margin: 0;
    padding: 0.85rem 1rem;
    background: var(--colore-sfondo);
    border: 1px solid var(--colore-bordo);
    border-radius: 12px;
    font-size: 0.88rem;
}

.contenuto-lezione-completa table {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 1.2rem;
    font-size: 0.92rem;
}

.contenuto-lezione-completa th,
.contenuto-lezione-completa td {
    text-align: left;
    padding: 0.55rem 0.8rem;
    border-bottom: 1px solid var(--colore-bordo);
}

.contenuto-lezione-completa th {
    background: var(--colore-sfondo);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--colore-testo-chiaro);
}

.contenuto-lezione-completa tbody tr:nth-child(even) {
    background: var(--colore-sfondo);
}

.riquadro-attenzione,
.riquadro-nota {
    padding: 0.9rem 1.1rem;
    border-radius: 6px;
    margin: 0 0 1.2rem;
    font-size: 0.92rem;
}

.riquadro-attenzione {
    background: #fdecea;
    color: #1f2937;
    border-left: 4px solid var(--colore-errore);
}

.riquadro-nota {
    background: #eaf2fd;
    color: #1f2937;
    border-left: 4px solid var(--colore-primario);
}

/* Bacheca delle Valutazioni Pratiche: due colonne per stato, righe compatte */
.bacheca-valutazioni {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin-top: 1rem;
}

.intestazione-colonna-valutazioni {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--colore-testo-chiaro);
    padding: 0 0.3rem 0.6rem;
}

.contatore-colonna {
    background: var(--colore-bordo);
    color: var(--colore-testo);
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.1rem 0.55rem;
    border-radius: 999px;
}

.elenco-valutazioni {
    display: flex;
    flex-direction: column;
    min-height: 3rem;
}

.messaggio-vuoto-colonna {
    color: var(--colore-testo-chiaro);
    font-size: 0.88rem;
    margin: 0;
    padding: 0.3rem 0.2rem;
}

.riga-valutazione {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 0.85rem 0.2rem;
    border-bottom: 1px solid var(--colore-bordo);
}

.riga-valutazione:last-child {
    border-bottom: none;
}

.avatar-iniziali {
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.85rem;
    color: #fff;
    flex-shrink: 0;
}

/* Pagina "Il mio account": avatar più grande nella scheda profilo */
.avatar-iniziali-grande {
    width: 4.6rem;
    height: 4.6rem;
    font-size: 1.5rem;
    margin: 0 auto 0.8rem;
}

.pagina-profilo {
    display: grid;
    grid-template-columns: 230px 1fr;
    gap: 1rem;
    align-items: start;
}

.scheda-profilo {
    text-align: center;
}

.scheda-profilo h2 {
    margin: 0 0 0.15rem;
    font-size: 1.1rem;
}

.scheda-profilo-ruolo {
    margin: 0 0 0.2rem;
    color: var(--colore-testo-chiaro);
    font-size: 0.85rem;
}

.scheda-profilo-dettaglio {
    margin: 0 0 1rem;
    color: var(--colore-testo-chiaro);
    font-size: 0.78rem;
}

.scheda-profilo-statistiche {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    text-align: left;
}

.pillola-statistica {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    padding: 0.7rem 0.85rem;
    border-radius: 14px;
    background: var(--colore-sfondo);
    border: 1px solid var(--colore-bordo);
}

.pillola-statistica b {
    font-size: 1.1rem;
    font-variant-numeric: tabular-nums;
}

.pillola-statistica span {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--colore-testo-chiaro);
    font-weight: 700;
}

.blocco-cambio-password {
    margin-top: 0.9rem;
}

.blocco-cambio-password summary {
    display: inline-block;
    cursor: pointer;
    list-style: none;
}

.blocco-cambio-password summary::-webkit-details-marker {
    display: none;
}

.blocco-cambio-password[open] summary {
    margin-bottom: 0.8rem;
}

/* Pagina "Altro" (impostazioni): intestazione con avatar + elenco di voci */
.scheda-profilo-intestazione {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 1.2rem 0 1.5rem;
}

.scheda-profilo-intestazione .avatar-iniziali-grande {
    margin: 0;
}

.scheda-profilo-nome {
    margin: 0;
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--colore-primario-testo);
}

.scheda-profilo-intestazione .scheda-profilo-ruolo {
    margin: 0;
}

.elenco-impostazioni {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.voce-impostazioni {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 0.9rem 1rem;
    border-radius: 14px;
    background: var(--colore-superficie);
    border: 1px solid var(--colore-bordo);
    text-align: left;
    width: 100%;
    font-family: inherit;
    cursor: pointer;
}

.voce-impostazioni:hover {
    border-color: var(--colore-accento);
}

.voce-impostazioni-icona {
    display: flex;
    flex-shrink: 0;
    width: 2.3rem;
    height: 2.3rem;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--colore-sfondo);
    color: var(--colore-primario-testo);
    font-size: 1.15rem;
}

.voce-impostazioni-testo {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.voce-impostazioni-titolo {
    font-weight: 600;
    font-size: 0.92rem;
    color: var(--colore-testo);
}

.voce-impostazioni-sottotitolo {
    font-size: 0.78rem;
    color: var(--colore-testo-chiaro);
}

.voce-impostazioni-pericolo .voce-impostazioni-icona {
    background: rgba(214, 69, 69, 0.12);
    color: var(--colore-errore);
}

.voce-impostazioni-pericolo .voce-impostazioni-titolo {
    color: var(--colore-errore);
}

.voce-impostazioni-attiva .voce-impostazioni-icona {
    background: var(--colore-accento);
    color: #fff;
}

/* Il tasto "Modalità scura/chiara" in Impostazioni mostra un'icona sola:
   .voce-impostazioni-icona{display:flex} da sola avrebbe la stessa
   specificità di .icona-tema-scuro{display:none} definita più sopra e,
   venendo dopo nel foglio di stile, vincerebbe mostrando entrambe le
   icone insieme. Il selettore composto qui sotto ha una specificità più
   alta e risolve il conflitto a prescindere dall'ordine. */
.voce-impostazioni-icona.icona-tema-scuro {
    display: none;
}

:root[data-tema="scuro"] .voce-impostazioni-icona.icona-tema-chiaro {
    display: none;
}

:root[data-tema="scuro"] .voce-impostazioni-icona.icona-tema-scuro {
    display: flex;
}

@media (max-width: 640px) {
    .pagina-profilo {
        grid-template-columns: 1fr;
    }
}

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

.riga-valutazione-titolo {
    font-weight: 600;
    font-size: 0.95rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.riga-valutazione-meta {
    font-size: 0.82rem;
    color: var(--colore-testo-chiaro);
    margin-top: 0.15rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.riga-valutazione-destra {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    flex-shrink: 0;
}

.riga-valutazione-data {
    font-size: 0.8rem;
    font-variant-numeric: tabular-nums;
    color: var(--colore-testo-chiaro);
    white-space: nowrap;
}

.azioni-riga-valutazione {
    display: flex;
    gap: 0.3rem;
}

@media (max-width: 760px) {
    .bacheca-valutazioni {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .riga-valutazione-data {
        display: none;
    }
    .riga-valutazione-titolo,
    .riga-valutazione-meta {
        white-space: normal;
    }
}

/* Tabelle */
.tabella-admin {
    width: 100%;
    border-collapse: collapse;
    background: var(--colore-superficie);
    border-radius: var(--raggio);
    overflow: hidden;
    margin-top: 0.75rem;
}

.tabella-admin th,
.tabella-admin td {
    padding: 0.6rem 0.9rem;
    border-bottom: 1px solid var(--colore-bordo);
    text-align: left;
}

.tabella-admin th {
    background: var(--colore-sfondo);
    font-size: 0.85rem;
    color: var(--colore-testo-chiaro);
}

/* Simulazioni pratiche (esame) */
.blocco-valutazione,
.blocco-colloquio {
    margin-top: 1.5rem;
}

.blocco-valutazione h2,
.blocco-colloquio h2 {
    color: var(--colore-primario-testo);
    font-size: 1.15rem;
    margin-top: 0;
}

.progresso-simulazione {
    display: inline-block;
    background: var(--colore-sfondo);
    border: 1px solid var(--colore-bordo);
    border-radius: 999px;
    padding: 0.3rem 0.9rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--colore-testo-chiaro);
    margin: 0 0 1rem;
}

.griglia-valutazione {
    list-style: none;
    margin: 0;
    padding: 0;
}

.criterio-valutazione {
    border-bottom: 1px solid var(--colore-bordo);
}

.criterio-valutazione:last-child {
    border-bottom: none;
}

.criterio-valutazione label {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    padding: 0.7rem 0.2rem;
    cursor: pointer;
    font-weight: 500;
}

.criterio-valutazione input[type="checkbox"] {
    margin-top: 0.2rem;
    width: 1.1rem;
    height: 1.1rem;
    accent-color: var(--colore-successo);
    flex-shrink: 0;
}

/* Griglia di valutazione a schede (admin/valutazione-compila.php): una
   card per criterio, con controllo segmentato Superato/Non superato e
   due note affiancate (privata / visibile all'apprendista nel rapporto). */
.griglia-valutazione-schede {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}

.criterio-scheda {
    list-style: none;
    padding: 1rem 1.1rem 1.1rem;
    border: 1px solid var(--colore-bordo);
    border-radius: 14px;
    background: var(--colore-sfondo);
    border-left: 4px solid var(--colore-bordo);
    transition: border-color 0.15s ease;
}

.criterio-scheda-superato {
    border-left-color: var(--colore-successo);
}

.criterio-scheda-non-superato {
    border-left-color: var(--colore-errore);
}

.criterio-scheda-intestazione {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    margin-bottom: 0.7rem;
}

.criterio-scheda-testo {
    flex: 1;
    margin: 0;
    font-weight: 500;
}

.criterio-scheda .passo-numero {
    flex-shrink: 0;
    background: var(--colore-testo-chiaro);
}

.criterio-scheda-superato .passo-numero {
    background: var(--colore-successo);
}

.criterio-scheda-non-superato .passo-numero {
    background: var(--colore-errore);
}

/* Controllo segmentato Superato / Non superato: due radio nascosti,
   etichette adiacenti stilizzate come pulsanti a coppia. */
.segmentato-superato {
    display: flex;
    margin-bottom: 0.8rem;
    border: 1px solid var(--colore-bordo);
    border-radius: 10px;
    overflow: hidden;
    background: var(--colore-superficie);
}

.segmentato-superato input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    pointer-events: none;
}

.segmentato-opzione {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.55rem 0.6rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--colore-testo-chiaro);
    cursor: pointer;
    text-align: center;
    user-select: none;
}

.segmentato-opzione-si {
    border-right: 1px solid var(--colore-bordo);
}

.segmentato-superato input[value="1"]:checked ~ .segmentato-opzione-si {
    background: var(--colore-successo);
    color: #fff;
}

.segmentato-superato input[value="0"]:checked ~ .segmentato-opzione-no {
    background: var(--colore-errore);
    color: #fff;
}

.segmentato-superato input[type="radio"]:focus-visible ~ .segmentato-opzione {
    outline: 2px solid var(--colore-accento);
    outline-offset: -2px;
}

/* Doppia nota per criterio: privata (formatore) e visibile (apprendista) */
.criterio-scheda-note {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.7rem;
}

.criterio-nota-blocco label {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin-bottom: 0.3rem;
    font-size: 0.76rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--colore-testo-chiaro);
}

.criterio-nota-blocco textarea {
    width: 100%;
    padding: 0.4rem 0.6rem;
    font-size: 0.85rem;
    font-family: inherit;
    border: 1px solid var(--colore-bordo);
    border-radius: 8px;
    background: var(--colore-superficie);
    color: var(--colore-testo);
    resize: vertical;
}

.criterio-nota-blocco-visibile label {
    color: var(--colore-accento);
}

.criterio-nota-blocco-visibile textarea {
    border-color: rgba(231, 111, 81, 0.35);
}

@media (max-width: 560px) {
    .criterio-scheda-note {
        grid-template-columns: 1fr;
    }
}

/* Schermata di compilazione della valutazione pratica (lato formatore) */
.pannello-info-esame {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin-top: 1rem;
}

.info-esame-colonna {
    min-width: 0;
}

.info-esame-etichetta {
    margin: 0 0 0.2rem;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--colore-testo-chiaro);
}

.info-esame-valore {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--colore-primario-testo);
    font-variant-numeric: tabular-nums;
}

.info-esame-dettaglio {
    margin: 0.15rem 0 0;
    font-size: 0.85rem;
    color: var(--colore-testo-chiaro);
}

.dettaglio-scenario-esame {
    margin-top: 1.25rem;
    cursor: pointer;
}

.dettaglio-scenario-esame summary {
    font-weight: 600;
    color: var(--colore-primario-testo);
    cursor: pointer;
    list-style: none;
}

.dettaglio-scenario-esame summary::-webkit-details-marker {
    display: none;
}

.dettaglio-scenario-esame summary::before {
    content: "▸ ";
    display: inline-block;
    transition: transform 0.15s ease;
}

.dettaglio-scenario-esame[open] summary::before {
    transform: rotate(90deg);
}

.dettaglio-scenario-esame .contenuto-lezione {
    margin-top: 0.9rem;
    padding-top: 0.9rem;
    border-top: 1px solid var(--colore-bordo);
    cursor: auto;
}

@media (max-width: 640px) {
    .pannello-info-esame {
        grid-template-columns: 1fr;
        gap: 0.9rem;
    }
}

/* Rapporto di valutazione pratica (lato apprendista): anello di
   avanzamento + griglia a tessere, una per criterio. */
.riepilogo-esito {
    display: flex;
    align-items: center;
    gap: 1.3rem;
    flex-wrap: wrap;
    margin-bottom: 1.3rem;
}

.anello-punteggio {
    position: relative;
    width: 92px;
    height: 92px;
    flex-shrink: 0;
}

.anello-punteggio svg {
    transform: rotate(-90deg);
}

.anello-punteggio circle {
    transition: stroke-dashoffset 0.6s ease;
}

.anello-testo {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.anello-numero {
    font-size: 1.05rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

.anello-pct {
    font-size: 0.68rem;
    color: var(--colore-testo-chiaro);
    margin-top: 0.15rem;
}

.riepilogo-esito-info h2 {
    margin: 0 0 0.3rem;
}

.riepilogo-esito-meta {
    margin: 0;
    font-size: 0.85rem;
    color: var(--colore-testo-chiaro);
}

.griglia-criteri-esito {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 0.6rem;
}

.tessera-criterio {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    padding: 0.7rem 0.8rem;
    border-radius: 12px;
    font-size: 0.88rem;
    line-height: 1.35;
    border: 1px solid transparent;
    color: #1f2937;
}

.tessera-criterio-superato {
    background: #eaf7ee;
    border-color: rgba(42, 157, 92, 0.25);
}

.tessera-criterio-non-superato {
    background: #fdecea;
    border-color: rgba(214, 69, 69, 0.25);
}

.tessera-criterio-numero {
    flex-shrink: 0;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    color: #fff;
}

.tessera-criterio-superato .tessera-criterio-numero {
    background: var(--colore-successo);
}

.tessera-criterio-non-superato .tessera-criterio-numero {
    background: var(--colore-errore);
}

.tessera-criterio-corpo {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    min-width: 0;
}

/* Commento del formatore visibile all'apprendista su questo passo */
.tessera-criterio-nota {
    margin: 0;
    font-size: 0.8rem;
    font-weight: 400;
    font-style: italic;
    opacity: 0.85;
}

.azioni-form-valutazione {
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem;
    align-items: center;
    margin-top: 1.2rem;
}

.blocco-colloquio p {
    color: var(--colore-testo-chiaro);
    margin-top: 0;
}

.blocco-colloquio ol {
    margin: 0;
    padding-left: 1.3rem;
}

.blocco-colloquio li {
    margin-bottom: 0.6rem;
}

/* Firme a schermo (esame/view.php): riquadro di disegno per candidato e
   formatore, con il dito o con la Apple Pencil su iPad. */
.blocco-firme {
    margin-top: 1.5rem;
}

.blocco-firme .testo-aiuto {
    margin: 0 0 1rem;
}

.griglia-firme {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.2rem;
}

.firma-riquadro {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.firma-riquadro-etichetta {
    margin: 0;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--colore-testo);
}

.firma-superficie {
    position: relative;
    height: 150px;
    background: #fff;
    border: 1.5px dashed var(--colore-bordo);
    border-radius: 12px;
    overflow: hidden;
}

.firma-tela {
    width: 100%;
    height: 100%;
    display: block;
    touch-action: none;
    cursor: crosshair;
}

.firma-segnaposto {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    color: #9aa3b2;
    font-size: 0.85rem;
    pointer-events: none;
}

.firma-cancella {
    align-self: flex-start;
    padding: 0.35rem 0.8rem;
    border: 1px solid var(--colore-bordo);
    border-radius: 8px;
    background: var(--colore-superficie);
    color: var(--colore-testo-chiaro);
    font-size: 0.8rem;
    font-family: inherit;
    cursor: pointer;
}

.firma-cancella:hover {
    border-color: var(--colore-accento);
    color: var(--colore-accento);
}

@media (max-width: 640px) {
    .griglia-firme {
        grid-template-columns: 1fr;
    }
}

/* Amministrazione */
.scheda-form {
    background: var(--colore-superficie);
    border: 1px solid var(--colore-bordo);
    border-radius: var(--raggio);
    padding: 1.5rem;
    margin: 1.5rem 0 2rem;
}

.sezione-campi {
    margin-top: 1.6rem;
    padding-top: 1.3rem;
    border-top: 1px solid var(--colore-bordo);
}

.sezione-campi:first-of-type {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}

.sezione-campi-titolo {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--colore-testo-chiaro);
    margin: 0 0 0.8rem;
}

.griglia-campi {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0 1.5rem;
}

.griglia-campi label {
    margin-top: 1rem;
}

.griglia-campi label:first-child,
.griglia-campi > div:first-child label {
    margin-top: 1rem;
}

.link-crea-pratica {
    display: inline-block;
    margin-top: 0.5rem;
    font-size: 0.85rem;
    font-weight: 600;
}

.guida-editor-completo {
    background: #eaf2fd;
    color: #1f2937;
    border-left: 4px solid var(--colore-primario);
    border-radius: 6px;
    padding: 0.9rem 1.1rem;
    margin-bottom: 1.2rem;
    font-size: 0.88rem;
}

.guida-editor-completo p {
    margin: 0 0 0.5rem;
}

.guida-editor-completo ul {
    margin: 0;
    padding-left: 1.2rem;
}

.guida-editor-completo li {
    margin-bottom: 0.3rem;
}

.guida-editor-completo code {
    background: rgba(29, 53, 87, 0.08);
    padding: 0.05rem 0.35rem;
    border-radius: 4px;
    font-size: 0.85em;
}

/* Editor visuale del contenuto (sostituisce le textarea con HTML scritto a mano) */
.editor-contenuto {
    margin-top: 0.5rem;
    border: 1px solid var(--colore-bordo);
    border-radius: 8px;
    overflow: hidden;
    background: var(--colore-superficie);
}

.editor-importa-riga {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.6rem;
    padding: 0.7rem 0.8rem;
    background: var(--colore-superficie);
    border-bottom: 1px solid var(--colore-bordo);
}

.editor-importa-pdf {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.8rem;
    font-size: 0.85rem;
}

.editor-importa-nota {
    font-size: 0.8rem;
    color: var(--colore-testo-chiaro);
}

.editor-barra {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    padding: 0.5rem;
    background: var(--colore-sfondo);
    border-bottom: 1px solid var(--colore-bordo);
}

.editor-bottone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2rem;
    height: 2rem;
    padding: 0 0.5rem;
    border: 1px solid transparent;
    border-radius: 6px;
    background: none;
    color: var(--colore-testo);
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
}

.editor-bottone:hover {
    background: var(--colore-superficie);
    border-color: var(--colore-bordo);
    color: var(--colore-accento);
}

.editor-bottone-corsivo {
    font-style: italic;
}

.editor-area {
    min-height: 220px;
    max-height: 480px;
    overflow-y: auto;
    padding: 1rem 1.2rem;
    font-size: 0.95rem;
    line-height: 1.55;
    outline: none;
}

.editor-area:focus {
    box-shadow: inset 0 0 0 2px var(--colore-accento);
}

.editor-area p {
    margin: 0 0 0.8rem;
}

.editor-area ul,
.editor-area ol {
    margin: 0 0 0.8rem;
    padding-left: 1.3rem;
}

.editor-area h2 {
    color: var(--colore-primario-testo);
    font-size: 1.05rem;
    margin: 1rem 0 0.6rem;
}

.editor-area table {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 0.8rem;
    font-size: 0.9rem;
}

.editor-area th,
.editor-area td {
    border: 1px solid var(--colore-bordo);
    padding: 0.4rem 0.6rem;
    text-align: left;
}

.editor-area th {
    background: var(--colore-sfondo);
}

.editor-area img {
    display: block;
    border-radius: 6px;
    margin: 0 0 0.8rem;
}

.editor-area .riquadro-attenzione,
.editor-area .riquadro-nota {
    padding: 0.7rem 0.9rem;
    border-radius: 6px;
    margin: 0 0 0.8rem;
    font-size: 0.9rem;
}

.editor-area .riquadro-attenzione {
    background: #fdecea;
    color: #1f2937;
    border-left: 4px solid var(--colore-errore);
}

.editor-area .riquadro-nota {
    background: #eaf2fd;
    color: #1f2937;
    border-left: 4px solid var(--colore-primario);
}

/* Interruttore "Visibile ai tuoi apprendisti" nell'archivio condiviso di
   lezioni e simulazioni (Amministrazione -> Gestisci Schede/Simulazioni) */
.modulo-interruttore-abilitazione {
    display: inline-block;
}

.interruttore-abilitazione {
    position: relative;
    width: 42px;
    height: 24px;
    padding: 0;
    border: 1px solid var(--colore-bordo);
    border-radius: 999px;
    background: var(--colore-sfondo);
    cursor: pointer;
    flex-shrink: 0;
}

.interruttore-abilitazione-pallino {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--colore-superficie);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    transition: transform 0.15s ease;
}

.interruttore-abilitazione-attivo {
    background: var(--colore-successo);
    border-color: var(--colore-successo);
}

.interruttore-abilitazione-attivo .interruttore-abilitazione-pallino {
    transform: translateX(18px);
    background: #ffffff;
}

/* Azioni a icona nelle tabelle di amministrazione */
.azioni-tabella {
    display: flex;
    gap: 0.4rem;
}

.btn-icona {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 6px;
    border: 1px solid var(--colore-bordo);
    background: var(--colore-superficie);
    color: var(--colore-testo-chiaro);
    font-size: 0.95rem;
    cursor: pointer;
    line-height: 1;
}

.btn-icona:hover {
    border-color: var(--colore-accento);
    color: var(--colore-accento);
}

.btn-icona-pericolo:hover {
    border-color: var(--colore-errore);
    color: var(--colore-errore);
}

.btn-icona-copiato {
    border-color: var(--colore-successo) !important;
    color: var(--colore-successo) !important;
}

.campo-link-invito {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.campo-link-invito input {
    flex: 1;
    font-family: monospace;
    font-size: 0.85rem;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--colore-bordo);
    border-radius: 6px;
    background: var(--colore-sfondo);
    color: var(--colore-testo);
}

.campo-link-invito .btn-icona {
    flex-shrink: 0;
}

/* Pannello laterale scorrevole (dettagli record) */
.pannello-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.35);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
    z-index: 40;
}

.pannello-overlay.aperto {
    opacity: 1;
    pointer-events: auto;
}

.pannello-laterale {
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    width: 380px;
    max-width: 90vw;
    background: var(--colore-superficie);
    box-shadow: -8px 0 24px rgba(15, 23, 42, 0.15);
    transform: translateX(100%);
    transition: transform 0.25s ease;
    z-index: 41;
    display: flex;
    flex-direction: column;
}

.pannello-laterale.aperto {
    transform: translateX(0);
}

.pannello-laterale-intestazione {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.2rem 1.4rem;
    border-bottom: 1px solid var(--colore-bordo);
}

.pannello-laterale-titolo {
    margin: 0;
    font-size: 1.1rem;
    color: var(--colore-primario-testo);
}

.pannello-laterale-chiudi {
    background: none;
    border: none;
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
    color: var(--colore-testo-chiaro);
    padding: 0.2rem;
}

.pannello-laterale-chiudi:hover {
    color: var(--colore-errore);
}

.pannello-laterale-corpo {
    padding: 1.2rem 1.4rem;
    overflow-y: auto;
    flex: 1;
}

.pannello-laterale-corpo dl {
    margin: 0;
}

.pannello-dettaglio-riga {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.6rem 0;
    border-bottom: 1px solid var(--colore-bordo);
    font-size: 0.9rem;
}

.pannello-dettaglio-riga dt {
    color: var(--colore-testo-chiaro);
}

.pannello-dettaglio-riga dd {
    margin: 0;
    font-weight: 600;
    text-align: right;
}

.pannello-laterale-azioni {
    display: flex;
    gap: 0.6rem;
    padding: 1.2rem 1.4rem;
    border-top: 1px solid var(--colore-bordo);
}

.pulsante-pericolo {
    background: var(--colore-errore);
}

.pulsante-pericolo:hover {
    background: #b83a3a;
}

.pannello-zona-pericolosa {
    border: 1px solid rgba(214, 69, 69, 0.35);
}

.pannello-zona-pericolosa h2 {
    color: var(--colore-errore);
}

/* Finestra di conferma personalizzata (es. eliminazione account), con lo
   stesso stile "in vetro" del resto del sito al posto del confirm()
   nativo del browser. */
.sovrapposizione-conferma {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.2rem;
    z-index: 60;
}

.sovrapposizione-conferma[hidden] {
    display: none;
}

.finestra-conferma {
    max-width: 420px;
    width: 100%;
}

/* Ricerca rapida flottante (in basso a destra): trova lezioni e simulazioni
   per titolo o categoria senza dover scorrere gli elenchi. */
.ricerca-fluttuante {
    position: fixed;
    right: 1.3rem;
    bottom: 1.3rem;
    z-index: 55;
}

.ricerca-fluttuante-bottone {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.2rem;
    height: 3.2rem;
    border-radius: 50%;
    border: none;
    background: var(--colore-primario);
    color: #fff;
    font-size: 1.4rem;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.3);
    transition: transform 0.15s ease, background 0.15s ease;
}

.ricerca-fluttuante-bottone:hover {
    background: var(--colore-primario-chiaro);
    transform: scale(1.05);
}

.ricerca-fluttuante-pannello {
    position: absolute;
    right: 0;
    bottom: 3.9rem;
    width: 360px;
    max-width: calc(100vw - 2.6rem);
    max-height: min(28rem, 70vh);
    background: var(--colore-superficie);
    border: 1px solid var(--colore-bordo);
    border-radius: var(--raggio);
    box-shadow: 0 8px 28px rgba(15, 23, 42, 0.25);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.ricerca-fluttuante-pannello[hidden] {
    display: none;
}

.ricerca-fluttuante-intestazione {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.9rem 1rem;
    border-bottom: 1px solid var(--colore-bordo);
}

.ricerca-fluttuante-intestazione h2 {
    margin: 0;
    font-size: 1rem;
    color: var(--colore-primario-testo);
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.ricerca-fluttuante-campo {
    margin: 0.8rem 1rem 0;
    width: auto;
    padding: 0.55rem 0.8rem;
    border: 1px solid var(--colore-bordo);
    border-radius: 6px;
    background: var(--colore-sfondo);
    color: var(--colore-testo);
    font-size: 0.95rem;
}

.ricerca-fluttuante-risultati {
    padding: 0.6rem 0.5rem 0.9rem;
    overflow-y: auto;
    flex: 1;
}

.ricerca-fluttuante-suggerimento,
.ricerca-fluttuante-vuoto {
    color: var(--colore-testo-chiaro);
    font-size: 0.88rem;
    padding: 0.6rem 0.6rem;
    margin: 0;
}

.ricerca-fluttuante-risultato {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.55rem 0.7rem;
    border-radius: 8px;
    text-decoration: none;
    color: var(--colore-testo);
}

.ricerca-fluttuante-risultato:hover,
.ricerca-fluttuante-risultato:focus {
    background: var(--colore-sfondo);
}

.ricerca-fluttuante-risultato-titolo {
    font-weight: 600;
    font-size: 0.92rem;
}

.ricerca-fluttuante-risultato-meta {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.78rem;
    color: var(--colore-testo-chiaro);
}

.ricerca-fluttuante-tipo {
    display: inline-flex;
    align-items: center;
    font-weight: 600;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    white-space: nowrap;
}

.ricerca-fluttuante-tipo-lezione {
    background: #e0ecff;
    color: #1d4ed8;
}

.ricerca-fluttuante-tipo-simulazione {
    background: #ffe8d9;
    color: #c2410c;
}

@media (max-width: 480px) {
    .ricerca-fluttuante {
        right: 1rem;
        bottom: 1rem;
    }

    .ricerca-fluttuante-pannello {
        width: calc(100vw - 2rem);
    }
}

.finestra-conferma h2 {
    margin-top: 0;
    color: var(--colore-errore);
}

.finestra-conferma-azioni {
    display: flex;
    justify-content: flex-end;
    gap: 0.7rem;
    margin-top: 1.3rem;
    flex-wrap: wrap;
}

.finestra-conferma-azioni form {
    display: contents;
}

/* Sfondo sfumato "in vetro", riutilizzato dalle scene principali del sito
   (panoramica di Amministrazione, dashboard di benvenuto): tre macchie di
   colore del marchio molto tenui su cui poggiano i pannelli semi-
   trasparenti. */
.sfondo-vetro {
    position: relative;
    border-radius: 20px;
    padding: 1.5rem;
    background:
        radial-gradient(circle at 12% 15%, rgba(231, 111, 81, .16), transparent 45%),
        radial-gradient(circle at 88% 12%, rgba(29, 53, 87, .18), transparent 50%),
        radial-gradient(circle at 60% 100%, rgba(127, 168, 222, .14), transparent 55%),
        var(--colore-sfondo);
}

:root[data-tema="scuro"] .sfondo-vetro {
    background:
        radial-gradient(circle at 12% 15%, rgba(231, 111, 81, .12), transparent 45%),
        radial-gradient(circle at 88% 12%, rgba(127, 168, 222, .14), transparent 50%),
        radial-gradient(circle at 60% 100%, rgba(127, 168, 222, .08), transparent 55%),
        var(--colore-sfondo);
}

/* Panoramica dell'amministrazione: un pannello a fuoco singolo (la
   copertura del piano, l'indicatore più importante) con statistiche
   satellite attorno. Sostituisce la vecchia griglia di card tutte uguali. */
.scena-panoramica {
    display: grid;
    grid-template-columns: 1.15fr 1fr 1fr 1fr;
    grid-template-rows: auto auto;
    gap: 1.1rem;
    margin: 1.5rem 0;
}

.pannello-vetro {
    position: relative;
    background: var(--colore-vetro-sfondo);
    backdrop-filter: blur(22px) saturate(180%);
    -webkit-backdrop-filter: blur(22px) saturate(180%);
    border: 1px solid var(--colore-vetro-bordo);
    border-radius: 18px;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .5),
        inset 0 0 0 1px rgba(255, 255, 255, .04),
        0 10px 30px rgba(29, 53, 87, .12);
    padding: 1.1rem 1.3rem;
    overflow: hidden;
}

/* Riflesso sottile in alto, per dare al vetro l'aspetto di una superficie
   reale illuminata da sopra invece di un semplice riquadro trasparente. */
.pannello-vetro::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(255, 255, 255, .30), rgba(255, 255, 255, 0) 45%);
    pointer-events: none;
}

:root[data-tema="scuro"] .pannello-vetro {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .08),
        inset 0 0 0 1px rgba(255, 255, 255, .03),
        0 10px 30px rgba(0, 0, 0, .3);
}

:root[data-tema="scuro"] .pannello-vetro::before {
    background: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, 0) 45%);
}

.pannello-vetro > * {
    position: relative;
}

.pannello-vetro-fuoco {
    grid-row: 1 / 3;
    grid-column: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .9rem;
    text-align: center;
}

.pannello-vetro-satellite {
    grid-row: 1;
}

.pannello-vetro-largo {
    grid-row: 2;
    grid-column: 2 / 5;
}

.fuoco-etichetta {
    margin: 0;
    font-size: .85rem;
    color: var(--colore-testo-chiaro);
    line-height: 1.3;
}

.satellite-numero {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--colore-primario-testo);
    line-height: 1.1;
}

.satellite-etichetta {
    font-size: .82rem;
    color: var(--colore-testo-chiaro);
    margin: .2rem 0 0;
}

/* Dashboard di benvenuto: stesso linguaggio "in vetro" della panoramica
   di Amministrazione, applicato alle card di navigazione. */
.scena-benvenuto h1 {
    margin-top: 0;
}

.griglia-nav-vetro {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 1.1rem;
    margin-top: 1.3rem;
}

/* Pannelli della dashboard: valutazioni da completare + riepilogo apprendisti */
.griglia-pannelli-dashboard {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.1rem;
}

.pannello-dashboard-lista h2 {
    font-size: 1rem;
    margin: 0 0 .8rem;
    display: flex;
    align-items: center;
    gap: .5rem;
}

.link-vedi-tutto {
    margin-left: auto;
    font-size: .75rem;
    font-weight: 600;
    color: var(--colore-accento);
    white-space: nowrap;
}

/* Riquadro di progresso dell'apprendista in dashboard: link diretto
   all'attestato, sempre sui colori del marchio come il certificato. */
.riepilogo-progresso {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 1rem;
    padding: 1rem 1.2rem;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--colore-primario), var(--colore-primario-chiaro));
    color: #fff;
}

.riepilogo-progresso-numero {
    font-size: 1.5rem;
    font-weight: 800;
    margin-right: .6rem;
}

.riepilogo-progresso-testo {
    font-size: .82rem;
    color: rgba(255, 255, 255, .8);
}

.riepilogo-progresso-link {
    flex-shrink: 0;
    font-size: .78rem;
    font-weight: 700;
    background: rgba(255, 255, 255, .18);
    padding: .5rem .8rem;
    border-radius: 10px;
    white-space: nowrap;
}

@media (max-width: 560px) {
    .riepilogo-progresso {
        flex-direction: column;
        align-items: flex-start;
    }
}

.pannello-dashboard-lista .elenco-lezioni {
    max-height: 320px;
    overflow-y: auto;
}

.elenco-apprendisti-riepilogo {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 320px;
    overflow-y: auto;
}

.elenco-apprendisti-riepilogo li {
    margin-bottom: .5rem;
}

.elenco-apprendisti-riepilogo a {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .55rem .7rem;
    border-radius: 12px;
    color: inherit;
}

.elenco-apprendisti-riepilogo a:hover {
    background: var(--colore-sfondo);
}

.apprendista-riepilogo-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: .3rem;
}

.apprendista-riepilogo-nome {
    font-size: .86rem;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.apprendista-riepilogo-barra {
    display: block;
    height: 5px;
    border-radius: 99px;
    background: var(--colore-bordo);
    overflow: hidden;
}

.apprendista-riepilogo-barra span {
    display: block;
    height: 100%;
    background: var(--colore-accento);
}

.apprendista-riepilogo-conteggio {
    flex-shrink: 0;
    font-size: .78rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--colore-testo-chiaro);
}

.pannello-nav-vetro {
    display: block;
    color: inherit;
    text-decoration: none;
    transition: transform .15s ease, box-shadow .15s ease;
}

.pannello-nav-vetro:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 32px rgba(29, 53, 87, .16);
}

.pannello-nav-vetro h2 {
    margin: .6rem 0 .4rem;
    font-size: 1.1rem;
    color: var(--colore-primario-testo);
}

.pannello-nav-vetro p {
    margin: 0;
    color: var(--colore-testo-chiaro);
    font-size: .9rem;
}

.pannello-nav-vetro-admin {
    border-left: 4px solid var(--colore-accento);
}

@media (max-width: 760px) {
    .scena-panoramica {
        grid-template-columns: 1fr 1fr;
    }

    .pannello-vetro-fuoco {
        grid-row: auto;
        grid-column: 1 / 3;
    }

    .pannello-vetro-satellite {
        grid-row: auto;
    }

    .pannello-vetro-largo {
        grid-row: auto;
        grid-column: 1 / 3;
    }
}

.grafico-donut {
    position: relative;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: conic-gradient(var(--colore-accento) calc(var(--valore) * 1%), var(--colore-bordo) 0);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0.8rem auto 0;
}

.grafico-donut-grande {
    width: 150px;
    height: 150px;
    margin: 0;
    box-shadow: 0 12px 26px rgba(29, 53, 87, .18);
}

.grafico-donut-grande::before {
    inset: 18px;
}

.grafico-donut-grande .grafico-donut-testo {
    font-size: 1.6rem;
}

.grafico-donut::before {
    content: '';
    position: absolute;
    inset: 14px;
    border-radius: 50%;
    background: var(--colore-superficie);
}

.grafico-donut-testo {
    position: relative;
    z-index: 1;
    font-weight: 700;
    font-size: 1.3rem;
    color: var(--colore-primario-testo);
}

.grafico-barre {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 1.1rem;
    height: 130px;
    margin-top: 0.8rem;
}

.grafico-barre-colonna {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 0.4rem;
    height: 100%;
}

.grafico-barre-valore {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--colore-primario-testo);
}

.grafico-barra {
    width: 30px;
    background: var(--colore-primario);
    border-radius: 6px 6px 0 0;
    min-height: 3px;
}

.grafico-barre-etichetta {
    font-size: 0.75rem;
    color: var(--colore-testo-chiaro);
}

/* Gioco Memory */
.tabellone-memory {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.75rem;
    margin-top: 1.25rem;
}

.carta-memory {
    position: relative;
    aspect-ratio: 1;
    border: none;
    border-radius: var(--raggio);
    background: var(--colore-primario);
    cursor: pointer;
    font-size: 1.6rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.carta-memory .fronte-carta {
    display: none;
}

.carta-memory.carta-girata .retro-carta,
.carta-memory.carta-trovata .retro-carta {
    display: none;
}

.carta-memory.carta-girata .fronte-carta,
.carta-memory.carta-trovata .fronte-carta {
    display: block;
}

.carta-memory.carta-girata {
    background: var(--colore-superficie);
    color: var(--colore-testo);
    border: 2px solid var(--colore-accento);
}

.carta-memory.carta-trovata {
    background: #e8f7ee;
    color: #1f2937;
    border: 2px solid var(--colore-successo);
    cursor: default;
}

.retro-carta {
    color: #d9e2ec;
    font-weight: 700;
}

.messaggio-vittoria {
    margin-top: 1rem;
    font-weight: 600;
    color: var(--colore-successo);
    font-size: 1.1rem;
}

/* Pannelli comuni ai giochi */
.pannello-gioco {
    background: var(--colore-superficie);
    border: 1px solid var(--colore-bordo);
    border-radius: var(--raggio);
    padding: 1.4rem 1.6rem;
    margin-top: 1.25rem;
}

.pannello-gioco label {
    margin-top: 0;
}

.messaggio-click {
    margin-top: 1rem;
    font-weight: 600;
    min-height: 1.4em;
}

.messaggio-click.messaggio-corretto {
    color: var(--colore-successo);
}

.messaggio-click.messaggio-errato {
    color: var(--colore-errore);
}

/* Gioco: Trova il Pericolo */
.barra-gioco {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
    font-size: 0.95rem;
    margin-bottom: 1.1rem;
    color: var(--colore-testo-chiaro);
}

.griglia-pericoli {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 0.75rem;
}

.tessera-pericolo {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    text-align: center;
    background: var(--colore-sfondo);
    border: 1px solid var(--colore-bordo);
    border-radius: 10px;
    padding: 1rem 0.75rem;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.85rem;
    color: var(--colore-testo);
}

.tessera-pericolo:hover {
    border-color: var(--colore-accento);
}

.tessera-icona {
    font-size: 1.8rem;
}

.tessera-pericolo.tessera-trovata {
    background: #e8f7ee;
    color: #1f2937;
    border-color: var(--colore-successo);
}

.tessera-pericolo.tessera-errata {
    background: #fdecea;
    color: #1f2937;
    border-color: var(--colore-errore);
}

.tessera-pericolo.tessera-bloccata {
    cursor: default;
}

/* Gioco: Ordina la Procedura */
.elenco-ordinabile {
    list-style: none;
    margin: 1rem 0;
    padding: 0;
}

.passo-ordinabile {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    background: var(--colore-sfondo);
    border: 1px solid var(--colore-bordo);
    border-radius: 8px;
    padding: 0.7rem 1rem;
    margin-bottom: 0.5rem;
}

.passo-numero {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.7rem;
    height: 1.7rem;
    border-radius: 50%;
    background: var(--colore-primario);
    color: #fff;
    font-weight: 700;
    font-size: 0.85rem;
    flex-shrink: 0;
}

.passo-testo {
    flex: 1;
}

.passo-controlli {
    display: flex;
    gap: 0.3rem;
}

.passo-freccia {
    background: var(--colore-superficie);
    color: var(--colore-testo);
    border: 1px solid var(--colore-bordo);
    border-radius: 6px;
    width: 2rem;
    height: 2rem;
    cursor: pointer;
    font-size: 0.9rem;
}

.passo-freccia:hover {
    border-color: var(--colore-accento);
}

.passo-ordinabile.passo-corretto {
    border-color: var(--colore-successo);
    background: #e8f7ee;
    color: #1f2937;
}

.passo-ordinabile.passo-errato {
    border-color: var(--colore-errore);
    background: #fdecea;
    color: #1f2937;
}

/* Gioco: Cosa Faresti Se... */
.scenario-avanzamento {
    color: var(--colore-testo-chiaro);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: 0 0 0.3rem;
}

.scenario-opzioni {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin: 1rem 0;
}

.scenario-opzione {
    text-align: left;
    background: var(--colore-sfondo);
    color: var(--colore-testo);
    border: 1px solid var(--colore-bordo);
    border-radius: 8px;
    padding: 0.7rem 1rem;
    font-size: 0.95rem;
    font-family: inherit;
    cursor: pointer;
}

.scenario-opzione:hover:not(:disabled) {
    border-color: var(--colore-accento);
}

.scenario-opzione:disabled {
    cursor: default;
    opacity: 0.7;
}

.scenario-opzione.scenario-opzione-corretta {
    border-color: var(--colore-successo);
    background: #e8f7ee;
    color: #1f2937;
    opacity: 1;
}

.scenario-opzione.scenario-opzione-errata {
    border-color: var(--colore-errore);
    background: #fdecea;
    color: #1f2937;
    opacity: 1;
}

/* Piede pagina */
.piede-pagina {
    text-align: center;
    color: var(--colore-testo-chiaro);
    font-size: 0.85rem;
    padding: 1.5rem;
}

/* Responsive */
@media (max-width: 800px) {
    .layout-lezione-completa {
        grid-template-columns: 1fr;
    }

    .indice-lezione {
        position: static;
    }
}

@media (max-width: 520px) {
    /* Il dock resta identico, solo più stretto: etichette più piccole e
       meno spazio tra le voci, per stare su schermi da telefono. */
    .dock {
        gap: 0;
        padding: 0.35rem;
    }

    .dock-link {
        width: 3.3rem;
        padding: 0.4rem 0.1rem 0.35rem;
    }

    .dock-etichetta {
        font-size: 0.6rem;
    }

    .intestazione-top {
        padding: 0.75rem 1rem;
    }
}

@media (max-width: 640px) {
    .tabellone-memory {
        grid-template-columns: repeat(3, 1fr);
    }
}