/* Stili dell'app shell — i token e i componenti vivono in _content/IoProf.Ui/ioprof.css */

.io-shell {
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
}

.io-main {
    flex: 1;
    width: min(100%, 640px);
    margin: 0 auto;
    padding: var(--io-space-4);
    box-sizing: border-box;
}

/* Sulle pagine con bottom nav, lascia spazio in fondo così la barra fissa
   (~56px + safe-area iPhone) non copre l'ultimo contenuto. */
.io-main--con-botnav {
    padding-bottom: calc(56px + env(safe-area-inset-bottom) + var(--io-space-4));
}

.io-oggi-header {
    margin: var(--io-space-2) 0 var(--io-space-6);
}

.io-oggi-header h1 {
    font-size: var(--io-text-xl);
    margin: 0;
}

.io-oggi-header p {
    color: var(--io-ink-soft);
    margin: var(--io-space-1) 0 0;
}

/* "mercoledì 10 giugno" → "Mercoledì 10 giugno": in italiano si alza solo la prima lettera */
.io-oggi-header p::first-letter {
    text-transform: uppercase;
}

.io-caricamento {
    text-align: center;
    color: var(--io-ink-soft);
    padding: var(--io-space-8);
}

.io-as-badge {
    display: inline-block;
    margin-left: var(--io-space-2);
    padding: 2px var(--io-space-2);
    border-radius: 999px;
    background: var(--io-brand-soft);
    color: var(--io-brand-strong);
    font-size: var(--io-text-sm);
    font-weight: 600;
}

.io-hint {
    color: var(--io-ink-soft);
    font-size: var(--io-text-sm);
    margin-top: 0;
}

.io-step-avanti {
    margin-top: var(--io-space-3);
}

/* Timeline agenda (Oggi / settimana) */
.io-timeline { display: flex; flex-direction: column; gap: var(--io-space-2); }
.io-item {
    display: flex;
    gap: var(--io-space-3);
    align-items: flex-start;
    padding: var(--io-space-3);
    border: 1px solid var(--io-border);
    border-radius: var(--io-radius);
    background: var(--io-surface);
}
/* Voce già trascorsa: opaca e meno in vista (resta leggibile e cliccabile) */
.io-item--passato { opacity: 0.55; }
.io-item__time {
    display: flex;
    flex-direction: column;
    min-width: 52px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.io-item__time span { color: var(--io-ink-soft); font-weight: 400; font-size: var(--io-text-sm); }
/* "tutto il giorno": un evento di scuola senza ora. Dicitura sobria al posto dell'orario,
   non un'ora finta. Più piccola e meno marcata dell'ora vera, così non compete con essa. */
.io-item__giornata {
    color: var(--io-ink-soft);
    font-weight: 600;
    font-size: var(--io-text-sm);
    line-height: 1.15;
}
.io-item__body { flex: 1; min-width: 0; }
.io-item__title { font-weight: 600; }
.io-item__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--io-space-2);
    margin-top: var(--io-space-1);
    font-size: var(--io-text-sm);
    color: var(--io-ink-soft);
}
.io-item__tipo {
    padding: 1px var(--io-space-2);
    border-radius: 999px;
    background: color-mix(in srgb, var(--tipo) 14%, transparent);
    color: var(--tipo);
    font-weight: 600;
}
.io-item__scuola { display: inline-flex; align-items: center; gap: var(--io-space-1); }
.io-item__conferma { display: flex; gap: var(--io-space-1); margin-top: var(--io-space-2); flex-wrap: wrap; }
.io-item__annulla {
    border: none; background: transparent; color: var(--io-ink-soft);
    font-family: inherit; font-size: var(--io-text-sm); font-weight: 600;
    min-height: var(--io-touch); padding: 0 var(--io-space-3); cursor: pointer;
}

.io-giorno-header {
    font-size: var(--io-text-base);
    font-weight: 700;
    margin: var(--io-space-6) 0 var(--io-space-2);
}
.io-giorno-header::first-letter { text-transform: uppercase; }
.io-giorno-header--oggi { color: var(--io-brand-strong); }

.io-sett-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--io-space-2);
    margin-bottom: var(--io-space-4);
}
.io-sett-nav__label { font-weight: 700; }
.io-sett-nav__label::first-letter { text-transform: uppercase; }

.io-azioni { display: flex; gap: var(--io-space-2); margin-top: var(--io-space-4); flex-wrap: wrap; }

/* Azioni rapide di Oggi: griglia 2×2 così i 4 pulsanti respirano e si leggono
   come scorciatoie, senza la colonna alta che rubava spazio alla giornata.
   I pulsanti riempiono la cella (text-align centrato dal componente). */
.io-azioni--griglia {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--io-space-2);
}
.io-azioni--griglia .io-button {
    width: 100%;
    padding-left: var(--io-space-3);
    padding-right: var(--io-space-3);
}

/* Riga di sintesi sotto l'header di Oggi: una frase breve col conto della giornata. */
.io-oggi-sintesi {
    margin-top: var(--io-space-2);
    color: var(--io-ink);
    font-weight: 600;
}

.io-ore-row { display: flex; gap: var(--io-space-3); }
.io-ore-row .io-field { flex: 1; }

/* Scadenziario (blocco 1.3) — pagina /scadenze e card "Scadenze in vista" */
.io-scad-gruppo {
    font-size: var(--io-text-base);
    font-weight: 700;
    margin: var(--io-space-6) 0 var(--io-space-2);
}
.io-scad-gruppo--scadute { color: var(--io-danger); }

.io-scad-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--io-space-2);
    margin-top: var(--io-space-1);
}
/* Il doppio selettore vince anche su .io-scad-mini__data (card di Oggi), che altrimenti la renderebbe grigia */
.io-scad-data--scaduta,
.io-scad-mini__data.io-scad-data--scaduta { color: var(--io-danger); font-weight: 600; }

/* Badge solo per priorità Alta: Media/Bassa niente rumore */
.io-scad-badge {
    padding: 1px var(--io-space-2);
    border-radius: 999px;
    background: color-mix(in srgb, var(--io-danger) 12%, transparent);
    color: var(--io-danger);
    font-size: var(--io-text-sm);
    font-weight: 600;
}

/* Etichetta del tipo di scadenza (verifica/consegna/riunione): colore dedicato */
.io-scad-tipo {
    padding: 1px var(--io-space-2);
    border-radius: 999px;
    font-size: var(--io-text-sm);
    font-weight: 600;
    background: color-mix(in srgb, var(--io-ink-soft) 12%, transparent);
    color: var(--io-ink-soft);
}
.io-scad-tipo--verifica {
    background: color-mix(in srgb, var(--io-brand) 12%, transparent);
    color: var(--io-brand-strong, var(--io-brand));
}
.io-scad-tipo--consegna {
    background: color-mix(in srgb, var(--io-success) 14%, transparent);
    color: var(--io-success);
}
.io-scad-tipo--riunione {
    background: color-mix(in srgb, var(--io-coral) 16%, transparent);
    color: var(--io-coral);
}

/* Istruzioni "Aggiungi a Home" per il push su iPhone */
.io-notif-ios {
    margin: var(--io-space-2) 0 var(--io-space-3);
    padding-left: 1.3em;
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: var(--io-text-sm);
    color: var(--io-ink-soft);
}
.io-notif-ios b { color: var(--io-ink); }

/* Convocazioni: selezione classi a chip cliccabili */
.io-conv-classi {
    display: flex;
    flex-wrap: wrap;
    gap: var(--io-space-2);
}
.io-conv-classe {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 13px;
    border-radius: 999px;
    border: 1.5px solid var(--io-border);
    background: var(--io-surface);
    font-size: var(--io-text-sm);
    font-weight: 600;
    cursor: pointer;
    user-select: none;
}
.io-conv-classe input { accent-color: var(--io-brand); }
.io-conv-classe--on {
    border-color: var(--io-brand);
    background: color-mix(in srgb, var(--io-brand) 10%, transparent);
    color: var(--io-brand-strong, var(--io-brand));
}

/* Scadenza segnata fatta: resta visibile barrata, l'undo è "Riapri" */
.io-scad-item--fatta .io-list-item__title {
    text-decoration: line-through;
    color: var(--io-ink-soft);
}

.io-scad-azioni {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--io-space-1);
    margin-top: var(--io-space-1);
}
.io-scad-azioni .io-list-item__action { margin-left: auto; }
.io-scad-azione {
    border: none;
    background: transparent;
    color: var(--io-brand-text);
    font-family: inherit;
    font-size: var(--io-text-sm);
    font-weight: 600;
    min-height: var(--io-touch);
    padding: 0 var(--io-space-3);
    cursor: pointer;
    border-radius: var(--io-radius);
}
.io-scad-azione:focus-visible { outline: 3px solid var(--io-brand); outline-offset: 2px; }

/* Voce scuola del superadmin: 3 azioni (Nomina admin / Abilita IA / Sospendi) che NON
   stanno accanto al nome su mobile. Impilo titolo e azioni in colonna, così il nome usa
   tutta la larghezza e i bottoni vanno sotto in una riga che va a capo. */
.io-sa-item {
    flex-direction: column;
    align-items: stretch;
    gap: var(--io-space-2);
}
.io-sa-item .io-scad-azioni { margin-top: 0; }

.io-scad-posticipa {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--io-space-2);
    margin-top: var(--io-space-2);
}
.io-scad-posticipa input[type="date"] {
    min-height: var(--io-touch);
    padding: 0 var(--io-space-3);
    border: 1.5px solid var(--io-border);
    border-radius: var(--io-radius);
    background: var(--io-surface);
    color: var(--io-ink);
    font-family: inherit;
    font-size: var(--io-text-base);
}
.io-scad-posticipa input[type="date"]:focus {
    outline: 2px solid var(--io-brand);
    border-color: var(--io-brand);
}

.io-scad-toggle {
    display: flex;
    align-items: center;
    gap: var(--io-space-2);
    width: fit-content;
    min-height: var(--io-touch);
    margin-top: var(--io-space-4);
    cursor: pointer;
}
.io-scad-toggle input[type="checkbox"] {
    width: 22px;
    height: 22px;
    accent-color: var(--io-brand);
}
.io-scad-toggle input[type="checkbox"]:focus-visible {
    outline: 3px solid var(--io-brand);
    outline-offset: 2px;
}

/* Note nel form nuova scadenza (la textarea non è stilata dalla Ui library) */
.io-scad-textarea {
    min-height: 88px;
    padding: var(--io-space-2) var(--io-space-3);
    border: 1.5px solid var(--io-border);
    border-radius: var(--io-radius);
    background: var(--io-surface);
    color: var(--io-ink);
    font-family: inherit;
    font-size: var(--io-text-base);
    resize: vertical;
}
.io-scad-textarea:focus { outline: 2px solid var(--io-brand); border-color: var(--io-brand); }

/* Card "Scadenze in vista" su Oggi */
.io-scad-card { margin-top: var(--io-space-4); }
.io-scad-card__titolo {
    font-size: var(--io-text-base);
    font-weight: 700;
    margin: 0 0 var(--io-space-2);
}
.io-scad-card__lista { display: flex; flex-direction: column; }
.io-scad-mini {
    display: flex;
    align-items: baseline;
    gap: var(--io-space-3);
    padding: var(--io-space-1) 0;
}
.io-scad-mini__data {
    min-width: 58px;
    font-size: var(--io-text-sm);
    font-weight: 600;
    color: var(--io-ink-soft);
    font-variant-numeric: tabular-nums;
}
/* Regola di stile: prima lettera maiuscola sulle date (per "12 giu" è un no-op, vale per "oggi") */
.io-scad-mini__data::first-letter { text-transform: uppercase; }
.io-scad-mini__titolo { font-weight: 600; min-width: 0; }
.io-scad-card__link {
    display: inline-flex;
    align-items: center;
    min-height: var(--io-touch);
    margin-top: var(--io-space-1);
    font-size: var(--io-text-sm);
    font-weight: 600;
    color: var(--io-brand-text);
}

/* Notifiche (blocco 1.4) — pagina /notifiche e banner promemoria su Oggi */
.io-notif-card { margin-top: var(--io-space-4); }

.io-notif-titolo {
    font-size: var(--io-text-base);
    font-weight: 700;
    margin: 0 0 var(--io-space-2);
}

.io-notif-stato {
    font-weight: 600;
    margin: 0 0 var(--io-space-1);
}
.io-notif-stato--ok { color: var(--io-success); }

/* L'ora del riepilogo sta sotto al toggle, non serve il margine pieno dei form */
.io-notif-ora {
    margin: var(--io-space-3) 0 0;
    max-width: 200px;
}

/* Errore dentro le card notifiche: vive accanto al bottone, non in cima alla pagina */
.io-notif-errore {
    margin: 0 0 var(--io-space-3);
}

.io-notif-salvato {
    color: var(--io-success);
    font-size: var(--io-text-sm);
    font-weight: 600;
    margin: var(--io-space-2) 0 0;
}

.io-notif-nota {
    margin-top: var(--io-space-4);
    text-align: center;
}

/* Banner "Attiva i promemoria" su Oggi */
.io-notif-banner { margin-top: var(--io-space-4); }

.io-notif-banner__titolo {
    font-size: var(--io-text-base);
    font-weight: 700;
    margin: 0 0 var(--io-space-1);
}

.io-notif-banner__azioni {
    display: flex;
    gap: var(--io-space-2);
    flex-wrap: wrap;
}

/* Classi (blocco 1.5) — pagine /classi e /classi/{id} */
.io-cl-card { margin-top: var(--io-space-4); }

/* Avviso "classe della scuola": tono calmo e informativo (brand soft), non un errore.
   Rassicura che la sola lettura su studenti/misure è voluta. */
.io-cl-gestita-avviso {
    display: flex;
    gap: var(--io-space-2);
    align-items: flex-start;
    margin-top: var(--io-space-3);
    padding: var(--io-space-3) var(--io-space-4);
    border-radius: var(--io-radius);
    background: var(--io-brand-soft);
    border: 1px solid var(--io-border);
    color: var(--io-ink);
    font-size: var(--io-text-sm);
    line-height: 1.45;
}
.io-cl-gestita-avviso__icona { font-size: 1.25rem; line-height: 1; flex-shrink: 0; }

/* Nota calma in fondo a /classi per il gestito: spiega perché non c'è "Nuova classe". */
.io-cl-gestita-nota {
    margin: var(--io-space-4) 0 0;
    padding: var(--io-space-3) var(--io-space-4);
    border-radius: var(--io-radius);
    background: var(--io-brand-soft);
    border: 1px solid var(--io-border);
    color: var(--io-ink-soft);
    font-size: var(--io-text-sm);
    line-height: 1.45;
}

.io-cl-titolo {
    font-size: var(--io-text-base);
    font-weight: 700;
    margin: 0 0 var(--io-space-2);
}

.io-cl-sottotitolo {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--io-space-2);
}

/* Voce della lista classi: tutta la zona del nome è il link, l'elimina resta a destra */
.io-cl-item { align-items: center; }
.io-cl-item__link {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--io-space-1);
    color: inherit;
    text-decoration: none;
}
.io-cl-item__nome {
    font-size: var(--io-text-lg);
    font-weight: 700;
}
.io-cl-item__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--io-space-2);
    font-size: var(--io-text-sm);
    color: var(--io-ink-soft);
}
.io-cl-coord { margin-left: var(--io-space-1); }

