/* Gestionale Plumake — design "direzione 1a" (design_handoff_gestionale_ui) */

/* Font ospitati qui (niente Google): sottoinsieme latin, licenza OFL in fonts/OFL-*.txt.
   Montserrat e' variabile (un file per 400–800); di Plex Mono servono 400, 500 (.cod.piccolo), 600. */
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url("fonts/montserrat-latin-var.311d352d9323.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("fonts/ibm-plex-mono-latin-400.79936b18df9f.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("fonts/ibm-plex-mono-latin-500.b1c8a895f5fd.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("fonts/ibm-plex-mono-latin-600.5a2ce7798732.woff2") format("woff2"); }

:root {
  --bg: #f7f6f4; --surface: #fff; --surface-2: #faf9f7;
  --text: #1d1d1f; --text-2: #3a3a3e; --muted: #6b6b70;
  /* --input-line: bordo scuro dei campi di testo e delle select (.cerca, .select-chip, campi di
     .form-grid e .campo, .rapido input, .salvato form input), >= 3:1 su --surface, --bg e --surface-2
     (chiaro 3,42 / 3,17 / 3,25; scuro #75727c 3,52 / 3,86 / 3,27): un campo vuoto si riconosce solo
     dal bordo. --btn-line resta chiaro su pulsanti e chip (.btn.sec, .btn.x, .chip, .azione, .frecce)
     e --drop-line sul riquadro PDF: hanno gia' testo o icona, il 3:1 non serve e peserebbero troppo. */
  --line: #e6e3e0; --line-2: #f1eeeb; --input-line: #8f8a85; --btn-line: #e0dcd8;
  --accent: #96368b; --accent-hover: #7d2d74; --accent-soft: #f4e8f2; --accent-softline: #e3cfe0;
  --ok: #1f7a3f; --ok-soft: #e5f3ea;
  --warn: #9a5b00; --warn-soft: #fcf1dc; --warn-dot: #d98b0b;
  --err: #b3261e; --err-soft: #fbe5e3;
  --info: #2b4a78; --info-soft: #e7eef9;
  --row-hover: #fdfafc; --row-sub: #fcfbfa; --row-flash: #f3faf5; --drop-line: #d8c3d4;
  --toast-bg: #1d1d1f; --toast-fg: #fff; --on-accent: #fff;
  --toast-ok: #6fcf8f; --toast-warn: #d98b0b; --toast-err: #ff8a80;
  --ombra-lieve: rgba(0,0,0,.06); --ombra: rgba(0,0,0,.12); --ombra-barra: rgba(0,0,0,.15); --ombra-forte: rgba(0,0,0,.2);
  /* freccia della select: il colore sta nel data: URI (var() li' non funziona), uno per tema = --muted */
  --select-freccia: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5'%3E%3Cpath d='M0 0h8L4 5z' fill='%236b6b70'/%3E%3C/svg%3E");
  --r-sm: 4px; --r: 8px; --r-md: 10px; --r-lg: 12px; --r-pill: 99px;
  /* altezza della testata fissa (.header): serve anche a scroll-padding-top, cosi' il focus
     da tastiera e i salti ad ancora non finiscono sotto la testata */
  --altezza-testata: 60px;
  /* barra fissa in fondo all'anteprima di Carica PDF, usata solo come scroll-padding-bottom:
     >= all'altezza reale sopra gli 820px (misurata in Chrome: 67px a 1280, 77 a 1000, 93 fra
     821 e 900); sotto gli 820px la barra non e' fissa e il token vale 0 (blocco 820) */
  --altezza-barra-fissa: 96px;
  --font: "Montserrat", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Consolas, monospace;
  /* scala delle spaziature (margin, padding, gap): passi da 4px */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-7: 32px; --s-8: 40px;
  /* mezzi passi (--s-N-5 = a meta' fra --s-N e il passo dopo): misure che l'handoff prescrive
     (chip 6px 12px, pulsanti 10px 16px, azione 8px 14px, celle 12px 18px, card 22px, header e fascia 28px) */
  --s-1-5: 6px; --s-2-5: 10px; --s-3-5: 14px; --s-4-5: 18px; --s-5-5: 22px; --s-6-5: 28px;
  /* scala dei caratteri */
  --fs-glifo: 8px;   /* frecce d'ordinamento: un segno, non testo da leggere */
  --fs-xs: 11px; --fs-s: 12px; --fs-m: 13px; --fs-base: 14px; --fs-l: 15px; --fs-xl: 22px; --fs-xxl: 28px;
  /* Valori rimasti in px (margin, padding, gap, font-size), uno per riga:
     - 1px verticale: padding di .tag e kbd (etichette alte quanto il testo)
     - 2px verticale: padding di .badge, .salvato .nt e .toast button
     - 2px di distanza fra righe di testo: margin-top di .nota, .riquadro .v, .dettaglio .intesta .ds; padding-top di .dati dt
     - 2px di gap: .menu .tema, .elenco, .dati a 820px; margin di .menu .tema (2px sopra); margin-right di .chip-grande b
     - -1px: margin dello schema .sr-only (.sr-only e .azione span a 820px)
     - -1px in calc(): .rapido input:focus-visible, compensa il bordo che passa da 1 a 2px
     - -2px: margin di .toast button, allarga il bersaglio a 24px senza spostare il testo
     - 9px: font-size di .azione i.pdf ("PDF" nell'icona, handoff; usato una volta)
     - 10px: font-size di .tag (tag articolo, handoff; usato una volta)
     - raggi 6, 7, 9, 14px: prescritti dall'handoff (non sono spaziature) */
  font-family: var(--font); font-size: var(--fs-base); color: var(--text);
  color-scheme: light;
}
/* tema: automatico (segue il sistema) salvo scelta dal menu avatar -> data-tema su <html>.
   I due blocchi scuri qui sotto sono uguali: tenere allineati (uno vale col tema automatico,
   l'altro quando il tema scuro e' scelto dal menu). */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="chiaro"]) {
    --bg: #161518; --surface: #1f1e22; --surface-2: #252429;
    --text: #ecebee; --text-2: #cfcdd3; --muted: #9c9aa2;
    --line: #34323a; --line-2: #2b2a30; --input-line: #75727c; --btn-line: #3d3b43;
    --accent: #d27fc6; --accent-hover: #e199d6; --accent-soft: #3a2437; --accent-softline: #5a3755;
    --ok: #6fcf8f; --ok-soft: #1d3326;
    --warn: #f0b95c; --warn-soft: #3a2e17; --warn-dot: #e59f2e;
    --err: #ff8a80; --err-soft: #3d1f1d;
    --info: #9dbbe8; --info-soft: #1f2a3a;
    --row-hover: #26232a; --row-sub: #1b1a1e; --row-flash: #1d3326; --drop-line: #5a3755;
    --toast-bg: #ecebee; --toast-fg: #1d1d1f; --on-accent: #1d1d1f; --toast-ok: #1f7a3f;
    --toast-warn: #9a5b00; --toast-err: #b3261e;
    --ombra-lieve: rgba(0,0,0,.3); --ombra: rgba(0,0,0,.4); --ombra-barra: rgba(0,0,0,.45); --ombra-forte: rgba(0,0,0,.5);
    --select-freccia: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5'%3E%3Cpath d='M0 0h8L4 5z' fill='%239c9aa2'/%3E%3C/svg%3E");
    color-scheme: dark;
  }
}
:root[data-tema="scuro"] {
  --bg: #161518; --surface: #1f1e22; --surface-2: #252429;
  --text: #ecebee; --text-2: #cfcdd3; --muted: #9c9aa2;
  --line: #34323a; --line-2: #2b2a30; --input-line: #75727c; --btn-line: #3d3b43;
  --accent: #d27fc6; --accent-hover: #e199d6; --accent-soft: #3a2437; --accent-softline: #5a3755;
  --ok: #6fcf8f; --ok-soft: #1d3326;
  --warn: #f0b95c; --warn-soft: #3a2e17; --warn-dot: #e59f2e;
  --err: #ff8a80; --err-soft: #3d1f1d;
  --info: #9dbbe8; --info-soft: #1f2a3a;
  --row-hover: #26232a; --row-sub: #1b1a1e; --row-flash: #1d3326; --drop-line: #5a3755;
  --toast-bg: #ecebee; --toast-fg: #1d1d1f; --on-accent: #1d1d1f; --toast-ok: #1f7a3f;
  --toast-warn: #9a5b00; --toast-err: #b3261e;
  --ombra-lieve: rgba(0,0,0,.3); --ombra: rgba(0,0,0,.4); --ombra-barra: rgba(0,0,0,.45); --ombra-forte: rgba(0,0,0,.5);
  --select-freccia: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5'%3E%3Cpath d='M0 0h8L4 5z' fill='%239c9aa2'/%3E%3C/svg%3E");
  color-scheme: dark;
}

