/* Il carattere dei titoli viaggia col sito: su Android non esiste nessun
   serif di sistema equivalente, e il service worker lo tiene in cache. */
@font-face{
  font-family:'Newsreader'; font-style:normal; font-weight:600;
  font-display:swap;
  src:url('newsreader-600.woff2') format('woff2');
}


/* Tema unico scuro: ogni colore e' definito qui dentro, senza
   varianti legate al tema del sistema o a un interruttore chiaro/scuro. */
:root{
  --ground:#141019; --surface:#1E1829; --surface-2:#271F35;
  --ink:#EDE8F5; --ink-soft:#A79DBC; --ink-faint:#7C7291;
  --linea:#2E2640; --linea-forte:#3E3455;
  --viola:#BEA6EE; --viola-tenue:#2A2140; --viola-ink:#D6C6F5;
  --verde:#74CC9C; --verde-tenue:#1C3629;
  --ambra:#E3B667; --ambra-tenue:#3A2E17;
  --riposo:#2B3D50; --allen:#4A3A22;
  --su-accento:#16121F;
  --ombra:0 1px 2px rgba(0,0,0,.4), 0 8px 24px -14px rgba(0,0,0,.7);
  --font-ui:Roboto,"Helvetica Neue",system-ui,-apple-system,sans-serif;
  --font-display:"Newsreader",Georgia,"Times New Roman",serif;
  --font-num:"Roboto Mono",ui-monospace,"SF Mono",Menlo,monospace;
  --r:14px; --tap:44px; --tabbar:58px;
}
/* colori per categoria di dispensa, ripresi dal foglio Google */
.c-surgelati{--cat:#7FB4E0}
.c-frigo{--cat:#63C4B8}
.c-senza-glutine{--cat:#7ECF97}
.c-con-glutine{--cat:#E8A268}
.c-legumi{--cat:#DFC766}
.c-frutta-secca{--cat:#E39BB8}
.c-colazione{--cat:#B3A6EE}
.c-spezie{--cat:#E8A98D}
.c-altro{--cat:#9E95B4}
/* categorie della lista della spesa */
.c-frutta{--cat:#E8A98D}
.c-verdura{--cat:#9FD68A}
.c-latticini{--cat:#B3A6EE}
.c-proteine{--cat:#E39BB8}
.c-conserve{--cat:#DFC766}
.c-cereali{--cat:#E8A268}

*{box-sizing:border-box}
/* L'attributo hidden vale display:none, ma qualunque display dichiarato qui lo
   sovrascriverebbe: e' cosi' che il lettore di codici a barre, invisibile per
   attributo ma display:flex per stile, si e' preso tutto lo schermo. */
[hidden]{display:none !important}
html{color-scheme:dark}
body{
  margin:0; background:var(--ground); color:var(--ink);
  font-family:var(--font-ui); font-size:16px; line-height:1.45;
  -webkit-font-smoothing:antialiased; -webkit-text-size-adjust:100%;
}
button{font:inherit; color:inherit; background:none; border:none; padding:0; cursor:pointer}
:focus-visible{outline:2px solid var(--viola); outline-offset:2px; border-radius:6px}
@media (prefers-reduced-motion: reduce){*{animation:none!important; transition:none!important}}

.app{max-width:560px; margin:0 auto; min-height:100vh; display:flex; flex-direction:column}

/* --- testata --- */
/* Testata e barra di ricerca stanno in un unico blocco agganciato in alto:
   cosi' non serve sapere quanto e' alta la testata per posizionare la ricerca. */
.blocco-alto{
  position:sticky; top:0; z-index:30; background:var(--ground);
  border-bottom:1px solid var(--linea);
}
.testata{
  padding:14px 18px 10px; display:flex; align-items:flex-start; gap:12px;
}
.occhiello{
  margin:0; font-size:10px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-faint); font-weight:600;
}
.settimana{margin:1px 0 0; font-family:var(--font-display); font-size:23px; font-weight:600; letter-spacing:-.01em}
.chip{
  margin-left:auto; display:flex; align-items:center; gap:6px; flex:none;
  font-size:11px; font-weight:600; padding:6px 10px; border-radius:99px;
  background:var(--surface-2); color:var(--ink-soft); border:1px solid var(--linea);
  min-height:32px;
}
.chip .pallino{width:7px; height:7px; border-radius:99px; background:currentColor; flex:none}
.chip[data-s="ok"]{color:var(--verde); background:var(--verde-tenue); border-color:transparent}
.chip[data-s="locale"]{color:var(--ambra); background:var(--ambra-tenue); border-color:transparent}
.chip[data-s="corso"] .pallino{animation:pulsa 1s infinite}
@keyframes pulsa{50%{opacity:.25}}

/* --- corpo --- */
.vista{flex:1; padding:16px 14px calc(var(--tabbar) + 26px + env(safe-area-inset-bottom))}
.sezione-tit{
  margin:22px 4px 10px; font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-faint); font-weight:700;
}
.vista > .sezione-tit:first-child{margin-top:4px}

/* --- selettore giorni --- */
.giorni{display:grid; grid-template-columns:repeat(4,1fr); gap:7px; margin-bottom:14px}
.giorno-pill{
  border:1px solid var(--linea); background:var(--surface); border-radius:12px;
  padding:9px 4px; text-align:center; min-height:var(--tap);
  display:flex; flex-direction:column; gap:1px; justify-content:center;
  transition:border-color .15s, background .15s;
}
.giorno-pill .gg{font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-faint); font-weight:700}
.giorno-pill .nn{font-family:var(--font-display); font-size:20px; font-weight:600; line-height:1.1}
.giorno-pill[aria-current="true"]{background:var(--viola); border-color:var(--viola)}
.giorno-pill[aria-current="true"] .gg,
.giorno-pill[aria-current="true"] .nn{color:var(--su-accento)}
.giorno-pill.oggi:not([aria-current="true"]){border-color:var(--viola); border-width:1.5px}

/* --- fascia tipo di giornata --- */
.intest{
  display:flex; align-items:center; gap:10px; padding:9px 14px; border-radius:10px;
  background:var(--riposo); color:var(--ink); margin-bottom:14px;
  font-size:10.5px; letter-spacing:.13em; text-transform:uppercase; font-weight:700;
}
.intest.allenamento{background:var(--allen)}
.intest .nota-giorno{
  margin-left:auto; letter-spacing:0; text-transform:none; font-weight:500;
  font-size:12px; opacity:.85;
}

/* --- card pasto: spunta a sinistra --- */
.pasto{
  background:var(--surface); border:1px solid var(--linea); border-radius:var(--r);
  box-shadow:var(--ombra); margin-bottom:10px; overflow:hidden;
  display:flex; align-items:stretch;
}
.pasto.fatto{opacity:.55}
.spunta{
  flex:none; width:54px; display:flex; align-items:center; justify-content:center;
  border-right:1px solid var(--linea); background:var(--surface);
}
.spunta .box{
  width:26px; height:26px; border-radius:8px; border:1.5px solid var(--linea-forte);
  display:grid; place-items:center; transition:background .15s, border-color .15s;
}
.spunta[aria-pressed="true"] .box{background:var(--verde); border-color:var(--verde); color:var(--su-accento)}
.spunta .box svg{opacity:0; width:15px; height:15px}
.spunta[aria-pressed="true"] .box svg{opacity:1}
.pasto .corpo{flex:1; padding:13px 15px 13px 14px; min-width:0}
.pasto.fatto .corpo{padding-top:11px; padding-bottom:11px}
.pasto .etichetta{
  font-size:10px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--viola); font-weight:700;
}
.pasto h3{
  margin:3px 0 0; font-family:var(--font-display); font-size:18px; font-weight:600;
  line-height:1.25; letter-spacing:-.01em; text-wrap:balance;
}
.pasto.fatto h3{text-decoration:line-through; text-decoration-color:var(--ink-faint)}
.righe{margin:8px 0 0; padding:0; list-style:none; display:flex; flex-wrap:wrap; gap:4px 8px}
.righe li{font-size:12.5px; color:var(--ink-soft)}
.righe li + li::before{content:"·"; margin-right:8px; color:var(--ink-faint)}
.qta{font-family:var(--font-num); font-size:.92em; color:var(--ink)}
.tags{display:flex; gap:5px; margin-top:9px; flex-wrap:wrap; align-items:center}
.tag{
  font-size:9.5px; letter-spacing:.09em; font-weight:700; text-transform:uppercase;
  padding:3px 7px; border-radius:5px; background:var(--ambra-tenue); color:var(--ambra);
}
.nota{
  margin-top:9px; font-size:12px; color:var(--ink-soft);
  background:var(--surface-2); border-radius:8px; padding:6px 10px;
}
.btn-ricetta{
  margin-top:11px; display:inline-flex; align-items:center; gap:6px; min-height:36px;
  padding:0 13px; border-radius:9px; background:var(--viola-tenue); color:var(--viola-ink);
  font-size:13px; font-weight:600;
}

/* --- ricette --- */
.card-ricetta{
  width:100%; text-align:left; background:var(--surface); border:1px solid var(--linea);
  border-radius:var(--r); padding:14px 15px; margin-bottom:9px; box-shadow:var(--ombra);
}
.card-ricetta h3{margin:0; font-family:var(--font-display); font-size:17px; font-weight:600; line-height:1.3; text-wrap:balance}
.card-ricetta .meta{
  margin-top:6px; font-size:12px; color:var(--ink-soft);
  display:flex; gap:8px; flex-wrap:wrap; align-items:center;
}
.stelle{display:inline-flex; gap:2px; color:var(--ambra)}
.stelle.vuote{color:var(--ink-faint)}

/* --- spesa --- */
.riepilogo{
  background:var(--surface); border:1px solid var(--linea); border-radius:var(--r);
  padding:14px 16px; margin-bottom:14px; box-shadow:var(--ombra);
}
.riepilogo .grande{font-family:var(--font-display); font-size:26px; font-weight:600; letter-spacing:-.02em}
.riepilogo .grande span{font-size:15px; color:var(--ink-soft); font-family:var(--font-ui); font-weight:400}
.barra-avanz{height:5px; border-radius:99px; background:var(--surface-2); margin-top:10px; overflow:hidden}
.barra-avanz i{display:block; height:100%; background:var(--verde); border-radius:99px; transition:width .25s}
.riga-spesa{
  display:flex; align-items:center; gap:13px; width:100%; text-align:left;
  padding:12px 15px; background:var(--surface); border:1px solid var(--linea);
  border-radius:12px; margin-bottom:7px; min-height:var(--tap); box-shadow:var(--ombra);
}
.riga-spesa .box{
  width:24px; height:24px; flex:none; border-radius:7px; border:1.5px solid var(--linea-forte);
  display:grid; place-items:center;
}
.riga-spesa[aria-pressed="true"]{opacity:.5}
.riga-spesa[aria-pressed="true"] .box{background:var(--verde); border-color:var(--verde); color:var(--su-accento)}
.riga-spesa .box svg{opacity:0; width:14px; height:14px}
.riga-spesa[aria-pressed="true"] .box svg{opacity:1}
.riga-spesa[aria-pressed="true"] .nome-art{text-decoration:line-through}
.riga-spesa .testo{min-width:0; flex:1; display:flex; flex-direction:column}
.nome-art{font-size:15px; font-weight:500}
.riga-spesa .dett{font-size:12px; color:var(--ink-soft); margin-top:1px}
.riga-spesa .peso{font-family:var(--font-num); font-size:13px; color:var(--ink-soft); flex:none}
.riga-extra{display:flex; align-items:stretch; gap:7px; margin-bottom:7px}
.riga-extra .riga-spesa{flex:1; margin-bottom:0}
.btn-elimina{
  flex:none; width:44px; border-radius:12px; border:1px solid var(--linea);
  background:var(--surface); color:var(--ink-faint); display:grid; place-items:center;
}
.btn-elimina svg{width:15px; height:15px}
.aggiungi{display:flex; gap:7px; flex-wrap:wrap; margin-top:12px}
.aggiungi input{
  min-height:var(--tap); border-radius:11px; border:1px solid var(--linea);
  background:var(--surface); color:var(--ink); padding:0 13px; font:inherit; font-size:15px;
}
.aggiungi input::placeholder{color:var(--ink-faint)}
.aggiungi .nome{flex:1; min-width:150px}
.aggiungi .quanto{width:104px; font-family:var(--font-num); font-size:14px}
.btn-aggiungi{
  display:flex; align-items:center; justify-content:center; gap:8px; width:100%;
  min-height:var(--tap); border-radius:12px; margin-top:12px;
  border:1px dashed var(--linea-forte); color:var(--ink-soft); font-size:14px; font-weight:600;
}
.btn-aggiungi svg{width:16px; height:16px}

/* --- dispensa --- */
.cerca{display:flex; gap:8px; align-items:stretch; padding:0 14px 12px}
.cerca input{
  width:100%; min-height:var(--tap); border-radius:11px; border:1px solid var(--linea);
  background:var(--surface); color:var(--ink); padding:0 14px; font:inherit; font-size:15px;
}
.cerca input::placeholder{color:var(--ink-faint)}
.cat-testata{display:flex; align-items:center; gap:12px; margin:24px 2px 9px}
.cat-testata:first-of-type{margin-top:6px}
.cat-testata .nome-cat{
  font-size:13.5px; letter-spacing:.09em; text-transform:uppercase;
  font-weight:700; color:var(--cat); flex:none;
}
.cat-testata .filo{flex:1; height:1px; background:color-mix(in srgb, var(--cat) 40%, transparent)}
.riga-disp{
  display:flex; align-items:center; gap:10px; padding:4px 0;
  border-bottom:1px solid var(--linea); min-height:var(--tap);
}
.gruppo .riga-disp:last-child{border-bottom:none}
.riga-disp .nome-art{font-weight:400; font-size:14.5px}
.riga-disp.esaurito .nome-art{color:var(--ink-faint)}
.btn-qta{
  margin-left:auto; flex:none; font-family:var(--font-num); font-size:12.5px;
  color:var(--ink-soft); padding:7px 10px; border-radius:8px;
  border:1px solid transparent; min-height:34px; display:flex; align-items:center; gap:6px;
}
.btn-qta:hover{border-color:var(--linea-forte)}
.riga-disp.esaurito .btn-qta{color:var(--ambra)}
.btn-qta .matita{width:11px; height:11px; opacity:.45; flex:none}
.btn-qta.modificata{color:var(--verde)}
.input-qta{
  margin-left:auto; flex:none; width:120px; min-height:34px; border-radius:8px;
  border:1px solid var(--viola); background:var(--surface-2); color:var(--ink);
  padding:0 10px; font-family:var(--font-num); font-size:13px; text-align:right;
}

/* --- tab bar --- */
.tabbar{
  position:fixed; bottom:0; left:0; right:0; z-index:40;
  display:grid; grid-template-columns:repeat(4,1fr);
  background:var(--surface);
  background:color-mix(in srgb, var(--surface) 92%, transparent);
  -webkit-backdrop-filter:saturate(1.6) blur(14px); backdrop-filter:saturate(1.6) blur(14px);
  border-top:1px solid var(--linea);
  height:calc(var(--tabbar) + env(safe-area-inset-bottom));
  padding-bottom:env(safe-area-inset-bottom);
  max-width:560px; margin:0 auto;
}
.tabbar button{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  padding:9px 2px 8px; color:var(--ink-faint);
}
.tabbar button[aria-current="true"]{color:var(--viola)}
.tabbar .et{font-size:10px; font-weight:600; letter-spacing:.01em}
.tabbar svg{width:21px; height:21px}
.pastiglia{
  position:absolute; transform:translate(13px,-9px); min-width:16px; height:16px;
  border-radius:99px; background:var(--verde); color:var(--su-accento); font-size:9.5px; font-weight:700;
  display:grid; place-items:center; padding:0 4px; font-variant-numeric:tabular-nums;
}

/* --- foglio ricetta --- */
.foglio{
  position:fixed; top:0; left:0; right:0;
  bottom:calc(var(--tabbar) + env(safe-area-inset-bottom));   /* lascia scoperte le schede */
  z-index:50; background:var(--ground);
  overflow-y:auto; overscroll-behavior:contain;
  animation:sali .22s cubic-bezier(.32,.72,0,1);
}
@keyframes sali{from{transform:translateY(14px); opacity:0}}
.foglio-intern{max-width:560px; margin:0 auto; padding:0 18px 34px}
.foglio-testata{
  position:sticky; top:0; z-index:5; background:var(--ground); padding:12px 0 10px;
  display:flex; align-items:center; gap:10px; border-bottom:1px solid var(--linea); margin-bottom:16px;
}
.btn-chiudi{
  width:36px; height:36px; border-radius:99px; background:var(--surface-2);
  display:grid; place-items:center; flex:none;
}
.foglio h2{margin:0; font-family:var(--font-display); font-size:25px; font-weight:600; line-height:1.18; letter-spacing:-.015em; text-wrap:balance}
.meta-riga{display:flex; gap:7px; flex-wrap:wrap; margin-top:11px}
.pill{
  font-size:11.5px; padding:4px 9px; border-radius:7px;
  background:var(--surface-2); color:var(--ink-soft); font-weight:500;
}
.pill.sveglia{background:var(--verde-tenue); color:var(--verde); font-weight:600}
.lista-ing{list-style:none; margin:0; padding:0}
.lista-ing li{border-bottom:1px solid var(--linea)}
.lista-ing button{
  display:flex; align-items:center; gap:11px; width:100%; text-align:left;
  padding:11px 2px; min-height:var(--tap); font-size:15px;
}
.lista-ing .box{width:20px; height:20px; flex:none; border-radius:6px; border:1.5px solid var(--linea-forte); display:grid; place-items:center}
.lista-ing button[aria-pressed="true"]{color:var(--ink-faint)}
.lista-ing button[aria-pressed="true"] .box{background:var(--ink-faint); border-color:var(--ink-faint); color:var(--surface)}
.lista-ing .box svg{opacity:0; width:12px; height:12px}
.lista-ing button[aria-pressed="true"] .box svg{opacity:1}
.lista-ing button[aria-pressed="true"] .testo{text-decoration:line-through}
.passi{list-style:none; margin:0; padding:0; counter-reset:p}
.passi li{margin-bottom:7px}
.passi button{
  display:flex; gap:12px; width:100%; text-align:left; padding:12px 14px;
  background:var(--surface); border:1px solid var(--linea); border-radius:12px;
  font-size:15px; line-height:1.42; box-shadow:var(--ombra);
}
.passi .n{
  counter-increment:p; flex:none; width:23px; height:23px; border-radius:99px;
  background:var(--viola-tenue); color:var(--viola-ink); font-size:11.5px; font-weight:700;
  display:grid; place-items:center; margin-top:1px; font-family:var(--font-num);
}
.passi .n::before{content:counter(p)}
.passi button[aria-pressed="true"]{background:var(--surface-2); color:var(--ink-faint)}
.passi button[aria-pressed="true"] .n{background:var(--verde); color:var(--su-accento)}
.passi button[aria-pressed="true"] .testo{text-decoration:line-through}
.voto{background:var(--surface); border:1px solid var(--linea); border-radius:var(--r); padding:15px; box-shadow:var(--ombra)}
.voto-stelle{display:flex; gap:5px; margin:10px 0 4px}
.voto-stelle button{width:var(--tap); height:var(--tap); display:grid; place-items:center; color:var(--linea-forte)}
.voto-stelle button.on{color:var(--ambra)}
.voto-stelle svg{width:29px; height:29px}
.voto textarea{
  width:100%; margin-top:9px; min-height:70px; border-radius:11px; border:1px solid var(--linea);
  background:var(--ground); color:var(--ink); padding:11px 12px; font:inherit; font-size:14.5px; resize:vertical;
}
.voto textarea::placeholder{color:var(--ink-faint)}
.etichetta-voto{font-size:13px; color:var(--ink-soft); min-height:19px}

/* dimensioni esplicite per le icone: senza width/height un SVG con viewBox
   si dilata fino ad occupare la riga */
.btn-ricetta svg,.btn svg{width:16px; height:16px; flex:none}
.btn-chiudi svg{width:19px; height:19px}
.stelle svg{width:13px; height:13px; flex:none}
.vuoto{text-align:center; color:var(--ink-faint); font-size:14px; padding:34px 20px}
.azioni{display:flex; gap:8px; margin-top:18px; flex-wrap:wrap}
.btn{
  min-height:var(--tap); padding:0 16px; border-radius:11px; font-size:14px; font-weight:600;
  background:var(--surface); border:1px solid var(--linea-forte); color:var(--ink);
  display:inline-flex; align-items:center; gap:7px;
}
.toast{
  position:fixed; left:50%; bottom:calc(var(--tabbar) + 20px + env(safe-area-inset-bottom));
  transform:translateX(-50%); z-index:80; background:var(--ink); color:var(--ground);
  padding:10px 16px; border-radius:99px; font-size:13.5px; font-weight:500;
  box-shadow:0 8px 30px -8px rgba(0,0,0,.45); animation:sali .2s;
}

/* --- scansione codici a barre --- */
.cerca input{flex:1}
.btn-scan{
  flex:none; width:var(--tap); min-height:var(--tap); border-radius:11px;
  border:1px solid var(--linea); background:var(--surface); color:var(--viola);
  display:grid; place-items:center;
}
.btn-scan svg{width:21px; height:21px}
.due-pulsanti{display:flex; gap:8px}
.due-pulsanti .btn-aggiungi{margin-top:12px}

.scanner{
  position:fixed; inset:0; z-index:70; background:var(--ground);
  display:flex; flex-direction:column;
  padding-bottom:env(safe-area-inset-bottom);
}
.scan-testata{
  display:flex; align-items:center; gap:12px; flex:none;
  padding:12px 16px; border-bottom:1px solid var(--linea);
}
.scan-titolo{font-size:14px; font-weight:600}
.scan-video{position:relative; flex:1; background:#000; overflow:hidden}
.scan-video video{width:100%; height:100%; object-fit:cover; display:block}
/* riquadro di puntamento: i codici a barre sono larghi e bassi */
.mirino{
  position:absolute; left:8%; right:8%; top:50%; transform:translateY(-50%);
  height:34%; border:2px solid var(--viola); border-radius:14px;
  box-shadow:0 0 0 100vmax rgba(0,0,0,.45);
}
.scan-stato{
  flex:none; margin:0; padding:16px; text-align:center;
  font-size:14px; color:var(--ink-soft);
}
.scan-modulo{flex:1; overflow-y:auto; padding:18px 16px}
.scan-avviso{
  margin:0 0 14px; padding:10px 12px; border-radius:10px;
  background:var(--ambra-tenue); color:var(--ambra); font-size:13px; line-height:1.4;
}
.campo{display:block; margin-bottom:14px}
.campo span{
  display:block; margin-bottom:6px; font-size:11px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-faint); font-weight:700;
}
.campo input, .campo select{
  width:100%; min-height:var(--tap); border-radius:11px; border:1px solid var(--linea);
  background:var(--surface); color:var(--ink); padding:0 13px; font:inherit; font-size:16px;
}
.campo input::placeholder{color:var(--ink-faint)}
.btn.pieno{background:var(--viola); border-color:var(--viola); color:var(--su-accento)}
.scan-codice{
  margin:2px 0 0; font-family:var(--font-num); font-size:11.5px; color:var(--ink-faint);
}

/* --- scelta dell'obiettivo e zoom --- */
.obiettivi{display:flex; gap:8px; justify-content:center; margin:10px 0 6px}
.obiettivo{
  width:38px; height:38px; border-radius:99px; flex:none;
  border:1px solid var(--linea-forte); background:var(--surface);
  color:var(--ink-soft); font-size:14px; font-weight:700;
  font-variant-numeric:tabular-nums;
}
.obiettivo.on{background:var(--viola); border-color:var(--viola); color:var(--su-accento)}
.nome-obiettivo{display:block; font-size:12px; color:var(--ink-faint)}
.zoom-riga{display:flex; align-items:center; gap:10px; margin-top:12px}
.zoom-riga span{
  font-size:10.5px; letter-spacing:.11em; text-transform:uppercase;
  color:var(--ink-faint); font-weight:700; flex:none;
}
.zoom-riga input[type=range]{flex:1; accent-color:var(--viola); height:var(--tap)}

.scheda-tecnica{
  display:block; margin-top:4px; font-family:var(--font-num);
  font-size:10.5px; color:var(--ink-faint);
}