/* Identità KARATONE: azzurro e bianco. Le superfici sono bianche, lo sfondo è
   un azzurro appena accennato che le fa staccare, l'azzurro pieno è riservato
   a ciò su cui si deve cliccare o che si deve notare. */
:root {
  --ink: #102c3d;
  --muted: #5b7a8d;
  --line: #d7e8f3;
  --paper: #eff7fd;
  --card: #ffffff;
  --accent: #0a84d1;
  --accent-scuro: #0768a8;
  --accent-soft: #e2f1fc;
  --ok: #1c8a5a;
  /* L'errore resta rosso: in azzurro si leggerebbe come un avviso qualsiasi. */
  --errore: #c62828;
  --errore-soft: #fdeaea;
}

* { box-sizing: border-box; }

/* L'attributo hidden deve avere sempre l'ultima parola: una classe che imposta
   display (per esempio un pannello in flex) altrimenti lo scavalca e l'elemento
   resta a schermo anche quando il codice lo considera chiuso. */
[hidden] { display: none !important; }

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--ink);
  background: var(--paper);
  line-height: 1.5;
}

/* ── L'intelaiatura: barra laterale e testata ───────────────────────────────
   Dodici voci in fila su una barra orizzontale erano troppe. In colonna e per
   gruppi la mappa del gestionale si vede intera, e ogni voce ha lo spazio per
   dire in una riga che cosa fa. La costruisce nav.js, uguale su ogni pagina. */

.guscio {
  display: grid;
  grid-template-columns: var(--barra) 1fr;
  min-height: 100vh;
}
/* La larghezza della barra sta sul body e non su :root perché è il body a
   portare la classe «stretta»: così tutto quello che deve tenerne conto — i
   pannelli, per esempio — la segue senza saperlo. */
body { --barra: 250px; }

/* min-width: 0 non è un dettaglio: senza, una tabella larga — il magazzino, gli
   articoli — allargherebbe la colonna oltre lo schermo invece di scorrere
   dentro, e la barra laterale finirebbe fuori dalla finestra. */
.guscio-colonna { min-width: 0; display: flex; flex-direction: column; }

.barra {
  background: var(--card);
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  /* Resta ferma mentre l'elenco scorre: in un gestionale ci si sposta di
     continuo, e dover risalire in cima per cambiare sezione è una tassa. */
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  scrollbar-width: thin;
}

.barra-testa {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 14px 14px 12px 18px;
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  background: var(--card);
  z-index: 1;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: none;
  min-width: 0;
  text-decoration: none;
  color: inherit;
}

/* Il marchio e la scritta sono due immagini affiancate: le altezze sono
   diverse di proposito, perche' la K e' quadrata e il nome e' lungo e basso.
   Allineandoli sull'altezza il nome diventerebbe illeggibile. */
.brand-marchio { height: 30px; width: auto; flex: none; }
.brand-scritta { height: 13px; width: auto; flex: none; }

.barra-stringi {
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--muted);
  border-radius: 8px;
  width: 26px;
  height: 26px;
  flex: none;
  padding: 0;
  font-size: 0.95rem;
  line-height: 1;
  cursor: pointer;
}
.barra-stringi:hover { border-color: var(--accent); color: var(--accent); }

.barra-nav { padding: 10px 10px 24px; }

/* Il titolo del gruppo non è cliccabile ed è piccolo apposta: serve a dividere
   con l'occhio, non a essere letto ogni volta. */
.barra-gruppo {
  margin: 14px 0 4px;
  padding: 0 8px;
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
}
.barra-gruppo:first-child { margin-top: 2px; }

.barra-voce {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 6px 8px;
  border-radius: 9px;
  text-decoration: none;
  color: inherit;
}
.barra-voce:hover { background: var(--paper); }

/* La pagina aperta si vede da lontano: fondo pieno e una barretta a sinistra.
   Il solo grassetto non basta quando le voci sono undici. */
.barra-voce--attiva {
  background: var(--accent-soft);
  box-shadow: inset 3px 0 0 var(--accent);
}
.barra-voce--attiva strong { color: var(--accent-scuro); }

/* L'icona sta in una piastrella tonda di 32 punti, come sulla scrivania ma
   più piccola: dà alle voci una colonna regolare, e sulla pagina aperta la
   piastrella si colora e si vede da lontano. */
.barra-icona {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 9px;
  color: var(--muted);
  background: transparent;
  transition: background 0.12s, color 0.12s;
}
.barra-icona svg { width: 21px; height: 21px; display: block; }
.barra-voce:hover .barra-icona { color: var(--ink); }
.barra-voce--attiva .barra-icona { color: var(--accent); background: rgba(255, 255, 255, 0.7); }

.barra-testi { display: grid; min-width: 0; }
.barra-testi strong {
  font-size: 0.9rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.barra-testi small {
  color: var(--muted);
  font-size: 0.72rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Stretta: solo le icone ──
   Il nome resta nel suggerimento del mouse. Serve sui portatili, dove la
   colonna larga si mangia una colonna di tabella. */
.barra-stretta { --barra: 62px; }
.barra-stretta .barra-testi,
.barra-stretta .brand-scritta { display: none; }
.barra-stretta .barra-voce { grid-template-columns: 1fr; justify-items: center; padding: 6px 4px; }
/* Stretta, l'icona è tutto quello che resta: un po' più grande. */
.barra-stretta .barra-icona { width: 38px; height: 38px; border-radius: 11px; }
.barra-stretta .barra-icona svg { width: 24px; height: 24px; }
.barra-stretta .barra-testa { padding: 14px 8px 12px; flex-direction: column; gap: 10px; }
/* Senza i titoli dei gruppi la divisione la fa una riga sottile: undici icone
   in fila senza stacchi sono un muro. Il titolo resta al suo posto ma diventa
   la riga stessa: alto un punto, testo nascosto. */
.barra-stretta .barra-gruppo {
  height: 1px;
  margin: 10px 10px 6px;
  padding: 0;
  background: var(--line);
  color: transparent;
  overflow: hidden;
  font-size: 0;
}
.barra-stretta .barra-gruppo:first-child { height: 0; margin: 0; }

/* ── La testata ── */
.testata {
  display: flex;
  align-items: center;
  gap: 16px;
  /* Lo stesso rientro del contenuto qui sotto: la briciola «Magazzino ›
     Giacenze» e il titolo della pagina devono cominciare sulla stessa
     verticale, o si vede che sono due pezzi diversi appiccicati insieme. */
  padding: 12px 26px;
  background: var(--card);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 5;
}

/* Dove sono: gruppo e pagina. In un gestionale con sei sezioni, sapere sempre
   in quale si è vale più di qualunque decorazione. */
.briciola { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.briciola-gruppo { color: var(--muted); font-size: 0.8rem; }
.briciola-sep { color: var(--line); }
.briciola strong { font-size: 0.98rem; }

.testata-utente {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.88rem;
  color: var(--muted);
}

/* Il tasto del menu serve solo dove la barra non ci sta. */
.barra-apri {
  display: none;
  border: 1px solid var(--line);
  background: var(--card);
  border-radius: 8px;
  width: 32px;
  height: 32px;
  padding: 0;
  font-size: 1rem;
  cursor: pointer;
  color: var(--muted);
}

@media (max-width: 900px) {
  .guscio { grid-template-columns: 1fr; }
  .barra {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    width: 264px;
    z-index: 30;
    transform: translateX(-100%);
    transition: transform 0.18s ease;
    box-shadow: 0 0 24px rgba(16, 44, 61, 0.12);
  }
  .barra-aperta .barra { transform: translateX(0); }
  .barra-apri { display: block; }
  .barra-stringi { display: none; }
  /* Stretta non ha senso su uno schermo dove la barra è già nascosta. */
  .barra-stretta { --barra: 250px; }
  .barra-stretta .barra-testi, .barra-stretta .barra-gruppo, .barra-stretta .brand-scritta { display: revert; }
  .barra-stretta .barra-voce { grid-template-columns: 22px minmax(0, 1fr); justify-items: stretch; padding: 7px 9px; }
}

.link-button {
  border: none;
  background: none;
  padding: 0;
  color: var(--accent);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

/* ── Contenuto ─────────────────────────────────────────────────────────────── */

/* Una larghezza sola per tutte le pagine: quella dello schermo.
   Prima ce n'erano quattro — 1000, 1320, 1560 e «piena» — e passando dal
   magazzino agli acquisti il contenuto si stringeva di duecento pixel senza
   una ragione visibile. Il tetto era pensato per non far correre l'occhio su
   righe lunghe un metro, ma in un gestionale il problema è l'opposto: le
   colonne sono tante, e quello che manca è sempre spazio.
   Chi ne vuole ancora di più stringe la barra laterale col «‹» in cima. */
.layout {
  max-width: none;
  margin: 0;
  padding: 24px 26px 60px;
  display: grid;
  gap: 20px;
}

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 28px;
}

.card--muted { background: transparent; }

/* Il soprattitolo delle pagine non c'è più: diceva la stessa cosa della
   briciola in testata — «Anagrafica › Articoli» e sotto di nuovo «ANAGRAFICA» —
   e ripetere la stessa parola a due centimetri di distanza è il genere di
   disordine che fa sembrare improvvisato un programma. La regola resta per chi
   volesse rimetterlo su una pagina sola. */
.kicker {
  margin: 0 0 6px;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
}

/* Il titolo scende da 1,9 a 1,6 rem: sopra c'è la briciola che dice già dove
   siamo, e un titolo da manifesto sotto una barra di navigazione grida. */
h1 { margin: 0 0 10px; font-size: 1.6rem; letter-spacing: -0.01em; }
h2 { margin: 0 0 12px; font-size: 1.1rem; }

.lead { margin: 0 0 22px; color: var(--muted); max-width: 56ch; }

.stato {
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
}

.stato-riga {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 11px 16px;
  border-top: 1px solid var(--line);
  font-size: 0.9rem;
}

.stato-riga:first-child { border-top: none; }
.stato-riga span { color: var(--muted); }
.stato-ok { color: var(--ok); }

.passi { margin: 0 0 16px; padding-left: 20px; color: var(--muted); }
.passi li { margin-bottom: 6px; }

.nota { margin: 0; font-size: 0.86rem; color: var(--muted); }

code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.86em;
  background: var(--accent-soft);
  color: var(--accent);
  padding: 1px 5px;
  border-radius: 5px;
}

/* ── Accesso ───────────────────────────────────────────────────────────────── */

.login-body {
  display: grid;
  place-items: center;
  min-height: 100vh;
  padding: 20px;
}

.login-card {
  width: min(380px, 100%);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 32px 28px;
}

.login-brand {
  display: grid;
  justify-items: center;
  gap: 10px;
  margin-bottom: 28px;
  text-align: center;
}

.login-logo {
  width: min(230px, 70%);
  height: auto;
}

.login-brand small {
  color: var(--muted);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
}

.login-form { display: grid; gap: 16px; }

.login-field { display: grid; gap: 6px; }

.login-field span {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
}

.login-field input {
  font: inherit;
  padding: 11px 13px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--paper);
}

.login-field input:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  background: var(--card);
}

.login-button {
  font: inherit;
  font-weight: 700;
  padding: 12px;
  border: none;
  border-radius: 10px;
  background: var(--accent);
  color: #fff;
  cursor: pointer;
  transition: background 0.12s;
}

.login-button:hover { background: var(--accent-scuro); }

.login-button:disabled { opacity: 0.6; cursor: progress; }

.login-error {
  margin: 0;
  padding: 10px 12px;
  border-radius: 9px;
  background: var(--errore-soft);
  color: var(--errore);
  font-size: 0.86rem;
}

/* ── Telefono ──────────────────────────────────────────────────────────────── */

@media (max-width: 640px) {
  .testata { padding: 10px 14px; }
  .layout { padding: 18px 14px 40px; }
  .card { padding: 20px; }
  h1 { font-size: 1.5rem; }
  .stato-riga { flex-direction: column; gap: 2px; }
}

/* ── Pagine con elenco ─────────────────────────────────────────────────────── */


.pagina-testa {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.pagina-testa h1 { margin: 0; }

.bottone {
  font: inherit;
  font-weight: 600;
  font-size: 0.9rem;
  padding: 10px 18px;
  border-radius: 10px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
}

.bottone--pieno { background: var(--accent); color: #fff; }
.bottone--pieno:hover { background: var(--accent-scuro); }

.bottone--vuoto {
  background: var(--card);
  border-color: var(--line);
  color: var(--ink);
}
.bottone--vuoto:hover { border-color: var(--accent); color: var(--accent); }

.bottone--testo { background: none; color: var(--muted); padding: 10px 8px; }
.bottone--testo:hover { color: var(--errore); }

.bottone--pericolo { background: var(--errore-soft); color: var(--errore); }
.bottone--pericolo:hover { background: var(--errore); color: #fff; }

.bottone:disabled { opacity: 0.55; cursor: progress; }

/* L'elenco di quello che sparisce, dentro la richiesta di conferma. Si legge
   prima di premere, ed e' l'unico modo perche' «Elimina» sia una domanda a cui
   si puo' rispondere. */
/* ── Che cosa eliminare di una commessa ──────────────────────────────────────
   Non un elenco di conseguenze da leggere e basta, ma una scelta: ogni pezzo
   della commessa e' una riga con la sua casella, quello che si porta via e
   quello che gli succede se lo si lascia. Le righe bloccate - un ordine che ha
   gia' portato merce - restano visibili e spente: sapere che ci sono e che non
   si toccano e' meta' della risposta. */
/* La spunta «usa sempre questo magazzino»: e' fatta come l'altro interruttore
   del modulo, ma piu' sommessa — non e' un campo del documento, e' una
   preferenza che si cambia una volta ogni tanto. */
.campo-sempre { cursor: pointer; }
.campo-sempre > span { font-size: 0.84rem; color: var(--muted); }
.campo-sempre:hover > span { color: var(--ink); }

.elenco-pezzi { display: grid; gap: 8px; }

.pezzo {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--card);
  cursor: pointer;
}
.pezzo:hover { border-color: var(--accent); }
.pezzo input { margin: 2px 0 0; width: 16px; height: 16px; accent-color: var(--errore); }
.pezzo-corpo { display: grid; gap: 2px; min-width: 0; }
.pezzo-corpo strong { font-size: 0.9rem; }
.pezzo-corpo small { color: var(--muted); font-size: 0.78rem; }

.pezzo--bloccato {
  cursor: default;
  background: var(--paper);
  border-style: dashed;
}
.pezzo--bloccato:hover { border-color: var(--line); }
.pezzo--bloccato .pezzo-corpo strong { color: var(--muted); }
.pezzo-bloccato { color: var(--errore) !important; }
/* Che cosa succede lasciandolo li': e' l'altra meta' della scelta, e senza si
   spunta al buio. */
.pezzo-seresta { font-style: italic; }

.pezzo-vuoto, .pezzo-salvi {
  margin: 4px 0 0;
  font-size: 0.8rem;
  color: var(--muted);
}
.pezzo-salvi {
  padding: 8px 10px;
  border-radius: 8px;
  background: var(--accent-soft);
  color: var(--ink);
}
.pezzo-riepilogo {
  margin: 8px 0 0;
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--ink);
}
.pezzo-riepilogo--vuota { color: var(--muted); font-weight: 500; }

.elenco-conseguenze {
  margin: 0;
  padding-left: 20px;
  display: grid;
  gap: 5px;
  font-size: 0.9rem;
}

.elenco-conseguenze li::marker { color: var(--errore); }

/* ── Riepilogo ─────────────────────────────────────────────────────────────── */

.riepilogo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
}

.riepilogo-voce {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px 16px;
  display: grid;
  gap: 2px;
}

.riepilogo-voce span {
  font-size: 0.74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
}

.riepilogo-voce strong { font-size: 1.15rem; color: var(--accent-scuro); }

/* ── Filtri e campi ────────────────────────────────────────────────────────── */

/* La ricerca si prende lo spazio che resta, i filtri stanno in fila accanto a
   lei: con una griglia a colonne fisse il quarto filtro andava a capo largo come
   la casella di ricerca, e sembrava un errore. */
.filtri {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 12px;
}

.filtri .campo { flex: 0 1 190px; }
.filtri .campo--cerca { flex: 1 1 300px; }
/* Una data occupa quello che occupa: 190px le lascerebbero mezzo campo vuoto. */
.filtri .campo--data { flex: 0 0 158px; }
/* Il bottone che toglie il periodo sta in fila con le caselle, non sopra: senza
   etichetta sua, si allinea al fondo come i campi accanto. */
.filtri .campo--azzera { flex: none; align-self: end; }
.filtri .campo--azzera .bottone { white-space: nowrap; }
/* La spunta che nasconde gli zeri non ha una casella da riempire: occupa il
   testo che ha e si allinea al fondo come i campi accanto, invece di prendersi
   i 190px degli altri e lasciarne mezzo vuoto. */
.filtri .campo--interruttore { flex: 0 1 auto; max-width: 320px; align-self: end; padding-bottom: 6px; }

/* ── Le colonne che si vedono ────────────────────────────────────────────────
   Non è un filtro: non cambia quali righe si vedono, cambia come si guardano.
   Sta però nella stessa barra, perché è lì che si va a sistemare la vista. */
.filtri .colonne-scelta {
  display: grid;
  gap: 5px;
  align-content: start;
  flex: none;
  position: relative;
}
.colonne-etichetta {
  font-size: 0.74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
}

.colonne-bottone {
  padding: 9px 14px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--card);
  color: var(--ink);
  font: inherit;
  font-size: 0.88rem;
  white-space: nowrap;
  cursor: pointer;
}
.colonne-bottone:hover { border-color: var(--accent); color: var(--accent-scuro); }
.colonne-bottone[aria-expanded="true"] { border-color: var(--accent); color: var(--accent-scuro); }

/* Il pannello si apre SOPRA la pagina e non la sposta: le colonne si accendono
   e si spengono guardando la tabella cambiare sotto, non facendola ballare. */
.colonne-pannello {
  /* Fissato allo schermo e messo al suo posto dal codice: così non copre il
     menu e non esce dal bordo, qualunque sia la larghezza della finestra. */
  position: fixed;
  z-index: 30;
  width: min(720px, 92vw);
  max-height: min(72vh, 560px);
  overflow: auto;
  padding: 14px 16px 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--card);
  box-shadow: 0 18px 40px rgba(16, 44, 61, 0.16);
}

.colonne-testa {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.colonne-azioni { display: flex; gap: 6px; }
.colonne-scorciatoia {
  padding: 3px 9px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: none;
  color: var(--accent-scuro);
  font: inherit;
  font-size: 0.74rem;
  font-weight: 600;
  cursor: pointer;
}
.colonne-scorciatoia:hover { border-color: var(--accent); background: var(--accent-soft); }

/* Le voci in colonne strette: ventisette in fila sarebbero un elenco da
   scorrere, a gruppi si trovano guardando. */
/* I gruppi affiancati: in una colonna sola il pannello sarebbe più alto dello
   schermo e le ultime colonne si troverebbero solo scorrendo. */
.colonne-griglia {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 2px 20px;
  align-items: start;
}

.colonne-gruppo { margin-top: 10px; }
.colonne-gruppo-nome {
  margin: 0 0 4px;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
}
.colonne-voce {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3px 0;
  font-size: 0.86rem;
  cursor: pointer;
}
.colonne-voce input { width: 15px; height: 15px; accent-color: var(--accent); }
.colonne-voce:has(input:disabled) { color: var(--muted); cursor: default; }

/* align-content: start tiene i campi in alto nella loro riga: senza, quando un
   campo ha la nota di spiegazione sotto e quello accanto no, la casella del
   secondo si allunga per pareggiare l'altezza e le due righe non si allineano
   più. */
.campo { display: grid; gap: 5px; align-content: start; }
/* display:grid vincerebbe sull'attributo hidden: un campo che in questo caso
   non si chiede — la tipologia del gioiello su un lingotto d'oro — deve sparire
   davvero, non restare a occupare una casella vuota nella griglia. */
.campo[hidden] { display: none; }

.campo-etichetta {
  font-size: 0.74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
}

.campo input,
.campo select,
.campo textarea {
  font: inherit;
  font-size: 0.92rem;
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--card);
  color: var(--ink);
}

.campo textarea { resize: vertical; }

/* Una tendina, a parità di padding, viene qualche pixel più bassa di una casella
   di testo: accanto l'una all'altra si nota. */
.campo select { height: 44px; }

.campo input:focus,
.campo select:focus,
.campo textarea:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.campo-nota { grid-column: 1 / -1; margin: -4px 0 0; font-size: 0.82rem; color: var(--accent-scuro); }
.campo-nota--allerta { color: var(--errore); }

/* Un valore che si calcola, non che si scrive: ha il posto di un campo perche'
   sta in fila con gli altri, ma il bordo tratteggiato dice che non si tocca. */
.campo-valore {
  font: inherit;
  font-size: 0.95rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  width: 100%;
  padding: 10px 12px;
  border: 1px dashed var(--line);
  border-radius: 10px;
  background: var(--paper);
  color: var(--ink);
}

/* ── Elenco articoli ───────────────────────────────────────────────────────── */

/* Magazzino e ordini mostrano ancora delle schede: l'impianto a griglia resta il
   loro. Le anagrafiche, che mostrano una tabella, lo annullano con la classe
   qui sotto — messa dal codice quando disegna la tabella. */
.elenco {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 14px;
}

/* min-width: 0 non è un vezzo: un elemento dentro una griglia, per difetto, non
   si restringe sotto la larghezza del suo contenuto. Senza questa riga la
   tabella larga fa scorrere di lato la PAGINA INTERA — barra di ricerca e menu
   compresi — invece di scorrere dentro il proprio riquadro. */
.elenco--tabella {
  display: block;
  min-width: 0;
}

/* Mentre il server risponde l'elenco resta a schermo ma si spegne: sparire e
   ricomparire a ogni tasto della ricerca darebbe l'impressione di un programma
   che perde i dati. */
.elenco--in-corso { opacity: 0.55; transition: opacity 0.12s; }

/* ── Tabella delle anagrafiche ─────────────────────────────────────────────── */

.tabella-scorrevole {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: auto;              /* le colonne larghe scorrono dentro il riquadro */
  max-height: calc(100vh - 320px);
}

