/* ============================================================
   Agenda di famiglia — foglio di stile unico.

   Regole della casa:
   · un solo sistema a token (nomi in italiano), niente colori sparsi;
   · tema chiaro di partenza, scuro per chi lo sceglie o ce l'ha di sistema;
   · Montserrat ospitato qui dentro, mai da Google (privacy + CSP);
   · pensato prima per il telefono: la barra delle sezioni sta in basso,
     dove arriva il pollice.
   ============================================================ */

@font-face {
    font-family: 'Montserrat';
    src: url('/assets/fonts/montserrat-400.woff2') format('woff2');
    font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Montserrat';
    src: url('/assets/fonts/montserrat-600.woff2') format('woff2');
    font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Montserrat';
    src: url('/assets/fonts/montserrat-700.woff2') format('woff2');
    font-weight: 700; font-style: normal; font-display: swap;
}

:root {
    --fondale:      #F7F6F3;
    --quinta:       #FFFFFF;
    --ribalta:      #EFEEE9;
    --bordo:        #E2E1D9;
    --bordo-forte:  #CFCEC4;
    --testo:        #1E2320;
    --testo-tenue:  #5F6862;
    --testo-fioco:  #8B928C;

    --marca:        #2F6F4E;
    --marca-scura:  #245740;
    --marca-chiara: #E4EFE8;
    --marca-testo:  #FFFFFF;

    --successo-f: #E4EFE8; --successo-b: #2F6F4E; --successo-t: #1E4632;
    --errore-f:   #FBE7E4; --errore-b:   #B4382B; --errore-t:   #7E2A20;
    --avviso-f:   #FCF1DD; --avviso-b:   #A9761B; --avviso-t:   #6F4E12;
    --info-f:     #E4EBF6; --info-b:     #3E6BB0; --info-t:     #2A4A7B;

    --ombra:      0 1px 2px rgba(30, 35, 32, .06), 0 4px 12px rgba(30, 35, 32, .05);
    --ombra-alta: 0 2px 6px rgba(30, 35, 32, .10), 0 12px 28px rgba(30, 35, 32, .10);

    --raggio:      10px;
    --raggio-tondo: 999px;

    --sp-1: .25rem; --sp-2: .5rem; --sp-3: .75rem; --sp-4: 1rem;
    --sp-5: 1.5rem; --sp-6: 2rem; --sp-7: 3rem;

    --testo-scala: 16px;
    --carattere: 'Montserrat', 'Segoe UI', system-ui, -apple-system, sans-serif;
    --carattere-dati: ui-monospace, 'SFMono-Regular', 'Cascadia Mono', Consolas, monospace;

    --barra-h: 3.5rem;
    --tab-h: 3.75rem;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-tema="chiaro"]) {
        --fondale:     #141815;
        --quinta:      #1C211D;
        --ribalta:     #242A26;
        --bordo:       #2E3630;
        --bordo-forte: #414B44;
        --testo:       #E7EBE7;
        --testo-tenue: #A3ADA6;
        --testo-fioco: #78827B;

        --marca:        #6FBF92;
        --marca-scura:  #8FD3AC;
        --marca-chiara: #1E2E25;
        --marca-testo:  #10160F;

        --successo-f: #1E2E25; --successo-b: #6FBF92; --successo-t: #A8DDBE;
        --errore-f:   #33201D; --errore-b:   #E08072; --errore-t:   #F0AFA5;
        --avviso-f:   #33291A; --avviso-b:   #D9A64A; --avviso-t:   #EBC787;
        --info-f:     #1D2735; --info-b:     #7FA5DE; --info-t:     #AFC7EC;

        --ombra:      0 1px 2px rgba(0, 0, 0, .40), 0 4px 12px rgba(0, 0, 0, .30);
        --ombra-alta: 0 2px 6px rgba(0, 0, 0, .45), 0 12px 28px rgba(0, 0, 0, .40);
    }
}