* { box-sizing: border-box; }
/* testata fissa: un elemento che prende il focus (Tab) o un'ancora si fermano sotto la testata */
html { scroll-padding-top: calc(var(--altezza-testata) + var(--s-2)); }
/* ... e sopra la barra fissa in fondo, dove c'e' (anteprima di Carica PDF) */
html:has(.barra-fissa) { scroll-padding-bottom: calc(var(--altezza-barra-fissa) + var(--s-2)); }
body { margin: 0; background: var(--bg); color: var(--text); }
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); text-decoration: underline; }
.mono { font-family: var(--mono); }
.muted { color: var(--muted); }
.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tab { font-variant-numeric: tabular-nums; }
input, select, textarea, button { font: inherit; color: inherit; }
[hidden] { display: none !important; }
/* nascosto alla vista ma raggiungibile da tastiera e screen reader (al posto di display:none) */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); clip-path: inset(50%); white-space: nowrap; border: 0; }
/* focus da tastiera: sempre visibile (--accent: 6,57:1 sul chiaro) */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* "Vai al contenuto": primo elemento della pagina, compare solo quando prende il focus */
.sr-only.salta:focus { position: fixed; top: 10px; left: 10px; z-index: 100; width: auto; height: auto; margin: 0;
  padding: var(--s-2-5) var(--s-4); overflow: visible; clip: auto; clip-path: none; background: var(--surface); color: var(--accent);
  border: 1px solid var(--accent); border-radius: var(--r); font-weight: 600; box-shadow: 0 8px 24px var(--ombra); }

/* ---- header ---------------------------------------------------------- */
.header { height: var(--altezza-testata); display: flex; align-items: center; gap: var(--s-6-5); padding: 0 var(--s-6-5);
  background: var(--surface); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 20; }
.marchio { display: flex; align-items: baseline; gap: var(--s-2); text-decoration: none !important; }
.marchio b { font-weight: 800; letter-spacing: .14em; color: var(--accent); font-size: var(--fs-l); }
.nav { display: flex; gap: var(--s-1); height: 100%; }
.nav a { display: flex; align-items: center; padding: 0 var(--s-3-5); font-size: var(--fs-base); font-weight: 500;
  color: var(--text-2); text-decoration: none; }
.nav a:not(.on):hover { color: var(--accent); text-decoration: none; }
.nav a.on { font-weight: 600; color: var(--accent); box-shadow: inset 0 -2px 0 var(--accent); }
.header-dx { margin-left: auto; display: flex; align-items: center; gap: var(--s-2-5); }
.azione { display: inline-flex; align-items: center; gap: var(--s-2); border: 1px solid var(--btn-line);
  border-radius: var(--r); padding: var(--s-2) var(--s-3-5); font-size: var(--fs-m); font-weight: 600; color: var(--text);
  background: var(--surface); white-space: nowrap; text-decoration: none !important; }
.azione:hover { border-color: var(--accent); color: var(--text); }
.azione.on { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.azione i { font-style: normal; width: 18px; height: 18px; border-radius: var(--r-sm); background: var(--accent-soft);
  color: var(--accent); display: inline-flex; align-items: center; justify-content: center; font-size: var(--fs-s); font-weight: 700; }
.azione i.pdf { font-size: 9px; font-weight: 800; width: auto; padding: 0 var(--s-1); }   /* 9px: "PDF" come da handoff (eccezione) */
.sep-v { width: 1px; height: 24px; background: var(--line); }
.avatar { position: relative; }
.avatar summary { list-style: none; width: 32px; height: 32px; border-radius: 50%; background: var(--accent);
  color: var(--on-accent); font-size: var(--fs-s); font-weight: 700; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.avatar summary::-webkit-details-marker { display: none; }
.menu { position: absolute; right: 0; top: 42px; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-md); box-shadow: 0 8px 24px var(--ombra); min-width: 190px; padding: var(--s-1-5); z-index: 30; }
.menu > * { display: block; width: 100%; padding: var(--s-2) var(--s-2-5); border-radius: 6px; font-size: var(--fs-m); text-align: left; }
.menu .chi { color: var(--muted); font-weight: 600; border-bottom: 1px solid var(--line-2); border-radius: 0; margin-bottom: var(--s-1); }
.menu a { color: var(--text); font-weight: 500; text-decoration: none; }
.menu a:hover, .menu button:hover { background: var(--accent-soft); color: var(--accent); }
.menu form { padding: 0; }
.menu button { background: none; border: 0; cursor: pointer; padding: var(--s-2) var(--s-2-5); width: 100%; text-align: left; font-weight: 500; border-radius: 6px; }
.menu .tema { display: flex; gap: 2px; padding: var(--s-1); margin: 2px 0 var(--s-1); background: var(--surface-2);
  border: 1px solid var(--line-2); border-radius: var(--r); }
/* bersaglio di almeno 24px (WCAG 2.5.8): padding verticale di 6px e altezza minima */
.menu .tema button { flex: 1; text-align: center; padding: var(--s-1-5) var(--s-1); min-height: var(--s-6); font-size: var(--fs-s); color: var(--muted); }
.menu .tema button[aria-pressed="true"] { background: var(--surface); color: var(--text); font-weight: 600;
  box-shadow: 0 1px 2px var(--ombra); }

/* ---- pagina ----------------------------------------------------------- */
.pagina { max-width: 1280px; margin: 0 auto; }
.fascia { padding: var(--s-6-5) var(--s-7) var(--s-6); }
.corpo { padding: 0 var(--s-7) var(--s-8); }
.corpo.senza-fondo { padding-bottom: 0; }   /* la barra fissa fa da fondo; (0,2,0) vince anche su .corpo a 820px */
.titolo { display: flex; align-items: flex-end; gap: var(--s-3-5); flex-wrap: wrap; }
.titolo h1 { font-size: var(--fs-xxl); font-weight: 700; letter-spacing: -.01em; margin: 0; line-height: 1.15; }
.titolo h1.mono { font-weight: 600; letter-spacing: 0; }
.titolo .sotto { font-size: var(--fs-m); color: var(--muted); padding-bottom: var(--s-1); }
.titolo .dx { margin-left: auto; display: flex; gap: var(--s-2-5); align-self: center; }
.briciole { font-size: var(--fs-s); font-weight: 600; color: var(--muted); margin-bottom: var(--s-2-5); }
.briciole a { color: var(--accent); }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s-1-5); background: var(--accent);
  color: var(--on-accent); border: 1px solid var(--accent); border-radius: var(--r); padding: var(--s-2-5) var(--s-4);
  font-size: var(--fs-m); font-weight: 600; cursor: pointer; white-space: nowrap; text-decoration: none !important; }
