/* ============================================================================
   Araldo Scuola — il sistema visivo del web nuovo (Revisione 2)

   Fonte: la tela "Araldo Scuola web" (docs/Revisione2/04_WEB_SCUOLA.md §7) e il
   design system delle app. I colori stanno SOLO qui, come variabili: ogni
   colore ha un significato e uno solo (P2). Arancio = si tocca; rosso = solo
   per togliere; i quattro stati di presenza solo per gli stati; lavanda solo
   per "tutta la sezione". Il colore d'identità di un'area vive solo sulla
   tessera dell'icona (menu, Home, Ctrl+K) e sulla striscia in cima alla pagina.

   Arrotondamenti come araldo-admin: pulsanti e campi 8 px, riquadri 12,
   menu e pannelli 10. Da scrivania: pensato per 1280–1920 px, usabile fino al
   tablet (W2). Niente Bootstrap (W4). Tema scuro solo previsto (W7).
   ========================================================================== */

:root {
    /* Fondi, superfici, linee */
    --fondo: #F4E9DC;
    --superficie: #FFFFFF;
    --barra: #A84A1C;
    --sabbia: #F3ECE2;
    --linea: #F0E6DA;
    --riquadro-bordo: #E8D5C0;
    --linea-campo: #E6DCCF;
    --campo-bordo: #9C8B78;          /* bordo dei campi a 3:1 su bianco */

    /* Testi */
    --inchiostro: #123B35;
    --testo-2: #56655F;
    --testo-3: #33443F;

    /* Il marchio: ciò che si tocca */
    --marchio: #A84A1C;
    --marchio-scuro: #8C3B13;
    --on-marchio: #FFFFFF;
    --marchio-tinta: #FDE7DA;
    --marchio-tinta-chiara: #FFF3EA;

    /* Solo per togliere o cancellare */
    --pericolo: #B3261E;
    --pericolo-tinta: #FFE1DE;

    /* Avatar: fondo unico, mai un colore per persona (O6) */
    --avatar: #F6E2C8;
    --avatar-testo: #5A4630;

    /* Stati di presenza */
    --presente: #12A150;    --presente-tinta: #D7F7E3;    --presente-testo: #0B6B34;
    --uscito: #2F6FED;      --uscito-tinta: #DDE8FF;      --uscito-testo: #1F4FB8;
    --assente: #F5A300;     --assente-tinta: #FFF0C7;     --assente-testo: #8A5A00;
    --sconosciuto: #F0443A; --sconosciuto-tinta: #FFE1DE; --sconosciuto-testo: #B3261E;

    /* Tutta la sezione */
    --gruppo: #EAE2FF; --gruppo-bordo: #9F86EE; --gruppo-testo: #2E1A6B;

    /* Colore d'identità delle aree: tessera (chiara, dietro l'icona) e
       striscia (un tono più deciso). L'icona sulla tessera è sempre scura. */
    --tessera-icona: #4A1A06;
    --tessera-home: #FFE3D3;            --striscia-home: transparent;
    --tessera-comunicare: #8EE3DA;      --striscia-comunicare: #4CC9BD;
    --tessera-giornata: #FFD166;        --striscia-giornata: #F5B731;
    --tessera-persone: #FFB8CB;         --striscia-persone: #F58BAA;
    --tessera-archivio: #C9D8F0;        --striscia-archivio: #8EA8D4;
    --tessera-amministrazione: #DCE89A; --striscia-amministrazione: #B8CC5A;
    --tessera-fondo: #FFE3D3;           --striscia-fondo: #F2A27C;
    /* Nelle pagine di persone la striscia ha il colore del TIPO */
    --striscia-bambino: #E86A92; --striscia-familiare: #1FA89B; --striscia-personale: #5B7290;

    /* Barra laterale (testi sull'arancio) */
    --barra-testo: #FFF1E8;
    --barra-titoli: #FFDCC8;
    --barra-futura: #F6C9AE;
    --barra-linea: rgba(255, 255, 255, .22);

    --ombra-riquadro: 0 1px 2px rgba(58, 20, 5, .05);
    --ombra-pannello: 0 14px 40px rgba(18, 59, 53, .16);
    --ombra-finestra: 0 24px 64px rgba(18, 59, 53, .30);
    --velo: rgba(18, 59, 53, .42);

    --font-titoli: Fredoka, Nunito, system-ui, sans-serif;
    --font-testo: Nunito, system-ui, sans-serif;

    /* Misure del guscio */
    --barra-larga: 256px;
    --barra-stretta: 76px;
    --testa-alta: 64px;
    --striscia-alta: 6px;

    /* Densità (W8): "Comoda" di base, "Compatta" per chi ha elenchi lunghi */
    --riga: 56px;
    --riga-pad: 12px;
    --campo-alto: 44px;
}
html[data-densita="compatta"] {
    --riga: 40px;
    --riga-pad: 6px;
    --campo-alto: 38px;
}