:root[data-tema="scuro"] {
    --fondale:     #141815;
    --quinta:      #1C211D;
    --ribalta:     #242A26;
    --bordo:       #2E3630;
    --bordo-forte: #414B44;
    --testo:       #E7EBE7;
    --testo-tenue: #A3ADA6;
    --testo-fioco: #78827B;

    --marca:        #6FBF92;
    --marca-scura:  #8FD3AC;
    --marca-chiara: #1E2E25;
    --marca-testo:  #10160F;

    --successo-f: #1E2E25; --successo-b: #6FBF92; --successo-t: #A8DDBE;
    --errore-f:   #33201D; --errore-b:   #E08072; --errore-t:   #F0AFA5;
    --avviso-f:   #33291A; --avviso-b:   #D9A64A; --avviso-t:   #EBC787;
    --info-f:     #1D2735; --info-b:     #7FA5DE; --info-t:     #AFC7EC;

    --ombra:      0 1px 2px rgba(0, 0, 0, .40), 0 4px 12px rgba(0, 0, 0, .30);
    --ombra-alta: 0 2px 6px rgba(0, 0, 0, .45), 0 12px 28px rgba(0, 0, 0, .40);
}

/* ---------- fondamenta ---------- */

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

/* I campi si nascondono con l'attributo `hidden`: senza questa riga il
   `display: flex` dei contenitori lo vince e restano visibili. */
[hidden] { display: none !important; }

html {
    font-size: var(--testo-scala);
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    background: var(--fondale);
    color: var(--testo);
    font-family: var(--carattere);
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    min-height: 100dvh;
}

h1, h2, h3, h4 {
    font-weight: 700;
    letter-spacing: -.01em;
    line-height: 1.2;
    margin: 0;
    text-wrap: balance;
}
h1 { font-size: 1.5rem; }
h2 { font-size: 1.2rem; }
h3 { font-size: 1.02rem; }

p { margin: 0; }

a { color: var(--marca); text-underline-offset: 3px; }
a:hover { color: var(--marca-scura); }

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

img, svg { max-width: 100%; }

/* ---------- impalcatura ---------- */

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

.contenuto {
    flex: 1;
    width: 100%;
    max-width: 60rem;
    margin: 0 auto;
    padding: var(--sp-4) var(--sp-4) calc(var(--tab-h) + var(--sp-6));
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
}

@media (min-width: 48rem) {
    .contenuto { padding-bottom: var(--sp-7); }
}

/* ---------- barra in alto ---------- */

.barra {
    position: sticky;
    top: 0;
    z-index: 30;
    background: var(--quinta);
    border-bottom: 1px solid var(--bordo);
    padding-top: env(safe-area-inset-top);
}

.barra-dentro {
    max-width: 60rem;
    margin: 0 auto;
    height: var(--barra-h);
    padding: 0 var(--sp-4);
    display: flex;
    align-items: center;
    gap: var(--sp-3);
}

.marchio {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    font-weight: 700;
    color: var(--testo);
    text-decoration: none;
    letter-spacing: -.01em;
}

.marchio .segno {
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 6px;
    background: var(--marca);
    color: var(--marca-testo);
    display: grid;
    place-items: center;
    font-size: .85rem;
    font-weight: 700;
    flex: none;
}

.barra-spinta { margin-left: auto; }

.barra-azioni { display: flex; align-items: center; gap: var(--sp-2); }

/* Menu di scorta per il desktop: sul telefono le sezioni stanno in basso. */
.nav-alta { display: none; gap: var(--sp-1); }
.nav-alta a {
    padding: .35rem .7rem;
    border-radius: var(--raggio-tondo);
    color: var(--testo-tenue);
    text-decoration: none;
    font-size: .92rem;
    font-weight: 600;
}
.nav-alta a:hover { background: var(--ribalta); color: var(--testo); }
.nav-alta a.attivo { background: var(--marca-chiara); color: var(--marca); }