.btn:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--on-accent); }
.btn.sec { background: var(--surface); color: var(--text); border-color: var(--btn-line); }
.btn.sec:hover { border-color: var(--accent); background: var(--surface); color: var(--text); }
.btn.acc { background: var(--surface); color: var(--accent); border-color: var(--accent); }
.btn.acc:hover { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); }
.btn.mini { padding: var(--s-1) var(--s-2-5); font-size: var(--fs-s); border-radius: 7px; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.btn.x { min-width: 24px; min-height: 24px; padding: var(--s-1) var(--s-2); font-size: var(--fs-s); background: var(--surface); color: var(--muted); border-color: var(--btn-line); }
.btn.x:hover { color: var(--err); border-color: var(--err); }

/* barra di ricerca / barra nuovo prezzo */
.cerca { height: 50px; display: flex; align-items: center; gap: var(--s-3); padding: 0 var(--s-4); background: var(--surface);
  border: 1px solid var(--input-line); border-radius: var(--r-md); margin-top: var(--s-4-5); }
.cerca:focus-within { box-shadow: 0 0 0 3px var(--accent-soft); border-color: var(--accent); }
/* focus sul contenitore: bordo --accent (6,57:1); l'alone --accent-soft resta solo decorativo */
.cerca input:focus-visible { outline: 0; }
.cerca:has(input:focus-visible) { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
/* barre con piu' campi (nuovo prezzo, aggiungi componente): si segna anche il singolo campo attivo */
#nuovo-prezzo input:focus-visible { box-shadow: inset 0 -2px 0 var(--accent); }
.cerca svg { flex: none; }
.cerca input { flex: 1; min-width: 0; border: 0; background: transparent; font-size: var(--fs-l); height: 100%; }
.cerca .aiuto { font-size: var(--fs-s); color: var(--muted); white-space: nowrap; }
.cerca .lbl { font-size: var(--fs-m); font-weight: 600; color: var(--muted); white-space: nowrap; }
.cerca .div { width: 1px; height: 24px; background: var(--line); flex: none; }
.cerca input.importo { font-weight: 700; max-width: 150px; }
.cerca input[type=date] { max-width: 150px; font-size: var(--fs-m); }
.cerca input.qta { max-width: 44px; }   /* quantita' nel form "aggiungi componente" */
.cerca .anteprima { font-size: var(--fs-s); font-weight: 700; color: var(--ok); white-space: nowrap; }
.cerca .anteprima.giu { color: var(--warn); }
.cerca .btn { padding: var(--s-2) var(--s-4); border-radius: 7px; }
input::placeholder { color: var(--muted); font-weight: 400; }
/* rotellina "caricamento in corso" (aria-hidden nel markup): visibile solo durante la richiesta htmx */
.spinner { display: inline-block; width: 14px; height: 14px; border: 2px solid var(--line); border-top-color: var(--accent);
  border-radius: 50%; flex: none; vertical-align: -2px; }
/* gira solo l'indicatore della richiesta htmx, o quello acceso a mano (.attivo: invio del PDF, form normale) */
.spinner.htmx-request, .spinner.attivo { animation: gira .7s linear infinite; }
@keyframes gira { to { transform: rotate(360deg); } }

/* chip filtro */
.chips { display: flex; gap: var(--s-2); flex-wrap: wrap; align-items: center; margin-top: var(--s-3-5); }
.chip { display: inline-flex; align-items: center; gap: var(--s-1-5); padding: var(--s-1-5) var(--s-3); border-radius: var(--r-pill);
  font-size: var(--fs-s); font-weight: 600; background: var(--surface); border: 1px solid var(--btn-line);
  color: var(--text); cursor: pointer; white-space: nowrap; user-select: none; text-decoration: none !important; }
/* l'input del chip ha la classe .sr-only: il focus da tastiera si vede sul chip */
.chip:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.chip .n { color: var(--muted); }
.chip.warn { background: var(--warn-soft); color: var(--warn); border-color: transparent; }
.chip.warn .n { color: var(--warn); }
.chip.warn::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--warn-dot); }
.chip.err { background: var(--err-soft); color: var(--err); border-color: transparent; }
.chip.err .n { color: var(--err); }
.chip.ok { background: var(--ok-soft); color: var(--ok); border-color: transparent; }
.chip.ok .n { color: var(--ok); }
.chip.acc { background: var(--accent-soft); color: var(--accent); border-color: transparent; }
.chip.acc .n { color: var(--accent); }
.chip:not(.static):not(:has(input:checked)):hover { border-color: var(--accent); }
/* chip attivo: --on-accent e' bianco nel chiaro (16,8:1 su --text) e #1d1d1f nello scuro (14,2:1);
   il conteggio a opacita' .75 resta sopra 4,5:1 (9,9 / 6,7) */
.chip:has(input:checked) { background: var(--text); color: var(--on-accent); border-color: var(--text); }
.chip:has(input:checked) .n { color: inherit; opacity: .75; }
.chip.static { cursor: default; }
.chips .sep-v { height: 22px; margin: 0 var(--s-1); }
.chips .dx { margin-left: auto; }
.chips .testo { font-size: var(--fs-s); color: var(--muted); }
.select-chip { appearance: none; background: var(--surface) var(--select-freccia) no-repeat right var(--s-3) center;
  border: 1px solid var(--input-line); border-radius: var(--r); padding: var(--s-2) var(--s-7) var(--s-2) var(--s-3); font-size: var(--fs-s); font-weight: 600; cursor: pointer; max-width: 260px; }
.select-chip:hover { border-color: var(--accent); }
/* filtri del Magazzino (_magazzino_chip.html): stato a segmenti, «solo…» con la casella, campi col nome */
.filtri { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-3); margin-top: var(--s-3-5); }
.filtri-riga { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-4); }
/* scelta unica: segmenti uniti, uno solo acceso (stesso acceso dei chip: fondo --text) */
.segmenti { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 2px; background: var(--surface-2);
  border: 1px solid var(--btn-line); border-radius: var(--r-pill); }
.segmento { display: inline-flex; align-items: center; gap: var(--s-1-5); padding: var(--s-1-5) var(--s-3); border-radius: var(--r-pill);
  font-size: var(--fs-s); font-weight: 600; color: var(--text-2); cursor: pointer; white-space: nowrap; user-select: none; }
.segmento .n { color: var(--muted); }
.segmento:not(:has(input:checked)):hover { background: var(--surface); color: var(--text); }
.segmento:has(input:checked) { background: var(--text); color: var(--on-accent); }
.segmento:has(input:checked) .n { color: inherit; opacity: .75; }
.segmento:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
/* si accende e si spegne: la casella resta in vista */
.interruttore { display: inline-flex; align-items: center; gap: var(--s-2); padding: var(--s-1-5) var(--s-3); border-radius: var(--r-pill);
  font-size: var(--fs-s); font-weight: 600; background: var(--surface); border: 1px solid var(--btn-line); cursor: pointer; white-space: nowrap; user-select: none; }
.interruttore input { margin: 0; width: 14px; height: 14px; accent-color: var(--accent); cursor: pointer; }
.interruttore .n { color: var(--muted); }
.interruttore:hover { border-color: var(--accent); }
.interruttore:has(input:checked) { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.interruttore:has(input:checked) .n { color: var(--accent); }
.campo-filtro { display: inline-flex; align-items: center; gap: var(--s-2); }
.etichetta-filtro { font-size: var(--fs-s); font-weight: 600; color: var(--muted); }
.togli-filtri { margin-left: auto; font-size: var(--fs-s); font-weight: 600; }
/* commesse scelte (chip) e testo per cercarne altre: un solo campo; l'elenco a spunta si apre sotto */
.campo-commesse { position: relative; display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--s-1); min-width: 220px;
  padding: 2px var(--s-1); background: var(--surface); border: 1px solid var(--input-line); border-radius: var(--r); cursor: text; }
.campo-commesse:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.campo-commesse .chip { padding: 2px var(--s-2); }
.scegli-commessa > input { width: 9em; border: 0; background: transparent; padding: var(--s-1) var(--s-1-5); font-size: var(--fs-s); font-weight: 600; }
.scegli-commessa > input:focus-visible { outline: 0; }
.commesse-trovate { position: absolute; left: 0; top: calc(100% + var(--s-1)); z-index: 30; min-width: 260px; max-height: 340px;
  overflow-y: auto; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md);
  box-shadow: 0 8px 24px var(--ombra); padding: var(--s-1-5); cursor: default; }
.commesse-trovate:not(:has(*)) { display: none; }
.trovate-testa { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3);
  padding: var(--s-1-5) var(--s-2); font-size: var(--fs-s); color: var(--muted); }
.trovate-testa .come-link { font-size: var(--fs-s); font-weight: 600; }
.trovate-lista { list-style: none; margin: 0; padding: 0; }
.trovate-lista label { display: flex; align-items: center; gap: var(--s-2); padding: var(--s-1-5) var(--s-2);
  border-radius: 6px; font-size: var(--fs-m); cursor: pointer; }
