/* =============================================================================
   Conto Certo — design system
   Token neutri + un accento; tipografia con cifre tabulari; griglia 4px.
   Tema chiaro/scuro: ogni token porta ENTRAMBI i valori con light-dark(),
   che sceglie in base a color-scheme. Il :root accetta entrambi i temi
   (segue il sistema); i due selettori subito sotto li fissano a piacere,
   così il selettore manuale vince in entrambe le direzioni.
   ========================================================================== */

:root {
  color-scheme: light dark;

  --sfondo:            light-dark(#f6f6f4, #121213);
  --superficie:        light-dark(#fcfcfb, #1a1a19);
  --superficie-alt:    light-dark(#f1f1ee, #222221);
  --superficie-hover: light-dark(#ebebe7, #2b2b29);
  --bordo:             light-dark(#e2e2dc, #2e2e2c);
  --bordo-forte:       light-dark(#cfcfc7, #43433f);

  --testo:             light-dark(#17171a, #f4f4f0);
  --testo-2:           light-dark(#56564f, #b6b6ad);
  /* il grigino chiaro scende a #6f6f66: ~4,6:1 su #fcfcfb invece di ~4,0
     (audit frontend/ux §6.6); lo scuro già ci sta per conto suo */
  --testo-3:           light-dark(#6f6f66, #84847b);

  --accento:           light-dark(#2a78d6, #4a90e8);
  --accento-scuro:     light-dark(#1c5cab, #3987e5);
  --accento-tenue:     light-dark(#e8f0fc, #1c2b41);
  --accento-testo:     light-dark(#ffffff, #0b1220);

  --positivo:          light-dark(#1baf7a, #34c48d);
  --positivo-tenue:    light-dark(#e2f5ee, #14312a);
  --negativo:          light-dark(#d5392f, #f0736a);
  --negativo-tenue:    light-dark(#fdeceb, #3a1c1a);
  --attenzione:        light-dark(#b57500, #e0a534);
  --attenzione-tenue:  light-dark(#fdf3df, #362a13);

  /* serie grafici — ordine canonico validato (CVD-safe) */
  --serie-1: light-dark(#2a78d6, #3987e5);  /* utile   */
  --serie-2: light-dark(#eb6834, #d95926);  /* spese   */
  --serie-3: light-dark(#1baf7a, #199e70);  /* entrate */
  --serie-4: light-dark(#eda100, #c98500);  /* tasse   */
  --serie-5: light-dark(#e87ba4, #d55181);
  --serie-6: light-dark(#4a3aa7, #9085e9);
  --serie-7: light-dark(#008300, #008300);
  --serie-8: light-dark(#e34948, #e66767);
  --griglia: light-dark(#e6e6e0, #2a2a28);

  --ombra-1: 0 1px 2px light-dark(rgba(20,20,15,.05), rgba(0,0,0,.4));
  --ombra-2: 0 4px 16px -4px light-dark(rgba(20,20,15,.12), rgba(0,0,0,.5)),
             0 1px 3px light-dark(rgba(20,20,15,.06), rgba(0,0,0,.35));
  --ombra-3: 0 24px 48px -12px light-dark(rgba(20,20,15,.26), rgba(0,0,0,.7));

  --r-s: 7px; --r-m: 10px; --r-l: 14px; --r-pill: 999px;
  --sp: 4px;
  --nav-w: 236px;
  /* Margine laterale dell'area contenuti. Lo condividono barra, avvisi e
     pagina: se si scollassero, il titolo e i riquadri sotto non sarebbero
     più incolonnati. Cresce sui monitor larghi (vedi in fondo al file). */
  --gutter: 22px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

/* Tema scelto a mano: basta fissare color-scheme, light-dark() segue. */
:root[data-tema="chiaro"] { color-scheme: light; }
:root[data-tema="scuro"]  { color-scheme: dark; }

/* -------------------------------------------------------------------- reset */
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; background: var(--sfondo); color: var(--testo);
  font-family: var(--font); font-size: 14px; line-height: 1.5;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  font-variant-numeric: tabular-nums;
}
h1,h2,h3,h4 { margin: 0; font-weight: 620; letter-spacing: -.015em; line-height: 1.25; }
h1 { font-size: 21px; } h2 { font-size: 17px; } h3 { font-size: 15px; }
p { margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--accento); text-decoration: none; }
:focus-visible { outline: 2px solid var(--accento); outline-offset: 2px; border-radius: var(--r-s); }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-thumb { background: var(--bordo-forte); border-radius: 99px; border: 3px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-track { background: transparent; }

.num { font-variant-numeric: tabular-nums; }
.mono { font-family: var(--mono); }
.pos { color: var(--positivo); } .neg { color: var(--negativo); } .warn { color: var(--attenzione); }
.muto { color: var(--testo-3); }
.sr { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.nascosto { display: none !important; }

/* ------------------------------------------------------------------ layout */
.app { display: grid; grid-template-columns: var(--nav-w) 1fr; min-height: 100dvh; }

.laterale {
  background: var(--superficie); border-right: 1px solid var(--bordo);
  display: flex; flex-direction: column; position: sticky; top: 0; height: 100dvh;
}
.marchio { display:flex; align-items:center; gap:10px; padding: 18px 16px 12px; }
/* Il tile è dentro l'SVG (gradiente + angoli): qui resta solo il posto e l'ombra,
   che sull'SVG va come drop-shadow perché segua gli angoli arrotondati. */
.marchio-logo {
  flex: 0 0 auto; display: grid; place-items: center; line-height: 0;
  filter: drop-shadow(0 1px 3px rgba(20, 22, 28, .22));
}
.marchio-grande { gap: 13px; }
.marchio-grande .marchio-testo { font-size: 19px; }
.marchio-grande .marchio-testo small { font-size: 12px; margin-top: 2px; }
.marchio-testo { font-weight: 650; font-size: 14px; letter-spacing: -.02em; }
.marchio-testo small { display:block; font-weight:450; font-size:11px; color: var(--testo-3); letter-spacing: 0; }

.selettore-azienda { padding: 4px 12px 12px; }
.menu { flex: 1; overflow-y: auto; padding: 4px 8px 12px; }
.menu-gruppo { margin-top: 14px; }
.menu-gruppo > span {
  display:block; padding: 0 8px 6px; font-size: 10.5px; font-weight: 650;
  letter-spacing: .09em; text-transform: uppercase; color: var(--testo-3);
}
.voce {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  padding: 8px 10px; border: 0; border-radius: var(--r-s); background: transparent;
  color: var(--testo-2); cursor: pointer; font-size: 13.5px; font-weight: 500;
  transition: background .12s, color .12s;
}
.voce:hover { background: var(--superficie-hover); color: var(--testo); }
.voce[aria-current="page"] { background: var(--accento-tenue); color: var(--accento-scuro); font-weight: 600; }
.voce .ico { width: 18px; text-align: center; font-size: 14px; flex: 0 0 auto; }
.piede-nav { padding: 10px 12px; border-top: 1px solid var(--bordo); display:flex; align-items:center; gap:8px; }

.contenuto { min-width: 0; display: flex; flex-direction: column; }
.barra {
  position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 12px;
  /* La barra resta a tutta larghezza — il bordo inferiore deve attraversare
     tutto — ma il suo CONTENUTO si incolonna con la pagina, che sopra i
     1420px si ferma e si centra. Senza questo, su un monitor Full HD il
     titolo resta a sinistra e i riquadri cominciano 127px più in là. */
  padding-block: 12px;
  padding-inline: calc(max(0px, (100% - 1420px) / 2) + var(--gutter));
  background: color-mix(in srgb, var(--sfondo) 88%, transparent);
  backdrop-filter: saturate(180%) blur(12px); border-bottom: 1px solid var(--bordo);
}
.barra h1 { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pagina { padding: 22px var(--gutter); max-width: 1420px; width: 100%; margin: 0 auto; flex: 1; }
.pagina > * + * { margin-top: 18px; }

/* --------------------------------------------------------------- controlli */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 8px 14px; border-radius: var(--r-s); border: 1px solid var(--bordo-forte);
  background: var(--superficie); color: var(--testo); font-size: 13.5px; font-weight: 550;
  cursor: pointer; white-space: nowrap; transition: background .12s, border-color .12s, transform .06s;
  box-shadow: var(--ombra-1);
}
.btn:hover { background: var(--superficie-hover); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-primario { background: var(--accento); border-color: var(--accento); color: var(--accento-testo); }
.btn-primario:hover { background: var(--accento-scuro); border-color: var(--accento-scuro); }
.btn-fantasma { background: transparent; border-color: transparent; box-shadow: none; color: var(--testo-2); }
.btn-fantasma:hover { background: var(--superficie-hover); color: var(--testo); }
.btn-pericolo { color: var(--negativo); border-color: var(--bordo-forte); }
.btn-pericolo:hover { background: var(--negativo-tenue); border-color: var(--negativo); }
.btn-piccolo { padding: 5px 10px; font-size: 12.5px; }
.btn-icona { padding: 7px; width: 32px; height: 32px; }

.campo { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.campo > label { font-size: 12px; font-weight: 570; color: var(--testo-2); }
.campo > .aiuto { font-size: 11.5px; color: var(--testo-3); }
input[type=text], input[type=email], input[type=password], input[type=number],
input[type=date], input[type=search], select, textarea {
  width: 100%; padding: 8px 10px; border: 1px solid var(--bordo-forte);
  border-radius: var(--r-s); background: var(--superficie); color: var(--testo);
  transition: border-color .12s, box-shadow .12s; font-size: 13.5px;
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--accento);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accento) 18%, transparent);
}
/* combo: tendina che si scrive e, dove serve, crea. Il campo visibile è un
   input normale; l'elenco galleggia sotto senza spostare il resto del form. */
.combo { position: relative; }
/* Il segno che si apre un elenco. Una combo è una casella di testo, e senza
   questo si confonde con un campo libero: nella barra dei filtri stanno in fila
   «Cliente», «Categoria», «Conto» e «Ricerca», e solo l'ultimo è testo vero.
   Il chevron è lo stesso del <select> qui sotto, così la parentela si vede. */
.combo::after {
  content: ''; position: absolute; right: 11px; top: 50%; width: 8px; height: 8px;
  transform: translateY(-70%) rotate(45deg); pointer-events: none;
  border-right: 1.6px solid var(--testo-3); border-bottom: 1.6px solid var(--testo-3);
}
.combo-testo { padding-right: 28px; }
.combo-lista {
  position: absolute; z-index: 40; top: calc(100% + 4px); left: 0; right: 0;
  max-height: 244px; overflow-y: auto; padding: 4px;
  background: var(--superficie); border: 1px solid var(--bordo-forte);
  border-radius: var(--r-s); box-shadow: var(--ombra-2);
}
.combo-voce {
  display: block; width: 100%; text-align: left; padding: 7px 9px;
  border: 0; border-radius: var(--r-s); background: none; color: var(--testo);
  font-size: 13.5px; cursor: pointer;
}
.combo-voce:hover, .combo-voce.attiva { background: var(--superficie-hover); }
.combo-crea { color: var(--accento); font-weight: 600; }
.combo-vuoto { padding: 8px 9px; font-size: 12.5px; color: var(--testo-3); }

input[type=number] { font-variant-numeric: tabular-nums; }
textarea { resize: vertical; min-height: 68px; }
select { appearance: none; padding-right: 30px;
  background-image: linear-gradient(45deg, transparent 50%, var(--testo-3) 50%),
                    linear-gradient(135deg, var(--testo-3) 50%, transparent 50%);
  background-position: right 13px top 50%, right 8px top 50%;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; }
.anteprima-form {
  grid-column: 1/-1; display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border: 1px dashed var(--bordo-forte); border-radius: var(--r-m);
  background: var(--superficie-alt);
}
.anteprima-form > span:first-child {
  font-size: 10.5px; font-weight: 650; letter-spacing: .07em; text-transform: uppercase; color: var(--testo-3);
}

/* scelta visiva di icone e colori: si clicca quello che si vede */
.scelta-visiva { display: flex; flex-wrap: wrap; gap: 6px; }
.scelta-visiva .scelta {
  border: 1px solid var(--bordo); background: var(--superficie); border-radius: var(--r-s);
  cursor: pointer; padding: 0; transition: border-color .12s, box-shadow .12s, transform .08s;
}
.scelta-visiva.icone .scelta { width: 34px; height: 34px; font-size: 17px; line-height: 1; }
.scelta-visiva .scelta:hover { border-color: var(--bordo-forte); transform: translateY(-1px); }
.scelta-visiva .scelta[aria-pressed="true"] {
  border-color: var(--accento); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accento) 22%, transparent);
}
.scelta-visiva .pastiglia-colore { width: 26px; height: 26px; border-radius: 50%; background: var(--c); border-color: color-mix(in srgb, var(--c) 70%, black); }
.scelta-visiva .pastiglia-colore[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--superficie), 0 0 0 4px var(--c); }
.colore-libero { width: 34px; height: 26px; padding: 0; border: 1px solid var(--bordo); border-radius: var(--r-s); background: none; cursor: pointer; }

/* --------------------------------------------------- scelte in chiaro (form)
   Le alternative visibili invece della tendina, per i campi a due-tre voci:
   `tipo: 'scelte'` in form(), con `forma` fra segmenti, pastiglie e schede.
   Il valore vive in un input nascosto — qui c'è solo il vestito.
   Lo stato è `aria-checked` (radiogroup), non una classe: un solo posto dove
   sta la verità, e il CSS la legge da lì.
   I nomi sono PREFISSATI: `.segmenti` senza prefisso esiste già in questo file
   ed è la striscia di tab (riga sotto), e condividerlo faceva ereditare ai
   gruppi il suo padding e il suo gap.                                          */
.scelte { min-width: 0; }

.scelte-segmenti {
  display: flex; border: 1px solid var(--bordo-forte); border-radius: var(--r-s);
  overflow: hidden; background: var(--superficie-alt);
}
.scelte-segmenti > [role=radio] {
  /* fuori da un campo — in una toolbar — il segmento è largo quanto il suo
     testo e non va a capo: «12 mesi» spezzato in due righe alzava la barra */
  flex: 0 0 auto; white-space: nowrap;
  padding: 8px 9px; border: 0; border-right: 1px solid var(--bordo);
  background: transparent; color: var(--testo-2); font: inherit; font-size: 13px; font-weight: 560;
  cursor: pointer; transition: background .12s, color .12s;
}
/* dentro un campo di form i segmenti si dividono la larghezza in parti uguali,
   e lì il testo può andare a capo: il campo ha una larghezza sua da rispettare */
.campo > .scelte-segmenti > [role=radio] { flex: 1 1 0; min-width: 0; white-space: normal; }
.scelte-segmenti > [role=radio]:last-child { border-right: 0; }
.scelte-segmenti > [role=radio][aria-checked=true] {
  background: var(--accento); color: var(--accento-testo); font-weight: 620;
}
.scelte-segmenti > [role=radio]:focus-visible { outline: 2px solid var(--accento); outline-offset: -2px; }
/* sul telefono due etichette lunghe in fila si schiacciano: vanno a capo, e
   il segmentato diventa una pila — la regola è una, non un layout nuovo */
@media (max-width: 420px) {
  .scelte-segmenti { flex-wrap: wrap; }
  .scelte-segmenti > [role=radio] { flex: 1 1 100%; border-right: 0; border-bottom: 1px solid var(--bordo); }
  .scelte-segmenti > [role=radio]:last-child { border-bottom: 0; }
}

.scelte-pastiglie { display: flex; flex-wrap: wrap; gap: 6px; }
.scelte-pastiglie > [role=radio] {
  padding: 6px 12px; border: 1px solid var(--bordo-forte); border-radius: var(--r-pill);
  background: var(--superficie); color: var(--testo-2); font: inherit; font-size: 13px;
  font-weight: 540; cursor: pointer; transition: border-color .12s, background .12s, color .12s;
}
.scelte-pastiglie > [role=radio][aria-checked=true] {
  background: var(--accento-tenue); border-color: var(--accento);
  color: var(--accento-scuro); font-weight: 620;
}

.scelte-schede { display: grid; gap: 7px; }
.scelte-schede > [role=radio] {
  display: grid; grid-template-columns: 18px 1fr; gap: 10px; align-items: start; text-align: left;
  padding: 11px 13px; border: 1px solid var(--bordo-forte); border-radius: var(--r-s);
  background: var(--superficie); color: var(--testo); font: inherit; cursor: pointer;
  transition: border-color .12s, background .12s;
}
.scelte-schede > [role=radio][aria-checked=true] {
  border-color: var(--accento); background: var(--accento-tenue);
  box-shadow: inset 0 0 0 1px var(--accento);
}
.scelte-schede .bollo {
  width: 16px; height: 16px; margin-top: 2px; border-radius: 50%; position: relative;
  border: 1.5px solid var(--bordo-forte); background: var(--superficie);
}
.scelte-schede > [role=radio][aria-checked=true] .bollo { border-color: var(--accento); }
.scelte-schede > [role=radio][aria-checked=true] .bollo::after {
  content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--accento);
}
.scelte-schede .titolo-scelta { display: block; font-size: 13.5px; font-weight: 620; }
.scelte-schede .spiega-scelta { display: block; font-size: 12px; color: var(--testo-3); line-height: 1.45; }

/* comuni: passaggio del mouse e fuoco, per tutti e tre i vestiti */
.scelte > [role=radio]:hover { background: var(--superficie-hover); color: var(--testo); }
.scelte-segmenti > [role=radio][aria-checked=true]:hover { background: var(--accento-scuro); color: var(--accento-testo); }
.scelte-schede > [role=radio][aria-checked=true]:hover { background: var(--accento-tenue); }
.scelte-pastiglie > [role=radio]:focus-visible,
.scelte-schede > [role=radio]:focus-visible { outline: 2px solid var(--accento); outline-offset: 1px; }

.interruttore { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; user-select: none; }
.interruttore input { position: absolute; opacity: 0; }
.interruttore .traccia {
  width: 36px; height: 20px; border-radius: 99px; background: var(--bordo-forte);
  position: relative; transition: background .15s; flex: 0 0 auto;
}
.interruttore .traccia::after {
  content: ''; position: absolute; inset: 2px auto 2px 2px; width: 16px; height: 16px;
  border-radius: 50%; background: #fff; transition: transform .15s; box-shadow: var(--ombra-1);
}
.interruttore input:checked + .traccia { background: var(--accento); }
.interruttore input:checked + .traccia::after { transform: translateX(16px); }
.interruttore input:focus-visible + .traccia { outline: 2px solid var(--accento); outline-offset: 2px; }

.filtri { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.pannello-filtri > summary {
  display: none; cursor: pointer; padding: 12px 14px; font-weight: 600; font-size: 13.5px;
  list-style: none; align-items: center; gap: 8px;
}
.pannello-filtri > summary::-webkit-details-marker { display: none; }
.pannello-filtri > summary::after { content: '⌄'; margin-left: auto; color: var(--testo-3); transition: transform .15s; }
.pannello-filtri[open] > summary::after { transform: rotate(180deg); }
.pannello-filtri[open] > summary { border-bottom: 1px solid var(--bordo); }
.filtri .campo { flex: 1 1 150px; max-width: 230px; }
/* un gruppo di scelte fra i filtri non è una colonna: si allarga per quello che
   contiene, e con `largo` (i tredici mesi) prende la riga intera */
.filtri .campo-scelte { flex: 0 1 auto; max-width: none; }
.filtri .campo-scelte.largo { flex: 1 1 100%; }
.segmenti { display: inline-flex; background: var(--superficie-alt); border-radius: var(--r-s); padding: 2px; gap: 2px; }
.segmenti button {
  border: 0; background: transparent; padding: 6px 12px; border-radius: 5px;
  font-size: 13px; font-weight: 550; color: var(--testo-2); cursor: pointer;
}
.segmenti button[aria-pressed="true"] { background: var(--superficie); color: var(--testo); box-shadow: var(--ombra-1); }

/* ------------------------------------------------------------------- schede */
.scheda {
  background: var(--superficie); border: 1px solid var(--bordo);
  border-radius: var(--r-l); box-shadow: var(--ombra-1); overflow: hidden;
}
.scheda-testa {
  display: flex; align-items: center; gap: 12px; padding: 14px 16px;
  border-bottom: 1px solid var(--bordo);
}
.scheda-testa h2, .scheda-testa h3 { flex: 1; min-width: 0; }
.scheda-corpo { padding: 16px; }
.scheda-corpo.stretto { padding: 10px 16px 16px; }
.scheda { display: flex; flex-direction: column; }
.scheda > .scheda-corpo { flex: 1; }
.scheda-corpo.centrato { display: flex; flex-direction: column; justify-content: center; }

.griglia { display: grid; gap: 14px; }
/* Le griglie asimmetriche (2fr/1fr, 3fr/2fr…) portano le colonne INLINE,
   ognuna col suo rapporto: il ripiego a colonna sola sotto i 900px lo fa
   questa classe — prima lo decideva window.innerWidth nel JS di quattro
   viste, che per giunta non seguiva il resize (audit frontend/ux §6.7). */
@media (max-width: 900px) {
  .griglia.due-colonne { grid-template-columns: 1fr !important; }
}
.g-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.g-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.g-4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
.g-5 { grid-template-columns: repeat(5, minmax(0,1fr)); }
.g-auto { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

/* ------------------------------------------------------------------ KPI */
.kpi {
  background: var(--superficie); border: 1px solid var(--bordo); border-radius: var(--r-l);
  padding: 14px 16px 15px; box-shadow: var(--ombra-1); position: relative; overflow: hidden;
  display: flex; flex-direction: column; gap: 3px; min-width: 0;
}
.kpi::before { content:''; position:absolute; inset:0 auto 0 0; width:3px; background: var(--kpi-colore, var(--bordo-forte)); }
.kpi-etichetta {
  font-size: 11.5px; font-weight: 650; letter-spacing: .085em; text-transform: uppercase;
  color: var(--testo-3); display: flex; align-items: center; gap: 6px;
}
.kpi-valore { font-size: 24px; font-weight: 640; letter-spacing: -.025em; line-height: 1.15; }
@media (min-width: 1200px) { .kpi-valore { font-size: 26px; } }
/* Sui monitor larghi 22px sono pochi: i riquadri sembrano incollati ai bordi.
   Si alza il margine una volta sola, e barra, avvisi e pagina lo seguono. */
@media (min-width: 1200px) { :root { --gutter: 34px; } }
@media (min-width: 1600px) { :root { --gutter: 44px; } }
.kpi-nota { font-size: 12px; color: var(--testo-2); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

.delta { display: inline-flex; align-items: center; gap: 3px; font-weight: 600; font-size: 12px; }
.delta.su { color: var(--positivo); } .delta.giu { color: var(--negativo); } .delta.piatto { color: var(--testo-3); }

.badge {
  display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: var(--r-pill);
  font-size: 11.5px; font-weight: 600; background: var(--superficie-alt); color: var(--testo-2);
  border: 1px solid var(--bordo);
}
.badge.ok   { background: var(--positivo-tenue);   color: var(--positivo);   border-color: transparent; }
.badge.att  { background: var(--attenzione-tenue); color: var(--attenzione); border-color: transparent; }
.badge.err  { background: var(--negativo-tenue);   color: var(--negativo);   border-color: transparent; }
.badge.info { background: var(--accento-tenue);    color: var(--accento-scuro); border-color: transparent; }

/* avviso in linea a piena larghezza: il testo va a capo, la pastiglia no */
.avviso-riga {
  display: block; padding: 11px 14px; border-radius: var(--r-m); font-size: 13.5px;
  background: var(--superficie-alt); color: var(--testo-2); border-left: 3px solid var(--bordo-forte);
}
.avviso-riga b { color: var(--testo); }
.avviso-riga.info { background: var(--accento-tenue); color: var(--accento-scuro); border-left-color: var(--accento); }
.avviso-riga.att  { background: var(--attenzione-tenue); color: var(--attenzione); border-left-color: var(--attenzione); }
.avviso-riga.critico { background: var(--negativo-tenue); color: var(--negativo); border-left-color: var(--negativo); }

/* striscia di avvisi sotto la barra, presente su ogni pagina */
.avvisi-testata { display: grid; gap: 6px; padding: 10px var(--gutter) 0; max-width: 1420px; margin: 0 auto; width: 100%; }
.avvisi-testata:empty { display: none; }
.avviso-testata {
  display: flex; align-items: flex-start; gap: 10px; padding: 10px 14px;
  border-radius: var(--r-m); font-size: 13.5px; border: 1px solid transparent; cursor: pointer;
  text-align: left; width: 100%; background: var(--superficie-alt); color: var(--testo-2);
}
.avviso-testata:hover { filter: brightness(.98); }
.avviso-testata .segnale { font-weight: 700; flex: 0 0 auto; line-height: 1.45; }
.avviso-testata b { display: block; color: inherit; }
.avviso-testata span.dettaglio { color: inherit; opacity: .82; font-size: 12.5px; }
.avviso-testata.critico { background: var(--negativo-tenue); color: var(--negativo); border-color: color-mix(in srgb, var(--negativo) 30%, transparent); }
.avviso-testata.attenzione { background: var(--attenzione-tenue); color: var(--attenzione); border-color: color-mix(in srgb, var(--attenzione) 30%, transparent); }
.avviso-testata.info { background: var(--accento-tenue); color: var(--accento-scuro); border-color: transparent; }
.avviso-testata .chiudi { margin-left: auto; opacity: .6; background: none; border: 0; color: inherit; cursor: pointer; padding: 0 2px; }
.avviso-testata .chiudi:hover { opacity: 1; }
@media (max-width: 640px) { .avvisi-testata { padding: 8px var(--gutter) 0; } }
@media (max-width: 640px) {
  /* su telefono i banner si riducono alla sola riga del titolo */
  .avviso-testata .dettaglio { display: none; }
  .avviso-testata { padding: 8px 10px; font-size: 12.5px; }
}

/* barra di avanzamento */
.avanzamento { height: 7px; border-radius: 99px; background: var(--superficie-alt); overflow: hidden; }
.avanzamento > i { display:block; height: 100%; border-radius: 99px; background: var(--avz-colore, var(--accento)); transition: width .4s cubic-bezier(.4,0,.2,1); }

/* ------------------------------------------------------------------ tabelle */
.tabella-wrap { overflow-x: auto; }
/* Tabelle lunghe (20+ righe): un tetto d'altezza, che è la condizione perché
   l'intestazione `sticky` qui sotto possa attaccarsi a qualcosa. Senza, la
   `th` dichiarava `position: sticky` e non teneva: una promessa che il CSS
   faceva e non manteneva (audit frontend/ux §4). Sotto le venti righe niente
   tetto, così non si aggiunge uno scorrimento annidato dove non serve. */
.tabella-wrap.alta { max-height: min(70vh, 640px); overflow-y: auto; }
@media print { .tabella-wrap.alta { max-height: none; overflow: visible; } }
table.tab { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.tab th {
  text-align: left; font-size: 11px; font-weight: 650; letter-spacing: .07em;
  text-transform: uppercase; color: var(--testo-3); padding: 9px 12px;
  border-bottom: 1px solid var(--bordo); background: var(--superficie); position: sticky; top: 0; z-index: 1;
  white-space: nowrap;
}
/* intestazione ordinabile: il titolo diventa un pulsante, quindi raggiungibile
   da tastiera, e la freccia dice il verso. `aria-sort` sulla th lo dice a chi
   non vede la freccia (audit frontend/ux §3). */
table.tab th.ordinabile { padding: 0; }
table.tab th.ordinabile > button {
  width: 100%; display: flex; align-items: center; gap: 5px;
  padding: 9px 12px; background: none; border: 0; cursor: pointer;
  font: inherit; color: inherit; letter-spacing: inherit; text-transform: inherit;
  text-align: inherit;
}
table.tab th.ordinabile > button:hover { background: var(--superficie-hover); }
table.tab th.ordinabile .freccia::before { content: '↕'; opacity: .35; }
table.tab th.ord-su  .freccia::before { content: '↑'; opacity: 1; }
table.tab th.ord-giu .freccia::before { content: '↓'; opacity: 1; }
table.tab th.destra.ordinabile > button { justify-content: flex-end; }
@media print { table.tab th.ordinabile .freccia { display: none; } }

table.tab td { padding: 9px 12px; border-bottom: 1px solid var(--bordo); vertical-align: middle; }
table.tab tbody tr:last-child td { border-bottom: 0; }
@media (hover: hover) { table.tab tbody tr:hover td { background: var(--superficie-alt); } }
table.tab .destra, table.tab th.destra { text-align: right; }
table.tab .importo { font-variant-numeric: tabular-nums; font-weight: 570; white-space: nowrap; }
table.tab tr.riga-attenuata td { opacity: .62; }
.azioni-riga { display: flex; gap: 3px; justify-content: flex-end; opacity: 0; transition: opacity .12s; }
tr:hover .azioni-riga, tr:focus-within .azioni-riga { opacity: 1; }
@media (hover: none) { .azioni-riga { opacity: 1; } }

.pastiglia-cat { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.nota-riga { font-size: 11.5px; color: var(--testo-3); max-width: 480px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.punto { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; background: var(--punto-colore, var(--testo-3)); }

/* --------------------------------------------------------------- vuoto/carico */
.vuoto { text-align: center; padding: 46px 20px; color: var(--testo-3); }
.vuoto .emoji { font-size: 30px; display: block; margin-bottom: 10px; opacity: .75; }
.vuoto h3 { color: var(--testo-2); margin-bottom: 5px; }
.scheletro { background: linear-gradient(90deg, var(--superficie-alt) 25%, var(--superficie-hover) 50%, var(--superficie-alt) 75%);
  background-size: 200% 100%; animation: brillio 1.4s ease-in-out infinite; border-radius: var(--r-s); }
@keyframes brillio { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }

/* ------------------------------------------------------------------- modali */
.velo {
  position: fixed; inset: 0; background: rgba(10,10,8,.45); backdrop-filter: blur(2px);
  display: grid; place-items: center; padding: 16px; z-index: 100;
  animation: sfuma .16s ease-out;
}
@keyframes sfuma { from { opacity: 0; } }
.modale {
  background: var(--superficie); border: 1px solid var(--bordo); border-radius: var(--r-l);
  box-shadow: var(--ombra-3); width: min(620px, 100%); max-height: min(88dvh, 900px);
  display: flex; flex-direction: column; animation: sali .2s cubic-bezier(.2,.8,.2,1);
}
@keyframes sali { from { transform: translateY(12px) scale(.985); opacity: 0; } }
.modale-testa { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--bordo); }
.modale-testa h2 { flex: 1; }
.modale-corpo { padding: 18px; overflow-y: auto; display: grid; gap: 14px; }
.modale-piede { display: flex; gap: 8px; justify-content: flex-end; padding: 14px 18px; border-top: 1px solid var(--bordo); background: var(--superficie-alt); }
/* col riepilogo il piede diventa a due righe: l'esito del calcolo su tutta la
   larghezza, i pulsanti sotto — così le voci non comprimono le azioni */
.modale-piede.con-riepilogo { flex-direction: column; align-items: stretch; gap: 10px; }
.modale-azioni { display: flex; gap: 8px; align-items: center; justify-content: flex-end; flex: 0 0 auto; }

/* Sezioni richiudibili dentro un form: i campi rari non pesano sulla lettura,
   ma restano nello stesso form (una sola submit, nessuna scheda da cercare). */
.sezione-form { grid-column: 1/-1; border: 1px solid var(--bordo); border-radius: var(--r-m); background: var(--superficie-alt); }
.sezione-form > summary {
  display: flex; align-items: center; gap: 8px; cursor: pointer; list-style: none;
  padding: 9px 12px; font-size: 12px; font-weight: 620; color: var(--testo-2);
  letter-spacing: .02em; border-radius: var(--r-m);
}
.sezione-form > summary::-webkit-details-marker { display: none; }
.sezione-form > summary::before {
  content: '›'; font-size: 15px; line-height: 1; color: var(--testo-3);
  transition: transform .15s; flex: 0 0 auto;
}
.sezione-form[open] > summary::before { transform: rotate(90deg); }
.sezione-form > summary:hover { background: var(--superficie-hover); }
.sezione-form > summary em { font-style: normal; font-weight: 400; color: var(--testo-3); font-size: 11.5px; }
.sezione-form[open] > summary { border-bottom: 1px solid var(--bordo); border-radius: var(--r-m) var(--r-m) 0 0; }
.sezione-corpo {
  display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px;
  padding: 13px 12px; background: var(--superficie); border-radius: 0 0 var(--r-m) var(--r-m);
}

/* Riepilogo del calcolo nel piede: l'esito è accanto al pulsante che lo salva. */
.riepilogo-form {
  display: flex; flex-wrap: wrap; gap: 3px 16px; align-items: baseline;
  font-size: 12px; min-width: 0; line-height: 1.5;
}
.riepilogo-form:empty { display: none; }
.riepilogo-form .voce-calcolo { display: flex; gap: 5px; align-items: baseline; white-space: nowrap; }
.riepilogo-form .voce-calcolo span { color: var(--testo-3); }
.riepilogo-form .voce-calcolo b { font-weight: 600; font-variant-numeric: tabular-nums; }
.riepilogo-form .voce-calcolo.forte b { font-size: 14px; }
.riepilogo-form .voce-calcolo.meno b { color: var(--negativo); }

.avvisi { position: fixed; right: 16px; bottom: 16px; z-index: 200; display: grid; gap: 8px; max-width: min(380px, calc(100vw - 32px)); }
.avviso {
  display: flex; gap: 10px; align-items: flex-start; padding: 11px 14px; border-radius: var(--r-m);
  background: var(--superficie); border: 1px solid var(--bordo); box-shadow: var(--ombra-2);
  font-size: 13.5px; animation: entra .2s cubic-bezier(.2,.8,.2,1);
}
@keyframes entra { from { transform: translateX(14px); opacity: 0; } }
.avviso.ok  { border-left: 3px solid var(--positivo); }
.avviso.err { border-left: 3px solid var(--negativo); }
.avviso.att { border-left: 3px solid var(--attenzione); }

/* ------------------------------------------------------------------ grafici */
.grafico { width: 100%; display: block; overflow: visible; }
.grafico .griglia-linea { stroke: var(--griglia); stroke-width: 1; }
.grafico .asse-testo { fill: var(--testo-3); font-size: 11px; font-family: var(--font); }
.grafico .serie-linea { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.grafico .punto-serie { stroke: var(--superficie); stroke-width: 2; }
.grafico .barra-dato { transition: opacity .12s; }
.grafico .barra-dato:hover { opacity: .82; }
.legenda { display: flex; flex-wrap: wrap; gap: 6px 16px; padding: 2px 0 10px; font-size: 12.5px; color: var(--testo-2); }
.legenda span { display: inline-flex; align-items: center; gap: 6px; }
.legenda i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.suggerimento {
  position: fixed; z-index: 150; pointer-events: none; background: var(--superficie);
  border: 1px solid var(--bordo-forte); border-radius: var(--r-m); box-shadow: var(--ombra-2);
  padding: 9px 11px; font-size: 12.5px; min-width: 140px; opacity: 0; transition: opacity .1s;
}
.suggerimento.visibile { opacity: 1; }
.suggerimento dt { color: var(--testo-3); font-size: 11px; margin-bottom: 4px; }
.suggerimento .riga-sug { display: flex; align-items: center; gap: 8px; justify-content: space-between; }
.suggerimento .riga-sug b { font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------- calendario */
.cal-griglia { display: grid; grid-template-columns: repeat(7, minmax(0,1fr)); gap: 3px; }
.cal-intestazione { font-size: 11px; font-weight: 650; color: var(--testo-3); text-align: center; padding: 4px 0; text-transform: uppercase; letter-spacing: .06em; }
.cal-giorno {
  aspect-ratio: 1; border-radius: 6px; border: 1px solid transparent; background: var(--superficie-alt);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  font-size: 11.5px; cursor: pointer; position: relative; padding: 2px;
}
.cal-giorno:hover { border-color: var(--bordo-forte); }
.cal-giorno.fuori { opacity: .3; pointer-events: none; }
.cal-giorno.oggi { border-color: var(--accento); font-weight: 700; }
.cal-giorno.non-lavorativo { background: transparent; color: var(--testo-3); }
.cal-giorno .segno { display: flex; gap: 2px; }
.cal-giorno .segno i { width: 4px; height: 4px; border-radius: 50%; }

/* --------------------------------------------------- calendario: vista mese */
.cal-mese { display: grid; grid-template-columns: repeat(7, minmax(0,1fr)); gap: 4px; }
.cal-mese-giorno {
  min-height: 86px; border-radius: var(--r-s); border: 1px solid var(--bordo);
  background: var(--superficie); display: flex; flex-direction: column; align-items: stretch;
  gap: 2px; padding: 5px 6px; font-size: 12px; cursor: pointer; text-align: left; overflow: hidden;
}
.cal-mese-giorno:hover { border-color: var(--bordo-forte); background: var(--superficie-alt); }
.cal-mese-giorno.fuori { visibility: hidden; }
.cal-mese-giorno.oggi { border-color: var(--accento); box-shadow: inset 0 0 0 1px var(--accento); }
.cal-mese-giorno.non-lavorativo { background: var(--superficie-alt); }
.cal-mese-giorno .numero { font-weight: 650; font-size: 12.5px; }
.cal-mese-giorno.non-lavorativo .numero { color: var(--testo-3); }
.cal-mese-giorno .voce {
  font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-variant-numeric: tabular-nums;
}
.cal-mese-giorno .voce.pill {
  background: color-mix(in srgb, var(--attenzione) 14%, transparent);
  color: var(--attenzione); border-radius: 4px; padding: 1px 5px; font-weight: 600;
}
.cal-mese-giorno .voce.pill.ok { background: color-mix(in srgb, var(--positivo) 12%, transparent); color: var(--positivo); }

/* -------------------------------------------------------------------- agenda */
.agenda { display: grid; gap: 2px; }
.agenda-data {
  font-size: 12px; font-weight: 650; color: var(--testo-2); text-transform: uppercase;
  letter-spacing: .04em; padding: 12px 4px 4px; border-bottom: 1px solid var(--bordo);
}
.agenda-data.scaduta { color: var(--negativo); }
.agenda-voce {
  display: flex; align-items: center; gap: 10px; padding: 8px 6px; border: 0; background: transparent;
  border-radius: var(--r-s); cursor: pointer; font-size: 13.5px; text-align: left; width: 100%;
}
.agenda-voce:hover { background: var(--superficie-alt); }
.agenda-voce .titolo { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.agenda-voce .importo { font-variant-numeric: tabular-nums; font-weight: 600; }

/* ---------------------------------------------------------------------- tab */
.tab-gruppo { display: inline-flex; background: var(--superficie-alt); border: 1px solid var(--bordo);
  border-radius: var(--r-m); padding: 2px; gap: 2px; }
.tab-voce { border: 0; background: transparent; padding: 6px 12px; font-size: 13px; font-weight: 600;
  color: var(--testo-2); border-radius: calc(var(--r-m) - 2px); cursor: pointer; }
.tab-voce[aria-selected="true"] { background: var(--superficie); color: var(--testo); box-shadow: var(--ombra-1); }
.tab-gruppo.mesi { display: flex; width: 100%; overflow-x: auto; scrollbar-width: none; }
.tab-gruppo.mesi::-webkit-scrollbar { display: none; }
.tab-gruppo.mesi .tab-voce { flex: 1 0 auto; text-align: center; }

/* ------------------------------------------------------------------- login */
.pagina-login { min-height: 100dvh; display: grid; place-items: center; padding: 20px;
  background: radial-gradient(1100px 600px at 50% -12%, var(--accento-tenue), var(--sfondo) 62%); }
.riquadro-login { width: min(400px, 100%); background: var(--superficie); border: 1px solid var(--bordo);
  border-radius: 18px; box-shadow: var(--ombra-2); padding: 30px 28px; }
.riquadro-login .marchio { padding: 0 0 20px; }

/* icone: regole di COMPONENTE, e stanno prima degli helper responsive di
   proposito. Erano finite dopo, e `.ico-svg { display: inline-flex }` vinceva
   su `.solo-mobile { display: none }` per sola posizione nel foglio (stessa
   specificità, vince l'ultima): il pulsante «Menu» da telefono restava
   visibile anche sul desktop e spingeva via il titolo di 44px. */
.ico svg, .ico-svg svg { width: 18px; height: 18px; display: block; }
.voce .ico { display: inline-flex; width: 18px; }
.barra-inferiore .ico svg { width: 20px; height: 20px; }
.ico-svg { display: inline-flex; align-items: center; justify-content: center; }

/* -------------------------------------------------------------- responsive */
/* Gli helper di visibilità vengono DOPO i componenti: devono poter nascondere
   qualunque cosa, e l'ultima regola vince. Non aggiungere !important qui —
   se serve, vuol dire che un componente è stato scritto sotto. */
.solo-mobile { display: none; }
.solo-tablet { display: none; }
/* ------------------------------------------------------------ indice della guida
   Ventidue sezioni: i titoli in fila, come pastiglie, per arrivarci con un clic
   invece che scorrendo.                                                        */
.indice-guida { display: flex; flex-wrap: wrap; gap: 6px; }
.indice-guida .btn { font-weight: 500; }

/* ---------------------------------------------------- un valore con le frecce
   `‹ Anno 2026 ›`: per l'anno di lavoro, dove si va avanti e indietro di uno.
   Veste la pillola che c'era prima, così in barra non cambia il peso visivo. */
.passo-valore {
  display: inline-flex; align-items: center; gap: 1px; flex: 0 0 auto;
  background: var(--accento-tenue); border-radius: var(--r-pill);
  border: 1px solid color-mix(in srgb, var(--accento) 35%, transparent);
  padding: 2px;
}
.passo-valore:hover { border-color: var(--accento); }
.passo-freccia {
  border: 0; background: transparent; cursor: pointer; font: inherit;
  color: var(--accento); font-weight: 750; font-size: 15px; line-height: 1;
  padding: 5px 9px; border-radius: var(--r-pill);
}
.passo-freccia:hover:not(:disabled) { background: color-mix(in srgb, var(--accento) 14%, transparent); }
.passo-freccia:disabled { opacity: .34; cursor: default; }
.passo-freccia:focus-visible { outline: 2px solid var(--accento); outline-offset: 1px; }
.passo-testo {
  font-weight: 750; font-size: 14px; color: var(--accento); letter-spacing: .01em;
  font-variant-numeric: tabular-nums; padding: 0 3px; white-space: nowrap;
}

.pill-anno {
  width: auto; flex: 0 0 auto;
  font-weight: 750; font-size: 14px; color: var(--accento);
  background: var(--accento-tenue); border: 1px solid color-mix(in srgb, var(--accento) 35%, transparent);
  border-radius: 999px; padding: 6px 28px 6px 13px; cursor: pointer; letter-spacing: .01em;
}
.pill-anno:hover { border-color: var(--accento); }
@media (min-width: 641px) and (max-width: 1024px) { .solo-tablet { display: initial; max-width: 170px; } }

@media (max-width: 1080px) {
  .g-5 { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .g-4 { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

/* Rail di sole icone: le stesse regole servono due padroni — il tablet
   (641-1024px, dove scatta da solo) e la compressione manuale su desktop
   (.app.nav-compressa, col pulsante « in fondo alla barra). */
.app.nav-compressa { grid-template-columns: 64px 1fr; }
.app.nav-compressa .laterale { width: 64px; padding: 12px 8px; overflow: visible; }
@media (min-width: 641px) and (max-width: 1024px) {
  .app { grid-template-columns: 64px 1fr; }
  .laterale { width: 64px; padding: 12px 8px; overflow: visible; }
  .laterale .marchio-testo, .laterale .menu-gruppo > span,
  .laterale .selettore-azienda, .laterale #nome-utente { display: none; }
  .laterale .voce { justify-content: center; padding: 10px 0; }
  .laterale .voce .ico { margin: 0; font-size: 19px; }
  .laterale .voce span:not(.ico) { display: none; }
  .laterale .piede-nav { flex-direction: column; }
  .g-5 { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .g-4 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  /* il selettore cliente si sposta nella barra in alto (gestito da app.js) */
}
.app.nav-compressa .laterale .marchio-testo,
.app.nav-compressa .laterale .menu-gruppo > span,
.app.nav-compressa .laterale .selettore-azienda,
.app.nav-compressa .laterale #nome-utente { display: none; }
.app.nav-compressa .laterale .voce { justify-content: center; padding: 10px 0; }
.app.nav-compressa .laterale .voce .ico { margin: 0; font-size: 19px; }
.app.nav-compressa .laterale .voce span:not(.ico) { display: none; }
.app.nav-compressa .laterale .piede-nav { flex-direction: column; }
/* col rail manuale il cliente si sceglie dalla barra in alto, come sul tablet */
.app.nav-compressa .solo-tablet { display: initial; max-width: 170px; }

/* pulsante di compressione: vive nel piede, solo desktop (sul tablet il rail
   è automatico, sul telefono la barra è un cassetto) */
#btn-comprimi { display: none; }
@media (min-width: 1025px) {
  #btn-comprimi { display: inline-flex; }
}

@media (max-width: 640px) {
  :root { --gutter: 14px; }
  .app { grid-template-columns: 1fr; }
  .solo-mobile { display: initial; }
  /* `initial` vale `inline` e spegnerebbe il centraggio dei pulsanti-icona,
     lasciando la lineetta del menu 8px fuori asse: qui si rimette quello che
     il componente chiede, con un selettore più specifico invece di !important */
  .ico-svg.solo-mobile { display: inline-flex; }
  .solo-desktop { display: none !important; }

  .laterale {
    position: fixed; inset: 0 auto 0 0; width: min(280px, 84vw); z-index: 90;
    transform: translateX(-102%); transition: transform .22s cubic-bezier(.2,.8,.2,1);
    box-shadow: var(--ombra-3); height: 100dvh;
  }
  .laterale.aperta { transform: none; }
  .velo-nav { position: fixed; inset: 0; background: rgba(10,10,8,.4); z-index: 85; }

  .barra { padding: 10px 12px; gap: 6px; flex-wrap: wrap; }
  .barra h1 { font-size: 16px; flex: 1 1 auto; min-width: 0; overflow: hidden;
              text-overflow: ellipsis; white-space: nowrap; }
  /* i select non si stringono sotto la leggibilità: la barra va a capo */
  .barra select { min-width: 74px; max-width: none; padding: 7px 24px 7px 9px; font-size: 13px; }
  #azioni-barra { flex-wrap: wrap; row-gap: 6px; }
  .barra .btn { padding: 7px 10px; font-size: 12.5px; }
  .pagina { padding: 14px var(--gutter); padding-bottom: 84px; }
  .pagina > * + * { margin-top: 14px; }

  .g-5, .g-4, .g-3, .g-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  /* niente card orfana: in una griglia dispari l'ultima riga si allarga */
  .g-5 > :last-child:nth-child(odd), .g-3 > :last-child:nth-child(odd) { grid-column: 1 / -1; }
  .kpi-valore { font-size: 20px; }
  .kpi { padding: 12px 13px; }

  /* tabelle → elenco a schede */
  table.tab.adattiva thead { display: none; }
  table.tab.adattiva, table.tab.adattiva tbody, table.tab.adattiva tr, table.tab.adattiva td { display: block; width: 100%; }
  table.tab.adattiva tr {
    border: 1px solid var(--bordo); border-radius: var(--r-m); margin-bottom: 8px;
    padding: 10px 12px; background: var(--superficie);
  }
  table.tab.adattiva td { border: 0; padding: 3px 0; display: flex; justify-content: space-between; gap: 12px; align-items: center; }
  table.tab.adattiva td::before {
    content: attr(data-et); font-size: 11px; font-weight: 600; color: var(--testo-3);
    text-transform: uppercase; letter-spacing: .05em; flex: 0 0 auto;
  }
  /* su mobile la scheda contenitore sparisce: le righe sono già schede */
  .scheda:has(> .scheda-corpo > .tabella-wrap > .tab.adattiva) {
    border: 0; background: transparent; box-shadow: none;
  }
  .scheda > .scheda-corpo:has(> .tabella-wrap > .tab.adattiva) { padding: 0; }
  table.tab.adattiva tbody tr:hover td { background: transparent; }
  table.tab.adattiva td.principale { font-size: 15px; font-weight: 600; padding-bottom: 2px; }
  table.tab.adattiva td.principale::before { display: none; }
  /* la data fa da soprattitolo della scheda, senza etichetta */
  table.tab.adattiva td.meta-riga {
    order: -1; font-size: 11.5px; color: var(--testo-3); font-weight: 600;
    text-transform: uppercase; letter-spacing: .04em; padding: 0 0 2px;
  }
  table.tab.adattiva td.meta-riga::before { display: none; }
  table.tab.adattiva tr { display: flex; flex-direction: column; }
  table.tab.adattiva .azioni-riga { opacity: 1; justify-content: flex-start; }

  .barra-inferiore {
    position: fixed; inset: auto 0 0 0; z-index: 80; display: grid;
    grid-auto-flow: column; grid-auto-columns: 1fr; gap: 2px; padding: 6px 6px calc(6px + env(safe-area-inset-bottom));
    background: color-mix(in srgb, var(--superficie) 94%, transparent);
    backdrop-filter: saturate(180%) blur(14px); border-top: 1px solid var(--bordo);
  }
  .barra-inferiore button {
    display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 2px;
    border: 0; background: transparent; color: var(--testo-3); font-size: 10px; font-weight: 600;
    border-radius: var(--r-s); cursor: pointer;
  }
  .barra-inferiore button .ico { font-size: 17px; }
  /* sei colonne a 390px fanno ~60px l'una: un nome lungo va troncato QUI, con
     i puntini, invece di allargare la colonna e sovrapporre le vicine */
  .barra-inferiore button .eti {
    max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .barra-inferiore button[aria-current="page"] { color: var(--accento); background: var(--accento-tenue); }
  .modale { width: 100%; max-height: 92dvh; }
  .modale-piede { position: sticky; bottom: 0; }
  .avvisi { left: 12px; right: 12px; bottom: 78px; max-width: none; }
}

@media (max-width: 560px) {
  :root { --gutter: 12px; }
  /* i KPI restano a due colonne: leggibili e senza scroll infinito */
  .g-3, .g-2, .g-auto { grid-template-columns: 1fr; }
  .g-5, .g-4 { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }
  .kpi { padding: 11px 12px; }
  .kpi-valore { font-size: 17.5px; letter-spacing: -.03em; }
  .kpi-etichetta { font-size: 10px; letter-spacing: .06em; }
  .kpi-nota { font-size: 11px; }
  /* i filtri si aprono solo quando servono e stanno su due colonne */
  .pannello-filtri > summary { display: flex; }
  .filtri { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); }
  .filtri .campo { max-width: none; }
  .filtri .campo-largo { grid-column: 1 / -1; }
  .pagina { padding: 12px var(--gutter); }
  .scheda-testa { padding: 12px 13px; }
  .scheda-corpo { padding: 13px; }
}

/* la colonna di anteprima resta a vista mentre si compila il modulo */
@media (min-width: 1025px) {
  .scheda.appiccicata { position: sticky; top: 74px; align-self: start; }
}

@media print {
  .laterale, .barra-inferiore, .barra .btn, .azioni-riga { display: none !important; }
  .app { grid-template-columns: 1fr; }
  .scheda { break-inside: avoid; box-shadow: none; }
  body { background: #fff; }
}

/* versione dell'app in fondo al menu: piccola, spenta, ma consultabile */
.versione-app {
  padding: 0 14px 8px; font-size: 10.5px; color: var(--testo-3);
  letter-spacing: .03em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.app.nav-compressa .versione-app, .laterale.rail .versione-app { display: none; }
@media (max-width: 1024px) { .versione-app { display: none; } }

/* Scadenzario: le voci dello stesso giorno stanno insieme, i giorni si
   separano con una linea. Su telefono la tabella diventa a schede e la
   separazione la fa già il bordo della scheda. */
.tab tbody tr.nuovo-giorno > td { border-top: 2px solid var(--bordo-forte); }
.tab tbody tr.nuovo-giorno:first-child > td { border-top: 0; }
.giorno-scadenza { font-weight: 650; }
.giorno-scadenza small {
  display: block; font-weight: 400; color: var(--testo-3); font-size: 11.5px;
  white-space: normal; max-width: 170px; line-height: 1.4;
}
.riferimento-tributo { color: var(--testo-3); font-size: 11.5px; margin-top: 2px; }
.riferimento-tributo .mono { color: var(--testo-2); }
@media (max-width: 720px) { .tab tbody tr.nuovo-giorno > td { border-top: 0; } }

/* lo stato deve stare su una riga: se va a capo smette di essere un'occhiata */
.tab th.stato-scadenza, .tab td.stato-scadenza { min-width: 118px; }
.tab td.stato-scadenza .badge { white-space: nowrap; }
@media (max-width: 720px) { .tab td.stato-scadenza { min-width: 0; } }

/* la scomposizione del versato può andare a capo: è una nota, non una cifra */
.tab td.versato-scadenza { min-width: 92px; }
.tab td.versato-scadenza .muto { white-space: normal; max-width: 168px; margin-left: auto; line-height: 1.35; }