@media (min-width: 48rem) {
    .nav-alta { display: flex; }
}

/* ---------- barra delle sezioni (in basso, sul telefono) ---------- */

.tab-bar {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 40;
    background: var(--quinta);
    border-top: 1px solid var(--bordo);
    padding-bottom: env(safe-area-inset-bottom);
    display: flex;
}

.tab-bar a {
    flex: 1;
    height: var(--tab-h);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    color: var(--testo-tenue);
    text-decoration: none;
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .01em;
}
.tab-bar a .glifo { font-size: 1.15rem; line-height: 1; }
.tab-bar a.attivo { color: var(--marca); }

@media (min-width: 48rem) {
    .tab-bar { display: none; }
}

/* ---------- schede e blocchi ---------- */

.scheda {
    background: var(--quinta);
    border: 1px solid var(--bordo);
    border-radius: var(--raggio);
    padding: var(--sp-4);
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
}

.scheda.stretta { padding: var(--sp-3); }

.scheda-testa {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
}

.occhiello {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--testo-fioco);
}

.tenue { color: var(--testo-tenue); }
.fioco { color: var(--testo-fioco); }
.piccolo { font-size: .86rem; }
.dati { font-family: var(--carattere-dati); font-variant-numeric: tabular-nums; }

.vuoto {
    text-align: center;
    color: var(--testo-tenue);
    padding: var(--sp-6) var(--sp-4);
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    align-items: center;
}
.vuoto .glifo { font-size: 2rem; opacity: .5; }

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

.bottone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    padding: .6rem 1.1rem;
    border-radius: var(--raggio-tondo);
    border: 1px solid transparent;
    background: var(--marca);
    color: var(--marca-testo);
    font: inherit;
    font-weight: 600;
    font-size: .95rem;
    text-decoration: none;
    cursor: pointer;
    transition: background .12s ease, border-color .12s ease;
    min-height: 2.6rem;
}
.bottone:hover { background: var(--marca-scura); color: var(--marca-testo); }
.bottone:disabled { opacity: .5; cursor: not-allowed; }

.bottone.chiaro {
    background: var(--quinta);
    color: var(--testo);
    border-color: var(--bordo-forte);
}
.bottone.chiaro:hover { background: var(--ribalta); color: var(--testo); }

.bottone.nudo {
    background: transparent;
    color: var(--marca);
    padding: .4rem .6rem;
    min-height: auto;
}
.bottone.nudo:hover { background: var(--marca-chiara); }

.bottone.pericolo { background: var(--errore-b); color: #fff; }
.bottone.pericolo:hover { background: var(--errore-t); }

.bottone.largo { width: 100%; }

/* ---------- campi ---------- */

.campo { display: flex; flex-direction: column; gap: var(--sp-1); }

.campo > label {
    font-size: .82rem;
    font-weight: 600;
    color: var(--testo-tenue);
}

.campo input[type="text"],
.campo input[type="email"],
.campo input[type="date"],
.campo input[type="time"],
.campo input[type="number"],
.campo input[type="color"],
.campo select,
.campo textarea {
    width: 100%;
    padding: .6rem .75rem;
    border: 1px solid var(--bordo-forte);
    border-radius: 8px;
    background: var(--quinta);
    color: var(--testo);
    font: inherit;
    font-size: 1rem;
    min-height: 2.6rem;
}

.campo input[type="color"] { padding: .2rem; height: 2.6rem; }

.campo textarea { min-height: 5rem; resize: vertical; }

.campo .aiuto { font-size: .78rem; color: var(--testo-fioco); }

.campi-riga {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
    gap: var(--sp-3);
}

.spunta {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-2);
    padding: var(--sp-2);
    border-radius: 8px;
    cursor: pointer;
}
.spunta:hover { background: var(--ribalta); }
.spunta input { margin-top: .25rem; width: 1.05rem; height: 1.05rem; accent-color: var(--marca); flex: none; }
.spunta .testo-spunta { display: flex; flex-direction: column; gap: 1px; }
.spunta .testo-spunta b { font-weight: 600; font-size: .92rem; }
.spunta .testo-spunta span { font-size: .78rem; color: var(--testo-fioco); }

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

