/* AB Stock — foglio proprio. I gettoni (colori, corpi, raggi, spazi) e i riquadri .ind-box / .card
   arrivano da ab_design.css, copia del foglio condiviso di AB Core: qui NON si ridefinisce nessun
   gettone. I componenti sotto (testata, menu, campi, pulsanti) ricalcano le regole finali di
   cassa_web.html, cosi' passare da AB Core al Pos non cambia grammatica.
   Regole di Angelo: bordi su tutti i dati, due decimali, il testo non va mai a capo. */

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; }
body {
  background: var(--canvas); color: var(--ink); -webkit-font-smoothing: antialiased;
  font: var(--fs-base)/1.35 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
button, input, select { font: inherit; color: inherit; }
td, th, button, label, .nw { white-space: nowrap; }
.tronca { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.num { text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- TESTATA: riquadri, come AB Core ---------- */
.topbar {
  position: sticky; top: 0; z-index: 10;
  background: rgba(255,255,255,.82); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px);
}
.topbar-row {
  display: flex; align-items: center; gap: var(--sp-1); flex-wrap: wrap;
  max-width: var(--pagina-w); margin: 0 auto; padding: var(--sp-2) var(--sp-4);
}
.brand { font-weight: 600; font-size: var(--fs-md); letter-spacing: -0.01em; margin-right: var(--sp-2); }
.topbar .ind-box { min-width: 0; }
.topbar .ind-box .ind-label, .topbar .ind-box .ind-valore { font-size: var(--fs-micro); }
.spazio { flex: 1; min-width: 0; }
/* negozi: riquadri cliccabili, quello attivo nel colore del negozio */
.tb-negozio { cursor: pointer; font: inherit; min-height: 0; padding: var(--sp-1) var(--sp-3); }
.tb-negozio .ind-valore { color: var(--ink-3); }
.tb-negozio.attivo.sv { border-color: var(--sv); background: var(--sv-tint); }
.tb-negozio.attivo.sv .ind-label, .tb-negozio.attivo.sv .ind-valore { color: var(--sv); }
.tb-negozio.attivo.mg { border-color: var(--mg); background: var(--mg-tint); }
.tb-negozio.attivo.mg .ind-label, .tb-negozio.attivo.mg .ind-valore { color: var(--mg); }
.tb-negozio.attivo.gl { border-color: var(--gl); background: var(--gl-tint); }
.tb-negozio.attivo.gl .ind-label, .tb-negozio.attivo.gl .ind-valore { color: var(--gl); }
.tb-negozio.manca { border-color: var(--ko-line); }

/* ---------- MENU: riquadri piccoli su barra grigia, centrati ---------- */
.page-tabs {
  display: flex; gap: var(--sp-1); padding: var(--sp-2) var(--sp-4);
  background: var(--surface-sunken); border-bottom: 1px solid var(--line); border-top: 1px solid var(--line);
  overflow-x: auto; scrollbar-width: none; justify-content: safe center; align-items: center;
}
.page-tabs::-webkit-scrollbar { display: none; }
/* 14/10/2026 - telefono: la striscia delle schede sfuma a destra, cosi' si capisce che continua. */
@media (max-width: 720px) { .page-tabs { -webkit-mask-image: linear-gradient(90deg, #000 86%, transparent); mask-image: linear-gradient(90deg, #000 86%, transparent); } }
.page-tab {
  flex: 0 0 auto; border-radius: var(--r-sm); padding: var(--sp-1) var(--sp-3);
  font-size: var(--fs-sm); font-weight: 500; color: var(--ink-2); cursor: pointer;
  background: var(--surface-raised); border: 1px solid var(--line); min-height: 30px;
}
.page-tab:hover { border-color: var(--line-strong); color: var(--ink); }
.page-tab.active { background: var(--brand-tint); color: var(--brand-deep); font-weight: 600; border-color: var(--brand); }
.fascia { display: none; padding: var(--sp-2) var(--sp-4); font-size: var(--fs-sm); background: var(--ko-bg); color: var(--ko); border-bottom: 1px solid var(--ko-line); text-align: center; }
.fascia.vis { display: block; }

/* ---------- PAGINA ---------- */
.page { max-width: 1180px; margin: 0 auto; padding: var(--sp-4) var(--sp-5); }
.pagina { display: none; }
.pagina.vis { display: block; }
.pagina > * + * { margin-top: var(--sp-4); }
.card-header { display: flex; align-items: center; gap: var(--sp-2); min-height: 44px; }
.card-header .spazio { flex: 1; }
.card-body > * + * { margin-top: var(--sp-3); }
.due-colonne { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: var(--sp-4); align-items: start; }
.due-colonne > * + * { margin-top: 0; }
.colonna > * + * { margin-top: var(--sp-4); }
.colonna > :empty { display: none; }
.colonna > :empty + * { margin-top: 0; }
@media (max-width: 900px) { .due-colonne { grid-template-columns: minmax(0, 1fr); } .page { padding: var(--sp-3); } }

/* ---------- CAMPI: vaschette riempite ---------- */
input, select {
  background: var(--surface-sunken); border: 1px solid var(--line); border-radius: var(--r-sm); color: var(--ink);
  font-size: var(--fs-base); padding: var(--sp-2) var(--sp-3); min-height: 34px; width: 100%; min-width: 0;
  transition: background .12s, box-shadow .12s, border-color .12s;
}
input:hover:not(:focus), select:hover:not(:focus) { background: #E7E7EC; }
input:focus, select:focus { background: var(--surface-raised); border-color: var(--brand); box-shadow: var(--ring); outline: none; }
input::placeholder { color: var(--ink-4); }
input.cifra { text-align: right; font-variant-numeric: tabular-nums; }
.scan { font-size: var(--fs-lg); min-height: 52px; letter-spacing: .02em; }
.campo { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.campo > span { font-size: var(--fs-micro); font-weight: 600; color: var(--ink-3); text-transform: uppercase; letter-spacing: .04em; }
.campi { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: var(--sp-2) var(--sp-3); }
.riga { display: flex; gap: var(--sp-2); align-items: center; min-width: 0; }
.riga > .btn, .riga > .tog { white-space: nowrap; flex: 0 0 auto; }
.riga.fine { justify-content: flex-end; }

/* ---------- PULSANTI ---------- */
.btn {
  border-radius: var(--r-sm); font-size: var(--fs-base); font-weight: 500; min-height: 34px; padding: var(--sp-2) var(--sp-4);
  border: 1px solid transparent; background: var(--surface-sunken); color: var(--ink); cursor: pointer; transition: background .12s, color .12s;
}
.btn:hover { background: #E2E2E8; }
.btn:active { opacity: .75; }
.btn.primary { background: var(--brand); color: #fff; font-weight: 600; }
.btn.primary:hover { background: var(--brand-deep); }
.btn.pericolo { color: var(--ko); border-color: var(--ko-line); background: var(--ko-bg); }
.btn.pericolo:hover { background: var(--ko); color: #fff; border-color: var(--ko); }
.btn:disabled, .btn.primary:disabled { background: var(--surface-sunken); color: var(--ink-4); border-color: transparent; cursor: default; opacity: 1; }
.btn.grande { min-height: var(--h-azione); width: 100%; font-size: var(--fs-md); }
.btn.mini { min-height: 28px; padding: 2px var(--sp-3); font-size: var(--fs-sm); }
.btn.maiu { font-size: var(--fs-micro); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
/* X rossa: togli la riga */
.btn-x {
  width: 34px; height: 34px; min-height: 34px; padding: 0; border: 0; border-radius: var(--r-sm); cursor: pointer;
  background: var(--ko); color: #fff; font-size: 16px; font-weight: 700; line-height: 1; flex: 0 0 auto;
}
.btn-x:hover { background: #A51F17; }
/* interruttori (Vendita/Reso, Appartato, Modifica, Buono, Sospeso, IVA) */
.seg { display: inline-flex; gap: 2px; padding: 2px; background: var(--surface-sunken); border-radius: var(--r-sm); flex: 0 0 auto; }
.seg button {
  border: 0; background: transparent; color: var(--ink-2); font-size: var(--fs-sm); font-weight: 500;
  padding: var(--sp-1) var(--sp-3); border-radius: 6px; min-height: 28px; cursor: pointer;
}
/* 14/10/2026 - telefono: un'intestazione con i pulsanti a scelta (Trasferimenti: "A Marigliano Uomo",
   "A Galatina Uomo") va su due righe e i pulsanti si dividono la larghezza, invece di uscire dallo schermo. */
@media (max-width: 600px) {
  .card-header:has(> .seg) { flex-wrap: wrap; row-gap: var(--sp-2); }
  .card-header > .seg { flex: 1 1 100%; display: flex; }
  .card-header > .seg button { flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
.seg button.on { background: var(--surface-raised); color: var(--brand-deep); font-weight: 600; box-shadow: 0 1px 3px rgba(0,0,0,.10); }
.seg.modo button.on[data-modo="reso"] { color: var(--ko); }
.seg.modo.reso { background: var(--ko-bg); }
.tog {
  border: 1px solid var(--line); background: var(--surface-raised); color: var(--ink-2); border-radius: var(--r-sm);
  font-size: var(--fs-sm); font-weight: 500; min-height: 34px; padding: var(--sp-1) var(--sp-3); cursor: pointer;
}
.tog.on { background: var(--brand-tint); border-color: var(--brand); color: var(--brand-deep); font-weight: 600; }

/* ---------- TABELLE: griglia completa ---------- */
table.dati { width: 100%; border-collapse: collapse; table-layout: fixed; background: var(--surface-raised); font-size: var(--fs-sm); }
table.dati th, table.dati td { border: 1px solid var(--line-strong); padding: 0 var(--sp-2); height: 36px; overflow: hidden; text-overflow: ellipsis; }
table.dati th { background: var(--surface-sunken); font-size: var(--fs-micro); font-weight: 600; color: var(--ink-3); text-transform: uppercase; letter-spacing: .04em; text-align: left; }
table.dati td.num, table.dati th.num { text-align: right; font-variant-numeric: tabular-nums; }
table.dati tr.sel td { background: var(--brand-tint); }
table.dati tr.neg td, table.dati td.neg { color: var(--ko); }
table.dati tr.reso td { background: var(--ko-bg); }
table.dati td.pm { padding: 0; text-align: center; }
table.dati td.pm button { width: 100%; height: 35px; border: 0; background: var(--surface-sunken); font-size: var(--fs-md); cursor: pointer; }
table.dati td.in { padding: 2px; }
table.dati td.in input { min-height: 30px; height: 30px; padding: 0 var(--sp-2); }
table.dati td.az { padding: 0 2px; text-align: center; }
table.dati td.az .btn-x { width: 30px; height: 30px; min-height: 30px; }
table.dati tr.cliccabile { cursor: pointer; }
table.dati tr.cliccabile:hover td { background: var(--surface-sunken); }
.vuoto { color: var(--ink-3); font-size: var(--fs-sm); padding: var(--sp-2) 0; }

/* ---------- RIGHE DEL BANCO ---------- */
.righe-banco { display: flex; flex-direction: column; gap: var(--sp-2); }
.rb {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--sp-2) var(--sp-3); align-items: center;
  border: 1px solid var(--line-strong); border-radius: var(--r-sm); padding: var(--sp-2) var(--sp-3); background: var(--surface-raised);
}
.rb.reso { background: var(--ko-bg); border-color: var(--ko); }
.rb .azioni { display: flex; gap: var(--sp-2); align-items: center; }
.rb .reso-tog.on { background: var(--ko); border-color: var(--ko); color: #fff; }
.rb .nome { font-weight: 600; }
.rb .det { font-size: var(--fs-sm); color: var(--ink-3); }
.rb .comandi { grid-column: 1 / -1; display: flex; gap: var(--sp-2); align-items: center; flex-wrap: nowrap; min-width: 0; }
.rb .prezzi { display: flex; gap: var(--sp-2); align-items: center; flex: 0 0 auto; }
.rb .prezzo { width: 112px; }

/* ---------- RIQUADRI DEI NUMERI (riga etichetta | numero) ---------- */
.numeri { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--sp-1); }
.numeri .ind-box { padding: 0 var(--sp-3); height: 42px; align-items: center; }
.numeri .ind-box .ind-label { font-size: var(--fs-micro); }
.numeri .ind-box .ind-valore { font-size: var(--fs-base); }
.numeri .ind-box.grande .ind-valore, .numeri .ind-box.saldo .ind-valore { font-weight: 700; }
.numeri .ind-box.saldo { border-color: var(--line-strong); background: var(--surface-sunken); }
.numeri .ind-box.piu .ind-valore { color: var(--ok); }
.numeri .ind-box.meno .ind-valore { color: var(--ko); }
.box-totale { display: flex; align-items: center; gap: var(--sp-3); border: 1px solid var(--brand); border-radius: var(--r-sm); padding: var(--sp-2) var(--sp-3); background: var(--brand-tint); }
.box-totale span { font-size: var(--fs-micro); font-weight: 600; color: var(--brand-deep); text-transform: uppercase; letter-spacing: .04em; flex: 0 0 auto; }
.box-totale input { font-size: var(--fs-xl); font-weight: 600; min-height: 48px; text-align: right; background: var(--surface-raised); }
.esito { border: 1px solid var(--ok-line); background: var(--ok-bg); border-radius: var(--r-md); padding: var(--sp-3) var(--sp-4); }
.esito.meno { border-color: var(--ko-line); background: var(--ko-bg); }
.esito .riga { justify-content: space-between; }
.esito .importo { font-size: var(--fs-xl); font-weight: 700; font-variant-numeric: tabular-nums; }
.errore { border: 1px solid var(--ko-line); background: var(--ko-bg); color: var(--ko); border-radius: var(--r-sm); padding: var(--sp-2) var(--sp-3); font-size: var(--fs-sm); white-space: normal; }
.avviso { border: 1px solid var(--warn-line); background: var(--warn-bg); color: var(--warn); border-radius: var(--r-sm); padding: var(--sp-2) var(--sp-3); font-size: var(--fs-sm); }
.nota { font-size: var(--fs-micro); color: var(--ink-3); }

/* ---------- FINESTRE ---------- */
dialog { border: 1px solid var(--line); border-radius: var(--r-md); padding: 0; width: min(720px, calc(100vw - 24px)); max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); box-shadow: var(--shadow-lift); background: var(--surface-raised); }
dialog::backdrop { background: rgba(0,0,0,.28); }
dialog > .card-header { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 20px; }
/* 14/10/2026 - dvh: su iPhone 100vh e' l'altezza con le barre di Safari nascoste, e i pulsanti in fondo
   alla finestra finivano sotto la barra. Chi non conosce dvh tiene la riga prima. */
dialog .card-body { max-height: calc(100vh - 140px); max-height: calc(100dvh - 140px); overflow-y: auto; }
dialog .piede { display: flex; gap: var(--sp-2); justify-content: flex-end; padding: var(--sp-3) var(--sp-4); border-top: 1px solid var(--line); }
.elenco-scelta { max-height: 360px; overflow-y: auto; border: 1px solid var(--line-strong); border-radius: var(--r-sm); }
.elenco-scelta button { display: flex; width: 100%; gap: var(--sp-2); justify-content: space-between; border: 0; border-bottom: 1px solid var(--line); background: var(--surface-raised); padding: var(--sp-2) var(--sp-3); text-align: left; cursor: pointer; min-height: 40px; }
.elenco-scelta button:last-child { border-bottom: 0; }
.elenco-scelta button:hover { background: var(--surface-sunken); }
.accesso { max-width: 420px; margin: 15vh auto; padding: 0 var(--sp-4); text-align: center; }
.accesso .campo { text-align: left; margin-top: var(--sp-4); }

/* ---------- ETICHETTE: stampa dal browser ---------- */
#stampa { display: none; }
@media print {
  body * { visibility: hidden; }
  #stampa, #stampa * { visibility: visible; }
  #stampa { display: block; position: absolute; left: 0; top: 0; }
  .etichetta { break-after: page; }
}
.etichetta { display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; box-sizing: border-box; padding: 1.2mm 1mm 0.8mm; font-family: Arial, Helvetica, sans-serif; color: #000; background: #fff; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.etichetta .n { font-size: 8.5pt; line-height: 1.1; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 1mm; text-transform: uppercase; }
.etichetta .d { display: flex; justify-content: space-between; align-items: baseline; gap: 1mm; font-size: 8pt; line-height: 1.1; white-space: nowrap; padding: 0 1mm; }
.etichetta .d .tg { font-weight: 700; flex: 0 0 auto; }
.etichetta .d .col { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.etichetta .d.dp { justify-content: flex-end; }
.etichetta.alta .p { font-size: 12pt; }
.etichetta.alta .n { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.etichetta .p { font-size: 11pt; font-weight: 700; flex: 0 0 auto; }
.etichetta .b { display: flex; flex-direction: column; align-items: center; }
.etichetta .b svg.eb { display: block; flex: 0 0 auto; }
.etichetta .c { font-family: 'Courier New', monospace; font-size: 6.5pt; line-height: 1; letter-spacing: .5px; margin-top: .4mm; }
.et-formati { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-2); }
.anteprima-etichette { justify-content: center; padding: var(--sp-2); background: var(--surface-sunken); border-radius: var(--r-sm); margin-bottom: var(--sp-2); }
.anteprima-etichette { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.anteprima-etichette .etichetta { border: 1px solid var(--line-strong); }

@media (max-width: 720px) {
  .topbar-row { padding: var(--sp-2) var(--sp-3); }
  .brand { width: 100%; }
  .rb .prezzo { width: 96px; }
  .riga > .btn { padding-left: var(--sp-2); padding-right: var(--sp-2); }
  .tog { padding-left: var(--sp-2); padding-right: var(--sp-2); }
  dialog .card-body { padding: var(--sp-3); }
}

a.tb-cassa { text-decoration: none; color: inherit; }

/* ---------- FOTOCAMERA come lettore ---------- */
.scan-riga { display: flex; gap: var(--sp-2); align-items: stretch; }
.scan-riga .scan { flex: 1 1 auto; min-width: 0; }
.btn-cam { flex: 0 0 auto; width: 52px; min-height: 52px; border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--surface-raised); color: var(--ink-2); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.btn-cam:hover { background: var(--surface-sunken); }
.camera { position: fixed; inset: 0; z-index: 1000; background: #000; display: flex; flex-direction: column; }
.camera-testa { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2) var(--sp-3); background: var(--surface-raised); border-bottom: 1px solid var(--line); }
.camera-vista { position: relative; flex: 1 1 auto; min-height: 0; overflow: hidden; }
.camera-vista video { width: 100%; height: 100%; object-fit: cover; display: block; }
.camera-mirino { position: absolute; left: 10%; right: 10%; top: 38%; height: 24%; border: 2px solid rgba(255,255,255,.85); border-radius: var(--r-md); box-shadow: 0 0 0 9999px rgba(0,0,0,.35); pointer-events: none; transition: border-color .15s; }
.camera.letto .camera-mirino { border-color: var(--ok); }
.camera-esito { padding: var(--sp-3); background: var(--surface-raised); border-top: 1px solid var(--line); font-size: var(--fs-base); font-weight: 600; white-space: nowrap; }
.camera-esito.errore-testo { color: var(--ko); }

/* 14/10/2026 - Angelo: "la testata di AB Stock e' inutile, ripete la data e i tre negozi che sono gia'
   nella testata di AB Core; il sottomenu delimitato bene e' necessario". Incorporato resta solo il menu. */
.incorporato #testata { display: none; }
#accesso-core { display: flex; align-items: center; justify-content: center; text-decoration: none; margin-top: var(--sp-3); }
#accesso-core[hidden] { display: none; }

/* 15/10/2026 - come paga il cliente (banco): modi, importi, buono */
.pag { border: 1px solid var(--line-strong); border-radius: var(--r-sm); padding: var(--sp-2); display: flex; flex-direction: column; gap: var(--sp-2); min-width: 0; }
.pag-modi { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-1); }
.pag-modi .tog { min-height: 44px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 var(--sp-1); }
.pag-righe { display: flex; flex-direction: column; gap: var(--sp-1); }
.pag-riga { display: grid; grid-template-columns: minmax(0, 1fr) 130px; align-items: center; gap: var(--sp-2); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 2px 2px 2px var(--sp-2); min-height: 40px; white-space: nowrap; }
.pag-riga span { font-size: var(--fs-sm); color: var(--ink-2); }
.pag-riga input { text-align: right; min-height: 34px; font-size: 16px; width: 100%; box-sizing: border-box; }
.pag-riga b { text-align: right; padding-right: var(--sp-2); font-variant-numeric: tabular-nums; }
.pag-buono input { width: 100%; box-sizing: border-box; font-size: 16px; min-height: 40px; }
.pag-buono.scelto { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: var(--sp-2); border: 1px solid var(--brand); background: var(--brand-tint); border-radius: var(--r-sm); padding: 2px 2px 2px var(--sp-2); min-height: 40px; white-space: nowrap; }
.pag-buono.scelto b { font-variant-numeric: tabular-nums; }
#pg-bris { display: flex; flex-direction: column; gap: 2px; margin-top: 2px; }
.pag-trovato { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--sp-2); align-items: center; text-align: left; border: 1px solid var(--line-strong); background: var(--surface-raised); border-radius: var(--r-sm); min-height: 40px; padding: 0 var(--sp-2); white-space: nowrap; cursor: pointer; font: inherit; color: var(--ink); }
.pag-trovato b { font-variant-numeric: tabular-nums; }
.pag-msg { font-size: var(--fs-sm); color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center; padding: 2px 0; }
@media (max-width: 380px) { .pag-modi { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pag-riga { grid-template-columns: minmax(0, 1fr) 110px; } }

/* 15/10/2026 - AB Stock dentro la Cassa di AB Core (modo=banco): solo la vendita, senza schede e senza
   margini esterni; l'altezza la decide il contenuto */
.solo-banco #tabs { display: none; }
.solo-banco main { padding-top: 0; }

/* 15/10/2026 - Dentro AB Core (Magazzino) le schede sono un sotto menu: stesso aspetto dei sotto menu
   di AB Core (.sotto-tab), centrate, vanno a capo, niente barra grigia. */
.incorporato .page-tabs {
  background: transparent; border: 0; border-radius: 0; flex-wrap: wrap; overflow: visible;
  gap: var(--sp-1); justify-content: center; padding: var(--sp-3) var(--sp-4) var(--sp-3);
  -webkit-mask-image: none; mask-image: none;
}
.incorporato .page-tab {
  border-radius: var(--r-sm); padding: 2px var(--sp-3); min-height: 26px;
  font-size: var(--fs-micro); font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
  color: var(--ink-3); background: var(--surface-raised); border: 1px solid var(--line);
  display: inline-flex; align-items: center;
}
.incorporato .page-tab:hover { border-color: var(--line-strong); color: var(--ink); }
.incorporato .page-tab.active { background: var(--brand-tint); color: var(--brand-deep); border-color: var(--brand); font-weight: 600; }

/* 15/10/2026 sera - IL BANCO DENTRO LA CASSA (modo=banco). Angelo: "bisogna uniformare le box ... le box devono
   avere altezza uguale ... larghezza divisa bene per la larghezza della box". Una colonna sola di riquadri,
   tutti alti --bu-h, le coppie divise a meta': Vendita | Reso, scansione | fotocamera, Anagrafica | Fuori
   magazzino, i capi, il totale cliente, il pagamento, Conferma, Svuota. Stessi bordi e raggi dappertutto. */
.solo-banco { --bu-h: 34px; } /* 15/10/2026: stessa altezza di tutti i riquadri di AB Core (--box-h in public/core/aspetto.css) */
.solo-banco body { background: transparent; }
.solo-banco .page, .solo-banco main { padding: 0; }
.banco-uni { display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-3); }
.banco-uni .bu-riga { display: grid; gap: var(--sp-2); }
.banco-uni .bu-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* 15/10/2026 notte - Modifiche: il capo del cliente (prezzo 0, solo sartoria) */
.rb.cliente { border-style: dashed; }
.rb.cliente .etichetta-cli { font-size: var(--fs-micro); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.cc-tipi { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 6px; }
.cc-tipi .tog { min-height: 34px; }
.banco-uni .bu-riga > button, .banco-uni > .btn, .banco-uni #v-totale .btn.grande {
  height: var(--bu-h); min-height: var(--bu-h); width: 100%; margin: 0; padding: 0 var(--sp-2); border-radius: var(--r-sm);
  font-size: var(--fs-micro); font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border: 1px solid var(--line-strong); box-shadow: none;
}
/* Vendita | Reso: due riquadri distinti; quello scelto si accende (Reso in rosso) */
#v-modo.bu-riga > button { background: var(--surface-raised); color: var(--ink-3); cursor: pointer; }
#v-modo.bu-riga > button.on { background: var(--brand-tint); color: var(--brand-deep); border-color: var(--brand); }
#v-modo.bu-riga.reso > button.on { background: var(--ko-bg); color: var(--ko); border-color: var(--ko); }
/* scansione | fotocamera */
.banco-uni .scan-riga { display: grid; grid-template-columns: minmax(0, 1fr) var(--bu-h); gap: var(--sp-2); }
.banco-uni .scan { height: var(--bu-h); min-height: var(--bu-h); font-size: var(--fs-base); border-radius: var(--r-sm); width: 100%; box-sizing: border-box; }
.banco-uni .btn-cam { width: var(--bu-h); height: var(--bu-h); min-height: var(--bu-h); border-radius: var(--r-sm); }
/* i capi */
.banco-uni .righe-banco:empty { display: none; }
/* 15/10/2026 notte - banco a tutta altezza (vedi app.js, banco-alto): totale e pulsanti in fondo, i capi in mezzo */
.banco-alto, .banco-alto body { height: 100%; overflow: hidden; }
.banco-alto .banco-uni { height: 100vh; box-sizing: border-box; }
.banco-alto .banco-uni .righe-banco { flex: 1 1 0; min-height: var(--bu-h); overflow: auto; display: flex; flex-direction: column; gap: var(--sp-2); }
.banco-alto .banco-uni .righe-banco > .vuoto { flex: 1 1 auto; height: auto; }
.banco-alto .banco-uni > * { flex-shrink: 0; }
.banco-alto .banco-uni > .righe-banco { flex-shrink: 1; }
.banco-alto .banco-uni .righe-banco > *:not(.vuoto) { flex-shrink: 0; }
.banco-uni .righe-banco .vuoto { height: var(--bu-h); min-height: var(--bu-h); box-sizing: border-box; padding: 0; display: flex; align-items: center; justify-content: center; border: 1px dashed var(--line-strong); border-radius: var(--r-sm); font-size: var(--fs-sm); }
/* il totale del cliente, il pagamento e la conferma: niente cornice in piu', stesse altezze */
.banco-uni #v-totale > .card-header { display: none; }
.banco-uni #v-totale > .card-body { padding: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.banco-uni #v-totale > .card-body > * { margin: 0; }
.banco-uni #v-totale .numeri { display: none; }
.banco-uni .box-totale { height: var(--bu-h); min-height: var(--bu-h); padding: 0 var(--sp-1) 0 var(--sp-3); box-sizing: border-box; gap: var(--sp-2); }
.banco-uni .box-totale input { height: calc(var(--bu-h) - 8px); min-height: 0; font-size: var(--fs-md); padding: 0 var(--sp-2); }
.banco-uni .pag { border: 0; padding: 0; gap: var(--sp-2); }
.banco-uni .pag-modi { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2); }
.banco-uni .pag-modi .tog { height: var(--bu-h); min-height: var(--bu-h); border-radius: var(--r-sm); font-size: var(--fs-micro); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.banco-uni .pag-riga, .banco-uni .pag-buono.scelto, .banco-uni .pag-trovato { min-height: var(--bu-h); height: var(--bu-h); box-sizing: border-box; }
.banco-uni .pag-buono input, .banco-uni .campi input { height: var(--bu-h); min-height: var(--bu-h); box-sizing: border-box; }
.banco-uni .pag-msg { min-height: 0; }
.banco-uni #v-totale .btn.grande { font-size: var(--fs-sm); }
.banco-uni .esito { padding: var(--sp-2) var(--sp-3); border-radius: var(--r-sm); }
.banco-uni .esito .importo { font-size: var(--fs-lg); white-space: nowrap; }
.banco-uni .bu-riga > .btn { background: var(--surface-raised); color: var(--ink-2); }
.banco-uni .bu-riga > .btn:hover { border-color: var(--brand); color: var(--brand-deep); }

/* 15/10/2026 - I TESTI OMOLOGATI, come in AB Core (public/core/aspetto.css): interfaccia in MAIUSCOLO
   (pulsanti, etichette, schede, intestazioni), dati e frasi come sono scritti. */
button, .btn, .tog, label, th, .page-tab, .campo > span, .seg button {
  text-transform: uppercase; letter-spacing: .04em;
}
input, textarea, select, option { text-transform: none; letter-spacing: normal; }
input::placeholder, textarea::placeholder { text-transform: uppercase; letter-spacing: .02em; }

/* 15/10/2026 notte - IL CAPO SU UNA RIGA SOLA (banco dentro la Cassa). Angelo: "il testo del prodotto deve essere
   piu' piccolo: in una vendita di 7 o 8 pezzi diventa lunghissimo ... quando aggiungiamo il prodotto occupiamo
   una sola riga, con dati, bottoni e prezzo". Una riga alta quanto tutti i riquadri (34 px): nome e dettagli in
   piccolo a sinistra, poi Appartato, Modifica, Reso, il prezzo e la X. I contenitori della scheda si sciolgono
   (display: contents) e ogni pezzo va nella sua colonna: un reso (senza Appartato/Modifica) lascia le celle vuote
   e i prezzi restano incolonnati. */
@media (min-width: 520px) {
.solo-banco .banco-uni .righe-banco { gap: var(--sp-1); }
  .solo-banco .banco-uni .rb {
  grid-template-columns: minmax(0, 1fr) auto auto auto 96px 26px; gap: var(--sp-1);
  height: var(--bu-h); min-height: var(--bu-h); box-sizing: border-box; padding: 0 3px 0 var(--sp-2); flex-shrink: 0;
}
  .solo-banco .banco-uni .rb > .azioni, .solo-banco .banco-uni .rb > .comandi, .solo-banco .banco-uni .rb .prezzi { display: contents; }
  .solo-banco .banco-uni .rb .spazio { display: none; }
  .solo-banco .banco-uni .rb > .tronca { grid-column: 1; display: flex; align-items: baseline; gap: var(--sp-2); min-width: 0; }
  .solo-banco .banco-uni .rb .nome { font-size: var(--fs-sm); flex: 0 1 auto; min-width: 0; }
  .solo-banco .banco-uni .rb .det { font-size: var(--fs-micro); flex: 1 1 auto; min-width: 0; }
  .solo-banco .banco-uni .rb [data-dest="appartato"] { grid-column: 2; }
  .solo-banco .banco-uni .rb [data-dest="modifica"] { grid-column: 3; }
  .solo-banco .banco-uni .rb .reso-tog { grid-column: 4; }
  .solo-banco .banco-uni .rb [data-prezzo] { grid-column: 5; }
  .solo-banco .banco-uni .rb [data-via] { grid-column: 6; }
  .solo-banco .banco-uni .rb .tog, .solo-banco .banco-uni .rb .prezzo, .solo-banco .banco-uni .rb .btn-x {
  grid-row: 1; height: 26px; min-height: 26px; box-sizing: border-box; padding-top: 0; padding-bottom: 0;
  font-size: var(--fs-micro); border-radius: var(--r-sm);
}
  .solo-banco .banco-uni .rb .tog { padding-left: var(--sp-2); padding-right: var(--sp-2); }
  .solo-banco .banco-uni .rb .prezzo { width: 96px; font-size: var(--fs-sm); }
  .solo-banco .banco-uni .rb .btn-x { width: 26px; padding: 0; }
}
/* sul telefono la scheda sta su DUE righe basse (prima ne prendeva tre, ~96 px a capo): sopra nome e dettagli,
   prezzo e X; sotto Appartato, Modifica e Reso. Tutti i comandi a 26 px, testo piccolo. */
.solo-banco .banco-uni .rb .nome { font-size: var(--fs-sm); }
.solo-banco .banco-uni .rb .det { font-size: var(--fs-micro); }
@media (max-width: 519px) {
  .solo-banco .banco-uni .righe-banco { gap: var(--sp-1); }
  .solo-banco .banco-uni .rb {
    grid-template-columns: repeat(4, minmax(0, 1fr)) 84px 26px; grid-auto-rows: 26px; column-gap: var(--sp-1); row-gap: 3px;
    padding: 4px 3px 4px var(--sp-2); min-height: 0; align-items: center; flex-shrink: 0;
  }
  .solo-banco .banco-uni .rb > .azioni, .solo-banco .banco-uni .rb > .comandi, .solo-banco .banco-uni .rb .prezzi { display: contents; }
  .solo-banco .banco-uni .rb .spazio { display: none; }
  .solo-banco .banco-uni .rb > .tronca { grid-column: 1 / 5; grid-row: 1; min-width: 0; line-height: 1.15; }
  .solo-banco .banco-uni .rb .det { line-height: 1.1; }
  .solo-banco .banco-uni .rb [data-prezzo] { grid-column: 5; grid-row: 1; }
  .solo-banco .banco-uni .rb [data-via] { grid-column: 6; grid-row: 1; }
  .solo-banco .banco-uni .rb [data-dest="appartato"] { grid-column: 1 / 3; grid-row: 2; }
  .solo-banco .banco-uni .rb [data-dest="modifica"] { grid-column: 3 / 5; grid-row: 2; }
  .solo-banco .banco-uni .rb .reso-tog { grid-column: 5 / 7; grid-row: 2; }
  .solo-banco .banco-uni .rb .tog, .solo-banco .banco-uni .rb .prezzo, .solo-banco .banco-uni .rb .btn-x {
    height: 26px; min-height: 26px; box-sizing: border-box; padding-top: 0; padding-bottom: 0; font-size: var(--fs-micro); border-radius: var(--r-sm);
  }
  .solo-banco .banco-uni .rb .tog { padding-left: var(--sp-2); padding-right: var(--sp-2); }
  .solo-banco .banco-uni .rb .prezzo { width: 84px; font-size: var(--fs-sm); }
  .solo-banco .banco-uni .rb .btn-x { width: 26px; padding: 0; }
}
/* Contanti, Carta, Buono, Sospeso su una riga sola */
.solo-banco .banco-uni .pag-modi { grid-template-columns: repeat(4, minmax(0, 1fr)); }
/* 15/10/2026 - SOSPESO = COMMESSA: nome, cognome, telefono e data limite (come Nuova commessa), quattro in fila
   sul largo e due per riga sul telefono; sotto l'esito la commessa nata, con la ristampa delle ricevute. */
.esito-commessa { display: flex; align-items: center; gap: var(--sp-2); margin-top: var(--sp-2); min-width: 0; font-size: var(--fs-sm); }
.esito-commessa > span { flex: 1 1 auto; min-width: 0; }
.esito-commessa .btn { flex: 0 0 auto; }

/* 15/10/2026 notte - IL MAGAZZINO COME LA CASSA (modo=magazzino dentro AB Core). Angelo: "in base alle modifiche
   apportate in cassa, devi rivedere graficamente anche la sezione magazzino". Stesse regole della Cassa: schede
   bordate col colore del negozio e intestazione grigia in maiuscolo, un'altezza sola (34 px) per campi, pulsanti,
   riquadri e sotto menu, pulsanti chiari col bordo, scansione alta come gli altri campi. */
.solo-magazzino { --bu-h: 34px; }
.solo-magazzino .page { padding-top: 0; }
.solo-magazzino .card { border: 1px solid var(--neg-c, var(--line-strong)); border-radius: 12px; overflow: hidden; }
.solo-magazzino .card > .card-header {
  min-height: 0; padding: 12px 16px; background: var(--surface-sunken); border-bottom: 1px solid var(--line);
  font-size: 12.5px; font-weight: 700; color: var(--ink); text-transform: uppercase; letter-spacing: .5px; white-space: nowrap;
}
.solo-magazzino .card > .card-body { padding: var(--sp-3); }
.solo-magazzino .page-tab { min-height: var(--bu-h); height: var(--bu-h); padding: 0 var(--sp-3); box-sizing: border-box; }
.solo-magazzino input, .solo-magazzino select { height: var(--bu-h); min-height: var(--bu-h); padding-top: 0; padding-bottom: 0; box-sizing: border-box; font-size: var(--fs-base); }
.solo-magazzino input[type="checkbox"], .solo-magazzino input[type="radio"] { height: auto; min-height: 0; width: auto; }
.solo-magazzino .scan { height: var(--bu-h); min-height: var(--bu-h); font-size: var(--fs-base); }
.solo-magazzino .btn-cam { width: var(--bu-h); height: var(--bu-h); min-height: var(--bu-h); }
.solo-magazzino .btn {
  height: var(--bu-h); min-height: var(--bu-h); padding: 0 var(--sp-3); box-sizing: border-box; border-radius: var(--r-sm);
  font-size: var(--fs-micro); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; white-space: nowrap;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-1);
}
.solo-magazzino .btn:not(.primary):not(.pericolo):not(:disabled) { background: var(--surface-raised); border-color: var(--line-strong); color: var(--ink-2); }
.solo-magazzino .btn:not(.primary):not(.pericolo):not(:disabled):hover { border-color: var(--brand); color: var(--brand-deep); }
.solo-magazzino .btn.grande { font-size: var(--fs-sm); }
.solo-magazzino .seg { height: var(--bu-h); box-sizing: border-box; align-items: stretch; }
.solo-magazzino .seg button { min-height: 0; font-size: var(--fs-micro); font-weight: 600; }
.solo-magazzino .ind-box { min-height: var(--bu-h); height: var(--bu-h); box-sizing: border-box; }
.solo-magazzino .btn-x { width: var(--bu-h); height: var(--bu-h); min-height: var(--bu-h); }
/* dentro le tabelle i comandi restano bassi (26 px), come nelle righe dei capi del banco */
.solo-magazzino td .btn, .solo-magazzino td .tog, .solo-magazzino td input, .solo-magazzino td .btn-x { height: 26px; min-height: 26px; font-size: var(--fs-micro); }
.solo-magazzino td .btn-x { width: 26px; }
@media (max-width: 519px) {
  .solo-magazzino .card > .card-header { flex-wrap: wrap; row-gap: var(--sp-2); }
  .solo-magazzino .card > .card-header .seg { flex: 1 1 100%; }
  .solo-magazzino .card > .card-header .seg button { flex: 1 1 0; min-width: 0; padding: 0 var(--sp-1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

/* 15/10/2026 notte - LA BOX VENDITA AL BANCO A ZONE. Angelo: "dobbiamo aiutare l'operatore a distinguere le zone
   delimitandola con bordi interni migliori e visibili". Tre zone bordate col nome sul bordo: INSERISCI (Anagrafica |
   Fuori magazzino, scansione | fotocamera), CAPI (fondo grigio, capi bianchi), TOTALE (Totale cliente e Incassa).
   Il pagamento non sta piu' qui: lo fa la finestra Incassa. */
.banco-uni .bu-zona {
  position: relative; display: flex; flex-direction: column; gap: var(--sp-2); min-width: 0;
  border: 1.5px solid var(--line-strong); border-radius: var(--r-md); padding: calc(var(--sp-2) + 4px) var(--sp-2) var(--sp-2); margin-top: 6px;
  background: var(--surface-raised);
}
.banco-uni .bu-zona::before {
  position: absolute; top: -8px; left: 10px; padding: 0 6px; line-height: 14px; background: var(--surface-raised);
  font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3);
}
.banco-uni .bu-zona-in::before { content: 'Inserisci'; }
.banco-uni .bu-zona-capi::before { content: 'Capi'; }
.banco-uni .bu-zona-tot::before { content: 'Totale'; }
.banco-uni .bu-zona-capi { background: var(--surface-sunken); }
.banco-uni .bu-zona-capi::before { background: linear-gradient(var(--surface-raised) 50%, var(--surface-sunken) 50%); }
.banco-uni .bu-zona-capi .righe-banco { display: flex; flex-direction: column; gap: var(--sp-1); }
.banco-uni .bu-zona-capi .rb { background: var(--surface-raised); }
.banco-uni .bu-zona-capi .righe-banco .vuoto { border: 0; background: transparent; color: var(--ink-4); }
.banco-uni .bu-zona-tot { gap: var(--sp-2); }
.banco-uni .bu-zona-tot #v-err:empty { display: none; }
.banco-uni .bu-zona-tot #v-totale > .card-body { gap: var(--sp-2); }
/* a tutta altezza (computer e tablet): la zona dei capi prende lo spazio che resta e scorre dentro */
.banco-alto .banco-uni > .bu-zona-capi { flex: 1 1 0; min-height: calc(var(--bu-h) + 23px); box-sizing: border-box; }
.banco-alto .banco-uni > .bu-zona-capi > .righe-banco { flex: 1 1 0; min-height: var(--bu-h); overflow: auto; }
.banco-alto .banco-uni > .bu-zona-capi > .righe-banco > .vuoto { flex: 1 1 auto; }

/* LA FINESTRA INCASSA: zone bordate come la box, tutto a 34 px, niente che esce dalla sua riga */
#incassa .inc-scroll > * + * { margin-top: 0; }
#incassa #inc-corpo { display: flex; flex-direction: column; gap: var(--sp-3); }
#incassa .inc-zona {
  position: relative; border: 1.5px solid var(--line-strong); border-radius: var(--r-md);
  padding: calc(var(--sp-2) + 6px) var(--sp-2) var(--sp-2); margin-top: 8px; display: flex; flex-direction: column; gap: var(--sp-2); min-width: 0;
}
#incassa .inc-tit {
  position: absolute; top: -8px; left: 10px; padding: 0 6px; line-height: 14px; background: var(--surface-raised); max-width: calc(100% - 20px);
  font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#incassa .campi { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--sp-2); }
#incassa input, #incassa select { height: 34px; min-height: 34px; box-sizing: border-box; padding-top: 0; padding-bottom: 0; font-size: var(--fs-base); }
#incassa .tog, #incassa .btn { min-height: 34px; height: 34px; box-sizing: border-box; padding: 0 var(--sp-2); font-size: var(--fs-micro); font-weight: 600; white-space: nowrap; }
#incassa .piede .btn { padding: 0 var(--sp-4); }
#incassa .inc-capo { display: flex; flex-direction: column; padding-bottom: var(--sp-2); border-bottom: 1px dashed var(--line-strong); }
#incassa .inc-capo-testa { gap: var(--sp-2); align-items: center; }
#incassa .inc-capo-testa b { text-align: right; }
#incassa .inc-mod { flex-wrap: wrap; }
#incassa #inc-err:empty { display: none; }
#incassa #inc-err .pag-msg { white-space: normal; text-align: left; color: var(--ink-2); }
/* mentre la finestra Incassa e' aperta la cornice copre lo schermo: il banco sotto non si vede, resta la Cassa velata */
.in-finestra body { background: transparent; }
.in-finestra #app { visibility: hidden; }
/* parti del capo (Abito = Giacca + Pantaloni), note delle modifiche, ricevute */
#incassa .inc-parte-testa { justify-content: start; }
#incassa .inc-parte-testa .btn-x { width: 34px; height: 34px; min-height: 34px; }
#incassa .inc-nota { display: grid; gap: var(--sp-2); align-items: center; }
#incassa .inc-nota > span { font-size: var(--fs-micro); font-weight: 600; color: var(--ink-3); text-transform: uppercase; letter-spacing: .04em; }
.esito-commessa .btn.wa.chiama { border-color: var(--ok); color: var(--ok); box-shadow: 0 0 0 2px var(--ok-bg); }
@media (max-width: 519px) {
  #incassa .inc-capo-testa { grid-template-columns: minmax(0, 1fr) 90px; }
  #incassa .inc-capo-testa select { grid-column: auto; grid-row: auto; }
  #incassa .inc-parte-testa { grid-template-columns: minmax(0, 1fr) auto; justify-content: stretch; }
  #incassa .inc-nota { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}

/* 15/10/2026 notte - INCASSA E' UN PANNELLO DELLA PAGINA (non la finestra di sistema): piu' spazio, fino a 1100 px,
   si chiude solo con Indietro o a vendita registrata. Sartoria: un riquadro per capo, una riga per parte con
   Modifica | Appartato | Ritira, le modifiche come tasti col prezzo, la nota sotto ogni modifica scelta. */
#incassa { position: fixed; inset: 0; z-index: 100; display: flex; justify-content: center; padding: 16px; background: rgba(0,0,0,.30); }
#incassa[hidden] { display: none; }
#incassa .inc-scheda { width: min(1100px, 100%); display: flex; flex-direction: column; background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--shadow-lift); }
#incassa .inc-testa { padding: 12px 16px; background: var(--surface-sunken); border-bottom: 1px solid var(--line); font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; }
#incassa .inc-scroll { overflow-y: auto; padding: var(--sp-2) var(--sp-4) var(--sp-4); }
#incassa .inc-piede { display: flex; gap: var(--sp-2); justify-content: flex-end; padding: var(--sp-3) var(--sp-4); border-top: 1px solid var(--line); }
#incassa .inc-piede .btn { height: 34px; min-height: 34px; padding: 0 var(--sp-5); font-size: var(--fs-micro); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
#incassa .inc-capo { border: 1px solid var(--line-strong); border-radius: var(--r-sm); padding: var(--sp-2); gap: var(--sp-2); background: var(--surface-raised); }
#incassa .inc-capo:last-of-type { border-bottom: 1px solid var(--line-strong); }
#incassa .inc-capo-testa { display: grid; grid-template-columns: minmax(0, 1fr) 100px; font-size: var(--fs-sm); font-weight: 600; }
#incassa .inc-parte { display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-2); border: 1px solid var(--line); border-left: 4px solid var(--line-strong); border-radius: var(--r-sm); background: var(--surface-sunken); }
#incassa .inc-parte.dest-modifica { border-left-color: var(--brand); }
#incassa .inc-parte.dest-appartato { border-left-color: var(--warn, #B25000); }
#incassa .inc-parte.dest-ritira { border-left-color: var(--ok); }
#incassa .inc-parte.dest-nessuna { border-left-color: var(--ko); }
#incassa .inc-parte-testa { display: grid; grid-template-columns: 140px minmax(0, 1fr) 100px; gap: var(--sp-2); align-items: center; }
#incassa .inc-parte-testa > select { grid-column: 1 / 3; max-width: 320px; }
#incassa .inc-parte-testa b, #incassa .inc-capo-testa b { text-align: right; }
#incassa .inc-parte-nome { font-size: var(--fs-sm); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
#incassa .inc-dest { display: grid; grid-template-columns: repeat(3, minmax(0, 120px)); gap: var(--sp-1); }
#incassa .inc-dest .tog:disabled { opacity: .45; cursor: not-allowed; }
#incassa .inc-mod { display: grid; gap: var(--sp-1); }
#incassa .inc-mod .tog { height: 34px; min-height: 34px; align-items: center; justify-content: space-between; text-align: left; background: var(--surface-raised); }
#incassa .inc-mod .tog span { font-variant-numeric: tabular-nums; font-weight: 700; }
#incassa .inc-mod .tog.on { background: var(--brand-tint); }
#incassa .inc-nota { grid-template-columns: 200px minmax(0, 1fr); }
@media (max-width: 760px) {
  #incassa { padding: 0; align-items: stretch; }
  #incassa .inc-scheda { width: 100%; border-radius: 0; border: 0; }
  #incassa .inc-scroll { padding: var(--sp-2) var(--sp-3) var(--sp-3); }
  #incassa .inc-parte-testa { grid-template-columns: minmax(0, 1fr) 90px; }
  #incassa .inc-parte-testa .inc-dest { grid-column: 1 / -1; grid-row: 2; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #incassa .inc-nota { grid-template-columns: minmax(0, 1fr); }
}
/* scheda prodotto: "Composto da" con le scorciatoie 2 pezzi / 3 pezzi / Semplice */
.m-comp-riga { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
.m-comp-presto { display: flex; gap: var(--sp-1); }
.m-comp-presto .btn { height: 34px; min-height: 34px; padding: 0 var(--sp-2); font-size: var(--fs-micro); font-weight: 600; text-transform: uppercase; }
@media (max-width: 519px) { .m-comp-riga { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 760px) { #incassa .inc-parte-testa > select { grid-column: 1; max-width: none; } }

/* 15/10/2026 notte - CONTANTI NERO, POS ROSSO SCURO, testo bianco: tasti del pagamento, righe degli importi, esito.
   Il tasto scelto ha l'anello bianco e la spunta (lo sfondo e' gia' pieno). */
.tog.pag-cnt, .pag-riga.pag-cnt, tr.pag-cnt > td { background: var(--pag-cnt) !important; border-color: var(--pag-cnt) !important; color: #fff !important; }
.tog.pag-pos, .pag-riga.pag-pos, tr.pag-pos > td { background: var(--pag-pos) !important; border-color: var(--pag-pos) !important; color: #fff !important; }
.pag-riga.pag-cnt *, .pag-riga.pag-pos *, tr.pag-cnt > td *, tr.pag-pos > td * { color: #fff !important; }
.tog.pag-cnt.on, .tog.pag-pos.on { box-shadow: inset 0 0 0 2px #fff, 0 0 0 2px var(--brand) !important; }
.tog.pag-cnt.on::before, .tog.pag-pos.on::before { content: '\2713  '; font-weight: 700; }
.tog.pag-cnt:not(.on), .tog.pag-pos:not(.on) { opacity: .82; }
.pag-riga.pag-cnt input, .pag-riga.pag-pos input { background: rgba(255,255,255,.14) !important; color: #fff !important; border-color: rgba(255,255,255,.3) !important; caret-color: #fff; }
.pag-riga.pag-cnt input::placeholder, .pag-riga.pag-pos input::placeholder { color: rgba(255,255,255,.65) !important; }

/* 15/10/2026 notte - le modifiche: nome e prezzo sempre DENTRO il tasto (il nome si accorcia coi puntini, il prezzo mai);
   il prezzo della parte solo nei capi composti (nel capo semplice e' gia' in testa al riquadro) */
#incassa .inc-mod { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
#incassa .inc-mod .tog { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--sp-2); padding: 0 var(--sp-2); overflow: hidden; }
#incassa .inc-mod .tog .nm { font-style: normal; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#incassa .inc-mod .tog span { white-space: nowrap; }
@media (max-width: 760px) { #incassa .inc-mod { grid-template-columns: minmax(0, 1fr); } }

/* 15/10/2026 notte - LA PARTE FINANZIARIA NEL BANCO: dati commessa (un tasto), capi | sartoria, totale cliente
   modificabile, come paga, ricevute, Conferma. La finestra serve solo ai dati. */
.banco-uni .bu-dati { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); height: var(--bu-h); min-height: var(--bu-h); width: 100%; box-sizing: border-box;
  padding: 0 var(--sp-3); border-radius: var(--r-sm); border: 1px solid var(--line-strong); background: var(--surface-raised); cursor: pointer;
  font-size: var(--fs-micro); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.banco-uni .bu-dati b { flex: 0 0 auto; font-weight: 700; }
.banco-uni .bu-dati.ok { border-color: var(--ok-line, var(--ok)); background: var(--ok-bg); color: var(--ok); }
.banco-uni .bu-dati.ko { border-color: var(--ko-line, var(--ko)); background: var(--ko-bg); color: var(--ko); }
.banco-uni .bu-parti { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2); }
.banco-uni .bu-parti .ind-box { height: var(--bu-h); box-sizing: border-box; padding: 0 var(--sp-3); align-items: center; }
.banco-uni .box-totale.meno { border-color: var(--ko); background: var(--ko-bg); }
.banco-uni .box-totale.meno span { color: var(--ko); }
.banco-uni .bu-buono { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-2); }
@media (min-width: 481px) { .solo-banco .banco-uni .pag-modi:has(> :nth-child(3):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 480px) { .banco-uni .bu-buono { grid-template-columns: minmax(0, 1fr); } }
/* stress dell'interfaccia a 390 px (15/10 notte): "Fuori magazzino" e "Contanti" si troncavano */
@media (max-width: 480px) {
  .banco-uni .bu-3 { grid-template-columns: minmax(0, 1fr) minmax(0, 1.45fr) minmax(0, 1fr); }
  .banco-uni .bu-3 > button { letter-spacing: 0; padding: 0 4px; }
  .solo-banco .banco-uni .pag-modi, .solo-banco .banco-uni .pag-modi:has(> :nth-child(3):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* 15/10/2026 notte - Angelo: "Totale cliente, Conferma e Svuota devono stare sulla stessa riga" */
.banco-uni .bu-fine { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1.4fr) minmax(0, .8fr); gap: var(--sp-2); align-items: stretch; }
.banco-uni .bu-fine > .btn { height: var(--bu-h); min-height: var(--bu-h); width: 100%; margin: 0; padding: 0 var(--sp-2); border-radius: var(--r-sm); font-size: var(--fs-micro); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-shadow: none; }
.banco-uni .bu-fine > .box-totale { min-width: 0; }
.banco-uni .bu-fine > .box-totale input { min-width: 0; }
@media (max-width: 480px) {
  .banco-uni .bu-fine { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.2fr) minmax(0, .8fr); gap: 6px; }
  .banco-uni .bu-fine > .box-totale > span { display: none; }
  .banco-uni .bu-fine > .box-totale { padding-left: var(--sp-1); }
  /* 17/10/2026 (FIN-COLL, foto a 390 px) - "#v-totale .btn.grande" (regola con l'id, piu' sopra) vinceva su questa:
     Conferma e Svuota restavano con spaziatura e margini larghi e si leggevano "CONFERMA..." e "SVUO...". Qui con l'id.
     L'importo di Conferma a 390 px non ci sta (servono 150 px, ce ne sono 110): resta nel Totale cliente accanto e
     nelle righe del pagamento; il pulsante dice solo Conferma / Restituisci. */
  .banco-uni #v-totale .bu-fine > .btn { letter-spacing: 0; padding: 0 4px; }
  .banco-uni #v-totale .bu-fine > .btn .v-ok-imp { display: none; }
  .banco-uni .bu-3 > button { padding: 0 2px; }
}

/* 16/10/2026 - Angelo: "quando clicco Modifiche il pop up non deve essere scorrevole, deve essere tutto esploso".
   Dati commessa non ha piu' un'area interna che scorre: la finestra e' alta quanto il suo contenuto (cliente, ogni
   capo con tutte le modifiche, piede). Centrata quando ci sta; se e' piu' alta dello schermo parte dall'alto e
   si scorre la pagina intera, mai un riquadro dentro la finestra. */
#incassa { overflow-y: auto; align-items: flex-start; }
#incassa .inc-scheda { max-height: none; overflow: visible; margin: auto; flex: 0 0 auto; }
#incassa .inc-scroll { flex: 0 0 auto; overflow: visible; }
@media (max-width: 760px) { #incassa .inc-scheda { margin: 0; min-height: 100%; } }
/* 16/10/2026 - CARICO. Angelo: "sulla stessa riga Anagrafica, Nuovo prodotto, Scansione e Fotocamera; spazia meglio
   i bottoni". Una riga di strumenti con spazio fra i bottoni; poi ogni articolo con la sua griglia taglie x colori. */
.k-strumenti { display: flex; flex-wrap: wrap; align-items: stretch; gap: var(--sp-2); margin: var(--sp-2) 0 var(--sp-3); }
.k-strumenti > .btn { flex: 0 0 auto; min-width: 140px; }
.k-strumenti > .scan-riga, .k-strumenti > .scan { flex: 1 1 240px; min-width: 0; }
.k-strumenti .scan-riga { gap: var(--sp-2); }
@media (max-width: 560px) { .k-strumenti > .btn { flex: 1 1 0; min-width: 0; } .k-strumenti > .scan-riga, .k-strumenti > .scan { flex: 1 1 100%; } }
.k-art { border: 1px solid var(--line-strong); border-radius: var(--r-sm); padding: var(--sp-2); margin-bottom: var(--sp-2); display: flex; flex-direction: column; gap: var(--sp-2); background: var(--surface-raised); }
.k-art-testa { display: flex; align-items: center; gap: var(--sp-2); min-height: 26px; }
.k-art-nome { font-size: var(--fs-sm); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.k-art-prezzo { font-size: var(--fs-sm); color: var(--ink-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.k-griglia { overflow-x: auto; }
.k-tab { width: auto !important; min-width: 0 !important; table-layout: auto; }
.k-tab th, .k-tab td { text-align: center !important; padding: 2px; }
.k-tab th.num { min-width: 56px; }
.k-tab th:first-child, .k-tab td.k-col { text-align: left; padding-left: var(--sp-2); font-size: var(--fs-micro); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-2); white-space: nowrap; }
.k-tab td.k-q { width: 60px; min-width: 56px; }
.k-tab td.k-q input { width: 100%; min-width: 44px; height: 34px !important; min-height: 34px !important; text-align: center; font-size: var(--fs-base); font-weight: 600; padding: 0 2px; box-sizing: border-box; }
.k-tab td.k-q input:not(:placeholder-shown) { background: var(--brand-tint); border-color: var(--brand); color: var(--brand-deep); }
.k-tab td.k-no { color: var(--ink-4); }
.k-art-piede { display: grid; grid-template-columns: minmax(0, 1fr) 140px; gap: var(--sp-2); align-items: end; }
.k-costo { display: flex; flex-direction: column; gap: 2px; font-size: var(--fs-micro); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-3); }
.k-costo input { text-align: right; text-transform: none; letter-spacing: 0; }
.k-pz { display: flex; align-items: center; justify-content: space-between; padding: 0 var(--sp-2); }
@media (max-width: 560px) {
  .k-tab td.k-q, .k-tab th.num { width: 40px; min-width: 36px; }
  .k-tab td.k-q input { min-width: 34px; font-size: var(--fs-sm); }
  .k-tab th:first-child, .k-tab td.k-col { max-width: 64px; overflow: hidden; text-overflow: ellipsis; padding-left: 4px; }
  .k-tab th, .k-tab td { padding: 1px; }
  .k-art-piede { grid-template-columns: minmax(0, 1fr) 110px; }
}
#k-righe .k-tab th, #k-righe .k-tab td { padding: 2px 3px; }
@media (max-width: 560px) { #k-righe .k-tab th, #k-righe .k-tab td { padding: 1px; } #k-righe .k-tab td.k-col, #k-righe .k-tab th:first-child { padding-left: 4px; } }
/* Anagrafica: i pezzi di ogni negozio accanto al capo (il negozio in uso evidenziato, a zero in grigio) */
.cc-giac { display: inline-flex; align-items: center; gap: 4px; }
:is(.cc-giac, .r-altre) .gs { font-size: var(--fs-micro); font-weight: 600; padding: 1px 5px; border-radius: 4px; border: 1px solid var(--line); color: var(--ink-4); font-variant-numeric: tabular-nums; }
:is(.cc-giac, .r-altre) .gs.si { color: var(--ink-2); border-color: var(--line-strong); }
:is(.cc-giac, .r-altre) .gs.qui { border-color: var(--brand); }
:is(.cc-giac, .r-altre) .gs.qui.si { background: var(--brand-tint); color: var(--brand-deep); }
.cc-giac b { margin-left: 4px; font-weight: 600; }
.t-attesa { font-size: var(--fs-micro); color: var(--ink-3); text-transform: uppercase; letter-spacing: .04em; padding-top: var(--sp-1); }

/* =====================================================================================================================
   16/10/2026 - LA PALETTE INTEGRALE. Angelo: "rivediamo la palette colori integralmente: MGU blu navy, MGB verde
   smeraldo/teal, GLT viola/indaco, Gruppo oro/champagne; colori di sistema grigio antracite/ardesia, bianco/grigio
   chiaro, arancione Claude; POS rosso cremisi, contanti nero". Sostituisce la palette verde del 15/10: il verde ora
   e' di MGB, quindi l'azione (pulsanti, scheda attiva, campi in uso) e' l'arancione; testi e intestazioni antracite.
   Gli stati (quadra / non quadra) restano verde e rosso tenui, solo su fondo chiaro.
   ===================================================================================================================== */
:root {
  /* sistema */
  --ink: #23272B; --ink-2: #3E464E; --ink-3: #66707A; --ink-4: #A3ABB3;
  --canvas: #F1F2F4; --surface: #FFFFFF; --surface-raised: #FFFFFF; --surface-sunken: #ECEEF1;
  --line: #E1E4E8; --line-strong: #C9CED4;
  --brand: #C9643F; --brand-deep: #A04A2A; --brand-tint: #FBEDE6; --brand-dark: #A04A2A;
  --ring: 0 0 0 4px rgba(201, 100, 63, .22);
  /* negozi */
  --sv: #1F3A6B; --sv-tint: #E7ECF5;
  --mg: #0B7A65; --mg-tint: #E1F2EE;
  --gl: #5A3EA3; --gl-tint: #EEEAF8;
  --gr: #A8822A; --gr-tint: #F7EFDB;
  /* pagamenti */
  --pag-cnt: #111111; --pag-pos: #A3112E;
}
/* dentro AB Core (Magazzino, Banco) il sotto menu sta sulla pagina grigio chiaro, senza la striscia bianca */
.solo-magazzino .topbar, .solo-banco .topbar { background: transparent !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; border: 0 !important; box-shadow: none !important; }
.k-art-testa .k-addv { min-height: 26px; height: 26px; padding: 0 var(--sp-2); font-size: var(--fs-micro); }
/* 16/10/2026 (sera) - Angelo: "WhatsApp deve avere ovunque il suo colore social". Ogni pulsante WhatsApp: verde
   WhatsApp pieno con testo/icona bianchi (scheda vendita, Sartoria, buoni, ricevute, banco). */
:root { --wa: #25D366; --wa-deep: #1DA851; }
.ab-wa, button.ab-wa, #rs-wa, .rs-wa, [data-wa], [data-ric="wa"].on, .nc-btn-wa {
  background: var(--wa) !important; border-color: var(--wa) !important; color: #fff !important;
}
.ab-wa svg, #rs-wa svg, [data-wa] svg { color: #fff !important; fill: currentColor; }
.ab-wa:hover, #rs-wa:hover, [data-wa]:hover { background: var(--wa-deep) !important; border-color: var(--wa-deep) !important; }
[data-ric="wa"]:not(.on) { border-color: var(--wa) !important; color: var(--wa-deep) !important; }
/* 16/10/2026 (sera) - testate a meta' altezza anche qui: box, finestre (dialog) e Dati commessa */
.card > .card-header, .solo-magazzino .card > .card-header, dialog > .card-header, dialog .card-header { padding-top: 6px !important; padding-bottom: 6px !important; min-height: 0 !important; }
#incassa .inc-testa { padding-top: 6px !important; padding-bottom: 6px !important; }
/* i comandi dentro una testata (IVA esclusa/inclusa, Etichette...) a 24 px, cosi' la testata resta bassa */
.card > .card-header .seg { height: 24px !important; min-height: 24px !important; }
.card > .card-header .seg button, .card > .card-header .btn { height: 22px !important; min-height: 22px !important; padding: 0 var(--sp-2) !important; font-size: var(--fs-micro) !important; }

/* 16/10/2026 - stress da Chrome: nei Dati commessa le parti (Giacca, Pantaloni) avevano la linguetta verticale a
   sinistra. Come il resto del sistema: box col bordo intero nel colore della destinazione (modifica arancio,
   appartato ambra, ritira verde, da scegliere rosso). */
#incassa .inc-parte { border-left-width: 1px !important; }
#incassa .inc-parte.dest-modifica { border-color: var(--brand); }
#incassa .inc-parte.dest-appartato { border-color: var(--warn, #B25000); }
#incassa .inc-parte.dest-ritira { border-color: var(--ok); }
#incassa .inc-parte.dest-nessuna { border-color: var(--ko); }

/* 16/10/2026 - Rettifica giacenza: capo, tre riquadri (a sistema, ci sono davvero, differenza), nota obbligatoria. */
.r-capo { display: flex; flex-direction: column; gap: var(--sp-2); margin-top: var(--sp-2); padding: var(--sp-3); border: 1px solid var(--line-strong); border-radius: var(--r-md); }
.r-capo .r-nome { font-size: var(--fs-md); font-weight: 700; }
.r-capo .r-det { font-size: var(--fs-sm); color: var(--ink-3); }
.r-numeri { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-2); }
.r-box { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 72px; border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--surface-sunken); }
.r-box > span { font-size: var(--fs-micro); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-3); text-align: center; }
.r-box > b { font-size: 26px; font-variant-numeric: tabular-nums; }
.r-box.ok { border-color: var(--ok-line); background: var(--ok-bg); color: var(--ok); }
.r-box.ko { border-color: var(--ko-line); background: var(--ko-bg); color: var(--ko); }
.r-box.r-reale { background: var(--surface-raised); border-color: var(--brand); }
.r-pm { display: flex; align-items: center; gap: 4px; }
.r-pm button { width: 34px; height: 34px; border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--surface-raised); font-size: 18px; font-weight: 700; cursor: pointer; }
.r-pm input { width: 56px; height: 34px; text-align: center; font-size: 22px; font-weight: 700; border: 1px solid var(--line-strong); border-radius: var(--r-sm); }
.r-altre { display: flex; flex-wrap: wrap; gap: 4px; }
.r-capo textarea { width: 100%; box-sizing: border-box; font: inherit; padding: var(--sp-2); border: 1px solid var(--line-strong); border-radius: var(--r-sm); resize: vertical; }
@media (max-width: 480px) { .r-box > b { font-size: 22px; } .r-pm button { width: 30px; } .r-pm input { width: 44px; } }
.anteprima-etichette .etichetta { zoom: 1.8; }

/* 17/10/2026 (FIN-NOT, voce A14) - Notifiche: categorie per dispositivo (due colonne a 390 px) e conti */
#notifiche .n-sez { margin: var(--sp-3) 0 var(--sp-1); font-size: var(--fs-micro); font-weight: 700; color: var(--ink-3); text-transform: uppercase; letter-spacing: .04em; }
#notifiche .n-cat { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: var(--sp-1); }
#notifiche .n-cat .tog { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: left; }
#notifiche .n-nota { margin-top: var(--sp-1); font-size: var(--fs-micro); color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#notifiche .n-conti td, #notifiche .n-conti th { white-space: nowrap; }