/* Indicatore discreto "misure attive": informa senza gridare */
.io-cl-misure-pill {
    padding: 1px var(--io-space-2);
    border-radius: 999px;
    background: var(--io-brand-soft);
    color: var(--io-brand-strong);
    font-size: var(--io-text-sm);
    font-weight: 600;
}

/* Lista studenti nel dettaglio classe */
.io-cl-studenti {
    display: flex;
    flex-direction: column;
    margin-bottom: var(--io-space-2);
}
.io-cl-studente { border-bottom: 1px solid var(--io-border); }
.io-cl-studente:last-child { border-bottom: none; }
.io-cl-studente__riga {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--io-space-1);
}
/* Il nome è un bottone (tap = note inline) ma deve sembrare testo */
.io-cl-studente__nome {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: var(--io-space-1);
    min-height: var(--io-touch);
    border: none;
    background: transparent;
    color: var(--io-ink);
    font-family: inherit;
    font-size: var(--io-text-base);
    font-weight: 600;
    text-align: left;
    padding: 0;
    cursor: pointer;
}
.io-cl-studente__nome:focus-visible { outline: 3px solid var(--io-brand); outline-offset: 2px; }
.io-cl-studente__freccia { color: var(--io-ink-soft); font-size: var(--io-text-sm); }
.io-cl-ritirato {
    padding: 1px var(--io-space-2);
    border-radius: 999px;
    background: color-mix(in srgb, var(--io-ink-soft) 14%, transparent);
    color: var(--io-ink-soft);
    font-size: var(--io-text-sm);
    font-weight: 600;
}

.io-cl-rinomina,
.io-cl-aggiungi {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--io-space-2);
    padding: var(--io-space-1) 0;
}
.io-cl-rinomina input,
.io-cl-aggiungi input {
    flex: 1;
    min-width: 160px;
    min-height: var(--io-touch);
    padding: 0 var(--io-space-3);
    border: 1.5px solid var(--io-border);
    border-radius: var(--io-radius);
    background: var(--io-surface);
    color: var(--io-ink);
    font-family: inherit;
    font-size: var(--io-text-base);
}
.io-cl-rinomina input:focus,
.io-cl-aggiungi input:focus { outline: 2px solid var(--io-brand); border-color: var(--io-brand); }
.io-cl-aggiungi { margin-top: var(--io-space-2); }

/* Note (studente, classe, coordinamento): blocco compatto data + categoria + testo */
.io-cl-note {
    padding: 0 0 var(--io-space-3) var(--io-space-4);
}
.io-cl-nota { padding: var(--io-space-2) 0; }
.io-cl-nota__testa {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--io-space-2);
}
.io-cl-nota__data {
    font-size: var(--io-text-sm);
    font-weight: 600;
    color: var(--io-ink-soft);
    font-variant-numeric: tabular-nums;
}
.io-cl-nota__studente { font-size: var(--io-text-sm); font-weight: 600; }
.io-cl-nota__testo { margin: var(--io-space-1) 0 0; }
.io-cl-nota--chiusa .io-cl-nota__testo {
    color: var(--io-ink-soft);
}

/* Categoria della nota: colore + parola, mai solo colore */
.io-cl-cat {
    padding: 1px var(--io-space-2);
    border-radius: 999px;
    font-size: var(--io-text-sm);
    font-weight: 600;
    background: color-mix(in srgb, var(--io-ink-soft) 12%, transparent);
    color: var(--io-ink-soft);
}
.io-cl-cat--positiva {
    background: color-mix(in srgb, var(--io-success) 12%, transparent);
    color: var(--io-success);
}
.io-cl-cat--negativa {
    background: color-mix(in srgb, var(--io-danger) 12%, transparent);
    color: var(--io-danger);
}
.io-cl-cat--colloquio {
    background: var(--io-brand-soft);
    color: var(--io-brand-strong);
}
.io-cl-chiusa {
    font-size: var(--io-text-sm);
    font-weight: 600;
    color: var(--io-success);
}

/* Form rapido nota studente: select + testo + bottone sulla stessa riga (se ci sta) */
.io-cl-nota-form {
    display: flex;
    flex-wrap: wrap;
    gap: var(--io-space-2);
    margin-top: var(--io-space-2);
}
.io-cl-nota-form .io-select { flex: 0 1 auto; width: auto; }
.io-cl-nota-form input {
    flex: 1;
    min-width: 160px;
    min-height: var(--io-touch);
    padding: 0 var(--io-space-3);
    border: 1.5px solid var(--io-border);
    border-radius: var(--io-radius);
    background: var(--io-surface);
    color: var(--io-ink);
    font-family: inherit;
    font-size: var(--io-text-base);
}
.io-cl-nota-form input:focus { outline: 2px solid var(--io-brand); border-color: var(--io-brand); }

/* Import incolla-elenco */
.io-cl-import { margin-top: var(--io-space-3); }
.io-cl-import__titolo {
    font-size: var(--io-text-base);
    font-weight: 700;
    margin: 0 0 var(--io-space-1);
}
.io-cl-import__testo { min-height: 140px; }
.io-cl-anteprima {
    display: flex;
    flex-direction: column;
    gap: var(--io-space-1);
    margin-top: var(--io-space-2);
}
.io-cl-anteprima__riga {
    display: flex;
    align-items: center;
    gap: var(--io-space-2);
}
.io-cl-anteprima__riga input {
    flex: 1;
    min-width: 0;
    min-height: var(--io-touch);
    padding: 0 var(--io-space-3);
    border: 1.5px solid var(--io-border);
    border-radius: var(--io-radius);
    background: var(--io-surface);
    color: var(--io-ink);
    font-family: inherit;
    font-size: var(--io-text-base);
}
.io-cl-anteprima__riga input:focus { outline: 2px solid var(--io-brand); border-color: var(--io-brand); }

/* Righe scartate dall'anteprima: informative, non allarmanti */
.io-cl-scartate {
    margin-top: var(--io-space-3);
    padding: var(--io-space-2) var(--io-space-3);
    border-radius: var(--io-radius);
    background: color-mix(in srgb, var(--io-ink-soft) 8%, transparent);
}
.io-cl-scartate__titolo {
    margin: 0 0 var(--io-space-1);
    font-size: var(--io-text-sm);
    font-weight: 600;
    color: var(--io-ink-soft);
}
.io-cl-scartate__riga {
    margin: 0;
    font-size: var(--io-text-sm);
    color: var(--io-ink-soft);
    overflow-wrap: anywhere;
}

/* Misure per le verifiche */
.io-cl-misure-lista {
    display: flex;
    flex-direction: column;
    margin-bottom: var(--io-space-3);
}
.io-cl-misura { margin-top: 0; }
.io-cl-num { max-width: 220px; }
.io-cl-num input {
    max-width: 110px;
}

/* Avviso privacy sulla nota misure: visibile ma sereno (niente rosso) */
.io-cl-avviso {
    margin: var(--io-space-1) 0 0;
    font-size: var(--io-text-sm);
    color: var(--io-ink-soft);
}
.io-cl-avviso::before { content: "🛈 "; }

.io-cl-salvato {
    color: var(--io-success);
    font-size: var(--io-text-sm);
    font-weight: 600;
    margin: var(--io-space-2) 0 0;
}
.io-cl-salvato a { color: var(--io-brand-text); font-weight: 600; }

/* Coordinatore + kit scadenze */
.io-cl-coord-toggle { margin-top: 0; }
.io-cl-kit {
    margin-top: var(--io-space-3);
    padding-top: var(--io-space-3);
    border-top: 1px solid var(--io-border);
}
.io-cl-kit__intro { margin: 0 0 var(--io-space-2); }
.io-cl-kit__riga {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--io-space-2);
    padding: var(--io-space-1) 0;
}
.io-cl-kit__check { margin-top: 0; flex: 1; min-width: 200px; }
.io-cl-kit__riga input[type="date"] {
    min-height: var(--io-touch);
    padding: 0 var(--io-space-3);
    border: 1.5px solid var(--io-border);
    border-radius: var(--io-radius);
    background: var(--io-surface);
    color: var(--io-ink);
    font-family: inherit;
    font-size: var(--io-text-base);
}
.io-cl-kit__riga input[type="date"]:focus { outline: 2px solid var(--io-brand); border-color: var(--io-brand); }

/* Pagine di autenticazione */
.io-auth {
    width: min(100%, 420px);
    margin: 0 auto;
    padding-top: clamp(16px, 8vh, 80px);
}

/* Marchio (brand kit) sopra il wordmark nelle pagine di accesso */
.io-auth__mark {
    display: block;
    margin: 0 auto var(--io-space-3);
}
.io-logo-tile {
    display: inline-block;
    line-height: 0;
    border-radius: 22.5%;
    box-shadow: 0 6px 18px rgb(46 107 240 / 28%);
}
/* Il marchio del login è block (margin:auto lo centra sopra il lockup "Ioprof"):
   serve più specificità di .io-logo-tile, altrimenti l'inline-block lo lascia a sinistra. */
.io-logo-tile.io-auth__mark {
    display: block;
    margin: 0 auto var(--io-space-3);
}

/* Lockup "Io prof" (brand kit): Io netto (Manrope) + prof a mano (Caveat) + filetto corallo */
.io-wordmark { display: inline-flex; align-items: flex-end; gap: 3px; line-height: 1; vertical-align: middle; }
.io-wordmark__io { font-family: var(--io-font); font-weight: 800; font-size: var(--iw, 28px); letter-spacing: -0.045em; color: var(--io-ink); line-height: 1; }
.io-wordmark__pf { display: inline-flex; flex-direction: column; align-items: flex-start; }
.io-wordmark__w { font-family: "Caveat", cursive; font-weight: 700; font-size: calc(var(--iw, 28px) * 1.12); color: var(--io-brand); line-height: 0.78; padding: 0 6px 0 2px; }
.io-wordmark__r { height: 2.5px; background: var(--io-coral); border-radius: 3px; width: 100%; margin-top: 2px; }

.io-auth__logo {
    text-align: center;
    font-size: var(--io-text-xl);
    color: var(--io-brand);
    margin: 0;
}

.io-auth__claim {
    text-align: center;
    color: var(--io-ink-soft);
    margin: var(--io-space-1) 0 var(--io-space-6);
}

.io-auth h2 {
    margin-top: 0;
    font-size: var(--io-text-lg);
}

.io-auth .io-error {
    margin-bottom: var(--io-space-4);
}

.io-auth__submit {
    width: 100%;
}

.io-auth__alt {
    text-align: center;
    font-size: var(--io-text-sm);
    color: var(--io-ink-soft);
}

.io-auth__alt a {
    color: var(--io-brand-text);
    font-weight: 600;
    /* Anche i link "di servizio" devono essere toccabili col pollice (≥44px) */
    display: inline-flex;
    align-items: center;
    min-height: var(--io-touch);
    padding: 0 var(--io-space-1);
}

/* Scelta a due vie in registrazione (autonomo | scuola), target docenti 40–60 */
.io-scelta {
    border: none;
    padding: 0;
    margin: var(--io-space-4) 0 var(--io-space-2);
    display: flex;
    flex-direction: column;
    gap: var(--io-space-2);
}

.io-scelta__legenda {
    padding: 0;
    margin-bottom: var(--io-space-1);
    font-weight: 600;
    color: var(--io-ink);
}

.io-scelta__opzione {
    display: flex;
    align-items: flex-start;
    gap: var(--io-space-3);
    padding: var(--io-space-3);
    border: 1px solid var(--io-border);
    border-radius: var(--io-radius);
    background: var(--io-surface);
    cursor: pointer;
    min-height: var(--io-touch);
}

.io-scelta__opzione--attiva {
    border-color: var(--io-brand);
    background: var(--io-brand-soft);
}

.io-scelta__opzione input {
    margin-top: 3px;
    width: 20px;
    height: 20px;
    flex: none;
    accent-color: var(--io-brand);
}

.io-scelta__corpo { display: flex; flex-direction: column; gap: 2px; }
.io-scelta__titolo { font-weight: 600; color: var(--io-ink); }
.io-scelta__desc { font-size: var(--io-text-sm); color: var(--io-ink-soft); }

/* Sezione "La tua scuola" in Altro (aderisci/esci) */
.io-altro-scuola__stato {
    margin: 0 0 var(--io-space-3);
    color: var(--io-ink);
}

/* Misure in sola lettura (classe gestita) */
.io-cl-misure-lettura {
    margin: var(--io-space-2) 0;
    padding-left: var(--io-space-6);
    color: var(--io-ink);
}

.io-cl-misure-lettura li { margin-bottom: var(--io-space-1); }

/* Indicatore di avvio Blazor */
.loading-progress {
    position: relative;
    display: block;
    width: 8rem;
    height: 8rem;
    margin: 30vh auto 1rem auto;
}

.loading-progress circle {
    fill: none;
    stroke: var(--io-border, #e2e6ef);
    stroke-width: 0.6rem;
    transform-origin: 50% 50%;
    transform: rotate(-90deg);
}

.loading-progress circle:last-child {
    stroke: var(--io-brand, #2f6df6);
    stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
    transition: stroke-dasharray 0.05s ease-in-out;
}

.loading-progress-text {
    position: absolute;
    text-align: center;
    font-weight: bold;
    inset: calc(20vh + 3.25rem) 0 auto 0.2rem;
}

.loading-progress-text:after {
    content: var(--blazor-load-percentage-text, "Carico…");
}

#blazor-error-ui {
    background: #fff3cd;
    color: #664d03;
    bottom: 0;
    box-shadow: 0 -1px 4px rgb(0 0 0 / 15%);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

/* ——— Verifiche (blocco 1.6) — pagine /verifiche, /verifiche/nuova, /verifiche/{id} ——— */

/* Voce della lista verifiche: tutta la zona del titolo è il link, l'elimina resta a destra */
.io-ver-item { align-items: center; }
.io-ver-item .io-list-item__body {
    display: flex;
    align-items: center;
    gap: var(--io-space-2);
}
.io-ver-item__link {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--io-space-1);
    color: inherit;
    text-decoration: none;
}
.io-ver-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--io-space-2);
}
.io-ver-meta .io-list-item__subtitle::first-letter { text-transform: uppercase; }

/* Indicatore misure: discreto e brand, informa senza gridare */
.io-ver-misure {
    padding: 1px var(--io-space-2);
    border-radius: 999px;
    background: var(--io-brand-soft);
    color: var(--io-brand-strong);
    font-size: var(--io-text-sm);
    font-weight: 600;
}

/* Form nuova verifica */
.io-ver-recupero,
.io-ver-ora { margin-top: var(--io-space-4); }
.io-ver-ora input[type="time"] { max-width: 160px; }
.io-ver-ora-link {
    display: inline-flex;
    margin: var(--io-space-1) 0 var(--io-space-4);
    padding-left: 0;
}

/* Box misure sotto la classe scelta nel form: informativo, tinta brand serena */
.io-ver-misure-box {
    display: flex;
    gap: var(--io-space-3);
    align-items: flex-start;
    margin-bottom: var(--io-space-4);
    padding: var(--io-space-3) var(--io-space-4);
    border-radius: var(--io-radius);
    background: var(--io-brand-soft);
    border: 1px solid color-mix(in srgb, var(--io-brand-strong) 22%, transparent);
}
.io-ver-misure-box__icon { font-size: var(--io-text-lg); line-height: 1.2; }
.io-ver-misure-box__titolo {
    margin: 0;
    font-weight: 700;
    color: var(--io-brand-strong);
}
.io-ver-misure-box__lista {
    margin: var(--io-space-1) 0 0;
    color: var(--io-ink);
}