.avvisi { display: flex; flex-direction: column; gap: var(--sp-2); }

.avviso {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-2);
    padding: .7rem .9rem;
    border-radius: 8px;
    border-left: 3px solid;
    font-size: .92rem;
}
.avviso.ok      { background: var(--successo-f); border-color: var(--successo-b); color: var(--successo-t); }
.avviso.errore  { background: var(--errore-f);   border-color: var(--errore-b);   color: var(--errore-t); }
.avviso.attento { background: var(--avviso-f);   border-color: var(--avviso-b);   color: var(--avviso-t); }
.avviso.info    { background: var(--info-f);     border-color: var(--info-b);     color: var(--info-t); }

/* ---------- persone ---------- */

.pallino {
    --colore: var(--testo-fioco);
    width: 2rem; height: 2rem;
    border-radius: 50%;
    background: color-mix(in srgb, var(--colore) 18%, var(--quinta));
    color: var(--colore);
    border: 1.5px solid var(--colore);
    display: grid;
    place-items: center;
    font-size: .82rem;
    font-weight: 700;
    flex: none;
}
.pallino.piccolo { width: 1.5rem; height: 1.5rem; font-size: .66rem; }
.pallino.grande { width: 2.6rem; height: 2.6rem; font-size: 1rem; }

.fila-persone { display: flex; flex-wrap: wrap; gap: var(--sp-2); }

.tessera-persona {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-2) var(--sp-3);
    border: 1px solid var(--bordo);
    border-radius: var(--raggio-tondo);
    background: var(--quinta);
    font-size: .9rem;
    font-weight: 600;
}
.tessera-persona .senza-accesso {
    font-size: .68rem;
    font-weight: 600;
    color: var(--testo-fioco);
    border: 1px solid var(--bordo-forte);
    border-radius: var(--raggio-tondo);
    padding: 0 .4rem;
}

/* ---------- liste ---------- */

.elenco {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--bordo);
    border-radius: var(--raggio);
    background: var(--quinta);
    overflow: hidden;
}

.elenco > * + * { border-top: 1px solid var(--bordo); }

.voce-elenco {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
    text-decoration: none;
    color: inherit;
}
a.voce-elenco:hover { background: var(--ribalta); }
.voce-elenco .corpo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.voce-elenco .corpo b { font-weight: 600; }
.voce-elenco .corpo span { font-size: .82rem; color: var(--testo-tenue); }
.voce-elenco .coda { color: var(--testo-fioco); font-size: .85rem; white-space: nowrap; }

/* ---------- pillole ---------- */

.pillola {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .15rem .6rem;
    border-radius: var(--raggio-tondo);
    font-size: .75rem;
    font-weight: 600;
    background: var(--ribalta);
    color: var(--testo-tenue);
    white-space: nowrap;
}
.pillola.marca { background: var(--marca-chiara); color: var(--marca); }
.pillola.attenzione { background: var(--avviso-f); color: var(--avviso-t); }

/* ---------- pagina d'ingresso ---------- */

.porta {
    min-height: 100dvh;
    display: grid;
    place-items: center;
    padding: var(--sp-5) var(--sp-4);
    background:
        radial-gradient(120% 60% at 50% 0%, var(--marca-chiara) 0%, transparent 60%),
        var(--fondale);
}

.porta-scheda {
    width: min(26rem, 100%);
    background: var(--quinta);
    border: 1px solid var(--bordo);
    border-radius: 14px;
    box-shadow: var(--ombra-alta);
    padding: var(--sp-5);
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
}