.tabella {
  width: 100%;
  /* Sotto questa larghezza le colonne si strizzerebbero fino a mandare a capo i
     codici: meglio che sia il riquadro a scorrere di lato. */
  min-width: 1020px;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.88rem;
}

/* L'intestazione resta ferma mentre si scorre: senza, dopo venti righe non si sa
   più che colonna si sta leggendo. */
.tabella thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  padding: 0;
  text-align: left;
  white-space: nowrap;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
}

.tabella thead th:not(:has(.tabella-ordina)) { padding: 10px 12px; }

.tabella-ordina {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 10px 12px;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-transform: inherit;
  letter-spacing: inherit;
  cursor: pointer;
}
.tabella-ordina:hover { color: var(--accent-scuro); background: var(--accent-soft); }
.tabella-ordina--attiva { color: var(--accent-scuro); }
.tabella-freccia { font-size: 0.62rem; }

.tabella tbody td {
  padding: 9px 12px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.tabella tbody tr:last-child td { border-bottom: 0; }

.tabella tbody tr {
  cursor: pointer;
  transition: background-color 0.1s;
}
.tabella tbody tr:nth-child(even) { background: color-mix(in srgb, var(--paper) 45%, transparent); }
.tabella tbody tr:hover { background: var(--accent-soft); }
.tabella tbody tr:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.tabella--destra { text-align: right; font-variant-numeric: tabular-nums; }
.tabella--centro { text-align: center; }

/* Codici, partite IVA e numeri non vanno mandati a capo: spezzati diventano
   illeggibili e sembrano due dati diversi. */
.tabella--stretta { white-space: nowrap; width: 1%; }
/* Il testo principale di una colonna stretta non va a capo — un codice spezzato
   in due non si legge — ma la riga di sotto sì: è una spiegazione, e tenerla su
   una riga sola allarga la colonna del doppio per niente. */
.tabella--stretta .tabella-sotto { white-space: pre-line; }

.tabella-forte { font-weight: 600; }
.tabella-vuoto { color: var(--line); }
.tabella-sotto {
  display: block;
  margin-top: 2px;
  font-size: 0.78rem;
  color: var(--muted);
}

/* Una nota sotto la cella che non è un'informazione ma un avvertimento: la
   quantità scritta sta sotto il minimo che il fornitore accetta, e verrà alzata.
   Grigia si legge come le altre e non la nota nessuno. */
.tabella-sotto--attesa { color: #9a6413; font-weight: 600; }

/* ── Righe che si aprono: le varianti sotto il loro modello ────────────────── */

/* Il comando che apre le varianti: un bottone scritto, sotto al codice del
   modello. Prima era un triangolino di venti pixel accanto al codice — troppo
   piccolo per essere preso al primo colpo, e muto: non diceva né che cosa
   apriva né quante cose c'erano dentro. */
.tabella-apri {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  /* Le misure sono strette apposta: la riga della tabella è alta 44px di
     contenuto e dentro ci devono stare il codice E questo comando, o il
     modello diventerebbe più alto di tutte le altre righe — che è proprio
     quello che si è appena finito di sistemare. */
  margin-top: 2px;
  padding: 0 8px 0 5px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--card);
  color: var(--accent-scuro);
  font: inherit;
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 18px;
  white-space: nowrap;
  cursor: pointer;
}

.tabella-apri-freccia { font-size: 0.6rem; line-height: 1; }

.tabella-apri:hover { border-color: var(--accent); background: var(--accent-soft); }
.tabella-apri:disabled { color: var(--muted); cursor: default; }

/* Aperto: il bottone si accende e resta acceso finché le varianti sono sotto.
   È il filo che lega il modello alle righe che gli sono comparse sotto. */
.tabella-apri--aperto {
  border-color: var(--accent);
  background: var(--accent);
  color: #fff;
}
.tabella-apri--aperto:hover { background: var(--accent-scuro); border-color: var(--accent-scuro); }

/* Il modello aperto: la riga si stacca da quelle sopra e si legge come la testa
   di un gruppo, non come una riga qualunque. */
.tabella-riga--aperta > td { background: var(--accent-soft); }
.tabella-riga--aperta > td:first-child { box-shadow: inset 3px 0 0 var(--accent); }

/* La variante si vede subito che è una variante: rientrata, su fondo appena
   diverso, e con la stessa riga azzurra del modello che continua lungo tutto il
   gruppo — è quella che dice dove il gruppo comincia e dove finisce. */
.tabella-riga--figlia > td { background: color-mix(in srgb, var(--accent-soft) 45%, var(--card)); }
.tabella-riga--figlia > td:first-child {
  padding-left: 34px !important;
  box-shadow: inset 3px 0 0 var(--accent);
}
/* L'ultima del gruppo chiude con una linea più marcata: senza, le varianti si
   confondono con la riga che viene dopo, che non c'entra niente. */
.tabella-riga--ultima-figlia > td { border-bottom: 1px solid var(--accent-soft); }
.tabella-riga--figlia:hover > td { background: var(--accent-soft); }
.tabella-riga--vuota td { color: var(--muted); font-size: 0.82rem; }

/* Riga non attiva: si vede che c'è ma non chiede attenzione */
.tabella-riga--spenta .tabella-forte,
.tabella-riga--spenta td { color: var(--muted); }

/* La riga appena salvata si accende per un attimo: in duecento righe, altrimenti,
   non si sa dove è finita. */
@keyframes tabella-appena-salvata {
  from { background: var(--accent-soft); box-shadow: inset 3px 0 0 var(--accent); }
  to   { background: transparent; box-shadow: inset 3px 0 0 transparent; }
}
.tabella-riga--nuova { animation: tabella-appena-salvata 2.4s ease-out; }

/* ── Piede: quante righe, che pagina ──────────────────────────────────────── */

.tabella-piede {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 10px;
  font-size: 0.82rem;
  color: var(--muted);
}

.tabella-conto { font-weight: 600; color: var(--ink); }
.tabella-pagine { display: flex; align-items: center; gap: 6px; }
.tabella-dove { padding: 0 4px; }

.tabella-pagina {
  min-width: 32px;
  height: 32px;
  padding: 0 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--card);
  color: var(--ink);
  font: inherit;
  cursor: pointer;
}
.tabella-pagina:hover:not(:disabled) { border-color: var(--accent); color: var(--accent-scuro); }
.tabella-pagina:disabled { opacity: 0.4; cursor: default; }

.tabella-quante { display: flex; align-items: center; gap: 6px; margin-left: 10px; }
.tabella-quante select {
  height: 32px;
  padding: 0 6px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--card);
  color: var(--ink);
  font: inherit;
}


.articolo {
  display: flex;
  gap: 14px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px;
  cursor: pointer;
  transition: border-color 0.12s, box-shadow 0.12s;
}

.articolo:hover,
.articolo:focus-visible {
  border-color: var(--accent);
  box-shadow: 0 3px 12px rgba(10, 132, 209, 0.12);
  outline: none;
}

.articolo-foto {
  flex: none;
  width: 84px;
  height: 84px;
  border-radius: 10px;
  overflow: hidden;
  background: var(--paper);
  display: grid;
  place-items: center;
}

.articolo-foto img { width: 100%; height: 100%; object-fit: cover; }
.articolo-foto--vuota { color: var(--line); font-size: 1.4rem; }

.articolo-corpo { min-width: 0; display: grid; gap: 5px; align-content: start; }

.articolo-testa { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.articolo-codice { font-size: 0.95rem; letter-spacing: 0.01em; }

.tag {
  font-size: 0.7rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-scuro);
  white-space: nowrap;
}

.tag--neutro { background: var(--paper); color: var(--muted); }
.tag--allerta { background: var(--errore-soft); color: var(--errore); }

.articolo-descrizione { margin: 0; font-size: 0.88rem; }
.articolo-dettagli { margin: 0; font-size: 0.8rem; color: var(--muted); }

/* ── Il conto di una commessa chiusa ────────────────────────────────────────
   Quattro numeri in fila in fondo alla riga: venduto, costo, ricavo e ricarica
   in percentuale. Uno accanto all'altro e non uno sotto l'altro, perché si
   leggono insieme — e incolonnati fra una riga e l'altra si confrontano a
   occhio senza doverli cercare ogni volta in un posto diverso. */
/* Il corpo si allarga fino a spingere i numeri contro il bordo destro: senza,
   restano appiccicati ai passi e ogni riga li mette in un posto diverso, che è
   esattamente il contrario di una colonna da confrontare. */
.commessa .articolo-corpo { flex: 1 1 auto; }

.commessa-conto {
  display: grid;
  grid-template-columns: repeat(4, minmax(84px, auto));
  gap: 10px;
  align-items: start;
  flex: none;
}

.commessa-numero {
  display: grid;
  gap: 1px;
  padding: 8px 12px;
  border-left: 1px solid var(--line);
  text-align: right;
}

.commessa-numero small {
  font-size: 0.66rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
}

.commessa-numero b {
  font-size: 0.95rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Il guadagno si vede, la perdita si vede di più: una commessa venduta sotto
   costo è l'unica riga di questo elenco su cui bisogna fare qualcosa. */
.commessa-numero--guadagno b { color: var(--ok); }
.commessa-numero--perdita b { color: var(--errore); }
.commessa-numero--vuoto b { color: var(--muted); font-weight: 400; }

/* ── Il conto di una commessa ancora aperta ──────────────────────────────────
   Le stesse celle di quella chiusa, ma due o tre invece di quattro: la griglia
   fissa a quattro colonne lascerebbe due buchi a destra e l'occhio li leggerebbe
   come numeri mancanti. Qui le colonne sono quante sono le celle. */
.commessa-conto--incorso {
  grid-template-columns: none;
  grid-auto-flow: column;
  grid-auto-columns: minmax(84px, auto);
}
/* Un costo a cui manca il prezzo di qualche pezzo non è un costo basso: è un
   costo incompleto, e va guardato prima di crederci. */
.commessa-numero--parziale b { color: var(--errore); }
.commessa-numero--parziale b::after { content: " *"; font-weight: 700; }

@media (max-width: 900px) {
  .commessa-conto { grid-template-columns: repeat(2, 1fr); width: 100%; }
  .commessa-numero { border-left: none; text-align: left; }
}

.articolo-prezzi { display: flex; align-items: baseline; gap: 10px; margin-top: 3px; }
.articolo-prezzi strong { color: var(--accent-scuro); }
.articolo-prezzi small { color: var(--muted); font-size: 0.78rem; }

.vuoto {
  grid-column: 1 / -1;
  margin: 0;
  padding: 40px 20px;
  text-align: center;
  color: var(--muted);
  background: var(--card);
  border: 1px dashed var(--line);
  border-radius: 14px;
}

/* ── La finestra delle schede ───────────────────────────────────────────────
   Era una barra attaccata al bordo destro. Su una scheda di tre campi andava
   bene; su tutto il resto — un articolo, un ordine con le sue righe, un carico
   con dieci materiali — costringeva a leggere attraverso una feritoia mentre
   tre quarti dello schermo restavano vuoti. Adesso è una finestra al centro,
   larga quanto lo schermo, e i campi ci si mettono in fila quanti ce ne stanno.
   La classe è una sola: le pagine non devono chiedere niente. */

.pannello-sfondo {
  position: fixed;
  inset: 0;
  background: rgba(16, 44, 61, 0.35);
  z-index: 20;
}

.pannello {
  position: fixed;
  top: 3vh;
  /* Centrato sul contenuto, non sulla finestra: con la barra laterale a
     sinistra, un pannello centrato sullo schermo risulta spostato di mezza
     barra e si nota. Il valore segue la barra quando si stringe. */
  left: calc(50% + var(--barra, 0px) / 2);
  transform: translateX(-50%);
  z-index: 21;
  /* Larga quanto lo schermo, meno un margine e la barra. Prima c'erano due
     misure — 1100 e 1320 — e la finestra della commessa, che è quella dove si
     lavora davvero, si fermava a metà di un monitor grande mentre l'elenco
     dietro andava da parte a parte. Una misura sola, la più grande possibile:
     dentro ci stanno tabelle, e le tabelle vogliono spazio. */
  width: calc(96vw - var(--barra, 0px));
  height: 94vh;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: 0 24px 70px rgba(16, 44, 61, 0.28);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Sotto i 900 px la barra non occupa più una colonna — sta fuori schermo finché
   non la si apre — e il pannello torna al centro pieno. Sta qui e non nel blocco
   dei telefoni più in alto perché a parità di specificità vince chi viene dopo,
   e .pannello è scritto qui sotto. */
@media (max-width: 900px) {
  .pannello { left: 50%; width: 96vw; }
}

/* Dentro una finestra i campi si mettono in fila quanti ce ne stanno di una
   misura giusta. Erano tre fissi: su una finestra larga come lo schermo, tre
   caselle da seicento pixel l'una per scriverci dentro «Anello» sono peggio di
   sei di misura normale. */
.pannello .griglia-campi { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.pannello .campo--largo { grid-column: 1 / -1; }
.pannello .campo--doppio { grid-column: span 2; }

/* Schermo medio: la finestra prende tutto quello che c'è. Le colonne non si
   contano più a mano — ci pensa auto-fill, che a 900px ne fa tre e a 500px una
   sola — ma questo blocco deve restare PRIMA di quello del telefono, dove la
   colonna torna una e i campi doppi smettono di essere doppi. */
@media (max-width: 1100px) {
  .pannello { width: 96vw; }
}

body.pannello-aperto { overflow: hidden; }

.pannello-testa,
.pannello-piede {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 22px;
  border-bottom: 1px solid var(--line);
}

.pannello-testa h2 { margin: 0; font-size: 1.1rem; }

.pannello-chiudi {
  margin-left: auto;
  border: none;
  background: none;
  font-size: 1.05rem;
  color: var(--muted);
  cursor: pointer;
}

.pannello-corpo { flex: 1; overflow-y: auto; padding: 20px 22px; }

.pannello-piede {
  border-bottom: none;
  border-top: 1px solid var(--line);
}

.pannello-piede-destra { margin-left: auto; display: flex; gap: 10px; }

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

.campo--largo { grid-column: 1 / -1; }

/* Titoletto che divide una scheda lunga in blocchi di significato */
.griglia-sezione {
  grid-column: 1 / -1;
  margin: 10px 0 -2px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--line);
  color: var(--accent-scuro);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.griglia-sezione:first-child { margin-top: 0; }

.foto-blocco {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
}

/* ── La testata della scheda ─────────────────────────────────────────────────
   A sinistra la foto, a destra le due righe che dicono di chi è questa scheda:
   il nome e la descrizione. Di un gioiello la foto è il primo modo di
   riconoscerlo, e in fondo alla scheda non la guardava nessuno. */
.scheda-testa {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  margin-bottom: 18px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
}

.scheda-testa-foto { flex: none; width: 190px; }
/* Nella colonna stretta della testata la foto sta sopra e i bottoni sotto: in
   fila non ci starebbero, e il riquadro si ridurrebbe a un francobollo. */
.scheda-testa-foto .foto-blocco {
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  margin-bottom: 0;
}
.scheda-testa-foto .foto-anteprima { width: 190px; height: 190px; }
/* I due bottoni in fila: uno sotto l'altro allungavano la testata di un dito
   per due parole. La nota va sotto tutta la larghezza, piccola. */
.scheda-testa-foto .foto-azioni {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.scheda-testa-foto .foto-azioni .campo-aiuto { flex-basis: 100%; font-size: 0.72rem; line-height: 1.3; }

.scheda-testa-campi {
  flex: 1;
  min-width: 0;
  display: grid;
  gap: 14px;
  align-content: start;
}

/* Su uno schermo stretto la foto va sopra e le righe sotto: affiancate
   lascerebbero al nome una casella larga come una parola. */
@media (max-width: 700px) {
  .scheda-testa { flex-wrap: wrap; }
  .scheda-testa-foto { width: 100%; }
  .scheda-testa-foto .foto-anteprima { width: 150px; height: 150px; }
}

.foto-anteprima {
  flex: none;
  width: 110px;
  height: 110px;
  border-radius: 12px;
  border: 1px dashed var(--line);
  background: var(--paper);
  display: grid;
  place-items: center;
  overflow: hidden;
  color: var(--muted);
  font-size: 0.78rem;
  text-align: center;
}

.foto-anteprima img { width: 100%; height: 100%; object-fit: cover; }
.foto-azioni { display: grid; gap: 8px; justify-items: start; }
.foto-azioni .bottone { display: inline-block; }

/* Si può anche trascinarcela sopra: il riquadro lo dice mentre il file è in
   volo, altrimenti nessuno prova. */
.foto-anteprima--sopra {
  border-color: var(--accent);
  border-style: solid;
  background: var(--accent-soft);
}

/* Mentre la foto viene adattata: il riquadro si spegne invece di restare
   identico, o non si capisce se il bottone ha fatto qualcosa. */
.foto-anteprima--in-corso { opacity: 0.5; }

/* La miniatura in elenco. Ha una misura fissa anche quando è vuota: senza, le
   righe con foto e quelle senza avrebbero altezze diverse e la tabella
   ballerebbe scorrendo. */
.tabella-foto {
  display: block;
  width: 44px;
  height: 44px;
  border-radius: 8px;
  overflow: hidden;
  background: var(--paper);
}

.tabella-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tabella-foto--vuota { border: 1px dashed var(--line); }

.scheda-errore {
  margin: 16px 0 0;
  padding: 10px 12px;
  border-radius: 9px;
  background: var(--errore-soft);
  color: var(--errore);
  font-size: 0.86rem;
}

/* ── Avvisi ────────────────────────────────────────────────────────────────── */

#avvisi {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 40;
  display: grid;
  gap: 8px;
}

.avviso {
  padding: 11px 16px;
  border-radius: 10px;
  font-size: 0.88rem;
  font-weight: 600;
  color: #fff;
  background: var(--accent);
  box-shadow: 0 4px 14px rgba(16, 44, 61, 0.18);
}

.avviso--errore { background: var(--errore); }

/* ── Telefono ──────────────────────────────────────────────────────────────── */

@media (max-width: 720px) {
  /* Sul telefono il riepilogo deve restare una striscia, non una pagina intera:
     l'elenco degli articoli e' cio' per cui si e' aperta la pagina. */
  .riepilogo { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .riepilogo-voce { padding: 9px 12px; }
  .riepilogo-voce span { font-size: 0.68rem; }
  .riepilogo-voce strong { font-size: 1rem; }
  .filtri { grid-template-columns: 1fr; }
  .griglia-campi { grid-template-columns: 1fr; }
  .elenco { grid-template-columns: 1fr; }
  .pagina-testa { align-items: stretch; }
  .pagina-testa .bottone { width: 100%; }
  .pannello {
    top: 0; left: 0; transform: none;
    width: 100%; height: 100dvh;
    border-radius: 0;
  }
  .pannello .griglia-campi { grid-template-columns: 1fr; }
  /* Con una colonna sola, un campo che ne occupa due se ne inventa una seconda:
     la griglia la crea implicitamente, e la scheda torna a due colonne strette
     senza che nessuna regola lo dica. */
  .pannello .campo--doppio { grid-column: auto; }
  #avvisi { left: 12px; right: 12px; }
}

/* Un link che deve sembrare un bottone */
.bottone--link { display: inline-block; text-decoration: none; }

/* ── Righe d'ordine ────────────────────────────────────────────────────────── */

/* La larghezza delle finestre sta tutta in cima, con la definizione del
   pannello: qui c'era la vecchia misura della barra laterale, che vincendo per
   posizione teneva a 820px proprio le schede che di spazio ne hanno più bisogno. */

.righe-blocco {
  margin-top: 22px;
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
}

.righe-testa {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}

.riga-ordine {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 2fr) 78px 110px 78px auto;
  gap: 8px;
  align-items: end;
  padding: 10px 14px;
  border-top: 1px solid var(--line);
}

.riga-ordine:first-child { border-top: none; }

.riga-ordine select,
.riga-ordine input {
  font: inherit;
  font-size: 0.86rem;
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--card);
  color: var(--ink);
}

.riga-numero {
  display: grid;
  gap: 3px;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
}

.riga-numero input { text-align: right; }

/* La nota sotto un campo di riga: il minimo ordinabile dell'articolo. Non è
   maiuscola come l'etichetta sopra — è un'informazione, non un titolo. */
.riga-nota {
  font-size: 0.68rem;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--muted);
  text-align: right;
}

/* Quando la quantità scritta sta sotto il minimo e verrà alzata: grigia si
   legge come le altre e non la nota nessuno. */
.riga-nota--attesa { color: #9a6413; font-weight: 700; }

/* ── Il prezzo di vendita nella riga del primo passo ────────────────────────
   Sta nella stessa colonna del prezzo delle righe di vendita e si veste quasi
   come un campo — stessa altezza, stesso allineamento a destra — ma senza
   bordo: qui non si scrive, si legge. Il prezzo lo fa il listino, e si cambia
   cambiando il listino, non scrivendoci sopra. */
.riga-prezzo strong {
  display: block;
  padding: 8px 0;
  font-size: 0.92rem;
  font-weight: 700;
  text-align: right;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Nessun articolo scelto, o prezzo ancora in arrivo dal server: grigio, perché
   non è un numero — è un posto che aspetta. */
.riga-prezzo--vuota strong { color: var(--muted); font-weight: 400; }

/* Un articolo senza prezzo si dice mentre la commessa è ancora un foglio
   bianco: scoprirlo alla vendita vuol dire scoprirlo troppo tardi. Il perché
   sta nella riga sotto. */
.riga-prezzo--manca strong { color: #a06a00; font-weight: 600; }

/* ── Una scelta già fatta, che qui si legge soltanto ────────────────────────
   Il listino della commessa al passo 4: si è scelto al passo 1 e non si
   richiede due volte. Riquadro piatto, con il rimando per tornare dove lo si
   sceglie davvero. */
.campo-detto {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin: 0;
  padding: 8px 10px;
  border: 1px dashed var(--line);
  border-radius: 8px;
  background: var(--paper);
  font-size: 0.86rem;
  color: var(--ink);
}

.campo-detto button {
  border: none;
  background: none;
  padding: 0;
  font: inherit;
  font-size: 0.78rem;
  color: var(--accent-scuro);
  text-decoration: underline;
  cursor: pointer;
  white-space: nowrap;
}

.riga-togli {
  border: none;
  background: none;
  color: var(--muted);
  font-size: 0.95rem;
  cursor: pointer;
  padding: 8px;
  align-self: end;
}

.riga-togli:hover { color: var(--errore); }

.righe-vuote {
  margin: 0;
  padding: 22px 14px;
  text-align: center;
  color: var(--muted);
  font-size: 0.88rem;
}

.righe-totale {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 12px 14px;
  border-top: 1px solid var(--line);
  background: var(--paper);
}

.righe-totale span { font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); }
.righe-totale strong { font-size: 1.15rem; color: var(--accent-scuro); }

/* ── I modelli di nota ─────────────────────────────────────────────────────── */
/* Due bottoni piccoli sotto la nota, e l'elenco che scende da lì: la nota
   resta la protagonista del campo, i modelli sono un aiuto — se pesassero
   quanto lei si leggerebbe peggio il campo che conta. */

.modelli { position: relative; display: flex; gap: 6px; flex-wrap: wrap; }

.modelli-bottone {
  appearance: none;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--card);
  color: var(--muted);
  font: inherit;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 4px 11px;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.modelli-bottone:hover:not(:disabled),
.modelli-bottone:focus-visible {
  color: var(--accent-scuro);
  border-color: var(--accent);
  background: var(--accent-soft);
  outline: none;
}

.modelli-bottone:disabled { opacity: 0.5; cursor: not-allowed; }

.modelli-elenco {
  position: absolute;
  top: calc(100% + 5px);
  left: 0;
  z-index: 30;
  width: min(420px, 100%);
  max-height: 260px;
  overflow-y: auto;
  display: grid;
  gap: 2px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--card);
  box-shadow: 0 18px 38px rgba(15, 23, 42, 0.16);
}

.modelli-voce { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4px; }

.modelli-usa {
  display: grid;
  gap: 1px;
  text-align: left;
  border: none;
  background: none;
  border-radius: 8px;
  padding: 7px 9px;
  cursor: pointer;
  font: inherit;
  min-width: 0;
}

.modelli-usa:hover, .modelli-usa:focus-visible { background: var(--paper); outline: none; }
.modelli-usa strong { font-size: 0.84rem; }
.modelli-usa small { color: var(--muted); font-size: 0.75rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.modelli-togli {
  border: none;
  background: none;
  color: var(--muted);
  font-size: 0.9rem;
  padding: 6px 8px;
  border-radius: 8px;
  cursor: pointer;
}

.modelli-togli:hover, .modelli-togli:focus-visible { color: var(--errore); background: var(--paper); outline: none; }

.modelli-vuoto { margin: 0; padding: 10px 9px; color: var(--muted); font-size: 0.78rem; }

/* ── Gli ordini che un documento di carico evade ───────────────────────────── */
/* Una tendina teneva un ordine solo, e un pacco ne porta spesso tre: qui sono
   caselle da spuntare, con l'elenco che scorre quando gli ordini aperti sono
   tanti invece di allungare la scheda fino a nascondere le righe. */

.ordini-scelta {
  display: grid;
  gap: 2px;
  max-height: 190px;
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--card);
  padding: 6px;
}

.ordine-voce {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 9px;
  padding: 7px 8px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.88rem;
}

.ordine-voce:hover { background: var(--paper); }
.ordine-voce input { width: 16px; height: 16px; accent-color: var(--accent); flex: none; }
.ordine-testo { display: grid; gap: 1px; min-width: 0; }
.ordine-testo strong { font-size: 0.88rem; }
.ordine-testo small { color: var(--muted); font-size: 0.76rem; }

/* Sotto l'ordine spuntato: che cosa resterà da ricevere quando il documento
   sarà salvato, e la domanda che ne segue — lo aspettiamo ancora o no. */
.ordine-blocco { display: grid; gap: 2px; }

.ordine-fine {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 9px;
  margin: 0 8px 6px 34px;
  padding: 8px 10px;
  border: 1px dashed var(--line);
  border-radius: 8px;
  background: var(--paper);
  cursor: pointer;
}

.ordine-fine input { width: 16px; height: 16px; margin-top: 2px; accent-color: var(--accent); flex: none; }
.ordine-fine span { display: grid; gap: 1px; }
.ordine-fine strong { font-size: 0.82rem; }
.ordine-fine small { color: var(--muted); font-size: 0.74rem; }

.ordine-fine--chiude {
  border-style: solid;
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent-soft, var(--paper)) 60%, var(--card));
}