/* ============================================================================
   BASE
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; height: 100%; }
body {
    margin: 0; min-height: 100%;
    background: var(--fondo); color: var(--inchiostro);
    font-family: var(--font-testo); font-size: 15px; font-weight: 600; line-height: 1.4;
}
p, h1, h2, h3, h4, figure, ul { margin: 0; }
ul { padding: 0; list-style: none; }
img, svg { vertical-align: middle; }
a { color: var(--marchio); }
a:hover { color: var(--marchio-scuro); }
button, input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }
h1, h2, h3, .titolo { font-family: var(--font-titoli); font-weight: 600; }
h1 { font-size: 34px; line-height: 40px; }
h2 { font-size: 21px; line-height: 26px; }
h3 { font-size: 17px; line-height: 22px; }
.muto { color: var(--testo-2); }
.piccolo { font-size: 13px; }
.scorciatoia, kbd {
    padding: 2px 7px; border-radius: 7px; background: var(--sabbia); color: var(--testo-3);
    font: 800 12px var(--font-testo);
}
:focus-visible { outline: 2px solid var(--marchio); outline-offset: 2px; }
.solo-lettori {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* Icone: una famiglia (Lucide), tratto 2 */
.ico {
    width: 20px; height: 20px; flex: none;
    fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.ico-s { width: 16px; height: 16px; }
.ico-l { width: 22px; height: 22px; }
.ico-xl { width: 28px; height: 28px; }
.ico-grasso { stroke-width: 3; }

/* La tessera colorata dietro un'icona: menu, Home, Ctrl+K */
.tessera {
    width: 34px; height: 34px; border-radius: 8px; flex: none;
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--tessera-icona); background: var(--tessera-home);
}
.tessera-comunicare      { background: var(--tessera-comunicare); }
.tessera-giornata        { background: var(--tessera-giornata); }
.tessera-persone         { background: var(--tessera-persone); }
.tessera-archivio        { background: var(--tessera-archivio); }
.tessera-amministrazione { background: var(--tessera-amministrazione); }
.tessera-azione          { background: var(--marchio-tinta); color: var(--marchio); }

/* Avatar: foto se c'è, altrimenti le iniziali sul fondo unico */
.avatar {
    width: var(--lato, 36px); height: var(--lato, 36px); border-radius: 50%; flex: none;
    display: inline-flex; align-items: center; justify-content: center; overflow: hidden;
    background: var(--avatar); color: var(--avatar-testo);
    font-family: var(--font-titoli); font-weight: 600; font-size: calc(var(--lato, 36px) * .39);
}
.avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ============================================================================
   PULSANTI (P3: posizione fissa; P2: arancio = azione principale)
   ========================================================================== */

