:root {
  /* ⚠️ **Una tavolozza sola.** Si era arrivati a 88 colori scritti a mano, con
     dieci sfumature quasi identiche di grigio-azzurro e **due blu diversi**
     per la stessa cosa (#145a8a e var(--primary)). Chi aggiunge una pagina usa queste
     variabili: non si inventa un colore nuovo, o fra sei mesi si ricomincia. */
  --bg: #f4f6f8; --card: #ffffff; --ink: #1e2a35; --muted: #6b7a89;
  --line: #dde4ea; --primary: #145a8a; --primary-ink: #ffffff;
  --ok: #1e7d4f; --warn: #b26a00; --info: #145a8a; --neutral: #5a6b7a;

  /* i grigi-azzurri delle tabelle, dal più chiaro al più carico */
  /* ⚠️ Qui ci vogliono i colori VERI, non `var()` del nome che si sta
     definendo. Dal 7 agosto (versione ...-17, quella che uniformava la
     tavolozza) queste sei righe dicevano `--sfondo-testa: var(--sfondo-testa)`
     e così via: una variabile che rimanda a sé stessa **non vale niente**, e
     il browser la butta. Risultato: intestazioni, righe del totale, righe
     aperte e righe sotto il mouse erano rimaste **senza sfondo** su tutto il
     gestionale, e nessuno se n'era accorto perché il difetto non dà errore,
     toglie solo il colore. Recuperati dalla versione precedente in cronologia. */
  --sfondo-testa:  #fafbfc;   /* intestazione di una tabella */
  --sfondo-dentro: #f7fafd;   /* dentro una riga aperta */
  --sfondo-totale: #f2f6fa;   /* riga del totale */
  --sfondo-riga:   #f0f5fa;   /* riga aperta o sotto il mouse */
  --linea-chiara:  #eef2f6;   /* separatore leggero */
  --testo-tenue:   #9aa6b2;   /* scritte di servizio, es. il numero di versione */

  /* ═══════════════ Quanto è larga la pagina ═══════════════
     ⚠️ **Si adatta allo schermo.** Era fissa a 1180 px: su un monitor da 32
     pollici il gestionale restava una colonnina in mezzo e le tabelle larghe
     — spedizioni, carichi, riepilogo — si dovevano far scorrere di lato con la
     barra in fondo, **pur avendo mezzo schermo vuoto ai due lati**. Segnalato
     da Remo. Da 1400 px in su la pagina prende quello che c'è. */
  --larghezza-pagina: 1180px;
}
@media (min-width: 1400px) {
  /* il tetto serve a non far diventare una riga di tabella lunga un metro su
     uno schermo ultrapanoramico: oltre, l'occhio perde la riga per strada */
  :root { --larghezza-pagina: 2400px; }
}
* { box-sizing: border-box; }
body { margin: 0; font-family: "Segoe UI", system-ui, sans-serif; background: var(--bg); color: var(--ink); }
main { max-width: var(--larghezza-pagina); margin: 1.2rem auto; padding: 0 1rem; }
a { color: var(--primary); text-decoration: none; }

.topbar { display: flex; align-items: center; gap: 1.2rem; background: var(--card);
  border-bottom: 1px solid var(--line); padding: .6rem 1.2rem; position: sticky; top: 0; z-index: 5; }
.topbar .brand a { font-weight: 700; color: var(--ink); font-size: 1.05rem; }
.topbar nav { display: flex; gap: .9rem; }
.topbar .user { margin-left: auto; display: flex; align-items: center; gap: .5rem; }
.badge-user { background: var(--sfondo-riga); border-radius: 999px; padding: .2rem .7rem; font-size: .82rem; }

.btn { border: 1px solid var(--line); background: var(--card); color: var(--ink);
  border-radius: 7px; padding: .45rem .9rem; font-size: .9rem; cursor: pointer; }
.btn:hover { border-color: var(--primary); }
.btn-primary { background: var(--primary); border-color: var(--primary); color: var(--primary-ink); }
.btn-small { padding: .25rem .6rem; font-size: .8rem; }
.btn-ghost { background: transparent; }
.inline { display: inline; }