/* Un ordine di un altro fornitore non si spegne di nascosto: resta leggibile,
   e la riga sotto il numero dice perché non si può spuntare. */
.ordine-voce--spenta { opacity: 0.5; cursor: not-allowed; }

.ordini-vuoti {
  margin: 0;
  padding: 12px 8px;
  color: var(--muted);
  font-size: 0.82rem;
}

/* Da quale ordine viene questa riga: si scrive solo quando gli ordini sono più
   d'uno, perché con uno solo lo dice già la testata e sarebbe rumore. */
.riga-provenienza {
  grid-column: 1 / -1;
  margin-top: -2px;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
}

/* Nelle anagrafiche la scheda è un elenco a righe, non a schede affiancate. */
.articolo--riga { align-items: center; }
.articolo-prezzi--destra { margin-left: auto; align-self: center; }

/* Due colonne, non una fila: la casella a sinistra, il testo a destra e la nota
   sotto al testo. In fila la nota si metteva accanto all'etichetta e le spezzava
   il nome su tre righe. */
.campo--interruttore {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 4px 9px;
  font-size: 0.88rem;
}

.campo--interruttore input { width: 16px; height: 16px; accent-color: var(--accent); flex: none; }
.campo-aiuto { color: var(--muted); font-size: 0.76rem; font-weight: 400; }
/* Sotto una casella da spuntare la nota va rientrata come il testo dell'etichetta */
.campo-aiuto--interruttore { grid-column: 2; margin-top: -2px; }

.campo-obbligatorio {
  color: var(--errore);
  text-decoration: none;
  cursor: help;
}

/* Il messaggio di controllo: rosso se è un errore da correggere, azzurro se è
   solo un avviso (un doppione possibile, che si può anche voler tenere). */
.campo-messaggio {
  font-size: 0.76rem;
  font-weight: 400;
  line-height: 1.3;
}
.campo-messaggio--errore { color: var(--errore); }
.campo-messaggio--avviso { color: var(--accent-scuro); }
.campo-messaggio:empty { display: none; }
/* Ha funzionato: verde, come tutto quello che nel programma è andato bene. */
.campo-messaggio--fatto { color: var(--ok); }

/* Il bottone che compila il resto della scheda dalla partita IVA. Sta sotto al
   campo e non accanto: accanto restringerebbe la casella proprio nel campo in
   cui si incolla un numero copiato da una fattura. Piccolo e scarno, perché è
   un aiuto — la scheda si compila lo stesso a mano. */
.campo-azione {
  justify-self: start;
  padding: 3px 9px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--card);
  color: var(--accent-scuro);
  font: inherit;
  font-size: 0.74rem;
  font-weight: 600;
  cursor: pointer;
}
.campo-azione:hover:not(:disabled) { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, transparent); }
.campo-azione:disabled { color: var(--muted); cursor: default; }

/* ── Il conto del prezzo, sotto al campo del prezzo di vendita ──────────────
   Il campo mostra sempre il prezzo a cui si vende: o lo fa il listino, e allora
   è calcolato e non si scrive dentro, o lo si è scritto a mano — e in quel caso
   qui sotto si legge il ricarico che quel prezzo comporta. */
.prezzo-conto {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  margin-top: 2px;
  font-size: 0.76rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.prezzo-conto-riga { margin: 0; line-height: 1.35; }
/* Il numero che si sta guardando — il prezzo che fa il listino, o il ricarico
   che si sta usando — non deve avere lo stesso peso della spiegazione. */
.prezzo-conto-riga--forte { color: var(--ink); font-weight: 600; }
.prezzo-conto-riga--attesa { color: #9a6413; font-weight: 600; }
.prezzo-conto .bottone { margin-top: 2px; }

/* ── Tutti i listini, uno sopra l'altro ─────────────────────────────────────
   Nella scheda dell'articolo, subito sotto il prezzo: che prezzo farebbe ogni
   listino su questo articolo. Non si sceglie niente — il listino è il patto con
   chi compra, e si sceglie sul cliente o sulla commessa — qui si guarda, e la
   distanza fra la prima riga e l'ultima è la forbice dentro cui si tratta. */
.listini-tutti {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--paper);
  padding: 10px 12px;
}

.listini-tutti-testa {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 6px;
}

.listini-tutti-testa strong { font-size: 0.82rem; }
.listini-tutti-testa small { font-size: 0.76rem; color: var(--muted); font-variant-numeric: tabular-nums; }

.listino-riga {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) 96px 150px minmax(0, 0.9fr);
  gap: 10px;
  align-items: baseline;
  padding: 7px 0;
  border-top: 1px solid var(--line);
  font-variant-numeric: tabular-nums;
}

.listino-riga-nome strong { font-size: 0.88rem; }

/* Chi fa il prezzo quando non lo scrivi tu. Piccolo: è un'etichetta, non una
   colonna. */
.listino-riga-segno {
  font-style: normal;
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--accent-scuro);
  background: var(--accent-soft);
  border-radius: 6px;
  padding: 1px 6px;
  margin-left: 6px;
  white-space: nowrap;
}

/* Togliere un legame vecchio: piccolo e accanto al segno, perché è un gesto
   raro — e chi non ce l'ha, quel legame, non deve nemmeno vederlo. */
.listino-riga-stacca {
  border: none;
  background: none;
  padding: 0;
  margin-left: 8px;
  font: inherit;
  font-size: 0.72rem;
  color: var(--accent-scuro);
  text-decoration: underline;
  cursor: pointer;
}

.listino-riga-stacca:hover { color: var(--errore); }
.listini-tutti-piede--attesa { color: #9a6413; font-weight: 600; }

.listino-riga-ricarico { text-align: right; font-size: 0.82rem; color: var(--muted); white-space: nowrap; }
.listino-riga-prezzo { text-align: right; font-size: 0.95rem; font-weight: 700; color: var(--ink); white-space: nowrap; }
.listino-riga-nota { font-size: 0.76rem; color: var(--muted); }
/* Vendere sotto a un listino non è un errore — si tratta, e capita — ma non
   deve passare inosservato. */
.listino-riga-nota--sotto { color: #a06a00; font-weight: 600; }

.listini-tutti-piede { margin: 8px 0 0; font-size: 0.76rem; color: var(--muted); }

@media (max-width: 720px) {
  /* Stretti, il nome prende la riga sua e i numeri gli stanno sotto: quattro
     colonne su un telefono diventano quattro colonne illeggibili. */
  .listino-riga { grid-template-columns: minmax(0, 1fr) auto auto; }
  .listino-riga-nome { grid-column: 1 / -1; }
  .listino-riga-nota { grid-column: 1 / -1; }
}

/* Un campo che mostra un conto invece di un dato scritto: si vede che è un
   risultato, non un posto dove battere. */
.campo--calcolato input {
  background: var(--accent-soft);
  border-style: dashed;
  color: var(--ink);
  font-weight: 600;
  cursor: default;
}

.campo--errato input,
.campo--errato select,
.campo--errato textarea {
  border-color: var(--errore);
  background: color-mix(in srgb, var(--errore-soft) 40%, var(--card));
}

/* ── Blocco in fondo alla scheda (le varianti di un articolo) ──────────────── */

.scheda-extra { margin-top: 22px; }

.nota-blocco {
  margin: 0;
  padding: 12px 14px;
  border: 1px dashed var(--line);
  border-radius: 10px;
  background: var(--paper);
  font-size: 0.84rem;
  color: var(--muted);
}

.varianti-elenco {
  display: grid;
  gap: 6px;
  margin-bottom: 14px;
  font-size: 0.86rem;
  color: var(--muted);
}

.varianti-riga {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 10px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--card);
}
.varianti-riga strong { color: var(--ink); font-variant-numeric: tabular-nums; }
.varianti-riga small { margin-left: auto; font-size: 0.78rem; }

.varianti-forma {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.varianti-forma .campo { flex: 1 1 auto; }
.varianti-forma .bottone { margin-top: 22px; white-space: nowrap; }

/* ── Assi di variante ──────────────────────────────────────────────────────── */

.assi { display: grid; gap: 14px; }

.asse {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 16px 18px;
}

.asse-testa {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin-bottom: 12px;
}
.asse-codice { font-size: 1rem; letter-spacing: 0.02em; }
.asse-descrizione { color: var(--muted); margin-left: 8px; }
.asse-conto { color: var(--muted); font-size: 0.8rem; }
.asse-azioni { margin-left: auto; display: flex; gap: 6px; }

.valori { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }

.valore {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  padding: 5px 6px 5px 11px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper);
  font-size: 0.84rem;
}
.valore strong { font-variant-numeric: tabular-nums; }
.valore span { color: var(--muted); }

.valore-via {
  border: 0;
  background: none;
  color: var(--muted);
  cursor: pointer;
  font-size: 0.8rem;
  padding: 0 4px;
  border-radius: 999px;
}
.valore-via:hover:not(:disabled) { color: var(--errore); background: var(--errore-soft); }
.valore-via:disabled { opacity: 0.25; cursor: not-allowed; }

.valore-forma { display: flex; flex-wrap: wrap; gap: 8px; }
.valore-forma input {
  font: inherit;
  font-size: 0.88rem;
  padding: 8px 11px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--card);
}
.valore-forma input:first-child { width: 150px; }
.valore-forma input:nth-child(2) { flex: 1 1 200px; }

/* ── Scelta degli assi nella scheda articolo ───────────────────────────────── */

.assi-scelta { display: grid; gap: 8px; margin-bottom: 12px; }

.assi-conto {
  margin: 0 0 12px;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--accent-scuro);
}
/* Oltre il centinaio di combinazioni il numero deve mettere in guardia: è lì che
   una configurazione ragionevole diventa un'anagrafica ingovernabile. */
.assi-conto--attenzione { color: #9a6413; }

/* ── Editor della distinta base ────────────────────────────────────────────── */

.distinta-righe { display: grid; gap: 8px; margin-bottom: 12px; }

/* Le stesse colonne della riga, con i nomi sopra */
.distinta-testa {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) 88px 84px 30px;
  gap: 8px;
  padding: 0 10px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
}
.distinta-testa span:nth-child(1) { text-align: center; }
.distinta-testa span:nth-child(3) { text-align: right; }
.distinta-testa span[title] { cursor: help; }

/* La riga sta su due livelli: sopra i dati brevi (numero, tipo, quantità, unità),
   sotto il componente o l'asse con le sue regole, larghi quanto la riga. Su una
   sola fila, in un pannello da mezzo schermo, le tendine si tagliavano a metà
   parola: "SEM-ANE…" non dice quale semilavorato è. */
.distinta-riga {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) 88px 84px 30px;
  grid-template-areas:
    "numero tipo quantita unita via"
    "centro centro centro centro centro";
  align-items: center;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--card);
}

.distinta-numero { grid-area: numero; }
.distinta-tipo { grid-area: tipo; }
.distinta-quantita { grid-area: quantita; }
.distinta-unita { grid-area: unita; }
.distinta-via { grid-area: via; }
.distinta-centro { grid-area: centro; }

.distinta-riga input,
.distinta-riga select {
  font: inherit;
  font-size: 0.84rem;
  width: 100%;
  padding: 7px 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--card);
  color: var(--ink);
}

.distinta-numero { text-align: center; font-variant-numeric: tabular-nums; }
.distinta-quantita { text-align: right; font-variant-numeric: tabular-nums; }
.distinta-centro { display: grid; gap: 7px; min-width: 0; }

.distinta-regole {
  display: grid;
  /* Una regola per riga quando lo spazio è quello di un pannello: il nome del
     componente deve leggersi tutto, altrimenti "SEM-ANE…" non dice quale
     semilavorato è. */
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 6px;
  padding: 8px;
  border-radius: 8px;
  background: var(--paper);
}
.distinta-regola { display: flex; align-items: center; gap: 6px; font-size: 0.8rem; min-width: 0; }
.distinta-regola select { min-width: 0; }
.distinta-regola span { color: var(--muted); white-space: nowrap; }

.distinta-via {
  border: 0;
  background: none;
  color: var(--muted);
  cursor: pointer;
  padding: 7px 0;
  border-radius: 8px;
}
.distinta-via:hover { color: var(--errore); background: var(--errore-soft); }

.distinta-piede {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 8px;
}

.distinta-lettura {
  display: grid;
  gap: 4px;
  margin-top: 10px;
  padding: 12px 14px;
  border-radius: 10px;
  background: var(--paper);
  font-size: 0.84rem;
  color: var(--muted);
}
.distinta-lettura-riga { font-variant-numeric: tabular-nums; }

/* ── L'albero della distinta, aperto su tutti i livelli ────────────────────── */

.albero {
  display: grid;
  gap: 2px;
  margin-top: 10px;
  padding: 12px 14px;
  border-radius: 10px;
  background: var(--paper);
  font-size: 0.84rem;
}

