/* Fattoria Ca' Bianca · Ordini street food
   Stessi colori e font del gestionale. Pensato per il sole delle fiere: tema chiaro, alto contrasto,
   pulsanti grandi. */
:root {
  --verde: #009d5a;
  --verde-scuro: #297a38;
  --oro: #c6a96f;
  --giallo: #fcc900;
  --scuro: #1d1922;
  --grigio: #5f6670;
  --linea: #e3e6e2;
  --fondo: #f6f7f3;
  --bianco: #ffffff;
  --verde-tenue: #e9f6ef;
  --rosso: #c62828;
  --rosso-tenue: #fdecea;
  --testo: "Varela Round", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --titoli: "Yeseva One", Georgia, "Times New Roman", serif;
  color-scheme: light;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--fondo); color: var(--scuro);
  font-family: var(--testo); font-size: 16px; line-height: 1.45;
}
h1, h2 { font-family: var(--titoli); font-weight: 400; margin: 0; text-wrap: balance; }
button, input, select { font: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 3px solid var(--verde); outline-offset: 2px; }
[hidden] { display: none !important; }
a { color: var(--verde-scuro); }

/* ---------- pulsanti ---------- */
.btn-giallo, .btn-verde, .btn-bianco {
  border: 0; border-radius: 14px; padding: 12px 18px; font-weight: 700; text-align: center;
  text-decoration: none; display: inline-block;
}
.btn-giallo { background: var(--giallo); color: var(--scuro); }
.btn-verde { background: var(--verde); color: #fff; }
.btn-bianco { background: var(--bianco); color: var(--scuro); border: 2px solid var(--linea); }
.grande { width: 100%; padding: 16px; font-size: 18px; }
button:disabled { opacity: .55; cursor: wait; }
.link { background: none; border: 0; color: var(--verde-scuro); text-decoration: underline; padding: 6px 0; }
.link-indietro { background: none; border: 0; color: var(--grigio); padding: 8px 0; text-decoration: underline; display: inline-block; }

.avviso { background: #fff7d6; border: 1px solid #f0dc8a; border-radius: 12px; padding: 12px 14px; margin: 0 0 14px; }
.avviso.danger { background: var(--rosso-tenue); border-color: #f3b4ae; color: #8a1c1c; }
.avviso.success { background: var(--verde-tenue); border-color: #b5e2c9; }
.aiuto { color: var(--grigio); font-size: 14px; }
.centro { text-align: center; }
.vuoto { color: var(--grigio); text-align: center; padding: 28px 12px; border: 2px dashed var(--linea); border-radius: 14px; }

/* ---------- cliente ---------- */
.cliente .testata {
  background: var(--bianco); border-bottom: 4px solid var(--verde);
  display: flex; gap: 14px; align-items: center;
  padding-block: 14px;
  padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px));
}
.logo { width: 64px; height: 64px; flex: none; }
.logo.grande { width: 120px; height: 120px; }
.testata h1 { font-size: 22px; color: var(--verde-scuro); }
.testata p { margin: 2px 0 0; color: var(--grigio); font-size: 14px; }
.testata.compatta { justify-content: center; }

.contenuto {
  max-width: 640px; margin: 0 auto;
  padding-block: 16px 120px;
  padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px));
}
.categoria { margin-bottom: 18px; }
.categoria h2 { font-size: 20px; color: var(--verde); margin: 6px 0 4px; }
.prodotto {
  display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--linea);
}
.prodotto-testo { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.prodotto .nome { font-weight: 700; font-size: 17px; }
.prodotto .desc { color: var(--grigio); font-size: 14px; }
.prodotto .prezzo { font-variant-numeric: tabular-nums; font-weight: 700; margin-top: 2px; }
.prodotto.scelto .nome { color: var(--verde-scuro); }
.prodotto.esaurito { opacity: .55; }
.etichetta { display: inline-block; font-size: 12px; padding: 1px 7px; border-radius: 999px; background: var(--fondo); border: 1px solid var(--oro); color: #7a6430; margin-left: 6px; vertical-align: 1px; }
.etichetta.finito { border-color: var(--rosso); color: var(--rosso); }
.quantita { display: flex; align-items: center; gap: 8px; flex: none; }
.quantita button {
  width: 44px; height: 44px; border-radius: 12px; border: 2px solid var(--linea); background: var(--bianco);
  font-size: 24px; font-weight: 700; line-height: 1; color: var(--scuro);
}
.quantita .piu { background: var(--giallo); border-color: var(--giallo); }
.quantita .q { min-width: 22px; text-align: center; font-weight: 700; font-size: 18px; font-variant-numeric: tabular-nums; }

.barra-carrello {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 5;
  background: var(--scuro); color: #fff;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding-top: 12px; padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px));
}
.barra-carrello div { display: flex; flex-direction: column; font-variant-numeric: tabular-nums; }
.barra-carrello .btn-giallo { padding: 14px 26px; font-size: 18px; }

.riepilogo { background: var(--bianco); border: 1px solid var(--linea); border-radius: 14px; padding: 12px 14px; margin: 12px 0 18px; display: flex; flex-direction: column; gap: 4px; }
.riepilogo div { display: flex; justify-content: space-between; gap: 10px; font-variant-numeric: tabular-nums; }
.riepilogo div > span:first-child, .righe li > span:first-child { min-width: 0; }
.riepilogo .totale { font-weight: 700; font-size: 18px; border-top: 1px solid var(--linea); padding-top: 8px; margin-top: 4px; }
#form-ordine { display: flex; flex-direction: column; gap: 8px; }
#form-ordine label { font-weight: 700; }
input[type=email], input[type=password], input:not([type]), select {
  width: 100%; padding: 13px 14px; border-radius: 12px; border: 2px solid var(--linea); background: var(--bianco); color: var(--scuro);
}
input:focus { border-color: var(--verde); outline: none; }
.spunta { display: flex; gap: 10px; align-items: flex-start; font-weight: 400 !important; background: var(--bianco); border: 1px solid var(--linea); border-radius: 12px; padding: 12px; }
.spunta input { width: 22px; height: 22px; flex: none; margin: 0; accent-color: var(--verde); }
.errore { color: var(--rosso); font-weight: 700; margin: 4px 0; }

.biglietto { background: var(--bianco); border: 3px dashed var(--oro); border-radius: 22px; padding: 24px 18px; text-align: center; margin: 8px 0 18px; display: flex; flex-direction: column; gap: 8px; align-items: center; }
.biglietto .sopra { margin: 0; font-weight: 700; color: var(--grigio); }
.biglietto .numero { font-family: var(--titoli); font-size: 120px; line-height: 1; color: var(--verde); font-variant-numeric: tabular-nums; }
.biglietto.consegnato .numero { color: var(--grigio); }
.biglietto p { margin: 0; }
.nota-vino { background: #fff7d6; border-radius: 10px; padding: 8px 12px; }
.girella { width: 48px; height: 48px; border-radius: 50%; border: 5px solid var(--verde-tenue); border-top-color: var(--verde); animation: gira 1s linear infinite; margin: 10px; }
@keyframes gira { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .girella { animation: none; } }
.righe { list-style: none; margin: 0 0 10px; padding: 0; }
.righe li { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--linea); font-variant-numeric: tabular-nums; }
.righe .totale { font-weight: 700; border-bottom: 0; }

/* ---------- banco ---------- */
.banco { background: var(--fondo); }
.barra-banco {
  background: var(--bianco); border-bottom: 4px solid var(--verde); display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding-block: 8px;
  padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px));
}
.barra-banco .logo { width: 64px; height: 64px; }
.barra-banco { flex-wrap: wrap; }
.barra-banco .marchio { display: flex; flex: none; }
.barra-banco nav { display: flex; align-items: center; gap: 4px 18px; flex-wrap: wrap; flex: 1; min-width: 0; }
.barra-banco .chi-sono { color: var(--grigio); font-size: 14px; }
.barra-banco .chi-sono b { color: var(--scuro); }
@media (max-width: 640px) {
  .barra-banco nav { order: 3; flex-basis: 100%; gap: 4px 14px; }
  .barra-banco .chi-sono { margin-left: auto; }
}
.barra-banco nav a { font-weight: 700; text-decoration: none; color: var(--scuro); padding: 6px 2px; border-bottom: 3px solid transparent; }
.barra-banco nav a[aria-current] { border-color: var(--verde); color: var(--verde-scuro); }
.barra-banco form { margin: 0; display: flex; align-items: center; gap: 10px; }
.barra-banco .versione { color: var(--grigio); font-size: 12px; font-variant-numeric: tabular-nums; }

