/* CiBot — Eleonora (lampone, a sinistra) e Andrea (petrolio, a destra).
   Il colore serve a distinguere le due colonne: scorre uguale dall'alto in basso. */

:root {
    --ink: #1b2432;
    --fog: #eef1f5;
    --surface: #ffffff;
    --line: #d5dce5;
    --muted: #586577;
    --lampone: #b5336b;
    --lampone-t: #f8e4ee;
    --petrolio: #17708c;
    --petrolio-t: #dff0f5;
    --zafferano: #f0a81b;
    --r: 12px;
    --barra: 3.25rem;
    --tab: 3.6rem;
    --font: "Avenir Next", "Segoe UI Variable Display", "Trebuchet MS", system-ui, sans-serif;
}

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

html, body {
    margin: 0;
    background: var(--fog);
    color: var(--ink);
    font-family: var(--font);
    font-size: 16px;
    line-height: 1.45;
    -webkit-text-size-adjust: 100%;
}

/* Niente zoom con il doppio tocco; resta lo zoom a due dita. */
html, body, button, a, input, select, textarea, label, main, div, span, p, h1, h2, h3, li, ul, section, header, nav, figure, img { touch-action: manipulation; }

h1, h2, h3, p, ul { margin: 0; }
a { color: var(--petrolio); }
:focus-visible { outline: 3px solid var(--zafferano); outline-offset: 2px; }
/* Al cambio pagina Blazor porta il focus sul titolo (utile ai lettori di schermo): senza riquadro evidenziato. */
h1:focus, h1:focus-visible { outline: none; }

/* --- Barra e navigazione --- */