.albero-riga {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 3px 0;
}
.albero-riga strong { font-variant-numeric: tabular-nums; }
.albero-descrizione { color: var(--muted); margin-left: 8px; }
.albero-quantita { margin-left: auto; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.albero-riga--ramo em { color: var(--accent-scuro); font-style: normal; font-weight: 600; }
.albero-anello { color: var(--errore); font-size: 0.8rem; }

/* ── Il costo che viene dalla composizione ──────────────────────────────────────── */

.costo-righe { display: grid; gap: 4px; margin-bottom: 12px; }

.costo-riga {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 6px 10px;
  border-radius: 8px;
  background: var(--paper);
  font-size: 0.85rem;
}
.costo-riga--incompleta { background: #fdf3e3; }
.costo-conto { color: var(--muted); margin-left: auto; font-variant-numeric: tabular-nums; white-space: nowrap; }
.costo-valore { min-width: 92px; text-align: right; font-variant-numeric: tabular-nums; }
.costo-manca { display: block; padding: 0 10px 6px; color: #9a6413; font-size: 0.78rem; }

.costo-totale {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 10px;
  background: var(--accent-soft);
  color: var(--accent-scuro);
  font-size: 0.95rem;
}
.costo-totale strong { font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.costo-totale--parziale { background: #fdf3e3; color: #9a6413; }

.costo-margine {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 8px;
  margin-top: 10px;
}
.costo-voce {
  display: grid;
  gap: 2px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--card);
}
.costo-voce span { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); }
.costo-voce strong { font-size: 1rem; font-variant-numeric: tabular-nums; }

/* Quando è stata creata o aggiornata la scheda: piccolo, in fondo, ma c'è */
.scheda-tracciato {
  margin: 18px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  font-size: 0.78rem;
  color: var(--muted);
}

.tag--buono { background: color-mix(in srgb, var(--ok) 12%, transparent); color: var(--ok); }
.tag--attesa { background: #fdf3e3; color: #9a6413; }

@media (max-width: 720px) {
  .riga-ordine { grid-template-columns: 1fr 1fr; }
  .riga-ordine .riga-articolo,
  .riga-ordine .riga-descrizione { grid-column: 1 / -1; }
  .riga-togli { grid-column: 2; justify-self: end; }
}

/* ── Magazzino ─────────────────────────────────────────────────────────────── */

.pagina-azioni { display: flex; gap: 10px; flex-wrap: wrap; }

.linguette {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--line);
}

.linguetta {
  font: inherit;
  font-weight: 600;
  font-size: 0.9rem;
  padding: 9px 16px;
  border: none;
  border-bottom: 2px solid transparent;
  background: none;
  color: var(--muted);
  cursor: pointer;
  margin-bottom: -1px;
}

.linguetta--attiva { color: var(--accent); border-bottom-color: var(--accent); }

.elenco--unaColonna { grid-template-columns: 1fr; }

.giacenza-luoghi {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin-top: 4px;
}

.giacenza-luogo {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  font-size: 0.82rem;
  color: var(--muted);
}

.giacenza-luogo b { color: var(--ink); font-weight: 600; }
.giacenza-luogo em { font-style: normal; }
/* Quanta di quella merce è già promessa: un impegno morde in un magazzino
   solo, e la riga lo dice senza dover filtrare la pagina. */
.giacenza-luogo-impegno {
  font-style: normal;
  font-weight: 600;
  color: #9a6413;
  margin-left: 2px;
}

/* Il materiale fuori casa è l'informazione da notare per prima. */
.giacenza-luogo--fuori b { color: var(--accent-scuro); }
.giacenza-luogo--fuori em::before { content: "↗ "; }

/* Articolo a zero: non ha ubicazioni da elencare, e lo si dice invece di
   lasciare la riga a metà. */
.giacenza-luogo--vuoto { font-style: italic; opacity: 0.75; }

/* Servono a battere .articolo-prezzi strong, che e' piu' specifico di una
   classe sola e altrimenti colorerebbe tutto di azzurro. */
.articolo-prezzi strong.valore-entrata { color: var(--ok); }
.articolo-prezzi strong.valore-uscita { color: var(--muted); }
.articolo-prezzi strong.valore-allerta,
.valore-allerta { color: var(--errore); }

/* La riga di magazzino occupa tutta la larghezza disponibile: il testo a
   sinistra si allarga fino a spingere i quattro numeri contro il bordo destro.
   Senza questo il corpo si stringe sul proprio contenuto e i numeri restano
   appiccicati alla descrizione, con mezzo schermo bianco dopo — e per leggere
   la giacenza di due articoli diversi bisogna cercarla in due punti diversi. */
.giacenza .articolo-corpo { flex: 1 1 auto; }

.movimento .riga-togli { align-self: center; }

/* ── Lo storico dei movimenti ─────────────────────────────────────────────────
   Una riga per movimento, a colonne fisse, nell'ordine in cui lo si legge:
   numero, tipo, data, ubicazione, articolo, quantità, valore. A schede libere
   ogni riga metteva le stesse informazioni in un posto diverso e per confrontare
   due movimenti bisognava rileggerli tutti e due da capo. */
.movimento-riga {
  display: grid;
  grid-template-columns:
    62px 104px 92px minmax(110px, 1fr) minmax(180px, 2fr) 120px 118px 30px;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
}

.movimenti-intestazione {
  background: none;
  border: none;
  border-radius: 0;
  box-shadow: none;
  cursor: default;
  padding-bottom: 0;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
}

.movimenti-intestazione:hover { border: none; box-shadow: none; }

/* Il numero del movimento: si legge in colonna, quindi cifre della stessa
   larghezza, o le unità non stanno una sopra l'altra. */
.movimento-progressivo {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: 0.82rem;
  color: var(--muted);
}

.movimento-data { font-size: 0.82rem; color: var(--muted); font-variant-numeric: tabular-nums; }

.movimento-ubicazione {
  font-size: 0.84rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.movimento-ubicazione--fuori { color: var(--accent-scuro); }
.movimento-ubicazione--fuori::before { content: "↗ "; }

.movimento-articolo { min-width: 0; display: grid; gap: 2px; }
.movimento-articolo small,
.movimento-nota {
  font-size: 0.78rem;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.movimento-nota { font-style: italic; }

.movimento-quantita,
.movimento-valore {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-size: 0.88rem;
}

.movimento-quantita.valore-entrata { color: var(--ok); }
.movimento-quantita.valore-uscita { color: var(--muted); }

.movimento-valore { color: var(--ink); }

/* Il valore che non viene dal movimento ma dal costo medio dell'articolo si
   vede che è una stima: tratteggiato sotto, spiegato passandoci sopra. */
.movimento-valore--stimato {
  color: var(--muted);
  text-decoration: underline dotted;
  text-underline-offset: 3px;
  cursor: help;
}

.movimento-valore--ignoto { color: var(--line); font-weight: 400; }

/* Sotto i 1000 px le colonne non ci stanno più: la riga torna a due colonne,
   l'intestazione sparisce perché non avrebbe più niente da intestare. */
@media (max-width: 1000px) {
  .movimenti-intestazione { display: none; }
  .movimento-riga {
    grid-template-columns: 1fr auto;
    row-gap: 4px;
  }
  .movimento-articolo { grid-column: 1 / -1; }
  .movimento-quantita, .movimento-valore { text-align: left; }
  .movimento .riga-togli { grid-column: 2; justify-self: end; }
}

/* ── Campi dentro una tabella ─────────────────────────────────────────────────
   Il fabbisogno e il carico si compilano riga per riga, dentro la tabella: le
   quantità proposte sono numeri da correggere, non da rileggere altrove. */
.campo-in-tabella {
  font: inherit;
  font-size: 0.88rem;
  width: 100%;
  min-width: 84px;
  padding: 5px 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--card);
  color: inherit;
  text-align: inherit;
}
.tabella--destra .campo-in-tabella { text-align: right; }
.campo-in-tabella:focus { outline: 2px solid var(--accent); outline-offset: 1px; }

/* Dentro un pannello la tabella non può pretendere i 1020px dell'elenco: qui le
   colonne si compilano, e un campo che si raggiunge solo scorrendo di lato non
   lo compila nessuno. */
.tabella--compatta { min-width: 0; font-size: 0.85rem; }
.tabella--compatta th,
.tabella--compatta td { padding: 8px 8px; vertical-align: top; }
.tabella--compatta .campo-in-tabella { min-width: 68px; }

/* La nota che avvisa di un calcolo incompleto: si deve leggere prima della
   tabella, non dopo aver mandato l'ordine al fornitore. */
.nota-blocco--attesa {
  border-left: 3px solid var(--attesa, #b8860b);
  padding-left: 12px;
}
.nota-blocco--attesa ul { margin: 6px 0 0; padding-left: 18px; }
.nota-blocco--attesa li { margin: 2px 0; }

.varianti-riga--link { text-decoration: none; color: inherit; }
.varianti-riga--link:hover { background: var(--hover, rgba(0,0,0,0.03)); }

.riga-unita { align-self: center; font-size: 0.85rem; color: var(--muted); white-space: nowrap; }

/* ── Dialogo ─────────────────────────────────────────────────────────────────
   Una domanda breve fatta sopra a quello che si sta facendo — creare l'articolo
   che sta arrivando col DDT — senza perdere il documento a metà. Sta sopra al
   pannello laterale, perché nasce da lì. */
.dialogo-sfondo {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(16, 44, 61, 0.45);
}

.dialogo {
  width: min(620px, 100%);
  max-height: 90vh;
  overflow-y: auto;
  background: var(--card);
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 18px 50px rgba(16, 44, 61, 0.25);
}

.dialogo h2 { margin: 0 0 4px; }
.dialogo-nota { margin: 0 0 18px; color: var(--muted); font-size: 0.88rem; }
.dialogo-errore { margin: 10px 0 0; }
.dialogo-piede { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; }

/* ── Configuratore ───────────────────────────────────────────────────────────
   Due colonne: a sinistra quello che si può usare, a destra il gioiello che si
   sta componendo col conto che si muove a ogni tasto. Su telefono si impilano,
   perché scegliere e comporre sono due gesti in fila. */
.configuratore {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 20px;
  align-items: start;
}

.conf-colonna {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 20px;
  min-width: 0;
}

.conf-colonna h2 { margin: 0 0 14px; }

.conf-filtri { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0; }

.conf-filtro {
  font: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--muted);
  cursor: pointer;
}
.conf-filtro:hover { border-color: var(--accent); color: var(--accent); }
.conf-filtro--attivo { background: var(--accent-soft); border-color: var(--accent-soft); color: var(--accent); }

/* L'elenco scorre dentro il suo riquadro: la colonna di destra deve restare
   ferma sotto gli occhi mentre si cercano gli ingredienti. */
.conf-disponibili {
  display: grid;
  gap: 6px;
  max-height: 58vh;
  overflow-y: auto;
  padding-right: 4px;
}

.conf-elemento {
  display: grid;
  gap: 2px;
  text-align: left;
  font: inherit;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--card);
  color: inherit;
  cursor: pointer;
}
.conf-elemento:hover { border-color: var(--accent); background: var(--accent-soft); }
.conf-elemento--dentro { opacity: 0.45; cursor: default; }
.conf-elemento--dentro:hover { border-color: var(--line); background: var(--card); }

.conf-elemento-testa { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.conf-elemento-desc { color: var(--muted); }
.conf-elemento-costo { color: var(--accent); font-weight: 600; }
.conf-elemento-costo--incerto { color: var(--muted); font-weight: 400; }

.conf-composizione { display: grid; gap: 8px; }

.conf-riga {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 130px 120px 110px 32px;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
}

.conf-riga-nome { display: grid; min-width: 0; }
.conf-riga-nome small { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.conf-riga-quanti { display: grid; gap: 3px; }
.conf-riga-quanti span { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); }
.conf-riga-quanti input {
  font: inherit;
  width: 100%;
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--card);
  text-align: right;
}
.conf-riga-quanti input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }

.conf-riga-unitario { font-size: 0.82rem; color: var(--muted); text-align: right; }
.conf-riga-totale { font-weight: 700; text-align: right; }
.conf-riga-totale--vuoto { color: var(--muted); font-weight: 400; }

.conf-conto { margin-top: 18px; display: grid; gap: 14px; }

.conf-conto-griglia {
  display: grid;
  gap: 2px;
  padding: 14px 16px;
  border-radius: 14px;
  background: var(--paper);
}

.conf-conto-voce { display: flex; justify-content: space-between; gap: 16px; font-size: 0.88rem; color: var(--muted); }
.conf-conto-voce--forte { font-size: 1.05rem; color: var(--ink); margin-bottom: 6px; }
.conf-conto-voce--forte strong { font-size: 1.25rem; color: var(--accent); }

.conf-prezzo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.conf-margine { display: grid; gap: 2px; align-content: center; padding-top: 22px; }
.conf-margine small { color: var(--muted); }
.conf-margine--rosso strong { color: var(--errore); }

.conf-salva { margin-top: 20px; border-top: 1px solid var(--line); padding-top: 18px; }
.conf-salva-piede { display: flex; justify-content: flex-end; margin-top: 16px; }

.conf-fatto {
  padding: 16px 18px;
  border-radius: 14px;
  background: var(--accent-soft);
  display: grid;
  gap: 8px;
}
.conf-fatto p { margin: 0; font-size: 0.9rem; color: var(--ink); }
.conf-fatto-azioni { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 4px; }

.pagina-testa-azioni { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }

@media (max-width: 900px) {
  .configuratore { grid-template-columns: 1fr; }
  .conf-riga { grid-template-columns: minmax(0, 1fr) 100px 32px; row-gap: 6px; }
  .conf-riga-unitario, .conf-riga-totale { text-align: left; grid-column: 1 / -1; }
  .conf-prezzo { grid-template-columns: 1fr; }
  .conf-margine { padding-top: 0; }
}

/* I materiali veri di un gioiello che contiene semilavorati: quello che si
   comprerà, non quello che si è scelto a mano. */
.conf-esplosione-box { display: grid; gap: 10px; margin-top: 4px; }
.conf-nota { margin: 0; font-size: 0.84rem; color: var(--muted); }
.conf-esplosione {
  display: grid;
  gap: 4px;
  padding: 12px 14px;
  border: 1px dashed var(--line);
  border-radius: 12px;
}
.conf-esplosione-riga { display: flex; justify-content: space-between; gap: 14px; font-size: 0.88rem; }
.conf-esplosione-riga small { color: var(--muted); }
.conf-esplosione-quanto { white-space: nowrap; }

/* Nella finestra le tabelle dei blocchi non hanno bisogno di scorrere di lato. */
.pannello .tabella--compatta { font-size: 0.88rem; }


/* Il dialogo con cui si sceglie un articolo cercandolo. */
.dialogo--scelta { width: min(760px, 100%); display: grid; gap: 12px; }
.dialogo--scelta h2 { margin: 0; }
.scelta-filtri { display: flex; flex-wrap: wrap; gap: 6px; }
.scelta-elenco {
  display: grid;
  gap: 6px;
  max-height: 52vh;
  overflow-y: auto;
  padding-right: 4px;
}

/* ── Varianti: i tre passi ───────────────────────────────────────────────────
   Scegliere da che cosa dipendono, vedere quali nascono, generarle. */
.varianti-blocco { display: grid; gap: 6px; }

.varianti-invito {
  display: grid;
  gap: 10px;
  justify-items: start;
  padding: 18px 20px;
  border: 1px dashed var(--line);
  border-radius: 14px;
  background: var(--paper);
}
.varianti-invito p { margin: 0; color: var(--muted); max-width: 70ch; font-size: 0.92rem; }

.assi-griglia {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
  margin: 12px 0 4px;
}

/* Un asse è una scheda che si accende, non una casella da spuntare: si vede da
   lontano quali sono in gioco e quali valori porta ognuno. */
.asse-scheda {
  display: grid;
  gap: 6px;
  align-content: start;
  text-align: left;
  font: inherit;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--card);
  color: inherit;
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s;
}
.asse-scheda:hover { border-color: var(--accent); }
.asse-scheda--acceso { border-color: var(--accent); background: var(--accent-soft); }
.asse-scheda:disabled { opacity: 0.6; cursor: progress; }

.asse-scheda-testa { display: flex; align-items: center; gap: 8px; }
.asse-spunta {
  flex: none;
  width: 20px; height: 20px;
  display: grid; place-items: center;
  border: 1.5px solid var(--line);
  border-radius: 6px;
  background: var(--card);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 700;
}
.asse-scheda--acceso .asse-spunta { background: var(--accent); border-color: var(--accent); }
.asse-scheda-codice { color: var(--muted); font-size: 0.74rem; letter-spacing: 0.06em; }
.asse-valori { display: flex; flex-wrap: wrap; gap: 4px; }
.asse-valore {
  font-size: 0.74rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--paper);
  color: var(--accent-scuro);
}
.asse-scheda--acceso .asse-valore { background: var(--card); }
.asse-vuoto { color: var(--errore); font-size: 0.76rem; }

.asse-scheda--nuovo {
  border-style: dashed;
  align-content: center;
  justify-items: start;
  color: var(--accent);
}
.asse-scheda--nuovo small { color: var(--muted); }

.varianti-conto { margin: 10px 0 6px; font-weight: 600; color: var(--accent-scuro); }
.varianti-conto--attenzione { color: var(--errore); }

.varianti-esempi { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.variante-esempio {
  display: grid;
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--card);
}
.variante-esempio strong { font-size: 0.86rem; }
.variante-esempio small { color: var(--muted); font-size: 0.74rem; }
.variante-esempio--altro { align-content: center; color: var(--muted); font-size: 0.82rem; border-style: dashed; }

.bottone--grande { padding: 12px 24px; font-size: 0.95rem; }
.bottone--piccolo { padding: 4px 12px; font-size: 0.8rem; }

/* ── La composizione ──────────────────────────────────────────────────────────────
   Ogni ingrediente è una scheda: che cosa, quanto, e se cambia con la variante.
   Prima era una riga di tabella con dentro sei controlli in fila, che per
   leggerla bisognava sapere già com'era fatta. */
.composizione { display: grid; gap: 14px; }
.composizione-righe { display: grid; gap: 10px; }

.composizione-riga {
  display: grid;
  gap: 10px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--card);
}

.composizione-riga-testa { display: flex; align-items: flex-start; gap: 12px; }
.composizione-identita { display: grid; min-width: 0; flex: 1; }
.composizione-identita strong { font-size: 1rem; }
.composizione-identita small { color: var(--muted); }
.composizione-mancante { color: var(--errore); }
.composizione-azioni { display: flex; align-items: center; gap: 8px; flex: none; }

.composizione-via {
  border: none;
  background: none;
  color: var(--muted);
  font-size: 0.95rem;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 8px;
}
.composizione-via:hover { color: var(--errore); background: var(--errore-soft); }

.composizione-quanto {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--paper);
}
.composizione-etichetta {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
}
.composizione-campo-quantita { display: flex; gap: 6px; }
.composizione-campo-quantita input {
  font: inherit;
  width: 110px;
  text-align: right;
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--card);
}
.composizione-campo-quantita select {
  font: inherit;
  font-size: 0.88rem;
  padding: 7px 8px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--card);
}
.composizione-costo-riga { margin-left: auto; font-size: 1rem; color: var(--accent-scuro); }
.composizione-costo-riga--vuoto { color: var(--muted); font-weight: 400; }

.composizione-interruttore { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 0.9rem; }
.composizione-interruttore input { width: 17px; height: 17px; }
.composizione-interruttore .campo-aiuto { flex-basis: 100%; margin: 0; }

.composizione-rami {
  display: grid;
  gap: 6px;
  padding: 12px 14px;
  border-left: 3px solid var(--accent);
  border-radius: 0 10px 10px 0;
  background: var(--accent-soft);
}
.composizione-asse { display: flex; align-items: center; gap: 10px; }
.composizione-asse select {
  font: inherit;
  font-size: 0.9rem;
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--card);
}
.composizione-ramo { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.composizione-ramo-valore { font-weight: 700; min-width: 90px; }
.composizione-ramo-freccia { color: var(--muted); }
.composizione-ramo-componente { flex: 1; min-width: 140px; font-size: 0.9rem; }

.composizione-formula { display: grid; gap: 6px; }
.composizione-formula input {
  font: inherit;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--card);
}

.composizione-vuota {
  display: grid;
  gap: 6px;
  padding: 22px;
  text-align: center;
  border: 1px dashed var(--line);
  border-radius: 14px;
  background: var(--paper);
}
.composizione-vuota p { margin: 0; color: var(--muted); font-size: 0.9rem; }

