/* Pasta Poco — stile «Mercato del mattino»: carta di giorno, prezzi netti,
   verde del banco per il via, giallo della tenda per l'evidenziatore.
   Nessuna risorsa esterna. Contrasti misurati (WCAG): inchiostro su latte
   14,1 · inchiostro su carta 13,0 · grigio salvia su latte 5,3 e su carta
   4,9 · verde scuro su latte 5,3 · bianco latte su verde 5,4 · rosso
   asciutto su latte 5,3 · inchiostro su tenda 9,0 · inchiostro su pesca
   8,5. Verde del banco e pomodoro pieno restano sulle superfici (3:1),
   mai sulle scritture piccole. */

:root {
  --carta: #F7F3EB;      /* il fondo della pagina: carta di giorno */
  --latte: #FFFDF9;      /* le carte */
  --notte: #F7F3EB;      /* compatibilità: il fondo della pagina */
  --tegame: #FFFDF9;     /* le carte */
  --tegame2: #FFFDF9;    /* le carte dentro le carte */
  --pozzo: #F2ECE1;      /* campi e input, un passo sotto il latte */
  --crema: #222A25;      /* il testo che conta: inchiostro */
  --inchiostro: #222A25; /* il testo che conta */
  --muto-caldo: #656B64; /* il testo che accompagna (5,3 su latte, 4,9 su carta) */
  --salvia: #1A7A42;     /* il sì, le spunte: verde scuro */
  --verde: #1A7A42;      /* il verde delle scritture (5,3:1) */
  --verde-banco: #3F8E4C;/* il verde pieno delle superfici */
  --verde-barra: #1F8A4C;/* il riempimento della barra budget (solo superficie) */
  --terracotta: #1A7A42; /* il bottone del via: verde del banco scuro */
  --rosso: #C93027;      /* il rosso asciutto delle scritture (5,3:1) */
  --mattone: #C93027;    /* l'allerta */
  --rosso-vivo: #D03626; /* il bottone della voglia (4,9 col bianco) */
  --pomodoro: #E8402C;   /* il rosso pieno, solo superfici */
  --oro: #F4C53F;        /* il giallo della tenda: badge e superfici */
  --tenda: #F4C53F;      /* il giallo della tenda */
  --evidenzia: #F8E3A8;  /* l'evidenziatore della voce che costa meno */
  --pesca: #FFB484;      /* i numeri del giro e le lavature calde */
  --bordo: #E6DFD2;      /* il filo quieto delle carte */
  --bordo2: #EDE7DB;     /* le righe sottili dentro le carte */
  --bordo-forte: #D9CDB8;/* il filo delle carte che contano di più */
  --bruno: #222A25;      /* il testo sul foglietto */
  --muto-chiaro: #656B64;/* i secondari sul foglietto */
  --verde-acceso: #1A7A42;/* le spunte piene */
  --verde-lava: #E7F1E3; --verde-bordo: #A9C89E; --verde-testo: #2F6134;
  --ambra-lava: #FDF3DD; --ambra-bordo: #E5C979; --ambra-testo: #7A5B1E;
  --rossa-lava: #F9E9E4; --rossa-bordo: #E5B8AB; --rossa-testo: #A33B24;
  --ombra: 0 2px 10px rgba(102, 89, 75, 0.14);
  --ombra-forte: 0 8px 26px rgba(102, 89, 75, 0.2);
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--carta);
  background-image: radial-gradient(1100px 640px at 50% -180px, rgba(255, 253, 249, 0.9), rgba(255, 253, 249, 0) 70%);
  background-repeat: no-repeat;
  color: var(--inchiostro);
  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: il segno di Gabriela, un momento ---------- */

#partenza {
  position: fixed; inset: 0; z-index: 90;
  background: var(--carta);
  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: min(72vw, 250px); height: auto;
  border-radius: 24px;
  box-shadow: var(--ombra);
}
@keyframes partenza-via { to { opacity: 0; visibility: hidden; } }

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

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

.testata-titolo { margin: 0; }

.testata-logo { width: min(64vw, 232px); height: auto; display: block; margin: 0 auto; }

.sottotitolo { margin: 6px 0 0; color: var(--rosso); font-size: 14px; font-weight: 600; }

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

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

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

