:root {
  /* Un solo tema, chiaro: bianco caldo (non abbagliante), accento blu petrolio. */
  --blu: #245a8f;
  --blu-scuro: #1a4468;
  --blu-chiaro: #e3edf7;
  --su-blu: #ffffff; /* testo sopra l'accento */
  /* Verde, arancio e rosso scuriti quel tanto che serve a portare il testo sul proprio badge a
     4.5:1 (prima 3.55, 3.04 e 4.34). Stessi valori di mobile/src/tema.tsx. */
  --verde: #297c3c;
  --verde-chiaro: #e3f3e6;
  --arancio: #ab4d24;
  --arancio-chiaro: #fbe6da;
  --rosso: #bd3a3a;
  --rosso-chiaro: #fbe4e2;
  /* Fase "attesa corriere" della home del banco (testo scuro sopra il chiaro: #4b3480). */
  --viola: #6b4fa0;
  --viola-chiaro: #eee8f7;
  --grigio: #6b6a5f;
  --sfondo: #f3f1ec;
  --surface: #ffffff;
  --bordo: #e2ded3;
  --testo: #232019;
  --account: #0f9d93;
  --icona-nav: #000000;
  --raggio: 14px;
  /* Barra in basso: pillola tonda che galleggia a --nav-stacco dal fondo. --nav-alt è la sua altezza (si legge
     dal browser: se cambia, aggiornarla), --barra-bassa lo spazio che occupa: le barre fisse che stanno sopra
     (carrello, "Vai al carrello", pagamento) e il riempimento in fondo alle pagine partono da lì. */
  --nav-alt: 62px;
  --nav-stacco: 10px;
  --barra-bassa: calc(var(--nav-alt) + var(--nav-stacco));
}

* { box-sizing: border-box; }

/* I .btn hanno un display esplicito che coprirebbe l'attributo hidden del browser. */
[hidden] { display: none !important; }

html, body { height: 100%; background: var(--sfondo); }

body {
  font-family: "Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  margin: 0;
  background: var(--sfondo);
  color: var(--testo);
  -webkit-text-size-adjust: 100%;
  /* Rete di sicurezza: nessuna pagina deve poter scorrere di lato. Le cause note (testi lunghi senza spazi,
     l'appbar a tutta larghezza da tablet in su, che con 100vw conta anche la barra di scorrimento) sono
     sistemate dove nascono; questo ritaglia il poco che dovesse sfuggire. `clip` (non `hidden`) non crea un
     contenitore di scorrimento e lascia funzionare gli elementi sticky. */
  overflow-x: clip;
}

img { max-width: 100%; }

/* Il doppio tocco ravvicinato (tipico su + e −) non deve ingrandire la pagina su iPhone, e il tocco è subito
   un clic, senza attesa. */
a, button, input, select, textarea, summary, label { touch-action: manipulation; }

/* I pulsanti non ereditano il font da soli: senza questa regola restano in Arial. */
button { font-family: inherit; }

h1, .domanda, .sezione-titolo, .appbar .titolo, .nome, .tessera-grande .nome {
  font-family: "Sora", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}

a { color: var(--blu); }

/* ---------- Impalcatura mobile ---------- */

.app {
  max-width: 520px;
  margin: 0 auto;
  min-height: 100%;
  background: var(--sfondo);
  padding-bottom: calc(var(--barra-bassa) + 62px + 16px);
}

.app-largo { max-width: 900px; }

.appbar {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--surface);
  border-bottom: 1px solid var(--bordo);
  display: grid;
  /* Due colonne laterali uguali: il titolo resta al centro della barra anche se a destra ci sono
     più icone che a sinistra (prima 44px | 1fr | auto lo spostava di qualche pixel). */
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  min-height: 52px;
  /* viewport-fit=cover (app_head.ejs): senza questi spazi, con lo schermo girato o l'app installata, i
     pulsanti ai lati della barra finivano sotto la tacca. Fuori da quei casi valgono 0. */
  padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) 0 env(safe-area-inset-left, 0px);
}
.appbar > :first-child { justify-self: start; }

.appbar .titolo {
  text-align: center;
  font-weight: 700;
  font-size: 1.05rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.appbar .icona-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  min-width: 44px; /* area di tocco: prima 34px di larghezza, sotto i 44 raccomandati */
  color: var(--blu);
  text-decoration: none;
  font-size: 1.3rem;
  background: none;
  border: none;
  cursor: pointer;
  position: relative;
}
.appbar .icona-account { color: var(--account); }

.appbar .icona-btn .pallino {
  position: absolute;
  top: 8px;
  right: 8px;
  min-width: 16px;
  height: 16px;
  border-radius: 8px;
  background: var(--rosso);
  color: #fff;
  font-size: 0.65rem;
  line-height: 16px;
  text-align: center;
  padding: 0 4px;
  font-weight: 700;
}

.contenuto { padding: 14px; }

.sezione-titolo {
  font-weight: 700;
  font-size: 1.05rem;
  margin: 18px 2px 8px;
}
.sezione-titolo:first-child { margin-top: 4px; }

.sottotitolo {
  color: var(--grigio);
  font-size: 0.9rem;
  margin: 0 2px 12px;
  line-height: 1.4;
}

/* ---------- Card e liste ---------- */

.card {
  background: var(--surface);
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
  padding: 14px;
  margin-bottom: 12px;
}

.card-fitta { padding: 0; overflow: hidden; }