/* Dettaglio verifica — riepilogo come lista definizioni */
.io-ver-riepilogo { margin: 0; }
.io-ver-riepilogo__riga {
    display: flex;
    gap: var(--io-space-3);
    padding: var(--io-space-2) 0;
    border-bottom: 1px solid var(--io-border);
}
.io-ver-riepilogo__riga:last-child { border-bottom: none; }
.io-ver-riepilogo dt {
    flex: 0 0 96px;
    font-size: var(--io-text-sm);
    font-weight: 600;
    color: var(--io-ink-soft);
}
.io-ver-riepilogo dd { margin: 0; min-width: 0; }

.io-ver-elimina { margin-left: 0; }

/* ——— Alert misure (RDP-08-003) — la schermata-bandiera su Oggi + sezione dettaglio ———
   Autorevole ma sereno: tinta ambra calda, MAI rosso-emergenza. "Ci pensa lui." */
.io-alert-misure {
    margin-top: var(--io-space-4);
    background: color-mix(in srgb, var(--io-warning) 9%, var(--io-surface));
    border: 1px solid color-mix(in srgb, var(--io-warning) 35%, transparent);
}
/* Intestazione dell'alert su Oggi: ancora il blocco e lo rende scansionabile, come "Scadenze in vista".
   Tono caldo (warning-strong come testo), mai allarmante. */
.io-alert-misure__intestazione {
    font-size: var(--io-text-base);
    font-weight: 700;
    margin: 0 0 var(--io-space-3);
    color: var(--io-warning-strong);
}
.io-alert-misure__voce {
    display: flex;
    gap: var(--io-space-3);
    align-items: flex-start;
}
.io-alert-misure__voce + .io-alert-misure__voce { margin-top: var(--io-space-3); }
.io-alert-misure__icon { font-size: var(--io-text-lg); line-height: 1.2; }
.io-alert-misure__testo { margin: 0; color: var(--io-ink); }
.io-alert-misure__link {
    display: inline-flex;
    align-items: center;
    min-height: var(--io-touch);
    margin-top: var(--io-space-2);
    font-size: var(--io-text-sm);
    font-weight: 600;
    color: var(--io-brand-text);
}

/* Sezione alert nel dettaglio verifica: stessa famiglia, più strutturata */
.io-alert-misure__titolo {
    font-size: var(--io-text-base);
    font-weight: 700;
    margin: 0 0 var(--io-space-2);
}
.io-alert-misure__elenco {
    margin: 0;
    padding-left: var(--io-space-6);
}
.io-alert-misure__elenco li { margin: var(--io-space-1) 0; }
.io-alert-misure__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--io-space-3);
    margin: var(--io-space-2) 0 0;
    font-size: var(--io-text-sm);
    color: var(--io-ink-soft);
}
.io-alert-misure__nota { font-style: italic; }

/* ——— Briefing della verifica (funzione-bandiera) ———
   È la schermata che vende il prodotto: l'occhio coglie SUBITO ciò che richiede una scelta
   (le sovrapposizioni), poi cosa preparare (le misure, con i conteggi PDP/PEI aggregati).
   Tono autorevole ma sereno: superficie pulita, tinta brand calma, mai rosso-allarme. */
.io-brief {
    margin: var(--io-space-4) 0;
    padding: var(--io-space-4);
    border-radius: var(--io-radius-lg);
    background: var(--io-surface);
    border: 1px solid var(--io-border);
    box-shadow: var(--io-shadow);
}
/* Titolo caldo, in italiano piano (non l'etichetta amministrativa maiuscola): è un collega
   che ti dà un promemoria, non un'intestazione di modulo. */
.io-brief__titolo {
    margin: 0 0 var(--io-space-3);
    font-size: var(--io-text-base);
    font-weight: 700;
    color: var(--io-ink);
}
.io-brief__avvisi {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--io-space-2);
}
/* La sovrapposizione è ciò che conta di più: tinta ambra calda per l'occhio, senza allarme.
   È l'unico riquadro pieno del briefing, così l'occhio ci cade per primo. */
.io-brief__avviso--attenzione {
    display: flex;
    gap: var(--io-space-3);
    align-items: flex-start;
    padding: var(--io-space-3);
    border-radius: var(--io-radius);
    background: color-mix(in srgb, var(--io-warning) 12%, var(--io-surface));
    border: 1px solid color-mix(in srgb, var(--io-warning) 42%, transparent);
}
.io-brief__icona { font-size: var(--io-text-lg); line-height: 1.25; flex: 0 0 auto; }
/* Il testo dell'avviso usa l'ambra scura (token AA): autorevole ma non allarme. */
.io-brief__avviso--attenzione .io-brief__testo {
    margin: 0;
    color: var(--io-warning-strong);
    font-weight: 600;
    line-height: 1.4;
}

/* Sovrapposizione "di un collega" (classe gestita, consiglio): STESSO tono ambra — è un
   aiuto, non un rimprovero. La distinguo solo con un filo: icona 👥 (è il consiglio, non un
   tuo doppione) e una piccola etichetta "del consiglio" accanto al testo. Mai un nome,
   mai un colore d'allarme. */
.io-brief__consiglio-tag {
    display: inline-block;
    margin-left: var(--io-space-2);
    padding: 0.05em 0.5em;
    border-radius: 999px;
    background: color-mix(in srgb, var(--io-warning) 22%, var(--io-surface));
    border: 1px solid color-mix(in srgb, var(--io-warning) 42%, transparent);
    font-size: var(--io-text-sm);
    font-weight: 700;
    line-height: 1.5;
    color: var(--io-warning-strong);
    white-space: nowrap;
    vertical-align: baseline;
}

/* Avviso del recupero (Strato 4): "ci sono insufficienze recenti senza recupero". Tono SERIO
   ma non allarme: non chiede una scelta sul giorno come la sovrapposizione, suggerisce di
   programmare un recupero. Tinta rossa molto tenue + testo rosso AA, niente nomi. */
.io-brief__avviso--recupero {
    display: flex;
    gap: var(--io-space-3);
    align-items: flex-start;
    padding: var(--io-space-3);
    border-radius: var(--io-radius);
    background: color-mix(in srgb, var(--io-danger) 8%, var(--io-surface));
    border: 1px solid color-mix(in srgb, var(--io-danger) 32%, transparent);
}
.io-brief__avviso--recupero .io-brief__testo {
    margin: 0;
    color: var(--io-danger-strong);
    font-weight: 600;
    line-height: 1.4;
}

/* Stato sereno (nessuna misura, nessuna sovrapposizione): una conferma calda, non un box vuoto.
   È l'unico contenuto, quindi può prendersi spazio e il verde pieno. */
.io-brief--sereno { background: color-mix(in srgb, var(--io-success) 7%, var(--io-surface)); }
.io-brief__sereno {
    display: flex;
    gap: var(--io-space-2);
    align-items: center;
    margin: 0;
    color: var(--io-success);
    font-weight: 600;
    line-height: 1.4;
}
.io-brief__sereno-icona {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 1.5em;
    height: 1.5em;
    border-radius: 50%;
    background: color-mix(in srgb, var(--io-success) 18%, transparent);
    font-weight: 700;
}

/* Conferma "nessun'altra verifica" quando ci sono misure: NON è la notizia principale
   (lo sono le misure, sopra). Quindi sottovoce, in coda, senza pastiglia: una riga discreta. */
.io-brief__ok {
    display: flex;
    gap: var(--io-space-2);
    align-items: center;
    margin: var(--io-space-3) 0 0;
    font-size: var(--io-text-sm);
    color: var(--io-success);
    font-weight: 600;
}
.io-brief__ok-icona { flex: 0 0 auto; font-weight: 700; }

/* Micro-stato di caricamento: stessa pelle del riquadro, con uno spinner sobrio. */
.io-brief--carico { background: var(--io-surface-alt); }
.io-brief__carico {
    display: flex;
    gap: var(--io-space-2);
    align-items: center;
    margin: 0;
    color: var(--io-ink-soft);
    font-weight: 600;
}
.io-brief__carico-spin {
    flex: 0 0 auto;
    width: 1.1em;
    height: 1.1em;
    border-radius: 50%;
    border: 2px solid color-mix(in srgb, var(--io-ink-soft) 35%, transparent);
    border-top-color: var(--io-brand);
    animation: io-brief-spin 0.7s linear infinite;
}
@keyframes io-brief-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
    .io-brief__carico-spin { animation: none; border-top-color: var(--io-brand); }
}

/* Misure dettagliate: "ecco cosa preparare". Titolo con icona 📋, poi l'elenco.
   Il separatore divide le misure da ciò che sta SOPRA (l'avviso di sovrapposizione);
   se le misure seguono direttamente il titolo (nessun avviso), niente riga stray. */
.io-brief__misure {
    margin-top: var(--io-space-3);
    padding-top: var(--io-space-3);
    border-top: 1px solid var(--io-border);
}
.io-brief__titolo + .io-brief__misure {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}
.io-brief__misure-titolo {
    display: flex;
    align-items: center;
    gap: var(--io-space-2);
    margin: 0 0 var(--io-space-1);
    font-size: var(--io-text-sm);
    font-weight: 700;
    color: var(--io-ink-soft);
}
.io-brief__misure-lista { margin: 0; color: var(--io-ink); font-weight: 600; }

/* Conteggi PDP/PEI come chip: numero grande + etichetta. Palesemente AGGREGATI
   di classe (mai nomi né diagnosi — ADR-0004), e leggibili a colpo d'occhio. */
.io-brief__piani {
    display: flex;
    flex-wrap: wrap;
    gap: var(--io-space-2);
    margin-top: var(--io-space-2);
}
.io-brief__piano {
    display: inline-flex;
    align-items: baseline;
    gap: var(--io-space-1);
    padding: var(--io-space-1) var(--io-space-3);
    border-radius: 999px;
    background: var(--io-brand-soft);
    color: var(--io-brand-text);
}
.io-brief__piano-num { font-size: var(--io-text-lg); font-weight: 700; line-height: 1; }
.io-brief__piano-et { font-size: var(--io-text-sm); font-weight: 600; }
.io-brief__piani-nota {
    margin: var(--io-space-1) 0 0;
    font-size: var(--io-text-sm);
    color: var(--io-ink-soft);
}
.io-brief__misure-nota {
    margin: var(--io-space-2) 0 0;
    font-style: italic;
    color: var(--io-ink-soft);
}

/* PDP/PEI affiancati nel form misure: due campi stretti, vanno a capo su schermi piccoli. */
.io-cl-pdppei { display: flex; flex-wrap: wrap; gap: var(--io-space-3); }
.io-cl-pdppei .io-field { margin-bottom: var(--io-space-2); }

/* Didattica essenziale (blocco 1.7) — /insegnamenti, dettaglio e registrazione dalla lezione */

/* Lista insegnamenti */
.io-did-item .io-list-item__body { display: flex; align-items: center; gap: var(--io-space-2); }
.io-did-item__link {
    flex: 1;
    min-width: 0;
    text-decoration: none;
    color: inherit;
    display: block;
}
.io-did-item__link:hover .io-list-item__title { color: var(--io-brand-strong); }
.io-did-item__link:focus-visible { outline: 3px solid var(--io-brand); outline-offset: 2px; border-radius: var(--io-radius); }
.io-did-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--io-space-2);
    margin-top: var(--io-space-1);
}

/* Form aggiungi + storico (dettaglio insegnamento) */
.io-did-aggiungi { margin-top: var(--io-space-2); }
.io-did-data input[type="date"] {
    font-family: inherit;
    font-size: var(--io-text-base);
    padding: var(--io-space-2);
    border: 1px solid var(--io-border);
    border-radius: var(--io-radius);
    background: var(--io-surface);
    color: var(--io-ink);
    min-height: var(--io-touch);
}
.io-did-data input[type="date"]:focus { outline: 2px solid var(--io-brand); border-color: var(--io-brand); }

.io-did-storico { margin-top: var(--io-space-3); }
.io-did-storico .io-cl-nota + .io-cl-nota { border-top: 1px solid var(--io-border); }
.io-did-storico .io-cl-nota__testa { gap: var(--io-space-2); }
.io-did-storico .io-cl-nota__data::first-letter { text-transform: uppercase; }
.io-did-storico .io-list-item__action { margin-left: auto; }
.io-did-consegna { font-size: var(--io-text-sm); color: var(--io-ink-soft); font-weight: 600; }

/* Registrazione dalla lezione (riquadro inline su Oggi / settimana) */
.io-did-azione {
    border: 1px solid var(--io-brand);
    background: color-mix(in srgb, var(--io-brand) 8%, transparent);
    color: var(--io-brand-text);
    font-family: inherit;
    font-size: var(--io-text-sm);
    font-weight: 600;
    min-height: var(--io-touch);
    padding: 0 var(--io-space-3);
    margin-top: var(--io-space-2);
    cursor: pointer;
    border-radius: var(--io-radius);
}
.io-did-azione:focus-visible { outline: 3px solid var(--io-brand); outline-offset: 2px; }

.io-did-fatto {
    color: var(--io-success);
    font-size: var(--io-text-sm);
    font-weight: 600;
    margin: var(--io-space-2) 0 0;
}

.io-did-riquadro {
    margin-top: var(--io-space-2);
    padding: var(--io-space-3);
    border: 1px solid var(--io-border);
    border-radius: var(--io-radius);
    background: var(--io-surface-alt);
}
.io-did-riquadro .io-field:last-of-type { margin-bottom: var(--io-space-2); }
.io-did-riquadro input[type="date"] {
    font-family: inherit;
    font-size: var(--io-text-base);
    padding: var(--io-space-2);
    border: 1px solid var(--io-border);
    border-radius: var(--io-radius);
    background: var(--io-surface);
    color: var(--io-ink);
    min-height: var(--io-touch);
}
.io-did-riquadro input[type="date"]:focus { outline: 2px solid var(--io-brand); border-color: var(--io-brand); }
.io-did-riquadro__azioni { display: flex; align-items: center; gap: var(--io-space-2); flex-wrap: wrap; }

/* Menu "Altro" (blocco 1.8) — destinazioni secondarie raggruppate */
/* Ritmo compatto tra i gruppi: con 5 voci + account a 390×844 il logout
   deve restare sopra la piega (azione importante, sempre visibile). */
.io-altro-gruppo { margin-bottom: var(--io-space-4); }
.io-altro-gruppo__titolo {
    font-size: var(--io-text-sm);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--io-ink-soft);
    margin: 0 0 var(--io-space-2);
    padding-left: var(--io-space-1);
}
.io-altro-lista { display: flex; flex-direction: column; gap: var(--io-space-2); }
.io-altro-voce {
    display: flex;
    align-items: center;
    gap: var(--io-space-3);
    min-height: 56px;
    padding: var(--io-space-3);
    border: 1.5px solid var(--io-border);
    border-radius: var(--io-radius);
    background: var(--io-surface);
    color: inherit;
    text-decoration: none;
    transition: border-color 160ms ease, background-color 160ms ease;
}
.io-altro-voce:hover { border-color: var(--io-brand); background: var(--io-brand-soft); }
.io-altro-voce:focus-visible { outline: 3px solid var(--io-brand); outline-offset: 2px; }
.io-altro-voce__icona {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--io-radius);
    background: var(--io-surface-alt);
    font-size: var(--io-text-lg);
    line-height: 1;
}
.io-altro-voce__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.io-altro-voce__titolo { font-weight: 600; }
.io-altro-voce__descrizione { font-size: var(--io-text-sm); color: var(--io-ink-soft); }
.io-altro-voce__freccia {
    flex: 0 0 auto;
    font-size: var(--io-text-lg);
    color: var(--io-ink-soft);
    line-height: 1;
}

