/* Registro cantieri — foglio di stile UNICO, scritto a mano.
   Nessun framework, nessun build step, nessuna risorsa di rete a runtime:
   i font sono file locali in app/static/font/ (vedi FONTS.md).

   Direzione (restyle 20/08/2026): l'app parla la lingua del sito
   registrocantieri.it — stesso verde core, stesso piano verde-grigio,
   stesso notte profondo, angoli larghi, etichette maiuscole tracciate.
   Resta un gestionale: densità da scrivania, non da vetrina.

   Profondità: bordo sottile + ombra LUNGA a spread negativo (quella del
   sito) + un filo di luce in cima. Il foglio poggia sul piano, non
   galleggia. Il punto focale resta l'unica superficie scura.

   Il colore non è mai l'unico veicolo dell'informazione: ogni distintivo
   porta testo e un segno. Nessuna soglia di giudizio sui margini. */

/* ── Font locali ───────────────────────────────────────────────────── */
@font-face {
  font-family: "IBM Plex Sans";
  src: url("/static/font/plex-sans-var.woff2") format("woff2");
  font-weight: 100 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("/static/font/plex-mono-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("/static/font/plex-mono-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Palette allineata al sito registrocantieri.it: stesso verde core
     #1b7a4c, stesso piano verde-grigio, stesso notte profondo. L'app e
     il sito devono sembrare la stessa cosa. */

  /* Superfici: il piano, il foglio, la superficie tenue. */
  --canvas: #eaf0ec;          /* il piano di lavoro (page del sito) */
  --carta: #ffffff;           /* il foglio */
  --carta-riga: #f4f7f5;      /* superficie tenue: righe, blocchi quieti */
  --notte: #071a11;           /* il notte del sito */
  --notte-alto: #0c281b;      /* stesso colore, un gradino più chiaro */

  /* Inchiostro: quattro livelli, misurati sui fondi chiari
     (≥4.5:1 fino al 3; il 4 è solo testo grande, segnaposto, disegno). */
  --inchiostro: #102118;
  --inchiostro-2: #3b4b42;
  --inchiostro-3: #53645a;
  --inchiostro-4: #79887f;
  --inchiostro-chiaro: #f2f8f4;    /* testo sul notte */
  --inchiostro-chiaro-2: #b8c9be;  /* secondario sul notte */

  /* Linee: la riga del sito, non un grigio qualunque. */
  --bordo-tenue: #e0e8e3;
  --bordo: #cdd8d1;
  --bordo-forte: #b6c5bc;
  --bordo-notte: rgba(255, 255, 255, 0.12);

  /* Accento: il verde core; il verde acceso vive solo sul notte;
     le due menta sono le superfici positive del sito. */
  --verde: #1b7a4c;
  --verde-scuro: #115d39;
  --verde-vivo: #4bd38a;
  --menta: #9ae8bd;   /* solo sul notte: etichette e accenti */

  /* Le superfici della plancia (dashboard): un solo verde, due gradini
     di luminosita' piu' il fondo. Il bosco all'ombra — la tinta piu'
     scura che esiste nel mestiere. Le linee sono menta all'1-3%: si
     vedono solo se le cerchi. */
  --bosco: #0c2418;
  --bosco-alto: #123322;
  --bosco-fondo: #071a11;
  --bosco-linea: rgba(154, 232, 189, 0.13);
  --bosco-linea-forte: rgba(154, 232, 189, 0.30);
  --bosco-velo: rgba(255, 255, 255, 0.045);

  /* La rampa della composizione, rifatta per il fondo scuro: schiarisce
     invece di scurire. Ogni tono e' MISURATO sopra 3:1 sul pannello. */
  --tono-notte-1: #4bd38a;
  --tono-notte-2: #34b273;
  --tono-notte-3: #23935c;
  --tono-notte-4: #7b9187;

  /* Timbri di verifica: colore + sempre testo o segno */
  --ok-testo: #115d39;    --ok-fondo: #ddf5e7;    --ok-bordo: #b3e4ca;
  --ambra-testo: #7a5100; --ambra-fondo: #fdf0d5; --ambra-bordo: #f0d49a;
  --minio-testo: #9d2f2b; --minio-fondo: #fae9e7; --minio-bordo: #eecac5;
  --neutro-fondo: #e6ece8;

  /* Rampa per la composizione di un totale (quanto pesa ciascun tipo di
     costo): una sola tinta che schiarisce = parti di una stessa cosa,
     più un neutro per la voce non classificata ("altre voci"). Ogni
     tono è MISURATO ≥3:1 sulla carta (oggetto grafico, WCAG 1.4.11) e
     non porta mai da solo l'informazione: la legenda scrive voce e
     importo. Nessun giudizio: sono quantità, non voti. */
  --tono-1: #1b7a4c;   /* 5.34:1 */
  --tono-2: #288e5d;   /* 4.10:1 */
  --tono-3: #37a170;   /* 3.23:1 */
  --tono-4: #6b7a72;   /* 4.51:1 — neutro: la voce non classificata */

  /* Elevazione come sul sito: ombre LUNGHE e quasi invisibili (spread
     negativo), più un filo di luce in cima. Il foglio non "galleggia":
     poggia. */
  --ombra-1: 0 16px 36px -30px rgba(7, 26, 17, 0.45);
  --ombra-2: 0 28px 70px -42px rgba(7, 26, 17, 0.55);
  --ombra-notte: 0 30px 60px -40px rgba(7, 26, 17, 0.85);

  /* Spaziature: base 4, multipli soltanto */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px; --s6: 28px; --s7: 40px;

  /* Scala tipografica: rapporto 1.25 su base 14 -> 11 · 14 · 18 · 22 · 28 · 44.
     I mezzi passi del gestionale sono token, non numeri sparsi:
     12 per i metadati, 13 per il testo denso di tabelle e controlli. */
  --t-micro: 11px; --t-meta: 12px; --t-denso: 13px; --t-corpo: 14px;
  --t-medio: 18px; --t-grande: 22px; --t-titolo: 28px; --t-cifra: 44px;
  --t-display: 54px;   /* la cifra del margine: un solo numero in pagina */

  --testo: "IBM Plex Sans", system-ui, "Segoe UI", Roboto, Arial, sans-serif;
  /* I numeri sono Plex Sans con cifre TABELLARI (tnum): colonne
     allineate come col mono ma senza lo zero puntato. Il mono resta
     per <code>. */
  --numeri: "IBM Plex Sans", system-ui, "Segoe UI", Roboto, Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Consolas, "Courier New", monospace;

  /* Raggi: la scala del sito (11 · 18 · 28), portata sulla densità di
     un gestionale. Concentrici: il figlio dentro una card sta un
     gradino sotto. */
  --r1: 10px;  /* controlli */
  --r2: 14px;  /* elementi dentro le card */
  --r3: 18px;  /* card */
  --r4: 26px;  /* tessere grandi */

  --transizione: 180ms ease;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--testo);
  font-size: var(--t-corpo);
  line-height: 1.5;
  color: var(--inchiostro);
  background: var(--canvas);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
::selection { background: var(--verde-vivo); color: var(--notte); }
h1, h2, h3 { text-wrap: balance; }
p, li, td { text-wrap: pretty; }
h1 { font-size: var(--t-titolo); font-weight: 700; letter-spacing: -0.9px; margin: 0; }
h2 {
  font-size: var(--t-grande); font-weight: 700; letter-spacing: -0.6px;
  margin: 0 0 var(--s4);
}
h3 { font-size: var(--t-corpo); font-weight: 700; letter-spacing: -0.2px; }
code {
  font-family: var(--mono); font-size: var(--t-meta);
  background: var(--neutro-fondo); padding: 1px 5px; border-radius: var(--r1);
}

/* Numeri: cifre tabulari, unità di misura in secondo piano.
   L'occhio deve prendere prima la quantità, poi il simbolo. */
.cifra, .kpi-valore, td.numero {
  font-family: var(--numeri);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}
.unita {
  font-family: var(--testo);
  font-size: 0.68em;
  font-weight: 500;
  color: var(--inchiostro-3);
  letter-spacing: 0;
  margin-left: 0.06em;
}

/* ── Struttura ─────────────────────────────────────────────────────── */
.struttura { display: grid; grid-template-columns: 224px 1fr; min-height: 100vh; }

/* La barra scura è l'ossatura del prodotto: dice sempre dove sei.
   224px: serve il contenuto, non gli fa concorrenza. */
.laterale {
  background: var(--notte);
  padding: var(--s5) var(--s3);
  display: flex; flex-direction: column; gap: var(--s5);
  position: sticky; top: 0; height: 100vh;
}
.marchio {
  display: flex; align-items: center; gap: var(--s2);
  color: var(--inchiostro-chiaro); font-size: var(--t-corpo);
  font-weight: 700; letter-spacing: -0.02em;
  padding: 0 var(--s2) var(--s4);
  border-bottom: 1px solid var(--bordo-notte);
}
.marchio-icona { color: var(--verde-vivo); font-size: 12px; }
.navigazione { display: flex; flex-direction: column; gap: 2px; }
.navigazione a {
  display: flex; align-items: center; min-height: 40px;  /* area di tocco */
  padding: 0 var(--s3); border-radius: var(--r2);
  color: var(--inchiostro-chiaro-2); text-decoration: none;
  font-size: var(--t-corpo); font-weight: 600;
  transition: background-color var(--transizione), color var(--transizione);
}
.navigazione a:hover { background: rgba(255, 255, 255, 0.06); color: #fff; }
.navigazione a.attiva { background: var(--verde); color: #fff; font-weight: 600; }
.navigazione a:focus-visible,
.laterale .bottone:focus-visible {
  outline: 2px solid var(--verde-vivo); outline-offset: 2px;
}
.laterale-coda {
  margin-top: auto; display: flex; flex-direction: column; gap: var(--s3);
  padding-top: var(--s4); border-top: 1px solid var(--bordo-notte);
}
.utente-nome { color: #fff; font-weight: 600; font-size: var(--t-denso); }
.utente-azienda { color: var(--inchiostro-chiaro-2); font-size: var(--t-meta); }

/* min-width:0 obbligatorio: il contenuto è una colonna di griglia; senza,
   una tabella larga allarga la pagina invece di scorrere nel suo box. */
.contenuto { padding: var(--s6); max-width: 1200px; width: 100%; min-width: 0; }

/* ── Testata di pagina ─────────────────────────────────────────────── */
.testata-pagina {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: var(--s4); flex-wrap: wrap; margin-bottom: var(--s5);
}
.sottotitolo { margin: 2px 0 0; color: var(--inchiostro-3); font-size: var(--t-denso); }
.briciole { margin: 0 0 var(--s1); color: var(--inchiostro-3); font-size: var(--t-meta); }

/* ── Superfici ─────────────────────────────────────────────────────────
   Restyle 2026-08-20: il foglio ora si STACCA dal piano. L'anello di 1px
   dell'ombra sostituisce il bordo (stessa riga, tinta più quieta) e due
   strati morbidi danno l'appoggio. Il bordo secco resta dove serve
   davvero: divisori, campi, tabelle. */
.carta {
  background: var(--carta);
  border: 1px solid var(--bordo-tenue);
  border-radius: var(--r3);
  padding: var(--s5);
  box-shadow: var(--ombra-1), inset 0 1px #ffffff;
}
.sezione { margin-bottom: var(--s5); }

/* ── Numero di testata (costo dell'intervento) ─────────────────────── */
.kpi-etichetta {
  color: var(--verde-scuro); font-size: var(--t-micro); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.14em;
}
.kpi-valore {
  font-size: var(--t-grande); font-weight: 600; letter-spacing: -0.2px;
  margin: var(--s1) 0 0; line-height: 1.1;
}

/* ── Distintivi: colore + segno + testo, mai colore da solo ────────── */
.distintivo {
  display: inline-block; padding: 3px 10px; border-radius: 999px;
  font-size: var(--t-meta); font-weight: 700; line-height: 1.5;
  border: 1px solid transparent; margin: 1px 2px 1px 0;
}
.distintivo.positivo   { color: var(--ok-testo);    background: var(--ok-fondo);    border-color: var(--ok-bordo); }
.distintivo.attenzione { color: var(--ambra-testo); background: var(--ambra-fondo); border-color: var(--ambra-bordo); }
.distintivo.critico    { color: var(--minio-testo); background: var(--minio-fondo); border-color: var(--minio-bordo); }
.distintivo.neutro     { color: var(--inchiostro-3); background: var(--neutro-fondo); border-color: var(--bordo); }
.distintivo-largo { display: inline-block; }

/* ── Registro: la tabella ──────────────────────────────────────────────
   Restyle 2026-08-20: via le righe alternate. La zebratura serviva a non
   perdere la riga quando il foglio era piatto; ora le righe respirano
   (12px), il separatore è una linea sola e l'evidenziazione al passaggio
   basta a tenere il segno. Meno rumore sotto i numeri. */
.scorri-tabella { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th, td {
  text-align: left; padding: 12px var(--s3);
  border-bottom: 1px solid var(--bordo-tenue); vertical-align: middle;
}
th:first-child, td:first-child { padding-left: var(--s2); }
th:last-child, td:last-child { padding-right: var(--s2); }
thead th {
  padding-top: 0; padding-bottom: var(--s2);
  border-bottom: 1px solid var(--bordo);
  color: var(--inchiostro-3); font-size: var(--t-micro); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.12em; white-space: nowrap;
}
tbody tr:hover { background: var(--carta-riga); }
tbody tr:last-child td { border-bottom: none; }
tbody td { font-size: var(--t-denso); }   /* registro denso: 13 uniforme */
th.numero, td.numero { text-align: right; white-space: nowrap; }
td.numero { font-weight: 500; }
.cella-forte { font-weight: 600; font-size: var(--t-corpo); }
.cella-nota { color: var(--inchiostro-3); font-size: var(--t-meta); margin-top: 1px; }
.riga-totale td {
  background: var(--carta-riga); border-top: 1px solid var(--bordo);
  border-bottom: none; font-size: var(--t-corpo);
}
.riga-totale:hover td { background: var(--carta-riga); }
.riga-totale td:first-child { border-radius: var(--r2) 0 0 var(--r2); }
.riga-totale td:last-child { border-radius: 0 var(--r2) var(--r2) 0; }

/* La misura del margine: quota del valore rimasta dopo i costi diretti.
   Traccia NEUTRA di proposito — il prodotto non dà giudizi sui margini,
   mostra la proporzione e basta. */
.misura { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; }
.traccia {
  width: 64px; height: 6px; border-radius: 999px;
  background: var(--neutro-fondo); overflow: hidden;
}
.traccia > span {
  display: block; height: 100%; border-radius: inherit;
  background: linear-gradient(90deg, var(--verde-scuro), var(--verde));
}

/* ── Stato vuoto: spiega cosa fare, non sembra un guasto ───────────── */
/* Restyle 2026-08-20: via il bordo tratteggiato (con l'ombra faceva
   rumore). Lo stato vuoto si distingue dalla carta operativa con un
   fondo appena più caldo: è una pagina in attesa, non un guasto. */
.vuoto {
  text-align: center; padding: var(--s7) var(--s6);
  background: var(--carta-riga); border: none;
  margin-bottom: var(--s5);
}
.vuoto h2 { margin-bottom: var(--s3); }
.vuoto p { margin: 0 auto var(--s3); max-width: 54ch; color: var(--inchiostro-3); }
.vuoto-passi { font-size: var(--t-denso); }

/* ── Collegamenti, note ────────────────────────────────────────────── */
.collegamento {
  color: var(--verde-scuro); font-weight: 600; text-decoration: none;
  border-bottom: 1px solid transparent; transition: border-color var(--transizione);
}
.collegamento:hover { border-bottom-color: currentColor; }
.collegamento:focus-visible { outline: 2px solid var(--verde); outline-offset: 2px; border-radius: 2px; }
.testo-tenue { color: var(--inchiostro-3); margin: 0; }
.nota-sezione { color: var(--inchiostro-3); font-size: var(--t-meta); margin: var(--s3) 0 0; }
.intestazione-riga {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s4); flex-wrap: wrap; margin-bottom: var(--s3);
}
.intestazione-riga h2 { margin-bottom: 0; }

/* ── Controlli: HTML nativo, stilato a mano ────────────────────────── */
.filtri { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }
.filtri label { color: var(--inchiostro-3); font-size: var(--t-meta); white-space: nowrap; }
input, select, textarea { font-family: var(--testo); font-size: var(--t-denso); color: var(--inchiostro); }
select { cursor: pointer; }
.filtri input, .filtri select,
.campo input, .campo select,
.riga-form input, .riga-form select {
  padding: var(--s2) var(--s3);
  background: var(--carta-riga);          /* gli input sono incassati */
  border: 1px solid var(--bordo);
  border-radius: var(--r1);
  transition: border-color var(--transizione), background-color var(--transizione);
}
.filtri input:hover, .filtri select:hover,
.campo input:hover, .campo select:hover,
.riga-form input:hover, .riga-form select:hover { border-color: var(--bordo-forte); }
.filtri input:focus-visible, .filtri select:focus-visible,
.campo input:focus-visible, .campo select:focus-visible,
.riga-form input:focus-visible, .riga-form select:focus-visible,
.modulo input:focus-visible {
  outline: 2px solid var(--verde); outline-offset: 1px;
  border-color: var(--verde); background: var(--carta);
}
.filtri select { max-width: 190px; }
.filtri input[type="date"] { max-width: 150px; }
input:disabled, select:disabled, .bottone:disabled {
  color: var(--inchiostro-4); background: var(--neutro-fondo);
  border-color: var(--bordo-tenue); cursor: not-allowed;
}

.bottone {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 0 var(--s5);
  border-radius: var(--r1); border: 1px solid transparent;
  font-family: var(--testo); font-size: var(--t-denso); font-weight: 700;
  cursor: pointer;
  transition: background-color var(--transizione), border-color var(--transizione), transform var(--transizione);
}
.bottone:active { transform: scale(0.97); }
.bottone.primario {
  background: var(--verde); color: #fff;
  box-shadow: 0 14px 28px -20px rgba(27, 122, 76, 0.95);
}
.bottone.primario:hover { background: var(--verde-scuro); }
.bottone.primario:focus-visible { outline: 2px solid var(--verde-scuro); outline-offset: 2px; }
.bottone.secondario {
  background: var(--carta); color: var(--inchiostro); border-color: var(--bordo);
  width: 100%;
}
.bottone.secondario:hover { background: var(--neutro-fondo); border-color: var(--bordo-forte); }
.bottone.secondario:focus-visible { outline: 2px solid var(--verde); outline-offset: 2px; }
.laterale .bottone.secondario {
  background: rgba(255, 255, 255, 0.07); color: #fff; border-color: var(--bordo-notte);
}
.laterale .bottone.secondario:hover { background: rgba(255, 255, 255, 0.14); }
.bottone.compatto { min-height: 34px; padding: 0 var(--s3); font-size: var(--t-denso); width: auto; }

/* ── Avvisi ────────────────────────────────────────────────────────── */
.avviso {
  border-radius: var(--r2); padding: var(--s3) var(--s4); font-size: var(--t-denso);
  margin-bottom: var(--s4); border: 1px solid transparent;
}
.avviso.errore { background: var(--minio-fondo); color: var(--minio-testo); border-color: var(--minio-bordo); }
.avviso.successo { background: var(--ok-fondo); color: var(--ok-testo); border-color: var(--ok-bordo); }
.avviso-sotto { margin-top: var(--s4); margin-bottom: 0; }
.errore-campo {
  color: var(--minio-testo); background: var(--minio-fondo); border: 1px solid var(--minio-bordo);
  border-radius: var(--r1); padding: var(--s2) var(--s3); font-size: var(--t-denso); margin-top: var(--s2);
}

/* ── Dettaglio cantiere ────────────────────────────────────────────── */
.colonne-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); }

/* ── Configurazione ────────────────────────────────────────────────── */
.schede {
  display: flex; gap: var(--s1); flex-wrap: wrap;
  margin-bottom: var(--s4); border-bottom: 1px solid var(--bordo); padding-bottom: var(--s2);
}
.schede a {
  display: inline-flex; align-items: center; min-height: 36px;
  padding: 0 var(--s3); border-radius: var(--r2);
  color: var(--inchiostro-2); text-decoration: none; font-size: var(--t-denso); font-weight: 600;
  transition: background-color var(--transizione), color var(--transizione);
}
.schede a:hover { background: var(--neutro-fondo); color: var(--inchiostro); }
.schede a.attiva { background: var(--verde); color: #fff; font-weight: 600; }
.schede a:focus-visible { outline: 2px solid var(--verde); outline-offset: 2px; }

.modulo { display: flex; flex-direction: column; gap: var(--s2); }
.modulo label { font-size: var(--t-meta); color: var(--inchiostro-3); margin-top: var(--s2); }
.modulo input {
  padding: var(--s3); background: var(--carta-riga);
  border: 1px solid var(--bordo); border-radius: var(--r1); font-size: var(--t-corpo);
}
.modulo-inline, .modulo-griglia { display: flex; gap: var(--s3); flex-wrap: wrap; align-items: flex-end; }
.campo { display: flex; flex-direction: column; gap: var(--s1); min-width: 170px; }
.campo-largo { flex: 1; min-width: 240px; }
.campo label { font-size: var(--t-meta); color: var(--inchiostro-3); }
.modulo-inline .bottone.primario, .modulo-griglia .bottone.primario { width: auto; }

.elenco-righe { display: flex; flex-direction: column; }
.riga-voce { padding: var(--s2) 0; border-bottom: 1px solid var(--bordo-tenue); }
.riga-voce:last-child { border-bottom: none; }
.riga-form { display: flex; gap: var(--s2); align-items: center; flex-wrap: wrap; }
.riga-form input[name="nome"] { min-width: 220px; }
.etichetta-riga { min-width: 170px; }
.riga-form-contratto {
  display: grid;
  grid-template-columns: 170px minmax(120px, 1fr) 90px 138px 138px 96px auto;
  gap: var(--s2); align-items: center;
}
.riga-form-contratto input, .riga-form-contratto select, .riga-form-contratto .bottone {
  width: 100%; min-width: 0;
}
.riga-form-contratto .etichetta-riga { min-width: 0; }
.casella {
  display: flex; align-items: center; gap: var(--s1); cursor: pointer;
  font-size: var(--t-denso); color: var(--inchiostro-3); white-space: nowrap;
}

/* ── Accesso ───────────────────────────────────────────────────────── */
.accesso-sfondo { min-height: 100vh; display: grid; place-items: center; padding: var(--s5); background: var(--canvas); }
.accesso-carta {
  background: var(--carta); border: 1px solid var(--bordo-tenue);
  border-radius: var(--r4);
  box-shadow: var(--ombra-2), inset 0 1px #ffffff;
  padding: var(--s7) var(--s6); width: 100%; max-width: 440px;
}
.marchio-accesso { justify-content: center; font-size: var(--t-medio); color: var(--inchiostro); border-bottom: none; padding: 0; }
.marchio-accesso .marchio-icona { color: var(--verde); }
.accesso-sottotitolo { text-align: center; color: var(--inchiostro-3); margin: var(--s2) 0 var(--s6); }
.accesso-carta .modulo input { padding: 13px var(--s3); }
.accesso-carta .bottone.primario { width: 100%; margin-top: var(--s4); }

/* ── Tablet ────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .struttura { grid-template-columns: 1fr; }
  .laterale {
    position: static; height: auto; flex-direction: row; align-items: center;
    flex-wrap: wrap; gap: var(--s3); padding: var(--s2) var(--s4);
  }
  .marchio { border-bottom: none; padding: 0; }
  .navigazione { flex-direction: row; flex-wrap: wrap; }
  .laterale-coda {
    margin-top: 0; margin-left: auto; flex-direction: row; align-items: center;
    gap: var(--s3); padding-top: 0; border-top: none;
  }
  .bottone.secondario { width: auto; }
  .contenuto { padding: var(--s4); }
  .colonne-2 { grid-template-columns: 1fr; }
  .riga-form-contratto { display: flex; flex-wrap: wrap; }
  .riga-form-contratto input, .riga-form-contratto select, .riga-form-contratto .bottone { width: auto; }
}

/* Movimento: questa è una dashboard di lettura. Solo transizioni brevi su
   hover e focus dei controlli, e nulla per chi chiede meno movimento. */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
  .bottone:active { transform: none; }
}

/* ── Righe cliccabili e dettaglio intervento (D3) ──────────────────────
   La riga con data-href è tutta cliccabile (tabelle.js); la tastiera usa
   il link vero nella prima cella e l'anello di fuoco lo disegna la riga. */
tr[data-href] { cursor: pointer; }
tbody tr[data-href]:hover { background: #e2ede8; }
tbody tr[data-href]:focus-within { outline: 2px solid var(--verde); outline-offset: -2px; }
.collegamento-riga { color: inherit; text-decoration: none; }
.collegamento-riga:focus-visible { outline: none; }
/* La freccia della riga e' decorativa (aria-hidden) ma resta testo
   dipinto: misurata a 3.72:1 sulla carta, ora sopra soglia. */
tr[data-href] .cella-freccia { color: var(--inchiostro-3); text-align: right; }

/* ── Logo (D3b): esagono del cantiere + foglia, colori dai token ────── */
.logo { display: inline-flex; align-items: center; gap: 10px; min-width: 0; }
.logo-marchio { flex: 0 0 auto; display: block; }
/* Il marchio è disegnato nell'SVG (piastrella + foglia): qui si dice
   solo di che colore è, secondo il fondo su cui poggia. */
.logo-marchio { width: 32px; height: 32px; }
.logo-piastrella { fill: var(--verde); }
.logo-foglia { fill: #ffffff; }
.logo-nervatura { stroke: var(--verde); stroke-width: 1.6; stroke-linecap: round; }
.laterale .logo-piastrella { fill: rgba(255, 255, 255, 0.10); stroke: rgba(255, 255, 255, 0.16); }
.laterale .logo-foglia { fill: var(--verde-vivo); }
.laterale .logo-nervatura { stroke: var(--notte); }
.logo-nome { font-size: 15px; font-weight: 700; letter-spacing: -0.02em; white-space: nowrap; }


/* ── Accesso (D3b): struttura da SaaS — logo, saluto, campi, un solo CTA */
.accesso-carta { max-width: 400px; padding: var(--s7) var(--s6) var(--s6); }
.accesso-logo { display: flex; justify-content: center; margin-bottom: var(--s5); }
.accesso-logo .logo { flex-direction: column; gap: var(--s3); }
.accesso-logo .logo-marchio { width: 44px; height: 44px; }
.accesso-logo .logo-nome { font-size: var(--t-medio); }
.accesso-titolo {
  text-align: center; font-size: var(--t-titolo); font-weight: 700;
  letter-spacing: -0.9px; margin: 0 0 var(--s1);
}
.accesso-sottotitolo { margin-bottom: var(--s5); }
.accesso-carta input::placeholder { color: var(--inchiostro-4); }
.accesso-piede {
  margin: var(--s5) 0 0; padding-top: var(--s4);
  border-top: 1px solid var(--bordo-tenue);
  text-align: center; color: var(--inchiostro-3); font-size: var(--t-denso);
}

/* ── Riquadro di testata: due tessere (restyle 2026-08-20) ─────────────
   Prima era UN pannello scuro per tutta la larghezza che conteneva anche
   il dettaglio dei costi: pesante da guardare, e due perimetri diversi
   sembravano una sola sottrazione. Ora sono due tessere distinte: quella
   scura tiene SOLO il numero per cui si apre il software, il dettaglio
   torna sulla carta, dove i numeri si leggono meglio. Il notte resta
   l'unica superficie scura del contenuto: vince per contrasto. */
.bento-testata {
  display: grid;
  grid-template-columns: minmax(300px, 1.05fr) minmax(330px, 1fr);
  gap: var(--s4); margin-bottom: var(--s5);
}
.tessera-margine {
  background:
    radial-gradient(circle at 88% 12%, rgba(75, 211, 138, 0.18), transparent 38%),
    var(--notte-alto);
  color: var(--inchiostro-chiaro);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: var(--r4); padding: var(--s6);
  display: flex; flex-direction: column; justify-content: center;
  box-shadow: var(--ombra-notte), inset 0 1px rgba(255, 255, 255, 0.10);
}
.tessera-quadro {
  border-radius: var(--r4); padding: var(--s6) var(--s5);
  display: flex; flex-direction: column;
}
.etichetta-margine {
  color: var(--menta); font-size: var(--t-micro); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.14em;
}
.cifra-margine {
  font-family: var(--numeri); font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  font-size: clamp(40px, 7vw, var(--t-display));
  font-weight: 700; letter-spacing: -1.6px;
  line-height: 1.02; margin: var(--s3) 0 var(--s2);
}
.cifra-margine .unita { color: var(--inchiostro-chiaro-2); }
.cifra-margine.muta { color: var(--inchiostro-chiaro-2); letter-spacing: 0; }
.percentuale-margine {
  display: block; margin-bottom: var(--s4);
  font-family: var(--numeri); font-variant-numeric: tabular-nums;
  font-size: var(--t-medio); font-weight: 600; color: var(--inchiostro-chiaro);
  letter-spacing: -0.2px;
}
.percentuale-di {
  font-family: var(--testo); font-size: var(--t-denso); font-weight: 400;
  color: var(--inchiostro-chiaro-2); letter-spacing: 0; margin-left: var(--s1);
}
.margine-spiega {
  margin: 0 0 var(--s4); max-width: 46ch;
  color: var(--inchiostro-chiaro-2); font-size: var(--t-denso); line-height: 1.6;
}
.tessera-margine .distintivo { align-self: flex-start; }
.tessera-margine .distintivo.positivo {
  color: #cdf0dd; background: rgba(63, 189, 124, 0.14); border-color: rgba(63, 189, 124, 0.32);
}
.tessera-margine .distintivo.attenzione {
  color: #ffdfa8; background: rgba(255, 176, 46, 0.14); border-color: rgba(255, 176, 46, 0.34);
}
.tessera-margine .distintivo.neutro,
.tessera-margine .distintivo.critico {
  color: var(--inchiostro-chiaro); background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.18);
}

/* Il quadro: due righe di totali, poi la composizione del costo. */
.conto-etichetta {
  color: var(--verde-scuro); font-size: var(--t-micro); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.14em; margin-bottom: var(--s2);
}
.conto-riga {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: var(--s4); padding: 10px 0;
  border-bottom: 1px solid var(--bordo-tenue);
}
.conto-voce { color: var(--inchiostro-2); font-size: var(--t-denso); font-weight: 500; }
.conto-importo {
  font-family: var(--numeri); font-variant-numeric: tabular-nums;
  color: var(--inchiostro); font-size: var(--t-medio); font-weight: 600;
  letter-spacing: -0.2px;
}
.conto-avviso { border-bottom: none; padding-top: 0; }
.conto-avviso .conto-voce { color: var(--ambra-testo); font-weight: 600; }
.conto-nota {
  margin: auto 0 0; padding-top: var(--s3);
  color: var(--inchiostro-3); font-size: var(--t-meta); line-height: 1.5;
}

/* Composizione del costo: una barra sola, parti di uno stesso totale.
   Nessun numero nuovo — gli importi sono quelli della legenda, il
   disegno mostra solo quanto pesa ciascuna voce. */
.composizione { margin-top: var(--s4); }
/* I 2px di stacco fanno da confine fra i segmenti: la separazione non
   dipende dal contrasto fra due verdi vicini. */
.barra-composizione {
  display: flex; gap: 2px; height: 12px; margin-bottom: var(--s3);
  border-radius: 999px; overflow: hidden; background: var(--neutro-fondo);
}
.barra-composizione > span { display: block; height: 100%; }
.seg-1 { background: var(--tono-1); }
.seg-2 { background: var(--tono-2); }
.seg-3 { background: var(--tono-3); }
.seg-4 { background: var(--tono-4); }
.legenda { list-style: none; margin: 0; padding: 0; }
.legenda li {
  display: flex; align-items: center; gap: var(--s2);
  padding: 5px 0; font-size: var(--t-denso); color: var(--inchiostro-2);
}
.pallino { flex: 0 0 10px; width: 10px; height: 10px; border-radius: 999px; }
.legenda-importo {
  margin-left: auto; font-family: var(--numeri); font-variant-numeric: tabular-nums;
  font-weight: 600; color: var(--inchiostro);
}
.conteggio-titolo { vertical-align: 3px; margin-left: var(--s1); }
.meta-sezione { margin: 0; color: var(--inchiostro-3); font-size: var(--t-denso); }

@media (max-width: 1024px) {
  .bento-testata { grid-template-columns: 1fr; }
  .tessera-margine { padding: var(--s5); }
}

/* "Da sistemare": ogni anomalia è un'azione, non una notifica. */
.griglia-anomalie {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4);
}
.blocco-anomalia {
  border: 1px solid var(--bordo-tenue); border-left: 3px solid var(--bordo-forte);
  border-radius: var(--r1) var(--r2) var(--r2) var(--r1);
  padding: var(--s4); background: var(--carta-riga);
}
/* Il timbro sul dorso: la gravità si legge anche a colpo d'occhio,
   ma il colore non è mai da solo (il distintivo porta segno e numero). */
.blocco-anomalia.attenzione { border-left-color: var(--ambra-bordo); }
.blocco-anomalia.critico { border-left-color: var(--minio-bordo); }
.anomalia-meta { margin: var(--s2) 0 0; color: var(--inchiostro-3); font-size: var(--t-meta); }
/* Va DOPO la definizione base: un override in un blocco media che
   precede la base perde a parità di specificità (bug trovato al 768). */
@media (max-width: 1024px) {
  .griglia-anomalie { grid-template-columns: 1fr; }
}
.titolo-anomalia {
  margin: 0 0 var(--s2); font-size: var(--t-corpo); font-weight: 600;
  display: flex; align-items: center; gap: var(--s2);
}
.azioni-anomalia { list-style: none; margin: 0; padding: 0; }
.azioni-anomalia li {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: var(--s3); padding: 6px 0; font-size: var(--t-denso);
  border-bottom: 1px solid var(--bordo-tenue);
}
.azioni-anomalia li:last-child { border-bottom: none; }
.azioni-anomalia .cella-nota { white-space: nowrap; }

.kpi-riassunto { text-align: right; }
.scheda-dati { margin: 0; display: flex; flex-direction: column; gap: var(--s2); }
.scheda-dati > div {
  display: grid; grid-template-columns: 140px 1fr; gap: var(--s3);
  padding-bottom: var(--s2); border-bottom: 1px solid var(--bordo-tenue);
}
.scheda-dati > div:last-child { border-bottom: none; padding-bottom: 0; }
.scheda-dati dt { color: var(--inchiostro-3); font-size: var(--t-meta); font-weight: 600; }
.scheda-dati dd { margin: 0; }
.titolo-righe {
  margin: var(--s5) 0 var(--s2); font-size: var(--t-corpo); font-weight: 600;
  color: var(--inchiostro-2);
}
.riga-dinamica { margin-bottom: var(--s2); }
.riga-dinamica .campo-numero { max-width: 110px; }
.azioni-correzione { margin-top: var(--s5); }

/* ── Webapp operatore (M2.5 Tempo 2) ───────────────────────────────────
   SOLO AGGIUNTE, tutte scoped sotto .op: il foglio sopra è certificato
   con l'interfaccia titolare (M2.4b) e non si tocca. Stessi token, stessa
   direzione. Mobile-first: una colonna, tocchi grandi, niente gerarchie
   da scrivania. */
.op {
  max-width: 480px;
  margin: 0 auto;
  padding: var(--s3) var(--s4) var(--s7);
  min-height: 100vh;
}
/* Gli schermi si mostrano e nascondono con l'attributo hidden: nessuna
   regola di display deve poterlo vincere. */
.op [hidden] { display: none !important; }

.op-testata {
  display: flex; justify-content: space-between; align-items: center;
  gap: var(--s3); padding: var(--s2) 0 var(--s3);
  border-bottom: 1px solid var(--bordo-tenue); margin-bottom: var(--s4);
}
.op-marchio {
  display: flex; align-items: center; gap: var(--s2);
  font-weight: 600; font-size: var(--t-corpo);
}
.op-marchio-icona { color: var(--verde); font-size: 11px; }
.op-identita { display: flex; align-items: center; gap: var(--s3); }
.op-identita-testo {
  display: flex; flex-direction: column; align-items: flex-end; line-height: 1.3;
}
.op-identita-nome { font-weight: 600; font-size: 13px; }
.op-identita-azienda { color: var(--inchiostro-3); font-size: var(--t-micro); }
.op-esci {
  min-height: 36px; padding: 0 var(--s3);
  background: var(--carta); border: 1px solid var(--bordo);
  border-radius: var(--r1); cursor: pointer;
  font-family: var(--testo); font-size: 13px; font-weight: 600;
  color: var(--inchiostro-2);
}
.op-esci:hover { background: var(--neutro-fondo); }

/* Barra coda: due conteggi separati, mai un numero solo che li mescoli. */
.op-barra-coda {
  display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap;
  width: 100%; min-height: 48px; padding: var(--s2) var(--s3);
  margin-bottom: var(--s4); text-align: left;
  background: var(--carta); border: 1px solid var(--bordo);
  border-radius: var(--r2); cursor: pointer;
  font-family: var(--testo);
}
.op-barra-coda:disabled { cursor: default; background: var(--carta); color: var(--inchiostro); }
.op-conteggio {
  display: inline-block; padding: 3px var(--s2); border-radius: var(--r1);
  font-size: 13px; font-weight: 600; border: 1px solid transparent;
}
.op-conteggio-attesa {
  color: var(--ambra-testo); background: var(--ambra-fondo); border-color: var(--ambra-bordo);
}
.op-conteggio-respinti {
  color: var(--minio-testo); background: var(--minio-fondo); border-color: var(--minio-bordo);
}
.op-barra-coda-vai {
  margin-left: auto; color: var(--verde-scuro); font-weight: 600; font-size: 13px;
}

.op-passo {
  margin: 0 0 var(--s1); color: var(--inchiostro-3);
  font-size: var(--t-micro); font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.8px;
}
.op-titolo { font-size: var(--t-grande); letter-spacing: -0.3px; margin: 0 0 var(--s2); }
.op-guida { margin: 0 0 var(--s4); color: var(--inchiostro-3); }
.op-etichetta {
  display: block; margin: var(--s4) 0 var(--s1);
  color: var(--inchiostro-3); font-size: var(--t-meta); font-weight: 600;
}

/* Campi: 16px minimo, sotto iOS ingrandisce la pagina da solo. */
.op .op-campo {
  width: 100%; min-height: 48px; padding: var(--s3);
  font-size: 16px; background: var(--carta);
  border: 1px solid var(--bordo); border-radius: var(--r1);
}
.op .op-campo:focus-visible {
  outline: 2px solid var(--verde); outline-offset: 1px; border-color: var(--verde);
}
.op-campo-codice {
  font-family: var(--numeri); font-size: var(--t-grande);
  text-align: center; letter-spacing: 6px;
}
.op-note { resize: vertical; }

.op-bottone {
  display: flex; align-items: center; justify-content: center;
  width: 100%; min-height: 52px; padding: var(--s2) var(--s4);
  border: 1px solid transparent; border-radius: var(--r1);
  font-family: var(--testo); font-size: 16px; font-weight: 600;
  cursor: pointer;
  transition: background-color var(--transizione), border-color var(--transizione);
}
.op-bottone:disabled { cursor: not-allowed; }
.op-bottone:focus-visible { outline: 2px solid var(--verde-scuro); outline-offset: 2px; }
.op-primario { background: var(--verde); color: #fff; }
.op-primario:hover { background: var(--verde-scuro); }
.op-primario:disabled { background: var(--neutro-fondo); color: var(--inchiostro-4); }
.op-secondario { background: var(--carta); color: var(--inchiostro); border-color: var(--bordo); }
.op-secondario:hover { background: var(--neutro-fondo); border-color: var(--bordo-forte); }
.op-pericolo { background: var(--carta); color: var(--minio-testo); border-color: var(--minio-bordo); }
.op-pericolo:hover { background: var(--minio-fondo); }
.op-compatto { width: auto; min-height: 40px; font-size: 14px; padding: 0 var(--s3); }
.op-invia { letter-spacing: 1px; }

/* Scelte a bottoni grandi: il selezionato vince per bordo, fondo E segno. */
.op-lista-scelte { display: flex; flex-direction: column; gap: var(--s2); margin: 0 0 var(--s4); }
.op-scelta {
  justify-content: flex-start; text-align: left;
  background: var(--carta); color: var(--inchiostro); border-color: var(--bordo);
}
.op-scelta:hover { border-color: var(--bordo-forte); }
.op-scelta-attiva {
  background: var(--ok-fondo); border-color: var(--verde); color: var(--ok-testo);
}
.op-scelta-attiva::after { content: "✓"; margin-left: auto; font-weight: 700; }
.op-doppio { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2); }

.op-piede { display: flex; gap: var(--s2); margin-top: var(--s5); }
.op-piede .op-secondario { width: auto; flex: 0 0 auto; min-width: 112px; }
.op-piede .op-primario { flex: 1; }
.op-piede-colonna { flex-direction: column; }
.op-piede-colonna .op-secondario { width: 100%; }

.op-righe { display: flex; flex-direction: column; gap: var(--s2); margin: 0 0 var(--s3); }
.op-riga {
  display: flex; align-items: center; gap: var(--s2);
  background: var(--carta); border: 1px solid var(--bordo-tenue);
  border-radius: var(--r1); padding: var(--s2);
}
.op-riga .op-campo { border-color: transparent; background: var(--carta-riga); }
.op-campo-nome { flex: 1 1 auto; min-width: 0; }
.op .op-campo-ore { flex: 0 0 92px; width: 92px; }
.op-riga-testo { flex: 1; padding: 0 var(--s2); }
.op-togli {
  flex: 0 0 44px; width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  background: var(--carta); border: 1px solid var(--bordo);
  border-radius: var(--r1); cursor: pointer;
  font-size: var(--t-medio); color: var(--inchiostro-3);
}
.op-togli:hover { color: var(--minio-testo); border-color: var(--minio-bordo); }

.op-errore {
  margin: var(--s3) 0 0; padding: var(--s2) var(--s3);
  color: var(--minio-testo); background: var(--minio-fondo);
  border: 1px solid var(--minio-bordo); border-radius: var(--r1);
  font-size: 14px;
}
.op-vuoto {
  margin: 0 0 var(--s4); padding: var(--s5);
  border: 1px dashed var(--bordo-forte); border-radius: var(--r2);
  background: var(--carta); color: var(--inchiostro-3); text-align: center;
}

.op-blocco-riepilogo {
  background: var(--carta); border: 1px solid var(--bordo);
  border-radius: var(--r2); padding: var(--s3); margin-bottom: var(--s2);
}
.op-blocco-testata {
  display: flex; justify-content: space-between; align-items: center; gap: var(--s2);
}
.op-blocco-titolo {
  color: var(--inchiostro-3); font-size: var(--t-micro); font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.8px;
}
.op-modifica {
  background: none; border: none; padding: var(--s1) 0; cursor: pointer;
  font-family: var(--testo); font-size: 13px; font-weight: 600;
  color: var(--verde-scuro);
}
.op-modifica:hover { text-decoration: underline; }
.op-blocco-riga { margin: var(--s1) 0 0; }

.op-esito {
  background: var(--carta); border: 1px solid var(--bordo);
  border-radius: var(--r2); padding: var(--s6) var(--s4);
  text-align: center; margin-top: var(--s4);
}
.op-esito .op-titolo { margin-top: var(--s3); }
.op-esito .op-guida { margin-bottom: 0; }
.op-esito-segno {
  display: inline-block; margin: 0; padding: var(--s1) var(--s3);
  border-radius: var(--r1); border: 1px solid transparent;
  font-size: var(--t-corpo); font-weight: 700;
}
.op-esito-ok { color: var(--ok-testo); background: var(--ok-fondo); border-color: var(--ok-bordo); }
.op-esito-attesa { color: var(--ambra-testo); background: var(--ambra-fondo); border-color: var(--ambra-bordo); }
.op-esito-respinto { color: var(--minio-testo); background: var(--minio-fondo); border-color: var(--minio-bordo); }

.op-scheda-coda {
  background: var(--carta); border: 1px solid var(--bordo);
  border-radius: var(--r2); padding: var(--s3);
}
.op-scheda-titolo { margin: 0; font-weight: 600; }
.op-scheda-meta { margin: 2px 0 var(--s2); color: var(--inchiostro-3); font-size: var(--t-meta); }
.op-scheda-stati { display: flex; flex-wrap: wrap; gap: var(--s1); }
.op-distintivo {
  display: inline-block; padding: 2px var(--s2); border-radius: var(--r1);
  font-size: var(--t-meta); font-weight: 600; border: 1px solid transparent;
}
.op-distintivo-attesa { color: var(--ambra-testo); background: var(--ambra-fondo); border-color: var(--ambra-bordo); }
.op-distintivo-respinto { color: var(--minio-testo); background: var(--minio-fondo); border-color: var(--minio-bordo); }
.op-distintivo-altrui { color: var(--inchiostro-3); background: var(--neutro-fondo); border-color: var(--bordo); }
.op-scheda-motivo { margin: var(--s2) 0 0; color: var(--minio-testo); font-size: 14px; }
.op-scheda-azioni { display: flex; gap: var(--s2); margin-top: var(--s3); }


/* ── Feedback 21/08/2026 ───────────────────────────────────────────────
   Elenchi che si cercano, azioni che si cliccano per intero, filtri con
   etichette vere. Stessa lingua del resto: nessun componente nuovo che
   sembri appiccicato. */

/* Solo per i lettori di schermo: intestazioni di colonne decorative. */
.solo-lettori {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

.strumenti-elenco {
  display: flex; align-items: center; gap: var(--s4); flex-wrap: wrap;
}
.ricerca { display: flex; align-items: center; gap: var(--s2); }
.ricerca-etichetta {
  color: var(--inchiostro-3); font-size: var(--t-denso); font-weight: 600;
  white-space: nowrap;
}
.campo-ricerca {
  min-width: 240px; min-height: 40px; padding: var(--s2) var(--s3);
  background: var(--carta-riga); border: 1px solid var(--bordo);
  border-radius: var(--r1); font-size: var(--t-corpo);
}
.campo-ricerca::placeholder { color: var(--inchiostro-4); }
.campo-ricerca:hover { border-color: var(--bordo-forte); }
.campo-ricerca:focus-visible {
  outline: 2px solid var(--verde); outline-offset: 1px;
  border-color: var(--verde); background: var(--carta);
}
.vuoto-ricerca { padding: var(--s5) 0 var(--s2); }

/* La quota sotto il margine: la percentuale è un dettaglio del numero. */
.misura-quota { color: var(--inchiostro-3); font-size: var(--t-meta); font-weight: 500; }

/* "Da sistemare": la riga INTERA è il collegamento, freccia compresa. */
.azioni-anomalia li { padding: 0; }
.azione {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: var(--s3); padding: 9px var(--s2);
  border-radius: var(--r1); color: var(--inchiostro);
  text-decoration: none; font-size: var(--t-denso);
  transition: background-color var(--transizione);
}
.azione:hover { background: var(--carta); }
.azione:focus-visible { outline: 2px solid var(--verde); outline-offset: -2px; }
.azione-testo { font-weight: 600; }
.azione-vai { color: var(--verde-scuro); font-weight: 600; white-space: nowrap; }
.azione:hover .azione-vai { text-decoration: underline; }

/* Filtri: ogni campo ha la sua etichetta sopra, leggibile davvero. */
.filtri-grandi { align-items: flex-end; gap: var(--s4); }
.campo-filtro { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.campo-filtro label {
  color: var(--inchiostro-2); font-size: var(--t-corpo); font-weight: 600;
  letter-spacing: 0; white-space: nowrap;
}
.filtri .campo-filtro input,
.filtri .campo-filtro select {
  min-height: 42px; padding: var(--s2) var(--s3);
  font-size: var(--t-corpo);
  background: var(--carta-riga); border: 1px solid var(--bordo);
  border-radius: var(--r1);
}
.filtri-grandi .campo-filtro select { min-width: 190px; max-width: none; }
.filtri-grandi .campo-filtro input[type="date"] { min-width: 160px; max-width: none; }
.azioni-filtro { flex-direction: row; align-items: center; gap: var(--s3); }

/* La sezione aperta nel dettaglio cantiere resta evidente. */
tbody tr.riga-scelta { background: var(--ok-fondo); }
tbody tr.riga-scelta:hover { background: var(--ok-fondo); }

/* La scelta che il prodotto fa fare quando si cambia un prezzo. */
.scelta-applica {
  flex: 1 1 100%; margin: var(--s2) 0 0; padding: var(--s4);
  border: 1px solid var(--bordo); border-radius: var(--r2);
  background: var(--carta-riga);
}
.scelta-applica legend {
  padding: 0 var(--s2); color: var(--inchiostro-2);
  font-size: var(--t-denso); font-weight: 700;
}
.scelta-riga {
  display: flex; gap: var(--s3); align-items: flex-start;
  padding: var(--s2) 0; font-size: var(--t-denso); cursor: pointer;
}
.scelta-riga input { margin-top: 3px; accent-color: var(--verde); }
.scelta-riga strong { font-weight: 700; }

/* Le etichette dei moduli: leggibili anche a chi ci vede poco. */
.campo label, .modulo label {
  color: var(--inchiostro-2); font-size: var(--t-corpo); font-weight: 600;
}
.op-tipo-detto { color: var(--inchiostro-3); font-size: var(--t-denso); margin-top: calc(var(--s2) * -1); }

.meta-testata {
  margin: 0; align-self: flex-end;
  color: var(--inchiostro-3); font-size: var(--t-denso); font-weight: 600;
}
.vuoto .bottone.primario { margin-top: var(--s3); }


/* ── Dashboard di sintesi (22/08/2026) ─────────────────────────────────
   La pagina non elenca più i cantieri: mostra numeri d'insieme e
   andamento. Tre componenti nuovi, tutti disegnati con quello che c'è
   già (nessuna libreria, nessun grafico caricato da fuori). */

/* Il richiamo alle cose da sistemare: sta nella testata, non ruba la
   scena al margine, ma porta dove si agisce. */
.richiamo {
  display: inline-flex; align-items: center; gap: var(--s2);
  align-self: flex-end; padding: var(--s2) var(--s3);
  border: 1px solid var(--ambra-bordo); border-radius: 999px;
  background: var(--ambra-fondo); color: var(--ambra-testo);
  font-size: var(--t-denso); font-weight: 600; text-decoration: none;
  transition: border-color var(--transizione);
}
.richiamo:hover { border-color: var(--ambra-testo); }
.richiamo:focus-visible { outline: 2px solid var(--verde); outline-offset: 2px; }
.richiamo-vai { color: var(--verde-scuro); }
.avviso-scorciatoia {
  align-self: flex-end; color: var(--ambra-testo);
  font-size: var(--t-denso); font-weight: 600; text-decoration: none;
}
.avviso-scorciatoia:hover { text-decoration: underline; }

/* Il grafico: una LINEA su un asse vero. Un istogramma racconta dodici
   fatti separati; la domanda però è «sto lavorando più o meno di prima?»,
   e a quella risponde un andamento. La curva è monotona (calcolata in
   pagine._pendenze_monotone): fra due mesi non esce mai dall'intervallo
   dei due valori, quindi il disegno non può inventare costi.

   Tre strati sovrapposti, tutti alti --alto-grafico e ancorati in alto:
   la griglia (linee), il disegno (SVG stirato), le zone di passaggio
   (HTML, che non si deforma). L'asse è la scala tonda di _scala_asse:
   linee e cifre nascono dallo stesso numero e non possono scollarsi. */
.grafico { --alto-grafico: 220px; margin-top: var(--s2); }
.grafico-telaio { display: grid; grid-template-columns: auto 1fr; gap: var(--s3); }
/* Le cifre dell'asse stanno nel FLUSSO: cosi' la colonna "auto" della
   griglia prende la larghezza della cifra piu' lunga invece di collassare
   a zero. I valori sono equidistanti per costruzione (_scala_asse
   restituisce passo * i), quindi space-between li fa cadere esattamente
   sulle linee; il mezzo rigo in piu' porta il CENTRO della cifra sulla
   linea, non il bordo. */
.grafico-asse {
  align-self: start;
  height: calc(var(--alto-grafico) + 1em);
  margin: -0.5em 0 0; padding: 0; list-style: none;
  display: flex; flex-direction: column; justify-content: space-between;
  align-items: flex-end;
  font-family: var(--numeri); font-variant-numeric: tabular-nums;
  font-size: var(--t-micro); color: var(--inchiostro-chiaro-2);
}
.grafico-asse li { line-height: 1em; white-space: nowrap; }
/* overflow-x: clip (non hidden) taglia solo in orizzontale e lascia
   passare i fumetti in verticale: su schermo stretto un fumetto largo
   sporgeva oltre la pagina e faceva comparire la barra di scorrimento. */
.grafico-corpo { position: relative; min-width: 0; overflow-x: clip; }

/* La griglia è quasi invisibile: serve a misurare, non a decorare. */
.grafico-griglia { position: absolute; inset: 0 0 auto; height: var(--alto-grafico); }
.grafico-griglia span {
  position: absolute; left: 0; right: 0; height: 1px;
  background: rgba(255, 255, 255, 0.06);
}
.grafico-griglia span:last-child { background: rgba(255, 255, 255, 0.16); }

/* Il disegno. preserveAspectRatio="none": la larghezza si stira col
   pannello, l'altezza la fissa il CSS. Lo spessore della linea NON si
   stira (vector-effect sul path), quindi resta uguale a ogni misura. */
.grafico-tela {
  display: block; width: 100%; height: var(--alto-grafico); overflow: visible;
}
.velo-cima { stop-color: var(--verde-vivo); stop-opacity: 0.26; }
.velo-fondo { stop-color: var(--verde-vivo); stop-opacity: 0; }
.area-andamento { fill: url(#velo-andamento); }
.linea-andamento {
  fill: none; stroke: var(--verde-vivo); stroke-width: 2.5;
  stroke-linecap: round; stroke-linejoin: round;
}
/* Il mese in corso: il tratto resta APERTO perché il lavoro non è finito.
   Non è solo colore — è la forma della linea, e sotto c'è la parola. */
.linea-aperta { stroke-dasharray: 6 6; opacity: 0.9; }

/* Le zone di passaggio: una per mese, tutta l'altezza del riquadro, così
   il fumetto esce anche puntando lontano dal pallino. */
.grafico-zone { position: absolute; inset: 0 0 auto; height: var(--alto-grafico); }
.zona { position: absolute; top: 0; bottom: 0; }
.zona-guida {
  position: absolute; top: 0; bottom: 0; width: 1px;
  background: rgba(255, 255, 255, 0.22);
  opacity: 0; transition: opacity 140ms cubic-bezier(0.23, 1, 0.32, 1);
}
.punto {
  position: absolute; width: 9px; height: 9px; margin: 0 0 -4.5px -4.5px;
  border-radius: 999px; background: var(--verde-vivo);
  box-shadow: 0 0 0 3px var(--bosco);
  transition: transform 140ms cubic-bezier(0.23, 1, 0.32, 1);
}
/* Pallino vuoto = mese non ancora chiuso. */
.punto-aperto { background: var(--bosco); box-shadow: 0 0 0 2px var(--verde-vivo); }
.zona:hover .punto { transform: scale(1.4); }
.zona:hover .zona-guida { opacity: 1; }

.fumetto {
  position: absolute; z-index: 3; min-width: 132px;
  padding: var(--s2) var(--s3);
  border: 1px solid var(--bosco-linea-forte); border-radius: var(--r1);
  background: rgba(4, 14, 9, 0.97);
  color: var(--inchiostro-chiaro); font-size: var(--t-meta); line-height: 1.4;
  white-space: nowrap; pointer-events: none;
  display: flex; flex-direction: column; gap: 1px;
  opacity: 0; transform: translate(-50%, -6px) scale(0.97);
  transform-origin: bottom center;
  transition: opacity 140ms cubic-bezier(0.23, 1, 0.32, 1),
              transform 140ms cubic-bezier(0.23, 1, 0.32, 1);
}
.zona:hover .fumetto { opacity: 1; transform: translate(-50%, -16px) scale(1); }
/* Punto alto: il fumetto scende sotto, invece di uscire dal riquadro. */
.fumetto-sotto { transform-origin: top center; transform: translate(-50%, calc(100% + 6px)) scale(0.97); }
.zona:hover .fumetto-sotto { transform: translate(-50%, calc(100% + 16px)) scale(1); }
/* I fumetti dei punti di bordo si appoggiano al lato invece di centrarsi:
   il verso lo decide la x del punto (pagine._curva_andamento), non la
   posizione nel DOM, cosi' vale anche per il penultimo punto quando lo
   schermo e' stretto. */
.fumetto-inizio { transform: translate(-4px, -6px) scale(0.97); }
.zona:hover .fumetto-inizio { transform: translate(-4px, -16px) scale(1); }
.fumetto-inizio.fumetto-sotto { transform: translate(-4px, calc(100% + 6px)) scale(0.97); }
.zona:hover .fumetto-inizio.fumetto-sotto { transform: translate(-4px, calc(100% + 16px)) scale(1); }
.fumetto-fine { transform: translate(calc(-100% + 4px), -6px) scale(0.97); }
.zona:hover .fumetto-fine { transform: translate(calc(-100% + 4px), -16px) scale(1); }
.fumetto-fine.fumetto-sotto { transform: translate(calc(-100% + 4px), calc(100% + 6px)) scale(0.97); }
.zona:hover .fumetto-fine.fumetto-sotto { transform: translate(calc(-100% + 4px), calc(100% + 16px)) scale(1); }
.fumetto-mese {
  color: var(--inchiostro-chiaro-2); font-size: var(--t-micro);
  font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em;
}
.fumetto-corso { color: var(--menta); text-transform: none; letter-spacing: 0; }
.fumetto-valore {
  font-family: var(--numeri); font-variant-numeric: tabular-nums;
  font-size: var(--t-medio); font-weight: 700; color: #fff; letter-spacing: -0.4px;
}
.fumetto-meta { color: var(--inchiostro-chiaro-2); font-size: var(--t-micro); }

/* Le etichette dei mesi: ancorate alla stessa x dei punti. La prima e
   l'ultima non escono dal riquadro (allineate al bordo, non centrate). */
.grafico-mesi { position: relative; height: 32px; margin-top: var(--s2); }
.grafico-mesi span {
  position: absolute; top: 0; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; line-height: 1.25;
  color: var(--inchiostro-chiaro-2); font-size: var(--t-meta); font-weight: 600;
  white-space: nowrap;
}
.grafico-mesi span:first-child { transform: none; align-items: flex-start; }
.grafico-mesi span:last-child { transform: translateX(-100%); align-items: flex-end; }
.grafico-mesi small { font-size: var(--t-micro); font-weight: 500; opacity: 0.75; }
.grafico-mesi .mese-corso { color: var(--menta); }

.grafico-piede {
  margin: var(--s3) 0 0; color: var(--inchiostro-chiaro-2); font-size: var(--t-meta);
}
.numeri-grafico { margin-top: var(--s3); }
.numeri-grafico summary {
  cursor: pointer; color: var(--verde-vivo);
  font-size: var(--t-denso); font-weight: 600; padding: var(--s2) 0;
}
.numeri-grafico summary:focus-visible { outline: 2px solid var(--verde-vivo); outline-offset: 2px; }

/* Dove va il costo: barre orizzontali, la più alta fa da metro. */
.elenco-sezioni { list-style: none; margin: 0; padding: 0; }
.elenco-sezioni li { padding: var(--s2) 0; border-bottom: 1px solid var(--bordo-tenue); }
.elenco-sezioni li:last-child { border-bottom: none; }
.sezione-voce {
  display: flex; align-items: baseline; gap: var(--s2) var(--s3);
  flex-wrap: wrap; min-width: 0;
  padding: var(--s1) var(--s2);
  border-radius: var(--r1); text-decoration: none; color: var(--inchiostro);
  transition: background-color var(--transizione);
}
.sezione-voce:hover { background: var(--carta-riga); }
.sezione-voce:focus-visible { outline: 2px solid var(--verde); outline-offset: -2px; }
.sezione-nome { font-weight: 700; }
.sezione-meta { color: var(--inchiostro-3); font-size: var(--t-meta); min-width: 0; }
.sezione-importo {
  margin-left: auto; flex: 0 0 auto; font-family: var(--numeri);
  font-variant-numeric: tabular-nums; font-weight: 700;
}
.sezione-pista {
  display: block; height: 8px; margin-top: 5px;
  border-radius: 999px; background: var(--neutro-fondo); overflow: hidden;
}
.sezione-barra {
  display: block; height: 100%; border-radius: inherit;
  background: linear-gradient(90deg, var(--verde-scuro), var(--verde));
}

@media (max-width: 1024px) {
  .grafico { --alto-grafico: 140px; }
}

.grafico-sintesi {
  margin: 0 0 var(--s4); max-width: 70ch;
  color: var(--inchiostro-2); font-size: var(--t-corpo); line-height: 1.6;
}
.grafico-sintesi strong { font-weight: 700; color: var(--inchiostro); }
.grafico-cautela, .sezione-cautela { color: var(--ambra-testo); font-weight: 600; }

/* La quota di valore gia' consumata dai costi: la sottrazione del
   margine, vista come proporzione. Stessa tinta delle altre piste. */
.consumo { margin: var(--s3) 0 var(--s2); }
.consumo-pista {
  display: block; height: 10px; border-radius: 999px;
  background: var(--neutro-fondo); overflow: hidden;
}
.consumo-barra {
  display: block; height: 100%; border-radius: inherit;
  background: linear-gradient(90deg, var(--verde-scuro), var(--verde));
}
.consumo-nota {
  display: block; margin-top: 6px;
  color: var(--inchiostro-3); font-size: var(--t-meta);
}
.conto-extra .conto-voce { color: var(--inchiostro-3); }
.conto-extra .conto-importo { font-size: var(--t-corpo); color: var(--inchiostro-2); }
.composizione .conto-etichetta { margin-top: var(--s3); }

/* Il distintivo dentro il richiamo aveva lo stesso fondo del richiamo:
   spariva come forma. Superficie propria, cosi' il numero si stacca. */
.richiamo .distintivo.attenzione {
  background: var(--carta); border-color: var(--ambra-testo);
}
/* Il mese in corso lo dice anche a parole, non solo col tratteggio. */
.colonna-corso {
  display: block; color: var(--verde-scuro);
  font-size: var(--t-micro); font-weight: 600;
}
/* Costi oltre il valore del contratto: la barra si ferma al 100% e la
   pista cambia stato, il numero vero resta scritto accanto. */
.consumo-sforato { background: var(--minio-fondo); box-shadow: inset 0 0 0 1px var(--minio-bordo); }
.consumo-sforato .consumo-barra { background: linear-gradient(90deg, var(--minio-testo), #c0574f); }
/* La voce di sintesi senza sezione non e' un filtro: non fa finta di esserlo. */
.sezione-ferma { cursor: default; }
.sezione-ferma:hover { background: transparent; }


/* ── Dashboard: la plancia (restyle 22/08/2026, seconda passata) ───────
   La dashboard non è più una pila di fogli bianchi: è una plancia di
   pannelli scuri su un piano chiaro. È il bosco all'ombra — la tinta più
   scura che esiste nel mestiere di chi taglia il verde — e su quel fondo
   i numeri sono l'unica cosa luminosa. Il resto dell'applicazione resta
   chiaro: qui si LEGGE un quadro d'insieme, là si lavora su elenchi.

   Profondità: SOLO superfici e linee. Niente ombre (sul scuro non si
   leggono) e niente effetti: due gradini di luminosità sullo stesso
   verde, un bordo di menta all'1-3% e un filo di luce in cima. Un solo
   accento — il verde vivo — speso dove significa qualcosa: la linea del
   grafico, il periodo scelto, il risultato del conto, il bordo del
   numero che conta. L'ambra vive solo negli avvisi.

   Gerarchia: in ogni riquadro il numero è l'unica cosa grande e bianca,
   l'etichetta è una micro-maiuscoletta muta. Si legge il numero da tre
   metri e l'etichetta da uno. */
.griglia-dashboard {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--s5);
}
.col-3 { grid-column: span 3; }
.col-4 { grid-column: span 4; }
.col-8 { grid-column: span 8; }
.pila-pannelli { display: flex; flex-direction: column; gap: var(--s5); }

.pannello {
  display: flex; flex-direction: column; min-width: 0;
  color: var(--inchiostro-chiaro);
  background: linear-gradient(163deg, var(--bosco-alto) 0%, var(--bosco) 52%, var(--bosco-fondo) 100%);
  border: 1px solid var(--bosco-linea);
  border-radius: var(--r3);
  box-shadow: inset 0 1px 0 var(--bosco-velo);
}
/* Il gradino più chiaro: i pannelli di dettaglio, che stanno un passo
   indietro rispetto ai numeri e al grafico. */
.pannello-quieto { background: var(--bosco-alto); }

.pannello-testa {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--s3); flex-wrap: wrap;
  padding: var(--s4) var(--s5);
  border-bottom: 1px solid var(--bosco-linea);
}
.pannello-titolo {
  margin: 0; color: #fff;
  font-size: var(--t-corpo); font-weight: 700; letter-spacing: -0.2px;
}
.pannello-descrizione {
  margin: 3px 0 0; color: var(--inchiostro-chiaro-2); font-size: var(--t-meta);
}
.titolo-con-timbro { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }
/* Il corpo assorbe l'altezza in più: in una riga di pannelli affiancati
   i piedi restano allineati in basso invece di galleggiare a metà. */
.pannello-corpo { flex: 1 1 auto; padding: var(--s5); min-width: 0; }
.pannello-piede {
  padding: var(--s3) var(--s5);
  border-top: 1px solid var(--bosco-linea);
  background: rgba(0, 0, 0, 0.22);
  border-radius: 0 0 var(--r3) var(--r3);
  color: var(--inchiostro-chiaro-2); font-size: var(--t-meta);
}
.pannello-piede strong { color: var(--inchiostro-chiaro); font-weight: 700; }

/* ── Il riquadro di un numero ──────────────────────────────────────────
   Tre leve insieme, non solo la dimensione: 32px bianco tabellare contro
   11px maiuscoletto muto. L'etichetta ha un'altezza minima perché le
   quattro cifre restino sulla stessa linea anche quando una didascalia
   va a capo tre volte. */
.riquadro { padding: var(--s5) var(--s4) var(--s4); }
.riquadro-testa {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--s2);
}
.dato-etichetta {
  min-width: 0; min-height: 3.1em;
  color: var(--inchiostro-chiaro-2); font-size: var(--t-micro); font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.085em; line-height: 1.55;
}
.dato-cifra {
  margin: var(--s1) 0 var(--s4);
  font-family: var(--numeri); font-variant-numeric: tabular-nums;
  font-size: clamp(23px, 2.1vw, 27px); font-weight: 700; letter-spacing: -0.9px;
  line-height: 1.05; color: #fff;
}
.dato-cifra.muta { color: var(--inchiostro-chiaro-2); letter-spacing: 0; }
.dato-piede {
  margin-top: auto; display: flex; flex-direction: column;
  align-items: flex-start; gap: var(--s2);
  padding-top: var(--s3); border-top: 1px solid var(--bosco-linea);
  font-size: var(--t-meta); color: var(--inchiostro-chiaro-2);
}
.dato-riga { color: var(--inchiostro-chiaro); font-weight: 600; }
.dato-nota { color: var(--inchiostro-chiaro-2); }
.dato-vai {
  display: inline-flex; align-items: center; gap: 5px;
  color: var(--verde-vivo); font-weight: 700; text-decoration: none;
}
.dato-vai:hover { text-decoration: underline; }
.dato-vai:focus-visible { outline: 2px solid var(--verde-vivo); outline-offset: 2px; border-radius: 3px; }

/* Il numero per cui si apre il software: stessa forma degli altri, ma un
   gradino più grande e un filo di menta sul bordo alto. Il fuoco della
   pagina si dichiara così, non colorando tutta la card. */
.riquadro-primo { position: relative; overflow: hidden; }
.riquadro-primo::after {
  content: ""; position: absolute; inset: 0 0 auto; height: 2px;
  background: linear-gradient(90deg, var(--verde-vivo), rgba(75, 211, 138, 0));
}
/* Il tetto della cifra e' MISURATO: a 1280 il riquadro lascia 198px e un
   importo da sette cifre (1.284.930,50 €) ne occupa 187 a 31px. Sopra
   quella soglia la cifra va a capo invece di uscire dal riquadro. */
.riquadro-primo .dato-cifra { font-size: clamp(26px, 2.5vw, 31px); }

/* La variazione fra due mesi chiusi. NON è colorata di verde o di rosso:
   più costo vuol dire più lavoro, non un voto — il colore darebbe un
   giudizio che il prodotto non ha titolo per dare. La direzione la porta
   la freccia, e accanto c'è la parola per chi legge con la voce. */
.variazione {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px var(--s2); border-radius: 999px;
  border: 1px solid var(--bosco-linea); background: rgba(255, 255, 255, 0.07);
  color: var(--inchiostro-chiaro); font-size: var(--t-micro); font-weight: 700;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.segno { width: 14px; height: 14px; flex: 0 0 auto; }

/* Il selettore della finestra: tre collegamenti veri, funziona senza JS.
   Lo scelto è pieno di menta con testo notte — il contrasto più alto
   della pagina, perché è l'unico comando del pannello. */
.gruppo-periodo {
  display: inline-flex; background: rgba(0, 0, 0, 0.28);
  border: 1px solid var(--bosco-linea); border-radius: var(--r1); overflow: hidden;
}
.gruppo-periodo a {
  padding: 6px var(--s3); border-left: 1px solid var(--bosco-linea);
  color: var(--inchiostro-chiaro-2); font-size: var(--t-meta); font-weight: 600;
  text-decoration: none; white-space: nowrap;
  transition: background-color var(--transizione), color var(--transizione);
}
.gruppo-periodo a:first-child { border-left: none; }
.gruppo-periodo a:hover { background: rgba(255, 255, 255, 0.07); color: #fff; }
.gruppo-periodo a[aria-current="true"] {
  background: var(--verde-vivo); color: var(--notte); font-weight: 700;
}
.gruppo-periodo a:focus-visible { outline: 2px solid var(--verde-vivo); outline-offset: -2px; }

/* Elenco a filo del pannello: righe divise da una linea, senza cornice
   dentro la cornice. */
.elenco-pannello { list-style: none; margin: 0; padding: 0; }
.elenco-pannello li + li { border-top: 1px solid var(--bosco-linea); }
.elenco-pannello a {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px var(--s3);
  padding: var(--s3) var(--s5); color: inherit; text-decoration: none;
  transition: background-color var(--transizione);
}
.elenco-pannello a:hover { background: rgba(255, 255, 255, 0.06); }
.elenco-pannello a:focus-visible { outline: 2px solid var(--verde-vivo); outline-offset: -2px; }
.voce-titolo { font-size: var(--t-denso); font-weight: 700; color: #fff; min-width: 0; }
.voce-meta { grid-column: 1; color: var(--inchiostro-chiaro-2); font-size: var(--t-meta); }
.voce-coda {
  grid-column: 2; grid-row: 1 / span 2; align-self: center;
  font-variant-numeric: tabular-nums; font-size: var(--t-meta);
  font-weight: 700; color: var(--inchiostro-chiaro); white-space: nowrap;
}

/* ── I componenti condivisi, ridipinti solo DENTRO un pannello ─────────
   Le stesse classi servono anche il dettaglio cantiere, che resta su
   carta chiara: qui si sovrascrive solo il colore, mai la struttura. */
.pannello .conto-riga { border-bottom-color: var(--bosco-linea); }
.pannello .conto-voce { color: var(--inchiostro-chiaro-2); }
.pannello .conto-importo { color: var(--inchiostro-chiaro); }
.pannello .conto-etichetta { color: var(--inchiostro-chiaro-2); }
.pannello .conto-avviso .conto-voce { color: #f3d9a4; }
.pannello .conto-extra .conto-voce,
.pannello .conto-extra .conto-importo { color: var(--inchiostro-chiaro-2); }
.pannello .unita { color: var(--inchiostro-chiaro-2); }
/* La riga del risultato chiude la sottrazione: è l'unico accento del conto. */
.conto-esito { border-bottom: none; padding-top: var(--s3); }
.pannello .conto-esito .conto-voce { color: var(--menta); font-weight: 700; }
.pannello .conto-esito .conto-importo { color: var(--verde-vivo); font-size: var(--t-medio); }
.pannello .conto-esito .unita { color: var(--verde-vivo); opacity: 0.75; }

.pannello .consumo-pista { background: rgba(255, 255, 255, 0.09); }
.pannello .consumo-barra { background: linear-gradient(90deg, var(--verde), var(--verde-vivo)); }
.pannello .consumo-nota { color: var(--inchiostro-chiaro-2); }
.pannello .consumo-sforato {
  background: rgba(157, 47, 43, 0.3); box-shadow: inset 0 0 0 1px rgba(238, 202, 197, 0.4);
}
.pannello .consumo-sforato .consumo-barra { background: linear-gradient(90deg, #c0574f, #e8867d); }

.pannello .elenco-sezioni li { border-bottom-color: var(--bosco-linea); }
.pannello .sezione-voce { color: var(--inchiostro-chiaro); }
.pannello .sezione-nome { color: #fff; }
.pannello .sezione-voce:hover { background: rgba(255, 255, 255, 0.06); }
.pannello .sezione-voce:focus-visible { outline: 2px solid var(--verde-vivo); outline-offset: -2px; }
.pannello .sezione-meta { color: var(--inchiostro-chiaro-2); }
.pannello .sezione-pista { background: rgba(255, 255, 255, 0.08); }
.pannello .sezione-barra { background: linear-gradient(90deg, var(--verde), var(--verde-vivo)); }
.pannello .sezione-cautela, .pannello .grafico-cautela { color: #f3d9a4; }

/* La composizione del costo: una sola tinta che schiarisce = parti di una
   stessa cosa. Sul fondo scuro la rampa va rifatta al contrario, e ogni
   tono resta sopra 3:1 sulla superficie del pannello. */
.pannello .barra-composizione { background: rgba(255, 255, 255, 0.08); }
.pannello .seg-1 { background: var(--tono-notte-1); }
.pannello .seg-2 { background: var(--tono-notte-2); }
.pannello .seg-3 { background: var(--tono-notte-3); }
.pannello .seg-4 { background: var(--tono-notte-4); }
.pannello .legenda li { color: var(--inchiostro-chiaro-2); border-bottom-color: var(--bosco-linea); }
.pannello .legenda-importo { color: var(--inchiostro-chiaro); }

.pannello .testo-tenue { color: var(--inchiostro-chiaro-2); }
.pannello .grafico-sintesi { color: var(--inchiostro-chiaro-2); }
.pannello .grafico-sintesi strong { color: #fff; }
.pannello .nota-sezione { color: var(--inchiostro-chiaro-2); }

/* La tabella dei numeri dentro il pannello scuro. */
.pannello th, .pannello td { border-bottom-color: var(--bosco-linea); }
.pannello thead th { color: var(--inchiostro-chiaro-2); border-bottom-color: var(--bosco-linea-forte); }
.pannello tbody td { color: var(--inchiostro-chiaro); }
.pannello tbody tr:hover { background: rgba(255, 255, 255, 0.05); }
.pannello .cella-forte { color: #fff; }
.pannello .cella-nota { color: var(--inchiostro-chiaro-2); }

/* I distintivi sul fondo scuro: stessa forma, superficie traslucida.
   L'ambra resta l'unico colore d'avviso, il minio l'unico di allarme. */
.pannello .distintivo.positivo {
  color: var(--menta); background: rgba(75, 211, 138, 0.14); border-color: rgba(75, 211, 138, 0.34);
}
.pannello .distintivo.attenzione {
  color: #f3d9a4; background: rgba(240, 212, 154, 0.13); border-color: rgba(240, 212, 154, 0.34);
}
.pannello .distintivo.critico {
  color: #f2b3ad; background: rgba(157, 47, 43, 0.26); border-color: rgba(238, 202, 197, 0.36);
}
.pannello .distintivo.neutro {
  color: var(--inchiostro-chiaro-2); background: rgba(255, 255, 255, 0.07);
  border-color: var(--bosco-linea);
}
.pannello .bottone.primario { background: var(--verde-vivo); color: var(--notte); }
.pannello .bottone.primario:hover { background: var(--menta); }
.pannello .collegamento { color: var(--verde-vivo); }

/* Lo stato vuoto è la prima schermata di un'azienda nuova: stessa
   plancia, così il prodotto non cambia faccia il secondo giorno. */
.pannello.vuoto { text-align: center; padding: var(--s7) var(--s5); }
.pannello.vuoto h2 { color: #fff; margin-bottom: var(--s3); }
.pannello.vuoto p { margin: 0 auto var(--s3); max-width: 54ch; color: var(--inchiostro-chiaro-2); }

/* Dentro un pannello gli elenchi arrivano già distanziati dal corpo. */
.pannello-corpo > .elenco-sezioni > li:first-child { padding-top: 0; }
.pannello-corpo > .elenco-sezioni > li:last-child { padding-bottom: 0; }
.pannello-corpo > .barra-composizione { margin-top: 0; }
.pannello-corpo > .conto-riga:first-child { padding-top: 0; }

@media (max-width: 1180px) {
  .col-3 { grid-column: span 6; }
  .col-4, .col-8 { grid-column: span 12; }
}
@media (max-width: 1024px) {
  .grafico { --alto-grafico: 170px; }
}
@media (max-width: 640px) {
  .col-3 { grid-column: span 12; }
  .griglia-dashboard, .pila-pannelli { gap: var(--s4); }
  .pannello-testa, .pannello-corpo { padding-left: var(--s4); padding-right: var(--s4); }
  .pannello-piede, .elenco-pannello a { padding-left: var(--s4); padding-right: var(--s4); }
  .grafico { --alto-grafico: 150px; }
  .grafico-mesi { font-size: var(--t-micro); }
  /* Dodici etichette non entrano in 320px: restano quelle «chiave»,
     contate a ritroso dall'ultima, così il mese in corso non sparisce
     mai. I punti non si spostano: la scala resta la stessa. */
  .mesi-fitti span:not(.mese-chiave) { display: none; }
}


/* ── Pagina Cantieri (passata UI 22/08/2026) ───────────────────────────
   Qui non si guarda: si cerca. Il titolare arriva con un nome in testa
   («come sta andando il Tigli?»), lo trova con il dito, legge il margine
   e apre. Quindi registro, non plancia: carta chiara, densità da
   scrivania, e il verde solo dove è misura o azione — la dashboard è il
   quadro d'insieme, questa è la pagina operativa.

   La gerarchia sta in TRE leve insieme, non nella sola dimensione:
   nome 15/700 inchiostro · valore e costo 14/600 inchiostro-2 ·
   margine 18/700 inchiostro · percentuale 12/600 inchiostro-3.
   Le righe NON diventano più alte: cresce il testo, non lo spazio.

   La barra del margine misura e basta: una sola tinta, nessun rosso o
   verde di giudizio. Il prodotto non dà voti sui margini. */

.intestazione-elenco { align-items: flex-end; margin-bottom: var(--s4); }

/* La ricerca: etichetta vera (si legge anche con gli occhiali sbagliati)
   e lente dentro il campo, così il campo si riconosce prima di leggerlo. */
.ricerca-etichetta { color: var(--inchiostro-2); }
.campo-cerca { position: relative; display: inline-flex; align-items: center; }
.campo-cerca .segno {
  position: absolute; left: var(--s3); width: 16px; height: 16px;
  color: var(--inchiostro-3); pointer-events: none;
}
.campo-cerca .campo-ricerca { padding-left: 36px; min-height: 42px; }
.campo-cerca:focus-within .segno { color: var(--verde); }
.conteggio-elenco {
  margin: 0; color: var(--inchiostro-2);
  font-size: var(--t-denso); font-weight: 600;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}

/* ── Il registro dei cantieri ──────────────────────────────────────── */
.tabella-cantieri td { padding-top: 11px; padding-bottom: 11px; }
.tabella-cantieri tbody .cella-forte {
  font-size: 15px; font-weight: 700; letter-spacing: -0.15px;
  color: var(--inchiostro); line-height: 1.3;
}
.tabella-cantieri tbody td.numero {
  font-size: var(--t-corpo); font-weight: 600; color: var(--inchiostro-2);
}
.tabella-cantieri thead th { padding-bottom: var(--s3); }
.tabella-cantieri .cella-nota { font-weight: 500; }

/* La colonna del margine: l'euro è la risposta, la percentuale il modo
   di leggerla, la barra la proporzione. Tre gradini, un solo blocco. */
.misura { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
/* Euro e percentuale sulla STESSA riga: la percentuale qualifica l'euro,
   e una riga in meno tiene la tabella alta come prima nonostante il
   numero sia cresciuto di cinque punti. */
.misura-riga { display: flex; align-items: baseline; gap: var(--s2); }
.misura-valore {
  font-size: var(--t-medio); font-weight: 700; letter-spacing: -0.3px;
  color: var(--inchiostro); line-height: 1.15;
}
.misura-valore .unita { font-size: 0.6em; }
.misura-quota { color: var(--inchiostro-3); font-size: var(--t-meta); font-weight: 600; }
/* Il trattino del margine non calcolabile e' un'informazione, non un
   segnaposto: misurato 3.72:1 con inchiostro-4, portato sopra soglia. */
.misura-muta { color: var(--inchiostro-3); }
.traccia { width: 108px; height: 8px; }

/* La riga è apribile, e si vede: fondo che cambia, dorso verde sul bordo
   sinistro (inset, non un bordo vero: nessuno spostamento di layout) e
   freccia che si accende e fa un passo avanti. */
.tabella-cantieri tbody tr[data-href] .cella-freccia {
  font-size: var(--t-medio); line-height: 1;
  transition: color var(--transizione), transform var(--transizione);
}
.tabella-cantieri tbody tr[data-href] td {
  transition: background-color var(--transizione);
}
.tabella-cantieri tbody tr[data-href]:hover td:first-child,
.tabella-cantieri tbody tr[data-href]:focus-within td:first-child {
  box-shadow: inset 3px 0 0 var(--verde);
}
.tabella-cantieri tbody tr[data-href]:hover .cella-freccia,
.tabella-cantieri tbody tr[data-href]:focus-within .cella-freccia {
  color: var(--verde); transform: translateX(2px);
}

/* ── "Da sistemare": problema, quanti, a cosa si riferisce, che fare ── */
.blocco-sistemare { margin-bottom: 0; }
.blocco-anomalia { padding: var(--s4) var(--s4) var(--s3); }
.blocco-anomalia.quieto { border-left-color: var(--bordo); }
/* Titolo a sinistra, conteggio incolonnato a destra: «quanti casi» si
   legge scorrendo una colonna sola, senza rileggere i titoli. */
.titolo-anomalia {
  margin: 0; gap: var(--s3);
  align-items: flex-start; justify-content: space-between;
  font-size: 15px; font-weight: 700; letter-spacing: -0.15px; line-height: 1.3;
}
.titolo-anomalia .distintivo { flex: 0 0 auto; }
.anomalia-spiega {
  margin: 6px 0 var(--s3); max-width: 46ch;
  color: var(--inchiostro-3); font-size: var(--t-meta); line-height: 1.5;
}
/* Un filo fra una voce e l'altra: si scorre l'elenco senza contarlo. */
.azioni-anomalia li + li { border-top: 1px solid var(--bordo-tenue); }
.blocco-anomalia .azione { padding: 10px var(--s2); font-size: var(--t-corpo); }
.blocco-anomalia .azione:hover { background: var(--neutro-fondo); }
.azione-testo { font-weight: 600; color: var(--inchiostro); }
.azione-vai { font-size: var(--t-denso); font-weight: 700; }
.azione-freccia {
  display: inline-block; margin-left: 2px;
  transition: transform var(--transizione);
}
.azione:hover .azione-freccia { transform: translateX(3px); }
.azione-altre {
  padding: var(--s2); color: var(--inchiostro-3); font-size: var(--t-meta);
}
.anomalia-meta { margin-top: var(--s3); padding-top: var(--s2); border-top: 1px solid var(--bordo-tenue); }

/* La scorciatoia in testata parla la lingua del richiamo della
   dashboard: stessa pastiglia, stesso ambra, stesso mestiere. */
.avviso-scorciatoia {
  display: inline-flex; align-items: center; gap: var(--s2);
  padding: var(--s2) var(--s3);
  border: 1px solid var(--ambra-bordo); border-radius: 999px;
  background: var(--ambra-fondo); color: var(--ambra-testo);
  transition: border-color var(--transizione);
}
.avviso-scorciatoia:hover { border-color: var(--ambra-testo); text-decoration: none; }
.avviso-scorciatoia:focus-visible { outline: 2px solid var(--verde); outline-offset: 2px; }
.avviso-scorciatoia .distintivo.attenzione {
  background: var(--carta); border-color: var(--ambra-testo);
}

@media (max-width: 760px) {
  /* Il campo di ricerca prende la riga: a mano, il pollice ci arriva. */
  .strumenti-elenco { width: 100%; }
  .ricerca { flex: 1 1 100%; }
  .campo-cerca { flex: 1 1 auto; }
  .campo-cerca .campo-ricerca { min-width: 0; width: 100%; }
  .misura-valore { font-size: var(--t-corpo); }
  .traccia { width: 76px; }
  /* Su schermo stretto il verbo va a capo sotto il soggetto: schiacciati
     sulla stessa riga si spezzavano tutti e due. */
  .blocco-anomalia .azione { flex-wrap: wrap; gap: 2px var(--s3); }
  .blocco-anomalia .azione-vai { width: 100%; }
}

/* ── Webapp operatore: flusso a 7 passi (D4) ──────────────────────────
   La via di uscita del passo 5 e' un collegamento di testo, non un
   pulsante: e' la strada meno battuta, deve restare disponibile senza
   invitare a prenderla. Chi ci passa registra lo stesso, senza tariffa. */
.op-uscita {
  display: block; width: 100%; margin: var(--s3) 0 0; padding: var(--s2) 0;
  border: 0; background: none; text-align: left;
  color: var(--verde-scuro); font-family: inherit; font-size: 15px;
  font-weight: 600; text-decoration: underline; cursor: pointer;
}
.op-uscita:hover { color: var(--verde); }
.op-uscita:focus-visible { outline: 2px solid var(--verde); outline-offset: 2px; border-radius: var(--r1); }
.op-uscita-detto {
  margin: var(--s2) 0 0; padding: var(--s3);
  border: 1px solid var(--ambra-bordo); border-radius: var(--r1);
  background: var(--ambra-fondo); color: var(--ambra-testo); font-size: 14px;
}
/* Da dove viene l'elenco che stai guardando: si legge sotto la tendina,
   piccolo, perche' e' contesto e non un comando. */
.op-fonte-voci { margin: var(--s1) 0 var(--s3); color: var(--inchiostro-3); font-size: 13px; }