/* Il piano dei pasti — stile «Tegame di sera»: notte calda, quantità in oro,
   nuvoletta come foglietto illuminato. Nessuna risorsa esterna.
   Contrasti misurati (WCAG): crema su tegame 12,1 · oro su tegame 8,6 ·
   etichette muto caldo su tegame 6,2 · salvia su tegame 7,0 · testo notte su
   salvia 8,7 · testo notte su terracotta 5,4 · lista accesa: voci 15,0,
   secondari 5,7, bottone verde 4,9. */

:root {
  --notte: #26111D;      /* il fondo della pagina */
  --tegame: #2F2924;     /* le carte */
  --tegame2: #362E27;    /* le carte dentro le carte */
  --pozzo: #20161C;      /* campi e input, più giù della notte */
  --crema: #F6EADB;      /* il testo che conta */
  --muto-caldo: #B9A88F; /* il testo che accompagna (6,2:1 su tegame) */
  --salvia: #A9BC8E;     /* il sì, le spunte (7,0:1 su tegame) */
  --terracotta: #C97B4A; /* il bottone del via */
  --oro: #E9C46A;        /* le quantità e i prezzi (8,6:1 su tegame) */
  --mattone: #C1553D;    /* l'allerta */
  --bordo: #4A4038;      /* il filo quieto delle carte */
  --bordo2: #3E342B;     /* le righe sottili dentro le carte */
  --crema-carta: #F6EADB; /* la lista accesa */
  --bruno: #26111D;       /* il testo sulla lista accesa */
  --muto-chiaro: #66594B; /* i secondari sulla lista accesa (5,7:1) */
  --verde-acceso: #3F7D48;/* le spunte piene della lista accesa (4,9:1 col bianco) */
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--notte);
  color: var(--crema);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.45;
  padding-bottom: calc(76px + env(safe-area-inset-bottom));
}

.nascosto { display: none !important; }

/* ---------- la partenza: un momento, poi la cucina ---------- */

#partenza {
  position: fixed; inset: 0; z-index: 90;
  background: var(--notte);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  pointer-events: none;
  animation: partenza-via 0.7s ease 0.85s forwards;
}
#partenza img { width: 92px; height: 92px; }
#partenza p { margin: 0; font-family: Georgia, serif; font-size: 18px; color: var(--muto-caldo); }
@keyframes partenza-via { to { opacity: 0; visibility: hidden; } }

/* ---------- testata ---------- */

.testata { padding: 20px 18px 12px; text-align: center; }

.testata-marchietto { width: 58px; height: 58px; display: block; margin: 0 auto 6px; }

.testata h1 {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 27px;
  font-weight: 700;
  letter-spacing: 0.2px;
  color: var(--crema);
}

.sottotitolo { margin: 4px 0 0; color: var(--muto-caldo); font-size: 14px; }

main { max-width: 760px; margin: 0 auto; padding: 0 14px; }

/* ---------- passi del giro ---------- */

.passo {
  background: var(--tegame);
  border: 1px solid var(--bordo);
  border-radius: 14px;
  padding: 16px;
  margin: 0 0 14px;
}

.passo-testa { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }

.passo-num {
  flex: none;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--terracotta);
  color: var(--notte);
  font-family: Georgia, serif;
  font-size: 15px;
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}

.passo h2, .risultato-titolo {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 19px;
  font-weight: 700;
  color: var(--crema);
}

.passo-nota { margin: 10px 0 0; color: var(--muto-caldo); font-size: 13px; }

.gruppo-etichetta {
  display: block;
  font-size: 12.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--muto-caldo);
  margin: 14px 0 7px;
}

/* ---------- chip ---------- */

.chip-gruppo { display: flex; flex-wrap: wrap; gap: 8px; }

.chip {
  border: 1.5px solid var(--bordo);
  background: var(--pozzo);
  color: var(--crema);
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 15px;
  font-family: inherit;
  cursor: pointer;
}

.chip.attivo { background: var(--salvia); border-color: var(--salvia); color: var(--notte); font-weight: 600; }
.chip-piccolo { padding: 6px 11px; font-size: 13.5px; }
.chip-x { margin-left: 4px; font-size: 12px; }
.chip-toglibile { background: rgba(201, 123, 74, 0.16); border-color: #7a4a2e; color: #E8B08A; }

/* ---------- 2. il budget raccontato ---------- */

.budget-raccontato { text-align: center; }

.budget-cifra { font-family: Georgia, serif; font-size: 46px; font-weight: 700; line-height: 1.1; color: var(--oro); }

.budget-cifra .budget-euro { font-size: 26px; color: var(--muto-caldo); margin-left: 3px; }

.budget-etichetta { margin: 2px 0 10px; font-size: 14px; color: var(--crema); }
.budget-etichetta strong { color: var(--oro); }

#budgetCursore { width: 100%; accent-color: var(--oro); margin: 4px 0 8px; }

.budget-riga-input { display: flex; align-items: center; justify-content: center; gap: 8px; }

#budgetInput {
  width: 120px;
  font-family: Georgia, serif;
  font-size: 24px;
  font-weight: 700;
  text-align: center;
  color: var(--crema);
  background: var(--pozzo);
  border: 1px solid var(--bordo);
  border-radius: 10px;
  padding: 7px 10px;
}