.trovate-lista label:hover { background: var(--accent-soft); }
.trovate-lista .n { margin-left: auto; color: var(--muted); font-size: var(--fs-s); }
.trovate-nota { margin: 0; padding: var(--s-1-5) var(--s-2); font-size: var(--fs-s); color: var(--muted); }
.chip-grande { padding: var(--s-2) var(--s-3-5); border-radius: var(--r-md); font-size: var(--fs-m); font-weight: 600; }
.chip-grande b { font-size: var(--fs-l); font-weight: 700; margin-right: 2px; }

/* card + griglia tabellare */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; }
.card + .card { margin-top: var(--s-5); }
.card-testa { display: flex; align-items: baseline; gap: var(--s-2-5); padding: var(--s-4) var(--s-4-5); border-bottom: 1px solid var(--line); }
.card-testa h2 { font-size: var(--fs-base); font-weight: 700; margin: 0; }
.card-testa .n { font-size: var(--fs-s); color: var(--muted); }
.card-testa .dx { margin-left: auto; font-size: var(--fs-s); font-weight: 600; }
.griglia .r { display: grid; grid-template-columns: var(--cols); gap: var(--s-4); padding: var(--s-3) var(--s-4-5); align-items: center;
  border-top: 1px solid var(--line-2); font-size: var(--fs-m); min-width: 0; }
.griglia .r > * { min-width: 0; }
.griglia .r.testa { border-top: 0; background: var(--surface-2); font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: var(--muted); padding-top: var(--s-2-5); padding-bottom: var(--s-2-5); }
.griglia .r[data-href] { cursor: pointer; }
.griglia .r[data-href]:hover, .griglia a.r:hover { background: var(--row-hover); }
.griglia .r.sub { background: var(--row-sub); font-size: var(--fs-s); font-weight: 500; }
.griglia .r.sub .rientro { padding-left: var(--s-6); }
.griglia .r.attuale { background: var(--row-hover); }
.griglia .vuoto { padding: var(--s-5-5) var(--s-4-5); color: var(--muted); border-top: 1px solid var(--line-2); font-size: var(--fs-m); }
/* griglie larghe senza regole per schermi stretti: sotto la larghezza --min scorrono in orizzontale
   invece di essere tagliate. Tutti i figli (testata, righe, vuoto, piede) hanno la stessa larghezza
   minima, cosi' le colonne restano allineate e bordi e sfondi arrivano fino in fondo.
   overflow-y resta hidden (da .card): gli angoli restano arrotondati.
   --min = colonne fisse + circa 120-160px per la colonna 1fr + gap + padding (definito con --cols). */
.card.griglia:is(.t-comm, .t-pezzi, .t-doc, .t-docs, .t-posta, .t-distinta, .t-pdf, .t-mag) { overflow-x: auto; }
.card.griglia:is(.t-comm, .t-pezzi, .t-doc, .t-docs, .t-posta, .t-distinta, .t-pdf, .t-mag) > * { min-width: var(--min); }
.cod { font-family: var(--mono); font-weight: 600; color: var(--accent); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
.cod.piccolo { font-size: var(--fs-s); font-weight: 500; color: var(--text); }
.link-commessa { font-size: var(--fs-s); font-weight: 500; }   /* commessa nelle righe di pezzi */
/* pulsante con l'aspetto di un link ("+ Aggiungi componente": apre una barra, non cambia pagina) */
.come-link { background: none; border: 0; padding: 0; color: var(--accent); cursor: pointer; text-align: left; }
.come-link:hover { color: var(--accent-hover); text-decoration: underline; }
.desc { color: var(--text-2); line-height: 1.4; }
.nota { font-size: var(--fs-xs); color: var(--muted); margin-top: 2px; }
.forte { font-weight: 700; }
.piede { display: flex; align-items: center; justify-content: space-between; padding: var(--s-3-5) var(--s-4-5); border-top: 1px solid var(--line-2);
  font-size: var(--fs-s); color: var(--muted); }
/* sotto la distinta: «+ Aggiungi componente», e accanto la barra quando si apre */
.piede.aggiungi { justify-content: flex-start; flex-wrap: wrap; gap: var(--s-3); font-size: var(--fs-m); }
.piede.aggiungi .riga { margin-top: 0; }
/* «Aggiungi componente»: codice e quantità sono due campi .campo separati */
.aggiungi-componente { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2-5); margin-top: var(--s-3); }
.piede.aggiungi .aggiungi-componente { margin-top: 0; }
.aggiungi-componente[hidden] { display: none; }
.aggiungi-componente .campo.codice { width: 220px; }
.aggiungi-componente .campo.qta { width: 72px; text-align: right; }
.aggiungi-componente .lbl { font-size: var(--fs-s); font-weight: 600; color: var(--text-2); }
.frecce { display: flex; gap: var(--s-1-5); }
.frecce a, .frecce span { border: 1px solid var(--btn-line); border-radius: 6px; padding: var(--s-1) var(--s-2-5); color: var(--text); text-decoration: none; }
.frecce span[aria-disabled="true"] { color: var(--muted); cursor: not-allowed; }
.frecce a:hover { border-color: var(--accent); }

/* tag, badge, eta' */
.tags { display: flex; gap: var(--s-1); flex-wrap: wrap; margin-top: var(--s-1); }
.tag { display: inline-block; font-size: 10px; font-weight: 700; padding: 1px var(--s-1-5); border-radius: var(--r-sm);
  background: var(--info-soft); color: var(--info); white-space: nowrap; font-family: var(--font); }
.tag.acc { background: var(--accent-soft); color: var(--accent); }
.tag.err { background: var(--err-soft); color: var(--err); }
.tag.warn { background: var(--warn-soft); color: var(--warn); }
.tag.ok { background: var(--ok-soft); color: var(--ok); }
/* «riservato a …» sotto il badge dello stato: il nome del cliente non allarga la colonna */
.tag.riservato { display: block; width: fit-content; max-width: 100%; margin-top: var(--s-1);
  overflow: hidden; text-overflow: ellipsis; }
.badge { display: inline-block; font-size: var(--fs-xs); font-weight: 700; padding: 2px var(--s-2); border-radius: var(--r-pill); white-space: nowrap; }
.badge.disponibile, .badge.ok { background: var(--ok-soft); color: var(--ok); }
.badge.prenotato, .badge.warn { background: var(--warn-soft); color: var(--warn); }
.badge.installato, .badge.info { background: var(--info-soft); color: var(--info); }
.badge.acc { background: var(--accent-soft); color: var(--accent); }
.badge.err { background: var(--err-soft); color: var(--err); }
.badge.neutro { background: var(--line-2); color: var(--muted); }
/* data del prezzo: niente pallino ne' etichetta; oltre la soglia la data e' in --warn
   (5,0-5,4:1 in chiaro, 8,7-10,2:1 in scuro) e in grassetto, per non affidarsi al solo colore
   (come .info .vecchio); l'eta' e' nel title, la legenda in Magazzino */
.eta { font-variant-numeric: tabular-nums; white-space: nowrap; }
.eta.corta { font-size: var(--fs-s); }
.eta.corta, .eta.manca, .eta.spento { color: var(--muted); }
.eta.vecchio:not(.spento) { color: var(--warn); font-weight: 600; }
.legenda { margin: var(--s-1) 0 0; }
.manca-prezzo { color: var(--err); }