.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(--pesca);
  color: var(--inchiostro);
  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(--inchiostro);
}

.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(--carta);
  color: var(--inchiostro);
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 15px;
  font-family: inherit;
  cursor: pointer;
}

.chip.attivo { background: var(--verde); border-color: var(--verde); color: var(--latte); font-weight: 600; }
.chip-piccolo { padding: 6px 11px; font-size: 13.5px; }
.chip-x { margin-left: 4px; font-size: 12px; }
.chip-toglibile { background: #FFEBDD; border-color: #E3B08C; color: #9C5A2E; }

/* ---------- 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(--inchiostro); }

.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(--inchiostro); }
.budget-etichetta strong { color: var(--verde); }

#budgetCursore { width: 100%; accent-color: var(--verde); 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(--inchiostro);
  background: var(--pozzo);
  border: 1px solid var(--bordo);
  border-radius: 10px;
  padding: 7px 10px;
}

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

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

.budget-anteprima { margin: 12px 0 0; font-size: 14px; color: var(--inchiostro); font-weight: 600; }
.budget-minimo { margin: 8px 0 0; font-size: 13px; color: var(--muto-caldo); }

/* ---------- 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(--carta);
  color: var(--inchiostro);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}

.passo-bottone:active { background: var(--verde); color: var(--latte); }

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

.interruttore {
  display: inline-flex; align-items: center; gap: 9px;
  border: 1.5px solid var(--bordo);
  background: var(--carta);
  color: var(--inchiostro);
  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: #C9C2B4;
  border: 2px solid var(--bordo-forte);
  transition: background 0.15s;
}

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

.obiettivi { margin-top: 14px; border-top: 1px dashed var(--bordo-forte); 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(--carta);
}

.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(--verde); font-weight: 600; text-transform: lowercase; }

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

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

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

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

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

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

.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(--carta);
  border-radius: 999px;
  padding: 10px 6px;
  font-size: 14.5px;
  font-weight: 600;
  font-family: inherit;
  color: var(--inchiostro);
  cursor: pointer;
}

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

.mazzo-avviso { background: var(--carta); 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(--inchiostro); }
.mazzo-avviso .bottone { margin-top: 10px; }

/* l'aiutino del mazzo: una targhetta scura che non copre i tocchi, sopra la carta */
#mazzoCucine, #mazzoRicette { position: relative; }
.mazzo-aiuto {
  position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
  z-index: 3; pointer-events: none; white-space: nowrap;
  background: var(--inchiostro); border: 1.5px solid var(--tenda); color: var(--latte);
  border-radius: 999px; padding: 6px 13px; font-size: 12.5px; font-weight: 600;
}
@keyframes mazzo-nudge {
  0% { transform: none; }
  30% { transform: translateX(48px) rotate(4deg); }
  62% { transform: translateX(-10px) rotate(-1.5deg); }
  100% { transform: none; }
}
.mazzo-carta.mazzo-aiuto-anima { animation: mazzo-nudge 1.3s ease-in-out 1; }

.cucina-piu { background: var(--verde-lava); border-color: var(--verde-bordo); color: var(--verde); font-weight: 600; }
.cucina-meno { background: var(--rossa-lava); border-color: var(--rossa-bordo); color: var(--rossa-testo); font-weight: 600; }
.cucina-neutro { color: var(--muto-caldo); }

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

.cuciniamo-con {
  margin: 12px 0 0;
  background: var(--verde-lava);
  border: 1px solid var(--verde-bordo);
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 14px;
  font-weight: 600;
  color: var(--verde);
}

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

.passo-riepilogo { background: var(--latte); border-color: var(--bordo-forte); }

.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: var(--latte); border-color: var(--bordo-forte); }

.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: var(--ambra-lava);
  border: 1px dashed var(--ambra-bordo);
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 13.5px;
  color: var(--ambra-testo);
  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(--verde-banco);
  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(--carta);
  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: #EFE7DA; }

.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(--ambra-testo);
  background: var(--evidenzia);
  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(--ambra-testo);
  background: var(--evidenzia);
  border-radius: 6px;
  padding: 2px 8px;
  margin: 0 0 6px;
}

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

.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(--inchiostro); }

