/* Colori predefiniti: gli stessi di includes/colori.php, che li può sostituire dal backend (pagina «Colori»). */
:root{--ricerca-bg:#eef5fc;--ricerca-bordo:#b8d0e8;--ricerca-accento:#3b7fc4;--ricerca-titolo:#1f4e79;--aggiungi-bg:#eef8f0;--aggiungi-bordo:#b5d9bf;--aggiungi-accento:#3c8d4f;--aggiungi-titolo:#1e6b34;--lista-bg:#ffffff;--lista-bordo:#dfe3dc;--lista-accento:#8a94a3;--lista-titolo:#222222;--card:#ffffff;--bg:#f6f7f4;--txt:#222222;--muted:#6b7280;--link:#2563a8;--bordo:#dfe3dc;--barra:#e8ebe5;--header-da:#2f9e44;--header-a:#0c8599;--header-txt:#ffffff;--sottomenu-bg:#ffffff;--verde-s:#e6f2e9;--sez-index:#f08c00;--sez-piano:#2f9e44;--sez-ricette:#e64980;--sez-diario:#4263eb;--sez-confronto:#9c36b5;--sez-alimenti:#099268;--sez-unita:#e8590c;--sez-stampe:#495057;--sez-membri:#0c8599;--sez-guida:#e03131;--sez-profilo:#7048e8;--sez-faq:#1971c2;--verde:#3c8d4f;--btn-txt:#ffffff;--btn-sec-bg:#ffffff;--rosso:#c0392b;--campo-bg:#ffffff;--neg:#2563a8;--flash-ok-txt:#1f5a2e;--flash-err-bg:#fbe4e1;--flash-err-txt:#8a2117;--st-avviso-bg:#fdf1dc;--st-avviso-txt:#8a5a00;--st-avviso-bordo:#efd5a0;--st-ok-bg:#e6f4ea;--st-ok-txt:#1e6b34;--st-ok-bordo:#b9dfc5;--st-base-bg:#e5eef8;--st-base-txt:#2a5683;--st-base-bordo:#b9cde4;--st-dieta-bg:#eee9f5;--st-dieta-txt:#59407f;--st-dieta-bordo:#d3c8e4;--badge-base:#c98a02;--badge-attesa:#3b6ea5;--trovato-bg:#fff3bf;--trovato-bordo:#c98a02;--backend:#28374d;--backend-s:#e8eaee;--viola:#4a2f7a}
*{box-sizing:border-box}
a{color:var(--link)}
body{margin:0;font:16px/1.5 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;background:var(--bg);color:var(--txt)}
.wrap{width:100%;margin:0 auto;padding:0 16px}
header.top{background:linear-gradient(115deg,var(--header-da) 0%,var(--header-a) 100%);color:var(--header-txt)}
header.top .wrap{display:flex;flex-wrap:wrap;align-items:center;gap:8px 24px;padding:10px 16px}
.logo{font-weight:700;font-size:1.15rem;color:var(--header-txt);text-decoration:none;display:inline-flex;align-items:center;gap:8px}
nav{display:flex;flex-wrap:wrap;gap:4px}
nav a{color:var(--header-txt);text-decoration:none;padding:6px 10px;border-radius:6px;font-size:.95rem;display:inline-flex;align-items:center;gap:6px}
nav a:hover{background:rgba(255,255,255,.18)}
nav a.attivo{background:rgba(255,255,255,.25);box-shadow:inset 0 -3px 0 var(--accento,#fff)}
.icona-svg{flex:none}
main{padding-top:20px;padding-bottom:40px}
h1{margin:0 0 16px;font-size:1.6rem;display:flex;align-items:center;gap:10px}
h2{margin:0 0 10px;font-size:1.15rem}
.ic-titolo{display:inline-flex;color:var(--accento,var(--verde))}
.card{background:var(--card);border:1px solid var(--bordo);border-radius:10px;padding:16px;margin-bottom:16px;box-shadow:0 1px 3px rgba(20,20,20,.05)}
/* Tre tipi di riquadro, ognuno con i suoi colori (modificabili dal backend):
   ricerca = ricerche e filtri · aggiungi = moduli per aggiungere o modificare · lista = elenchi e tabelle */
.card-ricerca{background:var(--ricerca-bg);border-color:var(--ricerca-bordo);border-top:3px solid var(--ricerca-accento)}
.card-ricerca h2,.card-ricerca h3,.card-ricerca legend{color:var(--ricerca-titolo)}
.card-aggiungi{background:var(--aggiungi-bg);border-color:var(--aggiungi-bordo);border-top:3px solid var(--aggiungi-accento)}
.card-aggiungi h2,.card-aggiungi h3,.card-aggiungi legend{color:var(--aggiungi-titolo)}
.card-lista{background:var(--lista-bg);border-color:var(--lista-bordo);border-top:3px solid var(--lista-accento)}
.card-lista h2,.card-lista h3,.card-lista legend{color:var(--lista-titolo)}
.griglia{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:16px}
.griglia .card{margin:0}
table{width:100%;border-collapse:collapse;font-size:.95rem}
th,td{padding:6px 8px;border-bottom:1px solid var(--bordo);text-align:left}
th{color:var(--muted);font-weight:600;font-size:.85rem}
td.num,th.num{text-align:right;white-space:nowrap}
td.centro,th.centro{text-align:center;white-space:nowrap}
td.chk{width:1%;white-space:nowrap}
tr.tot td{font-weight:700;border-top:2px solid var(--bordo);border-bottom:0}
.pasto{margin:10px 0 2px;font-weight:600;color:var(--accento,var(--verde))}
.con-icona{display:inline-flex;align-items:center;gap:7px;vertical-align:middle}
label{display:block;font-size:.85rem;color:var(--muted);margin-bottom:2px}
input,select,button{font:inherit}
input[type=text],input[type=email],input[type=password],input[type=number],input[type=date],select{width:100%;padding:7px 9px;border:1px solid var(--bordo);border-radius:6px;background:var(--campo-bg)}
.riga-form{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end}
.riga-form>div{flex:1 1 130px}
.riga-form>.stretto{flex:0 0 auto}
button,.btn{background:var(--verde);color:var(--btn-txt);border:0;border-radius:6px;padding:8px 14px;cursor:pointer;text-decoration:none;display:inline-block}
button:hover,.btn:hover{filter:brightness(1.08)}
button.sec,.btn.sec{background:var(--btn-sec-bg);color:var(--txt);border:1px solid var(--bordo)}
button.del{background:none;color:var(--rosso);padding:2px 8px;border:0;font-size:1.1rem}
form.card.pericoloso{border-color:var(--rosso)}
button.pericoloso{background:var(--btn-sec-bg);color:var(--rosso);border:1px solid var(--rosso)}
.flash{padding:10px 14px;border-radius:8px;margin-bottom:14px}
.flash.ok{background:var(--verde-s);color:var(--flash-ok-txt)}
.flash.err{background:var(--flash-err-bg);color:var(--flash-err-txt)}
.barra{background:var(--barra);border-radius:99px;height:10px;overflow:hidden}
.riempi{background:var(--verde);height:100%}
.riempi.over{background:var(--rosso)}
.kpi{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px}
.kpi .val{font-size:1.5rem;font-weight:700}
.kpi .sub{color:var(--muted);font-size:.85rem}
/* Contatori dentro i riquadri della dashboard del backend */
.contatori{display:flex;flex-wrap:wrap;gap:6px 22px;margin:4px 0 10px}
.contatori .cont{min-width:70px}
.gruppo-cont{margin-top:6px;font-size:.78rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.contatori .val{font-size:1.6rem;font-weight:700;line-height:1.2}
.contatori .sub{color:var(--muted);font-size:.82rem}
.pos{color:var(--rosso)}.neg{color:var(--neg)}
.muted{color:var(--muted)}
/* stellina davanti al nome, negli elenchi di alimenti e ricette, per quelli già nel catalogo di base */
.badge-base{display:inline-flex;color:var(--badge-base);vertical-align:-3px;margin-right:4px}
/* orologio davanti al nome, nell'elenco ricette, per quelle segnalate e in attesa di conferma */
.badge-attesa{display:inline-flex;color:var(--badge-attesa);vertical-align:-3px;margin-right:4px}
.auth{max-width:400px;margin:40px auto}
.auth .card>div{margin-bottom:12px}
.auth-illustrazione{display:flex;justify-content:center;margin-bottom:6px}
.auth h1{justify-content:center}
form.inline{display:inline}
@media(max-width:600px){th,td{padding:5px 4px;font-size:.88rem}}

/* ---- Piano mensile: colonna delle aggiunte a sinistra, piano a destra ---- */
.piano-layout{display:flex;align-items:flex-start;gap:20px}
.piano-aggiungi{flex:0 1 300px;min-width:0}
.piano-mese{flex:1 1 0;min-width:0}
.piano-mese .griglia{grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
.giorno-oggi{border-color:var(--verde);border-width:2px}
.link-giorno{color:inherit;text-decoration:none}
.link-giorno:hover{text-decoration:underline}
@media(max-width:860px){.piano-layout{flex-direction:column}.piano-aggiungi,.piano-mese{flex:1 1 auto;width:100%}}
@media print{.piano-layout{display:block}}

/* Pulsanti del piano e relativi moduli in pop-up (includes/piano_azioni.php) */
.piano-azioni{display:flex;flex-wrap:wrap;gap:8px;padding:12px 14px}
.piano-azioni button{margin:0}
dialog.popup-piano{border:0;border-radius:14px;padding:0;width:min(560px,calc(100vw - 24px));max-height:calc(100vh - 32px);overflow:auto;background:var(--card);color:var(--txt);box-shadow:0 14px 40px rgba(0,0,0,.35)}
dialog.popup-piano::backdrop{background:rgba(15,20,30,.55)}
.popup-testa{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 18px 6px}
.popup-testa h2{margin:0;font-size:1.15rem}
.popup-x{background:none;border:0;color:var(--muted);font-size:1.8rem;line-height:1;padding:0 6px;cursor:pointer}
.popup-x:hover{filter:none;color:var(--txt)}
.popup-corpo{padding:6px 18px 18px}
.popup-azioni{display:flex;justify-content:flex-end;gap:8px;margin-top:14px}
@media print{dialog.popup-piano,.piano-azioni{display:none!important}}

/* ---- Backend di amministrazione: colore diverso per non confonderlo con l'app ---- */
header.top.backend-top{background:var(--backend)}

/* ---- Banner mostrato nell'app quando si opera per conto del backend (impersonazione) ---- */
.banner-impersona{background:var(--viola);color:#fff;font-size:.9rem}
.banner-impersona .wrap{padding:8px 16px;display:flex;flex-wrap:wrap;gap:6px 16px;align-items:center}
.banner-impersona a{color:#fff}

/* ---- Ricette nel piano mensile, nel diario e nella loro stampa ---- */
tr.riga-ricetta td{font-weight:700;color:var(--accento,var(--verde));padding-top:12px;padding-bottom:2px;border-bottom:0}
tr.riga-ricetta a{color:inherit;text-decoration:none}
tr.riga-ricetta a:hover{text-decoration:underline}
tr.riga-da-ricetta td.nome-cibo{padding-left:20px}
/* giorno libero del piano */
.badge-libero{display:inline-block;margin-left:6px;padding:1px 9px;border-radius:99px;font-size:.78rem;font-weight:600;background:var(--st-avviso-bg);color:var(--st-avviso-txt);border:1px solid var(--st-avviso-bordo);vertical-align:2px}
.card.giorno-libero{border-style:dashed}
/* ricetta come riga unica (piano mensile) */
tr.riga-ricetta-sola td.nome-cibo{font-weight:700}
tr.riga-ricetta-sola a{color:var(--accento,var(--verde));text-decoration:none}
tr.riga-ricetta-sola a:hover{text-decoration:underline}

/* ---- Stampe: piano dei giorni e lista della spesa ---- */
.box{display:inline-block;width:.95em;height:.95em;border:1.5px solid #333;border-radius:2px;vertical-align:-.12em}
.testata-stampa{margin-bottom:12px}
.testata-stampa h1{margin-bottom:2px}
.testata-stampa p{margin:0}
.giorno-stampa{break-inside:avoid}
.spesa{column-count:2;column-gap:16px}
.spesa .blocco-spesa{break-inside:avoid;margin-bottom:16px}
.voce-spesa.escluso td:not(.no-stampa){opacity:.45;text-decoration:line-through}
@media print{.voce-spesa.escluso,.blocco-spesa.vuoto{display:none!important}}
@media(max-width:700px){.spesa{column-count:1}}
@media print{
  @page{size:A4;margin:14mm}
  body{background:#fff;color:#000;font-size:12pt}
  header.top,.no-stampa,.flash,.ic-titolo,.auth-illustrazione{display:none !important}
  main.wrap{max-width:none;padding:0}
  .card{border:0 !important;background:none !important;padding:0;margin:0 0 14px;box-shadow:none}
  h1{display:block}
  .muted{color:#444}
  .giorno-stampa.nuova-pagina{break-after:page}
  .giorno-stampa.nuova-pagina:last-of-type{break-after:auto}
  .spesa{column-count:2}
  .pasto{color:#000;border-bottom:1px solid #000}
  th,td{border-bottom:1px solid #ccc}
  a{color:inherit;text-decoration:none}
  tr.riga-ricetta td{color:#000;font-weight:700;font-size:1.05em;border-bottom:1px solid #000;padding-top:10px}
}

/* ---- Confronto: grafico dell'aderenza al piano ---- */
.grafico-aderenza a{cursor:pointer}
.grafico-aderenza a:hover rect[fill="var(--verde)"],.grafico-aderenza a:hover rect[fill="var(--bordo)"]{opacity:.75}
.legenda-grafico{display:flex;flex-wrap:wrap;gap:6px 18px}
.legenda-grafico .voce{display:inline-flex;align-items:center;gap:6px}
.legenda-grafico .cam{display:inline-block;width:11px;height:11px;border-radius:3px}
.legenda-grafico .cam.verde{background:var(--verde)}
.legenda-grafico .cam.grigio{background:var(--bordo);height:6px;align-self:center}

/* ---- Ricette ---- */
.testo{white-space:pre-line}
textarea{resize:vertical}
/* colonna azioni dell'elenco ricette (Modifica/Duplica/Elimina): a capo sugli schermi stretti */
td.azioni{text-align:right;white-space:normal}
/* tabelle con molte colonne (es. elenco ricette): scorrono in orizzontale sugli schermi stretti
   invece di far scorrere l'intera pagina */
.tabella-scroll{overflow-x:auto}
/* scheda di una ricetta: colonna delle azioni (aggiungi al piano, catalogo di base) a sinistra,
   la ricetta vera e propria (ingredienti, procedimento, note) a destra */
.ricetta-layout{display:flex;align-items:flex-start;gap:20px}
.ricetta-laterale{flex:0 1 300px;min-width:0}
.ricetta-principale{flex:1 1 0;min-width:0}
@media(max-width:860px){.ricetta-layout{flex-direction:column}.ricetta-laterale,.ricetta-principale{flex:1 1 auto;width:100%}}
@media print{.ricetta-layout{display:block}}

/* ---- Alimenti ---- */
/* pagina alimenti: colonna delle azioni (nuovo/modifica alimento, catalogo di base) a sinistra,
   l'elenco degli alimenti a destra, stesso criterio della scheda di una ricetta */
.alimenti-layout{display:flex;align-items:flex-start;gap:20px}
.alimenti-laterale{flex:0 1 300px;min-width:0}
.alimenti-principale{flex:1 1 0;min-width:0}
@media(max-width:860px){.alimenti-layout{flex-direction:column}.alimenti-laterale,.alimenti-principale{flex:1 1 auto;width:100%}}
/* sullo smartphone (colonna unica) la pagina Alimenti mostra prima ricerca ed elenco e poi il modulo di
   inserimento e gli altri riquadri; quando si modifica un alimento il modulo torna in alto */
@media(max-width:860px){.alimenti-layout.lista-prima{flex-direction:column-reverse}}
@media print{.alimenti-layout{display:block}}

/* ---- Categorie degli alimenti come bolle (app e backend) ---- */
.sottoschede{display:flex;flex-wrap:wrap;gap:6px;margin:-6px 0 14px}
.sottoschede a{padding:5px 14px;border:1px solid var(--bordo);border-radius:99px;background:var(--btn-sec-bg);color:var(--txt);text-decoration:none;font-size:.92rem}
.sottoschede a:hover{border-color:var(--accento,var(--backend))}
.sottoschede a.attiva{background:var(--accento,var(--backend));border-color:transparent;color:var(--btn-txt)}
.bolle-barra{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px 16px;margin-bottom:14px}
.bolle-barra .cerca{flex:0 1 260px}
.bolle{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:16px;padding:6px 0 20px}
.bolla{--h:215;position:relative;box-sizing:border-box;max-width:100%;min-height:150px;padding:20px 26px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  border:2px solid hsl(var(--h) 45% 72%);border-radius:50%;background:radial-gradient(circle at 35% 28%,hsl(var(--h) 80% 96%),hsl(var(--h) 60% 88%));
  box-shadow:0 2px 6px rgba(20,20,20,.07);transition:transform .12s,box-shadow .12s,border-color .12s}
.bolla-testa{font-weight:700;color:hsl(var(--h) 45% 24%);margin-bottom:8px;line-height:1.2}
.bolla-n{display:inline-block;min-width:1.6em;padding:0 6px;margin-left:4px;border-radius:99px;background:hsl(var(--h) 45% 32%);color:#fff;font-size:.78rem;font-weight:600}
.bolla-corpo{display:flex;flex-wrap:wrap;justify-content:center;gap:5px}
.bolla-vuota .bolla-corpo::after{content:"vuota";color:hsl(var(--h) 25% 40%);font-size:.85rem}
.bolla-senza{border-style:dashed;background:radial-gradient(circle at 35% 28%,#fafafa,#ececec);--h:215}
.bolla-su{transform:scale(1.04);border-color:hsl(var(--h) 60% 38%);box-shadow:0 0 0 4px hsl(var(--h) 70% 70% / .45),0 6px 16px rgba(20,20,20,.15)}
.chip{display:inline-block;padding:3px 10px;border:1px solid hsl(var(--h) 35% 70%);border-radius:99px;background:#fff;color:var(--txt);font-size:.86rem;line-height:1.4;cursor:default;user-select:none;-webkit-user-select:none}
.bolle[data-modifica="1"] .chip{cursor:grab;touch-action:none}
.bolle[data-modifica="1"] .chip:hover{border-color:hsl(var(--h) 60% 38%);box-shadow:0 1px 4px rgba(20,20,20,.18)}
.chip-sollevato{opacity:.3}
.chip-in-salvataggio{opacity:.6}
.chip-ghost{position:fixed;left:0;top:0;z-index:1000;pointer-events:none;box-shadow:0 8px 20px rgba(20,20,20,.28);cursor:grabbing;transform-origin:0 0}
.chip-trovato{background:var(--trovato-bg);border-color:var(--trovato-bordo);font-weight:600}
.chip-spento{opacity:.28}
body.trascinando,body.trascinando *{cursor:grabbing !important;user-select:none;-webkit-user-select:none}
.bolla-nuova{--h:215;border-style:dashed;background:var(--card);color:var(--muted);min-height:130px;width:200px}
.bolla-nuova.bolla-su,.bolla-nuova.aperta{color:var(--txt);border-color:var(--accento,var(--verde))}
.nuova-etichetta{font-weight:600}
.nuova-form{width:100%}
.nuova-form[hidden],.nuova-etichetta[hidden]{display:none}
.nuova-form label{margin-bottom:4px}
.nuova-form input{text-align:center}
.nuova-azioni{display:flex;justify-content:center;gap:6px;margin-top:8px}
.bolle-stato{min-height:2.6em;display:none;align-items:center;justify-content:center;gap:12px;padding:8px 14px;border-radius:8px;background:var(--verde-s);color:var(--flash-ok-txt)}
.bolle-stato.visibile{display:flex}
.bolle-stato.errore{background:var(--flash-err-bg);color:var(--flash-err-txt)}
.bolle-stato button{padding:3px 12px}

/* ---- Sotto-menu del menu in alto (es. Alimenti > Categorie) ---- */
.voce-sub{position:relative;display:inline-flex}
.voce-sub>a::after{content:"";display:inline-block;margin-left:2px;border:4px solid transparent;border-top-color:currentColor;border-bottom:0;opacity:.8}
.sottomenu{display:none;position:absolute;top:100%;left:0;z-index:30;min-width:170px;padding:4px;background:var(--sottomenu-bg);border:1px solid var(--bordo);border-radius:8px;box-shadow:0 6px 18px rgba(20,20,20,.18);flex-direction:column}
.voce-sub:hover .sottomenu,.voce-sub:focus-within .sottomenu{display:flex}
nav .sottomenu a{color:var(--txt);padding:7px 10px;white-space:nowrap}
nav .sottomenu a:hover{background:var(--verde-s)}
nav .sottomenu a.attivo{background:var(--verde-s);box-shadow:none;font-weight:600}
header.backend-top .sottomenu a:hover,header.backend-top .sottomenu a.attivo{background:var(--backend-s)}

/* ---- Revisione dell'import dal catalogo di base ---- */
.importa-barra{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px 18px;position:sticky;top:0;z-index:5}
.importa-filtro{flex:1 1 200px}
.importa-scelte,.importa-azioni{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.importa-azioni{margin-left:auto}
.importa-tabella td{vertical-align:top}
.importa-tabella input[type=checkbox]{width:auto}
.importa-stato{display:inline-block;padding:1px 9px;border-radius:99px;font-size:.82rem;border:1px solid transparent}
.importa-nuovo{background:var(--st-ok-bg);color:var(--st-ok-txt);border-color:var(--st-ok-bordo)}
.importa-cambia{background:var(--st-avviso-bg);color:var(--st-avviso-txt);border-color:var(--st-avviso-bordo)}
.importa-dettaglio{margin-top:8px;font-size:.92rem}
.importa-dettaglio ul{margin:4px 0 0;padding-left:20px}
.importa-diff{margin-top:8px}
.importa-doppio{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:4px}
@media(max-width:700px){.importa-doppio{grid-template-columns:1fr}.importa-barra{position:static}}
@media print{.importa-barra{display:none}}

/* ---- Confronto con il catalogo di base ---- */
.conf-barra{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px 18px}
.conf-filtri{display:flex;flex-wrap:wrap;gap:6px;flex:1 1 100%}
.conf-filtri button.attivo{background:var(--accento,var(--verde));border-color:transparent;color:var(--btn-txt)}
.conf-n{display:inline-block;min-width:1.4em;padding:0 6px;margin-left:2px;border-radius:99px;background:rgba(0,0,0,.08);font-size:.82rem;text-align:center}
.conf-filtri button.attivo .conf-n{background:rgba(255,255,255,.28)}
.conf-cerca{flex:1 1 220px}
.conf-importa{margin-left:auto}
.conf-uguale{background:var(--st-ok-bg);color:var(--st-ok-txt);border-color:var(--st-ok-bordo)}
.conf-diversa{background:var(--st-avviso-bg);color:var(--st-avviso-txt);border-color:var(--st-avviso-bordo)}
.conf-base{background:var(--st-base-bg);color:var(--st-base-txt);border-color:var(--st-base-bordo)}
.conf-dieta{background:var(--st-dieta-bg);color:var(--st-dieta-txt);border-color:var(--st-dieta-bordo)}
.conf-legenda{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:.88rem;margin-bottom:0}
tr[hidden],.card[hidden],button[hidden],.cat-indice a[hidden]{display:none}
.conf-importa{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.conf-uno{padding:4px 10px;font-size:.88rem}
.importa-tabella td.azioni{text-align:right;white-space:nowrap}

/* ---- Backend: pagina dei colori ---- */
.colori-layout{display:flex;align-items:flex-start;gap:20px}
.colori-form{flex:1 1 0;min-width:0}
.colori-anteprima{flex:0 1 380px;min-width:0;position:sticky;top:10px}
.colori-gruppo summary{cursor:pointer;font-weight:600;font-size:1.05rem}
.colori-riga{display:flex;align-items:center;gap:10px;padding:5px 0;border-bottom:1px solid var(--bordo)}
.colori-riga:last-child{border-bottom:0}
.colori-riga label{flex:1 1 auto;margin:0;color:var(--txt);font-size:.92rem}
.colori-riga input[type=color]{width:46px;height:30px;padding:0;border:1px solid var(--bordo);border-radius:6px;background:none;cursor:pointer;flex:none}
.colori-riga code{font-size:.82rem;color:var(--muted);flex:none;width:4.8em}
.colori-riga .cambiato{font-size:.78rem;color:var(--st-avviso-txt);background:var(--st-avviso-bg);border-radius:99px;padding:0 8px;flex:none;visibility:hidden}
.colori-riga.diverso .cambiato{visibility:visible}
.colori-riga button{padding:3px 10px;font-size:.82rem;flex:none}
.colori-prova{border:1px solid var(--bordo);border-radius:10px;overflow:hidden;background:var(--bg);color:var(--txt)}
.colori-prova .p-testa{padding:8px 12px;display:flex;gap:10px;align-items:center;font-weight:700}
.colori-prova .p-testa span{font-weight:400;font-size:.88rem;padding:2px 8px;border-radius:6px;background:rgba(255,255,255,.2)}
.colori-prova .p-corpo{padding:12px}
.colori-prova .card{margin-bottom:10px;padding:12px}
.colori-prova h3{margin:0 0 8px;font-size:1rem}
@media(max-width:900px){.colori-layout{flex-direction:column}.colori-anteprima{position:static;flex:1 1 auto;width:100%}}

/* ---- Ricette e ricette di base: un riquadro per categoria ---- */
.cat-indice{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 14px}
.cat-indice a{padding:4px 12px;border:1px solid var(--bordo);border-radius:99px;background:var(--btn-sec-bg);color:var(--txt);text-decoration:none;font-size:.92rem}
.cat-indice a:hover{border-color:var(--accento,var(--backend))}
.griglia-categorie{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(560px,100%),1fr));gap:16px;align-items:start}
.griglia-categorie .card{margin:0;min-width:0;scroll-margin-top:12px}
.griglia-categorie h2{margin-bottom:6px}
.titolo-cat{display:flex;align-items:center;gap:8px}
.icona-cat{color:var(--accento,var(--backend))}
.cat-indice a{display:inline-flex;align-items:center;gap:6px}
.selez-tutti{display:flex;align-items:center;gap:8px;margin:10px 0 0;font-weight:400;cursor:pointer}
.selez-tutti input,.chk-cat{width:auto}
.griglia-alimenti{grid-template-columns:repeat(auto-fill,minmax(min(640px,100%),1fr))}
@media print{.selez-tutti{display:none}}
@media print{.griglia-categorie{display:block}.griglia-categorie .card{margin-bottom:14px}.cat-indice{display:none}}
.griglia-categorie td.azioni,.griglia-categorie td.num:last-child{white-space:nowrap}
.riga-sotto{font-size:.82rem;line-height:1.3}

/* ---- Profilo utente: avatar, foto del fisico ---- */
.avatar{display:inline-block;border-radius:50%;object-fit:cover;vertical-align:middle;flex:none;border:2px solid rgba(255,255,255,.65);background:#fff}
.avatar-ph{display:inline-flex;align-items:center;justify-content:center;color:#fff;font-weight:700;line-height:1;letter-spacing:.02em}
main .avatar{border-color:var(--bordo)}
/* «Dieta personale di [avatar] nickname» in alto a sinistra */
.logo-blocco{display:inline-flex;align-items:center;flex-wrap:wrap;gap:4px 8px}
a.utente-menu{display:inline-flex;align-items:center;gap:8px;padding:3px 12px 3px 4px;border-radius:99px;color:var(--header-txt);text-decoration:none;font-weight:700;font-size:1.05rem;background:rgba(255,255,255,.14)}
a.utente-menu:hover{background:rgba(255,255,255,.26)}
a.utente-menu.attivo{background:rgba(255,255,255,.28);box-shadow:inset 0 -3px 0 var(--accento,#fff)}
a.utente-menu .avatar{border-color:rgba(255,255,255,.7)}
.badge-sola-lettura{font-size:.8rem;padding:1px 9px;border-radius:99px;border:1px solid rgba(255,255,255,.6);color:var(--header-txt)}
.galleria-foto{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:14px}
.foto-scheda{margin:0;font-size:.88rem;min-width:0}
.foto-scheda img{display:block;width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:8px;border:1px solid var(--bordo);background:var(--bg)}
.foto-scheda figcaption{margin:6px 0 4px;line-height:1.35}
.foto-azioni summary{cursor:pointer;color:var(--link)}
.foto-azioni form{margin-top:6px}
.foto-azioni input{margin-bottom:4px}
.confronto-foto{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.confronto-foto figure{margin:0;min-width:0}
.confronto-foto img{display:block;width:100%;max-height:560px;object-fit:contain;border-radius:8px;border:1px solid var(--bordo);background:var(--bg)}
.confronto-foto figcaption{margin-top:6px;font-size:.9rem}
@media(max-width:560px){.confronto-foto{grid-template-columns:1fr}}
@media print{.galleria-foto,.confronto-foto{display:none}}
.campi-colonna{display:flex;flex-direction:column;gap:10px}
.campi-colonna>div{min-width:0}
.campi-colonna input[type=file]{max-width:100%}

/* Avviso sulle differenze con il catalogo di base (app) e sulle proposte in attesa (backend) */
.avviso-catalogo{display:flex;flex-wrap:wrap;gap:4px 12px;align-items:center;justify-content:space-between;margin:0 0 14px;padding:10px 14px;border-radius:8px;border:1px solid var(--st-avviso-bordo);background:var(--st-avviso-bg);color:var(--st-avviso-txt)}
.avviso-catalogo[hidden]{display:none}
.avviso-catalogo a{color:inherit;font-weight:600}
.avviso-catalogo .avviso-chiudi{all:unset;cursor:pointer;text-decoration:underline;font-weight:600}
.avviso-catalogo .avviso-chiudi:focus-visible{outline:2px solid currentColor;outline-offset:2px}
.avviso-catalogo .allinea-tutto{display:inline;margin:0}
.avviso-catalogo .avviso-allinea{all:unset;cursor:pointer;text-decoration:underline;font-weight:700}
.avviso-catalogo .avviso-allinea:focus-visible{outline:2px solid currentColor;outline-offset:2px}
.badge-n{display:inline-block;min-width:1.4em;padding:0 6px;border-radius:99px;background:#e03131;color:#fff;font-size:.75rem;font-weight:700;line-height:1.5;text-align:center}

/* FAQ */
.faq-voce{border-bottom:1px solid var(--bordo);padding:2px 0}
.faq-voce:last-of-type{border-bottom:0}
.faq-voce[hidden]{display:none}
.faq-voce summary{cursor:pointer;font-weight:600;padding:10px 4px;list-style-position:inside}
.faq-voce summary:hover{color:var(--link)}
.faq-voce p{margin:0 0 12px;padding:0 4px 0 22px}

/* ---------- App da telefono: barra di navigazione in basso + foglio «Altro» ----------
   Sul computer (schermo largo) questi elementi sono nascosti e resta il menu in alto. */
.barra-app,.foglio,.foglio-sfondo{display:none}
@media(max-width:760px){
  body{padding-bottom:calc(76px + env(safe-area-inset-bottom,0px))}
  header.top{position:sticky;top:0;z-index:40;box-shadow:0 2px 8px rgba(0,0,0,.18);padding-top:env(safe-area-inset-top,0px)}
  header.top .wrap{padding:8px 16px;flex-wrap:nowrap;justify-content:space-between;gap:8px}
  header.top nav{display:none}
  .logo-di,.u-nome{display:none}
  a.utente-menu{padding:2px;background:none}
  .logo{font-size:1.1rem}
  .logo-blocco{flex-wrap:nowrap;width:100%;justify-content:space-between}
  .logo-blocco .logo{order:1}
  .logo-blocco .badge-sola-lettura{order:2;margin-left:auto}
  .logo-blocco a.utente-menu{order:3}
  h1{font-size:1.35rem}
  .importa-barra{position:static}
  .barra-app{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:45;background:var(--card);border-top:1px solid var(--bordo);box-shadow:0 -2px 10px rgba(0,0,0,.07);padding:6px 4px calc(6px + env(safe-area-inset-bottom,0px))}
  .barra-app .scheda{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;gap:3px;padding:2px 0;background:none;border:0;border-radius:0;color:var(--muted);font:inherit;font-size:.72rem;line-height:1.2;text-decoration:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
  .barra-app .scheda:hover{filter:none}
  .barra-app .scheda-ic{display:flex;align-items:center;justify-content:center;width:56px;height:30px;border-radius:15px;transition:background .15s}
  .barra-app .scheda.attiva{color:var(--c);font-weight:700}
  .barra-app .scheda.attiva .scheda-ic{background:color-mix(in srgb,var(--c) 15%,var(--card))}
  .barra-app .scheda-et{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  /* con la tastiera aperta la barra sparirebbe sopra i campi: la nascondiamo finché si scrive */
  html.scrivendo .barra-app{display:none}
  html.scrivendo body{padding-bottom:16px}

  .foglio-sfondo{position:fixed;inset:0;z-index:60;background:rgba(15,20,30,.45)}
  .foglio-sfondo:not([hidden]){display:block}
  .foglio{position:fixed;left:0;right:0;bottom:0;z-index:61;max-height:82vh;overflow-y:auto;background:var(--card);border-radius:18px 18px 0 0;padding:8px 16px calc(18px + env(safe-area-inset-bottom,0px));box-shadow:0 -6px 24px rgba(0,0,0,.25);overscroll-behavior:contain}
  .foglio:not([hidden]){display:block;animation:foglio-su .18s ease-out}
  @keyframes foglio-su{from{transform:translateY(24px);opacity:.4}to{transform:none;opacity:1}}
  .foglio-maniglia{width:42px;height:4px;border-radius:2px;background:var(--bordo);margin:2px auto 10px}
  .foglio-voci,.foglio-sotto{list-style:none;margin:0;padding:0}
  .foglio-voce{display:flex;align-items:center;gap:12px;padding:11px 8px;border-radius:10px;color:var(--txt);text-decoration:none;font-size:1.02rem}
  .foglio-voce:hover,.foglio-voce:active{background:var(--barra)}
  .foglio-voce.attiva{font-weight:700;background:color-mix(in srgb,var(--c) 12%,var(--card))}
  .foglio-ic{display:inline-flex;color:var(--c)}
  .foglio-sotto{display:flex;flex-wrap:wrap;gap:6px;padding:0 8px 8px 42px}
  .foglio-sotto a{display:inline-block;padding:3px 11px;border:1px solid var(--bordo);border-radius:99px;font-size:.86rem;color:var(--txt);text-decoration:none;background:var(--card)}
  .foglio-sotto a.attiva{background:var(--barra);font-weight:700}
  .foglio-installa{margin-top:10px;padding:12px;border:1px dashed var(--bordo);border-radius:10px;background:var(--bg)}
  .foglio-installa p{margin:4px 0 8px;color:var(--muted);font-size:.9rem}
  body.foglio-aperto{overflow:hidden}
}
@media print{.barra-app,.foglio,.foglio-sfondo{display:none!important}}

/* ---------- Menu del backend da telefono: il backend non ha la barra in basso, quindi il menu si apre da un pulsante ---------- */
.menu-btn{display:none}
@media(max-width:760px){
  header.backend-top .wrap{flex-wrap:wrap}
  header.backend-top .menu-btn{display:inline-flex;align-items:center;gap:6px;margin-left:auto;padding:6px 12px;background:rgba(255,255,255,.18);color:var(--header-txt);border:1px solid rgba(255,255,255,.4);border-radius:8px;font:inherit;font-size:.95rem;cursor:pointer}
  header.backend-top .menu-btn:hover{filter:none;background:rgba(255,255,255,.28)}
  header.backend-top nav{display:none;flex-direction:column;flex:1 1 100%;gap:2px;padding:4px 0 6px}
  header.backend-top.aperto nav{display:flex}
  header.backend-top nav a{padding:10px 12px;font-size:1rem}
  header.backend-top .voce-sub{display:flex;flex-direction:column}
  header.backend-top .sottomenu{display:flex;position:static;min-width:0;padding:0 0 2px 14px;background:none;border:0;box-shadow:none;flex-direction:column}
  header.backend-top nav .sottomenu a{color:var(--header-txt);white-space:normal;font-size:.95rem;opacity:.92}
  header.backend-top nav .sottomenu a:hover,header.backend-top nav .sottomenu a.attivo{background:rgba(255,255,255,.22)}
  header.backend-top .voce-sub>a::after{display:none}
}
@media print{.menu-btn{display:none!important}}

/* ---------- Tabelle ordinabili cliccando sul titolo della colonna (assets/ordina.js) ---------- */
th.ordinabile{cursor:pointer;user-select:none;white-space:nowrap}
th.ordinabile:hover{color:var(--link)}
th.ordinabile::after{content:"\2195";margin-left:.35em;font-size:.85em;opacity:.3}
th.ordinabile:hover::after{opacity:.75}
th.ordinabile[aria-sort]::after{opacity:.95;color:var(--link)}
th.ordinabile[aria-sort="ascending"]::after{content:"\25B2";font-size:.7em}
th.ordinabile[aria-sort="descending"]::after{content:"\25BC";font-size:.7em}
th.ordinabile:focus-visible{outline:2px solid var(--link);outline-offset:-2px}
@media print{th.ordinabile::after{display:none}}

/* Bottoni compatti per le azioni nelle righe degli elenchi (Modifica, Rivedi e conferma, Duplica...) */
.btn.piccolo,button.piccolo{padding:2px 9px;font-size:.92rem;line-height:1.5}
a.btn.sec{color:var(--txt)}

/* ---------- Messaggi a comparsa (pop-up) inviati dal backend ---------- */
dialog.avviso-popup{border:0;border-radius:14px;padding:0;width:min(520px,calc(100vw - 32px));max-height:calc(100vh - 48px);overflow:hidden;background:var(--card);color:var(--txt);box-shadow:0 14px 44px rgba(0,0,0,.35)}
dialog.avviso-popup[open]{display:flex;flex-direction:column}
dialog.avviso-popup::backdrop{background:rgba(15,20,30,.55)}
.avviso-testata{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:11px 18px;background:linear-gradient(115deg,var(--header-da) 0%,var(--header-a) 100%);color:var(--header-txt)}
.avviso-conta{font-size:.9rem;opacity:.9}
.avviso-corpo{padding:16px 18px 6px;overflow:auto;min-height:0}
.avviso-corpo h2{margin:0 0 8px;font-size:1.25rem}
.avviso-testo{line-height:1.55;overflow-wrap:anywhere}
.avviso-piede{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 14px;padding:12px 18px 14px;border-top:1px solid var(--bordo);margin-top:10px}
.avviso-mai{display:inline-flex;align-items:center;gap:8px;font-size:.95rem;color:var(--txt);cursor:pointer}
.avviso-mai input{width:auto;margin:0}
.avviso-piede button{margin-left:auto}
@media print{dialog.avviso-popup{display:none!important}}
.avviso-anteprima{border:1px solid var(--bordo);border-radius:12px;overflow:hidden;background:var(--card)}
.avviso-anteprima .avviso-piede{margin-top:0}

/* Piano: interruttore Mese / Settimana */
.vista-switch{display:inline-flex}
.vista-switch .btn{border-radius:0;margin:0}
.vista-switch .btn:first-child{border-radius:6px 0 0 6px}
.vista-switch .btn:last-child{border-radius:0 6px 6px 0;margin-left:-1px}
.vista-switch .btn[aria-current]{position:relative;z-index:1}

/* Conversazioni tra utenti e super-utente (faq.php e backend/messaggi.php) */
.msg-conv{margin:0 0 10px;padding:8px 12px;border:1px solid var(--bordo);border-left:3px solid var(--bordo);border-radius:6px;background:var(--card)}
.msg-conv.msg-mia{border-left-color:var(--verde);background:var(--verde-s)}
.msg-conv-testa{margin-bottom:4px;font-size:.88rem}
.msg-conv.msg-nuova{box-shadow:0 0 0 2px var(--rosso) inset}
.msg-rispondi{margin:12px 0 0}
.msg-area{width:100%;padding:8px;border:1px solid var(--bordo);border-radius:6px;font:inherit;background:var(--campo-bg);color:var(--txt)}
.faq-conv{padding:10px 0;border-top:1px solid var(--bordo)}
.faq-conv:first-of-type{border-top:0}
.barra-app .scheda{position:relative}
.barra-app .scheda .badge-n{position:absolute;top:-2px;left:calc(50% + 4px);min-width:1.2em;padding:0 4px;font-size:.66rem;line-height:1.4}
.foglio-voce .badge-n{margin-left:8px}
.foglio-gruppo{font-weight:700;color:var(--muted)}

/* Calorie e grassi (alimenti, unità, confronto) */
.campo-num{flex:0 1 120px;min-width:100px}
.pesi-unita{margin-top:10px}
.pesi-unita summary{cursor:pointer;color:var(--link)}
.griglia-pesi{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.griglia-pesi label{display:flex;flex-direction:column;gap:2px;font-size:.88rem;color:var(--muted)}
.diff-piu{color:var(--rosso);font-weight:600}
.diff-meno{color:var(--neg);font-weight:600}
.riepilogo-nutri{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.riepilogo-nutri .blocco{border:1px solid var(--bordo);border-radius:8px;padding:10px 12px}
.riepilogo-nutri .blocco h3{margin:0 0 6px;font-size:1rem}
.riepilogo-nutri .riga{display:flex;justify-content:space-between;gap:8px;font-size:.92rem;padding:1px 0}
.riepilogo-nutri .grande{font-size:1.35rem;font-weight:700}
.grafico-nutri a:hover rect.b-piano,.grafico-nutri a:hover rect.b-mangiato{opacity:.75}
.legenda-grafico .cam.blu{background:var(--neg)}
.avviso-dati{border-left:3px solid var(--st-avviso-bordo);background:var(--st-avviso-bg);color:var(--st-avviso-txt);padding:8px 12px;border-radius:6px;margin:0 0 12px}

/* note di pagina (testi grigi di spiegazione): spostate a fine pagina */
.note-pagina{margin-top:26px;padding-top:12px;border-top:1px solid var(--bordo)}
.note-pagina>p{margin:0 0 10px!important}
@media print{.note-pagina{border-top:0}}

/* Oggi: sostituzione di una ricetta con una di pari valori */
.sostituisci{margin-top:6px;font-size:.92rem}
.sostituisci>summary{cursor:pointer;color:var(--verde);font-weight:600}
.sostituisci-elenco{list-style:none;margin:0;padding:0}
.sostituisci-elenco li{border-top:1px solid var(--bordo,#e3e3e3);padding:6px 0}
.sostituisci-elenco form{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0}
.sostituisci-elenco .sost-nome{min-width:0}
.sostituisci-elenco .riga-sotto{display:block}
.riga-ricetta .riga-sotto,.riga-ricetta .sostituisci p,.riga-ricetta .sostituisci-elenco{font-weight:400}
.riga-ricetta .sostituisci>summary{font-weight:600}
.riga-ricetta .sostituisci{vertical-align:top}

/* Avviso sui cookie */
.avviso-cookie{position:fixed;left:12px;right:12px;bottom:12px;z-index:80;display:flex;align-items:center;gap:14px;max-width:760px;margin:0 auto;background:var(--card);color:var(--txt);border:1px solid var(--bordo);border-radius:12px;padding:12px 16px calc(12px + env(safe-area-inset-bottom,0px));box-shadow:0 6px 24px rgba(0,0,0,.2)}
.avviso-cookie[hidden]{display:none}
.avviso-cookie p{margin:0;font-size:14px;line-height:1.4}
.avviso-cookie button{flex:none;white-space:nowrap}
.piede-cookie{text-align:center;font-size:13px;margin:0;padding:6px 0 18px}
.piede-cookie a{color:var(--muted)}
@media (max-width:700px){
  .avviso-cookie{flex-direction:column;align-items:stretch;gap:10px}
  .piede-cookie{padding-bottom:84px}
}
@media print{.avviso-cookie,.piede-cookie{display:none}}

/* Riquadri trasformati in pop-up da assets/popup.js: nascosti finché lo script non li ha spostati (senza JS restano visibili) */
.js [data-popup]:not(.popup-contenuto){display:none}
dialog.popup-auto .popup-contenuto{margin:0}
dialog.popup-auto .popup-contenuto h2{margin-top:0}
dialog.popup-auto{width:min(640px,calc(100vw - 24px))}
.piano-layout>.piano-aggiungi:only-child{flex:1 1 auto}

/* Pagina dei colori da telefono: anteprima sotto il modulo e righe che vanno a capo */
@media(max-width:860px){
  .colori-layout{flex-direction:column;align-items:stretch}
  .colori-anteprima{position:static;flex:1 1 auto;width:100%}
  .colori-riga{flex-wrap:wrap}
  .colori-riga label{flex-basis:100%}
}

/* Login: «Resta collegato» */
label.check-riga{display:flex;align-items:center;gap:8px;font-weight:400;margin:2px 0 6px;cursor:pointer}
label.check-riga input{width:auto;margin:0}

/* Pagina di presentazione pubblica (includes/landing.php) */
.landing-hero{text-align:center;max-width:720px;margin:24px auto 8px}
.landing-hero h1{justify-content:center;font-size:2rem}
.landing-sotto{font-size:1.1rem;color:var(--muted);margin:0 0 18px}
.landing-azioni{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:0}
.landing-sezione{max-width:960px;margin:28px auto}
.landing-griglia{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.landing-griglia h3{margin:0 0 6px;font-size:1.05rem}
.landing-griglia p{margin:0}
.landing-passi{padding-left:1.2em;margin:0}
.landing-passi li{margin-bottom:8px}

/* Informativa privacy (privacy.php) */
.privacy{max-width:820px;margin:0 auto}
.privacy h2{font-size:1.05rem}
.privacy ul{margin:6px 0;padding-left:1.2em}
.privacy li{margin-bottom:6px}
mark.da-compilare{background:var(--trovato-bg);border:1px dashed var(--trovato-bordo);padding:0 4px;border-radius:3px;color:var(--txt)}
.privacy-bozza{background:var(--st-avviso-bg);border-color:var(--st-avviso-bordo);color:var(--st-avviso-txt)}

/* Landing: schermate e domande frequenti */
.landing-schermate{display:flex;gap:16px;overflow-x:auto;padding:4px 2px 12px;scroll-snap-type:x mandatory;justify-content:center}
.landing-schermate figure{margin:0;flex:0 0 auto;width:min(215px,62vw);scroll-snap-align:center;text-align:center}
.landing-schermate img{display:block;width:100%;height:auto;border:1px solid var(--bordo);border-radius:18px;box-shadow:0 2px 8px rgba(20,20,20,.12);background:var(--card)}
.landing-schermate figcaption{margin-top:6px;font-size:.9rem;color:var(--muted)}
@media (max-width:760px){.landing-schermate{justify-content:flex-start}}
.landing-faq{background:var(--card);border:1px solid var(--bordo);border-radius:8px;padding:10px 14px;margin-bottom:8px}
.landing-faq summary{cursor:pointer;font-weight:600}
.landing-faq p{margin:8px 0 0}

/* ---------- Ricettario sfogliabile (libro.php) ---------- */
.libro-cornice{--carta:#fffdf6;--carta-bordo:#e4d9c0;--inchiostro:#2b2417;--libro-acc:var(--sez-ricette,#e64980);max-width:1020px;margin:0 auto}
.libro-barra{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 12px}
.libro-barra select{width:auto;max-width:min(260px,100%);flex:1 1 150px}
.libro-barra button:disabled{opacity:.45;cursor:default}
.libro-posizione{margin-left:auto;font-size:.9rem}
.libro-pagina{background:var(--carta);color:var(--inchiostro);border:1px solid var(--carta-bordo);border-radius:6px 12px 12px 6px;box-shadow:0 2px 0 var(--carta-bordo),0 10px 26px rgba(60,45,10,.14);margin-bottom:18px;font-family:Georgia,'Times New Roman',serif}
.libro-attivo .libro-pagina{display:none;margin-bottom:0}
.libro-attivo .libro-pagina.attiva{display:block;animation:libro-gira .28s ease-out}
.libro-attivo .libro-pagina.libro-ricetta.attiva{display:grid}
@keyframes libro-gira{from{opacity:0;transform:translateX(14px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.libro-attivo .libro-pagina.attiva{animation:none}}
.libro-pagina h1,.libro-pagina h2,.libro-pagina h3{font-family:inherit;color:var(--inchiostro)}
/* copertina */
.libro-copertina{padding:clamp(28px,8vw,70px) 20px;text-align:center;background:linear-gradient(160deg,#fff7e2,#f3e5c0);border-color:#d6c28a}
.copertina-box{max-width:520px;margin:0 auto;border:3px double #b99a4b;border-radius:6px;padding:clamp(24px,6vw,54px) 18px}
.copertina-sopra{margin:0;letter-spacing:.2em;text-transform:uppercase;font-size:.8rem;color:#7a6530}
.libro-copertina h1{margin:.5em 0 .3em;font-size:clamp(2rem,7vw,3.2rem);line-height:1.1}
.copertina-linea{width:90px;height:3px;background:var(--libro-acc);margin:14px auto;border-radius:2px}
.copertina-sotto{margin:0 0 18px;color:#5b4c25}
.copertina-aiuto{font-family:system-ui,sans-serif;font-size:.85rem;margin-bottom:0}
/* indice */
.libro-indice{padding:clamp(16px,4vw,34px)}
.libro-titolo-indice{margin:0 0 14px;font-size:1.8rem;text-align:center;border-bottom:2px solid var(--libro-acc);padding-bottom:8px}
.indice-colonne{columns:2 280px;column-gap:36px}
.indice-cat{break-inside:avoid;margin-bottom:18px}
.indice-cat h3{margin:0 0 6px;font-size:1.1rem;font-style:italic;color:var(--libro-acc)}
.indice-lista{list-style:none;margin:0;padding:0}
.indice-lista a{display:flex;align-items:baseline;gap:6px;padding:3px 0;color:var(--inchiostro);text-decoration:none}
.indice-lista a:hover .indice-nome{text-decoration:underline}
.indice-punti{flex:1;border-bottom:1px dotted #a89a76;transform:translateY(-3px);min-width:12px}
.indice-pag{font-variant-numeric:tabular-nums;color:#6d5f3b}
/* ricetta: doppia pagina con la rilegatura al centro */
.libro-ricetta{display:grid;grid-template-columns:1fr 1fr;position:relative}
.libro-ricetta::before{content:"";position:absolute;top:0;bottom:0;left:50%;width:34px;margin-left:-17px;background:linear-gradient(90deg,transparent,rgba(120,90,30,.13) 50%,transparent);pointer-events:none}
.pag{padding:clamp(18px,4vw,38px) clamp(18px,4vw,40px);position:relative;min-width:0}
.pag-sx{padding-right:clamp(26px,4vw,48px)}
.pag-dx{padding-left:clamp(26px,4vw,48px)}
.libro-cat{margin:0;font-family:system-ui,sans-serif;text-transform:uppercase;letter-spacing:.14em;font-size:.72rem;color:var(--libro-acc);font-weight:700}
.libro-ricetta h2{margin:.15em 0 .2em;font-size:clamp(1.5rem,4vw,2.1rem);line-height:1.15}
.libro-meta{margin:0 0 16px;font-style:italic;color:#6a5b34;font-size:.95rem}
.libro-ricetta h3{margin:0 0 8px;font-size:.78rem;font-family:system-ui,sans-serif;text-transform:uppercase;letter-spacing:.12em;color:#6d5f3b;border-bottom:1px solid var(--carta-bordo);padding-bottom:4px}
.libro-ing{list-style:none;margin:0;padding:0}
.libro-ing li{display:flex;justify-content:space-between;gap:12px;padding:5px 0;border-bottom:1px dotted #d8ccb0}
.libro-qta{white-space:nowrap;font-variant-numeric:tabular-nums;color:#4d4020}
.libro-passi{margin-bottom:12px}
.passo{display:flex;gap:10px;margin:0 0 11px;line-height:1.5}
.passo-n{flex:0 0 1.7em;height:1.7em;border-radius:50%;background:var(--libro-acc);color:#fff;font:700 .82rem/1.7em system-ui,sans-serif;text-align:center;margin-top:.1em}
.passo-testo{margin:0 0 11px;line-height:1.5}
.libro-nota{background:#fbf3d9;border-left:3px solid #d6b44a;border-radius:4px;padding:8px 12px;margin:14px 0;font-size:.93rem}
.libro-firma{margin:18px 0 0;font-family:system-ui,sans-serif;font-size:.82rem}
.libro-num{position:absolute;bottom:12px;left:0;right:0;margin:0;text-align:center;font-size:.85rem;color:#8b7b4e}
.pag-dx .libro-num{display:none}
@media(max-width:760px){
  .libro-ricetta,.libro-attivo .libro-pagina.libro-ricetta.attiva{display:block}
  .libro-ricetta::before{display:none}
  .pag-sx{padding-bottom:6px;padding-right:clamp(18px,4vw,40px)}
  .pag-dx{padding-left:clamp(18px,4vw,40px);border-top:1px dashed var(--carta-bordo)}
  .libro-num{position:static;margin-top:10px;text-align:right}
}
@media print{
  .libro-barra,.libro-copertina .no-stampa{display:none!important}
  .libro-cornice{max-width:none}
  .libro-pagina{box-shadow:none;border:0;background:#fff;break-inside:avoid}
  .libro-attivo .libro-pagina.attiva{animation:none}
  .libro-ricetta::before{display:none}
}

/* Stampa di tutto il libro (pulsante «Stampa tutto il libro»): copertina, indice e una ricetta per pagina */
.libro-cornice{page:libro}
@page libro{size:A4;margin:16mm 14mm 18mm;@bottom-center{content:counter(page);font:9pt Georgia,serif;color:#777}}
@media print{
  .libro-tutto .libro-pagina{display:block!important;font-size:11.5pt}
  .libro-tutto .libro-pagina:not(:last-child){break-after:page}
  .libro-tutto .libro-copertina{display:flex!important;align-items:center;justify-content:center;min-height:240mm;background:#fff}
  .libro-tutto .libro-copertina .copertina-box{border-color:#999}
  .libro-tutto .libro-ricetta{display:block!important}
  .libro-tutto .pag{padding:0 2mm}
  .libro-tutto .pag-dx{border-top:1px dashed #999;margin-top:8mm;padding-top:6mm}
  .libro-tutto .libro-num{display:none}
  .libro-tutto .passo,.libro-tutto .libro-ing li,.libro-tutto .libro-nota{break-inside:avoid}
  .passo-n{background:#444!important;color:#fff!important;-webkit-print-color-adjust:exact;print-color-adjust:exact}
}
@media print{
  .libro-tutto .libro-copertina .copertina-box{width:100%;max-width:150mm;box-sizing:border-box}
  .libro-tutto .indice-cat{break-inside:auto}
  .libro-tutto .indice-cat h3{break-after:avoid}
  .libro-tutto .indice-lista li{break-inside:avoid}
}

/* ---- Siti amici ---- */
.griglia-siti{grid-template-columns:repeat(auto-fill,minmax(min(380px,100%),1fr))}
.siti-lista{list-style:none;margin:0;padding:0}
.siti-lista li{display:flex;gap:12px;align-items:flex-start;padding:10px 0;border-top:1px solid var(--bordo)}
.sito-testo{flex:1 1 0;min-width:0}
.sito-anteprima{flex:none;width:64px;height:64px;border-radius:10px;overflow:hidden;background:color-mix(in srgb,var(--accento,var(--verde)) 14%,#fff);display:flex;align-items:center;justify-content:center;color:var(--accento,var(--verde));font-weight:700;font-size:1.5rem;text-decoration:none}
.sito-anteprima img{width:100%;height:100%;object-fit:cover;display:block}
.sito-scheda{display:flex;gap:14px;align-items:flex-start}
.sito-scheda .sito-campi{flex:1 1 0;min-width:0}
.sito-scheda .sito-anteprima{width:56px;height:56px;font-size:1.3rem}
@media(max-width:600px){.sito-scheda{flex-direction:column}}
.siti-lista li:first-child{border-top:0;padding-top:2px}
.sito-nome{font-weight:600}
.sito-dominio{margin-left:8px;font-size:.88rem}
.sito-desc{margin:3px 0 0}

/* Preferenze sugli alimenti (migrazione 51) */
.pref-badge{display:inline-flex;vertical-align:-3px;margin-right:4px}
.pref-badge.pref-piace{color:#e03131}
.pref-badge.pref-non_piace{color:#e8590c}
.pref-badge.pref-allergico{color:var(--rosso)}
.sel-pref{width:auto;min-width:7.5em;padding:3px 6px;font-size:.85rem}
.sel-pref.pref-piace{border-color:#e03131}
.sel-pref.pref-non_piace{border-color:#e8590c}
.sel-pref.pref-allergico{border-color:var(--rosso);background:var(--flash-err-bg)}
.pref-mostra{display:flex;align-items:center;gap:6px;margin:6px 0 0;font-size:.85rem;font-weight:400;color:var(--muted)}
.ricetta-esclusa{background:var(--flash-err-bg)}
.avviso-esclusi{border-left:4px solid var(--rosso);background:var(--flash-err-bg);color:var(--flash-err-txt)}
.avviso-esclusi p{margin:0}
/* Alimenti esclusi (migrazione 51) evidenziati in ogni pagina: nome in rosso con l'icona; sotto le ricette «Contiene: …» */
.pref-nome{font-weight:600;color:var(--rosso)}
.pref-nome.pref-non_piace{color:#e8590c}
.pref-nome .pref-badge{margin-right:4px}
.pref-nota{color:var(--rosso);font-size:.82rem;font-weight:400}
@media print{.pref-nome,.pref-nota,.pref-badge{-webkit-print-color-adjust:exact;print-color-adjust:exact}}