/* La Base — stile provvisorio (fase 0 non ancora fatta: colori e nome si cambiano qui e da Impostazioni).
   Regole: testo grande, nessun suono, nessuna animazione automatica, tema chiaro e scuro.
   L'unico elemento "forte" sono i blocchi delle routine, che si posano quando si spuntano. */

:root {
    --carta: #EDF0F5;
    --superficie: #FFFFFF;
    --inchiostro: #1E2740;
    --quieto: #56607A;
    --viola: #5B45C9;
    --viola-scuro: #43319F;
    --muschio: #3E8A63;
    --muschio-scuro: #2B6847;
    --muschio-chiaro: #7CC39C;
    --ambra: #E2A132;
    --bordo: #C9D0DD;
    --avviso: #FFF4D6;
    --avviso-bordo: #E2A132;
    --errore: #FBE3E0;
    --errore-bordo: #B8483A;
    --ombra-blocco: #B5BDCD;
    --raggio: 10px;
    --font: "Atkinson Hyperlegible", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
    color-scheme: light;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-tema="chiaro"]) {
        --carta: #141A26;
        --superficie: #1D2433;
        --inchiostro: #E6EAF2;
        --quieto: #A3ADC2;
        --viola: #A596F5;
        --viola-scuro: #C3B9FA;
        --muschio: #3F9B6C;
        --muschio-scuro: #2A6D4B;
        --muschio-chiaro: #7FD1A4;
        --bordo: #34405A;
        --avviso: #3A3220;
        --avviso-bordo: #C79232;
        --errore: #40221F;
        --errore-bordo: #D06A5B;
        --ombra-blocco: #0B0F18;
        color-scheme: dark;
    }
}
:root[data-tema="scuro"] {
    --carta: #141A26;
    --superficie: #1D2433;
    --inchiostro: #E6EAF2;
    --quieto: #A3ADC2;
    --viola: #A596F5;
    --viola-scuro: #C3B9FA;
    --muschio: #3F9B6C;
    --muschio-scuro: #2A6D4B;
    --muschio-chiaro: #7FD1A4;
    --bordo: #34405A;
    --avviso: #3A3220;
    --avviso-bordo: #C79232;
    --errore: #40221F;
    --errore-bordo: #D06A5B;
    --ombra-blocco: #0B0F18;
    color-scheme: dark;
}

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

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

body {
    margin: 0;
    background: var(--carta);
    color: var(--inchiostro);
    font-family: var(--font);
    font-size: 1.125rem;
    line-height: 1.55;
}

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

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

h1, h2, h3 { line-height: 1.2; margin: 0 0 .6em; }
h1 { font-size: 1.75rem; }
h2 { font-size: 1.3rem; }
h3 { font-size: 1.1rem; }
p { margin: 0 0 .8em; }

/* ---------- Testata e menu ---------- */

.testata {
    display: flex;
    align-items: center;
    gap: 1rem;
    max-width: 760px;
    margin: 0 auto;
    padding: .9rem 1rem;
}
.marchio {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    font-weight: 700;
    font-size: 1.2rem;
    color: var(--inchiostro);
    text-decoration: none;
    margin-right: auto;
}
.marchio-cubo, .cubo {
    display: inline-block;
    width: 1.35em;
    height: 1.35em;
    background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M16 2 29 9.5 16 17 3 9.5z' fill='%237CC39C'/%3E%3Cpath d='M3 9.5 16 17v14L3 23.5z' fill='%233E8A63'/%3E%3Cpath d='M29 9.5 16 17v14l13-7.5z' fill='%232B6847'/%3E%3C/svg%3E");
}

.menu { display: flex; gap: .25rem; }
.menu a {
    display: flex;
    align-items: center;
    gap: .4rem;
    padding: .45rem .7rem;
    border-radius: var(--raggio);
    color: var(--quieto);
    text-decoration: none;
    font-weight: 600;
    font-size: 1rem;
}
.menu a[aria-current="page"] { background: var(--superficie); color: var(--inchiostro); box-shadow: inset 0 -3px 0 var(--muschio); }
.menu-icona { font-size: 1.05rem; }