#budgetInput:focus { outline: 2px solid var(--oro); border-color: var(--oro); }

.budget-riga-input .budget-euro { color: var(--muto-caldo); font-size: 14px; }

.budget-anteprima { margin: 12px 0 0; font-size: 14px; color: var(--crema); font-weight: 600; }

/* ---------- 3. chi mangia ---------- */

.persone-riga { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }

.persone-etichetta { font-weight: 600; }

.stepper { display: flex; align-items: center; gap: 14px; }

.passo-bottone {
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1.5px solid var(--bordo);
  background: var(--pozzo);
  color: var(--crema);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}

.passo-bottone:active { background: var(--oro); color: var(--notte); }

.stepper-valore { font-family: Georgia, serif; font-size: 26px; font-weight: 700; min-width: 34px; text-align: center; color: var(--crema); }

.interruttore {
  display: inline-flex; align-items: center; gap: 9px;
  border: 1.5px solid var(--bordo);
  background: var(--pozzo);
  color: var(--crema);
  border-radius: 999px;
  padding: 9px 14px 9px 10px;
  font-size: 15px;
  font-family: inherit;
  cursor: pointer;
}

.interruttore-pallino {
  width: 20px; height: 20px;
  border-radius: 50%;
  background: #51453a;
  border: 2px solid var(--bordo);
  transition: background 0.15s;
}

.interruttore.acceso { border-color: var(--salvia); font-weight: 600; }
.interruttore.acceso .interruttore-pallino { background: var(--salvia); border-color: var(--salvia); }

.obiettivi { margin-top: 14px; border-top: 1px dashed var(--bordo); padding-top: 10px; }

.obiettivi-titolo { margin: 0 0 8px; font-size: 14px; font-weight: 600; }

/* ---------- 4. i pasti ---------- */

.carta-pasto {
  border: 1.5px solid var(--bordo);
  border-radius: 12px;
  padding: 10px 12px;
  margin-bottom: 8px;
  background: var(--pozzo);
}

.carta-pasto.spenta { opacity: 0.55; background: transparent; }

.carta-pasto-testa { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 8px; }

.pasto-nome { font-family: Georgia, serif; font-weight: 700; font-size: 15.5px; }

.pasto-stato { font-size: 12.5px; color: var(--salvia); font-weight: 600; text-transform: lowercase; }

.carta-pasto.spenta .pasto-stato { color: var(--muto-caldo); }

/* ---------- 7. il mazzo delle cucine ---------- */

.mazzo-carta {
  background: var(--tegame2);
  border: 2px solid var(--bordo);
  border-radius: 16px;
  padding: 14px;
  text-align: center;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}

.mazzo-immagine {
  width: 110px; height: 110px;
  margin: 0 auto 8px;
  border-radius: 18px;
  overflow: hidden;
  border: 2px solid var(--bordo);
  background: var(--pozzo);
}

.mazzo-immagine svg, .mazzo-immagine img { width: 100%; height: 100%; display: block; object-fit: cover; }

.mazzo-carta h3 { margin: 0; font-family: Georgia, serif; font-size: 20px; color: var(--crema); }

.mazzo-carta p { margin: 4px 0 12px; color: var(--muto-caldo); font-size: 13.5px; }

.mazzo-azioni { display: flex; gap: 8px; justify-content: center; }

.mazzo-bottone {
  flex: 1; max-width: 130px;
  border: 1.5px solid var(--bordo);
  background: var(--pozzo);
  border-radius: 999px;
  padding: 10px 6px;
  font-size: 14.5px;
  font-weight: 600;
  font-family: inherit;
  color: var(--crema);
  cursor: pointer;
}

/* il colore del sì: salvia piena col testo notte; il no resta un bordo quieto */
.mazzo-bottone.mazzo-si { border-color: var(--salvia); background: var(--salvia); color: var(--notte); }
.mazzo-bottone.mazzo-no { border-color: var(--bordo); background: transparent; color: var(--muto-caldo); }

.mazzo-avviso { background: var(--pozzo); border: 1px solid var(--bordo); border-radius: 12px; padding: 12px; }
.mazzo-avviso > p { margin: 0 0 8px; font-size: 13.5px; font-weight: 600; color: var(--crema); }
.mazzo-avviso .bottone { margin-top: 10px; }