/* Account in fondo: chi sei + Esci */
.io-altro-account {
    display: flex;
    flex-direction: column;
    gap: var(--io-space-4);
    margin-top: var(--io-space-4);
}
.io-altro-account__chi { display: flex; align-items: center; gap: var(--io-space-3); }
.io-altro-account__avatar {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--io-brand-soft);
    color: var(--io-brand-strong);
    font-weight: 700;
}
.io-altro-account__body { min-width: 0; }
.io-altro-account__nome { font-weight: 600; }
.io-altro-account__email { font-size: var(--io-text-sm); color: var(--io-ink-soft); word-break: break-word; }
.io-altro-esci { width: 100%; }

@media (prefers-reduced-motion: reduce) {
    .io-altro-voce { transition: none; }
}

/* ——— Collegamento classe (blocco 1.9) ——— */

/* Chip "classe" sulle righe scadenza/impegno: discreto, distinto dal pallino-scuola.
   Usa il brand tenue per dire "appartiene a una classe" senza gridare. */
.io-classe-chip {
    display: inline-flex;
    align-items: center;
    padding: 1px var(--io-space-2);
    border-radius: 999px;
    background: var(--io-brand-soft);
    color: var(--io-brand-strong);
    font-size: var(--io-text-sm);
    font-weight: 600;
    white-space: nowrap;
}

/* Riga di filtro-classe: sotto le chip-scuola. Per non confonderla con le scuole
   (chip uguali!) la apro con un'etichetta "Classe" e rendo le sue chip più piccole
   e leggere: la scuola resta il filtro principale, la classe è il sotto-filtro. */
.io-class-filter {
    align-items: center;
    margin-top: var(--io-space-1);
    padding-top: var(--io-space-1);
}
.io-class-filter__etichetta {
    flex: 0 0 auto;
    font-size: var(--io-text-sm);
    font-weight: 700;
    color: var(--io-ink-soft);
    white-space: nowrap;
    /* non scorre con le chip: resta ancorata a sinistra come "intestazione di riga" */
    position: sticky;
    left: 0;
    background: var(--io-surface-alt);
    padding-right: var(--io-space-1);
    z-index: 1;
}
/* Chip del filtro-classe: più basse e con testo più piccolo delle chip-scuola,
   così la gerarchia si vede a colpo d'occhio anche senza leggere le etichette. */
.io-class-filter .io-chip {
    min-height: 34px;
    padding: 0 var(--io-space-3);
}

/* Riepilogo scadenze/impegni nella pagina classe */
.io-cl-riepilogo__voce {
    display: flex;
    align-items: baseline;
    gap: var(--io-space-3);
    color: inherit;
    text-decoration: none;
}
.io-cl-riepilogo__data {
    flex: 0 0 auto;
    min-width: 3.5rem;
    font-weight: 700;
    font-size: var(--io-text-sm);
    color: var(--io-brand-strong);
    font-variant-numeric: tabular-nums;
}
.io-cl-riepilogo__data::first-letter { text-transform: uppercase; }
.io-cl-riepilogo__corpo {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.io-cl-riepilogo__titolo { font-weight: 600; }
.io-cl-riepilogo__tipo { font-size: var(--io-text-sm); color: var(--io-ink-soft); }

/* ——— Densità lista classi raggruppata per scuola (blocco 1.9) ——— */

/* Intestazione di gruppo-scuola: leggera, con pallino colore della scuola */
.io-cl-gruppo {
    display: flex;
    align-items: center;
    gap: var(--io-space-2);
    margin: var(--io-space-5) 0 var(--io-space-2);
    font-size: var(--io-text-sm);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--io-ink-soft);
}
.io-cl-gruppo:first-of-type { margin-top: var(--io-space-2); }
.io-cl-gruppo__conta {
    margin-left: auto;
    padding: 0 var(--io-space-2);
    border-radius: 999px;
    background: var(--io-brand-soft);
    color: var(--io-brand-strong);
    font-size: var(--io-text-sm);
    font-weight: 700;
    letter-spacing: 0;
}

/* Lista classi compatta: un solo riquadro per gruppo-scuola, righe separate da un
   filo sottile. Così con molte classi si legge come UN elenco scansionabile, non
   come una pila di card (era il "muro" del collaudo). */
.io-cl-lista {
    gap: 0;
    border: 1.5px solid var(--io-border);
    border-radius: var(--io-radius);
    background: var(--io-surface);
    overflow: hidden;
}
/* Le righe perdono la cornice/ombra della card: dentro al riquadro di gruppo
   sono divise solo da una linea, e l'intera riga resta tappabile (≥44px). */
.io-cl-row {
    border: none;
    border-radius: 0;
    background: transparent;
    padding-top: var(--io-space-2);
    padding-bottom: var(--io-space-2);
}
.io-cl-row + .io-cl-row { border-top: 1px solid var(--io-border); }
.io-cl-row .io-cl-item__link { gap: 2px; }
.io-cl-row .io-cl-item__nome { font-size: var(--io-text-base); }
.io-cl-row .io-cl-item__meta {
    flex-wrap: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* Feedback al tocco/hover sulla riga: la zona-link si tinge appena, conferma
   che è cliccabile senza appesantire la lista. */
.io-cl-row .io-cl-item__link:hover .io-cl-item__nome { color: var(--io-brand-strong); }

/* Badge "della scuola": una classe gestita non si elimina (è dell'admin).
   Etichetta sobria e informativa, non un errore: dice solo da dove arriva la classe. */
.io-cl-item__gestita {
    flex-shrink: 0;
    align-self: center;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--io-brand-soft);
    color: var(--io-brand-text);
    font-size: var(--io-text-sm);
    font-weight: 600;
    white-space: nowrap;
}

/* ——————————————————————————————————————————————————————————————
   Area Admin (Fase B): /admin e sottopagine.
   Stessa identità visiva dell'app del docente, ma con un'intestazione
   "amministrativa" riconoscibile (eyebrow + filo brand) per dire chiaramente
   che è un'area diversa dalle pagine del docente.
   —————————————————————————————————————————————————————————————— */
.io-admin-header {
    border-left: 3px solid var(--io-brand);
    padding-left: var(--io-space-3);
}
.io-admin-eyebrow {
    display: block;
    font-size: var(--io-text-sm);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--io-brand-text);
    margin-bottom: 2px;
}
.io-admin-eyebrow a { color: inherit; text-decoration: none; }
.io-admin-eyebrow a:hover { text-decoration: underline; }

/* Conteggi della scuola: tre tessere compatte, le navigabili rispondono al tocco. */
.io-admin-conteggi {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--io-space-3);
    margin-top: var(--io-space-4);
}
.io-admin-conteggio {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: var(--io-space-4) var(--io-space-2);
    background: var(--io-surface);
    border: 1px solid var(--io-border);
    border-radius: var(--io-radius);
    box-shadow: var(--io-shadow);
    text-decoration: none;
    color: inherit;
}
a.io-admin-conteggio { transition: border-color 0.15s ease; }
a.io-admin-conteggio:hover { border-color: var(--io-brand); }
.io-admin-conteggio__num {
    font-size: var(--io-text-xl);
    font-weight: 700;
    color: var(--io-ink);
    line-height: 1;
}
.io-admin-conteggio__et {
    font-size: var(--io-text-sm);
    color: var(--io-ink-soft);
}

.io-admin-card { margin-top: var(--io-space-4); }
.io-admin-titolo {
    margin: 0 0 var(--io-space-2);
    font-size: var(--io-text-lg);
    font-weight: 700;
    color: var(--io-ink);
}

/* Codice d'invito: il valore in monospazio, ben leggibile e selezionabile. */
.io-admin-codice {
    display: flex;
    align-items: center;
    gap: var(--io-space-3);
    flex-wrap: wrap;
    margin-top: var(--io-space-3);
}
/* Rigenera in seconda battuta, allineato a destra sotto al codice. */
.io-admin-codice-azioni {
    display: flex;
    justify-content: flex-end;
    margin-top: var(--io-space-2);
}
.io-admin-codice__valore {
    flex: 1;
    min-width: 8ch;
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    font-size: var(--io-text-lg);
    font-weight: 700;
    letter-spacing: 0.12em;
    color: var(--io-ink);
    padding: var(--io-space-3) var(--io-space-4);
    background: var(--io-surface-alt);
    border: 1px dashed var(--io-border);
    border-radius: var(--io-radius);
    user-select: all;
}

.io-admin-scorciatoie { margin-top: var(--io-space-4); }

/* Nell'elenco classi admin la meta può andare a capo: l'indirizzo va letto per intero,
   non troncato (a differenza della lista classi del docente, più fitta). */
.io-admin-classe-row .io-cl-item__meta {
    flex-wrap: wrap;
    overflow: visible;
    white-space: normal;
    text-overflow: clip;
}

/* Docenti membri: righe in lista, eventuale azione a destra. */
.io-admin-docente .io-list-item__action { margin-left: auto; }
.io-admin-coord-toggle { margin-top: var(--io-space-2); }

/* Consiglio di classe: una riga per docente con le sue materie a chip. */
.io-admin-docente-classe {
    flex-direction: column;
    align-items: stretch;
    gap: var(--io-space-2);
}
.io-admin-docente-classe__intesta {
    display: flex;
    align-items: center;
    gap: var(--io-space-2);
    flex-wrap: wrap;
}
.io-admin-docente-classe__nome {
    font-weight: 700;
    color: var(--io-ink);
}
.io-admin-coord-badge {
    font-size: var(--io-text-sm);
    font-weight: 600;
    color: var(--io-brand-text);
    background: var(--io-brand-soft, var(--io-surface-alt));
    border-radius: 999px;
    padding: 2px var(--io-space-2);
    white-space: nowrap;
}
.io-admin-materie {
    display: flex;
    flex-wrap: wrap;
    gap: var(--io-space-2);
}
.io-admin-materia {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--io-text-sm);
    color: var(--io-ink);
    background: var(--io-surface-alt);
    border: 1px solid var(--io-border);
    border-radius: 999px;
    padding: 4px 6px 4px var(--io-space-3);
}
.io-admin-materia__x {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    min-height: 28px;
    border: none;
    background: transparent;
    color: var(--io-ink-soft);
    font-size: var(--io-text-sm);
    line-height: 1;
    border-radius: 999px;
    cursor: pointer;
}
.io-admin-materia__x:hover { color: var(--io-danger, #c0392b); }

/* Form "assegna docente" e "aggiungi docente": stacco netto dalla lista sopra. */
.io-admin-nuova-ass {
    margin-top: var(--io-space-4);
    padding-top: var(--io-space-4);
    border-top: 1px solid var(--io-border);
}
.io-admin-nuova-ass__titolo {
    margin: 0 0 var(--io-space-1);
    font-size: var(--io-text-base);
    font-weight: 700;
    color: var(--io-ink);
}

/* ——— Calendario scolastico (strato 2) ——— */

/* Marcatura in agenda: questo item viene DAL CALENDARIO DELLA SCUOLA, non lo ha messo
   il docente. È una PROVENIENZA ("da dove arriva"), non un tipo: perciò sta un gradino
   sotto la pillola-tipo (piena, colorata) e il chip-classe (pieno). Tag in ambra con
   contorno sottile e velo tenue: si legge come "ufficiale/della scuola" senza competere
   con la pillola-tipo accanto. Ambra = istituzionale; icona + etichetta = leggibile anche
   per i daltonici (colore + forma + parola). */
.io-cal-scuola {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 1px calc(var(--io-space-2) - 1px);
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--io-warning) 45%, transparent);
    background: color-mix(in srgb, var(--io-warning) 7%, transparent);
    color: var(--io-warning-strong);
    font-size: var(--io-text-sm);
    font-weight: 600;
    white-space: nowrap;
}
/* L'icona 🏫 è un glyph multicolore: la rendiamo monocroma in scala di grigi così non
   "accende" il tag e resta una marcatura sobria, coerente col tono ambra. */
.io-cal-scuola span[aria-hidden] {
    filter: grayscale(1);
    opacity: 0.85;
    font-size: 0.92em;
}

/* Form: data + ora affiancate dove c'è spazio, impilate su mobile stretto. */
.io-cal-righe {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--io-space-3);
}
@media (max-width: 360px) {
    .io-cal-righe { grid-template-columns: 1fr; }
}

/* Lista degli appuntamenti pubblicati. */
.io-cal-lista {
    display: flex;
    flex-direction: column;
    gap: var(--io-space-2);
    margin-top: var(--io-space-3);
}
.io-cal-voce {
    display: flex;
    align-items: center;
    gap: var(--io-space-3);
    padding: var(--io-space-2) 0;
    border-top: 1px solid var(--io-border);
}
.io-cal-voce:first-child { border-top: none; }

/* Tassello-data a sinistra: legge l'appuntamento "a colpo d'occhio" come un calendario. */
.io-cal-voce__data {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    padding: var(--io-space-1) var(--io-space-2);
    border-radius: var(--io-radius);
    background: var(--io-surface-alt);
    line-height: 1.1;
}
.io-cal-voce__giorno { font-size: var(--io-text-base); font-weight: 700; color: var(--io-ink); }
.io-cal-voce__mese {
    font-size: var(--io-text-sm, 0.72rem);
    font-weight: 600;
    text-transform: uppercase;
    color: var(--io-ink-soft);
}
.io-cal-voce__body { flex: 1; min-width: 0; }
.io-cal-voce__titolo { font-weight: 600; }
.io-cal-voce__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--io-space-2);
    margin-top: var(--io-space-1);
    font-size: var(--io-text-sm);
    color: var(--io-ink-soft);
}
.io-cal-voce__scuola { color: var(--io-ink-soft); }
.io-cal-voce .io-list-item__action { flex: 0 0 auto; margin-left: auto; }

/* ——— Educazione Civica (strato 3b): elenco raccolte, media unica, tabella contributi, form ——— */

/* Elenco delle raccolte: voce-link con titolo, stato e riga di meta (chi manca / media). */
.io-edciv-item {
    display: flex;
    align-items: center;
    gap: var(--io-space-2);
    color: inherit;
    text-decoration: none;
}
.io-edciv-item__corpo {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--io-space-1);
}
.io-edciv-item__testa {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--io-space-2);
}
.io-edciv-item__nome { font-weight: 600; }
.io-edciv-item__meta {
    font-size: var(--io-text-sm);
    color: var(--io-ink-soft);
}
.io-edciv-item__freccia {
    flex: 0 0 auto;
    color: var(--io-ink-soft);
    font-size: var(--io-text-lg);
}

/* Pillole di stato. */
.io-edciv-stato {
    flex: 0 0 auto;
    font-size: var(--io-text-sm);
    font-weight: 600;
    padding: 2px var(--io-space-2);
    border-radius: 999px;
    white-space: nowrap;
}
.io-edciv-stato--coord { background: var(--io-brand-soft); color: var(--io-brand-strong); }
.io-edciv-stato--aperta { background: var(--io-brand-soft); color: var(--io-brand-strong); }
.io-edciv-stato--chiusa { background: var(--io-surface-alt); color: var(--io-ink-soft); }