.pagina-banco {
  max-width: 1280px; margin: 0 auto; display: flex; flex-direction: column; gap: 16px;
  padding-block: 16px 40px;
  padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px));
}
.pagina-banco.stretta { max-width: 820px; }
.pagina-banco h1 { color: var(--verde-scuro); font-size: 28px; }
.pagina-banco h2 { color: var(--verde-scuro); font-size: 20px; }

.riepilogo-banco { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 900px) { .riepilogo-banco { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) { .riepilogo-banco { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.riepilogo-banco div { background: var(--bianco); border: 1px solid var(--linea); border-radius: 14px; padding: 10px 14px; }
.riepilogo-banco small { display: block; color: var(--grigio); font-size: 13px; }
.riepilogo-banco b { font-size: 24px; font-variant-numeric: tabular-nums; }
.riepilogo-banco .evidenza { background: var(--verde); border-color: var(--verde); color: #fff; }
.riepilogo-banco .evidenza small { color: rgba(255,255,255,.85); }

.schede { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.schede [role=tab] { border: 2px solid var(--linea); background: var(--bianco); color: var(--scuro); border-radius: 999px; padding: 9px 18px; font-weight: 700; }
.schede [role=tab][aria-selected=true] { background: var(--scuro); border-color: var(--scuro); color: #fff; }
.schede .link { margin-left: auto; }

.lista-ordini { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; align-items: start; }
.ordine { background: var(--bianco); border: 1px solid var(--linea); border-top: 8px solid var(--giallo); border-radius: 16px; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.ordine.fatto { border-top-color: var(--verde); opacity: .8; }
.ordine.errore { border-top-color: var(--rosso); }
.ordine .testa { display: flex; justify-content: space-between; align-items: baseline; }
.ordine .num { font-family: var(--titoli); font-size: 44px; line-height: 1; font-variant-numeric: tabular-nums; }
.ordine .ora { color: var(--grigio); font-variant-numeric: tabular-nums; }
/* presa in carico: nomi grandi, colore per operatore */
.chi { font-weight: 700; color: var(--grigio); font-size: 14px; }
.nomi { display: flex; flex-wrap: wrap; gap: 8px; }
.nome-op {
  flex: 1 1 calc(50% - 4px); min-height: 56px; border-radius: 14px; border: 3px solid var(--c, var(--verde));
  background: var(--bianco); color: var(--c, var(--verde)); font-weight: 700; font-size: 19px; padding: 8px 10px;
}
.nome-op:active { background: var(--c); color: #fff; }
.in-carico {
  display: flex; align-items: center; gap: 10px; color: #fff; border-radius: 14px; padding: 10px 12px;
  font-weight: 700; font-size: 22px; min-height: 56px;
}
.in-carico svg { width: 28px; height: 28px; flex: none; }
.in-carico span { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.in-carico .cambia { background: rgba(255,255,255,.22); color: #fff; border: 0; border-radius: 10px; padding: 8px 12px; font-size: 15px; }

/* righe: ogni prodotto si segna da solo (es. il bere dato in cassa) */
.righe-banco { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.riga {
  width: 100%; min-height: 56px; display: flex; align-items: center; gap: 10px; text-align: left;
  background: var(--fondo); border: 2px solid var(--linea); border-radius: 14px; padding: 8px 10px; color: var(--scuro); font-size: 18px;
}
.riga .spunta-grande {
  width: 36px; height: 36px; flex: none; border-radius: 50%; border: 3px solid #b9c0b6; background: var(--bianco);
  display: grid; place-items: center; color: transparent;
}
.riga .spunta-grande svg { width: 24px; height: 24px; }
.riga .q { font-weight: 700; font-variant-numeric: tabular-nums; }
.riga .n { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.riga.fatta { background: var(--verde-tenue); border-color: #b5e2c9; color: var(--grigio); }
.riga.fatta .n { text-decoration: line-through; }
.riga.fatta .spunta-grande { background: var(--verde); border-color: var(--verde); color: #fff; }
.con-icona { display: flex; align-items: center; justify-content: center; gap: 10px; }
.con-icona svg { width: 26px; height: 26px; }

/* gestione operatori */
.operatori-gestione { background: var(--bianco); border: 1px solid var(--linea); border-radius: 16px; padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; }
.lista-operatori { display: flex; flex-direction: column; gap: 8px; }
.riga-operatore { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.riga-operatore input { flex: 1 1 160px; min-width: 0; }
.pallino { width: 22px; height: 22px; border-radius: 50%; flex: none; }
.pallino.vuoto-p { border: 2px dashed var(--linea); }
.btn-bianco.rosso { color: var(--rosso); }
.ordine .piede { color: var(--grigio); font-size: 12px; overflow-wrap: anywhere; }
.badge-vino { margin: 0; background: #fff7d6; border-radius: 8px; padding: 6px 10px; font-size: 14px; font-weight: 700; }
.msg-errore { margin: 0; color: var(--rosso); font-weight: 700; }

.finiti { background: var(--bianco); border: 1px solid var(--linea); border-radius: 16px; padding: 14px 16px; }
.finiti p { margin: 4px 0 10px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { border: 2px solid var(--verde); background: var(--verde-tenue); color: var(--verde-scuro); border-radius: 999px; padding: 8px 14px; font-weight: 700; }
.chip.spento { border-color: var(--rosso); background: var(--rosso-tenue); color: var(--rosso); text-decoration: line-through; }

.login { max-width: 380px; margin: 0 auto; display: flex; flex-direction: column; gap: 10px; align-items: stretch; text-align: center;
  padding-block: 40px;
  padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.login .logo { align-self: center; }
.login h1 { color: var(--verde-scuro); }
.login form { display: flex; flex-direction: column; gap: 8px; text-align: left; }
.login label { font-weight: 700; }

.scheda-prodotto { background: var(--bianco); border: 1px solid var(--linea); border-radius: 14px; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.scheda-prodotto.spento { opacity: .6; }
.scheda-prodotto .campi { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.scheda-prodotto .largo { grid-column: 1 / -1; }
.scheda-prodotto label { display: flex; flex-direction: column; gap: 4px; font-weight: 700; font-size: 14px; }
.scheda-prodotto label.spunta { flex-direction: row; align-items: center; }
.scheda-prodotto .btn-verde { align-self: flex-start; }
@media (max-width: 520px) { .scheda-prodotto .campi { grid-template-columns: minmax(0, 1fr); } }

/* ---------- modifiche (senza cipolla, + ketchup…) ---------- */
.mod { display: block; font-size: 14px; font-weight: 700; color: #7a4f00; }
.righe-banco .mod { display: inline-block; margin-top: 3px; background: #fff1c2; border-radius: 8px; padding: 2px 8px; font-size: 16px; color: #5c3b00; }
.riga.fatta .mod { background: transparent; color: var(--grigio); }
.varianti { display: flex; flex-direction: column; gap: 6px; padding: 0 0 10px 12px; border-bottom: 1px solid var(--linea); border-left: 3px solid var(--giallo); margin-top: -1px; }
.variante { display: flex; align-items: center; gap: 10px; }
.variante .v-testo { flex: 1; min-width: 0; font-size: 15px; overflow-wrap: anywhere; }
.variante .v-prezzo { font-variant-numeric: tabular-nums; color: var(--grigio); font-size: 14px; }
.quantita.piccola button { width: 38px; height: 38px; font-size: 20px; border-radius: 10px; }

dialog.scelta {
  width: min(460px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); overflow: auto;
  border: 0; border-radius: 20px; padding: 18px; background: var(--bianco); color: var(--scuro);
}
dialog::backdrop { background: rgba(29, 25, 34, .55); }
.scelta form { display: flex; flex-direction: column; gap: 12px; }
.scelta-titolo { color: var(--verde-scuro); font-size: 22px; }
.scelta-prezzo { margin: -6px 0 0; color: var(--grigio); font-size: 14px; }
.scelta-prezzo:empty { display: none; }
.scelta-mods { border: 0; margin: 0; padding: 0; }
.scelta-mods legend { font-weight: 700; margin-bottom: 6px; padding: 0; }
.scelta-lista { display: flex; flex-direction: column; gap: 8px; }
.scelta-lista .spunta { align-items: center; min-height: 52px; font-size: 17px; cursor: pointer; }
.scelta-lista .spunta span { flex: 1; }
.scelta-lista .extra { font-variant-numeric: tabular-nums; color: var(--verde-scuro); }
.scelta-lista .spunta:has(input:checked) { border-color: var(--verde); background: var(--verde-tenue); }
.scelta-q { display: flex; align-items: center; justify-content: space-between; font-weight: 700; }
.scelta-azioni { display: grid; grid-template-columns: 1fr 2fr; gap: 10px; }
.scelta-azioni button { padding: 14px; font-size: 17px; }

.miei-ordini { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; background: var(--verde-tenue); border: 1px solid #b5e2c9; border-radius: 12px; padding: 10px 12px; margin-bottom: 14px; font-weight: 700; }
.miei-ordini a { background: var(--verde); color: #fff; border-radius: 999px; padding: 6px 14px; text-decoration: none; font-variant-numeric: tabular-nums; }

/* ---------- cassa ---------- */
.badge-cassa { background: var(--scuro); color: #fff; border-radius: 999px; padding: 3px 10px; font-size: 13px; font-weight: 700; margin-right: auto; margin-left: 10px; align-self: center; }
.cassa { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 16px; align-items: start; }
@media (max-width: 860px) { .cassa { grid-template-columns: minmax(0, 1fr); } }
.cassa-prodotti { display: flex; flex-direction: column; gap: 8px; }
.cassa-prodotti h2 { margin-top: 6px; }
.tasti { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.tasto {
  min-height: 86px; display: flex; flex-direction: column; justify-content: center; gap: 4px; text-align: left;
  background: var(--bianco); border: 2px solid var(--linea); border-bottom-width: 4px; border-radius: 14px; padding: 10px 12px; color: var(--scuro);
}
.tasto:active { background: var(--verde-tenue); border-color: var(--verde); }
.tasto .t-nome { font-weight: 700; font-size: 17px; line-height: 1.2; overflow-wrap: anywhere; }
.tasto .t-prezzo { color: var(--grigio); font-size: 14px; font-variant-numeric: tabular-nums; }
.tasto .t-finito { display: none; color: var(--rosso); font-weight: 700; font-size: 13px; }
.tasto:disabled { opacity: .5; cursor: not-allowed; text-decoration: line-through; }
.tasto:disabled .t-finito { display: block; }
.cassa-conto {
  position: sticky; top: 12px; background: var(--bianco); border: 1px solid var(--linea); border-radius: 16px;
  padding: 14px; display: flex; flex-direction: column; gap: 10px;
}
.conto { display: flex; flex-direction: column; gap: 8px; max-height: 50vh; overflow: auto; }
.conto .vuoto { padding: 18px 10px; }
.conto-riga { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; align-items: center; border-bottom: 1px solid var(--linea); padding-bottom: 8px; }
.conto-riga .c-testo { grid-column: 1 / -1; overflow-wrap: anywhere; }
.conto-riga .c-prezzo { text-align: right; font-variant-numeric: tabular-nums; font-weight: 700; }
.conto-totale { display: flex; justify-content: space-between; align-items: baseline; font-size: 20px; }
.conto-totale b { font-size: 28px; font-variant-numeric: tabular-nums; }
.cassa-conto .link { align-self: center; }
.cassa-conto .aiuto { margin: 0; }
.cassa-ultimi { background: var(--bianco); border: 1px solid var(--linea); border-radius: 16px; padding: 14px 16px; }
.ultimi { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.ultimo { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; border-bottom: 1px solid var(--linea); padding-bottom: 8px; }
.ultimo.fatto { opacity: .6; }
.ultimo .u-num { font-family: var(--titoli); font-size: 30px; line-height: 1; min-width: 48px; font-variant-numeric: tabular-nums; }
.ultimo .u-righe { flex: 1 1 220px; min-width: 0; overflow-wrap: anywhere; }
.ultimo .u-righe .mod { display: inline; font-size: 13px; }
.ultimo .u-ora, .ultimo .u-stato { color: var(--grigio); font-size: 14px; font-variant-numeric: tabular-nums; }
.numero-fatto { border: 0; border-radius: 22px; padding: 24px; width: min(420px, calc(100vw - 32px)); text-align: center; }
.numero-fatto p { margin: 0 0 8px; font-weight: 700; font-size: 18px; }
.numero-fatto .numero { font-family: var(--titoli); font-size: 150px; line-height: 1; color: var(--verde); margin: 8px 0 12px; font-variant-numeric: tabular-nums; }
.numero-fatto .aiuto { font-weight: 400; font-size: 14px; }
.numero-fatto form { margin-top: 12px; }

/* gestione modifiche nella scheda prodotto */
.modifiche-gestione { border: 1px dashed var(--linea); border-radius: 12px; padding: 10px 12px; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.modifiche-gestione legend { font-weight: 700; font-size: 14px; padding: 0 4px; }
.modifiche-gestione .aiuto { margin: 0 0 4px; }
.riga-modifica { display: grid; grid-template-columns: minmax(0, 1fr) 130px; gap: 8px; }

/* ---------- app di gestione: ricerca, utenti, giornata ---------- */
.riepilogo-banco.tre { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cerca { background: var(--bianco); border: 1px solid var(--linea); border-radius: 16px; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.cerca label { font-weight: 700; }
.cerca-riga { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.cerca-riga input { flex: 1 1 220px; min-width: 0; }
input[type=search] { width: 100%; padding: 13px 14px; border-radius: 12px; border: 2px solid var(--linea); background: var(--bianco); color: var(--scuro); }
#cerca-esito { margin-top: 6px; }

.ultimi-testa { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; }

.tabella-ruoli { width: 100%; border-collapse: collapse; background: var(--bianco); border: 1px solid var(--linea); border-radius: 14px; overflow: hidden; font-size: 15px; }
.tabella-ruoli caption { text-align: left; font-weight: 700; padding: 0 0 6px; }
.tabella-ruoli th, .tabella-ruoli td { text-align: left; padding: 8px 12px; border-top: 1px solid var(--linea); vertical-align: top; }
.tabella-ruoli thead th { border-top: 0; color: var(--grigio); font-size: 13px; }
.lista-utenti { display: flex; flex-direction: column; gap: 10px; }
.scheda-utente { background: var(--bianco); border: 1px solid var(--linea); border-radius: 14px; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.scheda-utente.spento { opacity: .6; }
.scheda-utente .aiuto { margin: 0; }
.u-testa { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.u-testa h2 { font-family: var(--testo); font-weight: 700; font-size: 19px; color: var(--scuro); }
.u-testa small { color: var(--grigio); font-weight: 400; }
.etichetta-ruolo { border-radius: 999px; padding: 3px 10px; font-size: 13px; font-weight: 700; background: var(--fondo); border: 1px solid var(--linea); }
.etichetta-ruolo.r-amministratore { background: var(--scuro); color: #fff; border-color: var(--scuro); }
.etichetta-ruolo.r-cassa { background: #fff7d6; border-color: #f0dc8a; }
.etichetta-ruolo.r-banco { background: var(--verde-tenue); border-color: #b5e2c9; }
.etichetta-ruolo.spento { color: var(--rosso); border-color: var(--rosso); }
.u-riga { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.u-riga input, .u-riga select { flex: 1 1 180px; width: auto; min-width: 0; }
.campi-utente { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.campi-utente label { display: flex; flex-direction: column; gap: 4px; font-weight: 700; font-size: 14px; }
.scheda-utente.nuovo .btn-verde { align-self: flex-start; }
@media (max-width: 640px) { .campi-utente { grid-template-columns: minmax(0, 1fr); } }

.giornata-testa { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.scegli-giorno { display: flex; align-items: center; gap: 8px; }
.scegli-giorno label { font-weight: 700; font-size: 14px; white-space: nowrap; }
.scegli-giorno select { width: auto; }
.due-colonne { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 16px; align-items: start; }
@media (max-width: 900px) { .due-colonne { grid-template-columns: minmax(0, 1fr); } }
.riquadro { background: var(--bianco); border: 1px solid var(--linea); border-radius: 16px; padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.riquadro .aiuto { margin: 0; }
.tabella { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.tabella th, .tabella td { text-align: left; padding: 7px 8px; border-bottom: 1px solid var(--linea); }
.tabella thead th { color: var(--grigio); font-size: 13px; }
.tabella .num { text-align: right; }
.registro { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; max-height: 70vh; overflow: auto; }
.registro li { display: flex; flex-wrap: wrap; gap: 2px 8px; font-size: 14px; border-bottom: 1px solid var(--linea); padding-bottom: 6px; }
.registro .ora { color: var(--grigio); font-variant-numeric: tabular-nums; }
.registro .azione { color: var(--verde-scuro); font-weight: 700; }
.registro .dett { flex-basis: 100%; color: var(--grigio); overflow-wrap: anywhere; }

/* ---------- cassa fiscale: recapito, pagamento, scontrino ---------- */
.cassa-conto .etichetta-campo { font-weight: 700; display: flex; flex-direction: column; gap: 2px; }
.cassa-conto .etichetta-campo .aiuto { font-weight: 400; }
.paga-due { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.paga-due .grande { padding: 18px 10px; font-size: 19px; }
dialog.finestra-pagamento {
  width: min(440px, calc(100vw - 32px)); border: 0; border-radius: 20px; padding: 20px; background: var(--bianco); color: var(--scuro);
}
.finestra-pagamento { display: none; }
.finestra-pagamento[open] { display: flex; flex-direction: column; gap: 10px; }
.finestra-pagamento h2 { color: var(--verde-scuro); font-size: 22px; }
.finestra-pagamento label { font-weight: 700; }
.finestra-pagamento .importo { font-family: var(--titoli); font-size: 64px; line-height: 1.05; text-align: center; color: var(--scuro); font-variant-numeric: tabular-nums; }
.finestra-pagamento .aiuto { margin: 0; }
.tagli { display: flex; flex-wrap: wrap; gap: 8px; }
.tagli button { flex: 1 1 auto; padding: 10px 12px; font-variant-numeric: tabular-nums; }
.resto { margin: 0; font-size: 26px; font-weight: 700; color: var(--verde-scuro); min-height: 1.3em; font-variant-numeric: tabular-nums; }
.resto.manca { color: var(--rosso); }
.numero-fatto .stato-scontrino { font-weight: 700; font-size: 16px; margin: 4px 0 8px; }
.numero-fatto .qr { margin: 8px 0 0; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.numero-fatto .qr img { width: 180px; height: 180px; background: #fff; }
.numero-fatto .qr figcaption { color: var(--grigio); font-size: 13px; }
.ultimo.errore .u-scontrino { color: var(--rosso); font-weight: 700; }
.ultimo .u-scontrino { color: var(--grigio); font-size: 13px; }
.ultimo .u-azioni { display: flex; gap: 6px; flex-wrap: wrap; margin-left: auto; }
.ultimo .u-azioni .btn-bianco { padding: 8px 12px; }

/* pagina dell'ordine del cliente: scontrino */
.scontrino { background: var(--bianco); border: 1px solid var(--linea); border-radius: 14px; padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.scontrino h2 { font-size: 18px; color: var(--verde-scuro); }
.scontrino p { margin: 0; overflow-wrap: anywhere; }
#form-ordine #riga-email, #form-ordine #riga-telefono { display: flex; flex-direction: column; gap: 8px; }
#form-ordine #riga-email[hidden], #form-ordine #riga-telefono[hidden] { display: none; }
#form-ordine .link { align-self: flex-start; font-size: 15px; }
input[type=tel], input[type=text] { width: 100%; padding: 13px 14px; border-radius: 12px; border: 2px solid var(--linea); background: var(--bianco); color: var(--scuro); }