/* colonne delle griglie */
.t-listino { --cols: 230px 1fr 70px 120px 120px 170px; }
.t-mag { --cols: 124px 130px 1fr 120px 100px 160px 90px 100px; --min: 0; }   /* --min solo fra 601 e 820px */
.t-mag .r { gap: var(--s-3); }   /* righe alte come le altre griglie (prima 11px: fuori scala) */
.t-storico { --cols: 170px 120px 120px 1fr 120px; }
.t-storico .dett-fonte { font-size: var(--fs-s); }
.t-distinta { --cols: 190px 1fr 70px 120px 120px 50px; --min: 830px; }   /* 550 + 1fr 160 + 5 gap 80 + padding 36 */
.t-pezzi { --cols: 104px 96px 110px 1fr; --min: 520px; }           /* 310 + 1fr 126 + 3 gap 48 + padding 36 */
.t-doc { --cols: 1fr 90px 52px 80px; --min: 448px; }               /* 222 + 1fr 140 + 3 gap 48 + padding 36; Qtà 52: c'e' posto per la freccia */
.t-comm { --cols: 124px 130px 1fr 92px 96px 84px; --min: 800px; }  /* 526 + 1fr 160 + 5 gap 80 + padding 36 */
.t-pdf { --cols: 50px 1fr 150px 50px 120px 130px 220px; --min: 1020px; }   /* 720 + 1fr 160 + 6 gap 96 + padding 36 */
.t-docs { --cols: 1fr 120px 150px 60px; --min: 580px; }            /* 330 + 1fr 160 + 3 gap 48 + padding 36 */
.t-posta { --cols: 1fr 220px 120px 90px; --min: 680px; }           /* 430 + 1fr 166 + 3 gap 48 + padding 36 */
.t-posta .esito { padding: var(--s-3) var(--s-4-5); border-top: 1px solid var(--line-2); font-size: var(--fs-s); color: var(--muted); }
.t-posta .esito.err { color: var(--err); }
.t-posta .r a { overflow-wrap: anywhere; }   /* nomi dei PDF lunghi e senza spazi */
.t-da-risolvere { --cols: 240px 1fr; }
.t-riclass { --cols: minmax(0, 1fr) 80px minmax(0, 2fr); }
.t-riclass-art { --cols: 200px minmax(0, 1fr) minmax(0, 1fr); }   /* qui, prima dei @media: sotto i 600px diventa una colonna sola */
.t-descr { --cols: 24px 170px minmax(0, 1fr) minmax(0, 1.3fr); }
.t-descr .campo { height: 36px; font-size: var(--fs-s); }
.t-descr .descr-nota { margin: 0; padding: var(--s-3) var(--s-4-5); border-bottom: 1px solid var(--line-2); }

.duo { display: grid; grid-template-columns: 1.2fr 1fr; gap: var(--s-5); margin-top: var(--s-5); align-items: start; }

/* ---- scheda articolo ------------------------------------------------ */
.pannello { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--s-4-5) var(--s-5-5); margin-top: var(--s-4); }
.pannello > summary { cursor: pointer; font-weight: 700; list-style: none; }
.pannello-titolo { font-weight: 700; }
.dati { display: grid; grid-template-columns: 170px 1fr; gap: var(--s-1-5) var(--s-4); margin: var(--s-4) 0 0; font-size: var(--fs-base); }
.dati dt { font-size: var(--fs-s); font-weight: 600; color: var(--muted); padding-top: 2px; }
.dati dd { margin: 0; color: var(--text-2); line-height: 1.45; }
.riepilogo { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-5); }
.card.box { padding: var(--s-4) var(--s-4-5); }   /* riquadro di testo (riepilogo, composizione del pezzo) */
.riepilogo .box { font-size: var(--fs-m); margin-top: 0; }
.riepilogo h2 { font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 0 0 var(--s-2); }
.riepilogo .grande { font-size: var(--fs-xxl); font-weight: 700; line-height: 1.2; }
.riepilogo .grande.manca { color: var(--err); }
.riepilogo .riga { display: flex; gap: var(--s-1-5); flex-wrap: wrap; align-items: center; margin-top: var(--s-2-5); }
.dati.mini { grid-template-columns: 90px 1fr; gap: var(--s-1) var(--s-2-5); margin: 0; font-size: var(--fs-m); }
.dati.mini dt { font-size: var(--fs-xs); }
.composizione { display: flex; flex-direction: column; gap: var(--s-1-5); font-size: var(--fs-m); }
.nota-card { padding: var(--s-3-5) var(--s-4-5); border-bottom: 1px solid var(--line-2); font-size: var(--fs-m); }
.nota-card .cerca { margin-top: 0; }
.elimina { display: flex; gap: var(--s-3-5); align-items: center; flex-wrap: wrap; margin-top: var(--s-5); padding-top: var(--s-4);
  border-top: 1px solid var(--line-2); font-size: var(--fs-s); }
.btn.pericolo { background: var(--surface); color: var(--err); border-color: var(--err); }
.btn.pericolo:hover { background: var(--err-soft); color: var(--err); border-color: var(--err); }

/* popup di conferma (base.html, chiediConferma): <dialog> modale, compare con una piccola salita */
.dialogo { width: min(440px, calc(100vw - 2 * var(--s-4))); padding: 0; border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--surface); color: var(--text); box-shadow: 0 20px 48px var(--ombra-forte); }
.dialogo[open] { animation: dialogo-entra .18s ease-out; }
.dialogo::backdrop { background: var(--ombra-forte); backdrop-filter: blur(2px); }
.dialogo form { padding: var(--s-5-5) var(--s-6); }
.dialogo h2 { font-size: var(--fs-l); font-weight: 700; margin: 0; line-height: 1.3; }
.dialogo p { font-size: var(--fs-m); color: var(--text-2); line-height: 1.5; margin: var(--s-2-5) 0 0; }
.dialogo .azioni { display: flex; justify-content: flex-end; gap: var(--s-2-5); margin-top: var(--s-5-5); }
.dialogo .btn.pericolo { background: var(--err); color: var(--on-accent); border-color: var(--err); }
.dialogo .btn.pericolo:hover { background: var(--err); color: var(--on-accent); filter: brightness(.92); }
@keyframes dialogo-entra { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }
.dialogo-supporto { width: min(620px, calc(100vw - 2 * var(--s-4))); }
.dialogo-supporto form { padding: var(--s-5-5) var(--s-6); }
.dialogo-supporto h2 { font-size: var(--fs-l); font-weight: 700; margin: 0; line-height: 1.3; }
.supporto-intro { font-size: var(--fs-m); color: var(--text-2); line-height: 1.5; margin: var(--s-2-5) 0 var(--s-4); }
.supporto-campo { display: grid; gap: var(--s-1-5); margin-top: var(--s-3-5); }
.supporto-campo label { font-size: var(--fs-s); font-weight: 600; color: var(--muted); }
.supporto-campo textarea.campo { height: auto; min-height: 140px; padding: var(--s-2-5) var(--s-3); resize: vertical; }
.supporto-campo input.file { height: auto; padding: var(--s-2); }
.dialogo-supporto .azioni { margin-top: var(--s-5-5); }
.dialogo-supporto .azioni .btn[type=submit]:disabled { cursor: wait; }

/* ---- form ---------------------------------------------------------- */
.form-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--s-5-5) var(--s-6); max-width: 820px; }
.form-grid { display: grid; grid-template-columns: 180px 1fr; gap: var(--s-3) var(--s-4); align-items: center; }
.form-grid > label { font-size: var(--fs-s); font-weight: 600; color: var(--muted); }
/* aiuto ed errori si avvicinano al campo sopra togliendo un passo al gap della griglia (prima −6px) */
.form-grid .help { grid-column: 2; font-size: var(--fs-s); color: var(--muted); margin-top: calc(-1 * var(--s-1)); }
.form-grid .errorlist { grid-column: 2; color: var(--err); margin: calc(-1 * var(--s-1)) 0 0; padding: 0; list-style: none; font-size: var(--fs-s); font-weight: 600; }
.form-grid .azioni { grid-column: 2; display: flex; gap: var(--s-2-5); margin-top: var(--s-1-5); }
.form-grid input:not([type=checkbox]):not([type=radio]), .form-grid select, .form-grid textarea, .campo {
  width: 100%; height: 42px; border: 1px solid var(--input-line); border-radius: var(--r); padding: 0 var(--s-3);
  background: var(--surface); font-size: var(--fs-base); }
.form-grid textarea { height: auto; padding: var(--s-2-5) var(--s-3); }
/* focus: al posto dell'anello globale, bordo --accent spesso 2px (+ alone --accent-soft decorativo) */
.form-grid input:focus-visible, .form-grid select:focus-visible, .form-grid textarea:focus-visible, .campo:focus-visible {
  outline: 0; border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 0 0 4px var(--accent-soft); }