/* Media unica: il dato che il coordinatore deve cogliere a colpo d'occhio. */
.io-edciv-media {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--io-space-1);
    text-align: center;
}
.io-edciv-media__etichetta {
    font-size: var(--io-text-sm);
    color: var(--io-ink-soft);
}
.io-edciv-media__valore {
    font-size: clamp(2.4rem, 1.8rem + 3vw, 3.4rem);
    font-weight: 700;
    line-height: 1;
    color: var(--io-brand-strong);
}
.io-edciv-media__conta {
    font-size: var(--io-text-sm);
    color: var(--io-ink-soft);
}

/* Tabella dei contributi (griglia responsive: Docente | Materia | Ore | Voto). */
.io-edciv-tabella { display: flex; flex-direction: column; }
.io-edciv-tabella__intesta,
.io-edciv-tabella__riga {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.6fr) 48px 56px;
    gap: var(--io-space-2);
    align-items: start;
    padding: var(--io-space-3) 0;
}
.io-edciv-tabella__intesta {
    padding-top: 0;
    font-size: var(--io-text-sm);
    font-weight: 600;
    color: var(--io-ink-soft);
    border-bottom: 1px solid var(--io-border);
}
.io-edciv-tabella__riga + .io-edciv-tabella__riga,
.io-edciv-tabella__intesta + .io-edciv-tabella__riga {
    border-top: 1px solid var(--io-border);
}
.io-edciv-tabella__riga--manca { color: var(--io-ink-soft); }
.io-edciv-tabella__doc {
    display: flex;
    align-items: center;
    gap: var(--io-space-2);
    font-weight: 600;
    min-width: 0;
}
.io-edciv-tabella__segno {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 999px;
    font-size: var(--io-text-sm);
    font-weight: 700;
}
.io-edciv-tabella__segno--ok { background: color-mix(in srgb, var(--io-success) 18%, transparent); color: var(--io-success); }
.io-edciv-tabella__segno--no { background: var(--io-surface-alt); color: var(--io-ink-soft); }
.io-edciv-tabella__mat { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.io-edciv-tabella__materia { font-weight: 600; }
.io-edciv-tabella__argomento { font-size: var(--io-text-sm); color: var(--io-ink-soft); }
.io-edciv-tabella__num { text-align: right; font-variant-numeric: tabular-nums; }
.io-edciv-tabella__voto { font-weight: 700; }
.io-edciv-mancanti { margin-top: var(--io-space-3); }

/* Form del proprio contributo (vista membro). */
.io-edciv-form { border: 0; padding: 0; margin: 0; min-width: 0; }
.io-edciv-form[disabled] { opacity: 0.6; }
.io-edciv-numeri {
    display: flex;
    flex-wrap: wrap;
    gap: var(--io-space-4);
}
.io-edciv-numeri .io-cl-num { flex: 1 1 140px; max-width: none; }
.io-edciv-invia { margin-top: var(--io-space-4); }
.io-edciv-inviato {
    display: flex;
    align-items: center;
    gap: var(--io-space-2);
    padding: var(--io-space-3);
    margin-bottom: var(--io-space-4);
    border-radius: var(--io-radius);
    background: color-mix(in srgb, var(--io-success) 12%, transparent);
}
.io-edciv-inviato__segno {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 999px;
    background: var(--io-success);
    color: #fff;
    font-weight: 700;
}

/* ——— Brogliaccio voti (Strato 4 — quaderno voti personale del docente) ——— */

/* Link dal dettaglio classe: una "card-bottone" che porta al brogliaccio */
.io-cl-brogliaccio {
    display: flex;
    align-items: center;
    gap: var(--io-space-3);
    margin-bottom: var(--io-space-4);
    padding: var(--io-space-4);
    border: 1px solid var(--io-border);
    border-radius: var(--io-radius);
    background: var(--io-surface);
    box-shadow: var(--io-shadow);
    text-decoration: none;
    color: inherit;
    min-height: var(--io-touch);
}
.io-cl-brogliaccio:hover { border-color: color-mix(in srgb, var(--io-brand) 40%, var(--io-border)); }
.io-cl-brogliaccio__icona { font-size: 1.5rem; line-height: 1; }
.io-cl-brogliaccio__corpo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.io-cl-brogliaccio__titolo { font-weight: 700; color: var(--io-brand-text); }
.io-cl-brogliaccio__sub { font-size: var(--io-text-sm); color: var(--io-ink-soft); }
.io-cl-brogliaccio__freccia { font-size: 1.6rem; color: var(--io-ink-soft); line-height: 1; }

/* Nota "è privato": seria ma tranquilla, non un alert */
.io-voti-privato {
    display: flex;
    gap: var(--io-space-2);
    align-items: flex-start;
    margin-bottom: var(--io-space-4);
    padding: var(--io-space-3) var(--io-space-4);
    border-radius: var(--io-radius);
    background: var(--io-surface-alt);
    color: var(--io-ink-soft);
    font-size: var(--io-text-sm);
}
.io-voti-privato__icona { flex: 0 0 auto; }

/* Promemoria "voti da riportare sul registro" (RDP-06 F2). Tono informativo, mai allarme:
   stessa famiglia calda di .io-alert-misure, niente rosso. */
.io-registro-nudge {
    display: flex;
    align-items: center;
    gap: var(--io-space-3);
    flex-wrap: wrap;
    margin-bottom: var(--io-space-4);
    padding: var(--io-space-3) var(--io-space-4);
    border-radius: var(--io-radius);
    background: color-mix(in srgb, var(--io-warning) 9%, var(--io-surface));
    border: 1px solid color-mix(in srgb, var(--io-warning) 35%, transparent);
    color: var(--io-ink);
}
.io-registro-nudge__icona { flex: 0 0 auto; font-size: var(--io-text-lg); line-height: 1.2; }
.io-registro-nudge__testo { flex: 1 1 12ch; min-width: 0; font-size: var(--io-text-sm); }
.io-registro-nudge__fatto {
    flex: 0 0 auto;
    min-height: var(--io-touch);
    padding: 0 var(--io-space-4);
    border: none;
    border-radius: var(--io-radius);
    background: var(--io-warning-strong);
    color: #fff;
    font-family: inherit;
    font-size: var(--io-text-sm);
    font-weight: 700;
    cursor: pointer;
}
.io-registro-nudge__fatto:disabled { opacity: .6; cursor: default; }
.io-registro-fatto {
    margin: 0 0 var(--io-space-4);
    color: var(--io-success);
    font-size: var(--io-text-sm);
    font-weight: 600;
}

/* La card del promemoria su Oggi: calma come "Scadenze in vista". */
.io-registro-card { margin-top: var(--io-space-4); }
.io-registro-card__titolo {
    font-size: var(--io-text-base);
    font-weight: 700;
    margin: 0 0 var(--io-space-1);
}
.io-registro-card__lista { display: flex; flex-direction: column; margin-top: var(--io-space-2); }
.io-registro-mini {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--io-space-3);
    min-height: var(--io-touch);
    padding: var(--io-space-1) 0;
    color: var(--io-ink);
}
.io-registro-mini__classe { font-weight: 600; min-width: 0; }
.io-registro-mini__conta {
    flex: 0 0 auto;
    font-size: var(--io-text-sm);
    font-weight: 600;
    color: var(--io-warning-strong);
    font-variant-numeric: tabular-nums;
}

.io-voti-card { padding-top: var(--io-space-3); }
.io-voti-testa {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--io-space-3);
    flex-wrap: wrap;
}
.io-voti-legenda {
    display: inline-flex;
    align-items: center;
    gap: var(--io-space-2);
    font-size: var(--io-text-sm);
    color: var(--io-ink-soft);
}
.io-voti-legenda__chip { pointer-events: none; }

.io-voti-griglia { display: flex; flex-direction: column; gap: var(--io-space-2); margin-top: var(--io-space-3); }

.io-voti-riga {
    padding: var(--io-space-3);
    border: 1px solid var(--io-border);
    border-radius: var(--io-radius);
    background: var(--io-surface);
}
.io-voti-riga__testa {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--io-space-3);
}
.io-voti-riga__nome { font-weight: 600; }

/* Media: chip discreto a destra del nome; rosso solo se sotto il 6 */
.io-voti-media {
    display: inline-flex;
    align-items: baseline;
    gap: var(--io-space-1);
    font-variant-numeric: tabular-nums;
}
.io-voti-media__et { font-size: var(--io-text-sm); color: var(--io-ink-soft); }
.io-voti-media strong { font-size: var(--io-text-lg); }
.io-voti-media--bassa strong { color: var(--io-danger-strong); }

/* I chip dei voti: linea che scorre orizzontale (tante prove = scroll col pollice) */
.io-voti-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--io-space-2);
    margin-top: var(--io-space-2);
}
.io-voti-chip {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    min-height: var(--io-touch);
    min-width: var(--io-touch);
    padding: 0 var(--io-space-3);
    border: 1px solid var(--io-border);
    border-radius: 999px;
    background: var(--io-surface-alt);
    color: var(--io-ink);
    font-family: inherit;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
}
.io-voti-chip__val { font-size: var(--io-text-base); }
.io-voti-chip__tipo { font-size: var(--io-text-sm); font-weight: 600; color: var(--io-ink-soft); }
/* Insufficienza: rosso evidente ma non aggressivo (fondo tenue, testo e bordo AA) */
.io-voti-chip--bassa {
    background: color-mix(in srgb, var(--io-danger) 12%, transparent);
    border-color: color-mix(in srgb, var(--io-danger) 40%, transparent);
    color: var(--io-danger-strong);
}
.io-voti-chip--bassa .io-voti-chip__tipo { color: var(--io-danger-strong); }
.io-voti-chip--conferma {
    background: color-mix(in srgb, var(--io-danger) 16%, transparent);
    border-color: var(--io-danger);
    color: var(--io-danger-strong);
}
.io-voti-chip__conferma { font-size: var(--io-text-sm); }

.io-voti-elimina-barra {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--io-space-2);
    margin-top: var(--io-space-2);
    font-size: var(--io-text-sm);
    color: var(--io-ink-soft);
}
.io-voti-elimina-si { color: var(--io-danger); font-weight: 700; }

.io-voti-vuoto { margin: var(--io-space-2) 0 0; font-size: var(--io-text-sm); color: var(--io-ink-soft); }

/* "+ Voto a Nome": azione sobria per riga, comoda al pollice */
.io-voti-add-riga {
    margin-top: var(--io-space-2);
    border: none;
    background: transparent;
    color: var(--io-brand-text);
    font-family: inherit;
    font-size: var(--io-text-sm);
    font-weight: 600;
    min-height: var(--io-touch);
    padding: 0 var(--io-space-2) 0 0;
    cursor: pointer;
}

.io-voti-aggiungi-globale { margin-top: var(--io-space-4); }

/* ——— Form aggiungi / correzione veloce ——— */
.io-voti-form-card { margin-top: var(--io-space-4); }
.io-voti-form-testa {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--io-space-3);
}
.io-voti-form-pos {
    font-size: var(--io-text-sm);
    color: var(--io-ink-soft);
    font-variant-numeric: tabular-nums;
}
.io-voti-form-label { margin: var(--io-space-3) 0 var(--io-space-2); font-weight: 600; }
.io-voti-form-righe {
    display: flex;
    flex-wrap: wrap;
    gap: var(--io-space-3);
    margin-top: var(--io-space-3);
}
.io-voti-form-righe > * { flex: 1 1 140px; }
.io-voti-form-azioni { margin-top: var(--io-space-4); }

/* ——— Tastierino voti (IoGradeKeypad) ——— */
.io-voti-keypad {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: var(--io-space-2);
}
.io-voti-tasto {
    min-height: var(--io-touch);
    border: 1px solid var(--io-border);
    border-radius: var(--io-radius);
    background: var(--io-surface);
    color: var(--io-ink);
    font-family: inherit;
    font-size: var(--io-text-base);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
}
.io-voti-tasto--bassa { color: var(--io-danger-strong); }
.io-voti-tasto--sel {
    background: var(--io-brand);
    border-color: var(--io-brand);
    color: #fff;
}
.io-voti-tasto--sel.io-voti-tasto--bassa {
    background: var(--io-danger);
    border-color: var(--io-danger);
    color: #fff;
}

/* ═══════════════════════════════════════════════════════════════════════
   GUSCIO DESKTOP (≥1024px) — sidebar + topbar
   Sotto i 1024px non cambia nulla: main centrato a 640px + bottom nav.
   Sidebar e topbar sono nascoste di default e compaiono solo da desktop.
   ═══════════════════════════════════════════════════════════════════════ */