.porta-testa { display: flex; flex-direction: column; gap: var(--sp-2); align-items: flex-start; }
.porta-testa .segno-grande {
    width: 3rem; height: 3rem;
    border-radius: 12px;
    background: var(--marca);
    color: var(--marca-testo);
    display: grid; place-items: center;
    font-size: 1.4rem; font-weight: 700;
}

.porta-piede {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2) var(--sp-4);
    justify-content: center;
    font-size: .78rem;
    color: var(--testo-fioco);
}
.porta-piede a { color: var(--testo-tenue); }

/* ---------- piede ---------- */

.piede {
    border-top: 1px solid var(--bordo);
    padding: var(--sp-4);
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2) var(--sp-4);
    justify-content: center;
    font-size: .78rem;
    color: var(--testo-fioco);
}
.piede a { color: var(--testo-tenue); text-decoration: none; }
.piede a:hover { text-decoration: underline; }

/* ---------- utilità ---------- */

.riga { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.riga.stretta { gap: var(--sp-2); }
.riga.fine { justify-content: flex-end; }
.colonna { display: flex; flex-direction: column; gap: var(--sp-3); }
.spinta { margin-left: auto; }
.scorre-lato { overflow-x: auto; }

@media (prefers-reduced-motion: reduce) {
    * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ---------- modale di conferma (mai i dialoghi del browser) ---------- */

.velo-modale {
    position: fixed;
    inset: 0;
    z-index: 60;
    background: rgba(20, 24, 21, .45);
    display: grid;
    place-items: center;
    padding: var(--sp-4);
}

.modale {
    width: min(24rem, 100%);
    background: var(--quinta);
    border: 1px solid var(--bordo);
    border-radius: 12px;
    box-shadow: var(--ombra-alta);
    padding: var(--sp-4);
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
}

/* ============================================================
   L'agenda: righe, settimana, mese.
   ============================================================ */

.testa-pagina {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--sp-3);
    flex-wrap: wrap;
}

.navigatore {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    justify-content: space-between;
}
.navigatore .bottone { flex: none; }

/* ---------- la riga di un impegno ---------- */

.elenco-impegni {
    display: flex;
    flex-direction: column;
    gap: var(--sp-1);
}

.riga-impegno {
    --colore: var(--testo-fioco);
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: .5rem .7rem;
    border-radius: 8px;
    border-left: 3px solid var(--colore);
    background: color-mix(in srgb, var(--colore) 7%, var(--quinta));
    text-decoration: none;
    color: inherit;
    min-height: 2.9rem;
}
.riga-impegno:hover { background: color-mix(in srgb, var(--colore) 14%, var(--quinta)); }

.riga-impegno.passata { opacity: .55; }

.riga-impegno .orario {
    font-size: .82rem;
    font-weight: 600;
    color: var(--testo-tenue);
    min-width: 2.9rem;
}

.riga-impegno .corpo {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.riga-impegno .corpo b {
    font-weight: 600;
    font-size: .95rem;
    overflow-wrap: anywhere;
}
.riga-impegno .corpo .sotto {
    font-size: .76rem;
    color: var(--testo-tenue);
    display: flex;
    flex-wrap: wrap;
    gap: .3rem;
    align-items: center;
}

.riga-impegno .chi {
    display: flex;
    align-items: center;
    gap: .2rem;
    flex: none;
}

/* ---------- la settimana ---------- */

.griglia-settimana {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sp-2);
}

@media (min-width: 60rem) {
    /* Sullo schermo largo i sette giorni stanno affiancati; sul telefono
       restano una colonna sola, che è come si legge davvero una settimana. */
    .griglia-settimana { grid-template-columns: repeat(7, 1fr); gap: var(--sp-1); align-items: start; }
    .griglia-settimana .riga-impegno { flex-direction: column; align-items: stretch; gap: 2px; padding: .4rem .5rem; }
    .griglia-settimana .riga-impegno .orario { min-width: 0; }
    .griglia-settimana .riga-impegno .chi { flex-wrap: wrap; }
}

.giorno-settimana {
    background: var(--quinta);
    border: 1px solid var(--bordo);
    border-radius: var(--raggio);
    padding: var(--sp-2);
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
}
.giorno-settimana.oggi {
    border-color: var(--marca);
    box-shadow: inset 0 0 0 1px var(--marca);
}

.testa-giorno {
    display: flex;
    align-items: baseline;
    gap: var(--sp-2);
}
.nome-giorno {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--testo-fioco);
}
.numero-giorno {
    font-size: 1.05rem;
    font-weight: 700;
}
.giorno-settimana.oggi .numero-giorno { color: var(--marca); }