.form-grid input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--accent); }
.nota-form { font-size: var(--fs-s); color: var(--muted); margin-top: var(--s-4); line-height: 1.5; }
.nota-form.err { color: var(--err); }
/* Riclassifica: barra della lettura dal sito */
.lettura { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); margin-top: var(--s-4); }
.lettura progress { flex: 1 1 240px; height: 8px; accent-color: var(--accent); }
.lettura .nota-form { flex-basis: 100%; margin-top: 0; }
.errori { background: var(--err-soft); color: var(--err); border-radius: var(--r-md); padding: var(--s-3) var(--s-4); margin: var(--s-3) 0 0; font-size: var(--fs-m); font-weight: 600; }
.errori ul { margin: 0; padding-left: var(--s-4-5); }

/* ---- inserisci prezzi ------------------------------------------------ */
.pagina.stretta .fascia { max-width: 1104px; }
kbd { font-family: var(--mono); font-size: var(--fs-xs); font-weight: 600; border: 1px solid var(--btn-line);   /* tasto disegnato, non un campo: bordo chiaro */ border-bottom-width: 2px;
  border-radius: var(--r-sm); background: var(--surface); padding: 1px var(--s-1-5); color: var(--text-2); }
.rapido-card { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: var(--s-5-5); margin-top: var(--s-4-5); }
/* minmax(…): sopra i ~960px le colonne restano 320/200/190; fra 821 e 960 si stringono invece di
   far scorrere la pagina (sotto gli 820 si passa a 2 colonne). Il codice non scende sotto i 180px:
   a 821px il posto e' ~696px, servono 180 + pulsante ~105 + 3 gap 36 */
.rapido { display: grid; grid-template-columns: minmax(180px, 320px) minmax(0, 200px) minmax(0, 190px) auto; gap: var(--s-3); align-items: end; }
.rapido label { display: block; font-size: var(--fs-s); font-weight: 600; color: var(--muted); margin-bottom: var(--s-1-5); }
.rapido input { width: 100%; height: 56px; border: 1px solid var(--input-line); border-radius: var(--r-md); padding: 0 var(--s-4); background: var(--surface); }
/* bordo da 2px: il padding cala di 1px, cosi' il testo non si sposta */
.rapido input:focus-visible { outline: 0; border: 2px solid var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); padding: 0 calc(var(--s-4) - 1px); }
.rapido #codice { font-family: var(--mono); font-size: var(--fs-xl); font-weight: 600; text-transform: uppercase; }
.rapido #importo { font-size: var(--fs-xl); font-weight: 700; }
.rapido #data { font-size: var(--fs-l); }
.rapido .btn { height: 56px; padding: 0 var(--s-6-5); font-size: var(--fs-l); font-weight: 700; border-radius: var(--r-md); width: 100%; }
.info { background: var(--bg); border-radius: var(--r-md); padding: var(--s-3) var(--s-4); font-size: var(--fs-m); margin-top: var(--s-3-5);
  display: flex; gap: var(--s-2-5); align-items: center; flex-wrap: wrap; min-height: 44px; color: var(--text-2); }
.info .dx { margin-left: auto; color: var(--ok); font-weight: 700; }
.info .dx.giu { color: var(--warn); }
.info .vecchio { color: var(--warn); font-weight: 600; }
.sessione-testa { display: flex; align-items: baseline; justify-content: space-between; margin: var(--s-6) 0 var(--s-3); }
.sessione-testa h2 { font-size: var(--fs-l); font-weight: 700; margin: 0; }
.sessione-testa span { font-size: var(--fs-s); color: var(--muted); }
#salvati:empty { display: none; }
.salvato { display: flex; gap: var(--s-3-5); align-items: center; flex-wrap: wrap; padding: var(--s-3-5) var(--s-4-5); border-top: 1px solid var(--line-2); font-size: var(--fs-m); }
.salvato:first-child { border-top: 0; animation: flash 1.6s; }
.salvato .cod { display: inline; font-size: var(--fs-l); }
.salvato .imp { font-weight: 700; font-size: var(--fs-l); }
.salvato .dett { font-size: var(--fs-s); color: var(--muted); }
.salvato .nt { font-size: var(--fs-s); padding: 2px var(--s-2); border-radius: 6px; background: var(--info-soft); color: var(--info); }
.salvato .nt.warn { background: var(--warn-soft); color: var(--warn); }
.salvato form { display: flex; gap: var(--s-2-5); flex: 1; min-width: 260px; }
.salvato form input { flex: 1; height: 38px; border: 1px solid var(--input-line); border-radius: var(--r); padding: 0 var(--s-3); background: var(--surface); }
@keyframes flash { from { background: var(--row-flash); } to { background: transparent; } }

/* ---- scarico rapido -------------------------------------------------- */
/* a sinistra numerazione + lista (una riga per pezzo), a destra la card con commessa e stato */
.scarico-duo { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: var(--s-5); align-items: start; margin-top: var(--s-4-5); }
.scarico-duo .rapido-card { margin-top: 0; }
.scarico-cerca { grid-template-columns: minmax(0, 1fr) auto; }
.scarico-cerca #numerazione { font-family: var(--mono); font-size: var(--fs-xl); font-weight: 600; }
.t-scarico { --cols: 56px 120px minmax(0, 1fr) 28px; }
.t-scarico .r { padding-top: var(--s-2); padding-bottom: var(--s-2); }
.t-scarico #lista .r:first-child { border-top: 0; }
.t-scarico #lista .r { animation: flash 1.6s; }
.t-scarico .riga-singola { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.t-scarico .riga-singola .badge, .t-scarico .riga-singola .tag { margin-right: var(--s-1-5); }
.t-scarico .lista-vuota { display: none; border-top: 0; }
.t-scarico #lista:not(:has(.r)) + .lista-vuota { display: block; }
.form-card.segna { position: sticky; top: var(--s-5); max-width: none; padding: var(--s-5); display: flex; flex-direction: column; gap: var(--s-2-5); }
.form-card.segna h2 { font-size: var(--fs-l); font-weight: 700; margin: 0; }
.form-card.segna .chips { margin-top: 0; }
.form-card.segna > label { font-size: var(--fs-s); font-weight: 600; color: var(--muted); margin-top: var(--s-1-5); }
.form-card.segna .help { font-size: var(--fs-s); color: var(--muted); }
.form-card.segna .btn { height: 48px; font-size: var(--fs-l); font-weight: 700; margin-top: var(--s-2); }
.form-card.segna .nota-form { margin-top: var(--s-1); }
.form-card.segna .errori { margin: 0; }

/* ---- carica pdf ------------------------------------------------------ */
.drop { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s-2-5); padding: var(--s-8) var(--s-5);
  border: 1.5px dashed var(--drop-line); border-radius: var(--r-md); cursor: pointer; text-align: center; color: var(--text-2); font-weight: 600; }
.drop.sopra, .drop:hover { background: var(--accent-soft); border-color: var(--accent); }
.drop:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; background: var(--accent-soft); border-color: var(--accent); }
.drop small { font-weight: 500; color: var(--muted); }
/* sul fondo --accent-soft --muted scende a 4,46:1: --text-2 (9,5:1 chiaro, 9,0:1 scuro) */
.drop.sopra small, .drop:hover small, .drop:has(input:focus-visible) small { color: var(--text-2); }
.icona-pdf { width: 46px; height: 56px; border-radius: 6px; background: var(--accent-soft); color: var(--accent);
  display: flex; align-items: center; justify-content: center; font-size: var(--fs-xs); font-weight: 800; flex: none; }
.card.carica { padding: var(--s-6); margin-top: var(--s-4); }   /* form di caricamento del PDF */
.doc-card { display: flex; align-items: center; gap: var(--s-6); padding: var(--s-4-5) var(--s-5-5); flex-wrap: wrap; }
.doc-card .k { font-size: var(--fs-s); color: var(--muted); }
.doc-card .v { font-size: var(--fs-m); font-weight: 700; }
.doc-card .v.scaduta { color: var(--warn); }
.doc-card .numero { font-family: var(--mono); font-size: var(--fs-xl); font-weight: 600; }
.doc-card .dx { margin-left: auto; }
.t-pdf .c-sku { font-size: var(--fs-xs); }
.barra-fissa { position: sticky; bottom: 0; background: var(--surface); border-top: 1px solid var(--line);
  box-shadow: 0 -6px 16px -10px var(--ombra-barra); padding: var(--s-3-5) var(--s-7); display: flex; align-items: center; gap: var(--s-2-5); margin-top: var(--s-5); z-index: 5; }