.profilo { position: relative; }
.profilo summary {
    list-style: none;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 50%;
    background: var(--viola);
    color: #fff;
    display: grid;
    place-items: center;
    font-weight: 700;
    cursor: pointer;
}
.profilo summary::-webkit-details-marker { display: none; }
.profilo-menu {
    position: absolute;
    right: 0;
    top: 2.9rem;
    z-index: 20;
    min-width: 13rem;
    background: var(--superficie);
    border: 1px solid var(--bordo);
    border-radius: var(--raggio);
    padding: .6rem;
    display: grid;
    gap: .2rem;
    box-shadow: 0 6px 18px rgba(20, 26, 38, .18);
}
.profilo-menu p { margin: 0 .5rem .3rem; color: var(--quieto); font-size: .95rem; }
.profilo-menu a, .profilo-menu .collegamento { padding: .45rem .5rem; text-align: left; border-radius: 6px; text-decoration: none; }
.profilo-menu a:hover, .profilo-menu .collegamento:hover { background: var(--carta); }

.pagina { max-width: 760px; margin: 0 auto; padding: .5rem 1rem 3rem; }

/* Telefono: menu in basso, sempre nello stesso posto. */
@media (max-width: 719px) {
    .menu {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 15;
        background: var(--superficie);
        border-top: 1px solid var(--bordo);
        padding: .35rem .25rem calc(.35rem + env(safe-area-inset-bottom));
        justify-content: space-around;
    }
    .menu a { flex-direction: column; gap: .1rem; font-size: .8rem; padding: .3rem .4rem; flex: 1; text-align: center; }
    .menu a[aria-current="page"] { background: var(--carta); box-shadow: inset 0 3px 0 var(--muschio); }
    .menu-icona { font-size: 1.25rem; }
    .pagina { padding-bottom: 6.5rem; }
    h1 { font-size: 1.55rem; }
}

/* ---------- Elementi comuni ---------- */

.riquadro {
    background: var(--superficie);
    border: 1px solid var(--bordo);
    border-radius: var(--raggio);
    padding: 1.1rem 1.15rem;
    margin: 0 0 1.1rem;
}
.riquadro.evidenza { border: 2px solid var(--muschio); }
.vuoto { color: var(--quieto); }
.introduzione { color: var(--quieto); max-width: 62ch; }
.nota { color: var(--quieto); font-size: .95rem; }

.avviso { padding: .7rem .9rem; border-radius: var(--raggio); border-left: 5px solid var(--muschio); background: var(--superficie); margin: 0 0 1rem; }
.avviso-errore { border-left-color: var(--errore-bordo); background: var(--errore); }

