/* --- Carattere: Nunito Sans, ospitato qui (niente richieste a Google
   Fonts: piu' veloce e senza passare dati del visitatore a terzi). Font
   variabile, un file copre tutti i pesi 200-1000. --- */
@font-face {
    font-family: "Nunito Sans";
    font-style: normal;
    font-display: swap;
    font-weight: 200 1000;
    src: url(/fonts/nunito-sans-latin-wght-normal.woff2) format("woff2");
    unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
    font-family: "Nunito Sans";
    font-style: normal;
    font-display: swap;
    font-weight: 200 1000;
    src: url(/fonts/nunito-sans-latin-ext-wght-normal.woff2) format("woff2");
    unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
    font-family: "Nunito Sans";
    font-style: italic;
    font-display: swap;
    font-weight: 200 1000;
    src: url(/fonts/nunito-sans-latin-wght-italic.woff2) format("woff2");
    unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

:root {
    /* Verde dell'header, lo stesso della fetta verde del logo. */
    --verde-header: #a6d27e;
    --testo-header: #1d3a24;
    --verde: #2f7a4f;
    --verde-scuro: #1f5636;
    --arancio: #e07a2c;
    --grigio-testo: #2b2b2b;
    --grigio-chiaro: #f4f5f3;
    --bordo: #dcdfd9;
    --rosso: #b3392c;
    --raggio: 8px;
}

* { box-sizing: border-box; }

/* L'attributo nativo "hidden" deve sempre vincere: altrimenti una regola
   come ".campo { display: flex }" lo ignora e l'elemento resta visibile. */
[hidden] { display: none !important; }

/* Base tipografica piu' generosa, in stile ricettario (Giallo Zafferano):
   17px invece di 16 e interlinea 1.6. Tutte le misure del foglio sono in
   rem, quindi l'intera interfaccia cresce in proporzione senza toccare
   le singole regole. Il testo "da leggere" delle ricette sale ancora di
   piu', vedi il blocco TIPOGRAFIA DEL RICETTARIO in fondo. */
html { font-size: 106.25%; -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    font-family: "Nunito Sans", "Segoe UI", Roboto, -apple-system, sans-serif;
    color: var(--grigio-testo);
    background: var(--grigio-chiaro);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
    gap: 8px 16px;
    padding: 12px 24px;
    /* Verde chiaro dell'header (#a6d27e) al 75% con sfocatura dietro:
       l'effetto vetro lascia intuire il contenuto che scorre sotto senza
       renderlo leggibile. Su fondo chiaro il testo e' scuro. */
    background: rgba(166, 210, 126, 0.75);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    color: var(--testo-header);
    box-shadow: 0 1px 0 rgba(29, 58, 36, 0.18);
}

/* Browser senza sfocatura: il contenuto sotto si vedrebbe nitido e
   disturberebbe le icone, quindi l'header resta quasi pieno. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    header { background: rgba(166, 210, 126, 0.96); }
}

/* Il logo si puo' restringere (flex-shrink) sui telefoni stretti, dove le
   icone di navigazione hanno la precedenza: la larghezza cala e l'altezza
   la segue grazie a height:auto, senza deformare il disegno. */
.logo-porzioni {
    display: flex;
    align-items: center;
    flex: 0 1 auto;
    min-width: 72px;
    text-decoration: none;
    border-radius: 6px;
}
.logo-porzioni img {
    display: block;
    width: 152px;
    max-width: 100%;
    height: auto;
}
.logo-porzioni:hover { opacity: 0.85; }
.logo-porzioni:focus-visible { outline: 2px solid var(--testo-header); outline-offset: 3px; }

/* Solo per chi legge con uno screen reader: visivamente invisibile ma letto
   a voce, per non affidare tutta l'informazione all'emoji del bilancino. */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Il bilancino di famiglia nell'header: quanti kg persi/presi in totale,
   con il dettaglio per familiare al passaggio del mouse (o al focus da
   tastiera — tabindex sul contenitore, :focus-within sul menu). Niente
   JS: e' un men da tendina puramente CSS, la stessa tecnica gia' usata
   per il tooltip di .icona-nav. */
.bilancino-famiglia {
    position: relative;
    color: var(--testo-header);
    font-size: 0.85rem;
    font-weight: 600;
    padding: 5px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.5);
    cursor: default;
}
.bilancino-cifra { white-space: nowrap; }

/* DESKTOP: il bilancino sta all'estrema destra, dopo le icone. Nel markup
   viene prima della nav (ordine di lettura: logo, bilancio, menu), quindi
   si sposta con "order"; margin-left:auto sulla nav spinge icone e
   bilancino a destra insieme, lasciando il logo solo a sinistra. */
.bilancino-famiglia { order: 3; flex: 0 0 auto; }
.nav-header { order: 2; margin-left: auto; }