.cucina-piu { background: rgba(169, 188, 142, 0.16); border-color: var(--salvia); color: var(--salvia); font-weight: 600; }
.cucina-meno { background: rgba(193, 85, 61, 0.18); border-color: #8a4a38; color: #E59877; font-weight: 600; }
.cucina-neutro { color: var(--muto-caldo); }

/* ---------- 8. cuciniamo con ---------- */

.cuciniamo-con {
  margin: 12px 0 0;
  background: rgba(169, 188, 142, 0.12);
  border: 1px solid rgba(169, 188, 142, 0.5);
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 14px;
  font-weight: 600;
  color: var(--salvia);
}

/* ---------- riepilogo ---------- */

.passo-riepilogo { background: #332B24; border-color: #55483C; }

.riepilogo-tabella { margin-top: 12px; }

.riepilogo-riga {
  display: flex; gap: 12px;
  padding: 7px 0;
  border-bottom: 1px solid var(--bordo2);
  font-size: 14px;
}

.riepilogo-riga:last-child { border-bottom: none; }

.riepilogo-chiave { flex: none; width: 104px; color: var(--muto-caldo); font-weight: 600; font-size: 12.5px; text-transform: uppercase; letter-spacing: 0.4px; padding-top: 1px; }

.riepilogo-valore { flex: 1; min-width: 0; }

.genera-riga { margin-top: 14px; }

.bottone-grande { width: 100%; padding: 15px 18px; font-size: 17px; margin: 0; }

/* ---------- risultati ---------- */

.passo-risultato { background: #332B24; border-color: #55483C; }

.risultato-testa { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.risultato-testa .bottone { margin: 0; font-size: 13.5px; padding: 8px 12px; }

.avviso-aggiornamento {
  background: rgba(233, 196, 106, 0.12);
  border: 1px dashed var(--oro);
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 13.5px;
  color: #EFD9A0;
  margin-bottom: 12px;
}

/* ---------- il piano ---------- */

.piano-settimana { margin-bottom: 16px; }

.piano-settimana-testa {
  display: flex; justify-content: space-between; align-items: baseline; gap: 8px;
  border-bottom: 2px solid var(--oro);
  padding-bottom: 4px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}

.piano-settimana-titolo { font-family: Georgia, serif; font-weight: 700; font-size: 16.5px; }

.piano-settimana-date { font-size: 12.5px; color: var(--muto-caldo); }

.piano-giorno { padding: 8px 0; border-bottom: 1px solid var(--bordo2); }
.piano-giorno:last-child { border-bottom: none; }

.piano-giorno-testa { font-weight: 600; font-size: 14.5px; margin-bottom: 6px; }

.kcal-giorno { font-size: 11.5px; color: var(--muto-caldo); font-weight: 400; margin-left: 6px; }

.riga-pasto {
  display: flex; flex-direction: column; align-items: flex-start;
  width: 100%;
  background: var(--pozzo);
  border: 1px solid var(--bordo);
  border-radius: 10px;
  padding: 8px 12px;
  margin-bottom: 6px;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}

.riga-pasto:active { background: #2c211c; }

.riga-pasto-tipo { font-size: 11.5px; color: var(--muto-caldo); text-transform: uppercase; letter-spacing: 0.5px; }

.riga-pasto-nome { font-size: 15px; font-weight: 600; line-height: 1.3; }

.riga-pasto-badge {
  font-size: 11.5px;
  color: var(--oro);
  background: rgba(233, 196, 106, 0.14);
  border-radius: 5px;
  padding: 1px 7px;
  margin-top: 3px;
}

.riga-vuota { cursor: default; border-style: dashed; }
.riga-vuota .riga-pasto-nome { font-weight: 400; font-size: 13px; color: var(--muto-caldo); }

/* ---------- il piatto aperto ---------- */

#mpNome { margin: 2px 0 4px; font-family: Georgia, serif; font-size: 21px; }

.mp-badge {
  display: inline-block;
  font-size: 12px;
  color: var(--oro);
  background: rgba(233, 196, 106, 0.14);
  border-radius: 6px;
  padding: 2px 8px;
  margin: 0 0 6px;
}

.mp-tempo { margin: 0 0 4px; font-size: 14px; color: var(--crema); }

.mp-macro { margin: 0 0 8px; font-size: 13px; color: var(--muto-caldo); }

#mpFoto { margin: 4px 0 10px; }
#mpFoto img, #mpFoto svg {
  width: 100%; height: 190px;
  object-fit: cover;
  border-radius: 12px;
  display: block;
}

#mpPerQuanti { color: var(--muto-caldo); font-weight: 400; text-transform: none; letter-spacing: 0; font-size: 12px; }

.mp-ingredienti { list-style: none; margin: 0 0 12px; padding: 0; }

.mp-ingredienti li {
  display: flex; justify-content: space-between; gap: 10px;
  padding: 6px 0;
  border-bottom: 1px solid var(--bordo2);
  font-size: 14.5px;
}

.mp-ingredienti li:last-child { border-bottom: none; }

.mp-ing-qta { white-space: nowrap; font-weight: 600; color: var(--oro); }

.mp-ing-casa { color: var(--muto-caldo); font-weight: 400; font-size: 12.5px; }

.mp-passi { list-style: none; margin: 0; padding: 0; counter-reset: passo; }

.passo-cucina {
  counter-increment: passo;
  display: flex; align-items: flex-start; gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid var(--bordo2);
  font-size: 14.5px;
  cursor: pointer;
}

.passo-cucina:last-child { border-bottom: none; }

.passo-cucina::before {
  content: counter(passo);
  flex: none;
  width: 24px; height: 24px;
  border-radius: 50%;
  border: 1.5px solid var(--salvia);
  color: var(--salvia);
  font-size: 12.5px;
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}

.passo-cucina.fatto { color: var(--muto-caldo); text-decoration: line-through; }

.passo-cucina.fatto::before {
  background: var(--salvia);
  border-color: var(--salvia);
  color: var(--notte);
  content: "✓";
}

.modale-piedi-colonna { flex-direction: column; }
.modale-piedi-colonna .bottone { width: 100%; margin: 0; }

/* ---------- la spesa ---------- */

.bolla {
  border-radius: 12px;
  padding: 11px 14px;
  font-size: 14.5px;
  font-weight: 700;
  margin-bottom: 10px;
}

.bolla-verde { background: rgba(169, 188, 142, 0.14); border: 1.5px solid rgba(169, 188, 142, 0.55); color: #C9D8B2; }
.bolla-ambra { background: rgba(233, 196, 106, 0.12); border: 1.5px solid rgba(233, 196, 106, 0.55); color: #EFD9A0; }
.bolla-rossa { background: rgba(193, 85, 61, 0.16); border: 1.5px solid rgba(193, 85, 61, 0.55); color: #F0B49E; }

.totali {
  display: flex; gap: 10px;
  margin: 10px 0 2px;
}

.totale-primo, .totale-secondo {
  flex: 1;
  background: var(--pozzo);
  border: 1px solid var(--bordo);
  border-radius: 12px;
  padding: 10px 12px;
  text-align: center;
}

.totale-cifra { display: block; font-family: Georgia, serif; font-size: 23px; font-weight: 700; color: var(--oro); }

.totale-etichetta { display: block; font-size: 11.5px; color: var(--muto-caldo); text-transform: uppercase; letter-spacing: 0.4px; margin-top: 2px; }

.perche-link {
  display: block;
  background: none; border: none;
  color: var(--oro);
  font-size: 13px;
  text-decoration: underline;
  cursor: pointer;
  font-family: inherit;
  padding: 2px 0 4px;
}

.gruppo-reparto { margin-top: 16px; }

.reparto-titolo {
  margin: 0 0 4px;
  font-family: Georgia, serif;
  font-size: 16px;
  border-bottom: 2px solid #55483C;
  padding-bottom: 4px;
}

.riga-spesa {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid var(--bordo2);
}

.riga-spesa:last-child { border-bottom: none; }

.spunta-bottone {
  flex: none;
  width: 26px; height: 26px;
  margin-top: 1px;
  border-radius: 50%;
  border: 2px solid var(--salvia);
  background: transparent;
  color: var(--salvia);
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}

.riga-spesa-testo { flex: 1; min-width: 0; }

.riga-spesa-nome { display: block; font-size: 15px; font-weight: 600; line-height: 1.3; }

.riga-spesa-dettaglio { display: block; font-size: 12.5px; color: var(--muto-caldo); margin-top: 2px; }
.riga-spesa-dettaglio em { color: #E8B08A; font-style: normal; }

.riga-spesa-prezzo { flex: none; font-family: Georgia, serif; font-weight: 700; font-size: 15.5px; white-space: nowrap; color: var(--oro); }

.riga-spesa.fatta .spunta-bottone { background: var(--salvia); border-color: var(--salvia); color: var(--notte); }
.riga-spesa.fatta .riga-spesa-nome { text-decoration: line-through; color: var(--muto-caldo); }
.riga-spesa.fatta .riga-spesa-prezzo { color: var(--muto-caldo); }
.riga-spesa.scaffale { opacity: 0.65; }

.etichetta-offerta {
  display: inline-block;
  background: var(--oro);
  color: var(--notte);
  border-radius: 5px;
  font-size: 10.5px;
  font-weight: 700;
  padding: 1px 6px;
  margin-right: 4px;
  vertical-align: 1px;
}

.prezzo-barrato { text-decoration: line-through; color: var(--muto-caldo); font-weight: 400; font-size: 12px; }

/* proposte */

.proposte { margin-top: 16px; border-top: 2px dashed var(--bordo); padding-top: 12px; }

.proposta {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  font-size: 13.5px;
  padding: 7px 0;
  border-bottom: 1px solid var(--bordo2);
}

.proposta:last-child { border-bottom: none; }

/* ---------- la lista che si accende ---------- */

.luce-interruttore {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1.5px solid var(--bordo);
  background: var(--pozzo);
  color: var(--crema);
  border-radius: 999px;
  padding: 7px 13px 7px 9px;
  font-size: 13.5px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
}

.luce-pallino {
  width: 18px; height: 18px;
  border-radius: 50%;
  background: #51453a;
  border: 2px solid var(--bordo);
  transition: background 0.15s;
}

.luce-interruttore[aria-pressed="true"] {
  background: var(--oro);
  border-color: var(--oro);
  color: var(--notte);
}
.luce-interruttore[aria-pressed="true"] .luce-pallino { background: var(--notte); border-color: var(--notte); }

.luce-nota { margin: 0 0 4px; font-size: 12.5px; color: var(--muto-caldo); }

/* la superficie chiara del momento negozio */
#passo-spesa.luce-accesa {
  background: var(--crema-carta);
  border-color: #D9C6A8;
  color: var(--bruno);
}
#passo-spesa.luce-accesa .risultato-titolo { color: var(--bruno); }
#passo-spesa.luce-accesa .luce-nota { color: var(--muto-chiaro); }
#passo-spesa.luce-accesa .bolla-verde { background: #E7F1E3; border-color: #A9C89E; color: #2F6134; }
#passo-spesa.luce-accesa .bolla-ambra { background: #FDF3DD; border-color: var(--oro); color: #7A5B1E; }
#passo-spesa.luce-accesa .bolla-rossa { background: #F9E9E4; border-color: #E5B8AB; color: #A33B24; }
#passo-spesa.luce-accesa .totale-primo, #passo-spesa.luce-accesa .totale-secondo { background: #FFFDF6; border-color: #D9C6A8; }
#passo-spesa.luce-accesa .totale-cifra { color: var(--bruno); }
#passo-spesa.luce-accesa .totale-etichetta { color: var(--muto-chiaro); }
#passo-spesa.luce-accesa .negozio-totale { background: #FFFDF6; border-color: #D9C6A8; color: var(--bruno); }
#passo-spesa.luce-accesa .negozio-totale strong { color: var(--bruno); }
#passo-spesa.luce-accesa .perche-link { color: #A34A1F; }
#passo-spesa.luce-accesa .reparto-titolo { color: var(--bruno); border-bottom-color: var(--mattone); }
#passo-spesa.luce-accesa .riga-spesa { border-bottom-color: #E4D5BC; }
#passo-spesa.luce-accesa .riga-spesa-nome { color: var(--bruno); font-size: 17px; font-weight: 700; }
#passo-spesa.luce-accesa .riga-spesa-prezzo { color: var(--bruno); font-size: 22px; }
#passo-spesa.luce-accesa .riga-spesa-dettaglio { color: var(--muto-chiaro); font-size: 13px; }
#passo-spesa.luce-accesa .riga-spesa-dettaglio em { color: #A34A1F; }
#passo-spesa.luce-accesa .riga-spesa-perche { color: #A34A1F; }
#passo-spesa.luce-accesa .riga-spesa.fatta .riga-spesa-nome,
#passo-spesa.luce-accesa .riga-spesa.fatta .riga-spesa-prezzo { color: var(--muto-chiaro); }
#passo-spesa.luce-accesa .spunta-bottone { border-color: var(--verde-acceso); background: #FFFDF6; color: var(--verde-acceso); }
#passo-spesa.luce-accesa .riga-spesa.fatta .spunta-bottone { background: var(--verde-acceso); border-color: var(--verde-acceso); color: #fff; }
#passo-spesa.luce-accesa .etichetta-qualita { background: transparent; border-color: #D9C6A8; color: var(--muto-chiaro); }
#passo-spesa.luce-accesa .etichetta-voglia { background: #F7E3EC; border-color: #DDAEC6; color: #8E3157; }
#passo-spesa.luce-accesa .mini-bottone { background: #FFFDF6; border-color: #D9C6A8; color: var(--bruno); }
#passo-spesa.luce-accesa .proposta { color: var(--bruno); border-bottom-color: #E4D5BC; }
#passo-spesa.luce-accesa .passo-nota { color: var(--muto-chiaro); }

/* ---------- vista ricette ---------- */

.azioni-testa { margin: 2px 0 14px; }

.carta-ricetta {
  display: flex;
  gap: 12px;
  background: var(--tegame);
  border: 1px solid var(--bordo);
  border-radius: 12px;
  padding: 10px;
  margin-bottom: 10px;
  align-items: flex-start;
}

.carta-ricetta.esclusa { opacity: 0.55; }

.carta-ricetta-foto { flex: none; width: 72px; height: 72px; border-radius: 12px; overflow: hidden; background: var(--pozzo); }
.carta-ricetta-foto img, .carta-ricetta-foto svg { width: 100%; height: 100%; object-fit: cover; display: block; }

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

.carta-ricetta-nome { display: block; font-family: Georgia, serif; font-weight: 700; font-size: 16px; line-height: 1.25; }

.carta-ricetta-dettaglio { display: block; font-size: 12.5px; color: var(--muto-caldo); margin-top: 3px; }

.carta-ricetta-desc { display: block; font-size: 13px; margin-top: 5px; }

.carta-ricetta-nota { display: inline-block; font-size: 11.5px; color: var(--oro); background: rgba(233, 196, 106, 0.14); border-radius: 5px; padding: 1px 7px; margin-top: 6px; }

.carta-ricette-azioni { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }

/* ---------- bottoni ---------- */

.bottone {
  display: inline-block;
  border: 1.5px solid var(--bordo);
  background: var(--pozzo);
  color: var(--crema);
  border-radius: 10px;
  padding: 12px 16px;
  font-size: 15px;
  font-family: inherit;
  font-weight: 600;
  cursor: pointer;
  margin: 6px 8px 0 0;
}

.bottone-pieno { background: var(--terracotta); border-color: var(--terracotta); color: var(--notte); }
.bottone-pericolo { color: #E59877; border-color: #8a4a38; background: transparent; }
.bottone-linea { border-style: dashed; background: transparent; }

#vista-backup .bottone { display: block; width: 100%; margin: 8px 0 0; }

.mini-bottone {
  border: 1px solid var(--bordo);
  background: var(--pozzo);
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 13px;
  font-family: inherit;
  color: var(--crema);
  cursor: pointer;
}

/* ---------- aggiungi parola ---------- */

.aggiungi-filtro { display: flex; gap: 8px; margin-top: 10px; }

.aggiungi-filtro input {
  flex: 1;
  border: 1px solid var(--bordo);
  background: var(--pozzo);
  border-radius: 8px;
  padding: 9px 10px;
  font-size: 14px;
  font-family: inherit;
  color: var(--crema);
}

.aggiungi-filtro input:focus { outline: 2px solid var(--oro); }
.aggiungi-filtro .mini-bottone { flex: none; }

/* ---------- modali ---------- */

.modale {
  position: fixed; inset: 0;
  background: rgba(15, 7, 12, 0.62);
  display: flex; align-items: flex-end; justify-content: center;
  z-index: 40;
}

@media (min-width: 640px) { .modale { align-items: center; } }

.modale-card {
  background: var(--tegame2);
  border: 1px solid var(--bordo);
  border-radius: 16px 16px 0 0;
  width: 100%; max-width: 560px;
  max-height: 88vh;
  display: flex; flex-direction: column;
}

@media (min-width: 640px) { .modale-card { border-radius: 16px; } }

.modale-card-stretta { max-width: 420px; }

.modale-testa { display: flex; justify-content: space-between; align-items: center; padding: 16px 18px 10px; }

.modale-testa h2 { margin: 0; font-family: Georgia, serif; font-size: 19px; color: var(--crema); }

.modale-chiudi { border: none; background: none; font-size: 20px; color: var(--muto-caldo); cursor: pointer; padding: 4px 8px; }

.modale-corpo { padding: 4px 18px 12px; overflow-y: auto; }

.modale-testo { padding: 0 18px; font-size: 14.5px; color: var(--crema); }

.modale-piedi { display: flex; justify-content: flex-end; gap: 10px; padding: 12px 18px 18px; }
.modale-piedi .bottone { margin: 0; }

/* ---------- la nuvoletta: un foglietto illuminato ---------- */

#nuvolettaConfronto .modale-card { background: var(--crema); border-color: #D9C6A8; color: var(--bruno); }
#nuvolettaConfronto .modale-testa h2 { color: var(--bruno); }
#nuvolettaConfronto .modale-chiudi { color: var(--muto-chiaro); }
#nuvolettaConfronto .passo-nota { color: var(--muto-chiaro); }
#nuvolettaConfronto .nuvoletta-riga { border-bottom-color: #E4D5BC; }
#nuvolettaConfronto .nuvoletta-negozio { color: var(--bruno); }
#nuvolettaConfronto .nuvoletta-prodotto { color: #4A3F33; }
#nuvolettaConfronto .nuvoletta-dettaglio { color: var(--muto-chiaro); }
#nuvolettaConfronto .nuvoletta-prezzo { color: var(--bruno); font-size: 18px; }
#nuvolettaConfronto .nuvoletta-riga.scelta { background: #F0E4CC; }
#nuvolettaConfronto .mini-bottone { background: transparent; border-color: var(--muto-caldo); color: var(--bruno); }
#nuvolettaConfronto .bottone { background: transparent; border-color: var(--muto-caldo); color: var(--bruno); }

/* ---------- campi dell'editor ---------- */

.campo { display: block; margin-bottom: 12px; font-size: 14px; }
.campo > span { display: block; font-weight: 600; margin-bottom: 5px; }

.campo input[type="text"], .campo input[type="number"], .campo textarea {
  width: 100%;
  border: 1px solid var(--bordo);
  background: var(--pozzo);
  border-radius: 8px;
  padding: 10px;
  font-size: 15px;
  font-family: inherit;
  color: var(--crema);
}

.campo input:focus, .campo textarea:focus { outline: 2px solid var(--oro); }

.campo-riga { display: flex; gap: 10px; }
.campo-riga .campo { flex: 1; }

.foto-riga { display: flex; gap: 10px; align-items: stretch; }

.foto-box {
  width: 108px; height: 108px;
  border: 2px dashed var(--bordo);
  border-radius: 12px;
  background: var(--pozzo);
  overflow: hidden;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  padding: 0;
  font-family: inherit;
}

.foto-segnaposto { font-size: 11.5px; color: var(--muto-caldo); padding: 8px; text-align: center; }

.foto-box img { width: 100%; height: 100%; object-fit: cover; }

.riga-ingrediente { display: flex; gap: 6px; margin-bottom: 8px; align-items: center; }

.riga-ingrediente input, .riga-ingrediente select {
  border: 1px solid var(--bordo);
  background: var(--pozzo);
  border-radius: 8px;
  padding: 9px 8px;
  font-size: 14.5px;
  font-family: inherit;
  color: var(--crema);
}

.riga-ingrediente input:focus, .riga-ingrediente select:focus { outline: 2px solid var(--oro); }

.ing-nome { flex: 1; min-width: 0; }
.ing-qta { flex: none; width: 64px; text-align: center; }
.ing-unita { flex: none; width: 92px; }

.ing-togli { flex: none; border: none; background: none; color: var(--muto-caldo); font-size: 18px; cursor: pointer; padding: 4px; }

/* ---------- toast ---------- */

.toast {
  position: fixed;
  left: 50%; transform: translateX(-50%);
  bottom: calc(90px + env(safe-area-inset-bottom));
  background: var(--crema);
  color: var(--notte);
  border-radius: 10px;
  padding: 11px 16px;
  font-size: 14px;
  max-width: 88vw;
  z-index: 60;
  box-shadow: 0 4px 14px rgba(0,0,0,0.45);
}

/* ---------- navigazione ---------- */

.nav {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  background: #1E0E17;
  border-top: 1px solid var(--bordo);
  display: flex;
  justify-content: center;
  gap: 6px;
  padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
  z-index: 30;
}

.nav-bottone {
  border: none;
  background: none;
  color: var(--muto-caldo);
  font-family: Georgia, serif;
  font-size: 15px;
  padding: 8px 22px;
  border-radius: 10px;
  cursor: pointer;
}

.nav-bottone.attiva { background: #3A2A16; color: var(--oro); font-weight: 700; }

/* ---------- il mazzo delle ricette e il sistema dei pasti (aggiunte) ---------- */

.mazzo-ricetta-dettaglio { font-size: 12.5px; text-transform: none; letter-spacing: 0; }

.sistema-pasto {
  margin-top: 14px; padding-top: 12px; border-top: 2px dashed var(--bordo);
  text-align: left;
}
.sistema-riga { display: flex; gap: 8px; margin: 8px 0; flex-wrap: wrap; }
.sistema-azioni { align-items: center; }
.sistema-pasto select {
  flex: 1; min-width: 0; font: inherit; font-size: 14px; color: var(--crema);
  background: var(--pozzo); border: 1.5px solid var(--bordo); border-radius: 10px; padding: 9px 10px;
}
.mini-pericolo { color: #E59877; border-color: #8a4a38; }
.mini-pericolo:hover { background: rgba(193, 85, 61, 0.16); }

.riempi-bottone { flex: none; }
.riga-vuota { flex-direction: row; align-items: center; flex-wrap: wrap; gap: 6px 10px; }
.riga-vuota .riga-pasto-nome { flex: 1; min-width: 120px; }

.settimana-dopo {
  margin-top: 16px; padding: 14px; background: var(--pozzo);
  border: 1.5px solid var(--bordo); border-radius: 14px;
}
.settimana-dopo .sistema-azioni .bottone { flex: 1; min-width: 130px; }

/* ---------- le carte si trascinano davvero ---------- */

.mazzo-carta { cursor: grab; }
.mazzo-carta:active { cursor: grabbing; }

/* ---------- chips nel piatto aperto ---------- */

.mp-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.mp-chip {
  display: inline-block; font-size: 11.5px; padding: 3px 9px; border-radius: 999px;
  background: var(--pozzo); border: 1px solid var(--bordo); color: var(--muto-caldo);
}
.mp-chip-lavoro { background: rgba(169, 188, 142, 0.16); border-color: var(--salvia); color: var(--salvia); font-weight: 600; }
.mp-chip-allergene { background: rgba(201, 123, 74, 0.16); border-color: #7a4a2e; color: #E8B08A; }

.etichetta-lavoro {
  display: inline-block; font-size: 11px; padding: 1px 7px; border-radius: 5px;
  background: rgba(169, 188, 142, 0.16); color: var(--salvia); font-weight: 600;
}

/* ---------- modalità cottura ---------- */

.cottura {
  position: fixed; inset: 0; z-index: 60;
  display: flex; flex-direction: column;
  background: #1C0D15; color: var(--crema);
}
.cottura-testa {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  padding: 18px 18px 8px; font-family: Georgia, serif; font-size: 19px; font-weight: 700;
}
.cottura-testa .modale-chiudi { color: var(--muto-caldo); font-size: 24px; }
.cottura-corpo { flex: 1; min-height: 0; overflow-y: auto; padding: 10px 18px; }
.cottura-contatore { margin: 0 0 10px; font-size: 12.5px; color: var(--muto-caldo); text-transform: uppercase; letter-spacing: 0.6px; }
.cottura-passo {
  margin: 0; font-family: Georgia, serif; font-size: 24px; line-height: 1.45;
}
.cottura-ingredienti { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 18px; }
.cottura-ing {
  font-size: 12.5px; padding: 4px 10px; border-radius: 999px;
  background: #2F2420; color: #E8DCC4;
}
.cottura-piedi { display: flex; gap: 10px; padding: 12px 18px 6px; }
.cottura-piedi .bottone { flex: 1; margin: 0; background: transparent; border-color: #5A4D3A; color: var(--crema); }
.cottura-piedi .bottone-pieno { background: var(--terracotta); border-color: var(--terracotta); color: var(--notte); }
.cottura-piedi .bottone:disabled { opacity: 0.4; }
.cottura-nota { margin: 0; padding: 0 18px 16px; font-size: 12px; color: var(--muto-caldo); text-align: center; }

/* ---------- la voglia: un gesto, non un modulo ---------- */

.bottone-voglia {
  width: 100%; margin: 12px 0 0;
  background: var(--oro); border-color: var(--oro); color: var(--notte);
}

.voglia-riga { display: flex; gap: 8px; margin-bottom: 10px; }
.voglia-riga input {
  flex: 1; min-width: 0; font: inherit; font-size: 15px; color: var(--crema);
  background: var(--pozzo); border: 1.5px solid var(--bordo); border-radius: 10px; padding: 10px 12px;
}
.voglia-riga input:focus { outline: 2px solid var(--oro); }
.voglia-riga .bottone { flex: none; margin: 0; }
#voglieRapide { margin-bottom: 12px; }

.voglia-corsa {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  width: 100%; text-align: left; font: inherit; cursor: pointer;
  background: var(--pozzo); border: 1.5px solid var(--bordo); border-radius: 12px;
  padding: 10px 12px; margin-bottom: 8px;
}
.voglia-corsa:hover { background: #2c211c; }
.voglia-corsa-nome { display: block; font-weight: 600; font-size: 14.5px; color: var(--crema); }
.voglia-corsa-dettaglio { display: block; font-size: 12px; color: var(--muto-caldo); margin-top: 2px; }

/* ---------- la spesa raccontata e confrontata ---------- */

.riga-spesa { cursor: pointer; }
.riga-spesa.scaffale { cursor: default; }

.riga-spesa-perche { display: block; font-size: 11.5px; color: #E8B08A; margin-top: 3px; }

.etichetta-qualita {
  display: inline-block; font-size: 10.5px; padding: 0 6px; border-radius: 4px;
  background: transparent; color: var(--muto-caldo); border: 1px solid var(--bordo);
}
.etichetta-voglia {
  display: inline-block; font-size: 10.5px; padding: 0 6px; border-radius: 4px;
  background: rgba(230, 163, 192, 0.15); color: #E6A3C0; font-weight: 600; border: 1px solid rgba(230, 163, 192, 0.4);
}

.per-negozio { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 0; }
.negozio-totale {
  font-size: 12px; color: var(--crema); background: var(--pozzo);
  border: 1px solid var(--bordo); border-radius: 999px; padding: 4px 11px;
}
.negozio-totale strong { font-family: Georgia, serif; color: var(--oro); }

/* la nuvoletta di confronto */
.nuvoletta-riga {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  padding: 10px 2px; border-bottom: 1px solid var(--bordo2);
}
.nuvoletta-riga:last-of-type { border-bottom: none; }
.nuvoletta-riga.scelta { background: rgba(233, 196, 106, 0.12); border-radius: 10px; padding: 10px; }
.nuvoletta-testo { flex: 1; min-width: 0; }
.nuvoletta-negozio { display: block; font-weight: 700; font-size: 13.5px; }
.nuvoletta-prodotto { display: block; font-size: 12.5px; margin-top: 1px; }
.nuvoletta-dettaglio { display: block; font-size: 11.5px; color: var(--muto-caldo); margin-top: 2px; }
.nuvoletta-prezzo { flex: none; font-family: Georgia, serif; font-weight: 700; font-size: 15.5px; }
.nuvoletta-ripristina { width: 100%; margin: 10px 0 0; }

/* ---------- animazioni (tutte qui, tutte spegnibili) ---------- */

@keyframes bolla-pulse {
  0% { transform: scale(1); }
  35% { transform: scale(1.04); }
  70% { transform: scale(0.99); }
  100% { transform: scale(1); }
}
.bolla-pulse { animation: bolla-pulse 0.55s ease-in-out 1; }

@keyframes spunta-pop {
  0% { transform: scale(1); }
  45% { transform: scale(1.35); }
  100% { transform: scale(1); }
}
.spunta-bottone.pop { animation: spunta-pop 0.35s cubic-bezier(.2,.8,.3,1.4) 1; }

@media (prefers-reduced-motion: reduce) {
  #partenza { display: none; }
  .bolla-pulse, .spunta-bottone.pop { animation: none; }
  .mazzo-carta { touch-action: auto; }
  * { scroll-behavior: auto; }
}