.pulsante {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.9rem;
    padding: .55rem 1.2rem;
    border: 0;
    border-radius: var(--raggio);
    background: var(--viola);
    color: #fff;
    font: inherit;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
}
.pulsante:hover { background: var(--viola-scuro); color: #fff; }
:root[data-tema="scuro"] .pulsante, :root[data-tema="scuro"] .pulsante:hover { color: #141A26; }
@media (prefers-color-scheme: dark) { :root:not([data-tema="chiaro"]) .pulsante, :root:not([data-tema="chiaro"]) .pulsante:hover { color: #141A26; } }
.pulsante.secondario { background: transparent; color: var(--viola); box-shadow: inset 0 0 0 2px var(--viola); }
.pulsante.secondario:hover { background: var(--carta); color: var(--viola-scuro); }

.collegamento {
    background: none;
    border: 0;
    padding: 0;
    color: var(--viola);
    font: inherit;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}
.pulsante-icona {
    width: 2.5rem;
    height: 2.5rem;
    border: 1px solid var(--bordo);
    border-radius: 8px;
    background: var(--superficie);
    color: var(--inchiostro);
    font-size: 1.1rem;
    cursor: pointer;
}
.pulsante-icona:disabled { opacity: .35; cursor: default; }

/* ---------- Moduli ---------- */

.modulo { display: grid; gap: .9rem; }
.modulo label { display: grid; gap: .3rem; font-weight: 600; }
.modulo input:not([type="radio"]):not([type="checkbox"]), .modulo textarea, .indirizzo {
    width: 100%;
    min-height: 2.9rem;
    padding: .55rem .7rem;
    border: 1px solid var(--bordo);
    border-radius: 8px;
    background: var(--carta);
    color: var(--inchiostro);
    font: inherit;
    font-weight: 400;
}
.modulo textarea { resize: vertical; }
.modulo > .pulsante, .modulo > button { justify-self: start; }
.due-colonne { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: .9rem; }
.azioni { display: flex; flex-wrap: wrap; gap: .7rem; align-items: center; }
fieldset { border: 0; padding: 0; margin: 0; }
legend { font-weight: 600; margin-bottom: .4rem; }
.scelta-tipo { display: flex; flex-wrap: wrap; gap: .5rem; }
.scelta-tipo legend { width: 100%; }
.chip { display: inline-flex !important; grid-template-columns: none; align-items: center; gap: .35rem; padding: .45rem .8rem; border: 1px solid var(--bordo); border-radius: 999px; font-weight: 600; cursor: pointer; background: var(--carta); }
.chip:has(input:checked) { border-color: var(--viola); box-shadow: inset 0 0 0 1px var(--viola); }
.spunta-riga { display: flex !important; align-items: center; gap: .5rem; font-weight: 400 !important; }
.riga-modulo { grid-template-columns: 5.5rem 1fr auto; align-items: end; margin-top: .8rem; }
@media (max-width: 560px) { .riga-modulo { grid-template-columns: 5rem 1fr; } .riga-modulo .pulsante { grid-column: 1 / -1; } }

.accesso { max-width: 26rem; margin: 2rem auto; }
.password-provvisoria { font-size: 1.4rem; letter-spacing: .05em; }

/* ---------- Oggi (ragazzo) ---------- */

.oggi-testa { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.data-oggi { margin: 0; }
.contatore { display: inline-flex; align-items: center; gap: .45rem; margin: 0; padding: .4rem .85rem; background: var(--superficie); border: 1px solid var(--bordo); border-radius: 999px; font-weight: 700; font-variant-numeric: tabular-nums; }

.novita { border: 2px solid var(--avviso-bordo); background: var(--avviso); }
.elenco-novita { margin: 0 0 1rem; padding-left: 1.2rem; }
.elenco-novita li { margin-bottom: .35rem; }

.routine {
    background: var(--superficie);
    border: 1px solid var(--bordo);
    border-radius: var(--raggio);
    margin: 0 0 1.1rem;
    padding: .2rem 1.1rem;
}
.routine > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .8rem 0;
    cursor: pointer;
    list-style: none;
}
.routine > summary::-webkit-details-marker { display: none; }
.routine-nome { font-size: 1.3rem; font-weight: 700; }
.routine-conta { font-weight: 700; color: var(--quieto); font-variant-numeric: tabular-nums; }
.routine-completa .routine-conta { color: var(--muschio); }
.routine-fine { color: var(--muschio); font-weight: 600; }

.passi {
    list-style: none;
    margin: 0 0 1rem;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
    gap: .9rem;
}
.spunta { margin: 0; }

/* Il blocco: un tasto squadrato con lo spigolo inferiore spesso, come un blocco da costruzione.
   Da fare: vuoto, tratteggiato. Fatto: pieno, colorato, "posato". */
.blocco {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    display: grid;
    grid-template-rows: 1fr auto auto;
    justify-items: center;
    align-items: center;
    gap: .2rem;
    padding: .8rem .5rem .7rem;
    border: 2px dashed var(--bordo);
    border-radius: 8px;
    background: var(--carta);
    color: var(--inchiostro);
    font: inherit;
    cursor: pointer;
    box-shadow: 0 6px 0 var(--ombra-blocco);
    transform: translateY(-6px);
    transition: transform .12s ease-out, box-shadow .12s ease-out, background-color .12s;
}
.blocco:active { transform: translateY(-2px); box-shadow: 0 2px 0 var(--ombra-blocco); }
.blocco-icona { font-size: 2.6rem; line-height: 1; }
.blocco-testo { font-weight: 700; font-size: 1.1rem; text-align: center; line-height: 1.2; }
.blocco-stato { font-size: .85rem; color: var(--quieto); }

.blocco.posato {
    border: 2px solid var(--muschio-scuro);
    background: var(--muschio);
    color: #fff;
    box-shadow: inset 0 10px 0 var(--muschio-chiaro), 0 2px 0 var(--muschio-scuro);
    transform: translateY(0);
}
.blocco.posato .blocco-stato { color: #E9F7EF; font-weight: 600; }
.blocco.posato .blocco-stato::before { content: "✓ "; }
.blocco[aria-busy="true"] { opacity: .7; }

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

/* ---------- Eventi ---------- */

.eventi { list-style: none; margin: 0 0 .8rem; padding: 0; display: grid; gap: .55rem; }
.evento {
    display: grid;
    grid-template-columns: 2.4rem 1fr auto;
    gap: .7rem;
    align-items: start;
    padding: .65rem .75rem;
    border-radius: 8px;
    background: var(--carta);
    border-left: 5px solid var(--bordo);
}
.evento-verifica, .evento-interrogazione { border-left-color: var(--viola); }
.evento-consegna { border-left-color: var(--ambra); }
.evento-famiglia { border-left-color: var(--muschio); }
.evento-icona { font-size: 1.5rem; line-height: 1.2; }
.evento-testo { display: grid; gap: .1rem; }
.materia { color: var(--quieto); font-weight: 600; }
.quando { color: var(--quieto); font-size: .95rem; }
.distanza { font-weight: 700; white-space: nowrap; font-size: .95rem; }
.nota-evento { font-size: .95rem; }
.evento.annullato { opacity: .6; }
.evento.annullato strong { text-decoration: line-through; }
.evento-azioni { display: grid; gap: .3rem; justify-items: end; font-size: .95rem; }
.evento-azioni form { margin: 0; }
@media (max-width: 560px) {
    .evento { grid-template-columns: 2rem 1fr; }
    .evento .distanza, .evento-azioni { grid-column: 2; justify-items: start; }
    .evento-azioni { display: flex; gap: 1rem; }
}

.testa-pagina { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 1rem; }
.testa-pagina h1 { margin: 0; }
.mesi { display: flex; justify-content: space-between; align-items: center; gap: .5rem; margin: 0 0 1rem; }
.mesi h2 { margin: 0; text-align: center; }
.mesi a { font-weight: 600; white-space: nowrap; }
.giorni { list-style: none; margin: 0 0 1.5rem; padding: 0; }
.giorno { margin-bottom: 1.1rem; }
.giorno h3 { display: flex; gap: .7rem; align-items: baseline; }
.giorno h3 .distanza { color: var(--quieto); font-weight: 600; }
.giorno-oggi h3 { color: var(--muschio); }

/* ---------- Andamento (adulti) ---------- */

.settimana { width: 100%; border-collapse: collapse; margin-bottom: .8rem; }
.settimana th, .settimana td { padding: .45rem .25rem; text-align: center; border-bottom: 1px solid var(--bordo); }
.settimana th[scope="row"], .settimana thead th:first-child { text-align: left; font-weight: 600; }
.settimana thead th { font-size: .85rem; color: var(--quieto); font-weight: 600; }
.settimana .totale { font-weight: 700; white-space: nowrap; }
.punto { display: inline-block; width: 1.1rem; height: 1.1rem; border-radius: 3px; border: 2px dashed var(--bordo); vertical-align: middle; }
.punto.pieno { background: var(--muschio); border: 2px solid var(--muschio-scuro); }

.esiti, .note { list-style: none; margin: 0; padding: 0; display: grid; gap: .8rem; }
.esiti li, .note li { padding: .7rem .8rem; border-radius: 8px; background: var(--carta); }
.esiti p, .note p { margin: .3rem 0 0; }
.etichetta-va, .etichetta-rivedere { display: inline-block; font-size: .8rem; font-weight: 700; padding: .05rem .45rem; border-radius: 4px; margin-right: .3rem; }
.etichetta-va { background: var(--muschio); color: #fff; }
.etichetta-rivedere { background: var(--ambra); color: #1E2740; }
.note form { margin: .3rem 0 0; }

/* ---------- Routine (gestione) ---------- */

.gestione-routine.spenta { opacity: .75; }
.passi-gestione { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.passi-gestione li { display: grid; grid-template-columns: 2.6rem 1fr auto; gap: .6rem; align-items: center; padding: .35rem 0; border-bottom: 1px solid var(--bordo); }
.blocco-mini { width: 2.4rem; height: 2.4rem; display: grid; place-items: center; font-size: 1.4rem; border-radius: 6px; background: var(--carta); border: 1px solid var(--bordo); }
.passo-testo { font-weight: 600; }
.passo-azioni { display: flex; gap: .4rem; align-items: center; margin: 0; }
.impostazioni-routine { margin-top: 1rem; }
.impostazioni-routine summary { cursor: pointer; font-weight: 600; color: var(--viola); margin-bottom: .8rem; }
.impostazioni-routine form + form { margin-top: .8rem; }

/* ---------- Tabelle ---------- */

.tabella-scorre { overflow-x: auto; margin-bottom: 1.1rem; }
.tabella, .visibilita { width: 100%; border-collapse: collapse; background: var(--superficie); border: 1px solid var(--bordo); border-radius: var(--raggio); }
.tabella th, .tabella td, .visibilita th, .visibilita td { padding: .7rem .8rem; border-bottom: 1px solid var(--bordo); text-align: left; vertical-align: top; }
.tabella thead th, .visibilita thead th { background: var(--carta); font-size: .95rem; }
.visibilita tbody th { font-weight: 600; }
.in-arrivo { color: var(--quieto); }
.spento { opacity: .6; }
.azioni-riga { display: flex; flex-wrap: wrap; gap: .8rem; margin: 0; }
.regole { padding-left: 1.2rem; margin: 0; }
.regole li { margin-bottom: .5rem; }

/* Tabelle a schede sul telefono */
@media (max-width: 560px) {
    .tabella thead, .visibilita thead { display: none; }
    .tabella, .tabella tbody, .tabella tr, .tabella td,
    .visibilita, .visibilita tbody, .visibilita tr, .visibilita td, .visibilita tbody th { display: block; width: 100%; }
    .tabella tr, .visibilita tr { border-bottom: 2px solid var(--bordo); padding: .4rem 0; }
    .tabella td, .visibilita td { border: 0; padding: .25rem .8rem; }
    .visibilita tbody th { border: 0; padding: .4rem .8rem .2rem; }
    .tabella td::before, .visibilita td::before { content: attr(data-titolo) ": "; font-weight: 700; }
}

.pagina-login .testata { justify-content: center; }
.pagina-login .marchio { margin: 0; }

.tua-settimana { list-style: none; margin: 0 0 .6rem; padding: 0; display: grid; gap: .6rem; }
.tua-settimana li { display: grid; grid-template-columns: minmax(6rem, auto) auto 1fr; gap: .8rem; align-items: center; }
.tua-settimana strong { justify-self: end; font-variant-numeric: tabular-nums; }
.punti { display: inline-flex; gap: .3rem; }
@media (max-width: 420px) { .tua-settimana li { grid-template-columns: 1fr auto; } .tua-settimana .punti { grid-column: 1 / -1; grid-row: 2; } }