.barra-fissa .testo { font-size: var(--fs-m); color: var(--muted); margin-right: auto; }

/* ---- magazzino: selezione multipla ----------------------------------- */
/* la casella sta nella colonna del numero, che si allarga di quanto serve (24px + gap) */
.t-mag.con-scelta { --cols: 156px 130px 1fr 120px 100px 160px 90px 100px; }
.t-mag.con-scelta .c-num { display: flex; align-items: center; gap: var(--s-2); }
.t-mag.con-scelta .c-num > a { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
/* 16px + margine 4px: bersaglio di 24px come le intestazioni ordinabili */
.scegli { width: 16px; height: 16px; margin: var(--s-1); flex: none; accent-color: var(--accent); cursor: pointer; }
/* la barra compare con almeno un pezzo spuntato; resta fissa in fondo anche sotto gli 820px
   (con 50 righe in fondo alla pagina non si vedrebbe), e va a capo invece di allargarsi */
.barra-scelta { position: sticky; bottom: 0; z-index: 5; display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--s-2-5) var(--s-4); background: var(--surface); border-top: 1px solid var(--line);
  box-shadow: 0 -6px 16px -10px var(--ombra-barra); padding: var(--s-3) var(--s-7); }
.barra-scelta[hidden] { display: none; }
.barra-scelta .scelti { font-size: var(--fs-m); margin-right: auto; min-width: 0; }
.barra-scelta .scelti .muted { font-size: var(--fs-s); }
.barra-scelta .campo { width: 13em; }
.esito-assegna { flex-basis: 100%; }
.esito-assegna:not(:has(*)) { display: none; }
.errori-assegna { margin: 0; padding: 0; list-style: none; color: var(--err); font-size: var(--fs-s); font-weight: 600; }
html:has(.barra-scelta:not([hidden])) { scroll-padding-bottom: calc(var(--altezza-barra-fissa) + var(--s-2)); }
/* listino: la casella sta nella colonna del codice, a sinistra del codice e dei suoi tag (+32px come nel magazzino) */
.t-listino.con-scelta { --cols: 262px 1fr 70px 120px 120px 170px; }
.t-listino.con-scelta .c-cod { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: var(--s-2); }
.t-listino.con-scelta .c-cod > :not(.scegli) { grid-column: 2; }

/* ---- commesse -------------------------------------------------------- */
.md { display: grid; grid-template-columns: 340px 1fr; gap: var(--s-6); padding: var(--s-6-5) var(--s-7) var(--s-8); align-items: start; }
.md > * { min-width: 0; }   /* la colonna 1fr non si allarga sul contenuto: scorre la tabella, non la pagina */
/* barra di ricerca piccola (commesse, aggiungi componente): un solo blocco */
.cerca.piccola { height: 42px; border-radius: 9px; margin-top: var(--s-4); padding: 0 var(--s-1-5) 0 var(--s-3); gap: var(--s-2); }
.cerca.piccola input { font-size: var(--fs-m); }
.elenco { margin-top: var(--s-3-5); display: flex; flex-direction: column; gap: 2px; }
.voce { display: block; padding: var(--s-3) var(--s-3-5); border-radius: var(--r-md); color: var(--text); text-decoration: none !important; }
.voce:hover { background: var(--surface); color: var(--text); }
.voce.on { background: var(--surface); box-shadow: inset 3px 0 0 var(--accent), 0 1px 3px var(--ombra-lieve); }
.voce .riga1 { display: flex; gap: var(--s-2); align-items: baseline; }
.voce .riga1 .mono { font-weight: 600; color: var(--accent); }
.voce .riga1 .ds { font-size: var(--fs-m); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.voce .riga1 .pr { margin-left: auto; font-size: var(--fs-xs); font-weight: 700; color: var(--warn); }
.voce .riga2 { font-size: var(--fs-xs); color: var(--muted); margin-top: var(--s-1); }
.dettaglio { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s-5-5) var(--s-6); }
.dettaglio .intesta { display: flex; align-items: flex-start; gap: var(--s-3-5); }
.dettaglio .intesta .mono { font-size: var(--fs-xl); font-weight: 600; }
.dettaglio .intesta h2 { margin: 0; }   /* titolo della commessa: riceve il focus dopo lo swap htmx */
.dettaglio .intesta .ds { font-size: var(--fs-l); font-weight: 600; margin-top: 2px; }
.dettaglio .intesta .btn { margin-left: auto; }
.riquadri { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-3); margin: var(--s-4-5) 0; }
.riquadro { background: var(--bg); border-radius: var(--r-md); padding: var(--s-3-5) var(--s-4); }
.riquadro .k { font-size: var(--fs-s); font-weight: 600; color: var(--muted); }
.riquadro .v { font-size: var(--fs-xl); font-weight: 700; margin-top: 2px; font-variant-numeric: tabular-nums; }
.riquadro.warn { background: var(--warn-soft); }
.riquadro.warn .k, .riquadro.warn .v { color: var(--warn); }

/* ---- toast ------------------------------------------------------------ */
.toasts { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); display: flex; flex-direction: column; gap: var(--s-2); z-index: 50; align-items: center; }
.toast { background: var(--toast-bg); color: var(--toast-fg); font-size: var(--fs-m); font-weight: 600; border-radius: var(--r-md);
  padding: var(--s-3) var(--s-4); box-shadow: 0 8px 24px var(--ombra-forte); display: flex; align-items: center; gap: var(--s-2-5); max-width: 640px; }
.toast::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--toast-ok); flex: none; }
.toast.warning::before { background: var(--toast-warn); }
.toast.error::before { background: var(--toast-err); }
.toast button { background: none; border: 0; color: inherit; opacity: .75; cursor: pointer; font-size: var(--fs-l); line-height: 20px;
  /* bersaglio di 24px: il margine negativo lo allarga senza spostare il testo del toast */
  padding: 2px var(--s-2); margin: -2px calc(-1 * var(--s-2)) -2px -2px; min-width: 24px; }
/* anello di focus sul fondo del toast: --toast-fg (16,83:1 chiaro, 14,17:1 scuro contro --toast-bg);
   --accent li' arrivava a 2,56 / 2,33:1 */
.toast :focus-visible { outline-color: var(--toast-fg); }

/* ---- login ------------------------------------------------------------ */
.login { max-width: 360px; margin: calc(2 * var(--s-8)) auto; }   /* prima 90px */
.login .marchio { justify-content: center; margin-bottom: var(--s-4-5); }
.login .form-card { padding: var(--s-6); }
.login label { display: block; font-size: var(--fs-s); font-weight: 600; color: var(--muted); margin: var(--s-3) 0 var(--s-1-5); }
.login .btn { width: 100%; margin-top: var(--s-4-5); height: 42px; }
.login .errori { margin: 0 0 var(--s-1); }

/* stili propri (includeIndicatorStyles:false in base.html): si accende solo l'indicatore indicato da hx-indicator */
.htmx-indicator { opacity: 0; transition: opacity .2s; }
.htmx-indicator.htmx-request { opacity: 1; }