.pls {
    height: var(--campo-alto); padding: 0 18px; border-radius: 8px; border: 0;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    font-weight: 800; font-size: 15px; white-space: nowrap; text-decoration: none;
    background: transparent; color: var(--inchiostro);
}
.pls:disabled { opacity: .5; cursor: default; }
.pls-pieno { background: var(--marchio); color: var(--on-marchio); }
.pls-pieno:hover:not(:disabled) { background: var(--marchio-scuro); color: var(--on-marchio); }
.pls-contorno { background: var(--superficie); border: 1.5px solid var(--campo-bordo); }
.pls-contorno:hover:not(:disabled) { border-color: var(--marchio); }
.pls-tinta { background: var(--marchio-tinta); color: var(--marchio); }
.pls-tinta:hover:not(:disabled) { background: #FBD8C4; color: var(--marchio-scuro); }
.pls-pericolo { background: var(--pericolo); color: #FFFFFF; }
.pls-tenue { color: var(--testo-3); }
.pls-tenue:hover:not(:disabled) { background: var(--sabbia); }
.pls-link { padding: 0 6px; color: var(--marchio); font-weight: 800; }
.pls-link:hover { text-decoration: underline; }
.pls-icona { width: var(--campo-alto); padding: 0; }
.pls-piccolo { height: 36px; padding: 0 12px; font-size: 14px; }
.pls-piccolo.pls-icona { width: 36px; }
.pls .rotella { width: 18px; height: 18px; }

/* Rotella di attesa */
.rotella {
    width: 22px; height: 22px; flex: none; border-radius: 50%;
    border: 3px solid var(--linea-campo); border-top-color: var(--marchio);
    animation: gira .8s linear infinite;
}
@keyframes gira { to { transform: rotate(360deg); } }

/* Pillole dei filtri */
.pillola {
    height: 36px; padding: 0 14px; border-radius: 8px; border: 0;
    background: var(--sabbia); color: var(--testo-3); font-weight: 700; font-size: 14px;
    display: inline-flex; align-items: center; gap: 6px;
}
.pillola[aria-pressed="true"] { background: var(--marchio-tinta); color: var(--marchio); font-weight: 800; }

/* Il contatore tondo (non letti) */
.conta {
    min-width: 22px; height: 22px; padding: 0 7px; border-radius: 11px;
    background: var(--marchio); color: #FFFFFF; font-size: 12px; font-weight: 800;
    display: inline-flex; align-items: center; justify-content: center;
}

/* ============================================================================
   CAMPI (P5: etichetta sopra, sempre visibile; niente testo d'esempio)
   ========================================================================== */

.campo-gruppo { display: flex; flex-direction: column; gap: 6px; }
.etichetta { font-size: 14px; font-weight: 800; color: var(--testo-3); }
.campo {
    height: var(--campo-alto); width: 100%; padding: 0 14px;
    border: 1.5px solid var(--campo-bordo); border-radius: 8px;
    background: var(--superficie); color: var(--inchiostro); font-weight: 600; font-size: 15px;
}
.campo:focus { outline: none; border-color: var(--marchio); box-shadow: 0 0 0 3px var(--marchio-tinta); }
.campo[aria-invalid="true"] { border-color: var(--pericolo); }
textarea.campo { height: auto; min-height: 96px; padding: 10px 14px; resize: vertical; line-height: 1.4; }
.campo-con-pulsante { position: relative; }
.campo-con-pulsante .campo { padding-right: 48px; }
.campo-con-pulsante .pls { position: absolute; right: 2px; top: 2px; height: calc(var(--campo-alto) - 4px); width: 40px; padding: 0; color: var(--testo-2); }
.campo-aiuto { font-size: 13px; color: var(--testo-2); }
.campo-errore { font-size: 13px; font-weight: 700; color: var(--pericolo); }

/* ============================================================================
   RIQUADRI, AVVISI, ELENCHI
   ========================================================================== */

.riquadro {
    background: var(--superficie); border: 1px solid var(--riquadro-bordo); border-radius: 12px;
    box-shadow: var(--ombra-riquadro); padding: 22px 24px;
    display: flex; flex-direction: column; gap: 16px; min-width: 0;
}
.avviso {
    display: flex; gap: 12px; align-items: flex-start;
    padding: 12px 16px; border-radius: 10px; font-size: 14px; font-weight: 700;
    background: var(--sabbia); color: var(--testo-3);
}
.avviso .ico { margin-top: 1px; }
.avviso-attenzione { background: var(--assente-tinta); color: var(--assente-testo); }
.avviso-errore { background: var(--pericolo-tinta); color: var(--pericolo); }
.avviso-ok { background: var(--presente-tinta); color: var(--presente-testo); }

.vuoto { padding: 36px 20px; text-align: center; display: flex; flex-direction: column; gap: 6px; align-items: center; color: var(--testo-2); }
.vuoto b { font-family: var(--font-titoli); font-weight: 600; font-size: 20px; color: var(--inchiostro); }

/* ============================================================================
   IL GUSCIO: barra laterale + testa + striscia + contenuto
   ========================================================================== */

body.guscio { display: flex; min-height: 100vh; }

/* --- Barra laterale ----------------------------------------------------- */
.barra {
    width: var(--barra-larga); flex: none; position: sticky; top: 0; height: 100vh;
    display: flex; flex-direction: column; gap: 4px; padding: 16px 12px 14px;
    background: var(--barra); color: var(--barra-testo); overflow-y: auto; overflow-x: hidden;
    transition: width .15s ease;
}
.barra-testa { display: flex; align-items: center; gap: 6px; padding: 0 0 8px 6px; }
.barra-marca { flex: 1; display: flex; align-items: center; gap: 10px; text-decoration: none; color: #FFFFFF; min-width: 0; }
.barra-marca:hover { color: #FFFFFF; }
.barra-logo {
    width: 40px; height: 40px; flex: none; border-radius: 20px; background: #FFFFFF;
    display: flex; align-items: center; justify-content: center; box-shadow: 0 1px 0 var(--linea);
}
.barra-logo img { width: 34px; height: 34px; object-fit: contain; }
.barra-nome { display: flex; flex-direction: column; line-height: 1.1; }
.barra-nome b { font-family: var(--font-titoli); font-weight: 600; font-size: 22px; }
.barra-nome span { font-size: 12px; font-weight: 800; color: var(--barra-titoli); }
.barra-gruppo { display: flex; flex-direction: column; gap: 2px; padding-top: 6px; }
.barra-titolo { padding: 6px 12px 2px; font-size: 13px; font-weight: 800; color: var(--barra-titoli); white-space: nowrap; }
.barra-voce {
    position: relative; display: flex; align-items: center; gap: 12px; width: 100%;
    min-height: 36px; padding: 0 12px; border-radius: 8px; border: 0; background: transparent;
    color: var(--barra-testo); font-weight: 700; font-size: 15px; line-height: 20px;
    text-decoration: none; text-align: left; cursor: pointer; white-space: nowrap;
}
.barra-voce:hover { background: rgba(255, 255, 255, .13); color: var(--barra-testo); }
.barra-voce:focus-visible { outline-color: #FFFFFF; }
.barra-voce .tessera { width: 30px; height: 30px; border-radius: 7px; }
.barra-voce .ico { width: 18px; height: 18px; }
.barra-voce .barra-etichetta { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.15; overflow: hidden; text-overflow: ellipsis; }
.barra-voce small { font-size: 12px; font-weight: 700; color: var(--barra-titoli); }
.barra-voce .conta { background: #FFFFFF; color: var(--marchio); }
.barra-voce[aria-current="page"], .barra-voce[aria-current="page"]:hover {
    background: #FFFFFF; color: var(--marchio); font-weight: 800; box-shadow: 0 2px 8px rgba(58, 20, 5, .28);
}
.barra-voce[aria-current="page"] .conta { background: var(--marchio); color: #FFFFFF; }
.barra-voce.futura, .barra-voce.futura:hover { background: transparent; color: var(--barra-futura); cursor: default; }
.barra-voce.futura .tessera { opacity: .55; }
.barra-voce.spenta { opacity: .45; }
.barra-voce.spenta:hover { background: transparent; cursor: not-allowed; }
.barra-spazio { flex: 1; }
.barra-fondo { display: flex; flex-direction: column; gap: 2px; padding-top: 10px; border-top: 1px solid var(--barra-linea); }
.barra-gira { width: 40px; height: 40px; padding: 0; justify-content: center; flex: none; }
.barra-gira .ico { stroke: var(--barra-titoli); }

/* Barra compressa: solo le tessere, titoli e testi spariscono */
body.barra-compressa .barra { width: var(--barra-stretta); }
body.barra-compressa .barra-testa { flex-direction: column; padding-left: 0; }
body.barra-compressa .barra-nome, body.barra-compressa .barra-titolo,
body.barra-compressa .barra-etichetta, body.barra-compressa .barra-voce .conta { display: none; }
body.barra-compressa .barra-voce { justify-content: center; padding: 0; width: 52px; margin: 0 auto; }
body.barra-compressa .barra-marca { justify-content: center; }

/* --- La parte destra ------------------------------------------------------ */
.corpo { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.testa {
    position: sticky; top: 0; z-index: 30; height: var(--testa-alta);
    display: flex; align-items: center; gap: 16px; padding: 0 20px 0 32px;
    background: var(--superficie); border-bottom: 1px solid var(--riquadro-bordo);
    box-shadow: 0 1px 3px rgba(58, 20, 5, .06);
}
.percorso { flex: 1 1 0; min-width: 0; display: flex; align-items: center; gap: 8px; font-size: 15px; white-space: nowrap; overflow: hidden; }
.percorso a { color: var(--testo-2); text-decoration: none; font-weight: 700; }
.percorso a:hover { color: var(--marchio); text-decoration: underline; }
.percorso .ico { color: var(--campo-bordo); }
.percorso [aria-current="page"] { font-weight: 800; color: var(--inchiostro); overflow: hidden; text-overflow: ellipsis; }

.cerca-innesco {
    flex: 0 1 440px; display: flex; align-items: center; gap: 10px; height: 44px;
    padding: 0 8px 0 14px; border: 1.5px solid var(--campo-bordo); border-radius: 8px;
    background: var(--superficie); color: var(--testo-2); font-weight: 700; font-size: 15px; text-align: left;
}
.cerca-innesco:hover { border-color: var(--marchio); }
.cerca-innesco span { flex: 1; }

.testa-destra { flex: 1 1 0; min-width: 0; display: flex; align-items: center; justify-content: flex-end; gap: 6px; position: relative; }
.testa-pls {
    height: 44px; padding: 0 10px; border: 0; border-radius: 8px; background: transparent;
    color: var(--testo-3); display: inline-flex; align-items: center; gap: 8px; font-weight: 800; font-size: 14px;
}
.testa-pls:hover { background: var(--sabbia); }
.testa-pls.tonda { width: 44px; padding: 0; justify-content: center; position: relative; }
.testa-pls .puntino {
    position: absolute; top: 5px; right: 4px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
    background: var(--marchio); color: #FFFFFF; font-size: 11px; font-weight: 800;
    display: flex; align-items: center; justify-content: center;
}
.testa-scuola { padding: 0 10px 0 12px; border: 1.5px solid var(--linea-campo); background: var(--superficie); max-width: 280px; }
.testa-scuola:hover { border-color: var(--marchio); background: var(--superficie); }
.testa-scuola > span { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.15; min-width: 0; }
.testa-scuola b { font-size: 14px; font-weight: 800; color: var(--inchiostro); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 200px; }
.testa-scuola small { font-size: 12px; font-weight: 700; color: var(--testo-2); }

/* Pannelli a tendina sotto la testa */
.tendina {
    position: absolute; top: 52px; right: 0; z-index: 40; min-width: 280px; max-width: 420px;
    display: flex; flex-direction: column; gap: 2px; padding: 8px;
    background: var(--superficie); border: 1px solid var(--linea); border-radius: 10px; box-shadow: var(--ombra-pannello);
}
.tendina-titolo { padding: 8px 10px 4px; font-size: 13px; font-weight: 800; color: var(--testo-2); }
.tendina-voce {
    display: flex; align-items: center; gap: 10px; width: 100%; min-height: 40px; padding: 6px 10px;
    border: 0; border-radius: 8px; background: transparent; color: var(--inchiostro);
    font-weight: 700; font-size: 14px; text-align: left; text-decoration: none; cursor: pointer;
}
.tendina-voce:hover { background: var(--marchio-tinta-chiara); color: var(--inchiostro); }
.tendina-voce[aria-pressed="true"] { background: var(--marchio-tinta); }
.tendina-voce.pericolo { color: var(--pericolo); }
.tendina-voce .ico { color: var(--testo-3); }
.tendina-voce .ico-spunta { margin-left: auto; color: var(--marchio); }
.tendina-voce > span { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
.tendina-voce small { font-size: 12px; font-weight: 700; color: var(--testo-2); }
.tendina-linea { height: 1px; margin: 6px 4px; background: var(--linea); }
.tendina-persona { display: flex; align-items: center; gap: 10px; padding: 8px 10px 10px; }
.tendina-persona b { display: block; font-size: 15px; }
.tendina-persona small { font-size: 12px; font-weight: 700; color: var(--testo-2); }

/* La striscia: sei pixel sotto la testa, colore dell'area o del tipo */
.striscia { height: var(--striscia-alta); flex: none; background: var(--striscia-colore, transparent); }
body[data-area="comunicare"]      { --striscia-colore: var(--striscia-comunicare); }
body[data-area="giornata"]        { --striscia-colore: var(--striscia-giornata); }
body[data-area="persone"]         { --striscia-colore: var(--striscia-persone); }
body[data-area="archivio"]        { --striscia-colore: var(--striscia-archivio); }
body[data-area="amministrazione"] { --striscia-colore: var(--striscia-amministrazione); }
body[data-area="fondo"]           { --striscia-colore: var(--striscia-fondo); }
body[data-tipo="bambino"]         { --striscia-colore: var(--striscia-bambino); }
body[data-tipo="familiare"]       { --striscia-colore: var(--striscia-familiare); }
body[data-tipo="personale"]       { --striscia-colore: var(--striscia-personale); }
body[data-area="home"] .striscia  { display: none; }

/* Lo stato dell'accesso, quando non è pieno (AB18-AB20) */
.accesso-fascia {
    display: flex; align-items: center; gap: 12px; padding: 10px 40px;
    background: var(--assente-tinta); color: var(--assente-testo); font-size: 14px; font-weight: 700;
}
.accesso-fascia.chiusa { background: var(--pericolo-tinta); color: var(--pericolo); }
.accesso-fascia a { color: inherit; font-weight: 800; }

.contenuto { flex: 1; display: flex; flex-direction: column; gap: 24px; padding: 28px 40px 48px; max-width: 1240px; width: 100%; }

/* Testata di pagina: titolo a sinistra, l'azione principale a destra (P3) */
.pagina-testa { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 16px; }
.pagina-testa > div:first-child { flex: 1; min-width: 280px; display: flex; flex-direction: column; gap: 4px; }
.pagina-testa .sottotitolo { font-size: 16px; color: var(--testo-2); font-weight: 600; }
.pagina-azioni { display: flex; align-items: center; gap: 10px; }

/* ============================================================================
   FINESTRE (modali) e PANNELLI LATERALI
   Titolo a sinistra, Annulla · Conferma in alto a destra (P3).
   ========================================================================== */

.velo {
    position: fixed; inset: 0; z-index: 100; background: var(--velo);
    display: flex; align-items: flex-start; justify-content: center; padding: 96px 16px 16px;
}
.finestra {
    width: 560px; max-width: 100%; max-height: calc(100vh - 112px); display: flex; flex-direction: column;
    background: var(--superficie); border-radius: 12px; box-shadow: var(--ombra-finestra); overflow: hidden;
}
.finestra-testa { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--linea); }
.finestra-testa h2 { flex: 1; min-width: 0; }
.finestra-corpo { padding: 20px; overflow-y: auto; display: flex; flex-direction: column; gap: 16px; }
.finestra-corpo p { font-size: 15px; line-height: 1.5; }

.pannello-velo { position: fixed; inset: 0; z-index: 90; background: var(--velo); }
.pannello {
    position: fixed; top: 0; right: 0; bottom: 0; z-index: 95; width: min(520px, 100vw);
    display: flex; flex-direction: column; background: var(--superficie); box-shadow: var(--ombra-finestra);
    transform: translateX(0); animation: entra-da-destra .18s ease;
}
@keyframes entra-da-destra { from { transform: translateX(24px); opacity: .6; } to { transform: none; opacity: 1; } }
.pannello-testa { display: flex; align-items: center; gap: 10px; padding: 14px 16px 14px 20px; border-bottom: 1px solid var(--linea); }
.pannello-testa h2 { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pannello-corpo { flex: 1; overflow-y: auto; display: flex; flex-direction: column; }

/* Toast */
.toast-pila { position: fixed; right: 20px; bottom: 20px; z-index: 120; display: flex; flex-direction: column; gap: 8px; max-width: 420px; }
.toast {
    display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: 10px;
    background: var(--inchiostro); color: #FFFFFF; font-weight: 700; font-size: 14px; box-shadow: var(--ombra-pannello);
    animation: entra-dal-basso .18s ease;
}
.toast.ok { background: var(--presente-testo); }
.toast.errore { background: var(--pericolo); }
.toast.attenzione { background: var(--assente-testo); }
@keyframes entra-dal-basso { from { transform: translateY(12px); opacity: 0; } to { transform: none; opacity: 1; } }

/* ============================================================================
   RICERCA Ctrl+K (W20)
   ========================================================================== */

.cerca-finestra { width: 700px; }
.cerca-testa { display: flex; flex-direction: column; gap: 6px; padding: 16px 20px 14px; border-bottom: 1px solid var(--linea); }
.cerca-testa label { font-size: 13px; font-weight: 800; color: var(--testo-2); }
.cerca-riga-campo { display: flex; align-items: center; gap: 12px; }
.cerca-riga-campo .ico { width: 24px; height: 24px; color: var(--marchio); }
.cerca-campo { flex: 1; min-width: 0; height: 40px; border: 0; background: transparent; font-weight: 700; font-size: 22px; color: var(--inchiostro); }
.cerca-campo:focus { outline: none; }
.cerca-risultati { max-height: 560px; overflow-y: auto; padding: 6px 8px 10px; }
.cerca-gruppo { padding: 12px 12px 4px; font-size: 13px; font-weight: 800; color: var(--testo-2); }
.cerca-voce {
    display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 6px 12px; border-radius: 8px;
    text-decoration: none; color: var(--inchiostro); cursor: pointer; width: 100%; border: 0; background: transparent; text-align: left;
}
.cerca-voce:hover { background: var(--marchio-tinta-chiara); color: var(--inchiostro); }
.cerca-voce[aria-selected="true"] { background: var(--marchio-tinta); }
.cerca-voce .tessera { width: 38px; height: 38px; }
.cerca-voce .avatar { --lato: 38px; }
.cerca-voce > span { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cerca-voce b { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cerca-voce small { font-size: 13px; color: var(--testo-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cerca-piede {
    display: flex; flex-wrap: wrap; align-items: center; gap: 16px; padding: 12px 20px;
    border-top: 1px solid var(--linea); background: #FFFCF7; font-size: 13px; color: var(--testo-2); font-weight: 700;
}
.cerca-piede .spazio { flex: 1; }

/* ============================================================================
   ASSISTENZA COME CHAT (08_SPECIFICA_APP.md §10.3)
   ========================================================================== */

.asst-schede { display: flex; gap: 6px; padding: 12px 16px; border-bottom: 1px solid var(--linea); }
.asst-elenco { flex: 1; overflow-y: auto; }
.asst-riga {
    display: flex; gap: 12px; align-items: flex-start; width: 100%; padding: 12px 16px; border: 0; border-bottom: 1px solid var(--linea);
    background: transparent; text-align: left; cursor: pointer; color: var(--inchiostro);
}
.asst-riga:hover { background: var(--marchio-tinta-chiara); }
.asst-riga > span { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.asst-riga b { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.asst-riga .ultimo { font-size: 13px; color: var(--testo-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.asst-riga .stato { font-size: 12px; font-weight: 800; color: var(--testo-3); background: var(--sabbia); border-radius: 6px; padding: 1px 7px; align-self: flex-start; }
.asst-riga .ora { font-size: 12px; font-weight: 700; color: var(--testo-2); white-space: nowrap; }
.asst-piede { padding: 12px 16px; border-top: 1px solid var(--linea); display: flex; flex-direction: column; gap: 8px; }
.asst-piede .nota { font-size: 12px; color: var(--testo-2); text-align: center; }
.asst-chat { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px; background: var(--sabbia); }
.asst-bolla { max-width: 85%; display: flex; flex-direction: column; gap: 3px; }
.asst-bolla .b {
    padding: 8px 12px; border-radius: 12px; background: var(--superficie); border: 1px solid var(--linea-campo);
    font-size: 14px; font-weight: 600; white-space: pre-wrap; word-break: break-word;
}
.asst-bolla .m { font-size: 11px; font-weight: 700; color: var(--testo-2); padding: 0 4px; }
.asst-bolla.mia { align-self: flex-end; align-items: flex-end; }
.asst-bolla.mia .b { background: var(--marchio-tinta); border-color: transparent; }
.asst-bolla.sistema { align-self: center; align-items: center; max-width: 100%; }
.asst-bolla.sistema .b { background: transparent; border: 0; color: var(--testo-2); font-size: 12px; font-weight: 700; text-align: center; }
.asst-allegato {
    display: inline-flex; gap: 4px; align-items: center; font-size: 12px; font-weight: 700;
    background: rgba(0, 0, 0, .06); border-radius: 6px; padding: 2px 7px; margin-top: 4px; color: inherit; text-decoration: none; cursor: pointer; border: 0;
}
.asst-scrivi { padding: 12px 16px; border-top: 1px solid var(--linea); display: flex; flex-direction: column; gap: 8px; }
.asst-scrivi-riga { display: flex; gap: 8px; align-items: flex-end; }
.asst-scrivi-riga textarea { flex: 1; min-height: 44px; max-height: 160px; }
.asst-risolto { margin: 12px 16px 0; padding: 14px 16px; border-radius: 10px; background: var(--presente-tinta); color: var(--presente-testo); display: flex; flex-direction: column; gap: 10px; }
.asst-risolto .pls-riga { display: flex; gap: 8px; }
.asst-stelle { display: flex; gap: 2px; }
.asst-stelle button { font-size: 28px; line-height: 1; border: 0; background: transparent; color: var(--linea-campo); padding: 0 2px; }
.asst-stelle button.accesa { color: var(--assente); }
.asst-pillole { display: flex; flex-wrap: wrap; gap: 8px; }

/* ============================================================================
   ACCESSO: due colonne, l'arancio a sinistra, il modulo a destra
   ========================================================================== */

.accesso { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
.accesso-marca {
    background: var(--barra); color: #FFFFFF; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 18px;
    padding: 48px; text-align: center;
}
.accesso-marca .barra-logo { width: 96px; height: 96px; border-radius: 48px; }
.accesso-marca .barra-logo img { width: 80px; height: 80px; }
.accesso-marca h1 { font-size: 40px; line-height: 44px; }
.accesso-marca p { font-size: 17px; font-weight: 600; color: var(--barra-testo); max-width: 380px; }
.accesso-modulo { display: flex; align-items: center; justify-content: center; padding: 40px 24px; }
.accesso-modulo > div { width: 100%; max-width: 420px; display: flex; flex-direction: column; gap: 20px; }
.accesso-modulo h2 { font-size: 28px; line-height: 34px; }
.accesso-piede { font-size: 13px; color: var(--testo-2); text-align: center; }
@media (max-width: 860px) {
    .accesso { grid-template-columns: 1fr; }
    .accesso-marca { padding: 32px 24px; gap: 10px; }
    .accesso-marca p { display: none; }
}

/* Scelta della scuola */
.scuole-griglia { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.scuola-tessera {
    display: flex; flex-direction: column; gap: 10px; padding: 20px; border: 1.5px solid var(--riquadro-bordo); border-radius: 12px;
    background: var(--superficie); text-align: left; cursor: pointer; color: var(--inchiostro); box-shadow: var(--ombra-riquadro);
}
.scuola-tessera:hover { border-color: var(--marchio); }
.scuola-tessera b { font-family: var(--font-titoli); font-weight: 600; font-size: 20px; }
.scuola-tessera small { font-size: 13px; font-weight: 700; color: var(--testo-2); }

/* ============================================================================
   HOME (B1: il saluto e i riquadri in arrivo; B3 la riempie)
   ========================================================================== */

.home-griglia { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; }
.home-riquadro h2 { display: flex; align-items: center; gap: 10px; }
.home-riquadro h2 > span:nth-child(2) { flex: 1; min-width: 0; }
.home-riquadro .in-arrivo { font-size: 13px; font-weight: 800; color: var(--testo-2); background: var(--sabbia); border-radius: 6px; padding: 2px 8px; margin-left: auto; white-space: nowrap; flex: none; }

/* ============================================================================
   Fino al tablet (W2): la barra si nasconde e si apre da un pulsante
   ========================================================================== */

/* Il pulsante che apre il menu: solo fino al tablet (la @media qui sotto lo accende) */
.testa-menu { display: none; }

@media (max-width: 1024px) {
    .contenuto { padding: 20px 20px 40px; }
    .testa { padding: 0 12px 0 16px; }
    .cerca-innesco span { display: none; }
    .cerca-innesco { flex: 0 0 44px; padding: 0; justify-content: center; }
    .cerca-innesco kbd { display: none; }
    .testa-scuola > span { display: none; }
    .accesso-fascia { padding: 10px 20px; }
}
@media (max-width: 860px) {
    .barra { position: fixed; left: 0; z-index: 60; transform: translateX(-100%); transition: transform .18s ease; width: var(--barra-larga) !important; }
    body.barra-aperta .barra { transform: none; }
    body.barra-aperta .barra-velo { display: block; }
    .barra-velo { display: none; position: fixed; inset: 0; z-index: 50; background: var(--velo); }
    .barra-gira { display: none; }
    .testa-menu { display: inline-flex; }
    body.barra-compressa .barra-nome, body.barra-compressa .barra-titolo, body.barra-compressa .barra-etichetta { display: flex; }
    body.barra-compressa .barra-voce { justify-content: flex-start; padding: 0 12px; width: 100%; }
}