:root {
  /* palette PizzaCalda (brand/elementi_grafici): rosso, panna, giallo, quasi-nero. Stato: ok = panna e inchiostro, sotto scorta = giallo, ordina = rosso */
  --sfondo: #f4e7ce; --carta: #fffaf0; --testo: #1f1f1f; --tenue: #5b4a3a; --linea: #dccaa6;
  --marchio: #b00002; --marchio-chiaro: #f6d9cf;
  --ok: #1f1f1f; --ok-chiaro: #ffe9a8; --sotto: #6b4a00; --sotto-chiaro: #ffd34a;
  --rosso: #b00002; --rosso-chiaro: #f9d6d0; --grigio-chiaro: #eadbb9; --wa: #ffd34a;
  --titoli: Impact, "Arial Narrow Bold", "Archivo Black", "Arial Black", sans-serif;
}
* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
html { -webkit-text-size-adjust: 100%; }
body { font-family: Archivo, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; font-size: 17px; line-height: 1.35;
  background: var(--sfondo); color: var(--testo); overscroll-behavior-y: contain; }
button, input { font: inherit; color: inherit; }
button, a.tasto { cursor: pointer; touch-action: manipulation; } /* niente zoom col doppio tocco: due tocchi = due tocchi */
[hidden] { display: none !important; }

/* testata */
.testata { position: sticky; top: 0; z-index: 10; background: var(--marchio); color: #fff;
  padding: calc(8px + env(safe-area-inset-top)) 16px 0; box-shadow: 0 2px 6px rgba(0,0,0,.15); }
.testata-riga, .schede, .corpo, .barra-dentro { max-width: 680px; margin: 0 auto; }
.testata-riga { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 8px; }
h1 { font-family: var(--titoli); font-size: 24px; font-weight: 400; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; color: var(--sotto-chiaro); }
.sync { font-size: 13px; font-weight: 700; padding: 5px 9px; border-radius: 8px; background: rgba(255,255,255,.18); text-align: right; min-width: 0; }
.sync.attesa { background: var(--sotto-chiaro); color: var(--testo); }
.sync.offline, .sync.errore { background: var(--rosso-chiaro); color: var(--rosso); flex-basis: 100%; text-align: left; font-size: 14px; }
.schede { display: flex; gap: 4px; margin-top: 8px; }
.scheda { min-height: 48px; border: 0; border-radius: 10px 10px 0 0; background: rgba(255,255,255,.15); color: #fff;
  font-weight: 800; letter-spacing: .02em; }