.aggiungi-giorno {
    margin-left: auto;
    width: 1.6rem; height: 1.6rem;
    border-radius: 50%;
    display: grid; place-items: center;
    background: var(--ribalta);
    color: var(--testo-tenue);
    text-decoration: none;
    font-weight: 700;
    line-height: 1;
}
.aggiungi-giorno:hover { background: var(--marca-chiara); color: var(--marca); }

.niente { color: var(--testo-fioco); font-size: .85rem; text-align: center; padding: .2rem 0; }

/* ---------- il mese ---------- */

.calendario-mese {
    background: var(--quinta);
    border: 1px solid var(--bordo);
    border-radius: var(--raggio);
    overflow: hidden;
}

.intestazione-mese {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    background: var(--ribalta);
    border-bottom: 1px solid var(--bordo);
}
.intestazione-mese span {
    padding: .4rem 0;
    text-align: center;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--testo-fioco);
}

.caselle {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
}

.casella {
    min-height: 4.2rem;
    border-right: 1px solid var(--bordo);
    border-bottom: 1px solid var(--bordo);
    padding: .3rem;
    display: flex;
    flex-direction: column;
    gap: .25rem;
    text-decoration: none;
    color: inherit;
}
.casella:nth-child(7n) { border-right: 0; }
.casella:hover { background: var(--ribalta); }
.casella.fuori-mese { background: color-mix(in srgb, var(--ribalta) 60%, transparent); color: var(--testo-fioco); }
.casella.oggi { box-shadow: inset 0 0 0 2px var(--marca); }

.casella .numero { font-size: .82rem; font-weight: 600; }
.casella.oggi .numero { color: var(--marca); }

.casella .segni { display: flex; flex-wrap: wrap; gap: 2px; align-items: center; }
.segno-impegno {
    width: .5rem; height: .5rem;
    border-radius: 50%;
    background: var(--colore, var(--testo-fioco));
    display: inline-block;
}
.casella .ancora { font-size: .62rem; color: var(--testo-fioco); }

/* ---------- scelte a pastiglia (chi, quali giorni) ---------- */

.scelta-persone, .scelta-giorni {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
}

.chip-persona, .chip-giorno {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .35rem .7rem;
    border: 1px solid var(--bordo-forte);
    border-radius: var(--raggio-tondo);
    background: var(--quinta);
    font-size: .88rem;
    font-weight: 600;
    cursor: pointer;
    user-select: none;
}
.chip-persona input, .chip-giorno input {
    position: absolute;
    opacity: 0;
    width: 0; height: 0;
}
.chip-persona:has(input:checked) {
    border-color: var(--colore, var(--marca));
    background: color-mix(in srgb, var(--colore, var(--marca)) 14%, var(--quinta));
}
.chip-giorno:has(input:checked) {
    border-color: var(--marca);
    background: var(--marca-chiara);
    color: var(--marca);
}
.chip-persona:has(input:focus-visible), .chip-giorno:has(input:focus-visible) {
    outline: 2px solid var(--marca);
    outline-offset: 2px;
}
.chip-giorno { min-width: 3.2rem; justify-content: center; }

/* Sul telefono i giorni vuoti si stringono in una riga sola: una settimana
   con due impegni non deve costare sette schermate di scorrimento. */