.riga-lista {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border-bottom: 1px solid var(--bordo);
  text-decoration: none;
  color: inherit;
}
.riga-lista:last-child { border-bottom: none; }
.riga-lista .icona { font-size: 1.25rem; width: 26px; text-align: center; color: var(--testo); }
.riga-lista .corpo { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.riga-lista .etichetta { font-weight: 600; }
.riga-lista .dettaglio { color: var(--grigio); font-size: 0.85rem; margin-top: 2px; }
.riga-lista .freccia { color: #b9c0c9; font-size: 1.1rem; }

/* ---------- Ricerca ---------- */

.barra-ricerca {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--surface);
  border: 1px solid var(--bordo);
  border-radius: 999px;
  padding: 0 14px; /* l'altezza la dà il campo (44px): la barra resta alta quasi quanto prima */
  margin-bottom: 14px;
}
.barra-ricerca input[type="search"] {
  border: none;
  border-radius: 0;
  outline: none;
  font-size: 1rem;
  width: 100%;
  min-height: 44px; /* area di tocco: prima 30px di altezza */
  background: transparent;
  margin: 0;
  padding: 4px 0;
}
.barra-ricerca .lente { color: var(--icona-nav); }
.barra-ricerca button {
  border: none;
  background: var(--blu);
  color: var(--su-blu);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 0.9rem;
  cursor: pointer;
}

/* ---------- Macro categorie ---------- */

.griglia-macro {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.tessera {
  background: var(--surface);
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
  padding: 16px 14px;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 108px;
}
.tessera .emoji { font-size: 1.6rem; }
.tessera .nome { font-weight: 700; line-height: 1.25; }
.tessera .conta { color: var(--grigio); font-size: 0.8rem; margin-top: auto; }
.tessera-ico {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: var(--blu-chiaro);
  color: var(--blu);
  font-size: 1.15rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ---------- Prodotti ---------- */

.gruppo-titolo {
  font-weight: 700;
  color: var(--blu);
  margin: 16px 2px 6px;
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.prodotto {
  display: flex;
  align-items: stretch;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--bordo);
}
.prodotto:last-child { border-bottom: none; }
.prodotto .info { flex: 1; min-width: 0; overflow-wrap: anywhere; }

/* Colonna a destra della card: la foto sta in alto, lo stepper viene spinto in basso
   (justify-content: space-between) così la foto ha lo spazio in alto senza convivere con
   il tasto +/-. Centrata (non a destra): così il centro della foto cade sopra al numero
   dello stepper, non sopra al bordo destro della card. Senza foto reale c'è comunque
   .prodotto-foto-vuota, stesse dimensioni ma invisibile: lo stepper resta spinto in basso
   fin da ora, pronto per quando arriverà la foto vera, senza spostamenti dell'ultimo minuto. */
.prodotto-laterale {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  flex: none;
  gap: 8px;
}
.prodotto-foto {
  width: 80px;
  height: 80px;
  object-fit: contain;
  border-radius: 8px;
  background: var(--surface);
}
.prodotto-foto-vuota { background: none; visibility: hidden; }
.prodotto-foto:not(.prodotto-foto-vuota) { cursor: zoom-in; }

/* Foto prodotto a schermo intero (apertura in app.js al click sulla miniatura). */
.foto-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(0, 0, 0, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
}
.foto-overlay[hidden] { display: none; }
.foto-overlay-img {
  max-width: 90vw;
  max-height: 90vh;
  max-height: 90dvh; /* dvh: la barra degli indirizzi dei browser mobile non la taglia */
  object-fit: contain;
  border-radius: 8px;
  background: var(--surface);
}
.foto-overlay-chiudi {
  position: absolute;
  top: max(16px, env(safe-area-inset-top, 0px));
  right: max(16px, env(safe-area-inset-right, 0px));
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  /* Sfondo scuro pieno (non il solito translucido): la foto sotto può essere bianca,
     un cerchio semi-trasparente ci sparirebbe sopra. */
  background: rgba(0, 0, 0, 0.65);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.prodotto .nome { font-weight: 600; line-height: 1.3; }
.prodotto .meta { font-size: 0.8rem; color: var(--grigio); margin-top: 3px; }
.prodotto .prezzo { margin-top: 6px; font-weight: 700; color: var(--blu); }
.prodotto .prezzo .iva { font-weight: 500; color: var(--grigio); font-size: 0.8rem; }
.prodotto .prezzo .barrato {
  text-decoration: line-through;
  color: #a7aeb8;
  font-weight: 500;
  font-size: 0.85rem;
  margin-right: 6px;
}

/* selettore quantità */
.stepper {
  display: flex;
  flex: none;
  align-items: center;
  gap: 4px;
  background: var(--sfondo);
  border: 1px solid var(--bordo);
  border-radius: 999px;
  padding: 3px;
}
.stepper button {
  /* 44px: soglia minima raccomandata per un target da toccare (WCAG 2.5.5) — prima erano
     30px, il controllo più usato in assoluto in un'app pensata per l'uso da cantiere
     (guanti, dita sporche/bagnate). */
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: var(--surface);
  color: var(--blu);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(0,0,0,0.08);
}
.stepper button:disabled { color: #c2c8d0; cursor: default; box-shadow: none; }
.stepper input[type="number"] {
  width: 44px;
  min-width: 44px;
  height: 44px; /* il campo si può toccare per scrivere la quantità: area di 44px come i pulsanti ai lati */
  flex: none;
  text-align: center;
  border: none;
  border-radius: 0;
  background: transparent;
  font-size: 1rem; /* sotto i 16px Safari su iPhone ingrandisce la pagina quando si tocca il campo */
  font-weight: 600;
  margin: 0;
  padding: 0;
  -moz-appearance: textfield;
}
.stepper input::-webkit-outer-spin-button,
.stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* ---------- Badge e stati ---------- */

.badge {
  display: inline-block;
  font-size: 0.75rem; /* 12px, come i badge dell'app: 11.5px era sotto la soglia di leggibilità */
  padding: 2px 8px;
  border-radius: 999px;
  font-weight: 600;
  white-space: nowrap;
}
.badge-disponibile { background: var(--verde-chiaro); color: var(--verde); }
.badge-in_esaurimento { background: var(--arancio-chiaro); color: var(--arancio); }
.badge-non_disponibile { background: var(--rosso-chiaro); color: var(--rosso); }

.stato-badge {
  display: inline-block;
  font-size: 0.78rem;
  padding: 3px 10px;
  border-radius: 999px;
  font-weight: 600;
}
.stato-inviato, .stato-in_attesa { background: var(--blu-chiaro); color: var(--blu); }
.stato-in_evasione, .stato-con_offerte { background: var(--arancio-chiaro); color: var(--arancio); }
.stato-evaso, .stato-ordinata, .stato-confermato, .stato-consegnato { background: var(--verde-chiaro); color: var(--verde); }
.stato-nessuna_offerta, .stato-annullata, .stato-non_disponibile, .stato-scaduto {
  background: var(--rosso-chiaro); color: var(--rosso);
}

/* ---------- Pulsanti ---------- */

.btn {
  display: inline-block;
  border: none;
  border-radius: 999px;
  padding: 14px 20px;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
}
.btn-primary { background: var(--blu); color: var(--su-blu); }
.btn-primary:hover { background: var(--blu-scuro); }
.btn-verde { background: var(--verde); color: var(--su-blu); }
.btn-chiaro { background: var(--surface); color: var(--blu); border: 1px solid var(--bordo); }
.btn-rosso { background: var(--surface); color: var(--rosso); border: 1px solid #f0c8c3; }
.btn-blocco { display: block; width: 100%; }
.btn:disabled { background: #c9d0d8; color: #fff; cursor: default; }
.btn-logout { background: transparent; color: var(--su-blu); border: 1px solid currentColor; border-radius: 6px; padding: 8px 14px; font-weight: 600; }

/* barra fissa in fondo con il pulsante Procedi */
.barra-azione {
  position: fixed;
  /* Sopra la pillola della navbar (z-index 25), non sopra di lei: prima stava a bottom: 0 e la nascondeva. */
  bottom: calc(var(--barra-bassa) + env(safe-area-inset-bottom, 0px) + 8px);
  left: 0;
  right: 0;
  z-index: 24;
  background: var(--surface);
  border-top: 1px solid var(--bordo);
  box-shadow: 0 -4px 14px rgba(0, 0, 0, 0.08);
  padding: 10px 14px;
}
.barra-azione .interno { max-width: 520px; margin: 0 auto; display: flex; gap: 10px; align-items: center; }
.barra-azione .conteggio { font-size: 0.85rem; color: var(--grigio); }

/* ---------- Attesa / countdown ---------- */

.attesa {
  text-align: center;
  padding: 26px 16px;
}
.cerchio-attesa {
  width: 116px;
  height: 116px;
  border-radius: 50%;
  margin: 0 auto 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--blu);
  background: var(--surface);
  border: 4px solid var(--blu-chiaro);
  border-top-color: var(--blu);
  animation: gira 2.4s linear infinite;
}
.cerchio-attesa span { animation: gira-inverso 2.4s linear infinite; }
@keyframes gira { to { transform: rotate(360deg); } }
@keyframes gira-inverso { to { transform: rotate(-360deg); } }
@media (prefers-reduced-motion: reduce) {
  .cerchio-attesa, .cerchio-attesa span { animation: none; }
}

.pill-distributore {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--bordo);
}
.pill-distributore:last-child { border-bottom: none; }
.pill-distributore .nome { font-weight: 600; }
.pill-distributore .filiale { font-size: 0.8rem; color: var(--grigio); }

/* ---------- Offerta ---------- */

.offerta {
  display: block;
  text-decoration: none;
  color: inherit;
  background: var(--surface);
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
  padding: 14px;
  margin-bottom: 12px;
}
.offerta.migliore { border-color: var(--verde); box-shadow: 0 0 0 1px var(--verde); }
.offerta .testa { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.offerta .nome { font-weight: 700; font-size: 1.05rem; }
.offerta .filiale { color: var(--grigio); font-size: 0.85rem; margin-top: 2px; }
.offerta .tempo { margin-top: 10px; display: flex; align-items: center; gap: 6px; color: var(--testo); font-size: 0.92rem; }
.offerta .totale { text-align: right; white-space: nowrap; }
.offerta .totale .valore { font-weight: 800; font-size: 1.15rem; color: var(--blu); }
.offerta .totale .iva { font-size: 0.78rem; color: var(--grigio); }
.offerta .piede {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--bordo);
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--blu);
  font-weight: 700;
  font-size: 0.95rem;
}

/* ---------- Riepilogo ordine ---------- */

.riepilogo-riga {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 0;
  font-size: 0.95rem;
}
.riepilogo-riga .voce { color: var(--grigio); }
.riepilogo-riga.forte { font-weight: 800; font-size: 1.1rem; padding-top: 12px; border-top: 1px solid var(--bordo); margin-top: 6px; }
.riepilogo-riga.forte .voce { color: var(--testo); }

.riga-articolo {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--bordo);
}
.riga-articolo:last-child { border-bottom: none; }
.riga-articolo .qta {
  min-width: 30px;
  font-weight: 700;
  color: var(--blu);
}
.riga-articolo .desc { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.riga-articolo .desc .meta { font-size: 0.8rem; color: var(--grigio); margin-top: 2px; }
.riga-articolo .imp { text-align: right; white-space: nowrap; font-weight: 600; }

.nota {
  color: var(--grigio);
  font-size: 0.83rem;
  line-height: 1.45;
  margin: 8px 2px 16px;
}

.nota-mini { color: var(--grigio); font-size: 0.75rem; line-height: 1.4; margin: 10px 2px 4px; }

/* Una .nota che è un link ("Vedi tutti gli ordini →"): area di tocco da 44px invece dei 19px del testo. */
a.nota { display: flex; align-items: center; min-height: 44px; margin-top: 0; margin-bottom: 0; }

.ordine-hero { border-radius: var(--raggio); padding: 14px 16px; margin-bottom: 10px; }
.ordine-hero.verde { background: var(--verde-chiaro); }
.ordine-hero .badge {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 700;
  background: var(--surface);
  padding: 3px 10px;
  border-radius: 999px;
  margin-bottom: 8px;
}
.ordine-hero.verde .badge { color: var(--verde); }
.ordine-hero .tempo { font-size: 1.1rem; font-weight: 700; color: var(--testo); }
.ordine-hero .sotto { font-size: 0.85rem; margin-top: 3px; }
.ordine-hero.verde .sotto { color: var(--verde); }
.ordine-hero.verde { background: #cdedd4; }
.ordine-hero.verde .tempo { color: var(--verde); }

.link-discreto {
  display: block;
  width: 100%;
  background: none;
  border: none;
  color: var(--rosso);
  font-size: 0.85rem;
  padding: 10px;
  margin-top: 6px;
  text-align: center;
  cursor: pointer;
}

.avviso {
  border-radius: var(--raggio);
  padding: 12px 14px;
  margin-bottom: 12px;
  font-size: 0.92rem;
  line-height: 1.4;
}
.avviso-info { background: var(--blu-chiaro); color: var(--blu-scuro); }
.avviso-ok { background: var(--verde-chiaro); color: var(--verde); }
.avviso-attenzione { background: var(--arancio-chiaro); color: #8a5a12; }
.errore { background: var(--rosso-chiaro); color: var(--rosso); border-radius: var(--raggio); padding: 12px 14px; margin-bottom: 12px; }

.vuoto {
  text-align: center;
  color: var(--grigio);
  padding: 34px 16px;
}
.vuoto .emoji { font-size: 2rem; display: block; margin-bottom: 8px; }

/* ---------- Barra di navigazione bassa ---------- */

/* Pillola tonda sollevata dal fondo. Il contenitore .navbar copre tutta la larghezza ma non intercetta i
   tocchi: solo la pillola (.interno), così ai lati si vede e si tocca il contenuto sotto. */
.navbar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 25;
  padding: 0 12px calc(var(--nav-stacco) + env(safe-area-inset-bottom));
  pointer-events: none;
}
.navbar .interno {
  pointer-events: auto;
  max-width: 496px;
  margin: 0 auto;
  display: flex;
  padding: 3px 6px;
  background: var(--surface);
  border: 1px solid var(--bordo);
  border-radius: 31px;
  box-shadow: 0 8px 24px rgba(35, 32, 25, 0.14), 0 1px 3px rgba(35, 32, 25, 0.08);
}
.navbar a:active { background: var(--sfondo); }
.navbar a {
  flex: 1;
  padding: 6px 4px;
  border-radius: 26px;
  text-align: center;
  text-decoration: none;
  color: var(--grigio);
  font-size: 13px;
  position: relative;
}
.navbar a .ico { display: block; font-size: 1.25rem; line-height: 1.2; color: var(--icona-nav); }
.navbar a.attivo { color: var(--blu); font-weight: 700; }
.navbar a .pallino.pallino-azzurro { background: #2e97e6; }
.navbar a .pallino {
  position: absolute;
  top: 4px;
  right: 50%;
  margin-right: -22px;
  min-width: 16px;
  height: 16px;
  border-radius: 8px;
  background: var(--rosso);
  color: #fff;
  font-size: 0.65rem;
  line-height: 16px;
  padding: 0 4px;
  font-weight: 700;
}

/* navbar sempre visibile, anche con barra carrello */
body.con-azione .navbar { display: block; }
.navbar { display: block !important; }

/* ---------- Form ---------- */

input[type="text"], input[type="password"], input[type="search"], input[type="number"],
input[type="email"], input[type="tel"], input[type="url"], textarea, select {
  width: 100%;
  padding: 12px;
  border: 1px solid var(--bordo);
  border-radius: 10px;
  font-size: 1rem;
  margin-bottom: 12px;
  background: var(--surface);
  color: var(--testo);
  font-family: inherit;
}

label { font-weight: 600; display: block; margin-bottom: 4px; }

/* ---------- Login ---------- */

.login-wrapper {
  max-width: 380px;
  margin: 48px auto;
  padding: 0 16px;
}
.login-wrapper h1 { text-align: center; font-size: 1.5rem; }
.login-wrapper .card { padding: 18px; }

/* ---------- Viste desktop (agente) ---------- */

header.topbar {
  background: var(--blu);
  color: var(--su-blu);
  padding: 14px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
header.topbar .brand { font-weight: 600; font-size: 1.05rem; }
header.topbar form { margin: 0; }

main { max-width: 900px; margin: 0 auto; padding: 16px; }

h1 { font-size: 1.35rem; margin-top: 0; }
h2 { font-size: 1.1rem; }

.tabella-scroll { overflow-x: auto; touch-action: pan-x; }
table { width: 100%; border-collapse: collapse; }
.tabella-scroll table { min-width: 640px; }
th, td { text-align: left; padding: 8px 6px; border-bottom: 1px solid var(--bordo); font-size: 0.92rem; }
th { color: var(--grigio); font-weight: 600; }

.link-secondario { color: var(--blu); text-decoration: none; }

@media (max-width: 330px) {
  .griglia-macro { grid-template-columns: 1fr; }
}

/* ---------- Home del banco: bacheca a 3 colonne (views/distributore_richieste.ejs) ---------- */

/* Intestazione (views/partials/banco_testa.ejs): è la stessa su TUTTE le pagine del banco, non solo sulla home.
   Barra bianca da 64px con ditta e filiale, menu a schede, "Storico ordini" e cerchio con le iniziali (niente campanella).
   Da 900px in su il menu sospeso in basso (nav_distributore, .nav-solo-stretta) non si mostra, su nessuna pagina del
   banco: il menu sta qui. Sotto, il menu in basso resta e le schede qui spariscono. */
.banco-testa {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 24px;
  min-height: 64px;
  padding: env(safe-area-inset-top, 0px) max(24px, env(safe-area-inset-right, 0px)) 0 max(24px, env(safe-area-inset-left, 0px));
  background: var(--surface);
  border-bottom: 1px solid var(--bordo);
}
.banco-identita { min-width: 0; }
.banco-ditta {
  font-family: "Sora", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  font-weight: 800;
  font-size: 18px;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.banco-filiale { color: var(--grigio); font-size: 13px; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.banco-menu { display: flex; gap: 8px; }
.banco-voce {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 18px;
  border-radius: 22px;
  color: var(--grigio);
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
}
.banco-voce:hover { background: var(--sfondo); }
.banco-voce.attiva { background: var(--blu-chiaro); color: var(--blu-scuro); }
.banco-voce-ico { display: inline-flex; font-size: 20px; }
.banco-voce-pallino {
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 10px;
  background: var(--rosso);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  line-height: 20px;
  text-align: center;
}

.banco-azioni { display: flex; align-items: center; gap: 4px; margin-left: auto; flex: none; }
.banco-storico {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 12px;
  color: var(--blu);
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
}
.banco-storico:hover { text-decoration: underline; }
.banco-storico.attiva { padding: 0 18px; border-radius: 22px; background: var(--blu-chiaro); color: var(--blu-scuro); font-weight: 700; text-decoration: none; }

/* Riga col titolo della pagina, sotto l'intestazione, per le pagine interne del banco (clienti, richiesta, ordine,
   storico, notifiche...): freccia indietro e titolo. La home non l'ha. Allineata al contenuto (.contenuto: 14px). */
.banco-titolo { display: flex; align-items: center; gap: 4px; padding: 10px 6px 0 6px; }
.banco-indietro {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  color: var(--blu);
  font-size: 24px;
  text-decoration: none;
}
.banco-indietro:hover { background: var(--sfondo); }
.banco-indietro:focus-visible { outline: 2px solid var(--blu); outline-offset: 1px; }
.banco-titolo-testo {
  min-width: 0;
  margin: 0;
  font-family: "Sora", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.25;
  overflow-wrap: anywhere;
}
@media (min-width: 720px) {
  .app > .banco-titolo { max-width: 1400px; margin-left: auto; margin-right: auto; padding-left: 14px; padding-right: 14px; }
}
.banco-avatar-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: none;
  cursor: pointer;
}
.banco-avatar-btn .avatar { box-shadow: 0 0 0 3px var(--blu-chiaro); }
.banco-avatar-btn:focus-visible, .banco-voce:focus-visible,
.banco-storico:focus-visible { outline: 2px solid var(--blu); outline-offset: 1px; }
/* Le voci della tendina già presenti nella barra (o nel menu in basso) si mostrano solo dove la barra non le ha. */
.menu-account .tendina .voce-solo-stretta, .menu-account .tendina .voce-solo-piccola { display: none; }

/* Corpo: tre colonne uguali che riempiono l'altezza rimasta; ogni colonna scorre per conto suo e ha la
   propria testata fissa. */
.bacheca {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: minmax(0, 1fr);
  gap: 16px;
  flex: 1 1 auto;
  min-height: 0;
  max-width: none; /* è un <main>: senza questo varrebbe il `main { max-width: 900px }` delle viste desktop */
  margin: 0;
  padding: 16px 24px 20px;
}

/* Colori di fase (--fase*): striscia in cima, riquadro icona e pillola del numero. */
.colonna {
  --fase: var(--arancio);
  --fase-chiaro: var(--arancio-chiaro);
  --fase-scuro: var(--arancio);
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  background: #e9e6df;
  border-top: 4px solid var(--fase);
  border-radius: 18px;
  overflow: hidden;
}
.colonna-corriere { --fase: var(--viola); --fase-chiaro: var(--viola-chiaro); --fase-scuro: #4b3480; }
.colonna-preparare { --fase: var(--verde); --fase-chiaro: var(--verde-chiaro); --fase-scuro: var(--verde); }

.colonna-testa { display: flex; align-items: center; gap: 12px; flex: none; padding: 14px 16px 12px; }
.colonna-icona {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: var(--fase-chiaro);
  color: var(--fase);
  font-size: 18px;
}
.colonna-titolo {
  margin: 0;
  font-family: "Sora", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.2;
}
.colonna-conta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 32px;
  margin-left: auto;
  padding: 0 10px;
  border-radius: 16px;
  background: var(--fase-chiaro);
  color: var(--fase-scuro);
  font-family: "Sora", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 16px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.colonna-lista {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  gap: 12px;
  min-height: 0;
  padding: 4px 12px 12px;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.colonna-vuota { margin: 28px 12px; color: var(--grigio); font-size: 15px; text-align: center; }

/* Scheda: bianca, uguale nelle tre colonne; cambiano solo la testa e le azioni. */
.scheda {
  display: flex;
  flex-direction: column;
  flex: none;
  gap: 12px;
  min-width: 0;
  padding: 14px;
  background: var(--surface);
  border: 1px solid rgba(35, 32, 25, 0.07);
  border-radius: 16px;
  box-shadow: 0 1px 2px rgba(35, 32, 25, 0.06);
}
.scheda-testa { display: flex; align-items: center; gap: 14px; }
.scheda-testa-alto { align-items: flex-start; }
.scheda-testi { flex: 1 1 auto; min-width: 0; }
.scheda-nome-riga { display: flex; align-items: center; gap: 8px; min-width: 0; }
.scheda-nome {
  margin: 0;
  min-width: 0;
  font-family: "Sora", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.25;
  overflow-wrap: anywhere;
}
.scheda-nome a { color: inherit; text-decoration: none; }
.scheda-nome a:hover { text-decoration: underline; }
.scheda-sotto { margin-top: 2px; color: var(--grigio); font-size: 13px; line-height: 1.3; }

/* Da confermare: bordo e ombra color fase; negli ultimi minuti tutto passa al rosso e la scheda pulsa piano. */
.scheda-richiesta { border: 1.5px solid #f1c4ac; box-shadow: 0 2px 10px rgba(171, 77, 36, 0.12); }
.scheda-richiesta.urgente { border-color: #e29a96; box-shadow: 0 2px 10px rgba(189, 58, 58, 0.14); animation: bacheca-pulsa 1.8s ease-out infinite; }
.scheda-richiesta.scaduta { opacity: 0.55; pointer-events: none; }

/* Anello da 56px: la barra è il tempo rimasto e si svuota in senso orario; dentro, mm:ss. */
.anello { position: relative; flex: none; width: 56px; height: 56px; }
.anello svg { display: block; width: 56px; height: 56px; }
.anello circle { fill: none; stroke-width: 5; }
.anello-traccia { stroke: var(--arancio-chiaro); transition: stroke 0.3s; }
.anello-barra { stroke: var(--arancio); stroke-linecap: round; transition: stroke-dashoffset 1s linear, stroke 0.3s; }
.anello-tempo {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--arancio);
  font-family: "Sora", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 13.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  transition: color 0.3s;
}
.scheda-richiesta.urgente .anello-traccia { stroke: var(--rosso-chiaro); }
.scheda-richiesta.urgente .anello-barra { stroke: var(--rosso); }
.scheda-richiesta.urgente .anello-tempo { color: var(--rosso); }
.etichetta-nuova {
  flex: none;
  padding: 3px 8px;
  border-radius: 6px;
  background: var(--arancio);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  line-height: 1.2;
  text-transform: uppercase;
}

/* Articoli: "2×" in un riquadro, nome e codice sotto. */
.articoli { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; }
.articolo { display: flex; align-items: flex-start; gap: 10px; }
.articolo-qta {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 24px;
  padding: 0 7px;
  border-radius: 7px;
  background: var(--blu-chiaro);
  color: var(--blu-scuro);
  font-family: "Sora", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 12px;
  font-weight: 700;
}
.articolo-testo { display: flex; flex-direction: column; min-width: 0; }
.articolo-nome { font-size: 15px; font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.articolo-cod { color: var(--grigio); font-size: 12.5px; line-height: 1.35; }
.articolo-altre { padding-left: 44px; color: var(--grigio); font-size: 13px; }

/* Pulsanti a pillola da 50px. */
.btn-banco {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 50px;
  padding: 0 18px;
  border: 1.5px solid transparent;
  border-radius: 25px;
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}
.btn-banco svg { width: 20px; height: 20px; }
.btn-banco:focus-visible { outline: 3px solid var(--blu); outline-offset: 2px; }
.btn-banco-conferma { background: var(--arancio); color: #fff; }
.btn-banco-conferma:hover { background: #963f1b; }
.btn-banco-secondario { background: var(--surface); border-color: #d6d1c6; color: var(--testo); }
.btn-banco-secondario:hover { background: var(--sfondo); }
.btn-banco-prepara { width: 100%; background: var(--blu); color: #fff; }
.btn-banco-prepara:hover { background: var(--blu-scuro); }
/* Da confermare: "Conferma" a tutta larghezza (conferma subito, senza aprire il dettaglio), sotto "Ispeziona" e "Non disponibile"
   affiancati e larghi metà ciascuno. */
.scheda-azioni { display: flex; flex-direction: column; gap: 8px; }
.scheda-azioni form { margin: 0; }
.scheda-azione-conferma .btn-banco { width: 100%; }
.scheda-azioni-secondarie { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.scheda-azioni-secondarie > a, .scheda-azioni-secondarie > form { min-width: 0; }
.scheda-azioni-secondarie .btn-banco { width: 100%; }

/* Da preparare: "Ispeziona" e "Preparato" affiancati e uguali; senza Ispeziona (ordine senza richiesta) "Preparato" occupa tutta la riga. */
.scheda-azioni-ordine { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px; }
.scheda-azioni-ordine .btn-banco { width: 100%; }
.btn-banco-medio { min-height: 46px; }
.btn-banco-piccolo { min-height: 42px; gap: 6px; padding: 0 8px; font-size: 14.5px; }
.btn-banco-piccolo svg { width: 18px; height: 18px; stroke-width: 1.9; }
.scheda { container-type: inline-size; }

/* Attesa corriere: icona viola, riga di stato e una nota grigia. */
.scheda-icona {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--viola-chiaro);
  color: var(--viola);
  font-size: 20px;
}
/* "Ispeziona": pillola secondaria da 38px in cima a destra della scheda (apre il dettaglio). Se il nome non ci sta, va a capo sotto. */
.scheda-testa-corriere { flex-wrap: wrap; row-gap: 10px; }
.scheda-testa-corriere .scheda-testi { flex: 1 1 150px; }
.btn-ispeziona {
  position: relative; flex: none; align-self: flex-start; margin-left: auto; display: inline-flex; align-items: center; gap: 6px;
  height: 38px; padding: 0 14px 0 12px; border: 1.5px solid #d6d1c6; border-radius: 19px; background: var(--surface);
  color: var(--testo); font-family: inherit; font-size: 14px; font-weight: 600; line-height: 1; text-decoration: none; white-space: nowrap;
}
.btn-ispeziona::after { content: ""; position: absolute; inset: -3px; } /* area di tocco da 44px */
.btn-ispeziona svg { width: 18px; height: 18px; stroke-width: 1.9; }
.btn-ispeziona:hover { background: var(--sfondo); }
.btn-ispeziona:focus-visible { outline: 3px solid var(--blu); outline-offset: 2px; }
.stato-corriere { margin-top: 2px; color: #4b3480; font-size: 13px; font-weight: 600; line-height: 1.35; }
.stato-corriere::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 7px;
  border-radius: 50%;
  background: var(--viola);
  vertical-align: 0.05em;
}
.scheda-nota { margin: 0; padding: 12px 14px; border-radius: 12px; background: var(--sfondo); color: var(--grigio); font-size: 14px; line-height: 1.4; }

/* Da preparare: a destra i minuti all'arrivo del corriere e l'ora; verde, rossa negli ultimi minuti. */
.pillola-arrivo {
  flex: none;
  padding: 6px 10px 5px;
  border-radius: 12px;
  background: var(--verde-chiaro);
  color: var(--verde);
  text-align: center;
  line-height: 1.15;
  transition: background-color 0.3s, color 0.3s;
}
.pillola-arrivo.vicino { background: var(--rosso-chiaro); color: var(--rosso); }
.pillola-min {
  display: block;
  font-family: "Sora", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 17px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.pillola-ora { display: block; margin-top: 1px; font-size: 12px; font-weight: 600; white-space: nowrap; }

@keyframes bacheca-entra {
  from { opacity: 0; transform: translateY(-8px) scale(0.985); }
  to { opacity: 1; transform: none; }
}
@keyframes bacheca-pulsa {
  0%, 100% { box-shadow: 0 2px 10px rgba(189, 58, 58, 0.14), 0 0 0 0 rgba(189, 58, 58, 0.3); }
  60% { box-shadow: 0 2px 10px rgba(189, 58, 58, 0.14), 0 0 0 7px rgba(189, 58, 58, 0); }
}
.scheda.entra { animation: bacheca-entra 0.35s ease-out; }
.scheda-richiesta.urgente.entra { animation: bacheca-entra 0.35s ease-out, bacheca-pulsa 1.8s ease-out 0.35s infinite; }
@media (prefers-reduced-motion: reduce) {
  .scheda.entra, .scheda-richiesta.urgente, .scheda-richiesta.urgente.entra { animation: none; }
  .anello-barra, .anello-traccia, .anello-tempo, .pillola-arrivo { transition: none; }
}

/* Da schermo largo la pagina è una sola schermata (le colonne scorrono dentro). Il menu in basso non serve. */
@media (min-width: 900px) {
  .pagina-banco { display: flex; flex-direction: column; height: 100vh; height: 100dvh; overflow: hidden; }
  .banco-testa { flex: none; }
  .navbar.nav-solo-stretta { display: none !important; }
}

/* Sotto i 900px resta il menu in basso: le schede della barra spariscono e le colonne si impilano. */
@media (max-width: 899.98px) {
  .banco-testa { gap: 12px; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
  .banco-menu { display: none; }
  .menu-account .tendina .voce-solo-stretta { display: block; }
  .bacheca { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; padding: 12px 12px calc(var(--barra-bassa) + 24px); }
  .colonna-lista { overflow: visible; }
}
@media (max-width: 639.98px) {
  .banco-storico { display: none; }
  .menu-account .tendina .voce-solo-piccola { display: block; }
}

/* ---------- Geolocalizzazione ---------- */

.geo-box .btn { margin-top: 4px; }
/* Mappa Leaflet: alta zero finché non c'è niente da mostrare, così non lascia buchi. */
.mappa {
  width: 100%;
  height: 0;
  margin: 10px 0 0;
  border-radius: 10px;
  overflow: hidden;
  background: #eef2f6;
  border: 1px solid var(--bordo);
}
.mappa.mappa-attiva { height: 220px; }
.mappa .leaflet-container { height: 100%; width: 100%; font: inherit; }
.mappa-grande.mappa-attiva { height: 300px; }

.mappa-vuota {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 12px;
  text-align: center;
  font-size: 0.85rem;
  color: var(--grigio);
}

.segno-mappa span {
  display: block;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 3px solid #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
}
.geo-legenda {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  font-size: 0.8rem;
  color: var(--grigio);
  margin-top: 8px;
}
.geo-legenda span::before {
  content: '';
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  margin-right: 5px;
  vertical-align: baseline;
}
.geo-legenda .p-mezzo::before { background: var(--blu); }
.geo-legenda .p-dest::before { background: var(--verde); }
.geo-legenda .p-banco::before { background: var(--arancio); }

/* ---------- Bolla / DDT ---------- */

.pagina-ddt { background: #eceff3; }

.ddt-azioni {
  max-width: 820px;
  margin: 0 auto;
  padding: 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.ddt-foglio {
  max-width: 820px;
  margin: 0 auto 40px;
  background: var(--surface);
  border: 1px solid var(--bordo);
  border-radius: 6px;
  padding: 22px;
  font-size: 0.85rem;
  line-height: 1.45;
}

.ddt-intestazione,
.ddt-riquadri,
.ddt-piede {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.ddt-intestazione { margin-bottom: 12px; }
.ddt-riquadri { margin-bottom: 14px; }
.ddt-piede { margin-top: 14px; }

.ddt-riquadro,
.ddt-mittente,
.ddt-numero {
  border: 1px solid var(--bordo);
  border-radius: 6px;
  padding: 10px 12px;
}

.ddt-etichetta {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--grigio);
  font-weight: 700;
  display: block;
  margin-bottom: 3px;
}
.ddt-ragione { font-weight: 700; font-size: 1rem; }
.ddt-titolo-doc { font-weight: 800; font-size: 1.1rem; color: var(--blu); }
.ddt-sottotitolo { font-size: 0.72rem; color: var(--grigio); margin-bottom: 6px; }

.ddt-meta { width: 100%; border-collapse: collapse; }
.ddt-meta th,
.ddt-meta td { border: none; padding: 2px 0; font-size: 0.82rem; vertical-align: top; }
.ddt-meta th { color: var(--grigio); font-weight: 600; text-align: left; padding-right: 10px; }
.ddt-meta tr.ddt-totale th,
.ddt-meta tr.ddt-totale td { border-top: 1px solid var(--bordo); padding-top: 6px; font-weight: 800; color: var(--testo); }

.ddt-righe { width: 100%; border-collapse: collapse; }
.ddt-righe th,
.ddt-righe td { border: 1px solid var(--bordo); padding: 6px 8px; font-size: 0.82rem; }
.ddt-righe thead th { background: #f5f7fa; color: var(--grigio); font-weight: 700; }
.ddt-righe .destra { text-align: right; }

.ddt-nota { font-size: 0.72rem; color: var(--grigio); margin: 8px 0 0; }

.ddt-firme {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  margin-top: 30px;
}
.ddt-riga-firma {
  display: block;
  border-bottom: 1px solid #9aa3ad;
  height: 30px;
  margin-top: 4px;
}

@media (max-width: 640px) {
  .ddt-intestazione,
  .ddt-riquadri,
  .ddt-piede,
  .ddt-firme { grid-template-columns: 1fr; }
  .ddt-foglio { padding: 14px; }
}

@media print {
  .no-print { display: none !important; }
  body.pagina-ddt { background: #fff; }
  .ddt-foglio { border: none; border-radius: 0; margin: 0; max-width: none; padding: 0; }
  .ddt-righe thead th { background: #fff; }
  @page { margin: 14mm; }
}

/* ---------- Marchi ---------- */

.logo-marchio {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: 10px;
  background: var(--marchio, var(--blu));
  color: #fff;
  font-weight: 800;
  font-size: 0.9rem;
  letter-spacing: 0.02em;
}
.logo-marchio.grande { width: 56px; height: 56px; font-size: 1.15rem; border-radius: 14px; }

.marchio-tag {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  padding: 1px 6px;
  border-radius: 4px;
  color: #fff;
  background: var(--marchio, var(--blu));
  vertical-align: 2px;
  margin-right: 4px;
}

.striscia-marchi {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: thin;
  touch-action: pan-x; /* stesso motivo di .chip-riga: evita che lo scroll orizzontale da trackpad diventi uno zoom della pagina */
}
.tessera-marchio {
  flex: 0 0 auto;
  width: 118px;
  background: var(--surface);
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
  padding: 12px;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.tessera-marchio .nome { font-weight: 700; font-size: 0.9rem; line-height: 1.2; }
.tessera-marchio .conta { color: var(--grigio); font-size: 0.75rem; }
.tessera-marchio.tutti .nome { color: var(--grigio); }

.testata-marchio { display: flex; align-items: center; gap: 14px; }
.testata-marchio .nome-marchio { font-weight: 800; font-size: 1.2rem; }
.testata-marchio .dettaglio { color: var(--grigio); font-size: 0.85rem; margin-top: 2px; }

/* ---------- Paginazione ---------- */

.paginazione {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 14px 0;
}
.paginazione .btn { padding: 10px 14px; font-size: 0.85rem; }
.paginazione .conta-pagina {
  font-size: 0.78rem;
  color: var(--grigio);
  text-align: center;
  flex: 1;
}
.paginazione [aria-disabled="true"] { opacity: 0.4; }

/* ---------- Sconti al banco ---------- */

.riga-sconto { display: flex; align-items: center; gap: 8px; }
.riga-sconto input[type="number"] { margin: 0; }
.riga-sconto .btn { padding: 10px 14px; font-size: 0.85rem; white-space: nowrap; }
.riga-sconto.piccola { margin-top: 6px; gap: 6px; }
.riga-sconto.piccola label { font-size: 0.78rem; color: var(--grigio); font-weight: 600; margin: 0; }
.riga-sconto.piccola input[type="number"] {
  width: 82px;
  padding: 6px 8px;
  font-size: 0.9rem;
  border-radius: 8px;
}

.riga-check {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: normal;
  font-size: 0.88rem;
  margin: 10px 0 0;
}
.riga-check input { width: auto; margin: 0; }

.riga-banco.sconto-modificato { background: #f2f9f3; }
.riga-banco.sconto-modificato .riga-sconto.piccola input[type="number"] {
  border-color: var(--verde);
  color: var(--verde);
  font-weight: 700;
}

/* Legenda con un colore per insegna sulla mappa dei punti vendita */
.legenda-insegne span::before { background: var(--colore-insegna, var(--blu)); }

/* ---------- Sconti per ambito ---------- */

.riga-sconto-ambito input[type="number"] {
  width: 84px;
  flex: none;
  margin: 0;
  padding: 8px;
  text-align: center;
  font-weight: 700;
  border-radius: 8px;
}

/* ---------- Sconti a scalare (5 colonne) ---------- */

.riga-sconti { padding: 12px 14px; border-bottom: 1px solid var(--bordo); }
.riga-sconti:last-child { border-bottom: none; }
.riga-sconti-testa { display: flex; align-items: center; gap: 12px; }
.riga-sconti-testa .icona { font-size: 1.2rem; width: 24px; text-align: center; color: var(--testo); }
.riga-sconti-testa .corpo { flex: 1; min-width: 0; }
.riga-sconti-testa .etichetta { font-weight: 600; display: block; }
.riga-sconti-testa .dettaglio { color: var(--grigio); font-size: 0.82rem; display: block; margin-top: 2px; }

.sconto-effettivo {
  font-weight: 800;
  color: var(--verde);
  background: var(--verde-chiaro);
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 0.85rem;
  white-space: nowrap;
}

.scaglioni { display: flex; gap: 6px; margin-top: 10px; }
.scaglione { flex: 1; min-width: 0; margin: 0; }
.scaglione .numero {
  display: block;
  font-size: 0.65rem;
  color: var(--grigio);
  font-weight: 600;
  text-align: center;
  margin-bottom: 3px;
  white-space: nowrap;
}
.scaglione .campo {
  display: flex;
  align-items: center;
  border: 1px solid var(--bordo);
  border-radius: 8px;
  background: var(--surface);
  padding-right: 5px;
}
.scaglione input[type="number"] {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  margin: 0;
  padding: 0 2px 0 4px;
  border: none;
  border-radius: 0;
  text-align: right;
  font-weight: 700;
  font-size: 16px; /* sotto i 16px Safari su iPhone ingrandisce la pagina al tocco del campo */
  -moz-appearance: textfield;
}
.scaglione .segno { color: var(--grigio); font-size: 0.8rem; font-weight: 600; }
.scaglione .campo:focus-within { border-color: var(--blu); }

/* ---------- Menu account a tendina ---------- */

.azioni-appbar { display: flex; align-items: center; justify-content: flex-end; justify-self: end; padding-right: 4px; }
.menu-account { position: relative; }

.menu-account .tendina {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 220px;
  background: var(--surface);
  border: 1px solid var(--bordo);
  border-radius: 12px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.14);
  overflow: hidden;
  z-index: 40;
}

.menu-account .tendina-testata {
  padding: 12px 14px;
  border-bottom: 1px solid var(--bordo);
  background: var(--sfondo);
}
.menu-account .tendina-testata .nome { font-weight: 700; font-size: 0.92rem; }
.menu-account .tendina-testata .ruolo { color: var(--grigio); font-size: 0.78rem; margin-top: 2px; }

.menu-account .tendina a,
.menu-account .tendina .voce-esci,
.menu-account .tendina .voce-tema {
  display: block;
  width: 100%;
  padding: 12px 14px;
  text-align: left;
  text-decoration: none;
  color: var(--testo);
  font-size: 0.92rem;
  background: none;
  border: none;
  border-top: 1px solid var(--bordo);
  cursor: pointer;
  font-family: inherit;
}
.menu-account .tendina a:first-of-type { border-top: none; }
.menu-account .tendina a:hover,
.menu-account .tendina .voce-esci:hover,
.menu-account .tendina .voce-tema:hover { background: var(--sfondo); }
.menu-account .tendina form { margin: 0; }
.menu-account .tendina .voce-esci { color: var(--rosso); font-weight: 700; }

/* ---------- Home orientata alla fretta ---------- */

.domanda { font-size: 1.5rem; font-weight: 800; margin: 6px 2px 12px; }
.barra-ricerca.grande { padding: 12px 16px; margin-bottom: 6px; }
.barra-ricerca.grande input[type="search"] { font-size: 1.05rem; }
.nota.sotto-ricerca { margin: 0 2px 6px; }

.griglia-evidenza { display: grid; gap: 10px; }
.tessera-grande {
  background: var(--surface);
  border: 1px solid var(--bordo);
  border-left: 5px solid var(--blu);
  border-radius: var(--raggio);
  padding: 16px;
  text-decoration: none;
  color: inherit;
  display: grid;
  grid-template-columns: 46px 1fr;
  grid-template-rows: auto auto auto;
  column-gap: 12px;
  align-items: start;
}
.tessera-grande .emoji { grid-row: 1 / 4; font-size: 2rem; line-height: 1; color: var(--testo); }
.tessera-grande .nome { font-weight: 800; font-size: 1.15rem; }
.tessera-grande .desc { color: var(--grigio); font-size: 0.85rem; line-height: 1.35; margin-top: 2px; }
.tessera-grande .conta { color: var(--blu); font-size: 0.8rem; font-weight: 700; margin-top: 6px; }

.altre-categorie { margin: 16px 0; }
.altre-categorie summary {
  font-weight: 700;
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
  cursor: pointer;
}
.altre-categorie[open] summary { border-radius: var(--raggio) var(--raggio) 0 0; margin-bottom: 0; }
.altre-categorie[open] .card { border-top: none; border-radius: 0 0 var(--raggio) var(--raggio); }

.avviso-selezione { border-color: var(--arancio); background: var(--arancio-chiaro); }

/* riordino rapido */
.frequenti { display: grid; gap: 8px; margin-bottom: 4px; }
.pezzo-frequente {
  display: block;
  width: 100%;
  text-align: left;
  background: var(--surface);
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
  padding: 12px 14px;
  cursor: pointer;
  font-family: inherit;
}
.pezzo-frequente .nome { display: block; font-weight: 600; line-height: 1.3; }
.pezzo-frequente .meta { display: block; color: var(--grigio); font-size: 0.8rem; margin-top: 3px; }
.pezzo-frequente .aggiungi {
  display: inline-block;
  margin-top: 8px;
  color: var(--blu);
  font-weight: 700;
  font-size: 0.85rem;
}

/* ---------- Filtri a chip (misura, marchio) ---------- */

.filtro-titolo {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--grigio);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  /* Margine sopra aumentato (10px -> 16px): più aria fra un blocco chip e il successivo
     (es. Diametro/Materiale), per non farli leggere come un unico gruppo confuso. */
  margin: 16px 2px 6px;
}
.filtro-titolo .secondario { font-weight: 500; text-transform: none; letter-spacing: 0; }

.chip-riga {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 4px;
  margin-bottom: 6px;
  /* Scorrimento orizzontale invariato, solo la barra visibile nascosta (grigia e larga
     su Chrome desktop, stonava con il resto dell'interfaccia). */
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* Edge legacy */
  /* Da PC, scorrere con un trackpad/mouse a scroll orizzontale su un elemento con
     overflow-x può essere interpretato dal browser come un gesto di pinch-zoom, "zoomando
     fuori" tutta la pagina invece di scorrere solo questa riga — capita più spesso su
     elementi stretti come questo. touch-action lo esclude esplicitamente: qui si scorre
     solo in orizzontale, mai zoom. */
  touch-action: pan-x;
  /* Sfumatura sul bordo destro: segnala che si può scorrere per vedere altri chip, cosa
     che prima capiva dalla barra di scorrimento grigia ora nascosta. Sfuma la trasparenza
     dell'elemento stesso (non un colore fisso), quindi funziona identica sia dentro una
     card (--surface) sia sullo sfondo pagina (--sfondo). */
  -webkit-mask-image: linear-gradient(to right, black calc(100% - 18px), transparent 100%);
  mask-image: linear-gradient(to right, black calc(100% - 18px), transparent 100%);
}
.chip-riga::-webkit-scrollbar { display: none; } /* Chrome, Safari */
.chip {
  /* Prima: stesso sfondo (--surface) della card che lo contiene, distinto solo da un
     bordo sottile — si leggeva come un'etichetta di testo, non un pulsante. Stesso
     trucco già usato dallo stepper (sfondo --sfondo + ombra leggera) per segnalare "è
     un controllo, non testo", qui applicato ai chip non selezionati. */
  flex: 0 0 auto;
  padding: 7px 13px;
  border-radius: 999px;
  border: 1px solid var(--bordo);
  background: var(--sfondo);
  color: var(--testo);
  text-decoration: none;
  font-size: 0.86rem;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(0,0,0,0.08);
}
.chip.attivo { background: var(--blu); border-color: var(--blu); color: var(--su-blu); box-shadow: none; }

/* ---------- Scelta della misura (partials/misura.ejs, misuraHtml in app.js) ----------
   Occhiello "Misura · H × L × P", poi due chip affiancati (2 varianti) o un pulsante che apre il pannello dal
   basso (3 o più). Tutti i pulsanti sono da 40px con l'area di tocco estesa a 44px da un ::after. */
.misura { margin: 8px 0 0; }
.misura-occhiello {
  margin-bottom: 6px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--grigio);
}
.misura-chip { display: flex; flex-wrap: wrap; gap: 6px; }
.misura-opz, .misura-apri {
  position: relative;
  min-height: 40px;
  max-width: 100%;
  border-radius: 12px;
  font-weight: 700;
  line-height: 1.2;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.misura-opz::after, .misura-apri::after { content: ""; position: absolute; inset: -2px 0; }
.misura-opz:focus-visible, .misura-apri:focus-visible { outline: 2px solid var(--blu); outline-offset: 2px; }
.misura-opz {
  padding: 0 12px;
  border: 1.5px solid #d6d1c6;
  background: #fff;
  color: var(--testo);
  font-size: 14px;
}
.misura-opz.attivo { border-color: var(--blu); background: var(--blu-chiaro); color: #1a4468; }
.misura-apri {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px 0 14px;
  border: 1.5px solid var(--blu);
  background: var(--blu-chiaro);
  color: #1a4468;
  font-size: 15px;
  text-align: left;
}
.misura-testo { min-width: 0; overflow-wrap: anywhere; }
.misura-freccia { flex: none; }
/* Testo solo per gli screen reader ("Misura di NOME: ") davanti alla misura scelta. */
.misura-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Pannello dal basso: uno solo per pagina, creato da app.js al primo tocco (hidden quando chiuso). */
.misura-velo {
  position: fixed;
  inset: 0;
  z-index: 50; /* sopra navbar (25), barre fisse (24-29) e menu del profilo (30-31) */
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: rgba(28, 25, 23, 0.4);
  animation: misura-dissolvi 200ms ease-out;
}
.misura-velo[hidden] { display: none; }
html.misura-aperta { overflow: hidden; }
.misura-pannello {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 520px;
  max-height: 70vh;
  max-height: 70dvh;
  padding: 10px 16px calc(16px + env(safe-area-inset-bottom, 0px));
  border-radius: 22px 22px 0 0;
  background: #fff;
  box-shadow: 0 -8px 30px rgba(28, 25, 23, 0.18);
  animation: misura-sale 200ms ease-out;
}
@keyframes misura-sale { from { transform: translateY(100%); } to { transform: none; } }
@keyframes misura-dissolvi { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .misura-velo, .misura-pannello { animation: none; }
}
.misura-maniglia { flex: none; width: 40px; height: 5px; margin: 0 auto 16px; border-radius: 3px; background: #d6d1c6; }
.misura-titolo {
  flex: none;
  margin: 0;
  font-family: "Sora", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  font-weight: 700;
  font-size: 18px;
  line-height: 1.25;
}
.misura-sotto {
  flex: none;
  margin: 4px 0 0;
  font-size: 14px;
  line-height: 1.3;
  color: var(--grigio);
  overflow: hidden;
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}
/* L'elenco scorre dentro il pannello se le misure sono tante; il margine negativo lascia posto ai contorni del fuoco. */
.misura-elenco {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 12px -4px 0;
  padding: 3px 4px;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.misura-riga {
  flex: none;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 56px;
  padding: 8px 16px;
  border: 1.5px solid #d6d1c6;
  border-radius: 14px;
  background: #fff;
  color: var(--testo);
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.misura-riga.attivo { border-color: var(--blu); background: var(--blu-chiaro); }
.misura-riga:focus-visible { outline: 2px solid var(--blu); outline-offset: 2px; }
.misura-radio {
  flex: none;
  width: 22px;
  height: 22px;
  border: 2px solid #b9b4a8;
  border-radius: 50%;
  background: #fff;
}
.misura-riga.attivo .misura-radio { border-color: var(--blu); background: var(--blu); box-shadow: inset 0 0 0 3px #fff; }
.misura-riga-testo { flex: 1; min-width: 0; font-size: 16px; font-weight: 700; line-height: 1.25; overflow-wrap: anywhere; }
.misura-riga-prezzo { flex: none; font-size: 15px; font-weight: 700; color: var(--grigio); font-variant-numeric: tabular-nums; }
.misura-riga.attivo .misura-riga-prezzo { color: var(--testo); }
.misura-conferma {
  flex: none;
  height: 52px;
  margin-top: 16px;
  border: none;
  border-radius: 26px;
  background: var(--blu);
  color: var(--su-blu);
  font-family: "Sora", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  font-weight: 700;
  font-size: 16px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.misura-conferma:active { background: var(--blu-scuro); }
.misura-conferma:focus-visible { outline: 2px solid var(--blu); outline-offset: 3px; }

.svuota-link {
  background: none;
  border: none;
  padding: 4px 0;
  color: var(--rosso);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}

/* ---------- Nuovo carrello: prodotto-azioni, Aggiungi, mini-card ---------- */
.prodotto-azioni {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex: none;
}
.prodotto-azioni .stepper { align-self: center; }

.btn-aggiungi {
  background: var(--blu);
  color: var(--su-blu);
  border: none;
  border-radius: 999px;
  padding: 7px 14px;
  font-weight: 700;
  font-size: 0.82rem;
  cursor: pointer;
  min-width: 86px;
  line-height: 1;
}
.btn-aggiungi:disabled { background: #c9d0d8; cursor: default; }
.btn-aggiungi:active:not(:disabled) { transform: scale(0.97); }

.mini-carrello {
  font-size: 0.73rem;
  background: var(--verde-chiaro);
  color: var(--verde);
  padding: 4px 8px;
  border-radius: 999px;
  font-weight: 600;
  text-align: center;
  white-space: nowrap;
}
.mini-carrello[hidden] { display: none !important; }

/* barra che porta al carrello (categoria / ricerca / marchio) */
.barra-carrello {
  position: fixed;
  bottom: calc(var(--barra-bassa) + env(safe-area-inset-bottom, 0px) + 8px);
  left: 0;
  right: 0;
  z-index: 29;
  background: var(--surface);
  border-top: 1px solid var(--bordo);
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  box-shadow: 0 -4px 16px rgba(0,0,0,0.06);
}
.barra-carrello[hidden] { display: none !important; }
.barra-carrello .interno {
  max-width: 520px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: space-between;
}
.barra-carrello-testo { font-size: 0.9rem; color: var(--testo); }
.barra-carrello-testo strong { color: var(--blu); }

/* pagina carrello: layout responsive (stili della pagina in fondo al file, sezione "Carrello") */
.carrello-layout { display: grid; gap: 12px; }
/* Gli elementi di una griglia hanno min-width: auto: senza questo un contenuto largo allarga la colonna oltre lo schermo. */
.carrello-layout > * { min-width: 0; }

@media (min-width: 720px) {
  /* .app occupa tutta la larghezza e lo spazio limitato a 1400px lo tiene il contenuto: così l'appbar è a tutta
     larghezza senza trucchi. Prima .app era larga 1400px max e l'appbar ne usciva con width: 100vw + margine
     negativo: 100vw conta anche la barra di scorrimento (15px su desktop), quindi la barra partiva 15px fuori
     dallo schermo e il pulsante "indietro" veniva tagliato. */
  .app { max-width: none; padding-bottom: calc(var(--barra-bassa) + 62px + 16px); }
  .app > .contenuto { max-width: 1400px; margin-left: auto; margin-right: auto; }
  .barra-carrello .interno { max-width: 1400px; }
  .navbar .interno { max-width: 520px; }
  .carrello-layout { grid-template-columns: 1.6fr 0.9fr; align-items: start; }
  .carrello-riepilogo { position: sticky; top: 64px; }
  .prodotto { padding: 16px 18px; gap: 16px; }
  .barra-carrello { bottom: calc(var(--barra-bassa) + env(safe-area-inset-bottom, 0px) + 8px); }
  body { background: var(--sfondo); }

  /* Da tablet in su la card entra in una sola riga: foto, poi nome/dettagli, poi lo
     stepper -/+ in fondo alla riga (spazio permettendo) — invece della colonna foto sopra
     e stepper sotto usata su mobile, dove lo spazio orizzontale non basta per tutti e tre. */
  .prodotto { align-items: center; }
  .prodotto-laterale { display: contents; }
  .prodotto-foto { order: -1; }
  .prodotto [data-riga-azioni] { flex: none; }
  /* Il segnaposto invisibile serve solo su mobile (per tenere lo stepper già in basso in
     vista delle foto mancanti); da tablet in su, senza foto vera, la card resta compatta
     come prima invece di riservare uno spazio a sinistra che non useremmo. */
  .prodotto-foto-vuota { display: none; }

  /* Griglia di categorie: da 2 colonne fisse a tante quante ci stanno (min 220px l'una),
     invece di restare a 2 anche quando lo schermo è largo il triplo. Le tessere "in
     evidenza" in home (più grandi) idem, con una soglia più larga. */
  .griglia-macro { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
  .griglia-evidenza { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }

  /* Lista prodotti (ricerca/categoria/marchio): da elenco verticale a riga singola a una
     griglia di card affiancate. Ogni .prodotto diventa una card a sé (bordo/sfondo propri)
     invece di una riga separata da un bordo inferiore dentro un unico contenitore. */
  .card.card-fitta.griglia-prodotti {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(480px, 1fr));
    gap: 12px;
    background: none;
    border: none;
    padding: 0;
    overflow: visible;
  }
  .griglia-prodotti .prodotto {
    border: 1px solid var(--bordo);
    border-radius: var(--raggio);
    background: var(--surface);
  }
  .griglia-prodotti .prodotto:last-child { border-bottom: 1px solid var(--bordo); }
}

/* geo mappa nascosta per ora — posizione richiesta all'ingresso ma non mostrata */
.mappa, [data-mappa-punto], [data-segui-mappa], [data-segui-legenda], .geo-box { display: none !important; }

/* Stato ordini — card 3 stati */
.card-richiesta { padding: 14px; margin-bottom: 12px; }
.card-richiesta-head { display:flex; justify-content:space-between; align-items:center; gap:8px; }
.card-richiesta-id { font-weight:700; font-size:0.92rem; }
.card-richiesta-materiale { font-size:0.82rem; color:var(--grigio); margin-top:6px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.stepper-3 { display:flex; align-items:center; gap:4px; margin:14px 0 6px; }
.stepper-3 .step { flex:1; display:flex; flex-direction:column; align-items:center; gap:4px; background:none; border:none; cursor:pointer; padding:4px 2px; border-radius:8px; }
.stepper-3 .step:disabled { opacity:0.45; cursor:default; }
.stepper-3 .pallino { width:30px; height:30px; border-radius:50%; background: var(--surface); border:2px solid var(--bordo); display:flex; align-items:center; justify-content:center; font-weight:800; font-size:0.85rem; color:var(--grigio); }
.stepper-3 .step.attivo .pallino { background:var(--blu); color:#fff; border-color:var(--blu); }
.stepper-3 .step.corrente .pallino { box-shadow:0 0 0 4px var(--blu-chiaro); }
.stepper-3 .etichetta { font-size:0.68rem; color:var(--grigio); font-weight:600; text-align:center; line-height:1.1; }
.stepper-3 .step.attivo .etichetta { color:var(--blu); }
.stepper-3 .linea { flex:1; height:3px; background:var(--bordo); border-radius:2px; margin:0 -2px; }
.stepper-3 .linea.piena { background:var(--blu); }
.pannelli .pannello { background:var(--sfondo); border:1px solid var(--bordo); border-radius:10px; padding:12px; }
.pannello-titolo { font-weight:700; font-size:0.95rem; }

/* ---------- Icona dinamica "Stato ordini" (partials/nav_ordini.ejs) ---------- */
.navbar a .ico-stato { position: relative; width: 24px; height: 24px; margin: 0 auto; line-height: 0; }
.navbar a .ico-stato svg { display: block; }
.navbar a .ico-stato .anello { width: 24px; height: 24px; fill: none; }
.navbar a .ico-stato .anello .traccia { stroke: var(--arancio-chiaro); stroke-width: 2.2; }
.navbar a .ico-stato .anello .avanzamento {
  stroke: var(--arancio); stroke-width: 2.2; stroke-linecap: round;
  stroke-dasharray: 65.97; transform: rotate(-90deg); transform-origin: 12px 12px;
  transition: stroke-dashoffset 1s linear;
}
.navbar a .ico-stato .ico-interna {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 12px; color: var(--icona-nav);
}
.navbar a .ico-stato .puntino {
  position: absolute; top: -2px; right: -4px; width: 7px; height: 7px; border-radius: 50%;
  background: var(--arancio); border: 2px solid var(--surface);
  animation: nav-ordini-pulsa 1.6s ease-in-out infinite;
}
.navbar a .ico-stato .furgone {
  display: flex; align-items: center; justify-content: center; height: 24px;
  font-size: 1.35rem; color: var(--icona-nav);
  animation: nav-ordini-oscilla 1.1s ease-in-out infinite;
}
.navbar a .ico-stato .scatola-spenta {
  display: flex; align-items: center; justify-content: center; height: 24px;
  font-size: 1.25rem; color: var(--grigio);
}
.navbar a .ico-stato .badge-eta,
.navbar a .ico-stato .badge-alert {
  position: absolute; top: -5px; left: 50%; margin-left: 6px;
  min-width: 16px; height: 16px; box-sizing: border-box; padding: 0 4px; border-radius: 8px;
  border: 1.5px solid var(--surface); color: #fff;
  font-size: 0.6rem; font-weight: 700; line-height: 13px; text-align: center;
}
.navbar a .ico-stato .badge-eta { background: var(--verde); }
.navbar a .ico-stato .badge-alert { background: var(--rosso); margin-left: 4px; }
.navbar a.nav-ordini .etichetta { font-weight: 700; white-space: nowrap; }
.navbar a.fase-richiesta .etichetta { color: var(--arancio); font-variant-numeric: tabular-nums; }
.navbar a.fase-consegna .etichetta { color: var(--verde); }
.navbar a.fase-scaduta .etichetta { color: var(--rosso); }
@keyframes nav-ordini-pulsa { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.35; transform: scale(0.7); } }
@keyframes nav-ordini-oscilla { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-1.5px); } }
@media (prefers-reduced-motion: reduce) {
  .navbar a .ico-stato .puntino,
  .navbar a .ico-stato .furgone { animation: none; }
  .navbar a .ico-stato .anello .avanzamento { transition: none; }
}

/* ---------- Home installatore (views/home.ejs): ricerca fissa, categorie compatte, scheda di stato ---------- */

:root { --altezza-appbar: calc(52px + env(safe-area-inset-top, 0px)); }

/* "Cosa ti serve?" e la barra di ricerca restano sotto l'appbar quando si scorre. Il blocco esce di 14px
   dai lati di .contenuto così lo sfondo e il bordo coprono tutta la larghezza. */
.home-cliente .ricerca-fissa {
  position: sticky;
  top: var(--altezza-appbar);
  z-index: 15;
  margin: 0 -14px;
  padding: 6px 14px 12px;
  background: var(--sfondo);
  border-bottom: 1px solid var(--bordo);
  box-shadow: 0 6px 10px -8px rgba(35, 32, 25, 0.35);
}
.home-cliente .domanda { margin: 4px 2px 10px; }

.barra-ricerca.barra-home {
  border: 1.5px solid var(--blu);
  padding: 6px 6px 6px 14px;
  margin: 0;
}
/* 16px: sotto, Safari su iPhone ingrandisce la pagina al tocco del campo. */
.barra-ricerca.barra-home input[type="search"] { font-size: 16px; min-width: 0; padding: 6px 0; }
.barra-ricerca.barra-home .btn-cerca { height: 44px; padding: 0 20px; font-size: 16px; font-weight: 700; flex: none; }
/* Cerca con foto / codice a barre: il pulsante c'è, la funzione no (disabilitato, senza handler). */
.barra-ricerca.barra-home .btn-inquadra {
  flex: none;
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 50%;
  background: var(--blu-chiaro);
  color: var(--blu-scuro);
  font-size: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.barra-ricerca.barra-home .btn-inquadra:disabled { opacity: 0.55; cursor: not-allowed; }

/* Il margine è lo spazio che prima occupava la scritta "Categorie" (4 + 20,8 + 8 px): tolta la scritta, resta il vuoto. */
.griglia-categorie { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 33px; }
/* Tessera in colonna (icona sopra, nome sotto): col nome in orizzontale accanto all'icona, a questa grandezza
   restavano ~85px di testo e "Condizionamento" non ci stava. Le tessere di una riga si allungano alla più alta. */
.cat {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 14px 12px;
  min-height: 128px; /* icona + due righe di nome: anche le tessere con un nome solo non restano più basse */
  min-width: 0;
  background: var(--surface);
  border: 1px solid var(--bordo);
  border-radius: 14px;
  color: inherit;
  text-decoration: none;
}
.cat-ico {
  flex: none;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: var(--blu-chiaro);
  color: #1a4468;
  font-size: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cat-ico svg { stroke-width: 1.8; }
.cat .nome {
  min-width: 0;
  width: 100%;
  font-weight: 600;
  font-size: 15px;
  line-height: 1.25;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3; /* tre righe bastano al nome più lungo: nessuno finisce in ellissi */
  overflow: hidden;
  overflow-wrap: break-word;
  hyphens: auto;
}
/* Parola da 15+ lettere ("Condizionamento", 139px a 15px): corpo ridotto invece di spezzarla. Il testo ha 143px a
   375px di schermo, 137px a 360px, 117px a 320px. */
.cat-lunga .nome { font-size: 14px; }
@media (max-width: 360px) {
  .cat .nome { font-size: 14px; }
  .cat-lunga .nome { font-size: 13px; }
}
@media (max-width: 330px) {
  .cat-lunga .nome { font-size: 12px; }
}
@media (min-width: 720px) {
  .griglia-categorie { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
  .cat .nome { font-size: 16px; }
  .cat-lunga .nome { font-size: 16px; }
}

/* Scheda "stato ordine" sopra la ricerca (views/partials/stato_home.ejs). */
.stato-home {
  display: block;
  margin-bottom: 12px;
  padding: 12px 14px;
  border: 1px solid;
  border-radius: 16px;
  color: var(--testo);
  text-decoration: none;
}
.stato-richiesta { background: var(--arancio-chiaro); border-color: #f1c9b3; }
.stato-consegna { background: var(--verde-chiaro); border-color: #bfe0c6; }
.stato-riga { display: flex; align-items: center; gap: 12px; }
.stato-testi { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.stato-occhiello { font-size: 11.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.stato-richiesta .stato-occhiello, .stato-richiesta .stato-sub { color: var(--arancio); }
.stato-consegna .stato-occhiello, .stato-consegna .stato-sub { color: var(--verde); }
.stato-titolo {
  font-family: "Sora", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  font-weight: 700;
  font-size: 16px;
  line-height: 1.25;
}
.stato-consegna .stato-titolo { font-size: 18px; }
.stato-sub { display: flex; align-items: center; gap: 6px; font-size: 13px; line-height: 1.3; }
.stato-sub strong { font-weight: 700; }
.stato-freccia { flex: none; display: flex; color: var(--testo); }

.stato-anello { position: relative; flex: none; width: 56px; height: 56px; }
.stato-anello svg { display: block; width: 56px; height: 56px; }
.stato-anello .traccia { fill: none; stroke: #fff; stroke-width: 4; }
.stato-anello .avanzamento {
  fill: none; stroke: var(--arancio); stroke-width: 4; stroke-linecap: round;
  stroke-dasharray: 150.8; transform: rotate(-90deg); transform-origin: 28px 28px;
  transition: stroke-dashoffset 1s linear;
}
.stato-tempo {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-family: "Sora", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums;
}

.stato-furgone {
  flex: none; width: 56px; height: 56px; border-radius: 50%; background: #fff;
  display: flex; align-items: center; justify-content: center; color: var(--testo);
}
.stato-furgone .furgone { display: flex; font-size: 30px; animation: nav-ordini-oscilla 1.1s ease-in-out infinite; }
.stato-iniziale {
  flex: none; width: 20px; height: 20px; border-radius: 50%; background: var(--verde); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700;
}
.stato-barra { margin-top: 12px; height: 6px; border-radius: 3px; background: #fff; overflow: hidden; }
.stato-barra span { display: block; height: 100%; border-radius: 3px; background: var(--verde); transition: width 0.6s ease; }
.stato-corpo { display: block; color: inherit; text-decoration: none; }
.stato-tappe { display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: center; margin-top: 6px; font-size: 12px; color: var(--grigio); }
.stato-tappe > span:nth-child(2) { text-align: center; }
.stato-tappe > span:nth-child(3) { text-align: right; }

@media (prefers-reduced-motion: reduce) {
  .stato-furgone .furgone { animation: none; }
  .stato-anello .avanzamento, .stato-barra span { transition: none; }
}

/* ---------- Carrello (views/carrello.ejs) ---------- */

/* Altezza della barra di pagamento fissa: serve a lasciare in fondo alla pagina lo spazio che copre. */
:root { --altezza-barra-paga: 96px; }
.app-carrello { padding-bottom: calc(var(--barra-bassa) + env(safe-area-inset-bottom, 0px) + var(--altezza-barra-paga) + 8px + 16px); }

.carrello-testata { display: flex; justify-content: flex-end; margin-bottom: 4px; }
.link-aggiungi {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 2px;
  color: var(--blu); font-size: 15px; font-weight: 600; text-decoration: none;
}

/* Scheda articolo */
.carrello-articolo { padding: 14px; margin-bottom: 12px; }
.art-nome {
  font-family: "Sora", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  font-weight: 700; font-size: 16px; line-height: 1.3; overflow-wrap: anywhere;
}
.art-prezzo { margin-top: 4px; color: var(--grigio); font-size: 14px; }
/* A 320px di larghezza cestino + stepper + totale non stanno in una riga (la colonna della griglia si allargava
   e la pagina scorreva di lato): il totale va a capo, sempre allineato a destra. */
.art-azioni { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; }
.btn-cestino {
  flex: none; width: 44px; height: 44px; padding: 0; border-radius: 50%;
  border: 1px solid var(--bordo); background: var(--surface); color: var(--rosso);
  font-size: 22px; display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.art-azioni .stepper { background: var(--sfondo); }
.art-totale {
  margin-left: auto; white-space: nowrap;
  font-family: "Sora", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  font-weight: 700; font-size: 17px;
}

/* Scheda "Consegna in cantiere" */
.consegna-card { padding: 12px 14px; }
.consegna-riga { display: flex; align-items: center; gap: 12px; }
.consegna-ico {
  flex: none; width: 40px; height: 40px; border-radius: 10px; background: var(--blu-chiaro); color: var(--blu);
  font-size: 22px; display: flex; align-items: center; justify-content: center;
}
.consegna-testo { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.consegna-occhiello { font-size: 11.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--grigio); }
.consegna-via { font-weight: 700; font-size: 16px; line-height: 1.3; overflow-wrap: anywhere; }
.consegna-citta { color: var(--grigio); font-size: 14px; }
.consegna-via:empty, .consegna-citta:empty { display: none; }
.btn-cambia {
  flex: none; min-height: 44px; padding: 0 4px; background: none; border: none;
  color: var(--blu); font-size: 15px; font-weight: 600; cursor: pointer;
}
.consegna-campo { margin-top: 10px; }
.consegna-campo input { margin-bottom: 0; font-size: 16px; }

/* Nota facoltativa: riquadro tratteggiato che si apre sulla textarea */
.nota-dett { margin-bottom: 12px; border: 1.5px dashed rgba(107, 106, 95, 0.45); border-radius: 12px; }
.nota-dett summary {
  display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 10px 14px; cursor: pointer; list-style: none;
}
.nota-dett summary::-webkit-details-marker { display: none; }
.nota-piu { flex: none; width: 16px; color: var(--blu); font-size: 18px; font-weight: 600; line-height: 1; text-align: center; }
.nota-testi { display: flex; flex-direction: column; min-width: 0; }
.nota-titolo { font-weight: 700; font-size: 15px; }
.nota-sotto { color: var(--grigio); font-size: 13px; }
.nota-dett textarea { display: block; width: calc(100% - 28px); margin: 0 14px 14px; font-size: 16px; }

/* Riepilogo costi */
.riepilogo-card { padding: 8px 14px; margin-bottom: 0; }
.carrello-riepilogo .riepilogo-riga.forte { font-size: 17px; font-weight: 700; }

/* "Svuota carrello": in fondo, centrato, link sottolineato in rosso scuro */
.svuota-fondo {
  display: block; margin: 8px auto 0; min-height: 44px; padding: 0 16px; background: none; border: none;
  color: #973030; font-family: inherit; font-size: 15px; text-decoration: underline; cursor: pointer;
}

/* Barra di pagamento fissa, subito sopra la navbar */
.barra-paga {
  position: fixed; left: 0; right: 0; bottom: calc(var(--barra-bassa) + env(safe-area-inset-bottom, 0px) + 8px); z-index: 24;
  background: var(--surface); border-top: 1px solid var(--bordo); box-shadow: 0 -4px 14px rgba(0, 0, 0, 0.08);
  padding: 10px 14px 8px;
}
.barra-paga-interno { max-width: 520px; margin: 0 auto; }
.barra-paga-riga { display: flex; align-items: center; gap: 14px; }
.bp-totale { flex: none; display: flex; flex-direction: column; }
.bp-label { font-size: 12px; color: var(--grigio); }
.bp-importo {
  font-family: "Sora", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  font-weight: 700; font-size: 20px; line-height: 1.15; white-space: nowrap;
}
.btn-paga {
  flex: 1; min-width: 0; height: 52px; padding: 0 12px; border: none; border-radius: 26px;
  background: var(--blu); color: var(--su-blu); font-family: inherit; font-size: 16px; font-weight: 700; cursor: pointer;
}
.btn-paga:active:not(:disabled) { background: var(--blu-scuro); }
.btn-paga:disabled { background: #c9d0d8; cursor: not-allowed; }
.barra-paga-nota {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  margin: 8px 0 0; color: var(--grigio); font-size: 12.5px; line-height: 1.3;
}
.barra-paga-nota .scudo { flex: none; display: flex; color: var(--verde); font-size: 16px; }
@media (min-width: 720px) {
  .barra-paga-interno { max-width: 560px; }
}

/* ---------- Categoria: righe prodotto compatte (views/partials/prodotto_riga.ejs, public/app.js) ---------- */

/* Altezza del pulsante blu "N pezzi · Vai al carrello" sopra la navbar: fondo pagina = navbar + pulsante + aria. */
:root { --altezza-barra-vai: 52px; }
.app-categoria { padding-bottom: calc(var(--barra-bassa) + env(safe-area-inset-bottom, 0px) + var(--altezza-barra-vai) + 10px + 16px); }

/* Un'unica scheda bianca; su telefono a tutta larghezza (esce di 14px dai lati di .contenuto). */
.elenco-righe {
  margin: 12px -14px 0;
  border-radius: 0;
  border-left: none;
  border-right: none;
}

.riga-prod {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-bottom: 1px solid #ece9e2;
}
.riga-prod:last-child { border-bottom: none; }

.riga-prod .riga-foto {
  flex: none;
  width: 56px;
  height: 56px;
  border-radius: 12px;
  object-fit: cover;
  background: #f1efea;
}
.riga-foto-vuota {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #a3a094;
  font-size: 28px;
}

.riga-info { flex: 1; min-width: 0; }
.riga-nome {
  font-family: "Sora", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  font-weight: 600;
  font-size: 14.5px;
  line-height: 1.25;
  overflow: hidden;
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
}
.riga-stato { margin-top: 4px; }
.riga-prezzo {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 5px;
  margin-top: 4px;
  font-family: "Sora", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  font-weight: 700;
  font-size: 16px;
  line-height: 1.3;
  color: var(--testo);
}
.riga-prezzo .iva {
  font-family: "Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  font-weight: 500;
  font-size: 13px;
  color: var(--grigio);
}
.riga-prezzo .barrato {
  font-family: "Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  font-weight: 500;
  font-size: 13px;
  color: #a7a498;
  text-decoration: line-through;
}
.riga-prezzo .raee {
  flex-basis: 100%;
  font-family: "Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  font-weight: 500;
  font-size: 12px;
  color: var(--grigio);
}

/* Riga con misure (data-varianti): a sinistra la foto, a destra in colonna il nome, il blocco "Misura" (chip o
   pulsante, v. .misura) e in fondo, sulla stessa riga, prezzo + IVA a sinistra e stepper a destra: la misura ha
   tutta la larghezza. L'HTML è quello delle righe senza varianti (deve restare uguale a rigaCompattaHtml): .riga-info
   esce dalla griglia (display: contents) e i suoi figli si dispongono direttamente, ognuno nella sua riga. */
.riga-prod[data-varianti] {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) auto;
  gap: 0 12px; /* il gap di 12px della riga flex vale anche fra le righe della griglia: qui no, le distanze sono i margini */
  align-items: start;
}
.riga-prod[data-varianti] .riga-info { display: contents; }
.riga-prod[data-varianti] .riga-foto { grid-column: 1; grid-row: 1 / span 4; }
.riga-prod[data-varianti] .riga-nome { grid-column: 2 / -1; grid-row: 1; }
.riga-prod[data-varianti] .misura { grid-column: 2 / -1; grid-row: 2; }
.riga-prod[data-varianti] .riga-stato { grid-column: 2 / -1; grid-row: 3; }
.riga-prod[data-varianti] .riga-prezzo { grid-column: 2; grid-row: 4; align-self: center; margin-top: 8px; }
.riga-prod[data-varianti] .riga-azioni { grid-column: 3; grid-row: 4; align-self: center; margin-top: 8px; }

.riga-azioni { flex: none; }
.riga-azioni:empty { display: none; }

/* − N +: la quantità è quella già nel carrello. A 0 bordo neutro e numero grigio; sopra 0 bordo e numero blu.
   Il bordo è sempre da 1,5px: cambia solo colore, lo stepper non si sposta. */
.riga-stepper {
  display: flex;
  align-items: center;
  height: 44px;
  padding: 0 2px;
  border: 1.5px solid var(--bordo);
  border-radius: 22px;
  background: #f7f6f2;
}
.riga-stepper.attivo { border-color: var(--blu); }
.riga-stepper.errore { animation: riga-errore 0.7s ease; }
@keyframes riga-errore {
  from { border-color: var(--rosso); background: var(--rosso-chiaro); }
}
.riga-passo {
  position: relative;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--surface);
  color: var(--blu);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
  cursor: pointer;
  touch-action: manipulation; /* due tocchi ravvicinati non zoomano la pagina */
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
/* Il cerchio resta da 40px, ma l'area di tocco arriva a 44px come lo stepper. */
.riga-passo::after { content: ""; position: absolute; inset: -2px; }
.riga-passo:active:not(:disabled) { transform: scale(0.94); }
.riga-passo:disabled { opacity: 0.4; cursor: default; box-shadow: none; }
.riga-qta {
  min-width: 32px;
  padding: 0 2px;
  text-align: center;
  font-family: "Sora", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  font-weight: 600;
  font-size: 16px;
  font-variant-numeric: tabular-nums;
  color: var(--grigio);
}
.riga-stepper.attivo .riga-qta { font-weight: 700; color: var(--blu); }

/* Pulsante blu sopra la navbar: "N pezzi" a sinistra, pillola bianca "Vai al carrello" a destra. Il contenitore
   non intercetta i tocchi: solo il pulsante. */
.barra-vai {
  position: fixed;
  left: 0;
  right: 0;
  bottom: calc(var(--barra-bassa) + env(safe-area-inset-bottom, 0px) + 10px); /* sopra la pillola della navbar */
  z-index: 24;
  padding: 0 12px;
  pointer-events: none;
}
.barra-vai-link {
  pointer-events: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 496px;
  height: var(--altezza-barra-vai);
  margin: 0 auto;
  padding: 0 6px 0 22px;
  border-radius: 26px;
  background: var(--blu);
  color: var(--su-blu);
  text-decoration: none;
  box-shadow: 0 6px 18px rgba(26, 68, 104, 0.35);
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.barra-vai-link:active { background: var(--blu-scuro); }
.bv-pezzi {
  font-family: "Sora", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  font-weight: 700;
  font-size: 16px;
  white-space: nowrap;
}
.bv-pillola {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 40px;
  padding: 0 16px;
  border-radius: 20px;
  background: var(--surface);
  color: var(--blu);
  font-weight: 700;
  font-size: 15.5px;
  white-space: nowrap;
}

@media (min-width: 720px) {
  .elenco-righe { margin: 12px auto 0; max-width: 720px; border-radius: var(--raggio); border: 1px solid var(--bordo); }
  .barra-vai-link { max-width: 560px; }
}

/* ---------- Verifica disponibilità (views/richiesta_attesa.ejs) ---------- */

.att-card { border-radius: 16px; }
.att-occhiello {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--grigio);
}

/* Scheda timer: anello che si svuota in 10 minuti. Lo muove lo stesso timer della navbar
   (nav_ordini.ejs: [data-countdown] e [data-arco] con data-circ), con la stessa formula. */
.att-timer { padding: 24px 16px 18px; text-align: center; }
.att-anello { position: relative; width: 148px; height: 148px; margin: 0 auto 18px; }
.att-anello > svg { display: block; width: 148px; height: 148px; }
.att-anello .traccia { fill: none; stroke: var(--arancio-chiaro); stroke-width: 10; }
.att-anello .avanzamento {
  fill: none; stroke: var(--arancio); stroke-width: 10; stroke-linecap: round;
  stroke-dasharray: 402.12; transform: rotate(-90deg); transform-origin: 74px 74px;
  transition: stroke-dashoffset 1s linear;
}
.att-tempo {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-family: "Sora", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  font-weight: 800; font-size: 31px; line-height: 1; color: var(--testo);
  font-variant-numeric: tabular-nums;
}
.att-titolo {
  display: flex; align-items: center; justify-content: center; gap: 9px; margin: 0 0 18px;
  font-family: "Sora", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  font-weight: 700; font-size: 19px; line-height: 1.25;
}
.att-punto {
  flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--arancio);
  animation: nav-ordini-pulsa 1.6s ease-in-out infinite;
}

/* I tre passaggi: Inviata (fatto) > Conferma banco (corrente) > In consegna */
.att-passi { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.att-passo { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.att-barretta { display: block; height: 5px; border-radius: 3px; background: var(--bordo); }
.att-fatto .att-barretta { background: var(--verde); }
.att-corrente .att-barretta { background: var(--arancio); }
.att-etichetta {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  font-size: 12.5px; line-height: 1.2; font-weight: 600; color: var(--grigio);
}
.att-fatto .att-etichetta { color: var(--verde); font-weight: 700; }
.att-corrente .att-etichetta { color: var(--arancio); font-weight: 700; }
.att-spunta {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; border-radius: 50%; background: var(--verde); color: #fff;
}

/* Banco interpellato: una scheda per banco. L'etichetta di stato è un .stato-badge (lo script della pagina
   ne riscrive testo e classe a ogni aggiornamento): il puntino davanti è un ::before, così resta. */
.att-banco { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 10px 14px; }
.att-icona {
  flex: none; display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 10px; background: #f1efea; color: var(--grigio); font-size: 20px;
}
.att-banco-testo { flex: 1; min-width: 0; }
.att-banco-nome { font-weight: 700; font-size: 16px; line-height: 1.25; overflow-wrap: anywhere; }
#stato-distributori .stato-badge {
  flex: none; display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; font-size: 13px; line-height: 1.2; white-space: nowrap;
}
#stato-distributori .stato-badge::before {
  content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--punto, currentColor);
}
#stato-distributori .stato-in_attesa { background: var(--arancio-chiaro); color: #8a3a14; --punto: var(--arancio); }
#stato-distributori .stato-in_attesa::before { animation: nav-ordini-pulsa 1.6s ease-in-out infinite; }
#stato-distributori .stato-confermato { --punto: var(--verde); }
#stato-distributori .stato-non_disponibile,
#stato-distributori .stato-scaduto { --punto: var(--rosso); }

/* Materiale richiesto e importo pagato */
.att-materiale { padding: 14px 16px; }
.att-righe { list-style: none; margin: 8px 0 0; padding: 0; }
.att-riga { display: flex; align-items: flex-start; gap: 12px; padding: 8px 0; }
.att-qta {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  min-width: 36px; height: 28px; padding: 0 6px; border-radius: 8px;
  background: var(--blu-chiaro); color: #1a4468; font-weight: 700; font-size: 14px;
}
.att-desc { flex: 1; min-width: 0; }
.att-nome { font-size: 15px; font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.att-cod { margin-top: 3px; font-size: 13px; color: var(--grigio); overflow-wrap: anywhere; }
.att-pagato {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 8px; padding-top: 14px; border-top: 1px solid var(--bordo);
}
.att-pagato span { font-size: 14px; color: var(--grigio); }
.att-pagato strong {
  font-family: "Sora", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  font-weight: 700; font-size: 17px;
}

/* "Annulla la richiesta": link centrato, rosso scuro, sottolineato */
.att-annulla {
  display: block; margin: 4px auto 0; min-height: 44px; padding: 0 16px; background: none; border: none;
  color: #8a3a3a; font-family: inherit; font-size: 15px; text-decoration: underline; cursor: pointer;
}

@media (prefers-reduced-motion: reduce) {
  .att-punto, #stato-distributori .stato-in_attesa::before { animation: none; }
  .att-anello .avanzamento { transition: none; }
}

/* ---------- Ordine in consegna (views/ordine_dettaglio.ejs): stessa struttura della verifica disponibilità, in verde ---------- */

.att-verde .att-anello .traccia { stroke: var(--verde-chiaro); }
.att-verde .att-anello .avanzamento { stroke: var(--verde); }
.att-furgone {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 58px; color: var(--testo);
}
.att-furgone > span { display: flex; animation: att-oscilla 1.1s ease-in-out infinite; }
.att-furgone svg { stroke-width: 1.4; }
@keyframes att-oscilla { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }

.att-verde .att-titolo { margin-bottom: 6px; font-size: 22px; font-weight: 800; }
.att-verde .att-titolo.att-titolo-solo { margin-bottom: 18px; }
.att-verde .att-punto { background: var(--verde); }
.att-sotto { margin: 0 0 18px; font-size: 14px; color: var(--grigio); }
.att-sotto strong { color: var(--testo); }

/* "In consegna": la barretta si riempie col tempo trascorso (all'inverso dell'anello) */
.att-verde .att-corrente .att-barretta { overflow: hidden; background: var(--verde-chiaro); }
.att-riempimento { display: block; height: 100%; border-radius: 3px; background: var(--verde); transition: width 1s linear; }
.att-verde .att-corrente .att-etichetta { color: #1f5f2e; }

/* Etichetta "Confermato" della scheda del banco */
.att-chip-ok {
  flex: none; display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px 5px 6px; border-radius: 999px; background: var(--verde-chiaro); color: #1f5f2e;
  font-weight: 600; font-size: 13px; line-height: 1.2; white-space: nowrap;
}

/* Materiale: prezzo di riga a destra e riepilogo dei costi */
.att-prezzo-riga { flex: none; font-weight: 700; font-size: 15px; line-height: 1.3; white-space: nowrap; }
.att-riepilogo { margin: 10px 0 0; padding-top: 10px; border-top: 1px solid var(--bordo); }
.att-voce { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 5px 0; font-size: 14.5px; }
.att-voce dt { margin: 0; color: var(--grigio); }
.att-voce dd { margin: 0; }
.att-voce dd.att-inclusa { color: var(--verde); font-weight: 700; }
.att-totale { margin-top: 6px; padding-top: 12px; border-top: 1px solid var(--bordo); }
.att-totale dt { color: var(--testo); font-weight: 700; font-size: 15px; }
.att-totale dd {
  font-family: "Sora", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  font-weight: 700; font-size: 17px;
}

/* Dettagli consegna e pagamento: <details> chiuso, una riga per voce */
.att-dettagli { padding: 0; }
.att-dettagli summary {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 56px; padding: 10px 16px; font-weight: 700; font-size: 15px; cursor: pointer; list-style: none;
}
.att-dettagli summary::-webkit-details-marker { display: none; }
.att-freccia { flex: none; color: var(--blu); transition: transform 0.2s ease; }
.att-dettagli[open] .att-freccia { transform: rotate(180deg); }
.att-voci { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--bordo); }
.att-dett-riga { display: flex; align-items: flex-start; gap: 12px; padding: 12px 16px; }
.att-dett-riga + .att-dett-riga { border-top: 1px solid var(--bordo); }
.att-dett-riga .att-icona { margin-top: 2px; }
.att-dett-corpo { flex: 1; min-width: 0; }
.att-dett-valore { margin-top: 2px; font-weight: 700; font-size: 15px; line-height: 1.3; overflow-wrap: anywhere; }
.att-dett-nota { font-weight: 600; white-space: pre-line; }
.att-dett-sotto { margin-top: 2px; font-size: 13.5px; color: var(--grigio); }
.att-dett-tempi { display: grid; grid-template-columns: auto 1fr; gap: 3px 14px; margin: 6px 0 0; font-size: 14px; }
.att-dett-tempi dt { margin: 0; color: var(--grigio); }
.att-dett-tempi dd { margin: 0; font-weight: 700; color: var(--testo); }
.att-tag-prova {
  flex: none; align-self: center; padding: 4px 10px; border-radius: 999px;
  background: #fbebc7; color: #8a5a00; font-size: 12.5px; font-weight: 700;
}
.att-apri {
  flex: none; align-self: center; display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; min-height: 44px; padding: 0 4px; color: var(--blu); font-weight: 700; font-size: 15px; text-decoration: none;
}

.att-nota { margin: 4px 4px 12px; font-size: 12.5px; line-height: 1.4; color: var(--grigio); }

@media (prefers-reduced-motion: reduce) {
  .att-furgone > span { animation: none; }
  .att-riempimento, .att-freccia { transition: none; }
}

/* ---------- Richiesta scaduta (views/richiesta_chiusa.ejs): stessa struttura delle altre pagine att-*, in rosso ---------- */

.att-rosso .att-anello .traccia { stroke: var(--rosso-chiaro); }
.att-tempo-spento { color: #b8b4aa; }
/* Pallino d'allarme sul bordo dell'anello, a 45° in alto a destra (centro 119,29 su 148) */
.att-allarme {
  position: absolute; left: 102px; top: 12px; box-sizing: border-box; width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center; border-radius: 50%;
  background: var(--rosso); border: 3px solid var(--surface); color: #fff;
  font-family: "Sora", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  font-weight: 700; font-size: 17px; line-height: 1;
}
.att-rosso .att-titolo { margin-bottom: 6px; }
.att-rosso .att-sotto { margin-bottom: 14px; }

/* Rimborso: pillola verde (o neutra se il rimborso non è ancora avvenuto) */
.att-rimborso-riga { margin: 0 0 18px; }
.att-rimborso {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px 8px 10px; border-radius: 999px;
  background: var(--verde-chiaro); color: #1f5f2e; font-weight: 700; font-size: 15px; line-height: 1.2;
}
.att-rimborso-attesa { padding-left: 16px; background: var(--sfondo); color: var(--grigio); border: 1px solid var(--bordo); }

/* Passaggio corrente "Nessuna risposta": barretta rossa, etichetta rosso scuro con la croce */
.att-rosso .att-corrente .att-barretta { background: var(--rosso); }
.att-rosso .att-corrente .att-etichetta { color: #991b1b; font-weight: 700; }
.att-croce {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; border-radius: 50%; background: var(--rosso); color: #fff;
}

/* Stato del banco: "Nessuna risposta" / "Non disponibile" */
.att-chip-no {
  flex: none; padding: 6px 12px; border-radius: 999px; background: var(--rosso-chiaro); color: #991b1b;
  font-weight: 700; font-size: 13px; line-height: 1.2; white-space: nowrap;
}

/* Riga in fondo alla scheda del materiale */
.att-piede { margin-top: 8px; padding-top: 12px; border-top: 1px solid var(--bordo); font-size: 13px; color: var(--grigio); }

/* "Rinvia richiesta": pulsante blu a tutta larghezza; "Elimina richiesta": link rosso scuro sottolineato */
.att-rinvia {
  display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; height: 54px;
  margin-top: 4px; border: none; border-radius: 27px; background: var(--blu); color: var(--su-blu);
  font-family: inherit; font-size: 17px; font-weight: 700; cursor: pointer;
}
.att-rinvia:active:not(:disabled) { background: var(--blu-scuro); }
.att-rinvia:disabled { background: #c9d0d8; cursor: default; }
.att-elimina {
  display: block; margin: 8px auto 0; min-height: 44px; padding: 0 16px; background: none; border: none;
  color: #8a3a3a; font-family: inherit; font-size: 15px; font-weight: 600; text-decoration: underline; cursor: pointer;
}

/* ---------- Area di tocco minima 44 x 44 px (audit del 05/10/2026) ---------- */

/* Controlli che prima erano fra i 34 e i 42 px di altezza: il cantiere è fatto di guanti e dita sporche. Il
   centraggio del testo è esplicito perché alcuni sono link o inline-block. */
.btn-logout,
.link-discreto,
.paginazione .btn,
.chip {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.link-discreto { display: flex; width: 100%; }
.menu-account .tendina a,
.menu-account .tendina .voce-esci { min-height: 44px; }

/* ---------- Categoria: elenco delle sottocategorie con foto (views/categoria.ejs, ramo senza elenco prodotti) ---------- */

/* Ricerca fissa sotto l'appbar (--altezza-appbar sta nella sezione "Home installatore"). Ha lo sfondo della pagina,
   così le schede che scorrono sotto non si vedono attraverso. */
.ricerca-fissa-sotto {
  position: sticky;
  top: var(--altezza-appbar);
  z-index: 15;
  padding: 12px;
  background: var(--sfondo);
}
.ricerca-fissa-sotto .barra-ricerca { margin: 0; }

/* Il vuoto in fondo lo dà la griglia (sotto): senza la barra "Vai al carrello" quello di .app-categoria è troppo. */
.app-categoria.app-sotto { padding-bottom: 0; }

.griglia-sotto {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 0 12px;
  /* Navbar sospesa (--barra-bassa) + margine: l'ultima riga di schede non resta coperta. In tutto circa 96px. */
  padding-bottom: calc(var(--barra-bassa) + env(safe-area-inset-bottom, 0px) + 24px);
}

.sotto-scheda {
  display: block;
  background: var(--surface);
  border: 1px solid var(--bordo);
  border-radius: 14px;
  overflow: hidden;
  color: var(--testo);
  text-decoration: none;
}
.sotto-scheda:focus-visible { outline: 2px solid var(--blu); outline-offset: 2px; }

/* Riquadro 4:3: sotto, sempre, il fondo grigio con l'icona della categoria madre; la foto (se c'è) ci sta sopra e
   lo copre. Se la foto non si carica l'<img> viene tolta (onerror) e resta il segnaposto: mai un riquadro vuoto. */
.sotto-foto {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 4 / 3;
  background: #e7e3da;
  color: #8a887e;
  font-size: 32px; /* le icone di src/icone.js sono 1em */
}
.sotto-foto img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.sotto-nome {
  display: block;
  padding: 10px 12px 12px;
  font-family: "Sora", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  font-weight: 600;
  font-size: 13.5px;
  line-height: 1.25;
}
/* Il troncamento sta sul <span> interno: con il padding sul blocco che tronca la terza riga si vedrebbe a metà. */
.sotto-testo {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  overflow-wrap: anywhere;
  min-height: 2.5em; /* due righe, così le schede di una riga restano allineate alle altre */
}

/* Da tablet in su tante colonne quante ne stanno (come le categorie in home), nei 1400px del resto delle pagine. */
@media (min-width: 720px) {
  .griglia-sotto {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    max-width: 1400px;
    margin: 0 auto;
    padding-left: 12px;
    padding-right: 12px;
  }
}

/* ---------- La mia anagrafica (views/profilo.ejs): schede in sola lettura ---------- */

/* Il vuoto in fondo è la navbar sospesa + un margine (circa 96px): i ~150px di .app servono alle barre fisse
   di carrello e pagamento, che qui non ci sono. */
.app-anagrafica { padding-bottom: calc(var(--barra-bassa) + env(safe-area-inset-bottom, 0px) + 24px); }

.an-scheda {
  background: var(--surface);
  border: 1px solid var(--bordo);
  border-radius: 16px;
  padding: 16px 14px;
  margin-bottom: 12px;
}
.an-titolo {
  font-family: "Sora", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 15px;
  font-weight: 700;
  margin: 0 0 14px;
}

/* Scheda col nome: cerchio con le iniziali (.avatar, qui sotto), ragione sociale e "referente · tipo". */
.an-nome { display: flex; align-items: center; gap: 14px; }
.an-nome-testi { min-width: 0; }
.an-ragione {
  font-family: "Sora", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.25;
  overflow-wrap: anywhere;
}
.an-sotto { color: var(--grigio); font-size: 14px; margin-top: 2px; overflow-wrap: anywhere; }

/* Una voce: riquadro icona, etichetta in maiuscolo sopra, valore sotto. Le voci si dividono con una linea sottile;
   la prima e l'ultima di una scheda non hanno aria in più. */
.an-riga {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid #ece9e2;
}
.an-titolo + .an-riga { padding-top: 0; }
.an-riga:last-child { border-bottom: none; padding-bottom: 0; }
.an-icona {
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: #f1efea;
  color: var(--testo);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px; /* le icone di src/icone.js sono 1em */
}
.an-icona-blu { width: 44px; height: 44px; border-radius: 12px; background: var(--blu-chiaro); color: var(--blu); font-size: 24px; }
.an-testi { flex: 1; min-width: 0; }
.an-etichetta {
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--grigio);
}
.an-valore { font-size: 15px; font-weight: 700; line-height: 1.35; margin-top: 2px; overflow-wrap: anywhere; }
.an-cifre { font-variant-numeric: tabular-nums; }
.an-dettaglio { color: var(--grigio); font-size: 14px; line-height: 1.35; margin-top: 2px; overflow-wrap: anywhere; }
.an-dettaglio strong { color: var(--testo); }
.an-distributore {
  font-family: "Sora", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

/* Partita IVA, codice fiscale e SDI/PEC: due colonne, senza icona. */
.an-riga.an-fiscali { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; align-items: start; }
.an-fiscali .an-largo { grid-column: 1 / -1; }

.an-nota {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 4px 4px 0;
  color: var(--grigio);
  font-size: 13.5px;
  line-height: 1.45;
}
.an-nota-icona { flex: none; font-size: 18px; line-height: 1; margin-top: 1px; color: var(--blu); }

@media (min-width: 720px) {
  /* Pagina di sola lettura: sui 1400px del resto del sito le schede si allungherebbero senza motivo. */
  .app > .contenuto.anag { max-width: 640px; }
}

/* ---------- Profilo: cerchio con le iniziali, pulsante e menu (views/partials/appbar.ejs, iniziali.ejs) ---------- */

/* Il cerchio è uno solo, in tre misure: pulsante dell'appbar (36), cima del menu (48), pagina anagrafica (56). */
.avatar {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--blu);
  color: #fff;
  font-family: "Sora", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  font-weight: 700;
  line-height: 1;
}
.avatar-36 { width: 36px; height: 36px; font-size: 13px; }
.avatar-40 { width: 40px; height: 40px; font-size: 14px; }
.avatar-48 { width: 48px; height: 48px; font-size: 17px; }
.avatar-56 { width: 56px; height: 56px; font-size: 20px; }
.avatar svg { width: 55%; height: 55%; } /* l'omino, quando non ci sono iniziali */

/* Il pulsante è alto 44px (area di tocco); il cerchio da 36 ha un anello di 3px che ci sta dentro. */
.profilo-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: none;
  cursor: pointer;
}
.profilo-btn .avatar { box-shadow: 0 0 0 3px var(--blu-chiaro); }
.profilo-btn:focus-visible { outline: 2px solid var(--blu); outline-offset: 1px; }

/* Velo e pannello sono fuori dall'appbar (z-index 20) per stare sopra la navbar (25) e le barre fisse (24-29). Il
   velo parte sotto l'intestazione, che resta in luce. L'apertura è una dissolvenza veloce; chiuso è `hidden`. */
.profilo-velo {
  position: fixed;
  top: var(--altezza-appbar);
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 30;
  background: rgba(28, 25, 23, 0.28);
  animation: profilo-dissolvi 150ms ease-out;
}
.profilo-pannello {
  position: fixed;
  top: calc(var(--altezza-appbar) + 6px);
  right: 10px;
  z-index: 31;
  width: 300px;
  max-width: calc(100vw - 20px);
  max-height: calc(100vh - var(--altezza-appbar) - 16px);
  max-height: calc(100dvh - var(--altezza-appbar) - 16px);
  overflow-y: auto;
  padding-bottom: 6px;
  background: var(--surface);
  border-radius: 18px;
  box-shadow: 0 16px 36px rgba(28, 25, 23, 0.22);
  animation: profilo-dissolvi 150ms ease-out;
}
@keyframes profilo-dissolvi { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .profilo-velo, .profilo-pannello { animation: none; }
}
/* Fra 521 e 719px .app è una colonna di 520px al centro: il pannello segue il suo bordo, non quello dello schermo. */
@media (min-width: 521px) and (max-width: 719px) {
  .profilo-pannello { right: calc((100vw - 520px) / 2 + 10px); }
}

.pp-testata { display: flex; align-items: center; gap: 12px; padding: 16px 14px 14px; }
.pp-testi { min-width: 0; }
.pp-ragione {
  font-family: "Sora", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.25;
  overflow-wrap: anywhere;
}
.pp-sotto { color: var(--grigio); font-size: 13.5px; line-height: 1.35; margin-top: 2px; overflow-wrap: anywhere; }
.pp-linea { height: 1px; margin: 0 14px; background: #ece9e2; }

.pp-voce {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 52px;
  margin: 0;
  padding: 0 14px;
  border: none;
  background: none;
  color: var(--testo);
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.pp-voce:hover, .pp-voce:focus-visible { background: var(--sfondo); }
.pp-voce:focus-visible { outline: 2px solid var(--blu); outline-offset: -2px; }
.pp-icona {
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: #f1efea;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 19px; /* le icone di src/icone.js sono 1em */
}
.pp-testo { flex: 1; min-width: 0; }
.pp-freccia { flex: none; color: #a8a69b; font-size: 20px; line-height: 1; }
.pp-form { margin: 0; }
.pp-esci, .pp-esci .pp-testo { color: #a33232; }
.pp-esci .pp-icona { background: var(--rosso-chiaro); color: #a33232; }

/* ---------- Storico ordini (views/storico.ejs, partials/storico_scheda.ejs) ---------- */

/* Come .app-anagrafica: in fondo solo la navbar sospesa + un margine (circa 96px). */
.app-storico { padding-bottom: calc(var(--barra-bassa) + env(safe-area-inset-bottom, 0px) + 24px); }

.st-titolo {
  margin: 8px 2px 10px;
  font-family: "Sora", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #5c5b52;
}

.st-scheda {
  background: var(--surface);
  border: 1px solid var(--bordo);
  border-radius: 16px;
  margin-bottom: 10px;
}
.st-link {
  display: block;
  padding: 12px 14px;
  border-radius: 16px;
  color: inherit;
  text-decoration: none;
}
.st-link:focus-visible { outline: 2px solid var(--blu); outline-offset: -2px; }

.st-alto { display: flex; align-items: center; gap: 12px; }
.st-icona {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px; /* le icone di src/icone.js sono 1em */
}
.st-testi { flex: 1; min-width: 0; }
.st-data { display: block; color: var(--grigio); font-size: 13px; line-height: 1.3; }
.st-articoli {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  margin-top: 2px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
  overflow-wrap: anywhere;
}
.st-altri { color: var(--grigio); font-weight: 600; }

.st-basso {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid #ece9e2;
}
.st-stato {
  flex: none;
  padding: 3px 9px;
  border-radius: 10px;
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.3;
  white-space: nowrap;
}
.st-banco {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--grigio);
  font-size: 13px;
}
.st-importo {
  flex: none;
  margin-left: auto;
  font-family: "Sora", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 15px;
  font-weight: 700;
  white-space: nowrap;
}

/* Colori per stato: riquadro dell'icona (.st-icona) ed etichetta (.st-stato) */
.st-icona.st-consegna, .st-icona.st-consegnato { background: var(--verde-chiaro); color: var(--verde); }
.st-icona.st-attesa { background: var(--arancio-chiaro); color: var(--arancio); }
.st-icona.st-nessuna { background: var(--rosso-chiaro); color: var(--rosso); }
.st-icona.st-annullata { background: #ece9e2; color: var(--grigio); }
.st-stato.st-consegna, .st-stato.st-consegnato { background: var(--verde-chiaro); color: #1f5f2e; }
.st-stato.st-attesa { background: var(--arancio-chiaro); color: #8a3c16; }
.st-stato.st-nessuna { background: var(--rosso-chiaro); color: #991b1b; }
.st-stato.st-annullata { background: #ece9e2; color: #3f3e38; }

.st-riordina { margin: 0; padding: 0 14px 12px; }
.st-btn-riordina {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 18px;
  border: 1.5px solid var(--blu);
  border-radius: 20px;
  background: var(--surface);
  color: var(--blu);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}
.st-btn-riordina svg { font-size: 18px; }
/* Area di tocco di almeno 44px: il pulsante è 40px, il resto lo dà questa estensione invisibile. */
.st-btn-riordina::after { content: ""; position: absolute; inset: -2px; }
.st-btn-riordina:hover { background: var(--blu-chiaro); }
.st-btn-riordina:focus-visible { outline: 2px solid var(--blu); outline-offset: 2px; }

/* ---------- Accesso, registrazione e benvenuto (views/login.ejs, registrati.ejs, benvenuto.ejs) ---------- */

/* Pagine a tutta altezza: il pulsante o il link finale stanno in fondo allo schermo (margin-top: auto). */
.acc {
  display: flex;
  flex-direction: column;
  max-width: 460px;
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0 auto;
  padding: 28px 20px calc(24px + env(safe-area-inset-bottom, 0px));
}

/* Testata dell'accesso */
.acc-icona {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  margin-bottom: 14px;
  border-radius: 16px;
  background: var(--blu);
  color: var(--su-blu);
  font-size: 26px; /* le icone di src/icone.js sono 1em */
  box-shadow: 0 6px 16px rgba(36, 90, 143, 0.28);
}
.acc-occhiello {
  font-family: "Sora", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--blu);
}
.acc-titolo {
  margin: 6px 0 10px;
  font-size: 28px;
  font-weight: 800;
  line-height: 1.15;
}
.acc-sotto { margin: 0 0 24px; color: var(--grigio); font-size: 15px; line-height: 1.45; }

/* Accedi / Registrati: controllo a pillola. Il link è alto 42px; ::after porta l'area di tocco a 48px. */
.acc-schede {
  display: flex;
  gap: 4px;
  margin-bottom: 22px;
  padding: 4px;
  border-radius: 14px;
  background: #e6e2d9;
}
.acc-schede a {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 42px;
  border-radius: 11px;
  color: var(--grigio);
  font-weight: 700;
  text-decoration: none;
}
.acc-schede a::after { content: ""; position: absolute; inset: -3px 0; }
.acc-schede a.attiva { background: #fff; color: var(--testo); box-shadow: 0 1px 3px rgba(35, 32, 25, 0.16); }
.acc-schede a:focus-visible { outline: 2px solid var(--blu); outline-offset: 1px; }

/* Campi: stessi in tutti i moduli (font a 16px: sotto, Safari su iPhone ingrandisce la pagina al tocco) */
.acc-campo { margin-bottom: 18px; }
.acc-campo > label, .acc-etichetta { display: block; margin: 0 0 6px; font-size: 14px; font-weight: 700; }
.acc-campo input[type="text"], .acc-campo input[type="email"], .acc-campo input[type="tel"], .acc-campo input[type="password"] {
  display: block;
  width: 100%;
  height: 52px;
  margin: 0;
  padding: 0 16px;
  border: 1.5px solid #d6d1c6;
  border-radius: 14px;
  background: #fff;
  color: var(--testo);
  font-family: inherit;
  font-size: 16px;
}
.acc-campo input::placeholder { color: #8a897e; opacity: 1; }
.acc-campo input:focus { outline: none; border-color: var(--blu); box-shadow: 0 0 0 3px var(--blu-chiaro); }
.acc-campo.sbagliato input[type="text"], .acc-campo.sbagliato input[type="email"],
.acc-campo.sbagliato input[type="tel"], .acc-campo.sbagliato input[type="password"] { border-color: var(--rosso); }
.acc-hint { margin: 6px 0 0; color: var(--grigio); font-size: 13px; line-height: 1.35; }

/* Password con l'occhio: il pulsante è 44px, dentro il campo a destra */
.acc-pwd { position: relative; }
.acc-campo .acc-pwd input { padding-right: 52px; }
.acc-occhio {
  position: absolute;
  top: 4px;
  right: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: none;
  color: #5c5b52;
  font-size: 22px;
  cursor: pointer;
}
.acc-occhio:focus-visible { outline: 2px solid var(--blu); outline-offset: -2px; }
.acc-occhio-off, .acc-occhio[aria-pressed="true"] .acc-occhio-on { display: none; }
.acc-occhio[aria-pressed="true"] .acc-occhio-off { display: inline; }

/* Pulsante principale (anche come link, nel benvenuto) */
.acc-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 54px;
  margin: 0;
  border: 0;
  border-radius: 27px;
  background: var(--blu);
  color: var(--su-blu);
  font-family: inherit;
  font-size: 17px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}
.acc-btn:hover { background: var(--blu-scuro); }
.acc-btn:focus-visible { outline: 2px solid var(--blu); outline-offset: 3px; }

/* In fondo allo schermo: la riga con il link all'altro modulo */
.acc-fondo { margin: auto 0 0; padding-top: 28px; text-align: center; color: var(--grigio); font-size: 15px; }
.acc-fondo a, .reg-accedi a { display: inline-block; padding: 12px 2px; margin: -12px 0; font-weight: 700; text-decoration: none; }
.acc .errore { margin-bottom: 18px; }
.errore-elenco { margin: 6px 0 0; padding-left: 18px; }

/* Registrazione a tre passi. Senza script i tre fieldset si vedono tutti, uno sotto l'altro, e la barra di avanzamento
   non c'è; con lo script (data-passi) se ne vede uno alla volta. La fascia con "Avanti" è fissa in fondo. */
.reg { padding-bottom: 150px; }
.reg-testata { display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; margin-bottom: 14px; }
.reg-indietro {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #fff;
  color: var(--blu);
  font-size: 24px;
  box-shadow: 0 1px 4px rgba(35, 32, 25, 0.16);
  text-decoration: none;
}
.reg-indietro:focus-visible { outline: 2px solid var(--blu); outline-offset: 2px; }
.reg-titolo-pagina {
  grid-column: 2;
  text-align: center;
  font-family: "Sora", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 16px;
  font-weight: 700;
}
.reg-avanzamento { display: none; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 20px; }
.reg[data-passi] .reg-avanzamento { display: grid; }
.reg-avanzamento span { height: 5px; border-radius: 3px; background: #d6d1c6; }
.reg-avanzamento span.fatto { background: var(--blu); }

.reg-passo { min-width: 0; margin: 0 0 28px; padding: 0; border: 0; }
.reg-passo-testa { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.reg-passo-testa h2 {
  margin: 0;
  font-family: "Sora", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 24px;
  font-weight: 800;
}
.reg-passo-testa span { flex: none; color: var(--grigio); font-size: 13px; }

.reg-tipi { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.reg-tipo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: 0;
  height: 52px;
  margin: 0;
  padding: 0 8px;
  border: 1.5px solid #d6d1c6;
  border-radius: 14px;
  background: #fff;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
}
.reg-tipo input { flex: none; width: 18px; height: 18px; margin: 0; accent-color: var(--blu); }
.reg-tipo:has(input:checked) { border-color: var(--blu); background: var(--blu-chiaro); color: var(--blu-scuro); }
.reg-tipo:has(input:focus-visible) { outline: 2px solid var(--blu); outline-offset: 2px; }
.acc-campo.sbagliato .reg-tipo { border-color: var(--rosso); }

/* CAP, Città e Prov. sulla stessa riga */
.reg-riga-citta { display: grid; grid-template-columns: 96px minmax(0, 1fr) 72px; gap: 10px; }
.reg-nota-fiscale { margin: 4px 0 0; color: var(--grigio); font-size: 13px; line-height: 1.4; }

.reg-barra {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  padding: 12px 20px calc(10px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid rgba(35, 32, 25, 0.08);
  background: var(--sfondo);
}
.reg-barra-in { max-width: 420px; margin: 0 auto; }
.reg-accedi { margin: 12px 0 0; text-align: center; color: var(--grigio); font-size: 14px; }
/* Schermi bassi (tastiera aperta in orizzontale): la fascia non deve mangiare il modulo */
@media (max-height: 520px) {
  .reg { padding-bottom: 24px; }
  .reg-barra { position: static; padding: 4px 0 0; border: 0; }
}

/* Benvenuto dopo la registrazione */
.ben { padding-top: 72px; }
.ben-alto { text-align: center; }
.ben-alone {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 96px;
  height: 96px;
  margin: 0 auto 24px;
  border-radius: 50%;
  background: var(--verde-chiaro);
}
.ben-cerchio {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--verde);
  color: #fff;
  font-size: 34px;
}
.ben-cerchio svg { stroke-width: 2.6; }
.ben-titolo { margin: 0 0 10px; font-size: 26px; font-weight: 800; line-height: 1.15; text-wrap: balance; }
.ben-sotto { margin: 0; color: var(--grigio); font-size: 16px; line-height: 1.45; }
.ben-sotto strong { color: var(--testo); }
.ben-scheda {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 28px;
  padding: 14px;
  border: 1px solid var(--bordo);
  border-radius: 16px;
  background: var(--surface);
  text-align: left;
}
.ben-icona {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--blu-chiaro);
  color: var(--blu);
  font-size: 24px;
}
.ben-scheda > div { min-width: 0; }
.ben-etichetta { color: #5c5b52; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.ben-nome { margin-top: 2px; font-size: 17px; font-weight: 700; overflow-wrap: anywhere; }
.ben-nota { margin: 12px 4px 0; color: var(--grigio); font-size: 14px; line-height: 1.4; text-align: left; }
.ben-azioni { margin-top: auto; padding-top: 32px; text-align: center; }
.ben-link { display: inline-block; margin-top: 4px; padding: 14px 8px; font-size: 15px; font-weight: 700; text-decoration: none; }

/* ---------- Clienti del banco (views/distributore_clienti.ejs, distributore_cliente.ejs; classi cli-*) ---------- */

/* Pagine interne del banco con l'intestazione unica (partials/banco_testa.ejs) e un contenuto largo al massimo 1120px
   (1168px con i 24px di margine per lato). Il cerchio con le iniziali (partials/iniziali.ejs, parametro `tono`) può
   essere arancio (da verificare) o grigio (rifiutato); il blu è quello di sempre. */
.pagina-clienti {
  --cli-sora: "Sora", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --cli-bordo-arancio: #f1c9b3;
  --cli-testo-arancio: #8a3a14;
  --cli-testo-verde: #1f5f2e;
  --cli-testo-rosso: #a33232;
  --cli-bordo-rosso: #e8b4b4;
  --cli-bordo-campo: #d6d1c6;
}
.avatar-arancio { background: var(--arancio); }
.avatar-grigio { background: var(--grigio); }

.cli-pagina {
  max-width: 1168px;
  margin: 0 auto;
  padding: 24px max(24px, env(safe-area-inset-right, 0px)) 56px max(24px, env(safe-area-inset-left, 0px));
}
/* La pagina di un cliente approvato ha la barra fissa "Salva gli sconti": serve spazio per non coprire il fondo. */
.cli-pagina.cli-con-barra { padding-bottom: 112px; }

/* Etichette di stato (DA VERIFICARE, APPROVATO, RIFIUTATO). */
.cli-etichetta {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1.3;
  text-transform: uppercase;
  white-space: nowrap;
}
.cli-etichetta-arancio { background: var(--arancio-chiaro); color: var(--cli-testo-arancio); }
.cli-etichetta-verde { background: var(--verde-chiaro); color: var(--cli-testo-verde); }
.cli-etichetta-rosso { background: var(--rosso-chiaro); color: var(--cli-testo-rosso); }
.cli-grigio { color: var(--grigio); }
.cli-cifre { font-variant-numeric: tabular-nums; }

/* ----- Elenco ----- */

.cli-testata { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 24px; }
.cli-titolo { margin: 0; font-family: var(--cli-sora); font-size: 28px; font-weight: 800; line-height: 1.2; }
.cli-cerca { position: relative; flex: 0 1 380px; min-width: 0; }
.cli-cerca-ico {
  position: absolute;
  top: 50%;
  left: 16px;
  display: inline-flex;
  transform: translateY(-50%);
  color: var(--testo);
  font-size: 20px;
  pointer-events: none;
}
.cli-cerca input[type="search"] {
  display: block;
  width: 100%;
  height: 46px;
  margin: 0;
  padding: 0 18px 0 46px;
  border: 1px solid var(--bordo);
  border-radius: 23px;
  background: var(--surface);
  color: var(--testo);
  font-size: 16px; /* sotto i 16px Safari su iPhone ingrandisce la pagina al tocco */
}
.cli-cerca input[type="search"]::placeholder { color: var(--grigio); opacity: 1; }
.cli-cerca input[type="search"]:focus { border-color: var(--blu); outline: 2px solid var(--blu); outline-offset: 1px; }

.cli-nessuno { margin: 8px 0 24px; padding: 32px 16px; color: var(--grigio); font-size: 16px; text-align: center; }
.cli-vuoto {
  margin: 0;
  padding: 28px 16px;
  border: 1px solid var(--bordo);
  border-radius: 16px;
  background: var(--surface);
  color: var(--grigio);
  text-align: center;
}

.cli-sezione { margin-bottom: 32px; }
.cli-sezione-testa { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 12px; margin-bottom: 12px; }
.cli-sezione-titolo { margin: 0; font-family: var(--cli-sora); font-size: 18px; font-weight: 700; line-height: 1.3; }
.cli-pillola {
  min-width: 28px;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--arancio-chiaro);
  color: var(--cli-testo-arancio);
  font-family: var(--cli-sora);
  font-size: 14px;
  font-weight: 800;
  line-height: 1.2;
  text-align: center;
}
.cli-conta { color: var(--grigio); font-family: var(--cli-sora); font-size: 14px; font-weight: 600; }
.cli-sezione-nota { color: var(--grigio); font-size: 14px; }

.cli-richieste, .cli-tab-corpo { margin: 0; padding: 0; list-style: none; }
.cli-richieste { display: flex; flex-direction: column; gap: 12px; }

/* Cliente da approvare: scheda con bordo arancio, cerchio con le iniziali, dati e pulsante "Verifica". */
.cli-richiesta {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  border: 1.5px solid var(--cli-bordo-arancio);
  border-radius: 16px;
  background: var(--surface);
  box-shadow: 0 3px 12px rgba(171, 77, 36, 0.1);
}
.cli-richiesta-corpo { flex: 1; min-width: 0; }
.cli-richiesta-nome { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; }
.cli-richiesta-nome strong { font-size: 17px; font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; }
.cli-richiesta-dati { display: flex; flex-wrap: wrap; gap: 2px 24px; margin-top: 6px; color: #4f4d44; font-size: 15px; }
.cli-richiesta-dati strong { color: var(--testo); font-weight: 700; font-variant-numeric: tabular-nums; }
.cli-verifica {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 48px;
  padding: 0 22px;
  border-radius: 24px;
  background: var(--arancio);
  color: #fff;
  font-family: var(--cli-sora);
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
}
.cli-verifica svg { width: 18px; height: 18px; vertical-align: 0; }
.cli-verifica:hover { background: #963f1c; }
.cli-verifica:focus-visible { outline: 3px solid var(--blu); outline-offset: 2px; }

/* Clienti approvati (e non riconosciuti): una scheda con la tabella. Su schermo largo cinque colonne, sotto i 900px
   righe impilate: nome sopra, codice · città · ultimo ordine sotto (.cli-c-meta passa da display: contents a flex). */
.cli-tabella { overflow: hidden; border: 1px solid var(--bordo); border-radius: 16px; background: var(--surface); }
.cli-tab-testa, .cli-tab-riga {
  display: grid;
  grid-template-columns: minmax(0, 2.2fr) minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr) 40px;
  align-items: center;
  column-gap: 16px;
  padding-right: 20px;
  padding-left: 20px;
}
.cli-tab-testa {
  min-height: 44px;
  border-bottom: 1px solid var(--bordo);
  color: var(--grigio);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.cli-tab-riga {
  min-height: 64px;
  padding-top: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--bordo);
  color: var(--testo);
  font-size: 15px;
  text-decoration: none;
}
.cli-tab-corpo li:last-child .cli-tab-riga { border-bottom: none; }
.cli-tab-riga:hover { background: #faf9f6; }
.cli-tab-riga:focus-visible { outline: 2px solid var(--blu); outline-offset: -2px; }
.cli-c-cliente { display: flex; align-items: center; gap: 12px; min-width: 0; }
.cli-nome { min-width: 0; overflow: hidden; font-size: 16px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.cli-c-meta { display: contents; }
.cli-c-codice, .cli-c-citta, .cli-c-ordine { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cli-c-codice, .cli-c-ordine { font-variant-numeric: tabular-nums; }
.cli-c-freccia { display: flex; justify-content: flex-end; color: #8f8d82; font-size: 18px; }
.cli-solo-stretta { display: none; }

/* ----- Pagina del cliente ----- */

.cli-indietro {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  min-height: 44px;
  margin: 0 0 8px -6px;
  padding-right: 12px;
  color: var(--blu);
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
}
.cli-indietro svg { font-size: 20px; }
.cli-indietro:hover { text-decoration: underline; }
.cli-indietro:focus-visible { outline: 2px solid var(--blu); outline-offset: 1px; border-radius: 8px; }
.cli-avviso { margin-bottom: 16px; }

.cli-intesta { display: flex; align-items: center; gap: 16px; margin-bottom: 24px; }
.cli-intesta-testi { min-width: 0; }
.cli-intesta-riga { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; }
.cli-nome-grande { margin: 0; font-family: var(--cli-sora); font-size: 28px; font-weight: 800; line-height: 1.15; overflow-wrap: anywhere; }
.cli-intesta-sotto { margin: 4px 0 0; color: var(--grigio); font-size: 15px; }

.cli-layout { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.cli-colonna { display: flex; flex-direction: column; gap: 16px; min-width: 0; }

.cli-scheda { padding: 18px 20px; border: 1px solid var(--bordo); border-radius: 16px; background: var(--surface); }
.cli-scheda-titolo { margin: 0 0 14px; font-family: var(--cli-sora); font-size: 18px; font-weight: 700; line-height: 1.3; }

.cli-dati { display: grid; gap: 16px 20px; margin: 0; }
.cli-dati-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cli-dati-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cli-dati-1 { grid-template-columns: minmax(0, 1fr); }
.cli-dato { min-width: 0; }
.cli-dato dd { margin: 0; }
.cli-dato-eti {
  display: block;
  margin: 0 0 4px;
  color: var(--grigio);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.cli-dato-val { display: block; font-size: 16px; font-weight: 700; line-height: 1.35; overflow-wrap: anywhere; }
.cli-dato-det { display: block; margin-top: 2px; color: var(--grigio); font-size: 14px; }
.cli-dato-note { font-weight: 400; white-space: pre-line; }

.cli-vies {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 44px;
  margin-top: 2px;
  color: var(--blu);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}
.cli-vies:hover { text-decoration: underline; }
.cli-vies svg { font-size: 14px; }
.cli-linea { margin: 4px 0 16px; border: 0; border-top: 1px solid var(--bordo); }

.cli-contatti { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.cli-contatto {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  min-height: 56px;
  padding: 10px 14px;
  border: 1px solid var(--bordo);
  border-radius: 14px;
  color: var(--testo);
  text-decoration: none;
}
.cli-contatto:hover { background: #faf9f6; }
.cli-contatto:focus-visible { outline: 2px solid var(--blu); outline-offset: 1px; }
.cli-contatto-ico {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--blu-chiaro);
  color: var(--blu);
  font-size: 18px;
}
.cli-contatto-testi { flex: 1; min-width: 0; }
.cli-contatto-val { display: block; overflow: hidden; font-size: 16px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }

/* "È un tuo cliente?": resta in alto mentre si scorre. top = 64px dell'intestazione (anch'essa sticky) + 16px. */
.cli-decisione {
  position: sticky;
  top: 80px;
  padding: 20px;
  border: 1.5px solid var(--bordo);
  border-radius: 16px;
  background: var(--surface);
  box-shadow: 0 6px 20px rgba(35, 32, 25, 0.07);
}
.cli-decisione h2 { margin: 0 0 6px; font-family: var(--cli-sora); font-size: 20px; font-weight: 800; line-height: 1.25; }
.cli-decisione > p { margin: 0 0 18px; color: var(--grigio); font-size: 14px; line-height: 1.4; overflow-wrap: anywhere; }
.cli-campo-eti { display: block; margin: 0 0 6px; font-size: 14px; font-weight: 700; }
.cli-campo-eti span { color: var(--grigio); font-weight: 400; }
.cli-decisione .cli-campo {
  display: block;
  width: 100%;
  height: 48px;
  margin: 0 0 16px;
  padding: 0 14px;
  border: 1.5px solid var(--cli-bordo-campo);
  border-radius: 12px;
  background: var(--surface);
  color: var(--testo);
  font-family: inherit;
  font-size: 16px;
}
.cli-decisione textarea.cli-campo { height: auto; padding: 12px 14px; line-height: 1.4; resize: vertical; }
.cli-decisione .cli-campo:focus { border-color: var(--blu); outline: 2px solid var(--blu); outline-offset: 1px; }
.cli-decisione .cli-campo::placeholder { color: var(--grigio); opacity: 1; }

.cli-approva, .cli-rifiuta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  margin: 0;
  border-radius: 999px;
  font-family: var(--cli-sora);
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
}
.cli-approva svg, .cli-rifiuta svg { font-size: 20px; vertical-align: 0; }
.cli-approva { height: 52px; border: none; background: var(--verde); color: #fff; }
.cli-approva:hover { background: #236a33; }
.cli-rifiuta { height: 46px; margin-top: 12px; border: 1.5px solid var(--cli-bordo-rosso); background: var(--surface); color: var(--cli-testo-rosso); }
.cli-rifiuta:hover { background: var(--rosso-chiaro); }
.cli-approva:focus-visible, .cli-rifiuta:focus-visible { outline: 3px solid var(--blu); outline-offset: 2px; }
.cli-approva:disabled, .cli-rifiuta:disabled { opacity: 0.6; cursor: default; }

/* Cliente approvato: codice, note e sconti nella colonna destra. */
.cli-nota { margin: 12px 0 0; color: var(--grigio); font-size: 14px; line-height: 1.45; }
.cli-sotto-titolo { margin: 20px 0 8px; font-family: var(--cli-sora); font-size: 15px; font-weight: 700; }
.cli-elenco-sconti { overflow: hidden; border: 1px solid var(--bordo); border-radius: 12px; }
.cli-salva { flex: 1; }

/* Da schermo largo il menu in basso non c'è: la barra del salvataggio sta in fondo e allineata al contenuto. */
@media (min-width: 900px) {
  .pagina-clienti .barra-azione { bottom: 0; padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)); }
  .pagina-clienti .barra-azione .interno { max-width: 1120px; padding: 0 24px; }
  .cli-salva { flex: 0 0 auto; min-width: 280px; margin-left: auto; }
}

/* Sotto i 900px (menu in basso): colonne una sotto l'altra, prima la decisione poi i dati; tabella a righe impilate. */
@media (max-width: 899.98px) {
  .cli-pagina { padding-top: 16px; padding-bottom: calc(var(--barra-bassa) + 32px); }
  .cli-pagina.cli-con-barra { padding-bottom: calc(var(--barra-bassa) + 104px); }
  .cli-layout { grid-template-columns: minmax(0, 1fr); }
  .cli-layout-decisione .cli-colonna-destra { order: -1; }
  .cli-decisione { position: static; }

  .cli-tab-testa { display: none; }
  .cli-tab-riga {
    grid-template-columns: minmax(0, 1fr) 24px;
    grid-template-areas: "cliente freccia" "meta freccia";
    row-gap: 2px;
    padding: 12px 16px;
  }
  .cli-c-cliente { grid-area: cliente; }
  .cli-c-meta { display: flex; flex-wrap: wrap; grid-area: meta; padding-left: 52px; color: var(--grigio); font-size: 14px; }
  .cli-c-meta > * + *::before { content: "·"; margin: 0 6px; }
  .cli-c-codice, .cli-c-citta, .cli-c-ordine { overflow: visible; text-overflow: clip; }
  .cli-c-codice.cli-c-manca { display: none; }
  .cli-c-codice.cli-c-manca + .cli-c-citta::before { content: none; }
  .cli-c-freccia { grid-area: freccia; }
  .cli-solo-stretta { display: inline; }
}

@media (max-width: 639.98px) {
  .cli-testata { flex-direction: column; align-items: stretch; gap: 12px; }
  .cli-cerca { flex: 0 0 auto; }
  .cli-richiesta { flex-wrap: wrap; padding: 16px; }
  .cli-richiesta-corpo { flex: 1 1 calc(100% - 64px); }
  .cli-richiesta-dati { gap: 2px 16px; }
  .cli-verifica { width: 100%; }
}

@media (max-width: 559.98px) {
  /* Sul telefono codice · città non lasciano posto all'ultimo ordine: va sulla riga sotto, senza "·" a inizio riga. */
  .cli-c-ordine { flex-basis: 100%; }
  .cli-c-meta > .cli-c-ordine::before { content: none; }
  .cli-dati-3, .cli-dati-2, .cli-contatti { grid-template-columns: minmax(0, 1fr); }
  .cli-intesta { gap: 12px; }
  .cli-nome-grande { font-size: 24px; }
  .cli-pagina { padding-right: max(16px, env(safe-area-inset-right, 0px)); padding-left: max(16px, env(safe-area-inset-left, 0px)); }
}

/* ---------- Pagamento (views/pagamento.ejs, public/pagamento.js; classi pag-*) ---------- */

/* Pagina senza barra in basso: niente spazio per la navbar. */
.app-pagamento { padding-bottom: 32px; }
@media (min-width: 720px) {
  .app > .contenuto.pag { max-width: 560px; }
}
.pag-scheda {
  padding: 18px 16px 16px;
  border: 1px solid var(--bordo);
  border-radius: 16px;
  background: var(--surface);
}
.pag-testa { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.pag-totale { display: flex; flex-direction: column; }
.pag-label { color: var(--grigio); font-size: 12px; }
.pag-importo {
  font-family: "Sora", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 26px;
  font-weight: 700;
  line-height: 1.15;
  white-space: nowrap;
}
.pag-riepilogo { color: var(--grigio); font-size: 14px; }
/* Il form di Stripe ha già la sua altezza: lo spazio riservato evita che la pagina salti quando arriva. */
.pag-elemento { min-height: 120px; margin-bottom: 14px; }
.pag-errore { margin: 0 0 12px; }
.pag-paga { width: 100%; }
.pag-torna {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  margin-top: 12px;
  color: var(--blu);
  font-weight: 600;
  text-decoration: none;
}
.pag-torna:hover { text-decoration: underline; }
/* Sul telefono il form di Stripe vuole almeno ~330px (sotto, "scadenza / CVC" e i loghi delle carte vengono tagliati):
   pagina e scheda un po' più strette, il form esce di 8px da ogni lato del padding della scheda. */
@media (max-width: 480px) {
  .contenuto.pag { padding-left: 10px; padding-right: 10px; }
  .pag-elemento { margin-left: -8px; margin-right: -8px; }
}

/* ---------- Pagine vuote dell'installatore: Stato ordini (views/ordini_cliente.ejs) e Carrello (views/carrello.ejs) ---------- */

/* In fondo solo la navbar sospesa + un margine (circa 96px), come .app-storico: non i ~150px di .app, pensati per le barre fisse. */
.app-vuoto { padding-bottom: calc(var(--barra-bassa) + env(safe-area-inset-bottom, 0px) + 24px); }

.contenuto.vuoto-pagina {
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding: 28px 16px 0;
}
.vuoto-pagina > .avviso { margin-bottom: 0; }

/* Figura: cerchio da 112px con l'icona da 46px a tratto sottile e, dentro, un cerchio tratteggiato decorativo. */
.vuoto-fig {
  position: relative;
  flex: none;
  align-self: center;
  width: 112px;
  height: 112px;
  border-radius: 50%;
  background: var(--blu-chiaro);
  color: var(--blu);
  font-size: 46px; /* le icone di src/icone.js sono 1em */
  display: flex;
  align-items: center;
  justify-content: center;
}
.vuoto-fig svg { stroke-width: 1.3; vertical-align: 0; }
.vuoto-fig-tratt {
  position: absolute;
  inset: 14px;
  border: 2px dashed var(--blu);
  border-radius: 50%;
  opacity: 0.35;
}

.vuoto-testa { text-align: center; }
.vuoto-titolo {
  margin: 0;
  font-size: 22px;
  font-weight: 800;
  line-height: 1.25;
  color: var(--testo);
}
.vuoto-sotto {
  max-width: 300px;
  margin: 8px auto 0;
  color: var(--grigio);
  font-size: 15px;
  line-height: 1.4;
}

/* "Come funziona" */
.cf-scheda {
  background: var(--surface);
  border: 1px solid var(--bordo);
  border-radius: 16px;
  padding: 16px;
}
.cf-occhiello {
  margin: 0 0 14px;
  color: var(--grigio);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.2;
  text-transform: uppercase;
}
.cf-passi { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.cf-passo { display: flex; align-items: center; gap: 12px; }
.cf-ico {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
}
.cf-blu { background: var(--blu-chiaro); color: var(--blu); }
.cf-arancio { background: var(--arancio-chiaro); color: var(--arancio); }
.cf-verde { background: var(--verde-chiaro); color: var(--verde); }
.cf-testi { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.cf-testi strong { font-size: 15px; font-weight: 700; line-height: 1.3; }
.cf-testi span { color: var(--grigio); font-size: 13.5px; line-height: 1.35; }

/* Pulsanti a tutta larghezza: pieno (Stato ordini) e a contorno (Carrello). Alti più di 44px. */
.btn-vuoto-pieno, .btn-vuoto-bordo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}
.btn-vuoto-pieno svg, .btn-vuoto-bordo svg { font-size: 22px; flex: none; }
.btn-vuoto-pieno {
  min-height: 54px;
  border-radius: 27px;
  background: var(--blu);
  color: var(--su-blu);
  font-size: 17px;
}
.btn-vuoto-pieno:hover { background: var(--blu-scuro); }
.btn-vuoto-bordo {
  min-height: 50px;
  border: 1.5px solid var(--blu);
  border-radius: 25px;
  background: var(--surface);
  color: var(--blu);
  font-size: 16px;
}
.btn-vuoto-bordo:hover { background: var(--blu-chiaro); }
.btn-vuoto-pieno:focus-visible, .btn-vuoto-bordo:focus-visible { outline: 3px solid var(--blu); outline-offset: 2px; }

/* Riga "Storico ordini" */
.riga-storico {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 60px;
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--bordo);
  border-radius: 16px;
  color: inherit;
  text-decoration: none;
}
.riga-storico:focus-visible { outline: 2px solid var(--blu); outline-offset: 2px; }
.riga-storico-ico {
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: #f1efea;
  color: var(--testo);
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.riga-storico-testi { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.riga-storico-testi strong { font-size: 15px; font-weight: 700; line-height: 1.3; }
.riga-storico-testi span { color: var(--grigio); font-size: 13px; line-height: 1.35; }
.riga-storico-freccia { flex: none; color: #a8a69b; font-size: 24px; line-height: 1; }

/* Barra di ricerca del carrello vuoto: quella della home (.barra-home) ma alta 52px, senza il pulsante foto. */
.barra-ricerca.barra-vuoto {
  height: 52px;
  padding: 0 3px 0 14px;
  border-radius: 26px;
}

/* "Il tuo ultimo ordine" */
.uo-scheda {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px;
  background: var(--surface);
  border: 1px solid var(--bordo);
  border-radius: 16px;
}
.uo-testa { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.uo-occhiello {
  margin: 0;
  color: var(--grigio);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.2;
  text-transform: uppercase;
}
.uo-data { flex: none; color: var(--grigio); font-size: 13px; }
.uo-righe { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.uo-riga { display: flex; align-items: center; gap: 10px; }
.uo-qta {
  flex: none;
  min-width: 34px;
  padding: 3px 8px;
  border-radius: 8px;
  background: var(--blu-chiaro);
  color: #1a4468;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.3;
  text-align: center;
}
.uo-nome {
  min-width: 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  overflow-wrap: anywhere;
}
.uo-altri { margin: -4px 0 0; color: var(--grigio); font-size: 13.5px; font-weight: 600; }
.uo-form { margin: 0; }
.uo-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 18px;
  border: 1.5px solid var(--blu);
  border-radius: 22px;
  background: var(--surface);
  color: var(--blu);
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
}
.uo-btn svg { font-size: 18px; flex: none; }
.uo-btn:hover { background: var(--blu-chiaro); }
.uo-btn:focus-visible { outline: 2px solid var(--blu); outline-offset: 2px; }

/* ---------- Ordine consegnato (views/ordine_dettaglio.ejs, ramo "consegnato"): stessa struttura di "Ordine in consegna", in verde e fermo ---------- */

/* In fondo solo la navbar sospesa + un margine (circa 96px), non i ~150px di .app. */
.app-consegnato { padding-bottom: calc(var(--barra-bassa) + env(safe-area-inset-bottom, 0px) + 24px); }

/* Scheda di stato: ordine chiuso, quindi niente anello che si svuota ma un cerchio pieno con la spunta. */
.att-timer.att-consegnato { padding: 22px 16px 18px; }
.att-esito {
  width: 120px; height: 120px; margin: 0 auto 16px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; background: var(--verde-chiaro);
}
.att-esito > span {
  width: 76px; height: 76px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: var(--verde); color: #fff;
}
.att-esito svg { display: block; }

/* "Riordina gli stessi pezzi": il pulsante blu di "Rinvia richiesta" (.att-rinvia), con l'icona a sinistra */
.att-riordina { margin: 0 0 12px; }
.att-riordina .att-rinvia { margin-top: 0; }
.att-riordina .att-rinvia svg { flex: none; font-size: 20px; }

/* Banco, materiale e costi in una scheda sola: intestazione col banco e "Ordine #N", poi righe e riepilogo */
.att-ordine-testa { display: flex; align-items: center; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid #ece9e2; }
.att-ordine-testa .att-occhiello { margin-bottom: 1px; }
.att-ordine-id { flex: none; color: var(--grigio); font-size: 13px; line-height: 1.2; white-space: nowrap; }
.att-ordine .att-righe { margin-top: 6px; }

/* ---------- Storico ordini del banco (views/distributore_storico.ejs, src/storico_banco.js; classi sto-*) ---------- */

/* Contenuto largo 1240px (1288px con i 24px di margine per lato), come nel disegno. Sotto i 900px: schede che scorrono,
   righe come card (vedi in fondo al blocco). */
.pagina-storico { --sto-sora: "Sora", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }
.sto-pagina {
  max-width: 1288px;
  margin: 0 auto;
  padding: 24px max(24px, env(safe-area-inset-right, 0px)) 56px max(24px, env(safe-area-inset-left, 0px));
}

/* Titolo, ricerca e periodo sulla stessa riga */
.sto-testata { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }
.sto-titolo { margin: 0 auto 0 0; font-family: var(--sto-sora); font-size: 28px; font-weight: 800; line-height: 1.2; }

.sto-cerca { position: relative; flex: 0 1 393px; min-width: 0; margin: 0; }
.sto-cerca-ico {
  position: absolute; top: 50%; left: 16px; display: inline-flex; transform: translateY(-50%);
  color: var(--testo); font-size: 20px; pointer-events: none;
}
.sto-cerca input[type="search"] {
  display: block; width: 100%; height: 44px; margin: 0; padding: 0 44px 0 46px;
  border: 1px solid var(--bordo); border-radius: 22px; background: var(--surface); color: var(--testo);
  font-size: 16px; /* sotto i 16px Safari su iPhone ingrandisce la pagina al tocco */
  -webkit-appearance: none; appearance: none;
}
/* La "×" è la nostra (sto-cerca-x): quella del browser non si vede, così non ce ne sono due. */
.sto-cerca input[type="search"]::-webkit-search-cancel-button,
.sto-cerca input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; display: none; }
.sto-cerca input[type="search"]::placeholder { color: var(--grigio); opacity: 1; }
.sto-cerca input[type="search"]:focus { border-color: var(--blu); outline: 2px solid var(--blu); outline-offset: 1px; }
.sto-cerca-x {
  position: absolute; top: 0; right: 0; display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 50%; color: var(--grigio); font-size: 18px; text-decoration: none;
}
.sto-cerca-x:hover { color: var(--testo); }
.sto-cerca-x:focus-visible { outline: 2px solid var(--blu); outline-offset: -2px; }

/* Selettore a segmenti: Oggi | 7 giorni | 30 giorni | Tutti */
.sto-periodo { display: flex; flex: none; gap: 2px; padding: 4px; border-radius: 14px; background: #efede6; }
.sto-periodo a {
  position: relative; display: flex; align-items: center; justify-content: center; min-height: 38px; padding: 0 14px;
  border-radius: 10px; color: var(--grigio); font-size: 14px; font-weight: 600; text-decoration: none; white-space: nowrap;
}
.sto-periodo a::after { content: ""; position: absolute; inset: -4px -1px; } /* area di tocco da 46px */
.sto-periodo a:hover { color: var(--testo); }
.sto-periodo a.attivo { background: var(--surface); color: var(--testo); font-weight: 700; box-shadow: 0 1px 3px rgba(35, 32, 25, 0.14); }
.sto-periodo a:focus-visible { outline: 2px solid var(--blu); outline-offset: 1px; }

/* Schede di stato, a pillola: "Tutti 24 | ● Da preparare 3 | ..." */
.sto-schede { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 20px; }
.sto-scheda {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 12px 0 16px;
  border: 1px solid var(--bordo); border-radius: 22px; background: var(--surface); color: var(--testo);
  font-size: 15px; font-weight: 700; text-decoration: none; white-space: nowrap;
}
.sto-scheda:hover { border-color: #cfcabd; }
.sto-scheda:focus-visible { outline: 2px solid var(--blu); outline-offset: 2px; }
.sto-scheda-num {
  display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 26px; padding: 0 7px;
  border-radius: 13px; background: #f1f0ec; color: #5c5b52; font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.sto-scheda.vuota .sto-scheda-num { color: #a8a69b; } /* zero risultati: resta cliccabile, ma il numero è grigio */
.sto-scheda.attiva { border-color: #1d1b16; background: #1d1b16; color: #fff; }
.sto-scheda.attiva .sto-scheda-num { background: rgba(255, 255, 255, 0.18); color: #fff; }
.sto-scheda.attiva.vuota .sto-scheda-num { color: rgba(255, 255, 255, 0.6); }

/* Colori di stato: pallino delle schede e pillola delle righe (da preparare verde, in preparazione arancio, partito blu,
   consegnato grigio). Una sola regola per i due usi: --st è il colore, --st-sfondo lo sfondo della pillola. */
.sto-st-da_preparare { --st: var(--verde); --st-sfondo: var(--verde-chiaro); }
.sto-st-in_preparazione { --st: var(--arancio); --st-sfondo: var(--arancio-chiaro); }
.sto-st-partito { --st: var(--blu); --st-sfondo: var(--blu-chiaro); }
.sto-st-consegnato { --st: var(--grigio); --st-sfondo: #f1f0ec; }
.sto-punto { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--st); }
.sto-pillola {
  display: inline-flex; align-items: center; gap: 7px; padding: 4px 12px 4px 10px; border-radius: 999px;
  background: var(--st-sfondo); color: var(--st); font-size: 13px; font-weight: 700; line-height: 1.3; white-space: nowrap;
}
.sto-pillola .sto-punto { width: 7px; height: 7px; }

/* Tabella: una scheda con intestazione, righe raggruppate per giorno e una riga-link per ordine */
.sto-tabella { overflow: hidden; border: 1px solid var(--bordo); border-radius: 16px; background: var(--surface); }
.sto-testa, .sto-riga {
  display: grid;
  grid-template-columns: 96px 70px minmax(0, 1.3fr) minmax(0, 2fr) 110px 120px 150px 32px;
  align-items: center; column-gap: 14px; padding-right: 20px; padding-left: 20px;
}
.sto-testa {
  min-height: 44px; border-bottom: 1px solid var(--bordo);
  color: var(--grigio); font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
}
.sto-giorno {
  display: flex; align-items: baseline; gap: 8px; padding: 10px 20px;
  border-bottom: 1px solid var(--bordo); background: #f7f6f2;
}
.sto-giorno strong { font-family: var(--sto-sora); font-size: 15px; font-weight: 700; }
.sto-giorno span { color: var(--grigio); font-size: 13px; }
.sto-riga {
  min-height: 56px; padding-top: 8px; padding-bottom: 8px; border-bottom: 1px solid var(--bordo);
  color: var(--testo); font-size: 15px; text-decoration: none;
}
.sto-riga:hover { background: #faf9f6; }
.sto-riga:focus-visible { outline: 2px solid var(--blu); outline-offset: -2px; }
.sto-tabella > :last-child { border-bottom: none; }

.sto-c-ordine { font-size: 16px; font-weight: 800; font-variant-numeric: tabular-nums; }
.sto-c-ora { color: var(--grigio); font-size: 14px; font-variant-numeric: tabular-nums; }
.sto-c-cliente { display: flex; flex-direction: column; min-width: 0; }
.sto-cliente-nome { overflow: hidden; font-size: 15px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.sto-cliente-citta { overflow: hidden; color: var(--grigio); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.sto-c-materiale { display: flex; min-width: 0; color: #3f3e37; font-size: 14px; }
.sto-mat-nome { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sto-mat-altri { flex: none; padding-left: 6px; color: var(--grigio); white-space: nowrap; } /* resta visibile quando il nome è tagliato */
.sto-c-totale { font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.sto-c-ddt { overflow: hidden; color: var(--grigio); font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.sto-nessuno { color: var(--grigio); }
.sto-ddt-sigla { display: none; }
.sto-c-freccia { display: flex; justify-content: flex-end; color: #8f8d82; font-size: 18px; }

/* Stati vuoti */
.sto-vuoto {
  padding: 48px 16px; border: 1px solid var(--bordo); border-radius: 16px; background: var(--surface);
  color: var(--grigio); font-size: 16px; text-align: center;
}
.sto-vuoto p { margin: 0 0 16px; }
.sto-vuoto-ico { display: block; margin-bottom: 8px; font-size: 2.2rem; }
.sto-vuoto .btn { display: inline-flex; align-items: center; min-height: 44px; }
.sto-pagina .paginazione { margin-top: 20px; }

/* Sotto i 900px: titolo, ricerca e periodo uno sotto l'altro; le schede scorrono di lato senza barra; la tabella diventa
   una lista di card (niente intestazione): "#91 · 22:29" e stato, cliente, materiale, totale e DDT. */
@media (max-width: 899.98px) {
  .sto-pagina { padding: 16px max(16px, env(safe-area-inset-right, 0px)) calc(var(--barra-bassa) + env(safe-area-inset-bottom, 0px) + 24px) max(16px, env(safe-area-inset-left, 0px)); }
  .sto-testata { flex-direction: column; align-items: stretch; gap: 12px; margin-bottom: 16px; }
  .sto-titolo { margin: 0; font-size: 24px; }
  .sto-cerca { flex: none; width: 100%; }
  .sto-periodo a { flex: 1; padding: 0 8px; }

  .sto-schede {
    flex-wrap: nowrap; overflow-x: auto; margin: 0 calc(-1 * max(16px, env(safe-area-inset-right, 0px))) 12px;
    padding: 2px max(16px, env(safe-area-inset-right, 0px)) 4px; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .sto-schede::-webkit-scrollbar { display: none; }
  .sto-scheda { flex: none; }

  .sto-tabella { overflow: visible; border: none; border-radius: 0; background: none; }
  .sto-testa, .sto-c-freccia { display: none; }
  .sto-giorno { padding: 14px 4px 8px; border-bottom: none; background: none; }
  .sto-riga {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "ordine ora stato" "cliente cliente cliente" "materiale materiale materiale" "totale totale ddt";
    column-gap: 6px; row-gap: 6px; margin-bottom: 10px; padding: 12px 14px;
    border: 1px solid var(--bordo); border-radius: 14px; background: var(--surface);
  }
  .sto-tabella > :last-child { border-bottom: 1px solid var(--bordo); }
  .sto-c-ordine { grid-area: ordine; }
  .sto-c-ora { grid-area: ora; }
  .sto-c-ora::before { content: "·"; margin-right: 6px; }
  .sto-c-stato { grid-area: stato; justify-self: end; }
  .sto-c-cliente { grid-area: cliente; }
  .sto-cliente-citta { display: none; } /* la scheda ha quattro righe: la città si vede da schermo largo */
  .sto-c-materiale { grid-area: materiale; }
  .sto-c-totale { grid-area: totale; text-align: left; font-size: 16px; }
  .sto-c-ddt { grid-area: ddt; align-self: center; }
  .sto-c-ddt.sto-senza { display: none; }
  .sto-ddt-sigla { display: inline; }
}

/* ---------- Dettaglio richiesta del banco (views/distributore_dettaglio.ejs, src/richiesta_banco.js; classi ric-*) ---------- */

/* Due colonne (materiale | cosa fare) larghe in tutto 1240px; sotto i 900px una colonna sola con l'azione per prima. */
.pagina-richiesta { --ric-sora: "Sora", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }
.ric-pagina {
  max-width: 1288px;
  margin: 0 auto;
  padding: 24px max(24px, env(safe-area-inset-right, 0px)) 56px max(24px, env(safe-area-inset-left, 0px));
}

/* Titolo: freccia, "Richiesta #N", stato; a destra quando è arrivata. */
.ric-testata { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; margin-bottom: 20px; }
.ric-indietro {
  display: flex; align-items: center; justify-content: center; flex: none; width: 46px; height: 46px;
  border: 1px solid var(--bordo); border-radius: 50%; background: var(--surface); color: var(--blu); font-size: 24px; text-decoration: none;
}
.ric-indietro:hover { background: var(--sfondo); }
.ric-indietro:focus-visible { outline: 2px solid var(--blu); outline-offset: 2px; }
.ric-titolo { margin: 0; font-family: var(--ric-sora); font-size: 28px; font-weight: 800; line-height: 1.2; }
.ric-ricevuta { margin-left: auto; color: var(--grigio); font-size: 14px; }

/* Stato: pillola con pallino. --st è il colore, --st-sfondo lo sfondo (come le pillole dello Storico ordini). */
.ric-st-da_confermare { --st: var(--arancio); --st-sfondo: var(--arancio-chiaro); }
.ric-st-attesa_corriere { --st: #4b3480; --st-sfondo: var(--viola-chiaro); }
.ric-st-confermata, .ric-st-da_preparare { --st: var(--verde); --st-sfondo: var(--verde-chiaro); }
.ric-st-senza_corriere { --st: #991b1b; --st-sfondo: var(--rosso-chiaro); }
.ric-st-non_disponibile, .ric-st-annullata, .ric-st-chiusa, .ric-st-scaduta { --st: var(--grigio); --st-sfondo: #f1f0ec; }
.ric-stato {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px 6px 12px; border-radius: 999px;
  background: var(--st-sfondo); color: var(--st); font-size: 14px; font-weight: 700; line-height: 1.3; white-space: nowrap;
}
.ric-punto { flex: none; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }

.ric-corpo { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 22px; align-items: start; }
.ric-colonna { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.ric-scheda { background: var(--surface); border: 1px solid var(--bordo); border-radius: 16px; }
.ric-h2 { margin: 0; font-family: var(--ric-sora); font-size: 17px; font-weight: 700; line-height: 1.3; }
.ric-occhiello { margin: 0 0 12px; color: var(--grigio); font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }

/* Materiale richiesto: tabella con listino, prezzo per il cliente e totale. */
.ric-mat-testa { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 20px; }
.ric-conta { color: var(--grigio); font-size: 13px; white-space: nowrap; }
.ric-tab-testa, .ric-riga {
  display: grid; grid-template-columns: 64px minmax(0, 1fr) 80px 130px 100px; align-items: center; column-gap: 16px; padding: 0 20px;
}
.ric-tab-testa {
  min-height: 34px; border-top: 1px solid var(--bordo); border-bottom: 1px solid var(--bordo); background: #faf9f6;
  color: var(--grigio); font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
}
.ric-riga { min-height: 72px; padding-top: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--bordo); }
.ric-num { text-align: right; font-variant-numeric: tabular-nums; }
.ric-qta {
  display: inline-flex; align-items: center; justify-self: start; min-width: 44px; height: 32px; padding: 0 10px; border-radius: 8px;
  background: var(--blu-chiaro); color: var(--blu-scuro); font-family: var(--ric-sora); font-size: 14px; font-weight: 700;
}
.ric-articolo { display: flex; flex-direction: column; min-width: 0; }
.ric-nome { font-size: 16px; font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; }
.ric-cod { margin-top: 2px; color: var(--grigio); font-size: 13px; }
.ric-mancano { margin-top: 2px; color: var(--rosso); font-size: 13px; font-weight: 600; }
.ric-listino { color: var(--grigio); font-size: 14px; }
.ric-prezzo { display: flex; flex-direction: column; align-items: flex-end; }
.ric-prezzo strong { font-size: 15px; font-weight: 700; }
.ric-prezzo small { color: var(--grigio); font-size: 12px; }
.ric-tot { font-size: 15px; font-weight: 700; }
.ric-totale {
  display: flex; align-items: baseline; justify-content: flex-end; flex-wrap: wrap; gap: 4px 12px; padding: 16px 20px;
  border-radius: 0 0 16px 16px; background: #faf9f6;
}
.ric-raee { margin-right: auto; color: var(--grigio); font-size: 13px; }
.ric-totale-label { color: var(--grigio); font-size: 15px; }
.ric-totale-cifra { font-family: var(--ric-sora); font-size: 24px; font-weight: 800; font-variant-numeric: tabular-nums; }
.ric-iva { color: var(--grigio); font-size: 13px; }

/* Cosa succede dopo la conferma: tre passi uniti da una linea, così chi è al banco sa che non deve preparare subito. */
.ric-passi { padding: 18px 20px 14px; }
.ric-elenco-passi { margin: 14px 0 0; padding: 0; list-style: none; }
.ric-passo { position: relative; display: flex; gap: 14px; padding-bottom: 18px; }
.ric-passo:last-child { padding-bottom: 0; }
.ric-passo::before { /* la linea che porta al passo dopo */
  content: ""; position: absolute; top: 36px; bottom: 2px; left: 15px; width: 2px; background: #e4e0d6;
}
.ric-passo:last-child::before { display: none; }
.ric-passo-punto {
  flex: none; display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%;
  background: var(--p-sfondo); position: relative; z-index: 1;
}
.ric-passo-punto::after { content: ""; width: 11px; height: 11px; border-radius: 50%; background: var(--p-colore); }
.ric-passo-arancio { --p-sfondo: var(--arancio-chiaro); --p-colore: var(--arancio); }
.ric-passo-viola { --p-sfondo: var(--viola-chiaro); --p-colore: var(--viola); }
.ric-passo-verde { --p-sfondo: var(--verde-chiaro); --p-colore: var(--verde); }
.ric-passo.corrente .ric-passo-punto { box-shadow: 0 0 0 3px var(--surface), 0 0 0 5px var(--p-colore); }
.ric-passo-testi { display: flex; flex-direction: column; gap: 1px; min-width: 0; padding-top: 3px; }
.ric-passo-testi strong { font-size: 15px; font-weight: 700; line-height: 1.3; }
.ric-passo-testi span { color: var(--grigio); font-size: 14px; line-height: 1.4; }

/* A destra: timer e pulsanti. Il timer è arancio come sulla home del banco e passa al rosso negli ultimi 2 minuti. */
.ric-azione { padding: 20px; }
.ric-timer { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; }
.ric-anello { position: relative; flex: none; width: 80px; height: 80px; }
.ric-anello svg { display: block; width: 80px; height: 80px; }
.ric-anello circle { fill: none; stroke-width: 7; }
.ric-anello-traccia { stroke: var(--arancio-chiaro); transition: stroke 0.3s; }
.ric-anello-barra { stroke: var(--arancio); stroke-linecap: round; transition: stroke-dashoffset 1s linear, stroke 0.3s; }
.ric-anello-tempo {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--arancio);
  font-family: var(--ric-sora); font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; transition: color 0.3s;
}
.ric-timer.urgente .ric-anello-traccia { stroke: var(--rosso-chiaro); }
.ric-timer.urgente .ric-anello-barra { stroke: var(--rosso); }
.ric-timer.urgente .ric-anello-tempo { color: var(--rosso); }
.ric-timer-testi { min-width: 0; }
.ric-timer-titolo { margin: 0; font-family: var(--ric-sora); font-size: 18px; font-weight: 700; line-height: 1.25; }
.ric-timer-testi p { margin: 4px 0 0; color: var(--grigio); font-size: 13px; line-height: 1.35; }

.ric-pulsanti { display: flex; flex-direction: column; gap: 12px; margin: 0; }
.ric-btn {
  display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 50px; padding: 0 20px;
  border: 1.5px solid transparent; border-radius: 28px; font-family: inherit; font-size: 16px; font-weight: 700; line-height: 1.2;
  text-align: center; text-decoration: none; cursor: pointer;
}
.ric-btn:focus-visible { outline: 3px solid var(--blu); outline-offset: 2px; }
.ric-btn svg { flex: none; font-size: 20px; }
.ric-btn-conferma { min-height: 56px; background: var(--verde); color: #fff; font-size: 17px; }
.ric-btn-conferma:hover { background: #1f6a31; }
.ric-btn-neutro { background: var(--surface); border-color: #cfcabd; color: var(--testo); }
.ric-btn-neutro:hover { background: var(--sfondo); }
.ric-btn-ordine { margin-top: 4px; background: var(--blu); color: #fff; }
.ric-btn-ordine:hover { background: var(--blu-scuro); }

/* Dopo la risposta la scheda cambia colore: viola = corriere avvisato (non preparare ancora), verde = confermata, rosso =
   nessun corriere, grigio = chiusa senza ordine. */
.ric-esito { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 14px; }
.ric-esito-icona {
  flex: none; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%;
  background: var(--e-colore); color: #fff; font-size: 22px;
}
.ric-esito-testi { flex: 1 1 200px; min-width: 0; }
.ric-esito-titolo { margin: 0; font-family: var(--ric-sora); font-size: 18px; font-weight: 700; line-height: 1.3; color: var(--e-testo); }
.ric-esito-testi p { margin: 6px 0 0; color: var(--e-testo); font-size: 14px; line-height: 1.45; }
.ric-esito-testi .ric-esito-nota { font-size: 13px; opacity: 0.9; }
.ric-esito .ric-btn { flex: 1 1 100%; }
.ric-esito-verde { --e-colore: var(--verde); --e-testo: #1f5f2e; border-color: #bfe0c6; background: var(--verde-chiaro); }
.ric-esito-rosso { --e-colore: var(--rosso); --e-testo: #7a1f1f; border-color: #eab9b6; background: var(--rosso-chiaro); }
.ric-esito-grigio { --e-colore: #8f8d82; --e-testo: #3f3e37; background: #f1f0ec; }

/* Cliente: sempre in vista (prima stava dentro "Cliente ordinante"). */
.ric-cliente { padding: 18px 20px; }
.ric-cliente-testa { display: flex; align-items: center; gap: 14px; }
.ric-cliente-nome { display: flex; flex-direction: column; min-width: 0; }
.ric-cliente-nome strong { font-family: var(--ric-sora); font-size: 16px; font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; }
.ric-cliente-nome small { color: var(--grigio); font-size: 13px; }
.ric-cliente-dati { margin: 14px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.ric-cliente-dati li { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; line-height: 1.4; overflow-wrap: anywhere; }
.ric-dato-icona { flex: none; display: inline-flex; margin-top: 1px; color: var(--grigio); font-size: 18px; }
.ric-cliente-dati a { color: var(--testo); }
.ric-apri-cliente {
  display: inline-flex; align-items: center; gap: 4px; min-height: 44px; margin-top: 4px; color: var(--blu);
  font-size: 14px; font-weight: 700; text-decoration: none;
}
.ric-apri-cliente:hover { text-decoration: underline; }

/* "Elimina dal banco": un link di testo in fondo, piccolo, così non si preme per sbaglio. */
.ric-elimina-riga { display: flex; justify-content: center; margin: 4px 0 0; }
.ric-elimina {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border: none; background: none;
  color: #a33232; font-family: inherit; font-size: 14px; font-weight: 700; cursor: pointer;
}
.ric-elimina svg { font-size: 16px; }
.ric-elimina:hover { text-decoration: underline; }
.ric-elimina:focus-visible { outline: 2px solid var(--blu); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .ric-anello-barra, .ric-anello-traccia, .ric-anello-tempo { transition: none; }
}

/* Sotto i 900px: una colonna. L'azione (timer e pulsanti) viene per prima, poi il materiale, il cliente, i passi e in fondo
   "Elimina dal banco". Le due colonne diventano trasparenti (display: contents) e i blocchi si ordinano con `order`. */
@media (max-width: 899.98px) {
  .ric-pagina { padding: 16px max(16px, env(safe-area-inset-right, 0px)) calc(var(--barra-bassa) + env(safe-area-inset-bottom, 0px) + 24px) max(16px, env(safe-area-inset-left, 0px)); }
  .ric-titolo { font-size: 24px; }
  .ric-ricevuta { flex: 1 0 100%; margin-left: 0; }
  .ric-corpo { display: flex; flex-direction: column; align-items: stretch; gap: 16px; }
  .ric-colonna { display: contents; }
  .ric-azione { order: 1; }
  .ric-materiale { order: 2; }
  .ric-cliente { order: 3; }
  .ric-passi { order: 4; }
  .ric-elimina-riga { order: 5; }

  /* La tabella diventa una lista: quantità, nome e totale sulla prima riga; prezzi in piccolo sotto. */
  .ric-tab-testa { display: none; }
  .ric-mat-testa { padding: 14px 16px 10px; }
  .ric-riga {
    grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "qta articolo tot" ". prezzo prezzo" ". listino listino";
    column-gap: 12px; row-gap: 4px; padding: 12px 16px; border-top: 1px solid var(--bordo);
  }
  .ric-qta { grid-area: qta; align-self: start; }
  .ric-articolo { grid-area: articolo; }
  .ric-tot { grid-area: tot; align-self: start; }
  .ric-prezzo { grid-area: prezzo; flex-direction: row; align-items: baseline; justify-content: flex-start; gap: 6px; }
  .ric-prezzo::before { content: "Cliente"; color: var(--grigio); font-size: 13px; }
  .ric-listino { grid-area: listino; text-align: left; font-size: 13px; }
  .ric-listino::before { content: "Listino "; }
  .ric-totale { padding: 14px 16px; }
  .ric-passi, .ric-cliente, .ric-azione { padding-left: 16px; padding-right: 16px; }
}

/* ---------- Dettaglio richiesta, stato "Attesa corriere" (views/distributore_dettaglio.ejs) ---------- */

/* Il pallino dell'etichetta di stato lampeggia piano finché si aspetta il corriere. */
.ric-punto.pulse { animation: ric-lampeggia 1.8s ease-in-out infinite; }
@keyframes ric-lampeggia { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.3; transform: scale(0.75); } }
@keyframes ric-batte { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(0.7); opacity: 0.45; } }

/* Avanzamento: i passi con a che punto siamo. Fatto = pallino verde con la spunta, in corso = pallino viola che pulsa col suo
   anello, da fare = cerchio tratteggiato. La linea verso il passo dopo è verde dopo un passo fatto. */
.ric-avanzamento .ric-passo-punto::after { display: none; }
.ric-fase-fatto::before { background: #297c3c; }
.ric-fase-fatto .ric-passo-punto { background: #297c3c; color: #fff; font-size: 18px; }
.ric-fase-fatto .ric-passo-punto svg { stroke-width: 2.8; }
.ric-fase-corrente::before { top: 42px; }
.ric-fase-corrente .ric-passo-punto { background: var(--p-sfondo); box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--p-colore); }
.ric-fase-corrente .ric-passo-punto::after {
  display: block; width: 11px; height: 11px; border-radius: 50%; background: var(--p-colore); animation: ric-batte 1.6s ease-in-out infinite;
}
.ric-fase-futuro .ric-passo-punto { background: transparent; border: 2px dashed #cfc8b8; }
.ric-fase-futuro .ric-passo-testi strong, .ric-fase-futuro .ric-passo-testi span { color: #8a887e; }

/* Scheda d'azione: come quella del timer, con il tempo che passa da quando hai confermato. */
.ric-attesa { padding: 20px; border: 1.5px solid #d9ccf0; }
.ric-attesa-testa { display: flex; align-items: center; gap: 16px; }
.ric-attesa-cerchio {
  flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 84px; height: 84px;
  border-radius: 50%; background: #eee8f7; color: #4b3480; text-align: center; line-height: 1.1;
}
.ric-attesa-tempo { font-family: var(--ric-sora); font-size: 19px; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ric-attesa-sotto { margin-top: 3px; font-size: 11px; font-weight: 600; }
.ric-attesa-testi { min-width: 0; }
.ric-attesa-titolo { margin: 0; color: #4b3480; font-family: var(--ric-sora); font-size: 18px; font-weight: 700; line-height: 1.25; }
.ric-attesa-testi p { margin: 4px 0 0; color: var(--grigio); font-size: 13.5px; line-height: 1.4; }
.ric-attesa-nota { margin: 16px 0 0; padding: 12px 14px; border-radius: 12px; background: #f7f6f2; color: #4f4d44; font-size: 13.5px; line-height: 1.45; }
.ric-attesa-parziale { margin: 10px 0 0; color: #8a5a12; font-size: 13px; line-height: 1.4; }
.ric-attesa-ordine {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; padding: 10px 14px;
  border-radius: 12px; background: var(--viola-chiaro); font-size: 14px;
}
.ric-attesa-ordine a { display: inline-flex; align-items: center; min-height: 44px; margin: -10px 0; color: var(--blu); font-weight: 700; text-decoration: none; }
.ric-attesa-ordine a:hover { text-decoration: underline; }

@media (prefers-reduced-motion: reduce) {
  .ric-punto.pulse, .ric-fase-corrente .ric-passo-punto::after { animation: none; }
}

/* ---------- Dettaglio richiesta, stato "Da preparare" ---------- */

/* Scheda d'azione: il timer del corriere (stessi minuti e stesso rosso della pillola della home) e "Preparato". */
.ric-arrivo { padding: 20px; border: 1.5px solid #bfe0c6; }
.ric-arrivo-testa { display: flex; align-items: center; gap: 16px; }
.ric-arrivo-cerchio {
  flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 84px; height: 84px;
  border-radius: 50%; background: var(--verde-chiaro); color: var(--verde); text-align: center; line-height: 1.1; transition: background-color 0.3s, color 0.3s;
}
.ric-arrivo-min { font-family: var(--ric-sora); font-size: 19px; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ric-arrivo-sotto { margin-top: 3px; font-size: 12px; font-weight: 600; }
.ric-arrivo-testa.vicino .ric-arrivo-cerchio { background: var(--rosso-chiaro); color: var(--rosso); }
.ric-arrivo-testi { min-width: 0; }
.ric-arrivo-titolo { margin: 0; font-family: var(--ric-sora); font-size: 18px; font-weight: 700; line-height: 1.25; color: #1f5f2e; }
.ric-arrivo-testi p { margin: 4px 0 0; color: var(--grigio); font-size: 13.5px; line-height: 1.4; }
.ric-arrivo .ric-pulsanti { margin-top: 18px; }
.ric-arrivo-nota { margin: 12px 0 0; color: var(--grigio); font-size: 13px; line-height: 1.4; text-align: center; }
@media (prefers-reduced-motion: reduce) {
  .ric-arrivo-cerchio { transition: none; }
}

/* Fra 900 e 1100px la colonna di sinistra è stretta (~500px): a destra 340px e la tabella senza il listino, così il nome dell'articolo
   non si spezza lettera per lettera. */
@media (min-width: 900px) and (max-width: 1099.98px) {
  .ric-corpo { grid-template-columns: minmax(0, 1fr) 340px; }
  .ric-tab-testa, .ric-riga { grid-template-columns: 52px minmax(0, 1fr) 110px 84px; column-gap: 12px; }
  .ric-tab-testa > :nth-child(3), .ric-listino { display: none; }
}