.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(--verde);
  color: var(--verde);
  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(--verde);
  border-color: var(--verde);
  color: var(--latte);
  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: var(--verde-lava); border: 1.5px solid var(--verde-bordo); color: var(--verde-testo); }
.bolla-ambra { background: var(--ambra-lava); border: 1.5px solid var(--ambra-bordo); color: var(--ambra-testo); }
.bolla-rossa { background: var(--rossa-lava); border: 1.5px solid var(--rossa-bordo); color: var(--rossa-testo); }

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

.totale-primo, .totale-secondo {
  flex: 1;
  background: var(--carta);
  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(--inchiostro); }

.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(--verde);
  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 var(--verde-banco);
  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(--verde);
  background: transparent;
  color: var(--verde);
  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: 17px; font-weight: 700; line-height: 1.3; color: var(--inchiostro); }

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

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

.riga-spesa.fatta .spunta-bottone { background: var(--verde); border-color: var(--verde); color: var(--latte); }
.riga-spesa.fatta .riga-spesa-nome { text-decoration: line-through; color: var(--muto-caldo); }
.riga-spesa.fatta .riga-spesa-prezzo { color: var(--muto-caldo); font-size: 16px; }
.riga-spesa.scaffale { opacity: 0.65; }

.etichetta-offerta {
  display: inline-block;
  background: var(--tenda);
  color: var(--inchiostro);
  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-forte); 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; }

/* il conto del piano: lo stesso numero della lista, anche qui */
.piano-conto {
  display: inline-block;
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 13.5px;
  font-weight: 700;
  margin: 0 0 12px;
}
.piano-conto-verde { background: var(--verde-lava); color: var(--verde-testo); border: 1px solid var(--verde-bordo); }
.piano-conto-ambra { background: var(--ambra-lava); color: var(--ambra-testo); border: 1px solid var(--ambra-bordo); }
.piano-conto-rossa { background: var(--rossa-lava); color: var(--rossa-testo); border: 1px solid var(--rossa-bordo); }

/* come rientrare nel budget */
.proposte-testa { margin: 2px 0 8px; font-size: 14px; font-weight: 700; color: var(--inchiostro); }
.proposte-nota { margin: 2px 0 8px; font-size: 13px; color: var(--verde-testo); }
.sistema-tutto { display: block; width: 100%; margin-top: 12px; }

/* il budget che non basta: detto chiaro, con le strade */
.impossibile {
  background: var(--rossa-lava);
  border: 1px solid var(--rossa-bordo);
  border-radius: 12px;
  padding: 12px 14px;
  font-size: 13.5px;
  color: var(--rossa-testo);
}
.impossibile-titolo { margin: 0 0 6px; font-weight: 800; font-size: 15px; }
.impossibile p { margin: 0 0 8px; }
.impossibile strong { color: var(--rosso); }
.percorso {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  padding: 7px 0;
  border-top: 1px solid var(--rossa-bordo);
  font-size: 13.5px;
}

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

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

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

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

.carta-ricetta-foto { flex: none; width: 72px; height: 72px; border-radius: 12px; overflow: hidden; background: var(--carta); }
.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(--ambra-testo); background: var(--evidenzia); 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(--carta);
  color: var(--inchiostro);
  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(--verde); border-color: var(--verde); color: var(--latte); }
.bottone-pericolo { color: var(--rossa-testo); border-color: var(--rossa-bordo); 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(--carta);
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 13px;
  font-family: inherit;
  color: var(--inchiostro);
  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(--inchiostro);
}

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

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

.modale {
  position: fixed; inset: 0;
  background: rgba(34, 42, 37, 0.45);
  display: flex; align-items: flex-end; justify-content: center;
  z-index: 40;
}

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

.modale-card {
  background: var(--latte);
  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(--inchiostro); }

.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(--inchiostro); }

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

/* ---------- la nuvoletta: il foglietto del confronto ---------- */