@media (max-width: 60rem) {
    .giorno-settimana:has(.niente) {
        flex-direction: row;
        align-items: center;
        padding: .35rem .7rem;
        min-height: 2.6rem;
    }
    .giorno-settimana:has(.niente) .niente { margin-left: auto; }
    .giorno-settimana:has(.niente) .aggiungi-giorno { margin-left: var(--sp-2); }
}

/* ---------- tabella dei canali di notifica ---------- */

.tabella-canali {
    width: 100%;
    border-collapse: collapse;
    font-size: .9rem;
}
.tabella-canali th {
    text-align: center;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--testo-fioco);
    padding: .4rem .5rem;
    border-bottom: 1px solid var(--bordo);
}
.tabella-canali th:first-child { text-align: left; }
.tabella-canali td {
    padding: .6rem .5rem;
    border-bottom: 1px solid var(--bordo);
    text-align: center;
    vertical-align: top;
}
.tabella-canali td:first-child { text-align: left; }
.tabella-canali td b { display: block; font-weight: 600; }
.tabella-canali td span { display: block; }
.tabella-canali input[type="checkbox"] {
    width: 1.15rem; height: 1.15rem;
    accent-color: var(--marca);
}
.tabella-canali tr:last-child td { border-bottom: 0; }

.aiuto-installazione {
    border-top: 1px solid var(--bordo);
    padding-top: var(--sp-3);
}
.aiuto-installazione summary {
    cursor: pointer;
    font-weight: 600;
    font-size: .9rem;
    color: var(--marca);
}
.aiuto-installazione > .colonna { padding-top: var(--sp-2); }

/* ---------- scuola e compiti ---------- */

.spunta-compito { display: flex; flex: none; }

.quadratino {
    width: 1.5rem; height: 1.5rem;
    border-radius: 6px;
    border: 2px solid var(--bordo-forte);
    background: var(--quinta);
    color: var(--marca-testo);
    display: grid;
    place-items: center;
    font-size: .9rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    padding: 0;
}
.quadratino:hover { border-color: var(--marca); }
.quadratino.segnato { background: var(--marca); border-color: var(--marca); }

.giorno-scuola {
    border-top: 1px solid var(--bordo);
    padding-top: var(--sp-2);
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
}

.campo-largo { grid-column: 1 / -1; }

/* ---------- cene ---------- */

.scheda-cena {
    --colore: var(--testo-fioco);
    border-left: 4px solid var(--colore);
    text-decoration: none;
    color: inherit;
}
.scheda-cena:hover { background: var(--ribalta); }

ul.pulita-stretta {
    margin: .3rem 0 0;
    padding-left: 1.1rem;
    display: flex;
    flex-direction: column;
    gap: .15rem;
}

/* ---------- pagina «Altro»: l'indice delle sezioni ---------- */

.griglia-sezioni {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
    gap: var(--sp-3);
}

.tessera-sezione {
    background: var(--quinta);
    border: 1px solid var(--bordo);
    border-radius: var(--raggio);
    padding: var(--sp-4) var(--sp-3);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-2);
    text-align: center;
    text-decoration: none;
    color: inherit;
}
.tessera-sezione:hover { border-color: var(--marca); background: var(--marca-chiara); color: var(--marca); }
.tessera-sezione .glifo { font-size: 1.6rem; line-height: 1; }
.tessera-sezione b { font-weight: 600; font-size: .92rem; }
.tessera-sezione span { font-size: .74rem; color: var(--testo-fioco); }
.tessera-sezione:hover span { color: inherit; }

/* ---------- lista della spesa ---------- */

.elenco-spesa {
    display: flex;
    flex-direction: column;
    gap: var(--sp-1);
}