.composizione-piede { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.composizione-totale { margin: 0 0 0 auto; font-weight: 700; color: var(--accent-scuro); }
.composizione-totale--parziale { color: var(--muted); font-weight: 600; }

.composizione-lettura { display: grid; gap: 6px; margin-top: 10px; }
.composizione-lettura-riga {
  display: grid;
  grid-template-columns: 160px 120px 1fr;
  gap: 10px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  align-items: center;
}
.composizione-lettura-riga small { color: var(--muted); }

/* Un «sotto» può contenere due righe di classificazione: vanno a capo dove è
   scritto, non dove capita. */
.tabella-sotto { white-space: pre-line; }

/* Il riquadro che racconta l'eredità delle varianti, nel configuratore. */
.eredita-box {
  display: grid;
  gap: 8px;
  padding: 14px 16px;
  border-left: 3px solid var(--accent);
  border-radius: 0 12px 12px 0;
  background: var(--accent-soft);
}
.eredita-box p { margin: 0; font-size: 0.88rem; color: var(--ink); }
.eredita-box .campo--interruttore { margin-top: 2px; }

/* Il costo di ogni variante che nascerà, dentro il riquadro dell'eredità. */
.eredita-tabella { background: var(--card); border-radius: 10px; overflow: hidden; }
.eredita-tabella th,
.eredita-tabella td { padding: 6px 10px; font-size: 0.85rem; }
.eredita-tabella-nome { color: var(--muted); }
.eredita-margine--rosso { color: var(--errore); font-weight: 600; }
.eredita-altro,
.eredita-nota { font-size: 0.82rem; color: var(--muted); }

/* ── Il campo che si cerca ─────────────────────────────────────────────────── */

/* Prende il posto della tendina dove l'elenco è lungo: gli articoli. La casella
   si veste come le altre della pagina (la regolano .campo input e .riga-ordine
   input); qui c'è solo quello che la tendina non ha. */

.selettore { position: relative; min-width: 0; }

/* L'elenco sta appeso alla pagina, non alla riga: position: fixed perché i
   riquadri dei documenti tagliano quello che esce dai loro bordi, e l'ultima
   riga di un DDT è proprio sul bordo. Le misure le mette il codice. */
.selettore-lista {
  position: fixed;
  z-index: 90;
  overflow-y: auto;
  padding: 5px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 12px 28px rgba(16, 44, 61, 0.16);
}

/* Quando la ricerca non trova niente ma sa perché: il comune scritto storto.
   Sta dentro la tendina, dove si stava già guardando. */
.selettore-nota {
  margin: 0;
  padding: 12px 14px;
  font-size: 0.84rem;
  color: var(--muted);
  line-height: 1.4;
}

.selettore-voce {
  display: grid;
  gap: 1px;
  width: 100%;
  text-align: left;
  font: inherit;
  padding: 7px 9px;
  border: none;
  border-radius: 7px;
  background: none;
  color: var(--ink);
  cursor: pointer;
}

.selettore-voce strong { font-size: 0.86rem; }

.selettore-voce small {
  font-size: 0.78rem;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Quella sotto il cursore dei tasti e quella sotto il mouse si vedono uguali:
   chi sceglie col tasto invio deve riconoscere la stessa riga che cliccherebbe. */
.selettore-voce:hover,
.selettore-voce--attiva { background: var(--accent-soft); }

.selettore-voce--scelta strong { color: var(--accent-scuro); }

/* Un modello a varianti si mostra ma non si sceglie: sparirlo farebbe cercare
   a vuoto un codice che nell'anagrafica esiste. */
.selettore-voce--spenta { opacity: 0.5; cursor: default; }
.selettore-voce--spenta:hover { background: none; }

/* Un campo che il sistema riempie da se': si legge, non si scrive. Resta chiaro
   che il dato c'e' — spegnerlo del tutto lo farebbe sembrare mancante. */
/* Il punto rifiutato in un campo numerico: dove non c'e' la riga del messaggio
   — dentro le righe di un documento — si fa lampeggiare il campo, che e' dove
   sta guardando l'occhio in quel momento. */
@keyframes punto-rifiutato {
  0%, 100% { border-color: var(--line); }
  30%, 70% { border-color: var(--errore); background: var(--errore-soft); }
}

.campo--punto-rifiutato,
input.campo--punto-rifiutato { animation: punto-rifiutato 0.6s ease; }

.campo input[readonly] {
  background: var(--paper);
  color: var(--muted);
  cursor: default;
}

/* Il campo dell'indirizzo con la ricerca appesa sotto: la lente dice che non e'
   un campo di testo qualunque, e che conviene scrivere invece di incollare. */
.campo--con-ricerca { position: relative; }
.campo--con-ricerca input {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237a8c99' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 16px 16px;
  padding-right: 34px;
}

.selettore-voce--nuovo {
  color: var(--accent-scuro);
  font-weight: 700;
  font-size: 0.84rem;
}

.selettore-vuoto {
  margin: 0;
  padding: 10px 9px;
  font-size: 0.82rem;
  color: var(--muted);
}

/* ── Chiudere il giro: versamento ed evasione ──────────────────────────────── */

.dialogo--largo { width: min(760px, 100%); }
.dialogo-corpo { display: grid; gap: 16px; }

/* Il conto di un ordine: venduto, costo, quello che resta. Tre righe che si
   leggono in fila, con i numeri incolonnati — un margine si guarda insieme ai
   due numeri da cui esce, mai da solo. */
.conto {
  display: grid;
  gap: 3px;
  margin-top: 22px;
  padding: 14px 16px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 12px;
}

.conto-riga {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 14px;
  font-size: 0.9rem;
}

.conto-riga strong { font-variant-numeric: tabular-nums; white-space: nowrap; }
.conto-riga span small { color: var(--muted); }

.conto-riga--totale {
  margin-top: 7px;
  padding-top: 9px;
  border-top: 1px solid var(--line);
  font-size: 1rem;
}

.conto-riga--totale strong { color: var(--ok); font-size: 1.1rem; }
/* Vendere sotto costo capita — un fondo di magazzino, uno sconto di troppo — e
   quando capita si deve vedere subito, non ricavare dal segno meno. */
.conto-riga--perdita strong { color: var(--errore); }

.conto-nota { margin: 8px 0 0; font-size: 0.8rem; color: var(--muted); }

/* Che cosa entrerà e che cosa uscirà, prima di premere. */
.anteprima-titolo {
  margin: 0 0 6px;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
}

.anteprima-manca {
  border-color: color-mix(in srgb, var(--errore) 40%, var(--line));
  background: var(--errore-soft);
}

.anteprima-manca .conf-esplosione-riga strong { color: var(--errore); }

/* La quantità prodotta si corregge riga per riga: quello che esce dal banco non
   è sempre quello che si era ordinato. */
.versamento-riga {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  border-top: 1px solid var(--line);
}

.versamento-riga:first-child { border-top: none; }
.versamento-riga input { width: 110px; text-align: right; font: inherit; padding: 7px 9px;
  border: 1px solid var(--line); border-radius: 8px; background: var(--card); color: var(--ink); }
.versamento-riga small { color: var(--muted); display: block; }

/* Costo e ricarica sotto ogni riga d'ordine: si leggono mentre si sceglie il
   prezzo, e restano piccoli perché a comandare è il campo qui sopra. */
.riga-conto {
  grid-column: 1 / -1;
  margin-top: -2px;
  font-size: 0.76rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.riga-conto--perdita { color: var(--errore); font-weight: 600; }
/* Il prezzo che viene dal listino DEL CLIENTE: si segnala, perché è la cosa che
   lo sposta senza che nessuno abbia toccato l'articolo. */
.riga-conto--cliente { color: var(--accent-scuro); }
/* Un articolo senza prezzo si dice qui, mentre la commessa è ancora un foglio
   bianco: scoprirlo alla vendita vuol dire scoprirlo troppo tardi. */
.riga-conto--manca { color: #a06a00; }

/* Perché un tasto è spento, scritto accanto al tasto. Un bottone grigio senza
   una parola sembra un programma rotto; con la parola è un programma che dice
   come si fa. */
.azioni-perche {
  flex-basis: 100%;
  margin: 2px 0 0;
  font-size: 0.78rem;
  text-align: right;
  color: #9a6413;
}

/* ── I mercati sulla dashboard ──────────────────────────────────────────────
   Tre schede in fila sotto ai tasti: oro, argento, cambio. Angoli molto tondi e
   ombra tenue — si distinguono dai riquadri del menu, che sono bersagli da
   cliccare; queste no, queste si guardano e basta. */
/* Stessa regola dei riquadri: i mercati sono tre e stanno in tre colonne o in
   una sola. Due colonne vorrebbero dire 2 + 1, cioè una riga monca. */
.mercati {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 18px;
}

.mercato {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 24px;
  box-shadow: 0 6px 20px rgba(16, 44, 61, 0.06);
  padding: 20px 22px 14px;
}

.mercato-corpo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.mercato-sinistra { min-width: 0; }

.mercato-testa {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-size: 0.92rem;
  color: var(--muted);
}

.mercato-nome { white-space: nowrap; }

/* La variazione della settimana: verde in salita, arancio in discesa. Sono i
   colori con cui si legge un mercato in qualunque parte del mondo. */
.mercato-variazione {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.mercato-variazione svg { width: 14px; height: 14px; }
.mercato-variazione--su { color: var(--ok); }
.mercato-variazione--giu { color: #d2691e; }

.mercato-valore {
  margin: 6px 0 0;
  font-size: 2.1rem;
  line-height: 1.1;
  font-weight: 700;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.mercato-valore small {
  margin-left: 4px;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--muted);
}

.mercato-valore--manca { color: var(--muted); }

.mercato-sotto {
  margin: 5px 0 0;
  font-size: 0.76rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Il titolo che si lavora davvero — 18 kt, 925 — e il cambio ufficiale: sono i
   due numeri che si copiano su un documento, e si distinguono dalla riga della
   quotazione internazionale, che invece serve solo a parlare col fornitore. */
.mercato-sotto--forte { color: var(--ink); font-weight: 600; }

/* Il grafico prende il colore dalla scheda: la linea e la sfumatura sotto
   dicono «currentColor», così cambiano insieme con un'unica classe. */
.mercato-grafico {
  width: 38%;
  max-width: 150px;
  height: 62px;
  flex: none;
}

.mercato-grafico svg { width: 100%; height: 100%; display: block; }
.mercato-grafico--su { color: var(--ok); }
.mercato-grafico--giu { color: #d2691e; }

.mercato-piede {
  margin: 12px 0 0;
  padding-top: 10px;
  border-top: 1px solid var(--line);
  font-size: 0.72rem;
  color: var(--muted);
}

/* Una fonte che non risponde si dice, con la data del prezzo che si sta
   mostrando: un numero vecchio spacciato per fresco è peggio di nessun numero. */
.mercato-piede--fermo { color: #9a6413; font-weight: 600; }

/* Quando le tre schede si stringono, a cedere è il grafico: è un contorno, dice
   l'andamento e non il prezzo. Sparisce del tutto invece di accartocciarsi in
   60px, e lo spazio va alle righe che contano — il titolo che si lavora e la
   quotazione internazionale, che altrimenti finivano tagliate con i puntini. */
@media (max-width: 1450px) {
  .mercato { padding: 16px 18px 12px; }
  .mercato-valore { font-size: 1.75rem; }
  .mercato-grafico { display: none; }
}

/* Sotto i 700px in tre non ci stanno più: una colonna, che è l'altra
   disposizione piena. */
/* Sotto i 700px in tre non ci stanno più: una colonna, che è l'altra
   disposizione piena. E in tutta la larghezza il grafico ci torna. */
@media (max-width: 700px) {
  .mercati { grid-template-columns: 1fr; }
  .mercato { padding: 18px 20px 12px; }
  .mercato-valore { font-size: 2rem; }
  .mercato-grafico { display: block; width: 38%; max-width: 150px; height: 62px; }
}

@media (max-width: 520px) {
  /* Stretti, il grafico si accontenta: il numero è la cosa che si legge. */
  .mercato-grafico { width: 38%; height: 52px; }
  .mercato-valore { font-size: 1.7rem; }
}

/* Telefoni piccoli: sotto i 370px anche in una colonna il grafico ruba i pochi
   millimetri che servono a «BCE 1,1592 · 11/09/2026» per stare intero. */
@media (max-width: 370px) {
  .mercato-grafico { display: none; }
}

/* ── L'ordine di produzione per il laboratorio ──────────────────────────────
   In cima al passo della produzione, prima delle ore: è il primo dei due gesti
   in ordine di tempo — prima si commissiona, poi si scrivono le ore fatturate.
   Riquadro e non un bottone in mezzo agli altri, perché è una cosa che esce di
   casa e va distinta da tutto quello che resta dentro. */
.ordine-produzione {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 18px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--accent-soft);
}
.ordine-produzione strong { display: block; font-size: 0.98rem; }
.ordine-produzione small { display: block; color: var(--muted); font-size: 0.8rem; max-width: 62ch; }
.ordine-produzione-azioni { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; }
.ordine-produzione-azioni .campo { min-width: 220px; }
.ordine-produzione-azioni select {
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 8px 10px;
  font: inherit;
  background: var(--card);
}

/* Dov'è il lavoro adesso. Sta sotto al foglio da stampare e prende tutta la
   riga: è una frase, non un'etichetta, e va letta per intera. La striscia gialla
   sul fianco è la stessa grammatica dell'avviso delle notifiche — «c'è qualcosa
   che stai aspettando» — e diventa verde quando la cosa è arrivata. */
.lavoro-fuori {
  order: 3;
  flex-basis: 100%;
  margin: 4px 0 0;
  padding: 10px 12px;
  border-radius: 10px;
  border-left: 4px solid #c9971a;
  background: #fdf6e3;
  color: var(--ink);
  font-size: 0.9rem;
}
.lavoro-fuori strong { display: inline; font-size: 0.9rem; }
.lavoro-fuori small { margin-top: 3px; color: var(--muted); }
.lavoro-fuori--tornato { border-left-color: var(--ok); background: #e8f6ee; }

/* L'asterisco dei campi che senza non si va avanti. Piccolo e nel colore
   dell'errore: si nota guardando, non urla. */
.campo-obbligo { color: var(--errore); font-weight: 700; }

/* Il lavoro che si aspetta da un fornitore, dentro il documento di acquisto.
   Non è un campo: è un cartello che dice «attenzione, forse questo DDT non va
   caricato qui», e per questo ha il colore dell'attesa e non quello dei campi. */
.lavori-attesi {
  padding: 10px 12px;
  border-radius: 10px;
  border-left: 4px solid #c9971a;
  background: #fdf6e3;
}
.lavori-attesi-righe { display: flex; flex-direction: column; gap: 6px; margin: 6px 0; }
.lavoro-atteso {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 2px 12px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--card);
  color: var(--ink);
  text-decoration: none;
}
.lavoro-atteso:hover { border-color: var(--accent); }
.lavoro-atteso strong { font-size: 0.9rem; }
.lavoro-atteso small { grid-column: 1; color: var(--muted); font-size: 0.78rem; }
.lavoro-atteso-vai {
  grid-row: 1 / span 2;
  grid-column: 2;
  color: var(--accent);
  font-size: 0.82rem;
  white-space: nowrap;
}

/* Il conto di una commessa non ancora consegnata: un'etichetta e un valore,
   incolonnati come le quattro cifre di quella evasa. Senza l'etichetta, una
   riga col numero e una con una scrittina grigia sembrano una che ha i dati e
   una che li ha persi — mentre sono solo due momenti dello stesso percorso. */
.commessa-attesa { display: grid; gap: 1px; align-content: center; text-align: right; }
.commessa-attesa small {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.commessa-attesa strong { font-size: 1.02rem; color: var(--accent-scuro); white-space: nowrap; }
.commessa-attesa-manca { font-size: 0.86rem !important; color: var(--muted) !important; font-weight: 500; }

/* ── La commessa: quattro passi in fila ────────────────────────────────────── */

/* Nell'elenco ogni commessa mostra i suoi passi: si vede a colpo d'occhio a che
   punto è, e soprattutto che cosa manca per chiuderla. */
.passi-riga {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 8px 0 6px;
}

.passo-chip {
  display: flex;
  align-items: baseline;
  gap: 6px;
  padding: 4px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper);
  font-size: 0.76rem;
}

.passo-chip b {
  display: inline-grid;
  place-items: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--line);
  color: var(--ink);
  font-size: 0.66rem;
}

.passo-chip small { color: var(--muted); }
.passo-chip--saltato { opacity: 0.45; }

/* Il passo su cui si è fermi: è lì che c'è da lavorare. */
.passo-chip--adesso {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.passo-chip--adesso b { background: var(--accent); color: #fff; }

/* Dentro la scheda: i quattro passi come una barra di navigazione. Uno per
   volta aperto — il pannello è alto, e quattro sezioni spalancate insieme
   obbligherebbero a scorrere per capire dove si è. */
.percorso {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin: 0 0 22px;
  padding: 0;
  list-style: none;
}

.percorso-passo {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--card);
  cursor: pointer;
}

.percorso-passo:hover { border-color: var(--accent); }

.percorso-passo b {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  flex: none;
  border-radius: 50%;
  background: var(--paper);
  border: 1px solid var(--line);
  font-size: 0.8rem;
}

.percorso-passo span { display: grid; min-width: 0; }
.percorso-passo strong { font-size: 0.86rem; }
.percorso-passo small {
  font-size: 0.74rem;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.percorso-passo--fatto b { background: var(--ok); border-color: var(--ok); color: #fff; }
.percorso-passo--saltato { opacity: 0.5; }

.percorso-passo--aperto {
  border-color: var(--accent);
  background: var(--accent-soft);
  box-shadow: inset 0 0 0 1px var(--accent);
}

.passo-corpo { display: grid; gap: 4px; }

/* Le azioni di un passo stanno in fondo al passo, non nel piede del pannello:
   il piede è uno solo e i passi sono quattro. */
.passo-azioni {
  display: flex;
  /* A capo, quando serve: sotto ai bottoni può esserci la riga che spiega
     perché uno di loro è spento, e deve stare su una riga sua invece di
     spingere il bottone a spezzarsi in due. */
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.pannello-sottotitolo { margin: 2px 0 0; font-size: 0.84rem; color: var(--muted); }

.bottone--piccolo { padding: 6px 12px; font-size: 0.8rem; }

@media (max-width: 900px) {
  .percorso { grid-template-columns: repeat(2, 1fr); }
}

/* Le ore si scrivono in tre cifre: un campo largo mezza tabella invita a
   scriverci dentro un discorso. */
.campo-in-tabella--stretto { max-width: 110px; }

/* Che cosa c'è dentro una somma: piccolo, ma verificabile a occhio. Un totale
   che non si può ricontrollare è un totale di cui ci si fida una volta sola. */
.conto-dettaglio {
  margin: -1px 0 6px;
  padding-left: 2px;
  font-size: 0.76rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* ── I quattro numeri di una riga di magazzino ─────────────────────────────── */

/* Ordinata, impegnata, giacenza, disponibile: quattro cose diverse in fila,
   nell'ordine in cui si ragiona. L'ultima è quella che decide, e si vede. */
/* Cinque colonne, non quattro: con l'arrivo del valore la griglia era rimasta a
   quattro e il quinto numero andava a capo da solo, raddoppiando l'altezza di
   ogni riga dell'elenco. I numeri di una riga di magazzino si leggono in fila,
   uno accanto all'altro: incolonnati su due file non si confrontano più. */
.giacenza-numeri {
  display: grid;
  /* Il massimo è una misura, non «auto»: con auto la colonna si allarga fino a
     contenere la nota più lunga — «1 ordine al fornitore» — e i puntini di
     accorciamento non entrano mai in funzione. Con un tetto, la nota si taglia
     e la riga resta alta una riga sola. */
  grid-template-columns: repeat(5, minmax(92px, 132px));
  gap: 8px;
  align-items: start;
  flex: none;
}

.giacenza-numero {
  display: grid;
  gap: 1px;
  padding: 6px 10px;
  border-left: 1px solid var(--line);
  text-align: right;
}

/* La riga di spiegazione sotto il numero sta su una riga sola: mandata a capo
   alzerebbe tutta la riga dell'elenco per una parola. Quando non ci sta si
   accorcia con i puntini e resta per intero nel suggerimento del mouse. */
.giacenza-numero i {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.giacenza-numero small {
  font-size: 0.66rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
}

.giacenza-numero b { font-size: 0.95rem; font-variant-numeric: tabular-nums; }
.giacenza-numero i { font-size: 0.7rem; font-style: normal; color: var(--muted); }

.giacenza-numero--vuoto b { color: var(--muted); font-weight: 400; }
.giacenza-numero--arrivo b { color: var(--accent); }
.giacenza-numero--impegno b { color: #9a6413; }

/* Il disponibile è il numero su cui si decide: sta in fondo e pesa di più. */
.giacenza-numero--forte {
  background: var(--paper);
  border-radius: 10px;
  border-left-color: transparent;
}
.giacenza-numero--forte b { font-size: 1.1rem; color: var(--ok); }
.giacenza-numero--allerta b { color: var(--errore); }

/* Su schermo stretto i numeri scendono sotto la descrizione, su una riga
   loro. Serve il «wrap»: senza, restavano nella stessa riga flex con la
   larghezza al 100% — la descrizione schiacciata a zero e i testi uno sopra
   l'altro. E minmax(0, 1fr), non 1fr: con 1fr la colonna non scende sotto la
   nota più lunga, e cinque note in fila sforano il telefono. */
@media (max-width: 900px) {
  .giacenza { flex-wrap: wrap; }
  .giacenza .articolo-corpo { flex: 1 1 100%; }
  .giacenza-numeri { grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; }
  .giacenza-numero { border-left: none; text-align: left; padding: 6px 0; }
}
@media (max-width: 560px) {
  .giacenza-numeri { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ── La home: sei porte ────────────────────────────────────────────────────── */

.home-testa {
  text-align: center;
  margin: 10px 0 24px;
}

.home-testa h1 { margin: 0; }

/* I riquadri sono sei, e sei si divide per sei, per tre e per due: le colonne
   possono essere solo quelle, così l'ultima riga è piena quanto la prima e non
   resta mai un riquadro spaiato in fondo.
   Non si usa auto-fill: lì il numero di colonne lo decide la larghezza
   disponibile, e su uno schermo largo veniva fuori un 4 + 2. */
.scorciatoie {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

/* Un riquadro è un bersaglio grande: si clicca da fermo, col dito, di corsa.
   Verticale e non in riga, perché nome, frase e numero in orizzontale si
   litigano lo spazio e vince il numero — che è la cosa meno importante. */
.scorciatoia {
  display: grid;
  align-content: start;
  gap: 3px;
  padding: 20px 22px 22px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 16px;
  text-decoration: none;
  color: inherit;
  transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
}

.scorciatoia:hover,
.scorciatoia:focus-visible {
  border-color: var(--accent);
  box-shadow: 0 8px 24px rgba(10, 132, 209, 0.13);
  transform: translateY(-2px);
  outline: none;
}

.scorciatoia-testa {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.scorciatoia-icona {
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  flex: none;
  border-radius: 15px;
  background: var(--accent-soft);
  color: var(--accent);
}

.scorciatoia-icona svg { width: 26px; height: 26px; }

.scorciatoia-nome { font-size: 1.06rem; }

/* Che cosa si fa in quella stanza, in una riga: è la differenza fra sapere dove
   si sta andando e doverci entrare per scoprirlo. */
.scorciatoia-frase {
  font-size: 0.84rem;
  color: var(--muted);
  line-height: 1.4;
}

/* Il numero sta in alto a destra, dove si guarda dopo l'icona e prima del
   testo: dice se in quella stanza c'è qualcosa che aspetta. */
.scorciatoia-numero {
  display: grid;
  justify-items: end;
  gap: 0;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  color: var(--accent-scuro);
  text-align: right;
}

.scorciatoia-numero i {
  font-size: 0.64rem;
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Zero non è un errore né un vuoto da nascondere: si legge, ma non chiama. */
.scorciatoia-numero--vuoto { color: var(--muted); font-weight: 600; }

/* La commessa è il lavoro vero della giornata: si nota fra le altre. */
.scorciatoia--principale {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
  background: linear-gradient(180deg, var(--accent-soft), var(--card) 70%);
}

/* Sotto i riquadri, discreto: dice che il servizio risponde e su quale banca
   dati sta scrivendo. Verde quando è tutto a posto, rosso quando non lo è. */
.home-piede {
  margin: 26px 0 0;
  text-align: center;
  font-size: 0.84rem;
  color: var(--muted);
}

/* Schermo largo: tutte e sei le porte in fila, come una pulsantiera. La soglia
   è alta apposta — misurata, non scelta a occhio: sotto i 1860px il riquadro
   scende sotto i 246px e i nomi cominciano ad andare a capo. Meglio tre sopra e
   tre sotto, larghi, che sei riquadri stretti e spezzati. */
@media (min-width: 1860px) {
  .scorciatoie { grid-template-columns: repeat(6, 1fr); }
  .scorciatoia { padding: 18px 18px 20px; }
  .scorciatoia-icona { width: 46px; height: 46px; }
  .scorciatoia-numero { font-size: 1.45rem; }
}

/* Sotto i 700px tre colonne diventano tre colonnine: si passa a due, e le
   righe restano piene lo stesso (2 + 2 + 2). */
@media (max-width: 700px) {
  .scorciatoie { grid-template-columns: repeat(2, 1fr); }
}

/* Sul telefono: due colonne strette invece di sei riquadri in colonna. Prima
   per vedere l'ultima porta bisognava scorrere due schermate; così stanno
   tutte e sei sotto il pollice, e per starci il riquadro si asciuga —
   icona più piccola, numero più piccolo, meno aria dentro. */
@media (max-width: 560px) {
  .scorciatoie { gap: 10px; }
  .scorciatoia { padding: 13px 13px 15px; border-radius: 14px; }
  .scorciatoia-testa { margin-bottom: 8px; gap: 8px; }
  .scorciatoia-icona { width: 38px; height: 38px; border-radius: 11px; }
  .scorciatoia-icona svg { width: 20px; height: 20px; }
  .scorciatoia-numero { font-size: 1.25rem; }
  .scorciatoia-numero i { font-size: 0.56rem; letter-spacing: 0.02em; }
  .scorciatoia-nome { font-size: 0.95rem; line-height: 1.25; }
  .scorciatoia-frase { font-size: 0.74rem; line-height: 1.3; }
  .home-testa { margin: 4px 0 16px; }
}

/* Un numero che lo assegna il sistema si vede che non si scrive: resta
   leggibile, ma non invita a metterci le mani. */
.campo input[readonly] {
  background: var(--paper);
  color: var(--muted);
  cursor: default;
}

/* ── L'elenco degli ordini al fornitore ────────────────────────────────────── */

/* Un ordine per riga: si scorrono cercando un numero, un fornitore o una nota,
   e in colonna l'occhio scende dritto invece di rimbalzare fra tre schede per
   fila. Le colonne stanno sempre nello stesso posto: i numeri restano
   incolonnati e si confrontano a occhio. */
.elenco-ordini { display: grid; gap: 8px; }

.ordine-riga {
  display: grid;
  grid-template-columns: minmax(200px, 1fr) minmax(180px, 1.2fr) minmax(0, 1.6fr) 130px 120px;
  gap: 14px;
  align-items: center;
  padding: 12px 16px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  cursor: pointer;
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}

.ordine-riga:hover,
.ordine-riga:focus-visible {
  border-color: var(--accent);
  box-shadow: 0 4px 14px rgba(10, 132, 209, 0.1);
  outline: none;
}

.ordine-identita { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ordine-identita strong { font-size: 0.95rem; }

.ordine-chi { display: grid; gap: 2px; min-width: 0; }
.ordine-chi strong { font-size: 0.9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ordine-chi small { font-size: 0.76rem; color: var(--muted); }

/* La nota in anteprima: una riga sola, il resto lo dice il titolo al passaggio
   del mouse. Troncata e non a capo, altrimenti una nota lunga sfonda la riga e
   l'elenco smette di essere un elenco. */
.ordine-nota {
  font-size: 0.82rem;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.ordine-nota--vuota { color: var(--line); }

.ordine-conto { display: grid; gap: 2px; font-size: 0.82rem; text-align: right; }
.ordine-conto small { font-size: 0.74rem; color: var(--muted); }
.ordine-manca { color: var(--teal-dark, #9a6413); }

.ordine-valore {
  text-align: right;
  font-weight: 700;
  font-size: 0.98rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

@media (max-width: 1000px) {
  .ordine-riga { grid-template-columns: 1fr 1fr; row-gap: 6px; }
  .ordine-nota { grid-column: 1 / -1; white-space: normal; }
  .ordine-conto, .ordine-valore { text-align: left; }
}

/* ── Gestione tabelle ───────────────────────────────────────────────────────
   Le liste a sinistra, le voci di quella scelta a destra. Su schermo stretto
   una sotto l'altra: sono due cose in fila, non due colonne per forza. */
.tabelle {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 18px;
  align-items: start;
}
@media (max-width: 820px) { .tabelle { grid-template-columns: 1fr; } }

.tabelle-liste {
  display: grid;
  gap: 6px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 8px;
}

.tabella-voce {
  display: grid;
  gap: 1px;
  text-align: left;
  border: none;
  background: none;
  border-radius: 10px;
  padding: 9px 11px;
  cursor: pointer;
  color: inherit;
  font: inherit;
}
.tabella-voce:hover { background: var(--paper); }
.tabella-voce small { color: var(--muted); font-size: 0.76rem; }
/* La lista aperta si vede senza doverla cercare: fondo pieno, non un bordino. */
.tabella-voce--scelta { background: var(--accent-soft); }
.tabella-voce--scelta strong { color: var(--accent-scuro); }

.tabelle-voci {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 16px 18px;
}

.voci-testa { margin-bottom: 14px; }
.voci-testa h2 { margin: 0 0 4px; font-size: 1.05rem; }
.voci-spiegazione { margin: 0 0 4px; color: var(--muted); font-size: 0.88rem; }
.voci-dove { margin: 0; color: var(--muted); font-size: 0.78rem; }

/* Una riga per voce: frecce, nome, quanti la usano, spunta, elimina. Con il
   codice davanti quando la lista ne ha uno. */
.voce-riga {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) 130px 96px 34px;
  gap: 10px;
  align-items: center;
  padding: 5px 0;
  border-bottom: 1px solid var(--line);
}
.voce-riga--conCodice {
  grid-template-columns: 54px 84px minmax(0, 1fr) 84px 130px 96px 34px;
}
.voce-riga:last-of-type { border-bottom: none; }

/* Sul telefono cinque colonne non ci stanno: «usata da» passa sotto al nome,
   e l'intestazione delle colonne, che non avrebbe più colonne da intestare,
   si toglie. */
@media (max-width: 560px) {
  .voci-intestazione { display: none; }
  .voce-riga { grid-template-columns: 54px minmax(0, 1fr) auto 34px; row-gap: 2px; }
  .voce-riga .voce-usi { grid-column: 2 / -1; grid-row: 2; font-size: 0.78rem; }
  .voce-riga .voce-spunta { grid-column: 3; grid-row: 1; }
  .voce-riga .riga-togli { grid-column: 4; grid-row: 1; }
  .voce-riga--conCodice { grid-template-columns: 54px 72px minmax(0, 1fr) auto 34px; }
  .voce-riga--conCodice .voce-simbolo { grid-column: 2 / 3; grid-row: 2; }
  .voce-riga--conCodice .voce-usi { grid-column: 3 / -1; }
  .voce-riga--conCodice .voce-spunta { grid-column: 4; }
  .voce-riga--conCodice .riga-togli { grid-column: 5; }
}

.voci-intestazione {
  border-bottom: 1px solid var(--line);
  padding-bottom: 6px;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Spenta vuol dire «non la propongo più»: si legge ancora, ma smorzata. */
.voce-riga--spenta .voce-nome,
.voce-riga--spenta .voce-codice { opacity: 0.55; }

.voce-ordine { display: flex; gap: 2px; }
.voce-freccia {
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--muted);
  border-radius: 7px;
  width: 24px;
  height: 24px;
  padding: 0;
  font-size: 0.6rem;
  line-height: 1;
  cursor: pointer;
}
.voce-freccia:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.voce-freccia:disabled { opacity: 0.3; cursor: default; }

.voce-codice { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.86rem; }

/* Il nome si corregge scrivendoci dentro: la casella sembra testo finché non la
   si tocca, perché una riga di venti caselle da riempire spaventa. */
.voce-nome, .voce-simbolo {
  border: 1px solid transparent;
  background: none;
  border-radius: 8px;
  padding: 6px 8px;
  font: inherit;
  color: inherit;
  width: 100%;
  min-width: 0;
}
.voce-nome:hover, .voce-simbolo:hover { border-color: var(--line); }
.voce-nome:focus, .voce-simbolo:focus {
  border-color: var(--accent);
  background: var(--card);
  outline: none;
}

.voce-usi { color: var(--muted); font-size: 0.78rem; }
.voce-usi--mai { opacity: 0.6; }

.voce-spunta { display: flex; align-items: center; gap: 6px; font-size: 0.78rem; color: var(--muted); }
.voce-spunta input { width: 15px; height: 15px; accent-color: var(--accent); }

.riga-togli:disabled { opacity: 0.25; cursor: default; }
.riga-togli:disabled:hover { color: var(--muted); }

.voce-forma {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.voce-forma input {
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 8px 10px;
  font: inherit;
  flex: 1 1 180px;
  min-width: 0;
}
.voce-forma input:focus { border-color: var(--accent); outline: none; }
.voce-forma .voce-nuovo-codice, .voce-forma .voce-nuovo-simbolo { flex: 0 0 120px; }

/* ── Listini ────────────────────────────────────────────────────────────────
   Una riga per listino: codice, nome, ricarico, come si tira il prezzo, quanti
   articoli, e se è quello predefinito. Si corregge scrivendoci dentro. */
.listini {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 16px 18px;
  margin-bottom: 18px;
}

.listino-riga {
  display: grid;
  /* Sei colonne: codice, nome, ricarico, quanti articoli, il predefinito e le
     azioni. La settima — «prezzo tirato», l'arrotondamento — è stata tolta:
     non si usava, e una tendina che non si tocca mai è una domanda in più a
     ogni riga. */
  grid-template-columns: 110px minmax(0, 1fr) 118px minmax(0, 1.3fr) 118px 108px auto;
  gap: 10px;
  align-items: center;
  padding: 6px 0;
  border-bottom: 1px solid var(--line);
}
.listino-riga:last-of-type { border-bottom: none; }

.listini-intestazione,
.listino-intestazione {
  border-bottom: 1px solid var(--line);
  padding-bottom: 6px;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Spento vuol dire «non lo propongo più»: si legge ancora, smorzato. */
.listino-riga--spento { opacity: 0.6; }

/* I campi che si scrivono dentro la riga del listino: senza bordo finché non ci
   si passa sopra, perché la riga è un elenco da leggere e non un modulo da
   compilare.
 
   La regola prende TUTTI gli input della riga tranne le spunte, e non più solo
   quelli con type="text" scritto a mano. Il campo del ricarico il type non ce
   l'aveva — un input senza type È di testo, ma il selettore guarda l'attributo,
   non il comportamento — e restava l'unico riquadro di sistema in mezzo al
   gestionale: bordo grigio squadrato e carattere del browser. Scritta così, la
   prossima casella aggiunta a una riga nasce già vestita. */
.listino-riga input:not([type="radio"]):not([type="checkbox"]),
.listino-codice, .listino-nome {
  border: 1px solid transparent;
  background: none;
  border-radius: 8px;
  padding: 6px 8px;
  font: inherit;
  color: inherit;
  width: 100%;
  min-width: 0;
}
.listino-codice {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.86rem;
  text-transform: uppercase;
}
/* Le spunte restano fuori anche da qui: un bordo colorato addosso a un pallino
   di sistema lo fa sembrare rotto, non acceso. */
.listino-riga input:not([type="radio"]):not([type="checkbox"]):hover { border-color: var(--line); }
.listino-riga input:not([type="radio"]):not([type="checkbox"]):focus {
  border-color: var(--accent); background: var(--card); outline: none;
}

/* Il ricarico è un numero con il suo segno di percentuale accanto: senza, «120»
   in mezzo a una riga non dice se sono euro o punti. */
.listino-ricarico { display: flex; align-items: center; gap: 4px; }
.listino-ricarico input { width: 100%; min-width: 0; text-align: right; }
.listino-ricarico span { color: var(--muted); font-size: 0.85rem; }

/* Il numero degli articoli è diventato un tasto: dice quanti sono e, premuto,
   dice chi sono. Sembra un numero finché non ci si passa sopra — è un dato che
   si può aprire, non un comando da cercare. */
.listino-quanti--tasto {
  justify-self: start;
  padding: 4px 10px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: none;
  color: var(--accent-scuro);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
}
.listino-quanti--tasto:hover:not(:disabled) { border-color: var(--accent); background: var(--accent-soft); }
.listino-quanti--tasto:disabled { color: var(--muted); font-weight: 600; cursor: default; }

/* Il riquadro con gli articoli di un listino. */
.dialogo--venduti { width: min(900px, calc(100vw - 32px)); }

.dialogo-sotto {
  margin: -6px 0 14px;
  color: var(--muted);
  font-size: 0.84rem;
  font-weight: 600;
}

.venduti-corpo { max-height: min(60vh, 520px); overflow: auto; }

.venduti-righe { display: grid; gap: 2px; }

.venduti-riga {
  display: grid;
  grid-template-columns: 116px minmax(0, 1fr) 104px 116px 168px;
  gap: 10px;
  align-items: center;
  padding: 7px 8px;
  border-radius: 8px;
  font-size: 0.88rem;
}
.venduti-riga:nth-child(even) { background: color-mix(in srgb, var(--paper) 55%, transparent); }

.venduti-riga--testa {
  position: sticky;
  top: 0;
  background: var(--card);
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.venduti-nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.venduti-numero { text-align: right; font-variant-numeric: tabular-nums; }

.venduti-da { font-size: 0.78rem; color: var(--muted); }
/* Il prezzo scritto a mano è la cosa da notare: il ricarico non lo tocca. */
.venduti-da--mano { color: var(--accent-scuro); font-weight: 700; }
.venduti-da--manca { color: var(--errore); font-weight: 700; }
.venduti-riga--senza .venduti-numero { color: var(--muted); }

.listino-arrotonda {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 6px 8px;
  font: inherit;
  background: var(--card);
  min-width: 0;
}
.listino-quanti { color: var(--muted); font-size: 0.78rem; }
.listino-predefinito { display: flex; align-items: center; gap: 6px; font-size: 0.78rem; color: var(--muted); }
.listino-predefinito input { width: 15px; height: 15px; accent-color: var(--accent); }
.listino-azioni { display: flex; align-items: center; gap: 2px; justify-content: flex-end; }

.listino-forma {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.listino-forma input, .listino-forma select {
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 8px 10px;
  font: inherit;
  flex: 1 1 160px;
  min-width: 0;
}
.listino-forma input:focus, .listino-forma select:focus { border-color: var(--accent); outline: none; }
.listino-forma .listino-nuovo-codice, .listino-forma .listino-nuovo-ricarico { flex: 0 0 130px; }

/* ── La stampa del listino ────────────────────────────────────────────────── */
.stampa-listino {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 16px 18px;
}
.stampa-listino h2 { margin: 0 0 4px; font-size: 1.05rem; }
.stampa-spiegazione { margin: 0 0 14px; color: var(--muted); font-size: 0.88rem; }
.campo--stampa { max-width: 380px; margin-bottom: 14px; }
.campo--stampa select {
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 8px 10px;
  font: inherit;
  background: var(--card);
}

.stampa-gruppi { margin-bottom: 14px; }

/* Le tre famiglie una sotto l'altra: che cosa sono, di che materia, che gioiello
   sono. Divise, perché sono tre domande diverse e mescolarle in un elenco solo
   di pastiglie farebbe sembrare «Anello» e «Prodotti finiti» la stessa cosa. */
.gruppo-famiglia { margin: 8px 0 12px; }
.gruppo-testa { display: flex; align-items: baseline; gap: 10px; }
.gruppo-nome {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
}
/* «tutte» e «nessuna»: il gesto che la richiesta chiedeva — tutti i prodotti
   finiti dentro con un clic, e poi si toglie quello che non ci va. */
.gruppo-scorciatoia {
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  font-size: 0.76rem;
  color: var(--accent);
  cursor: pointer;
  text-decoration: underline;
}
.gruppo-voci {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 6px 0 4px;
}
/* Ogni voce è una pastiglia che si spunta: una colonna di caselle con dentro
   tre voci occuperebbe mezza pagina per niente. */
.gruppo-voce {
  display: flex;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px 12px 6px 10px;
  font-size: 0.86rem;
  cursor: pointer;
}
.gruppo-voce:hover { border-color: var(--accent); }
.gruppo-voce input { width: 15px; height: 15px; accent-color: var(--accent); }
.gruppo-voce small { color: var(--muted); font-size: 0.72rem; }
.gruppo-voce:has(input:checked) { background: var(--accent-soft); border-color: var(--accent); }

.stampa-opzioni { display: grid; gap: 8px; margin-bottom: 16px; }
.stampa-azioni { display: flex; gap: 8px; flex-wrap: wrap; }

/* ── La grafica del listino ────────────────────────────────────────────────
   Un formato non si sceglie leggendone il nome: si sceglie guardandolo. Ogni
   carta ha lo schemino della pagina — quanti riquadri, quanto grandi, in piedi
   o coricata — e sotto il numero che fa cambiare idea: quanti gioielli stanno
   in un foglio. */
.stampa-grafica { margin-bottom: 14px; }
.grafiche {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 8px 0 16px;
}
.grafica {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  width: 118px;
  padding: 10px 8px 9px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--card);
  font: inherit;
  color: inherit;
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s;
}
.grafica:hover { border-color: var(--accent); }
.grafica--scelta {
  border-color: var(--accent);
  background: var(--accent-soft);
  box-shadow: inset 0 0 0 1px var(--accent);
}
/* Due righe di spazio al nome anche a chi ne usa una: così «12 per pagina»
   sta alla stessa altezza su tutte le carte, e si confrontano leggendo in
   orizzontale invece che cercando ogni numero dove è caduto. */
.grafica-nome {
  font-size: 0.84rem;
  font-weight: 600;
  line-height: 1.15;
  text-align: center;
  min-height: 2.3em;
  display: flex;
  align-items: center;
}
.grafica-quanti { color: var(--muted); font-size: 0.72rem; }

/* Lo schemino: il foglio in piccolo. Le proporzioni sono quelle vere di un A4,
   perché è metà del messaggio — «coricato» si deve vedere, non leggere. */
.grafica-schema {
  display: grid;
  grid-template-columns: repeat(var(--colonne, 2), 1fr);
  align-content: start;
  gap: 3px;
  width: 68px;
  height: 96px;
  padding: 5px;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: #fff;
  overflow: hidden;
}
.grafica-schema--coricato { width: 96px; height: 68px; }
.grafica-pezzo { display: flex; flex-direction: column; gap: 2px; }
.grafica-foto {
  aspect-ratio: 1;
  background: #cddff0;
  border-radius: 1px;
}
.grafica-testo {
  height: 2px;
  width: 78%;
  background: var(--line);
  border-radius: 1px;
}
/* La vetrina e le righe non sono una griglia più larga: sono una riga, con la
   fotografia a sinistra e il testo accanto. Lo schema lo deve dire. */
.grafica-schema--vetrina .grafica-pezzo,
.grafica-schema--righe .grafica-pezzo {
  flex-direction: row;
  align-items: center;
  gap: 3px;
}
.grafica-schema--vetrina .grafica-foto { width: 40%; }
.grafica-schema--vetrina .grafica-testo,
.grafica-schema--righe .grafica-testo { flex: 1; width: auto; }
.grafica-schema--vetrina .grafica-testo { height: 3px; }
.grafica-schema--righe { gap: 4px; }
.grafica-schema--righe .grafica-foto { width: 7px; }

/* Le manopole: la grafica scelta è il punto di partenza, non una gabbia. */
.grafica-manopole { display: flex; flex-wrap: wrap; gap: 14px 22px; margin-bottom: 4px; }
.campo--segmenti { display: flex; flex-direction: column; gap: 6px; }
.segmenti {
  display: inline-flex;
  border: 1px solid var(--line);
  border-radius: 9px;
  overflow: hidden;
  background: var(--card);
}
.segmento {
  border: 0;
  border-right: 1px solid var(--line);
  background: none;
  padding: 7px 13px;
  font: inherit;
  font-size: 0.84rem;
  color: var(--ink);
  cursor: pointer;
}
.segmento:last-child { border-right: 0; }
.segmento:hover { background: var(--accent-soft); }
.segmento--acceso { background: var(--accent); color: #fff; }
.segmento--acceso:hover { background: var(--accent-scuro); }

/* ── L'anteprima di quello che finisce sul foglio ──────────────────────────── */
.anteprima { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); }
.anteprima-conto { margin: 0 0 10px; font-size: 0.86rem; color: var(--muted); }
.anteprima-righe { display: grid; }
.anteprima-riga {
  display: grid;
  grid-template-columns: 22px 110px minmax(0, 1fr) 110px 110px minmax(0, 1.1fr);
  gap: 10px;
  align-items: baseline;
  padding: 6px 0;
  border-bottom: 1px solid var(--line);
  font-size: 0.86rem;
}
.anteprima-riga--testa {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
/* Chi resta fuori dal foglio si vede subito: è l'unica cosa da sistemare
   prima di stampare. */
.anteprima-riga--fuori { opacity: 0.55; }
/* Tolto a mano: resta nell'elenco, barrato, perché sia possibile rimetterlo. */
.anteprima-riga--esclusa { opacity: 0.45; }
.anteprima-riga--esclusa .anteprima-codice,
.anteprima-riga--esclusa .anteprima-prezzo { text-decoration: line-through; }
.anteprima-spunta { width: 15px; height: 15px; accent-color: var(--accent); }
.anteprima-azioni { display: flex; gap: 8px; margin: 0 0 8px; }
.anteprima-codice { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.8rem; }
.anteprima-numero { text-align: right; }
.anteprima-prezzo { font-weight: 700; }
.anteprima-perche { color: var(--muted); font-size: 0.76rem; }
/* Quante pagine vengono: sta nella riga del conto ma non è un dettaglio —
   è quello che dice se il catalogo sta in una busta o in uno scatolone. */
.anteprima-fogli { color: var(--ink); }

@media (max-width: 820px) {
  .listino-riga { grid-template-columns: 1fr 1fr; }
  /* Sull'anteprima la spunta resta una colonna sua: è quello che si tocca. */
  .anteprima-riga { grid-template-columns: 22px 1fr; }
}

/* Sull'anteprima del listino: chi non ha un'immagine si vede accanto al nome,
   perché è quello che decide se spuntare «solo gli articoli con foto». */
.anteprima-senzafoto { color: var(--muted); font-size: 0.72rem; opacity: 0.8; }

/* ── Il valore della merce, e lo storico dei prezzi ─────────────────────────
   Il quinto numero della riga di magazzino: quanto vale quella giacenza ai
   prezzi dei documenti. Sta in evidenza perché è il numero che un magazzino
   esiste per dire. */
.giacenza-numero--valore b { color: var(--accent-scuro); }

/* Tutta la riga apre lo storico: si deve vedere che è cliccabile senza
   metterci sopra un tasto, che ruberebbe spazio ai numeri. */
.giacenza--apribile { cursor: pointer; }
.giacenza--apribile:hover { border-color: var(--accent); }
.giacenza--apribile:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.riepilogo-nota {
  flex-basis: 100%;
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 0.78rem;
}

/* ── Il pannello dei prezzi ── */
.prezzi-articolo { margin: 0 0 14px; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.prezzi-articolo strong { font-size: 1.05rem; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.prezzi-articolo span { color: var(--muted); }

.prezzi-conti {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}
.prezzi-conto {
  display: grid;
  gap: 1px;
  padding: 10px 12px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 12px;
}
.prezzi-conto small {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.prezzi-conto b { font-size: 1.05rem; }
.prezzi-conto i { color: var(--muted); font-size: 0.72rem; font-style: normal; }
.prezzi-conto--forte { background: var(--accent-soft); border-color: var(--accent); }
.prezzi-conto--forte b { color: var(--accent-scuro); }

/* La frase sull'andamento: verde se il prezzo è sceso, rossa se è salito —
   dal punto di vista di chi compra, non di chi vende. */
.prezzi-andamento {
  margin: 0 0 14px;
  padding: 9px 12px;
  border-radius: 10px;
  font-size: 0.86rem;
}
.prezzi-andamento--su { background: var(--errore-soft); color: var(--errore); }
.prezzi-andamento--giu { background: #e8f6ee; color: var(--ok); }

.prezzi-righe { display: grid; }
.prezzi-riga {
  display: grid;
  grid-template-columns: 92px 132px minmax(0, 1fr) 108px 104px 152px 108px;
  gap: 10px;
  align-items: baseline;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
  font-size: 0.86rem;
}
.prezzi-riga--testa {
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.prezzi-riga:last-child { border-bottom: none; }

.prezzi-doc { display: grid; gap: 1px; }
.prezzi-doc strong { font-size: 0.86rem; }
.prezzi-doc small { color: var(--muted); font-size: 0.7rem; }
.prezzi-fornitore { color: var(--muted); }
.prezzi-numero { text-align: right; }
.prezzi-prezzo { font-weight: 700; }
.prezzi-media { color: var(--muted); }

.prezzi-variazione--su { color: var(--errore); font-weight: 600; }
.prezzi-variazione--giu { color: var(--ok); font-weight: 600; }
.prezzi-variazione--uguale,
.prezzi-variazione--prima { color: var(--muted); font-size: 0.78rem; }

.prezzi-nota { margin: 14px 0 0; color: var(--muted); font-size: 0.8rem; }

@media (max-width: 820px) {
  .prezzi-riga { grid-template-columns: 1fr 1fr; }
  .prezzi-riga--testa { display: none; }
}

/* ── Le partite di prezzo ───────────────────────────────────────────────────
   Quanta merce c'è a ogni prezzo pagato. La quantità per prima e grande: è
   quello che si viene a cercare — «quanto ne ho ancora di quello vecchio». */
.partite { margin: 4px 0 18px; }
.partite-titolo {
  margin: 0 0 8px;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
}

.partita {
  display: grid;
  grid-template-columns: 118px 104px minmax(0, 1fr) 120px 118px;
  gap: 10px;
  align-items: baseline;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  margin-bottom: 6px;
  background: var(--card);
}
.partita-quanto { font-size: 1rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
.partita-prezzo { font-weight: 600; white-space: nowrap; }
.partita-origine { color: var(--muted); font-size: 0.74rem; }
.partita-usato { color: var(--muted); font-size: 0.72rem; text-align: right; }
.partita-valore {
  text-align: right;
  font-weight: 600;
  color: var(--accent-scuro);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* ── La scheda di magazzino di un articolo ───────────────────────────────────
   Blocchi, non un elenco unico: ognuno risponde a una domanda e ha lo stesso
   titolo, così scorrendo si sa sempre che cosa si sta guardando. */
.mag-sezione { margin: 0 0 22px; }
.mag-sezione-titolo {
  margin: 0 0 2px;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--accent-scuro);
}
.mag-sezione-aiuto {
  margin: 0 0 10px;
  font-size: 0.78rem;
  color: var(--muted);
}

/* La testa della tabella delle partite: le stesse colonne della riga, in
   piccolo. Senza, «7,4875 g  128,0000 €  DDT 55  2,5125 g di 10  958,40 €» e'
   una fila di numeri da indovinare. */
.partita--testa {
  border: none;
  background: none;
  padding-top: 0;
  padding-bottom: 2px;
  margin-bottom: 2px;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
}
.partita--testa .partita-valore, .partita--testa .partita-usato { color: var(--muted); font-weight: 700; }

/* ── Giacenze depositi ───────────────────────────────────────────────────────
   Una riga per deposito, che si apre. Chiusa dice quanto c'e' e quanta ne e'
   impegnata; aperta mostra le partite entrate li', con dentro chi le ha
   impegnate. Annidato invece che in tre elenchi separati perche' e' cosi' che
   si ragiona: prima dove, poi a che prezzo, poi di chi e'. */
.mag-depositi { display: grid; gap: 8px; }

.mag-deposito {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--card);
  overflow: hidden;
}
.mag-deposito--aperta { border-color: var(--accent); }

.mag-deposito-testa {
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr) 130px minmax(0, 220px);
  gap: 10px;
  align-items: baseline;
  width: 100%;
  padding: 11px 14px;
  border: none;
  background: none;
  font: inherit;
  font-size: 0.9rem;
  text-align: left;
  cursor: pointer;
}
.mag-deposito-testa:hover { background: var(--paper); }
.mag-deposito-testa:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.mag-deposito-freccia { color: var(--accent); }
.mag-deposito-nome { font-weight: 600; }
.mag-deposito-nome--fuori::before { content: "\2197 "; color: var(--accent-scuro); }
.mag-deposito-quanto { text-align: right; font-variant-numeric: tabular-nums; }
.mag-deposito-impegnata { color: #9a6413; font-weight: 600; text-align: right; }
.mag-deposito-impegnata--libera { color: var(--muted); font-weight: 400; }

.mag-deposito-corpo {
  padding: 4px 14px 12px;
  border-top: 1px solid var(--line);
  background: var(--paper);
}
.mag-deposito-corpo .partita { background: var(--card); }

/* Quello che risulta impegnato senza che nessuno abbia ancora detto da quale
   partita esce: va detto, o il numero in cima e le righe qui sopra non tornano. */
.mag-senza-partita {
  margin: 10px 0 0;
  padding: 8px 12px;
  border-radius: 8px;
  background: #fdf5e6;
  color: #7a4f0a;
  font-size: 0.8rem;
}

/* ── Storico movimenti ───────────────────────────────────────────────────────
   Tutto quello che si e' mosso, dal piu' recente. Lo storico dei prezzi
   racconta solo le entrate: chi cerca dove sono finiti tre grammi, li' non
   trova risposta. */
.mag-movimenti { display: grid; }
.mag-movimento {
  display: grid;
  grid-template-columns: 92px 52px 116px minmax(0, 150px) minmax(0, 1fr) 116px 108px;
  gap: 10px;
  align-items: baseline;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
  font-size: 0.84rem;
}
.mag-movimento--testa {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.mag-movimento:last-child { border-bottom: none; }
.mag-movimento-numero { color: var(--muted); font-variant-numeric: tabular-nums; }
.mag-movimento-dove { color: var(--muted); }
.mag-movimento-dove--fuori { color: var(--accent-scuro); }
.mag-movimento-doc { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mag-movimento-quanto {
  text-align: right;
  font-weight: 700;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.mag-movimento-quanto--entra { color: var(--ok); }
.mag-movimento-quanto--esce { color: var(--errore); }
.mag-movimento-valore {
  text-align: right;
  color: var(--muted);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 820px) {
  .mag-deposito-testa { grid-template-columns: 14px 1fr; }
  .mag-deposito-quanto, .mag-deposito-impegnata { grid-column: 2; text-align: left; }
  .mag-movimento { grid-template-columns: 1fr 1fr; }
  .mag-movimento--testa { display: none; }
  .mag-movimento-quanto, .mag-movimento-valore { text-align: left; }
}

/* Chi se l'e' gia' presa: una riga per commessa o per ordine di vendita. */
.mag-impegni-gruppo {
  margin: 12px 0 6px;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--ink);
}
.mag-impegno {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 110px minmax(0, 260px);
  gap: 10px;
  align-items: center;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--card);
  margin-bottom: 6px;
  font-size: 0.84rem;
}
.mag-impegno--apribile { cursor: pointer; }
.mag-impegno--apribile:hover { border-color: var(--accent); background: var(--accent-soft); }
.mag-impegno--apribile:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.mag-impegno-chi { display: grid; gap: 1px; min-width: 0; }
.mag-impegno-chi b { color: var(--accent-scuro); }
.mag-impegno-chi small { color: var(--muted); font-size: 0.74rem; }
.mag-impegno-quanto {
  text-align: right;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: #9a6413;
}
.mag-impegno-partita { color: var(--muted); font-size: 0.74rem; text-align: right; }
.mag-impegno-partita--vuota { font-style: italic; }

/* Un numero che non c'e' non deve pesare come uno che c'e'. */
.prezzi-conto--spento b { color: var(--muted); font-weight: 500; }
.prezzi-conto--impegno b { color: #9a6413; }
.prezzi-conto--allerta { border-color: var(--errore); }
.prezzi-conto--allerta b { color: var(--errore); }

@media (max-width: 820px) {
  .mag-luogo, .mag-impegno { grid-template-columns: 1fr 1fr; }
  .mag-luogo-impegno, .mag-impegno-partita { text-align: left; }
  .partita--testa { display: none; }
}

.partite-totale { margin: 8px 0 0; font-size: 0.82rem; color: var(--muted); }
.partite-totale--impegno { color: var(--ink); }

/* ── A chi è promessa una partita ───────────────────────────────────────────
   Sta dentro la riga della partita, sotto una linea tratteggiata: non è un
   fatto diverso, è il seguito della stessa frase — «ce ne sono dieci, e sette
   sono di qualcuno». Ogni promessa è un link alla commessa che l'ha fatta,
   perché la domanda successiva è sempre «e quella a che punto è?». */
.partita-impegni {
  grid-column: 1 / -1;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed var(--line);
  display: grid;
  gap: 4px;
}
.partita-impegni-testa { color: var(--muted); font-size: 0.74rem; }
.partita-impegni-testa--finita { color: var(--errore); font-weight: 600; }
.partita-impegno {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 12px;
  align-items: baseline;
  padding: 4px 8px;
  border-radius: 8px;
  background: var(--accent-soft);
  font-size: 0.78rem;
  cursor: pointer;
}
.partita-impegno:hover { background: #d3e9fa; }
.partita-impegno:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.partita-impegno-chi b { font-weight: 600; color: var(--accent-scuro); }
.partita-impegno-chi small { color: var(--muted); }
.partita-impegno-quanto { font-variant-numeric: tabular-nums; }
.partita-impegno-valore {
  font-weight: 600;
  color: var(--accent-scuro);
  font-variant-numeric: tabular-nums;
  text-align: right;
}
@media (max-width: 820px) {
  .partita-impegno { grid-template-columns: minmax(0, 1fr) auto; }
  .partita-impegno-valore { grid-column: 2; }
}

@media (max-width: 820px) {
  .partita { grid-template-columns: 1fr 1fr; }
  .partita-usato, .partita-valore { text-align: left; }
}

/* ── La scelta della partita in produzione ───────────────────────────────────
   Compare sotto il materiale solo quando in casa ce n'è a prezzi diversi: con
   un prezzo solo non c'è niente da scegliere, e una tendina da una voce sola è
   un clic in più che non decide niente. */
.partita-scelta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 6px 10px 10px 22px;
  font-size: 0.82rem;
  color: var(--muted);
}
.partita-tendina {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 5px 8px;
  font: inherit;
  font-size: 0.82rem;
  background: var(--card);
  color: var(--ink);
  max-width: 100%;
}
.partita-tendina:focus { border-color: var(--accent); outline: none; }
/* Che cosa cambia in euro scegliendo quella partita invece di lasciar fare:
   è il numero per cui la scelta esiste, e va letto senza doverlo cercare. */
.partita-effetto { font-size: 0.78rem; }
.partita-effetto--piu { color: var(--errore); font-weight: 600; }
.partita-effetto--meno { color: var(--ok); font-weight: 600; }

/* ── Quanto prendere da ogni partita ────────────────────────────────────────
   Una riga per partita: il prezzo e quel che ne resta a sinistra, quanto
   prenderne a destra. Non è una tendina perché la scelta non è «quale» ma
   «quanti da questa e quanti da quella»: di oro a 128 ne restano sette grammi e
   ne servono nove, e il resto viene per forza dall'altra. */
.partite {
  margin: 4px 0 10px 22px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--card);
}
.partite-testa {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
  color: var(--muted);
  font-size: 0.78rem;
}

/* Chiuso, il riquadro è una riga sola: che materiale è a sinistra, come sta a
   destra. Con tre materiali a due prezzi ciascuno, tre riquadri aperti
   riempiono la schermata di caselle che non si toccano quasi mai. */
.partite-testa--tasto {
  width: 100%;
  border: none;
  background: none;
  font: inherit;
  font-size: 0.78rem;
  color: var(--muted);
  padding: 2px 0;
  margin: 0;
  cursor: pointer;
  text-align: left;
}
.partite-testa--tasto:hover .partite-titolo { color: var(--accent); }
.partite-testa--tasto:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
.partite--chiusa { padding-bottom: 6px; }
.partite-freccia { display: inline-block; width: 10px; color: var(--accent); }
.partite-titolo { font-weight: 600; }

.partite-serve { font-weight: 700; color: var(--ink); text-align: right; }
/* Come sta la scelta, letto senza aprire: non scelta, da sistemare, o fatta. */
.partite-serve--nessuna { font-weight: 500; color: var(--muted); }
.partite-serve--storta { color: var(--errore); }
.partite-serve--buona { color: var(--ok); }

.partita-riga {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 96px 28px auto;
  align-items: center;
  gap: 8px;
  padding: 5px 0;
  border-top: 1px solid var(--paper);
}
.partita-riga:first-of-type { border-top: none; }
.partita-che { display: grid; gap: 1px; min-width: 0; }
.partita-che strong { font-size: 0.86rem; font-variant-numeric: tabular-nums; }
.partita-che small { color: var(--muted); font-size: 0.74rem; }

.partita-quanto {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 6px 8px;
  font: inherit;
  font-size: 0.84rem;
  text-align: right;
  background: var(--card);
  color: var(--ink);
  width: 100%;
  min-width: 0;
  font-variant-numeric: tabular-nums;
}
.partita-quanto:focus { border-color: var(--accent); outline: none; }
/* Più di quello che quella partita ha: si dice mentre si scrive, non dopo
   aver premuto. */
.partita-quanto--troppa { border-color: var(--errore); background: var(--errore-soft); }
.partita-unita { color: var(--muted); font-size: 0.78rem; }

.partita-tutta {
  border: 1px solid var(--line);
  background: none;
  border-radius: 999px;
  padding: 4px 10px;
  font: inherit;
  font-size: 0.76rem;
  color: var(--accent);
  cursor: pointer;
  white-space: nowrap;
}
.partita-tutta:hover { border-color: var(--accent); background: var(--accent-soft); }

/* La riga che dice se il conto torna, e quanto rende la scelta. */
.partite-riassunto {
  display: block;
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid var(--paper);
  font-size: 0.78rem;
  color: var(--muted);
}
.partite-riassunto--buona { color: var(--ok); font-weight: 600; }
.partite-riassunto--storta { color: var(--errore); font-weight: 600; }

/* La riga in più sotto a un materiale del passo 2, dove si sceglie con quale
   oro farlo. Prende tutta la larghezza della tabella: è una domanda che ha
   bisogno di spazio, non una cella. */
.riga-partite > td { padding: 0 8px 10px; background: var(--paper); }
.riga-partite .partite { margin: 0; }

/* Quello che era stato scelto al passo 2, letto al passo 3: si legge e non si
   tocca, perché il posto dove si decide è uno solo. */
.partite-detto {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 2px 0 8px 22px;
  padding: 6px 10px;
  border-left: 3px solid var(--ok);
  background: var(--card);
  border-radius: 0 8px 8px 0;
  font-size: 0.8rem;
  color: var(--muted);
}
.partite-detto > small { min-width: 0; }
.partite-detto strong { color: var(--ink); }
.partite-detto--nessuna { border-left-color: #c9971a; color: #8a5d00; }

/* Il rimando per cambiare una scelta gia' fatta: piccolo di proposito. Serve
   il giorno in cui la partita decisa non va piu' bene, non nell'ordine normale
   delle cose - e una domanda in mezzo alla strada e' proprio quello che si
   voleva togliere. */
.partite-cambia {
  margin-left: auto;
  padding: 2px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--card);
  color: var(--muted);
  font: inherit;
  font-size: 0.74rem;
  cursor: pointer;
  flex: none;
}
.partite-cambia:hover { border-color: var(--accent); color: var(--accent-scuro); }
.partite-cambia:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* Il totale dei materiali con le partite scelte, in fondo all'anteprima del
   versamento: è il numero che si guarda davvero, quanto costerà il gioiello con
   la merce che si è deciso di usare. */
.partite-totale {
  margin: 8px 0 0;
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--muted);
}
.partite-totale--meno { color: var(--ok); }
.partite-totale--piu { color: var(--errore); }
.partite-totale--storta { color: var(--errore); }

@media (max-width: 700px) {
  .partite { margin-left: 0; }
  .partita-riga { grid-template-columns: minmax(0, 1fr) 80px 24px auto; }
}

/* Quanto ha reso la scelta, in fondo al conto dell'evasione: il prezzo di
   vendita non si è mosso, il costo sì, e questa riga dice di quanto. Sta sotto
   al ricavo perché è la sua spiegazione, non un quarto numero. */
.conto-scelta {
  margin: 6px 0 0;
  font-size: 0.8rem;
  font-weight: 600;
}
.conto-scelta--meglio { color: var(--ok); }
.conto-scelta--peggio { color: var(--errore); }

/* Su un documento che evade un ordine, la riga aggiunta a mano si riconosce:
   è la merce arrivata in più, e su un DDT misto è la prima cosa da vedere. */
.riga-provenienza--libera {
  color: var(--accent-scuro);
  background: var(--accent-soft);
  border-radius: 999px;
  padding: 1px 8px;
}

/* Una descrizione lunga in elenco si ferma a due righe: per intero renderebbe
   la riga alta mezza pagina. Il testo completo resta nel suggerimento. */
/* Una descrizione lunga cinquecento caratteri sta su una riga sola e finisce
   con i puntini: quello che non ci sta si legge fermandoci sopra il mouse, o
   aprendo la scheda. Su due righe, come prima, la riga dell'elenco cresceva —
   e una tabella di righe alte una diversa dall'altra non si scorre. */
.tabella-troncata {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  /* Su una riga sola, senza un limite, la colonna si allargherebbe quanto la
     descrizione più lunga dell'elenco e spingerebbe fuori schermo il costo e la
     giacenza, che sono le colonne per cui si apre questa pagina. */
  max-width: 300px;
}

/* ── Righe tutte della stessa altezza ────────────────────────────────────────
   L'altezza è quella della miniatura della foto, che è il pezzo più alto e non
   si può stringere: così la riga con la foto e quella senza sono identiche.
   Perché regga, dentro alla cella nessun testo deve andare a capo — la riga
   principale e quella sotto sono una riga ciascuna, e quello che avanza finisce
   con i puntini. */
/* L'altezza è quella della miniatura più l'imbottitura della cella (44 + 9 + 9):
   è il pezzo più alto e non si può stringere. Va scritta per intero e non
   lasciata alla foto, o spegnendo la colonna della foto il pavimento sparirebbe
   e le righe tornerebbero a essere una diversa dall'altra. */
.tabella--righe-uguali tbody td { height: 62px; }

/* La prima riga della cella: miniatura, testo e pastiglie in fila, senza
   andare a capo. Le pastiglie restano intere — dicono «non si vende», «2
   righe», e mezza pastiglia non vuol dire niente — e a stringersi è il testo,
   che finisce con i puntini e si rilegge col mouse. */
.tabella--righe-uguali .tabella-riga-prima {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  white-space: nowrap;
}
.tabella--righe-uguali .tabella-riga-prima > * {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tabella--righe-uguali .tabella-riga-prima > .tag,
.tabella--righe-uguali .tabella-riga-prima > .tabella-foto { flex: none; }
.tabella--righe-uguali tbody td > .tabella-sotto {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 300px;
}

/* ── L'assistente ────────────────────────────────────────────────────────────
   Un tasto tondo in basso a destra e il riquadro che si apre sopra la pagina,
   senza spostarla: si chiede una cosa mentre si sta compilando, e quello che si
   stava facendo deve restare dov'era. */
.assistente-tasto {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 900;
  width: 52px;
  height: 52px;
  border: 0;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-size: 1.5rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(16, 44, 61, 0.28);
}
.assistente-tasto:hover { background: var(--accent-scuro); }
.assistente-tasto--aperto { background: var(--accent-scuro); font-size: 1.2rem; }

.assistente {
  position: fixed;
  right: 20px;
  bottom: 84px;
  z-index: 900;
  width: min(390px, calc(100vw - 32px));
  max-height: min(70vh, 640px);
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: 0 18px 48px rgba(16, 44, 61, 0.22);
  overflow: hidden;
}

.assistente-testa {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  background: var(--paper);
}
.assistente-sotto { color: var(--muted); font-size: 0.78rem; }
.assistente-chiudi {
  margin-left: auto;
  border: 0;
  background: none;
  color: var(--muted);
  font-size: 1rem;
  cursor: pointer;
}

.assistente-corpo {
  flex: 1;
  overflow-y: auto;
  padding: 12px 14px;
  display: grid;
  gap: 10px;
  align-content: start;
}

/* Le risposte vanno a capo dove le manda chi scrive: gli elenchi numerati si
   leggono solo se le righe restano righe. */
.assistente-bolla {
  white-space: pre-wrap;
  line-height: 1.45;
  font-size: 0.92rem;
  padding: 9px 12px;
  border-radius: 12px;
  max-width: 92%;
}
.assistente-bolla--utente {
  justify-self: end;
  background: var(--accent);
  color: #fff;
  border-bottom-right-radius: 4px;
}
.assistente-bolla--assistente {
  justify-self: start;
  background: var(--paper);
  border-bottom-left-radius: 4px;
}
.assistente-bolla--guasto {
  justify-self: start;
  background: #fdecec;
  color: #8c2b2b;
}
/* Mentre la risposta si scrive, un trattino che lampeggia in fondo: dice che
   sta arrivando, senza rubare la riga. */
.assistente-bolla--in-corso::after {
  content: "▍";
  animation: assistente-battito 1s steps(2) infinite;
}
@keyframes assistente-battito { 50% { opacity: 0; } }

.assistente-invito { display: grid; gap: 6px; justify-items: start; }
.assistente-invito p { margin: 0 0 4px; color: var(--muted); font-size: 0.88rem; }
.assistente-esempio {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 999px;
  padding: 5px 12px;
  font: inherit;
  font-size: 0.82rem;
  color: var(--accent-scuro);
  cursor: pointer;
  text-align: left;
}
.assistente-esempio:hover { background: var(--accent-soft); }

.assistente-piede {
  display: flex;
  gap: 8px;
  align-items: end;
  padding: 10px 12px;
  border-top: 1px solid var(--line);
}
.assistente-piede textarea {
  flex: 1;
  resize: none;
  font: inherit;
  font-size: 0.92rem;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
}
.assistente-piede textarea:focus { outline: 2px solid var(--accent); outline-offset: -1px; }

/* Su telefono il riquadro prende quasi tutto lo schermo: mezzo riquadro su un
   telefono non ci sta né come tastiera né come lettura. */
@media (max-width: 640px) {
  .assistente {
    right: 8px;
    left: 8px;
    bottom: 78px;
    width: auto;
    max-height: 72vh;
  }
}

/* L'assistente in attesa della chiave: il tasto c'è ma si vede che non è vivo,
   e accanto sta scritto perché — senza doverlo aprire per scoprirlo. */
.assistente-tasto--spento { background: var(--muted); }
.assistente-tasto--spento:hover { background: var(--ink); }

.assistente-etichetta {
  position: fixed;
  right: 82px;
  bottom: 34px;
  z-index: 900;
  background: var(--ink);
  color: #fff;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 4px 9px;
  border-radius: 999px;
  white-space: nowrap;
  pointer-events: none;
  box-shadow: 0 4px 14px rgba(16, 44, 61, 0.22);
}

.assistente--spento .assistente-sotto {
  color: var(--ink);
  font-weight: 700;
  font-size: 0.66rem;
  letter-spacing: 0.06em;
  background: var(--accent-soft);
  border-radius: 999px;
  padding: 2px 8px;
}

.assistente-attesa { display: grid; gap: 8px; }
.assistente-attesa p { margin: 0; font-size: 0.88rem; color: var(--muted); line-height: 1.45; }
.assistente-attesa-titolo {
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--ink) !important;
  font-size: 0.78rem !important;
}

/* Su telefono l'etichetta starebbe sopra il tasto: si mette sotto, più stretta. */
@media (max-width: 640px) {
  .assistente-etichetta { right: 20px; bottom: 78px; font-size: 0.58rem; }
}

/* ── A chi si applica un listino ────────────────────────────────────────────
   Le regole per categoria e dettaglio, come cartellini sulla riga del listino:
   si leggono a colpo d'occhio e si tolgono con la ✕. Il «+» apre una riga di
   scelta piccola, che sparisce appena si è aggiunto. */
.listino-ambiti { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; min-width: 0; }
.listino-ambito {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 0.72rem; padding: 2px 6px 2px 8px; border-radius: 999px;
  background: var(--accent-soft); color: var(--accent-scuro); white-space: nowrap;
}
.listino-ambito small { font-weight: 400; opacity: 0.75; text-transform: uppercase; font-size: 0.6rem; letter-spacing: 0.04em; }
.listino-ambito button {
  border: none; background: none; padding: 0 2px; font: inherit; font-size: 0.8rem;
  color: inherit; cursor: pointer; opacity: 0.7; line-height: 1;
}
.listino-ambito button:hover { opacity: 1; color: var(--errore); }
.listino-ambiti-piu {
  border: 1px dashed var(--line); background: none; border-radius: 999px;
  font: inherit; font-size: 0.72rem; padding: 2px 9px; color: var(--muted); cursor: pointer;
}
.listino-ambiti-piu:hover { border-color: var(--accent); color: var(--accent-scuro); }
.listino-ambiti-nessuno { font-size: 0.72rem; color: var(--muted); }
.listino-ambiti-forma { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; width: 100%; }
.listino-ambiti-forma select { font: inherit; font-size: 0.76rem; padding: 3px 6px; border: 1px solid var(--line); border-radius: 8px; background: var(--card, #fff); min-width: 0; }
.listino-ambiti-forma button { font: inherit; font-size: 0.74rem; padding: 3px 9px; border-radius: 8px; border: 1px solid var(--line); background: none; cursor: pointer; }
.listino-ambiti-forma button.conferma { background: var(--accent); color: #fff; border-color: var(--accent); }
@media (max-width: 900px) {
  .listino-ambiti { grid-column: 1 / -1; }
}

/* Il consumabile scritto a mano al versamento: un campo al posto del numero. */
.consumo-corretto { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.consumo-corretto input { width: 96px; text-align: right; }
.consumo-corretto-nota--cambiato { color: #a06a00; font-weight: 600; }

/* ── La tabella del costo ────────────────────────────────────────────────────
   Il numero con cui il gioiello entra a magazzino, riga per riga: materiali,
   ore, totali, costo del pezzo. Sta nella finestra «Completa e versa» e nel
   riquadro «Quanto costa produrlo» della scheda. Non usa .tabella, che è fatta
   per gli elenchi larghi e pretende 1020 px. */
.tabella-costo-riquadro {
  margin-top: 6px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow-x: auto;
}
.tabella-costo {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.88rem;
}
.tabella-costo th {
  padding: 8px 12px;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  text-align: left;
  white-space: nowrap;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
}
.tabella-costo td {
  padding: 7px 12px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.tabella-costo tr:last-child td { border-bottom: 0; }
.tabella-costo--num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tabella-costo-voce strong { font-weight: 600; }
.tabella-costo-sotto { display: block; font-size: 0.76rem; color: var(--muted); white-space: normal; }
/* Dove il costo si è mosso rispetto alla composizione: si vede senza cercarlo. */
.tabella-costo-sotto--cambiato { color: #9a6413; font-weight: 600; }
.tabella-costo-sezione td {
  padding-top: 10px;
  padding-bottom: 4px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  background: color-mix(in srgb, var(--paper) 55%, transparent);
}
.tabella-costo-somma td { font-weight: 600; background: color-mix(in srgb, var(--paper) 45%, transparent); }
.tabella-costo-somma td:first-child { text-align: right; }
.tabella-costo-somma .tabella-costo-sotto { display: inline; font-weight: 400; }
.tabella-costo-totale td {
  padding-top: 11px;
  padding-bottom: 11px;
  border-top: 2px solid var(--line);
  font-size: 1rem;
  font-weight: 700;
}
.tabella-costo-totale td:first-child { text-align: right; }
.tabella-costo-totale td:last-child { color: var(--ok); font-size: 1.1rem; }
.tabella-costo-pezzo td { background: var(--accent-soft); font-weight: 600; }
.tabella-costo-pezzo td:first-child { text-align: right; }
.tabella-costo-pezzo .tabella-costo-sotto { display: inline; font-weight: 400; }
.tabella-costo-vuota td { color: var(--muted); font-size: 0.82rem; }

/* ── Chi non vede i costi ────────────────────────────────────────────────────
   Il server non glieli manda; questa classe toglie di mezzo anche le colonne
   e i riquadri che li ospiterebbero, perché una colonna di «—» è una domanda. */
.senza-costi .solo-costi { display: none !important; }

/* ── Utenti ─────────────────────────────────────────────────────────────── */
.utente--spento strong { color: var(--muted); text-decoration: line-through; }
.utente-modulo { display: grid; gap: 18px; margin-top: 14px; }
.utente-griglia {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px 18px;
}
.utente-spunte { display: grid; gap: 10px; }
.utente-aree-titolo { margin: 4px 0 0; }
.utente-modulo > .campo-aiuto { margin: -12px 0 0; max-width: 70ch; }
.utente-aree {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 10px 18px;
  padding: 14px 16px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 12px;
}
.utente-aree .campo--interruttore:first-child { grid-column: 1 / -1; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.utente-piede { display: flex; gap: 10px; align-items: center; }
.utente-piede .bottone--testo { margin-left: auto; }

/* ── Le righe grandi dell'elenco ─────────────────────────────────────────────
   Dal pannello Vista: al banco, con un cliente davanti, le righe da 62 punti e
   le foto da 44 sono piccole. Cresce tutto insieme — testo, altezza, foto — e
   la tabella resta la stessa, con le stesse colonne. */
.tabella--grande { font-size: 1rem; }
.tabella--grande.tabella--righe-uguali tbody td { height: 100px; }
.tabella--grande tbody td { padding: 10px 14px; }
.tabella--grande .tabella-foto { width: 80px; height: 80px; border-radius: 10px; }
.tabella--grande .tabella-sotto { font-size: 0.84rem; }
.tabella--grande.tabella--righe-uguali tbody td > .tabella-sotto { max-width: 420px; }
.tabella--grande .tag { font-size: 0.78rem; }

.tabella--enorme { font-size: 1.1rem; }
.tabella--enorme.tabella--righe-uguali tbody td { height: 148px; }
.tabella--enorme tbody td { padding: 12px 16px; }
.tabella--enorme .tabella-foto { width: 124px; height: 124px; border-radius: 12px; }
.tabella--enorme .tabella-sotto { font-size: 0.92rem; }
.tabella--enorme.tabella--righe-uguali tbody td > .tabella-sotto { max-width: 560px; }
.tabella--enorme .tag { font-size: 0.84rem; }
.tabella--enorme thead th { font-size: 0.78rem; }

.colonne-grandezza { margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.colonne-scorciatoia--attiva,
.colonne-scorciatoia--attiva:hover { background: var(--accent); border-color: var(--accent); color: #fff; }

/* ── Vendere dalla scheda dell'articolo ─────────────────────────────────── */
.vendi-blocco { display: grid; gap: 8px; justify-items: start; }
.vendi-blocco .campo-aiuto { max-width: 64ch; }

/* ── Vendita rapida: il catalogo da banco ────────────────────────────────────
   Al posto dell'elenco: schede grandi con la foto, il codice, la descrizione,
   il prezzo e «Vendi». Si guarda da un metro, col cliente davanti. */
.pagina-azioni { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.catalogo-aperto .riepilogo,
.catalogo-aperto .filtri,
.catalogo-aperto .elenco { display: none; }

.catalogo-testa {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.catalogo-cerca {
  flex: 1 1 320px;
  max-width: 520px;
  padding: 11px 14px;
  font: inherit;
  font-size: 1rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--card);
  color: inherit;
}
.catalogo-cerca:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.catalogo-conto { margin: 0; color: var(--muted); font-size: 0.88rem; }

.catalogo-griglia {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 16px;
}
.catalogo-carta {
  display: grid;
  gap: 4px;
  padding: 12px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 16px;
  min-width: 0;
}
.catalogo-foto {
  width: 100%;
  aspect-ratio: 1 / 1;
  max-width: 100%;
  border-radius: 12px;
  overflow: hidden;
  background: var(--paper);
  cursor: pointer;
  display: grid;
  place-items: center;
  margin-bottom: 6px;
}
.catalogo-foto img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.15s ease; }
.catalogo-foto:hover img { transform: scale(1.03); }
.catalogo-foto--vuota { border: 1px dashed var(--line); color: var(--muted); font-weight: 700; letter-spacing: 0.04em; }
.catalogo-codice { color: var(--muted); font-size: 0.78rem; letter-spacing: 0.03em; }
.catalogo-nome {
  font-size: 1.02rem;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.6em;
}
.catalogo-prezzo { font-size: 1.15rem; font-weight: 700; color: var(--accent-scuro); font-variant-numeric: tabular-nums; }
.catalogo-prezzo--manca { color: var(--muted); font-weight: 400; font-size: 0.88rem; }
.catalogo-vendi { margin-top: 8px; text-align: center; }
.catalogo .vuoto { grid-column: 1 / -1; }

/* ── Riparazioni ─────────────────────────────────────────────────────────────
   Le due foto stanno affiancate: il danno e il risultato si guardano insieme.
   Le righe del lavoro sono una griglia a campi, come quelle degli ordini. */
.rip-foto-coppia { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.rip-foto { flex-direction: column; align-items: stretch; gap: 8px; margin-bottom: 0; }
.rip-foto-titolo { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); }
.rip-foto .foto-anteprima { width: 100%; height: 220px; }
.rip-foto .foto-anteprima a { display: block; width: 100%; height: 100%; }
.rip-foto .foto-anteprima img { width: 100%; height: 100%; object-fit: cover; }
.rip-foto .foto-azioni { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.rip-foto .foto-azioni .campo-aiuto { flex-basis: 100%; font-size: 0.72rem; }

.rip-righe { display: grid; gap: 12px; }
.rip-righe-elenco { display: grid; gap: 8px; }
.rip-riga {
  display: grid;
  grid-template-columns: 88px minmax(140px, 1.4fr) minmax(140px, 1.4fr) 84px 36px 100px 100px auto;
  gap: 8px;
  align-items: end;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--paper);
}
.rip-riga--senza-costi { grid-template-columns: 88px minmax(140px, 1.4fr) minmax(140px, 1.4fr) 84px 36px 100px auto; }
.rip-riga--lavorazione { border-left: 3px solid var(--accent); }
.rip-riga--materiale { border-left: 3px solid #c9a23a; }
.rip-riga-tipo { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); padding-bottom: 10px; }
.rip-riga-campo { display: grid; gap: 3px; min-width: 0; }
.rip-riga-campo > span { font-size: 0.66rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); }
.rip-riga-campo input, .rip-riga-campo .selettore-campo {
  font: inherit; font-size: 0.86rem; width: 100%; padding: 7px 9px;
  border: 1px solid var(--line); border-radius: 8px; background: var(--card); color: var(--ink);
}
.rip-riga-um { font-size: 0.74rem; color: var(--muted); padding-bottom: 10px; }
.rip-righe-piede { display: flex; flex-wrap: wrap; gap: 8px 22px; padding: 10px 12px; border-radius: 10px; background: var(--paper); }
.rip-totale { display: grid; gap: 2px; }
.rip-totale span { font-size: 0.66rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); }
.rip-totale strong { font-size: 0.95rem; }
.rip-righe-azioni { display: flex; flex-wrap: wrap; gap: 8px; }
@media (max-width: 900px) {
  .rip-foto-coppia { grid-template-columns: 1fr; }
  .rip-riga, .rip-riga--senza-costi { grid-template-columns: 1fr 1fr; }
}

/* ── I pagamenti dell'ordine al fornitore ──────────────────────────────────
   Sotto l'ordine: il conto in tre numeri, le righe già registrate e il modulo
   per registrarne una. Il residuo parte già scritto nell'importo: nel caso
   normale si paga quello che manca e si preme un tasto solo. */
.pag-conto {
  display: grid;
  grid-template-columns: repeat(3, 1fr) auto;
  gap: 10px;
  align-items: center;
  margin-bottom: 12px;
}
.pag-conto-voce {
  display: grid;
  gap: 2px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--paper);
}
.pag-conto-voce span { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); }
.pag-conto-voce strong { font-size: 1.05rem; color: var(--accent-scuro); font-variant-numeric: tabular-nums; }
.pag-conto-voce small { font-size: 0.74rem; color: var(--muted); }
.pag-conto-stato { justify-self: end; }

.pag-riga { align-items: center; }
.pag-riga .pag-riferimento { flex: 1 1 auto; font-size: 0.82rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; }
.pag-riga .riga-togli { align-self: center; margin-left: auto; padding: 4px 6px; }

.pag-forma {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--card);
}
.pag-forma .distinta-piede { grid-column: 1 / -1; margin: 0; }

@media (max-width: 720px) {
  .pag-conto { grid-template-columns: 1fr 1fr; }
  .pag-conto-stato { grid-column: 1 / -1; justify-self: start; }
  .pag-forma { grid-template-columns: 1fr; }
}

/* ── L'estratto conto dei fornitori ────────────────────────────────────────
   Un riquadro per fornitore: la testata dice il conto, la tabella sotto gli
   ordini uno per riga. Si stampa com'è: è il foglio da tenere accanto
   all'home banking. */
.pagina-sotto { margin: 4px 0 0; font-size: 0.86rem; color: var(--muted); }

.estratto { display: grid; gap: 16px; }

.estratto-fornitore {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
}

.estratto-testa {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 20px;
  padding: 14px 18px;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}
.estratto-chi h2 { margin: 0; font-size: 1.05rem; }
.estratto-chi small { font-size: 0.78rem; color: var(--muted); }

.estratto-conto { display: flex; gap: 22px; flex-wrap: wrap; }
.estratto-conto-voce { display: grid; gap: 1px; text-align: right; }
.estratto-conto-voce span { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); }
.estratto-conto-voce strong { font-size: 1.05rem; font-variant-numeric: tabular-nums; color: var(--ink); }
.estratto-conto-voce--residuo strong { color: var(--accent-scuro); }
.estratto-conto-voce--scaduto strong { color: var(--errore); }

.estratto-tabella {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.86rem;
}
.estratto-tabella th {
  padding: 8px 12px;
  text-align: left;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.estratto-tabella td {
  padding: 9px 12px;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}
.estratto-tabella tr:last-child td { border-bottom: none; }
.estratto-tabella .destra { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.estratto-riga--aperta td { background: var(--accent-soft); }
.estratto-numero { font-weight: 700; color: var(--accent-scuro); text-decoration: none; }
.estratto-numero:hover { text-decoration: underline; }
.estratto-residuo { font-weight: 700; color: var(--accent-scuro); }
.estratto-scaduto { color: var(--errore); font-weight: 600; }
.estratto-come {
  display: block;
  max-width: 320px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.8rem;
  color: var(--muted);
}
.estratto-azioni { display: flex; gap: 6px; align-items: center; justify-content: flex-end; white-space: nowrap; }
.estratto-dettaglio td { background: color-mix(in srgb, var(--accent-soft) 45%, var(--card)); padding: 12px 18px; }
.estratto-dettaglio .varianti-elenco { margin-bottom: 0; }

@media (max-width: 900px) {
  .estratto-fornitore { overflow-x: auto; }
  .estratto-tabella { min-width: 860px; }
}

@media print {
  .barra, .testata, .filtri, .pagina-azioni, .estratto-azioni, .avviso { display: none !important; }
  .estratto-fornitore { break-inside: avoid; border-color: #999; }
  .estratto-riga--aperta td, .estratto-dettaglio td { background: none; }
}

/* Il conto in fondo alle righe dell'ordine al fornitore: imponibile, IVA e
   totale in fila, e sotto l'avviso se qualche articolo non ha il codice IVA. */
.righe-totale--conto { display: grid; grid-template-columns: repeat(3, auto); justify-content: end; gap: 6px 28px; }
.righe-totale--conto .conto-voce { display: grid; gap: 2px; text-align: right; }
.righe-totale--conto .conto-voce strong { font-size: 1rem; color: var(--ink); }
.righe-totale--conto .conto-voce--totale strong { font-size: 1.15rem; color: var(--accent-scuro); }
.ordine-valore { display: grid; gap: 1px; }
.ordine-valore small { font-size: 0.72rem; font-weight: 500; color: var(--muted); }

/* Il dovuto e la scadenza si correggono nell'estratto conto, sopra i pagamenti. */
.estratto-dovuto { margin-bottom: 12px; padding: 10px 12px; border: 1px dashed var(--line); border-radius: 10px; background: var(--card); }
.estratto-dovuto-nota { margin: 0 0 8px; font-size: 0.82rem; color: var(--muted); }
.estratto-dovuto-campi { display: flex; flex-wrap: wrap; align-items: end; gap: 10px; }
.estratto-dovuto-campi .campo { flex: 0 1 220px; }
.estratto-dovuto-campi .bottone { margin-bottom: 2px; }

/* ── Storico pagamenti ──────────────────────────────────────────────────── */
.riepilogo-voce--forte strong { color: var(--ok, #1d7a3e); }
.storico-spaccato {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px;
  margin: 0 0 16px;
}
.storico-blocco {
  background: #fff;
  border: 1px solid var(--line, #e3e6ea);
  border-radius: 12px;
  padding: 12px 14px;
}
.storico-blocco h2 { margin: 0 0 8px; font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
.storico-tabellina { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.storico-tabellina td { padding: 5px 4px; border-top: 1px solid var(--line, #eef0f2); vertical-align: middle; }
.storico-tabellina tr:first-child td { border-top: 0; }
.storico-tabellina .storico-numero { color: var(--muted); white-space: nowrap; font-size: 0.85rem; }
.storico-tabellina .destra { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tabella tfoot td { padding: 10px 12px; border-top: 2px solid var(--line, #dfe3e7); font-weight: 600; background: color-mix(in srgb, var(--paper) 45%, transparent); }

/* ── Stampa etichette ───────────────────────────────────────────────────── */
.etichette-layout { display: grid; grid-template-columns: minmax(320px, 420px) minmax(0, 1fr); gap: 18px; align-items: start; }
@media (max-width: 1000px) { .etichette-layout { grid-template-columns: 1fr; } }
.etichette-pannello { display: grid; gap: 14px; }
.etichette-blocco { background: #fff; border: 1px solid var(--line, #e3e6ea); border-radius: 12px; padding: 12px 14px; }
.etichette-blocco h2 { margin: 0 0 10px; font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
.etichette-campi { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 10px; margin-bottom: 8px; }
.etichette-campi .campo--largo { grid-column: 1 / -1; }
.etichette-campi--misure .campo-etichetta { font-size: 0.72rem; }
.etichette-scelta-testa { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin: 6px 0; font-size: 0.85rem; }
.etichette-tutti { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font-weight: 600; }
.etichette-conteggio { color: var(--muted); }
.etichette-articoli { max-height: 320px; overflow: auto; border: 1px solid var(--line, #e3e6ea); border-radius: 8px; }
.etichette-articolo { display: grid; grid-template-columns: auto 1fr 64px; gap: 8px; align-items: center; padding: 6px 8px; border-top: 1px solid var(--line, #eef0f2); cursor: pointer; font-size: 0.88rem; }
.etichette-articolo:first-child { border-top: 0; }
.etichette-articolo:hover { background: var(--accent-soft); }
.etichette-articolo--scelto { background: color-mix(in srgb, var(--accent-soft) 60%, transparent); }
.etichette-articolo-testo { display: grid; gap: 1px; min-width: 0; }
.etichette-articolo-testo small { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.etichette-copie { width: 64px; padding: 3px 6px; font-size: 0.85rem; }
.etichette-preset { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.etichette-preset-voce { display: grid; gap: 1px; text-align: left; padding: 6px 10px; border: 1px solid var(--line, #dfe3e7); border-radius: 8px; background: #fff; cursor: pointer; font: inherit; }
.etichette-preset-voce strong { font-size: 0.82rem; }
.etichette-preset-voce small { font-size: 0.7rem; color: var(--muted); }
.etichette-preset-voce--attivo { border-color: var(--accent-scuro); background: var(--accent-soft); }
.etichette-flag { display: flex; align-items: center; gap: 6px; font-size: 0.86rem; margin: 4px 0; cursor: pointer; }
.etichette-nota { margin: 6px 0 0; font-size: 0.8rem; color: var(--muted); }
.etichette-dati { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 10px; margin-bottom: 8px; }
.etichette-anteprima { position: sticky; top: 12px; }
.etichette-anteprima-testa { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 8px; }
.etichette-anteprima-testa h2 { margin: 0; font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
.etichette-anteprima-testa span { font-size: 0.85rem; color: var(--muted); }
.etichette-fogli { overflow: hidden; }
.foglio-numero { font-size: 0.75rem; color: var(--muted); margin: 0 0 4px; }
.foglio-a4 { box-sizing: border-box; width: 210mm; height: 297mm; background: #fff; box-shadow: 0 2px 12px rgba(0,0,0,.15); transform-origin: top left; overflow: hidden; }
.foglio-griglia { display: grid; align-content: start; justify-content: start; }
.etichetta { box-sizing: border-box; overflow: hidden; display: flex; align-items: center; justify-content: center; text-align: center; line-height: 1.15; color: #000; background: #fff; }
.etichetta--bordo { outline: 0.2mm dashed #999; outline-offset: -0.2mm; }
.etichetta--vuota { outline: 0.2mm dotted #ddd; outline-offset: -0.2mm; }
.etichetta-dentro { display: grid; gap: 0.3mm; padding: 0.6mm; max-width: 100%; }
.etichetta-riga { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.etichetta strong.etichetta-riga { font-weight: 700; }
.etichetta-barcode { display: block; margin: 0.3mm auto 0; max-width: 100%; }

@media print {
  body.pagina-etichette { background: #fff; }
  body.pagina-etichette .topbar, body.pagina-etichette .etichette-pannello, body.pagina-etichette .pagina-testa,
  body.pagina-etichette .etichette-anteprima-testa, body.pagina-etichette .foglio-numero, body.pagina-etichette .barra { display: none !important; }
  body.pagina-etichette .layout, body.pagina-etichette .etichette-layout, body.pagina-etichette .etichette-anteprima, body.pagina-etichette .etichette-fogli { display: block; margin: 0; padding: 0; overflow: visible; position: static; }
  body.pagina-etichette .foglio-a4 { transform: none !important; margin: 0 !important; box-shadow: none; page-break-after: always; break-after: page; }
  body.pagina-etichette .foglio-a4:last-child { page-break-after: auto; break-after: auto; }
  body.pagina-etichette .etichetta--vuota { outline: none; }
  @page { size: A4 portrait; margin: 0; }
}

.storico-elimina { color: var(--errore); border-color: color-mix(in srgb, var(--errore) 35%, transparent); }
.storico-elimina:hover { background: var(--errore-soft); }
@media print { .storico-azioni, .storico-elimina { display: none !important; } }