#nuvolettaConfronto .modale-card { background: var(--latte); border-color: var(--bordo); color: var(--inchiostro); }
#nuvolettaConfronto .modale-testa h2 { color: var(--inchiostro); }
#nuvolettaConfronto .modale-chiudi { color: var(--muto-caldo); }
#nuvolettaConfronto .passo-nota { color: var(--muto-caldo); }
#nuvolettaConfronto .nuvoletta-riga { border-bottom-color: var(--bordo2); }
#nuvolettaConfronto .nuvoletta-negozio { color: var(--inchiostro); }
#nuvolettaConfronto .nuvoletta-prodotto { color: var(--inchiostro); }
#nuvolettaConfronto .nuvoletta-dettaglio { color: var(--muto-caldo); }
#nuvolettaConfronto .nuvoletta-prezzo { color: var(--inchiostro); font-size: 18px; }
#nuvolettaConfronto .nuvoletta-riga.scelta { background: var(--evidenzia); }
#nuvolettaConfronto .mini-bottone { background: transparent; border-color: var(--bordo-forte); color: var(--inchiostro); }
#nuvolettaConfronto .bottone { background: transparent; border-color: var(--bordo-forte); color: var(--inchiostro); }

/* ---------- 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(--inchiostro);
}

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

.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-forte);
  border-radius: 12px;
  background: var(--carta);
  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(--inchiostro);
}

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

.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(--inchiostro);
  color: var(--latte);
  border-radius: 10px;
  padding: 11px 16px;
  font-size: 14px;
  max-width: 88vw;
  z-index: 60;
  box-shadow: var(--ombra-forte);
}

/* ---------- la conferma della spesa finita: la manina di Gabriela ---------- */

.spesa-fatto {
  position: fixed;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  z-index: 55;
  background: var(--latte);
  border: 1px solid var(--bordo);
  border-radius: 18px;
  padding: 18px 30px 16px;
  text-align: center;
  box-shadow: var(--ombra-forte);
  animation: spesa-fatto-pop 0.28s cubic-bezier(.2, .8, .3, 1.2) 1;
}
.spesa-fatto img { width: 78px; height: 78px; display: block; margin: 0 auto 4px; }
.spesa-fatto p { margin: 0; font-family: Georgia, serif; font-size: 17px; font-weight: 700; color: var(--inchiostro); }

@keyframes spesa-fatto-pop {
  0% { transform: translate(-50%, -50%) scale(0.9); opacity: 0; }
  100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}

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

.nav {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  background: rgba(255, 253, 249, 0.96);
  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: var(--verde-lava); color: var(--verde); 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-forte);
  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(--inchiostro);
  background: var(--pozzo); border: 1.5px solid var(--bordo); border-radius: 10px; padding: 9px 10px;
}
.mini-pericolo { color: var(--rossa-testo); border-color: var(--rossa-bordo); }
.mini-pericolo:hover { background: var(--rossa-lava); }

.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(--carta);
  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(--carta); border: 1px solid var(--bordo); color: var(--muto-caldo);
}
.mp-chip-lavoro { background: var(--verde-lava); border-color: var(--verde-bordo); color: var(--verde); font-weight: 600; }
.mp-chip-allergene { background: #FFEBDD; border-color: #E3B08C; color: #9C5A2E; }

.etichetta-lavoro {
  display: inline-block; font-size: 11px; padding: 1px 7px; border-radius: 5px;
  background: var(--verde-lava); color: var(--verde); font-weight: 600;
}

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

.cottura {
  position: fixed; inset: 0; z-index: 60;
  display: flex; flex-direction: column;
  background: var(--carta); color: var(--inchiostro);
}
.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: var(--latte); color: var(--inchiostro); border: 1px solid var(--bordo);
}
.cottura-piedi { display: flex; gap: 10px; padding: 12px 18px 6px; }
.cottura-piedi .bottone { flex: 1; margin: 0; background: transparent; border-color: var(--bordo-forte); color: var(--inchiostro); }
.cottura-piedi .bottone-pieno { background: var(--verde); border-color: var(--verde); color: var(--latte); }
.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(--rosso-vivo); border-color: var(--rosso-vivo); color: var(--latte);
}

.voglia-riga { display: flex; gap: 8px; margin-bottom: 10px; }
.voglia-riga input {
  flex: 1; min-width: 0; font: inherit; font-size: 15px; color: var(--inchiostro);
  background: var(--pozzo); border: 1.5px solid var(--bordo); border-radius: 10px; padding: 10px 12px;
}
.voglia-riga input:focus { outline: 2px solid var(--verde); }
.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(--carta); border: 1.5px solid var(--bordo); border-radius: 12px;
  padding: 10px 12px; margin-bottom: 8px;
}
.voglia-corsa:hover { background: #EFE7DA; }
.voglia-corsa-nome { display: block; font-weight: 600; font-size: 14.5px; color: var(--inchiostro); }
.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: #A34A1F; 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: #FDE5DA; color: #9C4A26; font-weight: 600; border: 1px solid #EBB89A;
}

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

