/* 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: CRUSCOTTO. Il mondo di riferimento non è il giardino, è la
   scrivania di chi tiene i conti: carta, inchiostro, registri a righe,
   timbri di verifica, verde notte da copertina di raccoglitore.

   Profondità: SOLO BORDI e cambi di superficie. Nessuna ombra: in uno
   strumento denso le ombre sporcano. Il punto focale vince per contrasto
   (l'unica superficie scura del contenuto), non per elevazione.

   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 {
  /* Superfici: una sola tinta, cambia solo la luminosità */
  --canvas: #edf0ee;          /* il piano della scrivania */
  --carta: #ffffff;           /* il foglio */
  --carta-riga: #f7f9f8;      /* la riga alternata del registro */
  --notte: #0f241b;           /* verde notte: barra e pannello del margine */
  --notte-alto: #17362a;      /* stesso colore, un gradino più chiaro */

  /* Inchiostro: quattro livelli, non due */
  --inchiostro: #101a16;
  --inchiostro-2: #3d4a44;
  --inchiostro-3: #64716a;
  --inchiostro-4: #8a958e;
  --inchiostro-chiaro: #dfe8e3;    /* testo sul notte */
  --inchiostro-chiaro-2: #9fb3aa;  /* secondario sul notte */

  /* Bordi: si vedono solo se li cerchi */
  --bordo-tenue: rgba(16, 26, 22, 0.06);
  --bordo: rgba(16, 26, 22, 0.11);
  --bordo-forte: rgba(16, 26, 22, 0.18);
  --bordo-notte: rgba(255, 255, 255, 0.10);

  /* Un solo accento. Il resto è struttura. */
  --verde: #1d7a4c;
  --verde-scuro: #165c39;
  --verde-vivo: #3fbd7c;      /* solo sul notte, dove il verde scuro sparisce */

  /* Timbri di verifica: colore + sempre testo o segno */
  --ok-testo: #14663f;    --ok-fondo: #e6f2ea;    --ok-bordo: #c6e2d2;
  --ambra-testo: #7f5300; --ambra-fondo: #fbf0dc; --ambra-bordo: #eeda b0;
  --minio-testo: #9d2f2b; --minio-fondo: #fae9e7; --minio-bordo: #eecac5;
  --neutro-fondo: #e9edea;

  /* 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
     (12 è il mezzo passo per i metadati densi) */
  --t-micro: 11px; --t-meta: 12px; --t-corpo: 14px;
  --t-medio: 18px; --t-grande: 22px; --t-titolo: 28px; --t-cifra: 44px;

  --testo: "IBM Plex Sans", system-ui, "Segoe UI", Roboto, Arial, sans-serif;
  --numeri: "IBM Plex Mono", ui-monospace, Consolas, "Courier New", monospace;

  /* Raggi: scala, non valori a caso. Concentrici: badge < card. */
  --r1: 5px;   /* controlli */
  --r2: 8px;   /* card */
  --r3: 10px;  /* contenitori grandi */

  --transizione: 140ms cubic-bezier(0.23, 1, 0.32, 1);
}

* { 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;
}
h1, h2, h3 { text-wrap: balance; }
p, li, td { text-wrap: pretty; }
h1 { font-size: var(--t-titolo); font-weight: 600; letter-spacing: -0.5px; margin: 0; }
h2 {
  font-size: var(--t-medio); font-weight: 600; letter-spacing: -0.2px;
  margin: 0 0 var(--s4);
}
code {
  font-family: var(--numeri); font-size: var(--t-meta);
  background: var(--neutro-fondo); padding: 1px 5px; border-radius: var(--r1);
}

/* Numeri: mono, cifre tabulari, unità di misura in secondo piano.
   L'occhio deve prendere prima la quantità, poi il simbolo. */
.cifra, .kpi-valore, td.numero, .kpi-percentuale {
  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: #fff; font-size: var(--t-corpo); font-weight: 600; letter-spacing: 0.2px;
  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(--r1);
  color: var(--inchiostro-chiaro-2); text-decoration: none;
  font-size: var(--t-corpo); font-weight: 500;
  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: 13px; }
.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: 13px; }
.briciole { margin: 0 0 var(--s1); color: var(--inchiostro-3); font-size: var(--t-meta); }

/* ── Superfici ─────────────────────────────────────────────────────── */
.carta {
  background: var(--carta);
  border: 1px solid var(--bordo);
  border-radius: var(--r2);
  padding: var(--s4);
}
.sezione { margin-bottom: var(--s4); }

/* ── KPI: il margine è il punto focale, gli altri sono contorno ────── */
.griglia-kpi {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: var(--s3); margin-bottom: var(--s4);
}
/* Colonna: il distintivo scende in fondo, così i segni di verifica si
   allineano fra card diverse invece di galleggiare a mezz'aria. */