.io-shell__area { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.io-sidenav, .io-topbar { display: none; }

/* ── Sidebar ── */
.io-sidenav {
    flex-direction: column;
    width: var(--io-sidebar-w);
    flex-shrink: 0;
    background: var(--io-surface);
    border-right: 1px solid var(--io-border);
    padding: 24px 16px;
    position: sticky;
    top: 0;
    height: 100dvh;
}
.io-sidenav__brand { display: flex; align-items: center; gap: 11px; padding: 0 8px 28px; text-decoration: none; }
.io-sidenav__logo {
    width: 38px; height: 38px; border-radius: 11px;
    background: linear-gradient(135deg, var(--io-brand), var(--io-brand-strong));
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 10px rgb(47 109 246 / 30%);
}
.io-sidenav__nome { font-size: 20px; font-weight: 780; color: var(--io-ink); letter-spacing: -0.6px; }

.io-sidenav__nuovo-wrap { position: relative; margin-bottom: 22px; }
.io-sidenav__nuovo {
    width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px;
    min-height: var(--io-touch); padding: 12px 0; border: none; border-radius: 14px;
    background: var(--io-brand); color: #fff; font-family: inherit; font-size: 15px; font-weight: 680;
    cursor: pointer; box-shadow: 0 4px 12px rgb(47 109 246 / 28%);
    transition: background 150ms ease;
}
.io-sidenav__nuovo:hover { background: var(--io-brand-strong); }
.io-sidenav__nuovo-piu { font-size: 21px; font-weight: 400; line-height: 1; }
.io-sidenav__menu {
    position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 60;
    background: var(--io-surface); border: 1px solid var(--io-border); border-radius: 14px;
    box-shadow: var(--io-shadow); padding: 6px; display: flex; flex-direction: column;
}
.io-sidenav__menu-voce {
    text-align: left; padding: 11px 12px; border: none; background: transparent; border-radius: 10px;
    font-family: inherit; font-size: 14.5px; font-weight: 580; color: var(--io-ink); cursor: pointer;
}
.io-sidenav__menu-voce:hover { background: var(--io-brand-soft); color: var(--io-brand-text); }

.io-sidenav__nav { display: flex; flex-direction: column; gap: 4px; flex: 1; }
.io-sidenav__voce {
    display: flex; align-items: center; gap: 13px; padding: 11px 14px; border-radius: 12px;
    text-decoration: none; color: var(--io-ink); font-size: 15px; font-weight: 580;
    transition: background 150ms ease;
}
.io-sidenav__voce:hover { background: var(--io-surface-raised); }
.io-sidenav__voce--attiva { background: var(--io-brand-soft); color: var(--io-brand-text); font-weight: 700; }
.io-sidenav__icona { font-size: 19px; width: 24px; text-align: center; flex-shrink: 0; }

.io-sidenav__profilo {
    display: flex; align-items: center; gap: 11px; padding: 11px 10px; border-radius: 14px;
    background: var(--io-surface-raised); text-decoration: none; margin-top: 8px;
}
.io-sidenav__avatar {
    width: 38px; height: 38px; border-radius: 999px; flex-shrink: 0;
    background: var(--io-brand); color: #fff; font-size: 14px; font-weight: 640;
    display: flex; align-items: center; justify-content: center; letter-spacing: -0.2px;
}
.io-sidenav__profilo-testo { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.io-sidenav__profilo-nome { font-size: 14px; font-weight: 700; color: var(--io-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.io-sidenav__profilo-ruolo { font-size: 12px; font-weight: 540; color: var(--io-ink-faint); }
.io-sidenav__profilo-freccia { color: var(--io-ink-faint); font-size: 20px; line-height: 1; }

/* ── Topbar ── */
.io-topbar {
    align-items: center; gap: 16px; padding: 0 32px; height: var(--io-topbar-h);
    border-bottom: 1px solid var(--io-border);
    background: color-mix(in srgb, var(--io-surface) 72%, transparent);
    backdrop-filter: blur(12px);
    position: sticky; top: 0; z-index: 40;
}
.io-topbar__data { display: flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 999px; background: var(--io-surface); box-shadow: var(--io-shadow-soft); }
.io-topbar__sole { color: var(--io-warning); display: flex; }
.io-topbar__data-testo { font-size: 13.5px; font-weight: 620; color: var(--io-ink-soft); }
.io-topbar__sp { flex: 1; }
.io-topbar__campanella {
    width: 42px; height: 42px; border-radius: 999px; background: var(--io-surface); box-shadow: var(--io-shadow-soft);
    display: flex; align-items: center; justify-content: center; color: var(--io-ink); text-decoration: none;
}
.io-topbar__campanella:hover { background: var(--io-surface-raised); }

/* ── Attivazione desktop ── */
@media (min-width: 1024px) {
    .io-shell--app { flex-direction: row; }
    .io-shell--app .io-sidenav { display: flex; }
    .io-shell--app .io-topbar { display: flex; }
    .io-shell--app .io-botnav { display: none; }
    .io-shell--app .io-main {
        width: 100%;
        max-width: 880px;   /* colonna di lettura comoda per liste e form */
        margin: 0 auto;
        padding: 30px 32px 48px;
    }
    .io-shell--app .io-main--con-botnav { padding-bottom: 48px; }

    /* Le viste a griglia (dashboard, calendario settimanale, schede classi) usano più larghezza */
    .io-shell--app .io-main:has(.io-oggi),
    .io-shell--app .io-main:has(.io-cal-tg),
    .io-shell--app .io-main:has(.io-cl-griglia),
    .io-shell--app .io-main:has(.io-ver-griglia),
    .io-shell--app .io-main:has(.io-voti-griglia) {
        max-width: 1240px;
    }
}

/* ═══════════════════════ Calendario — griglia oraria settimanale (desktop) ═══════════
   Su mobile resta l'elenco per giorno (.io-cal-lista-mobile). Da 1024px compare la griglia
   oraria: 7 colonne, eventi posizionati per ora, riga del "adesso", sovrapposizioni
   affiancate. Sola lettura: le azioni restano sull'elenco/Oggi. --hpx = pixel per ora. */
.io-cal-tg { display: none; }
.io-cal-griglia-nota { display: none; }
@media (min-width: 1024px) {
    .io-cal-lista-mobile { display: none; }
    .io-cal-griglia-nota { display: block; color: var(--io-ink-faint); font-size: var(--io-text-sm); margin-top: var(--io-space-3); text-align: center; }

    .io-cal-tg {
        display: block;
        background: var(--io-surface);
        border: 1px solid var(--io-border);
        border-radius: var(--io-radius-lg);
        overflow: hidden;
        box-shadow: var(--io-shadow-soft);
    }
    /* Intestazione giorni (allineata al corpo: 56px di gutter + 7 colonne) */
    .io-cal-tg__testa { display: grid; grid-template-columns: 56px repeat(7, 1fr); border-bottom: 1px solid var(--io-border); }
    .io-cal-tg__gh { text-align: center; padding: 10px 5px; border-left: 1px solid var(--io-border); display: flex; flex-direction: column; align-items: center; gap: 1px; min-width: 0; }
    .io-cal-tg__gh--oggi { background: color-mix(in srgb, var(--io-brand) 5%, transparent); }
    .io-cal-tg__gh-gg { font-size: var(--io-text-sm); font-weight: 640; color: var(--io-ink-faint); text-transform: uppercase; letter-spacing: 0.3px; }
    .io-cal-tg__gh-n { font-size: 1.3rem; font-weight: 740; letter-spacing: -0.4px; }
    .io-cal-tg__gh--oggi .io-cal-tg__gh-gg,
    .io-cal-tg__gh--oggi .io-cal-tg__gh-n { color: var(--io-brand-text); }
    .io-cal-tg__allday { margin-top: 3px; max-width: 100%; font-size: 10.5px; font-weight: 640; line-height: 1.2;
        padding: 3px 9px; border: none; border-radius: 999px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
        cursor: pointer; font-family: inherit; transition: box-shadow 120ms ease;
        background: color-mix(in srgb, var(--ev) 16%, var(--io-surface)); color: var(--ev); }

    /* Corpo: gutter delle ore + 7 colonne, alte (oraFine-oraInizio)*hpx */
    .io-cal-tg__corpo { display: grid; grid-template-columns: 56px repeat(7, 1fr); }
    .io-cal-tg__gutter { position: relative; }
    .io-cal-tg__ora { height: var(--hpx); position: relative; }
    .io-cal-tg__ora span { position: absolute; top: -7px; right: 8px; font-size: 11px; font-weight: 600; color: var(--io-ink-faint); font-variant-numeric: tabular-nums; }
    .io-cal-tg__col { position: relative; border-left: 1px solid var(--io-border);
        background-image: repeating-linear-gradient(to bottom, var(--io-border) 0, var(--io-border) 1px, transparent 1px, transparent var(--hpx)); }
    .io-cal-tg__col--oggi { background-color: color-mix(in srgb, var(--io-brand) 3%, transparent); }
    .io-cal-tg__ora-ora { position: absolute; left: 0; right: 0; height: 2px; background: var(--io-danger); z-index: 4; }
    .io-cal-tg__ora-ora::before { content: ''; position: absolute; left: -3px; top: -3px; width: 8px; height: 8px; border-radius: 999px; background: var(--io-danger); }
    /* Evento posizionato e CLICCABILE: niente barretta laterale (ban impeccable), fondo tinto */
    .io-cal-tg__ev { position: absolute; z-index: 2; border: none; border-radius: 8px; padding: 3px 7px; overflow: hidden; box-sizing: border-box;
        display: flex; flex-direction: column; align-items: stretch; line-height: 1.18; text-align: left; cursor: pointer; font-family: inherit;
        background: color-mix(in srgb, var(--ev) 15%, var(--io-surface)); transition: box-shadow 120ms ease; }
    .io-cal-tg__ev:hover { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--ev) 55%, transparent); }
    .io-cal-tg__ev:focus-visible { outline: 2.5px solid var(--io-brand); outline-offset: 1px; z-index: 5; }
    .io-cal-tg__ev-ora { font-size: 10.5px; font-weight: 700; color: var(--ev); font-variant-numeric: tabular-nums; }
    .io-cal-tg__ev-tit { font-size: 12px; font-weight: 650; color: var(--io-ink); overflow: hidden; }
    .io-cal-tg__ev-cls { font-size: 10.5px; font-weight: 560; color: var(--io-ink-soft); }
    .io-cal-tg__allday:hover { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--ev) 55%, transparent); }
    .io-cal-tg__allday:focus-visible { outline: 2.5px solid var(--io-brand); outline-offset: 1px; }
    /* Eventi già trascorsi: opachi e meno in vista; tornano pieni al passaggio del mouse/focus */
    .io-cal-tg__ev--passato,
    .io-cal-tg__allday--passato { opacity: 0.45; }
    .io-cal-tg__ev--passato:hover,
    .io-cal-tg__ev--passato:focus-visible,
    .io-cal-tg__allday--passato:hover,
    .io-cal-tg__allday--passato:focus-visible { opacity: 1; }
}

/* Popover del Calendario: dettaglio + azioni di una voce cliccata nella griglia oraria.
   Riusa AgendaItemView, quindi le azioni sono identiche alla lista (elimina, registra). */
.io-cal-pop-overlay {
    position: fixed; inset: 0; z-index: 100;
    background: rgb(16 24 40 / 38%);
    display: flex; align-items: center; justify-content: center;
    padding: var(--io-space-4);
    animation: io-cal-pop-in 140ms ease-out;
}
.io-cal-pop {
    position: relative; width: min(100%, 440px);
    background: var(--io-surface); border-radius: var(--io-radius-lg);
    box-shadow: 0 20px 60px rgb(16 24 40 / 28%);
    padding: var(--io-space-6);
}
/* Dentro al popover la voce è già "incorniciata": tolgo bordo/sfondo della card interna */
.io-cal-pop .io-item { border: none; background: transparent; padding: 0; }
.io-cal-pop__chiudi {
    position: absolute; top: 10px; right: 10px;
    width: 34px; height: 34px; border-radius: 999px; border: none;
    background: var(--io-surface-raised); color: var(--io-ink-soft);
    font-size: 15px; cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.io-cal-pop__chiudi:hover { background: var(--io-border); color: var(--io-ink); }
@keyframes io-cal-pop-in { from { opacity: 0; transform: translateY(6px) scale(0.98); } to { opacity: 1; transform: none; } }

/* ═══════════════════════ Classi a schede (desktop) ═══════════════════════
   Su mobile resta l'elenco bordato (.io-cl-lista). Da 1024px diventa una griglia di schede. */
@media (min-width: 1024px) {
    .io-cl-griglia {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
        gap: var(--io-space-4);
        border: none;
        background: transparent;
        overflow: visible;
    }
    .io-cl-griglia .io-cl-row {
        border: 1px solid var(--io-border);
        border-radius: var(--io-radius);
        background: var(--io-surface);
        box-shadow: var(--io-shadow-soft);
        padding: 16px 18px;
        align-items: center;
    }
    .io-cl-griglia .io-cl-row + .io-cl-row { border-top: 1px solid var(--io-border); }
    .io-cl-griglia .io-cl-item__nome { font-size: var(--io-text-lg); }
    .io-cl-griglia .io-cl-item__meta { flex-wrap: wrap; white-space: normal; overflow: visible; }
    /* Il form "Nuova classe" non si stira a tutta la colonna larga: resta una scheda compatta */
    .io-cl-card { max-width: 560px; }
}

/* ═══════════════════════ Dashboard Oggi ═══════════════════════ */
.io-oggi { display: flex; flex-direction: column; gap: var(--io-space-4); }
.io-oggi__main, .io-oggi__side { display: flex; flex-direction: column; gap: var(--io-space-4); min-width: 0; }
.io-oggi-sezione { font-size: var(--io-text-lg); font-weight: 720; margin: var(--io-space-2) 0 0; letter-spacing: -0.3px; }

/* Hero "prossima cosa" — l'unica superficie a tinta piena, come centro calmo della giornata */
.io-oggi-hero {
    display: block; text-decoration: none; border-radius: var(--io-radius-lg); padding: 22px 24px;
    position: relative; overflow: hidden; color: #fff;
    background: linear-gradient(120deg, var(--io-brand), var(--io-brand-strong));
    box-shadow: 0 12px 30px rgb(47 109 246 / 26%);
}
.io-oggi-hero__eyebrow {
    display: flex; align-items: center; gap: 8px; font-size: var(--io-text-sm); font-weight: 700;
    letter-spacing: 0.3px; text-transform: uppercase; color: rgb(255 255 255 / 90%); margin-bottom: 14px;
}
.io-oggi-hero__dot { width: 8px; height: 8px; border-radius: 999px; background: #fff; box-shadow: 0 0 0 5px rgb(255 255 255 / 22%); flex-shrink: 0; }
.io-oggi-hero__titolo { font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2rem); font-weight: 770; letter-spacing: -0.6px; line-height: 1.15; }
.io-oggi-hero__sub { font-size: var(--io-text-base); font-weight: 560; color: rgb(255 255 255 / 88%); margin-top: 4px; }
.io-oggi-hero__meta { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 16px; }
.io-oggi-hero__meta span { font-size: var(--io-text-sm); font-weight: 620; color: rgb(255 255 255 / 92%); font-variant-numeric: tabular-nums; }
.io-oggi-hero:focus-visible { outline: 3px solid var(--io-brand); outline-offset: 3px; }

/* Su desktop la dashboard diventa a due colonne (giornata a sinistra, contorno a destra) */
@media (min-width: 1024px) {
    .io-oggi-header h1 { font-size: clamp(1.9rem, 1.4rem + 1.6vw, 2.4rem); letter-spacing: -1px; }
    .io-oggi { display: grid; grid-template-columns: 1.7fr 1fr; align-items: start; gap: var(--io-space-6); }
    .io-oggi__azioni { max-width: 560px; }
}

/* ═══════════════════════ Verifiche a schede (desktop) ═══════════════════════
   Su mobile resta l'elenco; da 1024px le verifiche diventano una griglia di schede. */
@media (min-width: 1024px) {
    .io-ver-griglia {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
        gap: var(--io-space-4);
    }
}

/* ═══════════════════════ Brogliaccio a schede (desktop) ═══════════════════════
   Su mobile resta l'elenco verticale degli studenti. Da 1024px il pannello esterno
   perde la cornice e le schede-studente si dispongono in una griglia auto-adattiva. */
@media (min-width: 1024px) {
    /* max-width:none annulla il cap di .io-cl-card (usato anche dal form Nuova classe) */
    .io-voti-card { border: none; background: transparent; box-shadow: none; padding: 0; max-width: none; }
    .io-voti-griglia {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
        gap: var(--io-space-4);
        align-items: start;
    }
    .io-voti-form-card { max-width: 560px; }
}

/* ═══════════════════════ Pianifica verifica: form + briefing affiancati (desktop) ═══════
   Su mobile una colonna sola: il briefing è inline nel form (.io-vn-brief-mobile) e la
   colonna laterale è nascosta. Da 1024px: form a sinistra, briefing live (sticky) a destra. */
.io-vn__side { display: none; }
@media (min-width: 1024px) {
    .io-shell--app .io-main:has(.io-vn) { max-width: 1080px; }
    .io-vn { display: flex; align-items: flex-start; gap: var(--io-space-6); }
    .io-vn__main { flex: 1 1 0; min-width: 0; }
    .io-vn__side {
        display: block; flex: 0 0 42%;
        position: sticky; top: calc(var(--io-topbar-h) + var(--io-space-4));
    }
    .io-vn-brief-mobile { display: none; }
}

/* ═══════════════════════ Prospetto scrutinio ═══════════════════════
   Riusa .io-voti-griglia (stack su mobile, schede su desktop) e i chip dei voti. */
.io-scrut-barra {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: var(--io-space-3); margin: var(--io-space-4) 0 var(--io-space-3);
}
.io-scrut-confine { display: flex; align-items: center; gap: var(--io-space-2); flex-wrap: wrap; }
.io-scrut-confine__testo { color: var(--io-ink-soft); font-size: var(--io-text-sm); }
.io-scrut-confine__edit { display: flex; align-items: flex-end; gap: var(--io-space-2); flex-wrap: wrap; }
.io-scrut-confine__azioni { display: flex; align-items: center; gap: var(--io-space-1); }

.io-scrut-card {
    padding: var(--io-space-4);
    border: 1px solid var(--io-border);
    border-radius: var(--io-radius);
    background: var(--io-surface);
    display: flex; flex-direction: column; gap: var(--io-space-2);
}
.io-scrut-testa { display: flex; align-items: baseline; justify-content: space-between; gap: var(--io-space-3); }
.io-scrut-nome { font-weight: 700; font-size: var(--io-text-lg); }
.io-scrut-nd { font-size: var(--io-text-sm); color: var(--io-ink-faint); }

.io-scrut-anno { display: flex; align-items: baseline; gap: var(--io-space-2); font-variant-numeric: tabular-nums; }
.io-scrut-anno__et { font-size: var(--io-text-sm); color: var(--io-ink-soft); }
.io-scrut-anno strong { font-size: var(--io-text-base); font-weight: 700; }
.io-scrut-anno--bassa { color: var(--io-danger-strong); }
.io-scrut-andamento { font-size: var(--io-text-lg); font-weight: 700; line-height: 1; }
.io-scrut-andamento--su { color: var(--io-success); }
.io-scrut-andamento--giu { color: var(--io-danger-strong); }
.io-scrut-andamento--pari { color: var(--io-ink-faint); }

.io-scrut-tipi { display: flex; flex-wrap: wrap; gap: var(--io-space-2); }
.io-scrut-tipo {
    font-size: var(--io-text-sm); color: var(--io-ink-soft);
    background: var(--io-surface-raised); border-radius: 999px; padding: 2px var(--io-space-3);
}
.io-scrut-tipo strong { color: var(--io-ink); font-variant-numeric: tabular-nums; }
.io-scrut-prove { margin-top: var(--io-space-1); }

/* ═══════════════════════ Importa dal registro ═══════════════════════ */
.io-imp-file { display: block; margin: var(--io-space-3) 0; }
.io-imp-oppure { text-align: center; color: var(--io-ink-soft); margin: var(--io-space-4) 0 var(--io-space-2); font-size: var(--io-text-sm); }
.io-imp-testo { min-height: 120px; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: var(--io-text-sm); }
.io-imp-radio { display: flex; align-items: center; gap: var(--io-space-2); margin: var(--io-space-1) 0; font-weight: 500; }
.io-imp-radio input { width: 18px; height: 18px; }
.io-imp-riepilogo { font-size: var(--io-text-base); margin: var(--io-space-2) 0 var(--io-space-3); }
.io-imp-lista { gap: 6px; }
.io-imp-classe { display: flex; align-items: center; justify-content: space-between; }
.io-imp-classe__nome { font-weight: 700; }
.io-imp-classe__conta { color: var(--io-ink-soft); font-size: var(--io-text-sm); }
.io-imp-esito { margin: var(--io-space-2) 0 var(--io-space-4); padding-left: var(--io-space-6); }
.io-imp-esito li { margin: var(--io-space-1) 0; }

/* ═══════════════════════ Piano annuale → calendario (IA) ═══════════════════════ */
.io-piano-testo { min-height: 160px; font-size: var(--io-text-sm); }
.io-piano-avviso {
    margin: var(--io-space-3) 0; padding: var(--io-space-3) var(--io-space-4); border-radius: var(--io-radius);
    background: color-mix(in srgb, var(--io-warning) 12%, var(--io-surface));
    color: var(--io-ink); font-size: var(--io-text-sm);
}
.io-piano-avviso code { background: color-mix(in srgb, var(--io-ink) 8%, transparent); padding: 0 4px; border-radius: 4px; }
.io-piano-lista { display: flex; flex-direction: column; gap: var(--io-space-3); margin: var(--io-space-3) 0; }
.io-piano-riga {
    display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--io-space-2);
    padding: var(--io-space-3); border: 1px solid var(--io-border); border-radius: var(--io-radius);
    background: var(--io-surface);
}
.io-piano-riga--off { opacity: 0.5; }
.io-piano-check { width: 22px; height: 22px; align-self: center; flex-shrink: 0; }
.io-piano-riga .io-field { margin: 0; }
.io-piano-tipo, .io-piano-classe { flex: 1 1 150px; min-width: 0; }
.io-piano-titolo { flex: 2 1 200px; min-width: 0; }