/* ---- responsive ----------------------------------------------------- */
@media (max-width: 1100px) {
  .t-listino { --cols: 200px 1fr 110px 160px; }
  .t-listino.con-scelta { --cols: 232px 1fr 110px 160px; }
  .t-listino .c-giac, .t-listino .c-cli { display: none; }
  .t-mag { --cols: 122px 120px 1fr 110px 96px 84px; }
  .t-mag.con-scelta { --cols: 154px 120px 1fr 110px 96px 84px; }
  .t-mag .c-comm, .t-mag .c-agg { display: none; }
  .t-pdf { --cols: 40px 1fr 50px 110px 120px 180px; --min: 780px; }   /* 500 + 1fr 164 + 5 gap 80 + padding 36 */
  .t-pdf .c-sku { display: none; }
  .duo { grid-template-columns: 1fr; }
  .md { grid-template-columns: 280px 1fr; }
}
/* un blocco per breakpoint, dal piu' largo al piu' stretto: a parita' di selettore vince quello piu' stretto */
@media (max-width: 820px) {
  .header { gap: var(--s-3-5); padding: 0 var(--s-4); }
  .nav a { padding: 0 var(--s-2); font-size: var(--fs-m); }
  .azione { width: 40px; height: 40px; padding: 0; justify-content: center; border-radius: var(--r-md); }
  .azione span { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0,0,0,0); clip-path: inset(50%); white-space: nowrap; border: 0; }   /* come .sr-only: il nome resta */
  .sep-v { display: none; }
  .fascia { padding: var(--s-5-5) var(--s-4) var(--s-4-5); } .corpo { padding: 0 var(--s-4) var(--s-7); }
  /* barra di Carica PDF: sotto gli 820px il testo va a capo su piu' righe e la barra fissa
     coprirebbe mezzo schermo (misurata 121px a 700, 233px a 500): resta in fondo alla pagina,
     non fissa, e non serve spazio di scorrimento */
  :root { --altezza-barra-fissa: 0px; }
  .barra-fissa { position: static; padding: var(--s-3) var(--s-4); }
  .titolo h1 { font-size: var(--fs-xl); }
  .riepilogo { grid-template-columns: 1fr; gap: var(--s-3); }
  .dati { grid-template-columns: 1fr; gap: 2px; } .dati dd { margin-bottom: var(--s-2); }
  .t-listino, .t-listino.con-scelta { --cols: 1fr auto; }
  .t-listino .r { grid-template-areas: "cod nostro" "desc agg"; row-gap: var(--s-1); }
  .t-listino .c-cod { grid-area: cod; } .t-listino .c-nostro { grid-area: nostro; }
  .t-listino .c-desc { grid-area: desc; } .t-listino .c-agg { grid-area: agg; }
  .t-listino .r.testa { display: none; }
  .t-mag { --min: 768px; }   /* colonne di 1100px: 532 + 1fr 140 + 5 gap 60 + padding 36; sotto i 600 torna a schede */
  .t-mag.con-scelta { --min: 800px; }   /* + 32px della casella */
  .barra-scelta { padding: var(--s-3) var(--s-4); }
  .t-storico { --cols: 150px 100px 1fr; } .t-storico .c-cli, .t-storico .c-ut { display: none; }
  .form-grid { grid-template-columns: 1fr; } .form-grid .help, .form-grid .errorlist, .form-grid .azioni { grid-column: 1; }
  .rapido { grid-template-columns: 1fr 1fr; }
  .scarico-duo { grid-template-columns: 1fr; }
  .form-card.segna { position: static; }
  .md { grid-template-columns: 1fr; padding: var(--s-5-5) var(--s-4); }
  .riquadri { grid-template-columns: 1fr; }
  .cerca .aiuto { display: none; }
  .cerca { flex-wrap: wrap; height: auto; min-height: 50px; padding: var(--s-2) var(--s-3); }
  #nuovo-prezzo .div { display: none; }
  #nuovo-prezzo input { flex: 1 1 40%; min-width: 120px; height: 38px; }
  #nuovo-prezzo input.importo { max-width: none; }
  #nuovo-prezzo input[type=date] { max-width: none; }
  #nuovo-prezzo .anteprima { flex-basis: 100%; }
  #nuovo-prezzo .btn { flex: 1 1 100%; }
}
@media (max-width: 600px) {
  .header { gap: var(--s-2); padding: 0 var(--s-3); }
  .marchio { display: none; }
  .login .marchio { display: flex; }
  .nav { gap: 0; min-width: 0; }
  .nav a { padding: 0 var(--s-1); font-size: var(--fs-s); }
  .header-dx { gap: var(--s-1-5); }
  .azione { width: 36px; height: 36px; }
  .avatar summary { width: 30px; height: 30px; }
  .titolo .dx { margin-left: 0; width: 100%; }
  .chips .dx { margin-left: 0; }
  /* filtri del Magazzino: un campo per riga, a tutta larghezza, coi nomi in colonna */
  .campo-filtro { flex: 1 1 100%; min-width: 0; }
  .etichetta-filtro { min-width: 6.5em; }
  .campo-filtro .select-chip, .campo-commesse { flex: 1; min-width: 0; max-width: none; }
  .segmenti { display: grid; grid-template-columns: 1fr 1fr; width: 100%; border-radius: var(--r-md); }
  .segmento { justify-content: center; border-radius: var(--r); }
  .togli-filtri { margin-left: 0; }
  .t-mag .r.testa { display: none; }
  .t-mag { --cols: 1fr auto; --min: 0; }
  .t-mag.con-scelta { --cols: 1fr auto; --min: 0; }
  .barra-scelta .campo-filtro, .barra-scelta .campo { flex: 1 1 100%; width: auto; }
  .t-da-risolvere { --cols: 1fr; }   /* codice sopra, dettaglio sotto */
  .t-descr { --cols: 24px 1fr; }     /* casella e codice, sotto la descrizione di oggi e il campo */
  .t-descr .r { row-gap: var(--s-1-5); }
  .t-descr .r > :nth-child(n+3) { grid-column: 2; }
  .t-descr .r.testa > :nth-child(n+3) { display: none; }
  .t-da-risolvere .r { row-gap: var(--s-1); }
  .t-da-risolvere .r.testa { display: none; }
  .t-mag .r { grid-template-areas: "num prezzo" "cod cod" "desc desc" "ubic stato"; row-gap: var(--s-1); }
  .t-mag .c-num { grid-area: num; } .t-mag .c-prezzo { grid-area: prezzo; } .t-mag .c-cod { grid-area: cod; }
  .t-mag .c-desc { grid-area: desc; } .t-mag .c-ubic { grid-area: ubic; } .t-mag .c-stato { grid-area: stato; text-align: right; } .t-mag .c-stato .tag.riservato { margin-left: auto; }
  .md:not(.solo-elenco) .lato { display: none; }
  .md.solo-elenco .dettaglio { display: none; }
}

/* correzioni */
.duo > .card { margin-top: 0; }
.t-mag .c-ubic .nota { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* intestazioni ordinabili: <a class="ord"> (server, tabelle paginate) e <button class="ord">
   (browser, tabelle piccole) hanno lo stesso aspetto.
   Bersaglio alto 24px (padding), senza cambiare l'altezza della riga (margine negativo):
   12px di testo (--s-3) + 2 x 6px (--s-1-5) = 24px */
.griglia .r.testa .ord { color: inherit; text-decoration: none; padding: var(--s-1-5) 0; margin: calc(-1 * var(--s-1-5)) 0; line-height: var(--s-3);
  user-select: none; cursor: pointer; }
.griglia .r.testa button.ord { -webkit-appearance: none; appearance: none; background: none; border: 0;
  text-transform: inherit; letter-spacing: inherit; text-align: inherit; }
.griglia .r.testa .ord:hover { color: var(--accent); }
.griglia .r.testa .su, .griglia .r.testa .giu { color: var(--accent); }
/* freccia solo visiva: testo alternativo vuoto (chi non capisce "/ \"\"" usa la prima dichiarazione) */
.griglia .r.testa .su::after { content: " ▲"; content: " ▲" / ""; font-size: var(--fs-glifo); vertical-align: 1px; }
.griglia .r.testa .giu::after { content: " ▼"; content: " ▼" / ""; font-size: var(--fs-glifo); vertical-align: 1px; }
.t-modifiche { --cols: 120px 90px 1fr; }
.t-conteggi { --cols: 1fr 100px; }
.t-problemi { --cols: 1fr 180px 1.4fr; }
.t-da-risolvere + .t-da-risolvere, .t-problemi.fisse { margin-top: var(--s-5); }

/* ---- classi di servizio (al posto degli style="" nei template) --------
   In fondo al file: a parita' di specificita' vincono sulle regole dei componenti. */
.mt-2 { margin-top: var(--s-2); }
.mt-4 { margin-top: var(--s-4); }
.mt-5 { margin-top: var(--s-5); }
.in-cima { margin: 0 0 var(--s-5); }          /* primo blocco del corpo: niente margine sopra */
.testo-pieno { color: var(--text); }          /* valore in evidenza dentro un testo .muted o un .cod */
.peso-medio { font-weight: 500; }
.maiuscolo { text-transform: uppercase; }

/* movimento ridotto: niente animazioni ne' transizioni (lampo .salvato, rotellina e dissolvenza htmx) */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}