: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 (Banco, Clienti, 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; }

/* 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 { 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 { 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; }
}
/* ---------- 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); }
/* Con più attività i colori delle etichette seguono il fotogramma, non il link (che porta la fase della prima). */
.navbar a .fotogramma.fase-richiesta .etichetta { color: var(--arancio); font-variant-numeric: tabular-nums; }
.navbar a .fotogramma.fase-consegna .etichetta { color: var(--verde); }
.navbar a .fotogramma.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; }
}

/* Due o più attività: i fotogrammi stanno uno sopra l'altro nella stessa cella e se ne vede uno alla volta (dissolvenza incrociata
   di 250 ms); sotto, un puntino per attività. L'altezza è quella dell'icona singola (icona 24px + una riga di etichetta da 19px,
   senza spazio in mezzo), così la barra non cambia quando si passa da una a più attività e le due icone sono sovrapponibili al pixel:
   se cambia il corpo del testo o l'icona, aggiornare --nav-stato-alt. */
.nav-ordini.multi .fotogrammi { position: relative; display: block; width: 100%; height: var(--nav-stato-alt, 43px); }
.nav-ordini.multi .fotogramma {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  opacity: 0; transition: opacity 0.25s; pointer-events: none;
}
.nav-ordini.multi .fotogramma.attivo { opacity: 1; }
.nav-ordini .puntini { position: absolute; bottom: 4px; left: 0; right: 0; display: flex; justify-content: center; gap: 4px; pointer-events: none; }
.nav-ordini .puntini .punto { width: 5px; height: 5px; border-radius: 50%; background: #1C1917; opacity: 0.25; transition: opacity 0.25s; }
.nav-ordini .puntini .punto.attivo { opacity: 1; }
/* Appena sostituito il link (aggiornamento dal server) il fotogramma giusto si mostra subito, senza dissolvenza. */
.nav-ordini.ferma .fotogramma, .nav-ordini.ferma .punto { transition: none; }
/* Il numero delle attività, solo con "riduci movimento": in alto a sinistra sull'icona, in un pallino scuro. */
.nav-ordini .conteggio {
  display: none; position: absolute; top: 1px; left: calc(50% - 22px); z-index: 1;
  min-width: 15px; height: 15px; box-sizing: border-box; padding: 0 4px; border-radius: 8px;
  background: #1C1917; border: 1.5px solid var(--surface); color: #fff;
  font-size: 0.6rem; font-weight: 700; line-height: 12px; text-align: center;
}
@media (prefers-reduced-motion: reduce) {
  .nav-ordini.multi .fotogramma, .nav-ordini .puntini .punto { transition: none; }
  .nav-ordini .puntini { display: none; }
  .nav-ordini.multi .conteggio { display: block; }
}

/* ---------- 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 1s linear; }
.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; }
/* "Paghi ora in app" e "Materiale, da pagare al banco": sotto il totale, separati da una riga */
.riepilogo-riga.riepilogo-diviso { margin-top: 8px; padding-top: 12px; border-top: 1px solid var(--bordo); }

/* "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; }
/* Banco chiuso (orari dell'"Anagrafica del banco"): al posto di "Paga e invia richiesta" c'è "Il banco è chiuso · riapre domani alle 07:30", sempre
   disabilitato (public/app.js non lo riattiva), su due righe se serve: scuro su grigio, leggibile, non il bianco su grigio chiaro di un pulsante spento. */
.btn-paga.btn-paga-chiuso { background: #ece9e2; color: #3f3e38; border: 1px solid var(--bordo); white-space: normal; line-height: 1.2; font-size: 14px; padding: 0 14px; }
.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;
}

/* 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-42 { width: 42px; height: 42px; font-size: 15px; }
.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_riquadro.ejs, partials/storico_ordine.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: 14px 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;
}

/* a) Riquadro "Da pagare a BOREA": blu, testo bianco */
.sm-riquadro {
  background: #245A8F; color: #fff; border-radius: 18px; padding: 14px 16px 16px; margin-bottom: 12px;
}
/* chip del mese: scorrono in orizzontale, senza barra */
.sm-mesi { display: flex; gap: 8px; overflow-x: auto; margin: 0 -16px 12px; padding: 0 16px; scrollbar-width: none; }
.sm-mesi::-webkit-scrollbar { display: none; }
.sm-chip {
  flex: none; display: inline-flex; align-items: center; height: 34px; padding: 0 14px; border-radius: 17px; box-sizing: border-box;
  border: 1.5px solid rgba(255, 255, 255, 0.45); color: #fff; font-size: 14px; font-weight: 700; text-decoration: none; white-space: nowrap;
}
.sm-chip.attivo { background: #fff; border-color: #fff; color: #1A4468; }
.sm-chip:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.sm-occhiello { font-size: 13px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; opacity: 0.85; }
.sm-totale { display: flex; align-items: baseline; gap: 10px; margin-top: 4px; }
.sm-importo {
  font-family: "Sora", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 34px; font-weight: 800; line-height: 1.15; font-variant-numeric: tabular-nums; overflow-wrap: anywhere;
}
.sm-iva { font-size: 14px; opacity: 0.85; white-space: nowrap; }
.sm-sotto { margin-top: 2px; font-size: 14px; opacity: 0.9; }
.sm-fondo {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.22); font-size: 13.5px;
}
.sm-fondo strong { font-variant-numeric: tabular-nums; }
/* "Ricevute del mese" ed "Esporta elenco": due pulsanti affiancati da 38px, bianco al 14%, testo bianco */
.sm-bottoni { display: flex; gap: 8px; margin-top: 10px; }
.sm-esporta {
  flex: 1 1 0; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 0; min-height: 38px; padding: 0 10px; box-sizing: border-box;
  border-radius: 19px; background: rgba(255, 255, 255, 0.14); color: #fff; font-size: 14px; font-weight: 700; text-decoration: none; white-space: nowrap;
}
.sm-esporta:hover { background: rgba(255, 255, 255, 0.22); }
.sm-esporta svg { flex: none; font-size: 18px; }
.sm-esporta:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* b) selettore Per ordine | Per articolo */
.sm-vista { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; margin-bottom: 14px; background: #E7E4DC; border-radius: 14px; }
.sm-vista a {
  display: flex; align-items: center; justify-content: center; height: 38px; border-radius: 11px; color: #5c5b52;
  font-size: 14.5px; font-weight: 700; text-decoration: none;
}
.sm-vista a.attiva { background: #fff; color: var(--testo); box-shadow: 0 1px 3px rgba(35, 32, 25, 0.14); }
.sm-vista a:focus-visible { outline: 2px solid var(--blu); outline-offset: 1px; }

/* c) una scheda per ordine (details) */
.sm-ordine { background: var(--surface); border: 1px solid var(--bordo); border-radius: 16px; margin-bottom: 10px; overflow: hidden; }
.sm-ordine > summary { display: block; padding: 12px 14px; list-style: none; cursor: pointer; }
.sm-ordine > summary::-webkit-details-marker { display: none; }
.sm-ordine > summary:focus-visible { outline: 2px solid var(--blu); outline-offset: -2px; }
.sm-riga1 { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.sm-nome { min-width: 0; font-size: 15.5px; }
.sm-data { margin-left: 4px; color: var(--grigio); font-size: 13px; white-space: nowrap; }
.sm-tot {
  flex: none; font-family: "Sora", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 16px; font-weight: 800; font-variant-numeric: tabular-nums;
}
.sm-riga2 { display: flex; align-items: center; gap: 8px; margin-top: 8px; min-width: 0; }
.sm-primo { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13.5px; color: #3f3e38; }
.sm-altri { flex: none; color: var(--grigio); font-size: 13px; font-weight: 600; }
.sm-freccia { flex: none; margin-left: auto; color: var(--grigio); font-size: 12px; transition: transform 0.15s; }
.sm-ordine[open] .sm-freccia { transform: rotate(90deg); }
@media (prefers-reduced-motion: reduce) { .sm-freccia { transition: none; } }

.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-stato.st-consegna, .st-stato.st-consegnato { background: var(--verde-chiaro); color: #1f5f2e; }
.st-stato.st-attesa, .st-stato.st-preparazione { background: var(--arancio-chiaro); color: #8a3c16; }
.st-stato.st-nessuna { background: var(--rosso-chiaro); color: #991b1b; }
.st-stato.st-annullata { background: #ece9e2; color: #3f3e38; }

.sm-dettaglio { background: #FAF9F6; border-top: 1px solid #ece9e2; padding: 4px 14px 12px; }
.sm-riga { display: flex; align-items: flex-start; gap: 10px; padding: 10px 0; border-bottom: 1px solid #ece9e2; }
.sm-qta {
  flex: none; min-width: 30px; padding: 2px 7px; box-sizing: border-box; border-radius: 8px; text-align: center;
  background: var(--blu-chiaro); color: var(--blu-scuro); font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.sm-riga-corpo, .sm-art-corpo { flex: 1; min-width: 0; }
.sm-riga-nome, .sm-art-nome { font-size: 14.5px; font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; }
.sm-riga-sotto, .sm-art-sotto { margin-top: 2px; color: var(--grigio); font-size: 12.5px; }
.sm-riga-totale, .sm-art-totale { flex: none; font-size: 14.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.sm-servizio { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0 2px; color: var(--grigio); font-size: 13.5px; font-variant-numeric: tabular-nums; }
.sm-azioni { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 8px; }
/* "Ricevuta" e "Dettagli ›" a destra, uno accanto all'altro */
.sm-destra { margin-left: auto; display: inline-flex; align-items: center; gap: 18px; }
.sm-ricevuta { display: inline-flex; align-items: center; gap: 5px; min-height: 44px; color: var(--blu); font-weight: 700; font-size: 14.5px; text-decoration: none; }
.sm-ricevuta svg { font-size: 17px; }
.sm-ricevuta:hover { text-decoration: underline; }
.sm-ricevuta:focus-visible { outline: 2px solid var(--blu); outline-offset: 2px; border-radius: 4px; }
.sm-dettagli { margin-left: auto; display: inline-flex; align-items: center; min-height: 44px; color: var(--blu); font-weight: 700; font-size: 14.5px; text-decoration: none; }
.sm-dettagli:focus-visible { outline: 2px solid var(--blu); outline-offset: 2px; }

/* richieste chiuse senza ordine: la scheda è quella dell'ordine (.sm-ordine); "Nessun costo" al posto dell'importo */
.sm-tot-zero { font-family: inherit; font-size: 14px; font-weight: 600; color: var(--grigio); }
/* richiesta annullata: la scheda c'è ma non si apre e non è un link (niente mano, niente freccia, niente pagina) */
.sm-ordine > .sm-fissa { display: block; padding: 12px 14px; }
.sm-ordine-chiusa { cursor: default; }

/* d) per articolo */
.sm-articoli { background: var(--surface); border: 1px solid var(--bordo); border-radius: 16px; padding: 2px 14px; margin-bottom: 10px; }
.sm-art { display: flex; align-items: flex-start; gap: 10px; padding: 11px 0; border-bottom: 1px solid #ece9e2; }
.sm-art-somma { align-items: center; justify-content: space-between; border-bottom: none; font-size: 15.5px; }
.sm-art-somma .sm-art-totale { font-family: "Sora", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; font-size: 16px; font-weight: 800; }

.st-riordina { margin: 0; }
.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));
}
/* 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; }

/* Nota sotto una scheda. `.cli-sotto-titolo` e `.cli-elenco-sconti` sono dell'elenco sconti (partials/riga_sconti), oggi non in pagina. */
.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; }

/* Sotto i 900px (menu in basso): colonne una sotto l'altra, prima la decisione (o, per l'approvato, il materiale) 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-layout { grid-template-columns: minmax(0, 1fr); }
  .cli-layout-decisione .cli-colonna-destra { order: -1; }
  .cli-layout-approvato .cli-colonna-materiale { 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 blu, in consegna verde, consegnato grigio; dal 19/10/2026 non
   esistono più "in preparazione" e "partito"). Una sola regola per i due usi: --st è il colore, --st-sfondo lo sfondo della pillola. */
.sto-st-da_preparare { --st: var(--blu); --st-sfondo: var(--blu-chiaro); }
.sto-st-in_consegna { --st: var(--verde); --st-sfondo: var(--verde-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, per ogni ordine, una voce (.sto-voce) = la riga (un <button> che la apre) + il suo pannello */
.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) 120px 110px 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-voce { border-bottom: 1px solid var(--bordo); }
/* La riga è un <button> (Invio e Spazio la aprono e la chiudono, il fuoco resta lì): si toglie l'aspetto del browser. */
.sto-riga {
  width: 100%; min-height: 56px; margin: 0; padding-top: 8px; padding-bottom: 8px; border: 0; border-radius: 0; background: none;
  color: var(--testo); font: inherit; font-size: 15px; text-align: left; cursor: pointer; -webkit-appearance: none; appearance: 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; }

/* Riga aperta: sfondo azzurrissimo, il chevron gira di 180° e sotto c'è il pannello (stesso sfondo, barra blu a sinistra). */
.sto-voce.aperta, .sto-voce.aperta .sto-riga { background: #f7fafd; }
.sto-c-freccia svg { transition: transform 0.15s; }
.sto-voce.aperta .sto-c-freccia svg { transform: rotate(180deg); }
.sto-dettaglio { border-left: 3px solid var(--blu); background: #f7fafd; }
.sto-dettaglio[hidden] { display: none; }
.sto-d-attesa, .sto-d-errore { margin: 0; padding: 16px 20px 20px; color: var(--grigio); font-size: 14px; }
.sto-d-errore button { margin-left: 8px; padding: 0; border: 0; background: none; color: var(--blu); font: inherit; font-weight: 700; text-decoration: underline; cursor: pointer; }

.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; }

/* Il dettaglio di una riga (views/partials/storico_dettaglio.ejs): Materiale | Come è andata | Bolla e pulsanti. */
.sto-d-griglia { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr) 260px; gap: 16px; align-items: start; padding: 4px 20px 20px; }
.sto-d-scheda { border: 1px solid var(--bordo); border-radius: 14px; background: var(--surface); }
.sto-d-occhiello { margin: 0; color: var(--grigio); font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }

.sto-d-testa { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px 12px; }
.sto-d-conta { color: var(--grigio); font-size: 13px; white-space: nowrap; }
.sto-d-riga {
  display: grid; grid-template-columns: 44px minmax(0, 1fr) 84px 92px; align-items: center; column-gap: 12px; padding: 11px 16px; border-top: 1px solid var(--bordo);
}
.sto-d-qta {
  display: inline-flex; align-items: center; justify-self: start; min-width: 40px; height: 30px; padding: 0 9px; border-radius: 8px;
  background: var(--blu-chiaro); color: var(--blu-scuro); font-family: "Sora", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; font-size: 13px; font-weight: 700;
}
.sto-d-articolo { display: flex; flex-direction: column; min-width: 0; }
.sto-d-nome { font-size: 14.5px; font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.sto-d-cod { margin-top: 2px; color: var(--grigio); font-size: 12.5px; }
.sto-d-cad-sub { display: none; }
.sto-d-mancano { margin-top: 2px; color: var(--arancio); font-size: 12.5px; font-weight: 600; }
.sto-d-cad { color: #4f4d44; font-size: 13.5px; text-align: right; font-variant-numeric: tabular-nums; }
.sto-d-tot { font-size: 14.5px; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.sto-d-vuoto, .sto-d-fuori { margin: 0; padding: 12px 16px; border-top: 1px solid var(--bordo); color: var(--grigio); font-size: 13.5px; line-height: 1.4; }
.sto-d-fuori { color: var(--arancio); font-weight: 600; }
.sto-d-piede {
  display: flex; align-items: baseline; justify-content: flex-end; flex-wrap: wrap; gap: 4px 22px; padding: 12px 16px;
  border-top: 1px solid var(--bordo); border-radius: 0 0 14px 14px; background: #faf9f6; color: var(--grigio); font-size: 13px;
}
.sto-d-piede strong { margin-left: 4px; color: var(--testo); font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; }
.sto-d-incasso strong { font-family: "Sora", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; font-size: 17px; font-weight: 800; }

/* Come è andata: pallino, ora (cifre tutte uguali, così si allineano) e testo. Fatto = pallino verde pieno; in corso = bianco con bordo verde e testo verde
   in grassetto; da fare = pallino tratteggiato e testo grigio. */
.sto-d-tempi { padding: 14px 16px 16px; }
.sto-d-passi { margin: 10px 0 0; padding: 0; list-style: none; }
.sto-d-passo { display: grid; grid-template-columns: 10px 52px minmax(0, 1fr); align-items: start; column-gap: 10px; padding: 5px 0; font-size: 14px; line-height: 1.4; }
.sto-d-pallino { box-sizing: border-box; width: 10px; height: 10px; margin-top: 6px; border-radius: 50%; }
.sto-d-ora { font-weight: 700; font-variant-numeric: tabular-nums; }
.sto-d-ora small { display: block; color: var(--grigio); font-size: 11px; font-weight: 400; line-height: 1.2; }
.sto-d-fatto .sto-d-pallino { background: var(--verde); }
.sto-d-corrente .sto-d-pallino { border: 2px solid var(--verde); background: #fff; }
.sto-d-corrente .sto-d-testo { color: #1f5f2e; font-weight: 700; }
.sto-d-futuro .sto-d-pallino { border: 2px dashed #cfc8b8; }
.sto-d-futuro .sto-d-ora, .sto-d-futuro .sto-d-testo { color: #8a887e; }
.sto-d-futuro .sto-d-ora { font-weight: 400; }
.sto-d-dove { margin-top: 10px; padding-top: 12px; border-top: 1px solid var(--bordo); }
.sto-d-dove p { display: flex; align-items: flex-start; gap: 8px; margin: 0; font-size: 13.5px; line-height: 1.4; overflow-wrap: anywhere; }
.sto-d-dove p + p { margin-top: 8px; }
.sto-d-icona { flex: none; display: inline-flex; margin-top: 1px; color: var(--grigio); font-size: 17px; }

/* Bolla e i due pulsanti */
.sto-d-destra { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.sto-d-bolla { display: flex; align-items: center; gap: 12px; padding: 12px 14px; }
.sto-d-bolla-ico { flex: none; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 10px; background: var(--blu-chiaro); color: var(--blu); font-size: 22px; }
.sto-d-bolla-testi { display: flex; flex: 1; flex-direction: column; gap: 2px; min-width: 0; }
.sto-d-bolla-num { font-size: 15px; font-weight: 700; overflow-wrap: anywhere; }
.sto-d-bolla-no { color: var(--grigio); }
.sto-d-bolla-apri { flex: none; color: var(--blu); font-size: 14px; font-weight: 700; text-decoration: none; }
.sto-d-bolla-apri:hover { text-decoration: underline; }
.sto-d-vai, .sto-d-sec {
  display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 48px; padding: 0 16px; border-radius: 24px;
  font-size: 15px; font-weight: 700; text-decoration: none; text-align: center;
}
.sto-d-vai { background: var(--blu); color: #fff; }
.sto-d-vai:hover { background: var(--blu-scuro); }
.sto-d-sec { border: 1.5px solid #cfcabd; background: var(--surface); color: var(--testo); }
.sto-d-sec:hover { background: var(--sfondo); }
.sto-d-vai:focus-visible, .sto-d-sec:focus-visible, .sto-d-bolla-apri:focus-visible { outline: 3px solid var(--blu); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  .sto-c-freccia svg { transition: none; }
}

/* Fra 900 e 1100px il pannello è stretto: la colonna dei pulsanti scende a 220px e la tabella del materiale perde un po' di respiro. */
@media (min-width: 900px) and (max-width: 1099.98px) {
  .sto-d-griglia { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) 220px; gap: 12px; padding-left: 14px; padding-right: 14px; }
  .sto-d-riga { grid-template-columns: 40px minmax(0, 1fr) 70px 80px; column-gap: 10px; padding-left: 12px; padding-right: 12px; }
}

/* 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 { display: none; }
  .sto-giorno { padding: 14px 4px 8px; border-bottom: none; background: none; }
  /* La card è la voce (riga + pannello): così, aperta, il dettaglio sta dentro la stessa card. */
  .sto-voce { overflow: hidden; margin-bottom: 10px; border: 1px solid var(--bordo); border-radius: 14px; background: var(--surface); }
  .sto-tabella > :last-child { border-bottom: 1px solid var(--bordo); }
  .sto-riga {
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    grid-template-areas: "ordine ora stato freccia" "cliente cliente cliente cliente" "materiale materiale materiale materiale" "totale totale totale ddt";
    column-gap: 6px; row-gap: 6px; padding: 12px 10px 12px 14px;
  }
  .sto-c-freccia { grid-area: freccia; align-self: center; width: 24px; }
  .sto-dettaglio { border-left-width: 3px; }
  .sto-c-totale::before { content: "Da incassare "; color: var(--grigio); font-size: 13px; font-weight: 400; }
  .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; }

  /* Il pannello a una colonna: Materiale, Come è andata, poi bolla e pulsanti a tutta larghezza. */
  .sto-d-griglia { grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 4px 12px 14px; }
  .sto-d-riga { grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; column-gap: 10px; padding: 11px 14px; }
  .sto-d-cad { display: none; }
  .sto-d-cad-sub { display: inline; }
  .sto-d-testa, .sto-d-tempi, .sto-d-piede { padding-left: 14px; padding-right: 14px; }
  .sto-d-piede { justify-content: flex-start; }
}

/* ---------- 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 { --st: var(--verde); --st-sfondo: var(--verde-chiaro); }
.ric-st-da_preparare { --st: var(--blu); --st-sfondo: var(--blu-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); }

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

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

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

/* Il timer del corriere (stessi minuti e stesso rosso della pillola della home): lo usa il riquadro "Ritiro" della pagina dell'ordine (.ord-ritiro). */
.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; }
@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; }
}

/* ---------- Striscia degli ordini in corso (views/partials/striscia_ordini.ejs) ---------- */

/* Fascia bianca sotto l'appbar quando le attività in corso sono due o più: una scheda per ordine, e sotto la pagina intera di quello
   selezionato. Con 2 o 3 schede stanno in una riga a colonne uguali; da 4 in su scorrono di lato (112px l'una, con aggancio). */
.striscia { background: var(--surface); border-bottom: 1px solid #E2DED3; padding: 2px 12px 12px; }
.striscia-testa { display: flex; align-items: baseline; justify-content: space-between; padding: 10px 2px 8px; }
.striscia-conta { font-size: 13px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #5C5B52; }
.striscia-pos { font-size: 13px; color: #6B6A5F; }
.striscia-schede { display: grid; grid-template-columns: repeat(var(--n, 2), minmax(0, 1fr)); gap: 8px; }
.striscia-scorre .striscia-schede {
  display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.striscia-scorre .striscia-schede::-webkit-scrollbar { display: none; }
.striscia-scorre .str-scheda { flex: 0 0 112px; scroll-snap-align: center; }

.str-scheda {
  box-sizing: border-box; height: 86px; min-width: 0; padding: 0 6px; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  border-radius: 14px; border: 1.5px solid #E2DED3; background: #fff;
  color: var(--testo); text-decoration: none; text-align: center;
}
.str-scheda:focus-visible { outline: 3px solid var(--blu); outline-offset: 2px; }
.str-ico { position: relative; flex: none; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; }
.str-anello { display: block; width: 30px; height: 30px; }
.str-anello .traccia { fill: none; stroke: var(--arancio-chiaro); stroke-width: 2.4; }
.str-anello .avanzamento {
  fill: none; stroke: var(--arancio); stroke-width: 2.4; stroke-linecap: round;
  stroke-dasharray: 65.97; transform: rotate(-90deg); transform-origin: 12px 12px; transition: stroke-dashoffset 1s linear;
}
.str-scatola { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 15px; color: var(--icona-nav); }
.str-scatola.str-spenta { font-size: 26px; color: var(--grigio); }
.str-furgone { display: flex; font-size: 28px; color: #1F5F2E; }
.str-furgone svg { stroke-width: 1.5; }
.bob { animation: nav-ordini-oscilla 1.1s ease-in-out infinite; }
.str-allarme {
  position: absolute; top: -3px; right: -5px; box-sizing: border-box; min-width: 15px; height: 15px; padding: 0 3px; border-radius: 8px;
  background: var(--rosso); border: 2px solid #fff; color: #fff; font-size: 9px; font-weight: 800; line-height: 11px; text-align: center;
}
.str-valore {
  font-family: "Sora", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  font-weight: 800; font-size: 14px; line-height: 1.15; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.str-richiesta .str-valore { color: #8A3A14; }
.str-consegna .str-valore { color: #1F5F2E; }
.str-scaduta .str-valore { color: #991B1B; }
.str-breve { max-width: 100%; font-size: 11.5px; line-height: 1.2; color: #6B6A5F; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* La scheda della pagina aperta: sfondo chiaro e bordo da 2px nel colore del suo stato */
.str-attiva { border-width: 2px; }
.str-scaduta.str-attiva { background: #FBE4E2; border-color: #BD3A3A; }
.str-richiesta.str-attiva { background: #FBE6DA; border-color: #AB4D24; }
.str-consegna.str-attiva { background: #E3F3E6; border-color: #297C3C; }
@media (prefers-reduced-motion: reduce) {
  .bob { animation: none; }
  .str-anello .avanzamento { transition: none; }
}

/* Con la striscia il blocco in alto della pagina è più compatto (la striscia occupa spazio): anello o cerchio da 148 a 112px, timer da
   31 a 25px, scheda con meno aria. I numeri del pallino d'allarme e del furgone seguono la stessa scala (112/148). */
.con-striscia .att-timer { padding: 18px 16px 16px; }
.con-striscia .att-anello { width: 112px; height: 112px; margin-bottom: 14px; }
.con-striscia .att-anello > svg { width: 112px; height: 112px; }
.con-striscia .att-tempo { font-size: 25px; }
.con-striscia .att-furgone { font-size: 44px; }
.con-striscia .att-allarme { left: 77px; top: 9px; width: 26px; height: 26px; border-width: 2.5px; font-size: 13px; }

/* Passaggio da un ordine all'altro (public/app.js, "Striscia degli ordini in corso"): il contenuto si sposta e si attenua mentre la pagina
   nuova arriva dal server; la richiesta parte subito, non dopo l'animazione. */
.con-striscia .app > .contenuto { transition: transform 0.15s ease-in, opacity 0.15s ease-in; }
.con-striscia .app > .contenuto.str-cambio { opacity: 0.45; pointer-events: none; }
.con-striscia .app > .contenuto.swipe-rimbalzo { transition: transform 0.12s ease-out; }
@media (prefers-reduced-motion: reduce) {
  .con-striscia .app > .contenuto, .con-striscia .app > .contenuto.swipe-rimbalzo { transition: none; }
}

/* ---------- Carrello: "Cosa paghi e a chi" (views/carrello.ejs) ----------
   Una card, due riquadri a 10px: "Consegna in cantiere" (la paghi ORA in app) e "Materiale" (lo paghi DOPO a BOREA). Gli importi sono
   `[data-riep]`: li riscrive public/app.js quando cambia una quantità. */
.cp-card { padding: 14px 14px 12px; margin-bottom: 0; }
.cp-titolo { margin: 0 0 10px 2px; font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #5C5B52; }
.cp-riquadro { border-radius: 14px; padding: 12px; }
.cp-riquadro + .cp-riquadro { margin-top: 10px; }
.cp-testa { display: flex; align-items: center; gap: 8px; }
.cp-ico { flex: none; display: inline-flex; font-size: 20px; }
.cp-nome { flex: 1; min-width: 0; font-size: 15px; font-weight: 700; }
.cp-badge { flex: none; padding: 3px 8px; border-radius: 8px; font-size: 12px; font-weight: 800; line-height: 1.3; letter-spacing: 0.02em; text-transform: uppercase; white-space: nowrap; }
.cp-sotto { margin: 6px 0 10px; font-size: 13px; line-height: 1.35; }
.cp-righe { margin: 0; padding: 10px 0 2px; border-top: 1px solid var(--cp-linea); }
.cp-riga { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 4px 0; font-variant-numeric: tabular-nums; }
.cp-riga[hidden] { display: none; }
.cp-riga dt { margin: 0; min-width: 0; font-size: 14px; }
.cp-riga dd { margin: 0; flex: none; font-size: 14px; font-weight: 600; }
.cp-et { font-weight: 600; }
.cp-sp { font-size: 12.5px; font-weight: 400; }
.cp-totale {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-top: 8px; padding-top: 10px;
  border-top: 1px solid var(--cp-linea); font-size: 15px; font-weight: 700;
}
.cp-totale strong {
  font-family: "Sora", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; font-size: 22px; font-weight: 800;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}

/* A) la paghi ora: azzurro, bordo blu */
.cp-ora { --cp-linea: #B9CDE2; background: #E3EDF7; border: 2px solid #245A8F; color: #1A4468; }
.cp-ora .cp-sotto { opacity: 0.85; }
.cp-ora .cp-sp { opacity: 0.75; }
.cp-badge-ora { background: #245A8F; color: #fff; }

/* B) la paghi dopo a BOREA: grigio caldo */
.cp-dopo { --cp-linea: #E2DED3; background: #F7F6F2; border: 1px solid #E2DED3; color: #1C1917; }
.cp-dopo .cp-sotto { color: #5C5B52; }
.cp-dopo .cp-sp { color: #5C5B52; }
.cp-badge-dopo { background: #E2DED3; color: #3F3E38; }

/* C) spesa complessiva, piccola e grigia */
.cp-spesa { display: flex; justify-content: space-between; gap: 12px; margin: 10px 4px 0; font-size: 13px; color: var(--grigio); font-variant-numeric: tabular-nums; }

/* Barra in fondo: "Paghi ora · consegna" e l'importo */
.bp-label { color: #1A4468; font-size: 12px; font-weight: 700; }
.bp-importo { color: #1A4468; font-family: "Sora", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; font-size: 20px; font-weight: 800; font-variant-numeric: tabular-nums; }
.avviso[hidden] { display: none; }

/* ---------- Pagina dell'ordine: scheda "Pagamenti" (partials/ordine_pagamenti.ejs) e riga "Documenti" (partials/ordine_righe.ejs) ----------
   La consegna in cantiere (già pagata in app) e il materiale (da pagare a BOREA), mai un totale unico. */
.pg-card { padding: 14px; }
.pg-titolo { margin: 0 0 10px 2px; font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #5C5B52; }
.pg-riga { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; }
.pg-riga + .pg-riga { margin-top: 10px; }
.pg-ico {
  flex: none; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; box-sizing: border-box;
  border-radius: 9px; background: #fff; font-size: 20px;
}
.pg-testo { flex: 1; min-width: 0; }
.pg-nome { font-size: 15px; font-weight: 700; line-height: 1.25; }
.pg-sub { display: flex; align-items: center; gap: 5px; margin-top: 2px; font-size: 13px; line-height: 1.3; }
.pg-nowrap { white-space: nowrap; }
.pg-spunta { display: inline-flex; color: var(--verde); }
.pg-importo {
  flex: none; font-family: "Sora", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; font-size: 18px; font-weight: 800;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.pg-consegna { background: #E3F3E6; color: #1F5F2E; }
.pg-consegna .pg-ico { color: #1F5F2E; }
.pg-materiale { background: #F7F6F2; border: 1px solid #E2DED3; color: #1C1917; }
.pg-materiale .pg-sub { color: #5C5B52; }

/* "Vedi il dettaglio degli importi ▾": chiuso di default; aperto diventa "Nascondi il dettaglio" e la freccia ruota */
.pg-dettaglio { margin-top: 6px; }
.pg-dettaglio > summary {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; list-style: none; cursor: pointer;
  color: var(--blu); font-size: 14px; font-weight: 700;
}
.pg-dettaglio > summary::-webkit-details-marker { display: none; }
.pg-dettaglio > summary:focus-visible { outline: 2px solid var(--blu); outline-offset: 2px; border-radius: 6px; }
.pg-chiudi { display: none; }
.pg-dettaglio[open] .pg-apri { display: none; }
.pg-dettaglio[open] .pg-chiudi { display: inline; }
.pg-freccia { flex: none; transition: transform 0.15s; }
.pg-dettaglio[open] .pg-freccia { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) { .pg-freccia { transition: none; } }
.pg-riquadri { display: grid; gap: 10px; margin-top: 2px; }
.pg-piccolo { border: 1px solid #E2DED3; border-radius: 12px; padding: 10px 12px; }
.pg-piccolo h3 { margin: 0 0 6px; font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.pg-piccolo dl { margin: 0; }
.pg-piccolo dl > div { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 3px 0; font-variant-numeric: tabular-nums; }
.pg-piccolo dt { margin: 0; min-width: 0; font-size: 13.5px; }
.pg-piccolo dd { margin: 0; flex: none; font-size: 13.5px; font-weight: 600; }
.pg-et { font-weight: 700; }
.pg-sp { font-size: 12.5px; opacity: 0.72; }
.pg-piccolo-verde { border-color: #CDE6D3; color: #1F5F2E; }
.pg-piccolo-grigio { border-color: #E2DED3; color: #1C1917; }

/* Riga "Documenti · DDT n° N ›" in fondo alla scheda del materiale */
.att-documenti {
  display: flex; align-items: center; gap: 10px; min-height: 44px; margin-top: 8px; padding-top: 8px; border-top: 1px solid #ece9e2;
  color: var(--blu); font-size: 14px; font-weight: 700; text-decoration: none;
}
.att-doc-ico { display: inline-flex; font-size: 18px; }
.att-doc-testo { flex: 1; min-width: 0; }
.att-doc-freccia { flex: none; font-size: 20px; line-height: 1; }
.att-documenti:focus-visible { outline: 2px solid var(--blu); outline-offset: 2px; border-radius: 6px; }

/* ---------- Scheda "Pagamenti" (partials/pagamenti.ejs): i quattro stati di pagamenti.statoPagamento ----------
   Stessa scheda della pagina dell'ordine (blocco .pg-* qui sopra); cambiano i colori e i testi delle righe. */
/* 'bloccato' (richiesta in attesa): consegna azzurra con il lucchetto, la carta è solo autorizzata */
.pg-bloccata { background: #E3EDF7; color: #1A4468; }
.pg-bloccata .pg-ico { color: #1A4468; }
.pg-lucchetto { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 50%; background: #245A8F; color: #fff; font-size: 10px; }
/* Materiale IN SOSPESO (richiesta in attesa): bordo tratteggiato e importo grigio, non ancora una spesa certa */
.pg-materiale.pg-sospeso { background: #fff; border: 1.5px dashed #CFC8B8; }
.pg-materiale.pg-sospeso .pg-importo { color: #6B6A5F; }
/* 'pagato': a destra, in colonna, l'importo e il link sottolineato "Ricevuta" (area di tocco estesa oltre il testo) */
.pg-destra { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.pg-ricevuta {
  position: relative; display: inline-flex; align-items: center; gap: 4px; color: inherit; font-size: 12.5px; font-weight: 700; text-decoration: underline;
}
.pg-ricevuta svg { font-size: 14px; }
.pg-ricevuta::after { content: ""; position: absolute; inset: -10px -6px; }
.pg-ricevuta:focus-visible { outline: 2px solid var(--blu); outline-offset: 2px; border-radius: 4px; }
/* 'annullato' e 'rimborsato': UNA riga grigia con la carta di credito, niente furgone né verde */
.pg-nessuno { background: #F7F6F2; border: 1px solid #E2DED3; color: #3F3E38; }
.pg-nessuno .pg-ico { color: #3F3E38; }
.pg-nessuno .pg-importo { color: #6B6A5F; }
.pg-nessuno .pg-sub { display: block; }
.pg-nessuno .pg-link-riga { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.pg-nota { margin: 12px 2px 2px; font-size: 13px; line-height: 1.4; color: #6B6A5F; }

/* ---------- Pagina di un cliente approvato, vista dal banco (views/distributore_cliente.ejs) ----------
   Testata con freccia tonda e pallino "Approvato"; sotto, due colonne: a sinistra (360px) i dati dell'anagrafica e "Cliente approvato", a destra
   la scheda "Materiale ordinato" (views/partials/materiale_cliente.ejs, classi `mc-*`): testata e filtri fissi, l'elenco scorre dentro la scheda.
   Sotto i 900px le colonne si impilano con il materiale SOPRA i dati (regola `.cli-colonna-materiale` nel blocco "Clienti del banco"). */
.cli-intesta-app { gap: 14px; }
.cli-indietro-tondo {
  flex: none; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px;
  border: 1px solid #E2DED3; border-radius: 50%; background: #fff; color: var(--testo); font-size: 22px; text-decoration: none;
}
.cli-indietro-tondo:hover { background: #FAF9F6; }
.cli-indietro-tondo:focus-visible { outline: 2px solid var(--blu); outline-offset: 2px; }
/* "● Approvato": pillola con pallino, non l'etichetta maiuscola degli altri stati */
.cli-intesta-app .cli-etichetta {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px 4px 9px; border-radius: 999px;
  font-size: 13px; letter-spacing: 0; text-transform: none;
}
.cli-intesta-app .cli-etichetta::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }

/* Da 900px: contenitore largo (la tabella del materiale ha bisogno di spazio: quello delle altre pagine clienti, 1168px, la strozzerebbe),
   colonna dei dati di 360px (le voci fiscali in due colonne, indirizzi e contatti uno sotto l'altro). Sotto i 900px le colonne si impilano
   (regola nel blocco "Clienti del banco"): queste righe stanno qui dentro perché, essendo in fondo al file, altrimenti la vincerebbero. */
@media (min-width: 900px) {
  .cli-pagina.cli-pagina-larga {
    max-width: 1600px;
    padding-right: max(32px, env(safe-area-inset-right, 0px));
    padding-left: max(32px, env(safe-area-inset-left, 0px));
  }
  .cli-layout-approvato { grid-template-columns: 360px minmax(0, 1fr); }
  .cli-layout-approvato .cli-dati-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cli-layout-approvato .cli-dati-2 { grid-template-columns: minmax(0, 1fr); }
  .cli-layout-approvato .cli-contatti { grid-template-columns: minmax(0, 1fr); }
}

.mc-card {
  --mc-pad: 22px;
  display: flex; flex-direction: column; min-width: 0; overflow: hidden; scroll-margin-top: 80px;
  border: 1px solid #E2DED3; border-radius: 18px; background: #fff;
}
.mc-testa { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 12px 16px; padding: 20px var(--mc-pad) 0; }
.mc-testa-testi { flex: 1 1 260px; min-width: 0; }
.mc-titolo { margin: 0; font-family: var(--cli-sora); font-size: 20px; font-weight: 700; line-height: 1.25; }
.mc-sotto { margin: 4px 0 0; color: var(--grigio); font-size: 14px; line-height: 1.4; }
.mc-esporta {
  flex: none; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px;
  border: 1px solid #d6d1c6; border-radius: 22px; background: #fff; color: var(--testo); font-size: 14.5px; font-weight: 700; text-decoration: none;
}
.mc-esporta svg { font-size: 18px; }
.mc-esporta:hover { background: #FAF9F6; }
.mc-esporta:focus-visible { outline: 2px solid var(--blu); outline-offset: 2px; }

/* Filtri: mesi a sinistra, vista a destra. Segmento attivo bianco con ombra leggera su fondo #EFEDE6. */
.mc-filtri { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; padding: 16px var(--mc-pad) 0; }
.mc-filtri-mesi { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
.mc-seg { display: inline-flex; gap: 4px; max-width: 100%; padding: 4px; overflow-x: auto; border-radius: 14px; background: #EFEDE6; scrollbar-width: none; }
.mc-seg::-webkit-scrollbar { display: none; }
.mc-seg-voce {
  flex: none; display: inline-flex; align-items: center; min-height: 36px; padding: 0 16px; border-radius: 11px;
  color: #4f4d44; font-family: var(--cli-sora); font-size: 14px; font-weight: 600; text-decoration: none; white-space: nowrap;
}
.mc-seg-voce:hover { color: var(--testo); }
.mc-seg-voce.attiva { background: #fff; color: var(--testo); font-weight: 700; box-shadow: 0 1px 3px rgba(35, 32, 25, 0.14); }
.mc-seg-voce:focus-visible { outline: 2px solid var(--blu); outline-offset: 1px; }
.mc-altri { margin: 0; }
.mc-altri-select {
  height: 44px; padding: 0 12px; border: 1px solid #d6d1c6; border-radius: 14px; background: #fff; color: var(--testo);
  font: inherit; font-size: 16px; font-weight: 600; /* 16px: sotto Safari iPhone ingrandisce la pagina al tocco */
}
.mc-altri-select.attiva { border-color: #1A4468; background: #E3EDF7; color: #1A4468; }
.mc-altri-select:focus-visible, .mc-altri-vai:focus-visible { outline: 2px solid var(--blu); outline-offset: 1px; }
.mc-altri-vai { height: 44px; margin-left: 6px; padding: 0 14px; border: 1px solid #d6d1c6; border-radius: 14px; background: #fff; font: inherit; font-weight: 700; }

/* Riepilogo: Ordini, Articoli · pezzi, Totale (evidenziato) */
.mc-riepilogo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.5fr); gap: 12px; padding: 16px var(--mc-pad) 0; }
.mc-box { min-width: 0; padding: 12px 14px; border-radius: 14px; background: #F7F6F2; }
.mc-box-eti { color: var(--grigio); font-size: 13px; line-height: 1.3; }
.mc-box-val { margin-top: 4px; font-family: var(--cli-sora); font-size: 24px; font-weight: 800; line-height: 1.2; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.mc-box-sotto { margin-top: 4px; font-size: 12px; font-variant-numeric: tabular-nums; }
.mc-box-totale { background: #E3EDF7; color: #1A4468; }
.mc-box-totale .mc-box-eti { color: #1A4468; }

/* Elenco: scorre dentro la scheda, testata e filtri restano */
.mc-elenco { flex: 1 1 auto; min-height: 0; margin-top: 16px; overflow-y: auto; overscroll-behavior: contain; border-top: 1px solid #E2DED3; }
.mc-elenco:focus-visible { outline: 2px solid var(--blu); outline-offset: -2px; }
.mc-ordine { border-bottom: 1px solid #ece9e2; }
.mc-sum {
  display: grid; grid-template-columns: 18px 120px minmax(0, 1fr) 150px 112px; align-items: center; column-gap: 14px;
  padding: 14px var(--mc-pad); list-style: none; cursor: pointer;
}
.mc-sum::-webkit-details-marker { display: none; }
.mc-sum:hover { background: #FAF9F6; }
.mc-sum:focus-visible { outline: 2px solid var(--blu); outline-offset: -2px; }
.mc-freccia { color: var(--grigio); font-size: 12px; transition: transform 0.15s; }
.mc-ordine[open] .mc-freccia { transform: rotate(90deg); }
.mc-num { font-size: 16px; font-weight: 700; white-space: nowrap; }
.mc-meta { min-width: 0; color: #4f4d44; font-size: 14px; font-variant-numeric: tabular-nums; }
.mc-stato { justify-self: start; }
.mc-tot { justify-self: end; font-size: 16px; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mc-dettaglio { padding: 0 var(--mc-pad) 16px calc(var(--mc-pad) + 32px); }

.mc-tab-box { overflow-x: auto; border: 1px solid #E2DED3; border-radius: 12px; background: #FAF9F6; }
.mc-tab-box-solo { margin: 16px var(--mc-pad); }
.mc-tab { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.mc-tab th {
  padding: 11px 14px; border-bottom: 1px solid #ece9e2; color: var(--grigio); font-size: 12px; font-weight: 600;
  letter-spacing: 0.08em; text-align: left; text-transform: uppercase; white-space: nowrap;
}
.mc-tab td { padding: 12px 14px; border-bottom: 1px solid #ece9e2; font-size: 14.5px; vertical-align: middle; }
.mc-tab tbody tr:last-child td { border-bottom: 0; }
.mc-tab .mc-c-qta { width: 64px; }
.mc-tab .mc-c-num { width: 112px; text-align: right; white-space: nowrap; }
.mc-tab .mc-c-ordini { width: 160px; color: #4f4d44; font-size: 14px; }
.mc-c-tot { font-weight: 700; }
.mc-qta {
  display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 28px; padding: 0 6px;
  border-radius: 8px; background: #E3EDF7; color: #1A4468; font-size: 13px; font-weight: 800;
}
.mc-art { font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.mc-cod { margin-top: 2px; color: var(--grigio); font-size: 12.5px; }
.mc-cad-sub, .mc-negli-sub { display: none; } /* il prezzo cad. e gli ordini passano sotto il nome quando la colonna non c'è (telefono) */
.mc-vedi { display: flex; align-items: center; width: fit-content; min-height: 44px; margin: 4px 0 0 auto; color: var(--blu); font-size: 14.5px; font-weight: 700; text-decoration: none; }
.mc-vedi:hover { text-decoration: underline; }
.mc-vedi:focus-visible { outline: 2px solid var(--blu); outline-offset: 2px; border-radius: 6px; }
.mc-fondo { margin: 0; padding: 14px var(--mc-pad) 18px; color: #4f4d44; font-size: 15px; text-align: right; }
.mc-fondo strong { margin: 0 4px; color: var(--testo); font-family: var(--cli-sora); font-size: 18px; font-weight: 800; font-variant-numeric: tabular-nums; }
.mc-vuoto { margin: 0; padding: 48px var(--mc-pad); color: var(--grigio); font-size: 16px; text-align: center; }

/* Da 900px la scheda sta nella schermata: l'elenco scorre dentro (sotto, è la pagina a scorrere). */
@media (min-width: 900px) {
  .mc-card { max-height: max(460px, calc(100vh - 180px)); max-height: max(460px, calc(100dvh - 180px)); }
}
/* Colonna destra stretta: la riga dell'ordine va su due righe (numero e totale / dati e stato) */
@media (max-width: 1179.98px) {
  .mc-sum { grid-template-columns: 18px minmax(0, 1fr) auto; grid-template-areas: "freccia num tot" ". meta stato"; row-gap: 6px; }
  .mc-freccia { grid-area: freccia; }
  .mc-num { grid-area: num; }
  .mc-tot { grid-area: tot; }
  .mc-meta { grid-area: meta; }
  .mc-stato { grid-area: stato; justify-self: end; }
  .mc-dettaglio { padding-left: var(--mc-pad); }
}
/* Schermi a tocco: i segmenti arrivano a 44px (control da 48) */
@media (max-width: 899.98px) {
  .mc-seg { padding: 2px; }
  .mc-seg-voce { min-height: 44px; }
}
/* Telefono stretto: i mesi vanno a capo invece di scorrere di lato (un "Tutto" tagliato non si vedrebbe) */
@media (max-width: 479.98px) {
  .mc-seg { flex-wrap: wrap; overflow-x: visible; }
  .mc-seg-voce { padding: 0 14px; }
}
@media (max-width: 639.98px) {
  .mc-card { --mc-pad: 14px; }
  .mc-riepilogo { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .mc-box-totale { grid-column: 1 / -1; order: -1; }
  .mc-seg-vista { width: 100%; }
  .mc-seg-vista .mc-seg-voce { flex: 1; justify-content: center; }
  .mc-sum { column-gap: 10px; grid-template-areas: "freccia num tot" ". meta meta" ". stato stato"; }
  .mc-stato { justify-self: start; }
  .mc-tab th, .mc-tab td { padding: 10px; }
  .mc-tab .mc-c-qta { width: 52px; }
  .mc-tab .mc-c-num { width: 84px; }
  .mc-c-cad, .mc-c-ordini { display: none; }
  .mc-cad-sub, .mc-negli-sub { display: inline; }
}
@media (prefers-reduced-motion: reduce) {
  .mc-freccia { transition: none; }
}

/* Pagine pubbliche: privacy e eliminazione dell'account (views/legale.ejs) */
.legale { max-width: 680px; margin: 0 auto; padding: 24px 16px 48px; color: var(--testo); font-family: 'Source Sans 3', system-ui, sans-serif; line-height: 1.55; }
.legale-indietro { display: inline-block; min-height: 44px; line-height: 44px; color: var(--blu); text-decoration: none; font-weight: 600; }
.legale-titolo { font-family: 'Sora', system-ui, sans-serif; font-size: 26px; font-weight: 800; margin: 8px 0 4px; }
.legale-data { color: var(--grigio); margin: 0 0 20px; font-size: 14px; }
.legale-sezione { margin-top: 22px; }
.legale-sezione h2 { font-family: 'Sora', system-ui, sans-serif; font-size: 18px; font-weight: 700; margin: 0 0 8px; }
.legale-sezione p { margin: 0 0 10px; }
.legale-sezione ul { margin: 0 0 10px; padding-left: 20px; }
.legale-sezione li { margin-bottom: 6px; }
.legale-link { margin-top: 32px; color: var(--grigio); font-size: 14px; }
.legale-link a { color: var(--blu); }

/* ---------- Pagina dell'ordine del banco (views/distributore_ordine.ejs, src/ordine_banco.js; classi ord-*, più le ric-* del dettaglio della richiesta) ---------- */

/* Testata: freccia da 44px, "Ordine #N" a 26px, stato, cliente; a destra quando è arrivato e da quale richiesta. */
.pagina-ordine .ric-indietro { width: 44px; height: 44px; }
.pagina-ordine .ric-titolo { font-size: 26px; }
.pagina-ordine .ric-corpo { grid-template-columns: minmax(0, 1fr) 420px; }
.ord-cliente-nome { font-size: 15px; font-weight: 600; overflow-wrap: anywhere; }
.ric-passo-blu { --p-sfondo: var(--blu-chiaro); --p-colore: var(--blu); } /* "Da preparare" nell'Avanzamento dell'ordine */
/* Gli altri due stati dell'ordine (la pagina si adatta): In consegna azzurro (#E3EDF7 / #1A4468) e Consegnato grigio (#ECE9E2 / #3F3E38). */
.ric-st-in_consegna { --st: #1a4468; --st-sfondo: #e3edf7; }
.ric-st-consegnato { --st: #3f3e38; --st-sfondo: #ece9e2; }

/* Dopo la partenza la testata del materiale ha anche "N articoli · M pezzi" e "Stampa". */
.ord-mat-azioni { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 8px 12px; }
.ord-stampa-btn {
  display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; border: 1.5px solid #cfcabd; border-radius: 22px;
  background: var(--surface); color: var(--testo); font-family: inherit; font-size: 14px; font-weight: 700; cursor: pointer;
}
.ord-stampa-btn svg { flex: none; font-size: 18px; }
.ord-stampa-btn:hover { background: var(--sfondo); }
.ord-stampa-btn:focus-visible { outline: 3px solid var(--blu); outline-offset: 2px; }

/* Materiale da preparare: tabella con quantità, articolo, prezzo cad. e totale di riga (la bolla è sempre su tutto: niente caselle). */
.ord-tab-testa, .ord-riga {
  display: grid; grid-template-columns: 64px minmax(0, 1fr) 120px 120px; align-items: center; column-gap: 16px; padding: 0 20px;
}
.ord-tab-testa {
  min-height: 34px; border-top: 1px solid var(--bordo); border-bottom: 1px solid var(--bordo); background: #f7f6f2;
  color: var(--grigio); font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
}
.ord-riga { min-height: 72px; margin: 0; padding-top: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--bordo); font-weight: 400; }
.ord-riga .ric-nome { font-size: 16.5px; }
.ord-cad { color: #4f4d44; font-size: 14px; }
.ord-cad-sub { display: none; }
.ord-mancano { margin-top: 2px; color: var(--arancio); font-size: 13px; font-weight: 600; }
.ord-nessuna-riga, .ord-fuori { margin: 0; padding: 14px 20px; color: var(--grigio); font-size: 14px; line-height: 1.4; }
.ord-fuori { border-bottom: 1px solid var(--bordo); color: var(--arancio); font-weight: 600; }

/* Piede: la nota a sinistra, a destra Merce, IVA e Totale (i soldi del banco: quello che incassa dal cliente con la sua fattura). */
.ord-piede {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 24px; padding: 14px 20px;
  border-radius: 0 0 16px 16px; background: #faf9f6;
}
.ord-piede-nota { flex: 1 1 260px; margin: 0; color: var(--grigio); font-size: 13.5px; line-height: 1.4; }
.ord-totali { display: flex; align-items: baseline; justify-content: flex-end; flex-wrap: wrap; gap: 4px 22px; margin: 0; }
.ord-totali > div { display: flex; align-items: baseline; gap: 8px; }
.ord-totali dt { margin: 0; color: var(--grigio); font-size: 14px; }
.ord-totali dd { margin: 0; font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }
.ord-totale dd { font-family: var(--ric-sora); font-size: 22px; font-weight: 800; }

/* Consegna e Cliente affiancate. */
.ord-coppia { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
.ord-consegna { padding: 18px 20px; }
.ord-indirizzo, .ord-furgone { display: flex; align-items: flex-start; gap: 10px; }
.ord-indirizzo + .ord-furgone { margin-top: 14px; }
.ord-indirizzo strong { display: block; font-size: 16px; font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; }
.ord-indirizzo small { display: block; color: var(--grigio); font-size: 14px; line-height: 1.4; }
.ord-furgone { font-size: 14px; line-height: 1.4; }
.ord-nessun-dato { margin: 0 0 12px; color: var(--grigio); font-size: 14px; }

/* Ritiro del corriere: cerchio verde con i minuti, rosso sotto la soglia della home. I minuti li muove public/app.js ([data-ric-arrivo]). */
.ord-ritiro { padding: 20px; border: 1.5px solid #f1c9b3; }
.ord-ritiro .ric-arrivo-cerchio { background: #e3f3e6; color: #1f5f2e; }
.ord-ritiro .ric-arrivo-testa.vicino .ric-arrivo-cerchio { background: #fbe4e2; color: #991b1b; }
.ord-ritiro .ric-arrivo-titolo { color: var(--testo); }

/* Bolla / DDT: compatta. Colli con − e +, aspetto a segmenti (radio veri: funzionano anche senza JavaScript), due select affiancati e la nota. */
.ord-bolla { padding: 18px 20px 20px; }
.ord-bolla-titolo { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.ord-bolla-titolo .ric-dato-icona { margin-top: 0; color: var(--testo); font-size: 22px; }
.ord-bolla-griglia { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px 16px; margin-bottom: 14px; }
.ord-bolla-griglia + .ord-bolla-griglia { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ord-campo { min-width: 0; margin: 0; padding: 0; border: 0; }
.ord-bolla form > .ord-campo { margin-bottom: 16px; }
.ord-etichetta { display: block; float: none; width: auto; padding: 0; margin: 0 0 6px; color: #3f3e37; font-size: 12.5px; font-weight: 700; }
.ord-facoltativo { color: var(--grigio); font-weight: 400; }
.ord-stepper { display: flex; align-items: stretch; height: 46px; border: 1.5px solid #cfcabd; border-radius: 12px; background: #fff; overflow: hidden; }
.ord-stepper input[type="number"] {
  width: 46px; min-width: 0; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; text-align: center;
  font-size: 16px; font-weight: 700; appearance: textfield; -moz-appearance: textfield;
}
.ord-stepper input[type="number"]::-webkit-outer-spin-button, .ord-stepper input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.ord-stepper input[type="number"]:focus-visible { outline: 2px solid var(--blu); outline-offset: -2px; }
.ord-stepper-btn { width: 40px; padding: 0; border: 0; background: transparent; color: var(--blu); font-size: 22px; font-weight: 700; line-height: 1; cursor: pointer; }
.ord-stepper-btn:hover { background: var(--blu-chiaro); }
.ord-stepper-btn:focus-visible { outline: 2px solid var(--blu); outline-offset: -2px; }
.ord-segmenti { display: flex; gap: 2px; padding: 4px; border: 1px solid var(--bordo); border-radius: 14px; background: #f1f0ec; }
.ord-seg { position: relative; flex: 1 1 0; min-width: 0; margin: 0; font-weight: 400; }
.ord-seg input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.ord-seg span {
  display: flex; align-items: center; justify-content: center; min-height: 38px; padding: 0 6px; border-radius: 10px; color: #4f4d44;
  font-size: 14px; font-weight: 600; text-align: center; transition: background-color 0.15s;
}
.ord-seg input:checked + span { background: #fff; color: var(--testo); font-weight: 700; box-shadow: 0 1px 3px rgba(35, 32, 25, 0.18); }
.ord-seg input:focus-visible + span { outline: 3px solid var(--blu); outline-offset: 1px; }
.ord-bolla select, .ord-bolla textarea { margin: 0; border: 1.5px solid #cfcabd; border-radius: 12px; font-size: 16px; }
.ord-bolla select { min-height: 46px; padding: 0 10px; }
.ord-bolla textarea { min-height: 64px; padding: 10px 12px; resize: vertical; }
.ord-bolla-btn {
  display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 54px; margin: 0; padding: 0 20px; border: 0;
  border-radius: 28px; background: var(--verde); color: #fff; font-family: inherit; font-size: 16px; font-weight: 700; line-height: 1.2; text-align: center; cursor: pointer;
}
.ord-bolla-btn svg { flex: none; font-size: 20px; }
.ord-bolla-btn:hover { background: #1f6a31; }
.ord-bolla-btn:focus-visible { outline: 3px solid var(--blu); outline-offset: 2px; }
.ord-bolla-nota { margin: 10px 0 0; color: var(--grigio); font-size: 13px; line-height: 1.4; text-align: center; }

/* In consegna (azzurra) e Consegnato (verde): la scheda dello stato, con il cerchio a sinistra, il titolo e le righe di dettaglio. */
.ord-stato { padding: 20px; }
.ord-stato-consegna { border: 1.5px solid #b9cde2; }
.ord-stato-consegnato { border: 1.5px solid #cde6d3; }
.ord-stato-testa { display: flex; align-items: center; gap: 16px; }
.ord-stato-cerchio { flex: none; display: flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 50%; font-size: 28px; }
.ord-stato-consegna .ord-stato-cerchio { background: #e3edf7; color: #1a4468; }
.ord-stato-consegnato .ord-stato-cerchio { background: #e3f3e6; color: var(--verde); font-size: 34px; }
.ord-stato-consegnato .ord-stato-cerchio svg { stroke-width: 2.4; }
.ord-stato-testi { min-width: 0; }
.ord-stato-titolo { margin: 0; font-family: var(--ric-sora); font-size: 19px; font-weight: 700; line-height: 1.25; }
.ord-stato-consegna .ord-stato-titolo { color: #1a4468; }
.ord-stato-consegnato .ord-stato-titolo { color: #1f5f2e; }
.ord-stato-testi p { margin: 4px 0 0; color: var(--grigio); font-size: 13.5px; line-height: 1.4; }
.ord-stato-testi .ord-stato-corriere { color: var(--testo); font-weight: 600; }
.ord-stato-mini { display: flex; gap: 10px; margin-top: 16px; }
.ord-stato-mini > div { display: flex; flex: 1 1 0; flex-direction: column; gap: 2px; min-width: 0; padding: 10px 12px; border-radius: 12px; background: #f7f6f2; }
.ord-stato-mini span { color: var(--grigio); font-size: 12.5px; }
.ord-stato-mini strong { font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; }

/* La bolla già emessa: numero e dettagli, e il pulsante che la apre per stamparla. */
.ord-bolla-emessa { padding: 18px 20px 20px; }
.ord-bolla-emessa-testa { display: flex; align-items: flex-start; gap: 14px; }
.ord-bolla-emessa-ico { 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: 22px; }
.ord-bolla-emessa-testa > div { min-width: 0; }
.ord-bolla-emessa-titolo { margin: 0; font-family: var(--ric-sora); font-size: 18px; font-weight: 700; line-height: 1.25; overflow-wrap: anywhere; }
.ord-bolla-emessa-no { color: var(--grigio); }
.ord-bolla-emessa-testa p { margin: 4px 0 0; color: var(--grigio); font-size: 13.5px; line-height: 1.4; }
.ord-bolla-apri {
  display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; margin-top: 16px; padding: 0 20px; border-radius: 28px;
  background: var(--blu); color: #fff; font-size: 16px; font-weight: 700; line-height: 1.2; text-align: center; text-decoration: none;
}
.ord-bolla-apri svg { flex: none; font-size: 20px; }
.ord-bolla-apri:hover { background: var(--blu-scuro); }
.ord-bolla-apri:focus-visible { outline: 3px solid var(--blu); outline-offset: 2px; }

/* "Stampa" dalla pagina dell'ordine: solo testata e materiale (niente menu, schede laterali, pulsanti). */
@media print {
  body.pagina-ordine { background: #fff; }
  body.pagina-ordine .banco-testa, body.pagina-ordine .navbar, body.pagina-ordine .ric-indietro, body.pagina-ordine .ric-colonna-destra,
  body.pagina-ordine .ord-coppia, body.pagina-ordine .ric-passi, body.pagina-ordine .ric-elimina-riga, body.pagina-ordine .ord-stampa-btn,
  body.pagina-ordine .errore { display: none !important; }
  body.pagina-ordine .ric-corpo { display: block; }
  body.pagina-ordine .ric-scheda { border-color: #999; }
  @page { margin: 14mm; }
}

@media (prefers-reduced-motion: reduce) {
  .ord-seg span { transition: none; }
}

/* Fra 900 e 1100px la colonna di sinistra è stretta: Consegna e Cliente una sopra l'altra e la tabella un po' più compatta. */
@media (min-width: 900px) and (max-width: 1099.98px) {
  .pagina-ordine .ric-corpo { grid-template-columns: minmax(0, 1fr) 360px; }
  .ord-coppia { grid-template-columns: minmax(0, 1fr); }
  .ord-tab-testa, .ord-riga { grid-template-columns: 52px minmax(0, 1fr) 92px 92px; column-gap: 12px; }
}

/* Sotto i 900px, una colonna: testata, Ritiro (o lo stato: In consegna / Consegnato), Materiale, Bolla, Consegna, Cliente, Avanzamento, Elimina. La tabella diventa
   una lista: badge, nome e codice (col prezzo cad. in piccolo) e il totale a destra. */
@media (max-width: 899.98px) {
  .ord-coppia { display: contents; }
  .pagina-ordine .ord-ritiro, .pagina-ordine .ord-stato { order: 1; }
  .pagina-ordine .ord-materiale { order: 2; }
  .pagina-ordine .ord-bolla, .pagina-ordine .ord-bolla-emessa { order: 3; }
  .pagina-ordine .ord-stato, .pagina-ordine .ord-bolla-emessa { padding-left: 16px; padding-right: 16px; }
  .pagina-ordine .ord-consegna { order: 4; }
  .pagina-ordine .ord-cliente { order: 5; }
  .pagina-ordine .ric-passi { order: 6; }
  .pagina-ordine .ric-elimina-riga { order: 7; }
  .pagina-ordine .ord-consegna, .pagina-ordine .ord-ritiro, .pagina-ordine .ord-bolla { padding-left: 16px; padding-right: 16px; }
  .ord-tab-testa { display: none; }
  .ord-riga { grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; column-gap: 12px; padding: 12px 16px; }
  .ord-riga .ric-qta, .ord-riga .ric-articolo, .ord-riga .ric-tot { grid-area: auto; align-self: start; }
  .ord-cad { display: none; }
  .ord-cad-sub { display: inline; }
  .ord-fuori, .ord-nessuna-riga { padding-left: 16px; padding-right: 16px; }
  .ord-piede { padding: 14px 16px; }
  .ord-totali { justify-content: flex-start; }
}

/* Su un telefono, e fra 900 e 1100px (colonna da 360px), la scheda è stretta (~310px di campo): colli, aspetto, causale e trasporto uno sotto l'altro,
   altrimenti i segmenti si accavallano. */
@media (max-width: 559.98px), (min-width: 900px) and (max-width: 1099.98px) {
  .ord-bolla-griglia, .ord-bolla-griglia + .ord-bolla-griglia { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Avvisi del banco (partials/banco_avviso.ejs, public/app.js "Avvisi del banco") ---------- */

/* Pallino sulla scheda "Banco": arancio, col numero di richieste da confermare, pulsa piano. Vale su tutte le pagine del banco, anche la home. */
.banco-voce-pallino[hidden] { display: none; }
.banco-voce-pallino-ordini { background: var(--arancio); animation: banco-pallino-pulsa 1.6s ease-in-out infinite; }
@keyframes banco-pallino-pulsa {
  0%, 100% { box-shadow: 0 0 0 0 rgba(171, 77, 36, 0.45); }
  60% { box-shadow: 0 0 0 7px rgba(171, 77, 36, 0); }
}

/* Striscia sotto l'intestazione: "2 richieste da confermare · la prima scade tra 01:38" e "Vai al banco ›". Non c'è sulla home. */
.banco-avviso {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  padding: 6px max(24px, env(safe-area-inset-right, 0px)) 6px max(24px, env(safe-area-inset-left, 0px));
  background: #fbe6da;
  border-bottom: 1px solid #f1c9b3;
  color: #8a3a14;
}
.banco-avviso[hidden] { display: none; }
.banco-avviso-punto {
  flex: none;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--arancio);
  animation: banco-avviso-pulsa 1.6s ease-in-out infinite;
}
@keyframes banco-avviso-pulsa {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.35; transform: scale(0.7); }
}
.banco-avviso-testo { flex: 1 1 auto; min-width: 0; margin: 0; font-size: 15px; line-height: 1.3; }
.banco-avviso-tempo { font-variant-numeric: tabular-nums; }
.banco-avviso.urgente .banco-avviso-tempo { color: var(--rosso); }
.banco-avviso-vai {
  position: relative;
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 34px;
  margin-left: auto;
  padding: 0 16px;
  border-radius: 17px;
  background: var(--arancio);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}
.banco-avviso-vai::after { content: ""; position: absolute; inset: -6px 0; } /* area di tocco da 46px */
.banco-avviso-vai:hover { background: #8a3a14; }
.banco-avviso-vai:focus-visible { outline: 2px solid var(--arancio); outline-offset: 2px; }
@media (max-width: 899.98px) {
  .banco-avviso { padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
}
@media (max-width: 560px) {
  .banco-avviso-testo { font-size: 14px; }
  .banco-avviso-vai { padding: 0 12px; }
}

/* Notifiche a comparsa: in basso a destra, una sopra l'altra (la più nuova in basso), al massimo 3. Il contenitore non intercetta i tocchi, solo le schede. */
.banco-avvisi {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 80;
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 400px;
  max-width: calc(100vw - 24px);
  pointer-events: none;
}
.banco-avvisi > * { pointer-events: auto; }
.banco-avvisi-altri {
  align-self: flex-end;
  padding: 4px 12px;
  border-radius: 12px;
  background: var(--testo);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
}
.banco-avvisi-altri[hidden] { display: none; }

/* Colori di ogni tipo: --tipo (barra, tempo, pulsante pieno) e --tipo-chiaro (sfondo dell'icona). */
.avv { --tipo: var(--grigio); --tipo-chiaro: #ece9e2; }
.avv-nuova_richiesta { --tipo: #ab4d24; --tipo-chiaro: #fbe6da; }
.avv-corriere_trovato { --tipo: #297c3c; --tipo-chiaro: #e3f3e6; }
.avv-nessun_corriere { --tipo: #bd3a3a; --tipo-chiaro: #fbe4e2; }
.avv-richiesta_scaduta { --tipo: #8a887e; --tipo-chiaro: #ece9e2; }
.avv-ordine_consegnato { --tipo: #6b6a5f; --tipo-chiaro: #ece9e2; }

.avv {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  box-sizing: border-box;
  width: 100%;
  padding: 16px 16px 16px 21px; /* 5px di barra + 16px */
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 12px 32px rgba(28, 25, 23, 0.18);
  overflow: hidden;
  animation: avv-entra 0.35s ease-out;
}
.avv[hidden] { display: none; }
.avv.senza-entrata { animation: none; }
.avv::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 5px; background: var(--tipo); }
.avv-link { cursor: pointer; }
@keyframes avv-entra {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: none; }
}

.avv-figura {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 13px;
  background: var(--tipo-chiaro);
  color: var(--tipo);
  font-size: 22px;
}
.avv-ico { display: inline-flex; }
.avv-figura-anello { position: relative; border-radius: 50%; background: transparent; }
.avv-figura-anello svg { display: block; width: 44px; height: 44px; }
.avv-anello-traccia, .avv-anello-barra { fill: none; stroke-width: 4; }
.avv-anello-traccia { stroke: var(--tipo-chiaro); }
.avv-anello-barra { stroke: var(--tipo); stroke-linecap: round; transition: stroke-dashoffset 1s linear, stroke 0.3s; }
.avv-anello-tempo {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--tipo);
  font-size: 10.5px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.2px;
}
.avv.urgente .avv-anello-traccia { stroke: #fbe4e2; }
.avv.urgente .avv-anello-barra { stroke: var(--rosso); }
.avv.urgente .avv-anello-tempo { color: var(--rosso); }

.avv-corpo { flex: 1 1 auto; min-width: 0; }
.avv-titolo { margin: 0; padding-right: 30px; font-size: 15.5px; font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; }
.avv-nuova_richiesta .avv-titolo { padding-right: 0; } /* senza "×" */
.avv-testo { margin: 2px 0 0; color: #5c5b52; font-size: 13.5px; line-height: 1.35; overflow-wrap: anywhere; }
.avv-errore { margin: 6px 0 0; color: var(--rosso); font-size: 13px; font-weight: 600; line-height: 1.3; }
.avv-errore[hidden] { display: none; }
.avv-azioni { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.avv-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 38px;
  margin: 0;
  padding: 0 18px;
  border: 1px solid #cfcbc0;
  border-radius: 19px;
  background: #fff;
  color: var(--testo);
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}
.avv-btn:hover { background: var(--sfondo); }
.avv-btn:disabled { opacity: 0.6; cursor: default; }
.avv-btn-arancio { border-color: var(--arancio); background: var(--arancio); color: #fff; }
.avv-btn-arancio:hover { background: #8a3a14; border-color: #8a3a14; }
.avv-btn-blu { border-color: var(--blu); background: var(--blu); color: #fff; }
.avv-btn-blu:hover { background: var(--blu-scuro); border-color: var(--blu-scuro); }
.avv-btn .avv-ico { font-size: 16px; }
.avv-btn:focus-visible, .avv-chiudi:focus-visible { outline: 2px solid var(--blu); outline-offset: 2px; }
.avv-chiudi {
  position: absolute;
  top: 10px;
  right: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: none;
  color: #8a887e;
  font-size: 16px;
  cursor: pointer;
}
.avv-chiudi:hover { background: var(--sfondo); }

@media (max-width: 899.98px) {
  .banco-avvisi { bottom: calc(var(--barra-bassa) + 12px); } /* sopra il menu in basso del banco */
}
@media (max-width: 599.98px) {
  .banco-avvisi { right: 12px; left: 12px; width: auto; max-width: none; }
}
@media (prefers-reduced-motion: reduce) {
  .banco-voce-pallino-ordini, .banco-avviso-punto, .avv { animation: none; }
  .avv-anello-barra { transition: none; }
}
@media print {
  .banco-avviso, .banco-avvisi { display: none !important; }
}

/* ---------- Anagrafica del banco (views/distributore_anagrafica.ejs; richiesta esplicita del 20/10/2026, mockup docs/mockup/anagrafica-banco*.png; classi ab-*) ---------- */

/* Sulla pagina "Anagrafica del banco" il cerchio con le iniziali ha l'anello blu pieno al posto di quello azzurro (nessuna scheda del menu è accesa). */
.banco-avatar-btn.attivo .avatar { box-shadow: 0 0 0 3px #245a8f; }

.pagina-anagrafica-banco { --ab-sora: "Sora", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; --ab-campo: #d6d1c6; --ab-linea: #e8e4da; --ab-testo2: #5c5b52; }
/* Larghezza del contenuto 1240px (più 24px di aria per lato). */
.ab-pagina { max-width: calc(1240px + 48px); margin: 0 auto; padding: 24px max(24px, env(safe-area-inset-right, 0px)) 56px max(24px, env(safe-area-inset-left, 0px)); }

.ab-testata { display: flex; align-items: center; gap: 16px; margin-bottom: 22px; }
.ab-testata-testi { min-width: 0; }
.ab-h1 { margin: 0; font-family: var(--ab-sora); font-size: 28px; font-weight: 800; line-height: 1.2; overflow-wrap: anywhere; }
.ab-sotto { margin: 2px 0 0; color: var(--ab-testo2); font-size: 15px; overflow-wrap: anywhere; }

/* Due colonne: schede a sinistra (1fr), accesso e notifiche a destra (420px). Sotto i 900px una colonna sola, nell'ordine del markup:
   Ditta, Questa filiale, Orari, Accesso, Notifiche, Esci. */
.ab-corpo { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 20px; align-items: start; }
.ab-colonna { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.ab-card { padding: 18px 22px; border: 1px solid var(--bordo); border-radius: 18px; background: var(--surface); scroll-margin-top: 80px; }
.ab-card-testa { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.ab-titolo { margin: 0; font-family: var(--ab-sora); font-size: 17px; font-weight: 700; line-height: 1.3; }
.ab-spiega { margin: 2px 0 0; color: var(--ab-testo2); font-size: 13.5px; line-height: 1.4; }

/* Pulsanti secondari ("✎ Modifica", "Cambia password", "Annulla"): pillola bianca col bordo #D6D1C6. */
.ab-modifica, .ab-secondario, .ab-annulla, .ab-copia {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; flex: none; height: 36px; padding: 0 14px;
  border: 1px solid var(--ab-campo); border-radius: 18px; background: var(--surface); color: var(--testo);
  font: inherit; font-size: 14px; font-weight: 600; line-height: 1; text-decoration: none; cursor: pointer; white-space: nowrap;
}
.ab-modifica:hover, .ab-secondario:hover, .ab-annulla:hover, .ab-copia:hover { background: var(--sfondo); }
.ab-modifica:focus-visible, .ab-secondario:focus-visible, .ab-annulla:focus-visible, .ab-copia:focus-visible, .ab-salva:focus-visible,
.ab-posizione-link:focus-visible, .ab-switch:focus-visible, .ab-esci:focus-visible { outline: 2px solid var(--blu); outline-offset: 2px; }
.ab-secondario { margin-top: 14px; }
.ab-annulla, .ab-salva { height: 40px; padding: 0 20px; border-radius: 20px; font-size: 15px; }
.ab-salva { border: 1px solid var(--blu); background: var(--blu); color: var(--su-blu); font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; }
.ab-salva:hover { background: var(--blu-scuro); }
.ab-salva:disabled { background: #c9d0d8; border-color: #c9d0d8; cursor: not-allowed; }
.ab-azioni { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }

/* In lettura: coppie etichetta (13px, #6B6A5F) / valore (15.5px, 600). */
.ab-dati { display: grid; gap: 14px 24px; margin: 0; }
.ab-dati + .ab-dati { margin-top: 16px; }
.ab-dati-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ab-dati-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ab-dati-1 { grid-template-columns: minmax(0, 1fr); }
.ab-dati dt { margin: 0 0 2px; color: var(--grigio); font-size: 13px; }
.ab-dati dd { margin: 0; font-size: 15.5px; font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; }
.ab-punti { letter-spacing: 1px; }

/* Messaggi di una scheda: salvato (verde) e avviso (arancio). */
.ab-ok { margin: 0 0 12px; color: var(--verde); font-size: 14px; font-weight: 600; }
.ab-avviso { margin: 0 0 12px; padding: 10px 14px; border-radius: 12px; background: var(--arancio-chiaro); color: #7a3515; font-size: 14px; line-height: 1.4; }

/* Posizione sulla mappa: riga verde se c'è, arancio se manca. */
.ab-posizione { display: flex; align-items: center; gap: 10px; margin-top: 16px; padding: 10px 14px; border-radius: 12px; font-size: 14px; line-height: 1.35; }
.ab-posizione-ok { background: #e3f3e6; color: #1f5f2e; }
.ab-posizione-manca { background: var(--arancio-chiaro); color: #7a3515; }
.ab-posizione-ico { display: inline-flex; flex: none; font-size: 18px; }
.ab-posizione-testo { min-width: 0; }
.ab-posizione-link {
  flex: none; min-height: 44px; margin-left: auto; padding: 0 4px; border: none; background: none; color: inherit;
  font: inherit; font-weight: 700; text-decoration: underline; cursor: pointer;
}

/* Moduli di modifica: campi alti 42px, bordo 1.5px #D6D1C6, angoli 10px. 16px di corpo: sotto, Safari su iPhone ingrandisce la pagina al tocco. */
.ab-griglia { display: grid; gap: 14px 16px; margin-bottom: 14px; }
.ab-griglia-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ab-griglia-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ab-griglia-via { grid-template-columns: minmax(0, 2fr) minmax(0, 0.8fr) minmax(0, 1.4fr) minmax(0, 0.7fr); }
.ab-campo { min-width: 0; }
.ab-modulo-password .ab-campo { margin-bottom: 14px; }
.ab-etichetta { display: block; margin: 0 0 6px; color: var(--grigio); font-size: 13px; font-weight: 600; }
.ab-gruppo { margin: 4px 0 8px; }
.ab-input {
  display: block; width: 100%; height: 42px; padding: 0 14px; border: 1.5px solid var(--ab-campo); border-radius: 10px;
  background: var(--surface); color: var(--testo); font: inherit; font-size: 16px;
}
.ab-input:focus { outline: none; border-color: var(--blu); box-shadow: 0 0 0 3px var(--blu-chiaro); }
.ab-input-errore { border-color: var(--rosso); }
.ab-errore { margin: 6px 0 0; color: var(--rosso); font-size: 13px; line-height: 1.35; }
.ab-nota { margin: 0 0 4px; color: var(--ab-testo2); font-size: 13px; line-height: 1.4; }

/* Orari, in lettura: una riga per gruppo di giorni. */
.ab-orari { margin: 0; padding: 0; list-style: none; }
.ab-orari-riga { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 11px 0; border-top: 1px solid var(--ab-linea); font-size: 15px; }
.ab-orari-riga:first-child { border-top: none; padding-top: 0; }
.ab-orari-giorni { font-weight: 600; }
.ab-orari-fasce { text-align: right; font-variant-numeric: tabular-nums; }
.ab-orari-chiuso { color: var(--grigio); }

/* Orari, in modifica: una riga per giorno con l'interruttore aperto/chiuso e fino a due fasce. */
.ab-sempre { display: flex; align-items: center; gap: 10px; margin: 0 0 6px; font-size: 15px; font-weight: 600; cursor: pointer; }
.ab-sempre input { width: 18px; height: 18px; margin: 0; accent-color: var(--blu); }
.ab-giorno { padding: 10px 0; border-top: 1px solid var(--ab-linea); }
.ab-giorno-riga { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px; }
.ab-giorno-nome { flex: none; width: 104px; font-weight: 600; }
.ab-interruttore-etichetta { display: inline-flex; align-items: center; gap: 8px; flex: none; width: 96px; font-size: 14px; cursor: pointer; }
.ab-fasce { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; min-width: 0; transition: opacity 0.15s; }
.ab-fascia { display: inline-flex; align-items: center; gap: 6px; }
.ab-fasce-sep { margin: 0 2px; color: var(--grigio); }
.ab-giorno-chiuso .ab-fasce { opacity: 0.45; }
.ab-ora {
  width: 112px; height: 40px; padding: 0 8px; border: 1.5px solid var(--ab-campo); border-radius: 10px;
  background: var(--surface); color: var(--testo); font: inherit; font-size: 16px; font-variant-numeric: tabular-nums;
}
.ab-ora:focus { outline: none; border-color: var(--blu); box-shadow: 0 0 0 3px var(--blu-chiaro); }
.ab-ora:disabled { background: var(--sfondo); }
.ab-copia { margin-top: 14px; }
.ab-giorno .ab-errore { margin-top: 4px; }

/* Interruttori: 44x26, verde #297C3C acceso, grigio #D6D1C6 spento. Il bottone (Notifiche) e la casella (giorni degli orari) hanno lo stesso aspetto. */
.ab-switch, .ab-interruttore {
  position: relative; flex: none; width: 44px; height: 26px; margin: 0; padding: 0; border: none; border-radius: 13px;
  background: var(--ab-campo); cursor: pointer; transition: background 0.15s;
}
.ab-switch[aria-checked="true"], .ab-interruttore:checked { background: var(--verde); }
.ab-switch-pallino, .ab-interruttore::after {
  position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); transition: transform 0.15s;
}
.ab-interruttore { appearance: none; -webkit-appearance: none; }
.ab-interruttore::after { content: ""; }
.ab-switch[aria-checked="true"] .ab-switch-pallino, .ab-interruttore:checked::after { transform: translateX(18px); }
.ab-interruttore:disabled { opacity: 0.5; cursor: not-allowed; }
.ab-interruttore:focus-visible { outline: 2px solid var(--blu); outline-offset: 2px; }

.ab-interruttori { margin: 0; padding: 0; list-style: none; }
.ab-riga-interruttore { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 0; border-top: 1px solid var(--ab-linea); }
.ab-riga-testi { min-width: 0; }
.ab-riga-testi strong { display: block; font-size: 15.5px; font-weight: 700; }
.ab-riga-testi span { display: block; color: var(--ab-testo2); font-size: 13.5px; line-height: 1.35; }
.ab-riga-testi .ab-riga-nota { margin-top: 4px; color: var(--arancio); font-weight: 600; }

.ab-esci-form { margin: 0; }
/* "Esci dal banco": pulsante a tutta larghezza sotto le notifiche, pillola bianca col bordo rosa, testo rosso con l'icona di uscita. */
.ab-esci {
  display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 48px; padding: 0 20px;
  border: 1.5px solid #f0b9b6; border-radius: 24px; background: var(--surface); color: var(--rosso);
  font: inherit; font-size: 15px; font-weight: 700; cursor: pointer;
}
.ab-esci:hover { background: var(--rosso-chiaro); }
.ab-esci-ico { display: inline-flex; font-size: 18px; }

/* Finestra con la mappa per spostare il segnaposto del banco (public/mappa.js). */
.ab-mappa-dialog { width: min(640px, 94vw); padding: 20px 22px; border: 1px solid var(--bordo); border-radius: 18px; background: var(--surface); color: var(--testo); }
.ab-mappa-dialog::backdrop { background: rgba(35, 32, 25, 0.45); }
.ab-mappa { height: min(380px, 52vh); margin-top: 14px; border: 1px solid var(--bordo); border-radius: 12px; overflow: hidden; background: #eef2f6; }

@media (max-width: 899px) {
  .ab-corpo { grid-template-columns: minmax(0, 1fr); }
  /* Sotto i 900px c'è il menu in basso: il fondo pagina lo lascia libero. */
  .ab-pagina { padding-bottom: calc(var(--barra-bassa) + env(safe-area-inset-bottom, 0px) + 24px); }
  .ab-card { padding: 16px; }
  .ab-h1 { font-size: 24px; }
}
@media (max-width: 640px) {
  .ab-griglia-3, .ab-griglia-2, .ab-dati-3, .ab-dati-2 { grid-template-columns: minmax(0, 1fr); }
  .ab-griglia-via { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .ab-griglia-via .ab-via { grid-column: 1 / -1; }
  .ab-card-testa { flex-wrap: wrap; }
  .ab-giorno-nome { width: auto; min-width: 84px; }
  .ab-interruttore-etichetta { width: auto; }
  .ab-fasce { flex-basis: 100%; flex-direction: column; align-items: flex-start; }
  .ab-fasce-sep { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .ab-switch, .ab-interruttore, .ab-switch-pallino, .ab-interruttore::after, .ab-fasce { transition: none; }
}
@media print {
  .ab-modifica, .ab-secondario, .ab-esci-form, .ab-posizione-link { display: none !important; }
}

/* ---------- Installa l'app (views/partials/installa.ejs, public/app.js "Installa l'app") e scheda "Sul telefono" del profilo ---------- */

/* Scheda nella home: sotto la scheda di stato, sopra la ricerca. Nascosta finché lo script non dice che si può installare. */
.installa {
  display: flex; align-items: center; gap: 12px; margin: 0 0 12px; padding: 12px 8px 12px 14px;
  border: 1px solid var(--bordo); border-radius: 16px; background: var(--surface);
}
.installa-ico { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 12px; background: var(--blu-chiaro); color: var(--blu); font-size: 22px; }
.installa-testi { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.installa-testi strong { font-size: 15px; font-weight: 700; line-height: 1.25; }
.installa-testi span { color: var(--grigio); font-size: 13px; line-height: 1.35; }
.installa-btn {
  flex: none; min-height: 44px; padding: 0 18px; border: none; border-radius: 22px; background: var(--blu); color: var(--su-blu);
  font: inherit; font-size: 15px; font-weight: 700; cursor: pointer;
}
.installa-btn:active { background: var(--blu-scuro); }
.installa-btn:focus-visible, .installa-chiudi:focus-visible { outline: 2px solid var(--blu); outline-offset: 2px; }
.installa-chiudi {
  flex: none; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-left: -4px; padding: 0;
  border: none; border-radius: 50%; background: none; color: var(--grigio); font-size: 20px; cursor: pointer;
}
/* Nel profilo la scheda sta dentro "Sul telefono": niente cornice propria, una riga come le altre. */
.installa-profilo { margin: 0 0 14px; padding: 0; border: none; border-radius: 0; background: none; }
.an-telefono .an-riga { align-items: center; gap: 12px; }
.an-telefono .an-testi { flex: 1; min-width: 0; }
.an-notifiche .an-dettaglio { line-height: 1.4; }

/* ---------- Password dimenticata, cambio password e eliminazione dell'account (installatore, 20/10/2026) ---------- */

/* Login e recupero: avviso verde ("Password cambiata", "Controlla la posta") e il link "Password dimenticata?" sotto la password. */
.acc-avviso { margin-bottom: 12px; padding: 12px 14px; border-radius: var(--raggio); background: var(--verde-chiaro); color: #1f5f2e; font-size: 15px; line-height: 1.45; }
.acc-dimenticata { margin: -8px 0 16px; text-align: right; font-size: 15px; }
.acc-dimenticata a { display: inline-block; padding: 12px 2px; margin: -12px 0; font-weight: 700; text-decoration: none; color: var(--blu); }
/* Un campo con un errore: la riga sotto il campo (l'hint) diventa l'errore, in rosso. */
.acc-campo.sbagliato .acc-hint { color: var(--rosso); font-weight: 600; }

/* "La mia anagrafica": scheda Accesso (cambio password in un <details>) ed Elimina account. */
.an-punti { letter-spacing: 1px; }
.an-ok { margin: 0 0 12px; color: var(--verde); font-size: 14px; font-weight: 600; }
.an-pw { margin-top: 4px; }
.an-pw > summary {
  display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 18px; border: 1px solid #d6d1c6; border-radius: 22px;
  background: var(--surface); color: var(--testo); font-size: 15px; font-weight: 700; cursor: pointer; list-style: none;
}
.an-pw > summary::-webkit-details-marker { display: none; }
.an-pw[open] > summary { margin-bottom: 16px; }
.an-pw-salva { height: 50px; }
.an-testo { margin: 0 0 12px; color: var(--grigio); font-size: 14.5px; line-height: 1.45; }
.an-sottotitolo { margin: 14px 0 6px; font-size: 14px; font-weight: 700; }
.an-elenco { margin: 0; padding-left: 20px; font-size: 14.5px; line-height: 1.5; }
.an-pericolo { border-color: #f0b9b6; }
.an-elimina {
  display: flex; align-items: center; justify-content: center; min-height: 46px; padding: 0 18px; border: 1.5px solid #f0b9b6; border-radius: 23px;
  background: var(--surface); color: var(--rosso); font-size: 15px; font-weight: 700; text-decoration: none;
}
.an-elimina:hover { background: var(--rosso-chiaro); }
.an-elimina-btn {
  display: flex; align-items: center; justify-content: center; width: 100%; min-height: 52px; padding: 0 18px; border: none; border-radius: 26px;
  background: var(--rosso); color: #fff; font: inherit; font-size: 16px; font-weight: 700; cursor: pointer;
}
.an-elimina-btn:active { background: #973030; }
.an-annulla-link { display: flex; align-items: center; justify-content: center; min-height: 48px; margin-top: 6px; color: var(--grigio); font-size: 15px; font-weight: 700; text-decoration: none; }
.an-torna { margin-top: 12px; }