.barra {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    gap: 1rem;
    min-height: calc(var(--barra) + env(safe-area-inset-top));
    padding: env(safe-area-inset-top) 1rem 0;
    background: var(--ink);
    color: #fff;
}
.marchio {
    color: #fff;
    text-decoration: none;
    font-weight: 700;
    font-size: 1.05rem;
    letter-spacing: -0.01em;
}
.navigazione { display: flex; gap: .25rem; margin-left: 1rem; }
.nav-voce {
    padding: .5rem .85rem;
    border-radius: 999px;
    color: #c9d2de;
    font-weight: 600;
    text-decoration: none;
}
.nav-voce:hover { color: #fff; }
.nav-voce.active { background: #fff; color: var(--ink); }
.utente { margin-left: auto; display: flex; align-items: center; gap: .6rem; }
.utente-account {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .45rem .75rem;
    border-radius: 999px;
    color: #c9d2de;
    font-size: .95rem;
    font-weight: 600;
    text-decoration: none;
}
.utente-account svg { width: 1.2rem; height: 1.2rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.utente-account:hover { color: #fff; }
.utente-account.active { background: #fff; color: var(--ink); }

@media (max-width: 719px) {
    .navigazione {
        position: fixed;
        left: 0; right: 0; bottom: 0;
        z-index: 30;
        margin: 0;
        gap: 0;
        padding: .35rem .5rem calc(.35rem + env(safe-area-inset-bottom));
        background: var(--surface);
        border-top: 1px solid var(--line);
    }
    .nav-voce {
        flex: 1;
        padding: .7rem .25rem;
        border-radius: var(--r);
        text-align: center;
        color: var(--muted);
    }
    .nav-voce.active { background: var(--ink); color: #fff; }
}

.contenuto {
    max-width: 980px;
    margin: 0 auto;
    padding: 1.25rem 1rem 3rem;
}
/* Dopo la regola base (stessa specificità): su telefono il fondo della pagina deve stare sopra la barra fissa. */
@media (max-width: 719px) {
    .contenuto { padding-bottom: calc(var(--tab) + env(safe-area-inset-bottom) + 2rem); }
}

/* --- Titoli e testi --- */

.testata { margin-bottom: 1rem; }
.testata h1, .accesso h1 {
    font-size: 2rem;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.02em;
}
.data { margin-top: .2rem; color: var(--muted); }
.indietro { margin-bottom: .75rem; }
.giorno-titolo { margin: 1rem 0 0; font-size: 1.15rem; font-weight: 800; }

.piano-in-uso {
    display: inline-flex;
    align-items: center;
    margin-top: .5rem;
    color: var(--ink);
    font-weight: 600;
    text-decoration: none;
}
.piano-in-uso::before {
    content: "";
    width: .6rem; height: .6rem;
    margin-right: .45rem;
    border-radius: 50%;
    background: var(--zafferano);
}
.piano-in-uso:hover { text-decoration: underline; }

.marca-uso {
    display: inline-block;
    padding: .1rem .55rem;
    border-radius: 999px;
    background: var(--zafferano);
    color: var(--ink);
    font-size: .8rem;
    font-weight: 700;
}

/* --- Pulsanti e moduli --- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.75rem;
    padding: .55rem 1.1rem;
    border: 1.5px solid var(--ink);
    border-radius: var(--r);
    background: transparent;
    color: var(--ink);
    font: inherit;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
}
.btn:hover:not(:disabled) { background: rgba(27, 36, 50, .07); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn-primario { background: var(--ink); color: #fff; }
.btn-primario:hover:not(:disabled) { background: #2d3a50; }
.btn-piccolo { min-height: 2.25rem; padding: .3rem .8rem; font-size: .9rem; }
.btn-largo { width: 100%; }
.btn-testo { border-color: transparent; }
.btn-pericolo { color: #a3262e; }
.btn-chiaro { border-color: #6c7a8f; color: #fff; }
.btn-chiaro:hover:not(:disabled) { background: rgba(255, 255, 255, .12); }

.campo { margin-bottom: 1rem; }
.campo label { display: block; margin-bottom: .3rem; font-weight: 700; font-size: .95rem; }
.campo input, .campo select {
    width: 100%;
    min-height: 2.9rem;
    padding: .5rem .8rem;
    border: 1.5px solid var(--line);
    border-radius: var(--r);
    background: var(--surface);
    color: var(--ink);
    font: inherit;
}
.campo input:focus, .campo select:focus { border-color: var(--ink); outline: none; box-shadow: 0 0 0 3px rgba(240, 168, 27, .55); }
.campo select { cursor: pointer; }
.campo .campo-corto { width: 8rem; }
.aiuto { margin-top: .25rem; color: var(--muted); font-size: .85rem; }
.modulo, .accesso { max-width: 24rem; }
.accesso { margin: 6vh auto 0; }
.accesso .data { margin-bottom: 1.5rem; }
.azioni-pagina { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.5rem; }
/* In modifica i pulsanti restano a portata di pollice, sopra la navigazione. */
.azioni-fisse {
    position: sticky;
    bottom: 0;
    z-index: 15;
    margin-top: 1rem;
    padding: .7rem 0;
    background: var(--fog);
    border-top: 1px solid var(--line);
}
@media (max-width: 719px) {
    .azioni-fisse { bottom: calc(var(--tab) + env(safe-area-inset-bottom)); }
}

.avviso, .conferma {
    margin: 0 0 1rem;
    padding: .7rem .9rem;
    border-radius: var(--r);
    font-weight: 600;
}
.avviso { background: #fff3d1; box-shadow: inset 4px 0 0 var(--zafferano); }
.conferma { background: #def2e4; color: #17592b; }
.attesa { color: var(--muted); }

/* --- Attesa: spicchio di pizza che saltella al centro (GIF), con la scritta sotto --- */
/* Compare solo se l'attesa supera mezzo secondo: prima resta invisibile (occupa lo spazio, ma non si vede). */
.caricamento { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5rem; min-height: 60dvh; visibility: hidden; animation: attesa-mostra 0s linear .5s forwards; }
@keyframes attesa-mostra { to { visibility: visible; } }
.caricamento-avvio { min-height: 100dvh; }
.attendi-img { display: block; width: 7.5rem; height: 7.5rem; }
.caricamento-testo { color: var(--ink); font-size: 1.1rem; font-weight: 800; letter-spacing: .02em; }

/* --- Finestra di conferma --- */
.modale-sfondo {
    position: fixed;
    /* segue la parte visibile dello schermo (con la tastiera su iPhone si restringe): vedi index.html */
    left: 0; right: 0;
    top: var(--vv-top, 0px);
    height: var(--vv-h, 100dvh);
    touch-action: none; /* il gesto sullo sfondo non muove la pagina */
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(27, 36, 50, .55);
}
.modale {
    width: 100%;
    max-width: 24rem;
    padding: 1.4rem 1.3rem 1.1rem;
    border-radius: 16px;
    background: var(--surface);
    box-shadow: 0 18px 50px rgba(27, 36, 50, .35);
}
.modale h2 { font-size: 1.2rem; margin-bottom: .5rem; }
.modale p { color: var(--muted); overflow-wrap: anywhere; }
.modale-azioni { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .6rem; margin-top: 1.3rem; }
.modale-modulo { max-height: calc(var(--vv-h, 100dvh) - 2rem); overflow-y: auto; touch-action: pan-y; }
.modale-modulo .avviso { margin-bottom: .8rem; }
.campo textarea {
    width: 100%;
    padding: .6rem .8rem;
    border: 1.5px solid var(--line);
    border-radius: var(--r);
    background: var(--surface);
    color: var(--ink);
    font: inherit;
    line-height: 1.35;
    resize: vertical;
}
.campo textarea:focus { border-color: var(--ink); outline: none; box-shadow: 0 0 0 3px rgba(240, 168, 27, .55); }
.btn-primario.btn-pericolo-pieno { background: #a3262e; color: #fff; }
.btn-primario.btn-pericolo-pieno:hover:not(:disabled) { background: #8a1f26; }
@media (prefers-reduced-motion: no-preference) {
    .modale { animation: modale-entra .14s ease-out; }
    @keyframes modale-entra { from { transform: translateY(8px); opacity: 0; } }
}

.vuoto {
    display: grid;
    justify-items: start;
    gap: .6rem;
    margin-top: 1.25rem;
    padding: 1.25rem;
    border: 2px dashed var(--line);
    border-radius: var(--r);
}
.vuoto-titolo { font-weight: 800; font-size: 1.1rem; }

/* --- Striscia dei giorni --- */

.giorni-striscia {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: .35rem;
    margin: 1rem 0 .25rem;
}
.giorno-bottone {
    position: relative;
    min-height: 2.9rem;
    padding: 0;
    border: 1.5px solid var(--line);
    border-radius: var(--r);
    background: var(--surface);
    color: var(--ink);
    font: inherit;
    font-weight: 800;
    cursor: pointer;
}
.giorno-bottone:hover { border-color: var(--ink); }
.giorno-bottone.scelto { background: var(--ink); border-color: var(--ink); color: #fff; }
.giorno-bottone.pieno::after, .giorno-bottone.oggi::after {
    content: "";
    position: absolute;
    left: 50%; bottom: 5px;
    width: 5px; height: 5px;
    margin-left: -2.5px;
    border-radius: 50%;
    background: var(--muted);
}
.giorno-bottone.scelto.pieno::after { background: #fff; }
.giorno-bottone.oggi::after { width: 7px; height: 7px; margin-left: -3.5px; background: var(--zafferano); }

/* --- La coppia: Eleonora a sinistra, Andrea a destra --- */

.coppia { margin-top: .5rem; }
.coppia-testa {
    position: sticky;
    top: calc(var(--barra) + env(safe-area-inset-top));
    z-index: 10;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .4rem;
    padding: .4rem 0;
    background: var(--fog);
}
.persona {
    padding: .55rem .8rem;
    border-radius: var(--r);
    color: #fff;
    font-size: 1.05rem;
    font-weight: 800;
}
.persona.p0 { background: var(--lampone); }
.persona.p1 { background: var(--petrolio); }

.pasto { margin-top: .9rem; }
.pasto-nome { margin: 0 0 .3rem .15rem; color: var(--muted); font-size: .9rem; font-weight: 700; }
.celle { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem; }
.cella {
    width: 100%;
    min-height: 3.4rem;
    margin: 0;
    padding: .65rem .8rem;
    border: 2px solid transparent;
    border-radius: var(--r);
    color: var(--ink);
    font: inherit;
    overflow-wrap: anywhere;
    white-space: pre-line;
}
.cella.p0 { background: var(--lampone-t); box-shadow: inset 3px 0 0 var(--lampone); }
.cella.p1 { background: var(--petrolio-t); box-shadow: inset 3px 0 0 var(--petrolio); }
.cella.vuota { color: #7c8aa0; }
textarea.cella { resize: vertical; line-height: 1.35; }
textarea.cella:focus { border-color: var(--ink); outline: none; background: var(--surface); }

@media (min-width: 720px) {
    .testata h1, .accesso h1 { font-size: 2.5rem; }
    .cella { padding: .8rem 1rem; font-size: 1.05rem; }
    .persona { font-size: 1.15rem; }
}

/* --- Elenco dei piani --- */

.elenco { display: grid; gap: .5rem; margin: 1rem 0 0; padding: 0; list-style: none; }
.elenco-riga {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .5rem 1rem;
    padding: .85rem 1rem;
    border: 1px solid var(--line);
    border-radius: var(--r);
    background: var(--surface);
}
.elenco-riga.in-uso { border-color: var(--zafferano); box-shadow: inset 4px 0 0 var(--zafferano); }
.elenco-testo {
    display: flex;
    flex: 1 1 12rem;
    flex-wrap: wrap;
    align-items: center;
    gap: .2rem .6rem;
    color: inherit;
    text-decoration: none;
}
.elenco-nome { font-size: 1.05rem; font-weight: 800; }
.elenco-nota { flex-basis: 100%; color: var(--muted); font-size: .9rem; }
.elenco-azioni { display: flex; flex-wrap: wrap; gap: .4rem; }
/* Riga con il testo a tutta larghezza e i pulsanti sotto (ricette: nome, ingredienti e note lunghi). */
.elenco-riga.riga-colonna { flex-direction: column; flex-wrap: nowrap; align-items: stretch; }
.riga-colonna .elenco-testo { flex: none; }

/* --- Ricette --- */

.ricetta-testo { flex-direction: column; align-items: flex-start; gap: .15rem; }
.ricetta-usi { color: var(--muted); font-size: .85rem; }
.ricetta-ingredienti { color: var(--ink); font-size: .92rem; white-space: pre-line; overflow-wrap: anywhere; }

/* --- Ricette dentro le celle del piano --- */

.piatti { display: grid; gap: .3rem; margin: 0; padding: 0; list-style: none; }
.piatto-vista { font-weight: 600; overflow-wrap: anywhere; }
.piatto-vista + .piatto-vista { padding-top: .3rem; border-top: 1px solid rgba(27, 36, 50, .12); }
.cella-modifica { display: grid; gap: .45rem; align-content: start; }
.piatto {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .4rem;
    padding: .25rem .25rem .25rem .6rem;
    border-radius: 999px;
    background: var(--surface);
    font-weight: 600;
}
.piatto-nome { overflow-wrap: anywhere; }
.piatto-togli {
    flex: none;
    width: 1.9rem;
    height: 1.9rem;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--muted);
    font: inherit;
    font-size: 1.2rem;
    line-height: 1;
    cursor: pointer;
}
.piatto-togli:hover { background: rgba(27, 36, 50, .09); color: var(--ink); }
.aggiungi {
    width: 100%;
    min-height: 2.5rem;
    padding: .35rem .5rem;
    border: 1.5px dashed #8795a9;
    border-radius: var(--r);
    background: rgba(255, 255, 255, .6);
    color: var(--ink);
    font: inherit;
    font-size: .95rem;
}
.aggiungi { cursor: pointer; font-weight: 700; text-align: center; }
.aggiungi:hover { border-style: solid; border-color: var(--ink); background: var(--surface); }
.aggiungi:focus { border-style: solid; border-color: var(--ink); outline: none; box-shadow: 0 0 0 3px rgba(240, 168, 27, .55); }

/* --- Testata con le azioni (matita e cestino) in alto a destra --- */

/* Titolo e pulsanti sulla stessa riga; il testo sotto occupa tutta la larghezza (meno altezza). */
.testata-azioni { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 1rem; row-gap: .1rem; }
.testata-testo { display: contents; }
.testata-azioni h1 { grid-column: 1; grid-row: 1; }
.testata-azioni .icone-azioni { grid-column: 2; grid-row: 1; }
.testata-azioni .testata-testo > p { grid-column: 1 / -1; }
/* Il testo sotto il titolo riempie la larghezza: righe giustificate, ultima riga a sinistra. */
.testata-azioni .testata-testo > p.data { text-align: justify; text-align-last: left; hyphens: auto; -webkit-hyphens: auto; }
.icone-azioni { flex: none; display: flex; gap: .5rem; }
.btn-nuovo { white-space: nowrap; }
.icona-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.9rem;
    height: 2.9rem;
    padding: 0;
    border: 1.5px solid var(--line);
    border-radius: var(--r);
    background: var(--surface);
    color: var(--ink);
    cursor: pointer;
}
.icona-btn:hover { border-color: var(--ink); background: var(--fog); }
.icona-btn svg { width: 1.45rem; height: 1.45rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.icona-pericolo { color: #a3262e; }
.icona-pericolo:hover { border-color: #a3262e; background: #fbeaea; }

/* --- Ingredienti: foto, quantità --- */

.miniatura {
    flex: none;
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 50%;
    object-fit: cover;
    background: var(--fog);
}
.miniatura-vuota {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #dde3eb;
    color: var(--muted);
    font-weight: 800;
}
.ingrediente-testo { flex-wrap: nowrap; gap: .75rem; }
.miniatura-btn { flex: none; padding: 0; border: 0; border-radius: 50%; background: none; line-height: 0; cursor: zoom-in; }
.miniatura-btn:hover .miniatura { box-shadow: 0 0 0 3px var(--zafferano); }

/* Foto a grandezza piena */
.foto-viewer {
    display: grid;
    gap: .7rem;
    width: min(100%, 34rem);
    max-height: calc(var(--vv-h, 100dvh) - 2rem);
    margin: 0;
    padding: .7rem;
    border-radius: 16px;
    background: var(--surface);
    box-shadow: 0 18px 50px rgba(27, 36, 50, .35);
}
.foto-viewer-img {
    display: block;
    width: 100%;
    max-height: calc(var(--vv-h, 100dvh) - 11rem);
    border-radius: var(--r);
    object-fit: contain;
    background: var(--fog);
}
.foto-viewer-nome { padding: 0 .2rem; font-size: 1.1rem; font-weight: 800; overflow-wrap: anywhere; }
.ingrediente-dati { display: grid; gap: .1rem; min-width: 0; }

.etichetta { display: block; margin-bottom: .3rem; font-weight: 700; font-size: .95rem; }
.righe-ingredienti { display: grid; gap: .4rem; margin: 0 0 .5rem; padding: 0; list-style: none; }
.riga-ingrediente {
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .35rem .35rem .35rem .45rem;
    border: 1.5px solid var(--line);
    border-radius: var(--r);
    background: var(--surface);
}
.riga-ingrediente .miniatura { width: 2.2rem; height: 2.2rem; }
.riga-nome { flex: 1 1 auto; min-width: 0; font-weight: 600; overflow-wrap: anywhere; }
.riga-quantita { flex: none; display: flex; gap: .3rem; }
.quantita-intere, .quantita-frazione {
    min-height: 2.5rem;
    border: 1.5px solid var(--line);
    border-radius: 10px;
    background: var(--surface);
    color: var(--ink);
    font: inherit;
    text-align: center;
}
.quantita-intere { width: 3.9rem; padding: 0 .3rem; }
.quantita-frazione { width: 3.5rem; padding: 0 .2rem; }
/* Frazione non disponibile: grigia e spenta, senza scritte. */
.quantita-frazione:disabled {
    border-color: #e3e8ee;
    background: #eceff3;
    color: #a3adbb;
    opacity: 1;
    cursor: not-allowed;
    -webkit-text-fill-color: #a3adbb;
}
.quantita-intere:focus, .quantita-frazione:focus { border-color: var(--ink); outline: none; box-shadow: 0 0 0 3px rgba(240, 168, 27, .55); }

.foto-campo { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; }
.foto-grande { flex: none; width: 5.5rem; height: 5.5rem; border-radius: var(--r); object-fit: cover; background: var(--fog); }
.foto-vuota { display: flex; align-items: center; justify-content: center; background: #dde3eb; color: var(--muted); font-size: 2rem; font-weight: 800; }
.foto-azioni { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
label.btn { cursor: pointer; }

.ricetta-ingredienti-elenco { display: flex; flex-wrap: wrap; gap: .35rem .9rem; margin: .35rem 0 0; padding: 0; list-style: none; }
.ricetta-ingrediente { display: inline-flex; align-items: center; gap: .4rem; font-size: .92rem; }
.ricetta-ingrediente .miniatura { width: 1.7rem; height: 1.7rem; font-size: .8rem; }
.quantita { font-weight: 800; }

.selettore-con-foto { display: flex; align-items: center; gap: .7rem; }

@media (max-width: 719px) {
    /* Cinque voci nella barra in basso: testo un po' più piccolo. */
    .nav-voce { font-size: .82rem; padding-left: .1rem; padding-right: .1rem; }
}

/* --- Selettore di ricette --- */

.solo-lettori { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.selettore-per { margin: -.2rem 0 .9rem; color: var(--muted); }
/* Titolo, ricerca e pulsanti restano fermi: scorre solo l'elenco, per intero. */
.modale-selettore { touch-action: none; display: flex; flex-direction: column; max-height: min(calc(var(--vv-h, 100dvh) - 2rem), 40rem); overflow: hidden; }
.modale-selettore .campo { flex: none; }
.modale-selettore .modale-azioni { flex: none; }
.selettore-elenco {
    display: grid;
    flex: 1 1 auto;
    gap: .35rem;
    align-content: start;
    min-height: 6rem;
    margin: 0;
    padding: 0 .1rem .1rem 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    touch-action: pan-y;
    -webkit-overflow-scrolling: touch;
    list-style: none;
    /* Ombre ai bordi: compaiono solo dal lato dove ci sono altre ricette da scorrere. */
    background:
        linear-gradient(var(--surface) 30%, rgba(255, 255, 255, 0)) top / 100% 2rem no-repeat local,
        linear-gradient(rgba(255, 255, 255, 0), var(--surface) 70%) bottom / 100% 2rem no-repeat local,
        radial-gradient(farthest-side at 50% 0, rgba(27, 36, 50, .28), rgba(27, 36, 50, 0)) top / 100% .7rem no-repeat scroll,
        radial-gradient(farthest-side at 50% 100%, rgba(27, 36, 50, .28), rgba(27, 36, 50, 0)) bottom / 100% .7rem no-repeat scroll;
}
.selettore-conta { flex: none; margin: -.4rem 0 .5rem; color: var(--muted); font-size: .85rem; }
/* Con una finestra aperta la pagina sotto non deve scorrere (su iPhone il gesto passava alla pagina). */
html:has(.modale-sfondo), body:has(.modale-sfondo) { overflow: hidden; }
.modale-sfondo { overscroll-behavior: contain; }
.selettore-voce {
    display: grid;
    gap: .1rem;
    width: 100%;
    padding: .65rem .85rem;
    border: 1.5px solid var(--line);
    border-radius: var(--r);
    background: var(--surface);
    color: var(--ink);
    font: inherit;
    text-align: left;
    cursor: pointer;
}
.selettore-voce:hover, .selettore-voce:focus-visible { border-color: var(--ink); background: var(--fog); }
.selettore-nome { font-weight: 700; overflow-wrap: anywhere; }
.selettore-vuoto { padding: .8rem 0; color: var(--muted); }

/* --- Vista giorno / settimana --- */

.vista {
    display: inline-flex;
    margin-top: .75rem;
    padding: .2rem;
    border-radius: 999px;
    background: #dde3eb;
}
.vista-bottone {
    padding: .4rem 1rem;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--muted);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}
.vista-bottone.scelto { background: var(--ink); color: #fff; }

.settimana {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
    gap: 1.25rem 1.75rem;
    margin-top: 1rem;
}
/* Su schermo largo la settimana esce dalla colonna centrale e mette in riga
   tutti i giorni che ci stanno (fino a sette), ognuno con le due colonne. */
@media (min-width: 1000px) {
    .settimana {
        grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
        position: relative;
        left: 50%;
        width: min(calc(100vw - 3rem), 2000px);
        transform: translateX(-50%);
        gap: 1.5rem 1.25rem;
    }
}
.settimana .coppia-testa { position: static; padding: .25rem 0; background: transparent; }
.settimana .giorno-titolo { margin-top: 0; }

/* --- Errori di Blazor --- */


#blazor-error-ui {
    display: none;
    position: fixed;
    left: 0; bottom: 0;
    z-index: 1000;
    width: 100%;
    padding: .7rem 1.25rem;
    background: #fff3d1;
    color-scheme: light only;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, .2);
}
#blazor-error-ui .dismiss { position: absolute; top: .5rem; right: .75rem; cursor: pointer; }

@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; scroll-behavior: auto !important; }
}

/* --- Ricette per due, scheda comune e avanzi --- */

.marca-due {
    display: inline-block;
    padding: .08rem .5rem;
    border-radius: 999px;
    background: var(--ink);
    color: #fff;
    font-size: .72rem;
    font-weight: 700;
    line-height: 1.4;
    vertical-align: middle;
    white-space: nowrap;
}
.selettore-con-marca { display: flex; align-items: center; justify-content: space-between; gap: .6rem; }

.chip-persona {
    display: inline-block;
    padding: .1rem .6rem;
    border-radius: 999px;
    color: #fff;
    font-size: .8rem;
    font-weight: 800;
}
.chip-persona.p0 { background: var(--lampone); }
.chip-persona.p1 { background: var(--petrolio); }

/* Scelta tra poche voci (una persona / due persone, quota dell'avanzo) */
.scelta-per { display: flex; flex-wrap: wrap; gap: .4rem; }
.scelta-per-voce {
    min-height: 2.6rem;
    padding: .35rem .95rem;
    border: 1.5px solid var(--line);
    border-radius: 999px;
    background: var(--surface);
    color: var(--ink);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}
.scelta-per-voce:hover { border-color: var(--ink); }
.scelta-per-voce.scelta { background: var(--ink); border-color: var(--ink); color: #fff; }

/* Ingredienti di una ricetta per due: nome sopra, una quantità per persona sotto */
.riga-ingrediente.riga-due { flex-direction: column; align-items: stretch; gap: .45rem; }
.riga-testa { display: flex; align-items: center; gap: .55rem; }
.riga-testa .riga-nome { flex: 1 1 auto; }
.riga-persone { display: flex; flex-wrap: wrap; gap: .4rem .9rem; padding-left: .2rem; }
.persona-quota { display: flex; align-items: center; gap: .45rem; }
.ricetta-parte { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .6rem; margin-top: .3rem; }
.ricetta-parte .ricetta-ingredienti-elenco { margin: 0; }

/* Scheda comune: occupa le due colonne, metà e metà dei colori delle persone */
.comuni { display: grid; gap: .4rem; margin-bottom: .4rem; }
.cella-comune {
    display: grid;
    gap: .3rem;
    background: linear-gradient(90deg, var(--lampone-t) 0 50%, var(--petrolio-t) 50% 100%);
    box-shadow: inset 3px 0 0 var(--lampone), inset -3px 0 0 var(--petrolio);
}
.comune-testa { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .6rem; }
.comune-testa .piatto-nome { font-weight: 700; }
.piatto-azioni { margin-left: auto; display: inline-flex; align-items: center; gap: .3rem; }

/* Avanzo: parte conservata per un altro pasto */
.piatto-avanzo {
    flex: none;
    padding: .2rem .65rem;
    border: 1.5px solid var(--line);
    border-radius: 999px;
    background: var(--surface);
    color: var(--ink);
    font: inherit;
    font-size: .8rem;
    font-weight: 700;
    cursor: pointer;
}
.piatto-avanzo:hover { border-color: var(--ink); }
.piatto-testo { display: grid; gap: .1rem; min-width: 0; flex: 1 1 auto; }
.avanzo-tag { display: block; color: var(--muted); font-size: .78rem; font-weight: 600; }
.avanzo-tag.p0 { color: #8e2653; }
.avanzo-tag.p1 { color: #11576d; }
.piatto-vista .avanzo-tag { margin-top: .05rem; }
.piatto-conservato { border: 1.5px dashed #8795a9; background: rgba(255, 255, 255, .55); }
li.piatto-vista.piatto-conservato { padding: .3rem .5rem; border-radius: 10px; }
.piatto-vista.piatto-conservato + .piatto-vista { border-top: 0; }
.avanzo-ricetta { margin: -.2rem 0 1rem; color: var(--muted); font-weight: 600; }
.avanzo-quando { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }

/* --- Quanto basta (q.b.) --- */
.qb-toggle {
    flex: none;
    min-height: 2.5rem;
    padding: .2rem .6rem;
    border: 1.5px solid var(--line);
    border-radius: 10px;
    background: var(--surface);
    color: var(--muted);
    font: inherit;
    font-size: .85rem;
    font-weight: 800;
    cursor: pointer;
}
.qb-toggle:hover { border-color: var(--ink); color: var(--ink); }
.qb-toggle.attivo { background: var(--ink); border-color: var(--ink); color: #fff; }
.qb-testo { flex: none; color: var(--muted); font-size: .9rem; font-weight: 600; }
.marca-qb {
    display: inline-block;
    padding: .1rem .55rem;
    border-radius: 999px;
    background: #dde3eb;
    color: var(--ink);
    font-size: .8rem;
    font-weight: 800;
}

/* --- Ricette chiuse: titolo, "Per due" e freccia sulla stessa riga --- */
.elenco-riga.ricetta-voce { padding: 0; }
.ricetta-testa {
    display: flex;
    align-items: center;
    gap: .6rem;
    width: 100%;
    padding: .85rem 1rem;
    border: 0;
    border-radius: var(--r);
    background: none;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}
.ricetta-testa:hover { background: rgba(27, 36, 50, .04); }
.ricetta-testa .elenco-nome { flex: 0 1 auto; min-width: 0; overflow-wrap: anywhere; }
.ricetta-testa .marca-due { flex: none; }
.chevron {
    flex: none;
    width: 1.5rem;
    height: 1.5rem;
    margin-left: auto;
    fill: none;
    stroke: var(--ink);
    stroke-width: 2.6;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform .15s ease;
}
.chevron.su { transform: rotate(180deg); }
.ricetta-corpo { display: grid; gap: .6rem; padding: 0 1rem .85rem; }
@media (prefers-reduced-motion: reduce) { .chevron { transition: none; } }