.kpi { padding: var(--s4); display: flex; flex-direction: column; align-items: flex-start; }
.kpi-etichetta {
  color: var(--inchiostro-3); font-size: var(--t-micro); font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.8px;
}
.kpi-valore {
  /* il mono non va stretto: il tracking negativo lo fa collidere */
  font-size: var(--t-grande); font-weight: 600; letter-spacing: -0.2px;
  margin: var(--s2) 0 auto; padding-bottom: var(--s2); line-height: 1.1;
}
.kpi-percentuale {
  font-size: var(--t-medio); font-weight: 500; color: var(--inchiostro-3);
  margin-left: var(--s2); letter-spacing: -0.2px;
}
.kpi-muto { color: var(--inchiostro-4); }

/* L'unica superficie scura del contenuto: il dato per cui si apre il software */
.kpi-margine {
  grid-column: span 3;
  background: var(--notte);
  border-color: var(--notte);
  color: #fff;
  padding: var(--s5);
  justify-content: center;
}
.kpi-margine .kpi-etichetta { color: var(--verde-vivo); letter-spacing: 1px; }
.kpi-margine .kpi-valore {
  font-size: var(--t-cifra); font-weight: 600; letter-spacing: -0.5px;
  color: #fff; margin: var(--s3) 0 var(--s3); padding-bottom: 0;
}
.kpi-margine .unita { color: var(--inchiostro-chiaro-2); }
.kpi-margine .kpi-percentuale { color: var(--inchiostro-chiaro-2); font-size: var(--t-grande); }
.kpi-margine .kpi-muto { color: var(--inchiostro-chiaro-2); }
.kpi-margine .distintivo.positivo {
  color: #cdf0dd; background: rgba(63, 189, 124, 0.14); border-color: rgba(63, 189, 124, 0.32);
}
.kpi-margine .distintivo.attenzione {
  color: #ffdfa8; background: rgba(255, 176, 46, 0.14); border-color: rgba(255, 176, 46, 0.34);
}
.kpi-margine .distintivo.neutro,
.kpi-margine .distintivo.critico {
  color: var(--inchiostro-chiaro); background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.18);
}

/* ── Distintivi: colore + segno + testo, mai colore da solo ────────── */
.distintivo {
  display: inline-block; padding: 2px var(--s2); border-radius: var(--r1);
  font-size: var(--t-meta); font-weight: 600; 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: #eedab0; }
.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 a righe alternate ────────────────────────── */
.scorri-tabella { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th, td {
  text-align: left; padding: 10px var(--s3);
  border-bottom: 1px solid var(--bordo-tenue); vertical-align: middle;
}
thead th {
  background: var(--carta-riga);
  border-bottom: 1px solid var(--bordo);
  color: var(--inchiostro-3); font-size: var(--t-micro); font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.7px; white-space: nowrap;
}
tbody tr:nth-child(even) { background: var(--carta-riga); }
tbody tr:hover { background: #eaf2ed; }
tbody tr:last-child td { border-bottom: none; }
th.numero, td.numero { text-align: right; white-space: nowrap; }
td.numero { font-weight: 500; font-size: 13.5px; }
.cella-forte { font-weight: 600; }
.cella-nota { color: var(--inchiostro-3); font-size: var(--t-meta); margin-top: 1px; }
.riga-totale td { background: var(--neutro-fondo); border-top: 1px solid var(--bordo); }
.riga-totale:hover td { background: var(--neutro-fondo); }

/* ── Anomalie ──────────────────────────────────────────────────────── */
.elenco-anomalie {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s2);
}
.elenco-anomalie li { display: flex; align-items: center; gap: var(--s2); font-size: 13.5px; }

/* ── Stato vuoto: spiega cosa fare, non sembra un guasto ───────────── */
.vuoto {
  text-align: center; padding: var(--s7) var(--s6);
  border: 1px dashed var(--bordo-forte); background: var(--carta);
  margin-bottom: var(--s4);
}
.vuoto h2 { margin-bottom: var(--s3); }
.vuoto p { margin: 0 auto var(--s3); max-width: 54ch; color: var(--inchiostro-3); }
.vuoto-passi { font-size: 13.5px; }

/* ── 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: 13.5px; color: var(--inchiostro); }
.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: 40px; padding: 0 var(--s4);
  border-radius: var(--r1); border: 1px solid transparent;
  font-family: var(--testo); font-size: 13.5px; font-weight: 600;
  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; }
.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: 13px; width: auto; }

/* ── Avvisi ────────────────────────────────────────────────────────── */
.avviso {
  border-radius: var(--r1); padding: var(--s3); font-size: 13.5px;
  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: 13px; margin-top: var(--s2);
}

/* ── Dettaglio cantiere ────────────────────────────────────────────── */
.griglia-kpi-dettaglio { grid-template-columns: repeat(4, 1fr); }
.kpi-margine-dettaglio { grid-column: span 2; }
.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(--r1);
  color: var(--inchiostro-2); text-decoration: none; font-size: 13.5px; font-weight: 500;
  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);
  font-size: 13px; 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); border-radius: var(--r3);
  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); }
  .griglia-kpi, .griglia-kpi-dettaglio { grid-template-columns: repeat(2, 1fr); }
  .kpi-margine, .kpi-margine-dettaglio, .kpi-controllare { grid-column: span 2; }
  .colonne-2 { grid-template-columns: 1fr; }
  .elenco-anomalie { 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; }
}

/* ── 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: #eedab0;
}
.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: #eedab0; }
.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: #eedab0; }
.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); }