/* ==========================================================================
   Giorgi Autodemolizione — sistema di stile

   Stile «A · Vetro», scelto dal cliente il 13/10/2026 fra le tre proposte
   del restyling 2026, sul brand book di ottobre 2026: fondo bianco con
   sfumature azzurre, menu e schede semitrasparenti come vetro satinato, il
   Blu Materia per le azioni principali.

   Tutti i colori vengono dal brand book («nessun colore fuori palette»),
   piu' i quattro colori di stato, che hanno un significato e non sono marca:

   * Blu, undici gradini — il primario: selezione, collegamenti, titoli,
     fasi. Il Blu Materia (#024C7B, il 700) fa i bottoni principali,
     l'Azzurro vetro (#D0E9F6, il 200) aree e riquadri.
   * Neutri freddi, col Grigio luce (#E3E7ED) — fondi, bordi, testo.
   * Ambra — l'attenzione, la priorita' e il «troppo» (oltre i posti, oltre
     lo standard). La proposta A non ha un accento caldo: l'ottone di prima
     si divideva fra il bottone principale, che ora e' Blu Materia, e la
     priorita', che ora e' l'ambra dell'attenzione.
   * Semantici — successo, attenzione, errore, informazione: fondo chiaro e
     testo scuro dello stesso colore, come nella proposta A.

   I nomi di prima restano e valgono i colori nuovi: `--petrolio-*` e
   `--ottanio-*` sono il Blu del brand, `--ardesia-*` i neutri, `--ottone-*`
   (e `--rame-*`) l'ambra. Li usano centinaia di regole: rinominarli avrebbe
   toccato mezzo foglio senza cambiare niente a schermo.

   Tutti i contrasti del testo sono verificati WCAG AA (4.5:1 sul testo
   normale, 3:1 sugli elementi di interfaccia e sul testo grande).

   Tre regole qui dentro NON sono estetica ma vincoli di dominio:

   1. Codifica colore uniforme in tutto il sistema (style-colore-scostamento).
      Verde sotto lo standard, rosso sopra, senza fascia neutra. Verde SOLO al
      100% sul rispetto dei termini di legge. Il colore non e' mai l'unica
      informazione: accanto c'e' sempre il numero, o la parola.
   2. La FASE non e' un allarme. Dove si trova una pratica (in valutazione,
      programmata...) si dice con il blu che si scurisce man mano; i colori
      caldi restano ai SEGNALI, le cose che non vanno.
   3. Ogni ruolo ha il suo contesto fisico. Le classi `.contesto-officina` e
      `.contesto-tabellone` ingrandiscono bersagli e testo per chi lavora
      coi guanti o guarda da lontano, e li' le superfici sono piene, non di
      vetro: su uno schermo poco luminoso, visto da lontano, il vetro si
      distingue meno dal fondo (il limite che la proposta A dichiarava).
   ========================================================================== */

/* --- Caratteri: Montserrat e Saira, nel repository come Bootstrap ----------
   Montserrat e' il carattere istituzionale del brand book (anche la parola
   GIORGI del logo e' disegnata su Montserrat): fa i titoli e i numeri.
   Saira, indicata dal cliente accanto a Montserrat, fa il testo. Tutti e
   due variabili, un file solo per tutti i pesi. IBM Plex Mono resta per
   targhe e codici: distingue lo zero dalla O. Tutti in SIL OFL 1.1: le
   licenze stanno in `vendor/fonts/`, accanto ai file. */

@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../vendor/fonts/montserrat-latin-wght.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../vendor/fonts/montserrat-latin-ext-wght.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
    U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
    U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Montserrat";
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url("../vendor/fonts/montserrat-italic-latin-wght.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Montserrat";
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url("../vendor/fonts/montserrat-italic-latin-ext-wght.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
    U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
    U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Saira";
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 50% 125%;
  font-display: swap;
  src: url("../vendor/fonts/saira-latin-wdth-wght.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Saira";
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 50% 125%;
  font-display: swap;
  src: url("../vendor/fonts/saira-latin-ext-wdth-wght.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
    U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
    U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../vendor/fonts/ibm-plex-mono-latin-400.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../vendor/fonts/ibm-plex-mono-latin-ext-400.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
    U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
    U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../vendor/fonts/ibm-plex-mono-latin-500.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../vendor/fonts/ibm-plex-mono-latin-ext-500.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
    U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
    U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../vendor/fonts/ibm-plex-mono-latin-600.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../vendor/fonts/ibm-plex-mono-latin-ext-600.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
    U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
    U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* --- Blu del brand: «Scala blu» del brand book, undici gradini --------- */
  --marca-blu-50: #f7fcff;
  --marca-blu-100: #e8f4fc;
  --marca-blu-200: #d0e9f6; /* Azzurro vetro */
  --marca-blu-300: #9ccbe4;
  --marca-blu-400: #65a9ce;
  --marca-blu-500: #2a85b3;
  --marca-blu-600: #0d6896;
  --marca-blu-700: #024c7b; /* Blu Materia */
  --marca-blu-800: #0d3a5c;
  --marca-blu-900: #0e1419;
  --marca-blu-950: #070b0f;

  /* --- Neutri del brand: «Scala neutri» ---------------------------------- */
  --marca-neutro-50: #fbfcfc;
  --marca-neutro-100: #f5f6f7;
  --marca-neutro-200: #e3e7ed; /* Grigio luce */
  --marca-neutro-300: #d4d9de;
  --marca-neutro-400: #c4c8ce;
  --marca-neutro-500: #8b9198;
  --marca-neutro-600: #686e76;
  --marca-neutro-700: #4c5258;
  --marca-neutro-800: #2c3138;
  --marca-neutro-900: #0f1419;

  /* --- I quattro gradienti ufficiali -------------------------------------- */
  --grad-vetro: linear-gradient(45deg, #ffffff 0%, #d0e9f6 100%);
  --grad-profondo: linear-gradient(45deg, #2a85b3 0%, #0d3a5c 100%);
  --grad-immersione: linear-gradient(315deg, #0d3a5c 0%, #65a9ce 80%, #d0e9f6 100%);
  --grad-emanazione: radial-gradient(ellipse at 50% 50%, #d0e9f6 0%, #65a9ce 50%, #0d3a5c 100%);

  /* --- Petrolio: il nome di prima, vale il Blu del brand ------------------
     Il 900 del brand e' quasi nero: come blu piu' scuro qui serve quello
     del bottone premuto nella proposta A, che si legge ancora come blu. */
  --petrolio-50: var(--marca-blu-50);
  --petrolio-100: var(--marca-blu-100);
  --petrolio-200: var(--marca-blu-200);
  --petrolio-300: var(--marca-blu-300);
  --petrolio-400: var(--marca-blu-400);
  --petrolio-500: var(--marca-blu-500);
  --petrolio-600: var(--marca-blu-600);
  --petrolio-700: var(--marca-blu-700);
  --petrolio-800: var(--marca-blu-800);
  --petrolio-900: #0a2e4a;
  --petrolio-950: var(--marca-blu-900);

  /* I nomi ancora di prima: li usa mezzo foglio, e sono lo stesso colore. */
  --blu-900: var(--petrolio-900);
  --blu-800: var(--petrolio-800);
  --blu-600: var(--petrolio-600);
  --blu-500: var(--petrolio-500);
  --blu-400: var(--petrolio-400);
  --blu-100: var(--petrolio-100);

  /* --- Ardesia: il nome di prima, vale i neutri freddi del brand ----------
     Il testo segue la proposta A: neutri appena tinti di blu, che accanto
     ai titoli Blu Materia non sembrano grigi sporchi. */
  --ardesia-0: #ffffff;
  --ardesia-25: var(--marca-blu-50);
  --ardesia-50: #f3f8fc; /* il fondo della proposta A */
  --ardesia-100: var(--marca-neutro-200);
  --ardesia-150: #dde2e8;
  --ardesia-200: var(--marca-neutro-300);
  --ardesia-300: var(--marca-neutro-400);
  --ardesia-400: var(--marca-neutro-500); /* bordi dei campi e icone: 3,2:1. MAI testo */
  --ardesia-500: #626c76; /* 5,3:1 sul bianco */
  --ardesia-600: #4e5a65;
  --ardesia-700: #3a4551;
  --ardesia-800: #23303b;
  --ardesia-900: #18242f;

  /* --- Ottanio: il nome di prima, la strada e la logistica ----------------
     Anche lui e' il Blu del brand: nella proposta A tutto cio' che si muove
     (in ritiro, in strada) e' blu, e il 700 e' il blu dell'informazione. */
  --ottanio-25: var(--marca-blu-50);
  --ottanio-50: var(--marca-blu-50);
  --ottanio-100: var(--marca-blu-100);
  --ottanio-200: var(--marca-blu-200);
  --ottanio-300: var(--marca-blu-300);
  --ottanio-400: var(--marca-blu-400);
  --ottanio-500: var(--marca-blu-500);
  --ottanio-600: var(--marca-blu-600);
  --ottanio-700: #0d5e8a;
  --ottanio-800: var(--marca-blu-800);
  --ottanio-900: var(--petrolio-900);

  /* --- Ottone: il nome di prima, ora l'ambra dell'attenzione ---------------
     Fa la priorita' (urgente, oggi) e il «troppo» (oltre i posti, oltre lo
     standard). Il 50, il 400 e il 700 sono il fondo, il punto e il testo
     dell'attenzione. Sul 400 si scrive col 900 (5,6:1), mai in bianco. */
  --ottone-25: #fffaf0;
  --ottone-50: #fcf0d9;
  --ottone-100: #f8e3bb;
  --ottone-200: #f1cf8c;
  --ottone-300: #e6b85a;
  --ottone-400: #d99a1e;
  --ottone-500: #b98013;
  --ottone-600: #97670b;
  --ottone-700: #7f4d00;
  --ottone-800: #5f3a00;
  --ottone-900: #432a03;

  /* I nomi del rame restano: valgono l'ambra, gradino per gradino. */
  --rame-25: var(--ottone-25);
  --rame-50: var(--ottone-50);
  --rame-100: var(--ottone-100);
  --rame-200: var(--ottone-200);
  --rame-300: var(--ottone-300);
  --rame-400: var(--ottone-400);
  --rame-500: var(--ottone-500);
  --rame-600: var(--ottone-600);
  --rame-700: var(--ottone-700);
  --rame-800: var(--ottone-800);

  /* --- Ruoli ------------------------------------------------------------ */
  --primario: var(--petrolio-700); /* Blu Materia: 8,9:1 sul bianco */
  --primario-scuro: var(--petrolio-800);
  --primario-chiaro: var(--petrolio-400);
  /* L'accento della proposta A: un azzurro che segna, non un'azione. */
  --accento: var(--petrolio-400);
  --accento-chiaro: var(--petrolio-200);
  --accento-testo: var(--petrolio-600);
  --su-accento: var(--petrolio-800);
  /* Il testo su un fondo d'ambra pieno. */
  --su-ottone: var(--ottone-900);

  --fondo: var(--ardesia-50);
  --fondo-alt: var(--ardesia-100);
  --superficie: var(--ardesia-0);
  --superficie-alt: var(--ardesia-25);
  --bordo: var(--ardesia-150);
  /* I filetti DENTRO una superficie: piu' chiari del suo contorno. */
  --bordo-tenue: var(--ardesia-100);
  --bordo-forte: var(--ardesia-300);
  /* Il contorno di un campo da compilare: deve arrivare a 3:1. */
  --bordo-campo: var(--ardesia-400);

  --testo: var(--ardesia-900);
  --testo-forte: var(--ardesia-800);
  --testo-medio: var(--ardesia-600);
  --testo-tenue: var(--ardesia-500);
  --testo-inverso: #f7fcff;
  /* Titoli e numeri grandi sono Blu Materia scuro, come nella proposta A. */
  --testo-titoli: var(--petrolio-800);
  /* Il testo tenue del menu, che ora e' chiaro come la pagina. */
  --testo-su-barra: var(--ardesia-500);

  /* --- Semantici: significato fisso in tutta l'app ----------------------
     Fondo chiaro e testo scuro della stessa tinta, quelli della proposta A.
     Il pieno serve a punti, barre e tacche, mai al testo. */
  --successo: #17633f;
  --successo-fondo: #e2f3ea;
  --successo-bordo: #bfe2ce;
  --successo-pieno: #2e9a65;
  --attenzione: #7f4d00;
  --attenzione-fondo: #fcf0d9;
  --attenzione-bordo: #f2d59e;
  --attenzione-pieno: #d99a1e;
  /* Un riquadro d'attenzione dentro una superficie: piu' tenue del fondo. */
  --attenzione-velo: #fef8ec;
  --errore: #9e2530;
  --errore-fondo: #fbe5e6;
  --errore-bordo: #f3c3c6;
  --errore-pieno: #d6474f;
  --info: var(--ottanio-700);
  --info-fondo: var(--petrolio-100);
  --info-bordo: var(--petrolio-200);
  --info-pieno: var(--petrolio-500);
  --neutro: var(--ardesia-600);
  --neutro-fondo: var(--ardesia-100);
  --neutro-bordo: var(--ardesia-300);
  --neutro-pieno: var(--ardesia-400);

  /* --- Spaziatura: generosa, mai compressa ------------------------------ */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;

  /* --- Forma ------------------------------------------------------------
     Gli angoli della proposta A: 10 per bottoni e campi, 14 per i riquadri,
     18 per le schede, 22 per il menu e i contenitori grandi. Le superfici
     non hanno un bordo: hanno un anello d'ombra di un pixel e un'ombra
     lunga e morbida, tinta di blu. */
  --raggio-s: 10px;
  --raggio: 14px;
  --raggio-l: 18px;
  --raggio-xl: 22px;
  --anello: 0 0 0 1px rgba(13, 58, 92, 0.07);
  --ombra-s: 0 1px 2px rgba(13, 58, 92, 0.06);
  --ombra: 0 10px 24px -12px rgba(13, 58, 92, 0.24);
  --ombra-l: 0 2px 6px rgba(13, 58, 92, 0.06), 0 28px 56px -20px rgba(13, 58, 92, 0.34);
  --ombra-scheda: var(--ombra-s), var(--anello),
    0 12px 32px -14px rgba(13, 58, 92, 0.22);
  /* Una superficie sola per schermata: quella della prossima cosa da fare. */
  --ombra-rilievo: var(--ombra-s), var(--anello),
    0 22px 44px -16px rgba(13, 58, 92, 0.3);
  --anello-focus: 0 0 0 3px rgba(42, 133, 179, 0.32);

  /* --- Vetro e fondo ----------------------------------------------------
     Le superfici grandi (schede, tessere, testata, menu) sono vetro: bianco
     semitrasparente e sfocato, sopra un fondo bianco con tre aloni azzurri,
     quello della proposta A. */
  --vetro: rgba(255, 255, 255, 0.68);
  --vetro-forte: rgba(255, 255, 255, 0.9);
  --vetro-bordo: rgba(255, 255, 255, 0.92);
  --vetro-menu: rgba(255, 255, 255, 0.6);
  --sfocatura: blur(20px) saturate(160%);
  --fondo-pagina: radial-gradient(1100px 720px at 102% -8%, rgba(101, 169, 206, 0.34), transparent 62%),
    radial-gradient(900px 640px at -12% 28%, rgba(208, 233, 246, 0.95), transparent 62%),
    radial-gradient(820px 620px at 62% 112%, rgba(156, 203, 228, 0.38), transparent 60%),
    linear-gradient(180deg, #f7fcff 0%, #edf5fa 100%);

  /* --- Tipografia ------------------------------------------------------- */
  --font: "Saira", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-titoli: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono: "IBM Plex Mono", "SF Mono", Consolas, monospace;
  /* Archivo si allargava per fare la gerarchia; Montserrat e' gia' largo e
     non ha l'asse della larghezza. I nomi restano, valgono la larghezza
     normale: su Saira, che l'asse ce l'ha, non allargano niente. */
  --largo: 100%;
  --semilargo: 100%;

  /* --- Struttura -------------------------------------------------------- */
  --larghezza-barra: 248px;
  --altezza-testata: 64px;
  /* Il menu galleggia staccato dai bordi, come una scheda di vetro. */
  --margine-barra: 16px;

  /* --- Movimento: funzionale e breve, mai decorativo ---------------------
     150 ms per colori e hover, 200 per sollevare una scheda, 360 per entrare;
     con `prefers-reduced-motion` tutto si ferma (in fondo al foglio). */
  --curva: cubic-bezier(0.2, 0.8, 0.2, 1);
  --transizione: 150ms cubic-bezier(0.2, 0.8, 0.2, 1);
  --durata-entrata: 360ms;
}

/* ==========================================================================
   Base
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--testo);
  background-color: var(--fondo);
  /* Il fondo resta fermo mentre la pagina scorre: le macchie di colore e la
     griglia stanno dietro, il vetro delle superfici le lascia intravedere. */
  background-image: var(--fondo-pagina);
  background-size: auto;
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
}

/* I titoli sono Montserrat, nel blu scuro del marchio come nella proposta A:
   il peso fa la gerarchia, la spaziatura stretta la tiene compatta. */
h1,
h2,
h3,
h4 {
  font-family: var(--font-titoli);
  font-weight: 700;
  font-stretch: var(--semilargo);
  letter-spacing: -0.02em;
  color: var(--testo-titoli);
  margin: 0;
}

h1 {
  font-size: 1.75rem;
  font-weight: 700;
  font-stretch: var(--largo);
  letter-spacing: -0.03em;
  line-height: 1.08;
}
h2 {
  font-size: 1.25rem;
}
h3 {
  font-size: 1.0625rem;
  font-stretch: 100%;
}
h4 {
  font-stretch: 100%;
}

a {
  color: var(--blu-600);
  text-decoration: none;
  transition: color var(--transizione);
}

/* Il 500 del petrolio non arriva a 4,5:1 sul bianco: al passaggio il link
   si scurisce invece di schiarirsi. */
a:hover {
  color: var(--petrolio-700);
  text-decoration: underline;
}

code,
.mono {
  font-family: var(--font-mono);
  font-size: 0.875em;
}

/* ==========================================================================
   Impianto: barra laterale + area principale
   ========================================================================== */

.guscio {
  display: flex;
  min-height: 100vh;
}

/* --- Barra laterale ------------------------------------------------------ */

/* Il menu e' una lastra di vetro chiaro che galleggia staccata dai bordi,
   come nella proposta A: il fondo azzurro della pagina traspare appena. */
.barra {
  width: var(--larghezza-barra);
  flex-shrink: 0;
  background: var(--vetro-menu);
  -webkit-backdrop-filter: var(--sfocatura);
  backdrop-filter: var(--sfocatura);
  border-radius: var(--raggio-xl);
  box-shadow: var(--ombra-scheda), inset 0 0 0 1px var(--vetro-bordo);
  color: var(--testo);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: fixed;
  inset: var(--margine-barra) auto var(--margine-barra) var(--margine-barra);
  z-index: 1040;
  transition: transform var(--transizione);
}

.barra__marchio {
  height: var(--altezza-testata);
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: 0 22px;
  flex-shrink: 0;
}

/* Il marchio e' il logo 2026 di Giorgi Autodemolizione, dai file vettoriali
   del brand book, nella versione blu per i fondi chiari. Nella barra e'
   grande quanto la sua larghezza: l'08/10/2026 il cliente aveva voluto il
   logo di prima di nuovo grande, dopo che era stato rimpicciolito. Le
   iniziali e il nome restano nel markup per chi usa un lettore di schermo
   e per la testata del telefono. */
.barra__marchio {
  height: auto;
  min-height: var(--altezza-testata);
  padding: 20px 20px 14px;
}

.barra__logo {
  flex: 1;
  min-width: 0;
  height: 64px;
  max-width: 204px;
  background: url("../img/logo-giorgi.svg") left center / contain no-repeat;
  font-size: 0;
  color: transparent;
  overflow: hidden;
}

.barra__nome {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.barra__nome small {
  display: block;
  font-family: var(--font);
  font-weight: 400;
  font-size: 0.71875rem;
  color: var(--testo-su-barra);
}

/* Il menu scorre senza mostrare la sua barra di scorrimento: che continua lo
   dice la dissolvenza sul bordo da cui continua, in fondo finche' sotto c'e'
   altro e in cima appena si e' scesi. Sfumano le voci stesse, non un colore
   steso sopra: dietro resta il vetro. Le due classi le mette `app.js`; dove
   le proprieta' registrate non ci sono, la dissolvenza arriva senza
   transizione. */
@property --barra-sfuma-sopra {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}

@property --barra-sfuma-sotto {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}

.barra__nav {
  --barra-sfuma-sopra: 0px;
  --barra-sfuma-sotto: 0px;
  flex: 1;
  overflow-y: auto;
  /* In cima o in fondo il menu si ferma: la pagina dietro non scorre. */
  overscroll-behavior: contain;
  padding: var(--sp-2) 14px var(--sp-4);
  scrollbar-width: none;
  /* Una voce raggiunta con il tasto Tab non si ferma dentro la dissolvenza. */
  scroll-padding-block: 32px 64px;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 var(--barra-sfuma-sopra), #000 calc(100% - var(--barra-sfuma-sotto)), transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 var(--barra-sfuma-sopra), #000 calc(100% - var(--barra-sfuma-sotto)), transparent 100%);
  transition: --barra-sfuma-sopra 200ms var(--curva), --barra-sfuma-sotto 200ms var(--curva);
}

.barra__nav::-webkit-scrollbar {
  display: none;
}

.barra__nav--sopra {
  --barra-sfuma-sopra: 32px;
}

.barra__nav--sotto {
  --barra-sfuma-sotto: 64px;
}

/* Le sezioni si chiudono: quaranta voci in dieci sezioni non stanno in una
   barra senza scorrere. Aperta resta quella della pagina corrente, e quelle
   che chi lavora apre da se'. Aperta o chiusa, la sezione e' la stessa
   etichetta piccola in maiuscolo: cambia solo la freccia, e chiusa diventa
   una riga da toccare. Prima, chiusa, prendeva il carattere delle voci, e
   una sezione sembrava una pagina. */
.barra__sezione {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  width: 100%;
  margin-top: 2px;
  padding: 10px 10px;
  border: 0;
  border-radius: 8px;
  background: none;
  font-family: inherit;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--testo-su-barra);
  text-align: left;
  cursor: pointer;
  transition: background var(--transizione), color var(--transizione);
}

.barra__sezione:hover {
  background: rgba(208, 233, 246, 0.6);
  color: var(--testo-forte);
}

.barra__sezione:focus-visible,
.barra__voce:focus-visible {
  outline: 2px solid var(--petrolio-500);
  outline-offset: -2px;
}

.barra__sezione i {
  font-size: 0.8125rem;
  transition: transform var(--transizione);
}

/* Aperta, la sezione ha la stessa scatola di quando e' chiusa: cambiavano
   margine e imbottitura, e il titolo appena toccato saltava di qualche pixel.
   L'aria in piu' della sezione aperta sta sotto le sue voci, dove non sposta
   niente di cio' che si e' appena toccato. */
.barra__sezione[aria-expanded="true"]:hover {
  background: none;
}

.barra__sezione[aria-expanded="true"] i {
  transform: rotate(90deg);
}

.barra__voci {
  padding-bottom: 10px;
}

.barra__voci[hidden] {
  display: none;
}

/* L'etichetta di un gruppo dentro la sezione, «Analisi» o «Configurazione»:
   in maiuscolo piccolo, rientrata come le sue voci, perche' si veda che
   quelle voci vengono dopo le pagine del lavoro (16/10/2026, la proposta A). */
.barra__sottogruppo {
  padding: 14px 10px 4px 32px;
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--testo-tenue);
}

.barra__voce {
  position: relative;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 8px 10px;
  margin-bottom: 2px;
  border-radius: var(--raggio-s);
  color: var(--testo-forte);
  font-size: 0.875rem;
  font-weight: 500;
  transition: background var(--transizione), color var(--transizione);
}

.barra__voce:hover {
  background: rgba(208, 233, 246, 0.6);
  color: var(--testo);
  text-decoration: none;
}

/* Una voce senza sezione, in cima: il cruscotto. Un po' d'aria la separa
   dal primo titolo di sezione. */
.barra__voce--sola {
  margin-bottom: 8px;
}

/* La voce attiva: una piastrina bianca in rilievo, il testo Blu Materia e
   un segno azzurro sul bordo sinistro, come nella proposta A. */
.barra__voce--attiva {
  background: #fff;
  box-shadow: var(--ombra-s), var(--anello);
  color: var(--primario);
  font-weight: 600;
}

.barra__voce--attiva:hover {
  background: #fff;
  color: var(--primario);
}

.barra__voce--attiva::before {
  content: "";
  position: absolute;
  left: -8px;
  top: 9px;
  bottom: 9px;
  width: 3px;
  border-radius: 3px;
  background: var(--accento);
}

.barra__voce i {
  font-size: 1rem;
  opacity: 0.8;
  width: 1.125rem;
  text-align: center;
  flex-shrink: 0;
}

.barra__voce--attiva i {
  color: var(--primario);
  opacity: 1;
}

/* L'etichetta prende lo spazio che c'e': il contatore sta in fondo. */
.barra__etichetta {
  flex: 1;
  min-width: 0;
}

/* Le azioni stanno sotto la pagina che le raccoglie: rientrate e un po' piu'
   piccole. Nessuna linea le lega alla madre, il rientro basta. */
.barra__voce--figlia {
  margin-left: 18px;
  padding-top: 7px;
  padding-bottom: 7px;
  gap: 9px;
  font-size: 0.8125rem;
}

/* Le voci di un gruppo: rientrate, piu' piccole e grigie; al passaggio e
   da attive tornano del colore delle altre. */
.barra__voce--gruppo {
  margin-left: 22px;
  padding-top: 6px;
  padding-bottom: 6px;
  font-size: 0.8125rem;
  color: var(--testo-tenue);
}

.barra__voce--gruppo i {
  font-size: 0.875rem;
  opacity: 0.6;
}

.barra__voce--gruppo.barra__voce--attiva {
  color: var(--primario);
}

.barra__voce--gruppo.barra__voce--attiva i,
.barra__voce--gruppo:hover i {
  opacity: 1;
}

/* Il «+» delle azioni, in un riquadro: figlie o no, si riconoscono cosi'. */
.barra__piu {
  width: 18px;
  height: 18px;
  border-radius: 5px;
  box-shadow: inset 0 0 0 1px rgba(13, 58, 92, 0.3);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.barra__voce .barra__piu i {
  width: auto;
  font-size: 0.75rem;
  opacity: 1;
}

.barra__voce--attiva .barra__piu {
  box-shadow: inset 0 0 0 1px var(--primario);
}

/* Il numero accanto alla voce e' un tassello azzurro, come nella proposta A;
   sulla voce attiva si fa un gradino piu' pieno. */
.barra__conta {
  flex-shrink: 0;
  min-width: 24px;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--petrolio-100);
  font-size: 0.71875rem;
  font-weight: 600;
  color: var(--petrolio-700);
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.barra__voce--attiva .barra__conta:not(.barra__conta--in-corso) {
  background: var(--petrolio-200);
  color: var(--primario);
}

.barra__conta[hidden] {
  display: none;
}

/* «In corso» e' un fatto che si muove: il colore della logistica, col punto. */
.barra__conta--in-corso {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--info-fondo);
  color: var(--info);
  font-size: 0.6875rem;
  white-space: nowrap;
}

.barra__conta--in-corso::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--info-pieno);
}

.barra__piede {
  padding: 12px 14px 16px 22px;
  border-top: 1px solid rgba(13, 58, 92, 0.09);
  display: flex;
  align-items: center;
  gap: 11px;
  flex-shrink: 0;
}

.barra__avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--grad-profondo);
  color: #fff;
  display: grid;
  place-items: center;
  font-family: var(--font-titoli);
  font-weight: 700;
  font-size: 0.75rem;
  flex-shrink: 0;
}

.barra__utente {
  flex: 1;
  min-width: 0;
  font-size: 0.8125rem;
  line-height: 1.3;
}

.barra__utente strong {
  display: block;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.barra__utente small {
  color: var(--testo-su-barra);
  font-size: 0.71875rem;
}

.barra__esci {
  background: none;
  border: none;
  color: var(--testo-tenue);
  padding: var(--sp-2);
  border-radius: var(--raggio-s);
  cursor: pointer;
  transition: var(--transizione);
}

.barra__esci:hover {
  background: rgba(208, 233, 246, 0.6);
  color: var(--testo-forte);
}

/* --- Area principale ----------------------------------------------------- */

.principale {
  flex: 1;
  min-width: 0;
  margin-left: calc(var(--larghezza-barra) + 2 * var(--margine-barra));
  display: flex;
  flex-direction: column;
}

/* La testata e' vetro sfocato appena tinto d'azzurro, senza bordo: la
   pagina le scorre sotto e si intravede. */
.testata {
  height: var(--altezza-testata);
  background: rgba(243, 248, 252, 0.74);
  -webkit-backdrop-filter: var(--sfocatura);
  backdrop-filter: var(--sfocatura);
  box-shadow: 0 1px 0 rgba(13, 58, 92, 0.06);
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  /* 32 e non 48: il menu galleggia e si prende 32 pixel di margine, che qui
     si restituiscono, cosi' le tabelle hanno la larghezza di prima. */
  padding: 0 32px;
  position: sticky;
  top: 0;
  z-index: 1020;
}

.testata__briciole {
  font-size: 0.84375rem;
  color: var(--testo-tenue);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  min-width: 0;
}

.testata__briciole strong {
  color: var(--testo-titoli);
  font-weight: 600;
}

.testata__ricerca {
  margin-left: auto;
  position: relative;
  width: min(360px, 40vw);
}

/* La ricerca e' una pillola di vetro, come nella proposta A. */
.testata__ricerca input {
  width: 100%;
  height: 40px;
  padding: 0 var(--sp-4) 0 2.5rem;
  border: 1px solid rgba(13, 58, 92, 0.1);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.78);
  box-shadow: var(--ombra-s);
  font-size: 0.84375rem;
  font-family: inherit;
  color: var(--testo);
  transition: var(--transizione);
}

.testata__ricerca input:focus {
  outline: none;
  border-color: var(--petrolio-600);
  background: var(--superficie);
  box-shadow: var(--anello-focus);
}

/* Solo la lente, figlia diretta: i suggerimenti stanno dentro lo stesso
   riquadro, e con `.testata__ricerca i` le loro icone finivano tutte a meta'
   altezza del pannello, sul bordo sinistro (08/10/2026). */
.testata__ricerca > i {
  position: absolute;
  left: var(--sp-4);
  top: 50%;
  transform: translateY(-50%);
  color: var(--testo-tenue);
  font-size: 0.9375rem;
  pointer-events: none;
}

.apri-barra {
  display: none;
  background: none;
  border: none;
  font-size: 1.375rem;
  color: var(--testo-medio);
  cursor: pointer;
  padding: var(--sp-2);
}

/* --- Chi lavora da una pagina sola: l'autista dal telefono ----------------
   Niente barra laterale e niente ricerca in tutto il gestionale: la testata
   porta il marchio, chi e' entrato e il bottone per uscire (app.js). */

.pagina-sola .barra,
.pagina-sola .velo {
  display: none !important;
}

/* Dal telefono la pagina non scorre di lato, nemmeno se un elemento esce di
   qualche pixel: si taglia, invece di far scivolare tutto il modulo mentre
   si scrive (12/10/2026). `clip` e non `hidden`: non crea un contenitore che
   scorre, e la barra dei passi resta attaccata in fondo. */
html.pagina-sola,
html.pagina-sola body {
  overflow-x: clip;
}

.pagina-sola .principale {
  margin-left: 0;
}

/* Una colonna da telefono anche sullo schermo grande. */
.pagina-sola .contenuto {
  width: 100%;
  max-width: 880px;
  margin: 0 auto;
}

/* Tranne gli elenchi: il commerciale lavora da «Richieste di ritiro» anche
   dal computer, e la tabella vuole tutta la larghezza; dal telefono la
   pagina diventa a schede da se' (14/10/2026). */
.pagina-sola .contenuto--largo {
  max-width: 1600px;
}

/* E la nuova richiesta: a 880px, con la colonna dei passi accanto, il passo
   restava di 490px, con lo schermo vuoto ai lati (16/10/2026, Dania:
   «allargare un po' orizzontalmente la scheda di inserimento dati»). */
.pagina-sola .contenuto--modulo {
  max-width: 1200px;
}

/* La testata e' vetro chiaro, da bordo a bordo, come il menu: il logo blu
   ci sta sopra da solo, e chi e' entrato sta in una pillola a destra
   (09/10/2026; con la proposta A il petrolio pieno e' diventato vetro). */
.pagina-sola .testata {
  background: rgba(255, 255, 255, 0.8);
  border-bottom: 0;
  box-shadow: var(--ombra-s), 0 1px 0 rgba(13, 58, 92, 0.06);
  color: var(--testo);
}

.pagina-sola .testata__briciole {
  color: var(--testo-tenue);
}

.pagina-sola .testata__briciole strong {
  color: var(--testo-titoli);
}

/* Il marchio sta nel foglio di stile e non nella pagina: c'e' dal primo
   istante, quando la pagina sa gia' di essere sola (app.js). Menu e
   ricerca, che app.js poi toglie, intanto non si vedono. */
.pagina-sola .testata::before {
  content: "";
  display: block;
  width: 128px;
  height: 40px;
  flex-shrink: 0;
  background: url("../img/logo-giorgi.svg") left center / contain no-repeat;
}

.pagina-sola .apri-barra,
.pagina-sola .testata__ricerca {
  display: none;
}

/* La pillola: chi e' entrato e, in fondo, il bottone per uscire, su un
   vetro bianco col suo anello. */
.testata__utente {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  margin-left: auto;
  padding: 3px 3px 3px 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.85);
  box-shadow: var(--ombra-s), var(--anello);
}

.testata__avatar {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--grad-profondo);
  color: #fff;
  font-family: var(--font-titoli);
  font-size: 0.75rem;
  font-weight: 700;
}

.testata__chi {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.25;
}

.testata__chi strong {
  overflow: hidden;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--testo-titoli);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.testata__chi small {
  font-size: 0.75rem;
  color: var(--testo-tenue);
  white-space: nowrap;
}

.testata__esci {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  border: 0;
  border-radius: 50%;
  background: var(--petrolio-50);
  font-size: 1.0625rem;
  color: var(--primario);
  cursor: pointer;
  transition: var(--transizione);
}

.testata__esci:hover {
  background: var(--petrolio-100);
  color: var(--primario-scuro);
}

.testata__esci:focus-visible {
  outline: 2px solid var(--accento);
  outline-offset: 2px;
}

/* Sul telefono il nome della pagina e' gia' il titolo, subito sotto. */
@media (max-width: 600px) {
  .pagina-sola .testata__briciole {
    display: none;
  }
}

.contenuto {
  flex: 1;
  padding: 36px 32px 48px;
  max-width: 1600px;
  width: 100%;
  /* La pagina entra in dissolvenza, senza spostarsi: niente transform su un
     antenato di finestre e intestazioni appiccicose. */
  animation: entra-pagina var(--durata-entrata) var(--curva) both;
}

@keyframes entra-pagina {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Il simbolo del marchio, sfumato, dietro la testa della pagina: l'alone di
   «Emanazione» della proposta A. E' lo sfondo dell'area dei contenuti, non
   un elemento sopra: non copre niente, non cambia l'ordine dei livelli e
   scorre con la pagina. Solo dove accanto al titolo c'e' spazio. */
@media (min-width: 1025px) {
  .contenuto {
    background: url("../img/simbolo-giorgi-alone.svg") no-repeat right 3% top -40px / 300px auto;
  }

  /* Nella colonna sola il simbolo cadrebbe dietro il bottone e le linguette,
     tagliato a meta': li' non c'e'. */
  .pagina-sola .contenuto {
    background: none;
  }
}

/* ==========================================================================
   Intestazione di pagina
   ========================================================================== */

/* La testa della pagina: il titolo con i bottoni accanto, e sotto il
   sottotitolo su tutta la larghezza (13/10/2026). Prima titolo e sottotitolo
   stavano in una colonna accanto ai bottoni: il sottotitolo andava a capo a
   meta' schermo, con lo spazio libero sopra i bottoni. Ora la colonna del
   testo si scioglie (`display: contents`) e titolo, bottoni e sottotitolo
   sono elementi della testa: i bottoni stanno accanto al titolo se c'e'
   posto, se no scendono sotto; il sottotitolo prende sempre una riga
   intera. Vale anche per le pagine scritte con `.intestazione`. */
.pagina-testa,
.intestazione {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: var(--sp-4);
  row-gap: 6px;
  margin-bottom: 28px;
}

.pagina-testa__testo,
.intestazione > div:first-child {
  display: contents;
}

/* Sotto il titolo, a tutta riga: il sottotitolo e gli avvisi che lo seguono. */
.pagina-testa__testo > *,
.intestazione > div:first-child > * {
  order: 3;
  flex: 1 0 100%;
}

/* Il titolo della pagina e' il punto piu' grande dello schermo: largo,
   pesante, stretto di spaziatura. Sta su una riga finche' la finestra lo
   permette. */
.pagina-testa__testo > h1,
.intestazione > div:first-child > .intestazione__titolo {
  order: 1;
  flex: 1 1 auto;
  font-size: clamp(1.75rem, 1.15rem + 1.5vw, 2.5rem);
  line-height: 1.04;
}

.pagina-testa__sottotitolo,
.intestazione__sottotitolo {
  margin: 0;
  font-size: 0.9375rem;
  color: var(--testo-medio);
}

.pagina-testa__azioni,
.intestazione__azioni {
  order: 2;
  margin-left: auto;
  display: flex;
  gap: var(--sp-2);
  flex-wrap: wrap;
}

/* ==========================================================================
   Superfici
   ========================================================================== */

/* Le schede sono vetro: bianco al 76% sopra il fondo sfumato. Senza
   sfocatura, di proposito: un `backdrop-filter` qui farebbe della scheda il
   riferimento delle finestre e dei menu `position: fixed` che contiene. */
.scheda {
  background: var(--vetro);
  border-radius: var(--raggio-l);
  box-shadow: var(--ombra-scheda), inset 0 0 0 1px var(--vetro-bordo);
}

/* La testa non e' piu' separata dal corpo da un filetto: il titolo apre la
   superficie, e l'aria fra le due fa il resto. */
.scheda__testa {
  padding: 22px 24px 14px;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
}

.scheda__testa h2,
.scheda__titolo {
  font-family: var(--font-titoli);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: -0.015em;
  color: var(--testo-titoli);
  margin: 0;
}

.scheda__sottotitolo {
  font-size: 0.8125rem;
  color: var(--testo-tenue);
  margin: 3px 0 0;
}

.scheda__corpo {
  padding: 24px;
}

.scheda__testa + .scheda__corpo {
  padding-top: 6px;
}

.scheda__corpo--stretto {
  padding: var(--sp-4);
}

/* Una riga di spiegazione sotto una tabella, dentro la scheda. */
.scheda__nota {
  margin: 0;
  padding: 14px 24px 18px;
  font-size: 0.8125rem;
  color: var(--testo-tenue);
  border-top: 1px solid var(--bordo-tenue);
}

.griglia {
  display: grid;
  gap: var(--sp-4);
}

.griglia--2 {
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}
.griglia--3 {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.griglia--4 {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

/* ==========================================================================
   Contatori: numero grande, sempre apribile
   ========================================================================== */

.contatore {
  background: var(--vetro);
  border-radius: var(--raggio);
  padding: 18px 20px;
  box-shadow: var(--ombra-scheda), inset 0 0 0 1px var(--vetro-bordo);
  display: flex;
  flex-direction: column;
  gap: 4px;
  color: inherit;
  transition: var(--transizione);
  position: relative;
  overflow: hidden;
}

a.contatore:hover {
  text-decoration: none;
  background: var(--vetro-forte);
  box-shadow: var(--ombra-s), var(--anello), var(--ombra-l);
  transform: translateY(-2px);
}

/* Il tono e' un punto accanto all'etichetta, non una fascia sul bordo:
   il numero, colorato, resta l'informazione. */
.contatore::before {
  content: "";
  position: absolute;
  top: 22px;
  right: 20px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--neutro-pieno);
}

.contatore--successo::before {
  background: var(--successo-pieno);
}
.contatore--attenzione::before {
  background: var(--attenzione-pieno);
}
.contatore--errore::before {
  background: var(--errore-pieno);
}
.contatore--info::before {
  background: var(--info-pieno);
}

.contatore__etichetta {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--testo-medio);
}

.contatore__valore {
  font-family: var(--font-titoli);
  font-stretch: var(--largo);
  font-size: 2rem;
  font-weight: 700;
  color: var(--testo-titoli);
  letter-spacing: -0.03em;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.contatore--successo .contatore__valore {
  color: var(--successo);
}

/* Un importo negativo che e' un risparmio, in una colonna di extra costi. */
.cifra--risparmio {
  color: var(--successo);
}
.contatore--attenzione .contatore__valore {
  color: var(--attenzione);
}
.contatore--errore .contatore__valore {
  color: var(--errore);
}
.contatore--info .contatore__valore {
  color: var(--info);
}

.contatore__nota {
  font-size: 0.75rem;
  color: var(--testo-tenue);
  margin-top: var(--sp-2);
  padding-top: var(--sp-2);
  border-top: 1px solid var(--bordo);
}

/* ==========================================================================
   Pastiglie e badge
   ========================================================================== */

.pastiglia {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.625rem;
  border-radius: 999px;
  font-size: 0.78125rem;
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
  background: var(--neutro-fondo);
  color: var(--neutro);
}

.pastiglia--successo {
  background: var(--successo-fondo);
  color: var(--successo);
}
.pastiglia--attenzione {
  background: var(--attenzione-fondo);
  color: var(--attenzione);
}
.pastiglia--errore {
  background: var(--errore-fondo);
  color: var(--errore);
}
.pastiglia--info {
  background: var(--info-fondo);
  color: var(--info);
}
.pastiglia--neutro {
  background: var(--neutro-fondo);
  color: var(--neutro);
}

.pastiglia__punto {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}

/* Un vincolo di legge (sicurezza, dato personale, non rivendibile): un
   contorno blu, distinto dalle pastiglie piene degli stati. Era viola,
   fuori dalla palette del marchio. */
.pastiglia--normativa {
  background: var(--superficie);
  color: var(--petrolio-800);
  box-shadow: inset 0 0 0 1px var(--petrolio-300);
}

/* ==========================================================================
   Tabelle: arricchite, mai piatte
   ========================================================================== */

.tabella-guscio {
  overflow-x: auto;
  border-radius: var(--raggio);
}

/* Una tabella piu' larga della sua scheda scorre di lato, e la sua barra di
   scorrimento sta in fondo, lontana da chi legge le prime righe: come nella
   barra laterale, sfuma il bordo da cui la tabella continua. Le classi le
   mette `app.js`; una tabella che ci sta non ha nessuna maschera. */
.tabella-guscio--sinistra,
.tabella-guscio--destra {
  --guscio-sfuma-sinistra: 0px;
  --guscio-sfuma-destra: 0px;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--guscio-sfuma-sinistra), #000 calc(100% - var(--guscio-sfuma-destra)), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 var(--guscio-sfuma-sinistra), #000 calc(100% - var(--guscio-sfuma-destra)), transparent 100%);
}

.tabella-guscio--sinistra {
  --guscio-sfuma-sinistra: 40px;
}

.tabella-guscio--destra {
  --guscio-sfuma-destra: 64px;
}

/* Una colonna che scorre per conto suo, dentro una pagina che scorre: come
   la barra laterale, niente barra di scorrimento, e sfuma il bordo da cui
   continua. Le classi le mette `app.js`; l'altezza la decide chi la usa. */
.colonna-scorrevole {
  overflow-y: auto;
  scrollbar-width: none;
  /* Un campo raggiunto con il tasto Tab non si ferma dentro la dissolvenza. */
  scroll-padding-block: 32px 48px;
}

.colonna-scorrevole::-webkit-scrollbar {
  display: none;
}

.colonna-scorrevole--sopra,
.colonna-scorrevole--sotto {
  --colonna-sfuma-sopra: 0px;
  --colonna-sfuma-sotto: 0px;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 var(--colonna-sfuma-sopra), #000 calc(100% - var(--colonna-sfuma-sotto)), transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 var(--colonna-sfuma-sopra), #000 calc(100% - var(--colonna-sfuma-sotto)), transparent 100%);
}

.colonna-scorrevole--sopra {
  --colonna-sfuma-sopra: 32px;
}

.colonna-scorrevole--sotto {
  --colonna-sfuma-sotto: 48px;
}

.tabella {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

/* Le intestazioni sono un'etichetta piccola in maiuscolo, a spaziatura
   aperta: danno il ritmo alla tabella senza competere coi dati. In
   maiuscolo una parola e' piu' larga: la spaziatura resta sotto quella
   delle altre etichette e le celle hanno 12px di lato invece di 16, se no
   le tabelle a molte colonne numeriche (dove la larghezza la fa
   l'intestazione) scorrevano di lato a 1366px. */
.tabella thead th {
  background: var(--superficie-alt);
  border-bottom: 1px solid var(--bordo-tenue);
  padding: var(--sp-3);
  text-align: left;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--testo-tenue);
  white-space: nowrap;
  position: sticky;
  top: 0;
  z-index: 1;
}

/* Un'intestazione che ordina l'elenco: la freccia piena dice per cosa e in
   che verso. */
.ordinabile {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: inherit;
  cursor: pointer;
}

.ordinabile i {
  opacity: 0.4;
}

.ordinabile--attivo {
  color: var(--primario);
}

.ordinabile--attivo i {
  opacity: 1;
}

.ordinabile:focus-visible {
  outline: 2px solid var(--primario);
  outline-offset: 2px;
  border-radius: 2px;
}

.tabella tbody td {
  padding: 13px var(--sp-3);
  border-bottom: 1px solid var(--bordo-tenue);
  vertical-align: middle;
}

.tabella tbody tr:last-child td {
  border-bottom: none;
}

.tabella tbody tr {
  transition: background var(--transizione);
}

.tabella tbody tr:hover {
  background: rgba(208, 233, 246, 0.42);
}

.tabella tbody tr.cliccabile {
  cursor: pointer;
}

.tabella__num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* L'intestazione di una colonna di numeri sta sopra i numeri, a destra
   (15/10/2026): la regola delle intestazioni la teneva a sinistra, e in
   «Attività e fasi» «Posti» non stava sopra il suo numero. */
.tabella thead th.tabella__num {
  text-align: right;
}

.tabella__principale {
  font-weight: 500;
}

/* Le automazioni spente: il motivo sotto la descrizione, e la riga piu'
   tenue (16/10/2026). */
.automazione__perche {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin-top: 6px;
  font-size: 0.8125rem;
  color: var(--testo-medio);
}

.automazione__perche .bi {
  margin-top: 2px;
}

.automazione--spenta .tabella__principale {
  color: var(--testo-medio);
}

.tabella__secondario {
  font-size: 0.8125rem;
  color: var(--testo-tenue);
}

/* Un elenco da scorrere con l'occhio: ogni riga sta su una riga, e la
   tabella scorre di lato se non ci sta (13/10/2026, le pagine
   dell'anagrafica). Sul telefono le righe diventano schede e vanno a capo. */
@media (min-width: 641px) {
  .tabella--una-riga tbody td {
    white-space: nowrap;
  }

  /* La colonna che puo' andare a capo quando la riga non ci sta: un nome
     molto lungo, non le cifre accanto. */
  .tabella--una-riga tbody td.tabella__a-capo {
    white-space: normal;
  }
}

/* ==========================================================================
   Bottoni
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.5625rem 1rem;
  border-radius: var(--raggio-s);
  border: 1px solid transparent;
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.4;
  cursor: pointer;
  transition: background-color var(--transizione), border-color var(--transizione),
    box-shadow var(--transizione), color var(--transizione), transform 120ms var(--curva);
  white-space: nowrap;
  text-decoration: none;
}

.btn:hover {
  text-decoration: none;
}

/* Premuto, il bottone cede appena: si sente il tocco anche senza suono. */
.btn:active:not(:disabled) {
  transform: scale(0.97);
}

.btn:focus-visible {
  outline: none;
  box-shadow: var(--anello-focus);
}

.btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* L'azione principale della pagina e' Blu Materia col testo bianco (8,9:1),
   come vuole il brand book: una per schermata, ed e' l'unico blu pieno. */
.btn--primario {
  background: var(--primario);
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 8px 18px -10px rgba(2, 76, 123, 0.7);
}

.btn--primario:hover:not(:disabled) {
  background: var(--primario-scuro);
  color: #fff;
}

/* Il secondario e' vetro bianco con un contorno azzurro e il testo Blu
   Materia: si legge come bottone accanto al pieno, senza fargli concorrenza. */
.btn--secondario {
  background: rgba(255, 255, 255, 0.78);
  border-color: rgba(2, 76, 123, 0.28);
  color: var(--primario);
  box-shadow: var(--ombra-s);
}

.btn--secondario:hover:not(:disabled) {
  background: #fff;
  border-color: rgba(2, 76, 123, 0.5);
  color: var(--primario-scuro);
}

/* Il bottone senza fondo ha il colore delle azioni: si riconosce come
   cliccabile anche senza bordo. */
.btn--tenue {
  background: transparent;
  color: var(--primario);
}

.btn--tenue:hover:not(:disabled) {
  background: var(--petrolio-100);
  color: var(--primario-scuro);
}

.btn--pericolo {
  background: var(--errore);
  color: #fff;
}

.btn--pericolo-tenue {
  background: transparent;
  color: var(--errore);
}

.btn--pericolo-tenue:hover:not(:disabled) {
  background: var(--errore-fondo);
  color: var(--errore);
}

.btn--piccolo {
  padding: 0.375rem 0.75rem;
  font-size: 0.8125rem;
  border-radius: var(--raggio-s);
}

/* Le azioni primarie di officina hanno bersagli grandi: si usano coi guanti. */
.btn--grande,
.contesto-officina .btn {
  min-height: 48px;
  padding: 0.75rem 1.25rem;
  font-size: 1rem;
}

/* ==========================================================================
   Form
   ========================================================================== */

.campo {
  margin-bottom: var(--sp-4);
}

.campo__etichetta {
  display: block;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--ardesia-700);
  margin-bottom: 0.375rem;
}

.campo__aiuto {
  font-size: 0.75rem;
  color: var(--testo-tenue);
  margin-top: 0.25rem;
  /* Spesso e' un paragrafo: senza, eredita il margine di Bootstrap e sotto
     ogni aiuto resta un buco. */
  margin-bottom: 0;
}

.campo__errore {
  font-size: 0.75rem;
  color: var(--errore);
  margin-top: 0.25rem;
}

/* Il contorno del campo arriva a 3:1 sul bianco: si vede dove scrivere anche
   senza il fondo grigio. */
.campo input,
.campo select,
.campo textarea {
  width: 100%;
  padding: 0.5rem var(--sp-3);
  border: 1px solid var(--bordo-campo);
  border-radius: var(--raggio-s);
  font-family: inherit;
  font-size: 0.9375rem;
  color: var(--testo);
  background: var(--superficie);
  transition: var(--transizione);
}

.campo input:hover:not(:disabled):not(:focus),
.campo select:hover:not(:disabled):not(:focus),
.campo textarea:hover:not(:disabled):not(:focus) {
  border-color: var(--ardesia-500);
}

.campo input:focus,
.campo select:focus,
.campo textarea:focus {
  outline: none;
  border-color: var(--petrolio-600);
  box-shadow: var(--anello-focus);
}

.campo input:disabled {
  background: var(--fondo-alt);
  color: var(--testo-tenue);
}

.campo--errore input,
.campo--errore select,
.campo--errore textarea {
  border-color: var(--errore);
}

.campo--errore input:focus,
.campo--errore select:focus,
.campo--errore textarea:focus {
  border-color: var(--errore);
  box-shadow: 0 0 0 3px rgba(214, 71, 79, 0.2);
}

.campo--errore .campo__etichetta {
  color: var(--errore);
}

/* L'asterisco dei campi obbligatori ha il rosso dell'errore: e' la stessa
   informazione, vista prima invece che dopo. */
.obbligatorio {
  color: var(--errore);
  font-weight: 600;
  margin-left: 1px;
}

.contesto-officina .campo input,
.contesto-officina .campo select {
  min-height: 48px;
  font-size: 1.0625rem;
}

/* ==========================================================================
   Avvisi
   ========================================================================== */

.avviso {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: 14px 16px;
  border-radius: var(--raggio);
  border: 1px solid var(--neutro-bordo);
  background: var(--neutro-fondo);
  color: var(--testo-forte);
  font-size: 0.875rem;
  margin-bottom: var(--sp-4);
}

.avviso--successo {
  border-color: var(--successo-bordo);
  background: var(--successo-fondo);
  color: var(--successo);
}
.avviso--attenzione {
  border-color: var(--attenzione-bordo);
  background: var(--attenzione-fondo);
  color: var(--attenzione);
}
.avviso--errore {
  border-color: var(--errore-bordo);
  background: var(--errore-fondo);
  color: var(--errore);
}
.avviso--info {
  border-color: var(--info-bordo);
  background: var(--info-fondo);
  color: var(--info);
}

.avviso i {
  flex-shrink: 0;
  font-size: 1rem;
  margin-top: 1px;
}

/* ==========================================================================
   Stati vuoti e caricamento — progettati, non pagine bianche
   ========================================================================== */

.vuoto {
  text-align: center;
  padding: var(--sp-7) var(--sp-5);
  color: var(--testo-tenue);
}

.vuoto__icona {
  font-size: 2.5rem;
  color: var(--bordo-forte);
  margin-bottom: var(--sp-3);
}

.vuoto__titolo {
  font-family: var(--font-titoli);
  font-size: 1rem;
  font-weight: 600;
  color: var(--testo-medio);
  margin-bottom: var(--sp-2);
}

.vuoto__testo {
  font-size: 0.875rem;
  max-width: 42ch;
  margin: 0 auto var(--sp-4);
}

.scheletro {
  background: linear-gradient(
    90deg,
    var(--fondo-alt) 25%,
    var(--superficie-alt) 50%,
    var(--fondo-alt) 75%
  );
  background-size: 200% 100%;
  animation: scorrimento 1.4s infinite;
  border-radius: var(--raggio-s);
  height: 1rem;
}

.scheletro--riga {
  height: 2.75rem;
  margin-bottom: var(--sp-2);
}

@keyframes scorrimento {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .scheletro {
    animation: none;
  }
  * {
    transition: none !important;
  }
}

/* ==========================================================================
   Orologi di legge — il colore accompagna sempre il numero
   ========================================================================== */

.orologio {
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
  padding: var(--sp-4);
  background: var(--superficie);
  position: relative;
  overflow: hidden;
}

.orologio::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--neutro);
}

.orologio--successo::before {
  background: var(--successo);
}
.orologio--attenzione::before {
  background: var(--attenzione);
}
.orologio--errore::before {
  background: var(--errore);
}
.orologio--info::before {
  background: var(--info);
}

.orologio__nome {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--testo-medio);
}

.orologio__giorni {
  color: var(--testo-titoli);
  font-family: var(--font-titoli);
  font-size: 1.625rem;
  font-weight: 600;
  line-height: 1.15;
  margin: var(--sp-2) 0 0;
  font-variant-numeric: tabular-nums;
}

.orologio__unita {
  font-size: 0.8125rem;
  font-weight: 400;
  color: var(--testo-tenue);
}

.orologio__nota {
  font-size: 0.75rem;
  color: var(--testo-tenue);
  margin-top: var(--sp-2);
}

/* ==========================================================================
   Cronologia degli eventi
   ========================================================================== */

.cronologia {
  position: relative;
  padding-left: var(--sp-5);
}

.cronologia::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 6px;
  bottom: 6px;
  width: 1px;
  background: var(--bordo);
}

.cronologia__voce {
  position: relative;
  padding-bottom: var(--sp-4);
}

.cronologia__voce:last-child {
  padding-bottom: 0;
}

.cronologia__punto {
  position: absolute;
  left: calc(-1 * var(--sp-5) + 1px);
  top: 6px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--petrolio-600);
  box-shadow: 0 0 0 3px var(--petrolio-100);
}

.cronologia__voce--automatico .cronologia__punto {
  background: var(--testo-tenue);
}

.cronologia__istante {
  font-size: 0.75rem;
  color: var(--testo-tenue);
  font-variant-numeric: tabular-nums;
}

.cronologia__titolo {
  font-size: 0.875rem;
  font-weight: 500;
}

.cronologia__dettaglio {
  font-size: 0.8125rem;
  color: var(--testo-medio);
  margin-top: 2px;
}

/* ==========================================================================
   Coppie etichetta/valore
   ========================================================================== */

.dati {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--sp-4) var(--sp-5);
}

/* Etichette in tondo minuscolo, non in maiuscoletto spaziato: si leggono
   prima, e lasciano al valore il peso. */
.dato__etichetta {
  font-size: 0.78125rem;
  color: var(--testo-tenue);
  margin-bottom: 3px;
}

.dato__valore {
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--testo);
}

.dato__valore--assente {
  color: var(--testo-tenue);
  font-style: italic;
}

.dato__fonte {
  font-size: 0.6875rem;
  color: var(--testo-tenue);
  margin-top: 2px;
}

/* Il modulo di cilindrata e codice motore, aperto sopra i dati del veicolo:
   separato da quello che correggerà, non incollato. */
.dati-tecnici {
  margin-bottom: var(--sp-5);
  padding-bottom: var(--sp-5);
  border-bottom: 1px solid var(--bordo);
}

/* ==========================================================================
   Schede a linguette
   ========================================================================== */

/* Le linguette si vedono tutte: se non stanno in una riga vanno a capo, non
   scorrono. La linea di base e' un'ombra interna e non un bordo, cosi' la
   linguetta attiva la copre senza scendere di un pixel: prima quel pixel
   sporgeva, e il contenitore scorrevole mostrava le freccette della barra
   di scorrimento accanto all'ultima linguetta. */
.linguette {
  display: flex;
  flex-wrap: wrap;
  gap: 0 24px;
  box-shadow: inset 0 -1px 0 var(--bordo);
  margin-bottom: var(--sp-5);
}

.linguetta {
  padding: 12px 2px;
  border: none;
  background: none;
  font-family: inherit;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--testo-medio);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  transition: var(--transizione);
}

.linguetta:hover {
  color: var(--testo);
}

/* Una linguetta puo' essere anche un collegamento a una pagina sorella:
   Lavorazioni e Anomalie sono due pagine dietro una voce sola. */
a.linguetta,
a.linguetta:hover {
  text-decoration: none;
}

.linguetta--attiva {
  color: var(--primario-scuro);
  font-weight: 600;
  border-bottom-color: var(--primario);
}

/* ==========================================================================
   Paginazione
   ========================================================================== */

.paginazione {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-top: 1px solid var(--bordo);
  font-size: 0.8125rem;
  color: var(--testo-tenue);
  flex-wrap: wrap;
}

.paginazione__controlli {
  margin-left: auto;
  display: flex;
  gap: var(--sp-2);
  align-items: center;
}

/* ==========================================================================
   Notifiche temporanee
   ========================================================================== */

.notifiche {
  position: fixed;
  bottom: var(--sp-5);
  right: var(--sp-5);
  z-index: 2000;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  max-width: min(400px, calc(100vw - 2rem));
}

.notifica {
  background: var(--superficie);
  border: 1px solid var(--bordo);
  border-left: 3px solid var(--blu-500);
  border-radius: var(--raggio-s);
  box-shadow: var(--ombra-l);
  padding: var(--sp-3) var(--sp-4);
  font-size: 0.875rem;
  display: flex;
  gap: var(--sp-3);
  animation: entra 200ms ease;
}

.notifica--successo {
  border-left-color: var(--successo);
}
.notifica--errore {
  border-left-color: var(--errore);
}
.notifica--attenzione {
  border-left-color: var(--attenzione);
}

@keyframes entra {
  from {
    opacity: 0;
    transform: translateX(1rem);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* ==========================================================================
   Pagina di accesso
   ========================================================================== */

/* L'accesso e' la prima cosa che si vede: il fondo sfumato della pagina e
   una scheda di vetro chiaro col logo blu, grande. */
.accesso {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: var(--sp-5);
}

/* Il simbolo del marchio sfumato, come dietro la testa delle pagine
   (15/10/2026), ma grande: parte dall'alto, passa dietro la meta' destra
   della scheda e finisce un po' sotto il suo bordo in basso. Si misura dal
   centro della pagina, dove sta la scheda, cosi' resta uguale a ogni
   larghezza. La sfumatura e' piu' corta di quella delle pagine
   (`simbolo-giorgi-accesso.svg`): il simbolo si vede quasi fino in fondo.
   Sul telefono la scheda prende quasi tutta la larghezza: li' non c'e'. */
@media (min-width: 720px) {
  .accesso {
    position: relative;
    overflow: hidden;
  }

  .accesso::before {
    --alto-simbolo: calc(50vh + 420px);
    content: "";
    position: absolute;
    top: -40px;
    left: calc(50% - 60px);
    height: var(--alto-simbolo);
    width: calc(var(--alto-simbolo) * 0.8633);
    background: url("../img/simbolo-giorgi-accesso.svg") no-repeat left top / contain;
    pointer-events: none;
  }

  /* La scheda sta sopra il simbolo, che si intravede dal vetro. */
  .accesso__scheda {
    position: relative;
  }
}

.accesso__scheda {
  width: 100%;
  max-width: 400px;
  background: var(--vetro-forte);
  -webkit-backdrop-filter: var(--sfocatura);
  backdrop-filter: var(--sfocatura);
  border-radius: var(--raggio-xl);
  box-shadow: var(--ombra-l), inset 0 0 0 1px var(--vetro-bordo);
  padding: var(--sp-6);
  color: var(--testo);
}

.accesso__marchio .barra__logo {
  height: 72px;
  max-width: 230px;
}

.accesso__marchio {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-6);
}

.accesso__titolo {
  font-family: var(--font-titoli);
  font-stretch: var(--largo);
  font-size: 1.375rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--testo-titoli);
  margin: 0 0 var(--sp-1);
}

.accesso__sottotitolo {
  font-size: 0.8125rem;
  color: var(--testo-tenue);
  margin-bottom: var(--sp-5);
}

.accesso .btn--primario {
  width: 100%;
  min-height: 44px;
}

.accesso__nota {
  margin-top: var(--sp-5);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--bordo-tenue);
  font-size: 0.75rem;
  color: var(--testo-tenue);
  line-height: 1.6;
}

/* ==========================================================================
   Risultati della ricerca globale
   ========================================================================== */

.risultati {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  background: var(--superficie);
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
  box-shadow: var(--ombra-l);
  max-height: 60vh;
  overflow-y: auto;
  z-index: 1050;
}

.risultato {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--bordo);
  color: inherit;
}

.risultato:last-child {
  border-bottom: none;
}

.risultato:hover {
  background: var(--superficie-alt);
  text-decoration: none;
  color: inherit;
}

.risultato__icona {
  width: 32px;
  height: 32px;
  border-radius: var(--raggio-s);
  background: var(--blu-100);
  color: var(--blu-600);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.risultato__testo {
  flex: 1;
  min-width: 0;
}

.risultato__titolo {
  font-weight: 600;
  font-size: 0.875rem;
}

.risultato__sotto {
  font-size: 0.8125rem;
  color: var(--testo-tenue);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ==========================================================================
   Barra di avanzamento
   ========================================================================== */

.avanzamento {
  height: 6px;
  background: var(--fondo-alt);
  border-radius: 999px;
  overflow: hidden;
}

.avanzamento__riempimento {
  height: 100%;
  background: var(--blu-500);
  border-radius: 999px;
  transition: width 300ms ease;
}

.avanzamento__riempimento--successo {
  background: var(--successo);
}
.avanzamento__riempimento--attenzione {
  background: var(--attenzione);
}
.avanzamento__riempimento--errore {
  background: var(--errore);
}

/* ==========================================================================
   Utilita'
   ========================================================================== */

.flex {
  display: flex;
}
.flex-col {
  flex-direction: column;
}
.items-center {
  align-items: center;
}
.items-end {
  align-items: flex-end;
}
.justify-between {
  justify-content: space-between;
}
.gap-1 {
  gap: var(--sp-1);
}
.gap-2 {
  gap: var(--sp-2);
}
.gap-3 {
  gap: var(--sp-3);
}
.gap-4 {
  gap: var(--sp-4);
}
.mt-2 {
  margin-top: var(--sp-2);
}
.mt-4 {
  margin-top: var(--sp-4);
}
.mt-5 {
  margin-top: var(--sp-5);
}
.mb-4 {
  margin-bottom: var(--sp-4);
}
.mb-5 {
  margin-bottom: var(--sp-5);
}
.ml-auto {
  margin-left: auto;
}
.wrap {
  flex-wrap: wrap;
}
.tenue {
  color: var(--testo-tenue);
}
.medio {
  color: var(--testo-medio);
}
.piccolo {
  font-size: 0.8125rem;
}
.minuscolo {
  font-size: 0.75rem;
}
.grassetto {
  font-weight: 600;
}
.num {
  font-variant-numeric: tabular-nums;
}
.nascosto {
  display: none !important;
}
.tutta-larghezza {
  width: 100%;
}

/* ==========================================================================
   Contesto tabellone: leggibile da lontano, nessun nome personale
   ========================================================================== */

.contesto-tabellone {
  --font-size-base: 1.25rem;
  font-size: 1.25rem;
}

.contesto-tabellone .contatore__valore {
  font-size: 3.5rem;
}

.contesto-tabellone .tabella {
  font-size: 1.125rem;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1024px) {
  /* A cassetto la barra copre la pagina: il vetro lascerebbe trasparire il
     testo che c'e' sotto, quindi qui e' quasi pieno. Chiusa esce del tutto,
     anche del margine da cui galleggia. */
  .barra {
    transform: translateX(calc(-100% - 2 * var(--margine-barra)));
    background: rgba(255, 255, 255, 0.97);
  }

  .barra--aperta {
    transform: none;
    box-shadow: var(--ombra-l);
  }

  .principale {
    margin-left: 0;
  }

  .apri-barra {
    display: block;
  }

  .contenuto {
    padding: var(--sp-5) var(--sp-4) var(--sp-6);
  }

  .testata {
    padding: 0 var(--sp-4);
  }
}

@media (max-width: 640px) {
  .testata__ricerca {
    width: auto;
    flex: 1;
  }

  .pagina-testa__azioni,
  .intestazione__azioni {
    order: 4;
    width: 100%;
    margin: var(--sp-2) 0 0;
  }

  .pagina-testa__azioni .btn,
  .intestazione__azioni .btn {
    flex: 1;
    /* Su mobile ogni azione primaria e' toccabile col dito. */
    min-height: 48px;
  }

  /* Le tabelle diventano card verticali: piu' leggibili di uno scroll
     orizzontale su schermo stretto. */
  .tabella--responsive thead {
    display: none;
  }

  .tabella--responsive tbody tr {
    display: block;
    border: 1px solid var(--bordo);
    border-radius: var(--raggio);
    margin-bottom: var(--sp-3);
    padding: var(--sp-2);
    background: var(--superficie);
  }

  .tabella--responsive tbody td {
    display: flex;
    justify-content: space-between;
    gap: var(--sp-3);
    border: none;
    padding: var(--sp-2) var(--sp-3);
    text-align: right;
  }

  .tabella--responsive tbody td::before {
    content: attr(data-etichetta);
    font-size: 0.78125rem;
    color: var(--testo-tenue);
    text-align: left;
  }

  /* Nelle automazioni la prima cella e' il titolo della scheda: nome,
     descrizione e motivo uno sotto l'altro, senza etichetta accanto. */
  .tabella--responsive tbody td.automazione__cella {
    display: block;
    text-align: left;
  }

  .tabella--responsive tbody td.automazione__cella::before {
    content: none;
  }

  .griglia--4,
  .griglia--3 {
    grid-template-columns: 1fr;
  }
}

.velo {
  position: fixed;
  inset: 0;
  background: rgba(13, 58, 92, 0.3);
  z-index: 1030;
  display: none;
}

.velo--visibile {
  display: block;
}

@media (min-width: 1025px) {
  .velo {
    display: none !important;
  }
}

/* ==========================================================================
   Fase 2 — Acquisizione e logistica
   ========================================================================== */

/* Percorso guidato -------------------------------------------------------- */

/* L'elenco dei campi ancora da sistemare, sopra il percorso: si accorcia
   mentre li si completa e sparisce con l'ultimo. */
.da-completare a {
  color: inherit;
  font-weight: 600;
  text-decoration: underline;
}

.da-completare__passo {
  opacity: 0.8;
}

/* I dati da incollare sul sito di ACI, che non si lascia compilare da qui. */
.aiuto-aci {
  margin-top: var(--sp-3);
  padding: 14px 16px;
  border: 1px solid var(--petrolio-200);
  border-radius: var(--raggio);
  background: var(--petrolio-50);
}

.aiuto-aci__titolo {
  font-weight: 600;
  font-size: 0.875rem;
  margin: 0 0 var(--sp-2);
}

.aiuto-aci__dati {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--sp-2) var(--sp-4);
  align-items: center;
  margin: 0 0 var(--sp-3);
}

.aiuto-aci__dati dt {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--testo-medio);
}

.aiuto-aci__dati dd {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
}

.aiuto-aci__valore {
  font-family: var(--font-mono);
  font-size: 0.9375rem;
}

.aiuto-aci__nota {
  font-size: 0.8125rem;
  color: var(--testo-medio);
  margin: 0;
}

@media (max-width: 576px) {
  .aiuto-aci__dati {
    grid-template-columns: 1fr;
  }
}

.pannello {
  display: none;
}

.pannello--attivo {
  display: block;
}

/* Scelte a pastiglia ------------------------------------------------------ */

.scelte {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

.scelta {
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--bordo);
  border-radius: var(--raggio-s);
  background: var(--superficie);
  cursor: pointer;
  font: inherit;
  font-size: 0.875rem;
  color: var(--testo-medio);
  /* Bersaglio comodo anche con i guanti: la richiesta si compila anche in
     piedi davanti al cliente, non solo alla scrivania. */
  min-height: 44px;
}

.scelta--attiva {
  border-color: var(--primario);
  background: var(--blu-100);
  color: var(--primario-scuro);
  font-weight: 600;
}

.scelta-carta {
  flex: 1 1 180px;
  padding: var(--sp-4);
  text-align: left;
}

.scelta-carta__titolo {
  font-weight: 600;
  color: var(--testo);
  margin-bottom: 2px;
}

.scelta-carta__nota {
  font-size: 0.75rem;
  color: var(--testo-tenue);
  line-height: 1.4;
}

/* Interruttori e spunte --------------------------------------------------- */

.interruttore {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: 0.875rem;
  color: var(--testo-medio);
  cursor: pointer;
  min-height: 40px;
}

.spunte {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--sp-2);
}

.spunta {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-3);
  border: 1px solid var(--bordo);
  border-radius: var(--raggio-s);
  background: var(--superficie);
  font-size: 0.875rem;
  cursor: pointer;
  min-height: 44px;
}

.spunta--fatta {
  border-color: var(--successo);
  background: var(--successo-fondo);
}

/* ==========================================================================
   Nuova richiesta di ritiro: la colonna dei passi e il passo
   --------------------------------------------------------------------------
   A sinistra la richiesta passo per passo: ogni passo dice cio' che ha preso
   o cio' che gli manca, e in fondo quanti campi servono ancora per
   confermare. A destra il passo, con le scelte a vista invece dei menu a
   tendina. Sul telefono la colonna diventa una riga che si apre, e i bottoni
   restano in fondo allo schermo.
   ========================================================================== */

.percorso-ritiro {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}

.bozza-salvata {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.8125rem;
  color: var(--testo-tenue);
}

.lato-ritiro {
  position: sticky;
  top: calc(var(--altezza-testata) + 20px);
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 22px 20px 20px;
  border-radius: var(--raggio-l);
  background: var(--superficie);
  box-shadow: var(--ombra-scheda);
  min-width: 0;
}

.lato-ritiro__testa {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 0 4px;
}

.lato-ritiro__testa h2 {
  font-size: 0.9375rem;
  font-weight: 600;
}

.passi-ritiro {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.passi-ritiro__voce {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  gap: 12px;
}

.passi-ritiro__asse {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.passi-ritiro__segno {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  box-sizing: border-box;
  border: 2px solid var(--ardesia-300);
  border-radius: 50%;
  background: var(--superficie);
  color: var(--testo-tenue);
  font-size: 0.71875rem;
  font-weight: 600;
}

.passi-ritiro__segno .bi {
  display: none;
  font-size: 0.8125rem;
  line-height: 1;
}

.passi-ritiro__filo {
  flex: 1;
  width: 2px;
  min-height: 16px;
  background: var(--ardesia-150);
}

.passi-ritiro__voce:last-child .passi-ritiro__filo {
  display: none;
}

.passi-ritiro__bottone {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  margin: -4px 0 10px -6px;
  padding: 6px 10px 8px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background var(--transizione);
}

.passi-ritiro__voce:last-child .passi-ritiro__bottone {
  margin-bottom: 0;
}

.passi-ritiro__bottone:hover {
  background: var(--ardesia-50);
}

.passi-ritiro__bottone:focus-visible {
  outline: 2px solid var(--petrolio-500);
  outline-offset: 0;
}

.passi-ritiro__nome {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--ardesia-800);
}

.passi-ritiro__sotto {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  min-width: 0;
  font-size: 0.78125rem;
  color: var(--testo-medio);
}

.passi-ritiro__sotto--indizio {
  color: var(--testo-tenue);
}

.passi-ritiro__testo {
  min-width: 0;
  overflow-wrap: anywhere;
}

.passi-ritiro__manca {
  color: var(--attenzione);
}

.passi-ritiro__voce--corrente .passi-ritiro__segno {
  border: 0;
  background: var(--petrolio-600);
  box-shadow: 0 0 0 4px var(--petrolio-100);
}

.passi-ritiro__voce--corrente .passi-ritiro__segno::after {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #fff;
}

.passi-ritiro__voce--corrente .passi-ritiro__bottone {
  background: var(--petrolio-50);
}

.passi-ritiro__voce--corrente .passi-ritiro__nome {
  font-weight: 600;
  color: var(--petrolio-800);
}

.passi-ritiro__voce--corrente .passi-ritiro__cifra,
.passi-ritiro__voce--fatta .passi-ritiro__cifra,
.passi-ritiro__voce--incompleta .passi-ritiro__cifra,
.passi-ritiro__voce--errore .passi-ritiro__cifra {
  display: none;
}

.passi-ritiro__voce--fatta .passi-ritiro__segno {
  border: 0;
  background: var(--petrolio-600);
  color: #fff;
}

.passi-ritiro__voce--fatta .bi-check-lg,
.passi-ritiro__voce--incompleta .bi-exclamation-lg,
.passi-ritiro__voce--errore .bi-exclamation-lg {
  display: block;
}

.passi-ritiro__voce--fatta .passi-ritiro__filo,
.passi-ritiro__voce--incompleta .passi-ritiro__filo {
  background: var(--petrolio-600);
}

/* Visto, ma con un campo che serve per confermare. */
.passi-ritiro__voce--incompleta .passi-ritiro__segno {
  border-color: var(--attenzione-pieno);
  background: var(--attenzione-velo);
  color: var(--attenzione);
}

/* Respinto dalla conferma: il rosso dice dove tornare. */
.passi-ritiro__voce--errore .passi-ritiro__segno {
  border: 0;
  background: var(--errore);
  box-shadow: none;
  color: #fff;
}

.passi-ritiro__voce--errore .passi-ritiro__segno::after {
  content: none;
}

.passi-ritiro__voce--errore .bi-check-lg {
  display: none;
}

.passi-ritiro__voce--errore .passi-ritiro__nome {
  color: var(--errore);
}

.lato-ritiro__mancano {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--attenzione-velo);
  box-shadow: inset 0 0 0 1px var(--attenzione-bordo);
}

.lato-ritiro__mancano-titolo {
  font-size: 0.78125rem;
  font-weight: 600;
  color: var(--attenzione);
}

.lato-ritiro__mancano-testo {
  font-size: 0.78125rem;
  line-height: 1.5;
  color: var(--testo-medio);
}

.lato-ritiro__mancano--pronta {
  background: var(--successo-fondo);
  box-shadow: inset 0 0 0 1px var(--successo-bordo);
}

.lato-ritiro__mancano--pronta .lato-ritiro__mancano-titolo {
  color: var(--successo);
}

.targa--mini {
  height: 20px;
  border-radius: 3px;
}

.targa--mini .targa__banda {
  width: 7px;
  padding: 0;
}

.targa--mini .targa__testo {
  padding: 0 5px;
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
}

/* --- Il passo ------------------------------------------------------------ */

.passo-ritiro {
  min-width: 0;
  border-radius: var(--raggio-l);
  background: var(--superficie);
  box-shadow: var(--ombra-rilievo);
}

.passo-ritiro__testa {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 28px 32px 8px;
}

.passo-ritiro__numero {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--petrolio-600);
}

.passo-ritiro__testa h2 {
  font-size: 1.375rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.passo-ritiro__sotto {
  margin: 0;
  font-size: 0.875rem;
  color: var(--testo-medio);
}

.passo-ritiro > .da-completare {
  margin: 12px 32px 0;
}

.passo-ritiro__corpo {
  padding: 20px 32px 28px;
}

.passo-ritiro__corpo .pannello--attivo {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.passo-ritiro__corpo .campo {
  margin-bottom: 0;
}

.passo-ritiro__corpo .griglia {
  gap: 18px;
}

.passo-ritiro__corpo .griglia--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.passo-ritiro__corpo .griglia--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.passo-ritiro__corpo .campo input:not([type="checkbox"]),
.passo-ritiro__corpo .campo select {
  min-height: 44px;
}

.passo-ritiro__corpo .campo textarea {
  line-height: 1.5;
}

.passo-ritiro__corpo .campo input.campo--codice {
  font-family: var(--font-mono);
  font-size: 0.875rem;
}

.passo-ritiro__corpo .campo input.campo--targa {
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.passo-ritiro__corpo .campo input.campo--sigla {
  text-transform: uppercase;
}

.campo__aiuto--sotto {
  margin-top: -16px;
}

.campo__con-lente {
  position: relative;
}

.campo__lente {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--testo-tenue);
  pointer-events: none;
}

.passo-ritiro__corpo .campo__con-lente input {
  padding-left: 42px;
}

.griglia--indirizzo {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1fr);
}

.griglia--quando {
  grid-template-columns: 200px 200px minmax(0, 1fr) auto;
  align-items: end;
}

.griglia--corrispettivo {
  grid-template-columns: minmax(0, 1fr) 220px;
  align-items: end;
}

/* Sotto la riga di civico, CAP, comune e provincia, staccata: fino al
   05/10/2026 un margine negativo portava «Controlla l'indirizzo» sopra il
   bordo del campo della provincia. */
.posizione-ritiro {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: var(--sp-3) 0 var(--sp-4);
}

.posizione-ritiro .btn {
  flex: none;
}

.posizione-ritiro .esito-indirizzo {
  flex: 1;
  min-width: 0;
}

.posizione-ritiro .esito-indirizzo .avviso,
.posizione-ritiro .esito-indirizzo p {
  margin: 0;
}

.riquadro-gravami {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 18px 20px;
  border-radius: 12px;
  box-shadow: inset 0 0 0 1px var(--ardesia-150);
}

.riquadro-gravami__testa {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.riquadro-gravami__testa .campo__etichetta {
  margin: 0;
}

.riquadro-gravami .campo__aiuto {
  margin: 0;
}

/* --- Le scelte a vista ----------------------------------------------------
   Canale, soggetto, modalita', fascia: bottoni e schede, non menu a tendina.
   `.scelta` resta la classe che il codice cerca; l'aspetto lo danno queste,
   dentro un contenitore `.scelte-a-vista` — la nuova richiesta e l'arrivo —
   cosi' le altre pagine che usano `.scelta` non cambiano. */

.gruppo-scelta {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.gruppo-scelta > legend {
  float: none;
  width: auto;
  margin-bottom: 10px;
  padding: 0;
}

.gruppo-scelta > .campo__aiuto {
  margin-top: 8px;
}

.scelte--pastiglie {
  gap: 8px;
}

.scelte-a-vista .scelta--pastiglia {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 38px;
  padding: 0 14px;
  border: 0;
  border-radius: 999px;
  background: var(--superficie);
  box-shadow: inset 0 0 0 1px var(--ardesia-300);
  font-size: 0.84375rem;
  font-weight: 400;
  color: var(--ardesia-700);
  transition: background var(--transizione), box-shadow var(--transizione), color var(--transizione);
}

.scelte-a-vista .scelta--pastiglia:hover {
  box-shadow: inset 0 0 0 1px var(--ardesia-400);
  color: var(--testo);
}

.scelte-a-vista .scelta--pastiglia[aria-pressed="true"] {
  background: var(--petrolio-600);
  box-shadow: none;
  color: #fff;
  font-weight: 500;
}

/* La spunta di Bootstrap Icons («check-lg»): scelto si vede anche senza
   distinguere i colori. */
.scelte-a-vista .scelta--pastiglia[aria-pressed="true"]::before {
  content: "\f633";
  font-family: bootstrap-icons;
  font-size: 0.8125rem;
  line-height: 1;
}

.scelte--carte {
  display: grid;
  gap: 12px;
}

.scelte--due {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 560px;
}

.scelte--tre {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.scelte-a-vista .scelta--carta {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 64px;
  padding: 12px 16px;
  border: 0;
  border-radius: 12px;
  background: var(--superficie);
  box-shadow: inset 0 0 0 1px var(--ardesia-300);
  font-weight: 400;
  text-align: left;
  transition: background var(--transizione), box-shadow var(--transizione);
}

.scelte-a-vista .scelta--carta:hover {
  box-shadow: inset 0 0 0 1px var(--ardesia-400);
}

.scelte-a-vista .scelta--carta[aria-pressed="true"] {
  background: var(--petrolio-50);
  box-shadow: inset 0 0 0 1.5px var(--petrolio-600);
}

.scelte-a-vista .scelta:focus-visible {
  outline: 2px solid var(--petrolio-500);
  outline-offset: 2px;
}

.scelta__icona {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: var(--ardesia-50);
  color: var(--ardesia-600);
  font-size: 1.0625rem;
}

.scelta--carta[aria-pressed="true"] .scelta__icona {
  background: var(--petrolio-100);
  color: var(--petrolio-800);
}

.scelta__testo {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.scelta__titolo {
  font-size: 0.90625rem;
  font-weight: 500;
  color: var(--ardesia-800);
}

.scelta--carta[aria-pressed="true"] .scelta__titolo {
  font-weight: 600;
  color: var(--petrolio-800);
}

.scelta__nota {
  font-size: 0.78125rem;
  color: var(--testo-tenue);
}

.scelta--carta[aria-pressed="true"] .scelta__nota {
  color: var(--testo-medio);
}

.segmentato--esteso .segmentato__scelta {
  min-height: 38px;
  font-size: 0.84375rem;
}

.urgenza {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 44px;
  padding: 6px 14px;
  border-radius: 10px;
  box-shadow: inset 0 0 0 1px var(--ardesia-300);
  cursor: pointer;
  transition: background var(--transizione), box-shadow var(--transizione);
}

.urgenza__testo {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}

.urgenza__titolo {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--ardesia-700);
}

.urgenza__nota {
  font-size: 0.75rem;
  color: var(--testo-tenue);
}

.urgenza input {
  width: 18px;
  height: 18px;
  margin: 0;
  flex-shrink: 0;
  accent-color: var(--rame-600);
}

.urgenza:has(input:checked) {
  background: var(--rame-50);
  box-shadow: inset 0 0 0 1.5px var(--rame-600);
}

.urgenza:has(input:checked) .urgenza__titolo {
  color: var(--rame-700);
}

.spunta__nota {
  display: block;
  font-size: 0.75rem;
  color: var(--testo-tenue);
}

/* --- I bottoni in fondo al passo ----------------------------------------- */

.passo-ritiro__piede {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px 16px;
  flex-wrap: wrap;
  padding: 18px 32px;
  border-top: 1px solid var(--bordo-tenue);
  border-radius: 0 0 var(--raggio-l) var(--raggio-l);
  background: var(--superficie-alt);
}

.passo-ritiro__legenda {
  flex: 1 1 200px;
  min-width: 0;
  margin: 0;
  font-size: 0.8125rem;
  color: var(--testo-tenue);
}

.passo-ritiro__indietro {
  gap: 8px;
}

.passo-ritiro__azioni {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-left: auto;
}

.passo-ritiro__piede .btn {
  min-height: 44px;
  gap: 8px;
}

.passo-ritiro__piede #conferma:disabled {
  background: var(--superficie);
  border-color: var(--ardesia-150);
  color: var(--ardesia-400);
  opacity: 1;
}

.passo-ritiro__piede .btn--conferma {
  min-height: 48px;
  padding: 0 24px;
  font-weight: 600;
  box-shadow: 0 6px 16px -6px rgba(2, 76, 123, 0.5);
}

/* --- Il riepilogo ---------------------------------------------------------- */

.riepilogo-ritiro {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.riepilogo-ritiro__griglia {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.riepilogo-ritiro__blocco {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  padding: 18px 20px;
  border-radius: 12px;
  box-shadow: inset 0 0 0 1px var(--ardesia-150);
}

.riepilogo-ritiro__blocco--ritiro {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: 24px;
}

.riepilogo-ritiro__testa {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}

.riepilogo-ritiro__testa--destra {
  justify-content: flex-end;
}

.riepilogo-ritiro__testa h3 {
  margin: 0;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--testo-tenue);
}

.riepilogo-ritiro__testa a {
  font-size: 0.8125rem;
  font-weight: 500;
  text-decoration: none;
}

.riepilogo-ritiro__principale {
  font-size: 1rem;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.riepilogo-ritiro__principale--medio {
  font-size: 0.9375rem;
  font-weight: 500;
}

.riepilogo-ritiro__riga {
  font-size: 0.84375rem;
  color: var(--testo-medio);
}

.riepilogo-ritiro__assente {
  font-size: 0.84375rem;
  font-style: italic;
  color: var(--testo-tenue);
}

.riepilogo-ritiro__veicolo {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.riepilogo-ritiro__documenti {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.riepilogo-ritiro__documento {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--ardesia-100);
  color: var(--ardesia-700);
  font-size: 0.78125rem;
}

.riepilogo-ritiro__documento--presente {
  background: var(--successo-fondo);
  color: var(--successo);
}

.riepilogo-ritiro__nota {
  font-size: 0.78125rem;
  color: var(--testo-tenue);
}

.riepilogo-ritiro__dove {
  display: flex;
  align-items: center;
  gap: 14px;
}

.riepilogo-ritiro__icona {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: var(--ottanio-100);
  color: var(--ottanio-700);
  font-size: 1.0625rem;
}

.riepilogo-ritiro__posizione {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--testo-tenue);
}

.riepilogo-ritiro__posizione a {
  color: inherit;
}

.riepilogo-ritiro__posizione--successo {
  color: var(--ottanio-700);
}

.riepilogo-ritiro__posizione--attenzione {
  color: var(--attenzione);
}

.riepilogo-ritiro__posizione--errore {
  color: var(--errore);
}

.riepilogo-ritiro__punto {
  width: 7px;
  height: 7px;
  flex-shrink: 0;
  margin-top: 0.4em;
  border-radius: 50%;
  background: currentColor;
}

.riepilogo-ritiro__posizione--info .riepilogo-ritiro__punto {
  background: var(--ottanio-400);
}

.riepilogo-ritiro__posizione--successo .riepilogo-ritiro__punto {
  background: var(--ottanio-500);
}

.riepilogo-ritiro__citazione {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
  padding-left: 14px;
  box-shadow: inset 2px 0 0 var(--ardesia-300);
}

.riepilogo-ritiro__citazione figcaption {
  font-size: 0.78125rem;
  color: var(--testo-tenue);
}

.riepilogo-ritiro__citazione blockquote {
  margin: 0;
  font-size: 0.90625rem;
  line-height: 1.5;
  color: var(--testo-forte);
}

.riepilogo-ritiro__dopo {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 12px;
  background: var(--petrolio-50);
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--petrolio-700);
}

.riepilogo-ritiro__dopo i {
  margin-top: 2px;
  color: var(--petrolio-600);
}

.riepilogo-ritiro__dopo strong {
  font-weight: 600;
}

/* --- Sul telefono ---------------------------------------------------------- */

.avanzamento-ritiro {
  display: none;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 16px;
  padding: 16px;
  border-radius: var(--raggio-l);
  background: var(--superficie);
  box-shadow: var(--ombra-scheda);
}

.avanzamento-ritiro__riga {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}

.avanzamento-ritiro__passo {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--petrolio-600);
}

.avanzamento-ritiro__bozza {
  font-size: 0.78125rem;
  color: var(--testo-tenue);
}

.avanzamento-ritiro__tacche {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 4px;
}

.avanzamento-ritiro__tacca {
  height: 5px;
  border-radius: 3px;
  background: var(--ardesia-150);
}

.avanzamento-ritiro__tacca--fatta {
  background: var(--petrolio-600);
}

.avanzamento-ritiro__tacca--corrente {
  background: var(--petrolio-400);
}

.avanzamento-ritiro__riassunto {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 8px 12px;
  border: 0;
  border-radius: 10px;
  background: var(--ardesia-50);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.avanzamento-ritiro__chi {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.84375rem;
  color: var(--ardesia-700);
}

.avanzamento-ritiro__apri {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  font-size: 0.78125rem;
  font-weight: 500;
  color: var(--petrolio-600);
}

.avanzamento-ritiro__apri .bi {
  transition: transform var(--transizione);
}

.avanzamento-ritiro__riassunto[aria-expanded="true"] .avanzamento-ritiro__apri .bi {
  transform: rotate(180deg);
}

@media (max-width: 1100px) {
  .percorso-ritiro {
    grid-template-columns: minmax(0, 1fr);
  }

  .avanzamento-ritiro {
    display: flex;
  }

  .lato-ritiro {
    display: none;
    position: static;
  }

  .lato-ritiro--aperto {
    display: flex;
  }
}

@media (max-width: 760px) {
  .pagina-testa--percorso {
    margin-bottom: 16px;
  }

  .pagina-testa--percorso h1 {
    font-size: 1.375rem;
  }

  .pagina-testa--percorso .pagina-testa__sottotitolo,
  .pagina-testa--percorso .bozza-salvata {
    display: none;
  }

  .passo-ritiro {
    border-radius: var(--raggio);
  }

  .passo-ritiro__testa {
    padding: 20px 16px 4px;
  }

  .passo-ritiro__numero {
    display: none;
  }

  .passo-ritiro__testa h2 {
    font-size: 1.3125rem;
  }

  .passo-ritiro > .da-completare {
    margin: 12px 16px 0;
  }

  .passo-ritiro__corpo {
    padding: 16px 16px 24px;
  }

  .passo-ritiro__corpo .griglia--2,
  .passo-ritiro__corpo .griglia--3,
  .griglia--quando,
  .griglia--corrispettivo,
  .scelte--due,
  .scelte--tre,
  .riepilogo-ritiro__griglia,
  .riepilogo-ritiro__blocco--ritiro {
    grid-template-columns: minmax(0, 1fr);
    max-width: none;
  }

  /* Civico e CAP in una riga, comune e provincia nell'altra. */
  .griglia--indirizzo {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 12px;
  }

  .griglia--indirizzo > :nth-child(1),
  .griglia--indirizzo > :nth-child(2) {
    grid-column: span 3;
  }

  .griglia--indirizzo > :nth-child(3) {
    grid-column: span 4;
  }

  .griglia--indirizzo > :nth-child(4) {
    grid-column: span 2;
  }

  /* 16px: sotto, il telefono ingrandisce la pagina a ogni campo toccato. */
  .passo-ritiro__corpo .campo input:not([type="checkbox"]),
  .passo-ritiro__corpo .campo select,
  .passo-ritiro__corpo .campo textarea {
    min-height: 48px;
    font-size: 1rem;
  }

  .scelte-a-vista .scelta--carta {
    min-height: 52px;
  }

  .posizione-ritiro {
    flex-direction: column;
  }

  /* I bottoni restano in fondo allo schermo mentre si compila. */
  .passo-ritiro__piede {
    position: sticky;
    bottom: 0;
    z-index: 20;
    flex-wrap: nowrap;
    gap: 10px;
    padding: 12px 16px 16px;
    border-top: 0;
    border-radius: 0;
    background: var(--superficie);
    box-shadow: 0 -1px 0 var(--ardesia-150), 0 -8px 20px -12px rgba(13, 58, 92, 0.2);
  }

  .passo-ritiro__legenda,
  #lascia-bozza,
  #involucro-conferma:has(#conferma:disabled) {
    display: none;
  }

  .passo-ritiro__indietro {
    width: 52px;
    height: 52px;
    flex-shrink: 0;
    padding: 0;
    border: 1px solid var(--ardesia-300);
    border-radius: 12px;
    color: var(--testo-forte);
  }

  .passo-ritiro__indietro span {
    display: none;
  }

  .passo-ritiro__azioni {
    flex: 1;
    flex-wrap: nowrap;
    min-width: 0;
  }

  .passo-ritiro__azioni > .btn,
  #involucro-conferma,
  #involucro-conferma .btn {
    flex: 1;
    width: 100%;
  }

  .passo-ritiro__piede .btn {
    min-height: 52px;
    border-radius: 12px;
    font-size: 1rem;
  }
}

/* Lavagna di pianificazione ---------------------------------------------- */

.lavagna {
  display: grid;
  grid-template-columns: minmax(280px, 380px) 1fr;
  gap: var(--sp-5);
  align-items: start;
}

@media (max-width: 900px) {
  .lavagna {
    grid-template-columns: 1fr;
  }
}

.coda__voce {
  display: flex;
  gap: var(--sp-3);
  align-items: flex-start;
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--bordo);
}

.coda__voce:last-child {
  border-bottom: 0;
}

.coda__attesa {
  flex: 0 0 auto;
  min-width: 52px;
  text-align: center;
  font-size: 0.6875rem;
  color: var(--testo-tenue);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.coda__attesa strong {
  display: block;
  font-size: 1.125rem;
  color: var(--testo);
  letter-spacing: 0;
}

.coda__corpo {
  flex: 1;
  min-width: 0;
}

/* Le missioni in programma, nella pianificazione: si sceglie quella a cui
   assegnare, e si apre sul posto con le sue fermate. ---------------------- */

.lavagna--giri {
  grid-template-columns: minmax(300px, 1fr) minmax(300px, 1fr);
}

.giri {
  list-style: none;
  margin: 0;
  padding: 0;
}

.giro {
  border-bottom: 1px solid var(--bordo);
  border-left: 3px solid transparent;
}

.giro:last-child {
  border-bottom: 0;
}

.giro--scelto {
  border-left-color: var(--primario);
  background: var(--superficie-alt);
}

.giro__testa {
  display: flex;
  gap: var(--sp-3);
  align-items: flex-start;
  width: 100%;
  padding: var(--sp-3) var(--sp-4);
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.giro__testa:hover {
  background: var(--superficie-alt);
}

.giro__testa:focus-visible {
  outline: 2px solid var(--primario);
  outline-offset: -2px;
}

.giro__giorno {
  flex: 0 0 auto;
  min-width: 52px;
  text-align: center;
  font-size: 0.6875rem;
  color: var(--testo-tenue);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1.3;
}

.giro__giorno strong {
  display: block;
  font-size: 1.25rem;
  color: var(--testo);
  letter-spacing: 0;
}

.giro__corpo {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.giro__dettaglio {
  padding: 0 var(--sp-4) var(--sp-4);
}

.soste--compatte .sosta {
  padding: var(--sp-3) 0;
  align-items: flex-start;
}

.soste--compatte .sosta__ordine {
  width: 26px;
  height: 26px;
  font-size: 0.8125rem;
}

@media (max-width: 900px) {
  .lavagna--giri {
    grid-template-columns: 1fr;
  }
}

/* Le missioni degli autisti, in ufficio: un titolo per autista. */
.gruppo-autista {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font-titoli);
  font-size: 1.0625rem;
  font-weight: 600;
  margin: var(--sp-5) 0 var(--sp-3);
}

.gruppo-autista:first-child {
  margin-top: 0;
}

/* Le missioni dell'autista: quella di oggi si vede per prima e si distingue;
   le altre si aprono toccandole. */
.giro-autista > summary {
  list-style: none;
  cursor: pointer;
}

.giro-autista > summary::-webkit-details-marker {
  display: none;
}

.giro-autista > summary::after {
  content: "\F282"; /* bi-chevron-down */
  font-family: "bootstrap-icons";
  color: var(--testo-tenue);
  transition: transform var(--transizione);
}

.giro-autista[open] > summary::after {
  transform: rotate(180deg);
}

.giro-autista--oggi {
  border: 2px solid var(--primario);
  box-shadow: 0 0 0 4px var(--blu-100);
}

.giro__gesto {
  padding: var(--sp-4);
}

.giro__gesto .tenue {
  margin: 0 0 var(--sp-3);
}

.giro__nota {
  margin: 0;
  padding: var(--sp-3) var(--sp-4);
}

/* --- Le missioni dell'autista: oggi, le prossime, lo storico, il calendario.
   La pagina si usa dal telefono: le quattro viste stanno in una barra che
   resta in vista sotto la testata, una colonna ciascuna, l'icona sopra la
   parola. */

.viste-autista {
  position: sticky;
  top: var(--altezza-testata);
  z-index: 6;
  margin: 0 0 var(--sp-4);
  padding: 8px 0;
  background: var(--fondo);
}

.viste-autista__barra {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
  padding: 4px;
  border-radius: 12px;
  background: var(--ardesia-100);
}

.viste-autista__voce {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-width: 0;
  min-height: 56px;
  padding: 6px 4px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--ardesia-700);
  cursor: pointer;
  transition: background var(--transizione), color var(--transizione);
}

.viste-autista__voce i {
  font-size: 1.1875rem;
  line-height: 1;
}

.viste-autista__voce:hover {
  color: var(--testo);
}

.viste-autista__voce:focus-visible {
  outline: 2px solid var(--petrolio-500);
  outline-offset: 1px;
}

.viste-autista__voce[aria-selected="true"] {
  background: var(--superficie);
  color: var(--testo);
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(13, 58, 92, 0.12);
}

.viste-autista__voce[aria-selected="true"] i {
  color: var(--primario);
}

.viste-autista__nome {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}

.viste-autista__conta {
  min-width: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--primario);
  color: #fff;
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 18px;
  text-align: center;
}

.giro-autista__testa {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.giro-autista__testa .scheda__sottotitolo {
  margin: 0;
}

.giro-autista__quando {
  font-family: var(--font);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--testo-tenue);
}

/* Una vista senza giri dice perche', e dove guardare. */
.vuoto-autista {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 36px 20px;
  border-radius: var(--raggio-l);
  background: var(--superficie);
  box-shadow: inset 0 0 0 1px var(--bordo-tenue);
  color: var(--testo-medio);
  text-align: center;
}

.vuoto-autista > i {
  font-size: 2rem;
  line-height: 1;
  color: var(--primario);
}

.vuoto-autista strong {
  font-size: 1.0625rem;
  color: var(--testo);
}

.vuoto-autista .btn {
  margin-top: 8px;
}

.storico-fine {
  margin: 0;
  text-align: center;
}

/* Il calendario: il mese in una griglia, un punto per giro nel colore della
   sua fase; toccando un giorno, sotto compaiono i suoi giri. */
.calendario-autista {
  /* I punti delle fasi, provati col validatore della palette (anche per
     protanopia e deuteranopia): i toni delle fasi dell'app, verde acqua e
     verde, erano troppo vicini per punti cosi' piccoli. Le bozze sono un
     cerchio vuoto: si riconoscono dalla forma. */
  --cal-pianificata: var(--petrolio-500);
  --cal-in-corso: var(--petrolio-800);
  --cal-conclusa: var(--successo-pieno);
  margin-bottom: var(--sp-5);
  padding: 14px;
}

.calendario-autista__testa {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.calendario-autista__mese {
  flex: 1;
  margin: 0;
  font-size: 1.0625rem;
  text-align: center;
}

.calendario-autista__mese::first-letter {
  text-transform: uppercase;
}

.calendario-autista__griglia {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 2px;
}

.cal__intestazione {
  padding: 2px 0 6px;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-align: center;
  text-transform: uppercase;
  color: var(--testo-tenue);
}

.cal__giorno {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 0;
  min-height: 54px;
  padding: 6px 0;
  border: 0;
  border-radius: 10px;
  background: transparent;
  font: inherit;
  color: var(--testo);
  cursor: pointer;
}

.cal__giorno:hover {
  background: var(--superficie-alt);
}

.cal__giorno:focus-visible {
  outline: 2px solid var(--petrolio-500);
  outline-offset: -2px;
}

.cal__giorno--fuori {
  color: var(--ardesia-400);
}

.cal__numero {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  font-size: 0.875rem;
  font-variant-numeric: tabular-nums;
}

.cal__giorno--con-giri .cal__numero {
  font-weight: 600;
}

.cal__giorno--oggi .cal__numero {
  box-shadow: inset 0 0 0 2px var(--primario);
  color: var(--primario);
  font-weight: 700;
}

.cal__giorno--scelto .cal__numero {
  background: var(--primario);
  color: #fff;
}

.cal__giri {
  display: flex;
  align-items: center;
  gap: 3px;
  min-height: 7px;
}

.cal__giro {
  width: 7px;
  height: 7px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--ardesia-300);
}

.cal__giro--pianificata {
  background: var(--cal-pianificata);
}

.cal__giro--in_corso {
  background: var(--cal-in-corso);
}

.cal__giro--completata {
  background: var(--cal-conclusa);
}

.cal__giro--bozza {
  background: transparent;
  box-shadow: inset 0 0 0 1.5px var(--ardesia-400);
}

.cal__altri {
  font-size: 0.625rem;
  line-height: 1;
  color: var(--testo-tenue);
}

.cal__piede {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--bordo-tenue);
}

.cal__legenda {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  font-size: 0.75rem;
  color: var(--testo-medio);
}

.cal__legenda > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* Un campo dell'arrivo compilato dal ritiro: si vede, per controllarlo. */
.campo--dal-ritiro input,
.campo--dal-ritiro select {
  background: var(--info-fondo);
}

.campo--dal-ritiro .campo__etichetta::after {
  content: " · dal ritiro";
  color: var(--info);
  font-weight: 500;
}

/* Il controllo dell'indirizzo, sotto i campi del luogo di ritiro. */
.esito-indirizzo {
  margin-top: var(--sp-2);
}

/* Suggerimenti mentre si scrive (`dom.completamento`, api.js) -------------
   Un elenco sotto il campo: si sceglie col mouse, col dito o con frecce e
   Invio. Il piede dice da dove vengono i dati. */

.campo--suggerito {
  position: relative;
}

.suggerimenti {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  min-width: 280px;
  z-index: 1060;
  background: var(--superficie);
  border-radius: var(--raggio);
  box-shadow: var(--ombra-l), var(--anello);
  overflow: hidden;
}

.suggerimenti[hidden],
.suggerimenti [hidden] {
  display: none;
}

.suggerimenti__lista {
  list-style: none;
  margin: 0;
  padding: 6px;
  max-height: 320px;
  overflow-y: auto;
}

.suggerimento {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 9px 10px;
  border-radius: 8px;
  cursor: pointer;
}

.suggerimento:hover,
.suggerimento[aria-selected="true"] {
  background: var(--petrolio-50);
}

.suggerimento[aria-selected="true"] {
  box-shadow: inset 0 0 0 1px var(--petrolio-200);
}

.suggerimento__icona {
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--ottanio-600);
}

.suggerimento__testo {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.suggerimento__titolo {
  font-size: 0.90625rem;
  font-weight: 500;
  color: var(--testo);
}

.suggerimento__titolo .tenue {
  font-weight: 400;
}

.suggerimento__dettaglio {
  font-size: 0.78125rem;
  color: var(--testo-tenue);
}

.suggerimenti__nota {
  padding: 12px 14px;
  font-size: 0.8125rem;
  color: var(--testo-medio);
}

.suggerimenti__piede {
  padding: 7px 14px 8px;
  border-top: 1px solid var(--bordo-tenue);
  background: var(--superficie-alt);
  font-size: 0.71875rem;
  color: var(--testo-tenue);
}

.suggerimenti__piede a {
  color: inherit;
  text-decoration: underline;
}

/* Soste della missione ---------------------------------------------------- */

.soste {
  list-style: none;
  margin: 0;
  padding: 0;
}

.sosta {
  display: flex;
  gap: var(--sp-3);
  padding: var(--sp-4);
  border-bottom: 1px solid var(--bordo);
}

.sosta:last-child {
  border-bottom: 0;
}

.sosta--completata {
  background: var(--successo-fondo);
}

.sosta--saltata {
  background: var(--attenzione-fondo);
}

.sosta__ordine {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--primario);
  color: #fff;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 0.8125rem;
}

.sosta__corpo {
  flex: 1;
  min-width: 0;
}

.sosta__azioni {
  display: flex;
  gap: var(--sp-2);
  flex-wrap: wrap;
  margin-top: var(--sp-2);
}

/* Colonne e minuzie ------------------------------------------------------- */

/* Due terzi e un terzo. La colonna larga puo' stringersi sotto il suo
   contenuto: una tabella larga scorre nella sua scheda invece di allargare
   la colonna e spingere l'altra fuori dalla finestra (succedeva nella
   cabina di produzione). Quella stretta no: non scende sotto il suo
   contenuto, come prima (le regole dell'invecchiamento ci stanno a pelo). */
.colonne {
  display: grid;
  gap: var(--sp-5);
  align-items: start;
  grid-template-columns: minmax(0, 2fr) minmax(min-content, 1fr);
}

@media (max-width: 1024px) {
  .colonne {
    grid-template-columns: 1fr;
  }
}

.separatore {
  border: 0;
  border-top: 1px solid var(--bordo);
  margin: var(--sp-5) 0;
}

.btn--blocco {
  width: 100%;
  justify-content: center;
}

.mt-3 {
  margin-top: var(--sp-3);
}

.mb-3 {
  margin-bottom: var(--sp-3);
}

.briciole__sep {
  color: var(--ardesia-400);
  margin: 0 var(--sp-1);
}

/* Un pezzo di briciole che vede solo chi ha il permesso: i suoi elementi
   restano nella riga come gli altri. */
.briciole__gruppo {
  display: contents;
}

/* ==========================================================================
   Le schede di acquisizione: richiesta, elenco, missione
   ==========================================================================
   Superfici aperte divise da filetti invece di una scatola per ogni gruppo
   di campi; una sola superficie in rilievo per schermata, quella della
   prossima cosa da fare. */

/* Targa -------------------------------------------------------------------
   La targa si riconosce da lontano: disegnata come quella vera, con la banda
   a sinistra. Lo spazio fra lettere e numeri e' un margine, non un carattere:
   chi la copia incolla «MD404VL», come la cerca la ricerca. */

.targa {
  display: inline-flex;
  align-items: stretch;
  height: 26px;
  border-radius: 4px;
  overflow: hidden;
  background: var(--superficie);
  box-shadow: 0 0 0 1px var(--ardesia-800);
  vertical-align: middle;
  flex-shrink: 0;
}

.targa__banda {
  width: 9px;
  background: var(--petrolio-700);
  color: #fff;
  font-size: 0.6875rem;
  font-weight: 700;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 6px;
}

.targa__testo {
  padding: 0 7px;
  display: flex;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--ardesia-900);
  white-space: nowrap;
}

.targa__spazio {
  display: inline-block;
  width: 0.45em;
}

.targa--media {
  height: 28px;
}

.targa--media .targa__testo {
  padding: 0 8px;
  font-size: 0.875rem;
}

.targa--grande {
  height: 58px;
  border-radius: 8px;
  box-shadow: 0 0 0 1.5px var(--ardesia-800), 0 4px 12px rgba(13, 58, 92, 0.1);
}

.targa--grande .targa__banda {
  width: 24px;
  padding-bottom: 7px;
}

.targa--grande .targa__testo {
  padding: 0 20px;
  font-size: 1.875rem;
  letter-spacing: 0.08em;
}

.targa--assente {
  box-shadow: none;
  border: 1px dashed var(--ardesia-400);
  background: transparent;
  padding: 0 8px;
  align-items: center;
  font-size: 0.78125rem;
  color: var(--testo-tenue);
}

.targa--assente.targa--grande {
  padding: 0 18px;
  font-size: 1rem;
}

/* Fasi e segnali -----------------------------------------------------------
   La fase dice dove si trova la pratica: neutra finche' aspetta, petrolio
   quando e' pronta e programmata, ottanio quando il camion e' in strada,
   verde a lavoro fatto. Il segnale dice cosa non va, sempre caldo e sempre
   con l'icona. Si costruiscono con `dom.fase` e `dom.segnale` (api.js). */

.fase {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 11px;
  border-radius: 999px;
  background: var(--ardesia-100);
  color: var(--ardesia-700);
  font-size: 0.78125rem;
  font-weight: 500;
  line-height: 1.4;
  white-space: nowrap;
}

.fase__punto {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ardesia-400);
  flex-shrink: 0;
}

.fase i {
  font-size: 0.8125rem;
  line-height: 1;
}

.fase--bozza {
  padding: 3px 10px;
  background: transparent;
  border: 1px dashed var(--ardesia-400);
  color: var(--testo-medio);
}

.fase--bozza .fase__punto {
  display: none;
}

.fase--pronta {
  background: var(--petrolio-50);
  box-shadow: inset 0 0 0 1px var(--petrolio-200);
  color: var(--petrolio-700);
}

.fase--pronta .fase__punto {
  background: var(--petrolio-400);
}

.fase--programmata {
  background: var(--petrolio-100);
  color: var(--petrolio-800);
}

.fase--programmata .fase__punto {
  background: var(--petrolio-600);
}

.fase--movimento {
  background: var(--ottanio-600);
  color: #fff;
}

.fase--fatta {
  background: var(--successo-fondo);
  color: var(--successo);
}

.fase--saltata {
  background: var(--attenzione-fondo);
  color: var(--attenzione);
}

.fase--annullata {
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--ardesia-200);
  color: var(--testo-tenue);
  text-decoration: line-through;
  text-decoration-color: var(--ardesia-400);
}

.fase--annullata .fase__punto {
  display: none;
}

.segnale {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.45;
  white-space: nowrap;
  vertical-align: middle;
}

.segnale i {
  font-size: 0.75rem;
  line-height: 1;
}

.segnale--grande {
  padding: 4px 11px;
  font-size: 0.78125rem;
}

/* La priorita' e' un tassello d'ambra col testo ambra scuro (5,6:1): col
   bianco l'ambra non arriva a 4,5:1. */
.segnale--priorita {
  background: var(--ottone-400);
  color: var(--su-ottone);
  font-weight: 600;
}

.segnale--attenzione {
  background: var(--attenzione-fondo);
  color: var(--attenzione);
}

.segnale--errore {
  background: var(--errore-fondo);
  color: var(--errore);
}

.segnale--neutro {
  background: var(--ardesia-100);
  color: var(--testo-medio);
}

/* Testa della pratica ----------------------------------------------------- */

.testa-pratica {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--sp-5) var(--sp-6);
  flex-wrap: wrap;
  margin-bottom: 24px;
}

.testa-pratica__identita {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  min-width: 0;
}

.testa-pratica__testo {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.testa-pratica__titolo {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.testa-pratica__titolo h1 {
  font-size: 1.75rem;
}

.testa-pratica__sotto {
  font-size: 0.90625rem;
  color: var(--testo-medio);
}

.testa-pratica__meta {
  font-size: 0.8125rem;
  color: var(--testo-tenue);
}

.testa-pratica__azioni {
  display: flex;
  gap: var(--sp-2);
  align-items: center;
  flex-wrap: wrap;
}

/* Percorso delle fasi ------------------------------------------------------
   Le cinque fasi della richiesta in fila, con la condizione che serve per
   passare alla successiva scritta sotto: e' la stessa regola che il server
   applica, detta prima invece che dopo un rifiuto. */

.percorso-fasi {
  list-style: none;
  margin: 0 0 24px;
  padding: 24px 32px 22px;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  background: var(--superficie);
  border-radius: var(--raggio-l);
  box-shadow: var(--ombra-scheda);
}

.percorso-fasi__passo {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.percorso-fasi__traccia {
  display: flex;
  align-items: center;
}

.percorso-fasi__nodo {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 2px solid var(--ardesia-300);
  background: var(--superficie);
  color: var(--testo-tenue);
  font-size: 0.75rem;
  font-weight: 600;
  display: grid;
  place-items: center;
}

.percorso-fasi__linea {
  flex: 1;
  height: 2px;
  margin: 0 14px;
  background: var(--ardesia-200);
}

.percorso-fasi__passo:last-child .percorso-fasi__linea {
  display: none;
}

.percorso-fasi__testo {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding-right: var(--sp-4);
}

.percorso-fasi__nome {
  font-size: 0.90625rem;
  font-weight: 500;
  color: var(--ardesia-700);
}

.percorso-fasi__nota {
  font-size: 0.8125rem;
  color: var(--testo-tenue);
}

.percorso-fasi__nota--vincolo {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--attenzione);
}

.percorso-fasi__nota--sbloccata {
  color: var(--successo);
}

.percorso-fasi__passo--fatto .percorso-fasi__nodo {
  border: 0;
  background: var(--petrolio-600);
  color: #fff;
}

.percorso-fasi__passo--fatto .percorso-fasi__linea {
  background: var(--petrolio-600);
}

.percorso-fasi__passo--corrente .percorso-fasi__nodo {
  border: 0;
  background: var(--petrolio-600);
  box-shadow: 0 0 0 5px var(--petrolio-100);
}

.percorso-fasi__passo--corrente .percorso-fasi__nodo::after {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #fff;
}

.percorso-fasi__passo--corrente .percorso-fasi__nome {
  font-weight: 600;
  color: var(--petrolio-800);
}

/* Una richiesta annullata o in bozza non e' su questa strada: le fasi
   restano leggibili, spente. */
.percorso-fasi--fuori .percorso-fasi__passo {
  opacity: 0.55;
}

/* Impianto della scheda: colonna principale e colonna laterale ------------ */

.impianto-scheda {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 356px;
  gap: 24px;
  align-items: start;
}

.colonna-laterale {
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
}

@media (max-width: 1180px) {
  .impianto-scheda {
    grid-template-columns: 1fr;
  }
}

/* Sezioni aperte: titolo a sinistra, valori a destra, filetto fra l'una e
   l'altra. */

.sezioni {
  background: var(--superficie);
  border-radius: var(--raggio-l);
  box-shadow: var(--ombra-scheda);
  min-width: 0;
}

.sezione {
  display: grid;
  grid-template-columns: 170px minmax(0, 1fr);
  gap: 24px;
  padding: 28px 32px;
}

.sezione + .sezione {
  border-top: 1px solid var(--bordo-tenue);
}

.sezione__testa {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.sezione__testa h2 {
  font-size: 1rem;
  letter-spacing: -0.01em;
}

.sezione__nota {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--testo-tenue);
}

.sezione__corpo {
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
}

/* Tante colonne quante ne stanno: tre accanto alla colonna laterale sullo
   schermo dell'ufficio, di piu' quando la colonna laterale scende sotto. */
.valori {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(136px, 1fr));
  gap: 20px 24px;
}

.valore {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.valore__etichetta {
  font-size: 0.78125rem;
  color: var(--testo-tenue);
}

.valore__dato {
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--testo);
  overflow-wrap: anywhere;
}

.valore__dato--assente {
  font-weight: 400;
  color: var(--testo-tenue);
}

@media (max-width: 720px) {
  .sezione {
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 22px 20px;
  }

  .percorso-fasi {
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 20px;
  }

  .percorso-fasi__passo {
    flex-direction: row;
    align-items: flex-start;
  }

  .percorso-fasi__linea {
    display: none;
  }
}

/* La persona: iniziali, nome, telefono e il gesto che serve. */

.persona {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.persona__avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--petrolio-100);
  color: var(--petrolio-800);
  font-size: 0.875rem;
  font-weight: 600;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.persona__corpo {
  flex: 1;
  min-width: 160px;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.persona__nome {
  font-size: 1rem;
  font-weight: 600;
}

.persona__contatto {
  font-family: var(--font-mono);
  font-size: 0.875rem;
}

/* Il luogo del ritiro in una scheda sola: l'indirizzo con da dove vengono le
   sue coordinate, l'officina, l'accesso, e in fondo la mappa, a filo. */

.luogo {
  padding: 16px;
  border-radius: var(--raggio);
  background: var(--superficie-alt);
  box-shadow: inset 0 0 0 1px var(--bordo-tenue);
  overflow: hidden;
}

.luogo__testa {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  flex-wrap: wrap;
}

.luogo__icona {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: 10px;
  background: var(--ottanio-100);
  color: var(--ottanio-700);
  display: grid;
  place-items: center;
  font-size: 1.25rem;
}

.luogo__corpo {
  flex: 1;
  min-width: 220px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.luogo__indirizzo {
  font-size: 0.9375rem;
  font-weight: 500;
}

.luogo__citta {
  font-size: 0.875rem;
  color: var(--testo-medio);
}

.luogo__esito {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 2px;
  font-size: 0.8125rem;
  color: var(--ottanio-700);
}

.luogo__esito .luogo__punto {
  align-self: center;
}

.luogo__punto {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ottanio-500);
  flex-shrink: 0;
}

.luogo__esito--attenzione {
  color: var(--attenzione);
}

.luogo__esito--attenzione .luogo__punto {
  background: var(--attenzione-pieno);
}

.luogo__esito--errore {
  color: var(--errore);
}

.luogo__esito--errore .luogo__punto {
  background: var(--errore-pieno);
}

.luogo__esito--neutro {
  color: var(--testo-medio);
}

.luogo__esito--neutro .luogo__punto {
  background: var(--ardesia-400);
}

.luogo__dettaglio {
  font-size: 0.8125rem;
  color: var(--testo-tenue);
}

.luogo__azioni {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
}

.luogo__correzione {
  margin-top: 14px;
}

.luogo__correzione .campo {
  margin: 0;
}

/* L'officina e l'accesso: righe sotto l'indirizzo, con l'icona in colonna
   con quella del luogo. */
.luogo__riga {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--bordo-tenue);
}

.luogo__riga > i {
  width: 44px;
  flex-shrink: 0;
  text-align: center;
  font-size: 1.0625rem;
  color: var(--testo-tenue);
}

.luogo__riga > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  font-size: 0.875rem;
}

.luogo__presso {
  font-weight: 500;
}

/* La mappa chiude la scheda, a filo dei bordi. */
.luogo .luogo__mappa {
  width: auto;
  margin: 16px -16px -16px;
  border-top: 1px solid var(--bordo-tenue);
  border-radius: 0;
}

/* Una nota da leggere prima di partire. */

.nota-autista {
  margin: 0;
  padding-left: 16px;
  box-shadow: inset 2px 0 0 var(--ardesia-300);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.nota-autista__etichetta {
  font-size: 0.78125rem;
  color: var(--testo-tenue);
}

.nota-autista__testo {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--testo-forte);
  white-space: pre-line;
}

/* Documenti del fascicolo e tacche d'avanzamento. */

.conteggio {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 10px;
  max-width: 150px;
}

.conteggio__numero {
  font-size: 1.375rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}

.conteggio__numero small {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--testo-tenue);
}

.tacche {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 4px;
}

.tacca {
  height: 6px;
  border-radius: 3px;
  background: var(--ardesia-150);
}

.tacca--piena {
  background: var(--petrolio-600);
}

.documenti {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px;
}

.documento {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border-radius: var(--raggio);
  box-shadow: inset 0 0 0 1px var(--bordo);
}

.documento__segno {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  margin-top: 1px;
  border-radius: 50%;
  border: 2px solid var(--ardesia-300);
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 0.75rem;
}

.documento--fatto {
  box-shadow: inset 0 0 0 1px var(--successo-bordo);
}

.documento--fatto .documento__segno {
  border: 0;
  background: var(--successo);
}

.documento__testo {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.documento__nome {
  font-size: 0.90625rem;
  font-weight: 500;
}

.documento__nota {
  font-size: 0.78125rem;
  color: var(--testo-tenue);
}

/* Riquadri della colonna laterale ----------------------------------------- */

.riquadro-lato {
  background: var(--superficie);
  border-radius: var(--raggio-l);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-shadow: var(--ombra-scheda);
  min-width: 0;
}

.riquadro-lato--rilievo {
  gap: 16px;
  box-shadow: var(--ombra-rilievo);
}

.riquadro-lato--attenzione {
  box-shadow: var(--ombra-s), 0 0 0 1px var(--attenzione-bordo);
}

.riquadro-lato--errore {
  box-shadow: var(--ombra-s), 0 0 0 1px var(--errore-bordo);
}

.riquadro-lato__testa {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-3);
}

.riquadro-lato h2 {
  font-size: 1rem;
  letter-spacing: -0.01em;
}

.riquadro-lato--rilievo h2 {
  font-size: 1.1875rem;
}

.riquadro-lato p {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--testo-medio);
}

.riquadro-lato .campo {
  margin: 0;
}

.riquadro-lato .nota-piccola {
  font-size: 0.78125rem;
  color: var(--testo-tenue);
}

.occhiello {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--primario);
}

.btn--alto {
  min-height: 44px;
  font-size: 0.90625rem;
}

/* Scelta segmentata: una fra poche, tutte visibili. */

.segmentato {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(max-content, 1fr);
  gap: 4px;
  padding: 4px;
  border-radius: 11px;
  background: var(--ardesia-100);
}

.segmentato__scelta {
  min-height: 36px;
  padding: 0 8px;
  white-space: nowrap;
  border: 0;
  border-radius: 8px;
  background: transparent;
  font-family: inherit;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--ardesia-700);
  cursor: pointer;
  transition: background var(--transizione), color var(--transizione);
}

.segmentato__scelta:hover {
  color: var(--testo);
}

/* Sul telefono le scelte si dividono la riga in parti uguali e le parole
   vanno a capo: tre etichette lunghe su una riga sola («Da verificare»,
   «Nessun vincolo», «Vincolo presente») erano piu' larghe dello schermo, e
   il percorso della richiesta scorreva di lato (12/10/2026). */
@media (max-width: 600px) {
  .segmentato {
    grid-auto-columns: minmax(0, 1fr);
  }

  .segmentato__scelta {
    padding: 4px 6px;
    white-space: normal;
    line-height: 1.2;
    overflow-wrap: anywhere;
  }
}

.segmentato__scelta:focus-visible {
  outline: 2px solid var(--petrolio-500);
  outline-offset: 1px;
}

.segmentato__scelta[aria-pressed="true"],
.segmentato__scelta[aria-selected="true"] {
  background: var(--superficie);
  color: var(--testo);
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(13, 58, 92, 0.12);
}

.segmentato__scelta--successo[aria-pressed="true"] {
  color: var(--successo);
}

.segmentato__scelta--errore[aria-pressed="true"] {
  color: var(--errore);
}

.segmentato__scelta--attenzione[aria-pressed="true"] {
  color: var(--attenzione);
}

.segmentato--piccolo {
  gap: 2px;
  padding: 3px;
  border-radius: 9px;
}

.segmentato--piccolo .segmentato__scelta {
  min-height: 28px;
  padding: 0 10px;
  font-size: 0.78125rem;
}

/* Attivita': storico ed eventi, in una colonna di punti. */

.attivita {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.attivita__voce {
  position: relative;
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 12px;
}

.attivita__voce:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 9px;
  top: 22px;
  bottom: -14px;
  width: 2px;
  background: var(--ardesia-150);
}

.attivita__punto {
  width: 10px;
  height: 10px;
  margin: 5px auto 0;
  border-radius: 50%;
  background: var(--petrolio-600);
  box-shadow: 0 0 0 4px var(--petrolio-100);
}

.attivita__voce--automatico .attivita__punto {
  background: var(--ardesia-400);
  box-shadow: 0 0 0 4px var(--ardesia-100);
}

.attivita__corpo {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.attivita__titolo {
  font-size: 0.875rem;
  font-weight: 500;
  overflow-wrap: anywhere;
}

.attivita__nota {
  font-size: 0.8125rem;
  color: var(--testo-medio);
}

.attivita__chi {
  font-size: 0.78125rem;
  color: var(--testo-tenue);
}

/* Elenco: le fasi in testa, contatori e schede insieme -------------------
   Ogni numero apre le righe che conta: e' la stessa cifra del filtro. */

.fasi-schede {
  display: grid;
  grid-template-columns: 1.2fr repeat(6, minmax(0, 1fr)) 0.8fr;
  margin-bottom: 22px;
  background: var(--superficie);
  border-radius: var(--raggio-l);
  overflow: hidden;
  box-shadow: var(--ombra-scheda);
}

.fasi-schede__voce {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 16px 20px;
  border: 0;
  background: var(--superficie);
  box-shadow: inset 1px 0 0 var(--bordo-tenue);
  font-family: inherit;
  color: var(--testo);
  text-align: left;
  cursor: pointer;
  transition: background var(--transizione);
}

.fasi-schede__voce:first-child {
  box-shadow: none;
}

.fasi-schede__voce:hover {
  background: var(--superficie-alt);
}

.fasi-schede__voce:focus-visible {
  outline: 2px solid var(--petrolio-500);
  outline-offset: -2px;
}

.fasi-schede__voce--tutte {
  background: var(--superficie-alt);
}

.fasi-schede__voce[aria-pressed="true"] {
  background: var(--petrolio-50);
  box-shadow: inset 1px 0 0 var(--bordo-tenue), inset 0 -3px 0 var(--primario);
}

.fasi-schede__voce:first-child[aria-pressed="true"] {
  box-shadow: inset 0 -3px 0 var(--primario);
}

.fasi-schede__numero {
  font-size: 1.625rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}

.fasi-schede__numero--zero {
  color: var(--testo-tenue);
}

.fasi-schede__voce[aria-pressed="true"] .fasi-schede__numero {
  color: var(--petrolio-800);
}

.fasi-schede__nome {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.8125rem;
  color: var(--testo-medio);
  white-space: nowrap;
}

.fasi-schede__voce[aria-pressed="true"] .fasi-schede__nome {
  font-weight: 600;
  color: var(--petrolio-700);
}

.fasi-schede__punto {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ardesia-400);
  flex-shrink: 0;
}

.fasi-schede__punto--pronta {
  background: var(--petrolio-400);
}

.fasi-schede__punto--programmata {
  background: var(--petrolio-600);
}

.fasi-schede__punto--movimento {
  background: var(--ottanio-600);
}

.fasi-schede__punto--fatta {
  background: var(--successo-pieno);
}

@media (max-width: 1280px) {
  .fasi-schede {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .fasi-schede__voce {
    box-shadow: inset 1px 0 0 var(--bordo-tenue), inset 0 1px 0 var(--bordo-tenue);
  }
}

@media (max-width: 640px) {
  .fasi-schede {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* La stessa striscia con le voci che servono, in parti uguali: le pagine
   dell'anagrafica (13/10/2026). Piu' bassa, perche' riassume la pagina e non
   e' il suo contenuto; il nome va a capo se la colonna e' stretta. */
.fasi-schede--auto {
  grid-template-columns: none;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
}

.fasi-schede--auto .fasi-schede__voce {
  padding: 12px 16px;
}

.fasi-schede--auto .fasi-schede__numero {
  font-size: 1.375rem;
}

.fasi-schede--auto .fasi-schede__nome {
  white-space: normal;
  line-height: 1.3;
}

/* Un numero che non filtra: si legge e basta. */
.fasi-schede__voce--numero {
  cursor: default;
}

.fasi-schede__voce--numero:hover {
  background: var(--superficie);
}

/* Una voce che porta a un'altra pagina invece di filtrare. */
a.fasi-schede__voce,
a.fasi-schede__voce:hover {
  color: var(--testo);
  text-decoration: none;
}

@media (max-width: 1280px) {
  .fasi-schede--auto {
    grid-auto-flow: row;
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .fasi-schede--auto {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Ricerca, filtri e segnali dell'elenco. */

.barra-filtri {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.campo-cerca {
  flex: 1 1 280px;
  display: flex;
  align-items: center;
  gap: 10px;
  height: 42px;
  padding: 0 14px;
  border-radius: 11px;
  background: var(--superficie);
  box-shadow: inset 0 0 0 1px var(--ardesia-200);
  color: var(--testo-tenue);
  margin: 0;
}

.campo-cerca:focus-within {
  box-shadow: inset 0 0 0 1px var(--petrolio-500), var(--anello-focus);
}

.campo-cerca input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 0.875rem;
  color: var(--testo);
  outline: none;
}

.selettore {
  height: 42px;
  padding: 0 34px 0 12px;
  border: 0;
  border-radius: 11px;
  background-color: var(--superficie);
  box-shadow: inset 0 0 0 1px var(--ardesia-200);
  font-family: inherit;
  font-size: 0.875rem;
  color: var(--testo-forte);
  max-width: 100%;
}

@media (max-width: 640px) {
  .barra-filtri .selettore {
    flex: 1 1 100%;
  }
}

.selettore:focus {
  outline: none;
  box-shadow: inset 0 0 0 1px var(--petrolio-500), var(--anello-focus);
}

.filtri-segnali {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 22px;
}

.filtri-segnali__separa {
  width: 1px;
  height: 20px;
  margin: 0 6px;
  background: var(--ardesia-200);
}

/* Tutti i filtri in una riga (Veicoli, 15/10/2026): la ricerca prende lo
   spazio che resta. Dove le pastiglie non ci stanno, vanno insieme sulla
   riga sotto. */
.barra-filtri--una-riga {
  margin-bottom: 22px;
}

.barra-filtri--una-riga .campo-cerca {
  flex: 1 1 200px;
}

.barra-filtri--una-riga .filtri-segnali {
  margin-bottom: 0;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 32px;
  padding: 0 12px;
  border: 0;
  border-radius: 999px;
  background: var(--superficie);
  box-shadow: inset 0 0 0 1px var(--ardesia-200);
  font-family: inherit;
  font-size: 0.8125rem;
  color: var(--ardesia-700);
  cursor: pointer;
  transition: background var(--transizione), box-shadow var(--transizione);
}

.chip:hover {
  box-shadow: inset 0 0 0 1px var(--ardesia-400);
}

.chip:focus-visible {
  outline: 2px solid var(--petrolio-500);
  outline-offset: 2px;
}

.chip[aria-pressed="true"] {
  background: var(--petrolio-50);
  box-shadow: inset 0 0 0 1.5px var(--petrolio-500);
  color: var(--petrolio-800);
  font-weight: 500;
}

.chip strong {
  font-weight: 600;
}

.chip__punto {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ardesia-300);
  flex-shrink: 0;
}

.chip__punto--priorita {
  background: var(--rame-600);
}

/* Nei filtri dei segnali ogni voce ha un'icona sua: il colore dice quanto
   pesa (errore, attenzione, priorita', neutro), l'icona dice che cosa e'.
   La priorita' e' un dischetto pieno come il cartellino «urgente» delle
   righe: un'icona colorata e basta, accanto all'attenzione, sembrava dello
   stesso colore. */
.chip__icona {
  flex-shrink: 0;
  font-size: 0.875rem;
  line-height: 1;
  color: var(--ardesia-400);
}

.chip__icona--errore {
  color: var(--errore-pieno);
}

.chip__icona--attenzione {
  color: var(--attenzione-pieno);
}

.chip__icona--priorita {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--ottone-400);
  color: var(--su-ottone);
  font-size: 0.625rem;
}

.chip__icona--neutro {
  color: var(--ardesia-500);
}

.chip__punto--attenzione {
  background: var(--attenzione-pieno);
}

.chip__punto--errore {
  background: var(--errore-pieno);
}

.chip--tenue {
  background: transparent;
  box-shadow: none;
  color: var(--testo-medio);
}

.chip--tenue:hover {
  background: var(--ardesia-100);
  box-shadow: none;
}

.chip--tenue[aria-pressed="true"] {
  background: var(--ardesia-150);
  box-shadow: none;
  color: var(--testo);
}

/* Le righe dell'elenco delle richieste. */

.elenco-ritiri {
  overflow: hidden;
}

.elenco-ritiri .tabella thead th {
  padding: 12px; /* di lato come le celle, che ne hanno 12 */
}

.elenco-ritiri .tabella thead th:first-child,
.elenco-ritiri .tabella tbody td:first-child {
  padding-left: 20px;
}

/* Il veicolo e' la colonna che si legge per prima, e la piu' lunga: le si
   da' lo spazio, e le altre vanno a capo prima di lei. */
.elenco-ritiri .tabella thead th:first-child {
  width: 33%;
}

.elenco-ritiri .tabella .fase {
  white-space: nowrap;
}

.elenco-ritiri .targa {
  height: 24px;
}

.elenco-ritiri .targa__testo {
  padding: 0 6px;
  font-size: 0.78125rem;
}

@media (max-width: 1180px) {
  .elenco-ritiri .tabella thead th,
  .elenco-ritiri .tabella tbody td {
    padding-left: 10px;
    padding-right: 10px;
  }

  .elenco-ritiri .tabella thead th:first-child {
    width: 30%;
  }
}

.elenco-ritiri .tabella tbody tr.riga--priorita {
  background: var(--rame-25);
}

.elenco-ritiri .tabella tbody tr.riga--priorita:hover {
  background: var(--rame-50);
}

/* Date e telefoni non vanno a capo: spezzati, non si leggono piu'. */
.elenco-ritiri .tabella .num {
  white-space: nowrap;
}

/* Il canale si', se e' lungo («Concessionaria fuori sede»): su una riga
   allargava la tabella oltre la scheda a 1440 pixel, e la fase restava
   tagliata (14/10/2026). Il pallino resta sulla prima riga. */
.elenco-ritiri .tabella .canale {
  align-items: baseline;
  white-space: normal;
}

.elenco-ritiri .tabella .canale__punto {
  transform: translateY(-1px);
}

/* La scheda di una richiesta che chi guarda non puo' correggere: il
   commerciale le vede tutte, ma corregge solo le sue (14/10/2026). */
.senza-correzioni [data-permesso~="ritiri.modificare"] {
  display: none !important;
}

/* I numeri delle richieste, come nella proposta A (14/10/2026): una riga
   sotto il titolo, la barra delle fasi da ritirare e la sua legenda. Si
   leggono e basta: i filtri sono nella scheda dell'elenco. */
.numeri-ritiri {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 24px;
}

.riga-numeri {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 22px;
  font-size: 0.90625rem;
  color: var(--testo-medio);
}

.riga-numeri strong {
  margin-right: 6px;
  font-family: var(--font-titoli);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--testo-titoli);
}

.riga-numeri__voce--err,
.riga-numeri__voce--err strong {
  color: var(--errore);
}

.riga-numeri__voce--att,
.riga-numeri__voce--att strong {
  color: var(--attenzione);
}

/* Sopra i grafici, i numeri dell'andamento: un gradino piu' piccoli. */
.riga-numeri--andamento {
  margin-bottom: 16px;
  font-size: 0.84375rem;
}

.riga-numeri--andamento strong {
  font-size: 1.0625rem;
}

.riga-numeri--andamento:empty {
  display: none;
}

.barra-fasi-ritiro {
  display: flex;
  gap: 3px;
  height: 14px;
}

.barra-fasi-ritiro > span {
  min-width: 6px;
  border-radius: 999px;
  transform-origin: left;
  animation: cresci 700ms var(--curva) var(--ritardo, 0ms) backwards;
}

.legenda-fasi-ritiro {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 22px;
  font-size: 0.84375rem;
  color: var(--testo-medio);
}

.legenda-fasi-ritiro strong {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--testo-titoli);
}

.legenda-fasi-ritiro__segno {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 8px;
  border-radius: 3px;
}

/* La testa della scheda dell'elenco: le fasi a linguetta, la ricerca e i
   filtri, sopra la tabella. */
.elenco-ritiri__testa {
  padding: 20px 20px 4px;
}

/* Le fasi e, per il commerciale, «Tutte · Le mie» sulla stessa riga. */
.elenco-ritiri__fasi {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
  margin-bottom: 16px;
}

.elenco-ritiri__fasi .segmentato--linguette {
  margin-bottom: 0;
}

/* «Le tue», in testa alla riga dei numeri quando l'elenco e' solo suo. */
.riga-numeri__chi {
  align-self: center;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--petrolio-100);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--petrolio-700);
}

.elenco-ritiri__testa .filtri-segnali {
  margin-bottom: 14px;
}

/* Le linguette delle fasi: larghe quanto il nome col suo numero. */
.segmentato--linguette {
  display: inline-flex;
  max-width: 100%;
  margin-bottom: 16px;
  overflow-x: auto;
  scrollbar-width: none;
}

.segmentato--linguette::-webkit-scrollbar {
  display: none;
}

.segmentato--linguette .segmentato__scelta {
  flex: none;
  padding: 0 14px;
  font-size: 0.84375rem;
}

.segmentato__conta {
  margin-left: 6px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--testo-tenue);
}

.segmentato__scelta[aria-pressed="true"] .segmentato__conta {
  color: var(--testo-medio);
}

/* Sul telefono le linguette scorrono di lato dentro la scheda invece di
   andare a capo; il bordo destro sfuma, e l'ultima si raggiunge. */
@media (max-width: 600px) {
  .segmentato--linguette {
    display: flex;
    padding-right: 32px;
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
    mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
  }

  .segmentato--linguette .segmentato__scelta {
    padding: 0 12px;
    white-space: nowrap;
  }
}

@media (max-width: 640px) {
  .elenco-ritiri__testa {
    padding: 16px 14px 2px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .barra-fasi-ritiro > span {
    animation: none;
  }
}

.cella-veicolo {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.cella-veicolo__testo {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.cella-veicolo__nome {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 8px;
  font-weight: 500;
}

.cella-due-righe {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.telefono {
  font-family: var(--font-mono);
  font-size: 0.78125rem;
  color: var(--testo-tenue);
  white-space: nowrap;
}

.vuoto-trattino {
  color: var(--ardesia-400);
}

/* Missione: i numeri del giro in una fascia sola ------------------------- */

.numeri-giro {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr)) 1.3fr;
  margin-bottom: 24px;
  background: var(--superficie);
  border-radius: var(--raggio-l);
  overflow: hidden;
  box-shadow: var(--ombra-scheda);
}

.numero-giro {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 20px 24px;
  box-shadow: inset 1px 0 0 var(--bordo-tenue);
  min-width: 0;
}

.numero-giro:first-child {
  box-shadow: none;
}

.numero-giro__etichetta {
  font-size: 0.78125rem;
  color: var(--testo-tenue);
}

.numero-giro__valore {
  font-size: 1.625rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.numero-giro__unita {
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--testo-medio);
}

.numero-giro--strada .numero-giro__valore,
.numero-giro--strada .numero-giro__unita {
  color: var(--ottanio-700);
}

.numero-giro--carico {
  gap: 6px;
  background: var(--superficie-alt);
}

.numero-giro--carico .tacche {
  margin-top: 2px;
}

.numero-giro__nota {
  font-size: 0.78125rem;
  color: var(--testo-medio);
}

.numero-giro--oltre .numero-giro__nota {
  color: var(--attenzione);
  font-weight: 500;
}

@media (max-width: 1280px) {
  .numeri-giro {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .numero-giro {
    box-shadow: inset 1px 0 0 var(--bordo-tenue), inset 0 1px 0 var(--bordo-tenue);
  }
}

@media (max-width: 640px) {
  .numeri-giro {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Il giro come percorso: sede, fermate, sede, con le tratte fra l'una e
   l'altra. */

.tragitto {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.tappa {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 16px;
}

.tappa__asse {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.tappa__segno {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--ottanio-600);
  box-shadow: 0 0 0 4px var(--ottanio-100);
  color: #fff;
  font-size: 0.875rem;
  font-weight: 600;
  display: grid;
  place-items: center;
}

.tappa__segno--sede {
  border-radius: 10px;
  background: var(--petrolio-800);
  box-shadow: none;
}

.tappa--completato .tappa__segno {
  background: var(--successo);
  box-shadow: 0 0 0 4px var(--successo-fondo);
}

.tappa--saltato .tappa__segno {
  background: var(--attenzione-pieno);
  box-shadow: 0 0 0 4px var(--attenzione-fondo);
  color: var(--ardesia-900);
}

.tappa__filo {
  flex: 1;
  width: 2px;
  min-height: 40px;
  background: var(--ottanio-400);
}

.tappa:last-child .tappa__filo {
  display: none;
}

.tappa__corpo {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 2px 0 26px;
  min-width: 0;
}

.tappa__corpo--sede {
  padding-top: 6px;
  gap: 2px;
}

.tappa__testa {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  flex-wrap: wrap;
}

.tappa__veicolo {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.tappa__nome {
  font-size: 0.9375rem;
  font-weight: 500;
}

.tappa__nome a {
  color: inherit;
}

.tappa__sotto {
  font-size: 0.8125rem;
  color: var(--testo-tenue);
}

.tappa__luogo {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.875rem;
  color: var(--ardesia-700);
}

.tappa__nota {
  color: var(--testo-medio);
}

.tappa__azioni {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.tappa__sposta {
  margin-left: auto;
  display: flex;
  gap: 4px;
}

.btn--icona {
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: 9px;
  background: var(--ardesia-50);
  color: var(--ardesia-700);
}

.btn--icona:hover:not(:disabled) {
  background: var(--ardesia-100);
  color: var(--testo);
}

.btn--icona:disabled {
  background: transparent;
  border-color: transparent;
  color: var(--ardesia-300);
  opacity: 1;
}

.tappa__tratta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--ottanio-700);
}

.tappa__tratta--dubbia {
  color: var(--attenzione);
}

/* --- Il giro in diretta ---------------------------------------------------
   Partito il giro, la scheda lo segue: il filo e' percorso fino alla
   prossima fermata, la prossima e' in rilievo, quelle dopo aspettano in
   grigio. Gli esiti arrivano dal telefono dell'autista. */

.in-diretta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--ottanio-50);
  box-shadow: inset 0 0 0 1px var(--ottanio-200);
  color: var(--ottanio-700);
  font-size: 0.8125rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.in-diretta__punto {
  width: 8px;
  height: 8px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--ottanio-500);
  box-shadow: 0 0 0 3px rgba(42, 133, 179, 0.22);
}

@media (prefers-reduced-motion: no-preference) {
  .in-diretta__punto {
    animation: battito 2.4s ease-in-out infinite;
  }
}

@keyframes battito {
  50% {
    box-shadow: 0 0 0 6px rgba(42, 133, 179, 0.08);
  }
}

/* La rilettura non riesce: il punto si ferma, e lo dice. */
.in-diretta--ferma {
  background: var(--attenzione-fondo);
  box-shadow: inset 0 0 0 1px var(--attenzione-bordo);
  color: var(--attenzione);
}

.in-diretta--ferma .in-diretta__punto {
  background: var(--attenzione-pieno);
  box-shadow: none;
  animation: none;
}

/* Il punto che batte dentro un bottone: «Tutte le missioni» nella
   pianificazione, quando un giro e' in strada e di la' lo si segue in
   diretta. Stessi colori della pastiglia «In diretta»; non alza il bottone. */
.btn__diretta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 2px;
  padding: 1px 8px 1px 7px;
  border-radius: 999px;
  background: var(--ottanio-50);
  box-shadow: inset 0 0 0 1px var(--ottanio-200);
  color: var(--ottanio-700);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.4;
  font-variant-numeric: tabular-nums;
}

.btn__diretta[hidden] {
  display: none;
}

.btn__diretta .in-diretta__punto {
  width: 7px;
  height: 7px;
}

.numeri-giro--esiti {
  grid-template-columns: 1.4fr repeat(4, minmax(0, 1fr));
}

.numero-giro--esiti {
  gap: 8px;
  background: var(--ottanio-25);
}

.esiti-giro {
  display: grid;
  gap: 4px;
}

.esiti-giro__tacca {
  height: 6px;
  border-radius: 3px;
  background: var(--ardesia-200);
}

.esiti-giro__tacca--completato {
  background: var(--successo-pieno);
}

.esiti-giro__tacca--saltato {
  background: var(--attenzione-pieno);
}

.numero-giro__valore--fatto {
  color: var(--successo);
}

.numero-giro__valore--saltato {
  color: var(--attenzione);
}

.tragitto--in-diretta .tappa__filo {
  width: 3px;
}

.tappa--da-percorrere .tappa__filo {
  background: var(--ardesia-200);
}

.tragitto--in-diretta .tappa--da_fare:not(.tappa--prossima) .tappa__segno {
  background: var(--ardesia-100);
  box-shadow: none;
  color: var(--ardesia-700);
}

.tappa--prossima .tappa__segno {
  box-shadow: 0 0 0 5px var(--ottanio-100), 0 0 0 10px rgba(232, 244, 252, 0.45);
}

.tappa__prossima {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: -4px;
  padding: 14px 16px;
  border-radius: 14px;
  background: var(--ottanio-25);
  box-shadow: inset 0 0 0 1.5px var(--ottanio-400);
}

.tappa--rientro-da-fare .tappa__segno--sede {
  background: var(--superficie);
  box-shadow: inset 0 0 0 2px var(--ardesia-300);
  color: var(--testo-tenue);
}

/* Perche' non e' stata caricata: le parole dell'autista, tra virgolette, e
   cosa ne e' stato della richiesta. */
.tappa__motivo {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--attenzione-velo);
  box-shadow: inset 0 0 0 1px var(--attenzione-bordo);
}

.tappa__motivo-testo {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.tappa__motivo-chi {
  font-size: 0.78125rem;
  font-weight: 600;
  color: var(--attenzione);
}

.tappa__motivo-cosa {
  font-size: 0.90625rem;
  color: var(--testo-forte);
}

.tappa__motivo-poi {
  font-size: 0.8125rem;
  color: var(--testo-medio);
}

.tappa__motivo .btn {
  flex-shrink: 0;
  white-space: nowrap;
}

/* --- Missioni: quelle in corso in testa ----------------------------------
   Ogni giro in strada e' una riga col suo binario: la sede, le fermate con
   il loro esito, il rientro. Il filo e' percorso fino alla prossima. */

.in-corso-adesso {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 30px;
}

.in-corso-adesso__testa {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.in-corso-adesso__testa h2,
.elenco-missioni__testa h2 {
  font-size: 1.0625rem;
}

.in-corso-adesso__giri {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.in-corso-adesso__vuoto {
  margin: 0;
  padding: 18px 22px;
  border-radius: var(--raggio-l);
  background: var(--superficie);
  box-shadow: var(--ombra-scheda);
  font-size: 0.875rem;
  color: var(--testo-medio);
}

.giro-in-corso {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr) auto;
  gap: 28px;
  align-items: center;
  padding: 22px 26px;
  border-radius: var(--raggio-l);
  background: var(--superficie);
  box-shadow: var(--ombra-rilievo);
}

.giro-in-corso__chi {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.giro-in-corso__autista {
  font-size: 1rem;
  font-weight: 600;
}

.giro-in-corso__sotto {
  font-size: 0.84375rem;
  color: var(--testo-medio);
}

.binario {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  align-items: start;
}

.binario__tappa {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 0 6px;
  min-width: 0;
  text-align: center;
}

.binario__filo {
  position: absolute;
  top: 13px;
  height: 2px;
  background: var(--ardesia-200);
}

.binario__filo--prima {
  left: 0;
  right: 50%;
}

.binario__filo--dopo {
  left: 50%;
  right: 0;
}

.binario__filo--fatto {
  background: var(--ottanio-400);
}

.binario__segno {
  position: relative;
  z-index: 1;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: 50%;
  box-shadow: 0 0 0 4px var(--superficie);
  font-size: 0.8125rem;
  font-weight: 600;
}

.binario__tappa--sede .binario__segno {
  border-radius: 8px;
  background: var(--petrolio-800);
  color: #fff;
}

.binario__tappa--rientro .binario__segno {
  border-radius: 8px;
  background: var(--superficie);
  box-shadow: inset 0 0 0 2px var(--ardesia-300), 0 0 0 4px var(--superficie);
  color: var(--testo-tenue);
}

.binario__tappa--caricata .binario__segno {
  background: var(--successo);
  color: #fff;
}

.binario__tappa--saltata .binario__segno {
  background: var(--attenzione-pieno);
  color: var(--ardesia-900);
}

.binario__tappa--prossima .binario__segno {
  background: var(--ottanio-600);
  box-shadow: 0 0 0 4px var(--superficie), 0 0 0 8px var(--ottanio-100);
}

.binario__tappa--da-fare .binario__segno {
  background: var(--ardesia-100);
  color: var(--ardesia-700);
}

.binario__punto {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #fff;
}

.binario__targa {
  max-width: 100%;
  font-family: var(--font-mono);
  font-size: 0.78125rem;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.binario__detto {
  font-size: 0.75rem;
  color: var(--testo-tenue);
}

/* «partito 08:04» e «rientro 10:22» stanno su una riga: la colonna della
   sede e' stretta, e le parole ne escono di poco. */
.binario__tappa--sede .binario__detto,
.binario__tappa--rientro .binario__detto {
  white-space: nowrap;
}

.binario__tappa--caricata .binario__detto {
  color: var(--successo);
}

.binario__tappa--saltata .binario__detto {
  color: var(--attenzione);
}

.binario__tappa--prossima .binario__detto {
  font-weight: 500;
  color: var(--ottanio-700);
}

.elenco-missioni__testa {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px 16px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.elenco-missioni__filtri {
  display: flex;
  align-items: center;
  gap: 10px 18px;
  flex-wrap: wrap;
}

.elenco-missioni__giorni {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8125rem;
  color: var(--testo-tenue);
}

.elenco-missioni__giorni input {
  width: auto;
  min-height: 34px;
  padding: 4px 8px;
  font-size: 0.8125rem;
}

.tabella .riga--in-corso td {
  background: var(--ottanio-25);
}

.tabella__codice {
  font-size: 0.84375rem;
  font-weight: 500;
}

.fermate-giro {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 0.8125rem;
  color: var(--ardesia-700);
  white-space: nowrap;
}

.tacche-fermate {
  display: inline-flex;
  gap: 3px;
}

.tacche-fermate__tacca {
  width: 18px;
  height: 6px;
  border-radius: 3px;
  background: var(--ardesia-200);
}

.tacche-fermate__tacca--completato {
  background: var(--successo-pieno);
}

.tacche-fermate__tacca--saltato {
  background: var(--attenzione-pieno);
}

@media (max-width: 1000px) {
  .giro-in-corso {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .giro-in-corso .btn {
    justify-self: start;
  }
}

/* Il diario del giro: l'ora, e il gesto detto come lo dice l'autista. */
.diario {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.diario__voce {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 10px;
}

.diario__ora {
  font-size: 0.8125rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--ardesia-700);
}

.diario__testo {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.diario__titolo {
  font-size: 0.875rem;
  font-weight: 500;
}

.diario__titolo--fatta {
  color: var(--successo);
}

.diario__titolo--saltata {
  color: var(--attenzione);
}

.diario__titolo--annullata {
  color: var(--errore);
}

.diario__dettaglio {
  font-size: 0.8125rem;
  color: var(--testo-medio);
}

.diario__diretta {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  gap: 6px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--ottanio-700);
  white-space: nowrap; /* va a capo il titolo, non «in diretta» */
}

.diario__diretta .in-diretta__punto {
  width: 7px;
  height: 7px;
}

.riquadro-lato .diario__piede {
  padding-top: 12px;
  border-top: 1px solid var(--bordo-tenue);
  font-size: 0.78125rem;
  color: var(--testo-tenue);
}

/* I costi come uno scontrino: le voci, un tratteggio, il totale. */

.scontrino {
  margin: 0;
  display: flex;
  flex-direction: column;
  font-variant-numeric: tabular-nums;
}

.scontrino > div {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: 9px 0;
}

.scontrino dt {
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--testo-medio);
}

.scontrino dd {
  margin: 0;
  font-size: 0.875rem;
}

.scontrino .scontrino__totale {
  margin-top: 4px;
  padding-top: 12px;
  border-top: 1px dashed var(--ardesia-300);
}

.scontrino__totale dt {
  font-weight: 600;
  color: var(--testo);
}

.scontrino__totale dd {
  font-size: 1rem;
  font-weight: 600;
}

/* Righe etichetta e valore, una sotto l'altra. */

.righe {
  margin: 0;
  display: flex;
  flex-direction: column;
}

.righe > div {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: 10px 0;
  border-bottom: 1px solid var(--bordo-tenue);
}

.righe > div:last-child {
  border-bottom: 0;
}

.righe dt {
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--testo-tenue);
}

.righe dd {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 500;
  text-align: right;
}

/* Le fasi del giro, in tacche. */

.fasi-giro {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}

.fasi-giro li {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.75rem;
  color: var(--testo-tenue);
}

.fasi-giro li::before {
  content: "";
  height: 5px;
  border-radius: 3px;
  background: var(--ardesia-150);
}

.fasi-giro .fasi-giro--fatta {
  color: var(--testo-medio);
}

.fasi-giro .fasi-giro--fatta::before,
.fasi-giro .fasi-giro--corrente::before {
  background: var(--petrolio-600);
}

.fasi-giro .fasi-giro--corrente {
  font-weight: 600;
  color: var(--petrolio-800);
}

/* In corso e' strada: il colore della logistica. */
.fasi-giro .fasi-giro--in-corso {
  color: var(--ottanio-700);
}

.fasi-giro .fasi-giro--in-corso::before {
  background: var(--ottanio-600);
}

/* ==========================================================================
   Fase 3 — Produzione
   ========================================================================== */

/* Riscontro della scansione ------------------------------------------------
   A tutto schermo e leggibile da due metri: chi scansiona ha le mani
   occupate e non torna indietro a controllare. Il colore non basta mai da
   solo, accanto c'e' sempre la parola. */

/* Lo stesso fondo dei tabelloni: il blu profondo del marchio con gli aloni
   azzurri, scuro per la poca luce dell'officina. */
.postazione {
  min-height: 100vh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  background-color: var(--blu-900);
  background-image: radial-gradient(1400px 900px at 100% -10%, rgba(42, 133, 179, 0.3), transparent 60%),
    radial-gradient(1100px 800px at -10% 110%, rgba(101, 169, 206, 0.14), transparent 60%),
    linear-gradient(180deg, #0d3a5c 0%, #0a2e4a 60%, #082841 100%);
  color: var(--testo-inverso);
}

.postazione__testa {
  padding: var(--sp-4) var(--sp-5);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  flex-wrap: wrap;
}

.postazione__chi {
  font-size: 1.25rem;
  font-weight: 600;
}

.postazione__attivita {
  font-size: 0.875rem;
  color: #9ccbe4;
}

.postazione__orologio {
  font-family: var(--font-mono);
  font-size: 1.25rem;
  font-variant-numeric: tabular-nums;
  color: #d0e9f6;
}

/* Le altre pagine del menu, accanto all'orologio: per il reparto «Stato del
   motore», lo stesso account sul tablet del meccanico. */
.postazione__destra {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  flex-wrap: wrap;
}

.postazione__pagine {
  display: flex;
  gap: var(--sp-2);
  flex-wrap: wrap;
}

.postazione__pagina {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.45rem 0.9rem;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  color: #d0e9f6;
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: none;
}

.postazione__pagina:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}

.postazione__pagina:focus-visible {
  outline: 2px solid #65a9ce;
  outline-offset: 2px;
}

/* Il corpo: i tre gesti, il lavoro in corso e cosa fare dopo, le ultime
   scansioni. Il riscontro di una scansione lo copre per qualche secondo. */
.postazione__corpo {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-height: 0;
  padding: 22px var(--sp-5) 18px;
}

.postazione__etichetta {
  margin: 0 0 12px;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #9ccbe4;
}

.gesti {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.gesto {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
  padding: 14px 18px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.04);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.gesto__segno {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  font-size: 1rem;
  font-weight: 700;
}

.gesto--fatto .gesto__segno {
  background: var(--successo-pieno);
  color: #fff;
}

.gesto--attivo {
  background: rgba(101, 169, 206, 0.12);
  box-shadow: inset 0 0 0 2px var(--ottanio-400);
}

.gesto--attivo .gesto__segno {
  background: var(--ottanio-400);
  color: var(--ottanio-900);
}

.gesto__testo {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.gesto__cosa {
  font-size: 0.8125rem;
  color: #9ccbe4;
}

.gesto__valore {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 1.0625rem;
  font-weight: 600;
}

.postazione__lavoro {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: 18px;
  flex: 1;
  min-height: 0;
}

.in-corso {
  padding: 24px 28px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.05);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.09);
}

.in-corso .postazione__etichetta {
  color: var(--ottanio-300);
}

.in-corso__lavoro {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.in-corso__cosa {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px 18px;
}

.in-corso__descrizione {
  font-size: 1.25rem;
  color: #d0e9f6;
}

.in-corso__tempo {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px 16px;
}

.in-corso__cronometro {
  font-size: clamp(3.5rem, 8vw, 6rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}

.in-corso__standard {
  font-size: 1.25rem;
  color: #9ccbe4;
}

.in-corso__barra {
  display: flex;
  height: 12px;
  border-radius: 6px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.12);
}

.in-corso__barra > span {
  border-radius: 6px;
  background: var(--successo-pieno);
}

.in-corso__lavoro--oltre .in-corso__barra > span {
  background: var(--errore-pieno);
}

.in-corso__classe {
  font-size: 1rem;
  font-weight: 500;
  color: #9ed9b8;
}

.in-corso__lavoro--oltre .in-corso__classe {
  color: #f4a7ac;
}

.in-corso__dalle {
  font-size: 0.9375rem;
  color: #9ccbe4;
}

.in-corso__altre {
  margin: 14px 0 0;
  font-size: 0.9375rem;
  color: #d0e9f6;
}

.in-corso__vuoto {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 12px 0;
}

.in-corso__vuoto .bi {
  font-size: 3rem;
  line-height: 1;
  color: var(--ottanio-300);
}

.in-corso__vuoto strong {
  font-size: 2.25rem;
  font-weight: 600;
}

.in-corso__vuoto span {
  font-size: 1.125rem;
  color: #d0e9f6;
}

.adesso-puoi__elenco {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.adesso-puoi__voce {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.04);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.adesso-puoi__voce > .bi {
  flex-shrink: 0;
  font-size: 1.375rem;
  color: #9ccbe4;
}

.adesso-puoi__voce > span {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.adesso-puoi__voce strong {
  font-size: 1rem;
  font-weight: 600;
}

.adesso-puoi__voce > span > span {
  font-size: 0.9375rem;
  color: #9ccbe4;
}

.adesso-puoi__voce--principale {
  background: rgba(101, 169, 206, 0.14);
  box-shadow: inset 0 0 0 2px var(--ottanio-400);
}

.adesso-puoi__voce--principale > .bi {
  color: var(--ottanio-300);
}

.adesso-puoi__voce--principale strong {
  font-size: 1.125rem;
}

.adesso-puoi__voce--principale > span > span {
  color: #d0e9f6;
}

.ultime-scansioni {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px 22px;
}

.ultime-scansioni .postazione__etichetta {
  margin: 0;
}

.ultime-scansioni__elenco {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 22px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.9375rem;
  color: #d0e9f6;
}

.ultime-scansioni__elenco .mono {
  color: #9ccbe4;
}

.ultime-scansioni__oltre {
  color: var(--rame-300);
}

.ultime-scansioni__vuoto {
  color: #9ccbe4;
}

.riscontro {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: grid;
  place-content: center;
  gap: var(--sp-3);
  padding: var(--sp-6);
  text-align: center;
  cursor: pointer;
}

.riscontro[hidden] {
  display: none;
}

/* I colori di stato della proposta A, scuri: il bianco sopra supera 6:1. */
.riscontro--successo { background: #17633f; }
.riscontro--errore { background: #9e2530; }
.riscontro--attenzione { background: #7f4d00; }
.riscontro--ignorato { background: #2c3138; }

.riscontro__icona {
  font-size: 4rem;
  line-height: 1;
}

.riscontro__titolo {
  font-size: clamp(1.75rem, 5vw, 3rem);
  font-weight: 700;
  line-height: 1.1;
  word-break: break-word;
}

.riscontro__dettaglio {
  font-size: clamp(1rem, 2.5vw, 1.375rem);
  opacity: 0.9;
}

.riscontro__avvisi {
  margin-top: var(--sp-3);
  font-size: 0.9375rem;
  opacity: 0.85;
  display: grid;
  gap: var(--sp-1);
}

.postazione__piede {
  padding: var(--sp-4) var(--sp-5);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  display: flex;
  gap: var(--sp-3);
  align-items: center;
  flex-wrap: wrap;
}

.postazione__campo {
  flex: 1;
  min-width: 220px;
}

.postazione__campo input {
  width: 100%;
  /* Bersaglio alto: si usa coi guanti, e il lettore scrive qui dentro. */
  min-height: 56px;
  font-size: 1.25rem;
  font-family: var(--font-mono);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: var(--testo-inverso);
  border-radius: var(--raggio);
  padding: 0 var(--sp-4);
}

.postazione__campo input:focus {
  outline: 2px solid var(--primario-chiaro);
  outline-offset: 2px;
}

@media (max-width: 900px) {
  .gesti,
  .postazione__lavoro {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Lo schermo davanti a un posto, e il tabellone della fase ------------------
   L'impaginazione dei tabelloni che il cliente ha oggi in officina (foto del
   12/10/2026): una fascia in alto con il nome del posto («DEMOLIZIONE 2»),
   al centro il tempo grande con il suo colore, il veicolo, lo standard e la
   fascia a parole, sotto i riquadri del motore e dei pezzi da smontare, lo
   standard nella fascia in basso. Le misure seguono la larghezza dello
   schermo: si legge da due metri e oltre. Il colore non e' mai solo: accanto
   c'e' la parola della fascia.

   Lo stile e' la proposta A girata al buio (13/10/2026): in officina la luce
   e' poca, e un fondo chiaro abbaglia e spegne i colori tenui. Il fondo e'
   il blu profondo del marchio con gli aloni azzurri e il simbolo in
   filigrana, le fasce sono il blu del marchio, i riquadri vetro scuro, il
   testo chiaro. I tre tempi hanno i colori degli stati accesi, che sul blu
   superano 4,5:1; targa e codice a barre restano bianchi come quelli veri. */

.schermo {
  --sch-fondo: #0a2e4a;
  --sch-fascia: linear-gradient(100deg, #0d3a5c 0%, #024c7b 48%, #0d6896 100%);
  --sch-linea: rgba(156, 203, 228, 0.22);
  --sch-pannello: rgba(255, 255, 255, 0.07);
  --sch-testo: #f7fcff;
  --sch-tenue: #9ccbe4;
  --sch-normale: #4cc38a;
  --sch-attenzione: #f2b33d;
  --sch-critico: #ff6e6e;
  /* Il testo scuro sui pieni accesi: il riscontro di una lettura. */
  --sch-su-pieno: #0a2e4a;
  margin: 0;
  min-height: 100vh;
  background-color: var(--sch-fondo);
  background-image: url("../img/simbolo-giorgi-filigrana.svg"),
    radial-gradient(1400px 900px at 100% -10%, rgba(42, 133, 179, 0.32), transparent 60%),
    radial-gradient(1100px 800px at -10% 110%, rgba(101, 169, 206, 0.16), transparent 60%),
    linear-gradient(180deg, #0d3a5c 0%, #0a2e4a 60%, #082841 100%);
  background-repeat: no-repeat;
  background-position: right -9vw bottom -16vh, 0 0, 0 0, 0 0;
  background-size: 42vw auto, auto, auto, auto;
  color: var(--sch-testo);
}

@media (min-width: 900px) {
  /* Sul televisore niente barre di scorrimento: nessuno le userebbe. La
     pagina e' alta quanto lo schermo, e la lista dei pezzi prende lo spazio
     che resta. */
  .schermo {
    overflow: hidden;
  }

  .schermo .schermo__pagina {
    height: 100vh;
  }

  .schermo__corpo--posto {
    overflow: hidden;
  }

  .schermo__corpo--posto .riquadri-schermo {
    flex: 1 1 auto;
    min-height: 0;
  }

  .riquadri-schermo--lista .pezzi-schermo {
    flex: 1 1 auto;
    min-height: 0;
  }

  /* La lista riempie la sua colonna e va a capo in colonne: se non ci sta,
     il testo si stringe (`adatta`), nessuno scorre la pagina. */
  .pezzi-schermo__voci {
    flex: 1 1 auto;
    min-height: 0;
    column-fill: auto;
    overflow: hidden;
  }

  /* Il veicolo a sinistra, la lista a destra (15/10/2026). */
  .schermo__corpo.schermo__corpo--con-lista {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    align-items: stretch;
  }
}

.schermo--fermo,
.schermo--fermo * {
  cursor: none;
}

.schermo__pagina {
  min-height: 100vh;
  box-sizing: border-box;
  display: grid;
  grid-template-rows: auto 1fr auto;
}

/* Le due fasce, in alto e in basso. */
.schermo__fascia {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  padding: clamp(10px, 1.3vw, 26px) clamp(14px, 2vw, 40px);
  background: var(--sch-fascia);
  color: #fff;
}

.schermo__fascia--testa {
  box-shadow: 0 1px 0 var(--sch-linea), 0 12px 32px -18px rgba(0, 0, 0, 0.6);
}

.schermo__fascia--piede {
  box-shadow: 0 -1px 0 var(--sch-linea);
}

.schermo__titolo {
  grid-column: 2;
  margin: 0;
  font-family: var(--font-titoli);
  font-size: clamp(1.4rem, 3.6vw, 4.6rem);
  font-stretch: var(--largo);
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.05;
  text-align: center;
  text-transform: uppercase;
  color: #fff;
}

.schermo__ora {
  grid-column: 3;
  justify-self: end;
  font-size: clamp(1rem, 1.8vw, 2.2rem);
  font-variant-numeric: tabular-nums;
  color: rgba(255, 255, 255, 0.78);
}

/* A sinistra nella fascia: la rete persa e la pistola del posto. */
.schermo__testa-lato {
  grid-column: 1;
  justify-self: start;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.schermo__pistola {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.78);
  font-size: clamp(0.85rem, 1.1vw, 1.3rem);
}

.schermo__pistola--pronta {
  background: rgba(46, 154, 101, 0.35);
  color: #fff;
}

/* Il campo in cui scrive la pistola: c'e', ha il fuoco, non si vede. */
.schermo__lettore {
  position: fixed;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  padding: 0;
  border: 0;
  opacity: 0;
}

/* Lo schermo di un posto gia' aperto su un altro dispositivo (14/10/2026):
   un velo su tutto, leggibile da lontano, e la pistola non viene ricevuta. */
.schermo__bloccato {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  padding: 4vh 6vw;
  background: rgba(7, 11, 15, 0.94);
  color: var(--sch-testo, #f7fcff);
  text-align: center;
}

.schermo__bloccato[hidden] {
  display: none;
}

.schermo__bloccato-corpo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.4vh;
  max-width: 60rem;
}

.schermo__bloccato-corpo .bi {
  font-size: clamp(3rem, 8vh, 6rem);
  color: #f2b33d;
}

.schermo__bloccato-corpo h2 {
  margin: 0;
  font-family: var(--font-titoli);
  font-size: clamp(2rem, 6vh, 4rem);
  font-weight: 700;
  color: #fff;
}

.schermo__bloccato-corpo p {
  margin: 0;
  font-size: clamp(1.125rem, 3vh, 1.75rem);
  line-height: 1.45;
  color: rgba(247, 252, 255, 0.85);
}

.schermo__bloccato-riprova {
  min-height: 56px;
  padding: 0 32px;
  border: 0;
  border-radius: 14px;
  background: #fff;
  font: inherit;
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--primario);
  cursor: pointer;
}

/* Il riscontro di una scansione, leggibile da lontano, sopra il tabellone. */
.schermo__riscontro {
  position: fixed;
  top: 12vh;
  left: 50%;
  z-index: 50;
  display: grid;
  gap: 0.35em;
  max-width: min(90vw, 1400px);
  padding: clamp(14px, 2vw, 36px) clamp(20px, 3vw, 56px);
  border-radius: clamp(10px, 1.2vw, 22px);
  background: var(--petrolio-200);
  color: var(--sch-su-pieno);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.2), 0 24px 70px rgba(0, 0, 0, 0.55);
  text-align: center;
  transform: translateX(-50%);
}

.schermo__riscontro strong {
  font-size: clamp(1.6rem, 3.6vw, 4.4rem);
  line-height: 1.1;
}

.schermo__riscontro span {
  font-size: clamp(1.1rem, 2vw, 2.4rem);
}

.schermo__riscontro small {
  font-size: clamp(0.9rem, 1.4vw, 1.6rem);
  opacity: 0.9;
}

.schermo__riscontro--successo {
  background: var(--sch-normale);
}

.schermo__riscontro--attenzione {
  background: var(--sch-attenzione);
}

.schermo__riscontro--errore {
  background: var(--sch-critico);
}

/* Lo schermo diviso (15/10/2026): un posto che regge piu' veicoli insieme,
   come la bonifica, ne mostra uno per meta' schermo. Tempi e targhe un po'
   piu' piccoli, perche' due stiano nella larghezza. */
.schermo__corpo.schermo__corpo--diviso {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
}

.lavoro-diviso {
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 1.2vw, 24px);
  min-width: 0;
  min-height: 0;
  padding: clamp(10px, 1.2vw, 24px);
  border: 1px solid var(--sch-linea);
  border-radius: clamp(10px, 1vw, 20px);
  background: rgba(255, 255, 255, 0.03);
}

.schermo__corpo--diviso .lavoro__cronometro {
  font-size: clamp(2.6rem, 7vw, 9.5rem);
}

.schermo__corpo--diviso .lavoro__modello {
  font-size: clamp(1rem, 1.6vw, 2.2rem);
}

.schermo__corpo--diviso .targa--grande .targa__testo {
  font-size: clamp(1.3rem, 2.4vw, 3.4rem);
}

.schermo__corpo--diviso .riquadri-schermo {
  flex: 1 1 auto;
  min-height: 0;
}

/* In bonifica il veicolo e' solo, senza motore ne' pezzi: al centro dello
   schermo, e di ogni meta' quando sono due (16/10/2026). */
.schermo__corpo--solo-veicolo,
.schermo__corpo--solo-veicolo .lavoro-diviso {
  justify-content: center;
}

/* Sopra il titolo, quando la lettura arriva dal ricevitore: la pistola
   (15/10/2026). */
.schermo__riscontro em {
  font-size: clamp(0.9rem, 1.4vw, 1.6rem);
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.85;
}

/* --- Il foglio del posto (15/10/2026) ------------------------------------
   Allo smontaggio, sotto il tabellone, uno schermo con un computer e un
   mouse: il foglio del veicolo al posto. Dania, la sera stessa: «non deve
   avere l'impaginazione dei tabelloni, deve essere una tabella con pezzo per
   riga». Quindi lo stile delle pagine, chiaro; una testata con il posto e il
   veicolo, la tabella dei pezzi e, accanto, il materiale recuperato.
   Bottoni grandi: si clicca in piedi, con i guanti tolti di fretta. */

.foglio-posto-pagina {
  height: auto;
  min-height: 100vh;
  font-size: 1rem;
}

.foglio-posto__testata {
  position: sticky;
  top: 0;
  z-index: 3;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--sp-3) var(--sp-5);
  padding: 12px clamp(16px, 2vw, 32px);
  background: var(--superficie);
  box-shadow: 0 1px 0 var(--bordo), 0 8px 24px -18px rgba(13, 58, 92, 0.45);
}

.foglio-posto__dove {
  display: grid;
}

.foglio-posto__posto {
  margin: 0;
  font-family: var(--font-titoli);
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--testo-titoli);
}

.foglio-posto__cosa {
  font-size: 0.8125rem;
  color: var(--testo-tenue);
}

.foglio-posto__veicolo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2) var(--sp-4);
  min-width: 0;
}

.foglio-posto__modello {
  display: grid;
  min-width: 0;
}

.foglio-posto__modello strong {
  font-family: var(--font-titoli);
  font-size: 1.125rem;
  color: var(--testo-forte);
}

.foglio-posto__modello span {
  font-size: 0.875rem;
  color: var(--testo-tenue);
}

.foglio-posto__schede {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

.foglio-posto__destra {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}

.foglio-posto__ora {
  font-family: var(--font-titoli);
  font-size: 1.375rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--testo-titoli);
}

.foglio-posto__rete {
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--attenzione-fondo);
  color: var(--attenzione);
  font-size: 0.875rem;
}

.foglio-posto__rete[hidden] {
  display: none;
}

.foglio-posto {
  max-width: 1700px;
  margin: 0 auto;
  padding: clamp(14px, 1.6vw, 28px) clamp(16px, 2vw, 32px) 40px;
}

.foglio-posto__griglia {
  display: grid;
  gap: clamp(14px, 1.6vw, 24px);
  align-items: start;
}

@media (min-width: 1100px) {
  .foglio-posto__griglia {
    grid-template-columns: minmax(0, 1fr) minmax(320px, 400px);
  }

  /* Il materiale resta a vista mentre la tabella scorre. */
  .foglio-posto__materiale {
    position: sticky;
    top: 96px;
  }
}

.foglio-posto__pezzi-testa {
  justify-content: space-between;
}

.foglio-posto__conto {
  font-size: 0.9375rem;
  color: var(--testo-medio);
  font-variant-numeric: tabular-nums;
}

.foglio-posto__conto strong {
  font-family: var(--font-titoli);
  font-size: 1.75rem;
  color: var(--testo-titoli);
}

.foglio-posto__barra {
  height: 8px;
  margin: 0 24px 14px;
  border-radius: 999px;
  background: var(--fondo-alt);
  overflow: hidden;
}

.foglio-posto__barra span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--successo-pieno);
}

.foglio-posto__tabella {
  font-size: 1rem;
}

.foglio-posto__tabella td {
  padding: 10px var(--sp-3);
  border-bottom: 1px solid var(--bordo-tenue);
  vertical-align: middle;
}

.foglio-posto__gruppo th {
  padding: 16px var(--sp-3) 6px;
  border-bottom: 1px solid var(--bordo);
  background: transparent;
  text-align: left;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--testo-tenue);
}

.foglio-posto__pezzo {
  min-width: 14em;
}

.foglio-posto__nome {
  margin-right: 0.5em;
  font-weight: 700;
  color: var(--testo-forte);
}

.foglio-posto__quando {
  width: 1%;
  white-space: nowrap;
  color: var(--testo-tenue);
  font-variant-numeric: tabular-nums;
}

/* La riga fatta si fa da parte: il colore dell'esito sul nome, a sinistra. */
.foglio-posto__riga--smontato .foglio-posto__nome {
  color: var(--successo);
}

.foglio-posto__riga--rovinato .foglio-posto__nome {
  color: var(--attenzione);
}

.foglio-posto__riga--mancante .foglio-posto__nome,
.foglio-posto__riga--saltato .foglio-posto__nome {
  color: var(--testo-tenue);
  text-decoration: line-through;
}

/* I tre esiti: un gruppo di bottoni, quello scelto pieno nel suo colore. */
.esiti {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
}

.esito {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  min-height: 40px;
  padding: 6px 14px;
  border: 1px solid var(--bordo-forte);
  border-radius: var(--raggio-s);
  background: var(--superficie);
  color: var(--testo-medio);
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transizione);
}

.esito:hover:not(:disabled) {
  border-color: var(--ardesia-500);
  color: var(--testo-forte);
}

.esito:focus-visible {
  outline: none;
  box-shadow: var(--anello-focus);
}

.esito:disabled {
  cursor: default;
  opacity: 0.55;
}

.esito--smontato[aria-pressed="true"] {
  border-color: var(--successo-pieno);
  background: var(--successo-pieno);
  color: #fff;
}

.esito--rovinato[aria-pressed="true"] {
  border-color: var(--attenzione-pieno);
  background: var(--attenzione-pieno);
  color: #23180a;
}

.esito--mancante[aria-pressed="true"] {
  border-color: var(--ardesia-600);
  background: var(--ardesia-600);
  color: #fff;
}

.foglio-posto__campi {
  display: grid;
  gap: var(--sp-4);
}

.foglio-posto__campi .campo {
  margin: 0;
}

.foglio-posto__terna {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-3);
}

.foglio-posto__coppia {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-3);
}

.foglio-posto__contatore {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) 40px;
  align-items: center;
  gap: 4px;
}

.foglio-posto__contatore .btn {
  justify-content: center;
  min-height: 40px;
  padding: 0;
  border: 1px solid var(--bordo-forte);
  background: var(--superficie);
  font-size: 1.25rem;
}

.foglio-posto__contatore output {
  font-family: var(--font-titoli);
  font-size: 1.25rem;
  font-weight: 700;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.foglio-posto__chiudi {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: 14px 24px 20px;
  border-top: 1px solid var(--bordo-tenue);
}

.foglio-posto__vuoto {
  display: grid;
  justify-items: start;
  gap: var(--sp-3);
}

.foglio-posto__vuoto p {
  margin: 0;
  color: var(--testo-medio);
}

.foglio-posto__libero {
  max-width: 640px;
  margin: 8vh auto 0;
  text-align: center;
}

.foglio-posto__avviso {
  position: fixed;
  left: 50%;
  bottom: 24px;
  z-index: 10;
  transform: translateX(-50%);
  max-width: min(90vw, 560px);
  padding: 12px 20px;
  border-radius: var(--raggio);
  box-shadow: var(--ombra-scheda);
  font-weight: 600;
}

.foglio-posto__avviso--errore {
  background: var(--errore-fondo);
  color: var(--errore);
}

.foglio-posto__avviso--successo {
  background: var(--successo-fondo);
  color: var(--successo);
}

.foglio-posto__avviso[hidden] {
  display: none;
}

@media (max-width: 720px) {
  .foglio-posto__testata {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .foglio-posto__veicolo {
    grid-column: 1 / -1;
    grid-row: 2;
  }
}

.schermo__rete {
  justify-self: start;
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(230, 184, 90, 0.22);
  color: var(--ottone-200);
  font-size: clamp(0.85rem, 1.1vw, 1.3rem);
}

.schermo__std {
  grid-column: 2;
  display: grid;
  justify-items: center;
  font-family: var(--font-titoli);
  font-size: clamp(1.6rem, 3vw, 3.8rem);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.schermo__std small {
  font-family: var(--font);
  font-size: 0.32em;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
}

.schermo__piede-lato {
  grid-column: 1;
  font-size: clamp(0.85rem, 1.1vw, 1.4rem);
  color: rgba(255, 255, 255, 0.78);
}

.schermo__piede-lato--destra {
  grid-column: 3;
  justify-self: end;
  text-align: right;
}

.schermo__corpo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(10px, 1.4vw, 28px);
  min-height: 0;
  padding: clamp(14px, 2vw, 40px);
}

.schermo__segno {
  display: inline-block;
  margin-left: 0.4em;
  padding: 0.12em 0.6em;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  font-size: 0.85em;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  vertical-align: middle;
  color: var(--petrolio-200);
}

.schermo__segno--pausa {
  background: rgba(242, 179, 61, 0.2);
  color: #f6cb76;
}

.schermo__intero {
  position: fixed;
  left: 20px;
  top: 20px;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  font: inherit;
  cursor: pointer;
}

/* Il display delle regole sopra vincerebbe sull'attributo hidden: senza
   queste righe il riscontro vuoto, la pistola e il pulsante restano a vista. */
.schermo__pistola[hidden],
.schermo__riscontro[hidden],
.schermo__intero[hidden] {
  display: none;
}

/* La targa vera, alla misura dello schermo. */
.schermo .targa--grande {
  height: clamp(44px, 5vw, 110px);
  border-radius: clamp(8px, 0.7vw, 12px);
}

.schermo .targa--grande .targa__banda {
  width: clamp(16px, 1.5vw, 32px);
}

.schermo .targa--grande .targa__testo {
  padding: 0 0.45em;
  font-size: clamp(1.6rem, 3.4vw, 4.8rem);
}

/* --- Lo schermo di un posto: il veicolo, al centro --------------------- */

.lavoro {
  --fascia: var(--sch-normale);
  display: grid;
  justify-items: center;
  gap: clamp(4px, 0.6vw, 12px);
  width: 100%;
  text-align: center;
}

.lavoro--attenzione {
  --fascia: var(--sch-attenzione);
}

.lavoro--critico {
  --fascia: var(--sch-critico);
}

.lavoro__etichetta {
  font-size: clamp(0.9rem, 1.3vw, 1.7rem);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sch-tenue);
}

.lavoro__cronometro {
  font-family: var(--font-titoli);
  font-size: clamp(3.4rem, 11vw, 15rem);
  font-weight: 700;
  line-height: 0.95;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  color: var(--fascia);
}

.lavoro__veicolo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5em 1em;
}

.lavoro__modello {
  font-size: clamp(1.1rem, 2.4vw, 3.2rem);
  font-weight: 700;
}

.lavoro__stato {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 0.4em 1.2em;
  font-size: clamp(0.95rem, 1.5vw, 2rem);
  color: var(--sch-tenue);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.lavoro__fascia {
  color: var(--fascia);
}

.lavoro__barra {
  width: min(100%, 60vw);
  height: clamp(6px, 0.7vw, 14px);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  overflow: hidden;
}

.lavoro__barra > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--fascia);
}

/* Con la lista dei pezzi il tempo resta grande, ma lascia lo spazio. */
.lavoro--compatto {
  gap: clamp(2px, 0.4vw, 8px);
}

.lavoro--compatto .lavoro__cronometro {
  font-size: clamp(2.6rem, 7vw, 9.5rem);
}

.lavoro--compatto .targa--grande {
  height: clamp(36px, 3.6vw, 80px);
}

.lavoro--compatto .targa--grande .targa__testo {
  font-size: clamp(1.3rem, 2.4vw, 3.4rem);
}

.lavoro--compatto .lavoro__modello {
  font-size: clamp(1rem, 1.8vw, 2.4rem);
}

/* Il motore su una riga sola, quando sotto c'e' la lista. */
.riquadri-schermo--lista .riquadro-schermo--scuro {
  flex-direction: row;
  align-items: baseline;
  gap: 1em;
  padding-top: clamp(8px, 0.8vw, 16px);
  padding-bottom: clamp(8px, 0.8vw, 16px);
}

.riquadri-schermo--lista .riquadro-schermo--scuro .riquadro-schermo__valore {
  font-size: clamp(1.1rem, 1.9vw, 2.6rem);
}

/* I riquadri sotto il tempo, di vetro scuro: il motore nel Blu Materia, i
   pezzi piu' chiari, come sui tabelloni di oggi. */
.riquadri-schermo {
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 0.8vw, 16px);
  width: min(100%, 62vw);
}

.riquadro-schermo {
  display: flex;
  flex-direction: column;
  gap: 0.25em;
  padding: clamp(10px, 1.1vw, 22px) clamp(14px, 1.6vw, 32px);
  border-radius: clamp(10px, 0.9vw, 18px);
  text-align: left;
}

.riquadro-schermo--scuro {
  background: rgba(2, 76, 123, 0.62);
  box-shadow: inset 0 0 0 1px rgba(156, 203, 228, 0.3);
  color: #fff;
}

.riquadro-schermo--chiaro {
  background: rgba(208, 233, 246, 0.12);
  box-shadow: inset 0 0 0 1px rgba(208, 233, 246, 0.24);
  color: var(--sch-testo);
}

.riquadro-schermo--letta {
  background: rgba(76, 195, 138, 0.14);
  box-shadow: inset 0 0 0 1px rgba(76, 195, 138, 0.5);
  color: #8fe0b5;
}

.riquadro-schermo--attesa {
  background: rgba(242, 179, 61, 0.14);
  box-shadow: inset 0 0 0 1px rgba(242, 179, 61, 0.5);
  color: #f6cb76;
}

.riquadro-schermo__nome {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4em 1em;
  font-size: clamp(0.75rem, 0.95vw, 1.2rem);
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.85;
}

.riquadro-schermo__valore {
  font-family: var(--font-titoli);
  font-size: clamp(1.3rem, 2.4vw, 3.2rem);
  font-weight: 700;
  line-height: 1.1;
}

.riquadro-schermo__nota {
  font-size: clamp(0.9rem, 1.2vw, 1.6rem);
  opacity: 0.85;
}

.riquadro-schermo--letta .riquadro-schermo__nota,
.riquadro-schermo--attesa .riquadro-schermo__nota {
  color: var(--sch-testo);
}

/* --- La lista dei pezzi (15/10/2026) --------------------------------------
   Dania: «mettila sulla destra». Il veicolo a sinistra, la lista nella sua
   colonna, alta quanto lo schermo: il titolo e quanti ne restano, la barra
   dei fatti, una riga per pezzo con la casella vuota di una lista da
   spuntare, i fatti in fondo in una riga sola. */
.schermo__colonna-veicolo {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(10px, 1.4vw, 28px);
  min-width: 0;
}

.schermo__colonna-veicolo .riquadri-schermo {
  flex: none;
  width: 100%;
}

.pezzi-schermo {
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 0.9vw, 18px);
  min-width: 0;
  min-height: 0;
  padding: clamp(14px, 1.6vw, 32px) clamp(16px, 1.8vw, 36px);
  border-radius: clamp(10px, 1vw, 20px);
  background: rgba(208, 233, 246, 0.1);
  box-shadow: inset 0 0 0 1px rgba(208, 233, 246, 0.22);
  text-align: left;
}

.pezzi-schermo__testa {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.3em 1em;
}

.pezzi-schermo__titolo {
  margin: 0;
  font-family: var(--font-titoli);
  font-size: clamp(1rem, 1.5vw, 2rem);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sch-testo);
}

.pezzi-schermo__conta {
  font-size: clamp(0.95rem, 1.3vw, 1.7rem);
  color: var(--sch-tenue);
  font-variant-numeric: tabular-nums;
}

.pezzi-schermo__conta strong {
  font-family: var(--font-titoli);
  font-size: 1.5em;
  color: var(--sch-testo);
}

.pezzi-schermo__barra {
  flex: none;
  height: clamp(6px, 0.6vw, 12px);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  overflow: hidden;
}

.pezzi-schermo__barra > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--sch-normale);
}

.pezzi-schermo__voci {
  column-width: 15em;
  column-gap: 2em;
  font-size: clamp(1.1rem, 1.6vw, 2.2rem);
  line-height: 1.25;
}

.pezzi-schermo__linea {
  margin: 0.2em 0 0.15em;
  font-size: 0.55em;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sch-tenue);
  break-after: avoid;
}

.pezzi-schermo__lista {
  margin: 0 0 0.6em;
  padding: 0;
  list-style: none;
}

.pezzo-schermo {
  display: flex;
  align-items: center;
  gap: 0.55em;
  padding: 0.28em 0;
  border-bottom: 1px solid var(--sch-linea);
  font-weight: 700;
  break-inside: avoid;
}

.pezzo-schermo__casella {
  flex: none;
  box-sizing: border-box;
  width: 0.8em;
  height: 0.8em;
  border: 0.12em solid rgba(208, 233, 246, 0.7);
  border-radius: 0.18em;
}

.pezzo-schermo--obbligo .pezzo-schermo__casella,
.pezzi-schermo__legenda .pezzo-schermo__casella {
  border-color: var(--sch-attenzione);
}

.pezzo-schermo__nome {
  min-width: 0;
}

.pezzi-schermo__legenda {
  display: flex;
  align-items: center;
  gap: 0.5em;
  margin: 0;
  font-size: clamp(0.85rem, 1.1vw, 1.4rem);
  font-weight: 700;
  color: #f6cb76;
}

.pezzi-schermo__fatti {
  flex: none;
  margin: 0;
  font-size: clamp(0.9rem, 1.15vw, 1.5rem);
  color: var(--sch-tenue);
}

.pezzi-schermo__fatti i {
  color: var(--sch-normale);
}

.pezzi-schermo__finiti {
  margin: 0;
  font-family: var(--font-titoli);
  font-size: clamp(1.3rem, 2.2vw, 3rem);
  font-weight: 700;
  color: var(--sch-normale);
}

/* Il posto libero: cosa fare per lavorarci, e il suo codice. */
.libero {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: clamp(12px, 1.6vw, 32px);
  flex: 1 1 auto;
  text-align: center;
}

.libero__aiuto {
  max-width: 40ch;
  margin: 0;
  font-size: clamp(1rem, 1.6vw, 2rem);
  color: var(--sch-tenue);
}

.libero__codice {
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: clamp(12px, 1.4vw, 28px);
  border-radius: var(--raggio-l);
  background: #fff;
  box-shadow: var(--ombra-scheda);
  color: var(--ardesia-900);
  font-family: var(--font-mono);
  font-size: clamp(1rem, 1.6vw, 2rem);
  font-weight: 700;
  letter-spacing: 0.08em;
}

.libero__codice .codice-barre {
  width: clamp(220px, 28vw, 560px);
  height: clamp(60px, 7vw, 140px);
}

/* --- Il tabellone della fase, per l'ufficio: un riquadro per posto ----- */

.posti {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  align-content: start;
  gap: clamp(12px, 1.6vw, 32px);
  width: 100%;
}

.posto {
  --fascia: var(--sch-normale);
  display: grid;
  justify-items: center;
  align-content: start;
  gap: clamp(6px, 0.7vw, 12px);
  padding: clamp(14px, 1.6vw, 32px);
  border-top: 8px solid var(--fascia);
  border-radius: var(--raggio-xl);
  background: var(--sch-pannello);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12), 0 18px 40px -24px rgba(0, 0, 0, 0.6);
  text-align: center;
}

.posto--attenzione {
  --fascia: var(--sch-attenzione);
}

.posto--critico {
  --fascia: var(--sch-critico);
}

.posto--libero {
  border-top-color: rgba(156, 203, 228, 0.3);
  background: transparent;
  box-shadow: inset 0 0 0 2px rgba(156, 203, 228, 0.22);
}

.posto__nome {
  font-family: var(--font-titoli);
  font-size: clamp(1rem, 1.5vw, 2rem);
  font-stretch: var(--largo);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--petrolio-200);
}

.posto__cronometro {
  font-family: var(--font-titoli);
  font-size: clamp(2.4rem, 5vw, 6.5rem);
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--fascia);
}

.posto__veicolo {
  display: grid;
  justify-items: center;
  gap: 0.3em;
  font-size: clamp(0.95rem, 1.3vw, 1.7rem);
  font-weight: 700;
}

.posto .targa--grande {
  height: clamp(36px, 3.2vw, 70px);
}

.posto .targa--grande .targa__testo {
  font-size: clamp(1.2rem, 2.1vw, 3rem);
}

.posto__fascia {
  font-size: clamp(0.85rem, 1.15vw, 1.5rem);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--fascia);
}

.posto__vuoto {
  font-size: clamp(1.4rem, 2.6vw, 3.2rem);
  font-weight: 700;
  color: var(--sch-tenue);
}

.posto__codice,
.posto__note {
  font-size: clamp(0.85rem, 1.15vw, 1.5rem);
  color: var(--sch-tenue);
}

.posto__codice {
  font-family: var(--font-mono);
}

@media (max-width: 900px) {
  .riquadri-schermo,
  .lavoro__barra {
    width: 100%;
  }
}

/* Barra di scostamento ----------------------------------------------------- */

.scostamento {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

.scostamento__barra {
  flex: 1;
  height: 8px;
  border-radius: 4px;
  background: var(--fondo-alt);
  overflow: hidden;
  min-width: 60px;
}

.scostamento__riempimento {
  height: 100%;
  border-radius: 4px;
}

.scostamento__riempimento--entro,
.scostamento__riempimento--normale { background: var(--successo); }
.scostamento__riempimento--attenzione { background: var(--attenzione); }
.scostamento__riempimento--oltre,
.scostamento__riempimento--critico { background: var(--errore); }

/* Il numero sta SEMPRE accanto al colore: il colore non e' mai l'unica
   informazione (style-colore-scostamento). */
.scostamento__valore {
  font-variant-numeric: tabular-nums;
  font-size: 0.875rem;
  min-width: 64px;
  text-align: right;
}

/* ===========================================================================
   Valorizzazione — il confronto fra canali e la distinta di smontaggio
   =========================================================================== */

/* Il numero di un passo nei titoli delle sezioni della proposta. */
.passo-numero {
  display: inline-grid;
  flex-shrink: 0;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--ardesia-100);
  color: var(--ardesia-700);
  font-family: var(--font-testo, inherit);
  font-size: 0.75rem;
  font-weight: 600;
}

.scheda__titolo .passo-numero {
  margin-right: 6px;
  vertical-align: 2px;
}

/* Il conto dentro ogni carta: da dove viene il numero. */
.carta-canale__conto {
  margin: 10px 0 8px;
  padding: 8px 0 0;
  border-top: 1px dashed var(--bordo-forte);
  list-style: none;
  font-size: 0.8125rem;
}

.carta-canale__conto li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 2px 0;
}

.carta-canale__conto li span:last-child {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.carta-canale__avviso {
  color: var(--attenzione);
  font-weight: 500;
}

/* La coda da valorizzare: la bonifica in una riga, i numeri accanto alle
   scelte del filtro. */
.coda-bonifica {
  font-size: 0.875rem;
  color: var(--testo);
}

.coda-bonifica--fatta {
  color: var(--successo);
}

.conta-filtro {
  margin-left: 4px;
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  color: var(--testo-tenue);
}

.conta-filtro:empty {
  display: none;
}

.carta-canale {
  border: 1px solid var(--bordo);
  border-radius: 10px;
  padding: 1rem;
  background: var(--superficie-alt);
}

.carta-canale--scelto {
  border-color: var(--successo);
  box-shadow: inset 0 0 0 1px var(--successo);
  background: var(--successo-fondo);
}

/* Bloccato da un filtro: resta VISIBILE, con accanto quanto valeva prima.
   Nasconderlo cancellerebbe la spiegazione della decisione. */
.carta-canale--bloccato {
  border-color: var(--errore);
  background: var(--errore-fondo);
}

/* Non valutabile non e' «vale zero»: e' assenza di dato, e si legge diverso. */
.carta-canale--muta {
  border-style: dashed;
  background: var(--fondo-alt);
}

.carta-canale__titolo {
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 0.5rem;
}

.carta-canale__valore {
  font-size: 1.5rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  margin-bottom: 0.25rem;
}

/* Una riga tolta dalla distinta resta in tabella, spenta: il responsabile
   deve poterla rimettere senza rigenerare tutto. */
.riga--spenta {
  opacity: 0.45;
}

.riga--spenta .tabella__principale {
  text-decoration: line-through;
}

/* Gli addendi del valore atteso: la ragione per cui il numero si puo'
   contestare invece che subire. */
/* Il conto aperto con «Perche'»: un foglio chiaro dentro la riga, non un
   blocco grigio. */
.dettaglio-addendi {
  padding: 0.875rem 1.125rem;
  border-radius: var(--raggio);
  background: var(--superficie-alt);
  box-shadow: inset 0 0 0 1px var(--bordo-tenue);
}

.addendo {
  display: grid;
  grid-template-columns: 10rem 7rem 1fr;
  gap: 0.75rem;
  padding: 0.25rem 0;
  font-size: 0.875rem;
  align-items: baseline;
}

.addendo__nome {
  font-weight: 600;
}

.addendo__valore {
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.addendo__spiegazione {
  color: var(--testo-medio);
}

@media (max-width: 720px) {
  .addendo {
    grid-template-columns: 1fr auto;
  }
  .addendo__spiegazione {
    grid-column: 1 / -1;
  }
}

.tabella__azioni {
  white-space: nowrap;
  text-align: right;
}

.tabella__azioni .btn + .btn {
  margin-left: 0.375rem;
}

/* ===========================================================================
   Stato del motore — le caselle che il meccanico spunta dal tablet
   =========================================================================== */

/* Bersagli grandi: si usa coi guanti, in piedi, accanto al ponte.
   Vale la regola di `style-contesto-dispositivo`. */
.campo-grande {
  min-height: 56px;
  font-size: 1.25rem;
  font-family: var(--font-mono);
}

/* Le note del meccanico in «Diagnosi motore» (16/10/2026): per parte del
   veicolo, la gravita' come striscia a sinistra, una legenda sola. */
.note-meccanico__legenda {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin: 0 0 var(--sp-4);
  font-size: 0.8125rem;
  color: var(--testo-tenue);
}

.note-meccanico__legenda span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.note-meccanico__segno {
  width: 4px;
  height: 16px;
  border-radius: 4px;
}

.note-meccanico__segno--critico,
.nota-voce--critico { --gravita: var(--errore-pieno); }
.note-meccanico__segno--rilevante,
.nota-voce--rilevante { --gravita: var(--attenzione-pieno); }
.note-meccanico__segno--trascurabile,
.nota-voce--trascurabile { --gravita: var(--info-pieno); }

.note-meccanico__segno {
  background: var(--gravita);
}

.note-meccanico {
  display: grid;
  gap: var(--sp-4);
}

.note-meccanico__titolo {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 8px;
  font-family: var(--font-titoli);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--testo-titoli);
}

.note-meccanico__titolo span {
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--petrolio-100);
  font-size: 0.6875rem;
  letter-spacing: 0;
  color: var(--primario);
}

.note-meccanico__voci {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 8px;
}

.nota-voce {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  /* Alta abbastanza da centrarla con un dito guantato. */
  min-height: 58px;
  padding: 11px 14px 11px 18px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.72);
  box-shadow: inset 0 0 0 1px var(--bordo);
  cursor: pointer;
  transition: background var(--transizione), box-shadow var(--transizione);
}

.nota-voce::before {
  content: "";
  position: absolute;
  top: 10px;
  bottom: 10px;
  left: 0;
  width: 4px;
  border-radius: 0 4px 4px 0;
  background: var(--gravita, var(--ardesia-300));
}

.nota-voce:hover {
  box-shadow: inset 0 0 0 1px var(--blu-400);
}

.nota-voce input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.nota-voce:focus-within {
  outline: 2px solid var(--petrolio-600);
  outline-offset: 2px;
}

.nota-voce__casella {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  margin-top: 1px;
  border-radius: 6px;
  box-shadow: inset 0 0 0 2px var(--ardesia-300);
  color: transparent;
  transition: background var(--transizione), color var(--transizione);
}

.nota-voce__testo {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.nota-voce__testo strong {
  font-size: 0.9rem;
  color: var(--testo-titoli);
}

.nota-voce__testo small {
  font-size: 0.78125rem;
  line-height: 1.35;
  color: var(--testo-tenue);
}

/* Spuntata: tutta la voce cambia, non solo il quadratino. */
.nota-voce--spuntata {
  background: var(--blu-100);
  box-shadow: inset 0 0 0 2px var(--primario);
}

.nota-voce--spuntata .nota-voce__casella {
  background: var(--primario);
  box-shadow: none;
  color: #fff;
}

.note-meccanico__piede {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--sp-3) var(--sp-4);
  margin-top: var(--sp-5, 28px);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--bordo-tenue);
}

.note-meccanico__libera {
  flex: 1 1 360px;
  margin: 0;
}

.note-meccanico__invia {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}

.note-meccanico__conta {
  font-size: 0.8125rem;
  color: var(--testo-tenue);
}

/* ==========================================================================
   Foglio di lavorazione: la cella che conferma da sola
   ==========================================================================
   Il foglio si compila in officina, spesso su un tablet e spesso con i guanti.
   Non ha un pulsante «salva» — e' una regola conservata dal sistema attuale,
   dove e' la scelta giusta — quindi la conferma deve stare sulla cella.

   Il verde lampeggia e sparisce: e' un riscontro, non uno stato. Il rosso
   invece resta, perche' una scrittura fallita e' una cosa che chi compila
   deve poter ritrovare anche dopo aver guardato altrove. */

.cella {
  width: 100%;
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--bordo);
  border-radius: var(--raggio-s);
  background: var(--superficie);
  color: var(--testo);
  font: inherit;
  transition: border-color 0.15s, background 0.4s;
}

.cella:focus {
  outline: none;
  border-color: var(--primario);
}

.cella--salvata {
  animation: cella-conferma 1.2s ease-out;
}

.cella--errata {
  border-color: var(--errore);
  background: var(--errore-fondo);
}

@keyframes cella-conferma {
  0% {
    background: var(--successo-fondo);
    border-color: var(--successo);
  }
  100% {
    background: var(--superficie);
    border-color: var(--bordo);
  }
}

/* Chi ha impostato «riduci le animazioni» vede comunque la conferma: cambia
   il fondo e resta, invece di lampeggiare. */
@media (prefers-reduced-motion: reduce) {
  .cella--salvata {
    animation: none;
    background: var(--successo-fondo);
  }
}

/* Il «da smontare»: la distinta come la legge chi smonta.
   Nessuna colonna economica, per scelta di dominio. */
/* Il foglio di lavorazione: un veicolo per riga, chiuso. Il clic sulla riga
   apre il suo foglio, con le celle e la lista dei pezzi. */
.foglio-veicolo {
  margin-bottom: 10px;
}

.foglio-veicolo__testa {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 14px 20px;
  border: 0;
  border-radius: var(--raggio-l);
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background var(--transizione);
}

.foglio-veicolo__testa:hover {
  background: var(--superficie-alt);
}

/* La riga del veicolo e, accanto, la sua scheda (14/10/2026). */
.foglio-veicolo__intestazione {
  display: flex;
  align-items: center;
}

.foglio-veicolo__intestazione .foglio-veicolo__testa {
  flex: 1 1 auto;
  min-width: 0;
}

.foglio-veicolo__scheda {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: none;
  min-height: 44px;
  margin-right: 12px;
  padding: 0 12px;
  border-radius: var(--raggio-s);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--primario);
}

.foglio-veicolo__scheda:hover {
  background: var(--petrolio-50);
  text-decoration: none;
}

@media (max-width: 640px) {
  .foglio-veicolo__scheda span {
    display: none;
  }
}

.foglio-veicolo__testa:focus-visible {
  outline: 2px solid var(--primario);
  outline-offset: -2px;
}

.foglio-veicolo__nome {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.foglio-veicolo__modello {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
}

.foglio-veicolo__riassunto {
  font-size: 0.8125rem;
  color: var(--testo-tenue);
}

.foglio-veicolo__freccia {
  color: var(--testo-tenue);
  transition: transform var(--transizione);
}

.foglio-veicolo__testa[aria-expanded="true"] .foglio-veicolo__freccia {
  transform: rotate(180deg);
}

.foglio-veicolo__corpo {
  padding: 4px 20px 20px;
  border-top: 1px solid var(--bordo);
}

.foglio-veicolo__riga {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 14px 0;
}

.foglio-veicolo__stato {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* Dentro il foglio: a sinistra i pezzi da spuntare man mano, a destra cosa
   ne e' uscito. Uno smontaggio di piu' giorni si legge dalla lista: ogni
   pezzo fatto dice quando. */
.foglio-lavoro {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(280px, 1fr);
  gap: 32px;
  padding-top: 18px;
}

.foglio-lavoro__uscito {
  padding: 18px 20px;
  border-radius: var(--raggio);
  background: var(--superficie-alt);
  align-self: start;
}

.foglio-pezzi__testa {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.foglio-pezzi__conto {
  font-size: 0.875rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--testo-medio);
}

.avanzamento {
  height: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--ardesia-100);
}

.avanzamento > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--successo-pieno);
  transition: width var(--transizione);
}

.pezzi {
  margin: 12px 0 0;
  padding: 0;
  border-top: 1px solid var(--bordo);
  list-style: none;
}

.pezzi li {
  border-bottom: 1px solid var(--bordo);
}

.pezzo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  width: 100%;
  min-height: 46px;
  padding: 8px 6px;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background var(--transizione);
}

.pezzo:hover:not(:disabled) {
  background: var(--superficie-alt);
}

.pezzo:focus-visible {
  outline: 2px solid var(--primario);
  outline-offset: -2px;
}

.pezzo:disabled {
  cursor: default;
}

.pezzo__spunta {
  display: inline-grid;
  flex-shrink: 0;
  place-items: center;
  width: 22px;
  height: 22px;
  border: 1.5px solid var(--bordo-forte);
  border-radius: 6px;
  background: var(--superficie);
  color: transparent;
  font-size: 0.875rem;
  transition: background var(--transizione), border-color var(--transizione);
}

.pezzo--fatto .pezzo__spunta {
  border-color: var(--successo-pieno);
  background: var(--successo-pieno);
  color: #fff;
}

.pezzo__nome {
  font-weight: 600;
}

.pezzo--fatto .pezzo__nome {
  color: var(--testo-medio);
}

.pezzo__famiglia {
  font-size: 0.8125rem;
  color: var(--testo-tenue);
}

.pezzo__nota {
  margin-left: auto;
  font-size: 0.78125rem;
  color: var(--testo-tenue);
}

.pezzo--fatto .pezzo__nota {
  color: var(--successo);
}

/* Le etichette che avvolgono i campi sono in riga di natura: senza, le note
   restano strette quanto il loro testo. */
.foglio-lavoro__uscito .campo {
  display: block;
}

.foglio-uscito__celle {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 14px;
  margin-top: 12px;
}

.foglio-uscito__stato {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0 12px;
}

.foglio-uscito__stato .btn {
  margin-bottom: var(--sp-4);
}

@media (max-width: 960px) {
  .foglio-lavoro {
    grid-template-columns: minmax(0, 1fr);
  }
}

.distinta-operativa {
  list-style: decimal;
  margin: 0;
  padding-left: var(--sp-5);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.distinta-operativa li {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
  flex-wrap: wrap;
}

.distinta-operativa small {
  color: var(--testo-tenue);
  font-size: 0.8125rem;
}

/* ==========================================================================
   Avanzamento della navigazione parziale

   Spostandosi fra due pagine si sostituisce la sola area principale, e il
   browser smette di mostrare il proprio indicatore di caricamento. Questo
   nastro lo rimpiazza: senza, fra il clic e la pagina non succede nulla di
   visibile e si finisce per cliccare due volte.
   ========================================================================== */

.nastro-navigazione {
  position: fixed;
  top: 0;
  left: var(--larghezza-barra);
  right: 0;
  height: 2px;
  z-index: 2050;
  background: var(--blu-400);
  transform: scaleX(0);
  transform-origin: left center;
  opacity: 0;
  pointer-events: none;
  transition: transform 240ms ease, opacity 160ms ease;
}

.nastro-navigazione--attivo {
  opacity: 1;
}

@media (max-width: 1024px) {
  /* Sotto i 1024px la barra e' fuori schermo: l'area principale parte da 0. */
  .nastro-navigazione {
    left: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  /* Compare e sparisce, senza la corsa da sinistra a destra. */
  .nastro-navigazione {
    transition: opacity 160ms ease;
  }
}

/* ==========================================================================
   Finestre di modifica
   --------------------------------------------------------------------------
   Un <dialog> con testa, corpo che scorre e piede fisso. Un errore del server
   resta dentro la finestra, sopra i campi: chiuderla perderebbe quello che si
   e' appena scritto.
   ========================================================================== */

.finestra {
  width: min(640px, calc(100vw - 32px));
  max-height: calc(100vh - 48px);
  padding: 0;
  border: 0;
  border-radius: var(--raggio-l);
  background: var(--superficie);
  color: var(--testo);
  box-shadow: var(--ombra-l);
  overflow: hidden;
}

.finestra::backdrop {
  background: rgba(13, 58, 92, 0.45);
}

.finestra__modulo {
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 48px);
  margin: 0;
}

.finestra__testa {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 22px 24px 6px;
}

.finestra__testa h2 {
  font-size: 1.1875rem;
  letter-spacing: -0.01em;
}

.finestra__sotto {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--testo-tenue);
  overflow-wrap: anywhere;
}

.finestra__corpo {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 14px 24px 22px;
  overflow-y: auto;
}

.finestra__corpo .campo {
  margin: 0;
}

/* Nella finestra le griglie non si adattano da sole: due colonne fisse,
   tre per i campi brevi, una sul telefono. */
.finestra__corpo .griglia {
  gap: 14px 16px;
}

.finestra__corpo .griglia--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.finestra__corpo .griglia--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.finestra__corpo .avviso {
  margin: 0;
}

.finestra__sezione {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-top: 16px;
  border-top: 1px solid var(--bordo-tenue);
}

.finestra__sezione h3 {
  margin: 0;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--testo-tenue);
}

.finestra__sezione--chiusa {
  opacity: 0.72;
}

.finestra__piede {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  padding: 14px 24px;
  border-top: 1px solid var(--bordo-tenue);
  background: var(--superficie-alt);
}

.finestra__piede .btn {
  min-height: 42px;
}

/* Una scelta si/no con la sua spiegazione accanto. */
.spunta-riga {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  box-shadow: inset 0 0 0 1px var(--ardesia-150);
  cursor: pointer;
}

.spunta-riga input {
  width: 18px;
  height: 18px;
  margin: 2px 0 0;
  flex-shrink: 0;
  accent-color: var(--petrolio-600);
}

.spunta-riga:has(input:checked) {
  background: var(--petrolio-50);
  box-shadow: inset 0 0 0 1px var(--petrolio-200);
}

.spunta-riga:has(input:disabled) {
  cursor: default;
}

.spunta-riga__testo {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.spunta-riga__titolo {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--testo-forte);
}

.spunta-riga__nota {
  font-size: 0.78125rem;
  color: var(--testo-tenue);
}

.spunte-riga {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

/* Le famiglie di veicolo a cui un tipo si applica: pastiglie da accendere. */
.pastiglie-scelta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.pastiglie-scelta label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px var(--ardesia-300);
  font-size: 0.8125rem;
  color: var(--ardesia-700);
  cursor: pointer;
}

.pastiglie-scelta input {
  margin: 0;
  accent-color: var(--petrolio-600);
}

.pastiglie-scelta label:has(input:checked) {
  background: var(--petrolio-50);
  box-shadow: inset 0 0 0 1.5px var(--petrolio-500);
  color: var(--petrolio-800);
  font-weight: 500;
}

/* Le righe di cio' che non e' piu' in uso: si vedono, ma un passo indietro. */
.riga--spenta td {
  opacity: 0.55;
}

.riga--spenta td:last-child {
  opacity: 1;
}

/* --- Piazzali e magazzini (14/10/2026) ------------------------------------
   Una scheda per piazzale o magazzino: i numeri, la pianta dei lotti, poi i
   lotti (o i piani) in riquadri e dentro una riga per posizione. I posti,
   se sono pochi, si disegnano uno per uno. Piena non e' un errore: lo e'
   andare oltre i posti, ed e' l'unico caso in arancio. */

.posizioni-elenco {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.posizioni-vuoto {
  padding: 8px 0;
}

.radice-posizione {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 22px 24px 24px;
}

.radice-posizione__testa {
  display: flex;
  align-items: center;
  gap: 12px;
}

.radice-posizione__icona {
  width: 40px;
  height: 40px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: var(--petrolio-100);
  color: var(--primario);
  font-size: 1.125rem;
}

.radice-posizione__titoli {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
}

.radice-posizione__titoli h2 {
  font-size: 1.25rem;
}

.radice-posizione__numeri {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 22px;
  font-size: 0.90625rem;
  color: var(--testo-medio);
}

.radice-posizione__numeri b {
  margin-right: 6px;
  font-family: var(--font-titoli);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--testo-titoli);
}

.radice-posizione__quota {
  margin-left: auto;
  font-weight: 600;
  color: var(--testo-titoli);
}

/* La pianta: un tratto per lotto, largo quanti sono i suoi posti. */
.pianta-posizione {
  display: flex;
  gap: 6px;
}

.pianta-posizione__tratto {
  flex-basis: 0;
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px 8px;
}

.pianta-posizione__binario {
  grid-column: 1 / -1;
  display: block;
  height: 14px;
  overflow: hidden;
  border-radius: 6px;
  background: rgba(13, 58, 92, 0.08);
}

.pianta-posizione__binario > span {
  display: block;
  height: 100%;
  border-radius: 6px;
  background: var(--petrolio-500);
  transform-origin: left;
  animation: cresci 700ms var(--curva) var(--ritardo, 0ms) backwards;
}

.pianta-posizione__tratto--piena .pianta-posizione__binario > span {
  background: var(--primario);
}

.pianta-posizione__tratto--oltre .pianta-posizione__binario > span {
  background: var(--attenzione-pieno);
}

.pianta-posizione__nome {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.78125rem;
  color: var(--testo-medio);
}

.pianta-posizione__numeri {
  font-size: 0.78125rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--testo-tenue);
}

.pianta-posizione__numeri b {
  font-weight: 600;
  color: var(--testo-titoli);
}

/* I lotti, o i piani: riquadri in griglia. */
.blocchi-posizione {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  gap: 12px;
}

.blocco-posizione {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 16px 12px;
  border-radius: var(--raggio);
  background: rgba(255, 255, 255, 0.62);
  box-shadow: inset 0 0 0 1px var(--vetro-bordo), 0 0 0 1px rgba(13, 58, 92, 0.05);
}

.blocco-posizione__testa {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 36px;
}

.blocco-posizione__nome,
.riga-posizione__nome {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 8px;
}

.blocco-posizione__nome strong {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--testo-titoli);
}

.blocco-posizione__righe {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--bordo-tenue);
}

/* Una riga: il nome, quanto contiene, i bottoni. Con una capienza la
   misura va sotto il nome: i riquadri sono stretti, e i posti accanto al
   nome lo schiacciavano. */
.riga-posizione {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 4px 12px;
  min-height: 44px;
  padding: 6px 0 6px calc(var(--profondita, 0) * 16px);
}

.riga-posizione--misurata {
  grid-template-columns: minmax(0, 1fr) auto;
  padding-top: 8px;
  padding-bottom: 10px;
}

.riga-posizione--misurata .misura-posizione {
  grid-column: 1 / -1;
  grid-row: 2;
}

.riga-posizione + .riga-posizione {
  border-top: 1px solid rgba(13, 58, 92, 0.05);
}

.riga-posizione__nome strong {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--testo);
}

/* La misura: i posti o la barra, i numeri, quanti restano liberi. */
.misura-posizione {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  font-size: 0.78125rem;
  color: var(--testo-tenue);
}

.misura-posizione__numeri {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.misura-posizione__numeri b {
  font-weight: 600;
  color: var(--testo-titoli);
}

.misura-posizione__stato {
  white-space: nowrap;
}

.misura-posizione--piena .misura-posizione__stato {
  font-weight: 600;
  color: var(--testo-medio);
}

.misura-posizione--oltre .misura-posizione__stato {
  font-weight: 600;
  color: var(--attenzione);
}

.barra-posizione {
  display: block;
  width: 120px;
  height: 6px;
  overflow: hidden;
  border-radius: 6px;
  background: rgba(13, 58, 92, 0.08);
}

.barra-posizione > span {
  display: block;
  height: 100%;
  border-radius: 6px;
  background: var(--petrolio-500);
}

.misura-posizione--piena .barra-posizione > span {
  background: var(--primario);
}

.misura-posizione--oltre .barra-posizione > span {
  background: var(--attenzione-pieno);
}

.barra-posizione--grande {
  width: 100%;
  height: 14px;
}

/* I posti uno per uno: dodici per fila. */
.posti-disegnati {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 3px;
  max-width: calc(12 * 13px);
}

.posto-disegnato {
  width: 10px;
  height: 14px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.8);
  box-shadow: inset 0 0 0 1.5px var(--petrolio-200);
}

.posto-disegnato--pieno {
  background: var(--primario);
  box-shadow: none;
}

.posto-disegnato--oltre {
  background: var(--attenzione-pieno);
  box-shadow: none;
}

/* Aggiungi e modifica: compaiono passandoci sopra, sempre sul telefono. */
.azioni-posizione {
  display: flex;
  gap: 4px;
  opacity: 0;
  transition: opacity var(--transizione);
}

.radice-posizione__testa:hover .azioni-posizione,
.blocco-posizione__testa:hover .azioni-posizione,
.riga-posizione:hover .azioni-posizione,
.azioni-posizione:focus-within {
  opacity: 1;
}

@media (hover: none) {
  .azioni-posizione {
    opacity: 1;
  }
}

/* Cio' che non e' piu' in uso: si vede, un passo indietro. */
.radice-posizione--spenta .radice-posizione__titoli,
.radice-posizione--spenta .radice-posizione__numeri,
.blocco-posizione--spenta .blocco-posizione__nome,
.blocco-posizione--spenta > .misura-posizione,
.riga-posizione--spenta .riga-posizione__nome,
.riga-posizione--spenta .misura-posizione {
  opacity: 0.55;
}

@media (max-width: 640px) {
  .radice-posizione {
    padding: 18px 16px;
  }

  .radice-posizione__quota {
    margin-left: 0;
  }

}

@media (prefers-reduced-motion: reduce) {
  .pianta-posizione__binario > span {
    animation: none;
  }
}

/* Le sedi in testa a «Piazzali e magazzini»: una riga ciascuna (13/10/2026). */
.sedi-elenco {
  padding: 4px 20px;
}

.sede-riga {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 12px;
  min-height: 52px;
  padding: 6px 0;
}

.sede-riga + .sede-riga {
  border-top: 1px solid var(--bordo-tenue);
}

.sede-riga__icona {
  color: var(--testo-tenue);
}

.sede-riga__modifica {
  margin-left: auto;
}

/* Le linguette con accanto il bottone della posizione nuova. */
.posizioni-barra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-bottom: 14px;
}

.posizioni-barra .linguette {
  margin-bottom: 0;
}

@media (max-width: 760px) {
  .finestra {
    width: calc(100vw - 16px);
    max-height: calc(100vh - 16px);
  }

  .finestra__modulo {
    max-height: calc(100vh - 16px);
  }

  .finestra__testa,
  .finestra__corpo,
  .finestra__piede {
    padding-left: 16px;
    padding-right: 16px;
  }

  .spunte-riga,
  .finestra__corpo .griglia--2,
  .finestra__corpo .griglia--3 {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ==========================================================================
   Registra un arrivo
   --------------------------------------------------------------------------
   Si compila sul piazzale, spesso dal telefono, mentre il veicolo scende dal
   camion. A sinistra quattro blocchi nell'ordine in cui si guarda il
   veicolo: chi e', com'e' fatto, com'e' arrivato, dove va. A destra da dove
   arriva — il ritiro che l'arrivo chiudera' — e cosa succede registrando. La
   targa si scrive in un campo che ha la forma della targa.
   ========================================================================== */

.arrivo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 24px;
  align-items: start;
}

.arrivo__principale {
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
}

.arrivo__lato {
  position: sticky;
  top: calc(var(--altezza-testata) + 20px);
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
}

.arrivo__blocco {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 24px 28px 28px;
  border-radius: var(--raggio-l);
  background: var(--superficie);
  box-shadow: var(--ombra-scheda);
  min-width: 0;
}

.arrivo__blocco--identita {
  box-shadow: var(--ombra-rilievo);
}

.arrivo__blocco .campo {
  margin: 0;
}

.arrivo__blocco .griglia {
  gap: 16px 18px;
}

.arrivo__blocco .griglia--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.arrivo__testa {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.arrivo__testa h2 {
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.arrivo__testa p {
  margin: 2px 0 0;
  font-size: 0.875rem;
  color: var(--testo-medio);
}

.arrivo__numero {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--petrolio-50);
  box-shadow: inset 0 0 0 1px var(--petrolio-200);
  color: var(--petrolio-700);
  font-size: 0.8125rem;
  font-weight: 600;
}

.arrivo__identita {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}

.griglia--veicolo {
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.3fr) minmax(0, 0.8fr);
}

/* La targa si scrive dentro una targa: banda blu, lettere grandi. */
.targa-da-scrivere {
  display: flex;
  align-items: stretch;
  height: 64px;
  border-radius: 10px;
  overflow: hidden;
  background: var(--superficie);
  box-shadow: 0 0 0 2px var(--ardesia-800);
  transition: box-shadow var(--transizione);
}

.targa-da-scrivere:focus-within {
  box-shadow: 0 0 0 2px var(--petrolio-600), 0 0 0 6px var(--petrolio-100);
}

.targa-da-scrivere__banda {
  width: 34px;
  flex-shrink: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 10px;
  background: var(--petrolio-700);
  color: #fff;
  font-size: 0.875rem;
  font-weight: 700;
}

.arrivo .campo .targa-da-scrivere input {
  flex: 1;
  min-width: 0;
  min-height: 64px;
  padding: 0 16px;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
  font-family: var(--font-mono);
  font-size: 1.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ardesia-900);
}

.arrivo .campo .targa-da-scrivere input:focus {
  box-shadow: none;
}

.arrivo .campo .targa-da-scrivere input::placeholder {
  color: var(--ardesia-300);
  letter-spacing: 0.1em;
}

.arrivo .campo input.mono {
  font-family: var(--font-mono);
  font-size: 0.9375rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.scelte--condizioni {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}

.scelte--condizioni .scelta--carta {
  min-height: 60px;
  padding: 10px 12px;
}

@media (max-width: 1280px) and (min-width: 761px) {
  .scelte--condizioni {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.campo__aiuto--ritiro {
  font-weight: 500;
  color: var(--info);
}

.campo__aiuto--ritiro:empty {
  display: none;
}

/* --- Da dove arriva -------------------------------------------------------- */

.arrivo__vuoto {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.arrivo__vuoto i {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: var(--ardesia-50);
  color: var(--testo-tenue);
  font-size: 1.0625rem;
}

.riquadro-lato .arrivo__vuoto p {
  margin: 0;
}

.arrivo__codice-ritiro a,
.arrivo__codice-ritiro span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 1.125rem;
  font-weight: 600;
  text-decoration: none;
}

.arrivo__codice-ritiro .bi {
  font-size: 0.8125rem;
}

.arrivo__righe {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.arrivo__righe li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--ardesia-700);
}

.arrivo__righe .bi {
  width: 18px;
  flex-shrink: 0;
  margin-top: 1px;
  color: var(--testo-tenue);
  text-align: center;
}

/* --- Registrando l'arrivo -------------------------------------------------- */

.arrivo__conferma h2 {
  font-size: 1rem;
}

.arrivo__conseguenze {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.arrivo__conseguenze li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.84375rem;
  line-height: 1.45;
  color: var(--testo-medio);
}

.arrivo__conseguenze .bi {
  width: 18px;
  flex-shrink: 0;
  margin-top: 1px;
  color: var(--petrolio-600);
}

/* Sopra il bottone, cosa manca o con cosa si registra. */
.riquadro-lato .arrivo__serve {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px 8px;
  min-height: 28px;
  margin: 0;
  font-size: 0.8125rem;
  color: var(--testo-medio);
}

.arrivo__serve .bi {
  color: var(--testo-tenue);
}

.riquadro-lato .arrivo__serve--pronto {
  font-weight: 500;
  color: var(--successo);
}

.arrivo__serve--pronto .bi {
  color: var(--successo-pieno);
}

/* Premuto da spento: la riga lo ricorda, e il cursore va sulla targa. */
.arrivo__serve--richiamo {
  animation: arrivo-richiamo 0.45s ease;
}

.riquadro-lato .arrivo__serve--richiamo,
.arrivo__serve--richiamo .bi {
  color: var(--attenzione);
}

@keyframes arrivo-richiamo {
  20%,
  60% {
    transform: translateX(-4px);
  }
  40%,
  80% {
    transform: translateX(4px);
  }
}

/* Il bottone resta spento finche' il veicolo non si riconosce, poi si
   colora: e' il segno che si puo' registrare. */
.arrivo__conferma .btn {
  transition: background-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
}

.btn--spento,
.btn--spento:hover:not(:disabled) {
  background: var(--ardesia-150);
  color: var(--testo-tenue);
  box-shadow: none;
  cursor: default;
}

.btn--acceso {
  animation: bottone-acceso 0.4s ease;
}

@keyframes bottone-acceso {
  50% {
    transform: scale(1.03);
  }
}

@media (prefers-reduced-motion: reduce) {
  .arrivo__serve--richiamo,
  .btn--acceso {
    animation: none;
  }
}

/* --- Arrivo registrato ----------------------------------------------------- */

.arrivo-fatto {
  display: flex;
  flex-direction: column;
  gap: 22px;
  max-width: 920px;
  padding: 28px 32px;
  border-radius: var(--raggio-xl);
  background: var(--superficie);
  box-shadow: var(--ombra-rilievo), 0 0 0 1px var(--successo-bordo);
}

.arrivo-fatto .avviso {
  margin: 0;
}

.arrivo-fatto__testa {
  display: flex;
  align-items: center;
  gap: 16px;
}

.arrivo-fatto__segno {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--successo);
  box-shadow: 0 0 0 6px var(--successo-fondo);
  color: #fff;
  font-size: 1.5rem;
}

.arrivo-fatto__testa h2 {
  font-size: 1.375rem;
}

.arrivo-fatto__testa p {
  margin: 2px 0 0;
  color: var(--testo-medio);
}

.arrivo-fatto__corpo {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 24px;
  align-items: center;
}

/* L'etichetta come la si vede sul veicolo: il codice prima di tutto. */
.etichetta-veicolo {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 18px 22px;
  border-radius: 12px;
  background: var(--superficie);
  box-shadow: inset 0 0 0 2px var(--ardesia-900);
}

.etichetta-veicolo__cosa {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--testo-tenue);
}

.etichetta-veicolo__codice {
  font-family: var(--font-mono);
  font-size: 2.125rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.1;
  overflow-wrap: anywhere;
}

.etichetta-veicolo__piede {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 0.875rem;
  color: var(--testo-medio);
}

.arrivo-fatto__dati {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.arrivo-fatto__dati dt {
  font-size: 0.78125rem;
  font-weight: 400;
  color: var(--testo-tenue);
}

.arrivo-fatto__dati dd {
  margin: 2px 0 0;
  font-size: 1.125rem;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.arrivo-fatto__azioni {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

@media (max-width: 1100px) {
  /* Una colonna: prima chi e', poi da dove arriva, poi il resto, e il
     bottone sempre in fondo allo schermo. */
  .arrivo {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
  }

  .arrivo__principale,
  .arrivo__lato {
    display: contents;
  }

  .arrivo__blocco--identita {
    order: 1;
  }

  .arrivo__ritiro {
    order: 2;
  }

  .arrivo__blocco:not(.arrivo__blocco--identita) {
    order: 3;
  }

  .arrivo__conferma {
    order: 4;
    position: sticky;
    bottom: 0;
    z-index: 20;
  }
}

@media (max-width: 760px) {
  .arrivo__blocco {
    padding: 20px 16px 22px;
    gap: 18px;
  }

  .arrivo__identita,
  .griglia--veicolo,
  .arrivo__blocco .griglia--2,
  .arrivo-fatto__corpo {
    grid-template-columns: minmax(0, 1fr);
  }

  .scelte--condizioni {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .scelte--condizioni .scelta--carta:last-child {
    grid-column: span 2;
  }

  .arrivo__conferma {
    gap: 8px;
    margin: 0 -16px;
    padding: 12px 16px 16px;
    border-radius: 0;
    box-shadow: 0 -1px 0 var(--ardesia-150), 0 -8px 20px -12px rgba(13, 58, 92, 0.2);
  }

  .arrivo__conferma h2,
  .arrivo__conseguenze {
    display: none;
  }

  .arrivo-fatto {
    padding: 22px 18px;
  }

  .etichetta-veicolo__codice {
    font-size: 1.75rem;
  }

  .arrivo-fatto__azioni .btn {
    width: 100%;
  }
}

/* ==========================================================================
   Cruscotto
   --------------------------------------------------------------------------
   Rifatto l'08/10/2026; dal 13/10/2026 nello stile «A · Vetro». Tre piani:
   i numeri di testa,
   cio' che c'e' da fare adesso, poi i riquadri del flusso — ritiri, motore
   decisionale, bonifica, piazzale, produzione, vendite, magazzino — su una
   griglia da dodici colonne, con misure che si alternano. Ogni riquadro c'e'
   solo per chi puo' vederne i dati; se a un ruolo manca il vicino, l'altro
   prende la riga intera.

   Il movimento racconta i numeri e poi si ferma: le tessere entrano in
   cascata e contano fino al valore, le linee si disegnano, le barre crescono
   dalla base, il giro in strada pulsa. Con `prefers-reduced-motion` resta
   tutto fermo (in fondo al blocco).

   Le classi `cruscotto__*` di base servono anche a «Officina adesso» e ai
   tabelloni: le misure si cambiano pensando anche a loro.
   ========================================================================== */

.cruscotto__sezione {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 36px;
}

.cruscotto__sezione[hidden] {
  display: none;
}

.cruscotto__etichetta {
  margin: 0;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--testo-tenue);
}

.cruscotto__riga-titolo {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px 16px;
  flex-wrap: wrap;
}

.cruscotto__nota {
  font-size: 0.8125rem;
  color: var(--testo-tenue);
}

/* --- Riquadri ------------------------------------------------------------ */

.cruscotto__pannello {
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-width: 0;
  padding: 24px 26px;
}

.cruscotto__pannello .avviso {
  margin: 0;
}

.cruscotto__pannello-testa {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 4px 12px;
  flex-wrap: wrap;
}

.cruscotto__pannello-testa h3 {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 600;
}

.cruscotto__pannello-testa span {
  font-size: 0.8125rem;
  color: var(--testo-tenue);
}

.cruscotto__titolo {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: -0.015em;
}

.cruscotto__sottotitolo {
  margin: 4px 0 0;
  font-size: 0.84375rem;
  line-height: 1.45;
  color: var(--testo-medio);
}

.cruscotto__vai {
  margin-top: auto;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.875rem;
  font-weight: 600;
}

.cruscotto__vai:hover {
  text-decoration: none;
}

.cruscotto__vai .bi {
  transition: transform var(--transizione);
}

.cruscotto__vai:hover .bi {
  transform: translateX(3px);
}

.cruscotto__indici {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.cruscotto__indici > div {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.cruscotto__indice-nome {
  font-size: 0.78125rem;
  color: var(--testo-tenue);
}

.cruscotto__indice-valore {
  color: var(--testo-titoli);
  font-family: var(--font-titoli);
  font-stretch: var(--largo);
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.03em;
  white-space: nowrap;
}

.cruscotto__indice-valore--rame {
  color: var(--rame-700);
}

.cruscotto__indice-nota {
  font-size: 0.78125rem;
  line-height: 1.45;
  color: var(--testo-medio);
}

.cruscotto__avviso-rame,
.cruscotto__avviso-sereno {
  margin: 0;
  padding: 12px 14px;
  border-radius: var(--raggio);
  font-size: 0.84375rem;
  line-height: 1.5;
  color: var(--ardesia-700);
}

.cruscotto__avviso-rame .bi,
.cruscotto__avviso-sereno .bi {
  margin-right: 4px;
}

.cruscotto__avviso-rame {
  background: var(--rame-25);
  box-shadow: inset 0 0 0 1px var(--rame-200);
}

.cruscotto__avviso-rame .bi {
  color: var(--rame-600);
}

.cruscotto__avviso-sereno {
  background: #f1f9f4;
  box-shadow: inset 0 0 0 1px var(--successo-bordo);
}

.cruscotto__avviso-sereno .bi {
  color: var(--successo-pieno);
}

.cruscotto__riga-nota {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--testo-medio);
}

/* --- La testa: il saluto, il giorno, «in diretta» ---------------------------- */

.cruscotto__quando {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 14px;
}

.dal-vivo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 3px 10px 3px 8px;
  border-radius: 999px;
  background: var(--vetro);
  box-shadow: inset 0 0 0 1px var(--vetro-bordo), var(--ombra-s);
  font-size: 0.78125rem;
  color: var(--testo-medio);
}

.dal-vivo[hidden] {
  display: none;
}

/* Il punto «in diretta»: petrolio, non verde. Il verde dice il rispetto dei
   termini, e qui non c'e' niente di rispettato: c'e' solo un orologio. */
.dal-vivo__punto {
  position: relative;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--petrolio-500);
}

.dal-vivo__punto::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid var(--petrolio-400);
  opacity: 0;
  animation: dal-vivo 2.4s var(--curva) infinite;
}

@keyframes dal-vivo {
  0% {
    transform: scale(0.5);
    opacity: 0.7;
  }
  70%,
  100% {
    transform: scale(1.5);
    opacity: 0;
  }
}

/* Entrata in cascata. A differenza di `.compare` la fine non resta
   appiccicata all'elemento: passato l'ingresso, la tessera torna a
   sollevarsi quando ci si passa sopra. */
.cruscotto-entra {
  animation: comparsa 460ms var(--curva) backwards;
  animation-delay: var(--ritardo, 0ms);
}

/* --- I numeri di testa ------------------------------------------------------ */

.numeri-testa {
  container: numeri / inline-size;
  margin-bottom: 18px;
}

.numeri-testa[hidden] {
  display: none;
}

.numeri-testa__griglia {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
}

@container numeri (min-width: 560px) {
  .numeri-testa__griglia {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@container numeri (min-width: 820px) {
  .numeri-testa__griglia[data-n="3"],
  .numeri-testa__griglia[data-n="5"],
  .numeri-testa__griglia[data-n="6"] {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@container numeri (min-width: 1000px) {
  .numeri-testa__griglia[data-n="4"] {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@container numeri (min-width: 1240px) {
  .numeri-testa__griglia[data-n="5"] {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

@container numeri (min-width: 1380px) {
  .numeri-testa__griglia[data-n="6"] {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}

.tessera--testa {
  gap: 6px;
  min-height: 136px;
  padding: 16px 18px 15px;
  border-radius: var(--raggio-l);
}

.tessera--testa .tessera__etichetta {
  gap: 8px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--testo-forte);
}

/* L'icona sta in un tassello: il tono della tessera lo colora, il numero
   resta l'informazione. */
.tessera__icona {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  border-radius: 8px;
  background: var(--petrolio-50);
  color: var(--petrolio-700);
  box-shadow: inset 0 0 0 1px var(--petrolio-100);
}

.tessera--testa .tessera__icona i {
  font-size: 0.875rem;
  color: inherit;
}

.tessera--errore .tessera__icona {
  background: var(--errore-fondo);
  color: var(--errore);
  box-shadow: inset 0 0 0 1px var(--errore-bordo);
}

.tessera--attenzione .tessera__icona {
  background: var(--attenzione-fondo);
  color: var(--attenzione);
  box-shadow: inset 0 0 0 1px var(--attenzione-bordo);
}

.tessera--successo .tessera__icona {
  background: var(--successo-fondo);
  color: var(--successo);
  box-shadow: inset 0 0 0 1px var(--successo-bordo);
}

.tessera--successo .tessera__valore {
  color: var(--successo);
}

.tessera--testa .tessera__riga {
  align-items: flex-end;
  min-height: 46px;
  margin-top: 4px;
}

/* Il numero di testa: proporzionale e non tabellare, e' un numero solo. */
.tessera--testa .tessera__valore {
  font-size: 2.125rem;
  font-variant-numeric: proportional-nums;
  line-height: 1;
}

.tessera--testa .tessera__nota {
  margin-top: auto;
  font-size: 0.78125rem;
  line-height: 1.4;
  color: var(--testo-medio);
}

.tessera__delta--priorita {
  gap: 4px;
  color: var(--ottone-700);
}

.tessera--testa .tessera__barra {
  height: 8px;
  margin-top: 2px;
  border-radius: 4px;
  animation: svela 800ms var(--curva) 200ms backwards;
}

.tessera--testa .tessera__barra span {
  border-radius: 0;
  transition: filter var(--transizione);
}

.tessera--testa .tessera__barra span:hover {
  filter: brightness(1.12);
}

.tessera__barra--entro {
  background: var(--petrolio-500);
}

.tessera__barra--oltre {
  background: var(--ottone-500);
}

/* Una barra che si svela da sinistra, intera: i pezzi non crescono uno per
   uno, si scoprono insieme come un nastro. */
@keyframes svela {
  from {
    clip-path: inset(0 100% 0 0);
  }
  to {
    clip-path: inset(0 0 0 0);
  }
}

/* --- Grafici piccoli: tendenza, colonnine, anello --------------------------- */

.tendenza {
  display: block;
  flex-shrink: 0;
  overflow: visible;
}

.tendenza__velo {
  opacity: 0.1;
  animation: velo 900ms var(--curva) 300ms backwards;
}

.tendenza__linea {
  animation: traccia 1000ms var(--curva) 150ms backwards;
}

.tendenza__punto {
  transform-box: fill-box;
  transform-origin: center;
  animation: punto-arriva 320ms var(--curva) 1050ms backwards;
}

@keyframes traccia {
  from {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
  }
  to {
    stroke-dasharray: 1;
    stroke-dashoffset: 0;
  }
}

@keyframes velo {
  from {
    opacity: 0;
  }
}

@keyframes punto-arriva {
  from {
    transform: scale(0);
  }
}

.colonnine {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 38px;
  flex-shrink: 0;
}

.colonnine__colonna {
  position: relative;
  width: 9px;
  height: var(--altezza);
  border-radius: 3px 3px 0 0;
  background: var(--petrolio-300);
  transform-origin: bottom;
  animation: sale 600ms var(--curva) backwards;
  animation-delay: calc(200ms + var(--ritardo, 0ms));
  transition: background var(--transizione);
}

/* Il bersaglio del suggerimento e' l'intera colonna, anche sopra la barra. */
.colonnine__colonna::before {
  content: "";
  position: absolute;
  left: -2px;
  right: -2px;
  bottom: 0;
  height: 38px;
}

.colonnine__colonna:hover {
  background: var(--petrolio-500);
}

.colonnine__colonna--oggi {
  background: var(--petrolio-700);
}

.colonnine__colonna--zero {
  height: 3px;
  border-radius: 2px;
  background: var(--ardesia-150);
}

@keyframes sale {
  from {
    transform: scaleY(0);
  }
}

.anello {
  display: block;
  flex-shrink: 0;
  margin-bottom: -2px;
}

.anello__pista {
  fill: none;
  stroke: var(--ardesia-100);
  stroke-width: 5;
}

.anello__valore {
  fill: none;
  stroke-width: 5;
  stroke-linecap: round;
  stroke-dasharray: var(--giro);
  stroke-dashoffset: calc(var(--giro) * (1 - var(--quota)));
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
  animation: riempi 1100ms var(--curva) 200ms backwards;
}

.anello--successo .anello__valore {
  stroke: var(--successo-pieno);
}

.anello--errore .anello__valore {
  stroke: var(--errore-pieno);
}

@keyframes riempi {
  from {
    stroke-dashoffset: var(--giro);
  }
}

/* --- La griglia dei riquadri -------------------------------------------------- */

.bento-guscio {
  container: bento / inline-size;
}

.bento {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
}

@container bento (min-width: 900px) {
  .bento {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }

  .bento__voce {
    grid-column: span var(--misura, 12);
  }
}

.bento__voce {
  container-type: inline-size;
  transition: box-shadow 200ms var(--curva);
}

.bento__voce:hover {
  box-shadow: var(--ombra-s), var(--anello), 0 18px 34px -20px rgba(13, 58, 92, 0.3),
    inset 0 0 0 1px var(--vetro-bordo);
}

/* Il posto fisso di una tessera: la tessera lo riempie, e quando arriva il
   suo numero cambia solo lei. */
.numeri-testa__posto {
  display: flex;
  min-width: 0;
}

.numeri-testa__posto > .tessera {
  flex: 1 1 auto;
  min-width: 0;
}

/* In attesa della sua fonte: l'etichetta c'e' gia', il numero e la nota
   sono due barre che scorrono. */
.tessera__scheletro {
  display: block;
  width: 58%;
  height: 34px;
  margin-top: 10px;
  border-radius: 8px;
}

.tessera__scheletro--nota {
  width: 82%;
  height: 12px;
  margin-top: auto;
  border-radius: 6px;
}

.riquadro__scheletro {
  flex: 1 1 auto;
  min-height: 200px;
  border-radius: var(--raggio);
}

.riquadro__testa {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px 16px;
  flex-wrap: wrap;
}

.riquadro__titoli {
  flex: 1 1 220px;
  min-width: 0;
}

.riquadro__conta {
  flex-shrink: 0;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--ardesia-100);
  font-size: 0.78125rem;
  font-weight: 600;
  color: var(--testo-medio);
}

.riquadro__conta--allarme {
  background: var(--errore-fondo);
  color: var(--errore);
  box-shadow: inset 0 0 0 1px var(--errore-bordo);
}

/* La cifra del riquadro, in alto a destra: Archivo largo come le tessere. */
.riquadro__cifra {
  flex-shrink: 0;
  color: var(--testo-titoli);
  font-family: var(--font-titoli);
  font-stretch: var(--largo);
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.03em;
  white-space: nowrap;
}

/* --- Da fare adesso ------------------------------------------------------------ */

.da-fare {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
}

@container (min-width: 640px) {
  .da-fare {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@container (min-width: 1000px) {
  .da-fare {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.da-fare__voce {
  display: grid;
  grid-template-columns: 36px auto minmax(0, 1fr) 14px;
  align-items: center;
  gap: 12px;
  min-height: 64px;
  padding: 11px 14px;
  border-radius: var(--raggio);
  background: var(--superficie-alt);
  box-shadow: inset 0 0 0 1px var(--bordo-tenue);
  color: inherit;
  transition: background var(--transizione), box-shadow 200ms var(--curva),
    transform 200ms var(--curva);
}

a.da-fare__voce:hover {
  text-decoration: none;
  color: inherit;
  background: var(--superficie);
  box-shadow: var(--ombra-s), var(--anello), var(--ombra);
  transform: translateY(-1px);
}

a.da-fare__voce:focus-visible {
  outline: none;
  box-shadow: var(--anello-focus);
}

.da-fare__segno {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--ardesia-100);
  color: var(--ardesia-600);
  font-size: 1rem;
}

/* Larga quanto due cifre: i testi della stessa colonna partono allineati. */
.da-fare__numero {
  min-width: 42px;
  font-family: var(--font-titoli);
  font-stretch: var(--largo);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--testo-titoli);
}

.da-fare__testo {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.da-fare__testo strong {
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.3;
}

.da-fare__testo span {
  font-size: 0.78125rem;
  line-height: 1.35;
  color: var(--testo-tenue);
}

.da-fare__vai {
  font-size: 0.75rem;
  color: var(--testo-tenue);
  transition: transform var(--transizione), color var(--transizione);
}

a.da-fare__voce:hover .da-fare__vai {
  transform: translateX(2px);
  color: var(--petrolio-600);
}

.da-fare__voce--errore .da-fare__segno {
  background: var(--errore-fondo);
  color: var(--errore-pieno);
}
.da-fare__voce--errore .da-fare__numero {
  color: var(--errore);
}

.da-fare__voce--attenzione .da-fare__segno {
  background: var(--attenzione-fondo);
  color: var(--attenzione-pieno);
}
.da-fare__voce--attenzione .da-fare__numero {
  color: var(--attenzione);
}

.da-fare__voce--priorita .da-fare__segno {
  background: var(--ottone-400);
  color: var(--su-ottone);
}
.da-fare__voce--priorita .da-fare__numero {
  color: var(--ottone-700);
}

.da-fare__voce--info .da-fare__segno {
  background: var(--info-fondo);
  color: var(--info-pieno);
}
.da-fare__voce--info .da-fare__numero {
  color: var(--info);
}

.da-fare__voce--petrolio .da-fare__segno {
  background: var(--petrolio-50);
  color: var(--petrolio-600);
}
.da-fare__voce--petrolio .da-fare__numero {
  color: var(--petrolio-700);
}

/* Un errore o un'attenzione si stacca anche dal fondo: la riga ha
   l'anello del suo tono. */
.da-fare__voce--errore {
  background: #fdf5f6;
  box-shadow: inset 0 0 0 1px var(--errore-bordo);
}

.da-fare__voce--attenzione {
  background: var(--attenzione-velo);
  box-shadow: inset 0 0 0 1px var(--attenzione-bordo);
}

.da-fare__sereno {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 14px 16px;
  border-radius: var(--raggio);
  background: #f1f9f4;
  box-shadow: inset 0 0 0 1px var(--successo-bordo);
  font-size: 0.9375rem;
  color: var(--successo);
}

.da-fare__sereno .bi {
  font-size: 1.25rem;
  color: var(--successo-pieno);
}

/* --- Da ritirare: il flusso in tre passi ------------------------------------- */

.flusso-ritiri {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.flusso-ritiri__passo {
  position: relative;
  min-width: 0;
}

/* Fra un passo e l'altro una freccia, disegnata: il flusso va a destra. */
.flusso-ritiri__passo + .flusso-ritiri__passo::before {
  content: "";
  position: absolute;
  top: 24px;
  left: -11px;
  width: 7px;
  height: 7px;
  border-top: 2px solid var(--ardesia-300);
  border-right: 2px solid var(--ardesia-300);
  transform: rotate(45deg);
}

.flusso-ritiri__passo a {
  display: flex;
  flex-direction: column;
  gap: 4px;
  height: 100%;
  padding: 11px 12px 12px;
  border-radius: var(--raggio);
  background: var(--superficie-alt);
  box-shadow: inset 0 0 0 1px var(--bordo-tenue);
  color: inherit;
  transition: background var(--transizione), box-shadow 200ms var(--curva);
}

.flusso-ritiri__passo a:hover {
  text-decoration: none;
  background: var(--superficie);
  box-shadow: var(--ombra-s), var(--anello), var(--ombra);
}

.flusso-ritiri__numero {
  color: var(--testo-titoli);
  font-family: var(--font-titoli);
  font-stretch: var(--largo);
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.03em;
}

.flusso-ritiri__nome {
  font-size: 0.78125rem;
  color: var(--testo-medio);
}

.flusso-ritiri__quota {
  height: 5px;
  margin-top: 6px;
  border-radius: 3px;
  background: var(--ardesia-100);
  overflow: hidden;
}

.flusso-ritiri__quota::before {
  content: "";
  display: block;
  width: max(5px, calc(var(--quota) * 100%));
  height: 100%;
  border-radius: 3px;
  background: var(--ardesia-300);
  transform-origin: left;
  animation: cresci 700ms var(--curva) 300ms backwards;
}

.flusso-ritiri__passo--pronta .flusso-ritiri__quota::before {
  background: var(--petrolio-300);
}

.flusso-ritiri__passo--giro .flusso-ritiri__quota::before {
  background: var(--petrolio-600);
}

/* In un riquadro stretto i tre passi vanno in colonna, uno sotto l'altro,
   e la freccia punta in basso: tre colonne da novanta pixel spezzavano
   «in valutazione» in due righe. */
@container (max-width: 459px) {
  .flusso-ritiri {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }

  .flusso-ritiri__passo a {
    display: grid;
    grid-template-columns: 3.4rem minmax(0, 1fr);
    align-items: center;
    column-gap: 10px;
    row-gap: 0;
    padding: 9px 14px;
  }

  .flusso-ritiri__numero {
    grid-row: 1 / span 2;
  }

  .flusso-ritiri__quota {
    margin-top: 6px;
  }

  .flusso-ritiri__passo + .flusso-ritiri__passo::before {
    top: -10px;
    left: 34px;
    transform: rotate(135deg);
  }
}

.arrivi-oggi {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0;
  font-size: 0.84375rem;
  line-height: 1.45;
  color: var(--testo-medio);
}

.arrivi-oggi .bi {
  margin-top: 1px;
  color: var(--ottanio-600);
}

.arrivi-oggi strong {
  font-weight: 700;
  color: var(--testo);
}

.giro-prossimo {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: var(--raggio);
  background: var(--ottanio-25);
  box-shadow: inset 0 0 0 1px var(--ottanio-100);
  color: inherit;
  overflow: hidden;
  transition: box-shadow var(--transizione);
}

.giro-prossimo:hover {
  text-decoration: none;
  box-shadow: inset 0 0 0 1px var(--ottanio-300);
}

.giro-prossimo--in-strada {
  background: var(--ottanio-50);
  box-shadow: inset 0 0 0 1px var(--ottanio-200);
}

.giro-prossimo__segno {
  position: relative;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: var(--ottanio-100);
  color: var(--ottanio-700);
  font-size: 1.0625rem;
}

/* In strada adesso: un'onda che parte dal camion, come un segnale. */
.giro-prossimo__onda {
  position: absolute;
  inset: -3px;
  border-radius: 12px;
  border: 2px solid var(--ottanio-400);
  opacity: 0;
  animation: onda 2.2s var(--curva) infinite;
}

@keyframes onda {
  0% {
    transform: scale(0.85);
    opacity: 0.8;
  }
  80%,
  100% {
    transform: scale(1.25);
    opacity: 0;
  }
}

.giro-prossimo__testo {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.giro-prossimo__testo strong {
  font-size: 0.84375rem;
  font-weight: 600;
}

.giro-prossimo__testo > span {
  font-size: 0.78125rem;
  line-height: 1.45;
  color: var(--testo-medio);
}

.giro-prossimo__avanzamento {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  width: calc(var(--quota) * 100%);
  background: var(--ottanio-500);
  transform-origin: left;
  animation: cresci 900ms var(--curva) 300ms backwards;
}

/* --- I grafici del cruscotto ------------------------------------------------- */
/* Quello delle richieste per settimana e' uscito l'08/10/2026: e' nella pagina
   delle richieste di ritiro. */

.grafico__area--vendite {
  height: 200px;
}

.mini-numeri {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px 20px;
  margin: 0;
  padding-top: 16px;
  border-top: 1px solid var(--bordo-tenue);
}

.mini-numeri > div {
  min-width: 0;
}

.mini-numeri dt {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--testo-tenue);
}

.mini-numeri dd {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 8px;
  margin: 4px 0 0;
  font-size: 0.75rem;
  color: var(--testo-medio);
}

.mini-numeri strong {
  font-family: var(--font-titoli);
  font-stretch: var(--largo);
  font-size: 1.375rem;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--testo-titoli);
}

/* --- Motore decisionale ------------------------------------------------------- */

.motore__cifra {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.motore__valore {
  font-family: var(--font-titoli);
  font-stretch: var(--largo);
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.045em;
  color: var(--petrolio-800);
  white-space: nowrap;
}

.motore__cifra small {
  font-size: 0.78125rem;
  line-height: 1.4;
  color: var(--testo-tenue);
}

.barra-strade {
  display: flex;
  gap: 2px;
  height: 14px;
  border-radius: 7px;
  overflow: hidden;
  animation: svela 900ms var(--curva) 250ms backwards;
}

.barra-strade span {
  min-width: 4px;
  transition: filter var(--transizione);
}

.barra-strade span:hover {
  filter: brightness(1.15);
}

.strade-elenco {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.strade-elenco a {
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 10px;
  padding: 8px 8px;
  margin: 0 -8px;
  border-radius: 8px;
  color: inherit;
  font-size: 0.84375rem;
  transition: background var(--transizione);
}

.strade-elenco a:hover {
  text-decoration: none;
  background: var(--ardesia-50);
}

.strade-elenco__segno {
  width: 10px;
  height: 10px;
  border-radius: 3px;
}

.strade-elenco__nome {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.strade-elenco__veicoli {
  font-family: var(--font-titoli);
  font-size: 0.9375rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.strade-elenco__valore {
  min-width: 6.5em;
  text-align: right;
  font-size: 0.78125rem;
  font-variant-numeric: tabular-nums;
  color: var(--testo-medio);
}

/* --- Il piazzale dall'arrivo all'uscita -----------------------------------------
   Una rampa sola, dal chiaro allo scuro come il veicolo va avanti (verificata:
   tinta unica, passi distinti). La legenda e' una riga per colore, nello
   stesso ordine della barra. Oltre i posti una tacca segna dove finiscono. */

.piazzale-carico {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.piazzale-carico__pista {
  position: relative;
}

.piazzale-carico--oltre .piazzale-carico__pista {
  margin-top: 20px;
}

.piazzale-carico__barra {
  display: flex;
  gap: 2px;
  height: 48px;
  border-radius: 10px;
  overflow: hidden;
  animation: svela 1000ms var(--curva) 250ms backwards;
}

.piazzale-carico__tratto {
  flex-basis: 0;
  min-width: 32px;
  display: flex;
  align-items: center;
  padding-left: 12px;
  font-family: var(--font-titoli);
  font-size: 0.9375rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  transition: filter var(--transizione);
}

.piazzale-carico__tratto:hover {
  filter: brightness(1.08);
}

.piazzale-carico__tratto--arrivati { background: var(--petrolio-300); color: var(--petrolio-900); }
.piazzale-carico__tratto--lavorazione { background: var(--petrolio-400); color: var(--petrolio-900); }
.piazzale-carico__tratto--bonificati { background: var(--petrolio-600); color: #fff; }
.piazzale-carico__tratto--destinati { background: var(--petrolio-900); color: #fff; }

/* I posti liberi chiudono la barra, vuoti e tratteggiati come un posto libero
   in officina: la barra piena vuol dire piazzale pieno. */
.piazzale-carico__tratto--liberi {
  box-sizing: border-box;
  border: 1.5px dashed var(--ardesia-300);
  border-radius: 0 10px 10px 0;
  background: transparent;
  color: var(--testo-tenue);
}

.piazzale-carico__tratto--liberi:first-child {
  border-radius: 10px;
}

.piazzale-carico__campione.piazzale-carico__tratto--liberi {
  border-radius: 3px;
}

.piazzale-carico__posti {
  position: absolute;
  top: -6px;
  bottom: -6px;
  width: 2px;
  margin-left: -1px;
  border-radius: 1px;
  background: var(--testo);
}

.piazzale-carico__posti span {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  padding-bottom: 3px;
  white-space: nowrap;
  font-size: 0.71875rem;
  font-weight: 700;
  color: var(--testo);
}

.piazzale-carico__legenda {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.piazzale-carico__legenda li {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 2px 10px;
  min-width: 0;
  font-size: 0.84375rem;
}

.piazzale-carico__legenda strong {
  font-weight: 600;
}

.piazzale-carico__legenda li > span:last-child {
  font-size: 0.8125rem;
  color: var(--testo-medio);
}

.piazzale-carico__campione {
  align-self: center;
  width: 10px;
  height: 10px;
  min-width: 0;
  flex-shrink: 0;
  padding: 0;
  border-radius: 3px;
}

/* --- Orologi della bonifica ------------------------------------------------------ */

/* I conteggi per classe sono anche la legenda dei punti. */
.orologi__classi {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 20px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.84375rem;
  color: var(--testo-medio);
}

.orologi__classi li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.orologi__classi strong {
  font-family: var(--font-titoli);
  font-weight: 700;
  color: var(--testo-titoli);
}

/* La linea dei giorni dal carico. I punti sono collegamenti al veicolo: un
   punto piccolo, un bersaglio piu' grande. «A rischio» e' un anello, non
   un pieno: accanto al verde si distingue anche senza il colore.

   Dal 16/10/2026 e' un istogramma: una colonna per giorno, il numero dei
   veicoli sopra. Si vedono al massimo `--in-vista` giorni (60), e sul
   telefono un giorno non e' piu' stretto di nove pixel: oltre, la linea
   scorre a destra e a sinistra, con una barra sottile e una sfumatura sul
   bordo dove c'e' altro. */
.linea-giorni {
  position: relative;
}

.linea-giorni__scorre {
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--ardesia-300) transparent;
  padding-bottom: 4px;
}

.linea-giorni__scorre:focus-visible {
  outline: 2px solid var(--petrolio-600);
  outline-offset: 2px;
  border-radius: 8px;
}

.linea-giorni__scorre::-webkit-scrollbar {
  height: 8px;
}

.linea-giorni__scorre::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: var(--ardesia-300);
}

.linea-giorni__tela {
  position: relative;
  box-sizing: border-box;
  width: max(calc(100% * var(--giorni) / var(--in-vista)), calc(var(--giorni) * 9px + 20px));
  min-width: 100%;
  /* Le tacche ai due capi non si tagliano. */
  padding: 0 10px;
}

.linea-giorni::before,
.linea-giorni::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 12px;
  z-index: 3;
  width: 36px;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--transizione);
}

.linea-giorni::before {
  left: 0;
  background: linear-gradient(90deg, var(--superficie), transparent);
}

.linea-giorni::after {
  right: 0;
  background: linear-gradient(270deg, var(--superficie), transparent);
}

.linea-giorni--altro-a-sinistra::before,
.linea-giorni--altro-a-destra::after {
  opacity: 1;
}

.linea-giorni__aiuto {
  display: none;
  margin: 6px 0 0;
  font-size: 0.75rem;
  color: var(--testo-tenue);
}

.linea-giorni--scorre + .linea-giorni__aiuto {
  display: block;
}

.linea-giorni__grafico {
  position: relative;
  /* La colonna piu' alta, il suo numero e, sui giorni stretti, i numeri su
     due altezze (16/10/2026). */
  height: 184px;
  border-bottom: 1px solid var(--ardesia-300);
}

.istogramma__colonna {
  position: absolute;
  bottom: 0;
  z-index: 1;
  min-width: 3px;
  border-radius: 4px 4px 0 0;
  transform-origin: bottom;
  animation: colonna-cresce 460ms var(--curva) backwards;
  animation-delay: calc(240ms + var(--ritardo, 0ms));
}

.istogramma__colonna--nei_tempi { background: var(--successo-pieno); }
.istogramma__colonna--a_rischio { background: var(--attenzione-pieno); }
.istogramma__colonna--fuori_termine { background: var(--errore-pieno); }

a.istogramma__colonna:hover {
  filter: brightness(1.12);
}

a.istogramma__colonna:focus-visible {
  outline: 2px solid var(--petrolio-600);
  outline-offset: 2px;
}

.istogramma__numero {
  position: absolute;
  bottom: calc(100% + 3px);
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  font-size: 0.6875rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  color: var(--testo-titoli);
}

/* Sui giorni stretti i numeri di due giorni vicini non si toccano. */
.linea-giorni--stretta .istogramma__colonna--dispari .istogramma__numero {
  bottom: calc(100% + 15px);
}

@keyframes colonna-cresce {
  from {
    transform: scaleY(0);
  }
}

.linea-giorni__fascia {
  position: absolute;
  top: 0;
  bottom: 0;
}

.linea-giorni__fascia > span {
  position: absolute;
  top: 10px;
  left: 10px;
  max-width: calc(100% - 14px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.71875rem;
  font-weight: 600;
}

.linea-giorni__fascia--entro {
  border-radius: 8px 0 0 0;
  background: #f1f9f4;
  color: var(--successo);
}

.linea-giorni__fascia--fuori {
  background: #fdf1f2;
  color: var(--errore);
}

.linea-giorni__fascia--verifica {
  border-radius: 0 8px 0 0;
  background: #f7fcff;
  color: var(--info);
}

.linea-giorni__termine {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  margin-left: -1px;
  background: var(--errore-bordo);
}

.linea-giorni__asse {
  position: relative;
  height: 24px;
}

.linea-giorni__tacca {
  position: absolute;
  top: 6px;
  transform: translateX(-50%);
  white-space: nowrap;
  font-size: 0.71875rem;
  color: var(--testo-tenue);
}

.linea-giorni__tacca--inizio { transform: none; }
.linea-giorni__tacca--fine { transform: translateX(-100%); }

.linea-giorni__tacca--termine {
  font-weight: 600;
  color: var(--errore);
}

.linea-giorni__campione {
  width: 10px;
  height: 10px;
  border-radius: 2px;
}

.linea-giorni__campione--entro { background: var(--successo-pieno); }
.linea-giorni__campione--rischio { background: var(--attenzione-pieno); }
.linea-giorni__campione--fuori { background: var(--errore-pieno); }
.linea-giorni__campione--verifica { background: var(--info-pieno); }

/* I piu' vecchi: una riga per veicolo, la targa, il modello, i giorni. */
.piu-vecchi__titolo {
  display: block;
  padding-bottom: 8px;
  font-size: 0.71875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--testo-tenue);
}

.piu-vecchi ul {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.piu-vecchi li > a,
.piu-vecchi li > span {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: var(--raggio);
  background: var(--superficie-alt);
  box-shadow: inset 0 0 0 1px var(--bordo-tenue);
  color: inherit;
  font-size: 0.8125rem;
  transition: background var(--transizione), box-shadow var(--transizione);
}

.piu-vecchi li > a:hover {
  text-decoration: none;
  background: var(--superficie);
  box-shadow: var(--ombra-s), var(--anello);
}

.piu-vecchi__modello {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--testo-medio);
}

.piu-vecchi__giorni {
  flex-shrink: 0;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.piu-vecchi__giorni--da_verificare { color: var(--info); }
.piu-vecchi__giorni--fuori_termine { color: var(--errore); }
.piu-vecchi__giorni--a_rischio { color: var(--attenzione); }

/* --- Produzione ---------------------------------------------------------------- */

.produzione-cruscotto {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
}

@container (min-width: 600px) {
  .produzione-cruscotto {
    grid-template-columns: 200px minmax(0, 1fr);
    align-items: start;
  }

  .produzione-cruscotto .cruscotto__indici {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
  }
}

.fasi-standard {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.fasi-standard__testa {
  display: flex;
  justify-content: space-between;
  font-size: 0.78125rem;
  color: var(--testo-tenue);
}

.fasi-standard__riga {
  display: grid;
  grid-template-columns: 140px minmax(0, 1fr) 44px;
  align-items: center;
  gap: 12px;
  font-size: 0.84375rem;
}

.fasi-standard__barra {
  display: flex;
  height: 8px;
  border-radius: 4px;
  overflow: hidden;
  background: var(--ardesia-100);
}

.fasi-standard__barra > span {
  border-radius: 4px;
  background: var(--petrolio-500);
  transform-origin: left;
  animation: cresci 700ms var(--curva) backwards;
  animation-delay: calc(250ms + var(--ritardo, 0ms));
}

.fasi-standard__valore {
  text-align: right;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.fasi-standard__riga--critica > span:first-child,
.fasi-standard__riga--critica .fasi-standard__valore {
  font-weight: 700;
  color: var(--rame-700);
}

.fasi-standard__riga--critica .fasi-standard__barra > span {
  background: var(--rame-500);
}

/* --- Vendite e magazzino ------------------------------------------------------------ */

.vendite-cruscotto {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.vendite-cruscotto__titolo {
  display: block;
  margin-bottom: 10px;
  font-size: 0.71875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--testo-tenue);
}

.barre--strette {
  gap: 8px;
}

.barre--strette .barre__voce {
  grid-template-columns: minmax(0, 9rem) minmax(0, 1fr) 2.25rem;
}

.barre--strette .barre__nome {
  color: var(--testo-forte);
}

.barre--strette .barre__pista {
  height: 8px;
}

.eta-magazzino {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.eta-magazzino__barra {
  display: flex;
  gap: 2px;
  height: 12px;
  border-radius: 6px;
  overflow: hidden;
  animation: svela 900ms var(--curva) 250ms backwards;
}

.eta-magazzino__barra > span {
  flex-basis: 0;
}

.eta-magazzino__entro { background: var(--petrolio-500); }
.eta-magazzino__oltre { background: var(--rame-500); }

.eta-magazzino__legenda {
  display: flex;
  justify-content: space-between;
  gap: 6px 12px;
  flex-wrap: wrap;
  font-size: 0.78125rem;
  color: var(--testo-medio);
}

.eta-magazzino__legenda > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.eta-magazzino__oltre-testo {
  font-weight: 600;
  color: var(--rame-700);
}

.eta-magazzino__campione {
  width: 10px;
  height: 10px;
  flex-shrink: 0;
  border-radius: 3px;
}

.riga-lenta__titolo {
  margin: 0;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--bordo-tenue);
  font-family: var(--font);
  font-size: 0.71875rem;
  font-weight: 600;
  font-stretch: 100%;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--testo-tenue);
}

.riga-lenta ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.riga-lenta li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--bordo-tenue);
  font-size: 0.84375rem;
}

.riga-lenta li:last-child {
  border-bottom: 0;
}

.riga-lenta__giorni {
  flex-shrink: 0;
  font-weight: 600;
  color: var(--rame-700);
  white-space: nowrap;
}

/* --- Il suggerimento sui segni ----------------------------------------------------
   Lo stesso aspetto dei suggerimenti dei grafici a tela: scuro, piccolo,
   segue il puntatore. Il testo arriva da `data-suggerimento`, come testo. */

.suggerimento-grafico {
  position: fixed;
  z-index: 2000;
  max-width: 280px;
  padding: 7px 10px;
  border-radius: 8px;
  background: var(--petrolio-800);
  box-shadow: var(--ombra);
  font-size: 0.78125rem;
  line-height: 1.4;
  color: #f7fcff;
  pointer-events: none;
}

.suggerimento-grafico[hidden] {
  display: none;
}

/* Per chi usa un lettore di schermo: c'e', ma non si vede. */
.solo-lettori {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* --- Telefono --------------------------------------------------------------------- */

@media (max-width: 640px) {
  .cruscotto__sezione {
    margin-bottom: 28px;
  }

  .cruscotto__pannello {
    padding: 20px 16px;
  }

  .cruscotto__indice-valore,
  .riquadro__cifra {
    font-size: 1.5rem;
  }

  .tessera--testa {
    min-height: 0;
  }

  .tessera--testa .tessera__valore {
    font-size: 1.875rem;
  }

  .da-fare__voce {
    grid-template-columns: 32px auto minmax(0, 1fr) 12px;
    gap: 10px;
    padding: 10px 12px;
  }

  .da-fare__segno {
    width: 32px;
    height: 32px;
  }

  /* Le note lunghe vanno in colonna; i tre conteggi brevi del motore no. */
  .mini-numeri:not(.mini-numeri--brevi) {
    grid-template-columns: minmax(0, 1fr);
  }

  .motore__valore {
    font-size: 1.625rem;
  }

  .linea-giorni__fascia > span {
    display: none;
  }

  .linea-giorni__tacca--secondaria {
    display: none;
  }

  .fasi-standard__riga {
    grid-template-columns: 118px minmax(0, 1fr) 40px;
  }

  .barre--strette .barre__voce {
    grid-template-columns: minmax(0, 7rem) minmax(0, 1fr) 2rem;
  }

  .cruscotto__vai {
    min-height: 44px;
  }
}

/* --- Movimento ridotto ---------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .cruscotto-entra,
  .tessera--testa .tessera__barra,
  .tendenza__velo,
  .tendenza__linea,
  .tendenza__punto,
  .colonnine__colonna,
  .anello__valore,
  .barra-strade,
  .piazzale-carico__barra,
  .eta-magazzino__barra,
  .istogramma__colonna,
  .fasi-standard__barra > span,
  .flusso-ritiri__quota::before,
  .giro-prossimo__avanzamento {
    animation: none;
  }

  .dal-vivo__punto::after,
  .giro-prossimo__onda {
    display: none;
  }

  a.da-fare__voce:hover {
    transform: none;
  }
}

/* ==========================================================================
   Cruscotto per fasi (proposta A, 14/10/2026)
   --------------------------------------------------------------------------
   La testa col saluto e il periodo, la striscia di cio' che va fatto subito,
   poi una colonna per fase — ritiri, arrivi, bonifica, motore — col numero
   di adesso, com'e' fatto e le sue cose da fare. Sotto, sulla griglia del
   bento, gli orologi della bonifica, le missioni di oggi e il flusso.
   ========================================================================== */

/* --- La testa ------------------------------------------------------------------ */

.testa-cruscotto {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px 32px;
  margin-bottom: 24px;
}

.testa-cruscotto__testo {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1 1 480px;
  min-width: 0;
}

.testa-cruscotto__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  min-height: 28px;
}

.testa-cruscotto__giorno {
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--testo-tenue);
}

.testa-cruscotto h1 {
  font-size: clamp(2rem, 1.3rem + 1.6vw, 2.625rem);
  line-height: 1.06;
}

/* Il nome in corsivo azzurro, come nella proposta: e' la sola parola del
   saluto che cambia da persona a persona. */
.saluto__nome {
  font-style: italic;
  color: var(--petrolio-500);
}

.testa-cruscotto__azioni {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

/* La scelta del periodo: vetro bianco, come la ricerca della testata. */
.segmentato--vetro {
  background: rgba(255, 255, 255, 0.55);
  box-shadow: inset 0 0 0 1px var(--vetro-bordo), var(--ombra-s);
}

.segmentato--vetro .segmentato__scelta {
  padding: 0 14px;
  font-size: 0.84375rem;
  color: var(--testo-medio);
}

.segmentato--vetro .segmentato__scelta[aria-pressed="true"] {
  color: var(--testo-titoli);
  box-shadow: 0 1px 2px rgba(13, 58, 92, 0.1), 0 4px 10px -6px rgba(13, 58, 92, 0.25);
}

/* --- Subito ------------------------------------------------------------------------- */

.striscia-subito {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  margin-bottom: 20px;
  padding: 12px 14px;
  border-radius: var(--raggio-l);
  background: rgba(251, 229, 230, 0.86);
  box-shadow: inset 0 0 0 1px rgba(214, 71, 79, 0.2);
  color: var(--errore);
}

.striscia-subito__icona {
  width: 38px;
  height: 38px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 11px;
  background: #fff;
  font-size: 1.125rem;
}

.striscia-subito p {
  flex: 1 1 360px;
  margin: 0;
  font-size: 0.90625rem;
  line-height: 1.45;
}

.striscia-subito strong {
  font-weight: 700;
}

.striscia-subito__azioni {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.striscia-subito .btn--secondario {
  background: #fff;
  border-color: rgba(158, 37, 48, 0.3);
  color: var(--errore);
}

.striscia-subito .btn--secondario:hover:not(:disabled) {
  border-color: var(--errore);
  color: var(--errore);
}

/* --- Le colonne delle fasi ------------------------------------------------------------ */

.fasi-guscio {
  container: fasi / inline-size;
  margin-bottom: 16px;
}

.fasi-cruscotto {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
}

@container fasi (min-width: 560px) {
  .fasi-cruscotto {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@container fasi (min-width: 1000px) {
  .fasi-cruscotto {
    grid-template-columns: repeat(var(--colonne, 4), minmax(0, 1fr));
  }
}

.colonna-fase {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
  padding: 20px 20px 16px;
  transition: box-shadow 200ms var(--curva);
}

.colonna-fase:hover {
  box-shadow: var(--ombra-s), var(--anello), 0 18px 34px -20px rgba(13, 58, 92, 0.3),
    inset 0 0 0 1px var(--vetro-bordo);
}

.colonna-fase .avviso {
  margin: 0;
}

.colonna-fase__testa {
  display: flex;
  align-items: center;
  gap: 12px;
}

.colonna-fase__icona {
  width: 34px;
  height: 34px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: var(--petrolio-100);
  color: var(--primario);
  font-size: 1rem;
}

.colonna-fase__titoli {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.colonna-fase__sopra {
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--testo-tenue);
}

.colonna-fase__titolo {
  font-family: var(--font);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0;
  color: var(--testo-medio);
}

/* La variazione del flusso contro il periodo prima. Neutra sui conteggi:
   piu' richieste o piu' arrivi non sono di per se' ne' bene ne' male. */
.colonna-fase__delta {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  height: 24px;
  padding: 0 8px 0 6px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  cursor: default;
}

.colonna-fase__delta .bi {
  font-size: 0.75rem;
}

.colonna-fase__delta--neutro {
  background: var(--ardesia-100);
  color: var(--testo-medio);
}

.colonna-fase__delta--ok {
  background: var(--successo-fondo);
  color: var(--successo);
}

.colonna-fase__delta--att {
  background: var(--attenzione-fondo);
  color: var(--attenzione);
}

.colonna-fase__valore {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 8px;
}

.colonna-fase__numero {
  font-family: var(--font-titoli);
  font-size: 2.875rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  color: var(--testo-titoli);
}

.colonna-fase__unita {
  font-size: 0.875rem;
  color: var(--testo-tenue);
}

/* Oltre i posti: lo dice la scritta accanto al numero. */
.colonna-fase__valore--att .colonna-fase__unita {
  font-weight: 600;
  color: var(--attenzione);
}

/* La bonifica: verde solo al 100%, rosso sotto. */
.colonna-fase__valore--ok .colonna-fase__numero,
.colonna-fase__valore--ok .colonna-fase__unita {
  color: var(--successo);
}

.colonna-fase__valore--err .colonna-fase__numero,
.colonna-fase__valore--err .colonna-fase__unita {
  color: var(--errore);
}

.colonna-fase__viz {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 8px;
  min-height: 78px;
}

.colonna-fase__nota {
  margin: 0;
  font-size: 0.78125rem;
  line-height: 1.45;
  color: var(--testo-tenue);
}

.colonna-fase__nota b {
  font-weight: 600;
  color: var(--testo-medio);
  font-variant-numeric: tabular-nums;
}

.colonna-fase__azioni {
  list-style: none;
  margin: auto 0 0;
  padding: 10px 0 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  border-top: 1px solid var(--bordo-tenue);
}

.colonna-fase__sereno {
  margin: auto 0 0;
  padding: 14px 0 4px;
  display: flex;
  align-items: center;
  gap: 8px;
  border-top: 1px solid var(--bordo-tenue);
  font-size: 0.84375rem;
  font-weight: 500;
  color: var(--successo);
}

.colonna-fase__sereno .bi {
  font-size: 1rem;
  color: var(--successo-pieno);
}

.colonna-fase__vai {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.875rem;
  font-weight: 600;
}

.colonna-fase__vai:hover {
  text-decoration: none;
}

.colonna-fase__vai .bi {
  transition: transform var(--transizione);
}

.colonna-fase__vai:hover .bi {
  transform: translateX(3px);
}

.colonna-fase__scheletro {
  display: block;
  width: 46%;
  height: 46px;
  border-radius: 10px;
}

.colonna-fase__scheletro--basso {
  width: 100%;
  height: 132px;
}

/* Una cosa da fare: il numero nel colore della gravita', la frase, la
   freccia se porta a una pagina. */
.azione-fase {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) 16px;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  margin: 0 -8px;
  padding: 6px 8px;
  border-radius: 10px;
  font-size: 0.84375rem;
  line-height: 1.35;
  color: var(--testo);
  transition: background var(--transizione);
}

a.azione-fase:hover {
  background: rgba(13, 58, 92, 0.045);
  text-decoration: none;
}

a.azione-fase:focus-visible {
  outline: 2px solid var(--petrolio-500);
  outline-offset: 1px;
}

.azione-fase__n {
  min-width: 36px;
  height: 28px;
  padding: 0 8px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  font-family: var(--font-titoli);
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}

.azione-fase--err .azione-fase__n {
  background: var(--errore-fondo);
  color: var(--errore);
}

.azione-fase--att .azione-fase__n {
  background: var(--attenzione-fondo);
  color: var(--attenzione);
}

.azione-fase--info .azione-fase__n {
  background: var(--info-fondo);
  color: var(--info);
}

.azione-fase__vai {
  color: var(--testo-tenue);
  font-size: 0.875rem;
  transition: transform var(--transizione), color var(--transizione);
}

a.azione-fase:hover .azione-fase__vai {
  transform: translateX(3px);
  color: var(--primario);
}

/* --- Le pile ---------------------------------------------------------------------- */

/* La pila sottile: pezzi tondi in proporzione, il nome nel suggerimento. */
.pila-fase {
  display: flex;
  gap: 3px;
  height: 10px;
}

.pila-fase--vuota {
  border-radius: 999px;
  background: rgba(13, 58, 92, 0.08);
}

.pila-fase__pezzo {
  min-width: 6px;
  border-radius: 999px;
  transform-origin: left;
  animation: cresci 700ms var(--curva) var(--ritardo, 0ms) backwards;
}

/* La pila alta degli arrivi: i tratti col numero dentro, i posti liberi
   in chiaro, il segno dei posti quando il piazzale e' oltre. */
.pila-fase--alta {
  position: relative;
  display: block;
  height: 36px;
}

.pila-fase--oltre {
  margin-top: 22px;
}

.pila-fase__binario {
  display: flex;
  gap: 3px;
  height: 100%;
  border-radius: 10px;
  overflow: hidden;
}

.pila-fase__tratto {
  min-width: 8px;
  display: flex;
  align-items: center;
  padding: 0 10px;
  overflow: hidden;
  border-radius: 4px;
  font-family: var(--font-titoli);
  font-size: 0.8125rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: #fff;
  transform-origin: left;
  animation: cresci 700ms var(--curva) var(--ritardo, 0ms) backwards;
}

.pila-fase__tratto--arrivati {
  background: var(--petrolio-300);
  color: var(--petrolio-800);
}

.pila-fase__tratto--lavorazione {
  background: var(--petrolio-500);
}

.pila-fase__tratto--bonificati {
  background: var(--petrolio-700);
}

.pila-fase__tratto--destinati {
  background: var(--petrolio-800);
}

.pila-fase__tratto--liberi {
  background: rgba(13, 58, 92, 0.07);
  animation: none;
}

.pila-fase__posti {
  position: absolute;
  top: -22px;
  bottom: -4px;
  width: 0;
  border-left: 2px dashed var(--testo-titoli);
}

.pila-fase__posti > span {
  position: absolute;
  top: 0;
  left: 6px;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  color: var(--testo-titoli);
}

.pila-fase__posti--sinistra > span {
  left: auto;
  right: 6px;
}

/* --- Le strade del motore --------------------------------------------------------- */

.strade-fase {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.strade-fase__riga {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 4px 10px;
  font-size: 0.78125rem;
  color: var(--testo-medio);
}

.strade-fase__riga b {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--testo-titoli);
}

.strade-fase__binario {
  grid-column: 1 / -1;
  display: block;
  height: 6px;
  border-radius: 6px;
  background: rgba(13, 58, 92, 0.08);
  overflow: hidden;
}

.strade-fase__binario > i {
  display: block;
  height: 100%;
  border-radius: 6px;
  transform-origin: left;
  animation: cresci 700ms var(--curva) var(--ritardo, 0ms) backwards;
}

/* --- Le missioni di oggi -------------------------------------------------------------- */

.giro-vivo {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px;
  border-radius: var(--raggio);
  background: var(--petrolio-50);
  box-shadow: inset 0 0 0 1px var(--petrolio-100);
  color: inherit;
  transition: box-shadow var(--transizione);
}

.giro-vivo:hover {
  text-decoration: none;
  box-shadow: inset 0 0 0 1px var(--petrolio-300);
}

.giro-vivo__testa {
  display: flex;
  align-items: center;
  gap: 12px;
}

.giro-vivo__icona {
  width: 42px;
  height: 42px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: var(--primario);
  color: #fff;
  font-size: 1.125rem;
}

.giro-vivo__chi {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.giro-vivo__chi strong {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--testo-titoli);
}

.giro-vivo__chi > span {
  font-size: 0.8125rem;
  color: var(--testo-medio);
}

.giro-vivo__fermate {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 6px;
}

.giro-vivo__fermata {
  position: relative;
  height: 6px;
  overflow: hidden;
  border-radius: 6px;
  background: rgba(13, 58, 92, 0.1);
}

.giro-vivo__fermata--fatta {
  background: var(--primario);
}

.giro-vivo__fermata--ora {
  background: var(--accento);
}

/* La fermata di adesso: un riflesso che scorre, il camion e' li'. */
.giro-vivo__fermata--ora::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.7), transparent);
  background-size: 200% 100%;
  animation: riflesso 1.4s linear infinite;
}

@keyframes riflesso {
  from {
    background-position: 110% 0;
  }
  to {
    background-position: -110% 0;
  }
}

.giro-vivo__nota {
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--testo-medio);
}

.giro-vivo__nota strong {
  font-weight: 600;
  color: var(--testo);
}

.missioni-oggi {
  display: flex;
  flex-direction: column;
}

.missione-oggi {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 4px 12px;
  padding: 12px 0;
  border-top: 1px solid var(--bordo-tenue);
  font-size: 0.8125rem;
  color: var(--testo-tenue);
}

.missione-oggi:first-child {
  border-top: 0;
}

.missione-oggi:hover {
  text-decoration: none;
}

.missione-oggi > b {
  font-size: 0.84375rem;
  font-weight: 600;
  color: var(--testo-titoli);
}

.missione-oggi:hover > b {
  color: var(--primario);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.missione-oggi > span:last-child {
  grid-column: 1 / -1;
}

.missione-oggi__stato {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  background: var(--ardesia-100);
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
  color: var(--testo-medio);
}

.missione-oggi__stato::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.missione-oggi__stato--strada {
  background: var(--primario);
  color: #fff;
}

.missione-oggi__stato--parte {
  background: var(--petrolio-200);
  color: var(--petrolio-700);
}

.numeri-arrivi {
  margin: 0;
  padding-top: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  border-top: 1px solid var(--bordo-tenue);
  font-size: 0.875rem;
  color: var(--testo-medio);
}

.numeri-arrivi strong {
  margin-right: 6px;
  font-family: var(--font-titoli);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--testo-titoli);
}

/* --- Il flusso: richieste, arrivi e bonifiche ----------------------------------------- */

.legenda-serie {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.legenda-serie__voce {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid var(--bordo);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.6);
  font-family: inherit;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--testo-medio);
  cursor: pointer;
  transition: opacity var(--transizione), background var(--transizione), border-color var(--transizione);
}

.legenda-serie__voce:hover {
  border-color: var(--bordo-forte);
  background: #fff;
}

.legenda-serie__voce:focus-visible {
  outline: 2px solid var(--petrolio-500);
  outline-offset: 1px;
}

.legenda-serie__voce b {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--testo-titoli);
}

.legenda-serie__pallino {
  width: 9px;
  height: 9px;
  flex: none;
  border-radius: 50%;
}

/* La serie spenta: il pallino vuoto. Il colore e' nello stile della riga,
   per questo l'`!important`. */
.legenda-serie__voce[aria-pressed="false"] {
  opacity: 0.5;
}

.legenda-serie__voce[aria-pressed="false"] .legenda-serie__pallino {
  background: transparent !important;
  box-shadow: inset 0 0 0 2px var(--ardesia-400);
}

.grafico__area--flusso {
  height: 260px;
}

/* --- Telefono e movimento ------------------------------------------------------------- */

@media (max-width: 640px) {
  .testa-cruscotto {
    gap: 16px;
  }

  .testa-cruscotto__azioni {
    width: 100%;
  }

  .testa-cruscotto__azioni .segmentato {
    width: 100%;
  }

  .testa-cruscotto__azioni .btn {
    flex: 1 1 auto;
    justify-content: center;
  }

  .colonna-fase {
    padding: 18px 16px 14px;
  }

  .colonna-fase__numero {
    font-size: 2.5rem;
  }

  .colonna-fase__viz {
    min-height: 0;
  }

  .grafico__area--flusso {
    height: 220px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pila-fase__pezzo,
  .pila-fase__tratto,
  .strade-fase__binario > i {
    animation: none;
  }

  .giro-vivo__fermata--ora::after {
    display: none;
  }
}

/* ==========================================================================
   Officina adesso
   --------------------------------------------------------------------------
   Dal 14/10/2026 contiene anche il percorso dei veicoli: i veicoli per fase,
   coi loro elenchi, i posti fisici delle fasi d'officina e il registro della
   fase scelta. I tabelloni stanno solo in «Schermi per l'officina».
   ========================================================================== */

.officina__adesso {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 12px;
}

.officina__vivo {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--info);
  font-weight: 500;
}

.officina__vivo > span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--info-pieno);
  box-shadow: 0 0 0 4px var(--ottanio-100);
}

.officina__riga-titolo {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 6px 16px;
  flex-wrap: wrap;
}

.officina__sezione {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 30px;
}

/* --- I veicoli per fase (14/10/2026) ---------------------------------------
   Il percorso dei veicoli dentro «Officina adesso»: un contatore per fase,
   dall'arrivo all'uscita, raccolti nei gruppi del percorso; il clic apre
   sotto l'elenco dei veicoli di quella fase. */

.veicoli-fasi,
.posti-officina {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 24px;
  padding: 22px 26px 24px;
}

.veicoli-fasi__gruppi,
.veicoli-fasi__contatori {
  display: grid;
  grid-template-columns: repeat(var(--fasi, 7), minmax(0, 1fr));
  column-gap: 10px;
}

.veicoli-fasi__gruppi {
  margin-bottom: -4px;
}

.veicoli-fasi__gruppo {
  padding-bottom: 8px;
  border-bottom: 2px solid currentColor;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.71875rem;
  font-weight: 600;
}

.veicoli-fasi__gruppo--bonifica { color: var(--petrolio-600); }
.veicoli-fasi__gruppo--decisione { color: var(--testo-tenue); border-bottom-style: dashed; }
.veicoli-fasi__gruppo--strada { color: var(--petrolio-700); }
.veicoli-fasi__gruppo--uscita { color: var(--petrolio-800); border-bottom-style: dashed; }

.contatore-fase {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
  min-width: 0;
  padding: 12px 12px 14px;
  border: 0;
  border-radius: var(--raggio);
  background: var(--superficie);
  box-shadow: inset 0 0 0 1px var(--bordo-tenue);
  font-family: inherit;
  text-align: left;
  color: var(--testo);
  cursor: pointer;
  transition: box-shadow var(--transizione), background var(--transizione);
}

.contatore-fase:hover {
  box-shadow: inset 0 0 0 1px var(--petrolio-300);
}

.contatore-fase:focus-visible {
  outline: 2px solid var(--petrolio-500);
  outline-offset: 2px;
}

.contatore-fase[aria-pressed="true"] {
  background: var(--petrolio-50);
  box-shadow: inset 0 0 0 2px var(--primario);
}

.contatore-fase__numero {
  font-family: var(--font-titoli);
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--testo-titoli);
}

.contatore-fase--zero .contatore-fase__numero {
  color: var(--testo-tenue);
}

.contatore-fase__nome {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.84375rem;
  font-weight: 600;
}

.contatore-fase__nome .bi {
  font-size: 0.6875rem;
  color: var(--testo-tenue);
  transition: transform var(--transizione), color var(--transizione);
}

.contatore-fase[aria-pressed="true"] .contatore-fase__nome .bi {
  transform: rotate(180deg);
  color: var(--primario);
}

.contatore-fase__nota {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  font-size: 0.75rem;
  line-height: 1.4;
  color: var(--testo-tenue);
}

/* L'elenco della fase aperta, sotto i contatori. */
.elenco-fase {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 16px;
  border-top: 1px solid var(--bordo-tenue);
}

.elenco-fase__testa {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}

.elenco-fase__titolo {
  font-size: 1rem;
}

.elenco-fase__titolo span {
  margin-left: 6px;
  font-family: var(--font);
  font-size: 0.84375rem;
  font-weight: 500;
  color: var(--testo-tenue);
}

.elenco-fase__nota {
  margin: 2px 0 0;
  font-size: 0.8125rem;
  color: var(--testo-medio);
}

.elenco-fase__griglia {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px;
}

.elenco-fase__piede {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
}

.elenco-fase__piede .colonna-percorso__altro {
  padding: 0 18px;
}

/* --- I posti in officina (14/10/2026) ---------------------------------------
   Le fasi d'officina con i loro posti fisici: chi c'e' adesso, con la targa e
   da quanto, o libero. Il colore e' quello dei tabelloni: arancio vicino allo
   standard, rosso oltre. Il clic su una fase ne apre il registro. */

.posti-officina__ramo {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.posti-officina__ramo + .posti-officina__ramo {
  margin-top: 6px;
}

.posti-officina__ramo-nome {
  font-family: var(--font);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--petrolio-700);
}

.posti-officina__griglia {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr));
  gap: 12px;
}

.fase-posti {
  display: flex;
  flex-direction: column;
  /* Esplicito: le regole generali dei bottoni stringerebbero i posti. */
  align-items: stretch;
  gap: 10px;
  min-width: 0;
  padding: 14px 14px 12px;
  border: 0;
  border-radius: var(--raggio);
  background: var(--ardesia-25);
  box-shadow: inset 0 0 0 1px var(--bordo-tenue);
  font-family: inherit;
  text-align: left;
  color: var(--testo);
  cursor: pointer;
  transition: box-shadow var(--transizione), background var(--transizione);
}

.fase-posti--al-lavoro {
  background: var(--superficie);
  box-shadow: inset 0 0 0 1px var(--petrolio-200);
}

.fase-posti:hover {
  box-shadow: inset 0 0 0 1px var(--petrolio-300);
}

.fase-posti:focus-visible {
  outline: 2px solid var(--petrolio-500);
  outline-offset: 2px;
}

.fase-posti--scelta,
.fase-posti--scelta:hover {
  box-shadow: inset 0 0 0 2px var(--primario);
}

.fase-posti__testa {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
}

.fase-posti__nome {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--testo-titoli);
}

.fase-posti__conta {
  white-space: nowrap;
  font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
  color: var(--testo-tenue);
}

.fase-posti__conta b {
  font-family: var(--font-titoli);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--testo-titoli);
}

.fase-posti__posti {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.posto-officina {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  align-items: center;
  gap: 2px 8px;
  min-height: 34px;
  padding: 5px 8px;
  border-radius: 8px;
  font-size: 0.78125rem;
}

.posto-officina--libero {
  border: 1.5px dashed var(--ardesia-300);
  color: var(--testo-tenue);
}

.posto-officina--occupato {
  background: var(--petrolio-50);
  box-shadow: inset 0 0 0 1px var(--petrolio-200);
}

.posto-officina--vicino {
  background: var(--attenzione-velo);
  box-shadow: inset 0 0 0 1px var(--attenzione-bordo);
}

.posto-officina--oltre {
  background: var(--errore-fondo);
  box-shadow: inset 0 0 0 1px var(--errore-bordo);
}

.posto-officina__numero {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--bordo);
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--testo-medio);
}

.posto-officina__targa {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--testo-titoli);
}

.posto-officina__tempo {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--testo-titoli);
}

.posto-officina--vicino .posto-officina__tempo {
  color: var(--attenzione);
}

.posto-officina--oltre .posto-officina__tempo {
  color: var(--errore);
}

.posto-officina__chi {
  grid-column: 2 / -1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.71875rem;
  color: var(--testo-medio);
}

.posto-officina__chi:empty {
  display: none;
}

.fase-posti__oltre {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--errore);
}

.fase-posti__piede {
  font-size: 0.75rem;
  color: var(--testo-tenue);
}

@media (max-width: 1180px) {
  .veicoli-fasi__gruppi {
    display: none;
  }

  .veicoli-fasi__contatori {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    row-gap: 10px;
  }
}

@media (max-width: 640px) {
  .veicoli-fasi,
  .posti-officina {
    padding: 18px 16px;
  }

  .veicoli-fasi__contatori {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .elenco-fase__griglia {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  }
}

/* --- Il registro: giorno, veicolo, durate ------------------------------------ */

.registro-fase__giorno {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 0.8125rem;
  color: var(--testo-medio);
}

.registro-fase__giorno input {
  height: 36px;
  padding: 0 10px;
  border: 1px solid var(--bordo-forte);
  border-radius: var(--raggio-s);
  background: var(--superficie);
  color: var(--testo);
  font: inherit;
}

.registro-fase__veicolo {
  font-family: var(--font-mono);
  font-weight: 600;
}

.registro-fase__oltre {
  font-size: 0.78125rem;
  color: var(--errore);
}

.registro-fase__esclusa {
  font-size: 0.75rem;
  color: var(--testo-tenue);
}

.registro-fase__in-corso {
  font-weight: 500;
  color: var(--info);
}

.registro-fase__vuoto {
  margin: 0;
}

.registro-fase__periodo {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin-top: 14px;
  padding: 14px 16px;
  border-radius: var(--raggio);
  background: var(--ardesia-50);
  font-size: 0.84375rem;
  color: var(--ardesia-700);
}

.registro-fase__periodo .cruscotto__vai {
  margin-top: 0;
}

/* --- Le schede dei veicoli di una fase ------------------------------------
   Nell'elenco che si apre dai contatori: targa e modello, la riga che conta,
   le etichette e l'uscita dal piazzale. */

.colonna-percorso__vuota {
  margin: 0;
  padding: 14px 12px;
  border: 1.5px dashed var(--ardesia-300);
  border-radius: var(--raggio);
  font-size: 0.78125rem;
  line-height: 1.5;
  color: var(--testo-tenue);
}

.colonna-percorso__altro {
  min-height: 40px;
  border: 0;
  border-radius: 10px;
  background: var(--ardesia-100);
  color: var(--ardesia-700);
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 500;
  cursor: pointer;
  transition: background var(--transizione);
}

.colonna-percorso__altro:hover {
  background: var(--ardesia-150);
}

.colonna-percorso__altro span {
  font-weight: 400;
  color: var(--testo-tenue);
}

.scheda-percorso {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  padding: 10px 12px;
  border-radius: var(--raggio);
  background: var(--superficie);
  box-shadow: var(--ombra-scheda);
}

.scheda-percorso--errore {
  box-shadow: var(--ombra-s), 0 0 0 1px var(--errore-bordo);
}

.scheda-percorso--attenzione {
  box-shadow: var(--ombra-s), 0 0 0 1px var(--attenzione-bordo);
}

.scheda-percorso__apri {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  min-width: 0;
  color: inherit;
}

.scheda-percorso__apri:hover {
  text-decoration: none;
}

.scheda-percorso__apri:hover .scheda-percorso__modello {
  text-decoration: underline;
}

.scheda-percorso__modello {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.8125rem;
  color: var(--ardesia-700);
}

/* Chiusa, la colonna e' un elenco di targhe e modelli: la riga che conta, le
   etichette e l'uscita si aprono dalla testata. */
.scheda-percorso__dettagli {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.scheda-percorso__info {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.75rem;
  color: var(--testo-medio);
}

.scheda-percorso__punto {
  width: 7px;
  height: 7px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--neutro-pieno);
}

.scheda-percorso__info--successo { color: var(--successo); }
.scheda-percorso__info--successo .scheda-percorso__punto { background: var(--successo-pieno); }
.scheda-percorso__info--errore { color: var(--errore); font-weight: 500; }
.scheda-percorso__info--errore .scheda-percorso__punto { background: var(--errore-pieno); }
.scheda-percorso__info--attenzione { color: var(--attenzione); font-weight: 500; }
.scheda-percorso__info--attenzione .scheda-percorso__punto { background: var(--attenzione-pieno); }
.scheda-percorso__info--info { color: var(--info); }
.scheda-percorso__info--info .scheda-percorso__punto { background: var(--info-pieno); }

.scheda-percorso__segni {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.scheda-percorso__segni span {
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--ardesia-100);
  font-size: 0.6875rem;
  color: var(--ardesia-700);
}

.scheda-percorso__uscita {
  min-height: 32px;
  margin-top: 2px;
  border: 0;
  border-radius: var(--raggio-s);
  background: var(--petrolio-100);
  color: var(--petrolio-800);
  font: inherit;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--transizione);
}

.scheda-percorso__uscita:hover {
  background: var(--petrolio-200);
}

.percorso-veicoli__scelte {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

@media (max-width: 640px) {
  .percorso-veicoli__scelte {
    grid-template-columns: minmax(0, 1fr);
  }

  .scheda-percorso__uscita {
    min-height: 44px;
  }
}

/* ==========================================================================
   Ritiri in pari — numeri, grafici, mappa, lavagna, messaggi, stampa

   Le pagine dei ritiri dopo il meeting del 06/10/2026. Due tavolozze, e
   ciascuna fa un lavoro solo:

   * i CANALI: identita', mai stato. Nella proposta A sono gradini del blu
     e dei neutri del marchio (blu profondo le concessionarie, blu i
     privati, azzurro i portali, grigio scuro le carrozzerie, grigio chiaro
     «altri»): il brand book non ammette colori fuori palette, quindi si
     distinguono per chiarezza piu' che per tinta, e accanto c'e' SEMPRE il
     nome: in legenda, nella riga, nel suggerimento della mappa. Niente
     rosso, arancio o verde, che dicono la scadenza e lo stato. I valori
     stanno anche in `logistica.js`, che li passa ai grafici e alla mappa;
   * la SCADENZA usa i semantici (errore, attenzione), sempre con l'icona e
     la parola.

   Il movimento c'e' ma non distrae: le tessere compaiono in cascata, il
   tracciato del giro si disegna, le richieste scadute pulsano sulla mappa.
   Con `prefers-reduced-motion` tutto resta fermo.
   ========================================================================== */

:root {
  --canale-privato: #2a85b3; /* blu 500 */
  --canale-concessionaria: #0d3a5c; /* blu 800 */
  --canale-portali: #9ccbe4; /* blu 300 */
  --canale-carrozzeria: #4c5258; /* neutro 700 */
  --canale-altri: #c4c8ce; /* neutro 400 */
  /* Il tracciato del giro e i giri gia' fatti, sulla mappa. */
  --tracciato: var(--petrolio-700);
  --tracciato-altri: var(--ottanio-600);
}

/* --- Comparsa -------------------------------------------------------------- */

@keyframes comparsa {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.compare {
  animation: comparsa 420ms cubic-bezier(0.2, 0.7, 0.3, 1) both;
  animation-delay: var(--ritardo, 0ms);
}

/* --- Tessere: il numero di testa, con la sua tendenza ---------------------- */

.tessere {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
  margin-bottom: 20px;
}

.tessera {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  padding: 16px 18px 14px;
  border: 0;
  border-radius: var(--raggio);
  background: var(--vetro);
  box-shadow: var(--ombra-scheda), inset 0 0 0 1px var(--vetro-bordo);
  color: inherit;
  font: inherit;
  text-align: left;
  overflow: hidden;
  transition: box-shadow 200ms var(--curva), transform 200ms var(--curva),
    background var(--transizione);
}

a.tessera,
button.tessera {
  cursor: pointer;
}

/* Passandoci sopra la tessera si solleva: si capisce che si apre. */
a.tessera:hover,
button.tessera:hover {
  text-decoration: none;
  color: inherit;
  background: var(--vetro-forte);
  transform: translateY(-2px);
  box-shadow: var(--ombra-s), var(--anello), var(--ombra-l);
}

a.tessera:focus-visible,
button.tessera:focus-visible {
  outline: none;
  box-shadow: var(--anello-focus), var(--ombra-s);
}

.tessera[aria-pressed="true"] {
  background: var(--petrolio-50);
  box-shadow: inset 0 0 0 1.5px var(--petrolio-500), var(--ombra-s);
}

.tessera__etichetta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--testo-medio);
}

.tessera__etichetta i {
  color: var(--testo-tenue);
  font-size: 0.875rem;
}

.tessera__riga {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 8px;
  min-height: 34px;
}

/* Il numero di testa e' Archivo largo: e' quello che si legge da lontano. */
.tessera__valore {
  color: var(--testo-titoli);
  font-family: var(--font-titoli);
  font-stretch: var(--largo);
  font-size: 1.875rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.tessera__unita {
  margin-left: 3px;
  font-family: var(--font);
  font-stretch: 100%;
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--testo-medio);
}

.tessera__nota {
  min-height: 1.15em;
  font-size: 0.75rem;
  color: var(--testo-tenue);
}

.tessera__delta {
  display: inline-flex;
  align-items: center;
  gap: 1px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.tessera__delta--meglio {
  color: var(--successo);
}

.tessera__delta--peggio {
  color: var(--errore);
}

/* Il tono e' un punto, come nei contatori: il numero colorato resta
   l'informazione, la parola accanto la spiega. */
.tessera--errore .tessera__valore {
  color: var(--errore);
}
.tessera--attenzione .tessera__valore {
  color: var(--attenzione);
}
.tessera--info .tessera__valore {
  color: var(--info);
}

/* La composizione per canale sotto il numero: una barra sola, a pezzi. */
.tessera__barra {
  display: flex;
  gap: 2px;
  height: 6px;
  margin-top: 8px;
  border-radius: 3px;
  overflow: hidden;
  background: var(--ardesia-100);
}

.tessera__barra span {
  height: 100%;
  min-width: 3px;
  border-radius: 3px;
  transition: flex-grow 500ms ease;
}

.scintilla {
  display: block;
  flex-shrink: 0;
  overflow: visible;
}

/* --- Grafici ---------------------------------------------------------------- */

.grafici {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: 14px;
  margin-bottom: 24px;
}

.grafici--pari {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grafico {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 18px 20px 14px;
  border-radius: var(--raggio-l);
  background: var(--superficie);
  box-shadow: var(--ombra-scheda);
}

.grafico__testa {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px 16px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.grafico__titolo {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.grafico__sotto {
  margin: 2px 0 0;
  font-size: 0.78125rem;
  color: var(--testo-tenue);
}

.grafico__area {
  position: relative;
  height: 220px;
}

.grafico__area--bassa {
  height: 168px;
}

.grafico__piede {
  margin: 10px 0 0;
  font-size: 0.75rem;
  color: var(--testo-tenue);
}

.grafico__vuoto {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 24px;
  font-size: 0.8125rem;
  color: var(--testo-tenue);
  text-align: center;
}

/* Barre orizzontali in HTML: per pochi valori, senza libreria. */
.barre {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.barre__voce {
  display: grid;
  grid-template-columns: minmax(0, 11.5rem) minmax(0, 1fr) 2.5rem;
  align-items: center;
  gap: 10px;
  font-size: 0.8125rem;
}

.barre__nome {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  color: var(--testo-medio);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.barre__pista {
  height: 12px;
  border-radius: 4px;
  background: var(--ardesia-50);
  overflow: hidden;
}

/* Uno span: senza `display: block` larghezza e altezza non contano, e la
   barra non si vede. */
.barre__barra {
  display: block;
  height: 100%;
  min-width: 4px;
  border-radius: 0 4px 4px 0;
  transform-origin: left center;
  animation: cresci 600ms cubic-bezier(0.2, 0.7, 0.3, 1) both;
  animation-delay: var(--ritardo, 0ms);
}

.barre__valore {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-align: right;
  color: var(--testo-forte);
}

button.barre__voce {
  width: 100%;
  padding: 3px 4px;
  margin: -3px -4px;
  border: 0;
  border-radius: 8px;
  background: none;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

button.barre__voce:hover {
  background: var(--ardesia-50);
}

button.barre__voce[aria-pressed="true"] {
  background: var(--petrolio-50);
  box-shadow: inset 0 0 0 1px var(--petrolio-200);
}

@keyframes cresci {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

/* Dove sta il lavoro da ritirare: una barra sola, a pezzi, con le fasi. */
.fasi-lavoro {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--bordo-tenue);
}

.fasi-lavoro__titolo {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin: 0 0 8px;
  font-size: 0.78125rem;
  color: var(--testo-medio);
}

.fasi-lavoro__barra {
  display: flex;
  gap: 2px;
  height: 10px;
  border-radius: 4px;
  background: var(--ardesia-100);
  overflow: hidden;
}

.fasi-lavoro__barra span {
  display: block;
  height: 100%;
  min-width: 4px;
  transition: flex-grow 500ms ease;
}

.fasi-lavoro .legenda {
  margin-top: 9px;
}

/* --- Legende ---------------------------------------------------------------- */

.legenda {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  font-size: 0.78125rem;
  color: var(--testo-medio);
}

.legenda__voce {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

button.legenda__voce {
  padding: 2px 6px;
  margin: -2px -6px;
  border: 0;
  border-radius: 6px;
  background: none;
  font: inherit;
  color: inherit;
  cursor: pointer;
}

button.legenda__voce:hover {
  background: var(--ardesia-50);
}

button.legenda__voce[aria-pressed="false"] {
  opacity: 0.45;
  text-decoration: line-through;
}

.legenda__segno {
  display: inline-block;
  flex-shrink: 0;
}

.legenda__segno--barra {
  width: 10px;
  height: 10px;
  border-radius: 3px;
}

.legenda__segno--linea {
  width: 16px;
  height: 3px;
  border-radius: 2px;
}

.legenda__segno--tratteggio {
  width: 16px;
  height: 0;
  border-top: 2px dashed var(--tracciato-altri);
  background: none !important;
}

.legenda__pallino {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  border: 2px solid #fff;
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(13, 58, 92, 0.2);
}

.legenda__pallino--giro {
  width: 16px;
  height: 16px;
  background: var(--petrolio-700);
}

.legenda__pallino--vuoto {
  background: #fff;
  border: 3px solid var(--ardesia-500);
  box-shadow: none;
}

.legenda__pallino--anello {
  background: var(--ardesia-300);
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--errore-pieno);
  margin: 0 2px;
}

.legenda__pallino--tenue {
  background: var(--ardesia-400);
  opacity: 0.5;
}

.legenda__sede {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 5px;
  background: var(--petrolio-800);
  color: #fff;
  font-size: 0.5625rem;
}

/* --- Canale e scadenza -------------------------------------------------------- */

.canale {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.canale__punto {
  width: 8px;
  height: 8px;
  flex-shrink: 0;
  border-radius: 50%;
  /* Un filo di bordo: il grigio chiaro di «altri» sul bianco sparirebbe. */
  box-shadow: inset 0 0 0 1px rgba(14, 20, 25, 0.14);
}

.scadenza {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.55;
  white-space: nowrap;
}

.scadenza i {
  font-size: 0.75rem;
}

.scadenza--scaduta {
  background: var(--errore-fondo);
  color: var(--errore);
}

.scadenza--urgente {
  background: var(--attenzione-fondo);
  color: var(--attenzione);
}

.scadenza--vicina {
  background: var(--ardesia-100);
  color: var(--ardesia-700);
}

.scadenza--lontana {
  padding-left: 0;
  background: transparent;
  color: var(--testo-tenue);
}

/* Il lotto: i veicoli arrivati insieme, dallo stesso file o carico. */
.lotto {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 1px 7px;
  border-radius: 6px;
  background: var(--ardesia-100);
  color: var(--testo-medio);
  font-family: var(--font-mono);
  font-size: 0.71875rem;
  white-space: nowrap;
}

a.lotto:hover {
  background: var(--petrolio-50);
  color: var(--primario);
  text-decoration: none;
}

.chip--piccolo {
  min-height: 28px;
  padding: 0 10px;
  font-size: 0.75rem;
  gap: 6px;
}

/* --- Mappa ---------------------------------------------------------------------- */

.mappa {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 280px;
  border-radius: var(--raggio-l);
  background: var(--ardesia-100);
  overflow: hidden;
  isolation: isolate;
}

.mappa.leaflet-container {
  font: inherit;
  font-size: 0.8125rem;
  background: var(--ardesia-100);
}

/* Le tessere di OpenStreetMap, spente e appena azzurrate come la mappa
   della proposta A: i colori della mappa non devono competere con quelli dei
   canali, che sono anche loro dei blu. Il tracciato e i pallini stanno sopra
   le tessere e non prendono il filtro. */
.mappa__tessere {
  filter: grayscale(1) sepia(0.16) hue-rotate(170deg) saturate(1.5) brightness(1.07) contrast(0.88);
}

.mappa .leaflet-control-attribution {
  padding: 1px 7px;
  border-radius: 6px 0 0 0;
  background: rgba(255, 255, 255, 0.82);
  font-size: 0.625rem;
  color: var(--testo-tenue);
}

.mappa .leaflet-control-attribution a {
  color: var(--testo-medio);
}

.mappa .leaflet-bar {
  border: 0;
  border-radius: 10px;
  box-shadow: var(--ombra);
  overflow: hidden;
}

.mappa .leaflet-bar a {
  width: 32px;
  height: 32px;
  line-height: 31px;
  color: var(--testo-forte);
  border-bottom-color: var(--bordo-tenue);
}

.mappa .leaflet-bar a:hover {
  background: var(--ardesia-50);
}

.mappa__sopra {
  position: absolute;
  z-index: 500;
  pointer-events: auto;
}

.mappa__sopra--basso-sinistra {
  left: 12px;
  bottom: 12px;
  max-width: calc(100% - 80px);
}

.mappa__sopra--alto-sinistra {
  left: 12px;
  top: 12px;
}

.mappa__sopra--alto-destra {
  right: 12px;
  top: 12px;
}

.legenda--mappa {
  padding: 8px 12px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: var(--ombra);
  backdrop-filter: blur(4px);
}

.mappa__messaggio {
  position: absolute;
  inset: 0;
  z-index: 600;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 24px;
  background: rgba(243, 248, 252, 0.92);
  color: var(--testo-medio);
  font-size: 0.875rem;
  text-align: center;
}

.mappa__messaggio i {
  font-size: 1.75rem;
  color: var(--ardesia-400);
}

.mappa__stato {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: var(--ombra);
  font-size: 0.75rem;
  color: var(--testo-medio);
}

.mappa__stato i {
  color: var(--ottanio-500);
}

.mappa--scheda {
  height: 220px;
  min-height: 0;
  border-radius: 12px;
}

.mappa--giro {
  height: 400px;
}

/* I suggerimenti e i fumetti della mappa: il carattere e i toni del resto. */
.leaflet-tooltip.etichetta-mappa {
  padding: 7px 10px;
  border: 0;
  border-radius: 8px;
  background: var(--petrolio-800);
  box-shadow: var(--ombra-l);
  color: #f7fcff;
  font-family: var(--font);
  font-size: 0.75rem;
  line-height: 1.4;
  white-space: nowrap;
}

.leaflet-tooltip.etichetta-mappa strong {
  color: #fff;
  font-weight: 600;
}

.leaflet-tooltip-top.etichetta-mappa::before {
  border-top-color: var(--ardesia-900);
}
.leaflet-tooltip-bottom.etichetta-mappa::before {
  border-bottom-color: var(--ardesia-900);
}
.leaflet-tooltip-left.etichetta-mappa::before {
  border-left-color: var(--ardesia-900);
}
.leaflet-tooltip-right.etichetta-mappa::before {
  border-right-color: var(--ardesia-900);
}

.mappa .leaflet-popup-content-wrapper {
  border-radius: 12px;
  box-shadow: var(--ombra-l);
}

.mappa .leaflet-popup-content {
  margin: 12px 14px;
  font-size: 0.8125rem;
  line-height: 1.45;
}

/* --- Segnaposti ------------------------------------------------------------------ */

.pin-guscio {
  background: none;
  border: 0;
}

.pin {
  --pin: var(--canale-privato);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  border: 2px solid #fff;
  border-radius: 50%;
  background: var(--pin);
  box-shadow: 0 1px 3px rgba(13, 58, 92, 0.4);
  color: #fff;
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: transform 160ms ease, box-shadow 160ms ease;
}

.pin:hover,
.pin--evidenziato {
  transform: scale(1.3);
}

/* Nel giro: il numero della fermata su fondo scuro, il canale nel bordo. */
.pin--scelto {
  border: 3px solid var(--pin);
  background: var(--petrolio-700);
  box-shadow: 0 0 0 2px #fff, 0 2px 6px rgba(13, 58, 92, 0.45);
  font-size: 0.75rem;
}

/* Pronta ma senza la verifica dei gravami: si vede vuota, non si assegna. */
.pin--vuoto {
  border: 3px solid var(--pin);
  background: #fff;
}

/* In valutazione: il contesto della zona, non lavoro da assegnare. */
.pin--tenue {
  opacity: 0.5;
  box-shadow: none;
  cursor: default;
}

.pin--anello-scaduta {
  box-shadow: 0 0 0 2px #fff, 0 0 0 4.5px var(--errore-pieno),
    0 1px 4px rgba(13, 58, 92, 0.3);
  animation: pulsa-scaduta 2.4s ease-out infinite;
}

.pin--anello-oggi,
.pin--anello-urgente {
  box-shadow: 0 0 0 2px #fff, 0 0 0 4.5px var(--attenzione-pieno),
    0 1px 4px rgba(13, 58, 92, 0.3);
}

@keyframes pulsa-scaduta {
  0% {
    box-shadow: 0 0 0 2px #fff, 0 0 0 4.5px var(--errore-pieno),
      0 0 0 4.5px rgba(214, 71, 79, 0.45);
  }
  75%,
  100% {
    box-shadow: 0 0 0 2px #fff, 0 0 0 4.5px var(--errore-pieno),
      0 0 0 15px rgba(214, 71, 79, 0);
  }
}

.pin--sede {
  border-radius: 10px;
  background: var(--petrolio-800);
  box-shadow: 0 0 0 2px #fff, var(--ombra);
  font-size: 0.9375rem;
  cursor: default;
}

.pin--sede:hover {
  transform: none;
}

/* Un veicolo arrivato o caricato, sulla mappa della missione. */
.pin--fatto {
  background: var(--successo-pieno);
  border-color: #fff;
}

.pin--saltato {
  background: var(--ardesia-400);
  border-color: #fff;
}

/* Il tracciato del giro: si disegna da dove parte, poi resta fermo. */
.tracciato {
  transition: stroke-dashoffset 1100ms cubic-bezier(0.3, 0.6, 0.3, 1);
}

/* --- La lavagna: coda, mappa, giro ------------------------------------------------ */

.lavagna-mappa {
  display: grid;
  grid-template-columns: 330px minmax(0, 1fr) 370px;
  grid-template-areas: "coda mappa giro";
  gap: 16px;
  height: clamp(560px, calc(100vh - 230px), 940px);
  margin-bottom: 28px;
}

.lavagna-mappa > * {
  min-height: 0;
  min-width: 0;
}

.lavagna-mappa__coda {
  grid-area: coda;
}
.lavagna-mappa__mappa {
  grid-area: mappa;
  position: relative;
  border-radius: var(--raggio-l);
  box-shadow: var(--ombra-scheda);
}

/* La mappa riempie la sua cella qualunque sia l'altezza della riga. */
.lavagna-mappa__mappa > .mappa {
  position: absolute;
  inset: 0;
  height: auto;
  min-height: 0;
}
.lavagna-mappa__giro {
  grid-area: giro;
}

/* Elenco a sinistra, mappa al centro, giro a destra anche sui portatili
   (12/10/2026): con l'elenco sotto la mappa, chi componeva il giro andava su
   e giu' per la pagina. Sotto i 1600px le colonne laterali si stringono. */
@media (max-width: 1599px) {
  .lavagna-mappa {
    grid-template-columns: 280px minmax(0, 1fr) 330px;
    gap: 14px;
  }
}

@media (max-width: 1439px) {
  .lavagna-mappa {
    grid-template-columns: 250px minmax(0, 1fr) 300px;
  }
}

/* Sotto i 1180px tre colonne non ci stanno: la mappa sopra, elenco e giro
   affiancati sotto. */
@media (max-width: 1179px) {
  .lavagna-mappa {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: 440px 560px;
    grid-template-areas:
      "mappa mappa"
      "coda giro";
    height: auto;
  }
}

@media (max-width: 760px) {
  .lavagna-mappa {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 380px auto 480px;
    grid-template-areas:
      "mappa"
      "giro"
      "coda";
  }

  .lavagna-mappa__giro {
    max-height: none;
  }
}

/* Il riepilogo sopra la lavagna: cosa c'e' da fare, a colpo d'occhio. */
.lavagna-sommario {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 22px;
  margin: -8px 0 18px;
  font-size: 0.875rem;
  color: var(--testo-medio);
}

.lavagna-sommario strong {
  font-size: 1.0625rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--testo);
}

.lavagna-sommario__voce {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
}

.lavagna-sommario__voce--errore strong {
  color: var(--errore);
}

.lavagna-sommario__voce--attenzione strong {
  color: var(--attenzione);
}

/* --- La coda della lavagna --------------------------------------------------------- */

.coda-mappa {
  display: flex;
  flex-direction: column;
  height: 100%;
  border-radius: var(--raggio-l);
  background: var(--superficie);
  box-shadow: var(--ombra-scheda);
  overflow: hidden;
}

.coda-mappa__testa {
  padding: 16px 16px 12px;
  border-bottom: 1px solid var(--bordo-tenue);
}

.coda-mappa__titolo {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.coda-mappa__titolo h2 {
  font-size: 1rem;
}

.coda-mappa__titolo .tenue {
  font-size: 0.8125rem;
}

.coda-mappa__filtri {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.coda-mappa__ordine {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  font-size: 0.75rem;
  color: var(--testo-tenue);
}

.coda-mappa__ordine select {
  flex: 1;
  min-width: 0;
  max-width: 100%;
  text-overflow: ellipsis;
  padding: 2px 6px;
  border: 1px solid var(--bordo);
  border-radius: 7px;
  background: var(--superficie);
  font: inherit;
  font-size: 0.75rem;
  color: var(--testo-forte);
}

.coda-mappa__elenco {
  flex: 1;
  margin: 0;
  padding: 6px;
  list-style: none;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.coda-mappa__voce {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  padding: 10px;
  border-radius: 10px;
  cursor: pointer;
  transition: background var(--transizione), box-shadow var(--transizione);
}

.coda-mappa__voce + .coda-mappa__voce {
  margin-top: 2px;
}

.coda-mappa__voce:hover,
.coda-mappa__voce--evidenziata {
  background: var(--ardesia-50);
}

.coda-mappa__voce--scelta,
.coda-mappa__voce--scelta:hover {
  background: var(--petrolio-50);
  box-shadow: inset 0 0 0 1px var(--petrolio-200);
}

.coda-mappa__voce--bloccata {
  cursor: default;
}

.coda-mappa__aggiungi {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  margin-top: 1px;
  border: 1.5px solid var(--bordo-forte);
  border-radius: 50%;
  background: var(--superficie);
  color: var(--primario);
  font-size: 0.75rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: var(--transizione);
}

.coda-mappa__aggiungi:hover:not(:disabled) {
  border-color: var(--petrolio-500);
  background: var(--petrolio-50);
}

.coda-mappa__aggiungi:focus-visible {
  outline: none;
  box-shadow: var(--anello-focus);
}

.coda-mappa__voce--scelta .coda-mappa__aggiungi,
.coda-mappa__voce--scelta .coda-mappa__aggiungi:hover:not(:disabled) {
  border: 3px solid var(--pin, var(--petrolio-700));
  background: var(--petrolio-700);
  color: #fff;
}

.coda-mappa__voce--scelta .coda-mappa__aggiungi:hover:not(:disabled) {
  background: var(--petrolio-900);
}

.coda-mappa__aggiungi:disabled {
  border-style: dashed;
  background: var(--ardesia-50);
  color: var(--testo-tenue);
  cursor: not-allowed;
}

.coda-mappa__corpo {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.coda-mappa__riga {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 8px;
  min-width: 0;
}

.coda-mappa__nome {
  min-width: 0;
  font-size: 0.875rem;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.coda-mappa__sotto {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 3px 10px;
  font-size: 0.75rem;
  color: var(--testo-tenue);
}

.coda-mappa__piede {
  padding: 10px 16px 12px;
  border-top: 1px solid var(--bordo-tenue);
  background: var(--superficie-alt);
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--testo-tenue);
}

/* --- Il giro che si compone -------------------------------------------------------- */

.compositore {
  display: flex;
  flex-direction: column;
  height: 100%;
  border-radius: var(--raggio-l);
  background: var(--superficie);
  box-shadow: var(--ombra-rilievo);
  overflow: hidden;
}

.compositore__testa {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 18px 12px;
  border-bottom: 1px solid var(--bordo-tenue);
}

.compositore__testa h2 {
  font-size: 1rem;
}

.compositore__conta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 7px;
  border-radius: 999px;
  background: var(--petrolio-700);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.compositore__conta--zero {
  background: var(--ardesia-150);
  color: var(--testo-medio);
}

.compositore__corpo {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 16px;
  padding: 14px 18px 18px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* I riquadri vuoti (niente avvisi, giro ancora vuoto) non lasciano buchi. */
.compositore__corpo > div:empty {
  display: none;
}

.compositore__parametri {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 10px;
}

.compositore__parametri .campo {
  margin: 0;
}

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

.compositore__parametri .campo__etichetta {
  margin-bottom: 3px;
  font-size: 0.75rem;
}

.compositore__parametri .campo input,
.compositore__parametri .campo select {
  padding: 0.375rem 0.625rem;
  border-radius: 9px;
  font-size: 0.875rem;
}

.compositore__titoletto {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin: 0 0 8px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--testo-forte);
}

.compositore__titoletto small {
  font-weight: 400;
  color: var(--testo-tenue);
}

.compositore__vuoto {
  padding: 22px 16px;
  border: 1.5px dashed var(--bordo-forte);
  border-radius: 12px;
  font-size: 0.8125rem;
  color: var(--testo-tenue);
  text-align: center;
  line-height: 1.5;
}

.compositore__vuoto i {
  display: block;
  margin-bottom: 6px;
  font-size: 1.5rem;
  color: var(--ardesia-400);
}

.compositore__piede {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 18px 16px;
  border-top: 1px solid var(--bordo-tenue);
  background: var(--superficie-alt);
}

.compositore__piede .btn {
  width: 100%;
}

.compositore__esistente {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px;
}

.compositore__esistente select {
  min-width: 0;
  padding: 0.4375rem 0.625rem;
  border: 1px solid var(--bordo-forte);
  border-radius: 10px;
  background: var(--superficie);
  font: inherit;
  font-size: 0.8125rem;
}

.compositore__esistente .btn {
  width: auto;
}

/* Le fermate: un filo dalla sede alla sede, con la tratta fra l'una e
   l'altra e l'ora a cui ci si arriva. */
.giro-composto {
  margin: 0;
  padding: 0;
  list-style: none;
}

.giro-composto__voce {
  position: relative;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  gap: 4px 10px;
  padding-bottom: 14px;
}

.giro-composto__voce::before {
  content: "";
  position: absolute;
  top: 30px;
  bottom: 2px;
  left: 13px;
  width: 2px;
  border-radius: 1px;
  background: var(--ottanio-200);
}

.giro-composto__voce:last-child {
  padding-bottom: 0;
}

.giro-composto__voce:last-child::before {
  display: none;
}

.giro-composto__segno {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 3px solid var(--pin, var(--petrolio-700));
  border-radius: 50%;
  background: var(--petrolio-700);
  box-shadow: 0 0 0 2px #fff;
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.giro-composto__segno--sede {
  border-color: var(--petrolio-800);
  border-radius: 8px;
  background: var(--petrolio-800);
  font-size: 0.8125rem;
}

.giro-composto__corpo {
  min-width: 0;
}

.giro-composto__nome {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 8px;
  font-size: 0.875rem;
  font-weight: 500;
}

.giro-composto__sotto {
  margin-top: 1px;
  font-size: 0.75rem;
  color: var(--testo-tenue);
}

.giro-composto__tratta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 3px;
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
  color: var(--ottanio-700);
}

.giro-composto__orario {
  font-size: 0.875rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--testo-forte);
  text-align: right;
}

.giro-composto__comandi {
  display: flex;
  justify-content: flex-end;
  gap: 2px;
  margin-top: 4px;
}

.giro-composto__comandi .btn--icona {
  width: 26px;
  height: 26px;
}

/* I numeri del giro: chilometri e tempi in ottanio (la strada), soldi in
   inchiostro. */
.totali-giro {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  border-radius: 12px;
  background: var(--bordo-tenue);
  box-shadow: 0 0 0 1px var(--bordo-tenue);
  overflow: hidden;
}

.totale-giro {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  padding: 10px 12px;
  background: var(--superficie);
}

.totale-giro__etichetta {
  font-size: 0.71875rem;
  color: var(--testo-tenue);
}

.totale-giro__valore {
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.totale-giro__valore small {
  margin-left: 2px;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--testo-medio);
}

.totale-giro--strada .totale-giro__valore {
  color: var(--ottanio-700);
}

.totale-giro--attesa .totale-giro__valore {
  color: var(--ardesia-300);
}

/* La composizione del costo: carburante, pedaggi, autista. */
.barra-costi {
  display: flex;
  gap: 2px;
  height: 8px;
  border-radius: 4px;
  background: var(--ardesia-100);
  overflow: hidden;
}

.barra-costi__parte {
  height: 100%;
  min-width: 4px;
  border-radius: 4px;
  transition: flex-grow 400ms ease;
}

.barra-costi__parte--carburante {
  background: var(--petrolio-600);
}
.barra-costi__parte--pedaggi {
  background: var(--ottanio-400);
}
.barra-costi__parte--autista {
  background: var(--ardesia-400);
}

.voci-costi {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 4px 12px;
  margin-top: 7px;
  font-size: 0.75rem;
  color: var(--testo-medio);
}

.voci-costi span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-variant-numeric: tabular-nums;
}

.voci-costi i {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 2px;
}

/* La capienza del mezzo: una tacca per posto; oltre, in ambra. */
.tacca--oltre {
  background: var(--attenzione-pieno);
}

.capienza-giro {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.capienza-giro__riga {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 0.75rem;
  color: var(--testo-medio);
}

.capienza-giro__riga strong {
  color: var(--testo-forte);
  font-variant-numeric: tabular-nums;
}

.capienza-giro__oltre {
  color: var(--attenzione);
  font-weight: 500;
}

/* Gli avvisi: cosa guardare prima di far partire il giro. Non bloccano. */
.avvisi-giro {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.avviso-giro {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr);
  gap: 8px;
  padding: 8px 10px;
  border-radius: 10px;
  background: var(--attenzione-velo);
  box-shadow: inset 0 0 0 1px var(--attenzione-bordo);
  color: var(--attenzione);
  font-size: 0.8125rem;
  line-height: 1.4;
}

.avviso-giro i {
  margin-top: 2px;
}

.avviso-giro--errore {
  background: #fdf3f4;
  box-shadow: inset 0 0 0 1px var(--errore-bordo);
  color: var(--errore);
}

.avviso-giro--info {
  background: var(--info-fondo);
  box-shadow: inset 0 0 0 1px var(--info-bordo);
  color: var(--info);
}

/* Da dove vengono km e tempi: la strada vera, o la linea d'aria. */
.fonte-stime {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.71875rem;
  color: var(--testo-tenue);
}

.fonte-stime i {
  color: var(--ottanio-500);
}

.fonte-stime--aria i {
  color: var(--ardesia-400);
}

.in-calcolo {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.75rem;
  color: var(--testo-tenue);
}

.in-calcolo::before {
  content: "";
  width: 10px;
  height: 10px;
  border: 2px solid var(--ottanio-200);
  border-top-color: var(--ottanio-600);
  border-radius: 50%;
  animation: gira 700ms linear infinite;
}

@keyframes gira {
  to {
    transform: rotate(360deg);
  }
}

/* --- I giri del giorno, sotto la lavagna --------------------------------------------- */

.giri-giorno {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 12px;
}

.giro-giorno {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 16px;
  border-radius: 14px;
  background: var(--superficie);
  box-shadow: var(--ombra-scheda);
  color: inherit;
  transition: box-shadow var(--transizione), transform var(--transizione);
}

a.giro-giorno:hover,
.giro-giorno--evidenziato {
  text-decoration: none;
  color: inherit;
  transform: translateY(-1px);
  box-shadow: var(--ombra-s), 0 0 0 1px var(--ottanio-300), var(--ombra);
}

.giro-giorno__testa {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.giro-giorno__codice {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-weight: 600;
}

.giro-giorno__chi {
  font-size: 0.8125rem;
  color: var(--testo-medio);
}

.giro-giorno__numeri {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
  color: var(--testo-medio);
}

.giro-giorno__numeri strong {
  color: var(--testo-forte);
  font-weight: 600;
}

/* --- Messaggi gia' scritti ------------------------------------------------------------- */

.messaggi {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.messaggio {
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--superficie);
  box-shadow: inset 0 0 0 1px var(--bordo-tenue);
}

.messaggio--spento {
  background: var(--superficie-alt);
}

.messaggio__testa {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.messaggio__icona {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: var(--ottanio-50);
  color: var(--ottanio-700);
}

.messaggio--spento .messaggio__icona {
  background: var(--ardesia-100);
  color: var(--testo-tenue);
}

.messaggio__titoli {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.messaggio__titoli strong {
  font-size: 0.875rem;
  font-weight: 600;
}

.messaggio__titoli span {
  font-size: 0.75rem;
  color: var(--testo-tenue);
}

/* Il testo com'e' scritto: un fumetto, perche' e' quello che leggera' chi
   lo riceve. */
.messaggio__testo {
  max-height: 12.5em;
  margin: 10px 0 0;
  padding: 10px 12px;
  border-radius: 4px 12px 12px 12px;
  background: var(--ottanio-25);
  box-shadow: inset 0 0 0 1px var(--ottanio-100);
  color: var(--testo-forte);
  font-size: 0.8125rem;
  line-height: 1.5;
  white-space: pre-line;
  /* Si scorre solo in verticale: un collegamento lungo va a capo dove
     capita, anche quando la barra di scorrimento di Windows ruba spazio. */
  overflow-x: hidden;
  overflow-y: auto;
  overflow-wrap: anywhere;
}

.messaggio__azioni {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
}

.btn--whatsapp {
  background: #177a42;
  color: #fff;
}

.btn--whatsapp:hover:not(:disabled) {
  background: #11653a;
  color: #fff;
}

/* --- Foto e documenti --------------------------------------------------------------------- */

.galleria {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(108px, 1fr));
  gap: 10px;
}

.galleria__voce {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: 10px;
  background: var(--ardesia-100);
  box-shadow: inset 0 0 0 1px var(--bordo-tenue);
  overflow: hidden;
}

.galleria__voce > a {
  display: block;
  width: 100%;
  height: 100%;
}

.galleria__voce img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 300ms ease;
}

.galleria__voce:hover img {
  transform: scale(1.05);
}

.galleria__documento {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 100%;
  padding: 8px;
  color: var(--testo-medio);
  font-size: 0.71875rem;
  text-align: center;
  word-break: break-word;
}

.galleria__documento i {
  font-size: 1.5rem;
  color: var(--petrolio-500);
}

.galleria__didascalia {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 16px 8px 5px;
  background: linear-gradient(transparent, rgba(14, 20, 25, 0.72));
  color: #fff;
  font-size: 0.6875rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
}

.galleria__togli {
  position: absolute;
  top: 6px;
  right: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border: 0;
  border-radius: 50%;
  background: rgba(14, 20, 25, 0.72);
  color: #fff;
  opacity: 0;
  cursor: pointer;
  transition: opacity var(--transizione), background var(--transizione);
}

.galleria__voce:hover .galleria__togli,
.galleria__togli:focus-visible {
  opacity: 1;
}

.galleria__togli:hover {
  background: var(--errore);
}

.carica-file {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 16px;
  border: 1.5px dashed var(--bordo-forte);
  border-radius: 12px;
  background: var(--superficie-alt);
  color: var(--testo-medio);
  font-size: 0.8125rem;
  text-align: center;
  cursor: pointer;
  transition: border-color var(--transizione), background var(--transizione),
    color var(--transizione);
}

.carica-file:hover,
.carica-file--sopra {
  border-color: var(--petrolio-400);
  background: var(--petrolio-50);
  color: var(--petrolio-800);
}

.carica-file:focus-within {
  border-color: var(--petrolio-500);
  box-shadow: var(--anello-focus);
}

.carica-file i {
  font-size: 1.5rem;
  color: var(--petrolio-500);
}

.carica-file strong {
  color: var(--testo-forte);
  font-weight: 600;
}

.carica-file input[type="file"] {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.carica-file--grande {
  gap: 8px;
  padding: 44px 24px;
}

.carica-file--grande i {
  font-size: 2.5rem;
}

/* --- I passi di una pagina: carica, controlla, fatto ------------------------------------- */

.passi-pagina {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  margin: 0 0 22px;
  padding: 0;
  list-style: none;
}

.passi-pagina li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.875rem;
  color: var(--testo-tenue);
}

.passi-pagina li + li::before {
  content: "";
  width: 28px;
  height: 2px;
  border-radius: 1px;
  background: var(--ardesia-200);
}

.passi-pagina__numero {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--ardesia-100);
  color: var(--testo-medio);
  font-size: 0.75rem;
  font-weight: 600;
}

.passi-pagina li[aria-current="step"] {
  color: var(--testo);
  font-weight: 600;
}

.passi-pagina li[aria-current="step"] .passi-pagina__numero {
  background: var(--primario);
  color: #fff;
}

.passi-pagina .passi-pagina--fatto .passi-pagina__numero {
  background: var(--successo-fondo);
  color: var(--successo);
}

/* --- Import del file delle concessionarie ------------------------------------------------- */

.colonne-lette {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.colonna-letta {
  padding: 3px 8px;
  border-radius: 6px;
  background: var(--ardesia-100);
  color: var(--testo-medio);
  font-size: 0.75rem;
}

.colonna-letta strong {
  color: var(--testo-forte);
  font-weight: 500;
}

.colonna-letta--ignorata {
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--bordo);
  text-decoration: line-through;
}

/* Le righe del file sono una griglia, non una tabella automatica: le colonne
   non si allargano per il contenuto, quindi non si scorre mai di lato, e ogni
   riga ha la stessa altezza, con al massimo due righe di testo per cella.
   Quello che non ci sta e' nella scheda della riga, che si apre col clic.
   Quando lo spazio e' poco le righe diventano schede (in fondo). */

.tabella-guscio--import {
  container: righe-import / inline-size;
}

.tabella--import {
  --ri-colonne: 44px 36px 140px minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1.1fr) 112px 100px;
  display: block;
}

.tabella--import thead,
.tabella--import tbody {
  display: block;
}

.tabella--import tr {
  display: grid;
  grid-template-columns: var(--ri-colonne);
  align-items: center;
}

.tabella--import thead tr {
  background: var(--superficie-alt);
  border-bottom: 1px solid var(--bordo-tenue);
}

.tabella--import thead th {
  position: static;
  min-width: 0;
  padding: 11px 10px;
  border-bottom: 0;
  background: transparent;
}

.tabella--import tbody tr {
  height: 68px;
  border-bottom: 1px solid var(--bordo-tenue);
  cursor: pointer;
}

.tabella--import tbody tr:last-child {
  border-bottom: 0;
}

.tabella--import tbody td {
  min-width: 0;
  padding: 0 10px;
  border-bottom: 0;
  font-size: 0.8125rem;
  line-height: 1.35;
}

.tabella--import tbody tr.riga--saltata {
  background: var(--superficie-alt);
  color: var(--testo-tenue);
}

/* La casella resta piena anche sulla riga lasciata fuori: e' da li' che la
   si rimette dentro. */
.tabella--import tbody tr.riga--esclusa > td:not(.ri-scelta) {
  opacity: 0.5;
}

.tabella--import tbody tr.ri-nessuna {
  height: auto;
  cursor: default;
}

.ri-nessuna td {
  grid-column: 1 / -1;
  padding: 18px 16px !important;
  color: var(--testo-tenue);
}

/* La casella prende tutta la cella: si spunta anche mancandola di poco, e il
   clic non apre la scheda. */
.tabella--import .ri-scelta {
  display: flex;
  align-self: stretch;
  padding: 0;
}

.ri-scelta__area {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  margin: 0;
  cursor: pointer;
}

.ri-numero {
  color: var(--testo-tenue);
  font-variant-numeric: tabular-nums;
}

.ri-due {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.ri-linea {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ri-linea--forte {
  font-weight: 500;
  color: var(--testo);
}

.ri-linea--tenue {
  font-size: 0.75rem;
  color: var(--testo-tenue);
}

.ri-linea--attenzione {
  font-size: 0.75rem;
  color: var(--attenzione);
}

/* La ragione sociale va a capo, fino a due righe; poi i puntini, e il nome
   intero nella scheda. */
.ri-a-capo {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  overflow-wrap: anywhere;
  font-weight: 500;
  color: var(--testo);
}

.riga--saltata .ri-a-capo,
.riga--saltata .ri-linea--forte {
  color: var(--testo-medio);
}

.ri-veicolo {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.tabella--import .targa {
  height: 22px;
}

.tabella--import .targa__testo {
  padding: 0 6px;
  font-size: 0.75rem;
}

.ri-tipo {
  padding: 1px 6px;
  border-radius: 5px;
  background: var(--ardesia-100);
  color: var(--testo-medio);
  font-size: 0.6875rem;
  font-weight: 500;
  white-space: nowrap;
}

.ri-segno {
  font-size: 0.8125rem;
  color: var(--testo-tenue);
}

.ri-segno--corretto {
  color: var(--info);
}

/* Un dato obbligatorio che il file non ha: in ambra, al suo posto. */
.ri-manca {
  display: inline-flex;
  align-items: center;
  padding: 1px 7px;
  border-radius: 5px;
  background: var(--attenzione-fondo);
  color: var(--attenzione);
  font-size: 0.71875rem;
  font-weight: 600;
  white-space: nowrap;
}

/* Le date non vanno a capo: spezzate, non si leggono piu'. */
.ri-date {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.tabella--import td.ri-azione {
  display: flex;
  justify-content: flex-end;
  padding-right: 12px;
}

.ri-apri {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 8px 6px 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--primario);
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  transition: var(--transizione);
}

.ri-apri i {
  font-size: 0.75rem;
}

.tabella--import tbody tr:hover .ri-apri {
  background: var(--petrolio-50);
}

.ri-apri:focus-visible {
  outline: 2px solid var(--primario);
  outline-offset: 1px;
}

.ri-apri--completa {
  color: var(--attenzione);
}

.tabella--import tbody tr:hover .ri-apri--completa {
  background: var(--attenzione-fondo);
}

/* Poco spazio: ogni riga diventa una scheda, con gli stessi dati. Prima su
   due righe (un portatile piccolo col menu aperto), poi, sul telefono, una
   colonna sola. La colonna dell'esito ha una larghezza fissa: ogni scheda e'
   una griglia a se', e un esito piu' lungo spostava le date delle altre. */
@container righe-import (max-width: 760px) {
  .tabella--import thead {
    display: none;
  }

  .tabella--import tbody tr {
    height: auto;
    grid-template-columns: 40px minmax(0, 1.2fr) minmax(0, 1fr) 136px;
    grid-template-areas:
      "scelta veicolo luogo esito"
      "scelta concessionaria certificato azione";
    align-items: start;
    gap: 10px 0;
    padding: 14px 0 12px;
  }

  .tabella--import td.ri-scelta {
    grid-area: scelta;
    align-self: start;
    padding-top: 3px;
  }

  .tabella--import td.ri-numero {
    display: none;
  }

  .ri-cella-esito {
    grid-area: esito;
  }

  .ri-cella-veicolo {
    grid-area: veicolo;
  }

  .ri-cella-concessionaria {
    grid-area: concessionaria;
  }

  .ri-cella-luogo {
    grid-area: luogo;
  }

  .ri-cella-certificato {
    grid-area: certificato;
    align-self: center;
  }

  .tabella--import td.ri-azione {
    grid-area: azione;
  }

  .ri-cella-esito .ri-due {
    align-items: flex-end;
    text-align: right;
  }

  .ri-cella-certificato .ri-due {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 2px 10px;
  }

  /* Due righe per la ragione sociale anche quando ne basta una: le schede
     restano tutte della stessa altezza. */
  .ri-cella-concessionaria .ri-a-capo {
    min-height: 2.7em;
  }
}

/* Sul telefono l'esito sta in cima, su una riga sua: al veicolo e alle date
   resta tutta la larghezza. */
@container righe-import (max-width: 520px) {
  .tabella--import tbody tr {
    grid-template-columns: 40px minmax(0, 1fr) auto;
    grid-template-areas:
      "scelta esito esito"
      "scelta veicolo veicolo"
      "scelta concessionaria concessionaria"
      "scelta luogo luogo"
      "scelta certificato azione";
    gap: 8px 0;
  }

  .ri-cella-esito .ri-due {
    flex-direction: row;
    align-items: center;
    gap: 8px;
    text-align: left;
  }
}

/* --- La scheda di una riga dell'import ------------------------------------------------------ */

.finestra--riga {
  width: min(720px, calc(100vw - 32px));
}

.ri-testa {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.ri-testa__testo {
  flex: 1;
  min-width: 0;
}

.ri-testa .targa--media {
  height: 34px;
}

.ri-testa .targa--media .targa__testo {
  padding: 0 12px;
  font-size: 1.0625rem;
  letter-spacing: 0.04em;
}

.ri-testa h2 {
  margin: 0 0 2px;
  overflow-wrap: anywhere;
}

.ri-nel-file {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--testo-medio);
}

.ri-nel-file q {
  font-family: var(--font-mono);
  font-size: 0.78125rem;
  color: var(--testo);
  quotes: "«" "»";
}

.finestra--riga .campo input.campo--codice {
  font-family: var(--font-mono);
  font-size: 0.875rem;
}

.campo--mancante input {
  border-color: var(--attenzione-pieno);
  background: var(--attenzione-velo);
}

.campo--corretto input,
.campo--corretto select {
  border-color: var(--info-bordo);
  background: var(--info-fondo);
}

.ri-letto__valore {
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--testo);
  overflow-wrap: anywhere;
}

.ri-calcolato {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 40px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.ri-calcolato .tenue {
  font-size: 0.75rem;
  font-weight: 400;
}

.ri-scorri {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-right: auto;
}

.ri-scorri__posizione {
  min-width: 52px;
  text-align: center;
  font-size: 0.8125rem;
  color: var(--testo-tenue);
  font-variant-numeric: tabular-nums;
}

.ri-spunta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 6px 0 0;
  font-size: 0.875rem;
  color: var(--testo-medio);
  cursor: pointer;
}

.ri-spunta--spenta {
  opacity: 0.45;
  cursor: default;
}

.riga-scelta {
  width: 16px;
  height: 16px;
  accent-color: var(--primario);
}

/* --- Carico multiplo: i dati comuni una volta, i veicoli come righe ------------------------ */

.righe-veicoli {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.8125rem;
}

.righe-veicoli th {
  padding: 8px 6px;
  border-bottom: 1px solid var(--bordo-tenue);
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--testo-tenue);
  text-align: left;
  white-space: nowrap;
}

.righe-veicoli td {
  padding: 6px;
  border-bottom: 1px solid var(--bordo-tenue);
  vertical-align: top;
}

.righe-veicoli input,
.righe-veicoli select {
  width: 100%;
  padding: 0.375rem 0.5rem;
  border: 1px solid var(--bordo-forte);
  border-radius: 8px;
  background: var(--superficie);
  color: var(--testo);
  font: inherit;
  font-size: 0.8125rem;
}

.righe-veicoli input:focus,
.righe-veicoli select:focus {
  outline: none;
  border-color: var(--petrolio-500);
  box-shadow: var(--anello-focus);
}

.righe-veicoli .cella--errore input,
.righe-veicoli .cella--errore select {
  border-color: var(--errore);
}

.righe-veicoli__numero {
  width: 32px;
  padding-top: 13px !important;
  color: var(--testo-tenue);
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.righe-veicoli__spunte {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  padding-top: 6px;
  font-size: 0.75rem;
  color: var(--testo-medio);
}

.righe-veicoli__spunte label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}

.righe-veicoli__errore {
  margin-top: 3px;
  font-size: 0.71875rem;
  color: var(--errore);
}

/* Incollare righe da un foglio: un riquadro che si apre sotto il bottone. */
.incolla {
  position: relative;
}

.incolla > summary {
  list-style: none;
}

.incolla > summary::-webkit-details-marker {
  display: none;
}

.incolla__riquadro {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 20;
  width: min(440px, 90vw);
  box-shadow: var(--ombra-l);
}

/* --- Stima e consuntivo, uno sopra l'altro ------------------------------------------------- */

.confronto {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.confronto__voce {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 6px 12px;
  font-size: 0.8125rem;
}

.confronto__voce .confronto__barre {
  grid-column: 1 / -1;
  grid-row: 2;
}

.confronto__nome {
  color: var(--testo-medio);
}

.confronto__barre {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.confronto__barra {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
  color: var(--testo-medio);
  white-space: nowrap;
}

.confronto__barra span {
  display: block;
  height: 8px;
  min-width: 4px;
  border-radius: 0 4px 4px 0;
  transform-origin: left center;
  animation: cresci 600ms cubic-bezier(0.2, 0.7, 0.3, 1) both;
}

.confronto__barra--stima span {
  background: var(--ardesia-300);
}

.confronto__barra--reale span {
  background: var(--petrolio-600);
}

.confronto__scarto {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}

/* Verde sotto la stima, rosso sopra: la stessa regola di tutti gli
   scostamenti (style-colore-scostamento). */
.confronto__scarto--sotto {
  color: var(--successo);
}

.confronto__scarto--sopra {
  color: var(--errore);
}

/* --- Arrivi in piazzale --------------------------------------------------------------------- */

/* Tre riquadri, uno per momento: sul camion da scaricare, ancora da caricare,
   gia' arrivati. Ognuno ha un colore suo, nell'icona, nel numero e nel filo
   in alto; le righe sono le stesse in tutti e tre. */
.arrivi {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

.arrivi__colonna {
  --tono: var(--petrolio-600);
  --tono-fondo: var(--petrolio-50);
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  border-radius: var(--raggio-l);
  background: var(--superficie);
  box-shadow: inset 0 3px 0 var(--tono), var(--ombra-scheda);
}

.arrivi__colonna--camion {
  --tono: var(--petrolio-600);
  --tono-fondo: var(--petrolio-50);
}

.arrivi__colonna--attesa {
  --tono: var(--ottanio-700);
  --tono-fondo: var(--ottanio-50);
}

.arrivi__colonna--fatto {
  --tono: var(--successo);
  --tono-fondo: var(--successo-fondo);
}

.arrivi__testa {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 18px 18px 12px;
}

.arrivi__icona {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 11px;
  background: var(--tono-fondo);
  font-size: 1.1875rem;
  color: var(--tono);
}

.arrivi__titoli {
  flex: 1;
  min-width: 0;
}

.arrivi__titolo {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--testo);
}

.arrivi__nota {
  margin: 2px 0 0;
  font-size: 0.78125rem;
  line-height: 1.4;
  color: var(--testo-tenue);
}

.arrivi__numero {
  font-family: var(--font-titoli);
  font-size: 2rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--tono);
}

.arrivi__elenco {
  margin: 0;
  padding: 0 10px 8px;
  list-style: none;
}

/* Oltre le prime righe, l'elenco si apre a richiesta. */
.arrivo-voce--oltre {
  display: none !important;
}

.arrivi__colonna--tutti .arrivo-voce--oltre {
  display: grid !important;
}

.arrivi__altri {
  margin: 0 18px 12px;
  padding: 6px 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 500;
  text-align: left;
  color: var(--tono);
  cursor: pointer;
}

.arrivi__altri:hover {
  text-decoration: underline;
}

.arrivi__vuoto {
  margin: 0;
  padding: 2px 18px 18px;
  font-size: 0.8125rem;
  color: var(--testo-tenue);
}

.arrivi__piede {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin-top: auto;
  padding: 12px 18px;
  border-top: 1px solid var(--bordo-tenue);
  background: var(--superficie-alt);
}

.arrivi__dato {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: 0.78125rem;
  color: var(--testo-tenue);
}

.arrivi__dato strong {
  font-weight: 600;
  color: var(--testo-forte);
  font-variant-numeric: tabular-nums;
}

.arrivo-voce {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 9px 8px;
}

.arrivo-voce + .arrivo-voce {
  box-shadow: inset 0 1px 0 var(--bordo-tenue);
}

/* Nel contesto del piazzale i bottoni sono da guanti (48 px): nelle righe
   bastano 44, e il nome del veicolo resta leggibile. */
.contesto-officina .arrivo-voce .btn {
  min-height: 44px;
  padding: 0 0.875rem;
  font-size: 0.875rem;
}

.arrivo-voce:hover {
  background: var(--ardesia-50);
}

/* La riga della targa che si sta registrando. */
.arrivo-voce--scelta,
.arrivo-voce--scelta:hover {
  background: var(--tono-fondo);
  box-shadow: inset 3px 0 0 var(--tono);
}

.arrivo-voce__testo {
  display: flex;
  flex-direction: column;
  min-width: 0;
  font-size: 0.8125rem;
}

.arrivo-voce__nome {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.arrivo-voce__nome strong {
  min-width: 0;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.arrivo-voce__sotto {
  margin-top: 2px;
  font-size: 0.75rem;
  color: var(--testo-tenue);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.arrivo-voce__orario {
  min-width: 42px;
  font-size: 0.8125rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--tono, var(--ottanio-700));
}

.arrivo-voce .btn {
  padding: 0.25rem 0.625rem;
}

/* --- Il foglio da stampare ------------------------------------------------------------------- */

.pagina-stampa {
  background: var(--fondo);
}

.barra-stampa {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 16px;
  background: var(--superficie);
  box-shadow: 0 1px 0 var(--bordo);
}

.foglio-stampa {
  max-width: 820px;
  margin: 24px auto 48px;
  padding: 36px 44px;
  border-radius: 6px;
  background: #fff;
  box-shadow: var(--ombra);
  color: #111;
  font-size: 10.5pt;
  line-height: 1.45;
}

.foglio-stampa h1 {
  font-size: 17pt;
  letter-spacing: -0.01em;
  color: #111;
}

.foglio-stampa h2 {
  margin: 18px 0 8px;
  font-size: 11.5pt;
  color: #111;
}

.foglio-stampa__testa {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 2px solid #111;
}

.foglio-stampa__marchio {
  font-size: 9pt;
  color: #555;
  text-align: right;
}

.foglio-stampa__dati {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px 16px;
  margin-bottom: 14px;
}

.foglio-stampa__dati dt {
  font-size: 8.5pt;
  font-weight: 400;
  color: #555;
}

.foglio-stampa__dati dd {
  margin: 0;
  font-weight: 600;
}

.fermata-stampa {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) 170px;
  gap: 14px;
  margin-bottom: 10px;
  padding: 10px 12px;
  border: 1px solid #b8b8b8;
  border-radius: 8px;
  break-inside: avoid;
}

.fermata-stampa__numero {
  font-size: 18pt;
  font-weight: 700;
  line-height: 1;
}

.fermata-stampa__orario {
  font-size: 9pt;
  color: #444;
}

.fermata-stampa__titolo {
  font-weight: 700;
}

.fermata-stampa__riga {
  margin-top: 2px;
}

.fermata-stampa__nota {
  margin-top: 4px;
  padding: 4px 6px;
  border-left: 3px solid #999;
  background: #f4f4f4;
  font-size: 9.5pt;
}

.fermata-stampa__esito {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 9pt;
}

.fermata-stampa__esito span::before {
  content: "";
  display: inline-block;
  width: 11px;
  height: 11px;
  margin-right: 6px;
  border: 1.5px solid #333;
  border-radius: 2px;
  vertical-align: -1px;
}

.fermata-stampa__linea {
  height: 18px;
  border-bottom: 1px solid #888;
}

.firme-stampa {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 48px;
  margin-top: 36px;
}

.firme-stampa div {
  padding-top: 4px;
  border-top: 1px solid #333;
  font-size: 8.5pt;
  color: #444;
}

.foglio-stampa__piede {
  margin-top: 20px;
  padding-top: 8px;
  border-top: 1px solid #ccc;
  font-size: 8pt;
  color: #666;
}

/* --- L'etichetta del veicolo ------------------------------------------------------------------
   Misure vere, in millimetri: a schermo si vede ingrandita, com'e' fatta; in
   stampa riempie la pagina del suo formato (stampa/etichetta.html). */

.barra-stampa__scelta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-right: 8px;
  font-size: 0.8125rem;
  color: var(--testo-medio);
}

.barra-stampa__scelta[hidden] {
  display: none;
}

.barra-stampa__scelta select {
  padding: 7px 10px;
  border: 1px solid var(--bordo-forte);
  border-radius: 9px;
  background: var(--superficie);
  font: inherit;
  color: var(--testo);
}

.etichetta-aiuto {
  max-width: 560px;
  margin: 20px auto 0;
  padding: 0 16px;
  font-size: 0.8125rem;
  text-align: center;
  color: var(--testo-tenue);
}

.etichetta-foglio {
  display: flex;
  justify-content: center;
  padding: 28px 16px 48px;
}

.etichetta-stampa {
  --etichetta-l: 100mm;
  --etichetta-a: 50mm;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1mm;
  width: var(--etichetta-l);
  height: var(--etichetta-a);
  padding: 3mm 4mm;
  overflow: hidden;
  background: #fff;
  color: #000;
  font-family: var(--font);
  line-height: 1.2;
  box-shadow: 0 0 0 1px var(--ardesia-200), var(--ombra-l);
  zoom: 1.6;
}

.etichetta-stampa__attesa {
  margin: auto;
  font-size: 8pt;
  color: var(--testo-tenue);
}

.etichetta-stampa__testa,
.etichetta-stampa__piede {
  display: flex;
  justify-content: space-between;
  gap: 3mm;
  font-size: 6.5pt;
  white-space: nowrap;
}

.etichetta-stampa__azienda {
  overflow: hidden;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-overflow: ellipsis;
  text-transform: uppercase;
}

.etichetta-stampa__barre {
  height: 14mm;
}

.etichetta-stampa__barre .codice-barre {
  display: block;
  width: 100%;
  height: 100%;
}

.etichetta-stampa__codice {
  font-family: var(--font-mono);
  font-size: 15pt;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-align: center;
}

.etichetta-stampa__veicolo {
  display: flex;
  align-items: center;
  gap: 2.5mm;
  min-width: 0;
  font-size: 8.5pt;
  white-space: nowrap;
}

.etichetta-stampa__veicolo > span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
}

.etichetta-stampa__targa {
  flex-shrink: 0;
  padding: 0.4mm 1.6mm;
  border: 0.35mm solid #000;
  border-radius: 1mm;
  font-family: var(--font-mono);
  font-weight: 700;
  letter-spacing: 0.04em;
}

/* La piccola: codice a barre, codice e targa, nient'altro. */
[data-formato="62x29"] .etichetta-stampa {
  --etichetta-l: 62mm;
  --etichetta-a: 29mm;
  padding: 1.6mm 2.6mm;
}

[data-formato="62x29"] .etichetta-stampa__testa,
[data-formato="62x29"] .etichetta-stampa__piede {
  display: none;
}

[data-formato="62x29"] .etichetta-stampa__barre {
  height: 11mm;
}

[data-formato="62x29"] .etichetta-stampa__codice {
  font-size: 11pt;
}

[data-formato="62x29"] .etichetta-stampa__veicolo {
  font-size: 7pt;
}

/* Sul foglio A4 la si ritaglia lungo il tratteggio. */
[data-formato="a4"] .etichetta-stampa {
  outline: 0.3mm dashed #888;
  outline-offset: 0;
}

@media print {
  @page {
    size: A4;
    margin: 12mm;
  }

  .pagina-stampa {
    background: #fff;
  }

  .etichetta-foglio {
    display: block;
    padding: 0;
  }

  /* Un millimetro in meno dell'etichetta: con la misura esatta, gli
     arrotondamenti della stampante aprono una seconda pagina bianca. */
  .etichetta-stampa {
    height: calc(var(--etichetta-a) - 1mm);
    box-shadow: none;
    zoom: 1;
    break-inside: avoid;
  }

  .solo-schermo {
    display: none !important;
  }

  .foglio-stampa {
    max-width: none;
    margin: 0;
    padding: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .foglio-stampa a {
    color: inherit;
    text-decoration: none;
  }
}

/* --- Schermi stretti --------------------------------------------------------------------------- */

@media (max-width: 1200px) {
  .grafici,
  .grafici--pari {
    grid-template-columns: minmax(0, 1fr);
  }

  .arrivi {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 640px) {
  .tessere {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .tessera__valore {
    font-size: 1.375rem;
  }

  .scintilla {
    display: none;
  }

  .foglio-stampa {
    padding: 20px 16px;
  }

  .fermata-stampa {
    grid-template-columns: 30px minmax(0, 1fr);
  }

  .fermata-stampa__esito {
    grid-column: 1 / -1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .compare,
  .barre__barra,
  .confronto__barra span,
  .pin--anello-scaduta,
  .in-calcolo::before {
    animation: none;
  }

  .tracciato {
    transition: none;
  }
}

/* ==========================================================================
   Scheda del veicolo
   --------------------------------------------------------------------------
   Lo stesso impianto della scheda della richiesta: la testa con la targa, le
   tappe in piazzale, gli orologi di legge in fila; sotto il veicolo, l'arrivo
   e i pezzi, e di lato l'etichetta, la pratica e lo storico.
   ========================================================================== */

.valore__fonte {
  font-size: 0.71875rem;
  color: var(--testo-tenue);
}

/* L'azione della sezione sta nella colonna stretta di sinistra: va a capo
   dentro la colonna invece di uscire sulle informazioni accanto, ed e' blu
   perche' si veda (16/10/2026, Dania). */
.sezione__azione {
  align-self: flex-start;
  max-width: 100%;
  margin: 10px 0 0;
  justify-content: flex-start;
  text-align: left;
  white-space: normal;
}

.sezione__riga {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0;
  font-size: 0.875rem;
  color: var(--testo-medio);
}

.sezione__riga .bi {
  margin-top: 2px;
  color: var(--testo-tenue);
}

/* I pezzi hanno bisogno di tutta la larghezza: il titolo sta sopra. */
.sezione--larga {
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
}

/* Gli orologi di legge: quanto manca, e una barra di quanto del termine e'
   gia' passato, nel colore della sua classe. */
.orologi-veicolo {
  margin-bottom: 24px;
}

.orologi-veicolo__testa {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 12px;
  margin-bottom: 12px;
}

.orologi-veicolo__testa h2 {
  margin: 0;
  font-size: 1.0625rem;
}

.orologi-veicolo__griglia {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}

.orologi-veicolo > .avviso {
  margin: 16px 0 0;
}

.orologi-veicolo .orologio {
  --orologio-tono: var(--testo-tenue);
  --orologio-pieno: var(--ardesia-400);
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px 18px;
  border: 0;
  border-radius: var(--raggio-l);
  box-shadow: var(--ombra-scheda);
}

.orologi-veicolo .orologio--successo {
  --orologio-tono: var(--successo);
  --orologio-pieno: var(--successo-pieno);
}

.orologi-veicolo .orologio--attenzione {
  --orologio-tono: var(--attenzione);
  --orologio-pieno: var(--attenzione-pieno);
}

.orologi-veicolo .orologio--errore {
  --orologio-tono: var(--errore);
  --orologio-pieno: var(--errore-pieno);
}

.orologi-veicolo .orologio--info {
  --orologio-tono: var(--info);
  --orologio-pieno: var(--info-pieno);
}

.orologio__testa {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
}

.orologio__classe {
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
  color: var(--orologio-tono);
}

.orologi-veicolo .orologio__giorni,
.orologi-veicolo .orologio__nota {
  margin: 0;
}

.orologio__barra {
  height: 6px;
  overflow: hidden;
  border-radius: 3px;
  background: var(--ardesia-100);
}

.orologio__barra span {
  display: block;
  height: 100%;
  border-radius: 3px;
  background: var(--orologio-pieno);
}

/* I pezzi: i numeri, una barra per stato e i filtri, poi l'elenco. */
.pezzi-numeri {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.pezzi-numeri > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--superficie-alt);
}

.pezzi-numeri strong {
  font-family: var(--font-titoli);
  font-size: 1.375rem;
  font-weight: 700;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  color: var(--testo-titoli);
}

.pezzi-numeri span {
  font-size: 0.78125rem;
  color: var(--testo-tenue);
}

.pezzi-barra {
  display: flex;
  gap: 2px;
  height: 10px;
}

.pezzi-barra__parte {
  min-width: 4px;
  border-radius: 3px;
}

/* Gli stati del pezzo sono in fila: una scala sola, dal chiaro allo scuro
   verso la vendita; lo scarto fuori scala, in grigio. */
.pezzi-stato--potenziale,
.pezzi-stato--in_distinta {
  background: var(--ardesia-200);
}

.pezzi-stato--smontato {
  background: var(--petrolio-200);
}

.pezzi-stato--catalogato {
  background: var(--petrolio-400);
}

.pezzi-stato--pubblicato {
  background: var(--petrolio-600);
}

.pezzi-stato--venduto {
  background: var(--petrolio-800);
}

.pezzi-stato--scartato {
  background: var(--ardesia-400);
}

.pezzi-filtri {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.pezzi-chip__punto {
  display: inline-block;
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.pezzo-stato {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
}

.pezzi-altri {
  align-self: flex-start;
  padding: 6px 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--primario);
  cursor: pointer;
}

.pezzi-altri:hover {
  text-decoration: underline;
}

.tabella--pezzi tbody td {
  padding-top: 10px;
  padding-bottom: 10px;
}

.vuoto-sezione {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  border-radius: 12px;
  background: var(--superficie-alt);
  font-size: 0.875rem;
  color: var(--testo-medio);
}

.vuoto-sezione .bi {
  font-size: 1.375rem;
  color: var(--testo-tenue);
}

/* L'etichetta di lato, come uscira' dalla stampante, in piccolo. */
.etichetta-anteprima {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 14px 10px;
  border-radius: 10px;
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--bordo);
}

.etichetta-anteprima__barre {
  height: 46px;
}

.etichetta-anteprima__barre .codice-barre {
  display: block;
  width: 100%;
  height: 100%;
}

.etichetta-anteprima__codice {
  font-family: var(--font-mono);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-align: center;
  color: #000;
}

.riquadro-etichetta p {
  font-size: 0.8125rem;
}

/* Dati di lato: l'etichetta a sinistra, il valore a destra. */
.dati-lato {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
}

.dati-lato > div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 0.875rem;
}

.dati-lato dt {
  font-weight: 400;
  color: var(--testo-tenue);
}

.dati-lato dd {
  margin: 0;
  font-weight: 500;
  text-align: right;
  color: var(--testo);
}

@media (max-width: 720px) {
  .pezzi-numeri {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ==========================================================================
   Le finestre dei gesti dell'autista
   --------------------------------------------------------------------------
   «Caricata», «Non caricata» e «Rientrato» chiedono conferma in una finestra
   della pagina, non in quella grigia del browser. Sul telefono si apre dal
   basso, come un foglio, e il bottone che conferma prende la riga.
   ========================================================================== */

.finestra--autista {
  width: min(480px, calc(100vw - 32px));
}

.gesto-veicolo {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--superficie-alt);
}

.gesto-veicolo > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.gesto-veicolo strong {
  font-size: 0.9375rem;
}

.gesto-veicolo > div > span {
  font-size: 0.8125rem;
  color: var(--testo-tenue);
}

.motivi-gesto {
  margin: 0;
  padding: 0;
  border: 0;
}

.motivi-gesto__scelte {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.motivo-gesto {
  position: relative;
  margin: 0;
}

.motivo-gesto input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.motivo-gesto span {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 16px;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px var(--bordo-forte);
  font-size: 0.875rem;
  color: var(--testo);
  cursor: pointer;
  transition: var(--transizione);
}

.motivo-gesto input:checked + span {
  background: var(--petrolio-50);
  box-shadow: inset 0 0 0 2px var(--primario);
  font-weight: 600;
  color: var(--primario-scuro);
}

.motivo-gesto input:focus-visible + span {
  outline: 2px solid var(--petrolio-500);
  outline-offset: 2px;
}

.finestra-gesto__errore {
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--errore);
}

@media (max-width: 600px) {
  .finestra--autista {
    width: 100%;
    max-width: 100%;
    max-height: 92vh;
    margin: auto 0 0;
    border-radius: 18px 18px 0 0;
  }

  .finestra--autista .finestra__piede {
    padding-bottom: calc(14px + env(safe-area-inset-bottom));
  }

  .finestra--autista .finestra__piede .btn--primario {
    flex: 1;
  }
}

/* ==========================================================================
   Valorizzazione in pari (07/10/2026): canali, valutazione visiva,
   simulazione, dati da file
   ========================================================================== */

/* Dove vanno i pezzi dello smontaggio, nella carta della strada. */
.carta-canale__canali {
  margin: 6px 0 4px;
  color: var(--testo-medio);
}

.carta-canale__canali .pastiglia {
  margin-left: 4px;
  text-decoration: none;
}

/* Il conto della riga canale per canale, dentro «Perché». */
.conto-canali {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px dashed var(--bordo-forte);
  overflow-x: auto;
}

.tabella--compatta th,
.tabella--compatta td {
  padding: 6px 10px;
  font-size: 0.8125rem;
}

/* Il canale migliore si segna col petrolio: il verde, nel sistema, dice il
   rispetto dei termini di legge. */
.conto-canali__scelto td {
  background: var(--petrolio-50);
}

.conto-canali__scelto .pastiglia--successo {
  background: var(--petrolio-100);
  color: var(--petrolio-800);
}

.conto-canali__muto td {
  color: var(--testo-tenue);
}

/* La valutazione visiva: cosa e' stato spuntato. */
.valutazione-visiva__elenco {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 6px;
}

.valutazione-visiva__elenco li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 10px;
  font-size: 0.875rem;
}

.valutazione-visiva__elenco i {
  color: var(--errore);
}

.btn.visiva--persa {
  color: var(--errore);
  box-shadow: inset 0 0 0 1px var(--errore-bordo, var(--errore));
}

/* I canali di vendita come configurazione del motore. */
/* Quanto resta di un pezzo da 100 €, canale per canale: quello che resta
   in petrolio, i costi del canale a tratteggio, la tacca dei 100 € di
   riferimento. Ordinati da chi rende di piu'. */
.resa-canali__legenda {
  margin-bottom: 14px;
}

.resa-canali__campione-netto {
  background: var(--petrolio-600);
}

.resa-canali__campione-costi {
  background: repeating-linear-gradient(135deg, var(--ardesia-400) 0 3px, var(--ardesia-150) 3px 6px);
}

.resa-canali__campione-cento {
  display: inline-block;
  width: 2px;
  height: 12px;
  border-radius: 1px;
  background: var(--testo);
}

.resa-canali__righe {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.resa-canali__riga {
  display: grid;
  grid-template-columns: minmax(0, 16rem) minmax(0, 1fr) 11.5rem;
  align-items: center;
  gap: 16px;
  font-size: 0.875rem;
}

.resa-canali__nome {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  font-weight: 600;
}

.resa-canali__nome .bi {
  color: var(--petrolio-600);
}

.resa-canali__prova {
  flex-shrink: 0;
  padding: 0 7px;
  white-space: nowrap;
  border-radius: 999px;
  background: var(--attenzione-fondo);
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--attenzione);
}

.resa-canali__pista {
  position: relative;
  display: flex;
  height: 16px;
  border-radius: 4px;
  background: var(--ardesia-50);
}

.resa-canali__netto,
.resa-canali__costi {
  height: 100%;
  transform-origin: left center;
  animation: cresci 800ms var(--curva) backwards;
  animation-delay: calc(150ms + var(--ritardo, 0ms));
}

.resa-canali__netto {
  border-radius: 4px 0 0 4px;
  background: var(--petrolio-600);
}

.resa-canali__costi {
  margin-left: 2px;
  border-radius: 0 4px 4px 0;
  background: repeating-linear-gradient(135deg, var(--ardesia-400) 0 3px, var(--ardesia-150) 3px 6px);
}

.resa-canali__cento {
  position: absolute;
  top: -4px;
  bottom: -4px;
  width: 2px;
  margin-left: -1px;
  border-radius: 1px;
  background: var(--testo);
}

.resa-canali__valore {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: baseline;
  gap: 0 6px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.resa-canali__valore strong {
  font-family: var(--font-titoli);
  font-size: 1rem;
  font-weight: 700;
}

.canali-config {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}

/* Una carta per canale: l'icona, il nome, il prezzo come cifra grande, i
   costi e il bottone per cambiarli. */
.carta-canale-config {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 18px 20px;
  border-radius: var(--raggio-l);
  background: var(--vetro);
  box-shadow: var(--ombra-scheda), inset 0 0 0 1px var(--vetro-bordo);
  transition: box-shadow 200ms var(--curva), transform 200ms var(--curva);
}

.carta-canale-config:hover {
  box-shadow: var(--ombra-s), var(--anello), var(--ombra-l);
}

.carta-canale-config--spenta {
  background: var(--fondo-alt);
  box-shadow: none;
  outline: 1.5px dashed var(--ardesia-300);
  outline-offset: -1.5px;
}

.carta-canale-config__testa {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.carta-canale-config__icona {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  border-radius: 11px;
  background: var(--petrolio-50);
  box-shadow: inset 0 0 0 1px var(--petrolio-100);
  font-size: 1.0625rem;
  color: var(--petrolio-700);
}

.carta-canale-config__testa h2 {
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 700;
}

.carta-canale-config__testa p {
  margin: 2px 0 0;
}

.carta-canale-config__segni {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.carta-canale-config__segni:empty {
  display: none;
}

.carta-canale-config__prezzo {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 8px;
  margin-top: 4px;
  font-size: 0.8125rem;
  color: var(--testo-medio);
}

.carta-canale-config__cifra {
  font-family: var(--font-titoli);
  font-stretch: var(--largo);
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--testo-titoli);
}

.carta-canale-config__tempi {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  font-size: 0.8125rem;
  color: var(--testo-medio);
}

.carta-canale-config__tempi .bi {
  color: var(--petrolio-600);
}

.carta-canale-config__piede {
  margin-top: auto;
  padding-top: 6px;
}

@media (max-width: 760px) {
  .resa-canali__riga {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 6px 12px;
  }

  .resa-canali__pista {
    grid-column: 1 / -1;
    order: 3;
  }
}

@media (prefers-reduced-motion: reduce) {
  .resa-canali__netto,
  .resa-canali__costi {
    animation: none;
  }
}

.finestra--canale {
  width: min(620px, calc(100vw - 32px));
}

.costi-canale {
  margin: 0;
  padding: 0;
  border: 0;
}

.riga-costo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 96px 132px auto;
  gap: 8px;
  align-items: center;
  margin-bottom: 8px;
}

.riga-costo input,
.riga-costo select {
  min-width: 0;
  height: 40px;
  padding: 0 10px;
  border: 1px solid var(--bordo-forte);
  border-radius: var(--raggio-s, 8px);
  background: var(--superficie);
  font: inherit;
  font-size: 0.875rem;
}

@media (max-width: 600px) {
  .riga-costo {
    grid-template-columns: minmax(0, 1fr) 84px auto;
  }

  .riga-costo select {
    grid-column: 1 / 3;
  }
}

/* La simulazione dei parametri: i valori a sinistra, raggruppati come li
   pensa chi decide (costi, prezzi, soglie, interruttori); l'esito a destra.
   Prima della prova, a destra c'e' come funziona, in tre passi. */
.simulazione {
  display: grid;
  grid-template-columns: minmax(360px, 460px) minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}

/* Mai piu' alto della finestra. Con la lista dei ricalcolati a destra la
   colonna si allunga e il pannello resta fermo in alto: le soglie, gli
   interruttori e «Simula» stavano sotto il bordo, e si raggiungevano solo
   in fondo alla lista (09/10/2026). Ora i campi scorrono dentro, e titolo e
   bottoni restano in vista. */
.simulazione__parametri {
  position: sticky;
  top: 76px;
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 96px);
}

.simulazione__parametri .scheda__testa,
.simulazione__parametri .simulazione__azioni {
  flex-shrink: 0;
}

.simulazione__parametri .scheda__corpo {
  display: grid;
  gap: 18px;
  min-height: 0;
}

.gruppo-parametri {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.gruppo-parametri__titolo {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 6px;
  padding: 0;
  font-size: 0.71875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--testo-tenue);
}

.gruppo-parametri__titolo .bi {
  font-size: 0.875rem;
  color: var(--petrolio-600);
}

.gruppo-parametri__campi {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: end;
  gap: 4px 10px;
}

.gruppo-parametri--interruttori .gruppo-parametri__campi {
  grid-template-columns: minmax(0, 1fr);
  gap: 6px;
}

.simulazione__campo {
  margin: 0;
  padding: 8px 10px;
  border-radius: var(--raggio);
  transition: background var(--transizione), box-shadow var(--transizione);
}

/* Il campo cambiato si accende: e' cio' che la prova mette alla prova. */
.simulazione__campo--cambiato {
  background: var(--petrolio-50);
  box-shadow: inset 0 0 0 1.5px var(--petrolio-400);
}

/* Le etichette di due righe e quelle di una: i campi della stessa riga si
   allineano dal fondo, cosi' i riquadri dei numeri stanno sulla stessa
   linea senza lasciare un vuoto sotto il titolo del gruppo. */
.simulazione__campo .campo__etichetta {
  line-height: 1.25;
}

.simulazione__campo .campo__aiuto {
  margin: 4px 0 0;
}

/* Un campo con l'unita' dentro il bordo, a destra. */
.campo-unita {
  position: relative;
  display: flex;
  align-items: center;
}

.campo-unita input {
  width: 100%;
  padding-right: 5.5em;
  font-variant-numeric: tabular-nums;
}

.campo-unita__unita {
  position: absolute;
  right: 10px;
  max-width: 5em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.75rem;
  color: var(--testo-tenue);
  pointer-events: none;
}

/* Un interruttore su una riga: il nome a sinistra, la leva a destra. */
.interruttore-riga {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: var(--superficie-alt);
  box-shadow: inset 0 0 0 1px var(--bordo-tenue);
  cursor: pointer;
}

.interruttore-riga__testo {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.interruttore-riga__titolo {
  font-size: 0.875rem;
  font-weight: 600;
}

.interruttore-riga__nota {
  font-size: 0.75rem;
  color: var(--testo-tenue);
}

/* La leva: una spunta vera, disegnata come un interruttore. */
.leva {
  -webkit-appearance: none;
  appearance: none;
  position: relative;
  flex-shrink: 0;
  width: 40px;
  height: 24px;
  margin: 0;
  border-radius: 999px;
  background: var(--ardesia-300);
  cursor: pointer;
  transition: background var(--transizione);
}

.leva::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: var(--ombra-s);
  transition: transform 200ms var(--curva);
}

.leva:checked {
  background: var(--petrolio-600);
}

.leva:checked::after {
  transform: translateX(16px);
}

.leva:focus-visible {
  outline: none;
  box-shadow: var(--anello-focus);
}

.simulazione__azioni {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 14px 20px 18px;
  border-top: 1px solid var(--bordo-tenue);
}

.simulazione__esito {
  min-width: 0;
}

/* Prima della prova: cosa succede, in tre passi. */
.guida-simulazione {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  padding: 28px 30px;
  border-radius: var(--raggio-l);
  background: var(--vetro);
  box-shadow: var(--ombra-scheda), inset 0 0 0 1px var(--vetro-bordo);
}

.guida-simulazione--attesa {
  flex-direction: row;
  align-items: center;
  color: var(--testo-medio);
}

.guida-simulazione__icona {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: var(--petrolio-50);
  box-shadow: inset 0 0 0 1px var(--petrolio-100);
  font-size: 1.375rem;
  color: var(--petrolio-700);
}

.guida-simulazione__titolo {
  margin: 0;
  font-size: 1.25rem;
}

.guida-simulazione__passi {
  display: grid;
  gap: 12px;
  max-width: 62ch;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: passo;
}

.guida-simulazione__passi li {
  position: relative;
  padding-left: 42px;
  line-height: 1.5;
  color: var(--testo-medio);
  counter-increment: passo;
}

.guida-simulazione__passi li::before {
  content: counter(passo);
  position: absolute;
  top: -2px;
  left: 0;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--petrolio-600);
  font-size: 0.8125rem;
  font-weight: 700;
  color: #fff;
}

.guida-simulazione__passi strong {
  color: var(--testo);
}

.esito-simulazione__tessere {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-bottom: 14px;
}

.esito-simulazione__titolo {
  margin: 0 0 4px;
  font-size: 1.0625rem;
}

/* Le strade della coda prima e dopo: due barre con gli stessi colori. */
.mix-strade {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
}

.mix-strade__riga {
  display: grid;
  grid-template-columns: 9.5rem minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  font-size: 0.8125rem;
  color: var(--testo-medio);
}

.mix-strade__barra {
  display: flex;
  gap: 2px;
  height: 22px;
  border-radius: 6px;
  overflow: hidden;
  animation: svela 800ms var(--curva) 150ms backwards;
}

.mix-strade__barra > span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  font-size: 0.75rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.mix-strade__legenda {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin: 4px 0 0;
  padding: 0 0 0 calc(9.5rem + 12px);
  list-style: none;
  font-size: 0.8125rem;
}

.mix-strade__legenda li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.mix-strade__segno {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  box-shadow: inset 0 0 0 1px rgba(14, 20, 25, 0.12);
}

.mix-strade__delta {
  font-weight: 700;
  color: var(--attenzione);
}

.passaggi-simulazione {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 12px;
  padding: 0;
  list-style: none;
}

.passaggi-simulazione li {
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--fondo-alt);
  font-size: 0.875rem;
}

.riga--evidenza td {
  background: var(--attenzione-fondo);
}

.strada {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
}

.strada::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--testo-tenue);
}

.strada--recupero_pezzi::before {
  background: var(--successo);
}

.strada--commercianti::before {
  background: var(--primario);
}

.strada--rottamazione::before {
  background: var(--ardesia-500, #64748b);
}

.girandola {
  display: inline-block;
  width: 22px;
  height: 22px;
  border: 3px solid var(--bordo-forte);
  border-top-color: var(--primario);
  border-radius: 50%;
  animation: gira 0.9s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  .girandola {
    animation: none;
  }
}

@media (max-width: 1180px) {
  .simulazione {
    grid-template-columns: minmax(0, 1fr);
  }

  .simulazione__parametri {
    position: static;
    max-height: none;
  }
}

@media (max-width: 560px) {
  .gruppo-parametri__campi,
  .esito-simulazione__tessere {
    grid-template-columns: minmax(0, 1fr);
  }

  .mix-strade__riga {
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
  }

  .mix-strade__legenda {
    padding-left: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mix-strade__barra {
    animation: none;
  }

  .leva::after {
    transition: none;
  }
}

/* I dati del motore che arrivano da file: in testa le fonti come tessere,
   che aprono l'elenco dei dati; poi una carta per fonte, con i file che il
   motore legge e la zona dove lasciarne uno nuovo (08/10/2026). */
.fonti-dati {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.tessera--fonte .tessera__etichetta {
  gap: 8px;
  font-weight: 600;
  color: var(--testo-forte);
}

.tessera--fonte .tessera__icona i {
  color: inherit;
}

.dati-motore {
  display: grid;
  gap: 16px;
}

/* Il collegamento dalla tessera arriva qui: la testata appiccicosa non la
   copre. */
.carta-dati {
  scroll-margin-top: 84px;
}

.carta-dati__testa {
  align-items: flex-start;
  flex-wrap: nowrap;
}

.carta-dati__icona {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  border-radius: 12px;
  background: var(--petrolio-50);
  box-shadow: inset 0 0 0 1px var(--petrolio-100);
  font-size: 1.1875rem;
  color: var(--petrolio-700);
}

.carta-dati__conto {
  margin: 0 0 12px;
  font-family: var(--font-titoli);
  font-size: 1.0625rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.carta-dati__colonne {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  margin-bottom: 14px;
  font-size: 0.8125rem;
}

.carta-dati__colonne-titolo {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--testo-tenue);
}

.carta-dati__file {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

/* La zona del file: il campo vero c'e', trasparente sopra tutta la zona,
   cosi' si clicca, si trascina, e la tastiera ci arriva come sempre. */
.zona-file {
  position: relative;
  display: flex;
  flex: 1 1 320px;
  align-items: center;
  gap: 12px;
  min-height: 64px;
  margin: 0;
  padding: 12px 16px;
  border: 1.5px dashed var(--ardesia-300);
  border-radius: var(--raggio-l);
  background: var(--superficie-alt);
  cursor: pointer;
  transition: border-color var(--transizione), background var(--transizione);
}

.zona-file:hover,
.zona-file:focus-within {
  border-color: var(--petrolio-500);
  background: var(--petrolio-50);
}

.zona-file:focus-within {
  box-shadow: var(--anello-focus);
}

.zona-file--scelto {
  border-style: solid;
  border-color: var(--petrolio-400);
  background: var(--superficie);
}

.zona-file__campo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.zona-file__icona {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  border-radius: 10px;
  background: var(--superficie);
  box-shadow: inset 0 0 0 1px var(--bordo-tenue);
  font-size: 1.125rem;
  color: var(--petrolio-600);
}

.zona-file__testo {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  font-size: 0.78125rem;
  color: var(--testo-tenue);
}

.zona-file__testo strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--testo);
}

.carta-dati__esito {
  margin-top: 12px;
}

/* Cosa legge il motore, Aggiungi un file: titoletti come nel cruscotto,
   con la regola accanto in minuscolo. */
.carta-dati__titoletto {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 10px;
  margin: 0 0 10px;
  font-size: 0.71875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--testo-medio);
}

.carta-dati__titoletto span {
  font-size: 0.8125rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--testo-tenue);
}

.carta-dati__titoletto:focus-visible {
  outline: none;
  border-radius: 4px;
  box-shadow: var(--anello-focus);
}

.carta-dati__vuoto {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 14px 16px;
  border-radius: var(--raggio);
  background: var(--superficie-alt);
  font-size: 0.875rem;
  color: var(--testo-medio);
}

.carta-dati__nuovo {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--bordo-tenue);
}

.carta-dati__nuovo .carta-dati__colonne {
  margin: 12px 0 0;
}

.carta-dati__tolti {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--bordo-tenue);
}

.carta-dati__tolti > summary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--testo-medio);
}

.carta-dati__nota {
  margin: 8px 0 10px;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--testo-tenue);
}

/* --- Un elenco che si apre al bisogno (08/10/2026) ------------------------------
   I codici OEM, le equivalenze, i prezzi codice per codice: chiusi finche'
   non servono. Si aprono dal titolo, o da una tessera in testa. */

.elenco-apribile {
  scroll-margin-top: 84px;
}

.elenco-apribile:not(.elenco-apribile--aperto) > .scheda__testa {
  padding-bottom: 22px;
}

.elenco-apribile__bottone {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.elenco-apribile__bottone:hover {
  color: var(--petrolio-700);
}

.elenco-apribile__bottone:focus-visible {
  outline: none;
  border-radius: 6px;
  box-shadow: var(--anello-focus);
}

.elenco-apribile__freccia {
  font-size: 0.875rem;
  color: var(--petrolio-600);
  transition: transform var(--transizione);
}

.elenco-apribile__bottone[aria-expanded="true"] .elenco-apribile__freccia {
  transform: rotate(90deg);
}

/* Le finestre di spiegazione — «Come nasce il prezzo», «Come lo usa il
   motore», «Come si calcolano questi numeri» —: chiuse finche' non servono,
   con la freccia degli elenchi che si aprono (16/10/2026, Dania). */
.scheda-info > summary {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 22px 24px;
  border-radius: var(--raggio-l);
  list-style: none;
  cursor: pointer;
}

.scheda-info > summary::-webkit-details-marker {
  display: none;
}

.scheda-info[open] > summary {
  padding-bottom: 14px;
}

.scheda-info > summary:hover .scheda__titolo {
  color: var(--petrolio-700);
}

.scheda-info > summary:focus-visible {
  outline: none;
  box-shadow: var(--anello-focus);
}

.scheda-info .scheda__sottotitolo {
  display: block;
}

.scheda-info__freccia {
  margin-top: 3px;
  font-size: 0.875rem;
  color: var(--petrolio-600);
  transition: transform var(--transizione);
}

.scheda-info[open] .scheda-info__freccia {
  transform: rotate(90deg);
}

.scheda-info > summary + .scheda__corpo {
  padding-top: 6px;
}

.elenco-apribile__strumenti {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  margin-bottom: 14px;
}

.elenco-apribile__filtri {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* Le tessere che aprono un elenco sono bottoni: si sollevano al passaggio
   come quelle che portano a un'altra pagina. */
button.tessera--fonte {
  width: 100%;
}

@media (max-width: 900px) {
  .fonti-dati {
    grid-template-columns: minmax(0, 1fr);
  }
}

.righe-scartate {
  margin: 6px 0 0;
  padding-left: 18px;
  font-size: 0.8125rem;
}

.righe-scartate .mono {
  margin-right: 6px;
  color: var(--testo-tenue);
}

/* --- I collegamenti che non ci sono ancora: DAT e i siti degli annunci --------------
   (08/10/2026) Una carta in testa alla pagina dice cosa verra' da fuori e
   che oggi non e' collegato: il bottone della banca dati lo ricorda, i siti
   dicono «nessuno». */

.fonti-dati--due {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.banca-dati {
  margin-bottom: 20px;
}

.banca-dati__corpo {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 20px;
}

.banca-dati__icona {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--petrolio-50);
  box-shadow: inset 0 0 0 1px var(--petrolio-100);
  font-size: 1.25rem;
  color: var(--petrolio-700);
}

.banca-dati__testo {
  flex: 1 1 auto;
  min-width: 0;
}

.banca-dati__testo .scheda__titolo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.banca-dati__esito:empty {
  display: none;
}

.banca-dati__esito {
  padding: 0 20px 18px;
}

.siti-collegati__fonti:empty {
  display: none;
}

.siti-collegati__fonti {
  padding: 14px 20px 18px;
  border-top: 1px solid var(--bordo-tenue);
}

.siti-collegati__titolo {
  display: block;
  margin-bottom: 8px;
  font-size: 0.71875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--testo-tenue);
}

.siti-collegati__elenco {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 22px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.875rem;
}

.siti-collegati__elenco strong {
  font-variant-numeric: tabular-nums;
}

.carta-dati__senza {
  display: flex;
  gap: 8px;
  margin: 12px 0 0;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--testo-medio);
}

/* --- Come nasce il prezzo ------------------------------------------------------------ */

/* Cinque passi in fila, uno sotto l'altro: e' una sequenza, e in colonne
   strette le frasi andavano a capo a ogni parola. */
.regole-prezzo {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 980px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.regole-prezzo li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--testo-medio);
}

.regole-prezzo strong {
  color: var(--testo);
}

.regole-prezzo__icona {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: var(--petrolio-50);
  color: var(--petrolio-700);
}

/* --- I prezzi, codice per codice ----------------------------------------------------- */

.prezzi-mercato__cerca {
  flex: 0 1 280px;
}

.prezzi-mercato td {
  white-space: nowrap;
}

.prezzi-mercato__prezzo {
  font-family: var(--font-titoli);
  font-size: 0.9375rem;
  font-weight: 700;
}

.prezzi-mercato__apri .bi {
  display: inline-block;
  transition: transform var(--transizione);
}

.prezzi-mercato__apri[aria-expanded="true"] .bi {
  transform: rotate(180deg);
}

.tabella tbody tr.prezzi-mercato__dettaglio:hover {
  background: none;
}

.prezzi-mercato__dettaglio > td {
  padding: 4px 12px 16px;
  white-space: normal;
}

.prezzi-mercato__pannello {
  padding: 14px 16px;
  border-radius: var(--raggio);
  background: var(--superficie-alt);
  box-shadow: inset 0 0 0 1px var(--bordo-tenue);
}

.prezzi-mercato__frase {
  margin: 0 0 8px;
  font-size: 0.875rem;
  line-height: 1.5;
}

/* La striscia: un punto per annuncio sull'asse dei prezzi, la mediana come
   linea. Pieni quelli che contano, blu profondo i venduti, vuoti gli
   scarti. */
.striscia-prezzi {
  display: block;
  width: 100%;
  max-width: 720px;
  height: auto;
  margin: 4px 0 2px;
}

.striscia-prezzi__asse {
  stroke: var(--ardesia-300);
  stroke-width: 1;
}

.striscia-prezzi__mediana {
  stroke: var(--testo);
  stroke-width: 1.5;
  stroke-dasharray: 4 3;
}

.striscia-prezzi__punto {
  fill: var(--petrolio-600);
  stroke: var(--superficie-alt);
  stroke-width: 1.5;
}

.striscia-prezzi__punto--venduto {
  fill: var(--petrolio-800);
}

.striscia-prezzi__punto--sotto_il_minimo,
.striscia-prezzi__punto--fuori_scala {
  fill: var(--superficie-alt);
  stroke: var(--ardesia-400);
}

.striscia-prezzi__testo {
  font-size: 11px;
  fill: var(--testo-tenue);
  font-variant-numeric: tabular-nums;
}

.striscia-prezzi__testo--mediana {
  font-weight: 600;
  fill: var(--testo);
}

.striscia-prezzi__legenda {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  margin: 0 0 12px;
  padding: 0;
  list-style: none;
  font-size: 0.78125rem;
  color: var(--testo-medio);
}

.striscia-prezzi__legenda li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.striscia-prezzi__segno {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--petrolio-600);
}

.striscia-prezzi__segno--venduto {
  background: var(--petrolio-800);
}

.striscia-prezzi__segno--scartato {
  background: transparent;
  box-shadow: inset 0 0 0 1.5px var(--ardesia-400);
}

/* --- Il registro dei caricamenti -------------------------------------------------- */

.caricamenti {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.caricamento {
  border-radius: var(--raggio);
  box-shadow: inset 0 0 0 1px var(--bordo-tenue);
  background: var(--superficie);
}

.caricamento__barra {
  display: flex;
  align-items: center;
  gap: 8px;
}

.caricamento__barra > .caricamento__azione {
  flex-shrink: 0;
  margin-right: 12px;
}

/* Un file tolto si legge piu' piano: non conta piu' per il motore. */
.caricamento--tolto {
  background: var(--superficie-alt);
}

.caricamento--tolto .caricamento__file strong {
  color: var(--testo-medio);
}

.caricamento__testa {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  gap: 14px;
  width: 100%;
  min-width: 0;
  padding: 12px 14px;
  border: 0;
  border-radius: var(--raggio);
  background: none;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: background var(--transizione);
}

.caricamento__testa:hover {
  background: var(--petrolio-50);
}

.caricamento__testa:focus-visible {
  outline: none;
  box-shadow: var(--anello-focus);
}

.caricamento__icona {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--petrolio-50);
  color: var(--petrolio-700);
}

.caricamento__file {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.caricamento__file strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.caricamento__file span {
  font-size: 0.8125rem;
  color: var(--testo-tenue);
}

.caricamento__numeri {
  display: flex;
  flex-shrink: 0;
  gap: 14px;
  font-size: 0.8125rem;
  color: var(--testo-medio);
}

.caricamento__numeri strong {
  color: var(--testo);
  font-variant-numeric: tabular-nums;
}

.caricamento__scartate strong {
  color: var(--errore);
}

.caricamento__freccia {
  flex-shrink: 0;
  color: var(--testo-tenue);
  transition: transform var(--transizione);
}

.caricamento__testa[aria-expanded="true"] .caricamento__freccia {
  transform: rotate(180deg);
}

.caricamento__dettaglio {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 4px 14px 14px;
}

.caricamento__dettaglio[hidden] {
  display: none;
}

.caricamento__riga {
  display: flex;
  gap: 8px;
  margin: 0;
  font-size: 0.84375rem;
  line-height: 1.5;
}

.caricamento__titoletto {
  margin: 4px 0 0;
  font-size: 0.71875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--testo-tenue);
}

.caricamento__scarti summary {
  cursor: pointer;
  font-size: 0.84375rem;
  font-weight: 600;
}

.registro-caricamenti__altri {
  display: flex;
  justify-content: center;
  margin-top: 12px;
}

@media (max-width: 760px) {
  .fonti-dati--due {
    grid-template-columns: minmax(0, 1fr);
  }

  .banca-dati__corpo {
    flex-wrap: wrap;
  }

  .caricamento__testa {
    flex-wrap: wrap;
  }

  .caricamento__numeri {
    order: 3;
    width: 100%;
    padding-left: 50px;
  }

  /* «Togli» va sotto, allineato al nome del file. */
  .caricamento__barra {
    flex-wrap: wrap;
  }

  .caricamento__barra > .caricamento__azione {
    margin: 0 0 12px 64px;
  }
}

/* ==========================================================================
   Valorizzazione: la coda, la proposta, la simulazione, i dati
   --------------------------------------------------------------------------
   Le pagine del motore decisionale rifatte l'08/10/2026 sullo stile nuovo:
   la coda con le carte delle strade, la proposta con il confronto disegnato,
   la simulazione su due colonne, i dati da fuori come tre fonti, i canali
   con quanto resta di un pezzo. Le strade hanno la rampa di petrolio del
   cruscotto (dallo scuro al chiaro come cala quello che si recupera); il
   nome sta sempre accanto al colore.
   ========================================================================== */

/* --- La coda: le carte delle strade ---------------------------------------- */

.strade-coda {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}

.strada-carta {
  --strada: var(--petrolio-700);
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  padding: 16px 18px 15px;
  border: 0;
  border-radius: var(--raggio-l);
  background: var(--vetro);
  box-shadow: var(--ombra-scheda), inset 0 0 0 1px var(--vetro-bordo);
  font: inherit;
  text-align: left;
  color: inherit;
  cursor: pointer;
  transition: box-shadow 200ms var(--curva), transform 200ms var(--curva),
    background var(--transizione);
}

.strada-carta:hover {
  background: var(--vetro-forte);
  transform: translateY(-2px);
  box-shadow: var(--ombra-s), var(--anello), var(--ombra-l);
}

.strada-carta:focus-visible {
  outline: none;
  box-shadow: var(--anello-focus), var(--ombra-s);
}

/* La carta scelta e' il filtro acceso: l'anello ha il colore della strada. */
.strada-carta[aria-pressed="true"] {
  background: var(--superficie);
  box-shadow: inset 0 0 0 2px var(--strada), var(--ombra);
}

.strada-carta__testa {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  font-size: 0.84375rem;
  font-weight: 600;
  color: var(--testo-forte);
}

.strada-carta__icona {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  border-radius: 9px;
  background: var(--strada);
  color: #fff;
  font-size: 0.9375rem;
}

/* Il petrolio chiaro della pressa porta l'icona scura. */
.strada-carta[data-strada="rottamazione"] .strada-carta__icona {
  color: var(--petrolio-950);
}

.strada-carta--tutte .strada-carta__icona {
  background: var(--petrolio-50);
  color: var(--petrolio-700);
  box-shadow: inset 0 0 0 1px var(--petrolio-100);
}

.strada-carta__nome {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.strada-carta__numero {
  margin-top: 6px;
  font-size: 0.875rem;
  color: var(--testo-medio);
}

.strada-carta__numero > span {
  margin-right: 3px;
  font-family: var(--font-titoli);
  font-stretch: var(--largo);
  font-size: 1.875rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--testo-titoli);
}

.strada-carta__valore {
  font-size: 0.8125rem;
  color: var(--testo-medio);
}

/* Dentro un bottone i figli non si stirano da soli: la larghezza e' detta. */
.strada-carta__quota,
.strada-carta__barra {
  display: flex;
  align-self: stretch;
  width: 100%;
  gap: 2px;
  height: 6px;
  margin-top: 6px;
  border-radius: 3px;
  overflow: hidden;
  background: var(--ardesia-100);
}

.strada-carta__quota > span {
  display: block;
  height: 100%;
  border-radius: 3px;
  background: var(--strada);
  transform-origin: left;
  animation: cresci 700ms var(--curva) 200ms backwards;
}

.strada-carta__barra {
  background: none;
  animation: svela 900ms var(--curva) 200ms backwards;
}

.strada-carta__barra > span {
  min-width: 3px;
}

/* --- La coda: filtri e righe ---------------------------------------------------- */

.coda-valorizzazione__filtri {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px 16px;
  padding: 18px 24px 16px;
  border-bottom: 1px solid var(--bordo-tenue);
}

/* La ricerca per targa, a destra delle scelte (15/10/2026). */
.coda-valorizzazione__cerca {
  flex: 0 1 300px;
  margin-left: auto;
}

.strada-riga {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-weight: 600;
  color: var(--testo);
}

.strada-riga__segno {
  width: 9px;
  height: 9px;
  flex-shrink: 0;
  border-radius: 3px;
}

.coda-valore {
  font-family: var(--font-titoli);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.coda-valore--costa {
  font-weight: 600;
  color: var(--testo-medio);
}

/* L'affidabilita' della stima: tre tacche come un segnale, e la parola. */
.affidabilita {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.75rem;
  white-space: nowrap;
  color: var(--testo-tenue);
}

.affidabilita__tacche {
  display: inline-flex;
  align-items: flex-end;
  gap: 2px;
  height: 11px;
}

.affidabilita__tacche span {
  width: 3px;
  border-radius: 1px;
  background: var(--ardesia-200);
}

.affidabilita__tacche span:nth-child(1) { height: 5px; }
.affidabilita__tacche span:nth-child(2) { height: 8px; }
.affidabilita__tacche span:nth-child(3) { height: 11px; }

.affidabilita__tacche span.piena {
  background: var(--petrolio-600);
}

.affidabilita--bassa .affidabilita__tacche span.piena {
  background: var(--attenzione-pieno);
}

.tabella--coda td {
  vertical-align: middle;
}

/* --- La proposta: il verdetto in testa ----------------------------------------- */

.verdetto {
  padding: 24px 26px 22px;
}

.verdetto__corpo {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(260px, 1fr);
  gap: 24px;
  align-items: start;
}

.verdetto__etichetta,
.verdetto__titoletto {
  display: block;
  font-size: 0.71875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--testo-tenue);
}

.verdetto__strada {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 10px;
  font-family: var(--font-titoli);
  font-stretch: var(--semilargo);
  font-size: 1.625rem;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.025em;
}

.verdetto__icona {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  border-radius: 12px;
  background: var(--strada);
  color: #fff;
  font-size: 1.1875rem;
}

.verdetto__icona[data-strada="rottamazione"] {
  color: var(--petrolio-950);
}

.verdetto__valore {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  margin-top: 12px;
}

.verdetto__cifra {
  font-family: var(--font-titoli);
  font-stretch: var(--largo);
  font-size: 2.375rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.045em;
  white-space: nowrap;
  color: var(--petrolio-800);
}

.verdetto__motivo {
  max-width: 72ch;
  margin: 14px 0 0;
  line-height: 1.55;
  color: var(--testo-medio);
}

.verdetto__decisione {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 18px;
  border-radius: var(--raggio-l);
  background: var(--superficie-alt);
  box-shadow: inset 0 0 0 1px var(--bordo-tenue);
}

.verdetto__deciso {
  font-family: var(--font-titoli);
  font-size: 1.125rem;
  font-weight: 700;
}

/* Il foglio di lavorazione accanto alla decisione (15/10/2026): c'e', ci
   arriva con la bonifica, o manca la distinta operativa. */
.verdetto__foglio {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--testo-medio);
}

.verdetto__foglio > i {
  margin-top: 1px;
  color: var(--ardesia-500);
}

.verdetto__foglio--fatto > i {
  color: var(--successo-pieno);
}

.verdetto__foglio--manca {
  color: var(--testo);
  font-weight: 500;
}

.verdetto__foglio--manca > i {
  color: var(--attenzione-pieno);
}

/* Approvare e scegliere un'altra strada stanno insieme: il pieno Blu
   Materia per la proposta, il contorno per contraddirla (08/10/2026). */
.verdetto__gesti {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* --- Scegli un'altra strada: le tre strade come scelte ----------------------------- */

.scelte-strada {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 0;
  border: 0;
}

.scelta-strada {
  position: relative;
  margin: 0;
  cursor: pointer;
}

.scelta-strada input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.scelta-strada__corpo {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: var(--raggio);
  box-shadow: inset 0 0 0 1px var(--bordo-forte);
  transition: box-shadow var(--transizione), background var(--transizione);
}

.scelta-strada:hover .scelta-strada__corpo {
  background: var(--petrolio-50);
}

.scelta-strada input:checked + .scelta-strada__corpo {
  background: var(--petrolio-50);
  box-shadow: inset 0 0 0 2px var(--primario);
}

.scelta-strada input:focus-visible + .scelta-strada__corpo {
  outline: 2px solid var(--petrolio-500);
  outline-offset: 2px;
}

.scelta-strada--proposta {
  cursor: default;
}

.scelta-strada--proposta .scelta-strada__corpo {
  background: var(--superficie-alt);
  box-shadow: inset 0 0 0 1px var(--bordo-tenue);
}

.scelta-strada--proposta:hover .scelta-strada__corpo {
  background: var(--superficie-alt);
}

.scelta-strada__icona {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: var(--raggio);
  background: var(--strada);
  color: #fff;
}

.scelta-strada__testo {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.scelta-strada__testo > span {
  font-size: 0.8125rem;
  color: var(--testo-tenue);
}

.scelta-strada__valore {
  flex-shrink: 0;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.verdetto__confronto {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--bordo-tenue);
}

.verdetto__dati {
  margin-top: 18px;
}

/* --- Le tre strade a confronto ---------------------------------------------------
   Una barra per strada dallo zero: a destra quanto rende, a sinistra quanto
   costa. La proposta ha il colore della sua strada, le altre il grigio. */

.confronto-strade {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 12px;
}

.confronto-strade__riga {
  display: grid;
  grid-template-columns: minmax(0, 15.5rem) minmax(0, 1fr) 12rem;
  align-items: center;
  gap: 16px;
  font-size: 0.875rem;
}

.confronto-strade__nome {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  color: var(--testo-medio);
}

.confronto-strade__riga--proposta .confronto-strade__nome {
  font-weight: 600;
  color: var(--testo);
}

.confronto-strade__segno {
  width: 10px;
  height: 10px;
  flex-shrink: 0;
  border-radius: 3px;
}

.confronto-strade__proposta {
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--petrolio-50);
  box-shadow: inset 0 0 0 1px var(--petrolio-100);
  font-size: 0.71875rem;
  font-weight: 600;
  color: var(--petrolio-700);
}

.confronto-strade__pista {
  position: relative;
  height: 14px;
  border-radius: 4px;
  background: var(--ardesia-50);
}

.confronto-strade__barra {
  position: absolute;
  top: 0;
  bottom: 0;
  border-radius: 4px;
  background: var(--colore);
  transform-origin: left center;
  animation: cresci 800ms var(--curva) backwards;
  animation-delay: calc(200ms + var(--ritardo, 0ms));
}

/* Quanto costa cresce dallo zero verso sinistra. */
.confronto-strade__barra--negativa {
  transform-origin: right center;
}

/* Bloccata dai filtri: si vede quanto varrebbe, a tratteggio. */
.confronto-strade__barra--bloccata {
  background: repeating-linear-gradient(135deg, var(--ardesia-300) 0 4px, transparent 4px 8px);
  box-shadow: inset 0 0 0 1px var(--ardesia-300);
}

.confronto-strade__zero {
  position: absolute;
  top: -4px;
  bottom: -4px;
  width: 2px;
  margin-left: -1px;
  border-radius: 1px;
  background: var(--ardesia-400);
}

.confronto-strade__valore {
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.confronto-strade__valore strong {
  font-family: var(--font-titoli);
  font-weight: 700;
}

/* --- I passi: dal calcolo alla decisione --------------------------------------- */

.passi-proposta {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 22px 0 0;
  padding: 18px 0 0;
  border-top: 1px solid var(--bordo-tenue);
  list-style: none;
}

.passi-proposta__passo {
  position: relative;
  padding-right: 14px;
}

/* Il filo fra un passo e il successivo: pieno fin dove si e' arrivati. */
.passi-proposta__passo::after {
  content: "";
  position: absolute;
  top: 13px;
  left: 36px;
  right: 6px;
  height: 2px;
  border-radius: 1px;
  background: var(--petrolio-200);
}

.passi-proposta__passo:last-child::after {
  display: none;
}

.passi-proposta__passo a,
.passi-proposta__testo {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--testo-medio);
}

.passi-proposta__passo a:hover {
  text-decoration: none;
  color: var(--petrolio-700);
}

.passi-proposta__segno {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--petrolio-600);
  color: #fff;
  font-size: 0.8125rem;
  font-weight: 700;
}

.passi-proposta__passo--adesso .passi-proposta__segno {
  background: var(--accento);
  color: var(--petrolio-900);
  box-shadow: 0 0 0 4px var(--petrolio-100);
}

.passi-proposta__passo--adesso .passi-proposta__testo {
  font-weight: 600;
  color: var(--testo);
}

/* --- Le carte delle strade, con il loro conto --------------------------------- */

.strade-conti {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 14px;
}

.strada-conto {
  --strada: var(--petrolio-700);
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  padding: 16px 18px;
  border-radius: var(--raggio-l);
  background: var(--superficie-alt);
  box-shadow: inset 0 0 0 1px var(--bordo-tenue);
}

.strada-conto--proposta {
  background: var(--superficie);
  box-shadow: inset 0 0 0 2px var(--strada), var(--ombra);
}

/* Bloccata da un filtro: resta visibile, con accanto quanto valeva prima. */
.strada-conto--bloccata {
  background: repeating-linear-gradient(135deg, rgba(196, 200, 206, 0.22) 0 6px, transparent 6px 12px),
    var(--superficie-alt);
}

/* Non valutabile non e' «vale zero»: e' un dato che manca, e si legge diverso. */
.strada-conto--muta {
  background: var(--fondo-alt);
  box-shadow: none;
  outline: 1.5px dashed var(--ardesia-300);
  outline-offset: -1.5px;
}

.strada-conto__testa {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  font-weight: 600;
}

.strada-conto__icona {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  border-radius: 9px;
  background: var(--strada);
  color: #fff;
}

.strada-conto__proposta {
  margin-left: auto;
  padding: 1px 9px;
  border-radius: 999px;
  background: var(--strada);
  font-size: 0.71875rem;
  font-weight: 600;
  color: #fff;
}

/* Il petrolio chiaro della pressa porta testo e icona scuri. */
.strada-conto[data-strada="rottamazione"] .strada-conto__icona,
.strada-conto[data-strada="rottamazione"] .strada-conto__proposta {
  color: var(--petrolio-950);
}

.strada-conto__valore {
  margin-top: 6px;
  color: var(--testo-titoli);
  font-family: var(--font-titoli);
  font-stretch: var(--largo);
  font-size: 1.625rem;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.03em;
}

.strada-conto__fonte {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
  margin-top: auto;
  padding-top: 8px;
  font-size: 0.78125rem;
  color: var(--testo-tenue);
}

/* --- I filtri come lista di controllo -------------------------------------------- */

.controlli {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.controllo {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  align-items: start;
  gap: 12px;
  padding: 12px 14px;
  border-radius: var(--raggio);
  background: var(--superficie-alt);
  box-shadow: inset 0 0 0 1px var(--bordo-tenue);
}

.controllo__segno {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--ardesia-100);
  color: var(--ardesia-600);
}

.controllo--errore {
  background: #fdf5f6;
  box-shadow: inset 0 0 0 1px var(--errore-bordo);
}

.controllo--errore .controllo__segno {
  background: var(--errore-fondo);
  color: var(--errore-pieno);
}

.controllo--successo .controllo__segno {
  background: var(--successo-fondo);
  color: var(--successo-pieno);
}

.controllo--attenzione .controllo__segno {
  background: var(--attenzione-fondo);
  color: var(--attenzione-pieno);
}

.controllo--spento {
  opacity: 0.72;
}

.controllo__testa {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  min-height: 32px;
}

.controllo__nome {
  font-weight: 600;
}

.controllo__motivo {
  margin-top: 2px;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--testo-medio);
}

/* --- Il riepilogo della distinta ---------------------------------------------------- */

.riepilogo-distinta {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 18px 36px;
  margin-bottom: 18px;
  padding: 16px 18px;
  border-radius: var(--raggio-l);
  background: var(--superficie-alt);
  box-shadow: inset 0 0 0 1px var(--bordo-tenue);
}

.riepilogo-distinta__numeri {
  display: flex;
  gap: 28px;
  margin: 0;
}

.riepilogo-distinta__numeri dt {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--testo-tenue);
}

.riepilogo-distinta__numeri dd {
  margin: 2px 0 0;
  color: var(--testo-titoli);
  font-family: var(--font-titoli);
  font-stretch: var(--largo);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  white-space: nowrap;
}

.riepilogo-distinta__numeri small {
  font-family: var(--font);
  font-stretch: 100%;
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--testo-medio);
}

.riepilogo-distinta__titolo {
  display: block;
  margin-bottom: 8px;
  font-size: 0.71875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--testo-tenue);
}

.riepilogo-distinta__barra {
  display: flex;
  gap: 2px;
  height: 12px;
  border-radius: 6px;
  overflow: hidden;
  animation: svela 900ms var(--curva) 200ms backwards;
}

.riepilogo-distinta__barra > span {
  min-width: 4px;
}

.riepilogo-distinta__legenda {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
  font-size: 0.8125rem;
}

.riepilogo-distinta__legenda li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.riepilogo-distinta__segno,
.canale-riga__segno {
  width: 10px;
  height: 10px;
  flex-shrink: 0;
  border-radius: 3px;
  box-shadow: inset 0 0 0 1px rgba(14, 20, 25, 0.12);
}

.canale-riga {
  display: flex;
  align-items: center;
  gap: 7px;
}

.distinta-valore {
  font-family: var(--font-titoli);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.distinta-valore--costa {
  color: var(--testo-medio);
}

.apri-addendi[aria-expanded="true"] .bi {
  transform: rotate(180deg);
}

.apri-addendi .bi {
  transition: transform var(--transizione);
}

/* --- La distinta riga per riga --------------------------------------------------------
   Rifatta l'08/10/2026. Chiusa sotto il riepilogo, si apre con un bottone
   che dice cosa c'e' dentro; aperta, 25 righe alla volta e «Carica altre».
   Ogni riga e' un conto in tre colonne — ricavo, costi, valore — e il
   valore ha la sua barra, lunga quanto vale la riga rispetto alla piu'
   ricca, nel colore del canale come nel riepilogo. Le azioni sono bottoni
   senza fondo: si trovano, ma non pesano quanto i numeri. */

.distinta-apri {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 12px 16px;
  border: 1px solid var(--bordo);
  border-radius: var(--raggio-l);
  background: var(--superficie);
  font: inherit;
  color: var(--testo);
  text-align: left;
  cursor: pointer;
  transition: border-color var(--transizione), background var(--transizione);
}

.distinta-apri:hover {
  border-color: var(--petrolio-300);
  background: var(--petrolio-50);
}

.distinta-apri:focus-visible {
  outline: none;
  box-shadow: var(--anello-focus);
}

.distinta-apri__icona {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: var(--raggio);
  background: var(--petrolio-50);
  color: var(--petrolio-700);
  font-size: 1.125rem;
  transition: background var(--transizione);
}

.distinta-apri:hover .distinta-apri__icona {
  background: var(--superficie);
}

.distinta-apri__testo {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.distinta-apri__testo strong {
  font-family: var(--font-titoli);
  font-size: 1rem;
  font-weight: 700;
}

.distinta-apri__testo > span {
  font-size: 0.8125rem;
  color: var(--testo-tenue);
}

.distinta-apri__azione {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--primario);
}

.distinta-apri__azione .bi {
  transition: transform var(--transizione);
}

.distinta-apri[aria-expanded="true"] .distinta-apri__azione .bi {
  transform: rotate(180deg);
}

.distinta-righe {
  margin-top: 16px;
  animation: comparsa 260ms var(--curva) both;
}

.distinta-legenda {
  margin: 0 0 12px;
  line-height: 1.55;
}

.distinta-legenda strong {
  font-weight: 600;
  color: var(--testo-medio);
}

.tabella--distinta thead th,
.tabella--distinta tbody td {
  padding-left: 10px;
  padding-right: 10px;
}

.tabella--distinta tbody td {
  padding-top: 11px;
  padding-bottom: 11px;
}

/* Le intestazioni dei numeri stanno sopra i numeri, a destra. */
.tabella--distinta thead th.tabella__num {
  text-align: right;
}

.tabella--distinta thead th:first-child,
.riga-distinta__ordine {
  width: 2.5rem;
}

.riga-distinta__ordine {
  color: var(--testo-tenue);
  font-variant-numeric: tabular-nums;
}

.riga-distinta__marche {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 6px;
}

.tabella--distinta .canale-riga {
  align-items: baseline;
  max-width: 11rem;
  font-weight: 500;
}

.tabella--distinta .canale-riga__segno {
  transform: translateY(1px);
}

.tabella--distinta td.tabella__num {
  white-space: nowrap;
}

.riga-distinta__valore {
  width: 8.5rem;
}

.riga-distinta__valore .distinta-valore {
  font-size: 1rem;
}

/* La barra parte dallo zero, a sinistra, su una pista di lunghezza fissa:
   le righe si confrontano a colpo d'occhio anche con la colonna allineata
   a destra. */
.riga-distinta__barra {
  display: block;
  width: 7rem;
  height: 6px;
  margin: 6px 0 4px auto;
  border-radius: 3px;
  background: var(--ardesia-100);
  overflow: hidden;
}

.riga-distinta__barra > span {
  display: block;
  height: 100%;
  border-radius: 3px;
}

.tabella--distinta .tabella__azioni .btn {
  gap: 0.3125rem;
  padding: 0.3125rem 0.4375rem;
}

.tabella--distinta .tabella__azioni .btn + .btn {
  margin-left: 0;
}

.tabella--distinta .riga-addendi > td {
  padding: 2px 10px 14px;
}

/* Nel «Perché» il nome del canale e la sua regola hanno lo spazio per
   stare su due righe, non su otto. */
.conto-canali .tabella td:first-child,
.conto-canali .tabella th:first-child {
  min-width: 15rem;
}

.distinta-altre,
.carica-altri {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 14px 0 2px;
  border-top: 1px solid var(--bordo-tenue);
  font-size: 0.8125rem;
}

.distinta-altre[hidden],
.carica-altri[hidden] {
  display: none;
}

/* --- Telefono ---------------------------------------------------------------------- */

@media (max-width: 900px) {
  .verdetto__corpo,
  .riepilogo-distinta {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 700px) {
  .verdetto {
    padding: 20px 16px;
  }

  .verdetto__cifra {
    font-size: 1.875rem;
  }

  .confronto-strade__riga {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 6px 12px;
  }

  .confronto-strade__pista {
    grid-column: 1 / -1;
    order: 3;
  }

  .passi-proposta {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 16px;
  }

  .passi-proposta__passo:nth-child(2)::after {
    display: none;
  }

  .riepilogo-distinta__numeri {
    flex-wrap: wrap;
    gap: 12px 22px;
  }

  .distinta-apri {
    gap: 12px;
    padding: 12px;
  }

  /* Su un telefono la freccia basta: «Apri» e «Chiudi» li dice il lettore. */
  .distinta-apri__azione > span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .distinta-altre {
    flex-direction: column;
    gap: 8px;
  }
}

@media (max-width: 1100px) {
  .strade-coda {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .strade-coda {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }

  .coda-valorizzazione__filtri {
    padding: 16px;
  }

  /* Quattro scelte in fila non stanno in 360 pixel: due righe da due. */
  .coda-valorizzazione__filtri .campo {
    width: 100%;
  }

  .coda-valorizzazione__filtri .segmentato {
    grid-auto-flow: row;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (prefers-reduced-motion: reduce) {
  .strada-carta__quota > span,
  .strada-carta__barra,
  .confronto-strade__barra,
  .riepilogo-distinta__barra,
  .distinta-righe {
    animation: none;
  }

  .strada-carta:hover {
    transform: none;
  }
}

/* ==========================================================================
   Scadenze di legge: i tre obblighi e le pratiche da presidiare
   --------------------------------------------------------------------------
   Rifatta l'08/10/2026. In testa i tre obblighi con un termine — bonifica,
   decontaminazione, trattamento completo —, ciascuno con il suo termine in
   grande e la sua linea dei tempi: nei tempi, a rischio, fuori termine e,
   per la bonifica, da verificare. Sotto le tre regole che valgono per
   tutti, poi la bonifica adesso in tessere e le pratiche da presidiare. I
   giorni vengono dai parametri: la pagina non li ricorda.
   ========================================================================== */

.obblighi {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 30px;
}

.obblighi__carte {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.obbligo {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  padding: 20px 22px 18px;
  border-radius: var(--raggio-l);
  background: var(--vetro);
  box-shadow: var(--ombra-scheda), inset 0 0 0 1px var(--vetro-bordo);
}

.obbligo__testa {
  display: flex;
  align-items: center;
  gap: 12px;
}

.obbligo__icona {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  border-radius: 12px;
  background: var(--petrolio-50);
  box-shadow: inset 0 0 0 1px var(--petrolio-100);
  font-size: 1.1875rem;
  color: var(--petrolio-700);
}

/* La bonifica e' il termine piu' stretto: il suo tassello e' pieno. */
.obbligo--bonifica .obbligo__icona {
  background: var(--petrolio-700);
  box-shadow: none;
  color: #fff;
}

.obbligo__nome {
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 700;
}

.obbligo__ambito {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--testo-tenue);
}

.obbligo__termine {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 4px;
}

.obbligo__cifra {
  font-family: var(--font-titoli);
  font-stretch: var(--largo);
  font-size: 3rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.05em;
  color: var(--petrolio-800);
}

.obbligo__unita {
  font-family: var(--font-titoli);
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--testo-medio);
}

.obbligo__decorre {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  font-size: 0.875rem;
  color: var(--testo);
}

.obbligo__decorre .bi {
  color: var(--petrolio-600);
}

.obbligo__nota {
  margin: 2px 0 0;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--testo-tenue);
}

.obbligo-scheletro {
  height: 250px;
  border-radius: var(--raggio-l);
}

/* La linea dei tempi di un obbligo: le fasce in proporzione, la scadenza
   come un filo, sotto i giorni che contano. */
.linea-tempi {
  margin-top: 4px;
}

.linea-tempi__fasce {
  position: relative;
  height: 12px;
  border-radius: 6px;
  background: var(--ardesia-50);
}

.linea-tempi__fascia {
  position: absolute;
  top: 0;
  bottom: 0;
  transform-origin: left center;
  animation: cresci 700ms var(--curva) backwards;
  animation-delay: calc(200ms + var(--ritardo, 0ms));
}

.linea-tempi__fascia:first-child {
  border-radius: 6px 0 0 6px;
}

.linea-tempi__fascia:last-of-type {
  border-radius: 0 6px 6px 0;
}

.linea-tempi__fascia--entro { background: var(--successo-bordo); }
.linea-tempi__fascia--rischio { background: var(--attenzione-pieno); }
.linea-tempi__fascia--fuori { background: var(--errore-pieno); }
.linea-tempi__fascia--verifica { background: var(--info-bordo); }

.linea-tempi__scadenza {
  position: absolute;
  top: -5px;
  bottom: -5px;
  width: 2px;
  margin-left: -1px;
  border-radius: 1px;
  background: var(--testo);
}

.linea-tempi__tacche {
  position: relative;
  height: 20px;
}

.linea-tempi__tacca {
  position: absolute;
  top: 5px;
  transform: translateX(-50%);
  white-space: nowrap;
  font-size: 0.71875rem;
  font-variant-numeric: tabular-nums;
  color: var(--testo-tenue);
}

.linea-tempi__tacca--inizio {
  transform: none;
}

.linea-tempi__tacca--termine {
  font-weight: 700;
  color: var(--testo);
}

/* Le regole di un obbligo, sotto la sua linea dei tempi: il segno ha il
   colore della fascia di cui parla (08/10/2026: erano tre riquadri sotto le
   carte, e occupavano troppo). */
.obbligo__regole {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin: 2px 0 0;
  padding: 0;
  list-style: none;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--testo-medio);
}

.obbligo__regole li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.obbligo__regole strong {
  font-weight: 600;
  color: var(--testo);
}

.obbligo__segno {
  flex-shrink: 0;
  width: 10px;
  height: 10px;
  margin-top: calc((1.45em - 10px) / 2);
  border-radius: 3px;
}

.obbligo__segno--rischio { background: var(--attenzione-pieno); }
.obbligo__segno--verifica { background: var(--info-bordo); }

.obbligo__spunta {
  flex-shrink: 0;
  width: 10px;
  font-size: 0.75rem;
  line-height: 1.45rem;
  color: var(--successo-pieno);
}

.obbligo__regole + .obbligo__nota {
  margin-top: 0;
}

/* La bonifica adesso: le tessere del cruscotto. */
.obblighi-adesso {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 26px;
  scroll-margin-top: 84px;
}

.scadenze-elenco {
  scroll-margin-top: 84px;
}

/* L'arrivo senza una richiesta di ritiro: lo si dice accanto al bottone, in
   piccolo, sopra «Registra l'arrivo» (08/10/2026). */
.arrivo__senza-ritiro {
  margin: 0 0 12px;
  font-size: 0.8125rem;
  line-height: 1.45;
}

/* --- Il catalogo dei guasti (08/10/2026) ------------------------------------------
   I menu a tendina della tabella hanno lo stile dei selettori dei filtri, piu'
   bassi; quello della gravita' ha a sinistra il colore della sua gravita'. */

.selettore--tabella {
  height: 34px;
  padding: 0 28px 0 10px;
  border-radius: 9px;
  font-size: 0.8125rem;
  cursor: pointer;
}

.selettore--tabella:hover:not(:disabled):not(:focus) {
  box-shadow: inset 0 0 0 1px var(--ardesia-400);
}

.guasti__gravita {
  min-width: 132px;
}

.guasti__gravita--critico { box-shadow: inset 4px 0 0 var(--errore-pieno), inset 0 0 0 1px var(--ardesia-200); }
.guasti__gravita--rilevante { box-shadow: inset 4px 0 0 var(--attenzione-pieno), inset 0 0 0 1px var(--ardesia-200); }
.guasti__gravita--trascurabile { box-shadow: inset 4px 0 0 var(--info-bordo), inset 0 0 0 1px var(--ardesia-200); }
.guasti__gravita--artefatto { box-shadow: inset 4px 0 0 var(--ardesia-300), inset 0 0 0 1px var(--ardesia-200); }

.guasti__gravita:focus {
  box-shadow: inset 0 0 0 1px var(--petrolio-500), var(--anello-focus);
}

.guasti__organo {
  min-width: 140px;
}

.guasti__cerca {
  flex: 0 1 280px;
  margin-left: auto;
}

.guasti__spenta td {
  color: var(--testo-tenue);
}

.guasti__letto,
.guasti td:first-child {
  white-space: nowrap;
}

/* Cosa esce dalla distinta per ogni organo, sotto la regola. */
.guasti__mappa {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

/* --- Concorrenza fra giacenze, per tipo di pezzo (08/10/2026) ----------------------
   Una riga per tipo di pezzo, con il pezzo vecchio e i veicoli che lo
   segnalano sotto, a richiesta; si risolvono insieme. */

.concorrenza__filtri {
  margin-left: auto;
}

.concorrenza__veicoli {
  white-space: nowrap;
}

.concorrenza__veicoli .bi {
  transition: transform var(--transizione);
}

.concorrenza__veicoli[aria-expanded="true"] .bi {
  transform: rotate(180deg);
}

.concorrenza__dettaglio > td {
  padding: 6px 14px 16px;
  background: var(--superficie-alt);
}

.concorrenza__nota {
  display: flex;
  gap: 8px;
  margin: 14px 0 0;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--testo-tenue);
}

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

/* «Torna alle pratiche da presidiare» sta a destra, come le azioni. */
.scadenze-elenco__togli {
  margin-left: auto;
}

/* Il nome del veicolo e' un collegamento: ci si arriva con la tastiera, ma
   nella riga si legge come testo. */
.tabella__collegamento {
  color: var(--testo);
}

.tabella__collegamento:hover,
.tabella__collegamento:focus-visible {
  color: var(--petrolio-700);
  text-decoration: underline;
}

/* Sei tessere: in due righe da tre, in una sola dove c'e' posto. Con
   l'adattamento automatico la sesta restava da sola su una riga. */
.obblighi-adesso__tessere {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-bottom: 0;
}

@media (min-width: 1680px) {
  .obblighi-adesso__tessere {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .obblighi-adesso__tessere {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Le tessere su una riga sola, che riempiono tutta la larghezza: i quattro
   numeri di «Prezzi di mercato» e i cinque di «Scadenze di legge»
   (16/10/2026, Dania: «non lasciare vuoto a destra»). Quando non ci stanno
   vanno a capo, e anche le ultime si allargano fino al bordo. */
.tessere.tessere--una-riga {
  display: flex;
  flex-wrap: wrap;
}

.tessere.tessere--una-riga > * {
  flex: 1 1 190px;
  min-width: 0;
}

@media (max-width: 640px) {
  .tessere.tessere--una-riga > * {
    flex-basis: 150px;
  }
}

/* La pratica e il termine stanno su una riga: «PRA-2026-0018» andava a
   capo sul trattino. */
.tabella--scadenze td[data-etichetta="Pratica"],
.tabella--scadenze td[data-etichetta="Termine"] {
  white-space: nowrap;
}

/* Le pratiche: i giorni dal carico come una barretta con la tacca del
   termine, colorata come la classe. */
.giorni-cella {
  display: flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
}

.giorni-cella__numero {
  font-variant-numeric: tabular-nums;
}

.giorni-barra {
  position: relative;
  display: block;
  width: 84px;
  height: 8px;
  flex-shrink: 0;
  border-radius: 4px;
  background: var(--ardesia-100);
}

.giorni-barra__pieno {
  display: block;
  height: 100%;
  border-radius: 4px;
  background: var(--neutro-pieno);
}

.giorni-barra--nei_tempi .giorni-barra__pieno { background: var(--successo-pieno); }
.giorni-barra--a_rischio .giorni-barra__pieno { background: var(--attenzione-pieno); }
.giorni-barra--fuori_termine .giorni-barra__pieno { background: var(--errore-pieno); }
.giorni-barra--da_verificare .giorni-barra__pieno { background: var(--info-pieno); }

.giorni-barra__termine {
  position: absolute;
  top: -3px;
  bottom: -3px;
  width: 2px;
  margin-left: -1px;
  border-radius: 1px;
  background: var(--testo);
}

.testo-errore {
  color: var(--errore);
}

.testo-attenzione {
  color: var(--attenzione);
}

@media (max-width: 1100px) {
  .obblighi__carte {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  .linea-tempi__fascia {
    animation: none;
  }
}

/* ==========================================================================
   Movimento ridotto
   Chi chiede meno movimento lo ha anche qui: niente dissolvenza d'ingresso,
   niente bottoni che cedono, niente tessere che si sollevano. I numeri delle
   tessere arrivano gia' al loro valore (app.js).
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .contenuto {
    animation: none;
  }

  .btn:active:not(:disabled),
  a.tessera:hover,
  button.tessera:hover,
  a.contatore:hover {
    transform: none;
  }
}

/* --- La centralina in «Stato del motore» (09/10/2026) ---------------------
   Il bottone della lettura, simulata finche' il LAUNCH X-431 non e'
   collegato, e l'ultima lettura: spia, codici, cosa fa alla proposta. */
.centralina__leggi {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--sp-3);
}

.centralina__leggi .campo {
  margin: 0;
  min-width: 240px;
}

/* Leggere (per prova) e caricare il rapporto PDF, affiancati. */
.centralina__azioni {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--sp-3) var(--sp-4);
}

.conferma-telaio__azioni {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: var(--sp-3);
}

.lettura__avvisi {
  margin: var(--sp-2) 0 0;
  padding-left: 1.1rem;
  font-size: 0.8125rem;
  color: var(--attenzione);
}

/* L'analisi AI della lettura: un riquadro a parte, perche' non decide. */
.analisi-ai {
  margin-top: var(--sp-4);
  padding: var(--sp-4);
  border: 1px solid var(--info-bordo);
  border-radius: var(--raggio);
  background: var(--info-fondo);
}

/* In «Diagnosi motore» l'analisi ha la sua sezione: niente spazio sopra. */
.scheda__corpo > .analisi-ai:first-child {
  margin-top: 0;
}

.analisi-ai__testa {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  margin-bottom: var(--sp-3);
}

.analisi-ai__nome {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  color: var(--info);
}

.analisi-ai__sintesi {
  margin: 0 0 var(--sp-2);
  line-height: 1.5;
}

.analisi-ai__titolo {
  margin: var(--sp-3) 0 var(--sp-1);
  font-size: 0.8125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--testo-medio);
}

.analisi-ai__elenco {
  margin: 0;
  padding-left: 1.1rem;
}

.analisi-ai__elenco li + li {
  margin-top: var(--sp-1);
}

.analisi-ai__attesa {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin: 0;
  color: var(--info);
  font-weight: 600;
}

/* Mentre l'AI legge i codici (16/10/2026, Dania: «metti una animazione di
   attesa durante la lettura ai»): tre punti che saltano e le righe
   dell'analisi che stanno arrivando. */
.analisi-ai__pensa {
  display: inline-flex;
  gap: 4px;
}

.analisi-ai__pensa span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--info);
  animation: ai-pensa 1.1s ease-in-out infinite;
}

.analisi-ai__pensa span:nth-child(2) {
  animation-delay: 0.15s;
}

.analisi-ai__pensa span:nth-child(3) {
  animation-delay: 0.3s;
}

@keyframes ai-pensa {
  0%, 80%, 100% {
    opacity: 0.35;
    transform: translateY(0);
  }
  40% {
    opacity: 1;
    transform: translateY(-5px);
  }
}

.analisi-ai__righe {
  display: grid;
  gap: 8px;
  margin-top: var(--sp-3);
}

.analisi-ai__righe span {
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--info-bordo) 0%, rgba(255, 255, 255, 0.85) 50%, var(--info-bordo) 100%);
  background-size: 200% 100%;
  animation: ai-righe 1.4s linear infinite;
}

.analisi-ai__righe span:nth-child(2) {
  width: 86%;
}

.analisi-ai__righe span:nth-child(3) {
  width: 62%;
}

@keyframes ai-righe {
  from {
    background-position: 200% 0;
  }
  to {
    background-position: -200% 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .analisi-ai__pensa span,
  .analisi-ai__righe span {
    animation: none;
  }
}

.analisi-ai__piede {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2) var(--sp-3);
  margin-top: var(--sp-4);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--info-bordo);
  font-size: 0.8125rem;
  color: var(--testo-medio);
}

.analisi-ai__inviato {
  margin-top: var(--sp-3);
  font-size: 0.8125rem;
}

.analisi-ai__inviato summary {
  cursor: pointer;
  color: var(--testo-medio);
}

/* Nella scheda del veicolo i dettagli dell'analisi stanno chiusi: la sintesi
   basta a colpo d'occhio (16/10/2026). */
.analisi-ai__dettagli {
  margin-top: var(--sp-2);
}

.analisi-ai__dettagli > summary {
  cursor: pointer;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--info);
}

.analisi-ai__dettagli[open] > summary {
  margin-bottom: var(--sp-1);
}

/* Il PDF del rapporto, sotto la data della lettura. */
.motore-scheda__pdf {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
}

.analisi-ai__inviato pre {
  max-height: 320px;
  margin: 0;
  padding: var(--sp-3);
  overflow: auto;
  border-radius: var(--raggio-s);
  background: var(--superficie);
  font-size: 0.75rem;
  white-space: pre-wrap;
  word-break: break-word;
}

.lettura {
  margin-top: var(--sp-4);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--bordo);
}

.lettura__testa {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--sp-2) var(--sp-3);
}

.lettura__spia {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin: var(--sp-3) 0;
  font-weight: 600;
  color: var(--successo);
}

.lettura__spia--accesa {
  color: var(--attenzione);
}

.lettura__effetto {
  margin: var(--sp-3) 0 0;
  font-weight: 600;
}

.lettura__cosa-fa {
  margin-top: 0.25rem;
  font-size: 0.8125rem;
  color: var(--testo-medio);
}

.lettura__cosa-fa--toglie {
  color: var(--testo-forte);
  font-weight: 600;
}

/* --- I parametri (12/10/2026) ----------------------------------------------
   A sinistra le sezioni, a destra i parametri della sezione: il nome breve, la
   spiegazione, il valore di serie e l'ultimo cambio; a destra di ognuno il
   comando giusto per il suo tipo. Un cambio si salva con «Salva». */
.parametri-barra {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3) var(--sp-5);
  margin-bottom: var(--sp-4);
}

.parametri-barra__cerca {
  flex: 1 1 320px;
  max-width: 560px;
}

.parametri {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  gap: var(--sp-5);
  align-items: start;
}

.parametri__sezioni {
  position: sticky;
  top: 84px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--sp-2);
  border-radius: var(--raggio-l);
  background: var(--superficie);
  box-shadow: var(--ombra-scheda);
}

.parametri__sezione {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 10px;
  border: 0;
  border-radius: var(--raggio);
  background: transparent;
  color: var(--testo-forte);
  font: inherit;
  font-size: 0.875rem;
  text-align: left;
  cursor: pointer;
}

.parametri__sezione:hover {
  background: var(--fondo-alt);
}

.parametri__sezione[aria-current="true"] {
  background: var(--info-fondo);
  color: var(--primario-scuro);
  font-weight: 600;
}

.parametri__sezione > .bi {
  color: var(--testo-tenue);
}

.parametri__sezione[aria-current="true"] > .bi {
  color: var(--primario);
}

.parametri__sezione-nome {
  min-width: 0;
}

.parametri__sezione-aperti {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--attenzione-pieno);
}

.parametri__sezione-conta {
  margin-left: auto;
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
  color: var(--testo-tenue);
}

.parametri__sezione-conta strong {
  color: var(--info);
}

.parametri__fase {
  margin: 12px 10px 4px;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--testo-tenue);
}

.parametri__corpo {
  min-width: 0;
}

.parametri__testa {
  margin-bottom: var(--sp-4);
}

.parametri__testa h2 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-size: 1.25rem;
}

.parametri__testa h2 .bi {
  color: var(--primario);
}

.parametri__testa p {
  margin: 4px 0 0;
  color: var(--testo-medio);
}

.parametri__gruppo {
  margin: var(--sp-5) 0 var(--sp-2);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--testo-medio);
}

.parametri__elenco {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.parametro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 290px);
  gap: var(--sp-3) var(--sp-5);
  padding: 16px 18px;
  border: 1px solid var(--bordo-tenue);
  border-radius: var(--raggio-l);
  background: var(--superficie);
}

.parametro--cambiato {
  box-shadow: inset 3px 0 0 var(--info-pieno);
}

.parametro--da-salvare {
  border-color: var(--attenzione-bordo);
  box-shadow: inset 3px 0 0 var(--attenzione-pieno);
  background: var(--attenzione-velo);
}

.parametro__titolo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
}

.parametro__titolo label {
  margin: 0;
  cursor: pointer;
}

.parametro__descrizione {
  margin: 4px 0 0;
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--testo-medio);
}

.parametro__piede {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 16px;
  margin: 10px 0 0;
  font-size: 0.75rem;
  color: var(--testo-tenue);
}

.parametro__link {
  padding: 0;
  border: 0;
  background: none;
  color: var(--primario);
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
}

.parametro__codice {
  padding: 0;
  background: none;
  font-size: 0.6875rem;
  color: var(--testo-tenue);
}

.parametro__storico {
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: var(--raggio);
  background: var(--superficie-alt);
  font-size: 0.8125rem;
}

.parametro__cambi {
  margin: 0;
  padding-left: 1.1rem;
}

.parametro__cambi li + li {
  margin-top: 6px;
}

/* I comandi hanno lo stile dei campi dei moduli (`.campo`), senza il suo
   margine. */
.parametro__valore {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
}

.parametro__numero {
  display: flex;
  align-items: center;
  gap: 8px;
}

.parametro__numero input {
  width: 150px;
}

.parametro__unita {
  font-size: 0.875rem;
  color: var(--testo-medio);
}

.parametro__json {
  width: 100%;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 0.75rem;
}

/* Un elenco a scelta chiusa, come la gravita' che toglie l'organo: una
   casella per voce, con il nome del catalogo (16/10/2026). */
.parametro__scelte {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
}

.parametro__scelta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
  cursor: pointer;
}

.parametro__scelta input {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--primario);
}

.parametro__aiuto {
  margin: 0;
  font-size: 0.75rem;
  color: var(--testo-tenue);
}

.parametro__salva {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.parametro__bottoni {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.parametro__errore {
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--errore);
}

/* La levetta acceso/spento. */
.levetta {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  cursor: pointer;
}

.levetta input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.levetta__binario {
  position: relative;
  flex: none;
  width: 44px;
  height: 24px;
  border-radius: 999px;
  background: var(--ardesia-300);
  transition: background 0.15s ease;
}

.levetta__binario::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  transition: transform 0.15s ease;
}

.levetta input:checked + .levetta__binario {
  background: var(--successo-pieno);
}

.levetta input:checked + .levetta__binario::after {
  transform: translateX(20px);
}

.levetta input:focus-visible + .levetta__binario {
  outline: 2px solid var(--primario);
  outline-offset: 2px;
}

.levetta input:disabled + .levetta__binario {
  opacity: 0.5;
}

.levetta__testo {
  font-size: 0.875rem;
  font-weight: 600;
}

@media (max-width: 900px) {
  .parametri {
    grid-template-columns: minmax(0, 1fr);
  }

  .parametri__sezioni {
    position: static;
    flex-direction: row;
    overflow-x: auto;
  }

  .parametri__sezione {
    flex: none;
    width: auto;
  }

  .parametri__fase {
    display: none;
  }

  .parametro {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* --- La posizione durante i giri, sul telefono dell'autista (12/10/2026) -- */
.posizione-autista {
  margin-bottom: var(--sp-4);
}

.posizione-autista__riga {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
  margin: 0;
  font-size: 0.875rem;
  color: var(--testo-medio);
}

.posizione-autista__riga--attiva {
  color: var(--successo);
  font-weight: 600;
}

.posizione-autista__chiedi {
  display: flex;
  gap: var(--sp-3);
  padding: var(--sp-4);
  border: 1px solid var(--info-bordo);
  border-radius: var(--raggio);
  background: var(--info-fondo);
}

.posizione-autista__chiedi > .bi {
  font-size: 1.5rem;
  color: var(--info);
}

.posizione-autista__chiedi p {
  margin: var(--sp-1) 0 var(--sp-3);
  font-size: 0.875rem;
  color: var(--testo-medio);
}

.posizione-autista__azioni {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

/* --- La centralina nella coda della valorizzazione (12/10/2026) ---------- */
.centralina-riga {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.centralina-riga:hover {
  text-decoration: underline;
}

.centralina-riga--letta {
  color: var(--successo);
}

.centralina-riga--da-leggere {
  color: var(--testo-medio);
}

.centralina-riga__toglie {
  color: var(--errore);
  font-weight: 600;
}

.centralina-riga__sotto {
  white-space: nowrap;
}

/* Nella coda la scadenza della bonifica va a capo: con la colonna della
   centralina, a 1440 la tabella sbordava. */
.tabella--coda .pastiglia {
  white-space: normal;
}

/* --- Lo stato del motore nella scheda del veicolo (12/10/2026) ------------- */
.motore-scheda__testa {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
}

.motore-scheda__testa .pastiglia {
  margin-left: var(--sp-1);
}

.motore-scheda__icona {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--neutro-fondo);
  color: var(--neutro);
}

.motore-scheda__icona--letta {
  background: var(--successo-fondo);
  color: var(--successo);
}

.motore-scheda__esito {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  margin: var(--sp-3) 0 var(--sp-2);
  font-weight: 600;
}

.motore-scheda__codici {
  margin: 0 0 var(--sp-2);
  padding-left: 1.1rem;
  font-size: 0.875rem;
}

.motore-scheda__codici li + li {
  margin-top: 0.15rem;
}

.motore-scheda__ai,
.motore-scheda__nota {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
  margin: var(--sp-3) 0 0;
  font-size: 0.875rem;
}

.motore-scheda__ai .bi-stars {
  color: var(--info);
}

.motore-scheda__proposta {
  margin: var(--sp-3) 0 0;
  font-size: 0.8125rem;
  color: var(--testo-medio);
}

.vuoto-sezione--motore {
  margin-bottom: var(--sp-3);
}

.motore-scheda__azione {
  justify-self: start;
  align-self: flex-start;
  margin-top: var(--sp-3);
}

.veicolo-scelto__azioni {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

/* --- «Stato del motore»: il veicolo scelto, e da dove si sceglie ---------- */
.veicolo-scelto {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3) var(--sp-4);
}

.veicolo-scelto__testo {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

.veicolo-scelto .btn {
  margin-left: auto;
}

.scelte-veicolo {
  list-style: none;
  margin: var(--sp-2) 0 var(--sp-4);
  padding: 0;
  display: grid;
  gap: var(--sp-2);
}

.scelta-veicolo {
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--bordo);
  border-radius: 10px;
  background: var(--superficie);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.scelta-veicolo:hover {
  border-color: var(--bordo-forte);
}

.scelta-veicolo:focus-visible {
  outline: 2px solid var(--accento);
  outline-offset: 2px;
}

.scelta-veicolo__testo {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
  flex: 1;
}

.scelta-veicolo > .bi-chevron-right {
  color: var(--testo-tenue);
}

.postazione__pagina-veicolo {
  font-family: var(--font-mono);
  font-weight: 500;
}

/* ==========================================================================
   Schermi per l'officina e codici da stampare (12/10/2026)
   --------------------------------------------------------------------------
   Ogni fase con i suoi posti: il codice da scansionare per lavorarci e lo
   schermo da aprire sul televisore. I codici si stampano su A4 e si
   ritagliano: il tratteggio e' la linea di taglio.
   ========================================================================== */

/* Due fasi per riga in ufficio: ogni pistola ha le sue righe, e su una
   colonna stretta andrebbero tutte a capo. */
.schermi-fasi {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 440px), 1fr));
  gap: var(--sp-4);
}

.schermi-fase .scheda__testa {
  align-items: flex-start;
  justify-content: space-between;
}

.schermi-posti {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0 24px 20px;
  list-style: none;
}

.schermi-posti__voce {
  display: grid;
  gap: 8px;
  padding: 12px 14px;
  border-radius: var(--raggio);
  background: var(--superficie-alt);
  box-shadow: var(--anello);
}

/* Lo schermo gia' aperto su un dispositivo: non si riapre (14/10/2026). */
.schermi-posti__aperto {
  border: 0;
  background: var(--successo-fondo);
  color: var(--successo);
  cursor: default;
}

.schermi-posti__testa {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
}

.schermi-posti__testo {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 10px;
  min-width: 0;
}

.schermi-posti__nome {
  font-weight: 700;
}

/* La pistola del posto, per chi segue la produzione (12/10/2026): adesso,
   in una riga con il pallino del colore; sotto oggi, chi, le scansioni e lo
   schermo. Il colore non e' mai da solo: accanto c'e' la parola. */
.schermi-posti__adesso {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0;
  font-weight: 600;
  color: var(--testo-forte);
}

.schermi-posti__adesso .bi {
  flex: none;
  font-size: 0.6rem;
  transform: translateY(-1px);
}

.schermi-posti__adesso--normale .bi { color: var(--successo-pieno); }
.schermi-posti__adesso--attenzione .bi { color: var(--attenzione-pieno); }
.schermi-posti__adesso--critico .bi { color: var(--errore-pieno); }
.schermi-posti__adesso--pausa .bi { color: var(--neutro-pieno); }
.schermi-posti__adesso--badge .bi { color: var(--info-pieno); }

.schermi-posti__adesso--libero {
  font-weight: 500;
  color: var(--testo-tenue);
}

.schermi-posti__adesso--libero .bi { color: var(--bordo-forte); }

.schermi-posti__righe {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 4px 12px;
  margin: 0;
  font-size: 0.8125rem;
}

.schermi-posti__righe dt {
  font-weight: 500;
  color: var(--testo-tenue);
}

.schermi-posti__righe dd {
  margin: 0;
  color: var(--testo-medio);
}

/* Un codice letto male si legge com'e' arrivato: e' cosi' che si vede una
   pistola impostata con la tastiera sbagliata. */
.schermi-posti__errore {
  font-weight: 600;
  color: var(--errore);
}

.schermi-posti__schermo .bi {
  margin-right: 2px;
  font-size: 0.55rem;
  color: var(--bordo-forte);
}

.schermi-posti__schermo--acceso .bi { color: var(--successo-pieno); }

.schermi-posti__schermo--spento {
  color: var(--attenzione);
}

.schermi-posti__schermo--spento .bi { color: var(--attenzione-pieno); }

.schermi-testa {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: flex-end;
  gap: 4px 16px;
}

/* Un codice spezzato a meta' si legge male e si ricopia peggio. */
.schermi-posti__codice,
.schermi-fase .scheda__sottotitolo .mono {
  font-size: 0.8125rem;
  white-space: nowrap;
  color: var(--testo-medio);
}

/* Le pistole del ricevitore che stanno al posto, e i due bottoni del posto:
   il foglio e lo schermo (15/10/2026). */
.schermi-posti__pistole {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
}

.schermi-posti__pistole .mono {
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--petrolio-50);
  font-size: 0.75rem;
  color: var(--primario);
  white-space: nowrap;
}

.schermi-posti__bottoni {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* --- Le pistole e il ricevitore (15/10/2026) --- */
/* I due bottoni, con il bordo, a destra nella testa del riquadro
   (15/10/2026). */
.pistole__azioni {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  margin-left: auto;
}

.pistole__tabella {
  margin-top: 12px;
}

.pistole__modulo {
  display: grid;
  gap: 12px;
  margin: 14px 0 4px;
  padding: 16px;
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
  background: var(--superficie-alt);
}

.pistole__modulo-titolo {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--testo-forte);
}

.pistole__campi {
  display: grid;
  grid-template-columns: minmax(120px, 0.6fr) minmax(220px, 1.4fr) minmax(160px, 1fr) auto;
  gap: 12px;
  align-items: start;
}

@media (max-width: 900px) {
  .pistole__campi {
    grid-template-columns: minmax(0, 1fr);
  }
}

.pistole__campi .campo {
  margin: 0;
}

.pistole__attiva {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  padding-top: 26px;
  font-weight: 600;
}

/* La casella accanto alla sua parola (16/10/2026): la regola dei campi
   allargava anche la casella a tutta la colonna. */
.pistole__attiva input[type="checkbox"] {
  width: auto;
  flex: 0 0 auto;
  margin: 0;
  padding: 0;
}

.pistole__bottoni {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.pistole__togli {
  margin-left: auto;
  color: var(--errore-pieno);
}

/* Dei codici da pistole sconosciute qui c'e' solo quanti sono, con il link
   a «Lavorazioni e anomalie» (15/10/2026), accanto al numero delle pistole
   attive: si vedono anche con le righe chiuse. */
.pistole__sconosciute {
  font-weight: 600;
  white-space: nowrap;
}

.codici-officina {
  display: grid;
  gap: 24px;
  max-width: 190mm;
  margin: 0 auto;
  padding: 24px 16px 48px;
}

.codici-officina__titolo {
  margin: 0 0 10px;
  font-size: 1rem;
  color: var(--testo-forte);
}

.codici-officina__griglia {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6mm;
}

.codice-carta {
  display: grid;
  justify-items: center;
  gap: 2mm;
  padding: 5mm;
  border: 1px dashed var(--ardesia-400);
  border-radius: 3mm;
  background: #fff;
  text-align: center;
  break-inside: avoid;
}

.codice-carta__sopra {
  font-size: 9pt;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--testo-medio);
}

.codice-carta__titolo {
  font-size: 16pt;
  font-weight: 700;
  color: var(--ardesia-900);
}

.codice-carta__barre .codice-barre {
  display: block;
  width: 70mm;
  max-width: 100%;
  height: 16mm;
}

.codice-carta__codice {
  font-family: var(--font-mono);
  font-size: 11pt;
  letter-spacing: 0.08em;
  color: var(--ardesia-900);
}

@media (max-width: 600px) {
  .codici-officina__griglia {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media print {
  .codici-officina {
    max-width: none;
    padding: 0;
  }
}

/* ==========================================================================
   Le mie richieste: il commerciale acquisti dal telefono (12/10/2026)
   --------------------------------------------------------------------------
   Come le missioni dell'autista: la richiesta nuova in cima, a tutta
   larghezza, e sotto le sue richieste in tre viste — in corso, bozze,
   storico — una scheda ciascuna, con lo stato a parole.
   ========================================================================== */

.viste-autista__barra--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.mie-richieste__nuova {
  display: flex;
  width: 100%;
  justify-content: center;
  margin-bottom: var(--sp-4);
}

.mie-richieste__cerca {
  margin: 0 0 var(--sp-3);
}

.mie-richieste__elenco {
  display: grid;
  gap: var(--sp-3);
}

.mia-richiesta {
  display: grid;
  gap: 6px;
  padding: 14px 16px;
  border-radius: var(--raggio-l);
  background: var(--superficie);
  box-shadow: var(--ombra-scheda);
}

.mia-richiesta--nuova {
  box-shadow: 0 0 0 2px var(--accento), var(--ombra-scheda);
}

.mia-richiesta__testa {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.mia-richiesta__veicolo {
  font-weight: 600;
  color: var(--testo);
}

.mia-richiesta__chi,
.mia-richiesta__quando {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-size: 0.875rem;
  color: var(--testo-medio);
}

.mia-richiesta__piede {
  font-size: 0.75rem;
  color: var(--testo-tenue);
}

.mia-richiesta__azioni {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}

/* Il ricevitore delle pistole in «Schermi per l'officina» (15/10/2026): lo
   stato e, per l'amministratore, quale schermo riceve. Sul posto, il segno. */
.pistole__ricevitore {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 24px;
}

.pistole__scelta {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 0.875rem;
  color: var(--testo-medio);
}

.pistole__scelta select {
  min-height: 36px;
  padding: 4px 10px;
  border: 1px solid var(--bordo);
  border-radius: var(--raggio-s);
  background: var(--superficie);
  font: inherit;
  color: var(--testo-forte);
}

.schermi-posti__ricevitore {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--successo-fondo);
  color: var(--successo-pieno);
  font-size: 0.75rem;
  font-weight: 700;
  white-space: nowrap;
}

/* Il ricevitore spento: rosso, come lo schermo scollegato (16/10/2026). */
.schermi-posti__ricevitore.schermi-posti__ricevitore--spento {
  background: var(--errore-fondo);
  box-shadow: inset 0 0 0 1px var(--errore-bordo);
  color: var(--errore);
}

/* ==========================================================================
   Attività e fasi (15/10/2026)
   --------------------------------------------------------------------------
   Le fasi per ramo, con lo stato e il tempo standard, e la finestra stretta
   del tempo standard.
   ========================================================================== */

.finestra--stretta {
  width: min(460px, calc(100vw - 32px));
}

/* Le righe dei rami: Grigio luce, che si stacchino dalle righe bianche; il
   testo parte dove partono le celle. */
.fasi-catalogo__ramo th {
  padding: 9px var(--sp-3) 8px;
  background: var(--ardesia-100);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-align: left;
  text-transform: uppercase;
  color: var(--ardesia-700);
}

.fasi-catalogo__tempo {
  font-family: var(--font-titoli);
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
  color: var(--testo-forte);
}

.fasi-catalogo__spenta td,
.fasi-catalogo__spenta .tabella__principale,
.fasi-catalogo__spenta .fasi-catalogo__tempo {
  color: var(--testo-tenue);
}

.finestra-standard__media {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  margin: 0;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--superficie-alt);
  font-size: 0.8125rem;
  color: var(--testo-medio);
}

/* ==========================================================================
   Operatori e pistole (15/10/2026)
   ========================================================================== */

/* Chi non è più in servizio, e le pistole spente: restano, in tono basso. */
.operatori__fuori td {
  color: var(--testo-tenue);
}

.operatori__fuori .tabella__principale {
  color: var(--testo-medio);
}

/* Un bottone a destra nella testa di una scheda. */
.scheda__testa .scheda__azione-destra {
  margin-left: auto;
}

/* ==========================================================================
   Officina adesso: avvisi in alto, operatori in piccolo, registro di tutte
   le fasi (15/10/2026)
   ========================================================================== */

.officina-avvisi {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: -6px 0 18px;
}

.officina-avvisi[hidden] {
  display: none;
}

.officina-avviso {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 8px;
  min-height: 36px;
  padding: 6px 12px;
  border: 0;
  border-radius: 10px;
  background: var(--attenzione-velo);
  box-shadow: inset 0 0 0 1px var(--attenzione-bordo);
  font: inherit;
  font-size: 0.8125rem;
  line-height: 1.35;
  color: var(--testo);
  text-align: left;
  text-decoration: none;
}

a.officina-avviso:hover,
button.officina-avviso:hover {
  box-shadow: inset 0 0 0 1px var(--attenzione-pieno);
  color: var(--testo);
}

button.officina-avviso {
  cursor: pointer;
}

.officina-avviso--errore {
  background: var(--errore-fondo);
  box-shadow: inset 0 0 0 1px var(--errore-bordo);
}

a.officina-avviso--errore:hover {
  box-shadow: inset 0 0 0 1px var(--errore-pieno);
}

.officina-avviso__icona {
  color: var(--attenzione-pieno);
}

.officina-avviso--errore .officina-avviso__icona {
  color: var(--errore-pieno);
}

.officina-avviso strong {
  font-weight: 600;
}

.officina-avviso__testo {
  color: var(--testo-medio);
}

.officina-avviso__vai {
  font-weight: 600;
  color: var(--petrolio-700);
  white-space: nowrap;
}

/* Gli operatori adesso, in una riga sotto i posti. */
.operatori-adesso {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--bordo-tenue);
}

.operatori-adesso[hidden] {
  display: none;
}

.operatori-adesso__titolo {
  margin-right: 4px;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--testo-tenue);
}

.operatore-adesso {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--superficie-alt);
  box-shadow: inset 0 0 0 1px var(--bordo-tenue);
  font-size: 0.78125rem;
  color: var(--testo-medio);
  white-space: nowrap;
}

.operatore-adesso strong {
  font-weight: 600;
  color: var(--testo);
}

.operatore-adesso__cosa {
  overflow: hidden;
  text-overflow: ellipsis;
}

.operatore-adesso__punto {
  width: 7px;
  height: 7px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--ardesia-300);
}

.operatore-adesso--al-lavoro .operatore-adesso__punto {
  background: var(--successo-pieno);
}

.operatori-adesso__vai {
  margin-left: auto;
  font-size: 0.8125rem;
  font-weight: 600;
  white-space: nowrap;
}

/* Il registro del giorno, a tutta larghezza. */
.registro-giorno {
  overflow: hidden;
}

.registro-giorno__testa {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 12px 16px;
  padding: 22px 24px 12px;
}

.registro-giorno__filtri {
  margin: 0;
  padding: 0 24px 14px;
}

.registro-giorno__filtri:empty {
  display: none;
}

.registro-giorno__vivo {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--successo-pieno);
}

.registro-giorno__riga--viva td {
  background: var(--successo-fondo);
}

.registro-giorno__durata--vicino strong {
  color: var(--attenzione);
}

.registro-giorno__durata--oltre strong {
  color: var(--errore);
}

.registro-giorno .registro-fase__periodo {
  margin: 0;
  border-radius: 0;
  border-top: 1px solid var(--bordo-tenue);
  padding: 14px 24px;
}

.registro-giorno .registro-fase__vuoto {
  padding: 4px 24px 24px;
}

/* ==========================================================================
   Cabina di produzione (rifatta il 15/10/2026)
   --------------------------------------------------------------------------
   Il periodo in una riga, cinque numeri, le lavorazioni al giorno per ramo,
   il tempo in reparto, le fasi contro il loro standard. I due rami sono il
   Blu Materia e il suo gradino 400; lo standard è un filetto scuro, la media
   oltre lo standard l'ambra dell'attenzione, con la sua freccia.
   ========================================================================== */

.cabina-filtri {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  margin-bottom: 18px;
}

.cabina-filtri__data {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 0.8125rem;
  color: var(--testo-medio);
}

.cabina-filtri__data input {
  height: 38px;
  padding: 0 10px;
  border: 1px solid var(--bordo-forte);
  border-radius: var(--raggio-s);
  background: var(--superficie);
  color: var(--testo);
  font: inherit;
}

.cabina-filtri__nota {
  margin-left: auto;
  font-size: 0.8125rem;
  color: var(--testo-tenue);
}

#cabina {
  transition: opacity var(--transizione);
}

#cabina.cabina--ricarica {
  opacity: 0.55;
}

/* I cinque numeri. */
.cabina-indici {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

.cabina-indice {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  padding: 16px 18px 14px;
  border-radius: var(--raggio-l);
  background: var(--vetro);
  box-shadow: var(--ombra-scheda), inset 0 0 0 1px var(--vetro-bordo);
}

.cabina-indice__nome {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--testo-tenue);
}

.cabina-indice__valore {
  font-family: var(--font-titoli);
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--testo-forte);
}

.cabina-indice--primo .cabina-indice__valore {
  color: var(--marca-blu-700);
}

.cabina-indice--attenzione .cabina-indice__valore {
  color: var(--attenzione);
}

.cabina-indice--bene .cabina-indice__valore {
  color: var(--successo);
}

.cabina-indice__nota {
  font-size: 0.78125rem;
  line-height: 1.4;
  color: var(--testo-medio);
}

.cabina-indice__scintilla {
  margin-top: auto;
  padding-top: 6px;
}

/* Due grafici affiancati, poi le fasi a tutta larghezza. */
.cabina-griglia {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
  margin-bottom: 16px;
}

.cabina-scheda {
  min-width: 0;
}

#cabina > .cabina-scheda {
  margin-bottom: 16px;
}

.cabina-scheda__testa {
  padding: 20px 22px 8px;
}

.cabina-scheda__testa--riga {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 8px 16px;
}

.cabina-scheda__titolo {
  margin: 0;
  font-family: var(--font-titoli);
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--testo-forte);
}

.cabina-scheda__sotto {
  margin: 2px 0 0;
  font-size: 0.8125rem;
  color: var(--testo-tenue);
}

.cabina-scheda__vuoto {
  margin: 0;
  padding: 8px 22px 22px;
}

.cabina-grafico {
  position: relative;
  height: 260px;
  padding: 8px 18px 4px 12px;
}

.cabina-grafico--vuoto {
  height: auto;
  padding: 18px 22px;
}

/* I rami sotto il grafico: il colore, il nome e i loro numeri. */
.cabina-rami {
  display: grid;
  gap: 8px;
  padding: 12px 22px 14px;
  border-top: 1px solid var(--bordo-tenue);
}

.cabina-ramo {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 4px 16px;
  font-size: 0.8125rem;
}

.cabina-ramo__nome {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  color: var(--testo);
}

.cabina-ramo__campione {
  display: inline-block;
  width: 10px;
  height: 10px;
  flex-shrink: 0;
  border-radius: 3px;
}

.cabina-ramo__numeri {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  color: var(--testo-medio);
}

.cabina-ramo__numeri strong {
  font-weight: 600;
  color: var(--testo);
}

.cabina-numeri {
  padding: 0 22px 14px;
}

.cabina-numeri > summary {
  cursor: pointer;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--petrolio-700);
}

.cabina-numeri .tabella-guscio {
  margin-top: 10px;
}

.cabina-numeri__tabella {
  font-size: 0.8125rem;
}

/* Il tempo in reparto: la presenza divisa in una barra, e i due fattori. */
.cabina-tempo {
  padding: 4px 22px 0;
}

.cabina-tempo__totale {
  font-size: 0.8125rem;
  color: var(--testo-medio);
}

.cabina-tempo__totale strong {
  font-family: var(--font-titoli);
  font-size: 1.25rem;
  color: var(--testo-forte);
}

.cabina-tempo__barra {
  display: flex;
  gap: 2px;
  height: 14px;
  margin: 10px 0 12px;
  border-radius: 7px;
  overflow: hidden;
}

.cabina-tempo__barra > span {
  min-width: 3px;
}

.cabina-tempo__legenda {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cabina-tempo__legenda li {
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr) auto 44px;
  align-items: center;
  gap: 8px;
  font-size: 0.8125rem;
  color: var(--testo-medio);
}

.cabina-tempo__legenda strong {
  font-weight: 600;
  color: var(--testo);
  font-variant-numeric: tabular-nums;
}

.cabina-tempo__quota {
  text-align: right;
  color: var(--testo-tenue);
  font-variant-numeric: tabular-nums;
}

.cabina-misure {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 16px;
  padding: 14px 22px 0;
  border-top: 1px solid var(--bordo-tenue);
}

.cabina-misura__testa {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  font-size: 0.8125rem;
  color: var(--testo-medio);
}

.cabina-misura__testa strong {
  font-family: var(--font-titoli);
  font-size: 1rem;
  color: var(--testo-forte);
}

.cabina-misura__barra {
  height: 8px;
  margin-top: 6px;
  border-radius: 4px;
  overflow: hidden;
  background: var(--marca-blu-100);
}

.cabina-misura__barra > span {
  display: block;
  height: 100%;
  border-radius: 4px;
  background: var(--marca-blu-700);
}

.cabina-misura__nota {
  margin: 6px 0 0;
  font-size: 0.75rem;
  line-height: 1.4;
  color: var(--testo-tenue);
}

.cabina-tempo__nota {
  margin: 0;
  padding: 12px 22px 20px;
  font-size: 0.78125rem;
  line-height: 1.5;
  color: var(--testo-medio);
}

/* Le fasi contro il loro standard: lo standard è sempre allo stesso punto. */
.cabina-legenda-fasi {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  font-size: 0.75rem;
  color: var(--testo-tenue);
}

.cabina-legenda-fasi > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.cabina-legenda-fasi__barra {
  display: inline-block;
  width: 16px;
  height: 8px;
  border-radius: 4px;
  background: var(--marca-blu-500);
}

.cabina-legenda-fasi__barra--oltre {
  background: var(--attenzione-pieno);
}

.cabina-legenda-fasi__standard {
  display: inline-block;
  width: 2px;
  height: 14px;
  border-radius: 1px;
  background: var(--testo-forte);
}

.cabina-fasi {
  padding: 2px 22px 12px;
}

.cabina-fase {
  display: grid;
  grid-template-columns: minmax(150px, 1fr) minmax(0, 2.4fr) minmax(140px, 1fr) 96px;
  align-items: center;
  gap: 10px 22px;
  padding: 14px 0;
  border-top: 1px solid var(--bordo-tenue);
}

.cabina-fase:first-child {
  border-top: 0;
}

.cabina-fase--vuota {
  opacity: 0.7;
}

.cabina-fase__nome {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  min-width: 0;
}

.cabina-fase__nome strong {
  font-weight: 600;
  color: var(--testo);
}

.cabina-fase__nome > span:last-child {
  font-size: 0.75rem;
  color: var(--testo-tenue);
}

.cabina-fase__traccia {
  position: relative;
  height: 12px;
  border-radius: 6px;
  background: var(--ardesia-100);
}

.cabina-fase__media {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  border-radius: 6px;
  background: var(--marca-blu-500);
  transform-origin: left;
  animation: cresci 700ms var(--curva) backwards;
}

.cabina-fase__media--oltre {
  background: var(--attenzione-pieno);
}

.cabina-fase__standard {
  position: absolute;
  top: -4px;
  bottom: -4px;
  width: 2px;
  margin-left: -1px;
  border-radius: 1px;
  background: var(--testo-forte);
}

.cabina-fase__numeri {
  margin-top: 7px;
  font-size: 0.8125rem;
  color: var(--testo-medio);
}

.cabina-fase__numeri strong {
  font-weight: 600;
  color: var(--testo);
  font-variant-numeric: tabular-nums;
}

.cabina-delta {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--ardesia-100);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--testo-medio);
  white-space: nowrap;
}

.cabina-delta--sotto {
  background: var(--successo-fondo);
  color: var(--successo);
}

.cabina-delta--oltre {
  background: var(--attenzione-fondo);
  color: var(--attenzione);
}

.cabina-fase__entro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 4px 10px;
}

.cabina-fase__entro .cabina-misura__barra {
  margin-top: 0;
}

.cabina-fase__entro strong {
  font-weight: 600;
  color: var(--testo);
  font-variant-numeric: tabular-nums;
}

.cabina-fase__etichetta {
  grid-column: 1 / -1;
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--testo-tenue);
}

.cabina-fase__costo {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}

.cabina-fase__costo strong {
  font-family: var(--font-titoli);
  font-weight: 700;
  color: var(--testo);
  font-variant-numeric: tabular-nums;
}

.cabina-fase__costo strong.cabina-fase__costo--oltre {
  color: var(--attenzione);
}

/* Come si calcolano: in fondo, chiuso, una finestra di spiegazione come le
   altre (`scheda-info`). Dal 16/10/2026 un numero per riga: il nome a
   sinistra, cosa conta a destra; su schermo stretto uno sotto l'altro. */
.cabina-come__corpo {
  font-size: 0.84375rem;
  line-height: 1.55;
  color: var(--testo-medio);
}

.cabina-come__premessa {
  margin: 0 0 var(--sp-3);
}

.cabina-come__titolo {
  margin: var(--sp-4) 0 var(--sp-2);
  font-family: var(--font-titoli);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--testo-titoli);
}

.cabina-come__voci {
  margin: 0;
}

.cabina-come__voce {
  display: grid;
  grid-template-columns: minmax(150px, 190px) 1fr;
  gap: 4px 16px;
  padding: 7px 0;
  border-top: 1px solid rgba(13, 58, 92, 0.07);
}

.cabina-come__voce dt {
  font-weight: 600;
  color: var(--testo);
}

.cabina-come__voce dd {
  margin: 0;
}

@media (max-width: 640px) {
  .cabina-come__voce {
    grid-template-columns: 1fr;
  }
}

/* I cinque numeri restano in una riga fin che si può, più piccoli; poi
   due per riga, con l'efficienza da sola in cima. */
@media (max-width: 1280px) {
  .cabina-indice {
    padding: 14px 14px 12px;
  }

  .cabina-indice__valore {
    font-size: 1.5rem;
  }
}

@media (max-width: 1000px) {
  .cabina-indici {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cabina-indice--primo {
    grid-column: 1 / -1;
  }
}

@media (max-width: 1100px) {
  .cabina-griglia {
    grid-template-columns: minmax(0, 1fr);
  }

  .cabina-fase {
    grid-template-columns: minmax(130px, 1fr) minmax(0, 2fr) 96px;
  }

  .cabina-fase__entro {
    grid-column: 2;
  }
}

@media (max-width: 720px) {
  .cabina-filtri__nota {
    margin-left: 0;
  }

  .cabina-fase {
    grid-template-columns: minmax(0, 1fr);
  }

  .cabina-fase__entro {
    grid-column: auto;
  }

  .cabina-fase__costo {
    flex-direction: row;
    justify-content: space-between;
    align-items: baseline;
  }

  .cabina-misure {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  .cabina-fase__media {
    animation: none;
  }
}

/* ==========================================================================
   Il menu ridotto sul computer (15/10/2026)
   --------------------------------------------------------------------------
   In fondo al menu, sopra chi è entrato, «Riduci il menu» lo stringe a una
   colonna di icone: il simbolo di Giorgi al posto del logo, le voci di tutte
   le sezioni divise da un filetto, il numero delle voci in un tassello
   sull'angolo dell'icona. Il nome di una voce compare in un fumetto accanto,
   passandoci sopra o arrivandoci con il tasto Tab (app.js). Sul telefono il
   menu resta il cassetto di sempre. Le transizioni partono dal secondo
   fotogramma (`barra-animata`): aprendo una pagina con il menu ridotto non
   lo si vede stringersi.
   ========================================================================== */

:root {
  --larghezza-barra-ridotta: 72px;
}

html:not(.barra-animata) .barra,
html:not(.barra-animata) .principale {
  transition: none;
}

/* Il bottone che riduce e allarga: una voce del menu, più tenue. */
.barra__riduci {
  display: flex;
  align-items: center;
  gap: 11px;
  margin: 0 14px 8px;
  padding: 8px 10px;
  border: 0;
  border-radius: var(--raggio-s);
  background: none;
  font-family: inherit;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--testo-tenue);
  text-align: left;
  cursor: pointer;
  flex-shrink: 0;
  transition: background var(--transizione), color var(--transizione);
}

.barra__riduci:hover {
  background: rgba(208, 233, 246, 0.6);
  color: var(--testo-forte);
}

.barra__riduci:focus-visible {
  outline: 2px solid var(--petrolio-500);
  outline-offset: -2px;
}

.barra__riduci i {
  width: 1.125rem;
  font-size: 1rem;
  text-align: center;
  flex-shrink: 0;
}

/* Il fumetto con il nome della voce: lo stesso blu profondo dei
   suggerimenti dei grafici. */
.barra-fumetto {
  position: fixed;
  z-index: 1060;
  transform: translateY(-50%);
  padding: 6px 10px;
  border-radius: 8px;
  background: var(--marca-blu-800);
  box-shadow: var(--ombra);
  color: #f7fcff;
  font-size: 0.8125rem;
  font-weight: 500;
  white-space: nowrap;
  pointer-events: none;
}

.barra-fumetto::before {
  content: "";
  position: absolute;
  left: -4px;
  top: 50%;
  width: 8px;
  height: 8px;
  border-radius: 1px;
  background: inherit;
  transform: translateY(-50%) rotate(45deg);
}

.barra-fumetto[hidden] {
  display: none;
}

@media (min-width: 1025px) {
  html.barra-animata .barra {
    transition: width var(--transizione), transform var(--transizione);
  }

  html.barra-animata .principale {
    transition: margin-left var(--transizione);
  }

  html.barra-chiusa .barra {
    width: var(--larghezza-barra-ridotta);
  }

  html.barra-chiusa .principale {
    margin-left: calc(var(--larghezza-barra-ridotta) + 2 * var(--margine-barra));
  }

  /* Il simbolo al posto del logo. */
  html.barra-chiusa .barra__marchio {
    justify-content: center;
    padding: 20px 0 14px;
  }

  /* Il simbolo pieno, in Blu Materia: lo stesso dell'icona del sito. */
  html.barra-chiusa .barra__logo {
    flex: 0 0 38px;
    height: 38px;
    background-image: url("../img/favicon.svg");
    background-position: center;
  }

  /* Le voci di tutte le sezioni, una sotto l'altra, divise da un filetto:
     ridotto, il menu non ha titoli da aprire. */
  html.barra-chiusa .barra__nav {
    padding: 4px 12px 16px;
  }

  html.barra-chiusa .barra__sezione,
  html.barra-chiusa .barra__sottogruppo {
    display: none;
  }

  /* Bootstrap nasconde `[hidden]` con !important: qui serve lo stesso peso. */
  html.barra-chiusa .barra__voci[hidden] {
    display: block !important;
  }

  html.barra-chiusa .barra__gruppo {
    margin-top: 6px;
    padding-top: 8px;
    border-top: 1px solid rgba(13, 58, 92, 0.09);
  }

  html.barra-chiusa .barra__voci {
    padding-bottom: 0;
  }

  html.barra-chiusa .barra__voce,
  html.barra-chiusa .barra__riduci {
    justify-content: center;
    gap: 0;
    padding: 10px 0;
  }

  html.barra-chiusa .barra__voce--figlia,
  html.barra-chiusa .barra__voce--gruppo {
    margin-left: 0;
  }

  html.barra-chiusa .barra__voce i {
    font-size: 1.0625rem;
  }

  html.barra-chiusa .barra__voce--attiva::before {
    left: -12px;
  }

  /* Il nome resta per chi legge lo schermo con la voce: si toglie solo alla
     vista. */
  html.barra-chiusa .barra__voce .barra__etichetta,
  html.barra-chiusa .barra__riduci .barra__etichetta,
  html.barra-chiusa .barra__utente {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  /* Il numero della voce: un tassello sull'angolo dell'icona; «in corso»
     resta il suo punto. */
  html.barra-chiusa .barra__conta {
    position: absolute;
    top: 2px;
    right: 4px;
    min-width: 16px;
    padding: 0 4px;
    font-size: 0.625rem;
    line-height: 15px;
  }

  html.barra-chiusa .barra__conta--in-corso {
    min-width: 0;
    padding: 4px;
    font-size: 0;
    line-height: 0;
    gap: 0;
  }

  html.barra-chiusa .barra__riduci {
    margin: 0 12px 8px;
  }

  html.barra-chiusa .barra__piede {
    flex-direction: column;
    gap: 6px;
    padding: 12px 0 14px;
  }

  /* La pagina al centro dello spazio che resta, e la testata allineata alla
     pagina: con il menu ridotto il margine in più non sta tutto a destra. */
  .contenuto {
    margin-inline: auto;
  }

  .testata {
    padding-inline: max(32px, calc((100% - 1600px) / 2 + 32px));
  }
}

@media (max-width: 1024px) {
  .barra__riduci {
    display: none;
  }
}