.voce-spesa {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: .55rem .7rem;
    border-radius: 8px;
    background: var(--quinta);
    border: 1px solid var(--bordo);
    min-height: 3rem;
}
.voce-spesa .corpo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.voce-spesa .corpo b { font-weight: 600; }
.voce-spesa .corpo .sotto { font-size: .76rem; color: var(--testo-tenue); }

/* Presa = spenta: al supermercato conta vedere a colpo d'occhio cosa manca
   ancora, non cosa è già nel carrello. */
.voce-spesa.presa {
    opacity: .5;
    background: var(--ribalta);
}
.voce-spesa.presa .corpo b { text-decoration: line-through; }

/* ---------- scadenze ---------- */

.scheda.scadenza {
    --colore: var(--testo-fioco);
    border-left: 4px solid var(--colore);
    padding: 0;
    gap: 0;
}
.scheda.scadenza > summary {
    padding: var(--sp-3) var(--sp-4);
    cursor: pointer;
    list-style: none;
}
.scheda.scadenza > summary::-webkit-details-marker { display: none; }
.scheda.scadenza > summary .corpo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.scheda.scadenza > summary .corpo b { font-weight: 600; }
.scheda.scadenza > summary .corpo .sotto { font-size: .78rem; color: var(--testo-tenue); }
.scheda.scadenza > summary:hover { background: var(--ribalta); }

/* Scaduta = rossa sul bordo: è l'unica cosa che deve saltare all'occhio in
   una pagina di date tutte uguali. */
.scheda.scadenza.scaduta { --colore: var(--errore-b); }
.scheda.scadenza.vicina { --colore: var(--avviso-b); }

.dentro-scadenza {
    padding: 0 var(--sp-4) var(--sp-4);
    border-top: 1px solid var(--bordo);
    padding-top: var(--sp-3);
}

.modifica-scadenza > summary {
    cursor: pointer;
    color: var(--marca);
    font-weight: 600;
}

/* Il codice da mandare al bot: si legge da uno schermo e si ridigita altrove,
   quindi grande, spaziato e selezionabile con un tocco. */
.codice-telegram {
    font-size: 1.8rem;
    letter-spacing: .3em;
    font-weight: 700;
    text-align: center;
    padding: var(--sp-3);
    background: var(--ribalta);
    border-radius: var(--raggio);
    user-select: all;
}

/* Il filtro per persona sopra la settimana: con quaranta lezioni in sette
   giorni, «solo Ermione» è la prima cosa che si cerca. */
.filtro-persone {
    display: flex;
    gap: var(--sp-2);
    overflow-x: auto;
    padding-bottom: var(--sp-1);
}
.filtro-persone .tessera-persona { white-space: nowrap; text-decoration: none; color: inherit; }
.filtro-persone .tessera-persona:hover { border-color: var(--marca); }
.filtro-persone .tessera-persona.attiva {
    background: var(--marca-chiara);
    border-color: var(--marca);
    color: var(--marca);
}

/* ---------- gruppi di impegni (la riga che si apre) ---------- */

.gruppo-impegni { --colore: var(--testo-fioco); }

.gruppo-impegni > summary {
    cursor: pointer;
    list-style: none;
}
.gruppo-impegni > summary::-webkit-details-marker { display: none; }

.gruppo-impegni > summary .freccia {
    color: var(--testo-fioco);
    font-weight: 700;
    transition: transform .12s ease;
    display: inline-block;
    margin-left: .1rem;
}
.gruppo-impegni[open] > summary .freccia { transform: rotate(90deg); }
.gruppo-impegni[open] > summary { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }

.dentro-gruppo {
    display: flex;
    flex-direction: column;
    gap: var(--sp-1);
    padding: var(--sp-2) 0 var(--sp-2) var(--sp-4);
    border-left: 3px solid color-mix(in srgb, var(--colore) 40%, transparent);
    margin-left: .35rem;
}

.note-gruppo {
    padding: .2rem .2rem .2rem .7rem;
    border-left: 2px solid var(--bordo-forte);
}