.bilancino-menu {
    display: none;
    position: absolute;
    top: 100%;
    /* A filo del bordo destro dell'header: aperto verso sinistra per non
       uscire dalla finestra. */
    right: 0;
    margin-top: 8px;
    background: #fff;
    color: #222;
    border-radius: var(--raggio);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
    padding: 12px 16px;
    min-width: 210px;
    z-index: 200;
}
.bilancino-famiglia:hover .bilancino-menu,
.bilancino-famiglia:focus .bilancino-menu,
.bilancino-famiglia:focus-within .bilancino-menu {
    display: block;
}
.bilancino-titolo { margin: 0 0 8px; font-size: 0.78rem; color: #767a72; }
.bilancino-menu ul { list-style: none; margin: 0 0 8px; padding: 0; }
.bilancino-menu li {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    padding: 3px 0;
    font-size: 0.92rem;
    border-bottom: 1px dashed var(--bordo);
}
.bilancino-menu li:last-child { border-bottom: none; }
.bilancino-totale {
    margin: 6px 0 0;
    padding-top: 8px;
    border-top: 1px solid var(--bordo);
    font-size: 0.92rem;
    display: flex;
    justify-content: space-between;
    gap: 14px;
}

.nav-header {
    display: flex;
    align-items: center;
    /* Niente a capo: l'header e' fisso e la sua altezza deve restare
       costante, altrimenti il padding-top del body non basta piu' e la
       prima riga della pagina finisce sotto la barra. Le icone si
       stringono sui telefoni (vedi media query in fondo) invece di
       passare alla riga successiva. */
    flex-wrap: nowrap;
    gap: 4px;
}

header a {
    color: var(--testo-header);
    text-decoration: none;
    font-size: 0.9rem;
    white-space: nowrap;
}

/* Icone di navigazione: solo l'emoji, senza bordo ne' riquadro. Il nome
   della sezione compare al passaggio del mouse leggendo data-etichetta,
   cosi' il markup resta una riga di icone ma il significato non si
   perde. */
.icona-nav {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    font-size: 1.35rem;
    line-height: 1;
    border-radius: 50%;
}
.icona-nav:hover,
.icona-nav:focus-visible { background: rgba(255, 255, 255, 0.5); }

.icona-nav::after {
    content: attr(data-etichetta);
    position: absolute;
    top: calc(100% + 4px);
    left: 50%;
    transform: translateX(-50%);
    padding: 5px 9px;
    border-radius: 6px;
    background: rgba(20, 45, 30, 0.95);
    color: #fff;
    font-size: 0.75rem;
    line-height: 1.2;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.12s ease;
    /* L'etichetta non deve mai intercettare il mouse: se lo facesse,
       comparendo sotto l'icona ruberebbe il :hover e lampeggerebbe. */
    pointer-events: none;
}
.icona-nav:hover::after,
.icona-nav:focus-visible::after { opacity: 1; visibility: visible; }

/* L'ultima icona e' a filo del bordo destro: l'etichetta centrata
   uscirebbe dalla finestra, quindi qui si allinea a destra. */
.nav-header > .icona-nav:last-child::after {
    left: auto;
    right: 0;
    transform: none;
}

/* Su touch il :hover resta appiccicato dopo il tocco e l'etichetta
   rimarrebbe a schermo: li' non serve mostrarla. */
@media (hover: none) {
    .icona-nav::after { content: none; }
}

/* Il body compensa l'header fuori dal flusso. Ora che l'header e' una
   riga sola di altezza nota (12 + 40 + 12) il valore e' calcolato, non
   piu' stimato a occhio. */
body { padding-top: 76px; }

/* "Accedi con Google" nell'header, per chi non ha fatto l'accesso. Stile
   del pulsante ufficiale di Google: fondo bianco, bordo grigio, "G" a
   colori. Il testo breve compare solo su smartphone (vedi sotto). */
header a.accedi-header {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
    height: 40px;
    padding: 0 14px 0 12px;
    border: 1px solid #747775;
    border-radius: 20px;
    background: #fff;
    color: #1f1f1f;
    font-family: Roboto, "Segoe UI", Arial, sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
    transition: background 0.15s ease, box-shadow 0.15s ease;
}
header a.accedi-header:hover { background: #f8faff; box-shadow: 0 1px 3px rgba(60, 64, 67, 0.3); }
header a.accedi-header:focus-visible { outline: 2px solid var(--testo-header); outline-offset: 2px; }
.accedi-header-g { flex: 0 0 auto; display: block; }
.accedi-header-breve { display: none; }

/* SMARTPHONE: due righe (tre col bilancino). Sopra il logo al centro,
   sotto le icone al centro su tutta la larghezza, poi il bilancino.
   L'header qui non e' piu' "fixed" ma "sticky": resta in cima allo
   scorrimento come prima (con l'effetto vetro), ma occupa il suo posto
   nel flusso. Cosi' l'altezza puo' cambiare — una riga per chi non ha
   fatto l'accesso, due per chi ha le icone — senza un padding-top del
   body calcolato a mano che andrebbe fuori sincrono a ogni ritocco. */
@media (max-width: 720px) {
    header {
        position: sticky;
        flex-wrap: wrap;
        justify-content: center;
        gap: 6px 0;
        padding: 8px 10px;
        /* Da "sticky" l'header conta per la larghezza della pagina (da
           "fixed" no): le etichette nascoste delle icone a destra la
           allargherebbero, con uno scorrimento orizzontale. "clip" taglia
           solo in orizzontale: il menu del bilancino si apre ancora in
           basso. */
        overflow-x: clip;
    }
    body { padding-top: 0; }
    .logo-porzioni {
        flex: 0 0 100%;
        justify-content: center;
    }
    .logo-porzioni img { width: 130px; }
    /* Il bilancino ha una riga tutta sua, sotto le icone: sulla riga del
       logo e su quella delle icone non c'e' spazio. E' una pillola bassa,
       centrata, e la riga aggiunge poco all'altezza dell'header. Il menu
       col dettaglio si apre centrato sotto la pillola. */
    .bilancino-famiglia {
        order: 3;
        padding: 2px 10px;
        font-size: 0.78rem;
        line-height: 1.5;
    }
    .nav-header { margin-left: 0; }
    .bilancino-menu {
        right: auto;
        left: 50%;
        transform: translateX(-50%);
        margin-top: 6px;
    }
    /* Stesso posto del bilancino (chi non ha fatto l'accesso non ce l'ha):
       sulla riga del logo, a destra, in versione compatta. */
    header a.accedi-header {
        position: absolute;
        top: 50%;
        right: 10px;
        transform: translateY(-50%);
        height: 32px;
        gap: 6px;
        padding: 0 10px 0 8px;
        font-size: 0.82rem;
    }
    .accedi-header-esteso { display: none; }
    .accedi-header-breve { display: inline; }
    .nav-header {
        flex: 0 0 100%;
        justify-content: center;
        gap: 2px;
    }
    /* Una riga tutta per le icone: possono essere piu' grandi di prima,
       e se sono tante (menu amministratore) si stringono invece di
       uscire dallo schermo. */
    .icona-nav {
        flex: 0 1 38px;
        min-width: 24px;
        width: auto;
        height: 38px;
        font-size: 1.25rem;
    }
    /* Le ancore del pianificatore compensavano l'header fisso: ora e' alto
       due righe. */
    body [id^="slot-"] { scroll-margin-top: 140px; }
}

@media (max-width: 400px) {
    .logo-porzioni img { width: 120px; }
    .icona-nav { height: 34px; font-size: 1.15rem; }
    /* Con il menu amministratore (14 icone) a 360px non resta spazio per
       lo spazio fra le icone: senza, la prima uscirebbe dallo schermo. */
    .nav-header { gap: 0; }
}

main {
    max-width: 960px;
    margin: 0 auto;
    padding: 24px;
}

h1, h2, h3 { color: var(--verde-scuro); }

.pulsante,
button {
    display: inline-block;
    background: var(--verde);
    color: #fff;
    border: none;
    padding: 10px 18px;
    border-radius: var(--raggio);
    font-size: 1rem;
    text-decoration: none;
    cursor: pointer;
}
.pulsante:hover, button:hover { background: var(--verde-scuro); }

.pulsante-secondario {
    display: inline-block;
    margin-left: 8px;
    padding: 10px 18px;
    border-radius: var(--raggio);
    text-decoration: none;
    color: var(--grigio-testo);
    border: 1px solid var(--bordo);
}
.pulsante-secondario:hover { background: var(--grigio-chiaro); }

.scheda {
    background: #fff;
    border: 1px solid var(--bordo);
    border-radius: var(--raggio);
    padding: 20px;
    margin-bottom: 20px;
}

/* Titoletti di sezione in stile Giallo Zafferano: maiuscolo, grassetto, con
   una barretta verde (lo stesso verde dell'header) sotto invece del loro
   giallo. position:relative sull'h2 e' necessario perche' la barretta e' un
   ::after posizionato in assoluto. */
.scheda h2 {
    position: relative;
    margin: 0 0 20px;
    padding-bottom: 12px;
    font-size: 1.55rem;
    font-weight: 600;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.scheda h2::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 56px;
    height: 4px;
    border-radius: 2px;
    background: var(--verde-header);
}

.griglia-form {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 14px 20px;
}

.campo { display: flex; flex-direction: column; gap: 4px; }
.campo label { font-size: 0.85rem; font-weight: 600; }
.campo input, .campo select, .campo textarea {
    padding: 8px 10px;
    border: 1px solid var(--bordo);
    border-radius: var(--raggio);
    font-size: 1rem;
}
.campo textarea {
    min-height: 4.5em;
    resize: vertical;
    font-family: inherit;
}

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

.griglia-checkbox {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    margin: 4px 0;
}
.checkbox-etichetta {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: normal;

    font-size: 0.95rem;
    cursor: pointer;
}
.checkbox-etichetta input[type="checkbox"] {
    width: auto;    margin: 0;
}
.opzione-attivita {
    display: block;
    font-weight: normal;
    font-size: 0.9rem;
    padding: 8px 0;
    cursor: pointer;
}
.opzione-attivita input[type="radio"] { width: auto; margin-right: 6px; }

.avviso {
    background: #fdf0e3;
    border-left: 4px solid var(--arancio);
    padding: 10px 14px;
    border-radius: var(--raggio);
    margin: 10px 0;
}
.avviso-ok {
    background: #eaf3ec;
    border-left-color: var(--verde, #3f6b4a);
}
/* Il refeed non è un problema da segnalare come gli altri .avviso (ricetta
   ripetuta, fuori stagione...): è una buona notizia programmata, quindi
   colore ed emoji diversi invece del solito arancione "attenzione". */
.avviso-refeed {
    background: #fdece3;
    border-left-color: #d9531e;
    font-weight: 600;
}

/* Copertina della singola ricetta. aspect-ratio fisso e object-fit:cover
   evitano il salto di layout mentre l'immagine arriva: senza, la pagina si
   riassesta sotto le dita di chi ha gia' iniziato a scorrere. */
.ricetta-copertina {
    margin: 0 0 18px;
}
.ricetta-copertina img {
    width: 100%;
    max-height: 460px;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: var(--raggio);
    display: block;
    background: var(--grigio-chiaro);
}

.errore {
    background: #fbe9e7;
    border-left: 4px solid var(--rosso);
    padding: 10px 14px;
    border-radius: var(--raggio);
    margin: 10px 0;
}

.membri {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px;
}
.foto-galleria {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px;
}
.foto-galleria figure { margin: 0; }
.foto-galleria img { width: 100%; border-radius: var(--raggio); display: block; object-fit: cover; aspect-ratio: 3 / 4; }
.foto-galleria figcaption { font-size: 0.85rem; color: #555; margin-top: 4px; text-align: center; }

.membro-nome { font-size: 1.1rem; font-weight: 700; }
.membro-sotto { color: #666; font-size: 0.9rem; margin-bottom: 10px; }

/* I bottoni dentro una scheda membro (famiglia, obiettivi) riempiono tutta
   la larghezza della scheda invece di restare stretti sul loro testo: una
   fila di card larghe uguali con un bottoncino piccolo a sinistra sembra
   sproporzionata, soprattutto quando affiancate ad altre card piu' piene
   di testo. Scoperto qui (.membri .scheda), non su .pulsante in generale:
   altrove (dentro un form, in mezzo a un paragrafo) un bottone a larghezza
   piena sarebbe sbagliato.  */
.membri .scheda > p > a.pulsante,
.membri .scheda > p > a.pulsante-secondario {
    display: block;
    width: 100%;
    box-sizing: border-box;
    text-align: center;
}

.macro-riga {
    display: flex;
    justify-content: space-between;
    padding: 4px 0;
    border-bottom: 1px dashed var(--bordo);
}
.macro-riga:last-child { border-bottom: none; }

/* Timeline delle tappe verso l'obiettivo di peso. */
.tappe-percorso { list-style: none; margin: 0 0 12px; padding: 0; }
.tappa {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px dashed var(--bordo);
}
.tappa:last-child { border-bottom: none; }
.tappa-numero {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--grigio-chiaro);
    font-size: 0.9rem;
    font-weight: 700;
}
.tappa-raggiunta .tappa-numero { background: none; font-size: 1.2rem; }
.tappa-peso { flex: 0 0 auto; min-width: 90px; }
.tappa-data { flex: 1 1 auto; color: #666; font-size: 0.9rem; text-align: right; }
.tappa-raggiunta .tappa-data { color: var(--verde-scuro); }
.tappa-aperta { opacity: 0.85; }

/* La torta delle porzioni: la pentola vista dall'alto. Il dettaglio per
   persona (nome, peso, quota, calorie) sta nella tabella subito sotto, non
   in una legenda a fianco: l'emoji della tabella e' gia' l'identificatore,
   ripeterlo qui con un pallino colorato sarebbe la stessa informazione due
   volte. */
.torta-blocco {
    display: flex;
    justify-content: center;
    margin: 4px 0 18px;
}
.torta-porzioni { flex: 0 0 auto; max-width: 100%; height: auto; }

/* Quanto ne tocca a ciascuno, nella pagina della ricetta. */
.tabella-porzioni {
    width: 100%;
    border-collapse: collapse;
    margin: 4px 0 16px;
}
.tabella-porzioni th,
.tabella-porzioni td {
    text-align: left;
    padding: 7px 10px 7px 0;
    border-bottom: 1px solid var(--bordo);
}
.tabella-porzioni th {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #6a6a6a;
}
/* Le colonne numeriche a destra: allineate a destra si confrontano a colpo
   d'occhio, che e' l'unico motivo per cui sono in tabella e non in un
   elenco. */
.tabella-porzioni td + td,
.tabella-porzioni th + th { text-align: right; padding-right: 0; }
.tabella-porzioni tr:last-child td { border-bottom: none; }
/* Proteine, grassi, carboidrati e fibra: numeri piu' piccoli delle
   calorie e con un po' d'aria a sinistra, perche' con otto colonne le
   cifre allineate a destra finirebbero attaccate. */
.tabella-porzioni .col-macro { padding-left: 12px; font-size: 0.92em; white-space: nowrap; }
.tabella-porzioni th.col-macro { font-size: 0.72rem; }

/* Le calorie "con la quota", quando si scostano da quelle esatte. In tono
   minore apposta: e' un dato di controllo, non il numero da leggere. */
.scarto-quota {
    color: var(--arancio);
    font-size: 0.82em;
    white-space: nowrap;
}

/* Anche quattro colonne non stanno comode in 360 px, e impilarle farebbe
   perdere il confronto fra righe, che e' l'unico motivo per cui sono in
   tabella: meglio farla scorrere in orizzontale. Solo sui telefoni, perche'
   display:block su una <table> le toglie il calcolo normale delle
   larghezze e sul desktop non serve. */
@media (max-width: 640px) {
    .tabella-porzioni {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }
    .tabella-porzioni th,
    .tabella-porzioni td { padding-right: 14px; }
    .tabella-porzioni td + td,
    .tabella-porzioni th + th { padding-right: 0; }
}

.divisione-istruzione {
    margin: 0 0 10px;
    padding: 12px 14px;
    background: var(--grigio-chiaro);
    border-left: 3px solid var(--verde);
    border-radius: 0 var(--raggio) var(--raggio) 0;
}

.pillola {
    display: inline-block;
    background: var(--grigio-chiaro);
    border: 1px solid var(--bordo);
    border-radius: 999px;
    padding: 2px 10px;
    font-size: 0.8rem;
    margin-left: 6px;
}
a.pillola {
    text-decoration: none;
    color: var(--verde-scuro);
    font-weight: 600;
}
a.pillola:hover { background: #e5ede8; }

.pillola-passo {
    font-size: 0.75rem;
    white-space: nowrap;
}
.pillola-cottura { background: #fdeee5; border-color: #f0c9a8; }
.pillola-attesa { background: #eef1fb; border-color: #c9d0f0; }

.pillola-pericolo {
    background: none;
    border: 1px solid var(--rosso);
    color: var(--rosso);
    cursor: pointer;
    font-size: 0.8rem;
    padding: 2px 10px;
}
.pillola-pericolo:hover { background: #fbe9e7; }

/* Piano alimentare settimanale. */
.nav-settimana {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 8px 0 20px;
    padding: 10px 14px;
    background: #fff;
    border: 1px solid var(--bordo);
    border-radius: var(--raggio);
    flex-wrap: wrap;
}

.titolo-giorno {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin: 32px 0 12px;
    padding-bottom: 6px;
    border-bottom: 2px solid var(--bordo);
}
.titolo-giorno-oggi { border-bottom-color: var(--verde); }
.data-giorno { color: #6a6a6a; font-size: 0.9rem; font-weight: 400; }

.pasto-intestazione {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
}
.pasto-intestazione h3 { margin: 0; }

.pillola-confermato {
    background: none;
    border-color: var(--verde);
    color: var(--verde-scuro);
}

.cambia-pasto {
    margin-top: 14px;
    padding-top: 10px;
    border-top: 1px dashed var(--bordo);
}
.cambia-pasto summary {
    cursor: pointer;
    color: var(--verde-scuro);
    font-size: 0.9rem;
    font-weight: 600;
}
.form-cambia-pasto {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 10px;
}
.form-cambia-pasto select {
    flex: 1 1 240px;
    padding: 6px 8px;
    border: 1px solid var(--bordo);
    border-radius: var(--raggio);
}

.link-discreto {
    background: none;
    border: none;
    padding: 0;
    color: #888;
    font-size: 0.82rem;
    text-decoration: underline;
    cursor: pointer;
}
.link-discreto:hover { color: var(--rosso); }

.azioni-slot {
    display: flex;
    gap: 14px;
    margin-top: 6px;
}
.form-inline { display: inline; margin: 0; }

/* L'ancora #slot-... (vedi la rotta POST /famiglia/piano/slot) deve fermarsi
   sotto l'header fisso, non dietro — altrimenti "casuale"/"cambia"
   riporterebbero al pasto giusto ma con la sua intestazione nascosta. */
[id^="slot-"] { scroll-margin-top: 90px; }

.riga-individuale {
    padding: 10px 0;
    border-top: 1px solid var(--bordo);
}
.riga-individuale:first-child { border-top: none; padding-top: 0; }
.nome-membro { margin: 0 0 6px; }

.scelta-modalita {
    border: 1px solid var(--bordo);
    border-radius: var(--raggio);
    padding: 10px 14px;
    margin: 0 0 14px;
}
.scelta-modalita legend { font-weight: 700; color: var(--verde-scuro); padding: 0 6px; }
.scelta-modalita .checkbox-etichetta { margin-right: 18px; }

/* Preset dieta e allergeni, pagina preferenze alimentari. */
.scelte-dieta { display: flex; gap: 10px; flex-wrap: wrap; margin: 10px 0 18px; }

.griglia-allergeni {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.allergene-bottone { position: relative; display: inline-block; }
.allergene-bottone input {
    position: absolute;
    opacity: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    cursor: pointer;
}
.allergene-bottone span {
    display: inline-block;
    padding: 7px 14px;
    border: 1px solid var(--bordo);
    border-radius: 999px;
    background: #fff;
    font-size: 0.88rem;
    transition: background 0.1s, color 0.1s, border-color 0.1s;
}
/* Il bottone "si illumina di rosso" quando l'allergene e' segnato: qui non
   e' un avviso da minimizzare (come .pillola-pericolo altrove), e' lo
   stato attivo di un interruttore — colore pieno, non solo il bordo. */
.allergene-bottone input:checked + span {
    background: var(--rosso);
    border-color: var(--rosso);
    color: #fff;
    font-weight: 600;
}
.allergene-bottone input:focus-visible + span { outline: 2px solid var(--verde-scuro); outline-offset: 2px; }

/* Pagina "Valuta ricette". */
.elenco-valuta { list-style: none; margin: 0; padding: 0; }
.riga-valuta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding: 10px 0;
    border-top: 1px solid var(--bordo);
}
.riga-valuta:first-child { border-top: none; }
.riga-incompatibile { opacity: 0.65; }
.motivo-incompatibile { color: var(--rosso); font-size: 0.85rem; }

/* Pagina di verifica reparti: le righe finite in Dispensa senza una vera
   regola (solo il ripiego) si evidenziano, sono quelle da controllare. */
.riga-senza-regola { background: #fdf3e8; }

/* Grafico a linee (peso/altezza/BMI nel tempo) e la sua legenda. */
.grafico-linee { width: 100%; max-width: 680px; height: auto; display: block; }
.grafico-legenda {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    margin-top: 8px;
}
.legenda-voce { display: inline-flex; align-items: center; gap: 6px; font-size: 0.85rem; color: #555; }
.legenda-pallino {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex: 0 0 auto;
}

.pulsante-pericolo {
    display: inline-block;
    background: var(--rosso);
    color: #fff;
    border: none;
    padding: 10px 18px;
    border-radius: var(--raggio);
    font-size: 1rem;
    cursor: pointer;
    margin-top: 10px;
}
.pulsante-pericolo:hover { background: #8f2e23; }

.tabella-modifica {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}
.tabella-modifica th, .tabella-modifica td {
    padding: 6px 8px;
    border-bottom: 1px solid var(--bordo);
    text-align: left;
    vertical-align: top;
}
.tabella-modifica select, .tabella-modifica input[type="text"], .tabella-modifica input[type="number"] {
    width: 100%;
    box-sizing: border-box;
}
.avviso-match {
    color: var(--arancio);
    font-size: 0.78rem;
}
.riga-passo {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin-bottom: 8px;
}
.riga-passo textarea {
    flex: 1 1 auto;
    width: 100%;
    min-height: 5.5em;
    padding: 8px 10px;
    border: 1px solid var(--bordo);
    border-radius: var(--raggio);
    font-size: 1rem;
    font-family: inherit;
    box-sizing: border-box;
    resize: vertical;
}
.riga-passo label {
    flex: 0 0 220px;
    font-size: 0.8rem;
}
.riga-passo-tempi {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 16px;
}
.riga-passo-tempi label {
    flex: 0 0 140px;
}
.riga-passo-tempi select,
.riga-passo-tempi input {
    padding: 8px 10px;
    border: 1px solid var(--bordo);
    border-radius: var(--raggio);
    font-size: 1rem;
    width: 100%;
    box-sizing: border-box;
}

footer.disclaimer {
    max-width: 960px;
    margin: 0 auto 30px;
    padding: 0 24px;
    font-size: 0.8rem;
    color: #777;
}
.footer-link {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
    padding: 18px 0 14px;
    border-top: 1px solid var(--bordo);
    font-size: 0.85rem;
}
.footer-link a { color: var(--verde-scuro); font-weight: 600; }

table {
    width: 100%;
    border-collapse: collapse;
    margin: 10px 0;
}
th, td {
    text-align: left;
    padding: 8px 10px;
    border-bottom: 1px solid var(--bordo);
}
th {
    background: var(--grigio-chiaro);
    font-size: 0.85rem;
}

.percentile-box {
    background: var(--grigio-chiaro);
    border-radius: var(--raggio);
    padding: 14px 16px;
    margin-top: 10px;
}
.riferimento-italiano {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--bordo);
}
/* --- Grafico "a gobba" del percentile (partials/percentile_gobba.php) --- */
.percentile-gobba {
    text-align: center;
    margin: 14px 0 4px;
}
.percentile-gobba svg {
    width: 100%;
    height: auto;
    display: block;
    overflow: visible;
}
.percentile-gobba--grande svg { max-width: 480px; margin: 0 auto; }
.percentile-gobba--normale svg { max-width: 340px; margin: 0 auto; }
.percentile-gobba--compatta svg { max-width: 220px; margin: 0 auto; }
.percentile-gobba-area-meno { fill: #7fb88f; fill-opacity: 0.55; }
.percentile-gobba-area-piu { fill-opacity: 0.75; }
.percentile-gobba-curva {
    fill: none;
    stroke: #55524c;
    stroke-width: 1.4;
    stroke-linejoin: round;
}
.percentile-gobba-base { stroke: #c9c4ba; stroke-width: 1; }
.percentile-gobba-marker {
    stroke: #2b2b27;
    stroke-width: 2;
    stroke-dasharray: 3 2;
}
.percentile-gobba-punto {
    fill: #2b2b27;
    stroke: #fff;
    stroke-width: 1.5;
}
.percentile-gobba-tu {
    font-size: 11px;
    font-weight: 700;
    fill: #2b2b27;
}
.percentile-gobba-caption {
    margin-top: 6px;
    font-size: 0.92rem;
}
.percentile-gobba--compatta .percentile-gobba-caption { font-size: 0.82rem; }
.percentile-gobba--grande .percentile-gobba-caption { font-size: 1.08rem; }
.percentile-gobba-caption strong { color: #b3392c; }

/* --- Generazione ricette --- */
.testata-prompt{display:flex;justify-content:space-between;align-items:center;gap:1rem}
.testata-prompt h2{margin:0}
.monospazio{width:100%;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.82rem;line-height:1.45;padding:10px;border:1px solid var(--bordo);
  border-radius:8px;background:#fdfdfc;resize:vertical}
.nota-porzioni{font-size:.9rem;color:var(--tenue,#6b6660);
  border-left:3px solid var(--verde,#3f6b4a);padding-left:.75rem;margin-top:1rem}
button.secondario{background:transparent;color:var(--verde,#3f6b4a);
  border:1px solid var(--verde,#3f6b4a);padding:.35rem .9rem;border-radius:6px;cursor:pointer}
button.secondario:hover{background:var(--verde,#3f6b4a);color:#fff}

/* --- Elenco ricette: schede a tutta larghezza --------------------------
   Anatomia presa dalle liste dei siti di ricette: tipo di pasto in alto,
   titolo grande e cliccabile, descrizione troncata, riga di dati in fondo
   con le icone. La colonna foto compare solo se la ricetta ha foto_url:
   senza immagine il testo occupa tutta la scheda invece di lasciare un
   riquadro vuoto.
   Palette: quella di Porzioni. Il titolo resta verde scuro come ogni altro
   h2 del sito, l'arancio marca il tipo di pasto. -------------------------- */

.elenco-ricette {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 14px;
}

.ricetta-scheda {
    display: flex;
    gap: 18px;
    background: #fff;
    border: 1px solid var(--bordo);
    border-radius: var(--raggio);
    padding: 18px 20px;
}


.ricetta-foto {
    flex: 0 0 190px;
    aspect-ratio: 4 / 3;
    border-radius: 6px;
    overflow: hidden;
    background: var(--grigio-chiaro);
}
.ricetta-foto a { display: block; width: 100%; height: 100%; }
.ricetta-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }

.ricetta-corpo { flex: 1 1 auto; min-width: 0; }

.ricetta-pasto {
    margin: 0 0 4px;
    color: var(--arancio);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.ricetta-titolo { margin: 0 0 6px; font-size: 1.32rem; line-height: 1.25; }
.ricetta-titolo a { color: var(--verde-scuro); text-decoration: none; }
.ricetta-titolo a:hover { text-decoration: underline; }

/* La scheda NON e' piu' cliccabile per intero (prima lo era con un ::after
   del titolo steso su tutto il box): i pulsanti "Piace a" stanno dentro la
   scheda, e mancarli di pochi pixel portava fuori dalla pagina. Ora aprono
   la ricetta solo il titolo e la foto, lontani dai pulsanti. */
.ricetta-titolo a:focus-visible { outline: 2px solid var(--verde); outline-offset: 3px; }

.ricetta-descrizione {
    margin: 0 0 14px;
    color: #6a6a6a;
    font-size: 0.93rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ricetta-piede {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 18px;
}

.ricetta-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
    color: #555;
    font-size: 0.88rem;
}
.ricetta-meta span { display: inline-flex; align-items: center; gap: 6px; }
.ricetta-meta .icona { color: var(--verde); flex: 0 0 auto; }

.ricetta-segni { display: flex; flex-wrap: wrap; gap: 6px; }

.segno {
    display: inline-block;
    border: 1px solid var(--bordo);
    border-radius: 999px;
    padding: 2px 10px;
    font-size: 0.78rem;
    color: #555;
    background: var(--grigio-chiaro);
}

@media (max-width: 640px) {
    .ricetta-scheda { flex-direction: column; gap: 12px; padding: 16px; }
    .ricetta-foto { flex-basis: auto; width: 100%; }
    .ricetta-titolo { font-size: 1.18rem; }
    .ricetta-piede { flex-direction: column; align-items: flex-start; }
}

/* --------------------------------------------------------------------
   Ricerca ricette (homepage e scroll infinito del ricettario).
   Il box riusa ".scheda" per lo stesso sfondo bianco delle altre sezioni,
   i risultati riusano ".elenco-ricette"/".ricetta-scheda" gia' definite
   sopra: qui serve solo il contorno del motore di ricerca in se'.
   -------------------------------------------------------------------- */

.ricerca-home {
    background: #fff;
    border: 1px solid var(--bordo);
    border-radius: var(--raggio);
    padding: 20px;
    margin: 20px 0;
}
.ricerca-home h2 { margin-top: 0; }

/* --------------------------------------------------------------------
   Box "Installa Porzioni" in homepage: stessa scheda bianca della
   ricerca, icona dell'app a sinistra (e' quella che l'utente ritrovera'
   sulla schermata Home), pulsante verde in fondo.
   -------------------------------------------------------------------- */
.installa-app {
    background: #fff;
    border: 1px solid var(--bordo);
    border-left: 4px solid var(--verde-header);
    border-radius: var(--raggio);
    padding: 18px 20px;
    margin: 20px 0;
}
.installa-app-testa {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}
.installa-app-icona {
    flex: 0 0 auto;
    width: 64px;
    height: 64px;
    border-radius: 14px;
    border: 1px solid var(--bordo);
}
.installa-app h2 { margin: 0 0 4px; font-size: 1.15rem; }
.installa-app-testa p { margin: 0; color: #555; font-size: 0.95rem; max-width: 42em; }

.installa-app-istruzioni {
    margin: 14px 0 0;
    padding: 12px 14px;
    background: var(--grigio-chiaro);
    border-radius: var(--raggio);
    font-size: 0.93rem;
}
.installa-app-istruzioni p { margin: 0; }
.installa-app-istruzioni ol { margin: 6px 0 0; padding-left: 1.3em; }
.installa-app-istruzioni li + li { margin-top: 4px; }
.installa-app-simbolo {
    display: inline-flex;
    vertical-align: -3px;
    color: #1a73e8;
}

/* Una sola versione dei testi alla volta: telefono di base, computer
   quando il JS aggiunge .su-computer al box. */
.installa-app .per-computer { display: none; }
.installa-app.su-computer .per-telefono { display: none; }
.installa-app.su-computer .per-computer { display: block; }
.installa-app.su-computer span.per-computer { display: inline; }
.installa-app-istruzioni .per-computer p + p { margin-top: 6px; }

.installa-app-fatto {
    margin: 14px 0 0;
    font-weight: 600;
    color: var(--verde-scuro);
}

.installa-app-pulsante {
    display: block;
    margin-top: 16px;
    font-weight: 600;
}

@media (max-width: 640px) {
    .installa-app { padding: 16px; }
    .installa-app-icona { width: 52px; height: 52px; border-radius: 12px; }
    .installa-app-pulsante { width: 100%; }
}

.ricerca-home .elenco-ricette { margin-top: 16px; }

.ricerca-messaggio {
    color: #6a6a6a;
    font-size: 0.9rem;
    margin: 10px 0 0;
}

.stato-caricamento {
    text-align: center;
    color: #6a6a6a;
    font-size: 0.88rem;
    padding: 14px 0;
}

/* Bersaglio invisibile per l'IntersectionObserver dello scroll infinito:
   non deve avere "hidden" (l'osservatore smetterebbe di vederlo), ma non
   deve nemmeno occupare spazio visibile nella pagina. */
.sentinella {
    height: 1px;
}

/* Checkbox disabilitata perche' e' l'ultima rimasta spuntata: resta
   leggibile come "attiva e bloccata", non come "non disponibile". */
.checkbox-etichetta input[type="checkbox"]:disabled {
    cursor: not-allowed;
}
.checkbox-etichetta:has(input[type="checkbox"]:disabled) {
    opacity: 0.7;
}

/* --------------------------------------------------------------------
   Gradimento "piace"/"non piace" per membro: un pulsante a pillola per
   ciascuno, ciclico (non espresso -> piace -> non piace -> non espresso).
   La scheda non ha piu' un'area cliccabile sotto i pulsanti: un click
   fuori bersaglio di qualche pixel ora non fa nulla.
   -------------------------------------------------------------------- */

.preferenza-ricetta {
    margin-top: 12px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 8px;
    position: relative;
}

.preferenza-etichetta {
    font-size: 0.82rem;
    color: #6a6a6a;
}

.preferenza-accedi {
    margin: 0;
    font-size: 0.85rem;
    color: #6a6a6a;
    position: relative;
}
.preferenza-accedi a { position: relative; }

.pref-pillola {
    position: relative;
    font: inherit;
    font-size: 0.82rem;
    padding: 3px 12px;
    border-radius: 999px;
    border: 1px solid var(--bordo);
    background: #fff;
    color: var(--grigio-testo);
    cursor: pointer;
}
.pref-pillola:hover { border-color: #b9c4ba; }
.pref-pillola:disabled { opacity: 0.6; cursor: default; }

.pref-pillola.pref-piace {
    background: #eef4ef;
    border-color: #c7d8cb;
    color: var(--verde-scuro);
}
.pref-pillola.pref-non-piace {
    background: #fbeceb;
    border-color: #e3bdb7;
    color: var(--rosso);
}

/* --------------------------------------------------------------------
   Pagina "Le nostre ricette preferite" (stampabile).
   -------------------------------------------------------------------- */

.preferiti-intestazione {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.preferiti-azioni {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

/* Il titolo di schermo e quello di stampa sono due elementi diversi
   apposta: a schermo il titolo sta accanto al pulsante "Stampa", in
   stampa quel pulsante sparisce e serve comunque un titolo da solo. */
.solo-stampa { display: none; }

/* Segnaposto dei fori per il raccoglitore: mai visibili a schermo, e di
   default nemmeno in stampa. Diventano dei cerchi in @media print solo
   quando <html> ha la classe .raccoglitore-attivo (vedi
   public/js/preferiti_raccoglitore.js). */
.fori-raccoglitore { display: none; }

.filtro-membri {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    margin: 16px 0 24px;
    padding: 14px 18px;
    background: #fff;
    border: 1px solid var(--bordo);
    border-radius: var(--raggio);
}

.sezione-preferiti {
    margin: 28px 0 14px;
    padding-bottom: 6px;
    border-bottom: 2px solid var(--bordo);
}
.sezione-preferiti:first-of-type { margin-top: 8px; }

.griglia-box-preferiti {
    display: grid;
    /* 320 e non 280: dentro ogni box c'e' una tabella con una colonna per
       familiare piu' la pentola, e sotto i 320 px le colonne diventano
       cosi' strette che i numeri vanno a capo in mezzo. */
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 14px;
    align-items: stretch;
}

.box-preferita {
    background: #fff;
    border: 1px solid var(--bordo);
    border-radius: var(--raggio);
    padding: 14px 16px;
    /* Non serve altro che un blocco normale: niente dentro il box usa
       flex-grow, quindi "display: block" basta gia' a schermo. In stampa
       la riga di griglia stretta tutti i box alla stessa altezza a
       prescindere da come e' fatto dentro (vedi ".griglia-box-preferiti
       { align-items: stretch }"): un tempo qui c'era display:flex, ma in
       stampa Chrome a volte non disegna il bordo fino in fondo a un box
       flex "stirato" dalla griglia, tagliandolo prima della sua vera
       altezza — con un blocco semplice il bordo segue sempre l'altezza
       vera, stirata o no. */
    display: block;
}

.box-titolo {
    margin: 0 0 6px;
    font-size: 0.92rem;
    line-height: 1.25;
}

.box-tabella {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.7rem;
    /* table-layout: fixed e' la parte che conta. Senza, la larghezza delle
       colonne la decide il contenuto piu' lungo: bastava una riga come
       "≈ 6,5 🍆" in colonna Pentola per allargare la tabella oltre il
       riquadro che la contiene, e il testo usciva dal bordo. Con le
       larghezze fissate il contenuto si adatta alla colonna, non il
       contrario. */
    table-layout: fixed;
}
.box-tabella th,
.box-tabella td {
    padding: 2px 4px;
    text-align: right;
    white-space: nowrap;
    /* Ultima difesa: una parola piu' larga della sua colonna va spezzata
       invece di sbordare. */
    overflow-wrap: anywhere;
}
.box-tabella th:first-child,
.box-tabella td:first-child {
    text-align: left;
    white-space: normal;
    /* Il nome dell'ingrediente e' l'unica colonna che ha bisogno di spazio
       vero; i numeri si dividono quel che resta. */
    width: 26%;
}
/* La pentola porta due righe ("485 g" e "≈ 9 🥚") e l'intestazione piu'
   lunga: le si da' un po' piu' di posto, altrimenti "Pentola" si spezza a
   meta' parola. Le colonne senza larghezza dichiarata si spartiscono in
   parti uguali quello che avanza — e' il comportamento di table-layout:
   fixed, ed e' quello che serve qui: le colonne dei familiari sono tante
   o poche a seconda della famiglia. */
.box-tabella th:last-child,
.box-tabella td:last-child {
    width: 20%;
}
.box-tabella thead th {
    border-bottom: 1px solid var(--bordo);
    font-weight: 600;
    color: #555;
}

/* Chi ha messo "piace" proprio su questa ricetta risalta; chi compare nel
   box solo perche' fa parte della famiglia selezionata (la ricetta e' in
   elenco perche' piace a qualcuno, non per forza a lui) si attenua. */
.th-piace {
    font-weight: 700;
    color: var(--verde-scuro);
}
.th-non-piace {
    opacity: 0.5;
    font-weight: 500;
}

.box-tabella tbody tr:nth-child(odd) { background: var(--grigio-chiaro); }
.box-tabella tfoot td {
    border-top: 1px solid var(--bordo);
    font-weight: 600;
}
.box-totale { color: var(--verde-scuro); }

.box-secondario {
    display: block;
    color: #888;
    font-size: 0.82em;
    /* La riga secondaria puo' andare a capo anche se la cella e' nowrap:
       e' quella lunga ("≈ 6,5 🍆", "160 g"), ed e' meglio su due righe che
       fuori dal bordo. */
    white-space: normal;
}

.box-vuoto { margin: 0; color: #6a6a6a; }

/* Procedimento nel box: nascosto di base, compare con la spunta "Con il
   procedimento" (classe sul contenitore, messa dal server o dal JS). */
.box-procedimento { display: none; }
.con-procedimento .box-procedimento {
    display: block;
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px solid var(--bordo);
}
.box-procedimento-titolo {
    margin: 0 0 4px;
    font-size: 0.78rem;
    color: var(--verde-scuro);
}
.box-procedimento ol {
    margin: 0;
    padding-left: 1.3em;
    font-size: 0.78rem;
    line-height: 1.4;
}
.box-procedimento li + li { margin-top: 3px; }

/* --------------------------------------------------------------------
   Stampa: la pagina delle preferite e' l'unica pensata per finire su
   carta, quindi qui si nasconde tutto cio' che serve solo a schermo
   (header fisso, filtro, pulsante).

   Margine di base 0.5 cm su tutti i lati: e' quello che vale SEMPRE,
   raccoglitore o no. Con "Raccoglitore ad anelli" spuntato,
   public/js/preferiti_raccoglitore.js scrive dentro
   #stile-pagina-raccoglitore due regole @page :left/:right piu'
   specifiche di questa, che per le sole pagine dispari/pari alzano il
   margine sul lato di rilegatura a 1.5 cm - quella e' l'unica differenza,
   il resto (0.5 cm sugli altri tre lati) resta questo.
   -------------------------------------------------------------------- */
/* Lista della spesa, raggruppata per reparto: due colonne appaiate sia a
   schermo (da tablet in su) sia in stampa, per starci in una pagina sola —
   e' un elenco corto per reparto, non ha senso sprecarci sotto larghezze
   intere. column-count invece di due <div> fisse: bilancia da solo quanto
   testo mettere in ciascuna colonna, e un reparto non si spezza a meta'
   fra le due (break-inside: avoid). */
.lista-spesa-colonne { column-count: 1; column-gap: 32px; }
@media (min-width: 640px) {
    .lista-spesa-colonne { column-count: 2; }
}

.reparto-spesa {
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
    margin: 0 0 20px;
}
.reparto-spesa h2 {
    margin: 0 0 8px;
    padding-bottom: 4px;
    font-size: 1.05rem;
    border-bottom: 1px solid var(--bordo);
}
.reparto-spesa ul { list-style: none; margin: 0; padding: 0; }
.reparto-spesa li {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;
    padding: 3px 0;
    font-size: 0.92rem;
    border-bottom: 1px dotted var(--bordo);
}
.reparto-spesa li:last-child { border-bottom: none; }
.nome-voce { flex: 1 1 auto; }
.qta-voce { flex: 0 0 auto; color: #555; text-align: right; white-space: nowrap; }

/* Le voci della lista rispondono al passaggio del mouse / pressione
   prolungata (vedi lista_spesa_dettaglio.js): il puntatore "aiuto" e un
   lieve sfondo al passaggio segnalano che c'e' altro da vedere, senza
   bisogno di istruzioni scritte. */
.voce-spesa { cursor: help; border-radius: 4px; }
.voce-spesa:hover, .voce-spesa:focus-visible { background: var(--grigio-chiaro); outline: none; }

.popup-dettaglio-spesa {
    position: absolute;
    z-index: 500;
    max-width: 300px;
    background: #fff;
    border: 1px solid var(--bordo);
    border-radius: var(--raggio);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
    padding: 12px 14px;
    font-size: 0.85rem;
}
.popup-dettaglio-elenco { list-style: none; margin: 0; padding: 0; }
.popup-dettaglio-elenco li {
    padding: 6px 0;
    border-top: 1px solid var(--bordo);
}
.popup-dettaglio-elenco li:first-child { border-top: none; padding-top: 0; }
.popup-dettaglio-membro { color: #6a6a6a; }
.popup-dettaglio-caricamento, .popup-dettaglio-errore, .popup-dettaglio-vuoto {
    margin: 0;
    color: #6a6a6a;
}

@media print {
    .popup-dettaglio-spesa { display: none !important; }
}

@media print {
    @page {
        margin: 0.5cm;
    }

    .lista-spesa-colonne { column-count: 2; column-gap: 26px; }
    .reparto-spesa li { font-size: 0.85rem; }

    body {
        padding-top: 0;
        background: #fff;
    }

    header,
    footer.disclaimer,
    .no-print {
        display: none !important;
    }

    .solo-stampa { display: block; margin: 0 0 8px; font-size: 1.3rem; }

    main {
        max-width: none;
        margin: 0;
        padding: 0;
    }

    .box-titolo { font-size: 0.76rem; margin-bottom: 3px; }

    /* Meno spazio e un filo piu' sottile intorno al titolo di sezione: e'
       quanto di piu' vicino a un <hr> c'e' in questa pagina, ed e' lo
       spazio che si recupera piu' facilmente senza toccare i box stessi. */
    .sezione-preferiti {
        margin: 8px 0 6px;
        padding-bottom: 3px;
        border-bottom: 1px solid var(--bordo);
        font-size: 0.95rem;
        break-after: avoid;
        page-break-after: avoid;
    }
    .sezione-preferiti:first-of-type { margin-top: 0; }

    /* Il problema visto in stampa (una riga chiara che spuntava oltre
       l'ultimo box, o in cima a una pagina successiva) veniva dal bordo A
       QUATTRO LATI di ".box-preferita" definito per lo schermo piu' in
       alto in questo file: restava nascosto nei bordi interni (coperto da
       quello piu' scuro sotto), ma un box che inizia una pagina nuova non
       ha nulla sopra di se' a coprirlo, e quel bordo chiaro spuntava fuori
       da solo. Un "border: none" sul box avrebbe dovuto bastare, ma il
       problema si e' ripresentato lo stesso.

       Soluzione alla radice invece di rincorrere la cascata: qui
       ".box-preferita" resta senza bordo (border-color: transparent, non
       solo "none": azzera anche se qualcos'altro in futuro tornasse a
       impostarne uno), fa solo da cella di griglia. Il bordo vero e proprio
       lo porta ".box-riquadro", un elemento nuovo di zecca creato apposta
       per la stampa (vedi templates/preferiti_stampa.php): non avendo
       nessuna regola precedente da cui ereditare nulla, non puo' spuntare
       fuori un bordo che nessuno gli ha mai dato. Ogni riquadro e' bordato
       per intero sui 4 lati (niente piu' bordo condiviso fra contenitore e
       box): un pizzico di spazio fra un box e l'altro invece che il
       contatto perfetto, ma niente piu' rischio di righe fantasma. */
    /* Tre colonne di default; con piu' di tre membri in famiglia la
       tabella di ogni box ha troppe colonne (una a testa piu' il Tot) per
       restare leggibile in tre box affiancati, quindi il server manda la
       classe "colonne-2" invece di "colonne-3" (vedi $colonneBox nella
       rotta) e qui si mette due box per riga, tre righe invece di tre
       righe da tre. */
    .griglia-box-preferiti.colonne-3 {
        grid-template-columns: repeat(3, 1fr);
        gap: 6px;
    }
    .griglia-box-preferiti.colonne-2 {
        grid-template-columns: repeat(2, 1fr);
        gap: 6px;
    }

    .box-preferita {
        border: 1px solid transparent;
        border-radius: 0;
        padding: 0;
        break-inside: avoid;
        page-break-inside: avoid;
        height: 100%;
    }

    .box-riquadro {
        border: 1px solid #999;
        height: 100%;
        box-sizing: border-box;
        padding: 6px 8px;
        background: #fff;
    }

    .box-tabella { font-size: 0.58rem; }
    .box-tabella th, .box-tabella td { padding: 1px 2px; }
    .con-procedimento .box-procedimento { margin-top: 4px; padding-top: 3px; }
    .box-procedimento-titolo { font-size: 0.6rem; margin-bottom: 1px; }
    .box-procedimento ol { font-size: 0.58rem; line-height: 1.3; padding-left: 1.2em; }
    .box-procedimento li + li { margin-top: 1px; }
    .box-secondario { font-size: 0.78em; }

    /* Fori del raccoglitore: due cerchi fissati sul foglio (in stampa,
       "position: fixed" si ripete identico su ogni pagina generata) a
       0.25 cm dal bordo sinistro. Quel valore sta dentro il margine anche
       nel caso piu' stretto (0.5 cm, sul lato "corto" quando i margini
       sono alternati), quindi non finisce mai sopra il contenuto - ma per
       lo stesso motivo non e' centrato nel margine largo da 1.5 cm sul
       lato di rilegatura: e' il compromesso che si puo' ottenere con
       elementi fissi, che non sanno su quale pagina fisica cadono per
       spostarsi da soli da un lato all'altro. */
    html.raccoglitore-attivo .foro-raccoglitore {
        display: block;
        position: fixed;
        left: 0.25cm;
        width: 0.6cm;
        height: 0.6cm;
        border: 1px solid #999;
        border-radius: 50%;
        background: #fff;
    }
    /* Piccolo punto al centro del cerchio: e' il riferimento su cui
       appoggiare la punta del foratore, il cerchio intorno serve solo a
       vedere quanto viene largo il foro. */
    html.raccoglitore-attivo .foro-raccoglitore::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 2px;
        height: 2px;
        margin: -1px 0 0 -1px;
        background: #666;
        border-radius: 50%;
    }
    html.raccoglitore-attivo .foro-1 { top: 30%; }
    html.raccoglitore-attivo .foro-2 { top: 65%; }
}

/* --- Pillola di benessere --- */
.pillola-consiglio {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: var(--grigio-chiaro);
    border-left: 3px solid var(--verde);
    border-radius: var(--raggio);
    padding: 12px 14px;
    margin: 14px 0;
}
.pillola-consiglio-emoji {
    font-size: 1.2rem;
    line-height: 1.4;
    flex: 0 0 auto;
}
.pillola-consiglio p {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.5;
}
.pillola-footer {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    max-width: 720px;
    margin: 24px auto 0;
    padding: 12px 16px;
    background: var(--grigio-chiaro);
    border-radius: var(--raggio);
}
.pillola-footer p {
    margin: 0;
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--grigio-testo);
}

/* --- Richieste di ricette --- */
.tabella-richieste { width: 100%; border-collapse: collapse; }
.tabella-richieste th,
.tabella-richieste td { text-align: left; padding: 8px 6px; border-bottom: 1px solid var(--bordo); vertical-align: top; }
.tabella-richieste th { font-size: 0.85rem; color: #666; font-weight: 600; }

.pillola-stato {
    display: inline-block; padding: 2px 9px; border-radius: 999px;
    font-size: 0.75rem; font-weight: 700; color: #fff; white-space: nowrap;
}
.stato-attesa      { background: #8d8d8d; }
.stato-lavorazione { background: var(--arancio); }
.stato-pronta      { background: var(--verde); }
.stato-rifiutata   { background: #a04040; }

.filtri-richieste { display: flex; flex-wrap: wrap; gap: 10px; }
.filtri-richieste .filtro { text-decoration: none; color: #666; font-size: 0.9rem; }
.filtri-richieste .filtro-attivo { color: var(--verde-scuro); font-weight: 700; }

.richiesta h2 { margin-top: 0; }

/* --- Etichetta delle ricette per minori --- */
.etichetta-minori { margin: -6px 0 14px; color: #666; font-size: 0.92rem; }
.badge-minori {
    display: inline-block; margin-right: 8px; padding: 3px 10px;
    border-radius: 999px; background: var(--verde); color: #fff;
    font-size: 0.75rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.03em;
}

/* Pallino di notifica sull'icona di navigazione */
.icona-nav-notifica { position: relative; }
.pallino-notifica {
    position: absolute;
    top: -1px;
    right: -2px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #d4342c;
    /* Il bordo "stacca" il pallino dall'emoji: dello stesso colore
       dell'header, cosi' sembra un ritaglio. */
    border: 2px solid var(--verde-header);
    box-sizing: content-box;
}
.disclaimer-testo { margin: 14px 0 0; }

/* --- Pagina di presentazione (visitatori senza account) --- */

/* L'HERO: deve vincere il confronto visivo col box del calcolatore subito
   sotto, non limitarsi ad "appoggiarcisi sopra" come testo qualunque.
   Centrato, titolo grande, molto spazio verticale: la stessa ricetta di
   qualunque hero — poco testo, tanto respiro — usata apposta per un
   contrasto netto col box compatto e incorniciato del calcolatore. */
.presentazione-hero {
    text-align: center;
    padding: 28px 0 6px;
    margin: 4px 0 0;
}
.presentazione-hero .presentazione-occhiello { text-align: center; }
.presentazione-hero .presentazione-titolo {
    font-size: clamp(1.9rem, 4.2vw, 2.7rem);
    max-width: 18em;
    margin: 0 auto 16px;
}
.presentazione-hero .presentazione-intro {
    max-width: 40em;
    margin: 0 auto;
    font-size: 1.12rem;
}

/* La dimostrazione concreta: stessa pentola, porzioni diverse. Numeri di
   esempio, non calcolati — e' un disegno del concetto, non un'anteprima
   funzionante (quella e' il calcolatore, sotto). Dà all'hero un contenuto
   visivo suo, invece di essere solo tre righe di testo su sfondo bianco. */
.presentazione-demo {
    max-width: 30em;
    margin: 22px auto 4px;
    padding: 16px 20px;
    background: #fff;
    border: 1px solid var(--bordo);
    border-radius: var(--raggio);
}
.presentazione-demo-etichetta {
    margin: 0 0 10px;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--verde);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.presentazione-demo-piatto { margin: 0 0 12px; font-size: 1.15rem; font-weight: 700; }
.presentazione-demo-porzioni {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 18px;
    font-size: 0.95rem;
    color: #444;
}
.presentazione-demo-porzioni strong { color: var(--verde-scuro); }
.presentazione-demo-nota { margin: 12px 0 0; color: #888; }

/* Anteprima "wow" dell'obiettivo, in cima alla home per chi non ha ancora
   fatto login (vedi templates/home.php e partials/anteprima_obiettivo_*).
   Sfondo piatto e discreto, di proposito: e' lo STRUMENTO di ingresso, non
   il prodotto — deve leggersi come un invito ad agire, non come la cosa
   piu' appariscente della pagina (quel ruolo spetta all'hero sopra). */
.anteprima-obiettivo {
    background: var(--grigio-chiaro);
    border: 1px solid var(--bordo);
    border-radius: var(--raggio);
    padding: 22px 26px 20px;
    margin: 24px 0 30px;
}
.anteprima-occhiello {
    margin: 0 0 6px; color: var(--verde); font-weight: 700;
    font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.05em;
}
.anteprima-titolo-sezione { margin: 0 0 8px; line-height: 1.2; font-size: 1.3rem; }
.anteprima-intro { margin: 0 0 20px; font-size: 1.02rem; color: #444; max-width: 46em; }
.anteprima-form { margin: 0 0 4px; }
.anteprima-azione-form { margin: 4px 0 0; }
.anteprima-caricamento { color: #666; font-style: italic; }

/* Il risultato: titolo "wow" grande, la gobba sotto, poi l'invito ad
   accedere. Centrato perche' e' pensato per essere letto da solo, non
   affiancato ad altro — su schermo largo resta comunque dentro il blocco
   a piena larghezza, non in una delle due colonne piu' sotto. */
.anteprima-risultato { text-align: center; padding-top: 4px; }
.anteprima-eyebrow {
    margin: 0 0 2px;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--verde);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.anteprima-titolo {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 6px 0 6px;
    color: var(--verde-scuro);
}
.anteprima-titolo strong { color: var(--rosso); }
.anteprima-data {
    display: block;
    font-size: 0.95rem;
    font-weight: 400;
    color: #666;
    margin-top: 2px;
}
.anteprima-sottotitolo { margin: 0 0 4px; font-size: 1.02rem; color: #444; }
.nota-fonte { margin: 4px 0 0; font-size: 0.88rem; }
.nota-fonte a { color: #5a7a3a; }
.anteprima-scienza {
    max-width: 44em;
    margin: 18px auto 0;
    padding: 16px 18px;
    background: #fff;
    border: 1px solid var(--bordo);
    border-left: 4px solid var(--verde);
    border-radius: var(--raggio);
    text-align: left;
    font-size: 0.92rem;
    color: #444;
}
.anteprima-scienza-titolo {
    margin: 0 0 8px;
    font-weight: 700;
    font-size: 1rem;
    color: var(--verde-scuro);
}
.anteprima-scienza p { margin: 0 0 10px; }
.anteprima-scienza p:last-child { margin-bottom: 0; }
.anteprima-famiglia {
    max-width: 42em;
    margin: 14px auto 0;
    padding: 10px 14px;
    background: var(--grigio-chiaro);
    border-radius: var(--raggio);
    font-size: 0.92rem;
}
.anteprima-azione { margin: 34px 0 4px; }
.anteprima-ricalcola { margin: 18px 0 6px; }

/* L'invito a registrarsi sotto il risultato dei calcolatori standalone
   (partials/cta_calcolatore.php). Separato dal risultato da una riga
   sottile, non da un riquadro in piu': deve leggersi come la naturale
   continuazione del numero appena calcolato, non come un banner. */
.cta-calcolatore {
    max-width: 42em;
    margin: 26px auto 8px;
    padding-top: 22px;
    border-top: 1px solid var(--bordo);
    text-align: center;
}
.cta-calcolatore-titolo {
    margin: 0 0 8px;
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1.3;
}
.cta-calcolatore-testo { margin: 0 0 14px; }
.cta-calcolatore-vantaggi {
    display: inline-block;
    margin: 0 auto;
    padding: 0;
    list-style: none;
    text-align: left;
    font-size: 0.95rem;
}
.cta-calcolatore-vantaggi li { margin: 6px 0; }
.cta-calcolatore-vantaggi span { display: inline-block; width: 1.6em; }
.cta-calcolatore-azione { margin-top: 20px; }
.cta-calcolatore-secondaria { margin: 14px 0 0; font-size: 0.95rem; }

.presentazione { margin: 4px 0 28px; }
.presentazione-occhiello {
    margin: 0 0 6px; color: var(--verde); font-weight: 700;
    font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.05em;
}
.presentazione-titolo { margin: 0 0 10px; line-height: 1.2; }
.presentazione-intro { margin: 0 0 24px; font-size: 1.08rem; color: #444; max-width: 46em; }

.presentazione-punti {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 18px;
}
.presentazione-punti article {
    background: #fff;
    border: 1px solid var(--bordo);
    border-radius: var(--raggio);
    padding: 16px 18px;
}
.presentazione-punti h2 { margin: 6px 0 6px; font-size: 1.05rem; }
.presentazione-punti p { margin: 0; color: #555; font-size: 0.95rem; }
.presentazione-punti p.presentazione-slogan {
    font-weight: 700;
    color: var(--verde-scuro);
    margin: 0 0 8px;
}
.presentazione-emoji { font-size: 1.6rem; line-height: 1; }

.presentazione-azione { margin: 40px 0 32px; text-align: center; }
.presentazione-nota-finale { text-align: center; color: #777; }
.pulsante-grande { font-size: 1.05rem; padding: 12px 22px; }
.avviso-match-ricetta ul { margin: 8px 0 4px; padding-left: 20px; }
.avviso-match-ricetta li { margin-bottom: 4px; }
.lista-ingredienti-base { margin: 10px 0; padding-left: 20px; }
.lista-ingredienti-base li { margin-bottom: 5px; }

/* --- Pesate: misure della bilancia impedenziometrica --- */

/* Chiuso di default: chi ha una bilancia normale non deve scorrere otto
   campi che non compilerà mai per arrivare al pulsante di salvataggio. */
.misure-bilancia {
    margin: 14px 0;
    padding: 12px 14px;
    background: var(--grigio-chiaro);
    border-radius: var(--raggio);
}
.misure-bilancia > summary {
    cursor: pointer;
    font-weight: 600;
    font-size: 0.9rem;
}
.misure-bilancia[open] > summary { margin-bottom: 10px; }

.griglia-misure {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 14px;
    margin: 12px 0;
}
.nota-misura {
    color: var(--grigio-testo);
    opacity: 0.75;
    line-height: 1.35;
}

/* Con tutte le misure compilate la tabella ha dieci colonne: su telefono
   scorre in orizzontale invece di schiacciare le celle fino a spezzare
   ogni numero su tre righe. */
.tabella-scorrevole {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.tabella-pesate {
    width: 100%;
    border-collapse: collapse;
    white-space: nowrap;
}
.tabella-pesate th,
.tabella-pesate td {
    padding: 8px 10px;
    border-bottom: 1px solid var(--bordo);
    text-align: left;
}
.tabella-pesate tbody tr:hover { background: var(--grigio-chiaro); }

/* Campi dentro le celle: stretti quanto basta al numero, allineati fra
   loro. Senza una larghezza fissa ogni colonna si dimensiona sul valore più
   lungo e la tabella balla a ogni modifica. */
.tabella-pesate .cella-numero { width: 6.5rem; }
.tabella-pesate input {
    padding: 5px 7px;
    border: 1px solid var(--bordo);
    border-radius: var(--raggio);
    font-size: 0.9rem;
    background: #fff;
}
.tabella-pesate input:focus {
    outline: 2px solid var(--verde);
    outline-offset: -1px;
}

.azioni-riga {
    display: flex;
    gap: 6px;
    align-items: center;
}

/* Verde pieno: è l'azione che conferma la modifica appena fatta, e in una
   riga piena di campi deve essere evidente quale pulsante la salva. */
.pulsante-salva-riga {
    padding: 5px 12px;
    font-size: 0.8rem;
    color: #fff;
    background: var(--verde);
    border: 1px solid var(--verde);
    border-radius: var(--raggio);
    cursor: pointer;
}
.pulsante-salva-riga:hover { background: var(--verde-scuro); border-color: var(--verde-scuro); }

/* Il pallino riprende il colore della linea di quel familiare nei grafici
   sotto: lega la riga della tabella alla sua curva senza una legenda in più. */
.pallino-membro {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 6px;
    vertical-align: baseline;
}

/* Rosso ma non urlato: è un'azione distruttiva che sta in ogni riga della
   tabella, e un pulsante pieno su venti righe diventa un muro di allarmi.
   Si accende al passaggio del mouse, quando sta per essere premuto. */
.pulsante-elimina {
    padding: 4px 10px;
    font-size: 0.8rem;
    color: var(--rosso);
    background: transparent;
    border: 1px solid var(--bordo);
    border-radius: var(--raggio);
    cursor: pointer;
}
.pulsante-elimina:hover {
    background: var(--rosso);
    border-color: var(--rosso);
    color: #fff;
}

/* Il promemoria dell'altezza per chi sta crescendo: non è un errore, è una
   cosa che conviene fare oggi — colore dell'attenzione, non dell'allarme. */
.avviso-altezza {
    border-left: 4px solid var(--arancio);
    background: #fdf5ec;
}

/* =====================================================================
   PIANIFICATORE DEL PERIODO
   Griglia fissa in alto, catalogo sotto che si filtra sulla casella
   selezionata. Vedi templates/pianificatore.php.
   ===================================================================== */

.periodo-barra {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 12px;
    margin: 0 0 14px;
}
.periodo-barra strong { font-size: 1.05rem; }
.periodo-barra small { color: #6a6a6a; }

/* Le quattro porte: bottoni larghi con la spiegazione sotto il titolo.
   La replica e' la predefinita e va per prima, quindi e' l'unica piena. */
.porte-elenco { display: grid; gap: 10px; }
.porta {
    display: block;
    width: 100%;
    text-align: left;
    padding: 12px 14px;
    border: 1px solid var(--bordo);
    border-radius: var(--raggio);
    background: #fff;
    cursor: pointer;
    font: inherit;
    color: inherit;
}
.porta:hover { border-color: var(--verde); }
.porta-primaria { border-color: var(--verde); background: var(--grigio-chiaro); }
.porta-titolo { display: block; font-weight: 600; margin-bottom: 3px; }
.porta small { display: block; color: #5a5a5a; line-height: 1.35; }
.porta-durata { display: block; margin-bottom: 6px; }
.porta-durata small { display: block; color: #6a6a6a; }

/* La griglia resta visibile mentre si scorre il catalogo: e' il punto di
   tutta la pagina, perche' si sceglie guardando le caselle vicine (che
   cosa c'era ieri, cosa c'e' domani) e non si puo' scegliere alla cieca. */
.griglia-periodo {
    position: sticky;
    top: 0;
    z-index: 5;
    background: #fff;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--bordo);
    margin-bottom: 16px;
}
.griglia-barra {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding: 6px 0;
}
.griglia-conteggio { font-weight: 600; }
.griglia-barra small { color: #6a6a6a; }

/* Su schermi bassi (un telefono in orizzontale, un portatile piccolo) una
   griglia di 14 giorni non ci sta: si limita l'altezza e si scorre dentro,
   invece di far sparire il catalogo sotto il bordo dello schermo. */
.griglia-scorrevole { max-height: 46vh; overflow-y: auto; }

.tabella-griglia { width: 100%; border-collapse: collapse; }
.tabella-griglia th, .tabella-griglia td {
    border: 1px solid var(--bordo);
    padding: 6px 8px;
    vertical-align: top;
    text-align: left;
}
.tabella-griglia thead th { background: var(--grigio-chiaro); font-size: 0.85rem; }
.col-giorno { width: 78px; white-space: nowrap; }
.giorno-nome { display: block; font-weight: 600; }
.giorno-data { display: block; font-size: 0.78rem; color: #6a6a6a; font-weight: 400; }
.riga-festiva > .col-giorno { background: var(--grigio-chiaro); }

.casella { cursor: pointer; min-width: 120px; }
.casella:hover { background: var(--grigio-chiaro); }
.casella-titolo { display: block; font-size: 0.88rem; line-height: 1.25; }
.casella-nota { color: #9a9a9a; }
.casella-vuota { background: repeating-linear-gradient(135deg, #fff, #fff 6px, #fbfbfa 6px, #fbfbfa 12px); }
/* Scelta a mano: il sorteggio non la tocca, e si deve vedere prima di
   premere "ripesca" — altrimenti si rischia di ripescare temendo di
   perdere le proprie scelte. */
.casella-manuale { border-left: 3px solid var(--verde); }
.casella-attiva { outline: 2px solid var(--verde); outline-offset: -2px; background: var(--grigio-chiaro); }
.casella-saltata .casella-titolo { font-style: italic; }
.casella-in-corso { opacity: 0.5; }

.casella-badge {
    display: inline-block;
    margin-top: 3px;
    font-size: 0.72rem;
    color: #6a6a6a;
}
/* Una ricetta diventata non gradita DOPO essere finita in piano: non si
   toglie da sola (la spesa potrebbe essere gia' fatta), si segnala. */
.badge-veto { color: var(--rosso); font-weight: 600; }
.badge-stagione { color: var(--arancio); }
.casella-veto { background: #fdf3f2; }

/* Il catalogo, sotto la griglia */
.catalogo-casella {
    border: 1px solid var(--bordo);
    border-radius: var(--raggio);
    padding: 12px 14px;
    margin-bottom: 18px;
}
.catalogo-intestazione {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}
.catalogo-intestazione h2 { margin: 0; font-size: 1.05rem; }
.catalogo-azioni { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.catalogo-nota { margin: 6px 0 10px; color: #6a6a6a; }
.catalogo-elenco {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 8px;
}
.catalogo-bottone {
    display: block;
    width: 100%;
    text-align: left;
    padding: 8px 10px;
    border: 1px solid var(--bordo);
    border-radius: var(--raggio);
    background: #fff;
    cursor: pointer;
    font: inherit;
    color: inherit;
}
.catalogo-bottone:hover { border-color: var(--verde); background: var(--grigio-chiaro); }
.catalogo-titolo { display: block; font-weight: 600; font-size: 0.92rem; }
.catalogo-meta { display: block; font-size: 0.76rem; color: #6a6a6a; }
.catalogo-badge { display: inline-block; margin-top: 3px; font-size: 0.72rem; color: #6a6a6a; }
.catalogo-voce-attuale .catalogo-bottone { border-color: var(--verde); background: var(--grigio-chiaro); }
.catalogo-vuoto { color: #6a6a6a; }

.riga-partecipanti { align-items: center; gap: 10px; margin-bottom: 6px; }
.riga-partecipanti-etichetta { min-width: 110px; font-size: 0.85rem; color: #6a6a6a; }

/* =====================================================================
   REPERTORIO INDIVIDUALE (pagina delle preferite)
   ===================================================================== */

.repertorio { margin-bottom: 26px; }
.repertorio-membro { margin-bottom: 14px; }
.repertorio-blocchi {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 14px;
}
.repertorio-blocco h4 { margin: 0 0 4px; }
.repertorio-elenco { list-style: none; margin: 0 0 6px; padding: 0; }
.repertorio-elenco li { margin-bottom: 6px; }
.repertorio-titolo { flex: 1 1 auto; font-size: 0.9rem; }
.repertorio-volte input { width: 56px; }
.repertorio-volte small { color: #6a6a6a; }
.repertorio-aggiungi { margin-top: 6px; }

/* Il contatore di copertura: quanti giorni su sette copre il repertorio.
   Non e' un errore stare sotto o sopra — e' un'informazione, e il colore
   la rende leggibile senza doverla contare. */
.repertorio-copertura { margin: 0 0 6px; }
.repertorio-copertura small { display: block; color: #6a6a6a; }
.copertura-ok strong { color: var(--verde); }
.copertura-scarsa strong { color: var(--arancio); }
.copertura-eccesso strong { color: #6a6a6a; }

.repertorio-conteggio {
    padding: 8px 12px;
    border-left: 4px solid var(--bordo);
    background: var(--grigio-chiaro);
    border-radius: var(--raggio);
}
.conteggio-verde  { border-left-color: var(--verde); }
.conteggio-giallo { border-left-color: var(--arancio); }
.conteggio-rosso  { border-left-color: var(--rosso); }

.avviso-attenzione { border-left: 4px solid var(--arancio); }
.avviso-errore { border-left: 4px solid var(--rosso); }

/* =====================================================================
   STAMPA DEL RICETTARIO DEL PERIODO
   ===================================================================== */

.box-momento {
    display: block;
    font-size: 0.72rem;
    font-weight: 400;
    color: #6a6a6a;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.sezione-membro { margin: 10px 0 6px; font-size: 0.95rem; }

@media print {
    /* La griglia e il catalogo non si stampano mai: si stampa il
       ricettario o la lista della spesa, che sono documenti, non
       strumenti. */
    .griglia-periodo,
    .catalogo-casella,
    .repertorio {
        display: none !important;
    }

    /* Un giorno per blocco, e un giorno non si spezza fra due pagine se
       puo' starci intero: chi cucina tiene il foglio del giorno, non
       mezzo giorno su un foglio e mezzo sull'altro. */
    .giorno-ricettario {
        break-inside: avoid;
        page-break-inside: avoid;
        margin-bottom: 10px;
    }
    .box-momento { font-size: 0.66rem; }
    .sezione-membro {
        break-after: avoid;
        page-break-after: avoid;
    }
}

/* =====================================================================
   STAGIONALITÀ — la ciliegia e i box spenti
   Regola generale del sito: una ricetta che contiene alimenti stagionali
   porta 🍒, e il suggerimento al passaggio del mouse dice QUALI sono e in
   che mesi. Vedi porzioni_ciliegia() in templates/partials/icone.php.
   ===================================================================== */

.ciliegia {
    cursor: help;
    font-size: 0.9em;
    /* Il title nativo del browser non compare su un elemento senza
       dimensione propria in alcuni motori: inline-block glielo dà. */
    display: inline-block;
}

/* Fuori stagione: la ciliegia resta (gli ingredienti stagionali ci sono
   comunque) ma si spegne, così a colpo d'occhio si distingue "di stagione
   adesso" da "di stagione, ma non adesso" senza dover leggere niente. */
.ciliegia-fuori {
    filter: grayscale(1);
    opacity: 0.55;
}

/* Pagina delle preferite: il box di una ricetta con ingredienti fuori
   stagione si spegne in grigio. Non sparisce e non si sposta in fondo —
   resta una preferita, semplicemente non è il momento di farla, e vedere
   dove sta nell'elenco aiuta a ricordarsene fra due mesi. */
.box-fuori-stagione {
    background: var(--grigio-chiaro);
    color: #6a6a6a;
}
.box-fuori-stagione .box-titolo { color: #4a4a4a; }

@media print {
    /* In stampa niente sfondi (regola generale di queste pagine) e niente
       ciliegia: il suggerimento del title non si stampa, quindi
       resterebbe un'emoji che non spiega nulla. */
    .box-fuori-stagione { background: none; color: inherit; }
    .box-fuori-stagione .box-titolo { color: inherit; }
    .ciliegia { display: none; }
}

/* =====================================================================
   CATALOGO DELLE RICETTE NEL PIANIFICATORE — si sceglie guardando
   Una griglia di schede con la foto, non un elenco di titoli: scegliere
   la cena leggendo un elenco puntato è compilare un modulo.
   ===================================================================== */

.catalogo-griglia {
    list-style: none;
    /* Nessun max-height qui: dentro al popup scorre il contenitore
       (.catalogo-contenuto), e due barre di scorrimento annidate sono il
       modo migliore per non riuscire a scorrere ne' l'una ne' l'altra. */
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 12px;
}
.catalogo-scheda { display: flex; }
.catalogo-griglia .catalogo-bottone {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--bordo);
    border-radius: var(--raggio);
    background: #fff;
    cursor: pointer;
    font: inherit;
    color: inherit;
    text-align: left;
}
.catalogo-griglia .catalogo-bottone:hover { border-color: var(--verde); }

.catalogo-foto {
    display: block;
    width: 100%;
    /* Rapporto fisso: le schede restano allineate anche con foto di
       proporzioni diverse, e una griglia allineata si scorre con l'occhio
       invece che con la testa. */
    aspect-ratio: 4 / 3;
    background: var(--grigio-chiaro);
    overflow: hidden;
}
.catalogo-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.catalogo-foto-assente {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    opacity: 0.35;
}

.catalogo-corpo { display: block; padding: 8px 10px 10px; }
.catalogo-griglia .catalogo-titolo { display: block; font-weight: 600; font-size: 0.9rem; line-height: 1.25; }
.catalogo-griglia .catalogo-meta { display: block; margin-top: 2px; font-size: 0.75rem; color: #6a6a6a; }
.catalogo-scheda-attuale .catalogo-bottone { border-color: var(--verde); box-shadow: inset 0 0 0 1px var(--verde); }
/* Fuori stagione: si vede che è un ripiego, senza nasconderlo. */
.catalogo-scheda-fuori .catalogo-foto img { filter: grayscale(0.7); }
.catalogo-scheda-fuori .catalogo-bottone { background: var(--grigio-chiaro); }

.catalogo-piede {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--bordo);
    text-align: center;
}
.catalogo-piede small { display: block; margin-top: 4px; color: #6a6a6a; }

/* La porta "Scelgo io" è un link, non un bottone: non scrive niente, apre
   solo il pannello. Qui si fa somigliare alle altre. */
a.porta { text-decoration: none; }
a.porta:hover { border-color: var(--verde); }

.avviso-incompleto .preferiti-azioni { margin-top: 10px; }

/* =====================================================================
   IL FLUSSO IN TRE PASSI (homepage)
   L'ordine fra ricette, programma e spesa è l'unica cosa che una barra di
   icone non riesce a dire da sola. Qui si dice una volta per esteso.
   ===================================================================== */

.flusso {
    max-width: 520px;
    margin: 28px auto;
    padding: 18px 20px;
    border: 1px solid var(--bordo);
    border-radius: var(--raggio);
    background: var(--grigio-chiaro);
}
.flusso-titolo { margin: 0 0 12px; font-size: 1.05rem; text-align: center; }
.flusso-passi { list-style: none; margin: 0; padding: 0; counter-reset: passo; }
.flusso-passo { counter-increment: passo; }

/* Il numero del passo, non solo la freccia. Con otto voci la freccia da
   sola non basta piu' a dire l'ordine — e su due colonne non potrebbe
   dirlo affatto — mentre un numero regge qualunque disposizione. */
.flusso-passo > a::before,
.flusso-passo > span::before {
    content: counter(passo);
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--grigio-chiaro);
    color: #6a6a6a;
    font-size: 0.72rem;
    font-weight: 700;
}
.flusso-fatto > a::before,
.flusso-fatto > span::before { background: var(--verde); color: #fff; }

.flusso-passo > a,
.flusso-passo > span {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border: 1px solid var(--bordo);
    border-radius: var(--raggio);
    background: #fff;
    text-decoration: none;
    color: inherit;
}
.flusso-passo > a:hover { border-color: var(--verde); }
.flusso-emoji { font-size: 1.5rem; line-height: 1; }
.flusso-testo { display: block; flex: 1 1 auto; min-width: 0; }
.flusso-testo strong { display: block; }
.flusso-testo small { display: block; color: #6a6a6a; line-height: 1.3; }

/* La freccia fra un passo e l'altro e' decorazione, non un passo: sta nel
   CSS e non nella <ol>, cosi' screen reader e motori contano solo i passi
   veri. Il testo alternativo vuoto ("/ ''") la toglie anche dalla lettura
   ad alta voce nei browser che lo supportano. */
.flusso-passo + .flusso-passo::before {
    content: "↓";
    content: "↓" / "";
    display: block;
    text-align: center;
    color: var(--verde);
    font-size: 1.1rem;
    line-height: 1;
    padding: 4px 0;
}

/* La spunta sta a destra, staccata dal testo: si guarda la colonna delle
   spunte per sapere a che punto si è, senza rileggere i passi. */
.flusso-spunta { margin-left: auto; font-size: 1.15rem; cursor: help; }
.flusso-fatto > a,
.flusso-fatto > span {
    border-color: var(--verde);
    background: #f2f9f4;
}
.flusso-fatto .flusso-testo strong { color: var(--verde-scuro); }

@media print { .flusso { display: none; } }

/* =====================================================================
   HOMEPAGE A DUE COLONNE
   A destra il percorso, che è la cosa da leggere; a sinistra il perché e
   l'invito a installare, che sono contorno.
   ===================================================================== */

.home-colonne section { max-width: none; margin-left: 0; margin-right: 0; }

/* I due riquadri di sinistra sono un blocco unico impilato, non due celle
   della griglia. Con due righe vere, e il percorso che le attraversa
   entrambe, le righe si spartiscono l'altezza del blocco più alto: la
   prima si stira ben oltre il "perché" e la seconda comincia molto più in
   basso, lasciando un vuoto in mezzo. Una riga sola e due colonne, invece,
   partono tutte e due da sopra. */
.home-colonna-lato { display: flex; flex-direction: column; gap: 20px; }
.home-colonna-lato > section { margin: 0; }

@media (min-width: 900px) {
    .home-colonne {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 20px;
        align-items: start;
        max-width: 1100px;
        margin: 24px auto;
    }
    /* Posizioni dichiarate, non l'ordine del markup: nel markup viene
       prima il percorso, perché sul telefono — dove la pagina è una
       colonna sola — è la prima cosa da leggere. Qui lo si sposta a
       destra senza toccare l'HTML. */
    .home-colonne > .flusso { grid-column: 2; grid-row: 1; margin: 0; }
    .home-colonne > .home-colonna-lato { grid-column: 1; grid-row: 1; }
}

/* Il riquadro dell'app parte nascosto e lo mostra il JS solo a chi può
   installare: quando resta nascosto non occupa la sua cella e la colonna
   di sinistra contiene il solo "perché". È il comportamento voluto —
   display:none toglie l'elemento dalla griglia, non lascia un buco. */

/* =====================================================================
   COSA C'È OGGI (homepage)
   Le due caselle familiari del giorno, per chi ha già pianificato.
   ===================================================================== */

.oggi {
    max-width: 640px;
    margin: 24px auto;
    padding: 16px 18px;
    border: 1px solid var(--bordo);
    border-radius: var(--raggio);
    background: #fff;
}
.oggi-titolo {
    margin: 0 0 12px;
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #6a6a6a;
}
.oggi-pasti {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 14px;
}
.oggi-domanda { margin: 0 0 8px; font-size: 1rem; }

.oggi-ricetta {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: inherit;
    padding: 8px;
    border: 1px solid var(--bordo);
    border-radius: var(--raggio);
}
.oggi-ricetta:hover { border-color: var(--verde); }
.oggi-foto {
    flex: 0 0 auto;
    width: 72px;
    height: 72px;
    border-radius: var(--raggio);
    overflow: hidden;
    background: var(--grigio-chiaro);
}
.oggi-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.oggi-nome { font-weight: 600; line-height: 1.25; }
.oggi-nota { margin: 6px 0 0; color: #6a6a6a; }
.oggi-piede { margin: 14px 0 0; text-align: right; }

@media print { .oggi { display: none; } }

/* =====================================================================
   IL POPUP DI SCELTA
   Copre il calendario mentre si sceglie, e sparisce appena scelto per
   lasciarlo vedere aggiornato prima di tornare sulla casella successiva.
   ===================================================================== */

/* z-index sopra 100, che è quello dell'intestazione fissa del sito: sotto,
   la barra verde passerebbe davanti al popup e si mangerebbe il titolo
   della casella e i pulsanti. Un popup che copre TUTTO, barra di
   navigazione compresa, è anche il comportamento giusto: finché si sta
   scegliendo un piatto non c'è nient'altro da fare. */
.modale-fondo {
    position: fixed;
    inset: 0;
    z-index: 200;
    background: rgba(20, 30, 22, 0.55);
}

.modale-catalogo {
    position: fixed;
    z-index: 201;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(940px, calc(100vw - 24px));
    max-height: calc(100vh - 40px);
    display: flex;
    flex-direction: column;
    margin: 0;
    background: #fff;
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.28);
}
/* Intestazione ferma, contenuto che scorre: il titolo della casella deve
   restare leggibile anche a metà di un elenco lungo, altrimenti si
   dimentica per quale pasto si sta scegliendo. */
.modale-catalogo .catalogo-intestazione {
    flex: 0 0 auto;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--bordo);
}
.catalogo-contenuto { flex: 1 1 auto; overflow-y: auto; padding-top: 10px; }

/* Blocca lo scorrimento di quello che sta sotto: un popup che lascia
   scorrere la pagina dietro fa perdere il posto nel calendario. */
html.con-modale, html.con-modale body { overflow: hidden; }

/* La conferma scorre sopra il calendario scoperto, nel secondo fra una
   scelta e la successiva. */
/* Sotto l'intestazione, non dietro: il popup a quel punto è sparito e la
   barra di navigazione è tornata al suo posto. */
.conferma-scelta {
    position: fixed;
    z-index: 90;
    top: 90px;
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
    padding: 10px 18px;
    border-radius: 999px;
    background: var(--verde);
    color: #fff;
    font-weight: 600;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2);
}

/* La casella appena riempita si accende per quel secondo: è lì che l'occhio
   deve andare quando il popup sparisce. */
.casella-appena-scelta {
    background: #e8f4ec;
    box-shadow: inset 0 0 0 2px var(--verde);
}

/* "2×": quante volte la ricetta è già in programma. Il dove sta nel
   suggerimento. */
.catalogo-volte {
    display: inline-block;
    margin-top: 4px;
    padding: 1px 7px;
    border-radius: 999px;
    background: var(--verde);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    cursor: help;
}

/* Blocco "che età": compare solo quando si genera per minori, e rientra
   dentro al blocco "Per chi" invece di essere un campo a sé — è una
   precisazione di quella scelta, non una domanda in più. */
.campo-fascia {
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px dashed var(--bordo);
}
.campo-fascia > label:first-child { display: block; margin-bottom: 4px; font-weight: 600; }

/* =====================================================================
   PERCHÉ SEGUIRE IL PIANO (homepage)
   Sta dopo il "come funziona": prima il meccanismo, poi la ragione.
   ===================================================================== */

.motivo {
    max-width: 640px;
    margin: 24px auto;
    padding: 16px 20px;
    border: 1px solid var(--bordo);
    border-left: 4px solid var(--verde);
    border-radius: var(--raggio);
    background: #fff;
}
.motivo-titolo { margin: 0 0 10px; font-size: 1.05rem; }
.motivo p { margin: 0 0 10px; line-height: 1.5; }
.motivo p:last-child { margin-bottom: 0; color: #5a5a5a; }

@media print { .motivo { display: none; } }

/* --- Home: foto di avanzamento e video finale ------------------------ */
/* Stessa larghezza e cornice del box .motivo che lo precede, ma bordo
   arancio: e' la parte "emotiva" della coppia, non quella tecnica. */
.progressi-video {
    max-width: 640px;
    margin: 24px auto;
    padding: 16px 20px;
    border: 1px solid var(--bordo);
    border-left: 4px solid var(--arancio);
    border-radius: var(--raggio);
    background: #fff;
}
.progressi-video-titolo { margin: 0 0 12px; font-size: 1.05rem; }
.progressi-video p { margin: 0 0 10px; line-height: 1.5; }
.progressi-video-nota { color: #777; }
.progressi-video-azione { margin: 14px 0 0; }

/* La striscia: quattro fotogrammi come una pellicola, con le sagome che
   si assottigliano da sinistra a destra. Solo disegno, niente foto. */
.progressi-video-striscia {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin: 0 0 14px;
    padding: 8px 10px;
    background: var(--grigio-chiaro);
    border-radius: var(--raggio);
}
.progressi-video-striscia figure {
    margin: 0;
    flex: 0 1 80px;
    text-align: center;
}
.progressi-video-striscia img {
    display: block;
    width: 100%;
    aspect-ratio: 941 / 1672;
    object-fit: contain;
    background: #fff;
    border: 1px solid var(--bordo);
    border-radius: 4px;
    padding: 4px;
    box-sizing: border-box;
}
.progressi-video-striscia figcaption {
    margin-top: 4px;
    font-size: 0.75rem;
    color: #777;
}
/* L'ultimo fotogramma e' il traguardo: evidenziato in verde. */
.progressi-video-striscia figure:last-child img { border-color: var(--verde); }
.progressi-video-striscia figure:last-child figcaption { color: var(--verde-scuro); font-weight: 700; }

@media print { .progressi-video { display: none; } }

/* Icone composte della barra: un calendario con un segno in basso a destra
   che dice per chi si pianifica — una persona sola o la famiglia. */
.icona-composta {
    position: relative;
    display: inline-block;
    line-height: 1;
}
.icona-segno {
    position: absolute;
    right: -0.30em;
    bottom: -0.22em;
    font-size: 0.5em;
    line-height: 1;
    /* Un alone chiaro stacca il segno dal calendario sotto: senza, le due
       emoji si confondono in una macchia sola a dimensione icona. */
    text-shadow: 0 0 2px #fff, 0 0 3px #fff, 0 0 4px #fff;
}

/* La riga del repertorio su due livelli: il titolo sopra, i comandi sotto.
   Su una colonna stretta il titolo di una ricetta e un campo numerico sulla
   stessa riga andavano a capo dove capitava, e "× a settimana" finiva
   staccato dal suo numero. */
.repertorio-riga { display: block; margin-bottom: 4px; }
.repertorio-riga .repertorio-titolo { display: block; font-size: 0.9rem; }
.repertorio-comandi {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 2px;
}
.repertorio-volte {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    /* Il numero e la sua unità di misura non si separano mai. */
    white-space: nowrap;
}


/* =====================================================================
   SCANNER CODICI A BARRE (templates/scanner.php, partials/prodotto_scheda.php)
   ===================================================================== */

/* Il pulsante in un angolo di ogni pagina. env(safe-area-inset-*) lo tiene
   lontano dalla barra di sistema su iPhone. */
.pulsante-scanner {
    position: fixed;
    right: calc(16px + env(safe-area-inset-right, 0px));
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: var(--verde);
    color: #fff;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.25);
    text-decoration: none;
    transition: transform 0.15s ease, background 0.15s ease;
}
.pulsante-scanner:hover,
.pulsante-scanner:focus-visible { background: var(--verde-scuro); transform: scale(1.06); }
/* Etichetta al passaggio del mouse, stesso meccanismo dell'header. */
.pulsante-scanner::after {
    content: attr(data-etichetta);
    position: absolute;
    right: 64px;
    white-space: nowrap;
    padding: 4px 10px;
    border-radius: var(--raggio);
    background: var(--grigio-testo);
    color: #fff;
    font-size: 0.85rem;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease;
}
.pulsante-scanner:hover::after,
.pulsante-scanner:focus-visible::after { opacity: 1; }
@media print { .pulsante-scanner { display: none; } }

.scanner-avvio { text-align: center; margin: 4px 0 12px; }
.scanner-inquadratura {
    position: relative;
    max-width: 520px;
    margin: 0 auto 12px;
    border-radius: var(--raggio);
    overflow: hidden;
    background: #000;
    aspect-ratio: 4 / 3;
}
/* Riempie sempre .scanner-inquadratura, in entrambe le viste: senza un
   height esplicito qui, il video dentro (width:100%; height:100%) non
   avrebbe un riferimento definito da cui calcolare il 100% di altezza —
   e' quello che probabilmente ha cambiato le proporzioni l'altra volta. */
.scanner-video-fila {
    position: relative;
    width: 100%;
    height: 100%;
    display: block;
}
.scanner-inquadratura video { width: 100%; height: 100%; object-fit: cover; display: block; }
/* La barra luminosa che scorre durante la scansione, in ENTRAMBE le viste
   (un solo posto: dentro .scanner-video-fila, comune a entrambe). Verde
   brand (#a6d27e) con bagliore, ripresa e adattata dalla demo passata
   dall'utente — tenuto solo l'effetto della riga, non il resto (cornici
   bianche, card del barcode finto). */
.scanner-scanline {
    position: absolute;
    left: 12%;
    right: 12%;
    top: 10%;
    height: 1px;
    border-radius: 999px;
    background: linear-gradient(90deg, transparent, #a6d27e 12%, #ddf0c4 50%, #a6d27e 88%, transparent);
    box-shadow:
        0 0 6px #a6d27e,
        0 0 16px rgba(166, 210, 126, .85),
        0 0 34px rgba(166, 210, 126, .5),
        0 0 60px rgba(166, 210, 126, .2);
    animation: scanner-scan 2.15s ease-in-out infinite;
    pointer-events: none;
    z-index: 3;
}
.scanner-scanline::after {
    content: '';
    position: absolute;
    left: 15%;
    right: 15%;
    top: -17px;
    height: 36px;
    background: linear-gradient(to bottom,
        rgba(166, 210, 126, 0), rgba(166, 210, 126, .16),
        rgba(166, 210, 126, .26), rgba(166, 210, 126, 0));
    filter: blur(4px);
}
@keyframes scanner-scan {
    0%, 8%   { top: 10%; opacity: .20; }
    18%      { opacity: .85; }
    50%      { top: 90%; opacity: .85; }
    82%      { opacity: .85; }
    100%     { top: 10%; opacity: .20; }
}
@media (prefers-reduced-motion: reduce) { .scanner-scanline { animation: none; top: 50%; } }
/* Il mirino: un rettangolo largo e basso, la forma di un codice a barre. */
.scanner-mirino {
    display: none;   /* sostituito dalla barra luminosa verde (.scanner-scanline): il riquadro guida bianco non serve più */
}
.scanner-chiudi {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 36px;
    height: 36px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    border: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    font-size: 1.1rem;
    cursor: pointer;
    z-index: 2;
}

/* Solo mentre la fotocamera e' accesa (classe aggiunta/tolta da
   scanner.js) e solo in orizzontale su schermi touch (pointer:coarse
   esclude i monitor desktop, dove un browser "largo" e' la norma):
   si nasconde tutto il resto della pagina e la fotocamera riempie lo
   schermo. Niente trucchi di rotazione (vedi la discussione con l'utente
   sul perche' quell'approccio e' stato scartato: problemi di
   accessibilita' WCAG 1.3.4 e verso di rotazione incoerente tra browser).
   Fuori da questo stato il sito si comporta come sempre. */
@media screen and (orientation: landscape) and (pointer: coarse) {
    body.scanner-attivo header,
    body.scanner-attivo footer,
    body.scanner-attivo main > *:not(#scanner),
    body.scanner-attivo #scanner > *:not(#scanner-inquadratura) {
        display: none;
    }
    body.scanner-attivo {
        overflow: hidden;
        background: #a6d27e;   /* rete di sicurezza: se per qualunque motivo spunta un lembo ai bordi/angoli dello schermo, e' dello stesso verde invece che bianco */
    }
    body.scanner-attivo #scanner-inquadratura {
        position: fixed;
        inset: 0;
        box-sizing: border-box;
        width: 100vw;
        height: 100dvh;   /* non 100vh: su Chrome Android puo' calcolare lo spazio "massimo possibile" invece di quello davvero visibile con la barra del browser aperta */
        max-width: none;
        aspect-ratio: auto;
        margin: 0;
        z-index: 1000;
        background: #a6d27e;   /* stesso verde di theme-color/header */
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8px;
        padding: 10px 10px 22px;   /* piu' margine sotto apposta: deve restare visibile un bordo verde sotto il video */
    }
    body.scanner-attivo .scanner-logo {
        order: 1;
        flex: 0 0 auto;
        display: flex;
        position: static;
    }
    body.scanner-attivo .scanner-logo img {
        height: 26px;   /* piu' piccolo, come nelle altre pagine */
        width: auto;
    }
    /* Il video e le parentesi condividono lo stesso contenitore
       (.scanner-video-fila): e' l'unico modo per garantire che le
       parentesi abbiano davvero la stessa altezza del video, invece di
       calcolarla separatamente e sperare che combaci. */
    body.scanner-attivo .scanner-video-fila {
        order: 2;
        position: relative;
        flex: 1 1 auto;
        min-height: 0;   /* senza, un figlio flex non si restringe sotto il suo contenuto: e' quello che avrebbe fatto sparire il margine sotto */
        height: auto;   /* neutralizza l'height:100% della regola base: qui la misura la da flex, non un valore fisso */
        width: 88%;
        max-width: 680px;
    }
    body.scanner-attivo #scanner-video {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 24px;   /* rettangolo con angoli arrotondati semplice, non piu' l'ovale */
    }
    /* ( e ) veri, alte quanto il video (top:0;bottom:0 dello stesso
       contenitore), con z-index sopra al video cosi' la parte che
       ricade sul bordo del video ci sta visibilmente sopra, come chiesto. */
    /* ( e ) vere disegnate col CSS, non caratteri di testo: un font non
       garantisce mai un bordo pixel-perfect rispetto a un box (e' quello
       che non tornava). Un box con border-radius:50% colorato solo su un
       lato traccia una curva netta lungo TUTTA l'altezza — top:0/bottom:0
       dello stesso contenitore del video, quindi combaciano davvero. */
    /* ( e ) vere, dal file SVG passato dall'utente: due tonalita' di
       verde brand, ritagliate ciascuna sul proprio bounding box esatto
       (calcolato dal file originale, non a occhio). top:0/bottom:0 dello
       stesso contenitore del video: l'altezza combacia sempre, e' garantito
       dalla struttura, non da un numero indovinato. */
    body.scanner-attivo .scanner-video-fila::before,
    body.scanner-attivo .scanner-video-fila::after {
        content: '';
        position: absolute;
        top: -3px;   /* la curva si assottiglia alle estremita': a top/bottom:0 sembra piu' corta del video, anche se il contenitore ha la stessa identica altezza */
        bottom: -3px;
        aspect-ratio: 17.288 / 59.977;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        z-index: 2;
        pointer-events: none;
    }
    body.scanner-attivo .scanner-video-fila::before {
        left: 0;
        background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjI4Mi40NzUgODMuNzQzIDE3LjI4OCA1OS45NzciPgogIDxwYXRoIGZpbGw9IiNBNUQyN0QiIGQ9Ik0yODYuOTY2LDk1LjQxNWMyLjY5NS01LjQ2MSw1LjM3OS05LjM1Miw4LjA1MS0xMS42NzJoLTEyLjU0MnY1OS45NzdoMTIuNTQyCgljLTguMDYzLTguODEzLTEyLjA5NC0xOS4wMi0xMi4wOTQtMzAuNjIxQzI4Mi45MjMsMTA2Ljc3LDI4NC4yNzEsMTAwLjg3NiwyODYuOTY2LDk1LjQxNXoiLz4KICA8cGF0aCBmaWxsPSIjQjhEQjk4IiBkPSJNMjg5LjYzOCwxMTMuODM2YzAtNS4zNDQsMC43MjctMTAuMzU0LDIuMTgtMTUuMDI5czQuMTAyLTkuNjk3LDcuOTQ1LTE1LjA2NGgtNC43NDYKCWMtMi42NzIsMi4zMi01LjM1NSw2LjIxMS04LjA1MSwxMS42NzJjLTIuNjk1LDUuNDYxLTQuMDQzLDExLjM1NS00LjA0MywxNy42ODRjMCwxMS42MDIsNC4wMzEsMjEuODA5LDEyLjA5NCwzMC42MjFoNC43NDYKCWMtMy4wNy00LjA3OC01LjUyNS04LjcyNS03LjM2NS0xMy45MzlTMjg5LjYzOCwxMTkuMjUsMjg5LjYzOCwxMTMuODM2eiIvPgo8L3N2Zz4K");
    }
    body.scanner-attivo .scanner-video-fila::after {
        right: 0;
        background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjMwMy42NjYgODMuNzQzIDE3LjM1OSA1OS45NzciPgogIDxwYXRoIGZpbGw9IiNBNUQyN0QiIGQ9Ik0zMDguNDEyLDgzLjc0M2M4LjEwOSw4Ljg1OSwxMi4xNjQsMTkuMDY3LDEyLjE2NCwzMC42MjFjMCw2LjM1Mi0xLjM2NSwxMi4yNTgtNC4wOTYsMTcuNzE5CglzLTUuNDIsOS4zMzktOC4wNjgsMTEuNjM3aDEyLjYxM1Y4My43NDNIMzA4LjQxMnoiLz4KICA8cGF0aCBmaWxsPSIjQjhEQjk4IiBkPSJNMzE2LjQ4LDEzMi4wODNjMi43My01LjQ2MSw0LjA5Ni0xMS4zNjcsNC4wOTYtMTcuNzE5YzAtMTEuNTU0LTQuMDU1LTIxLjc2Mi0xMi4xNjQtMzAuNjIxaC00Ljc0NgoJYzYuNzUsOS4xNjQsMTAuMTI1LDE5LjEyNSwxMC4xMjUsMjkuODgzYzAsNS4zNjctMC43MjcsMTAuMzg5LTIuMTgsMTUuMDY0cy00LjEwMiw5LjY4Ni03Ljk0NSwxNS4wMjloNC43NDYKCUMzMTEuMDYsMTQxLjQyMiwzMTMuNzUsMTM3LjU0MywzMTYuNDgsMTMyLjA4M3oiLz4KPC9zdmc+Cg==");
    }
    /* Il mirino era pensato per un video a piena larghezza: qui ha una
       dimensione diversa, riallinearlo non vale la complessita'. */
    body.scanner-attivo .scanner-mirino {
        display: none;
    }
}
.scanner-logo {
    display: none;   /* visibile solo dentro la media query sopra */
}
.scanner-stato { text-align: center; min-height: 1.4em; color: #555; }
.scanner-manuale { max-width: 520px; margin: 8px auto 0; }
.scanner-manuale label { display: block; font-size: 0.92rem; margin-bottom: 4px; }
.scanner-manuale-riga { display: flex; gap: 8px; }
.scanner-manuale-riga input { flex: 1; min-width: 0; font-size: 1.05rem; letter-spacing: 0.04em; }

.prodotto-scheda { margin-top: 18px; }
.prodotto-testa { display: flex; gap: 16px; align-items: flex-start; margin-bottom: 14px; }
.prodotto-foto {
    width: 96px;
    height: 96px;
    object-fit: contain;
    background: #fff;
    border: 1px solid var(--bordo);
    border-radius: var(--raggio);
    flex-shrink: 0;
}
.prodotto-nome { margin: 0 0 2px; font-size: 1.3rem; line-height: 1.25; }
.prodotto-marca { margin: 0 0 6px; color: #666; }
.prodotto-pillola {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid var(--bordo);
    font-size: 0.88rem;
}
.prodotto-avviso {
    padding: 10px 14px;
    background: #fff;
    border: 1px solid var(--bordo);
    border-radius: var(--raggio);
}
.prodotto-kcal {
    padding: 14px 16px;
    background: #fff;
    border: 1px solid var(--bordo);
    border-radius: var(--raggio);
    margin-bottom: 14px;
}
.prodotto-kcal p { margin: 4px 0; }
.prodotto-kcal-numero { font-size: 1.1rem; }
.prodotto-kcal-numero strong { font-size: 2.4rem; line-height: 1; color: var(--verde-scuro); }
.prodotto-kcal-numero span { color: #666; font-size: 0.95rem; }

.prodotto-semafori {
    list-style: none;
    padding: 0;
    margin: 0 0 14px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 8px;
}
.semaforo {
    padding: 8px 10px;
    border-radius: var(--raggio);
    border: 1px solid transparent;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.semaforo-nome { font-size: 0.85rem; }
.semaforo strong { font-size: 1.15rem; }
.semaforo-livello { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 700; }
.semaforo-basso { background: #e3f3e6; border-color: #9fd3aa; color: #1f5636; }
.semaforo-medio { background: #fff4d6; border-color: #f0cf6b; color: #6b4e00; }
.semaforo-alto  { background: #fbe1dc; border-color: #eb9d8c; color: #8a2413; }

.prodotto-tabella { width: 100%; border-collapse: collapse; background: #fff; }
.prodotto-tabella th, .prodotto-tabella td { padding: 6px 10px; border-bottom: 1px solid var(--bordo); text-align: right; }
.prodotto-tabella th:first-child, .prodotto-tabella td:first-child { text-align: left; }
.prodotto-tabella .riga-dicui td:first-child { padding-left: 24px; color: #555; }
.prodotto-nota { color: #666; }

.prodotto-punteggi { display: flex; flex-wrap: wrap; gap: 14px 24px; align-items: center; margin: 14px 0; }
.nutriscore { display: inline-flex; align-items: center; gap: 3px; }
.nutriscore-etichetta { font-size: 0.85rem; font-weight: 700; margin-right: 6px; }
.nutriscore-lettera {
    width: 26px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 700;
    opacity: 0.35;
    border-radius: 4px;
}
.nutriscore-attiva { opacity: 1; transform: scale(1.25); box-shadow: 0 0 0 2px #fff, 0 0 0 3px #333; }
/* I colori ufficiali del Nutri-Score. */
.nutriscore-a { background: #038141; }
.nutriscore-b { background: #85bb2f; }
.nutriscore-c { background: #fecb02; color: #333; }
.nutriscore-d { background: #ee8100; }
.nutriscore-e { background: #e63e11; }
.prodotto-nova { margin: 0; }

.prodotto-allergeni {
    padding: 8px 14px;
    border-left: 4px solid var(--arancio);
    background: #fff;
    border-radius: 0 var(--raggio) var(--raggio) 0;
    margin: 14px 0;
}
.prodotto-allergeni p { margin: 4px 0; }
.prodotto-ingredienti { margin: 14px 0; }
.prodotto-ingredienti summary { cursor: pointer; font-weight: 600; }
.prodotto-azioni { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin: 20px 0 6px; }
.prodotto-fonte { color: #666; margin-top: 18px; }

/* Attivita' equivalenti (partials/prodotto_equivalenti.php) */
.equivalenti {
    padding: 14px 16px;
    background: #fff;
    border: 1px solid var(--bordo);
    border-radius: var(--raggio);
    margin-bottom: 14px;
}
.equivalenti-titolo { margin: 0 0 10px; font-size: 1.1rem; }
.equivalenti-gruppo { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.eq-scelta {
    padding: 6px 12px;
    border: 1px solid var(--bordo);
    border-radius: 999px;
    background: var(--grigio-chiaro);
    color: var(--grigio-testo);
    font: inherit;
    font-size: 0.92rem;
    cursor: pointer;
}
.eq-scelta[aria-pressed="true"] {
    background: var(--verde);
    border-color: var(--verde);
    color: #fff;
}
.eq-peso-etichetta { display: inline-flex; align-items: center; gap: 8px; }
.eq-peso { width: 5.5em; }
.equivalenti-riassunto { margin: 10px 0 6px; }
.equivalenti-lista { list-style: none; margin: 0; padding: 0; }
.equivalenti-lista li {
    display: grid;
    grid-template-columns: 2em 1fr auto;
    align-items: baseline;
    gap: 0 8px;
    padding: 7px 0;
    border-bottom: 1px solid var(--grigio-chiaro);
}
.equivalenti-lista li:last-child { border-bottom: 0; }
.eq-emoji { font-size: 1.25rem; text-align: center; }
.eq-tempo, .eq-ricariche { white-space: nowrap; font-size: 1.05rem; }
.eq-passi { grid-column: 2 / 4; color: #666; }
.eq-curiosita { color: #555; }
.equivalenti-nota { color: #666; margin: 10px 0 0; }
.equivalenti-invito { margin: 8px 0 0; font-size: 0.95rem; }

/* =====================================================================
   RICERCA ALIMENTI E SCHEDA A QUANTITA' VARIABILE  (0.15)

   Due blocchi nuovi, usati in tre posti:
     - la casella di ricerca (partials/ricerca_alimenti.php), su /alimenti
       e in fondo a /scanner;
     - la testa della scheda (partials/scheda_quantita.php), sulle schede
       dei prodotti e su quelle degli alimenti generici.

   I colori vengono tutti dalle variabili di :root: niente valori nuovi se
   non per le tre fette della ripartizione calorica, che devono restare
   distinguibili fra loro e non possono essere tre verdi.
   ===================================================================== */

/* --- Casella di ricerca ---------------------------------------------- */

.ricerca-alimenti { margin: 18px 0; }
.ricerca-alimenti-titolo { margin: 0 0 6px; font-size: 1.15rem; }
.ricerca-alimenti-intro { margin: 0 0 12px; color: #555; }

.ricerca-alimenti-riga { display: flex; gap: 8px; }
.ricerca-alimenti-riga input[type="search"] {
    flex: 1 1 auto;
    min-width: 0;
    padding: 12px 14px;
    font-size: 1.05rem;
    border: 1px solid var(--bordo);
    border-radius: var(--raggio);
    background: #fff;
}
.ricerca-alimenti-riga input[type="search"]:focus {
    outline: 2px solid var(--verde);
    outline-offset: 1px;
}
.ricerca-alimenti-messaggio { margin: 10px 0 0; color: #666; }
.ricerca-alimenti-risultati { margin-top: 14px; }
.ricerca-alimenti-vuoto, .ricerca-alimenti-ean, .ricerca-alimenti-nota { margin: 10px 0; color: #555; }

.ricerca-gruppo { margin-bottom: 18px; }
.ricerca-gruppo-titolo {
    margin: 0 0 8px;
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--verde-scuro);
}
.ricerca-gruppo-titolo small {
    display: block;
    text-transform: none;
    letter-spacing: 0;
    font-weight: 400;
    color: #777;
}

.ricerca-elenco { list-style: none; margin: 0; padding: 0; }
.ricerca-voce { border-bottom: 1px solid var(--bordo); }
.ricerca-voce:last-child { border-bottom: 0; }
.ricerca-voce > a {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 2px 10px;
    padding: 10px 6px;
    text-decoration: none;
    color: inherit;
    border-radius: var(--raggio);
}
.ricerca-voce > a:hover, .ricerca-voce > a:focus { background: var(--grigio-chiaro); }
.ricerca-voce-nome { flex: 1 1 60%; font-weight: 600; color: var(--verde-scuro); }
.ricerca-voce-dettaglio { flex: 1 1 100%; order: 3; font-size: 0.88rem; color: #777; }
.ricerca-voce-kcal { margin-left: auto; text-align: right; white-space: nowrap; }
.ricerca-voce-kcal strong { font-size: 1.05rem; }
.ricerca-voce-kcal small { display: block; font-size: 0.75rem; color: #888; }

/* Sulla pagina dello scanner la casella e' un invito, non il contenuto
   principale: sta dentro una .scheda e non deve gridare. */
.scheda-ricerca-scanner .ricerca-alimenti { margin: 0; }

/* --- Selettore di quantita' ------------------------------------------ */

.scheda-valori { margin: 14px 0 18px; }

.scheda-quantita { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.scheda-q {
    padding: 7px 12px;
    font: inherit;
    font-size: 0.92rem;
    color: var(--grigio-testo);
    background: #fff;
    border: 1px solid var(--bordo);
    border-radius: 999px;
    cursor: pointer;
}
.scheda-q:hover { background: var(--grigio-chiaro); }
.scheda-q[aria-pressed="true"] {
    background: var(--verde);
    border-color: var(--verde);
    color: #fff;
    font-weight: 600;
}
.scheda-q-libera-eti { display: inline-flex; align-items: center; }
.scheda-q-libera {
    width: 8.5em;
    padding: 7px 12px;
    font: inherit;
    font-size: 0.92rem;
    border: 1px dashed var(--bordo);
    border-radius: 999px;
    background: #fff;
}
.scheda-q-testo { margin: 0 0 12px; color: #666; font-size: 0.95rem; }

/* --- I quattro numeri ------------------------------------------------ */

.scheda-numeri {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    padding: 14px;
    background: var(--grigio-chiaro);
    border: 1px solid var(--bordo);
    border-radius: var(--raggio);
}
.scheda-numero { text-align: center; min-width: 0; }
.scheda-numero strong {
    display: block;
    font-size: 1.5rem;
    line-height: 1.1;
    color: var(--grigio-testo);
}
.scheda-numero span { font-size: 0.8rem; color: #666; }
.scheda-numero-kcal strong { font-size: 2.2rem; color: var(--verde-scuro); }
.scheda-numero-kcal span { font-size: 0.9rem; font-weight: 600; }

/* Sotto i 420 px quattro colonne diventano illeggibili: le calorie
   prendono tutta la riga, gli altri tre restano affiancati. */
@media (max-width: 420px) {
    .scheda-numeri { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .scheda-numero-kcal { grid-column: 1 / -1; }
}

/* --- Ripartizione calorica ------------------------------------------- */

.scheda-split { margin: 14px 0; }
.scheda-split-barra {
    display: flex;
    height: 12px;
    border-radius: 999px;
    overflow: hidden;
    background: var(--bordo);
}
.scheda-split-fetta { display: block; height: 100%; }
.scheda-split-carboidrati { background: #e0a92c; }
.scheda-split-proteine    { background: #4a7fb5; }
.scheda-split-grassi      { background: #c96a4a; }
.scheda-split-alcol       { background: #8a6bb0; }

.scheda-split-legenda {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 4px 16px;
    margin: 8px 0 0;
    padding: 0;
    font-size: 0.9rem;
    color: #555;
}
.scheda-split-legenda li { display: flex; align-items: center; gap: 5px; }
.scheda-split-punto { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }

/* --- Schede degli alimenti generici ---------------------------------- */

.prodotto-pillole { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 0; }
.prodotto-pillola-fonte { background: #eef3ea; }
.prodotto-stima { margin: 10px 0; color: #666; }
.alimento-alias { margin: 0 0 10px; color: #777; }

.scheda-micro { margin: 22px 0; }
.scheda-micro-titolo { margin: 0 0 10px; font-size: 1.1rem; }
.scheda-micro-gruppo {
    margin: 16px 0 6px;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--verde-scuro);
}
.scheda-micro-tabella td, .scheda-micro-tabella th { padding: 5px 10px; }
.scheda-micro-tracce { margin-left: 6px; color: #888; font-style: italic; }
.scheda-micro-larn { white-space: nowrap; }
.scheda-micro-vuoto { color: #aaa; }
.larn-sesso { color: #888; margin-left: 6px; }
.larn-sesso:first-child { margin-left: 0; }
.scheda-micro-rapporti { margin-top: 16px; }
.scheda-micro-rapporti summary { cursor: pointer; font-weight: 600; }

.alimento-varianti { margin: 22px 0; }
.alimento-varianti h3 { margin: 0 0 8px; font-size: 1.05rem; }
.alimento-varianti-lista { list-style: none; margin: 0; padding: 0; }
.alimento-varianti-lista li {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 6px 0;
    border-bottom: 1px solid var(--bordo);
}
.alimento-varianti-lista li:last-child { border-bottom: 0; }
.alimento-varianti-kcal { color: #777; white-space: nowrap; }

.alimenti-suggeriti { list-style: none; margin: 0; padding: 0; }
.alimenti-suggeriti li {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 7px 0;
    border-bottom: 1px solid var(--bordo);
}
.alimenti-suggeriti li:last-child { border-bottom: 0; }
.alimenti-suggeriti span { color: #777; white-space: nowrap; }

/* Il pulsante di chi sta guardando: primo dell'elenco e gia' premuto, con
   un filo di peso in piu' nel nome perche' si riconosca a colpo d'occhio
   fra i familiari. */
.eq-persona-io { font-weight: 600; }

/* Perche' non ci sono i pulsanti dei familiari. Non compare mai a un
   visitatore anonimo: per lui la casella del peso e' il comportamento
   giusto e non c'e' niente da spiegare. */
.equivalenti-avviso {
    margin: 0 0 10px;
    padding: 9px 12px;
    background: #fff;
    border: 1px solid var(--bordo);
    border-left: 3px solid var(--arancio);
    border-radius: var(--raggio);
    font-size: 0.93rem;
    color: #555;
}

/* Box "Installa Porzioni Scanner" (partials/installa_scanner.php), in fondo
   a /scanner e a ogni scheda prodotto. Riusa tutto lo stile di
   .installa-app: cambia solo il bordo di sinistra, arancione invece che
   verde, perche' sulla stessa pagina non finisca per sembrare un secondo
   invito identico a quello di Porzioni.

   L'icona dello scanner ha il fondo trasparente (le sue varianti opache
   sono quelle "maskable", che servono solo ad Android): qui le si mette
   sotto il bianco, altrimenti sul grigio della pagina il disegno nero
   perderebbe stacco. */
.installa-scanner { border-left-color: var(--arancio); }
.installa-scanner-icona { background: #fff; padding: 4px; }

/* =====================================================================
   AREA AIUTO  (0.16)

   Tre pagine: l'indice con la ricerca e le categorie, l'elenco di una
   categoria, l'articolo. L'elenco degli articoli riusa le classi dei
   risultati di ricerca (.ricerca-elenco, .ricerca-voce) perche' e'
   letteralmente la stessa riga: titolo, sommario, e si tocca.

   La parte con piu' lavoro e' .aiuto-corpo, cioe' la tipografia del testo
   generato da Porzioni\Help\Markdown: e' l'unico posto del sito dove il
   contenuto e' prosa lunga, e va letto, non scorso.
   ===================================================================== */

.aiuto-categorie {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 12px;
    margin: 20px 0;
}
.aiuto-categoria {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px;
    background: #fff;
    border: 1px solid var(--bordo);
    border-radius: var(--raggio);
    text-decoration: none;
    color: inherit;
}
.aiuto-categoria:hover, .aiuto-categoria:focus {
    border-color: var(--verde);
    background: var(--grigio-chiaro);
}
.aiuto-categoria-emoji { font-size: 1.6rem; line-height: 1.2; flex: 0 0 auto; }
.aiuto-categoria-testo { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.aiuto-categoria-testo strong { color: var(--verde-scuro); font-size: 1.05rem; }
.aiuto-categoria-testo span { color: #666; font-size: 0.92rem; }
.aiuto-categoria-testo small { color: #999; font-size: 0.8rem; }

.aiuto-elenco { list-style: none; margin: 0; padding: 0; }
.ricerca-voce-aiuto .ricerca-voce-nome { flex: 1 1 100%; }
.aiuto-voce-categoria {
    flex: 0 0 auto;
    order: 4;
    font-size: 0.78rem;
    color: #888;
    background: var(--grigio-chiaro);
    border-radius: 999px;
    padding: 2px 9px;
}

/* --- L'articolo ------------------------------------------------------ */

.aiuto-articolo {
    background: #fff;
    border: 1px solid var(--bordo);
    border-radius: var(--raggio);
    padding: 22px 24px;
    margin: 16px 0;
}
.aiuto-articolo > h1 { margin: 0 0 6px; font-size: 1.6rem; line-height: 1.25; }
.aiuto-sommario { margin: 0 0 18px; color: #555; font-size: 1.02rem; }
.aiuto-aggiornato { margin: 20px 0 0; color: #999; }

/* Testo lungo: righe non troppo larghe e aria fra i blocchi. Oltre i
   70 caratteri l'occhio fatica a trovare l'inizio della riga successiva. */
.aiuto-corpo { max-width: 68ch; line-height: 1.65; }
.aiuto-corpo h2 {
    margin: 28px 0 8px;
    font-size: 1.2rem;
    color: var(--verde-scuro);
}
.aiuto-corpo h3 { margin: 20px 0 6px; font-size: 1.05rem; }
.aiuto-corpo h2:first-child, .aiuto-corpo h3:first-child { margin-top: 0; }
.aiuto-corpo p { margin: 0 0 14px; }
.aiuto-corpo ul, .aiuto-corpo ol { margin: 0 0 14px; padding-left: 1.4em; }
.aiuto-corpo li { margin-bottom: 5px; }
.aiuto-corpo hr { border: 0; border-top: 1px solid var(--bordo); margin: 24px 0; }
.aiuto-corpo code {
    background: var(--grigio-chiaro);
    padding: 1px 5px;
    border-radius: 4px;
    font-size: 0.92em;
}
.aiuto-corpo blockquote {
    margin: 0 0 14px;
    padding: 10px 14px;
    background: var(--grigio-chiaro);
    border-left: 3px solid var(--verde);
    border-radius: var(--raggio);
}
.aiuto-corpo blockquote p { margin: 0; }
.aiuto-tabella { width: 100%; border-collapse: collapse; margin-bottom: 14px; }
.aiuto-tabella th, .aiuto-tabella td {
    padding: 7px 10px;
    text-align: left;
    border-bottom: 1px solid var(--bordo);
    vertical-align: top;
}
.aiuto-tabella th { color: var(--verde-scuro); font-size: 0.9rem; }

@media (max-width: 640px) {
    .aiuto-articolo { padding: 16px; }
    .aiuto-articolo > h1 { font-size: 1.35rem; }
}

/* --- Foto di avanzamento: fotocamera a schermo intero --------------- */
.foto-fotocamera {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: #000;
    overflow: hidden;
}
.foto-fotocamera video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
/* Riquadro della guida: stesse proporzioni delle PNG di sagoma e maschera
   (941x1672), alto il 92% dello schermo ma mai piu' largo del 92%. Velo e
   sagoma lo riempiono entrambi, quindi combaciano al pixel su ogni schermo.
   Le unita' cq* (rispetto a .foto-fotocamera) evitano le sorprese di vh
   con le barre del browser su mobile; vh/vw restano come ripiego. */
.foto-fotocamera { container-type: size; }
.foto-guida {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    aspect-ratio: 941 / 1672;
    height: min(92vh, calc(92vw * 1672 / 941));
    height: min(92cqh, calc(92cqw * 1672 / 941));
    pointer-events: none;
    z-index: 1;
}
/* Il velo: bianco pieno fuori dal corpo, trasparente dentro. Dentro il
   riquadro lo disegna la maschera PNG (bianco + canale alfa); fuori dal
   riquadro lo continua l'ombra "spread" del ::before, che parte 1px piu'
   all'interno per coprire l'eventuale filo di giunzione ai bordi.
   L'opacita' sta sul contenitore, quindi PNG e ombra si sommano prima e
   il 20% e' uniforme ovunque, anche dove si sovrappongono.
   Al 20% fa risaltare la sagoma; allo scatto sale al 100% (il flash) e
   la persona dentro la sagoma resta al naturale. */
.foto-velo {
    position: absolute;
    inset: 0;
    opacity: .2;
}
.foto-velo::before {
    content: "";
    position: absolute;
    inset: 1px;
    box-shadow: 0 0 0 200vmax #fff;
}
.foto-velo img,
.foto-sagoma {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
}
.foto-sagoma { z-index: 1; }
.foto-velo.foto-flash-attivo {
    animation: foto-flash-anim 350ms ease-out;
}
@keyframes foto-flash-anim {
    0%   { opacity: .2; }
    12%  { opacity: 1; }
    100% { opacity: .2; }
}
.foto-chiudi, .foto-flip {
    position: absolute;
    top: 12px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 0;
    background: rgba(0, 0, 0, .55);
    color: #fff;
    font-size: 1.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3;
    cursor: pointer;
}
.foto-chiudi { right: 12px; }
.foto-flip { left: 12px; }
.foto-scatta {
    position: absolute;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    width: 72px;
    height: 72px;
    border-radius: 50%;
    border: 4px solid #fff;
    background: rgba(255, 255, 255, .25);
    z-index: 3;
    cursor: pointer;
}
.foto-scatta:active { background: rgba(255, 255, 255, .5); }
.foto-scatta[disabled] { opacity: .4; cursor: default; }

/* --- Foto di avanzamento: partecipazione e visibilita' ---------------- */
.condivisione-form fieldset { margin: 0 0 16px; }
.condivisione-form legend { font-weight: 700; padding: 0 4px; }
.condivisione-scelta {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin: 10px 0;
    cursor: pointer;
    line-height: 1.4;
}
.condivisione-scelta input { margin-top: 3px; flex: 0 0 auto; }
.condivisione-pubblico {
    margin: 8px 0 0 26px;
    padding: 12px 14px;
    background: var(--grigio-chiaro);
    border-radius: var(--raggio);
}
.condivisione-pubblico input[type="text"] { display: block; width: 100%; max-width: 22em; margin-top: 4px; }
.condivisione-consenso { font-size: 0.92rem; }
.condivisione-stato { margin: 12px 0 20px; }
.etichetta-foto {
    display: inline-block;
    margin-top: 4px;
    padding: 1px 8px;
    border-radius: 999px;
    font-size: 0.75rem;
    background: var(--grigio-chiaro);
    color: #555;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.etichetta-foto-ok { background: #e3f1e8; color: var(--verde-scuro); }
.etichetta-foto-no { background: #f8e3e0; color: var(--rosso); }

/* --- La festa per l'obiettivo raggiunto -------------------------------- */
.festa {
    text-align: center;
    margin: 12px 0 24px;
    padding: 20px;
    border-radius: var(--raggio);
    background: linear-gradient(135deg, #fff7e8, #e9f5ec);
    border: 2px solid var(--arancio);
}
.festa h2 { margin: 4px 0 8px; font-size: 1.5rem; color: var(--verde-scuro); }
.festa-emoji { font-size: 3rem; margin: 0; line-height: 1; }
.coriandoli { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 2000; }
.coriandoli span {
    position: absolute;
    top: -12px;
    width: 8px;
    height: 14px;
    border-radius: 2px;
    animation-name: coriandolo-cade;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
}
@keyframes coriandolo-cade {
    to { top: 105vh; transform: rotate(720deg) translateX(40px); }
}

/* --- Feed pubblico /progressi ------------------------------------------ */
.progressi-intro { color: #444; max-width: 46em; }
.progressi-feed {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 18px;
    margin: 18px 0 28px;
}
.progressi-card {
    background: #fff;
    border: 1px solid var(--bordo);
    border-radius: var(--raggio);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.progressi-card-foto { position: relative; display: block; background: var(--grigio-chiaro); }
.progressi-card-foto img { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.progressi-badge {
    position: absolute;
    left: 8px;
    bottom: 8px;
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--arancio);
    color: #fff;
    font-size: 0.8rem;
    font-weight: 700;
}
.progressi-badge-statico { position: static; display: inline-block; margin: 6px 0; }
.progressi-card-testo { padding: 12px 14px 10px; }
.progressi-card-testo h2 { margin: 0 0 2px; font-size: 1.05rem; }
.progressi-card-meta { margin: 0 0 8px; color: #666; font-size: 0.88rem; }
.progressi-card-variazione { margin: 0 0 8px; font-size: 1.2rem; font-weight: 700; color: var(--verde-scuro); }
.progressi-card-variazione small { font-size: 0.75rem; font-weight: 400; color: #777; }
.progressi-card-inizio { color: var(--arancio); }
.progressi-barra { height: 8px; border-radius: 999px; background: var(--grigio-chiaro); overflow: hidden; max-width: 22em; }
.progressi-barra span { display: block; height: 100%; background: var(--verde); border-radius: 999px; }
.progressi-barra-testo { margin: 4px 0 0; font-size: 0.8rem; color: #666; }
.progressi-card-azioni {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    margin: 10px 0 0;
    font-size: 0.88rem;
}
.progressi-segnala {
    background: none;
    border: 0;
    padding: 2px 0;
    color: #999;
    font-size: 0.78rem;
    cursor: pointer;
    margin-left: auto;
}
.progressi-segnala:hover { background: none; color: var(--rosso); }
.progressi-segnala[disabled] { color: #aaa; cursor: default; }
.progressi-segnala, .progressi-player-play { white-space: nowrap; }
.progressi-cta { text-align: center; max-width: 640px; margin: 24px auto; }
.progressi-dialogo { border: 0; border-radius: var(--raggio); padding: 20px; max-width: 26em; width: calc(100% - 32px); }
.progressi-dialogo::backdrop { background: rgba(0, 0, 0, .45); }
.progressi-dialogo h2 { margin-top: 0; font-size: 1.1rem; }
.progressi-dialogo-azioni { display: flex; justify-content: flex-end; gap: 10px; margin: 16px 0 0; }

/* --- Pagina di una persona: dall'ultima foto alla prima, poi il video -- */
.progressi-persona-testa { margin: 0 0 18px; }
.progressi-persona-testa h1 { margin-bottom: 4px; }
.progressi-timeline { list-style: none; padding: 0; margin: 0 0 28px; }
.progressi-tappa {
    display: grid;
    grid-template-columns: minmax(120px, 200px) 1fr;
    gap: 16px;
    align-items: start;
    padding: 14px 0;
    border-bottom: 1px solid var(--bordo);
}
.progressi-tappa img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: var(--raggio); display: block; }
.progressi-tappa h2 { margin: 0 0 6px; font-size: 1.1rem; }
.progressi-tappa h2 small { font-weight: 400; color: #777; font-size: 0.85rem; }
.progressi-tappa p { margin: 0 0 4px; }
.progressi-tappa-peso { font-size: 1.2rem; font-weight: 700; }
.progressi-tappa .progressi-segnala { margin: 6px 0 0; }

.progressi-player {
    max-width: 420px;
    margin: 0 auto 32px;
    text-align: center;
}
.progressi-player h2 { font-size: 1.15rem; }
.progressi-player-schermo {
    position: relative;
    border-radius: var(--raggio);
    overflow: hidden;
    background: #000;
}
.progressi-player-schermo img { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.progressi-player-didascalia {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    margin: 0;
    padding: 10px 12px 18px;
    color: #fff;
    font-weight: 700;
    text-align: left;
    background: linear-gradient(rgba(0, 0, 0, .6), transparent);
}
.progressi-player-play {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    padding: 14px 26px;
    border-radius: 999px;
    border: 0;
    font-size: 1.15rem;
    font-weight: 700;
    background: rgba(255, 255, 255, .92);
    color: var(--verde-scuro);
    box-shadow: 0 4px 18px rgba(0, 0, 0, .35);
    cursor: pointer;
}
.progressi-player-play:hover { background: #fff; }

/* --- Home: traguardi della community ----------------------------------- */
.traguardi-community {
    max-width: 640px;
    margin: 24px auto;
    padding: 18px 20px;
    border-radius: var(--raggio);
    background: linear-gradient(135deg, #fff7e8, #e9f5ec);
    border: 2px solid var(--arancio);
    text-align: center;
}
.traguardi-titolo { margin: 0 0 4px; font-size: 1.3rem; color: var(--verde-scuro); }
.traguardi-intro { margin: 0 0 14px; color: #555; }
.traguardi-elenco { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
.traguardo-card {
    flex: 0 1 180px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 8px;
    background: #fff;
    border-radius: var(--raggio);
    border: 1px solid var(--bordo);
    color: inherit;
    text-decoration: none;
    font-size: 0.85rem;
}
.traguardo-card:hover { border-color: var(--verde); }
.traguardo-foto { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; }
.traguardo-foto img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 4px; display: block; }
.progressi-video-azione { display: flex; flex-wrap: wrap; gap: 10px; }

@media (max-width: 520px) {
    .progressi-tappa { grid-template-columns: 110px 1fr; gap: 12px; }
    .condivisione-pubblico { margin-left: 0; }
}
@media print { .traguardi-community, .progressi-player, .progressi-segnala { display: none; } }

/* --- Admin: coda delle foto segnalate ---------------------------------- */
.caso-segnalato {
    display: grid;
    grid-template-columns: 180px 1fr;
    gap: 18px;
    align-items: start;
}
.caso-urgente { border-left: 4px solid var(--rosso); }
.caso-foto img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: var(--raggio); display: block; background: var(--grigio-chiaro); }
.caso-dati h2 { margin: 0 0 6px; font-size: 1.1rem; }
.caso-dati h2 small { font-weight: 400; color: #777; font-size: 0.85rem; }
.caso-motivi { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.caso-motivi .etichetta-foto { margin: 0; }
.caso-decisione { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--bordo); }
.caso-decisione label { display: block; font-size: 0.88rem; color: #555; }
.caso-decisione input[type="text"] { display: block; width: 100%; margin-top: 4px; }
.caso-pulsanti { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.pulsante-pericolo { background: var(--rosso); }
.pulsante-pericolo:hover { background: #8f2a22; }
.pulsante-pericolo-secondario { background: #fff; color: var(--rosso); border: 1px solid var(--rosso); }
.pulsante-pericolo-secondario:hover { background: #fbeceb; }
.caso-pulsanti { align-items: center; }
.testo-rosso { color: var(--rosso); }
@media (max-width: 560px) {
    .caso-segnalato { grid-template-columns: 1fr; }
    .caso-foto img { max-width: 240px; }
}

/* =====================================================================
   TIPOGRAFIA DEL RICETTARIO (stile Giallo Zafferano)
   Solo dentro .pagina-ricetta (templates/ricetta.php): testo grande,
   interlinea ariosa, colore pieno, titoletti maiuscoli a peso medio.
   Le pagine di gestione (famiglia, pianificatore, form) restano compatte.
   ===================================================================== */
.pagina-ricetta {
    font-size: 1.12rem;          /* ~19px sul desktop */
    line-height: 1.75;
    color: #333;
}
.pagina-ricetta > h1 {
    margin: 8px 0 18px;
    font-size: clamp(1.9rem, 4vw, 2.6rem);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.01em;
}
.pagina-ricetta .scheda { padding: 26px 30px; }
.pagina-ricetta .scheda p { margin: 0 0 1em; }
.pagina-ricetta .scheda p:last-child { margin-bottom: 0; }

/* Ingredienti: righe distanziate e separate da un filo, come nelle
   schede ricetta dei grandi siti di cucina, al posto dei pallini fitti. */
.pagina-ricetta .lista-ingredienti-base {
    list-style: none;
    margin: 14px 0 22px;
    padding: 0;
    max-width: 34em;
}
.pagina-ricetta .lista-ingredienti-base li {
    margin: 0;
    padding: 9px 0 9px 22px;
    border-bottom: 1px solid #ecefe9;
    position: relative;
}
.pagina-ricetta .lista-ingredienti-base li::before {
    content: "";
    position: absolute;
    left: 4px;
    top: 50%;
    width: 7px;
    height: 7px;
    margin-top: -3.5px;
    border-radius: 50%;
    background: var(--verde-header);
}

/* Procedimento: numero grande a sinistra, testo del passo in corpo pieno. */
.pagina-ricetta .scheda ol {
    margin: 0;
    padding-left: 1.6em;
}
.pagina-ricetta .scheda ol > li { padding-left: 6px; }
.pagina-ricetta .scheda ol > li::marker {
    font-weight: 700;
    color: var(--verde-scuro);
}
.pagina-ricetta .scheda ol > li > br + br { display: none; }
.pagina-ricetta .scheda ol > li + li { margin-top: 18px; }
.pagina-ricetta .pillola { font-size: 0.78rem; }
.pagina-ricetta .pillola-passo { margin: 6px 0 0; }

/* Tabelle e righe numeriche: restano leggermente piu' piccole del testo
   corrente, altrimenti su telefono le colonne dei familiari non ci stanno. */
.pagina-ricetta table,
.pagina-ricetta .macro-riga { font-size: 0.95rem; line-height: 1.5; }
.pagina-ricetta small { font-size: 0.85em; }

.cta-ricetta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.cta-ricetta small { color: #6a6a6a; }

@media (max-width: 640px) {
    .pagina-ricetta { font-size: 1.06rem; line-height: 1.7; }
    .pagina-ricetta .scheda { padding: 20px 18px; }
    .scheda h2 { font-size: 1.3rem; }
}

/* =====================================================================
   HOME PER CHI NON HA UN ACCOUNT (templates/home.php, blocco !$dentro)
   ===================================================================== */
.presentazione-hero .presentazione-occhiello { margin-bottom: 10px; }
.presentazione-hero .presentazione-intro { font-size: 1.15rem; line-height: 1.65; }

.presentazione-demo { max-width: 34em; padding: 18px 22px; text-align: left; }
.presentazione-demo-piatto { text-align: center; }
.presentazione-demo-piatto small { font-weight: 400; color: #777; font-size: 0.8em; }
.presentazione-demo-porzioni {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 10px;
    list-style: none;
    margin: 0;
    padding: 0;
}
.presentazione-demo-porzioni li {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px 6px;
    border-radius: var(--raggio);
    background: var(--grigio-chiaro);
    text-align: center;
    line-height: 1.3;
}
.demo-nome { font-weight: 700; }
.demo-nota { font-size: 0.8rem; color: #777; }
.presentazione-demo-porzioni strong { margin-top: 4px; font-size: 1.35rem; }
.presentazione-demo-nota {
    text-align: center;
    font-weight: 700;
    color: var(--verde-scuro);
}

.presentazione-azione-cima { margin: 26px 0 6px; }
.presentazione-nota-cta { margin: 0; text-align: center; color: #6f746c; }

.sezione-titolo {
    margin: 0 0 16px;
    font-size: clamp(1.35rem, 3vw, 1.7rem);
    line-height: 1.2;
    text-align: center;
}

.problema-famiglia {
    max-width: 44em;
    margin: 44px auto 8px;
    text-align: center;
}
.problema-elenco {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 10px;
    list-style: none;
    margin: 0 0 18px;
    padding: 0;
    text-align: left;
}
.problema-elenco li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    background: #fff;
    border: 1px solid var(--bordo);
    border-radius: var(--raggio);
}
.problema-elenco li span { font-size: 1.4rem; line-height: 1; }
.problema-chiusura { font-size: 1.15rem; margin: 0; }
.problema-chiusura strong { display: block; margin-top: 4px; color: var(--verde-scuro); }

.flusso-facilitato .flusso-titolo { font-size: 1.3rem; }

.dentro-app { margin: 40px 0 28px; }
.dentro-app-schermate {
    display: flex;
    align-items: stretch;
    justify-content: center;
    gap: 12px;
}
.schermata {
    flex: 1 1 0;
    min-width: 0;
    max-width: 290px;
    margin: 0;
    padding: 0 0 12px;
    background: #fff;
    border: 1px solid var(--bordo);
    border-radius: 14px;
    box-shadow: 0 6px 18px rgba(29, 58, 36, 0.08);
    overflow: hidden;
}
.schermata figcaption {
    padding: 10px 14px;
    background: var(--verde-header);
    color: var(--testo-header);
    font-weight: 700;
    font-size: 0.95rem;
}
.schermata-righe { list-style: none; margin: 0; padding: 4px 14px 0; }
.schermata-righe li {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px dashed var(--bordo);
    font-size: 0.95rem;
}
.schermata-righe li:last-child { border-bottom: none; }
.schermata-righe small { display: block; color: #888; font-size: 0.75rem; line-height: 1.2; }
.schermata-righe strong { color: var(--verde-scuro); white-space: nowrap; }
.schermata-piede {
    margin: 6px 14px 0;
    padding-top: 8px;
    border-top: 1px solid var(--bordo);
    font-size: 0.9rem;
}
.schermata-freccia {
    align-self: center;
    font-size: 1.6rem;
    color: var(--verde);
}
.dentro-app-nota { margin: 12px 0 0; text-align: center; color: #777; }

@media (max-width: 760px) {
    .dentro-app-schermate { flex-direction: column; align-items: center; }
    .schermata { width: 100%; max-width: 360px; flex: none; }
    .schermata-freccia { transform: rotate(90deg); line-height: 1; }
}

.presentazione-prova { margin-top: 8px !important; color: #7a7f77 !important; }

.risultati-tempo {
    max-width: 40em;
    margin: 36px auto 20px;
    text-align: center;
}
.risultati-tempo .sezione-titolo { font-size: 1.25rem; margin-bottom: 8px; }
.risultati-tempo p { margin: 0; color: #555; }

.cta-finale {
    margin: 40px 0 30px;
    padding: 30px 20px;
    text-align: center;
    background: #fff;
    border: 1px solid var(--bordo);
    border-radius: var(--raggio);
}
.cta-finale-slogan {
    margin: 0;
    font-size: clamp(1.3rem, 3vw, 1.7rem);
    font-weight: 700;
    color: var(--verde-scuro);
}
.cta-finale .presentazione-azione { margin: 18px 0 6px; }

.ricerca-home-intro { margin: -6px 0 14px; color: #555; }

/* Quattro elementi: 4 in fila o 2x2, mai 3+1 con un orfano sotto. */
.presentazione-demo-porzioni { grid-template-columns: repeat(4, 1fr); }
.problema-elenco,
.presentazione-punti { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 560px) {
    .presentazione-demo-porzioni { grid-template-columns: repeat(2, 1fr); }
    .problema-elenco,
    .presentazione-punti { grid-template-columns: 1fr; }
}

/* =====================================================================
   HOME LARGA SU DESKTOP
   La home per chi non ha un account usa fino a 1120px: hero, schede e
   demo hanno bisogno di spazio; i paragrafi invece restano a misura di
   lettura (max-width in em sulle singole regole). Le altre pagine restano
   a 960px. :has() c'e' in tutti i browser attuali; dove manca, la pagina
   resta semplicemente a 960px, identica a prima.
   ===================================================================== */
main:has(> .presentazione-hero) { max-width: 1120px; }

.presentazione-hero { padding-top: 40px; }
.presentazione-hero .presentazione-titolo { font-size: clamp(2rem, 4.6vw, 3.2rem); max-width: 16em; }
.presentazione-hero .presentazione-intro { max-width: 36em; font-size: 1.2rem; }

.presentazione-demo { max-width: 44em; padding: 22px 26px; }
.presentazione-demo-testa {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-bottom: 14px;
}
.presentazione-demo-foto {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    object-fit: cover;
    flex: 0 0 auto;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15);
}
.presentazione-demo-foto-vuota {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 2.2rem;
    background: #fdf1e4;
    box-shadow: none;
}
.presentazione-demo-piatto { margin: 0; text-align: left; font-size: 1.3rem; line-height: 1.2; }
.presentazione-demo-piatto small { display: block; font-size: 0.72em; font-weight: 400; color: #777; }
.presentazione-demo-porzioni strong { font-size: 1.6rem; line-height: 1.1; }
.demo-unita { font-size: 0.8rem; color: #777; }

/* Problema e "come funziona" affiancati */
.home-riga-due { margin: 52px 0 12px; }
.home-riga-due .problema-famiglia { margin: 0 auto 28px; max-width: 34em; }
.home-riga-due .flusso { margin: 0 auto; }
@media (min-width: 900px) {
    .home-riga-due {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 36px;
        align-items: center;
    }
    .home-riga-due .problema-famiglia { margin: 0; text-align: left; }
    .home-riga-due .problema-famiglia .sezione-titolo { text-align: left; }
    .home-riga-due .flusso { max-width: none; }
}
.problema-testo { font-size: 1.2rem; margin: 0 0 12px; }
.problema-chiusura strong { font-size: 1.3rem; }

.sezione-sottotitolo {
    max-width: 38em;
    margin: -6px auto 22px;
    text-align: center;
    color: #5b5f58;
    font-size: 1.08rem;
}

/* La demo diventa il pezzo forte: schermate piu' grandi, testo piu' grande. */
.dentro-app { margin: 60px 0 36px; }
.dentro-app .sezione-titolo { font-size: clamp(1.5rem, 3.4vw, 2.1rem); }
.schermata { max-width: 340px; }
.schermata figcaption { font-size: 1.02rem; padding: 12px 16px; }
.schermata-righe { padding: 6px 16px 0; }
.schermata-righe li { font-size: 1.02rem; padding: 10px 0; }

/* Vantaggi: 4 in fila su desktop largo, fondo caldo e icona in un tondo,
   meno "pannello amministrativo". */
@media (min-width: 1000px) {
    .presentazione-punti { grid-template-columns: repeat(4, 1fr); }
}
.presentazione-punti article {
    background: #fffaf3;
    border-color: #f0e4d2;
    padding: 20px 20px 18px;
}
.presentazione-emoji {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 2px 6px rgba(160, 110, 40, 0.15);
    font-size: 1.6rem;
}
.presentazione-punti h2 { margin-top: 12px; font-size: 1.12rem; line-height: 1.3; }

/* Vetrina fotografica */
.vetrina { margin: 56px 0 20px; }
.vetrina-foto {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}
.vetrina-voce {
    display: block;
    position: relative;
    aspect-ratio: 4 / 3;
    border-radius: 12px;
    overflow: hidden;
    color: #fff;
    text-decoration: none;
    background: #e9e3d8;
}
.vetrina-voce img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}
.vetrina-voce:hover img { transform: scale(1.04); }
.vetrina-voce span {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 28px 12px 10px;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.65));
    font-weight: 700;
    line-height: 1.25;
}
@media (max-width: 760px) {
    .vetrina-foto { grid-template-columns: repeat(2, 1fr); gap: 10px; }
}

.anteprima-obiettivo { max-width: 900px; margin-left: auto; margin-right: auto; }
.cta-finale { max-width: 900px; margin-left: auto; margin-right: auto; }
.ricerca-home { max-width: 900px; margin-left: auto; margin-right: auto; }
.vetrina { margin-bottom: 40px; }
.flusso-testo strong { line-height: 1.3; }

/* =====================================================================
   HOME v3 — pentola che si divide, fiducia, perche' e' diverso
   ===================================================================== */
.presentazione-hero .presentazione-intro { font-size: clamp(1.2rem, 2.4vw, 1.45rem); line-height: 1.4; color: var(--grigio-testo); }
.presentazione-intro-piccola { max-width: 34em; margin: 10px auto 0; color: #666; font-size: 1.02rem; }

/* La pentola e i quattro piatti: il "momento wow" */
.pentola-demo {
    max-width: 780px;
    margin: 30px auto 6px;
    padding: 26px 24px 20px;
    background: #fff;
    border: 1px solid var(--bordo);
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(29, 58, 36, 0.08);
}
.pentola {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    padding: 10px 22px 10px 10px;
    background: #fdf3e7;
    border: 2px solid #f0d9bb;
    border-radius: 999px;
    text-align: left;
}
.pentola-foto {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    object-fit: cover;
    flex: 0 0 auto;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
}
.pentola-foto-vuota {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    font-size: 2.8rem;
    box-shadow: none;
}
.pentola-piatto { margin: 0; font-size: 1.3rem; font-weight: 700; line-height: 1.2; }
.pentola-totale { margin: 2px 0 0; font-size: 1.05rem; color: #6b4a1f; }
.pentola-totale strong { font-size: 1.5rem; color: #b25a12; }

/* I rami che scendono dalla pentola ai piatti: solo decorazione. */
.pentola-rami {
    position: relative;
    height: 34px;
    margin: 6px auto 0;
    max-width: 75%;
    display: flex;
    justify-content: space-between;
    border-top: 2px dashed #e5c9a3;
}
.pentola-rami::before {
    content: "";
    position: absolute;
    left: 50%;
    top: -14px;
    height: 12px;
    border-left: 2px dashed #e5c9a3;
}
.pentola-rami span { width: 0; border-left: 2px dashed #e5c9a3; }

.pentola-piatti {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    list-style: none;
    margin: 0;
    padding: 0;
}
.pentola-piatti li {
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1.25;
}
.piatto-disco {
    width: 64px;
    height: 64px;
    margin-bottom: 8px;
    border-radius: 50%;
    background: radial-gradient(circle, #fff 0 52%, #f3efe8 53% 100%);
    border: 1px solid #e3ddd2;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.08);
}
.pentola-piatti strong { font-size: 1.7rem; color: var(--verde-scuro); line-height: 1.1; }
.pentola-nota { margin: 18px 0 0; font-weight: 700; color: var(--verde-scuro); }

@media (max-width: 560px) {
    .pentola { padding-right: 16px; gap: 12px; }
    .pentola-foto { width: 72px; height: 72px; }
    .pentola-rami { max-width: 76%; }
    .pentola-piatti { gap: 6px; }
    .piatto-disco { width: 46px; height: 46px; }
    .pentola-piatti strong { font-size: 1.3rem; }
    .demo-nome { font-size: 0.9rem; }
}

/* Il calcolatore ora sta subito dopo l'hero: piu' aria sopra. */
.presentazione-hero + .anteprima-obiettivo { margin-top: 44px; }
.flusso-facilitato { margin-top: 44px; }

/* Screenshot vero dell'app, quando c'e' */
.dentro-app-vera {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    gap: 28px;
    align-items: center;
}
.dentro-app-vera img {
    width: 100%;
    height: auto;
    border-radius: 14px;
    border: 1px solid var(--bordo);
    box-shadow: 0 12px 34px rgba(29, 58, 36, 0.14);
}
.dentro-app-punti { list-style: none; margin: 0; padding: 0; font-size: 1.2rem; font-weight: 700; color: var(--verde-scuro); }
.dentro-app-punti li + li { margin-top: 14px; }
@media (max-width: 760px) { .dentro-app-vera { grid-template-columns: 1fr; } }

/* Perche' e' diverso */
.perche-diverso {
    max-width: 44em;
    margin: 56px auto 24px;
    text-align: center;
}
.perche-diverso-slogan {
    margin: 0 0 12px;
    font-size: clamp(1.15rem, 2.4vw, 1.35rem);
    font-weight: 700;
    color: #b25a12;
}
.perche-diverso p:last-child { color: #555; }

/* Fiducia */
.fiducia {
    margin: 40px 0;
    padding: 30px 26px 24px;
    background: #eef5ea;
    border-radius: 16px;
}
.fiducia-voci {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    list-style: none;
    margin: 0;
    padding: 0;
}
.fiducia-voci li { display: flex; flex-direction: column; gap: 4px; line-height: 1.35; }
.fiducia-voci span { font-size: 1.7rem; line-height: 1; margin-bottom: 4px; }
.fiducia-voci strong { color: var(--verde-scuro); }
.fiducia-voci small { color: #555; font-size: 0.9rem; }
.fiducia-link { margin: 20px 0 0; display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: center; font-weight: 700; }
.fiducia-link a { color: var(--verde-scuro); }
@media (max-width: 900px) { .fiducia-voci { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .fiducia-voci { grid-template-columns: 1fr; } }

/* Benefici secondari: tre, compatti */
@media (min-width: 700px) {
    .presentazione-punti.presentazione-punti-tre { grid-template-columns: repeat(3, 1fr); }
}
.presentazione-punti-tre article { padding: 16px 18px; }
.presentazione-punti-tre h2 { font-size: 1.05rem; }

/* Come funziona in orizzontale su desktop: tre passi in fila, freccia a
   destra invece che sotto. Sul telefono resta la colonna. */
@media (min-width: 900px) {
    .flusso-facilitato { max-width: none; padding: 22px 24px; }
    .flusso-facilitato .flusso-passi {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 36px;
    }
    .flusso-facilitato .flusso-passo { position: relative; }
    .flusso-facilitato .flusso-passo > span { height: 100%; }
    .flusso-facilitato .flusso-passo + .flusso-passo::before {
        content: "→";
        content: "→" / "";
        position: absolute;
        left: -28px;
        top: 50%;
        transform: translateY(-50%);
        padding: 0;
    }
}

/* =====================================================================
   HOME v4 — CTA intermedie, prima/dopo, FAQ
   ===================================================================== */
/* Pulsante dopo ogni "ah, ecco" */
.cta-intermedia {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px 16px;
    margin: 22px 0 8px;
}
.cta-intermedia small { color: #6f746c; }

/* La spesa gia' fatta */
.spesa-pronta {
    display: flex;
    align-items: center;
    gap: 22px;
    max-width: 900px;
    margin: 44px auto;
    padding: 24px 28px;
    background: #fffaf3;
    border: 1px solid #f0e4d2;
    border-radius: 16px;
}
.spesa-pronta-icona {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 76px;
    height: 76px;
    border-radius: 50%;
    background: #fff;
    font-size: 2.3rem;
    box-shadow: 0 2px 8px rgba(160, 110, 40, 0.15);
}
.spesa-pronta h2 { margin: 0 0 6px; font-size: clamp(1.2rem, 2.6vw, 1.5rem); }
.spesa-pronta p { margin: 0; color: #555; }
@media (max-width: 560px) { .spesa-pronta { flex-direction: column; text-align: center; } }

/* Prima / con Porzioni */
.prima-dopo {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    margin: 48px 0;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid var(--bordo);
}
.prima-dopo > div { padding: 26px 28px; }
.prima-dopo h2 { margin: 0 0 12px; font-size: 1.25rem; }
.prima-dopo-prima { background: #f7f5f1; }
.prima-dopo-prima h2 { color: #6d665c; }
.prima-dopo-prima ul { margin: 0; padding-left: 1.1em; color: #5d574e; }
.prima-dopo-prima li + li { margin-top: 6px; }
.prima-dopo-con { background: #eef5ea; }
.prima-dopo-slogan { margin: 0 0 10px; font-size: 1.3rem; font-weight: 700; color: var(--verde-scuro); line-height: 1.3; }
.prima-dopo-con p:last-child { margin: 0; color: #444; }
@media (max-width: 700px) { .prima-dopo { grid-template-columns: 1fr; } }

.fiducia-lead { max-width: 40em; margin: -4px auto 22px; text-align: center; color: #3c4a3a; font-size: 1.08rem; }

.famiglie-attive { margin: 10px 0 30px; text-align: center; font-size: 1.15rem; color: var(--verde-scuro); }

/* Domande frequenti */
.faq-home { max-width: 820px; margin: 48px auto 20px; }
.faq-home details {
    background: #fff;
    border: 1px solid var(--bordo);
    border-radius: var(--raggio);
    padding: 0 18px;
}
.faq-home details + details { margin-top: 10px; }
.faq-home summary {
    cursor: pointer;
    padding: 14px 0;
    font-weight: 700;
    font-size: 1.05rem;
    list-style: none;
    display: flex;
    justify-content: space-between;
    gap: 12px;
}
.faq-home summary::-webkit-details-marker { display: none; }
.faq-home summary::after { content: "+"; color: var(--verde); font-size: 1.3rem; line-height: 1; }
.faq-home details[open] summary::after { content: "−"; }
.faq-home details p { margin: 0 0 16px; color: #444; }

/* La pentola divisa, in ogni pasto in comune del piano settimanale
   (templates/piano.php): stessa torta della pagina ricetta, piu' piccola,
   con accanto chi prende cosa. */
.pentola-divisa {
    display: flex;
    align-items: center;
    gap: 22px;
    margin: 16px 0 4px;
    padding: 14px 16px;
    background: var(--grigio-chiaro);
    border-radius: var(--raggio);
}
.pentola-divisa-torta { flex: 0 0 auto; }
.pentola-divisa-torta .torta-porzioni { width: 170px; height: 170px; display: block; }
.pentola-divisa-testo { flex: 1 1 auto; min-width: 0; }
.pentola-divisa-titolo { margin: 0 0 8px; font-weight: 700; }
.pentola-divisa-legenda { list-style: none; margin: 0 0 8px; padding: 0; }
.pentola-divisa-legenda li {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 3px 0;
}
.pentola-divisa-legenda .pallino {
    flex: 0 0 auto;
    width: 12px;
    height: 12px;
    border-radius: 50%;
}
.pentola-divisa-legenda strong { min-width: 5em; }
.pentola-divisa-parti { margin-left: auto; color: #555; font-size: 0.9em; white-space: nowrap; }
.pentola-divisa p { margin: 0; }
@media (max-width: 560px) {
    .pentola-divisa { flex-direction: column; align-items: stretch; }
    .pentola-divisa-torta { align-self: center; }
}
@media print {
    .pentola-divisa { break-inside: avoid; background: none; border: 1px solid #ccc; }
}

/* Hero: la pentola divisa a torta (sostituisce i quattro piatti vuoti). */
.pentola-stelo {
    width: 0;
    height: 22px;
    margin: 4px auto;
    border-left: 2px dashed #e5c9a3;
}
.pentola-divisione {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 34px;
}
.pentola-divisione-torta { flex: 0 0 auto; }
.pentola-divisione-torta .torta-porzioni { display: block; width: 240px; height: 240px; }
.pentola-divisione-legenda {
    list-style: none;
    margin: 0;
    padding: 0;
    min-width: 260px;
    text-align: left;
}
.pentola-divisione-legenda li {
    display: grid;
    grid-template-columns: 14px 1fr auto auto;
    align-items: center;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px dashed var(--bordo);
}
.pentola-divisione-legenda li:last-child { border-bottom: none; }
.pentola-divisione-legenda .pallino { width: 14px; height: 14px; border-radius: 50%; }
.legenda-chi { display: flex; flex-direction: column; line-height: 1.2; }
.legenda-chi small { color: #777; font-size: 0.8rem; }
.legenda-grammi { font-size: 1.45rem; font-weight: 800; line-height: 1; }
.legenda-parti { color: #666; font-size: 0.85rem; white-space: nowrap; min-width: 4.5em; text-align: right; }
.pentola-senza-bilancia { max-width: 36em; margin: 16px auto 0; color: #555; font-size: 0.95rem; }
@media (max-width: 640px) {
    .pentola-divisione { flex-direction: column; gap: 14px; }
    .pentola-divisione-torta .torta-porzioni { width: 210px; height: 210px; }
    .pentola-divisione-legenda { min-width: 0; width: 100%; }
}

/* Pianificatore: lucchetto e spostamento (db/059). */
.casella-bloccata { box-shadow: inset 0 0 0 2px #8f6d18; }
.casella-lucchetto { margin-right: 3px; }
.catalogo-sposta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    margin: 0 0 12px;
    padding: 12px 14px;
    background: var(--grigio-chiaro);
    border-radius: var(--raggio);
}
.catalogo-sposta select { flex: 1 1 260px; min-width: 0; }
.catalogo-sposta small { flex-basis: 100%; color: #666; }
.catalogo-bloccata {
    margin: 0 0 12px;
    padding: 12px 14px;
    background: #fbf5e6;
    border-left: 4px solid #8f6d18;
    border-radius: var(--raggio);
}

/* Torte animate (js/torta_animata.js): con JavaScript attivo restano
   nascoste finche' lo script non le prende in carico, per non far vedere
   la torta finita e poi chiusa di colpo. Se lo script non arriva, dopo 3
   secondi si mostrano comunque. Senza JavaScript (scripting: none) la
   regola non si applica e la torta e' subito visibile. */
@media (scripting: enabled) {
    .torta-porzioni[data-anima]:not(.torta-pronta) {
        visibility: hidden;
        animation: torta-mostra-comunque 0s 3s forwards;
    }
}
@keyframes torta-mostra-comunque { to { visibility: visible; } }
@media print {
    .torta-porzioni[data-anima] { visibility: visible !important; }
}

/* Profilo di sazieta' (pagina ricetta): tre card compatte. Le pillole non
   sono pulsanti, quindi niente ombra ne' cursore. Il colore e' il giudizio:
   verde favorevole, giallo nella media, rosso sfavorevole. */
.sazieta-sottotitolo { margin: 0 0 12px; color: #555; }
.sazieta-indicatori {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 10px;
    margin-bottom: 10px;
}
.sazieta-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 12px 14px;
    background: var(--grigio-chiaro);
    border-radius: var(--raggio);
}
.sazieta-nome { font-size: 0.85rem; color: #555; }
.sazieta-valore { font-size: 1.1rem; }
.sazieta-pillola {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 700;
    border: 1px solid transparent;
}
.sazieta-pillola::before { content: "\25CF\00a0"; }
.sazieta-buono  { background: #e4f2e9; color: var(--verde-scuro); border-color: #b9dcc6; }
.sazieta-medio  { background: #fdf6d3; color: #7a5c00; border-color: #ecd77a; }
.sazieta-scarso { background: #fbe7e5; color: var(--rosso); border-color: #efbdb7; }
.sazieta-nd     { background: #fff; color: #777; border-color: var(--bordo); }
.sazieta-meglio { color: #777; font-size: 0.78rem; }
/* Spiegazioni richiudibili delle schede ricetta ("Come leggere..."). */
.scheda-approfondisci { margin-top: 10px; }
.scheda-approfondisci summary { cursor: pointer; font-weight: 600; color: var(--verde-scuro); }
.scheda-approfondisci[open] summary { margin-bottom: 6px; }
.scheda-approfondisci p { margin: 0 0 8px; }

/* Il riquadro "Senza bilancia" ora ha piu' paragrafi (quote, mestolo,
   taglio): margini fra loro, non sul riquadro. */
.divisione-istruzione p { margin: 0 0 6px; }
.divisione-istruzione p:last-child { margin-bottom: 0; }

/* Scelta della tempistica nella pagina Obiettivo: il colore segnala il
   rischio di effetto yo-yo. Le <option> colorate non sono supportate da
   tutti i browser (Safari le ignora): per questo l'etichetta dice anche a
   parole il livello, e il riquadro sotto il menu ripete il colore. */
select.livello-verde     { border-color: var(--verde); }
select.livello-arancione { border-color: var(--arancio); background-color: #fdf0e3; }
select.livello-rosso     { border-color: var(--rosso); background-color: #fbe9e7; }
option.livello-verde     { background: #fff; color: inherit; }
option.livello-arancione { background: #fdf0e3; color: #8a4513; }
option.livello-rosso     { background: #fbe9e7; color: var(--rosso); }

.tempistica-esito:empty { display: none; }
.tempistica-esito {
    padding: 10px 14px;
    border-radius: var(--raggio);
    margin: 4px 0 10px;
    border-left: 4px solid var(--bordo);
}
.tempistica-esito.livello-verde     { background: #eaf3ec; border-left-color: var(--verde); }
.tempistica-esito.livello-arancione { background: #fdf0e3; border-left-color: var(--arancio); }
.tempistica-esito.livello-rosso,
.tempistica-esito.livello-errore    { background: #fbe9e7; border-left-color: var(--rosso); }
.tempistica-limiti { margin: 0 0 10px; color: #666; }
.testo-arancione { color: var(--arancio); }
.testo-rosso     { color: var(--rosso); }

/* Elenco di cosa manca al piano, dentro l'avviso prima delle stampe. */
.lacune-piano { margin: 8px 0 0; padding-left: 20px; }
.lacune-piano li { margin: 2px 0; }
.avviso-incompleto .preferiti-azioni { display: flex; flex-wrap: wrap; gap: 8px; }

/* "La tua famiglia" col (+) accanto: riporta a "Crea la tua famiglia". */
.titolo-famiglia { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.pulsante-aggiungi {
    width: 36px; height: 36px; padding: 0;
    border-radius: 50%;
    font-size: 1.4rem; line-height: 1; font-weight: 700;
    display: inline-flex; align-items: center; justify-content: center;
}
.nome-famiglia { margin: -8px 0 14px; color: #666; }
.famiglia-completa { margin-top: 16px; padding-top: 12px; border-top: 1px dashed var(--bordo); }

/* Familiare in pausa (fuori casa): la scheda resta, ma si vede che aspetta. */
.membro-in-pausa { opacity: 0.8; }
.avviso-pausa { background: #eef3fb; border-left-color: #5b7fb5; margin-top: 0; }
.riga-valuta.membro-in-pausa { opacity: 0.75; }

/* Pulsante "Inserisci una nuova pesata" in testa all'andamento, e invito
   ai progressi dopo il salvataggio. */
.invito-pesata { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.invito-progressi p { margin: 0 0 8px; }
.invito-progressi p:last-child { margin-bottom: 0; }

/* Una <button> con l'aspetto di .pillola (Metti in pausa, Riprendi): senza,
   erediterebbe il testo bianco dei pulsanti su fondo chiaro. */
button.pillola {
    color: var(--verde-scuro);
    font-weight: 600;
    cursor: pointer;
    line-height: inherit;
}
button.pillola:hover { background: #fff; }

/* .pulsante-secondario nasce per i link: su una <button> prendeva il fondo
   verde dei pulsanti con il testo grigio, illeggibile (si vedeva anche in
   "Torna alla proposta automatica" nella pagina Obiettivo). */
button.pulsante-secondario { background: #fff; cursor: pointer; font: inherit; }
button.pulsante-secondario:hover { background: var(--grigio-chiaro); }
.famiglia-completa button.pulsante-secondario { margin-left: 0; }

/* "Quando fate la pesata di famiglia?": chiesta dopo i primi dati. */
.domanda-giorno-pesata { border-left: 4px solid var(--verde); }
.form-giorno-pesata { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.form-giorno-pesata select {
    width: auto; min-width: 180px;
    padding: 9px 12px; font-size: 1rem;
    border: 1px solid var(--bordo); border-radius: var(--raggio); background: #fff;
}
.invito-progressi .domanda-giorno-pesata { margin: 12px 0 0; }

/* 📅 accanto al (+) nel titolo della famiglia: apre un piccolo pannello per
   cambiare il giorno della pesata. <details> per non servire JavaScript. */
.giorno-pesata-titolo { position: relative; display: inline-block; font-size: 1rem; font-weight: normal; }
.giorno-pesata-titolo > summary {
    list-style: none;
    cursor: pointer;
    font-size: 1.1rem;
    background: var(--verde);
    color: #fff;
}
.giorno-pesata-titolo > summary::-webkit-details-marker { display: none; }
.pannello-giorno-pesata {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    z-index: 20;
    display: flex; flex-direction: column; gap: 8px;
    min-width: 230px;
    padding: 14px;
    background: #fff;
    border: 1px solid var(--bordo);
    border-radius: var(--raggio);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
    text-transform: none; letter-spacing: normal;
}
.pannello-giorno-pesata label { font-weight: 600; font-size: 0.9rem; color: var(--grigio-testo); }
.pannello-giorno-pesata select {
    padding: 8px 10px; font-size: 1rem;
    border: 1px solid var(--bordo); border-radius: var(--raggio); background: #fff;
}

/* "Il giorno della pesata è la domenica", sotto il nome della famiglia. */
.giorno-pesata-famiglia { margin: -8px 0 14px; color: var(--grigio-testo); }

/* Ritorno graduale al mantenimento: i passi settimanali. */
.tabella-rampa { width: 100%; border-collapse: collapse; }
.tabella-rampa th, .tabella-rampa td { padding: 6px 10px; border-bottom: 1px dashed var(--bordo); text-align: left; }
.tabella-rampa .passo-in-vigore { background: #eaf3ec; }
.tabella-rampa .passo-passato { color: #999; }