/* 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: var(--evidenzia); 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.mazzo-aiuto-anima { animation: none; }
  .mazzo-carta { touch-action: auto; }
  .spesa-fatto { animation: none; }
  * { scroll-behavior: auto; }
}

/* ---------- le sei migliorie: in casa, prezzi, modalità spesa, archivio, condivisione, cucino ---------- */

.azioni-spesa {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin: 14px 0 2px;
}
.azioni-spesa .bottone { margin: 0; font-size: 13.5px; padding: 8px 12px; }

/* il prezzo si tocca e si corregge */
button.riga-spesa-prezzo {
  background: none; border: none; padding: 2px 0 2px 4px; margin: 0;
  font: inherit; cursor: pointer; letter-spacing: inherit;
  border-bottom: 1.5px dashed rgba(34, 42, 37, 0.35);
}
.riga-spesa-prezzo:active { opacity: 0.7; }

.etichetta-corretto {
  display: inline-block; font-size: 10.5px; padding: 0 6px; border-radius: 4px;
  background: var(--verde-lava); color: var(--verde-testo); font-weight: 600; border: 1px solid var(--verde-bordo);
}

.bottone-incasa { white-space: nowrap; }

.riga-spesa.incasa { cursor: default; opacity: 0.75; }
.riga-spesa.incasa .riga-spesa-nome { color: var(--verde); text-decoration: none; }

/* la barra e i bottoni grandi di «sto facendo la spesa» */
.sm-barra {
  position: sticky; top: 8px; z-index: 6;
  display: flex; flex-direction: column; gap: 2px;
  border-radius: 14px; padding: 12px 14px;
  margin: 4px 0 14px;
  background: var(--latte);
  border: 1px solid var(--bordo);
  box-shadow: var(--ombra-forte);
}
.sm-barra-cifra { font-family: Georgia, serif; font-weight: 700; font-size: 19px; }
.sm-barra-frase { font-size: 12.5px; color: var(--muto-caldo); }
.sm-fine { align-self: flex-end; margin-top: -30px; }
.sm-barra.sm-verde { border-color: var(--verde-bordo); background: var(--verde-lava); }
.sm-barra.sm-verde .sm-barra-cifra { color: var(--verde-testo); }
.sm-barra.sm-ambra { border-color: var(--ambra-bordo); background: var(--ambra-lava); }
.sm-barra.sm-ambra .sm-barra-cifra { color: var(--ambra-testo); }
.sm-barra.sm-rossa { border-color: var(--rossa-bordo); background: var(--rossa-lava); }
.sm-barra.sm-rossa .sm-barra-cifra { color: var(--rossa-testo); }