/* ═══════════════════════ Passaggio di anno ═══════════════════════ */
.io-passa-sez { font-size: var(--io-text-base); font-weight: 700; margin: var(--io-space-4) 0 var(--io-space-2); }
.io-passa-lista { gap: 6px; }
.io-passa-riga { display: flex; align-items: center; justify-content: space-between; }
.io-passa-avanza { font-weight: 600; }
.io-passa-conta { color: var(--io-ink-soft); font-size: var(--io-text-sm); }

/* ============================================================================
   Agenda "effetto carta" (vista /agenda) — foglio a righe, spirale, margine rosso,
   grafia a mano (Caveat). Dati reali: orario+impegni del giorno + scadenze spuntabili.
   ========================================================================== */
:root {
    --ag-hand: "Caveat", "Bradley Hand", "Segoe Print", "Comic Sans MS", cursive;
    --ag-line: 40px;          /* altezza riga base */
    --ag-tcol: 48px;          /* colonna orario */
    --ag-gutter: 64px;        /* margine + orario */
    --ag-paper: #FCF8EE;
    --ag-paper2: #FAF5E8;
    --ag-red: rgba(199,74,72,0.82);
    --ag-rule: rgba(74,124,196,0.22);
    --ag-ink: #2A2E37;
}
/* Il foglio ha SEMPRE la stessa altezza minima, uguale per tutti i giorni (con o senza
   bigliettini): sfogliando, pager e pulsanti non si spostano mai. Il filler riga lo
   spazio vuoto come un'agenda vera; oltre il minimo il foglio cresce coi contenuti.
   (.io-ag--pieno resta nel markup ma non altera più l'altezza.) */
.io-ag { width: min(100%, 560px); margin: 0 auto; display: flex; flex-direction: column; }
/* saluto compatto sopra il foglio */
.io-ag-saluto { margin-bottom: var(--io-space-3); }
.io-ag-wrap { position: relative; filter: drop-shadow(0 14px 30px rgba(40,40,60,0.18)); flex: 1 1 auto; display: flex;
    /* Su schermi alti si avvicina al pieno schermo lasciando aria ai bigliettini;
       su schermi bassi non scende mai sotto 11 righe. */
    min-height: max(calc(var(--ag-line) * 11), calc(100dvh - 430px)); }