.flash { max-width: var(--larghezza-pagina); margin: .8rem auto 0; padding: 0 1rem; }
.flash p { background: #fff6df; border: 1px solid #ecd9a0; border-radius: 7px; padding: .5rem .8rem; }

.schede { display: flex; gap: .3rem; margin-bottom: .8rem; border-bottom: 1px solid var(--line); }
.schede .scheda { padding: .45rem .9rem; border-radius: 8px 8px 0 0; color: var(--muted);
  font-size: .9rem; border: 1px solid transparent; border-bottom: none; }
.schede .scheda:hover { background: var(--sfondo-riga); }
.schede .scheda.attiva { background: var(--card); border-color: var(--line); color: var(--ink);
  font-weight: 600; margin-bottom: -1px; }
.schede .conta { background: var(--sfondo-riga); border-radius: 999px; padding: .05rem .45rem;
  font-size: .8rem; margin-left: .25rem; }

.stats { display: flex; gap: .8rem; margin-bottom: 1rem; flex-wrap: wrap; }
.stat { flex: 1; min-width: 140px; background: var(--card); border: 1px solid var(--line);
  border-radius: 10px; padding: .7rem 1rem; color: var(--ink); }
.stat.active { border-color: var(--primary); box-shadow: 0 0 0 2px #145a8a22; }
.stat .num { display: block; font-size: 1.6rem; font-weight: 700; }
.stat .lbl { color: var(--muted); font-size: .82rem; }

.filters { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; margin-bottom: 1rem; }
.filters input[type=text], .filters select, .azioni select, .nota-form input, .login-box input, .login-box select {
  border: 1px solid var(--line); border-radius: 7px; padding: .45rem .6rem; font-size: .9rem; background: var(--card); }
.filters input[type=text] { min-width: 260px; }
.chk { font-size: .82rem; color: var(--muted); }

/* ═══ La barra di ricerca, uguale in tutte le pagine della Produzione ═══
   Sta sopra i filtri e prende tutta la larghezza: è la prima cosa che si
   cerca aprendo un elenco, e trovarla ogni volta in un punto diverso è un
   lavoro che non deve fare nessuno.
   ⚠️ Colori e misure dalle variabili di `:root`, non scritti a mano: è la
   regola che ha già evitato di arrivare a ottantotto colori diversi. */
.barra-ricerca { display: flex; gap: .5rem; align-items: center;
  flex-wrap: wrap; margin: .6rem 0 1rem; }
.barra-ricerca input[type=search] {
  flex: 1 1 320px; min-width: 0; background: var(--card);
  border: 1px solid var(--line); border-radius: 7px;
  padding: .5rem .7rem; font-size: .9rem; }
.barra-ricerca input[type=search]:focus {
  outline: none; border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(20, 90, 138, .12); }
.btn-chiaro { background: transparent; color: var(--muted);
  border: 1px solid var(--line); }
.esito-ricerca { margin: -.6rem 0 .9rem; }

/* Spedizioni: da quando non arriva un file dal lettore. Non è un allarme —
   è normale che non arrivi niente di notte — ma deve stare in vista, perché
   il silenzio di quel PC altrimenti non lo nota nessuno. */
.stato-lettore {
  display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
  margin: .6rem 0; padding: .45rem .7rem; font-size: .82rem;
  background: var(--sfondo-dentro); border: 1px solid var(--linea-chiara);
  border-radius: 8px;
}
/* appena si preme «Aggiorna» la riga si accende un momento: senza, premere il
   pulsante non dà nessun segno e sembra che non abbia funzionato */
.stato-lettore.evidenzia { border-color: var(--primary); animation: accendi 1.6s ease-out; }
@keyframes accendi { from { background: #fff6df; } to { background: var(--sfondo-dentro); } }

.tabella { width: 100%; border-collapse: collapse; background: var(--card);
  border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.tabella th { text-align: left; font-size: .8rem; text-transform: uppercase; letter-spacing: .03em;
  color: var(--muted); padding: .55rem .7rem; border-bottom: 1px solid var(--line); background: var(--sfondo-testa); }
.tabella td { padding: .55rem .7rem; border-bottom: 1px solid var(--line); font-size: .9rem; }
.riga { cursor: pointer; }
.riga:hover { background: var(--sfondo-riga); }
/* PEC in entrata mai aperte da chi sta guardando */
.riga.non-letta > td { font-weight: 600; }
.riga.non-letta > td:first-child { box-shadow: inset 3px 0 0 var(--primary); }
.ellipsis { max-width: 260px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mono { font-family: Consolas, monospace; font-size: .82rem; }
.center { text-align: center; }
.muted { color: var(--muted); }
.footer-note { margin-top: 1rem; font-size: .82rem; }

.tag { border-radius: 999px; padding: .15rem .6rem; font-size: .8rem; color: #fff; white-space: nowrap; }
/* ⚠️ `.tag` da solo è **testo bianco senza sfondo**, cioè invisibile: le
   varianti qui sotto non sono decorazione, sono quello che lo rende leggibile.
   `.tag-tipo` era usata nell'elenco delle macchine e non definita da nessuna
   parte — il tipo di ogni computer si «vedeva» bianco su bianco. 26/08/2026. */
.tag-tipo  { background: var(--neutral); }
.tag-linea { background: var(--primary); }
.tag-da_assegnare { background: var(--warn); }
.tag-assegnata { background: var(--info); }
.tag-in_lavorazione { background: var(--neutral); }
.tag-chiusa { background: var(--ok); }
.tag-anomalia { background: #c62828; }
/* tipi di ricevuta PEC: senza sfondo il testo bianco sparirebbe */
.tag-accettazione { background: #b07d00; }
.tag-consegna { background: #1d6b36; }
.tag-messaggio { background: var(--neutral); }
.tag-altro { background: var(--neutral); }

.verso { border-radius: 6px; padding: .1rem .45rem; font-size: .8rem; font-weight: 600;
  white-space: nowrap; display: inline-block; }
.verso-entrata { background: #e4f1e8; color: #1e7d4f; }
.verso-uscita { background: #fdeee0; color: #b26a00; }
.mezzo { background: var(--sfondo-riga); color: var(--muted); border-radius: 6px; padding: .05rem .4rem;
  font-size: .7rem; margin-left: .3rem; white-space: nowrap; }
.nowrap { white-space: nowrap; }
.voce-azione { font-weight: 600; }

.modulo { display: flex; flex-direction: column; gap: .9rem; margin-top: 1rem; }
.modulo label { display: flex; flex-direction: column; gap: .25rem; font-size: .82rem; color: var(--muted); }
.modulo input[type=text], .modulo input[type=datetime-local], .modulo select, .modulo input[type=file] {
  border: 1px solid var(--line); border-radius: 7px; padding: .45rem .6rem;
  font-size: .9rem; color: var(--ink); background: var(--card); }
.riga-campi { display: flex; gap: .9rem; flex-wrap: wrap; }
.riga-campi > label { flex: 1; min-width: 200px; }
.modulo .largo { width: 100%; }
.modulo .cresce { flex: 2; }

.card { background: var(--card); border: 1px solid var(--line); border-radius: 10px;
  padding: 1.2rem 1.4rem; margin-top: .8rem; }
.card-head { display: flex; align-items: center; gap: 1rem; }
.card h1 { margin: 0; font-size: 1.3rem; }
.card h2 { font-size: 1rem; margin: 1.3rem 0 .5rem; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.dettagli { display: grid; grid-template-columns: 130px 1fr; gap: .3rem .8rem; margin: .8rem 0 0; }
.dettagli dt { color: var(--muted); font-size: .82rem; }
.dettagli dd { margin: 0; }
.allegati, .eventi { list-style: none; padding: 0; margin: 0; }
.allegati li, .eventi li { padding: .3rem 0; border-bottom: 1px dashed var(--line); font-size: .9rem; }
.azioni { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; }
.nota-form { display: flex; gap: .5rem; margin-top: .6rem; }
.nota-form input { flex: 1; }

.form-riga { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; margin: .5rem 0 0; }
.form-riga input[type=text], .form-riga input[type=email], .form-riga input[type=password], .form-riga select,
.tabella input[type=password], .tabella select {
  border: 1px solid var(--line); border-radius: 7px; padding: .4rem .6rem; font-size: .9rem; background: var(--card); }
.card h3 { font-size: .9rem; margin: 1.1rem 0 .3rem; color: var(--muted); }
.azioni-cella { display: flex; gap: .35rem; white-space: nowrap; }
.cond { background: var(--sfondo-riga); border-radius: 6px; padding: .1rem .45rem; margin-right: .3rem;
  font-size: .82rem; display: inline-block; }
.giorni { display: flex; gap: .5rem; flex-wrap: wrap; }
.tabella-stretta { max-width: 320px; }
.card-attenzione { border-color: #e6c9a8; background: #fffdf9; }
.card-stretta { max-width: 640px; margin-left: auto; margin-right: auto; }
.passi { padding-left: 1.2rem; }
.passi li { margin-bottom: 1.1rem; line-height: 1.5; }
.qr { background: #fff; padding: .6rem; display: inline-block; border: 1px solid var(--line);
  border-radius: 8px; margin: .6rem 0; }
.qr svg { width: 210px; height: 210px; display: block; }
.chiave { background: var(--sfondo-totale); border-radius: 7px; padding: .5rem .7rem; letter-spacing: .12em;
  display: inline-block; }
.codici { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; margin-top: 1rem; }
.codici span { background: var(--sfondo-dentro); border: 1px solid var(--line); border-radius: 7px;
  padding: .5rem; text-align: center; font-size: 1.05rem; letter-spacing: .08em; }
@media print {
  /* ⚠️ **Stampare non è fotocopiare lo schermo.** Su carta non servono i menù,
     i tasti, la ricerca: servono i dati. Quello che si tocca col dito sparisce,
     quello che si legge resta — e le tabelle non si devono spezzare a metà riga
     fra una pagina e l'altra. Nato dalla richiesta di Remo (01/09/2026) di poter
     stampare il listino. */
  .topbar, .azioni, .flash, .barra-menu, #menu, .apri-menu, .user,
  .barra-ricerca, .filters, .sez-linguette, .sez-destra,
  #c-e-una-novita, .segno-apri, .btn { display: none !important; }
  body { background: #fff; color: #000; font-size: 10pt; }
  a { color: #000; text-decoration: none; }
  /* le tabelle: intestazione ripetuta a ogni foglio, righe intere */
  table { page-break-inside: auto; width: 100%; border-collapse: collapse; }
  thead { display: table-header-group; }
  tr { page-break-inside: avoid; page-break-after: auto; }
  th, td { border: 1px solid #999 !important; padding: 2pt 4pt !important; }
  h1 { font-size: 15pt; } h2 { font-size: 12pt; page-break-after: avoid; }
  /* i campi da riempire diventano il loro valore: una casella vuota stampata
     non dice niente, il numero dentro sì */
  input { border: 0 !important; padding: 0 !important; background: none; }
  /* il bollino «da confermare» resta anche su carta: una bozza deve sembrare
     una bozza pure stampata */
  .da-confermare { border: 1px solid #000 !important; background: none !important;
                   color: #000 !important; }
  .riga-dettaglio { display: none !important; }
  /* ⚠️ **Quello che serve solo su carta.** Un foglio staccato dallo schermo non
     ha più né la barra né il titolo del programma: chi lo legge deve trovarci
     scritto di chi è e di che giorno è. A schermo sarebbe rumore, quindi si
     vede soltanto in stampa. Nato dall'elenco dei DDT di carico mancanti
     (07/09/2026), che si manda al committente. */
  .solo-stampa { display: block !important; }
  @page { size: A4 landscape; margin: 12mm; }
}
/* fuori dalla stampa non esiste */
.solo-stampa { display: none; }
.btn-attenzione { background: #b26a00; border-color: #b26a00; color: #fff; }
.btn-attenzione:hover { border-color: #8f5500; }
.stato-ascolto { list-style: none; padding: .4rem .7rem; margin: .4rem 0; font-size: .9rem;
  background: var(--sfondo-dentro); border: 1px solid var(--line); border-radius: 7px; }
.stato-ascolto li { padding: .12rem 0; }
.esito { background: #eef6f0; border: 1px solid #cfe3d6; border-radius: 7px;
  padding: .5rem .8rem; font-size: .9rem; }

.vis-form { display: flex; flex-direction: column; gap: .3rem; align-items: flex-start; }
.vis-form .elenco-aziende { display: none; padding: .3rem .5rem; background: var(--sfondo-dentro);
  border: 1px solid var(--line); border-radius: 7px; }
.vis-form .elenco-aziende label { display: block; }

.login-box { max-width: 360px; margin: 8vh auto; background: var(--card); border: 1px solid var(--line);
  border-radius: 12px; padding: 2rem; }
.login-box h1 { margin: 0 0 .2rem; }
.login-box label { display: block; margin: .9rem 0; font-size: .9rem; color: var(--muted); }
.login-box input, .login-box select { width: 100%; margin-top: .3rem; }
.login-box .btn { width: 100%; margin-top: .5rem; }

@media (max-width: 720px) {
  .ellipsis { max-width: 130px; }
  .dettagli { grid-template-columns: 1fr; }
}

/* ⚠️ **Le tabelle si allargano, il testo da leggere no.** Su un monitor da 32
   pollici una riga di testo larga due metri non si legge: arrivati in fondo si
   è perso l'inizio della riga dopo. Le tabelle sono l'opposto — lì la larghezza
   serve, ed è tutto il motivo per cui la pagina si allarga. Quindi il freno si
   mette **solo sui blocchi di prosa**, non su `main`. */
.corpo-messaggio, .dett-corpo { max-width: 95ch; }
main > p.muted, main > p.piccolo { max-width: 100ch; }

/* testo del messaggio dentro la scheda della pratica */
.corpo-messaggio {
  white-space: pre-wrap;
  word-wrap: break-word;
  overflow-wrap: anywhere;
  background: #f7f8fa;
  border: 1px solid var(--line);
  border-left: 3px solid var(--testo-tenue);
  border-radius: 6px;
  padding: .9rem 1rem;
  margin: .4rem 0 1rem;
  max-height: 28rem;
  overflow-y: auto;
  font-size: .93rem;
  line-height: 1.5;
}

/* stato di consegna delle PEC in uscita */
.consegna {
  display: inline-block; padding: .1rem .5rem; border-radius: 999px;
  font-size: .8rem; font-weight: 600; white-space: nowrap;
}
.consegna-consegna     { background: #e4f5e9; color: #1d6b36; }
.consegna-accettazione { background: #fdf3dd; color: #8a6100; }
.consegna-anomalia     { background: #fdE6E6; color: #a01d1d; }
.consegna-attesa       { background: var(--linea-chiara); color: #5b6472; }

.ricevute { list-style: none; padding: 0; margin: .4rem 0 1rem; }
.ricevute li {
  display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
  padding: .45rem 0; border-bottom: 1px solid var(--linea-chiara);
}
.avviso-collegamento {
  background: #eef4fd; border: 1px solid #cfe0f7; border-radius: 6px;
  padding: .6rem .8rem; margin: .2rem 0 1rem; font-size: .9rem;
}

/* ============================================================
   Telefono: menu a scomparsa e tabelle che diventano schede
   ============================================================ */

.apri-menu {
  display: none; font-size: 1.4rem; line-height: 1; background: none;
  border: 1px solid transparent; border-radius: 8px; padding: .25rem .55rem;
  cursor: pointer; color: inherit;
}

@media (max-width: 820px) {
  .topbar {
    flex-wrap: wrap; gap: .5rem .75rem;
    padding-left: max(.9rem, env(safe-area-inset-left));
    padding-right: max(.9rem, env(safe-area-inset-right));
  }
  .apri-menu { display: block; order: 2; margin-left: auto; }
  .topbar .brand { order: 1; }
  .topbar nav {
    order: 4; flex-basis: 100%; display: none; flex-direction: column; gap: .1rem;
    border-top: 1px solid rgba(255,255,255,.18); padding-top: .5rem; margin-top: .3rem;
  }
  .topbar nav.aperto { display: flex; }
  .topbar nav a { padding: .55rem .2rem; }
  .topbar .user { order: 3; flex-basis: 100%; display: flex; flex-wrap: wrap;
                  align-items: center; gap: .5rem; }

  main { padding: .9rem max(.8rem, env(safe-area-inset-left)) 2.5rem; }

  /* le tabelle non si leggono su schermo stretto: diventano schede impilate */
  .tabella thead { display: none; }
  .tabella, .tabella tbody, .tabella tr, .tabella td { display: block; width: 100%; }
  .tabella tr {
    border: 1px solid var(--line); border-radius: 10px; padding: .7rem .85rem;
    margin-bottom: .7rem; background: #fff;
  }
  .tabella td { border: none; padding: .18rem 0; }
  .tabella td.ellipsis { white-space: normal; overflow: visible; text-overflow: clip; }
  .tabella td:first-child { font-weight: 600; font-size: 1.02rem; }

  .schede { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .dettagli { grid-template-columns: 1fr; gap: .1rem .5rem; }
  .dettagli dt { margin-top: .55rem; }
  .azioni { flex-wrap: wrap; }
  .azioni .btn, .azioni button { flex: 1 1 auto; min-height: 44px; }
  .form-riga { flex-direction: column; align-items: stretch; }
  input, select, textarea, button { font-size: 16px; }   /* evita lo zoom di Safari */
  .corpo-messaggio { max-height: none; }
}

/* app aggiunta alla schermata Home: rispetta la tacca dell'iPhone */
@media (display-mode: standalone) {
  .topbar { padding-top: max(.7rem, env(safe-area-inset-top)); }
  body { padding-bottom: env(safe-area-inset-bottom); }
}

@media (max-width: 820px) {
  /* nelle schede su telefono ogni valore porta la sua etichetta */
  .tabella td[data-et]::before {
    content: attr(data-et) ": ";
    color: #6b7480; font-size: .82rem; font-weight: 500;
  }
  .tabella td[data-et] { display: flex; gap: .35rem; align-items: baseline; }
  .tabella td[data-et]::before { flex: 0 0 auto; }

  /* ricevute: una riga per ricevuta, leggibile */
  .ricevute li { display: grid; grid-template-columns: auto 1fr auto; gap: .3rem .6rem; }
  .ricevute li .ellipsis { grid-column: 1 / -1; white-space: normal; }
}

/* ------------------------------------------------------------------
   Finestra del programma per PC: barra dei menù in stile Windows.
   Resta nascosta ovunque tranne che in quella finestra (classe aggiunta
   dal riquadro di script in base.html).
   ------------------------------------------------------------------ */
.barra-menu { display: none; }

body.finestra-pc .topbar { display: none; }

body.finestra-pc .barra-menu {
  display: flex; align-items: stretch; gap: 0;
  background: #f3f5f7; border-bottom: 1px solid #ccd3da;
  font-size: .9rem; position: sticky; top: 0; z-index: 40;
  user-select: none;
}
body.finestra-pc .voce-menu { position: relative; }
body.finestra-pc .titolo-menu {
  border: 0; background: none; font: inherit; color: var(--ink);
  padding: .34rem .85rem; cursor: pointer; height: 100%;
}
body.finestra-pc .titolo-menu:hover { background: #e2e9f0; }
body.finestra-pc .voce-menu.aperta .titolo-menu { background: #d7e5f3; }

body.finestra-pc .tendina {
  display: none; position: absolute; top: 100%; left: 0; min-width: 15rem;
  background: #fff; border: 1px solid #b9c0c7; border-radius: 0 0 3px 3px;
  box-shadow: 0 8px 18px rgba(0, 0, 0, .18); padding: .25rem 0; z-index: 50;
}
body.finestra-pc .voce-menu.aperta .tendina { display: block; }
body.finestra-pc .tendina a {
  display: block; padding: .38rem 1.1rem; color: var(--ink); text-decoration: none;
  white-space: nowrap;
}
body.finestra-pc .tendina a:hover { background: var(--primary); color: #fff; }
body.finestra-pc .tendina .separatore {
  height: 1px; background: #e2e6ea; margin: .25rem .5rem;
}
body.finestra-pc .menu-utente {
  margin-left: auto; align-self: center; padding: 0 .9rem; color: var(--muted);
}

/* il riquadro attorno al contenuto, come nelle finestre dei programmi */
body.finestra-pc main {
  border: 1px solid #c3ccd4; background: var(--card); border-radius: 3px;
  margin: .6rem; padding: .9rem; max-width: none;
}
body.finestra-pc .flash { margin: .6rem .6rem 0; }

/* --- Due spunte sulle PEC spedite, come nelle chat ---------------------------
   La prima spunta è l'accettazione (il gestore ha preso in carico il messaggio),
   la seconda la consegna nella casella del destinatario. Grigie = non ancora
   arrivate. Una croce rossa al posto delle spunte = mancata consegna.
   Cliccandole si apre l'elenco delle ricevute con data e ora.              */
.spunte { position: relative; display: inline-block; }
.spunte > summary { list-style: none; cursor: pointer; padding: 2px 6px; border-radius: 5px; }
.spunte > summary::-webkit-details-marker { display: none; }
.spunte > summary:hover { background: #eef2f7; }
.spunta { font-size: 1.15rem; font-weight: 700; line-height: 1; }
.spunta + .spunta { margin-left: -5px; }
.spunta-ok { color: #2e7d32; }
.spunta-no { color: #c3ccd6; }
.spunta-ko { color: #c62828; }
.ricevute-menu {
  position: absolute; right: 0; top: 100%; z-index: 40; min-width: 268px;
  background: #fff; border: 1px solid var(--line); border-radius: 8px;
  box-shadow: 0 8px 22px rgba(0,0,0,.16); padding: 8px 10px; text-align: left;
  white-space: normal; font-weight: 400;
}
.titolo-menu-ric { margin: 2px 0 8px; font-weight: 600; }
.ricevute-menu a { display: block; padding: 6px 5px; border-radius: 5px; text-decoration: none; color: inherit; }
.ricevute-menu a:hover { background: #eef4fb; }
.ricevute-menu .mono { font-size: .85em; margin-left: 4px; }
.pallino { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 7px; }
.pallino-accettazione { background: #7cb342; }
.pallino-consegna     { background: #2e7d32; }
.pallino-anomalia     { background: #c62828; }

/* --- Scadenze ---------------------------------------------------------------
   Le righe si colorano da sole man mano che la data si avvicina.            */
.sc-scaduta { background: #fdecec; }
.sc-oggi    { background: #fff4e0; }
.sc-vicina  { background: #fffbe6; }
.testo-rosso { color: #c62828; }
.piccolo { font-size: .85em; }
.citazione { font-style: italic; border-left: 3px solid var(--line); padding-left: 8px; margin: 6px 0; }
.stat.urgente .num { color: #c62828; }
.tag-pagamento   { background: #c62828; }
.tag-ricorso     { background: #ef6c00; }
.tag-adempimento { background: var(--primary); }
.tag-altro       { background: var(--testo-tenue); }
.tag-fatta       { background: #2e7d32; }
.tag-annullata   { background: var(--testo-tenue); }
.azioni-scadenza { position: relative; display: inline-block; }
.azioni-scadenza > summary { list-style: none; cursor: pointer; }
.azioni-scadenza > summary::-webkit-details-marker { display: none; }
.menu-azioni {
  position: absolute; right: 0; top: 100%; z-index: 40; width: 330px;
  background: #fff; border: 1px solid var(--line); border-radius: 8px;
  box-shadow: 0 8px 22px rgba(0,0,0,.16); padding: 10px; text-align: left;
  white-space: normal;
}
.menu-azioni form { margin: 6px 0 0; display: flex; gap: 6px; flex-wrap: wrap; align-items: end; }

/* --- Colonne ordinabili -----------------------------------------------------
   L'intestazione è un collegamento: primo clic ordina, secondo inverte.
   ⇅ = colonna ordinabile ma non in uso; ▼ dal più recente; ▲ dal più vecchio. */
th.ordinabile { padding: 0; }
th.ordinabile > a {
  display: block; padding: 10px 8px; color: inherit; text-decoration: none;
  white-space: nowrap;
}
th.ordinabile > a:hover { background: rgba(255,255,255,.14); }
th.ordinabile .freccia { margin-left: 5px; opacity: .35; font-size: .85em; }
th.ordinabile.ordinata .freccia { opacity: 1; }
th.ordinabile.ordinata > a { font-weight: 700; }

/* --- Fascicoli --------------------------------------------------------------
   Gli atti di una stessa vicenda. Ognuno tiene il suo numero di protocollo:
   il registro elenca gli atti, il fascicolo li tiene insieme.              */
.segno-fascicolo { opacity: .75; cursor: help; }
ol.fascicolo { list-style: none; margin: .4rem 0; padding: 0; }
ol.fascicolo li { display: flex; gap: .5rem; align-items: baseline;
                  padding: .4rem .5rem; border-left: 3px solid var(--line);
                  margin-bottom: .2rem; }
ol.fascicolo li.atto-corrente { border-left-color: var(--primary);
                                background: #f2f6fb; font-weight: 600; }
ol.fascicolo .ellipsis { flex: 1; min-width: 0; }

/* --- Casella del nome utente con il dominio aziendale già scritto ----------- */
.campo-con-dominio { display: flex; align-items: stretch; width: 100%; }
.campo-con-dominio input { flex: 1; min-width: 0; border-top-right-radius: 0;
                           border-bottom-right-radius: 0; border-right: none; }
.campo-con-dominio .dominio {
  display: flex; align-items: center; padding: 0 .6rem; white-space: nowrap;
  background: var(--linea-chiara); border: 1px solid var(--line); border-left: none;
  border-top-right-radius: .4rem; border-bottom-right-radius: .4rem;
  color: var(--muted); font-size: .9rem;
}

/* Pulsante della graffetta nella chat: stessa altezza della casella di scrittura */
#btn-allega { min-height: 2.7rem; padding: 0 .7rem; font-size: 1.15rem; line-height: 1; }

/* ---------------------------------------------------------------------------
   Le due sezioni: Protocollo e Produzione.
   Sta sopra la barra dei menù: prima si sceglie il mondo, poi le sue voci.
   --------------------------------------------------------------------------- */
.sezioni {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: .5rem;
  padding: .35rem .8rem 0;
  background: #16456f;
  border-bottom: 1px solid rgba(255,255,255,.12);
}
.sez-linguette { display: flex; gap: .25rem; min-width: 0; }

/* A destra le cose che non appartengono a nessuna sezione: l'assistente, le
   impostazioni comuni, chi è collegato. Stanno qui e non nel menù di sotto
   perché quel menù cambia con la sezione, e queste no. */
.sez-destra { display: flex; align-items: center; gap: .1rem; padding-bottom: .35rem; }
.sez-destra .voce-barra {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .3rem .55rem; border-radius: 7px;
  color: rgba(255,255,255,.82); text-decoration: none;
  font-size: .9rem; line-height: 1.2; white-space: nowrap;
}
.sez-destra .voce-barra:hover { background: rgba(255,255,255,.14); color: #fff; }
.sez-destra .ingranaggio { font-size: 1.15rem; padding: .18rem .45rem; }
.sez-destra .utente-barra { font-weight: 600; }
.sezioni a {
  padding: .45rem 1.1rem;
  border-radius: 8px 8px 0 0;
  color: rgba(255,255,255,.72);
  text-decoration: none;
  font-weight: 600;
  font-size: .93rem;
  line-height: 1.2;
  white-space: nowrap;
}
.sezioni a:hover { background: rgba(255,255,255,.10); color: #fff; }
.sezioni a.attiva { background: var(--primary); color: #fff; }
/* nella finestra del programma per PC la barra dei menù sta già in cima:
   le sezioni si infilano subito sotto, senza staccarsi */
body.finestra-pc .sezioni { padding-top: .25rem; }

/* Riquadri con i numeri in evidenza (riepilogo della produzione) */
.cards {
  display: grid;
  gap: .8rem;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  margin: 1rem 0;
}
.numero-grande {
  font-size: 1.9rem;
  font-weight: 700;
  line-height: 1.1;
}

@media (max-width: 640px) {
  .sezioni { padding: .3rem .5rem 0; }
  .sezioni a { padding: .4rem .7rem; font-size: .9rem; }
}

/* --- Logo aziendale ---------------------------------------------------------
   Nella barra in alto sta accanto al nome della sezione; sulla schermata di
   accesso in cima, centrato. Lo sfondo del logo è bianco: ci sta bene sulla
   barra chiara e sulla scatola dell'accesso, non andrebbe messo sulla fascia
   blu delle sezioni.                                                        */
.topbar .brand a { display: inline-flex; align-items: center; gap: .55rem; }
.logo-barra { border-radius: 6px; flex: none; }
.logo-accesso { display: block; margin: 0 auto .8rem; border-radius: 14px; }
.login-box h1 { text-align: center; }
.login-box > .muted:first-of-type { text-align: center; }
@media (max-width: 600px) {
  .logo-barra { width: 26px; height: 26px; }
}

/* --- La barra Protocollo/Produzione sotto l'orologio dell'iPhone ------------
   Nell'app aggiunta alla schermata Home la pagina parte dal bordissimo dello
   schermo (`viewport-fit=cover` + barra di stato trasparente): il primo
   elemento finisce sotto l'orologio e la batteria, e i due pulsanti non si
   riescono a toccare.
   Lo spazio per la tacca c'era già, ma era messo sulla barra bianca — che fino
   al 4 agosto era la prima della pagina. Poi sopra è arrivata la fascia blu
   delle sezioni, e lo spazio è rimasto un piano più in basso.
   Qui si sposta dove serve: la fascia blu si allunga sotto l'orologio (così
   quella zona resta blu, non bianca) ma il suo contenuto scende sotto.       */
@media (display-mode: standalone) {
  .sezioni { padding-top: max(.35rem, env(safe-area-inset-top)); }
  /* la barra bianca non deve aggiungere di nuovo lo stesso spazio */
  .sezioni + .topbar { padding-top: .7rem; }
}

/* I due pulsanti diventano abbastanza alti da centrarli col dito: 44 punti è
   la misura che Apple indica come minima, ed è quella usata per gli altri
   pulsanti del programma sul telefono. */
@media (max-width: 720px) {
  .sezioni { padding-left: max(.5rem, env(safe-area-inset-left)); }
  .sezioni a {
    display: flex; align-items: center; min-height: 44px;
    padding: .3rem .9rem; font-size: .9rem;
  }
}

/* Permessi per persona: la sezione e, rientrate sotto, le sue voci.
   Il sottomenù compare solo se la sezione è spuntata: mostrare voci di una
   sezione spenta farebbe credere che valgano qualcosa. */
.permessi-sezione { margin-bottom: .5rem; }
.permessi-sezione .sezione-madre { display: block; margin-bottom: .15rem; }
.permessi-sezione .sottovoci {
  margin-left: 1.4rem; padding-left: .6rem;
  border-left: 2px solid var(--bordo, #dcdcdc);
}
.permessi-sezione .sottovoci .chk {
  display: block; font-size: .9rem; padding: .12rem 0; min-height: 26px;
}
@media (max-width: 720px) {
  .permessi-sezione .sottovoci .chk { min-height: 38px; padding: .35rem 0; }
}

/* Avviso di un lavoro in sottofondo: gira e poi ricarica da solo.
   Non è un errore, quindi non deve avere l'aria dell'errore. */
.flash p.in-attesa { display: flex; align-items: center; gap: .5rem; }
.flash p.in-attesa .girante { flex: 0 0 auto; }


/* Sul telefono la barra deve stare su una riga sola: dell'assistente resta la
   nuvoletta, il nome si legge già nel menù «Il mio accesso». */
@media (max-width: 620px) {
  .sezioni { padding-left: .5rem; padding-right: .5rem; gap: .3rem; }
  .sez-destra .voce-barra .etichetta { display: none; }
  .sez-destra .voce-barra { padding: .3rem .4rem; font-size: .82rem; }
  .sez-destra .utente-barra { max-width: 6.5rem; overflow: hidden; text-overflow: ellipsis; }
  /* Le linguette si stringono invece di spingere fuori schermo la parte
     destra: il nome di chi è collegato deve restare sempre visibile. */
  .sez-linguette { overflow-x: auto; scrollbar-width: none; }
  .sez-linguette::-webkit-scrollbar { display: none; }
  .sezioni a { padding: .4rem .6rem; font-size: .82rem; }
}

/* Finestra-pannello: Giovanna aperta di fianco mentre si naviga il gestionale.
   Niente barre né menù — lo schermo è stretto e lo spazio serve tutto alla
   conversazione. */
body.pannello main { padding: 0 .6rem; max-width: none; }
body.pannello .chat { margin-top: .4rem; }
body.pannello .flash { margin: .4rem .6rem; }

/* Allegati di una PEC: stanno in cima al messaggio e ci restano mentre si
   scorre. Prima erano in fondo, sotto il testo: su una PEC lunga bisognava
   scendere fino in fondo ogni volta per riaprire un allegato mentre si leggeva.
   `top` è l'altezza della barra bianca, che è appiccicata anche lei. */
.blocco-allegati {
  position: sticky;
  top: 3rem;
  z-index: 3;
  background: var(--card);
  margin: .8rem -1.4rem 0;
  padding: .1rem 1.4rem .6rem;
  border-bottom: 1px solid var(--line);
  box-shadow: 0 6px 8px -8px rgba(0,0,0,.35);
}
.blocco-allegati h2 { margin-top: .6rem; }
/* Tanti allegati non devono mangiarsi lo schermo: oltre una certa altezza
   l'elenco scorre per conto suo. */
.blocco-allegati .allegati { max-height: 9rem; overflow-y: auto; }
@media (max-width: 720px) {
  .blocco-allegati { margin-left: -1rem; margin-right: -1rem;
                     padding-left: 1rem; padding-right: 1rem; top: 2.8rem; }
  .blocco-allegati .allegati { max-height: 7rem; }
}

/* Allegati affiancati: si scorre da sinistra a destra e si va a capo da soli.
   Con venti allegati una colonna riempiva mezzo schermo. */
.allegati-affiancati { display: flex; flex-wrap: wrap; gap: .35rem; }
.allegati-affiancati li.etichetta-allegato {
  display: inline-flex; align-items: center;
  padding: 0; border: 1px solid var(--line); border-radius: 999px;
  background: var(--sfondo-dentro); max-width: 22rem; font-size: .82rem;
}
.etichetta-allegato a {
  display: inline-flex; align-items: baseline; gap: .35rem; min-width: 0;
  padding: .28rem .2rem .28rem .6rem; text-decoration: none; color: var(--ink);
}
.etichetta-allegato a:hover .nome-allegato { text-decoration: underline; }
/* Il nome lungo si accorcia con i puntini invece di allargare l'etichetta:
   il nome per intero sta nel suggerimento del mouse. */
.etichetta-allegato .nome-allegato {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.etichetta-allegato .peso { font-size: .7rem; flex: 0 0 auto; }
.etichetta-allegato .graffetta { flex: 0 0 auto; }
.bottone-condividi {
  border: 0; background: transparent; cursor: pointer; color: var(--muted);
  font-size: .9rem; line-height: 1; padding: .3rem .55rem .3rem .35rem;
  border-radius: 999px;
}
.bottone-condividi:hover { background: #e6edf4; color: var(--primary); }
@media (max-width: 720px) {
  .allegati-affiancati li.etichetta-allegato { max-width: 100%; font-size: .82rem; }
  /* Sul telefono il dito ha bisogno di spazio: bersagli più alti. */
  .etichetta-allegato a { padding-top: .4rem; padding-bottom: .4rem; }
  .bottone-condividi { padding: .4rem .6rem .4rem .4rem; }
}

/* Testata di una PEC: fitta. Prima otto righe di dati occupavano tutto lo
   schermo prima ancora di arrivare al messaggio. */
.dettagli-fitti { gap: .12rem .8rem; margin-top: .5rem; font-size: .9rem; }
.dettagli-fitti dt { font-size: .8rem; line-height: 1.5; }

/* «Altri dati»: chiuso non si vede, aperto scende. Niente JavaScript. */
.altri-dati { margin-top: .5rem; }
.altri-dati > summary {
  cursor: pointer; list-style: none; display: inline-flex; align-items: center;
  gap: .3rem; font-size: .8rem; color: var(--muted);
  border: 1px solid var(--line); border-radius: 999px; padding: .15rem .7rem;
}
.altri-dati > summary::-webkit-details-marker { display: none; }
.altri-dati > summary::before { content: "▾"; font-size: .7rem; }
.altri-dati[open] > summary::before { content: "▴"; }
.altri-dati > summary:hover { border-color: var(--primary); color: var(--primary); }
.altri-dati[open] > summary { margin-bottom: .1rem; }

/* Le due porte verso le impostazioni delle sezioni: stanno in cima alle
   generali perché sono quelle che si cercano più spesso, e nel menù di sotto —
   che ormai ha nove voci — si perdevano. */
.porte-impostazioni { display: grid; gap: .6rem; margin-top: .6rem;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.porte-impostazioni .porta {
  display: block; padding: .7rem .9rem; text-decoration: none;
  border: 1px solid var(--line); border-radius: 9px; background: var(--sfondo-dentro);
  color: var(--ink);
}
.porte-impostazioni .porta:hover { border-color: var(--primary); background: var(--sfondo-riga); }
.porte-impostazioni .porta-titolo { display: block; font-weight: 600; }
.porte-impostazioni .porta-sotto { display: block; font-size: .82rem;
  color: var(--muted); margin-top: .15rem; }

/* Spedizioni: righe strette, una per commessa. Con ottomila commesse la
   tabella deve stare in poco spazio o non ci si trova niente. */
/* ⚠️ Non chiamarla «tabella-stretta»: quel nome esiste già più su e serve a
   limitare la larghezza a 320px. Qui serve il contrario — larga tutta e con le
   righe basse. */
.tabella-fitta th { padding: .3rem .5rem; font-size: .7rem; }
.tabella-fitta td {
  padding: .1rem .5rem; font-size: .82rem; line-height: 1.35;
}
.tabella-fitta td.tronca {
  max-width: 15rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tabella-fitta a { text-decoration: none; }
.tabella-fitta a:hover { text-decoration: underline; }
/* Due spunte come le PEC: la prima dice della carta, la seconda della merce. */
.spunte-lav { letter-spacing: -.12em; }
.spunte-lav .sp { font-size: .9rem; font-weight: 700; line-height: 1; }
.sp-attesa { color: var(--testo-tenue); }          /* grigia: non ancora */
.sp-corso  { color: #d79a00; }          /* gialla: in corso */
.sp-ok     { color: #1f8b4c; }          /* verde: fatto */
.pallino-ddt { color: var(--primary); font-size: 1rem; margin-left: .2rem; line-height: 1; }

/* Tabella larga su schermo stretto: scorre di lato invece di far andare a capo
   le celle, che è quello che faceva sembrare le righe alte il doppio. */
.scorre-lato { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.scorre-lato .tabella { min-width: 44rem; }

.solo-grande { display: block; }
@media (max-width: 720px) {
  /* Sul telefono la spiegazione e i numeri grandi mangiano lo schermo prima
     ancora di far vedere una riga della tabella. */
  .solo-grande { display: none; }
  .stats { gap: .4rem; margin-bottom: .6rem; }
  .stat { min-width: 0; flex: 1 1 30%; padding: .35rem .5rem; }
  .stat .num { font-size: 1.05rem; }
  .stat .lbl { font-size: .7rem; }
  .filters { gap: .35rem; margin-bottom: .6rem; }
  .tabella-fitta td { padding: .08rem .4rem; font-size: .8rem; }
  .tabella-fitta th { padding: .25rem .4rem; font-size: .65rem; }
  .tabella-fitta td.tronca { max-width: 9rem; }
}

/* ------------------------------------------------------------------
   Correzioni per il telefono, 5 agosto 2026
   ------------------------------------------------------------------ */
@media (max-width: 820px) {
  /* La regola generale trasforma ogni tabella in schede impilate: giusto per
     le PEC (poche colonne, testi lunghi), sbagliato per le Spedizioni, che
     hanno nove colonne cortissime. Lì una riga diventava una scheda alta
     mezzo schermo. Questa resta una tabella vera e scorre di lato. */
  .tabella-fitta { display: table; width: auto; }
  .tabella-fitta thead { display: table-header-group; }
  .tabella-fitta tbody { display: table-row-group; }
  .tabella-fitta tr {
    display: table-row; border: 0; border-radius: 0;
    padding: 0; margin: 0; background: none;
  }
  .tabella-fitta td {
    display: table-cell; width: auto;
    border-bottom: 1px solid var(--line); padding: .12rem .4rem;
  }
  .tabella-fitta td:first-child { font-weight: 400; font-size: inherit; }

  /* La barra bianca non resta più appiccicata in cima sul telefono: quando la
     pagina scorre finiva **sotto l'orologio dell'iPhone**, perché il rientro
     per la tacca ce l'ha la barra blu, che però è già scorsa via. Meglio che
     scorra insieme al resto: il menù si ritrova risalendo. */
  .topbar { position: static; }
}

@media (max-width: 820px) {
  /* Correzione della correzione: rendendo statica la barra bianca, scorrendo
     non restava più niente a coprire la zona dell'orologio e il contenuto ci
     finiva sotto. Tiene il posto la **barra blu**, che è quella che ha già il
     rientro per la tacca: resta lei in cima, e la bianca scorre via. */
  .sezioni { position: sticky; top: 0; z-index: 7; }
}

@media (max-width: 820px) {
  /* Dentro una tabella vera le etichette accanto al valore non servono: le
     intestazioni ci sono già in cima. Servono solo quando la tabella diventa
     una scheda impilata. */
  .tabella-fitta td[data-et]::before { content: none; }
  .tabella-fitta td[data-et] { display: table-cell; }

  /* ⚠️ **La colonna «Linea» non va a capo.** Segnalato da Remo: sul telefono
     «DD DONDUP DONNA S27 COCO DS0107D» si spezzava su tre righe e da solo
     faceva diventare la riga alta il triplo di tutte le altre — in un elenco
     che si scorre col pollice è il modo più rapido per non trovare più niente.
     La colpa era di una regola generale (`.tabella td.ellipsis` diventa
     `white-space: normal`) scritta per le tabelle che sul telefono si
     trasformano in **schede impilate**, dove andare a capo è giusto. Le
     `.tabella-fitta` invece restano tabelle vere e scorrono di lato: lì vale
     il contrario. Il testo intero resta nel suggerimento (`title`) e nella
     riga che si apre. */
  .tabella-fitta td.ellipsis {
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    /* ⚠️ 14rem e non 8: le linee vere sono lunghe **30-43 caratteri** («DU
       DONDUP UOMO S27 ICON RELAX DFE285U») e tagliandole a 8rem sparisce
       proprio il pezzo che serve — il nome del modello sta **in mezzo**, dopo
       la stagione. Tanto queste tabelle sul telefono scorrono già di lato:
       qualche millimetro in più di larghezza non costa niente, una riga alta
       il triplo sì. */
    max-width: 14rem;
  }
}

/* Intestazioni che ordinano nel browser (elenchi corti, tutti in pagina). */
/* ⚠️ Le stesse frecce valgono anche per le tabelle **dentro** le righe che si
   aprono: da quando si ordinano pure quelle, senza la freccia non si capiva
   che l'intestazione si poteva premere — e una cosa che si può fare ma non si
   vede, per chi la usa non c'è. */
.tabella th.ordinabile, .tabella-dentro th.ordinabile { cursor: pointer; user-select: none; }
.tabella th.ordinabile::after,
.tabella-dentro th.ordinabile::after { content: " ⇅"; opacity: .35; font-size: .9em; }
.tabella th.ordinabile:hover,
.tabella-dentro th.ordinabile:hover { color: var(--primary); }
.tabella th.ordinabile.ordinata::after,
.tabella-dentro th.ordinabile.ordinata::after { opacity: 1; }
.tabella th.ordinabile[data-verso="su"]::after,
.tabella-dentro th.ordinabile[data-verso="su"]::after { content: " ▲"; }
.tabella th.ordinabile[data-verso="giu"]::after,
.tabella-dentro th.ordinabile[data-verso="giu"]::after { content: " ▼"; }

/* ------------------------------------------------------------------ POSTA */
.posta-testa { display: flex; align-items: flex-end; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap; margin-bottom: .3rem; }
.posta-testa h1 { margin: 0; }

.elenco-posta td { padding: .5rem .55rem; cursor: pointer; }
.elenco-posta tr:hover { background: var(--sfondo-totale); }
.elenco-posta .posta-chi { max-width: 15rem; overflow: hidden; text-overflow: ellipsis; }
.elenco-posta .posta-oggetto { max-width: 100%; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; }
.elenco-posta .posta-quando { font-size: .82rem; }
/* Un messaggio non letto si vede da lontano: è l'unica cosa che conta
   davvero quando si apre la posta. */
.elenco-posta tr.da-leggere td { font-weight: 600; }
.pallino-nuovo { color: var(--primary); font-size: .7rem; vertical-align: .1em;
  margin-right: .25rem; }

.oggetto-messaggio { font-size: 1.25rem; margin: 0 0 .3rem; }
.avviso-immagini { background: #fff8ec; border: 1px solid var(--warn);
  border-radius: .5rem; padding: .5rem .7rem; font-size: .9rem; }
/* ⚠️ `.avviso` era **usata in tre pagine e non definita da nessuna parte**
   (ponte, sblocca, chat): il riquadro d'avviso si vedeva come testo normale.
   Un avvertimento che non si distingue dal resto è un avvertimento che nessuno
   legge — lo stesso genere di guasto silenzioso delle sei variabili di colore
   che rimandavano a sé stesse. 26 agosto 2026. */
.avviso { background: #fff8ec; border: 1px solid var(--warn);
  border-radius: .5rem; padding: .55rem .8rem; }
/* una riga che c'è ma non è in servizio: si legge, non si nasconde */
tr.spenta td { opacity: .55; }
/* Cornice isolata per l'HTML delle email: quello che sta dentro non tocca il
   resto della pagina. */
.corpo-html { width: 100%; min-height: 22rem; border: 1px solid var(--line);
  border-radius: .5rem; background: #fff; }

.riga-posta { display: flex; align-items: center; gap: .6rem; margin: .45rem 0; }
.riga-posta .etichetta-posta { flex: 0 0 4.5rem; color: var(--muted);
  font-size: .82rem; text-align: right; }
.riga-posta input[type=text] { flex: 1; padding: .45rem .6rem;
  border: 1px solid var(--line); border-radius: .5rem; font: inherit; }
#testo-posta, .campo-firma { width: 100%; padding: .6rem; font: inherit;
  border: 1px solid var(--line); border-radius: .5rem; resize: vertical; }
.firma-anteprima { margin: .5rem 0; }
.firma-anteprima pre { margin: .2rem 0 0; padding: .5rem .7rem; background: var(--sfondo-dentro);
  border-left: 3px solid var(--line); border-radius: .3rem;
  font-family: inherit; font-size: .82rem; white-space: pre-wrap; color: var(--muted); }
.paginazione { display: flex; align-items: center; gap: .8rem; margin-top: .7rem; }

@media (max-width: 720px) {
  .riga-posta { flex-wrap: wrap; }
  .riga-posta .etichetta-posta { flex: 0 0 100%; text-align: left; margin-bottom: -.2rem; }
  .elenco-posta .posta-chi { max-width: 8rem; }
  .elenco-posta .posta-quando { font-size: .75rem; }
}

/* Anteprima della firma: si mostra su fondo bianco come apparirà nella email,
   non con i colori del gestionale, o si vedrebbe diversa da com'è. */
.anteprima-firma { background: #fff; border: 1px solid var(--line);
  border-radius: .5rem; padding: .8rem 1rem; margin-top: .4rem; overflow-x: auto; }

/* Suggerimenti della rubrica mentre si scrive un destinatario. */
.suggerimenti { position: absolute; left: 0; right: 0; top: 100%; z-index: 30;
  background: var(--card); border: 1px solid var(--line); border-radius: .5rem;
  box-shadow: 0 6px 18px rgba(0,0,0,.12); max-height: 15rem; overflow-y: auto; }
.suggerimenti .sugg { padding: .4rem .6rem; cursor: pointer; font-size: .9rem;
  border-bottom: 1px solid #f0f2f5; }
.suggerimenti .sugg:last-child { border-bottom: 0; }
.suggerimenti .sugg:hover, .suggerimenti .sugg.scelto { background: var(--sfondo-riga); }

/* Anagrafica del collaboratore: campi stretti in fila, per stare in tabella. */
.anagrafica-form { display: flex; flex-wrap: wrap; gap: .25rem; align-items: center; }
.anagrafica-form input[type=text] { padding: .2rem .35rem; font-size: .82rem;
  border: 1px solid var(--line); border-radius: .35rem; }
.anagrafica-form .muted { flex: 1 0 100%; margin-top: .15rem; }

/* Il PIN si digita, non si legge: cifre grandi e distanziate. */
.campo-pin { width: 100%; font-size: 1.6rem; letter-spacing: .5em;
  text-align: center; padding: .5rem; }

/* Elenco dei collaboratori: una riga a testa, con un colpo d'occhio sulle
   sezioni invece dell'elenco per esteso. */
.pallino-sezione { display: inline-block; background: var(--sfondo-riga); color: var(--primary);
  border-radius: 999px; padding: .05rem .4rem; font-size: .8rem; margin-right: .15rem; }

/* Permessi a scaletta: la sezione si apre e mostra le sue voci. */
details.scaletta { border: 1px solid var(--line); border-radius: .6rem;
  padding: .5rem .7rem; margin-bottom: .5rem; }
details.scaletta > summary { cursor: pointer; list-style: none; display: flex;
  align-items: center; justify-content: space-between; gap: .6rem; }
details.scaletta > summary::-webkit-details-marker { display: none; }
details.scaletta > summary::after { content: "▾"; color: var(--muted); font-size: .8rem; }
details.scaletta[open] > summary::after { content: "▴"; }
details.scaletta .quante { font-size: .8rem; }
details.scaletta .voci { margin: .5rem 0 .1rem 1.6rem; padding-left: .7rem;
  border-left: 2px solid var(--line); }
details.scaletta .voci .chk { display: block; padding: .18rem 0; font-size: .9rem; }
@media (max-width: 720px) {
  details.scaletta .voci .chk { padding: .38rem 0; }
}

/* ───────────────────────── Ambiente di prova ─────────────────────────────
   La fascia gialla in cima. Deve essere impossibile non vederla: la copia di
   prova è identica al gestionale vero, e chi si confonde lavora per niente.
   Sta appiccicata in alto anche scorrendo, perché su una pagina lunga la si
   perderebbe di vista dopo due schermate — ed è lì che ci si dimentica. */
.fascia-prova {
  position: sticky;
  top: 0;
  z-index: 9999;
  background: repeating-linear-gradient(45deg,
              #ffd400, #ffd400 18px, #f5c400 18px, #f5c400 36px);
  color: #1a1500;
  border-bottom: 3px solid #a37a00;
  padding: .55rem .9rem;
  font-size: .9rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem 1rem;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .25);
}
.fascia-prova strong { font-size: 1.05rem; letter-spacing: .04em; }
.fascia-prova a {
  margin-left: auto;
  color: #1a1500;
  font-weight: 600;
  white-space: nowrap;
}
/* Sul telefono la riga lunga manderebbe il pulsante a capo da solo: va bene,
   ma il titolo deve restare su una riga sua e ben leggibile. */
@media (max-width: 600px) {
  .fascia-prova { font-size: .82rem; padding: .45rem .6rem; }
  .fascia-prova strong { width: 100%; }
  .fascia-prova a { margin-left: 0; }
}

/* La freccina «hai già risposto» nell'elenco della posta. Verde acqua e non
   grigia: deve saltare all'occhio scorrendo un elenco di quaranta righe,
   altrimenti tanto vale non metterla. */
.segno-risposto {
  color: #0a7d6b;
  font-weight: 700;
  margin-right: .3rem;
  font-size: 1.05em;
}

/* Stellina del contrassegno e segni di priorità nell'elenco della posta.
   La stellina è un pulsante ma non deve sembrarlo: nell'elenco dei messaggi
   un bottone grigio ogni riga farebbe rumore. */
.stellina { display: inline; }
.btn-stellina {
  background: none;
  border: 0;
  padding: 0 .25rem 0 0;
  cursor: pointer;
  font-size: 1.15em;
  line-height: 1;
  color: #e0a800;
}
.btn-stellina:hover { color: #b98900; }
.priorita-alta { color: #c0392b; font-weight: 700; margin-right: .25rem; }
.priorita-bassa { color: #7a8b99; margin-right: .25rem; }

/* Il diario delle modifiche: righe lunghe da leggere, non una tabella. */
.elenco-novita { margin: .4rem 0 0 0; padding-left: 1.1rem; }
.elenco-novita li { margin-bottom: .55rem; line-height: 1.45; }

/* «C'è una versione nuova»: una striscia sobria in basso, non un allarme.
   In basso e non in cima perché in cima ci sono già la barra delle sezioni e,
   sull'ambiente di prova, la fascia gialla: una terza riga sposterebbe tutta
   la pagina proprio mentre la persona sta leggendo. */
/* ⚠️ Questa riga è indispensabile e il motivo non è ovvio.
   L'attributo «hidden» nasconde un elemento con `display: none`, ma la regola
   qui sotto dice `display: flex` ed è più specifica: vince lei. Risultato, la
   striscia restava visibile SEMPRE, fin dal caricamento, e nessun pulsante
   riusciva a toglierla — sembrava che ci fosse una versione nuova quando non
   c'era, e che il programma fosse rotto. Vale per qualunque elemento che si
   nasconde con «hidden» e a cui si dà un display diverso. */
#c-e-una-novita[hidden] { display: none !important; }

#c-e-una-novita {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 1rem;
  z-index: 9998;
  background: #12324a;
  color: #fff;
  padding: .6rem .9rem;
  border-radius: 10px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .3);
  display: flex;
  align-items: center;
  gap: .8rem;
  font-size: .9rem;
  max-width: calc(100vw - 2rem);
}
#c-e-una-novita button {
  background: #ffd400;
  color: #1a1500;
  border: 0;
  border-radius: 7px;
  padding: .35rem .7rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}

/* «Installa l'app» sul telefono ------------------------------------------
   Compare solo dal telefono e solo a chi non ha già il gestionale installato
   (lo decide lo script in base.html). Sta sopra il contenuto ma non è un
   allarme: colori tenui, e si chiude per sempre con un tocco. */
.avviso-app {
  max-width: var(--larghezza-pagina); margin: .8rem auto 0; padding: .6rem .8rem;
  background: var(--sfondo-riga); border: 1px solid #cfe0ee; border-radius: 9px;
  display: flex; align-items: center; gap: .8rem; flex-wrap: wrap;
  font-size: .9rem;
}
.avviso-app[hidden] { display: none; }
.avviso-app .avviso-app-testo { flex: 1 1 16rem; line-height: 1.45; }
.avviso-app .avviso-app-azioni {
  display: flex; gap: .4rem; align-items: center; flex: 0 0 auto;
}
/* Sul telefono i due pulsanti vanno sotto al testo e prendono tutta la
   larghezza: affiancati a un testo lungo diventano due bersagli stretti da
   sbagliare con il pollice. */
@media (max-width: 560px) {
  .avviso-app { margin: .6rem .6rem 0; }
  .avviso-app .avviso-app-azioni { flex: 1 1 100%; }
  .avviso-app .avviso-app-azioni .btn { flex: 1 1 auto; text-align: center; }
}

/* I collegamenti ai negozi nella pagina della verifica in due passaggi. */
.negozi { display: flex; gap: .4rem; flex-wrap: wrap; margin: .5rem 0 .2rem; }

/* Riquadri dei numeri che si aprono (riepilogo della Produzione) ----------
   Il numero da solo non dice che si può cliccare: ci vuole il dito del
   cursore, un movimento al passaggio e la freccetta. Chi non ha il permesso
   di quella pagina riceve un <a> senza indirizzo, che di suo non è
   cliccabile: nessuna regola qui sotto lo tocca, quindi resta un riquadro
   normale. */
a.card-link {
  display: block; color: inherit; cursor: pointer;
  transition: border-color .12s, box-shadow .12s, transform .12s;
  position: relative;
}
a.card-link:hover, a.card-link:focus-visible {
  border-color: var(--primary);
  box-shadow: 0 2px 8px rgba(20, 90, 138, .13);
  transform: translateY(-1px);
}
a.card-link .numero-grande { color: var(--primary); }
/* La freccetta sta in un angolo e non ruba spazio al numero. */
a.card-link::after {
  content: "›"; position: absolute; top: .7rem; right: .9rem;
  color: var(--muted); font-size: 1.3rem; line-height: 1;
}
a.card-link:hover::after { color: var(--primary); }
/* Chi si muove con la tastiera deve vedere dov'è. */
a.card-link:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* Elenco delle PEC: una riga per pratica, si apre al clic ------------------
   Come una casella di posta. Prima, sul telefono, ogni PEC diventava un
   blocco impilato di otto righe con l'etichetta davanti a ogni valore: si
   vedevano tre pratiche per schermata. */

.dett-griglia {
  display: grid; gap: .35rem 1.4rem;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  margin-bottom: .5rem;
}
.dett-et {
  color: var(--muted); font-size: .8rem; text-transform: uppercase;
  letter-spacing: .03em; margin-right: .35rem;
}
.dett-oggetto { margin: .2rem 0 .5rem; font-weight: 600; }
/* Il testo va a capo e si ferma: è un assaggio per riconoscere la PEC, non
   il posto dove leggerla. */
.dett-corpo {
  margin: 0 0 .6rem; white-space: pre-wrap; color: var(--ink);
  border-left: 3px solid var(--line); padding-left: .7rem;
}
.dett-azioni { margin: 0; display: flex; gap: .7rem; align-items: center; flex-wrap: wrap; }

/* Sul telefono la riga deve restare UNA riga: le colonne che tolgo qui
   (azienda, consegna, assegnatario, stato) si vedono tutte aprendola, quindi
   non si perde niente. Se un giorno si cambia l'ordine delle colonne
   nell'intestazione, questi numeri vanno rifatti. */
@media (max-width: 820px) {
  .elenco-pec th:nth-child(3), .elenco-pec tr.riga-apribile td:nth-child(3),
  .elenco-pec th:nth-child(6), .elenco-pec tr.riga-apribile td:nth-child(6),
  .elenco-pec th:nth-child(7), .elenco-pec tr.riga-apribile td:nth-child(7),
  .elenco-pec th:nth-child(8), .elenco-pec tr.riga-apribile td:nth-child(8) {
    display: none;
  }
  .dett-griglia { grid-template-columns: 1fr; }
}

/* Accesso di sola consultazione -------------------------------------------
   Sta in cima a ogni pagina e non si chiude: chi ha questo accesso vede le
   pagine identiche agli altri, e senza questa riga scoprirebbe il limite solo
   premendo un pulsante — sembrerebbe un guasto invece di una scelta.
   Colore diverso dalla fascia gialla della prova, o le due si confondono. */
.fascia-lettura {
  max-width: var(--larghezza-pagina); margin: .8rem auto 0; padding: .45rem .8rem;
  background: var(--linea-chiara); border: 1px solid #cfd8e2; border-left: 4px solid #5a6b7a;
  border-radius: 8px; font-size: .9rem; color: var(--ink);
}
@media (max-width: 560px) { .fascia-lettura { margin: .6rem .6rem 0; } }

/* Scheda del carico: una riga per commessa ---------------------------------
   Le lavorazioni sono spunte sulla stessa riga, non righe a parte: lo stesso
   capo compariva una volta per fase e la tabella si allungava senza dire
   niente in più. */

.elenco-commesse td.num, .elenco-commesse th.num { text-align: right; }

/* Le intestazioni delle fasi sono lunghe («RICAMO SU TAGLIATO PER TASCHE») e
   allargherebbero la tabella oltre lo schermo: si scrivono in verticale, così
   la colonna resta stretta quanto la spunta. */
.elenco-commesse th.fase-col {
  text-align: center; vertical-align: bottom; white-space: nowrap;
  writing-mode: vertical-rl; transform: rotate(180deg);
  max-height: 8.5rem; font-size: .7rem; padding: .4rem .15rem;
}
.elenco-commesse td.fase-col { text-align: center; width: 1.8rem; }
.spunta-fase { color: #1e7d4f; font-weight: 700; font-size: 1.05rem; }
.spunta-no { color: var(--testo-tenue); }

.elenco-commesse tr.riga-totale > td {
  background: var(--sfondo-totale); border-top: 2px solid var(--line); font-size: .9rem;
}

.titolo-dett { margin: .8rem 0 .3rem; font-size: .82rem; color: var(--muted);
  text-transform: uppercase; letter-spacing: .04em; }
.tabella-dentro { width: 100%; border-collapse: collapse; background: #fff;
  border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
/* ⚠️ **Stesse misure delle tabelle di fuori.** Prima le righe dentro erano
   più alte e con un carattere diverso: si vedeva subito che erano due tabelle
   disegnate in due momenti, e l'occhio ci inciampa. Un solo blocco di misure
   per tutte, così restano uguali anche quando se ne cambia una. */
.tabella-dentro th { text-align: left; font-size: .7rem; text-transform: uppercase;
  letter-spacing: .03em; color: var(--muted); padding: .3rem .5rem;
  border-bottom: 1px solid var(--line); background: var(--sfondo-testa); }
.tabella-dentro td {
  padding: .1rem .5rem; font-size: .82rem; line-height: 1.35;
  border-bottom: 1px solid var(--linea-chiara);
}
.tabella-dentro td.num, .tabella-dentro th.num { text-align: right; }
/* Le righe dentro si cliccano tutte intere, come quelle di fuori: andare a
   cercare il pulsantino «apri» in fondo alla riga è una mira inutile, e sul
   telefono si sbaglia bersaglio. */
.tabella-dentro tr.riga { cursor: pointer; }
.tabella-dentro tr.riga:hover > td { background: var(--sfondo-riga); }
.tabella-dentro a { text-decoration: none; }
.tabella-dentro a:hover { text-decoration: underline; }

/* Il riepilogo in cima alla scheda di un carico: i numeri che si cercano per
   primi, senza dover scorrere fino in fondo alla tabella. */
.riepilogo-carico {
  display: flex; gap: 1.6rem; flex-wrap: wrap; align-items: flex-end;
  background: var(--card); border: 1px solid var(--line); border-radius: 10px;
  padding: .7rem 1.1rem; margin: .8rem 0 0;
}
.riepilogo-carico .voce-grossa { display: flex; flex-direction: column; }
.riepilogo-carico .numero { font-size: 1.6rem; font-weight: 700; line-height: 1.1; }
.riepilogo-carico .voce-grossa:first-child .numero { color: var(--primary); }
.riepilogo-carico .etichetta { color: var(--muted); font-size: .82rem; }
/* elenco dei carichi: colonna e totale dei capi */
.tabella td.num, .tabella th.num { text-align: right; }
.tabella tr.riga-totale > td {
  background: var(--sfondo-totale); border-top: 2px solid var(--line); border-bottom: none;
}

/* «di cui»: i capi divisi per lavorazione, sotto al riepilogo del carico. */
.capi-per-fase {
  display: flex; gap: .5rem 1.1rem; flex-wrap: wrap; align-items: baseline;
  margin: .5rem 0 .2rem; padding: 0 .2rem;
}
.capi-per-fase .di-cui {
  color: var(--muted); font-size: .82rem; text-transform: uppercase;
  letter-spacing: .04em;
}
.capi-per-fase .voce-fase { white-space: nowrap; font-size: .9rem; }
.capi-per-fase .voce-fase .spunta-fase { margin-right: .15rem; }
.nota-fasi { margin: .1rem 0 0; padding: 0 .2rem; }

/* «da tagliare» si distingue a colpo d'occhio dalle altre voci: è l'unica che
   dice che c'è del lavoro di taglio da fare qui dentro. */
.capi-per-fase .voce-taglio .pallino-taglia { color: var(--warn); font-weight: 700; }
.capi-per-fase.altre-lavorazioni { margin-top: .1rem; }
.capi-per-fase.altre-lavorazioni .voce-fase { font-size: .9rem; }

/* Elenco dei carichi: una riga per carico, i DDT dentro. */

/* Una bolla superata non conta nei totali: si vede che c'è, ma smorzata. */
.elenco-carichi .ddt-superato td { opacity: .55; }
.elenco-carichi .esito.piccolo { display: inline-block; margin-right: .25rem; }

/* Sottomenù a finestra, come in Windows: la voce apre il suo pannello a
   lato. Si apre passandoci sopra col mouse **o** toccandola (il tocco dà il
   fuoco alla voce, e `focus-within` fa il resto): senza quello, su uno schermo
   touch il sottomenù non si aprirebbe mai. */
body.finestra-pc .voce-sotto { position: relative; }
body.finestra-pc .titolo-sotto {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; gap: 1.2rem; background: none; border: 0; cursor: pointer;
  font: inherit; color: inherit; text-align: left; padding: .35rem .9rem;
}
body.finestra-pc .voce-sotto:hover > .titolo-sotto,
body.finestra-pc .voce-sotto:focus-within > .titolo-sotto {
  background: var(--primary); color: #fff;
}
body.finestra-pc .titolo-sotto .freccia { font-size: 1rem; opacity: .65; }
body.finestra-pc .sotto-tendina {
  display: none; position: absolute; left: 100%; top: -4px; min-width: 210px;
  background: var(--card); border: 1px solid var(--line); border-radius: 0 6px 6px 6px;
  box-shadow: 0 8px 20px rgba(0,0,0,.16); padding: 4px 0; z-index: 30;
}
body.finestra-pc .voce-sotto:hover > .sotto-tendina,
body.finestra-pc .voce-sotto:focus-within > .sotto-tendina { display: block; }
/* Vicino al bordo destro il pannello uscirebbe dallo schermo: si apre a
   sinistra. Il menù della Produzione è il secondo, quindi capita di rado, ma
   su una finestra stretta capita. */
@media (max-width: 720px) {
  body.finestra-pc .sotto-tendina { left: auto; right: 100%; border-radius: 6px 0 6px 6px; }
}
/* Nel menù orizzontale i gruppi si staccano con una barretta sottile. */
#menu .stacco-menu { color: var(--testo-tenue); user-select: none; padding: 0 .1rem; }

/* Il numero di versione in fondo alla pagina: piccolo, grigio, non deve
   rubare attenzione — ma deve esserci sempre, o non c'è modo di sapere se si
   sta guardando l'ultima versione o una pagina vecchia rimasta aperta. */
.versione-piede {
  margin: 2rem 0 .5rem; text-align: right; color: var(--testo-tenue);
  font-size: .7rem; letter-spacing: .02em;
}

/* Il pallino di quale Claude sta rispondendo in chat, accanto alla versione.
   Richiesta di Remo, 8 agosto 2026: «così lo so anche io». Molto sbiadito
   apposta — vince .versione-piede per il grigio, qui si aggiunge solo il
   colore al pallino: è un'informazione di contorno, non un semaforo. */
.pallino-modello {
  margin-left: .5em; opacity: .75;
}
.pallino-modello-verde     { color: #8fbf9f; }  /* leggera e veloce (Haiku) */
.pallino-modello-arancione { color: #d9ad7c; }  /* di mezzo (Sonnet) */
.pallino-modello-rosso     { color: #cf9494; }  /* la più forte (Opus) */


/* ══════════ RIGHE CHE SI APRONO: una struttura sola per tutte le pagine ════
   ⚠️ Era scritta tre volte quasi uguale — elenco PEC, elenco carichi, scheda
   del carico — con tre nomi di classe diversi. Tre copie della stessa cosa
   prima o poi si comportano in tre modi diversi. Ora chi fa un elenco nuovo
   mette `righe-aperte` sulla tabella, `riga-apribile` sulla riga e
   `riga-dettaglio` su quella nascosta, e ha tutto: apertura col mouse, con il
   dito e con la tastiera, e lo stesso aspetto delle altre pagine. */
.righe-aperte tr.riga-apribile { cursor: pointer; }
.righe-aperte tr.riga-apribile:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.righe-aperte tr.riga-apribile.aperta > td { background: var(--sfondo-riga); }
.righe-aperte tr.riga-apribile.aperta > td:first-child { box-shadow: inset 3px 0 0 var(--primary); }
.righe-aperte tr.riga-dettaglio > td { background: var(--sfondo-dentro); padding: .7rem 1rem 1rem; }
/* i numeri stanno a destra dappertutto, o le cifre non si confrontano a occhio */
.tabella td.num, .tabella th.num, .tabella-dentro td.num, .tabella-dentro th.num { text-align: right; }
/* la riga del totale si stacca da quelle dei dati */
.tabella tr.riga-totale > td, .tabella-dentro tfoot td {
  background: var(--sfondo-totale); border-top: 2px solid var(--line); border-bottom: none;
}


/* ══════════ IL TESTO: una scala sola per tutto il gestionale ══════════════
   ⚠️ Si era arrivati a sei misure diverse nell'arco di un decimo di
   millimetro (.78 .8 .82 .85 .88 .9): differenze che non si vedono una per
   una, ma che messe vicine fanno sembrare le pagine disegnate da persone
   diverse. La scala è questa, e non se ne aggiungono altre:

     .7rem   etichette e intestazioni di tabella (MAIUSCOLETTO)
     .8rem   scritte di servizio, note, «piccolo»
     .82rem  il corpo delle tabelle
     .9rem   il testo normale
     1.05 / 1.15 / 1.3 / 1.6rem   titoli e numeri grossi

   Stessa cosa per i colori: si usano le variabili di `:root`, non si scrive
   un colore nuovo a mano. */
.piccolo { font-size: .8rem; }
.muted { color: var(--muted); }
/* Le intestazioni di tabella sono tutte uguali, dentro e fuori le righe
   aperte: stesso corpo, stesso maiuscoletto, stesso grigio. */
.tabella th, .tabella-dentro th {
  font-size: .7rem; text-transform: uppercase; letter-spacing: .03em;
  color: var(--muted); background: var(--sfondo-testa);
  /* ⚠️ **L'intestazione di una colonna sta su UNA riga sola.** Richiesta di
     Remo. «Ultima lettura» o «Descrizione» andavano a capo e quella colonna
     diventava alta il doppio delle altre: la riga delle intestazioni si
     sfrangiava e le colonne non si leggevano più in fila. Adesso che la
     pagina si allarga con lo schermo lo spazio c'è; dove non c'è, la tabella
     scorre di lato (`.scorre-lato`), che è il male minore rispetto a
     un'intestazione su due piani. */
  white-space: nowrap;
}
/* la freccina dell'ordinamento non si stacca mai dal nome della colonna */
.tabella th a, .tabella-dentro th a { white-space: nowrap; }

/* ⚠️ Due eccezioni, e sono volute: le fasi nella scheda del carico sono
   scritte **in verticale** («RICAMO SU TAGLIATO PER TASCHE» in orizzontale
   sfonda lo schermo) e lì il `nowrap` ce l'hanno già per conto loro. */

/* Spedizioni, colonna «Carico»: il DDT è arrivato ma il file per Mexal non è
   ancora stato fatto. **Si apre come tutti gli altri**, e lo deve dimostrare.

   ⚠️ Storia di due errori miei di fila, l'08/09/2026, che vale la pena tenere.
   PRIMO: `cursor: default` e nessun collegamento nel modello — il grigio
   toglieva la possibilità di aprire il carico, e 20 righe su 47 erano un
   vicolo cieco. Messo il collegamento.
   SECONDO, subito dopo: il collegamento c'era ma la scritta restava **grigio
   chiaro, in Consolas e più piccola** — cioè aveva tutta l'aria di una cosa
   spenta. Remo ha rimandato la schermata: cliccabile e «non cliccabile» si
   vedevano identiche a quelle di prima, e nessuno ci avrebbe mai provato.
   **Rendere una cosa possibile non basta: deve anche sembrare possibile.**

   Ora ha il colore e il corpo degli altri collegamenti; a dire che il file per
   Mexal non è pronto restano la **sottolineatura puntinata** e la scritta che
   esce col mouse. Lo stato si legge, la strada si vede. */
.carico-in-attesa {
  color: var(--primary);
  border-bottom: 1px dotted var(--testo-tenue); cursor: pointer;
}

/* ══════════ Riga in attesa: c'è il DDT ma il file per Mexal non è stato
   ancora scaricato ═══════════════════════════════════════════════════════
   Tutta la riga sbiadita e ferma. Sbiadire l'intera riga dice a colpo d'occhio
   «questa non è ancora da lavorare»; un grigino su una sola colonna si perde
   fra migliaia di righe — è successo davvero, e le righe non si trovavano.
   ⚠️ **Resta cliccabile solo il numero della commessa**, che torna a piena
   tinta: è l'unica via d'uscita dalla riga, e se sbiadisse anche lui non si
   capirebbe che si può premere. */
tr.riga-sbiadita > td { opacity: .45; cursor: default; }
tr.riga-sbiadita:hover > td { background: transparent; }
tr.riga-sbiadita a { opacity: 1; font-weight: 600; }
tr.riga-sbiadita td:has(a) { opacity: 1; }
/* `:has()` non c'è sui browser più vecchi: lì la cella resta sbiadita ma il
   collegamento si preme lo stesso, quindi non si resta chiusi fuori. */

/* Barra in fondo agli elenchi: quante righe e come si va avanti. */
.barra-pagine {
  display: flex; gap: 1rem; flex-wrap: wrap; align-items: center;
  margin: .7rem 0 0; padding: .5rem .2rem; font-size: .82rem;
  border-top: 1px solid var(--line);
}
.barra-pagine .quante a { padding: 0 .15rem; }
.barra-pagine .scelta-attiva { color: var(--primary); }
.barra-pagine .avanti-indietro { margin-left: auto; display: flex; gap: .4rem; }
@media (max-width: 560px) {
  .barra-pagine .avanti-indietro { margin-left: 0; width: 100%; }
  .barra-pagine .avanti-indietro .btn { flex: 1 1 auto; text-align: center; }
}

/* Commessa chiusa a mano: resta in elenco — chiudere non è cancellare — ma si
   distingue a colpo d'occhio da una che il lavoro ha chiuso davvero. */
.riga-chiusa-a-mano > td { opacity: .62; }
.tag-chiusa { background: var(--neutral); color: #fff; }

/* La riga dei sistemi in produzione: il tipo (lettore, taglio, Joker…) come
   etichetta discreta accanto al nome, non come colonna a sé — sono una parola
   sola e una colonna intera per una parola è spazio buttato. */
.tag-tipo { background: var(--linea-chiara); color: var(--muted);
  text-transform: uppercase; font-size: .68rem; letter-spacing: .04em; }

/* I bollini della pagina Macchine. ⚠️ Non si usano da soli: accanto c'è sempre
   la parola («allineato», «da aggiornare»…). Il colore serve a trovare la riga
   in mezzo alle altre, la parola dice cosa vuol dire — chi apre la pagina due
   volte l'anno la legenda non se la ricorda. */
.bollino { font-size: 1.05rem; line-height: 1; vertical-align: -.05em; }
.bollino-verde  { color: var(--ok); }
.bollino-giallo { color: var(--warn); }
.bollino-rosso  { color: #b3261e; }
.bollino-grigio { color: var(--testo-tenue); }
/* Arancione dei carichi «pronti da caricare in Mexal» (Remo, 04/09/2026).
   ⚠️ Non si riusa il giallo: giallo e arancio nella stessa pagina sarebbero
   due stati diversi con lo stesso colore, e il bollino serve proprio a
   distinguere a colpo d'occhio. */
.bollino-arancio { color: #d9610a; }

/* Il dettaglio di un computer nella pagina Macchine: le sezioni del rapporto.
   ⚠️ **Sono tutte CHIUSE, e i titoli stanno in fila come tasti.** Fino al 24
   agosto 2026 le prime due erano aperte; quando è arrivata la scansione della
   rete, sotto ogni computer comparivano una sessantina di righe e la pagina
   non si leggeva più. Un elenco serve a confrontare le righe fra loro: se una
   riga occupa tre schermate, l'elenco non è più un elenco. */
.dett-testa { font-size: .82rem; margin-bottom: .5rem; }
.specifiche, .specifiche-tasti { display: grid; gap: .4rem; }
/* i titoli in fila: si vede subito COSA c'è, e si apre solo quello che serve */
.specifiche-tasti { display: flex; flex-wrap: wrap; gap: .35rem; align-items: flex-start; }
.specifiche-tasti > .specifica { flex: 0 0 auto; }
.specifiche-tasti > .specifica[open] { flex: 1 1 100%; }
.specifiche-tasti > .specifica > summary {
  background: var(--sfondo-totale, #f2f2f2); border: 1px solid var(--bordo, #ddd);
  border-radius: 999px; padding: .25rem .7rem; white-space: nowrap; }
.specifiche-tasti > .specifica[open] > summary { border-color: var(--accento, #999); }
.specifica > summary { cursor: pointer; font-size: .78rem; text-transform: uppercase;
  letter-spacing: .03em; color: var(--muted); padding: .2rem 0; }
.elenco-specifica { margin: .2rem 0 .4rem; padding-left: 1.1rem;
  font-size: .8rem; line-height: 1.45; }
.elenco-specifica li { font-family: ui-monospace, Consolas, monospace;
  word-break: break-all; }

/* Un ordine lasciato a un computer, in attesa che passi a prenderlo. */
.tag-attesa { background: var(--sfondo-totale); color: var(--warn);
  border: 1px solid var(--linea-chiara); }
.attesa-ordini { font-size: .82rem; background: #fff6df;
  border: 1px solid #ecd9a0; border-radius: 7px; padding: .45rem .7rem;
  margin: 0 0 .6rem; }

/* Un computer che si è presentato e aspetta di sapere cos'è. Colore diverso
   dagli altri stati: non è un guasto, è una domanda rivolta a una persona. */
.bollino-viola { color: #6b3fa0; }
.da-classificare { background: #f3eefc; border: 1px solid #ddd0f0;
  border-radius: 8px; padding: .6rem .8rem; margin-bottom: .6rem; font-size: .85rem; }

/* ⚠️ Il marchio nelle pagine di ACCESSO: stesso aspetto del logo con
   collegamento, ma non è un collegamento — finché non si è entrati non c'è
   nessun posto dove andare, e un logo cliccabile che non porta da nessuna
   parte è una promessa non mantenuta. */
.topbar .brand .marchio-accesso {
  display: inline-flex; align-items: center; gap: .55rem;
  font-weight: 700; color: var(--ink); font-size: 1.05rem;
}

/* Il numero delle mail non lette accanto a «📧 Posta».
   ⚠️ Compare **solo se ce ne sono**: un «0» perenne diventa rumore, e dopo due
   giorni non lo guarda più nessuno — che è il modo in cui un avviso muore. */
.pallino-conteggio {
  display: inline-block; min-width: 1.15em; padding: 0 .35em;
  margin-left: .35em; border-radius: 1em;
  background: #c0392b; color: #fff;
  font-size: .78rem; font-weight: 700; line-height: 1.45;
  text-align: center; vertical-align: text-top;
}

/* Il «+» che apre le varianti di un modello.
   ⚠️ Diventa «−» quando la riga è aperta: senza, non si capisce se il dettaglio
   sotto appartiene a quella riga o a quella dopo. */
.segno-apri { display: inline-block; width: 1em; font-weight: 700; color: var(--testo-tenue); }
.riga-apribile[aria-expanded="true"] .segno-apri::after { content: ""; }
.riga-apribile[aria-expanded="true"] .segno-apri { font-size: 0; }
.riga-apribile[aria-expanded="true"] .segno-apri::before { content: "−"; font-size: 1rem; }

/* La «i» accanto a un prezzo: chi l'ha messo e quando.
   ⚠️ Piccola e tenue di proposito: è un dato che si cerca quando serve, non
   un'informazione da leggere ogni volta. Se pesasse quanto il prezzo,
   toglierebbe attenzione al prezzo. */
.info-modifica {
  display: inline-block; width: 1.15em; height: 1.15em; line-height: 1.15em;
  margin-left: .35em; border-radius: 50%;
  border: 1px solid var(--linea-chiara); color: var(--testo-tenue);
  font-size: .7rem; font-weight: 700; text-align: center;
  font-family: Georgia, serif; cursor: help; vertical-align: middle;
}
.info-modifica:hover, .info-modifica:focus { border-color: var(--primary); color: var(--primary); }

/* Prezzo messo dal programma e non ancora confermato da una persona.
   ⚠️ NON si usa `.info-modifica` per questo: quella è un CERCHIETTO di
   larghezza fissa (1,15em), fatto per una lettera sola. Infilandoci dentro una
   parola le lettere escono dal cerchio e restano bianche su fondo bianco —
   Remo, 01/09/2026: «il pallino giallo si accavalla con la scritta auto che
   oltretutto è in bianco su bianco». Qui è una pillola che si allarga col
   testo, con colori che si leggono. Sparisce da sola al primo salvataggio:
   quando qualcuno tocca il prezzo, il nome viene scritto e il bollino non
   compare più. */
.da-confermare {
  display: inline-block; margin-left: .4em; padding: .05em .5em;
  border-radius: 1em; border: 1px solid #f0b429;
  background: #fef3c7; color: #8a5a00;
  font-size: .68rem; font-weight: 700; letter-spacing: .01em;
  vertical-align: middle; white-space: nowrap; cursor: help;
}

/* Un'eccezione storicizzata: si vede che non è più in servizio, ma si legge.
   ⚠️ Tenue, non barrata: barrata sembrerebbe un errore o una cosa da buttare,
   mentre è un dato buono che ha finito il suo turno. */
.riga-storicizzata { opacity: .55; }
.riga-storicizzata td { font-style: italic; }

/* ── UNA SOLA barra di navigazione, in stile Windows (1 settembre 2026) ──────
   Remo: «è più coerente lo stile Windows e ne rimane solo una». Prima ce
   n'erano due — il menù a tendine (solo nella finestra del PC) e le linguette
   delle sezioni — e si disallineavano di continuo: il giorno che sono nate
   Contabilità e Tecnico, dal menù del PC non si raggiungevano proprio.
   Adesso: sul computer comanda la barra a tendine, sul telefono il tastino ☰. */
.barra-menu { display: flex; align-items: stretch; gap: 0;
  background: #f3f5f7; border-bottom: 1px solid #ccd3da;
  font-size: .9rem; position: sticky; top: 0; z-index: 40; user-select: none; }
.voce-menu { position: relative; }
.titolo-menu { border: 0; background: none; font: inherit; color: var(--ink);
  padding: .34rem .85rem; cursor: pointer; height: 100%; }
.titolo-menu:hover { background: #e2e9f0; }
.voce-menu.aperta .titolo-menu { background: #d7e5f3; }
.tendina { display: none; position: absolute; top: 100%; left: 0; min-width: 15rem;
  background: #fff; border: 1px solid #b9c0c7; border-radius: 0 0 3px 3px;
  box-shadow: 0 8px 18px rgba(0,0,0,.18); padding: .25rem 0; z-index: 50; }
.voce-menu.aperta .tendina { display: block; }
/* sul computer il menù della barra blu non serve più: sarebbe la terza mappa */
@media (min-width: 821px) { .topbar nav#menu { display: none; } }
/* sul telefono la barra a tendine non si usa: comanda il ☰ */
@media (max-width: 820px) { .barra-menu { display: none; } }
.solo-telefono { display: none; }
@media (max-width: 820px) {
  .solo-telefono { display: flex; flex-wrap: wrap; gap: .3rem;
    padding-bottom: .4rem; margin-bottom: .3rem;
    border-bottom: 1px solid rgba(255,255,255,.18); }
  .cambia-sezione a { padding: .25rem .5rem; border-radius: 6px; }
  .cambia-sezione a.attiva { background: var(--primary); color: #fff; }
}

/* --- Il menù ☰ sul telefono: sezioni ordinate e stacchi orizzontali ---------
   Segnalato da Remo, 01/09/2026: «la barra superiore non è proporzionata e si
   accavallano varie schede». Due difetti, tutti e due nati quando il menù è
   passato da orizzontale (sul computer) a verticale (sul telefono):

   1. le cinque sezioni erano elementi in fila con `flex-wrap`, e andavano a
      capo dove capitava — quattro su una riga e «Posta» da sola sotto, con
      larghezze tutte diverse. Ora sono una griglia a celle uguali: si
      dispongono da sole, allineate, e restano leggibili per intero;
   2. gli stacchi fra i gruppi di voci sono una barretta «|» pensata per il
      menù in orizzontale (vedi `#menu .stacco-menu` più sopra): in colonna
      diventavano trattini orfani su righe vuote — ben visibili nella
      Produzione. Qui diventano una linea sottile per tutta la larghezza, che
      è quello che uno stacco deve fare in un elenco.

   ⚠️ Il bordo sotto le sezioni era `rgba(255,255,255,.18)`: si vedeva sulla
   fascia blu, tolta l'1/09/2026 con 2026.09.01-4. Su fondo bianco era
   invisibile, e le sezioni sembravano appiccicate alle voci sotto.          */
@media (max-width: 820px) {
  .solo-telefono.cambia-sezione {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr));
    gap: .35rem;
    padding-bottom: .55rem; margin-bottom: .45rem;
    border-bottom: 1px solid var(--line);
  }
  .cambia-sezione a {
    display: flex; align-items: center; justify-content: center;
    min-height: 40px; padding: .3rem .5rem;
    text-align: center; white-space: nowrap;
  }
  #menu .stacco-menu {
    display: block; width: 100%; height: 0; padding: 0;
    margin: .45rem 0; border-top: 1px solid var(--line);
    font-size: 0; line-height: 0; color: transparent;
  }
}

/* ── Le tendine vestite bene su OGNI computer (01/09/2026, sera) ─────────────
   La barra in stile Windows dall'1/09 si vede su ogni PC (2026.09.01-4), e da
   stasera i suoi menù si aprono ovunque (2026.09.01-7). Ma i vestiti delle
   VOCI — collegamenti in colonna, separatori, sottomenù — esistevano solo con
   il prefisso `body.finestra-pc`: fuori dal programma le tendine si aprivano
   nude, voci in fila e sottomenù alla rinfusa (Remo, 01/09/2026: «fa schifo
   ora»). Qui le stesse regole, senza prefisso. Il riquadro della tendina
   (.tendina) c'è già dalle 18:00; queste sono le voci che ci stanno dentro. */
.tendina a {
  display: block; padding: .38rem 1.1rem; color: var(--ink); text-decoration: none;
  white-space: nowrap;
}
.tendina a:hover { background: var(--primary); color: #fff; }
.tendina .separatore { height: 1px; background: #e2e6ea; margin: .25rem .5rem; }
.menu-utente { margin-left: auto; align-self: center; padding: 0 .9rem; color: var(--muted); }
.voce-sotto { position: relative; }
.titolo-sotto {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; gap: 1.2rem; background: none; border: 0; cursor: pointer;
  font: inherit; color: inherit; text-align: left; padding: .35rem .9rem;
}
.voce-sotto:hover > .titolo-sotto,
.voce-sotto:focus-within > .titolo-sotto { background: var(--primary); color: #fff; }
.titolo-sotto .freccia { font-size: 1rem; opacity: .65; }
.sotto-tendina {
  display: none; position: absolute; left: 100%; top: -4px; min-width: 210px;
  background: var(--card); border: 1px solid var(--line); border-radius: 0 6px 6px 6px;
  box-shadow: 0 8px 20px rgba(0,0,0,.16); padding: 4px 0; z-index: 30;
}
.voce-sotto:hover > .sotto-tendina,
.voce-sotto:focus-within > .sotto-tendina { display: block; }

/* Due barre appiccicose una sull'altra si accavallano scorrendo: dove comanda
   la barra a tendine (dal computer), la barra bianca scorre via con la pagina.
   È il pasticcio della prima schermata di Remo: «Accessi / Aggiorna / Esci»
   galleggiava sopra la tabella. */
@media (min-width: 821px) { .topbar { position: static; } }

/* ── Un rigo solo sul computer (Remo, 01/09/2026: «non basta uno solo?») ─────
   La barra bianca era il secondo rigo: dentro il programma per Windows veniva
   nascosta da sempre, nel browser no — un avanzo della transizione. Dal
   computer ora comanda solo la barra dei menù, con a destra le tre cose che
   devono restare in vista: l'assistente, chi è collegato, Esci. Sul telefono
   (≤820px) non cambia nulla: lì la barra bianca È la navigazione (☰). */
@media (min-width: 821px) { .topbar { display: none; } }
.assistente-barra {
  margin-left: auto; align-self: center;
  padding: .34rem .7rem; text-decoration: none; color: var(--ink);
}
.assistente-barra:hover { background: #e2e9f0; }
.barra-menu .menu-utente { margin-left: 0; }
.esci-barra {
  align-self: center; padding: .34rem .8rem;
  text-decoration: none; color: var(--muted);
}
.esci-barra:hover { background: #e2e9f0; color: var(--ink); }

/* Il ☰ come le tendine del PC: tutti i gruppi in pagina, se ne vede uno.
   display:contents lascia che le voci del gruppo si impilino nel menù come
   se il contenitore non ci fosse. */
.gruppo-sezione { display: none; }
.gruppo-sezione.attivo { display: contents; }

/* ═══ Il grafico a linee della home Produzione ════════════════════════════
   ⚠️ SVG puro, senza librerie: si ridimensiona con la finestra e non fa
   scaricare niente da internet — in reparto la linea va piano. Le coordinate
   arrivano già calcolate dal server, qui c'è solo l'aspetto.
   ⚠️ Il tratto della linea usa `vector-effect` perché il viewBox è schiacciato:
   senza, allargando la finestra la linea si assottiglierebbe. */
.grafico-linee { display: flex; gap: .5rem; height: 210px; margin-top: .8rem; }
/* ⚠️ Larga abbastanza per «250.000»: da quando l'asse porta i capi per intero
   (07/09/2026) le 2.4rem di prima mandavano il numero a capo, e una tacca su
   due righe scavalca quella sotto. */
.asse-y { position: relative; width: 3.6rem; flex: none;
  font-size: .72rem; color: var(--muted); }
.asse-y .tacca { position: absolute; right: .3rem; transform: translateY(-50%);
  white-space: nowrap; }
.asse-y .unita { position: absolute; bottom: -1.15rem; right: .3rem;
  font-size: .66rem; opacity: .8; }
.tela { position: relative; flex: 1; border-left: 1px solid var(--line);
  border-bottom: 1px solid var(--line); }
.tela .disegno { width: 100%; height: 100%; display: block; overflow: visible; }
.riga-guida { stroke: var(--line); stroke-width: .5; vector-effect: non-scaling-stroke; }
.linea { fill: none; stroke-width: 2; vector-effect: non-scaling-stroke;
  stroke-linejoin: round; stroke-linecap: round; }
.linea-carichi { stroke: var(--primary); }
.linea-scarichi { stroke: #c98b3a; }
.punto { position: absolute; width: 8px; height: 8px; border-radius: 50%;
  transform: translate(-50%, -50%); border: 2px solid #fff; cursor: default; }
.punto-carichi { background: var(--primary); }
.punto-scarichi { background: #c98b3a; }
/* ⚠️ Il margine a sinistra deve valere **quanto l'asse dei capi più lo spazio**
   (3.6 + 0.5): se no le scritte dei mesi partono dal bordo della scheda invece
   che dall'inizio del disegno, e ogni mese indica un punto che non è il suo.
   Con le tacche messe a percentuale (grafico a giornate) lo sfasamento diventa
   visibile: prima erano 2.9rem e nessuno se n'era accorto. */
.asse-x { display: flex; margin-left: 4.1rem; margin-top: .3rem;
  font-size: .72rem; color: var(--muted); }
.asse-x span { flex: 1; text-align: center; }
.asse-x span:first-child { text-align: left; }
.asse-x span:last-child { text-align: right; }
.legenda-grafico { display: flex; gap: 1rem; align-items: center;
  font-size: .82rem; color: var(--muted); flex-wrap: wrap; }
.legenda-grafico .quadro { display: inline-block; width: .7rem; height: .7rem;
  border-radius: 2px; margin-right: .25rem; vertical-align: -1px; }
.quadro-carichi { background: var(--primary); }
.quadro-scarichi { background: #c98b3a; }
.linea-fatturati { stroke: #7f8fbf; }
.punto-fatturati { background: #7f8fbf; }
.quadro-fatturati { background: #7f8fbf; }
/* ⚠️ I filtri del grafico stanno sopra e su una riga sola: sotto, si
   sceglierebbe dopo aver guardato — cioè troppo tardi. */
.filtri-grafico { align-items: center; gap: .8rem; margin-bottom: .4rem; }
.filtri-grafico .scelte-linee { display: flex; gap: .7rem; flex-wrap: wrap; }
.filtri-grafico label { display: inline-flex; align-items: center; gap: .3rem; }
/* ⚠️ Il righello dei mesi: verticale e leggerissimo. Serve a sapere di quando è
   una punta, non a farsi guardare — se si vede troppo diventa lui il grafico. */
.riga-mese { stroke: var(--line); stroke-width: 1; vector-effect: non-scaling-stroke; opacity: .5; }
/* ⚠️ Con i punti a giornata le etichette non possono più stare in fila
   (`space-between`): vanno messe **dove cade il mese**, se no la scritta non
   sta sotto la sua riga e indica un momento sbagliato. */
.asse-righello { position: relative; height: 1.1rem; }
.asse-righello span { position: absolute; transform: translateX(-50%); }
/* ⚠️ La giacenza è lo **sfondo**, non una quarta linea in gara: tratto largo,
   colore tenue, disegnata per prima così le altre le passano sopra. Sale col
   carico e scende con lo scarico, e fra un movimento e l'altro resta piatta. */
.linea-giacenza { stroke: #d8a657; stroke-width: 3.5; opacity: .75; }
.punto-giacenza { background: #d8a657; width: .34rem; height: .34rem; opacity: .8; }
.quadro-giacenza { background: #d8a657; }
/* La riga dello zero, quando la giacenza scende sotto: sotto quella riga vuol
   dire «consegnato più di quanto risulta entrato», ed è un confine da vedere. */
.riga-zero { stroke: var(--muted); stroke-width: 1; vector-effect: non-scaling-stroke;
  opacity: .55; stroke-dasharray: 4 3; }