.sm-gruppo { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.sm-riga {
  display: flex; align-items: center; gap: 12px; width: 100%;
  background: var(--latte); border: 1.5px solid var(--bordo); border-radius: 14px;
  padding: 14px 12px; color: var(--inchiostro); font: inherit; text-align: left; cursor: pointer;
}
.sm-riga:active { transform: scale(0.99); }
.sm-riga-quadro {
  flex: none; width: 32px; height: 32px; border-radius: 9px;
  border: 2px solid var(--verde); color: var(--verde);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 17px; font-weight: 700;
}
.sm-riga-testo { flex: 1; min-width: 0; }
.sm-riga-nome { display: block; font-size: 16px; font-weight: 600; line-height: 1.25; }
.sm-riga-dettaglio { display: block; font-size: 12.5px; color: var(--muto-caldo); margin-top: 2px; }
.sm-riga-prezzo { flex: none; font-family: Georgia, serif; font-weight: 700; font-size: 16px; color: var(--inchiostro); white-space: nowrap; }
.sm-riga.comprata { opacity: 0.72; border-color: var(--bordo); background: var(--carta); }
.sm-riga.comprata .sm-riga-nome { text-decoration: line-through; color: var(--muto-caldo); }
.sm-riga.comprata .sm-riga-quadro { background: var(--verde); border-color: var(--verde); color: var(--latte); }
.sm-casa { opacity: 0.7; }
.sm-riga-casa { cursor: default; opacity: 0.85; }
.sm-riga-casa .sm-riga-quadro { background: var(--verde); border-color: var(--verde); color: var(--latte); }

/* l'archivio delle settimane */
.piani-contatore {
  font-size: 11.5px; color: var(--muto-caldo);
  border: 1px solid var(--bordo); border-radius: 999px; padding: 3px 10px; white-space: nowrap;
}
.piano-salvato {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 2px; border-bottom: 1px solid var(--bordo2);
}
.piano-salvato:last-child { border-bottom: none; }
.piano-salvato.attuale { border-left: 3px solid var(--verde); padding-left: 10px; }
.piano-salvato-testo { flex: 1; min-width: 0; }
.piano-salvato-nome { display: block; font-size: 15px; font-weight: 600; line-height: 1.3; }
.piano-salvato-dettaglio { display: block; font-size: 12.5px; color: var(--muto-caldo); margin-top: 2px; }
.piano-salvato-azioni { flex: none; display: flex; gap: 6px; }

/* cosa cucino con quello che ho */
.cucino-carta {
  display: flex; align-items: center; gap: 12px;
  background: var(--latte); border: 1.5px solid var(--bordo); border-radius: 14px;
  padding: 10px 12px; margin-top: 8px;
}
.cucino-carta.li-usa-tutti { border-color: var(--ambra-bordo); }
.cucino-carta-foto { flex: none; width: 54px; height: 54px; border-radius: 10px; overflow: hidden; }
.cucino-carta-foto img, .cucino-carta-foto svg { width: 100%; height: 100%; object-fit: cover; display: block; }
.cucino-carta-testo { flex: 1; min-width: 0; }
.cucino-carta-nome { display: block; font-size: 15px; font-weight: 600; line-height: 1.3; }
.cucino-carta-dettaglio { display: block; font-size: 12.5px; color: var(--muto-caldo); margin-top: 2px; }
.cucino-badge {
  display: inline-block; margin-top: 5px;
  background: var(--tenda); color: var(--inchiostro);
  border-radius: 5px; font-size: 10.5px; font-weight: 700; padding: 1px 7px;
}

/* il testo da copiare a mano */
#mtlTesto {
  width: 100%; min-height: 240px; resize: vertical;
  background: var(--pozzo); color: var(--inchiostro);
  border: 1px solid var(--bordo); border-radius: 10px;
  font: inherit; font-size: 13.5px; padding: 10px 12px;
}

/* il foglio di stampa: bianco, una colonna, caselle per spuntare */
#foglioSpesa { display: none; }

@media print {
  body > *:not(#foglioSpesa) { display: none !important; }
  body { background: #fff; color: #000; padding: 0; }
  #foglioSpesa {
    display: block !important;
    background: #fff; color: #000;
    font-family: Georgia, "Times New Roman", serif;
    padding: 0 4mm; max-width: 100%;
  }
  #foglioSpesa h2 { font-size: 20pt; margin: 0 0 2mm; }
  #foglioSpesa h3 { font-size: 13pt; margin: 6mm 0 2mm; border-bottom: 1.5pt solid #000; padding-bottom: 1mm; }
  .foglio-data { font-size: 10.5pt; color: #444; margin: 0 0 4mm; }
  .foglio-riga {
    display: flex; align-items: baseline; gap: 4mm;
    font-size: 12pt; padding: 2.6mm 0; border-bottom: 0.5pt solid #bbb;
    page-break-inside: avoid;
  }
  .foglio-check {
    flex: none; width: 5mm; height: 5mm; border: 1.5pt solid #000; border-radius: 1mm;
    align-self: center;
  }
  .foglio-nome { flex: none; font-weight: 700; }
  .foglio-dettaglio { color: #333; font-size: 10.5pt; }
  .foglio-totale { font-size: 12pt; margin-top: 6mm; font-weight: 700; }
}

.etichetta-attuale {
  display: inline-block; font-size: 10.5px; padding: 0 6px; border-radius: 4px;
  background: var(--evidenzia); color: var(--ambra-testo); font-weight: 600; border: 1px solid var(--ambra-bordo);
}