/* pagine impilate dietro */
.io-ag-wrap::before, .io-ag-wrap::after {
    content: ""; position: absolute; inset: 0; border-radius: 6px; z-index: 0;
}
.io-ag-wrap::before { background: #F2ECDC; transform: rotate(-1.1deg); top: 6px; left: 4px; right: -3px; }
.io-ag-wrap::after  { background: #F6F1E3; transform: rotate(0.6deg);  top: 3px; left: -3px; right: 4px; }
.io-ag-sheet {
    position: relative; z-index: 1; border-radius: 6px; overflow: hidden;
    background: linear-gradient(180deg, var(--ag-paper), var(--ag-paper2));
    box-shadow: inset 0 0 60px rgba(180,160,110,0.10);
    flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column;
}
/* spirale */
.io-ag-spiral { display: flex; justify-content: space-around; padding: 0 30px; height: 16px; position: relative; z-index: 4; }
.io-ag-spiral span {
    width: 9px; height: 16px; margin-top: -7px; border-radius: 9px;
    background: linear-gradient(180deg, #b9bcc4, #9a9ea8);
    box-shadow: inset 0 -2px 2px rgba(0,0,0,0.25), 0 1px 1px rgba(255,255,255,0.6);
}
/* margine rosso */
.io-ag-margin { position: absolute; top: 0; bottom: 0; left: calc(var(--ag-tcol) + 26px); width: 1.5px; background: var(--ag-red); opacity: 0.55; z-index: 2; }
.io-ag-body { padding: 8px 22px 28px; position: relative; z-index: 3; flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
/* spazio vuoto rigato in fondo al foglio: stesso passo delle righe (--ag-line) */
.io-ag-filler { flex: 1 1 auto; min-height: var(--ag-line); margin-left: var(--ag-gutter);
    background-image: repeating-linear-gradient(to bottom,
        transparent 0, transparent calc(var(--ag-line) - 1px),
        var(--ag-rule) calc(var(--ag-line) - 1px), var(--ag-rule) var(--ag-line)); }
.io-ag-hand { font-family: var(--ag-hand); }
/* header */
.io-ag-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; padding-left: var(--ag-gutter);
    border-bottom: 2px solid rgba(74,124,196,0.3); padding-bottom: 8px; margin-bottom: 4px; }
.io-ag-date { font-family: var(--ag-hand); font-size: calc(var(--ag-line) * 1.05); font-weight: 700; color: var(--ag-ink); line-height: 1; letter-spacing: 0.3px; white-space: nowrap; }
.io-ag-oggi { font-family: var(--ag-hand); font-size: calc(var(--ag-line) * 0.5); font-weight: 700; color: var(--ag-red); transform: rotate(-3deg); margin-left: 10px; }
.io-ag-sub { font-size: 10.5px; font-weight: 680; color: rgba(60,60,70,0.5); text-transform: uppercase; letter-spacing: 1.3px; margin-top: 5px; }
.io-ag-count { font-family: var(--ag-hand); font-size: calc(var(--ag-line) * 0.58); font-weight: 600; color: var(--ag-red); transform: rotate(-4deg); white-space: nowrap; flex-shrink: 0; }
/* righe */
.io-ag-row { border-bottom: 1px solid var(--ag-rule); min-height: var(--ag-line); display: flex; align-items: flex-end; gap: 12px; }
.io-ag-time { width: var(--ag-tcol); flex-shrink: 0; font-family: var(--ag-hand); font-size: calc(var(--ag-line) * 0.54); font-weight: 700; color: var(--ag-red); text-align: right; padding-right: 8px; line-height: 1; }
.io-ag-main { flex: 1; min-width: 0; display: flex; align-items: flex-end; gap: 9px; }
.io-ag-dot { width: 11px; height: 11px; border-radius: 11px; margin-bottom: 6px; flex-shrink: 0; }
.io-ag-title { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-family: var(--ag-hand); font-size: calc(var(--ag-line) * 0.66); font-weight: 700; color: var(--ag-ink); line-height: 1; }
.io-ag-title--done { color: rgba(60,60,70,0.42); text-decoration: line-through; text-decoration-color: rgba(199,74,72,0.55); }
.io-ag-room { font-size: 11.5px; font-weight: 640; color: rgba(60,60,70,0.45); margin-bottom: 5px; white-space: nowrap; flex-shrink: 0; }
.io-ag-now { font-family: var(--ag-hand); font-size: calc(var(--ag-line) * 0.5); font-weight: 700; color: var(--ag-red); transform: rotate(-3deg); margin-bottom: 2px; flex-shrink: 0; white-space: nowrap; }
.io-ag-topic { border-bottom: 1px solid var(--ag-rule); min-height: var(--ag-line); display: flex; align-items: flex-end; }
.io-ag-topic span { margin-left: calc(var(--ag-tcol) + 30px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-family: var(--ag-hand); font-size: calc(var(--ag-line) * 0.5); font-weight: 500; color: rgba(60,60,70,0.62); line-height: 1; }
.io-ag-empty { justify-content: center; align-items: center; min-height: calc(var(--ag-line) * 3); font-family: var(--ag-hand); font-size: calc(var(--ag-line) * 0.62); font-weight: 600; color: rgba(60,60,70,0.5); }
/* da fare */
.io-ag-dafare { border-bottom: 1px solid var(--ag-rule); min-height: var(--ag-line); display: flex; align-items: flex-end; }
.io-ag-dafare span { margin-left: var(--ag-gutter); font-size: 11px; font-weight: 720; color: var(--ag-red); text-transform: uppercase; letter-spacing: 2px; margin-bottom: 6px; }
.io-ag-todo { border-bottom: 1px solid var(--ag-rule); min-height: var(--ag-line); display: flex; align-items: flex-end; gap: 12px; padding-left: var(--ag-gutter); cursor: pointer; user-select: none; background: none; border-left: 0; border-right: 0; border-top: 0; width: 100%; text-align: left; }
.io-ag-check { width: 19px; height: 19px; border-radius: 4px; border: 2px solid var(--ag-red); margin-bottom: 5px; flex-shrink: 0; position: relative; background: transparent; }
.io-ag-check--done { background: rgba(199,74,72,0.10); }
.io-ag-check--done::after { content: "✓"; position: absolute; left: 1px; top: -10px; font-family: var(--ag-hand); font-size: 26px; font-weight: 700; color: var(--ag-red); }
.io-ag-todo__txt { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-family: var(--ag-hand); font-size: calc(var(--ag-line) * 0.56); font-weight: 600; color: var(--ag-ink); margin-bottom: 4px; line-height: 1; }
.io-ag-todo__txt--done { color: rgba(60,60,70,0.4); text-decoration: line-through; text-decoration-color: rgba(199,74,72,0.5); }
/* pager */
.io-ag-pager { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 18px; }
.io-ag-pbtn { width: 44px; height: 44px; border-radius: 44px; flex-shrink: 0; background: var(--io-surface); border: 1px solid var(--io-border); box-shadow: var(--io-shadow-soft); display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--io-ink); font-size: 20px; }
.io-ag-pbtn:disabled { opacity: 0.35; cursor: default; }
.io-ag-pill { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 999px; background: var(--io-surface); border: 1px solid var(--io-border); box-shadow: var(--io-shadow-soft); min-width: 150px; justify-content: center; font-size: 14.5px; font-weight: 680; color: var(--io-ink); letter-spacing: -0.2px; }
.io-ag-pill__oggi { font-size: 11px; font-weight: 720; color: var(--io-brand); background: var(--io-brand-soft); padding: 2px 7px; border-radius: 999px; }
.io-ag-torna { display: flex; justify-content: center; margin-top: 10px; }
.io-ag-torna button { background: none; border: none; font-family: inherit; font-size: 13.5px; font-weight: 640; color: var(--io-brand); cursor: pointer; }
/* Azioni di servizio (settimana, stampa): discrete, non competono col foglio */
.io-ag-azioni { display: flex; justify-content: center; gap: var(--io-space-4); margin-top: var(--io-space-3); }
.io-ag-azioni button {
    background: none; border: none; font-family: inherit; font-size: 13px; font-weight: 600;
    color: var(--io-ink-soft); cursor: pointer; display: inline-flex; align-items: center; gap: 5px;
    padding: 6px 4px; opacity: 0.8;
}
.io-ag-azioni button:active { opacity: 1; }
/* Aggiungi a questo giorno: tasto + menu (scadenza / verifica / impegno) */
.io-ag-add { display: flex; flex-direction: column; align-items: center; gap: var(--io-space-2); margin-top: var(--io-space-3); }
.io-ag-add-menu { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--io-space-2); animation: ioAgIn .2s ease; }
.io-ag-add-menu button {
    display: inline-flex; align-items: center; gap: 7px; min-height: var(--io-touch, 44px);
    padding: 0 var(--io-space-4); border: 1px solid var(--io-border); border-radius: 999px;
    background: var(--io-surface, #fff); font-family: inherit; font-size: 14px; font-weight: 640;
    color: var(--io-ink); box-shadow: var(--io-shadow-soft); cursor: pointer;
}
.io-ag-add-menu button:active { transform: scale(0.97); }
@keyframes ioAgIn { from { opacity: 0; transform: translateX(var(--ag-from, 26px)); } to { opacity: 1; transform: translateX(0); } }
.io-ag-anim { animation: ioAgIn .34s cubic-bezier(.2,.8,.2,1); }

/* Riga tap-abile: tocchi una voce e si aprono le sue azioni (elimina / cosa ho fatto) */
.io-ag-row--tap { cursor: pointer; transition: background .12s ease; }
.io-ag-row--tap:hover { background: rgba(120,110,70,0.06); }
.io-ag-row--aperto { background: rgba(120,110,70,0.08); }
.io-ag-chevron { font-size: 11px; color: rgba(60,60,70,0.4); margin-bottom: 4px; flex-shrink: 0; }
/* Pannello azioni della voce aperta: rientrato sotto la riga, fuori dalla grafia */
.io-ag-azione-riga { padding: 6px var(--ag-gutter) 12px calc(var(--ag-tcol) + 14px); animation: ioAgFade .18s ease; }
@keyframes ioAgFade { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }

/* Bigliettini: i promemoria di oggi, sotto il foglio. Allineati alla larghezza del foglio. */
.io-ag-note { width: min(100%, 560px); margin: var(--io-space-4) auto 0; display: flex; flex-direction: column; gap: var(--io-space-3); }
.io-ag-note .io-nota { animation: ioAgFade .25s ease; }

/* Stampa: solo il foglio, pulito */
@media print {
    .io-shell > *:not(.io-main), .io-botnav, .io-sidenav, .io-topbar, .io-ag-pager, .io-ag-torna, .io-ag-azioni, .io-ag-add, .io-oggi-header { display: none !important; }
    .io-ag { min-height: 0; }
    .io-ag-wrap { min-height: 0; }
    .io-ag-wrap::before, .io-ag-wrap::after { display: none; }
    .io-ag-sheet { box-shadow: none; background: #fff; }
    .io-ag, .io-main { width: 100%; max-width: 100%; }
}

/* Header Calendario con link all'Agenda cartacea */
.io-cal-header { display: flex; align-items: center; justify-content: space-between; gap: var(--io-space-3); flex-wrap: wrap; }
.io-cal-agenda-link {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 14px; border-radius: 999px;
    background: var(--io-surface); box-shadow: var(--io-shadow-soft);
    font-size: var(--io-text-sm); font-weight: 640; color: var(--io-brand-text); text-decoration: none;
    min-height: var(--io-touch);
}

/* ===== Condivisione (consiglio peer): QR + scanner ===== */
.io-cl-sez { font-size: var(--io-text-base); font-weight: 700; margin: var(--io-space-6) 0 var(--io-space-2); }
.io-cond-qr {
    width: min(260px, 70vw); margin: var(--io-space-3) auto 0; padding: 12px;
    background: #fff; border-radius: var(--io-radius); box-shadow: var(--io-shadow-soft);
}
.io-cond-qr svg { display: block; width: 100%; height: auto; }
.io-cond-qr-hint { text-align: center; font-size: var(--io-text-sm); color: var(--io-ink-soft); margin: var(--io-space-2) 0 0; line-height: 1.5; }
.io-cond-codice { font-family: ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: 1px; color: var(--io-brand-text); }
.io-cond-scanner {
    width: min(360px, 86vw); aspect-ratio: 1; margin: var(--io-space-3) auto;
    border-radius: var(--io-radius-lg); overflow: hidden; background: #000;
    box-shadow: inset 0 0 0 3px var(--io-brand);
}
.io-cond-video { width: 100%; height: 100%; object-fit: cover; display: block; }
.io-cond-manuale { margin-top: var(--io-space-3); }
.io-cond-manuale summary { font-size: var(--io-text-sm); font-weight: 600; color: var(--io-brand-text); cursor: pointer; min-height: var(--io-touch); display: flex; align-items: center; }
.io-cond-codice-form { display: flex; gap: var(--io-space-2); margin-top: var(--io-space-2); flex-wrap: wrap; }
.io-cond-codice-form input { flex: 1; min-width: 140px; text-transform: uppercase; }

/* ——— Paywall "Passa a Plus" (/plus) ——— */
.io-plus-badge {
    display: inline-block; background: var(--io-coral); color: #fff;
    font-size: 0.6em; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase;
    padding: 0.15em 0.5em; border-radius: 999px; vertical-align: middle; margin-left: 0.25em;
}
.io-plus-vantaggi { margin-bottom: var(--io-space-4); }
.io-plus-titolo { font-size: var(--io-text-lg); font-weight: 800; margin: 0 0 var(--io-space-3); }
.io-plus-lista { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--io-space-2); }
.io-plus-lista li { font-size: var(--io-text-sm); color: var(--io-ink-soft); line-height: 1.45; }
.io-plus-lista strong { color: var(--io-ink); }

.io-plus-piani { display: grid; gap: var(--io-space-3); margin-bottom: var(--io-space-4); }
@media (min-width: 720px) { .io-plus-piani { grid-template-columns: repeat(3, 1fr); align-items: stretch; } }

.io-plus-piano { position: relative; display: flex; flex-direction: column; text-align: center; }
.io-plus-piano--top { border: 2px solid var(--io-brand); box-shadow: var(--io-shadow); }
.io-plus-piano__tag {
    position: absolute; top: calc(-1 * var(--io-space-2)); left: 50%; transform: translateX(-50%);
    background: var(--io-brand); color: #fff; font-size: var(--io-text-sm); font-weight: 700;
    padding: 0.2em 0.7em; border-radius: 999px; white-space: nowrap;
}
.io-plus-piano__nome { font-size: var(--io-text-base); font-weight: 700; margin: var(--io-space-2) 0 var(--io-space-1); }
.io-plus-piano__prezzo { font-size: var(--io-text-xl); font-weight: 800; color: var(--io-brand-text); margin: 0; }
.io-plus-piano__prezzo span { font-size: var(--io-text-sm); font-weight: 600; color: var(--io-ink-faint); }
.io-plus-piano__nota { font-size: var(--io-text-sm); color: var(--io-ink-soft); margin: var(--io-space-1) 0 var(--io-space-3); flex: 1; }

.io-plus-soloapp { margin-top: var(--io-space-3); text-align: center; }
.io-plus-ripristina {
    display: block; margin: var(--io-space-3) auto 0; background: none; border: none;
    color: var(--io-brand-text); font-size: var(--io-text-sm); font-weight: 600;
    text-decoration: underline; cursor: pointer; min-height: var(--io-touch);
}
.io-plus-ripristina:disabled { opacity: 0.5; cursor: default; }
.io-plus-attivo { text-align: center; }

/* ——— Legale (paywall + Altro): link Termini/Privacy e cancellazione account ——— */
.io-plus-legale { text-align: center; margin-top: var(--io-space-4); }
.io-altro-legale a { color: var(--io-brand-text); }
.io-altro-cancella {
    display: block; margin: var(--io-space-2) 0 0; background: none; border: none; padding: 0;
    color: var(--io-danger); font-size: var(--io-text-sm); font-weight: 600;
    text-decoration: underline; cursor: pointer; min-height: var(--io-touch);
}

/* ——— Report superadmin ——— */
.io-sa-report-link { margin-bottom: var(--io-space-4); }
.io-report-griglia {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: var(--io-space-3); margin-bottom: var(--io-space-2);
}
.io-report-card { text-align: center; padding: var(--io-space-4) var(--io-space-2); }
.io-report-card__numero { display: block; font-size: 1.6rem; font-weight: 800; letter-spacing: -0.02em; }
.io-report-card__nome { display: block; font-size: var(--io-text-sm); color: var(--io-muted, #5b6b7b); margin-top: 2px; }
.io-report-codici { margin-top: var(--io-space-4); }
.io-report-codice__valore { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: 0.06em; }
.io-plus-codice { margin-top: var(--io-space-4); }

/* ——— Importa da circolare (IA) ———
   L'InputFile di Blazor è un input file nativo: senza queste regole il pulsante
   "Scegli file" appare col tema del browser, fuori dal design system. */
.io-circ-file input[type="file"] {
  min-height: var(--io-touch);
  padding: var(--io-space-2) var(--io-space-3);
  border: 1.5px dashed var(--io-border);
  border-radius: var(--io-radius);
  background: var(--io-surface);
  color: var(--io-ink-soft);
  font-family: inherit;
  font-size: var(--io-text-sm);
  width: 100%;
  box-sizing: border-box;
  cursor: pointer;
}
.io-circ-file input[type="file"]:focus-visible { outline: 3px solid var(--io-brand); outline-offset: 2px; }
.io-circ-file input[type="file"]::file-selector-button {
  /* gemello di .io-button--secondary */
  min-height: calc(var(--io-touch) - var(--io-space-2) * 2);
  margin-right: var(--io-space-3);
  padding: 0 var(--io-space-4);
  border: none;
  border-radius: var(--io-radius);
  background: var(--io-brand-soft);
  color: var(--io-brand-strong);
  font-family: inherit;
  font-size: var(--io-text-base);
  font-weight: 600;
  cursor: pointer;
  transition: background 150ms ease;
}
.io-circ-file input[type="file"]::file-selector-button:hover {
  background: color-mix(in srgb, var(--io-brand-strong) 18%, var(--io-brand-soft));
}

/* Elenco degli impegni proposti dall'IA: card leggere, checkbox allineata al testo */
.io-circ-lista { list-style: none; margin: 0 0 var(--io-space-4); padding: 0; display: grid; gap: var(--io-space-2); }
.io-circ-lista .io-field--check {
  margin: 0;
  padding: var(--io-space-3);
  border: 1.5px solid var(--io-border);
  border-radius: var(--io-radius);
  background: var(--io-surface);
}
.io-circ-lista label { display: flex; gap: var(--io-space-2); align-items: flex-start; cursor: pointer; }
.io-circ-lista label > input[type="checkbox"] { margin-top: 3px; flex: none; width: 18px; height: 18px; accent-color: var(--io-brand); }
.io-circ-item__testo { flex: 1; min-width: 0; }
.io-circ-lista small { color: var(--io-ink-soft); }

/* ═══ Vista home "lista pulita" (alternativa al foglio agenda, scelta in Impostazioni) ═══
   Stessi contenuti dell'agenda ma senza skeuomorfismo: tipografia netta, token del
   design system, righe leggibili. Riusa gli stessi controlli (aggiungi/pager/azioni). */
.io-ls { margin-top: var(--io-space-2); }

.io-ls-day {
  background: var(--io-surface);
  border: 1px solid var(--io-border);
  border-radius: var(--io-radius-lg);
  padding: var(--io-space-4) var(--io-space-4) var(--io-space-2);
  box-shadow: 0 1px 2px rgba(16,24,40,0.04);
}

.io-ls-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--io-space-3);
  padding-bottom: var(--io-space-3); margin-bottom: var(--io-space-2);
  border-bottom: 1px solid var(--io-border);
}
.io-ls-date { font-size: 1.35rem; font-weight: 800; letter-spacing: -0.02em; color: var(--io-ink); }
.io-ls-oggi { margin-left: 6px; font-size: 0.95rem; font-weight: 700; color: var(--io-brand-text); }
.io-ls-sub { margin-top: 2px; font-size: var(--io-text-sm); color: var(--io-ink-soft); text-transform: capitalize; }
.io-ls-count { flex-shrink: 0; font-size: var(--io-text-sm); font-weight: 700; color: var(--io-ink-soft); padding-top: 4px; }

.io-ls-empty { padding: var(--io-space-4) 2px; color: var(--io-ink-soft); }

.io-ls-row {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 4px; min-height: var(--io-touch);
  border-bottom: 1px solid var(--io-border);
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.io-ls-row:last-of-type { border-bottom: none; }
.io-ls-row:hover { background: var(--io-surface-raised); }
.io-ls-row--aperto { background: var(--io-brand-tint); }
.io-ls-row--passato .io-ls-title,
.io-ls-row--passato .io-ls-time { opacity: 0.5; }

.io-ls-time { flex-shrink: 0; width: 46px; font-variant-numeric: tabular-nums; font-weight: 700; font-size: var(--io-text-sm); color: var(--io-ink-soft); }
.io-ls-dot { flex-shrink: 0; width: 10px; height: 10px; border-radius: 50%; }
.io-ls-title { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 640; color: var(--io-ink); }
.io-ls-now { flex-shrink: 0; font-size: var(--io-text-sm); font-weight: 800; color: var(--io-brand-text); white-space: nowrap; }
.io-ls-room { flex-shrink: 0; font-size: var(--io-text-sm); color: var(--io-ink-faint); white-space: nowrap; }
.io-ls-chevron { flex-shrink: 0; color: var(--io-ink-faint); font-size: 0.85rem; }

.io-ls-azione { padding: 2px 2px 12px; border-bottom: 1px solid var(--io-border); }

.io-ls-dafare { margin: var(--io-space-4) 0 var(--io-space-2); font-size: var(--io-text-sm); font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: var(--io-ink-faint); }
.io-ls-todo-vuoto { padding: 2px 2px var(--io-space-2); color: var(--io-ink-faint); }

.io-ls-todo {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 9px 2px; min-height: var(--io-touch);
  background: none; border: none; text-align: left; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.io-ls-check { flex-shrink: 0; width: 20px; height: 20px; border-radius: 6px; border: 2px solid var(--io-border); background: var(--io-surface); position: relative; transition: border-color 120ms ease, background 120ms ease; }
.io-ls-check--done { border-color: var(--io-brand); background: var(--io-brand); }
.io-ls-check--done::after { content: "✓"; position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-size: 13px; font-weight: 800; }
.io-ls-todo__txt { flex: 1; min-width: 0; font-weight: 600; color: var(--io-ink); }
.io-ls-todo__txt--done { color: var(--io-ink-faint); text-decoration: line-through; }

@media print {
  .io-ls-day { box-shadow: none; border-color: #ccc; }
}

/* ═══ Segmented control (scelta a due opzioni, es. aspetto home) ═══ */
.io-altro-aspetto .io-hint { margin: 0 0 var(--io-space-3); }
.io-segmented {
  display: grid; grid-template-columns: 1fr 1fr; gap: 4px;
  padding: 4px; background: var(--io-surface-alt); border-radius: var(--io-radius);
}
.io-segmented__opt {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: calc(var(--io-touch) - 8px); padding: 0 var(--io-space-3);
  border: none; border-radius: calc(var(--io-radius) - 4px);
  background: transparent; color: var(--io-ink-soft);
  font-family: inherit; font-size: var(--io-text-base); font-weight: 700;
  cursor: pointer; transition: background 140ms ease, color 140ms ease, box-shadow 140ms ease;
}
.io-segmented__opt--on {
  background: var(--io-surface); color: var(--io-brand-text);
  box-shadow: 0 1px 3px rgba(16,24,40,0.12);
}
.io-segmented__opt:focus-visible { outline: 3px solid var(--io-brand); outline-offset: 2px; }