.scheda.principale { flex: 1; font-size: 18px; }
.scheda.discreta { flex: 0 0 auto; padding: 0 14px; font-size: 14px; font-weight: 600; background: rgba(255,255,255,.08); }
.scheda.attiva { background: var(--sfondo); color: var(--marchio); }
.bollino { display: inline-block; min-width: 24px; padding: 1px 7px; border-radius: 12px; background: var(--rosso); color: #fff; font-size: 13px; }

/* spazio in fondo per la barra fissa di INVIA LISTA (tasto 64 + stato + margini) */
.corpo { padding: 12px 16px calc(130px + env(safe-area-inset-bottom)); }

/* INVIA LISTA: barra fissa in basso, sopra la barra del browser e il bordo del telefono */
.barra-invio { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; background: var(--carta);
  padding: 10px 16px calc(8px + env(safe-area-inset-bottom)); box-shadow: 0 -3px 12px rgba(0,0,0,.18); }
.tasto.invia { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 64px; background: var(--wa);
  color: var(--testo); border: 3px solid var(--marchio); font-family: var(--titoli); font-size: 26px; font-weight: 400; letter-spacing: .06em; text-transform: uppercase; text-decoration: none; }
.tasto.invia[disabled] { opacity: .45; }
.stato-invio { margin-top: 6px; text-align: center; font-size: 15px; font-weight: 700; color: var(--tenue); min-height: 1.3em; }

/* finestre in pagina (niente alert del browser) */
.velo { position: fixed; inset: 0; z-index: 60; background: rgba(31,31,31,.6); display: flex; align-items: flex-end; justify-content: center;
  padding: 16px 16px calc(16px + env(safe-area-inset-bottom)); }
.finestra { width: 100%; max-width: 520px; background: var(--carta); border-radius: 18px; padding: 20px 16px 16px; }
.finestra-titolo { font-size: 22px; font-weight: 900; line-height: 1.25; }
.finestra .fila-tasti .tasto { min-height: 64px; font-size: 20px; }
.finestra.inviata { text-align: center; border-top: 8px solid var(--sotto-chiaro); }
.finestra.inviata .finestra-titolo { font-family: var(--titoli); font-weight: 400; text-transform: uppercase; font-size: 30px; color: var(--marchio); }
.finestra-ora { font-size: 20px; font-weight: 800; margin: 4px 0 8px; }
.inviata-parti .tasto, .finestra.inviata > .tasto { width: 100%; margin-top: 10px; }
.inviata-parti .tasto.secondario { display: flex; align-items: center; justify-content: center; text-decoration: none; }

/* guida a due passi e sezioni di CONTA */
.guida { display: flex; flex-wrap: wrap; gap: 8px 22px; padding: 12px; margin-bottom: 14px; border-radius: 14px;
  background: var(--carta); border: 2px solid var(--marchio); font-size: 19px; font-weight: 800; }
.guida-passo { display: flex; align-items: center; gap: 10px; }
.guida .passo { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%;
  background: var(--marchio); color: #fff; font-size: 18px; }
.sezione { font-family: var(--titoli); font-weight: 400; letter-spacing: .03em; text-transform: uppercase; display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: 21px; margin: 4px 0 8px; }
.sezione-conto { font-size: 15px; color: var(--tenue); white-space: nowrap; }
.tutto-ok { background: var(--ok-chiaro); border: 3px solid var(--marchio); color: var(--testo); }
.tutto-ok b { display: block; font-size: 22px; margin-bottom: 4px; }
.altri { margin-top: 18px; }
.altri > summary { min-height: 56px; display: flex; align-items: center; padding: 10px 12px; border-radius: 12px; background: var(--grigio-chiaro);
  color: var(--testo); font-size: 18px; font-weight: 800; }
.altri > .nota { margin: 8px 0 0; }
.stato-fisso { margin: -4px 0 12px; padding: 10px 12px; border-radius: 12px; background: var(--ok-chiaro); color: var(--testo);
  font-size: 18px; font-weight: 800; }
.cosa-contare { margin-top: 6px; padding: 6px 10px; border-radius: 8px; background: var(--sotto-chiaro); color: var(--testo);
  font-size: 17px; font-weight: 800; }

/* prodotto a contenitori (basi): un contatore per contenitore e il totale */
.composto { margin-top: 8px; }
.comp-riga { display: flex; align-items: center; gap: 6px; margin-top: 6px; }
.comp-nome { flex: 1; min-width: 0; font-size: 16px; font-weight: 700; }
.comp-riga .qb { width: 56px; height: 56px; }
.comp-riga .numero { flex: 0 0 76px; height: 56px; font-size: 24px; }
.comp-fondo { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.comp-totale { flex: 1; font-size: 18px; font-weight: 800; }

.numero:focus { outline: none; border-color: var(--marchio); }
.errore { color: var(--rosso); font-weight: 700; min-height: 1.2em; }

/* tasti */
.tasto { min-height: 56px; padding: 12px 16px; border: 0; border-radius: 12px; font-size: 18px; font-weight: 800; }
.tasto:active, .qb:active { transform: scale(.97); }
.primario { background: var(--marchio); color: #fff; }
.secondario { background: var(--grigio-chiaro); color: var(--testo); }
.tasto[disabled] { opacity: .5; }
.fila-tasti { display: flex; gap: 8px; margin-top: 10px; }
.fila-tasti > * { flex: 1; }

/* CONTA */
.zona { display: flex; justify-content: space-between; align-items: center; margin: 12px 0 6px; padding: 6px 12px;
  border-radius: 10px; background: var(--marchio-chiaro); color: var(--marchio); font-weight: 800; font-size: 14px; text-transform: uppercase; }
.riga { background: var(--carta); border-radius: 12px; padding: 12px; margin-bottom: 8px; border-left: 6px solid var(--grigio-chiaro); }
.riga.st-ok { border-left-color: var(--ok); }
.riga.st-sotto { border-left-color: var(--sotto-chiaro); }
.riga.st-ordina_ora { border-left-color: var(--rosso); }
.riga.contata { background: var(--ok-chiaro); }
.riga.contata .nome::before { content: "✓ "; color: var(--ok); }
.riga-testa { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.nome { font-size: 18px; font-weight: 800; }
.badge { flex-shrink: 0; font-size: 13px; font-weight: 800; padding: 4px 9px; border-radius: 14px; background: var(--grigio-chiaro); }
.badge.st-ok { background: var(--ok-chiaro); color: var(--ok); }
.badge.st-sotto { background: var(--sotto-chiaro); color: var(--sotto); }
.badge.st-ordina_ora { background: var(--rosso); color: #fff; }
.info { color: var(--tenue); font-size: 14px; margin-top: 2px; }
.controlli { display: flex; align-items: stretch; gap: 6px; margin-top: 8px; }
.qb { width: 58px; height: 60px; border: 0; border-radius: 12px; font-size: 30px; font-weight: 800; flex-shrink: 0; }
.qb.meno { background: var(--rosso-chiaro); color: var(--rosso); }
.qb.piu { background: var(--sotto-chiaro); color: var(--testo); }
.numero { width: 100%; min-width: 0; flex: 1; height: 60px; text-align: center; font-size: 26px; font-weight: 800;
  border: 2px solid var(--linea); border-radius: 12px; background: #fff; }
.numero.sbagliato { border-color: var(--rosso); background: var(--rosso-chiaro); }
.ieri { flex: 0 0 116px; min-height: 60px; border: 0; border-radius: 12px; background: var(--marchio); color: #fff;
  display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.1; }
.ieri span { font-size: 18px; font-weight: 800; }
.ieri b { font-size: 20px; }
.ieri[disabled] { background: var(--grigio-chiaro); color: var(--tenue); }
.riga.contata .ieri { background: #b8a07a; }
.salvataggio { font-size: 14px; font-weight: 700; margin-top: 6px; }
.salvataggio.attesa { color: var(--sotto); }
.salvataggio.fatto { color: var(--ok); }
.salvataggio.errore { color: var(--rosso); }
.conferma { margin-top: 10px; padding: 10px; border-radius: 10px; background: var(--sotto-chiaro); border: 2px solid var(--marchio); }
.conferma p { font-weight: 700; }

/* LISTA */
.avvisi { background: var(--rosso-chiaro); border: 2px solid var(--rosso); border-radius: 12px; padding: 10px 12px; margin-bottom: 12px; }
.avvisi h2 { font-size: 16px; color: var(--rosso); margin-bottom: 4px; }
.avviso { padding: 6px 0; border-top: 1px solid rgba(176,0,2,.2); font-weight: 600; }
.avviso:first-of-type { border-top: 0; }
.avviso.medio { color: var(--testo); font-weight: 500; }
.carta { background: var(--carta); border-radius: 14px; padding: 12px; margin-bottom: 12px; }
.carta.urgente { border: 3px solid var(--marchio); }
.carta h2 { font-size: 19px; }
.carta .sotto-titolo { color: var(--tenue); font-size: 14px; margin-top: 2px; }
.etichetta { display: inline-block; font-size: 12px; font-weight: 800; padding: 3px 8px; border-radius: 10px; margin-left: 6px; vertical-align: middle; }
.etichetta.ora { background: var(--marchio); color: #fff; }
.etichetta.prom { background: var(--grigio-chiaro); }
.etichetta.ripiego { background: var(--sotto-chiaro); color: var(--testo); }
.etichetta.stima { background: var(--sotto-chiaro); color: var(--testo); }
.ordinato { margin-top: 8px; padding: 8px 10px; border-radius: 10px; background: var(--ok-chiaro); color: var(--ok); font-weight: 700; }
.voce { padding: 10px 0; border-top: 1px solid var(--linea); }
.voce:first-of-type { border-top: 0; }
.voce-testa { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.voce-nome { font-weight: 800; }
.voce-qta { font-size: 20px; font-weight: 800; white-space: nowrap; }
.perche { font-size: 14px; color: var(--tenue); margin-top: 2px; }
.vuoto { color: var(--tenue); padding: 6px 0; }
.pannello { margin-top: 10px; padding: 10px; border-radius: 10px; background: #fff; border: 2px solid var(--linea); }
.pannello h3 { font-size: 16px; margin-bottom: 6px; }
.pannello-riga { display: flex; align-items: center; gap: 8px; padding: 4px 0; }
.pannello-riga span { flex: 1; font-weight: 700; }
.pannello-riga .numero { flex: 0 0 96px; height: 50px; font-size: 22px; }
details summary { min-height: 44px; padding: 10px 0; font-weight: 700; color: var(--marchio); }
.formato-riga { display: flex; gap: 8px; margin-top: 8px; }
.formato-riga .numero { flex: 0 0 110px; }
.nota { font-size: 14px; color: var(--tenue); margin-bottom: 6px; }

/* STATO */
.riquadri { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-bottom: 12px; }
.riquadro { background: var(--carta); border-radius: 12px; padding: 10px; text-align: center; }
.riquadro b { display: block; font-size: 30px; }
.riquadro.st-ordina_ora b { color: var(--rosso); }
.riquadro.st-sotto b { color: var(--sotto); }
.riquadro.st-ok b { color: var(--ok); }
.salto { display: block; width: 100%; text-align: left; background: none; border: 0; border-top: 1px solid var(--linea);
  min-height: 48px; padding: 8px 0; }
.salto:first-of-type { border-top: 0; }
.salto small { display: block; color: var(--tenue); font-size: 14px; }

.flash { position: fixed; left: 50%; bottom: calc(120px + env(safe-area-inset-bottom)); transform: translate(-50%, 160%);
  max-width: calc(100vw - 32px); padding: 12px 18px; border-radius: 12px; background: var(--testo); color: var(--sotto-chiaro); font-weight: 700;
  transition: transform .25s, opacity .25s; z-index: 50; pointer-events: none; opacity: 0; }
.flash.mostra { transform: translate(-50%, 0); opacity: 1; }

@media (min-width: 760px) {
  .riquadri { grid-template-columns: repeat(4, 1fr); }
}

/* VERSIONE LEGGERA (Matteo 07/10 sera: "troppo pesante, troppi dati, il banner sopra occupa e resta"): testata sottile che scorre via,
   niente guida, badge e righe di dati nelle schede di conta: ogni prodotto = nome + conta. Resta fissa solo la barra INVIA LISTA. */
.testata { position: static; padding: calc(6px + env(safe-area-inset-top)) 16px 0; box-shadow: none; }
h1 { font-size: 19px; }
.sync { font-size: 12px; font-weight: 600; padding: 2px 6px; background: none; }
.sync.attesa { background: var(--sotto-chiaro); }
.schede { margin-top: 4px; }
.scheda { min-height: 36px; border-radius: 8px 8px 0 0; font-size: 14px; }
.scheda.principale { font-size: 15px; }
.corpo { padding: 10px 16px calc(96px + env(safe-area-inset-bottom)); }
.guida { display: none; }
.stato-fisso { margin: 0 0 8px; padding: 0; background: none; font-size: 15px; font-weight: 700; color: var(--tenue); }
.sezione { font-size: 17px; margin: 2px 0 6px; }
.zona { margin: 14px 0 4px; padding: 0; background: none; color: var(--tenue); font-size: 12px; letter-spacing: .08em; }
.riga { padding: 10px 12px; margin-bottom: 6px; border-radius: 10px; border-left: 0; box-shadow: 0 1px 0 var(--linea); }
.riga .badge, .riga .info, .salvataggio.fatto { display: none; }
.nome { font-size: 17px; font-weight: 700; }
.cosa-contare { margin: 2px 0 0; padding: 0; background: none; font-size: 14px; font-weight: 700; color: var(--tenue); }
.controlli { margin-top: 6px; }
.qb { width: 52px; height: 52px; font-size: 26px; }
.qb.meno { background: #fff; border: 2px solid var(--linea); color: var(--testo); }
.numero { height: 52px; font-size: 22px; }
.ieri { flex: 0 0 84px; min-height: 52px; background: none; border: 2px solid var(--linea); color: var(--tenue); }
.ieri span { font-size: 11px; font-weight: 700; }
.ieri b { font-size: 16px; }
.riga.contata .ieri { background: none; }
.barra-invio { padding: 8px 16px calc(6px + env(safe-area-inset-bottom)); box-shadow: 0 -2px 8px rgba(0,0,0,.12); }
.tasto.invia { min-height: 56px; font-size: 22px; border-width: 2px; }
.stato-invio { margin-top: 4px; font-size: 13px; font-weight: 600; }
.comp-nome { font-size: 15px; }
.comp-riga .qb, .comp-riga .numero { height: 52px; }
.comp-riga .qb { width: 52px; }