/* DigiDoc - interfaccia
 *
 * Bianco e un solo blu. Niente guscio scuro, niente secondo accento, niente
 * aloni: il colore lo portano soltanto lo stato attivo della navigazione, i
 * pulsanti primari e le barre. Tutto il resto e' bianco, grigio di bordo e
 * testo scuro.
 *
 * Un accento solo, e sempre lo stesso (--blu): un blu navy scuro, non brillante.
 * Superfici piatte - niente gradienti, niente ombre sulle carte, angoli quasi
 * vivi (2-3px): il rilievo lo fa il bordo, non la profondita'.
 *
 * Le pastiglie di stato usano saturazioni basse perche' servono a distinguere,
 * non a decorare: in una tabella di 50 righe il colore acceso diventa rumore.
 *
 * Due sole famiglie di numeri, e stanno tutte in :root. Le tinte --t-* sono i
 * bordi degli stati (le --c-* sono le stesse tinte in versione scura, per il
 * testo, dove serve contrasto e non delicatezza); --dentro, --margine e
 * --stacco sono l'unico passo di spaziatura della pagina. Cambiare un ritmo o
 * una tinta si fa qui, non in trenta regole.
 *
 * Nessuna dipendenza esterna: nessun CDN, nessun font remoto, icone in SVG
 * dentro la pagina. Il servizio funziona anche senza rete.
 */

:root {
  /* IL TEMA E' INDACO, CON UN ACCENTO VERDE-ACQUA. Era un navy scelto per il
     primo committente; il prodotto adesso legge documenti di chiunque, e i
     due colori dicono le due meta' del lavoro: indaco e' il documento e
     l'interfaccia, `--accento` e' il dato estratto (la linea di scansione
     del logo, il filo in cima alla pagina). I nomi `--blu-*` restano perche'
     sono usati in duecento posti: la tinta e' 243 gradi invece di 211.

     LA SCALA, otto gradini dalla stessa tinta.
     Prima erano quattro toni e in mezzo c'era un salto: fra --blu-tenue (quasi
     bianco) e --blu (navy pieno) non esisteva niente, quindi ogni volta che
     serviva «un blu appena piu' marcato» nasceva un rgba() inventato sul posto.
     Otto gradini coprono il passaggio, e ogni superficie sceglie il suo invece
     di improvvisarlo. Tutti derivano dalla stessa tinta (243 gradi): messi in
     colonna sono una sfumatura sola, non otto blu diversi. */
  --blu-1: #f8f8fd;   /* velo: fondo delle intestazioni di tabella, righe pari */
  --blu-2: #eeeffb;   /* riempimento tenue: pastiglie, righe scelte */
  --blu-3: #e0e2f7;   /* riempimento marcato: hover delle voci scelte */
  --blu-4: #c5c9ee;   /* bordi delle superfici blu */
  --blu-5: #9aa0dc;   /* fili e separatori dove il grigio sparisce */
  --blu-6: #5b62b8;   /* icone e testo secondario in chiave blu */
  --blu-7: #3730a3;   /* l'indaco pieno: voce attiva, pulsanti primari, bordi del fuoco */
  --blu-8: #231d6b;   /* il piu' scuro: testo sul blu tenue, filo di testata */

  /* i nomi vecchi restano, perche' sono usati in duecento posti */
  --blu: var(--blu-7);
  --blu-scuro: var(--blu-8);
  --blu-tenue: var(--blu-2);
  --blu-bordo: var(--blu-4);
  --blu-notte: var(--blu-8);

  /* I grigi non sono grigi: hanno dentro lo stesso 211 di tinta del blu, appena
     accennato. Un grigio neutro accanto a un blu freddo tira al giallo, e la
     pagina sembrava avere due temperature. */
  --sfondo: #f4f4fa;
  --carta: #ffffff;
  --testo: #1a1b2e;
  --testo-tenue: #676a8a;
  --bordo: #e0e1ee;
  --bordo-forte: #cacbdf;

  --accento: #0d9488;
  --accento-chiaro: #2dd4bf;

  --buono: #157347;
  --attesa: #9a6700;
  --male: #b42318;

  /* L'altezza della barra e' fissata qui perche' la testata delle viste ci si
     appoggia sotto con `top`: due valori che devono coincidere, e coincidono
     solo se sono lo stesso valore. */
  /* Il guscio costava 126px in alto a ogni vista: 64 di barra piu' 62 di
     testata su due righe. Adesso 52 + 38. I trenta e passa pixel recuperati
     sono la riga di corse in piu' che si vede senza scorrere - su un portatile
     da 768px di altezza non e' una raffinatezza. */
  --alt-barra: 52px;
  --alt-testata: 38px;
  /* La barra di stato e' fissa in fondo: `main` le lascia sotto esattamente
     questo spazio, altrimenti l'ultima riga di una tabella lunga finisce
     sotto la barra e non si raggiunge scorrendo. */
  --alt-stato: 26px;

  /* Una scala sola, sei gradini. Prima i corpi erano ventidue valori decimali
     scelti a occhio (.64, .66, .67, .68, .69, .7, .71, .72...) che a schermo
     non si distinguevano fra loro: sei gradini si distinguono, e si scelgono. */
  --f-micro: .68rem;       /* pastiglie, note di servizio */
  --f-piccolo: .76rem;     /* etichette, sottotitoli */
  --f-base: .84rem;        /* tabelle, comandi, corpo */
  --f-medio: .95rem;       /* campi da compilare */
  --f-titolo: 1.05rem;     /* titolo della vista */
  --f-numero: 1.5rem;      /* i valori delle tessere */
  --ombra: none;
  --ombra-alta: 0 1px 4px rgba(35, 29, 107, .08);

  /* Un passo solo per i margini interni. Prima ogni riquadro aveva il suo
     valore a occhio (10, 11, 12, 13, 14) e i bordi non si allineavano mai fra
     una carta e la successiva: adesso il ritmo e' uno, e si vede. */
  --dentro: 16px;          /* margine interno delle carte e delle testate */
  --margine: 28px;         /* margine della pagina, a sinistra e a destra */
  --stacco: 16px;          /* distanza fra due riquadri impilati */

  /* Le quattro tinte degli stati, dette una volta sola. Il colore sta sul
     bordo; il fondo e' la stessa tinta a saturazione bassissima, perche' su
     una scansione il riempimento copre l'inchiostro che si deve leggere. */
  --t-ok: #5f9b7c;
  --t-dubbio: #c9a15a;
  --t-corretto: #4a6a99;
  --t-manuale: #8478b5;
  --t-bassa: #c9857c;

  /* L'anello del fuoco: netto, dentro il bordo, senza alone. Un contorno
     sfumato su un modulo con quaranta caselle diventa nebbia. */
  --anello: inset 0 0 0 1px var(--blu);
}

* { box-sizing: border-box; }

/* LA MISURA PREDEFINITA DI UN'ICONA.
   Le icone sono `<svg><use href="#i-..."/></svg>` senza attributi di
   dimensione: quindici volte nel markup e altrettante costruite dal JS. Un
   `<svg>` senza width/height e senza viewBox utile prende la misura
   predefinita del rimpiazzo sostituito - 300x150px, ridotta dal `viewBox` a
   qualche centinaio di pixel - e non quella del testo intorno. Finche' ogni
   posto che usava un'icona aveva la sua regola con la sua misura non si
   vedeva; la prima icona messa in un posto che non ce l'aveva e' diventata un
   orologio da 180px, e poi un ingranaggio da 180px.

   Questa regola e' il fondo su cui tutte le altre si appoggiano: ha
   specificita' 0,0,1, quindi qualunque regola con una classe la scavalca, e
   una misura inline la scavalca comunque. Chi vuole un'icona di 14px continua
   a chiederla; chi non dice niente ne ottiene una che sta nella riga. */
svg { width: 15px; height: 15px; flex: none; vertical-align: -2px; }

/* Il testo selezionato e le barre di scorrimento erano gli ultimi due pezzi di
   pagina ancora del sistema operativo: azzurro di Windows l'uno, grigio
   l'altro. Su un'applicazione dove si passa la giornata a selezionare celle e
   a scorrere tabelle lunghe, sono due superfici che si vedono di continuo. */
::selection { background: var(--blu-3); color: var(--blu-8); }

* { scrollbar-width: thin; scrollbar-color: var(--blu-4) transparent; }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--blu-4); border-radius: 6px;
  /* il bordo trasparente stringe il cursore senza stringere la pista: cosi'
     il pollice resta sottile ma l'area su cui si prende resta comoda */
  border: 3px solid transparent; background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background: var(--blu-5); background-clip: content-box; }
::-webkit-scrollbar-corner { background: transparent; }

html, body { height: 100%; margin: 0; }

body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
               Arial, sans-serif;
  font-size: 14px;
  color: var(--testo);
  background: var(--sfondo);
  -webkit-font-smoothing: antialiased;
}

.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.tenue { color: var(--testo-tenue); }
.nascosto { display: none !important; }

/* ===================== accesso ===================== */
/* ====================== IL VELO D'AVVIO ======================
   Copre tutto finche' non si sa se mostrare l'applicazione o l'accesso. Vive
   sopra ogni altra cosa (z-index piu' alto del modale) e se ne va in
   dissolvenza: sparire di scatto fa sembrare che la pagina sia saltata. */
#avvio {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  background: var(--sfondo);
  transition: opacity .22s ease;
}
#avvio.via { opacity: 0; pointer-events: none; }
.avvio-dentro { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.avvio-dentro img { height: 40px; opacity: .9; }
.avvio-dentro p { margin: 0; font-size: var(--f-piccolo); color: var(--testo-tenue); }

/* Il cerchio: un anello grigio con un quarto blu che gira. Niente GIF, niente
   SVG animato - un bordo e una rotazione, che e' l'unica animazione che il
   browser fa senza ridisegnare nulla. */
.cerchio-carico {
  width: 30px; height: 30px; border-radius: 50%;
  border: 3px solid var(--blu-3);
  border-top-color: var(--blu-7);
  animation: gira .8s linear infinite;
}
@keyframes gira { to { transform: rotate(360deg); } }

/* Chi ha chiesto di non vedere le animazioni non le vede: l'anello resta
   fermo, e a dire che si sta caricando resta la scritta sotto. */
@media (prefers-reduced-motion: reduce) {
  .cerchio-carico { animation: none; }
}

/* ===================== accesso, come pagina intera =====================
   Due colonne: a sinistra il servizio e una frase di benvenuto, a destra il
   modulo. Sotto i 760px la colonna di sinistra diventa una fascia in alto. */
#accesso {
  position: fixed; inset: 0; z-index: 50;
  display: grid; grid-template-columns: minmax(300px, 5fr) minmax(320px, 6fr);
  background: var(--carta);
  overflow: auto;
}
.accesso-lato {
  display: flex; flex-direction: column; gap: 22px; justify-content: center;
  padding: 56px; background: var(--blu-7); color: #fff;
}
.accesso-lato .marchio { display: flex; align-items: center; gap: 12px; }
.accesso-lato .marchio img { height: 34px; width: auto; filter: brightness(0) invert(1); }
.accesso-lato .marchio span { font-size: 1.1rem; font-weight: 700; letter-spacing: .2px; }
.accesso-lato h2 { margin: 0; font-size: 2rem; font-weight: 700; letter-spacing: -.5px; }
.accesso-lato p { margin: 0; font-size: 1rem; line-height: 1.55; color: var(--blu-3); max-width: 34ch; }
.accesso-indietro {
  align-self: flex-start; padding: 6px 0; border: 0; background: none;
  color: var(--blu-3); font: inherit; font-size: .85rem; cursor: pointer;
}
.accesso-indietro:hover { color: #fff; text-decoration: underline; }
.accesso-modulo { display: flex; align-items: center; justify-content: center; padding: 40px 24px; }
.scheda-accesso { width: min(380px, 100%); }
.scheda-accesso h1 { margin: 0; font-size: 1.6rem; font-weight: 700; letter-spacing: -.3px; color: var(--blu-8); }
.accesso-sotto { margin: 4px 0 26px; font-size: .85rem; color: var(--testo-tenue); }
.scheda-accesso .campo input { min-height: 44px; font-size: 1rem; }
.scheda-accesso .bottone-primario { min-height: 46px; font-size: 1rem; margin-top: 10px; }
@media (max-width: 760px) {
  #accesso { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .accesso-lato { padding: 26px 22px; gap: 10px; }
  .accesso-lato h2 { font-size: 1.4rem; }
  .accesso-lato p { display: none; }
  .accesso-modulo { align-items: flex-start; padding: 28px 22px; }
}
.chiudi-accesso {
  position: absolute; top: 8px; right: 10px; border: 0; background: none;
  font-size: 1.4rem; line-height: 1; color: var(--testo-tenue); cursor: pointer;
  padding: 4px 6px;
}
.chiudi-accesso:hover { color: var(--testo); }

.campo { margin-bottom: 15px; }
.campo label {
  display: block;
  font-size: .78rem;
  font-weight: 600;
  color: var(--testo-tenue);
  margin-bottom: 6px;
}
.campo input {
  width: 100%;
  padding: 10px 12px;
  border-radius: 3px;
  border: 1px solid var(--bordo-forte);
  background: var(--carta);
  color: var(--testo);
  font: inherit;
  font-size: .95rem;
  outline: none;
}
.campo input:focus {
  border-color: var(--blu);
  box-shadow: var(--anello);
}

.bottone-primario {
  width: 100%;
  margin-top: 6px;
  padding: 11px 16px;
  border: 0;
  border-radius: 3px;
  background: var(--blu);
  color: #fff;
  font: inherit;
  font-weight: 600;
  font-size: .95rem;
  cursor: pointer;
}
.bottone-primario:hover { background: var(--blu-scuro); }
.bottone-primario:disabled { opacity: .55; cursor: default; }

.avviso {
  margin-top: 14px;
  padding: 10px 12px;
  border-radius: 3px;
  font-size: .84rem;
  background: #fdf2f2;
  border: 1px solid #f6d5d2;
  color: var(--male);
}

/* ===================== guscio =====================
 * Barra in alto invece della colonna a sinistra. La colonna costava 258px di
 * larghezza fissa a ogni vista, e la vista che conta - il visualizzatore - li
 * spende meglio: sono colonne della tabella delle corse che si leggono invece
 * di scorrere. Con quattro voci di menu la colonna non si ripagava.
 *
 * LA BARRA NON E' PIU' SCURA. Era l'unica superficie scura della pagina, e per
 * reggere sul blu pieno ogni cosa che ci stava sopra aveva bisogno del suo
 * trucco: il marchio su una targa bianca ritagliata nella barra, le voci in
 * grigio-azzurro su fondi bianchi al 7/10/13%, le spie, il triangolino ambra su
 * fondo ambra. Una dozzina di colori che esistevano solo li' e non tornavano da
 * nessun'altra parte. Adesso la barra e' bianca come le carte, la separazione
 * la fa un bordo, e il navy resta dove significa qualcosa: il filo in cima alla
 * pagina, la voce attiva, i pulsanti primari.
 */
#guscio { display: flex; flex-direction: column; min-height: 100vh; }

/* `barra-alta` e non `barra`: `.barra` esiste gia' da prima ed e' la barra di
   AVANZAMENTO, alta 6px con `overflow:hidden`. Riusare quel nome faceva
   ereditare all'intestazione quei 6px, e l'header usciva schiacciato con marchio
   e titolo sovrapposti. */
.barra-alta {
  display: flex; align-items: stretch; gap: 18px;
  height: var(--alt-barra); padding: 0 var(--margine);
  background: var(--carta);
  color: var(--testo);
  /* Il filo in cima (oggi verde-acqua): due pixel, ed e' tutto quello che resta della barra
     blu. Basta a dire di chi e' l'applicazione senza tingere una fascia intera,
     e non toglie contrasto a niente perche' non ci scrive sopra nessuno. */
  border-top: 2px solid var(--accento);
  border-bottom: 1px solid var(--blu-4);
  position: sticky; top: 0; z-index: 30;
}

/* La targa bianca non serve piu': la barra e' bianca, il logo e' nato per il
   bianco, e sotto ci sta senza ritagli. Al suo posto un filo verticale che
   separa il marchio dalle voci. */
.marchio-alto { display: flex; align-items: center; gap: 10px;
                flex: none; padding-right: 18px; margin-right: 2px;
                border-right: 1px solid var(--blu-4); }
.marchio-alto img { height: 26px; width: auto; }
.marchio-alto .testo { line-height: 1.25; }
.marchio-alto .titolo { color: var(--blu-8); font-weight: 650; font-size: .98rem;
                        letter-spacing: .1px; white-space: nowrap; }
.marchio-alto .titolo em { color: var(--blu); font-style: normal; font-weight: 700; }
.marchio-alto .sotto { display: flex; align-items: center; gap: 7px; margin-top: 2px;
                       font-size: var(--f-micro); color: var(--testo-tenue); white-space: nowrap;
                       text-transform: uppercase; letter-spacing: .6px; }
.pillola {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .64rem; letter-spacing: 0; padding: 1px 5px; border-radius: 2px;
  background: var(--blu-tenue); color: var(--blu-scuro);
  border: 1px solid var(--blu-bordo);
}

/* --- le voci: icona e etichetta sulla stessa riga --- */
nav { display: flex; align-items: stretch; gap: 2px; }
nav button {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  gap: 8px; padding: 0 14px;
  border: 0; background: transparent; color: var(--testo-tenue);
  font: inherit; font-size: var(--f-base); font-weight: 500;
  cursor: pointer; transition: color .14s ease, background .14s ease;
  /* il filo dell'attivo si appoggia al bordo di fondo della barra e lo copre */
  border-bottom: 2px solid transparent;
}
nav button svg { width: 17px; height: 17px; color: currentColor; flex: none; }
nav button:hover { color: var(--blu-6); background: var(--blu-1); }
/* L'attivo si vede da tre cose insieme - colore, peso, filo sotto - e da
   nessun riempimento: un fondo pieno sulla voce corrente, in una barra bianca,
   pesava piu' del titolo della vista che sta sotto. */
nav button.attivo { color: var(--blu); font-weight: 650;
                    border-bottom-color: var(--blu);
                    background: transparent; }

/* Il conteggio sta accanto all'etichetta, non sopra l'icona: con le voci in
   riga c'e' spazio, e un numero letto in linea si legge meglio di uno
   appiccicato a un angolo. */
nav button .conta {
  min-width: 18px; padding: 0 5px; border-radius: 2px;
  font-size: var(--f-micro); font-weight: 600; line-height: 17px; text-align: center;
  background: var(--blu-1); color: var(--blu-6);
  border: 1px solid var(--blu-4);
}
nav button.attivo .conta { background: var(--blu-tenue); color: var(--blu-scuro);
                           border-color: var(--blu-bordo); }

.divisorio-nav { align-self: center; width: 1px; height: 24px;
                 background: var(--bordo); margin: 0 6px; }
nav button.staccata:not(.attivo) { color: #93a0b3; }

/* --- la coda: spie dei motori, utente, esci --- */
.coda-barra { margin-left: auto; display: flex; align-items: center; gap: 14px;
              padding: 8px 0; flex: none; }
.pannello-utente {
  display: flex; align-items: center; gap: 9px;
  padding: 0 0 0 16px; margin-left: 2px;
  border-left: 1px solid var(--blu-4);
}
.pannello-utente .cerchio {
  width: 28px; height: 28px; border-radius: 2px; display: grid;
  place-items: center; font-weight: 700; font-size: .84rem;
  color: var(--blu-scuro); background: var(--blu-tenue);
  border: 1px solid var(--blu-bordo); flex: 0 0 auto;
}
.pannello-utente .nome { color: var(--testo); font-weight: 600;
                         font-size: var(--f-piccolo); white-space: nowrap; }
.pannello-utente .ruolo { font-size: var(--f-micro); color: var(--testo-tenue);
                          margin-top: 1px; }
.bottone-esci {
  padding: 6px 12px; border-radius: 2px; white-space: nowrap;
  border: 1px solid var(--bordo-forte); background: var(--carta);
  color: var(--testo-tenue); font: inherit; font-size: var(--f-piccolo);
  font-weight: 500; cursor: pointer;
}
.bottone-esci:hover { background: var(--sfondo); color: var(--testo); }

/* Stretto: le etichette dell'utente e le spie sono le prime a cedere, perche'
   sono contorno; le quattro voci di menu restano, perche' senza non si naviga. */
@media (max-width: 1080px) {
  .coda-barra .motori, .pannello-utente .chi { display: none; }
  .marchio-alto .sotto { display: none; }
}
@media (max-width: 760px) {
  /* stretti: si accorcia il passo, non si cambiano le regole una per una */
  :root { --margine: 14px; --dentro: 13px; --stacco: 12px; --alt-testata: 34px; }
  .barra-alta { gap: 10px; }
  .marchio-alto { padding-right: 12px; }
  .marchio-alto .testo { display: none; }
  nav button { padding: 0 10px; }
  nav button span:not(.conta) { display: none; }
}

main { min-width: 0; padding: 0 0 calc(var(--alt-stato) + 18px); }

.testata {
  /* sotto la barra, non a coprirla: la barra e' sticky a 0 e resta la' */
  position: sticky; top: var(--alt-barra); z-index: 20;
  /* `center`, non `baseline`: in una fascia di altezza fissa la linea di base
     incolla il testo in alto e sotto resta un dito di vuoto. La baseline serve
     fra titolo e sottotitolo, che sono corpi diversi sulla stessa riga, e sta
     sul div che li contiene - non qui. */
  display: flex; align-items: center; gap: 12px;
  height: var(--alt-testata); padding: 0 var(--margine);
  /* Sul grigio della pagina, non piu' su una seconda fascia bianca. Due bande
     bianche impilate erano due volte la stessa cosa, e la testata sembrava una
     carta senza contenuto: qui il titolo galleggia sul fondo del lavoro e la
     barra sopra resta l'unica superficie bianca del guscio. */
  background: var(--sfondo);
  border-bottom: 1px solid var(--bordo);
}
/* TITOLO E SOTTOTITOLO SULLA STESSA RIGA. Il sottotitolo non e' decorazione -
   nel visualizzatore diventa l'istruzione su come si corregge una cella, e
   cambia - ma non vale una seconda riga alta 20px su ogni vista: di fianco al
   titolo, in grigio, si legge lo stesso e costa zero. */
.testata > div:first-child { display: flex; align-items: baseline; gap: 10px;
                             min-width: 0; }
.testata h2 { margin: 0; font-size: var(--f-titolo); letter-spacing: -.3px;
              font-weight: 650; flex: none; color: var(--blu-8); }
.testata p { margin: 0; font-size: var(--f-piccolo); color: var(--testo-tenue);
             overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* stretto: il sottotitolo e' la prima cosa che cede, il titolo resta */
@media (max-width: 900px) { .testata p { display: none; } }
.testata .spinta { margin-left: auto; display: flex; align-items: center; gap: 8px; }
/* «lotto: 3/12 · lettura» — e' il sistema che parla mentre lavora, non una nota
   a margine: in blu si distingue dal titolo della vista che gli sta accanto. */
.testata .spinta .mono { color: var(--blu-6); font-size: var(--f-piccolo); }

/* Il contenuto non si allarga oltre una misura leggibile: su schermi molto
   larghi le tabelle diventavano righe lunghissime da seguire con l'occhio. */
.contenuto { padding: 20px var(--margine) 0; max-width: 1600px; margin: 0 auto; }

.carta {
  background: var(--carta); border: 1px solid var(--bordo);
  border-radius: 3px; box-shadow: var(--ombra); margin-bottom: var(--stacco);
  overflow: hidden;
}
.carta > h3 {
  margin: 0; padding: 11px var(--dentro); font-size: var(--f-base); font-weight: 650;
  color: var(--blu-8); background: var(--blu-1);
  border-bottom: 1px solid var(--bordo);
  display: flex; align-items: center; gap: 8px;
}
.carta > h3 svg { width: 15px; height: 15px; flex: none; color: var(--blu-6); }
.carta > h3 .spinta { margin-left: auto; font-weight: 500; }
.corpo { padding: var(--dentro); }
.corpo.stretto { padding: 0; }

.griglia-tessere {
  /* ERANO N RIQUADRI, ADESSO SONO UNA FASCIA SOLA. Cinque carte bianche
     bordate, sopra altre carte bianche bordate, facevano contare i bordi prima
     dei numeri. Un riquadro solo diviso da fili verticali dice la stessa cosa
     con un quinto delle linee, e i numeri si leggono in fila. */
  display: grid; gap: 0;
  grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
  margin-bottom: var(--stacco);
  background: var(--carta); border: 1px solid var(--bordo);
  border-radius: 3px; overflow: hidden;
}
.tessera {
  background: var(--carta); border-radius: 0; box-shadow: none;
  padding: 12px var(--dentro);
  /* il filo di separazione sta a sinistra e non e' un bordo vero: cosi' la
     prima tessera di ogni riga non si porta dietro un filo appeso al vuoto */
  box-shadow: inset 1px 0 0 var(--bordo);
}
.tessera:first-child { box-shadow: none; }
.tessera .etichetta {
  font-size: var(--f-piccolo); font-weight: 500; color: var(--testo-tenue);
  display: flex; align-items: center; gap: 7px;
}
.tessera .etichetta svg { width: 14px; height: 14px; color: var(--blu-6); }
.tessera .valore { font-size: var(--f-numero); font-weight: 650;
                   letter-spacing: -.6px; margin-top: 6px; line-height: 1;
                   font-variant-numeric: tabular-nums; }
.tessera .nota { font-size: var(--f-piccolo); color: var(--testo-tenue);
                 margin-top: 5px; }
/* Dentro la fascia unica l'evidenza non puo' piu' essere un bordo - i bordi non
   ci sono. E' il fondo appena azzurrato, e il numero blu. */
.tessera.accento { background: var(--blu-tenue);
                   box-shadow: inset 1px 0 0 var(--blu-bordo); }
.tessera.accento .valore { color: var(--blu-scuro); }
.tessera.accento .etichetta svg { color: var(--blu); }

.barra { height: 4px; border-radius: 2px; background: var(--blu-3);
         overflow: hidden; margin-top: 10px; }
.barra i { display: block; height: 100%; border-radius: 2px;
           background: var(--blu); }

table { width: 100%; border-collapse: collapse; font-size: var(--f-base);
        /* le cifre tutte della stessa larghezza: incolonnate si confrontano a
           occhio, proporzionali no */
        font-variant-numeric: tabular-nums; }
th, td { padding: 8px 12px; text-align: left; border-bottom: 1px solid var(--bordo);
         white-space: nowrap; }
th { font-size: var(--f-micro); font-weight: 650; color: var(--testo-tenue);
     text-transform: uppercase; letter-spacing: .04em;
     background: var(--blu-1); position: sticky; top: 0;
     border-bottom: 1px solid var(--blu-4);
     cursor: pointer; user-select: none; }
th:hover { color: var(--blu-7); }
tbody tr:hover { background: var(--blu-1); }
tbody tr.scelta { background: var(--blu-tenue); }
.scorri { max-height: 66vh; overflow: auto; }

.stato {
  display: inline-flex; align-items: center; gap: 5px; padding: 1px 7px;
  border-radius: 2px; font-size: .72rem; font-weight: 600;
  border: 1px solid transparent;
}
.stato.ok      { background: #f1f7f3; color: var(--buono);  border-color: #d8e8de; }
.stato.corretto{ background: var(--blu-tenue); color: var(--blu-scuro);
                 border-color: var(--blu-bordo); }
.stato.dubbio  { background: #fdf8ec; color: var(--attesa); border-color: #f0e2c4; }
.stato.manuale { background: #f6f4fb; color: #5b4a9e; border-color: #e2dcf1; }
.stato.vuoto   { background: var(--sfondo); color: var(--testo-tenue);
                 border-color: var(--bordo); }

.riga-controlli {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 11px var(--dentro); border-bottom: 1px solid var(--bordo);
  background: var(--blu-1);
}
input[type=text], input[type=search], input[type=password], select {
  padding: 8px 11px; border-radius: 3px; border: 1px solid var(--blu-4);
  background: #fff; font: inherit; font-size: .86rem; color: var(--testo);
  outline: none;
}
input:focus, select:focus { border-color: var(--blu); box-shadow: var(--anello); }
button.pulsante {
  padding: 8px 13px; border-radius: 3px; border: 1px solid var(--bordo-forte);
  background: #fff; font: inherit; font-weight: 500; font-size: var(--f-base);
  color: var(--testo); cursor: pointer;
  transition: border-color .12s ease, background .12s ease, color .12s ease;
}
/* al passaggio il pulsante si tinge invece di ingrigirsi: il grigio su grigio
   diceva «disattivato» proprio nel momento in cui si sta per premere */
button.pulsante:hover { background: var(--blu-1); border-color: var(--blu-5);
                        color: var(--blu-8); }
button.pulsante.attivo { background: var(--blu-tenue); border-color: var(--blu-bordo);
                         color: var(--blu-scuro); font-weight: 600; }
button.pulsante.primario {
  background: var(--blu); border-color: var(--blu); color: #fff; font-weight: 600;
}
button.pulsante.primario:hover { background: var(--blu-scuro);
                                 border-color: var(--blu-scuro); }
button.pulsante:disabled { opacity: .5; cursor: default; }
button.pulsante svg { width: 14px; height: 14px; vertical-align: -2px;
                      margin-right: 5px; }

.due { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
       gap: var(--stacco); align-items: start; }
@media (max-width: 1180px) { .due { grid-template-columns: 1fr; } }

/* revisione */
.lista-righe { max-height: 72vh; overflow: auto; }
.voce-riga {
  padding: 10px var(--dentro); border-bottom: 1px solid var(--bordo); cursor: pointer;
  display: flex; align-items: center; gap: 10px;
}
.voce-riga:hover { background: var(--blu-1); }
.voce-riga.scelta { background: var(--blu-tenue);
                    box-shadow: inset 2px 0 0 var(--blu); }
.voce-riga .chi { font-weight: 600; }
.voce-riga .dove { font-size: .74rem; color: var(--testo-tenue); margin-top: 1px; }
.voce-riga .affid { margin-left: auto; font-weight: 650; font-size: .8rem; }

.cella-rev {
  display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 14px;
  padding: 12px var(--dentro); border-bottom: 1px solid var(--bordo); align-items: start;
}
.cella-rev img {
  width: 100%; border-radius: 2px; border: 1px solid var(--bordo);
  background: #fff;
}
.cella-rev .chiave { font-size: .76rem; font-weight: 650; color: var(--testo);
                     display: flex; align-items: center; gap: 7px; }
.cella-rev .letture { font-size: .8rem; margin: 6px 0 8px;
                      color: var(--testo-tenue); }
.cella-rev .letture b { font-weight: 600; color: var(--testo); }
.cella-rev input { width: 100%; max-width: 320px; }
.cella-rev .motivo { font-size: .76rem; color: var(--testo-tenue); margin-top: 6px; }
.proposta {
  display: inline-flex; align-items: center; gap: 6px; margin-left: 8px;
  padding: 3px 9px; border-radius: 2px; border: 1px solid var(--blu-bordo);
  background: var(--blu-tenue); color: var(--blu-scuro); font-size: .76rem;
  font-weight: 600; cursor: pointer;
}
.proposta:hover { background: var(--blu-3); border-color: var(--blu-5); }

/* --- revisione: il completamento delle celle ------------------------------
   La tendina sta attaccata al `body` in posizione fissa: dentro la carta della
   cella la taglierebbero `overflow:hidden` della carta e il bordo del pannello,
   e la cella scelta puo' stare a fondo pagina. Posizione e altezza le mette
   `posizionaCompleta()` in app.js, che sa dov'e' il campo.

   Ogni voce dice da dove viene. Non e' decorazione: una voce dell'elenco
   verificatori e una imparata da un foglio non valgono uguale, e chi corregge
   deve poterlo vedere prima di scegliere. */
.completa {
  position: fixed; z-index: 70; overflow-y: auto; padding: 5px;
  background: var(--carta); border: 1px solid var(--blu-5);
  border-radius: 3px; box-shadow: var(--ombra-alta);
}
.completa .voce {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 3px 10px;
  align-items: baseline; width: 100%; padding: 7px 9px;
  border: 0; border-radius: 2px; background: transparent;
  color: var(--testo); font: inherit; text-align: left; cursor: pointer;
}
.completa .voce:hover { background: var(--blu-1); }
.completa .voce.scelta { background: var(--blu-3);
                         box-shadow: inset 0 0 0 1px var(--blu-5); }
.completa .voce .val { font-size: .86rem; font-weight: 600;
                       overflow-wrap: anywhere; }
.completa .voce .meta { display: flex; align-items: center; gap: 6px;
                        white-space: nowrap; }
.completa .voce .fonte, .completa .voce .occ {
  font-size: .66rem; color: var(--testo-tenue);
}
/* «in zona»: la voce risulta nella zona di questo foglio. Le voci marcate sono
   in cima, ma il resto della rete non e' escluso - una zona letta male non deve
   rendere irraggiungibile il nome giusto. */
.completa .voce .qui {
  font-style: normal; font-size: .62rem; font-weight: 700; letter-spacing: .04em;
  padding: 1px 5px; border-radius: 2px; color: var(--blu-scuro);
  background: var(--blu-tenue); border: 1px solid var(--blu-bordo);
}
.completa .voce .nota {
  grid-column: 1 / -1; font-size: .7rem; color: var(--testo-tenue);
}
.completa .coda {
  padding: 7px 9px 3px; margin-top: 3px; font-size: .7rem;
  border-top: 1px solid var(--bordo);
}
.aiuto-completa { font-size: .7rem; color: var(--testo-tenue); margin-top: 6px; }
.aiuto-completa b { font-weight: 700; color: var(--testo); }

/* --- revisione: il foglio intero con i riquadri delle celle ---------------
   La scansione arriva da /img/pagina gia' registrata sul template, quindi i
   `box` salvati in banca dati ci cadono sopra con una proporzione: niente
   geometria da ricalcolare, e i riquadri restano al loro posto a ogni
   larghezza. Per questo tutto e' in percentuale e l'immagine e' width:100%. */
.due.larga-a-sinistra {
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
}
@media (max-width: 1180px) { .due.larga-a-sinistra { grid-template-columns: 1fr; } }

/* La scansione resta alla sua misura: ingrandire e' compito della lente, che
   ingrandisce la SOLA cella. Allargare tutta la pagina faceva perdere di vista
   il foglio, che e' meta' di quello che serve per correggere una cella. */
.scansione { position: relative; line-height: 0; background: var(--blu-2); }
.scansione img { width: 100%; display: block; }

.bx {
  position: absolute; padding: 0; margin: 0; cursor: pointer;
  border: 1.5px solid transparent; border-radius: 3px;
  background: transparent; transition: background .1s, opacity .1s;
}
.bx.ok       { border-color: var(--t-ok);       background: rgba(21, 115, 71, .06); }
.bx.dubbio   { border-color: var(--t-dubbio);   background: rgba(154, 103, 0, .10); }
.bx.corretto { border-color: var(--t-corretto); background: rgba(55, 48, 163, .08); }
.bx.manuale  { border-color: var(--t-manuale);  background: rgba(91, 74, 158, .08); }
.bx.vuoto    { border-color: var(--bordo-forte); background: transparent; opacity: .45; }
/* «solo da rivedere» non nasconde le altre celle: le sbiadisce e basta. Una
   cella che il modello ha sbagliato con sicurezza non risulta dubbia, e se
   sparisse non ci sarebbe modo di correggerla senza spegnere il filtro. */
.bx.spento   { opacity: .16; }
.bx:hover, .bx:focus-visible {
  background: rgba(55, 48, 163, .14); border-color: var(--blu);
  opacity: 1; z-index: 5; outline: none;
}
/* L'anello della selezione va disegnato DENTRO il riquadro. Con `outline` piu'
   `outline-offset` stava fuori - tre pixel per lato - e su una cella dei
   contatori (56x35 nel template) voleva dire +11% in larghezza e +17% in
   altezza: la casella selezionata sembrava piu' grande di quella che il modello
   ha letto davvero, e sulle colonne del fronte, che sono contigue, sbordava
   anche sulle vicine. `box-shadow: inset` non occupa spazio. */
/* la regola di `.bx.scelta` sta piu' in basso, insieme al cartellino della cella:
   sono la stessa cosa detta in due modi e cambiano insieme */

.legenda { display: flex; align-items: center; gap: 6px;
           font-weight: 400; font-size: .72rem; color: var(--testo-tenue); }
.legenda .pallino { width: 8px; height: 8px; border-radius: 2px;
                    border: 1.5px solid; margin-left: 7px; }
.legenda .pallino:first-child { margin-left: 0; }
.pallino.ok       { border-color: var(--t-ok);       background: rgba(21, 115, 71, .12); }
.pallino.dubbio   { border-color: var(--t-dubbio);   background: rgba(154, 103, 0, .14); }
.pallino.corretto { border-color: var(--t-corretto); background: rgba(55, 48, 163, .12); }
.pallino.manuale  { border-color: var(--t-manuale);  background: rgba(91, 74, 158, .12); }
.pallino.vuoto    { border-color: var(--bordo-forte); background: transparent; }

button.pulsante.minuto { padding: 3px 9px; font-size: .74rem; }

/* Sola icona: il cestino dice "elimina" meglio della parola, e in una riga di
   tabella toglie di mezzo una colonna di testo rosso ripetuta cinquanta volte.
   Il titolo e l'aria-label restano, perche' l'icona da sola non si legge a voce. */
button.pulsante.solo-icona {
  padding: 3px 6px; line-height: 0;
}
button.pulsante.solo-icona svg { width: 15px; height: 15px; margin: 0;
                                 vertical-align: middle; }

/* Cio' che cancella si vede che cancella. Il rosso sta sul bordo e sul testo e
   non sul fondo: un pulsante pieno di rosso in mezzo a una tabella attira il
   dito, e questo e' l'ultimo che si vuole cliccare per sbaglio. */
/* Il cestino sta spento finche' non lo si punta: in una lista di cinquanta
   schede cinquanta bordi rosa sono rumore, e il rosso serve nell'istante in cui
   il dito e' sopra il pulsante, non prima. */
button.pulsante.pericolo { border-color: var(--bordo-forte); color: var(--testo-tenue); }
button.pulsante.pericolo:hover { background: #fdf2f2; border-color: #e2a9a3;
                                 color: var(--male); }

/* le azioni di riga stanno affiancate e non vanno a capo */
td.azioni { white-space: nowrap; }
td.azioni button + button { margin-left: 5px; }

/* il messaggio di Banca dati sta fra i controlli e la tabella: quando c'e' si
   prende il suo spazio, quando non c'e' non occupa niente */
#messaggioDati:not(:empty) { padding: 0 16px 4px; }

/* MULTI-REPORT: la riga viene da un PDF di archivio che contiene molti fogli.
   Non e' uno stato del foglio, e' una proprieta' della sua origine, quindi sta
   nella colonna dell'origine e non ha i colori degli stati. */
.pill-multi {
  display: inline-block; margin-left: 7px; padding: 1px 6px; border-radius: 2px;
  font-size: .64rem; font-weight: 700; letter-spacing: .05em; white-space: nowrap;
  background: var(--blu-tenue); border: 1px solid var(--blu-bordo);
  color: var(--blu-scuro); vertical-align: 1px;
}

/* coppie fronte/retro */
.modale.larga { width: min(920px, 100%); }
.scorri-alto { max-height: min(70vh, 720px); overflow-y: auto; }
.coppia {
  display: flex; gap: 14px; align-items: flex-start; padding: 13px 0;
  border-top: 1px solid var(--bordo);
}
.coppia:first-child { border-top: 0; padding-top: 0; }
.coppia .num {
  flex: 0 0 34px; font-size: .78rem; font-weight: 650; color: var(--testo-tenue);
  text-align: right; padding-top: 2px;
}
.coppia .facce { display: flex; gap: 8px; flex: 0 0 auto; }
.coppia figure { margin: 0; width: 148px; }
.coppia figure img {
  display: block; width: 100%; border: 1px solid var(--bordo-forte);
  border-radius: 2px; background: var(--sfondo);
}
.coppia figure figcaption {
  font-size: .68rem; color: var(--testo-tenue); margin-top: 4px; text-align: center;
}
.coppia figure.manca {
  height: 105px; border: 1px dashed var(--blu-5); border-radius: 2px;
  display: grid; place-items: center; font-size: var(--f-micro);
  color: var(--testo-tenue); background: var(--blu-1);
}
.coppia .dati { flex: 1 1 auto; min-width: 0; font-size: .8rem; line-height: 1.6; }
.coppia .dati .capo { font-weight: 650; font-size: .86rem; }
.coppia .dati .tenue { color: var(--testo-tenue); }
.coppia .fare { flex: 0 0 auto; display: flex; flex-direction: column; gap: 6px; }
/* una coppia che in archivio non c'e': si vede che manca, senza allarmare */
.coppia.vuota { background: var(--blu-1); }

@media (max-width: 720px) {
  .coppia { flex-wrap: wrap; }
  .coppia .num { flex-basis: 100%; text-align: left; }
}

/* modale di conferma: piu' stretto di quello di inserimento, perche' e' una
   domanda e non un flusso a tre passi */
.modale.stretta { width: min(470px, 100%); }
.conf-testo { font-size: .88rem; line-height: 1.55; }
.conf-testo b { font-weight: 650; }
.conf-elenco {
  margin: 13px 0 0; padding-left: 19px; font-size: .83rem; line-height: 1.65;
  color: var(--testo-tenue);
}
.conf-elenco:empty { display: none; }
.conf-elenco li::marker { color: var(--blu-5); }
#confParolaBox { margin-top: 17px; }
#confParolaBox label { display: block; font-size: .8rem; margin-bottom: 6px;
                       color: var(--testo-tenue); }
#confParolaBox input { width: 100%; letter-spacing: .04em; }
/* ---------- il modale di fine elaborazione ---------- */
.fatto-esito { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.fatto-segno {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center;
}
.fatto-segno svg { width: 17px; height: 17px; }
.fatto-segno.buono { background: #e6f3ec; color: var(--buono); }
.fatto-segno.guaio { background: #fdecea; color: var(--male); }
.fatto-frase { font-size: var(--f-medio); }
.fatto-frase b { font-weight: 650; }
/* Gli stessi riquadri dei numeri dell'avanzamento: e' lo stesso dato detto
   nello stesso modo, e due grafiche diverse per «quante schedine» sarebbero
   due cose da imparare invece di una. */
.fatto-numeri { display: flex; gap: 8px; flex-wrap: wrap; }
.fatto-numeri .dato-avanz { flex: 1 1 90px; }

.conf-azioni { display: flex; gap: 9px; margin-top: 20px; }
.conf-azioni button:last-child { margin-left: auto; }

/* Qui il rosso pieno ci vuole: e' il pulsante che si e' venuti a premere, il
   velo copre la tabella e non c'e' nient'altro da cliccare per sbaglio. */
button.pulsante.pericolo.forte {
  background: var(--male); border-color: var(--male); color: #fff; font-weight: 600;
}
button.pulsante.pericolo.forte:hover:not(:disabled) {
  background: #96190f; border-color: #96190f;
}

/* modale */
.velo {
  position: fixed; inset: 0; z-index: 60; display: grid; place-items: center;
  background: rgba(26, 35, 49, .38); padding: 18px;
}
.modale {
  width: min(640px, 100%); background: var(--carta); border-radius: 3px;
  border: 1px solid var(--bordo);
  box-shadow: 0 2px 10px rgba(35, 29, 107, .12); overflow: hidden;
}
.modale header {
  padding: 16px 22px; border-bottom: 1px solid var(--bordo);
  background: var(--blu-1);
  display: flex; align-items: center; gap: 12px;
}
.modale header h3 { margin: 0; font-size: 1rem; font-weight: 650;
                    color: var(--blu-8); }
.modale header p { margin: 3px 0 0; font-size: .8rem; color: var(--testo-tenue); }
.modale header .chiudi {
  margin-left: auto; border: 0; background: transparent; font-size: 1.4rem;
  line-height: 1; color: var(--testo-tenue); cursor: pointer; padding: 0 4px;
}
.modale header .chiudi:hover { color: var(--testo); }
.modale .corpo-modale { padding: 20px 22px 22px; }

/* la correzione di un campo (`apriCorrezione`) */
#corrImg { max-width: 100%; border: 1px solid var(--bordo); margin-bottom: 12px; }
#corrValore { width: 100%; }
.corr-azioni { display: flex; gap: 8px; justify-content: flex-end; margin-top: 12px; }

.scelte { display: grid; gap: 14px; grid-template-columns: 1fr 1fr; }
@media (max-width: 620px) { .scelte { grid-template-columns: 1fr; } }
/* Va tenuta sotto `.scelte`: anche il riquadro selezionato della scansione usa
   la classe `scelta`, ma non deve ereditare il padding di queste schede. */
.scelte > .scelta {
  text-align: left; padding: 18px; border-radius: 3px;
  border: 1px solid var(--bordo-forte); background: #fff; cursor: pointer;
  transition: border-color .14s ease, background .14s ease;
}
.scelte > .scelta:hover { border-color: var(--blu); background: var(--blu-tenue); }
.scelte > .scelta .ico {
  width: 38px; height: 38px; border-radius: 3px; display: grid;
  place-items: center; margin-bottom: 12px;
  background: var(--blu-tenue); border: 1px solid var(--blu-bordo);
  color: var(--blu);
}
.scelte > .scelta .ico svg { width: 20px; height: 20px; }
.scelte > .scelta b { display: block; font-size: .93rem; margin-bottom: 5px; font-weight: 650; }
.scelte > .scelta span { font-size: .8rem; color: var(--testo-tenue); line-height: 1.45; }

.zona-file {
  border: 1px dashed var(--blu-5); border-radius: 3px; padding: 26px 18px;
  text-align: center; background: var(--blu-1); cursor: pointer;
}
.zona-file:hover { border-color: var(--blu); background: var(--blu-tenue); }
.zona-file.sopra { border-color: var(--blu); background: var(--blu-tenue); }
.zona-file b { display: block; margin-bottom: 4px; font-weight: 600; }
.zona-file span { font-size: .82rem; color: var(--testo-tenue); }
.elenco-file { margin-top: 12px; display: grid; gap: 6px; }
.elenco-file div {
  display: flex; align-items: center; gap: 8px; padding: 8px 11px;
  border-radius: 3px; background: var(--sfondo); border: 1px solid var(--bordo);
  font-size: .82rem;
}
/* Il riquadro dell'avanzamento. Prima erano una riga di testo, una barra
   larga quanto la carta e un pulsante blu perso in fondo al bianco: tre pezzi
   che non si tenevano insieme. Ora sono un blocco solo, con la percentuale
   come cifra dominante e i comandi nel piede. */
.avanzamento {
  border: 1px solid var(--bordo); border-radius: 3px;
  background: var(--sfondo); padding: 14px 16px 0;
}
.avanzamento .riga-avanz {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; margin-bottom: 11px;
}
.avanz-testo { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.avanz-testo b { font-size: .92rem; font-weight: 650; }
.avanz-fase { font-size: var(--f-piccolo); color: var(--blu-6); font-weight: 600;
              overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* La cifra e' allineata alla linea di base del titolo e non al centro: e' il
   numero che si guarda, non un'etichetta di contorno. */
.avanz-perc { flex: none; font-size: 1.5rem; font-weight: 650;
              line-height: 1; letter-spacing: -1px; color: var(--blu-notte); }
.azioni-avanz {
  display: flex; align-items: center; gap: 9px; margin-top: 14px;
  padding: 11px 0; border-top: 1px solid var(--bordo);
}
.azioni-avanz .pulsante:last-child { margin-left: auto; }
.azioni-avanz .pulsante { height: 28px; padding: 0 13px;
                          display: inline-flex; align-items: center; }
/* dentro il riquadro grigio la barra deve staccarsi: fondo bianco */
.avanzamento .barra { background: #fff; border: 1px solid var(--bordo); height: 6px; }

/* Barra senza percentuale: quando il lavoro e' partito ma non ha ancora niente
   da contare, il pieno scorre avanti e indietro invece di restare a zero. Una
   barra ferma a zero si legge come «bloccato». */
.barra.indeterminata { position: relative; overflow: hidden; }
.barra.indeterminata i { position: absolute; top: 0; bottom: 0;
                         width: 32%; animation: scorri-barra 1.25s ease-in-out infinite; }
@keyframes scorri-barra {
  0%   { left: -32%; }
  100% { left: 100%; }
}
/* Il pallino accanto al titolo pulsa finche' il lavoro gira: e' il segno che
   la pagina e' viva anche quando i numeri non si muovono per un minuto. */
.avanzamento.lavora .avanz-testo b::before {
  content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 1px;
  background: var(--blu); margin-right: 8px; vertical-align: 1px;
  animation: respira 1.2s ease-in-out infinite;
}
/* Una colonna sola finche' non c'e' la spalla dei report pronti. Prima la
   seconda colonna era sempre nella griglia: con un foglio singolo, dove la
   spalla resta nascosta, restavano comunque riservati 250px vuoti a destra e
   l'avanzamento finiva piu' stretto della carta che lo conteneva. */
.avanzamento-layout {
  display: grid; grid-template-columns: minmax(0, 1fr);
  gap: 22px; align-items: start;
}
.avanzamento-layout:has(.report-pronti:not(.nascosto)) {
  grid-template-columns: minmax(0, 1fr) minmax(250px, .42fr);
}
.avanzamento-principale { min-width: 0; }
.report-pronti {
  position: static; height: auto; padding: 0; border: 1px solid var(--bordo);
  border-radius: 3px; background: var(--sfondo); overflow: hidden;
}
.report-pronti-titolo {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 12px; border-bottom: 1px solid var(--bordo);
  font-size: .79rem; font-weight: 650;
}
.report-pronti-lista {
  display: grid; gap: 6px; padding: 7px; max-height: 330px; overflow-y: auto;
}
.report-pronto {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  gap: 10px; padding: 9px 10px; text-align: left; cursor: pointer;
  border: 1px solid var(--bordo); border-radius: 2px; background: #fff;
  color: var(--testo); font: inherit;
}
.report-pronto:hover { border-color: var(--blu); background: var(--blu-tenue); }
.report-pronto b { display: block; font-size: .8rem; font-weight: 650; }
.report-pronto small { display: block; margin-top: 2px; color: var(--testo-tenue); }
.report-pronto-meta { flex: 0 0 auto; color: var(--testo-tenue); font-size: .7rem; }
@media (max-width: 760px) {
  .avanzamento-layout { grid-template-columns: 1fr; }
  .report-pronti-lista { max-height: 240px; }
}

.messaggio {
  padding: 11px 13px; border-radius: 3px; font-size: .84rem; margin-top: 12px;
  border: 1px solid;
}
.messaggio.errore { background: #fdf2f2; border-color: #f6d5d2; color: var(--male); }
.messaggio.buono  { background: #f1f7f3; border-color: #d8e8de; color: var(--buono); }
.messaggio.info   { background: var(--blu-tenue); border-color: var(--blu-bordo);
                    color: var(--blu-scuro); }

.vuoto-stato { padding: 44px 20px; text-align: center; color: var(--testo-tenue); }
.vuoto-stato svg { width: 32px; height: 32px; color: var(--blu-5); margin-bottom: 10px; }

/* Resta solo il respiro laterale. Le altre tre regole erano del layout a
   colonna - `#guscio` a griglia, `aside`, `nav` a due colonne - e sotto i 900px
   avrebbero rimesso la navigazione a griglia sopra la barra in flex. */
@media (max-width: 900px) {
  .contenuto, .testata { padding-left: 16px; padding-right: 16px; }
}

/* Un foglio con delle letture non riuscite: la riga di intestazione della
   Revisione lo dice a colpo d'occhio, invece di lasciarlo indovinare dai
   vincoli. Il colore e' quello dei dubbi, non quello degli errori: il foglio
   e' buono, e' incompleto. */
#revInfo.incompleto {
  color: var(--ambra-scuro, #92400e);
  font-weight: 600;
}

/* ===================== Schede =====================
 * L'elenco e il visualizzatore. La scala dei colori e' una sola, usata dai
 * riquadri sulla scansione, dalle pastiglie dell'elenco e dai campi della
 * schedina: se il verde della scansione non fosse lo stesso verde della
 * schedina, le due meta' direbbero cose diverse sullo stesso dato.
 *
 * Verde/ambra/rosso restano nelle saturazioni basse del resto dell'interfaccia:
 * su una scansione fitta di duecento riquadri il colore acceso e' rumore, e
 * quello che deve saltare all'occhio e' il rosso, non tutto.
 */
:root {
  --c-alta: #157347;
  --c-media: #9a6700;
  --c-bassa: #b42318;
  --c-manuale: #5b4a9e;
}

/* ---- i riquadri sulla scansione ----
   SOTTO C'E' DELLA GRAFIA DA LEGGERE. Il riempimento serve a far vedere da
   lontano dove sono le celle deboli, ma ogni punto di opacita' in piu' e' un
   punto di contrasto in meno sull'inchiostro: qui sta piu' basso di prima,
   e il colore lo porta soprattutto il bordo, che non copre niente. */
/* GRADIENTE CONTINUO: `--conf-rgb` arriva dal JS (`styleConf` in app.js),
   gia' interpolato fra rosso, ambra e verde con la curva che sposta il centro
   verso il verde. Qui si legge soltanto - la CELLA, non il CSS, decide il
   numero. */
.bx.c-grad    { border-color: rgb(var(--conf-rgb)); background: rgba(var(--conf-rgb), .05); }
.bx.c-manuale { border-color: var(--t-manuale); background: rgba(91, 74, 158, .06); }
.bx.c-vuoto   { border-color: var(--bordo-forte); background: transparent; opacity: .40; }

/* Ogni voce sta insieme alla sua pastiglia e non si spezza; l'insieme puo'
   andare a capo fra una voce e l'altra, che e' l'unico punto dove ha senso. */
.legenda-conf { flex-wrap: wrap; row-gap: 3px; }
.legenda-conf > span { display: inline-flex; align-items: center; gap: 4px;
                       white-space: nowrap; }
.legenda-conf > span .pallino { margin-left: 0; }

.legenda-conf .pallino.c-alta    { border-color: var(--t-ok);      background: rgba(21, 115, 71, .12); }
.legenda-conf .pallino.c-media   { border-color: var(--t-dubbio);  background: rgba(154, 103, 0, .14); }
.legenda-conf .pallino.c-bassa   { border-color: var(--t-bassa);   background: rgba(180, 35, 24, .12); }
.legenda-conf .pallino.c-manuale { border-color: var(--t-manuale); background: rgba(91, 74, 158, .12); }
.legenda-conf .pallino.c-vuoto   { border-color: var(--bordo-forte); background: transparent; }

/* ---- l'elenco ---- */
.elenco-schede { display: flex; flex-direction: column; }
/* La riga e' una GRIGLIA a colonne fisse, non piu' una fila che si adatta:
   con il flex ogni riga posizionava i suoi comandi dove capitava a seconda di
   quanto era lungo il nome del file, e scorrendo l'elenco i pulsanti ballavano.
   Ora numero, luogo e origine stanno incolonnati, e i comandi sono sempre allo
   stesso millimetro da destra. */
/* QUATTRO COLONNE, non piu' cinque. Erano `24px` per la spia, il numero, il
   luogo, `28px` per il quadratino delle misure e le azioni. La spia e' sparita
   - a sinistra ci sono solo schede da validare, e un triangolino su tutte le
   righe non distingue niente - e il quadratino con lei; al suo posto c'e'
   «N da rivedere», che in 28px veniva troncato a «101 da r…».

   `auto` sulla pastiglia e non una misura fissa: «7 da rivedere» e «214 da
   rivedere» non sono larghi uguale, e la colonna si adatta al piu' largo
   invece di tagliarli tutti alla misura del piu' corto. */
.voce-scheda {
  display: grid; align-items: center; gap: 0 14px;
  grid-template-columns: minmax(120px, 1fr) minmax(0, 1.3fr) auto auto;
  padding: 9px 14px; border-top: 1px solid var(--bordo); cursor: pointer;
}
.voce-scheda:first-child { border-top: 0; }
.voce-scheda:hover { background: var(--blu-1); }
.voce-scheda .chi { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.voce-scheda .chi b { font-size: .88rem; font-weight: 650; letter-spacing: -.1px; }
/* Il luogo e la data sono la seconda colonna, non una seconda riga schiacciata
   sotto il numero: si scorre l'elenco cercando una zona, e una colonna si
   scorre con l'occhio, una riga a capo no. */
.voce-scheda .dove { font-size: .78rem; color: var(--testo); min-width: 0;
                     overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.voce-scheda .chi span { font-size: .72rem; }
.voce-scheda .piccolo { font-size: .69rem; overflow: hidden;
                        text-overflow: ellipsis; white-space: nowrap; }
.voce-scheda > * { align-self: center; }

/* Stretto: prima cede l'origine del file (il nome del PDF, che si ritrova
   nella scheda aperta), poi la colonna del luogo passa sotto al numero. */
@media (max-width: 1100px) {
  .voce-scheda { grid-template-columns: minmax(0, 1fr) auto auto; }
  .voce-scheda .dove { grid-column: 1; grid-row: 2; font-size: .74rem;
                       color: var(--testo-tenue); }
  .voce-scheda .da-rivedere, .voce-scheda .azioni-scheda { grid-row: 1 / span 2; }
  .voce-scheda .piccolo { display: none; }
}


.tag { font-size: .71rem; font-weight: 600; padding: 3px 7px; border-radius: 2px;
       border: 1px solid var(--bordo-forte); color: var(--testo-tenue);
       background: #fff; white-space: nowrap; }
.tag.dubbie  { color: var(--attesa); border-color: #e8d8a8; background: #fdf6e6; }
.tag.rotta   { color: var(--male); border-color: #eec4bf; background: #fdefed; }
.tag.inviata { color: var(--blu-scuro); border-color: var(--blu-bordo); background: var(--blu-tenue); }
.tag.conf.c-alta   { color: var(--c-alta); border-color: #b8ddc9; background: #eaf6f0; }
.tag.conf.c-media  { color: var(--c-media); border-color: #e8d8a8; background: #fdf6e6; }
.tag.conf.c-bassa  { color: var(--c-bassa); border-color: #eec4bf; background: #fdefed; }
.tag.conf.c-vuoto  { color: var(--testo-tenue); }

/* ---- la barra del visualizzatore ---- */
.barra-vis { display: flex; align-items: center; gap: 12px; margin-bottom: var(--stacco);
             padding: 11px var(--dentro); background: var(--carta);
             border: 1px solid var(--bordo); border-radius: 3px; box-shadow: var(--ombra); }
.titolo-vis { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.titolo-vis b { font-size: .92rem; }
.titolo-vis span { font-size: .73rem; overflow: hidden;
                   text-overflow: ellipsis; white-space: nowrap; }
.titolo-vis .incompleto { color: var(--male); }
.barra-vis #visBoxLato { margin-left: auto; }

/* La fascia della seconda passata di visione. Sta sotto la barra della scheda
   e sopra le due meta': e' un lavoro che riguarda tutta la scheda, e messo
   dentro una delle due colonne sembrerebbe riguardare solo quella. */

/* Una corsa che nessuno ha compilato: la riga c'e' lo stesso - si puo'
   scriverci - ma il suo numero non deve chiamare l'occhio come gli altri. */
.tabella-modulo .riga-vuota .riga-et { opacity: .45; }
.pulsante.fatto { color: var(--buono); border-color: #b8ddc9; background: #eaf6f0; }

/* ---- la schedina virtuale ---- */
/* Alta quanto la scansione e con lo scorrimento suo: le due meta' devono
   restare affiancate, e una schedina che allunga la pagina farebbe scorrere via
   la scansione proprio mentre si guarda il riquadro. */
/* Alta quanto il riquadro della scansione (78vh): le due meta' si guardano
   insieme, e se una fosse piu' alta scorrendola si perderebbe l'altra. */
.schedina { max-height: 78vh; overflow-y: auto; padding: 4px 2px; }
.gruppo-schedina { border: 1px solid var(--blu-4); border-radius: 3px;
                   margin: 0 0 12px; padding: 6px 11px 10px; }
.gruppo-schedina legend { font-size: var(--f-piccolo); font-weight: 650;
                          color: var(--blu-6);
                          text-transform: uppercase; letter-spacing: .04em; padding: 0 5px; }

/* La casella: dentro un `td`, senza etichetta - l'etichetta e' l'intestazione
   della colonna, come sul foglio di carta. Il bordo porta la confidenza. */
.campo-schedina { display: block; border-radius: 2px;
                  border-left: 3px solid transparent; }
.campo-schedina input {
  width: 100%; min-width: 0; border: 1px solid var(--bordo);
  border-radius: 2px; padding: 4px 5px; font-size: .78rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  background: #fff; color: var(--testo);
}
.campo-schedina input:focus { outline: 2px solid var(--blu);
                              outline-offset: -1px; border-color: var(--blu); }
/* Le larghezze seguono il contenuto vero: un'ora e una localita' non meritano
   la stessa colonna, e stringere tutto uguale rende illeggibili proprio le
   localita', che sono le celle su cui si corregge di piu'. */
.campo-schedina input.num    { width: 46px; text-align: center; }
.campo-schedina input.breve  { width: 62px; }
.campo-schedina input.testo  { width: 120px; }
.campo-schedina input.testo-largo { width: 100%; min-width: 130px;
                                    font-family: inherit; }

/* `position` sul contenitore serve alla marca della cella in dubbio. */
.campo-schedina { position: relative; }

.campo-schedina.c-grad    { border-left-color: rgb(var(--conf-rgb)); }
.campo-schedina.c-manuale { border-left-color: var(--t-manuale); }
.campo-schedina.c-vuoto   { border-left-color: transparent; }
.campo-schedina.c-grad input { background: rgba(var(--conf-rgb), .04); }
/* LA MARCA DEL DUBBIO, che il commento sopra prometteva e non c'era piu': il
   bordo sinistro porta gia' la confidenza numerica (il gradiente), ma
   `dubbio` e' uno STATO - questa cella va rivista, punto - e si perdeva
   dentro celle rosse per lo stesso motivo. Un riquadro giallo leggero,
   tutt'intorno e non solo a sinistra, cosi' si vede anche scorrendo la
   schedina in fretta. */
.campo-schedina.dubbio {
  background: #fdf8ec;
  box-shadow: 0 0 0 1px #e8cf8a;
  border-radius: 3px;
}
.campo-schedina.scelto input { border-color: var(--blu); background: var(--blu-tenue); }
.campo-schedina.salvo { opacity: .5; }
.campo-schedina.errore input { border-color: var(--male); }

/* --- la tabella che ha la forma del modulo --- */
.tabella-modulo-scorre { overflow-x: auto; }
.tabella-modulo { border-collapse: separate; border-spacing: 2px; width: 100%; }
.tabella-modulo th {
  font-size: .64rem; font-weight: 650; color: var(--testo-tenue);
  text-transform: uppercase; letter-spacing: .03em; color: var(--blu-6);
  padding: 2px 4px; text-align: left; white-space: nowrap;
  position: sticky; top: 0; background: var(--carta); z-index: 2;
}
.tabella-modulo th.num { text-align: center; }
.tabella-modulo td { padding: 0; vertical-align: middle; }
.tabella-modulo .riga-et {
  font-size: .68rem; color: var(--testo-tenue); text-align: center;
  padding-right: 6px; position: sticky; left: 0; background: var(--carta); z-index: 1;
}
.tabella-modulo tbody tr:hover .riga-et { color: var(--blu); }
/* I totali sono un'altra cosa dalle righe: non li scrive chi compila riga per
   riga, e sbagliarli sposta l'aritmetica di tutto il foglio. */
.tabella-modulo .riga-totali .riga-et { font-weight: 700; color: var(--testo); }
.tabella-modulo .riga-totali td { border-top: 2px solid var(--blu-5); padding-top: 3px; }

/* --- i campi che non stanno in tabella (intestazione, note, iniziali AG) --- */
.campi-sciolti { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: flex-end; }
.campi-sciolti.stretti { gap: 8px; }
.etichetta-sciolta { display: flex; flex-direction: column; gap: 3px;
                     font-size: .68rem; font-weight: 650; color: var(--testo-tenue);
                     text-transform: uppercase; letter-spacing: .03em; }

.conf-mini { margin-left: auto; font-size: .69rem; font-weight: 650;
             font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.conf-mini.c-alta { color: var(--c-alta); }
.conf-mini.c-media { color: var(--c-media); }
.conf-mini.c-bassa { color: var(--c-bassa); }
.conf-mini.c-manuale { color: var(--c-manuale); }
.conf-mini.c-vuoto { color: var(--testo-tenue); }

/* ---- schermo intero ---- */
/* La scansione a piena finestra, per la grafia che nella carta non si legge.
   L'IMMAGINE RESTA A `width:100%` DEL CONTENITORE, e non si allarga oltre: i
   riquadri sono posizionati in percentuale sul contenitore, quindi un'immagine
   piu' larga di lui si porterebbe dietro il foglio ma non i riquadri, e i
   colori finirebbero accanto alle celle sbagliate - il modo peggiore di
   sbagliare, perche' sembra funzionare. L'ingrandimento arriva dalla larghezza
   della finestra intera invece che da mezza carta, che e' circa il doppio; per
   il resto si scorre in verticale. */
#pieno { position: fixed; inset: 0; z-index: 60; background: #0f1622;
         display: flex; flex-direction: column; }
body.con-pieno { overflow: hidden; }
.barra-pieno { display: flex; align-items: center; gap: 12px; flex: none;
               padding: 10px 16px; background: #16202f; color: #e8edf4; }
.barra-pieno b { font-size: .88rem; }
.barra-pieno .tenue { color: #93a1b5; font-size: .74rem; overflow: hidden;
                      text-overflow: ellipsis; white-space: nowrap; }
.barra-pieno .pulsante { margin-left: auto; flex: none; }
#pienoScan { flex: 1; overflow-y: auto; overflow-x: hidden; background: #0f1622;
             align-self: stretch; }

/* Il gesto successivo dopo un'analisi: aprire quello che è appena uscito. */
.esito-azioni { margin-top: 10px; display: flex; gap: 8px; }
.report-pronto-apri { font-size: .72rem; font-weight: 650; color: var(--blu);
                      border: 1px solid var(--blu-bordo); background: var(--blu-tenue);
                      border-radius: 2px; padding: 3px 9px; margin-left: 10px; }

/* L'avviso del modello assente: ambra, non rosso. Non è un guasto da riparare
   prima di procedere — si procede, con un motore invece di due. */
.avviso.attesa { display: flex; gap: 11px; align-items: flex-start;
                 border-color: #e8d8a8; background: #fdf6e6; color: #6b5200;
                 margin-bottom: 14px; }
.avviso.attesa svg { width: 17px; height: 17px; flex: none; margin-top: 1px;
                     color: var(--attesa); }
.avviso.attesa b { font-weight: 650; }
.avviso.attesa .mono { font-size: .78rem; margin-left: 6px; }
.avviso.attesa .tenue { margin-top: 4px; font-size: .78rem; color: #7a6320; }

/* Il ritaglio della cella su cui si sta lavorando. Fisso e agganciato al campo,
   SOPRA: sotto litigherebbe con la tendina del completamento, e in una tabella
   dentro la cella allargherebbe la riga spostando tutte le altre caselle
   proprio mentre si guarda quella. */
/* La schedina e' fitta: la si lascia respirare in larghezza rispetto alla
   scansione, che si legge bene anche un po' più stretta. */
.due.larga-a-sinistra:has(#visSchedina) {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
}
/* La media query generica sta piu' in su e ha specificita' minore di `:has`:
   senza questa riga il visualizzatore resterebbe a due colonne anche su uno
   schermo stretto, dove la tabella delle corse non ci sta. */
@media (max-width: 1180px) {
  .due.larga-a-sinistra:has(#visSchedina) { grid-template-columns: 1fr; }
}

/* Le nove righe del blocco NOTE, come sul foglio: una sotto l'altra, numerate,
   e ciascuna larga quanto il riquadro. Erano un campo di testo solo, largo e
   senza forma, che non somigliava a niente di quello che c'e' sulla carta. */
.righe-note { display: flex; flex-direction: column; gap: 2px; }
.riga-note { display: flex; align-items: center; gap: 7px; }
.riga-note .riga-et { flex: none; width: 14px; text-align: right;
                      font-size: .66rem; color: var(--testo-tenue); }
.riga-note .campo-schedina { flex: 1; min-width: 0; }
.riga-note .campo-schedina input { font-family: inherit; }

/* Metriche staccata dalle due voci di lavoro: un filo verticale e un po' d'aria.
   Non un secondo gruppo con un titolo - sono tre voci in tutto, e un'etichetta
   di gruppo su una voce sola peserebbe piu' della distinzione che fa. */
.divisorio-nav { align-self: center; width: 1px; height: 30px;
                 background: var(--blu-4); margin: 0 6px; }

/* Le azioni di una scheda nell'elenco. In colonna a destra, dopo le misure.
   Tutti i comandi della riga hanno la STESSA altezza - 28px, quella della
   pastiglia delle misure: prima convivevano un pulsante alto, due bassi e
   un'icona quadrata, e la riga sembrava montata con pezzi di tre interfacce. */
.azioni-scheda { flex: none; display: flex; align-items: center; gap: 6px; }
.azioni-scheda .pulsante,
.riga-controlli .pulsante,
td.azioni .pulsante {
  height: 28px; padding: 0 11px; display: inline-flex; align-items: center;
  justify-content: center; gap: 6px; font-size: .8rem;
}
.azioni-scheda .pulsante.solo-icona,
td.azioni .pulsante.solo-icona { width: 28px; padding: 0; }
.azioni-scheda .pulsante svg,
td.azioni .pulsante svg { margin: 0; }

/* ---- il cartellino della cella, sulla scansione ----
   Sta DENTRO `.scansione`, in coordinate percentuali come i riquadri: resta
   attaccato alla cella a qualunque larghezza, e scorre con la carta invece di
   inseguirla. Sostituisce il pannello fluttuante col ritaglio, che mostrava una
   seconda volta un pezzo dell'immagine che sta gia' li' aperta - e per farlo
   copriva la tabella su cui si stava scrivendo. */
.nota-cella {
  position: absolute; z-index: 8;
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  max-width: 62%; padding: 4px 8px;
  border-radius: 2px; border: 1px solid var(--bordo-forte);
  background: rgba(255, 255, 255, .97); box-shadow: var(--ombra-alta);
  font-size: .72rem; line-height: 1.35; white-space: nowrap;
  pointer-events: none;         /* non ruba il clic ai riquadri sotto */
}
.nota-cella .chiave { color: var(--testo-tenue); font-size: .68rem; }
.nota-cella .letto  { color: var(--testo); font-weight: 650; }
.nota-cella .alt    { color: var(--c-media); }
.nota-cella .conf   { font-weight: 700; }
.nota-cella .motivo { color: var(--c-bassa); white-space: normal; flex-basis: 100%; }
/* il bordo sinistro porta la stessa scala di colore dei riquadri */
.nota-cella.c-grad    { border-left: 3px solid rgb(var(--conf-rgb)); }
.nota-cella.c-manuale { border-left: 3px solid var(--t-manuale); }
.nota-cella.c-vuoto   { border-left: 3px solid var(--bordo-forte); }
.nota-cella.c-grad    .conf { color: rgb(var(--conf-rgb)); }
.nota-cella.c-manuale .conf { color: var(--c-manuale); }

/* Il filo che lega il cartellino alla sua cella. Serve perche' il cartellino sta
   staccato: senza, appoggiato in mezzo ad altre righe, non si capirebbe a quale
   si riferisce. Alto quanto lo stacco, che lo calcola il JS. */
.nota-cella::before {
  content: ''; position: absolute; left: 14px; width: 2px;
  height: var(--filo, 0); background: var(--blu); opacity: .45;
}
.nota-cella:not(.sopra)::before { bottom: 100%; }
.nota-cella.sopra::before { top: 100%; }

/* LA CELLA SCELTA SI DEVE LEGGERE. E' quella che si sta correggendo, quindi e'
   l'unica su cui la grafia conta davvero, ed e' proprio quella che prima aveva
   due strati sopra: il riempimento della confidenza piu' quello della selezione.
   Adesso non ha nessun riempimento - `background: transparent` batte le regole
   `.bx.c-*` perche' ha la stessa specificita' e viene dopo - e si distingue
   soltanto per il contorno, che sta sul bordo e non sopra l'inchiostro. */
.bx.scelta {
  background: transparent;
  border-color: var(--blu);
  box-shadow: 0 0 0 2px var(--blu);
  opacity: 1; z-index: 7;
}

/* ---- le anteprime del modale si aprono ---- */
figure.apribile { position: relative; cursor: zoom-in; }
figure.apribile img { transition: filter .14s ease; }
figure.apribile:hover img { filter: brightness(.93); }
figure.apribile .lente {
  position: absolute; top: 8px; right: 8px; width: 26px; height: 26px;
  display: grid; place-items: center; border-radius: 2px;
  background: rgba(255, 255, 255, .94); border: 1px solid var(--blu-4);
  color: var(--blu-6); opacity: 0; transition: opacity .14s ease;
}
figure.apribile:hover .lente, figure.apribile:focus-within .lente { opacity: 1; }
figure.apribile .lente svg { width: 14px; height: 14px; }

/* ---- il riquadro che contiene la scansione ---- */
.scansione-riquadro {
  overflow: auto; max-height: 78vh;
  background: var(--blu-2); border-radius: 2px;
  overscroll-behavior: contain;   /* scorrendo qui non scorre la pagina sotto */
}

.comandi-zoom { display: inline-flex; align-items: center; gap: 2px; }
.comandi-zoom .pulsante { padding: 3px 8px; line-height: 1.1; }
.comandi-zoom #zoomEtichetta { min-width: 52px; text-align: center; }
.comandi-zoom .pulsante:disabled { opacity: .4; cursor: default; }

/* La X del cartellino: toglie il fuoco e riporta la scansione a pagina intera.
   Il cartellino non riceve clic (`pointer-events: none`, per non rubarli ai
   riquadri sotto), quindi il pulsante se li riprende per se'. */
.chiudi-nota {
  pointer-events: auto;
  /* SI DEVE VEDERE CHE E' UN PULSANTE. Era una × grigio-tenue di 14px senza
     bordo ne' fondo, appoggiata dopo la percentuale: in mezzo a un cartellino
     che contiene una chiave monospaziata, una lettura fra virgolette, una
     percentuale e una riga di motivo in rosso, un carattere grigio senza
     contorno non si distingue dal testo che gli sta accanto - e chi non la
     trova resta col cartellino aperto sopra la scansione.

     Adesso ha un contorno, un fondo e una misura da bersaglio (24px, non 18):
     si vede che si preme, e si prende al primo colpo. */
  order: 99; margin-left: auto; width: 24px; height: 24px;
  display: grid; place-items: center; padding: 0;
  font-size: 17px; line-height: 1; font-weight: 500;
  color: var(--testo-tenue);
  background: var(--carta); border: 1px solid var(--bordo-forte);
  border-radius: 3px; cursor: pointer;
  transition: color .12s ease, background .12s ease, border-color .12s ease;
}
/* Al passaggio diventa rossa: e' l'unico gesto del cartellino che annulla
   qualcosa, e il rosso lo dice prima del clic. */
.chiudi-nota:hover, .chiudi-nota:focus-visible {
  color: #fff; background: var(--male); border-color: var(--male);
  outline: none;
}


/* ---- la lente: la sola cella, ingrandita dentro il cartellino ----
   Sfondo, non un'immagine: e' la stessa pagina gia' a schermo, ingrandita con
   `background-size` e centrata sulla cella con `background-position`. Nessuna
   richiesta al server, e nessuna seconda immagine che possa disallinearsi da
   quella sotto. `transform: scale()` sarebbe stato piu' corto ma sfoca, e
   avrebbe scalato anche il testo del cartellino fino a renderlo illeggibile. */
.lente-cella {
  /* larghezza e altezza le decide `inquadraLente`, che le adatta alla cella:
     una casella di tre cifre e una data non vogliono lo stesso pannello */
  border-radius: 2px; border: 1px solid var(--blu-5);
  background-color: #fff; background-repeat: no-repeat;
  image-rendering: auto;
}
.nota-cella .riga-meta { display: flex; align-items: center; gap: 8px;
                         flex-wrap: wrap; margin-top: 6px; }

/* `overflow: visible` serviva al pannello delle misure, che sbordava dalla
   carta al passaggio del mouse. Il pannello non c'e' piu', ma la tendina del
   completamento e il cartellino delle celle vivono ancora dentro questa carta:
   resta visible, e gli angoli li tiene chi ha davvero qualcosa da tagliare. */
#archivioLista > .carta { overflow: visible; }
#archivioLista > .carta > h3:first-child { border-radius: 3px 3px 0 0; }
#pannelloTabella { border-radius: 0 0 3px 3px; }
.elenco-schede { border-radius: 0 0 3px 3px; }

/* La zona di caricamento, ora unica: si lascia cadere il file e parte. Era
   piccola perché veniva dopo una scelta; adesso è il primo e unico gesto. */
.zona-file.grande { padding: 46px 24px; }
.zona-file.grande .ico { display: grid; place-items: center; width: 46px; height: 46px;
                         margin: 0 auto 12px; border-radius: 3px;
                         background: var(--blu-tenue); border: 1px solid var(--blu-bordo); }
.zona-file.grande .ico svg { width: 22px; height: 22px; color: var(--blu); }
.zona-file.grande b { font-size: .95rem; }
.zona-file.grande span { display: block; max-width: 460px; margin: 6px auto 0;
                         line-height: 1.5; }
/* Mentre il file sale la zona NON sbiadisce: sbiadito si legge come
   «disattivato», e l'unico segno che si stava aspettando era la scritta
   «Carico…» in grigio chiaro. Adesso il riquadro si accende di blu tenue,
   il bordo diventa pieno e sotto scorre una barra. */
.zona-file.occupata { cursor: progress; border-style: solid;
                      border-color: var(--blu-bordo); background: var(--blu-tenue); }
.zona-file.occupata .ico { animation: respira 1.3s ease-in-out infinite; }
.zona-file .barra { max-width: 340px; margin: 16px auto 0; }
@keyframes respira { 50% { opacity: .35; } }


/* ===================== la barra di stato in fondo =====================
   Fissa, alta 26px, sempre visibile. Dice tre cose: quale versione gira, se il
   sistema sta lavorando adesso, quanto c'e' in archivio.

   Perche' fissa e non in fondo al flusso: le informazioni che porta valgono
   mentre si lavora - un lotto che gira, il numero di celle da rivedere - e in
   fondo al flusso, dopo una tabella di cinquanta righe, non le vedrebbe
   nessuno. Costa 26px di altezza, che `main` restituisce col suo padding.

   Il fondo e' il navy: e' l'unica superficie scura rimasta, ed e' una fascia
   sottile su cui non si legge niente di lungo. La barra alta ha smesso di
   essere blu perche' ci stavano dodici elementi che avevano bisogno di colori
   inventati per reggerci; qui ci stanno tre scritte corte. */
.barra-stato {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 35;
  height: var(--alt-stato);
  display: flex; align-items: center; gap: 10px;
  padding: 0 var(--margine);
  background: var(--blu-8); color: #b9c9e0;
  font-size: var(--f-micro);
  border-top: 1px solid var(--blu-7);
}
.bs-voce { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.bs-voce svg { width: 12px; height: 12px; color: var(--t-ok); flex: none; }
.barra-stato .tenue { color: #8fa3c0; }
.bs-sep { width: 1px; height: 13px; background: rgba(255, 255, 255, .18); flex: none; }


/* Cio' che il sistema sta facendo adesso. Sta al centro e si prende lo spazio
   che avanza, perche' e' la sola voce che cambia mentre la si guarda. */
.bs-lavoro {
  flex: 1 1 auto; min-width: 0; color: #dbe6f5;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Quando non c'e' lavoro in corso, il conteggio dell'archivio va a destra da
   solo: `margin-left: auto` invece di contare su un fratello che e' nascosto. */
.bs-coda { margin-left: auto; white-space: nowrap; }

@media (max-width: 900px) {
  /* Stretti cede il conteggio dell'archivio: e' quello che si puo' leggere
     anche altrove (le tessere della vista Elabora lo dicono piu' grande). */
  .bs-coda, .bs-sep { display: none; }
}


/* ===================== impostazioni =====================
   Le voci in griglia e non in colonna: sono sei, e sei righe alte da una
   pagina intera fanno scorrere per leggere quello che si sta cambiando. */
.griglia-imp {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(268px, 1fr));
}
.voce-imp {
  display: flex; flex-direction: column; gap: 5px;
  padding: 12px 13px; border-radius: 3px;
  background: var(--blu-1); border: 1px solid var(--bordo);
}
.voce-imp > label { font-size: var(--f-piccolo); font-weight: 650;
                    color: var(--blu-8); }
.voce-imp input[type=text], .voce-imp input[type=number], .voce-imp select {
  width: 100%; font-size: var(--f-base);
}
.nota-imp { font-size: var(--f-micro); color: var(--testo-tenue); line-height: 1.45; }
.nota-imp b { color: var(--attesa); font-weight: 650; }
/* Il nome della variabile in fondo, piccolo: chi lavora non ne ha bisogno, chi
   apre il `.env` con un editor si': e' il ponte fra le due viste dello stesso
   valore. */
.chiave-imp { font-size: .62rem; color: var(--blu-5); letter-spacing: .02em; }

/* Un'impostazione imposta nell'ambiente si vede prima di provare a salvarla:
   il valore nuovo finira' nel `.env` ma non avra' effetto fino al riavvio. */
.voce-imp.da-ambiente { border-color: #ecdcb4; background: #fdfaf1; }

/* La casella con l'etichetta che dice cosa vale. Una casella spuntata e una
   vuota, su una regola che spegne un pezzo dell'estrazione, si distinguono
   solo guardando bene: la parola accanto non fa guardare bene. */
.interruttore { display: inline-flex; align-items: center; gap: 8px;
                cursor: pointer; font-size: var(--f-base); padding: 5px 0; }
.interruttore input { width: 16px; height: 16px; accent-color: var(--blu-7);
                      margin: 0; cursor: pointer; }

.riga-imp-azioni { display: flex; align-items: center; gap: 10px;
                   flex-wrap: wrap; margin-top: 16px;
                   padding-top: 15px; border-top: 1px solid var(--bordo); }
.riga-imp-azioni .messaggio { margin: 0; }

/* --- i moduli di aggiunta: una riga sola, i campi larghi quanto il contenuto --- */
.modulo-riga { display: flex; align-items: flex-end; gap: 9px; flex-wrap: wrap; }
.campo-riga { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
/* `larga` prende lo spazio che avanza: un cognome e nome e una matricola non
   meritano la stessa colonna, e stringere tutto uguale rende illeggibile
   proprio il campo su cui si scrive di piu'. */
.campo-riga.larga { flex: 1 1 190px; }
.campo-riga label { font-size: var(--f-micro); font-weight: 600;
                    color: var(--testo-tenue); }
.campo-riga input, .campo-riga select { width: 100%; }
.modulo-riga button { flex: none; }
.aiuto-modulo { font-size: var(--f-micro); color: var(--testo-tenue);
                margin-top: 9px; line-height: 1.45; }
#msgControllore:empty, #msgFermata:empty { display: none; }


/* ===================== la barra del caricamento =====================
   Adesso sa quanto manca: `XMLHttpRequest` riporta i byte inviati, cosa che
   `fetch` non fa. Resta `indeterminata` solo quando il browser non sa il
   totale - il caso in cui la barra vecchia era l'unica cosa possibile. */
.carico-riquadro {
  margin-top: 15px; padding: 11px 13px; border-radius: 3px; text-align: left;
  background: var(--carta); border: 1px solid var(--blu-4);
}
.riga-carico { display: flex; align-items: baseline; justify-content: space-between;
               gap: 10px; font-size: var(--f-piccolo); margin-bottom: 7px; }
.riga-carico #caricoPerc { font-weight: 700; color: var(--blu-7);
                           font-size: var(--f-base); }
.carico-riquadro .barra { height: 6px; margin-top: 0; }
#caricoDettaglio { font-size: var(--f-micro); margin-top: 6px; }
#caricoDettaglio:empty { display: none; }


/* ===================== Elabora: due colonne =====================
   A SINISTRA QUELLO CHE C'E' DA FARE, A DESTRA QUELLO CHE E' FATTO.
   Prima era un elenco solo con un pulsante «solo da validare» che filtrava.
   Il filtro ha due difetti: si dimentica acceso - e allora sembra che le schede
   validate siano sparite - e nasconde proprio il confronto che si vuole fare,
   cioe' quante ne restano contro quante ne sono passate. Due colonne dicono
   entrambe le cose senza premere niente.

   La colonna di sinistra e' piu' larga: e' quella su cui si lavora, e le sue
   voci portano le misure e i tre pulsanti. A destra basta sapere quale scheda
   e' e quando e' stata validata. */
.schede-due {
  display: grid; gap: 0;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  align-items: start;
}
/* Il filo fra le due colonne, non un bordo: un bordo su entrambe darebbe due
   linee appaiate al centro. */
.schede-due > .colonna-schede + .colonna-schede {
  box-shadow: inset 1px 0 0 var(--bordo);
}
.colonna-schede { min-width: 0; }

.testa-colonna {
  display: flex; align-items: center; gap: 8px;
  padding: 9px var(--dentro);
  background: var(--blu-1); border-bottom: 1px solid var(--bordo);
  font-size: var(--f-piccolo); font-weight: 650; color: var(--blu-8);
  position: sticky; top: 0; z-index: 2;
}
.testa-colonna svg { width: 14px; height: 14px; flex: none; }
/* Il conteggio e' la sola cosa che resta delle tessere di riepilogo: era una
   fascia di cinque riquadri sopra l'elenco per dire cinque numeri, e due di
   quei numeri - «da validare» e «da inviare» - sono esattamente i titoli di
   queste due colonne. */
.testa-colonna .quanti {
  margin-left: auto; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-weight: 700; font-size: var(--f-base);
}
.testa-colonna.da-fare { color: var(--attesa); background: #fdf9ef; }
.testa-colonna.da-fare svg { color: var(--attesa); }
.testa-colonna.fatte svg { color: var(--t-ok); }

/* Ogni colonna scorre per suo conto: se scorressero insieme, arrivare in fondo
   a una lista di quaranta schede da validare porterebbe fuori vista le
   validate, che sono l'altra meta' di quello che si sta guardando. */
.colonna-schede .elenco-schede { max-height: 68vh; overflow-y: auto; }

/* La voce di una scheda validata: senza misure e senza azioni, quindi due
   righe invece di una griglia. Si puo' ancora aprire - una scheda validata si
   riguarda - ma non ha i pulsanti addosso. */
.voce-fatta {
  display: flex; align-items: baseline; gap: 9px;
  padding: 9px var(--dentro); border-bottom: 1px solid var(--bordo);
  cursor: pointer; font-size: var(--f-base);
}
.voce-fatta:hover { background: var(--blu-1); }
.voce-fatta b { font-weight: 650; flex: none; }
.voce-fatta .quando { margin-left: auto; font-size: var(--f-micro);
                      color: var(--testo-tenue); white-space: nowrap;
                      font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.voce-fatta .dove { color: var(--testo-tenue); font-size: var(--f-piccolo);
                    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* «inviata» e' uno stato in piu' di «validata»: la pastiglia lo dice senza una
   colonna dedicata. */
.voce-fatta .inviata {
  flex: none; font-size: var(--f-micro); font-weight: 650; padding: 1px 6px;
  border-radius: 2px; color: var(--blu-8);
  background: var(--blu-2); border: 1px solid var(--blu-4);
}

/* Stretti, le due colonne si impilano: affiancate sotto i 1100px diventano due
   colonne da 300px in cui il nome del file non ci sta. */
@media (max-width: 1100px) {
  .schede-due { grid-template-columns: 1fr; }
  .schede-due > .colonna-schede + .colonna-schede {
    box-shadow: none; border-top: 1px solid var(--bordo);
  }
  .colonna-schede .elenco-schede { max-height: none; }
}


/* ===================== avanzamento: i passi e i dati =====================
   La percentuale da sola non dice dove si e'. I passi sono quelli veri della
   pipeline, nell'ordine in cui li annuncia il server: fatto, in corso, da
   fare. Un passo in corso pulsa; quelli fatti hanno la spunta.

   PERCHE' I PASSI SERVONO DAVVERO QUI. `avanzamento` lo calcola il server
   contando le chiamate al modello di visione sulle attese. Con il modello
   spento - com'e' adesso - le chiamate restano zero, e quel numero resta zero
   per tutta la lavorazione: la barra scorreva a vuoto e la percentuale era un
   trattino. La fase invece cambia comunque, perche' la scrive la pipeline
   mentre lavora, e da quella si ricava un avanzamento che si muove. */
.passi-avanz {
  display: flex; align-items: center; flex-wrap: wrap; gap: 5px 14px;
  margin-top: 12px; font-size: var(--f-micro);
}
.passo {
  display: inline-flex; align-items: center; gap: 6px;
  color: #97a2b4; white-space: nowrap;
}
.passo i {
  width: 13px; height: 13px; flex: none; border-radius: 50%;
  border: 1.5px solid currentColor; display: grid; place-items: center;
  font-size: 8px; font-style: normal; line-height: 1;
}
.passo.fatto { color: var(--t-ok); }
.passo.fatto i { background: var(--t-ok); border-color: var(--t-ok); color: #fff; }
.passo.corso { color: var(--blu-7); font-weight: 700; }
.passo.corso i { border-color: var(--blu-7); animation: respira 1.2s ease-in-out infinite; }
.passo.corso i::before { content: ''; width: 5px; height: 5px; border-radius: 50%;
                         background: var(--blu-7); }
.passo.guaio { color: var(--male); }
.passo.guaio i { border-color: var(--male); }

/* OGNI NUMERO CON LA SUA ETICHETTA, in griglia. Erano concatenati in una riga
   sola separati da punti: sette valori di fila senza dire quale fosse quale. */
.dati-avanz {
  display: grid; gap: 1px 0; margin-top: 13px;
  grid-template-columns: repeat(auto-fit, minmax(104px, 1fr));
  background: var(--bordo); border: 1px solid var(--bordo); border-radius: 3px;
  overflow: hidden;
}
.dati-avanz:empty { display: none; }
.dato-avanz {
  display: flex; flex-direction: column; gap: 3px;
  padding: 8px 11px; background: var(--carta);
}
.dato-avanz .et { font-size: .62rem; font-weight: 650; letter-spacing: .04em;
                  text-transform: uppercase; color: var(--testo-tenue); }
.dato-avanz .vl { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
                  font-size: var(--f-base); font-weight: 650; color: var(--testo); }
/* Un valore che chiede attenzione - errori diversi da zero - si tinge; a zero
   resta grigio, perche' «0 errori» non e' una notizia. */
.dato-avanz .vl.guaio { color: var(--male); }
.dato-avanz .vl.zero { color: var(--testo-tenue); font-weight: 500; }

/* La percentuale sparisce quando non c'e' niente da contare, invece di
   mostrare un trattino alto 1.5rem in fondo alla riga. */
.avanz-perc.senza { display: none; }

/* Lo stato vuoto dentro una colonna: 44px di padding sopra e sotto vanno bene
   in mezzo a una carta larga, non in una colonna che ne ha due accanto. */
.vuoto-stato.piccolo { padding: 22px 16px; font-size: var(--f-piccolo); }


/* Quante celle restano da rivedere, in chiaro. Ha preso il posto del quadratino
   delle misure: quello si tingeva di rosso sulla confidenza bassa e teneva
   dietro di se' un pannello con tre numeri della pipeline. Il rosso su ogni
   riga faceva sembrare rotto un lavoro che era soltanto da controllare, e la
   confidenza media non e' una cosa che chi valida possa usare. */
.voce-scheda .da-rivedere {
  flex: none; font-size: var(--f-micro); font-weight: 650; white-space: nowrap;
  padding: 2px 8px; border-radius: 2px; color: var(--attesa);
  background: #fdf6e6; border: 1px solid #ecdcb4;
}

/* ===================== gli elenchi dell'anagrafica ===================== */
/* Da dove viene una voce. Non e' decorazione: dice se il cestino cancella o
   esclude, e sono due cose diverse. */
.fonte {
  display: inline-block; font-size: .62rem; font-weight: 650;
  letter-spacing: .02em; padding: 1px 6px; border-radius: 2px;
  margin-right: 4px; white-space: nowrap;
  border: 1px solid var(--bordo-forte); color: var(--testo-tenue);
  background: var(--carta);
}
/* L'anagrafica aziendale e i feed ACTV sono le fonti che hanno ragione: blu.
   «a mano» e' l'unica che questo pannello possiede, e si vede che e' altro. */
.fonte.f-anagrafica, .fonte.f-rete {
  color: var(--blu-8); background: var(--blu-2); border-color: var(--blu-4);
}
.fonte.f-manuale { color: var(--attesa); background: #fdf6e6; border-color: #ecdcb4; }

/* Una riga esclusa resta leggibile: barrarla la renderebbe illeggibile proprio
   mentre si decide se rimetterla. Sbiadita, col nome marcato. */
.riga-esclusa > td { opacity: .62; }
.riga-esclusa > td:last-child { opacity: 1; }
.marca-esclusa {
  display: inline-block; margin-left: 7px; font-size: .62rem; font-weight: 650;
  padding: 1px 6px; border-radius: 2px; white-space: nowrap;
  color: var(--male); background: #fdefed; border: 1px solid #eec4bf;
}
/* La colonna dei gesti non si allarga e non va a capo. */
.azioni-cella { width: 1%; white-space: nowrap; text-align: right; }

.gruppo-filtri { display: inline-flex; gap: 3px; }
/* I comandi di paginazione si staccano dal resto della riga. */
.spinta-pag { margin-left: auto; display: flex; align-items: center; gap: 7px; }

/* Gli elenchi dell'anagrafica scorrono da soli: quaranta righe per pagina in
   una carta che cresce spingerebbero l'altra carta fuori dallo schermo. */
#listaControllori, #listaFermate { max-height: 62vh; overflow: auto; }


/* ===================== le linguette =====================
   Quattro pannelli in una carta sola. Erano quattro carte impilate: per
   arrivare alle linee si scorreva oltre due elenchi che non si stava
   guardando, e ognuna mostrava una striscia di elenco alta poche righe perche'
   l'altezza se la dividevano in quattro. Con le linguette si vede una cosa per
   volta e quella cosa prende tutta l'altezza.

   La linguetta attiva si stacca col filo blu sotto, come le voci della barra:
   e' lo stesso gesto - scegliere dove si e' - e conviene che si somigli. */
.linguette {
  display: flex; align-items: stretch; gap: 2px;
  padding: 0 var(--dentro); background: var(--blu-1);
  border-bottom: 1px solid var(--bordo);
  overflow-x: auto;
}
.linguetta {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 11px 13px; border: 0; background: transparent;
  border-bottom: 2px solid transparent;
  color: var(--testo-tenue); font: inherit; font-size: var(--f-base);
  font-weight: 500; cursor: pointer; white-space: nowrap;
  transition: color .12s ease, background .12s ease;
}
.linguetta svg { color: currentColor; }
.linguetta:hover { color: var(--blu-6); background: var(--blu-2); }
.linguetta.attiva { color: var(--blu-7); font-weight: 650;
                    border-bottom-color: var(--blu-7); background: var(--carta); }
/* «Sistema» sta staccata dalle tre anagrafiche: non e' un elenco da
   consultare, e in mezzo alle altre la si prendeva andando da una all'altra. */
.linguetta.staccata { margin-left: auto; }
.conta-ling {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: var(--f-micro); font-weight: 650;
  padding: 0 5px; border-radius: 2px;
  background: var(--blu-2); color: var(--blu-6); border: 1px solid var(--blu-4);
}
.linguetta.attiva .conta-ling { background: var(--blu-7); color: #fff;
                                border-color: var(--blu-7); }
/* La scorciatoia scritta sulla linguetta: chi l'ha appena scoperta con
   Ctrl+Alt+S la ritrova senza doversela ricordare. */
.tasto-ling {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .6rem; color: var(--testo-tenue);
  padding: 1px 5px; border-radius: 2px;
  background: var(--carta); border: 1px solid var(--bordo);
}

.pannello-imp { min-width: 0; }
/* L'elenco prende l'altezza che resta e scorre da solo: la carta non cresce
   con le quaranta righe, e i comandi in cima restano dove sono. */
.elenco-anag { max-height: 58vh; overflow: auto; }
.elenco-anag table { border-collapse: collapse; }
.elenco-anag th { position: sticky; top: 0; z-index: 2; }

/* Il percorso di una linea: una riga sola, tagliata con l'ellissi. Intero sta
   nel `title`, perche' venti fermate in una cella di tabella sono una riga
   alta mezza pagina e un elenco che non si scorre piu'. */
.percorso {
  max-width: 460px; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; color: var(--testo-tenue); font-size: var(--f-piccolo);
}

/* Il modulo di aggiunta sta sotto i comandi di ricerca, su fondo bianco e
   separato da un filo: e' un'altra cosa dal filtrare l'elenco. */
.pannello-imp .modulo-riga {
  padding: 12px var(--dentro); border-bottom: 1px solid var(--bordo);
}
.aiuto-inline { font-size: var(--f-micro); color: var(--testo-tenue);
                align-self: center; }
#msgControllore:not(:empty), #msgFermata:not(:empty) {
  padding: 0 var(--dentro) 11px;
}

/* ===================== la barra della composizione =====================
   Marchi sottili, estremi arrotondati di 4px sui due capi della barra intera e
   non su ogni segmento: arrotondare ogni segmento aprirebbe quattro spicchi di
   fondo dentro una barra che deve leggersi come un intero.

   Il distacco di 2px fra i segmenti e' del colore della superficie, non un
   bordo: un bordo scurirebbe il confine fra due tinte e su un segmento sottile
   diventerebbe piu' visibile del segmento. */
.barra-comp {
  display: flex; height: 30px; border-radius: 4px; overflow: hidden;
  background: var(--blu-1); gap: 2px;
}
.barra-comp .seg { min-width: 4px; cursor: help; }

/* La legenda c'e' sempre, e ogni voce porta il suo numero accanto: il colore da
   solo non deve mai essere l'unica cosa che identifica una fetta. Il testo sta
   in inchiostro normale - il pallino colorato accanto porta l'identita' - perche'
   scritte di quattro colori diversi su fondo bianco sono quattro contrasti da
   verificare invece di uno. */
.legenda-comp {
  display: grid; gap: 7px 18px; margin-top: 14px;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}
.voce-leg { display: flex; align-items: center; gap: 8px; font-size: var(--f-piccolo);
            cursor: help; }
.voce-leg .bollo { width: 10px; height: 10px; border-radius: 2px; flex: none; }
.voce-leg .et-leg { color: var(--testo); min-width: 0; overflow: hidden;
                    text-overflow: ellipsis; white-space: nowrap; }
.voce-leg b { margin-left: auto; font-weight: 650; color: var(--testo); }

/* La tabella dei numeri esatti. Non e' un doppione della barra: la barra dice
   la proporzione a colpo d'occhio, questa dice il numero - e la leggono chi non
   distingue i colori e chi stampa in bianco e nero. */
.tabella-comp { margin-top: 16px; border-top: 1px solid var(--bordo); }
.tabella-comp th { text-transform: none; letter-spacing: 0; background: transparent;
                   border-bottom: 1px solid var(--bordo); position: static; }
.tabella-comp td, .tabella-comp th { padding: 6px 0; }
.tabella-comp td + td, .tabella-comp th + th { text-align: right; }
.tabella-comp .riga-tot td { border-top: 1px solid var(--bordo-forte);
                             font-weight: 650; }
.tabella-comp tr:last-child td { border-bottom: 0; }

/* ===================== le barre per giorno =====================
   Una serie sola: nessuna legenda, il titolo della carta la nomina. Le colonne
   crescono dal basso, con l'estremo arrotondato in cima e l'attacco vivo sulla
   linea di base - una barra arrotondata anche in basso sembra staccata da terra
   e la lunghezza si legge peggio.

   Il giorno a zero tiene la sua colonna e non disegna niente: la distanza fra
   le barre deve voler dire tempo. */
.grafico-giorni {
  display: flex; align-items: flex-end; gap: 2px;
  height: 190px; padding-top: 6px;
}
.col-giorno {
  flex: 1 1 0; min-width: 0; height: 100%;
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  cursor: help; border-radius: 2px;
}
.col-giorno:hover, .col-giorno:focus-visible {
  background: var(--blu-1); outline: none;
}
/* L'asta occupa l'altezza che resta: la cifra e l'etichetta stanno sotto, e
   `flex: 1` sull'asta le tiene ancorate al fondo qualunque sia la barra. */
.col-giorno .asta {
  flex: 1 1 auto; width: 100%; min-height: 0;
  display: flex; align-items: flex-end; justify-content: center;
  /* la linea di base: un filo, non un asse disegnato */
  border-bottom: 1px solid var(--bordo-forte);
}
.col-giorno .pieno {
  width: 100%; max-width: 26px; background: var(--blu-7);
  border-radius: 3px 3px 0 0;
}
.col-giorno:hover .pieno, .col-giorno:focus-visible .pieno { background: var(--blu-8); }
/* La cifra sopra l'etichetta, e solo dove c'e' qualcosa da dire: un «0» su
   nove giorni vuoti sono nove zeri da scavalcare con l'occhio. */
.col-giorno .cifra { font-size: var(--f-micro); font-weight: 650;
                     color: var(--testo); min-height: 13px; }
.col-giorno .et-giorno { font-size: .6rem; color: var(--testo-tenue);
                         white-space: nowrap; }
@media (max-width: 900px) {
  /* stretti l'etichetta di ogni giorno non ci sta: resta nel `title` */
  .col-giorno .et-giorno { display: none; }
}


/* ===================== il modale della linea corretta ===================== */
.cambi-linea { display: grid; gap: 9px; margin: 15px 0 0; }
.cambio {
  padding: 10px 12px; border-radius: 3px;
  background: var(--blu-1); border: 1px solid var(--bordo);
}
.capo-cambio { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.dove-cambio { font-size: var(--f-micro); font-weight: 650;
               text-transform: uppercase; letter-spacing: .04em;
               color: var(--testo-tenue); }
/* Il tipo di cambio, a destra dell'etichetta: dice se il posto resta lo stesso
   e cambia il nome, o se cambia il posto, o se la riga si contraddice. */
.tipo-cambio { margin-left: auto; font-size: var(--f-micro); font-weight: 650;
               padding: 1px 7px; border-radius: 2px; white-space: nowrap; }
.scelta-cambio { display: flex; align-items: center; }
.scelta-cambio input { width: 15px; height: 15px; margin: 0;
                       accent-color: var(--blu-7); cursor: pointer; }
/* Il punto esclamativo dove non c'e' niente da spuntare: occupa lo stesso posto
   della casella, cosi' le righe restano incolonnate. */
.segno-cambio {
  width: 15px; height: 15px; flex: none; display: grid; place-items: center;
  border-radius: 2px; font-size: 11px; font-weight: 700;
  color: #fff; background: var(--attesa);
}
/* `normalizza` e' quasi niente - cambia la grafia - e sta in blu. `sposta`
   cambia il posto: ambra. `contraddice` e `ambigua` chiedono una persona. */
.t-normalizza .tipo-cambio { color: var(--blu-8); background: var(--blu-2); }
.t-sposta .tipo-cambio { color: var(--attesa); background: #fdf6e6; }
.t-sposta { border-color: #ecdcb4; background: #fdfaf1; }
.t-contraddice .tipo-cambio, .t-ambigua .tipo-cambio {
  color: var(--male); background: #fdefed;
}
.t-contraddice, .t-ambigua { border-color: #eec4bf; background: #fdf7f6; }
.da-a .rosa { color: var(--testo-tenue); font-size: var(--f-piccolo); }
.da-a { display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
        font-size: var(--f-base); }
/* Il valore che si perde barrato, quello nuovo in navy: la direzione del cambio
   si deve leggere senza rileggere le etichette. */
.da-a .prima { color: var(--testo-tenue); text-decoration: line-through; }
.da-a .freccia-cambio { color: var(--blu-5); flex: none; }
.da-a .dopo { color: var(--blu-8); font-weight: 650; }
.perche-cambio { font-size: var(--f-micro); color: var(--testo-tenue);
                 margin-top: 5px; }


/* ===================== lo stato delle fonti certe ===================== */
.fonti-certe table { border-collapse: collapse; }
.fonti-certe th { text-transform: none; letter-spacing: 0; background: transparent;
                  position: static; border-bottom: 1px solid var(--bordo-forte); }
.fonti-certe td, .fonti-certe th { padding: 7px 10px 7px 0; }
/* Una fonte vuota si vede: il vincolo che ne dipende non funziona, e la riga
   deve dirlo prima che qualcuno si chieda perche' non succede niente. */
.fonti-certe .fonte-spenta td { color: var(--attesa); }
.fonti-certe .fonte-spenta td:first-child { font-weight: 650; }
.fonti-certe .fonte-spenta .tenue { color: var(--attesa) !important; }


/* ===================== la catena delle corse =====================
   Un avviso, non un modale: non c'e' niente da decidere - e' successo - ma una
   cella e' cambiata da sola e chi ha corretto quella accanto deve saperlo,
   altrimenti la rimette a mano credendola sbagliata. */
.avviso-catena {
  margin: 0 var(--dentro) 12px; padding: 9px 12px; border-radius: 3px;
  background: var(--blu-1); border: 1px solid var(--blu-4);
  border-left: 3px solid var(--blu-6);
  font-size: var(--f-piccolo); line-height: 1.5;
}
.riga-catena + .riga-catena { margin-top: 5px; padding-top: 5px;
                              border-top: 1px solid var(--bordo); }
.riga-catena b { color: var(--blu-8); font-weight: 650; }

/* ================= I CONTI CHE NON TORNANO =================

   DUE SEGNALI, E NON SONO LO STESSO ROSSO DELLE CELLE.
   Il bordo colorato delle caselle porta gia' la CONFIDENZA (--t-ok, --t-dubbio,
   ...), cioe' «quanto la macchina si fida di questa lettura». Qui si dice una
   cosa diversa: «questa colonna, tutta insieme, non quadra». Se usassi la
   stessa tinta, una colonna segnalata sembrerebbe venti celle lette male, che
   e' proprio la conclusione sbagliata - di solito la cella storta e' una, o
   addirittura e' giusta e ad essere letto male e' il totale.

   Quindi: il colore delle celle resta quello che era, e il segnale di colonna
   e' un FONDO tenue piu' un filo verticale sul bordo sinistro. Si vede da
   lontano come una banda, non come venti errori. */
td.col-storta, th.col-storta {
  background: #fdf4f2;
  box-shadow: inset 2px 0 0 var(--male);
}
th.col-storta { color: var(--male); }
/* Il totale in fondo alla banda: e' il valore su cui il conto casca, e merita
   di staccarsi dalle celle della colonna. */
.riga-totali td.col-storta { background: #fbe9e6; font-weight: 650; }

/* La riga storta (AG1+…+AG6 diverso dal Tot. di quella corsa). PRIMA
   coloriva di rosso OGNI casella della riga - anche le cinque AG che magari
   erano lette bene - perche' il controllo sa solo che la SOMMA non torna, non
   quale singola casella e' sbagliata. Ma la casella che quella somma la
   dichiara e' una sola, `totali`, ed e' la stessa che il caso "torna"
   (sotto) gia' evidenzia da sola e non tutta la riga: qui si fa lo stesso,
   cosi' il rosso indica la casella virtuale sospetta invece di accusare
   cinque celle innocenti insieme a lei. L'etichetta della riga (`riga-et`)
   resta segnata: dice ANCORA quale corsa guardare, senza dipingerla tutta. */
tr.riga-storta td[data-campo="totali"] {
  background: #fdf4f2;
  box-shadow: inset 0 1px 0 var(--male), inset 0 -1px 0 var(--male);
}
tr.riga-storta th.riga-et { color: var(--male); font-weight: 650; }

/* Il lampeggio quando si arriva da un clic sulla fascia: due battiti e basta.
   Serve a dire «e' questa», in una tabella dove lo scorrimento appena finito
   non dice da solo dove ci si e' fermati. */
.lampeggia { animation: batti 1.4s ease-in-out; }
@keyframes batti {
  0%, 100% { background-color: transparent; }
  15%, 55% { background-color: var(--blu-3); }
}
@media (prefers-reduced-motion: reduce) { .lampeggia { animation: none; } }

/* ---------- la fascia in testa alla scheda ---------- */
.controlli {
  display: flex; gap: 11px; align-items: flex-start;
  margin-bottom: var(--stacco);
  padding: 11px 13px;
  border: 1px solid #f0cdc6; border-left: 3px solid var(--male);
  border-radius: 3px; background: #fdf4f2;
}
.controlli > svg { width: 15px; height: 15px; flex: 0 0 auto;
                   margin-top: 1px; color: var(--male); }
.controlli.tornano { border-color: #cfe6d9; border-left-color: var(--buono);
                     background: #f4faf6; }
.controlli.tornano > svg { color: var(--buono); }
.controlli-testo { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.controlli-testo b { font-size: var(--f-base); font-weight: 650; }
.controlli-testo .tenue { font-size: var(--f-piccolo); color: var(--testo-tenue); }

.voci-controllo { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
/* Ogni voce e' un pulsante perche' FA qualcosa - porta alla colonna - e chi usa
   la tastiera deve poterci arrivare col Tab come su ogni altro comando. */
.voce-controllo {
  display: flex; align-items: baseline; gap: 7px;
  padding: 5px 9px; border: 1px solid #f0cdc6; border-radius: 3px;
  background: var(--carta); cursor: pointer; text-align: left;
  font: inherit; font-size: var(--f-piccolo); color: var(--testo);
}
.voce-controllo:hover { border-color: var(--male); background: #fdf4f2; }
.voce-controllo:focus-visible { outline: 2px solid var(--blu-7); outline-offset: 1px; }
.voce-controllo b { font-weight: 650; }
.voce-controllo span { color: var(--testo-tenue); }
.voce-controllo .scarto {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-style: normal; font-weight: 650; color: var(--male);
}

/* ---------- salta alla prossima cella da rivedere ---------- */
.da-rivedere { display: flex; align-items: center; gap: 4px; }
.da-rivedere span { font-size: var(--f-micro); color: var(--testo-tenue);
                    white-space: nowrap; }
/* Le voci oltre il tetto non spariscono: sono nella tabella, segnate. Questa
   riga dice dove guardare, invece di lasciar credere che siano solo otto. */
.altri-controlli {
  align-self: center; font-size: var(--f-piccolo); color: var(--testo-tenue);
}

/* LE RIGHE VUOTE NON FANNO PARTE DELLA BANDA. Una colonna segnata attraversa
   tutte e ventitre' le righe, comprese le dieci che sul foglio di carta sono
   bianche: meta' tabella si colorava per un totale che non torna fra le corse
   scritte. Il segnale deve stare dove ci sono i dati. */
tr.riga-vuota td.col-storta { background: transparent; box-shadow: none; }

/* IL VERDE E' PIU' TENUE DEL ROSSO, di proposito. Dicono due cose diverse: il
   rosso e' un compito - vai a guardare - il verde e' un permesso, non devi
   guardare. Se avessero lo stesso peso, una tabella con sette colonne verdi e
   due rosse griderebbe in nove punti invece che in due, e il compito
   sparirebbe dentro la conferma. Filo sul bordo come il rosso, ma senza fondo
   sulle celle: basta la testata a dire che la colonna e' a posto. */
th.col-torna { color: var(--buono); box-shadow: inset 2px 0 0 var(--buono); }
td.col-torna { box-shadow: inset 2px 0 0 rgba(21, 115, 71, .28); }
.riga-totali td.col-torna { background: #f1f8f4; font-weight: 650; }
tr.riga-torna th.riga-et { color: var(--buono); }
tr.riga-torna td[data-campo="totali"] { background: #f1f8f4; }

/* Il rosso vince sul verde dove si incrociano: una riga che non torna dentro
   una colonna verificata e' un problema, non una conferma. Sta dopo apposta. */
td.col-storta, th.col-storta { box-shadow: inset 2px 0 0 var(--male); }
tr.riga-storta td, tr.riga-storta th.riga-et {
  box-shadow: inset 0 1px 0 var(--male), inset 0 -1px 0 var(--male);
}
tr.riga-vuota td.col-torna { box-shadow: none; }

/* ==================== IL PULSANTE DELLE IMPOSTAZIONI ====================
   Sta in basso a destra e non nella barra di stato, dove era una parola.
   L'ingranaggio a 13 px era una macchia; qui il glifo ne ha 24 e il bersaglio
   52, che e' anche la misura minima perche' si prenda col dito.

   Il cerchio e' pieno e navy come i pulsanti primari: e' un comando, non una
   decorazione, e in una pagina bianca un cerchio chiaro con un filo si perde.
   L'ombra e' bassa e larga - non un alone - perche' deve dire «sta sopra la
   pagina» e nient'altro. */
.fab-impostazioni {
  position: fixed; right: 22px; z-index: 40;
  /* IL FONDO SI CONTA DALLA BARRA DI STATO, non dal fondo della finestra: con
     `bottom: 22px` il cerchio ci appoggiava sopra e i due elementi si leggevano
     come una cosa sola. Ventidue px di aria oltre l'altezza della barra lo
     riportano a galleggiare, che e' quello che un floating button deve fare. */
  bottom: calc(var(--alt-stato) + 22px);
  width: 52px; height: 52px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: 50%; cursor: pointer;
  background: var(--blu-7); color: #fff;
  box-shadow: 0 2px 4px rgba(35, 29, 107, .18), 0 8px 20px rgba(35, 29, 107, .22);
  transition: background .14s ease, box-shadow .14s ease, transform .14s ease;
}
.fab-impostazioni svg { width: 24px; height: 24px; vertical-align: 0; }

/* L'INGRANAGGIO GIRA, MA POCO. Trenta gradi su mezzo secondo dice «questo
   coso si muove, ci sono dentro delle regolazioni»; un giro intero sarebbe un
   giocattolo, e su un gestionale che si guarda otto ore al giorno stanca.
   Un sesto di giro e' anche esattamente un dente, quindi la figura torna
   identica a se stessa e non si vede l'interpolazione. */
.fab-impostazioni:hover {
  background: var(--blu-8);
  box-shadow: 0 3px 6px rgba(35, 29, 107, .2), 0 12px 28px rgba(35, 29, 107, .28);
}
.fab-impostazioni:hover svg { transform: rotate(60deg); }
.fab-impostazioni svg { transition: transform .5s cubic-bezier(.22, .61, .36, 1); }
.fab-impostazioni:active { transform: translateY(1px); box-shadow: 0 1px 3px rgba(35, 29, 107, .24); }
.fab-impostazioni:focus-visible {
  outline: 2px solid var(--blu-7); outline-offset: 3px;
}

/* APERTA LA SUA VISTA SI ROVESCIA: fondo chiaro, ingranaggio navy, e resta
   ruotato. Un comando che porta in un posto deve dire quando quel posto e'
   quello in cui si e' gia'. */
.fab-impostazioni.attivo {
  background: var(--carta); color: var(--blu-7);
  box-shadow: 0 0 0 2px var(--blu-7) inset,
              0 2px 4px rgba(35, 29, 107, .12), 0 8px 20px rgba(35, 29, 107, .16);
}
.fab-impostazioni.attivo svg { transform: rotate(60deg); }

/* Su schermi bassi si stringe: 52 px in fondo a destra su un portatile da 768
   coprono l'ultima riga della schedina, che e' proprio quella che si rivede. */
@media (max-height: 780px) {
  .fab-impostazioni { width: 44px; height: 44px; right: 16px;
                      bottom: calc(var(--alt-stato) + 14px); }
  .fab-impostazioni svg { width: 21px; height: 21px; }
}

/* IL SECONDO PULSANTE NON E' UN PARI DELL'INGRANAGGIO: due cerchi uguali
   affiancati dicono «due comandi ugualmente importanti», e non lo sono. Le
   impostazioni si aprono ogni giorno; il materiale di addestramento si guarda
   quando ci si chiede se ne e' stato raccolto abbastanza, cioe' quasi mai.

   Quindi e' un satellite: 34 px contro 52, allineato al centro del maggiore
   (34/2 = 17 sotto il centro dell'altro, che sta a meta' dei suoi 52) e tenuto
   in ombra. A riposo sta al 45% di opacita' e leggermente rientrato, cosi'
   l'occhio ci passa sopra senza fermarsi; al passaggio del mouse - o del
   fuoco da tastiera, che qui conta perche' si naviga con il Tab - torna pieno
   e viene avanti. Mezzo nascosto, non nascosto: chi lo cerca lo trova. */
.fab-training {
  width: 34px; height: 34px;
  right: calc(22px + 52px + 10px);
  bottom: calc(var(--alt-stato) + 22px + 26px - 17px);
  background: var(--blu-6);
  opacity: .45;
  transform: scale(.94);
  box-shadow: 0 1px 3px rgba(35, 29, 107, .16), 0 4px 10px rgba(35, 29, 107, .16);
}
.fab-training svg { width: 17px; height: 17px; }
.fab-training:hover,
.fab-training:focus-visible,
.fab-training.attivo { opacity: 1; transform: none; }
.fab-training:hover { background: var(--blu-7); }
.fab-training:hover svg,                         /* la rotazione e' dell'ingranaggio */
.fab-training.attivo svg { transform: none; }
.fab-training:active { transform: translateY(1px) scale(.94); }

@media (max-height: 780px) {
  .fab-training {
    width: 30px; height: 30px;
    right: calc(16px + 44px + 9px);
    bottom: calc(var(--alt-stato) + 14px + 22px - 15px);
  }
  .fab-training svg { width: 15px; height: 15px; }
}

/* LE ETICHETTE, A SCHEDINE. Il ritaglio e' la cosa che si guarda - il valore
   scritto accanto e' gia' noto - quindi occupa la riga intera e il resto gli
   sta sotto in piccolo. A griglia perche' la domanda e' «com'e' fatto questo
   materiale nell'insieme», e per rispondere bisogna vederne venti insieme. */
.griglia-etichette {
  display: grid; gap: 10px; margin-top: 10px;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
}
.etichetta-voce {
  border: 1px solid var(--bordo); border-radius: 6px; overflow: hidden;
  background: var(--carta); display: flex; flex-direction: column;
}
/* Il filo a sinistra dice la provenienza senza una parola in piu': pieno per
   le forti - qualcuno ha scritto o guardato quella cella - tenue per le
   deboli, che erano solo fra le non toccate a fine foglio. */
.etichetta-voce.forte { border-left: 3px solid var(--buono); }
.etichetta-voce.debole { border-left: 3px solid var(--bordo-forte); }
.etichetta-voce .ritaglio {
  background: #fff; border-bottom: 1px solid var(--bordo);
  min-height: 46px; display: flex; align-items: center; justify-content: center;
}
.etichetta-voce .ritaglio img {
  max-width: 100%; max-height: 76px; display: block; image-rendering: crisp-edges;
}
.etichetta-voce .dentro { padding: 7px 9px; display: grid; gap: 3px; }
.etichetta-voce .valore { font-weight: 600; word-break: break-word; }
/* Una cella SVUOTATA e' un'etichetta come le altre - il modello aveva letto
   qualcosa e la verita' e' che non c'era niente - e va detta, non lasciata
   vuota come se il dato mancasse. */
.etichetta-voce .valore.niente { color: var(--male); font-weight: 500; font-style: italic; }
.etichetta-voce .riga-meta {
  display: flex; gap: 6px; align-items: baseline; flex-wrap: wrap;
  font-size: var(--f-micro); color: var(--testo-tenue);
}
.etichetta-voce .letto { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.etichetta-voce .letto.diverso { color: var(--male); }


/* ===================== account e vocabolari ===================== */
/* La quota finita si tinge: e' il numero che spiega perche' il prossimo foglio
   non parte, e deve farsi vedere prima del 402. */
nav button .conta.finita { background: #fdecea; color: var(--male); }
.esito-riga { margin: 0 0 12px; }
.esito-riga .messaggio { margin: 0; }
.nota-campo { margin: 10px 0 0; font-size: var(--f-piccolo); }
.tessera .valore.piccolo { font-size: 1rem; word-break: break-all; }
.tessera .nota .pulsante { margin-right: 8px; }

#formVocabolario textarea {
  width: 100%; padding: 8px 10px; border: 1px solid var(--bordo-forte);
  border-radius: 3px; font: inherit; font-size: .86rem; resize: vertical;
  outline: none;
}
#formVocabolario textarea:focus { border-color: var(--blu); box-shadow: var(--anello); }
#vocFiltri { flex-wrap: wrap; }
.voci-utente { display: flex; flex-wrap: wrap; gap: 6px; max-height: 52vh;
               overflow: auto; }
.voce-utente {
  display: inline-flex; align-items: center; gap: 4px; padding: 3px 4px 3px 9px;
  border: 1px solid var(--blu-bordo); border-radius: 3px;
  background: var(--blu-1); font-size: .82rem;
}
.voce-utente button {
  border: 0; background: none; cursor: pointer; padding: 0 4px;
  color: var(--testo-tenue); font-size: 1rem; line-height: 1;
}
.voce-utente button:hover { color: var(--male); }

.motori { display: grid; gap: 8px;
          grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.motore {
  display: flex; gap: 10px; align-items: flex-start; padding: 11px 12px;
  border: 1px solid var(--bordo-forte); border-radius: 3px; cursor: pointer;
}
.motore.scelto { border-color: var(--blu); background: var(--blu-tenue); }
.motore.spento { cursor: default; background: var(--blu-1); }
.motore.spento .motore-nome { color: var(--testo-tenue); }
.motore input { margin-top: 3px; }
.motore-testo { display: flex; flex-direction: column; gap: 4px;
                font-size: var(--f-piccolo); }
.motore-nome { font-size: var(--f-base); font-weight: 600;
               display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

.chiave-nuova {
  margin: 12px 0; padding: 10px 12px; border-radius: 3px;
  background: #f1f7f3; border: 1px solid #d8e8de; color: var(--buono);
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font-size: var(--f-piccolo);
}
.chiave-nuova code { color: var(--testo); background: #fff; padding: 4px 8px;
                     border: 1px solid #d8e8de; border-radius: 3px;
                     word-break: break-all; user-select: all; }
tr.revocata td { color: var(--testo-tenue); }
#elencoChiavi, #elencoAddebiti { margin-top: 12px; overflow-x: auto; }
.esempio-api {
  margin: 10px 0 0; padding: 12px; border-radius: 3px; overflow-x: auto;
  background: var(--blu-8); color: #e6ecf5; font-size: .78rem; line-height: 1.5;
}


/* ===================== la pagina a scorrimento ===================== */
/* Le sezioni si fermano sotto la barra, non dietro: senza questo margine il
   titolo della sezione finirebbe coperto dalla barra fissa a ogni clic. */
.contenuto > section { scroll-margin-top: calc(var(--alt-barra) + 12px); }
.contenuto > section:not(.nascosto) ~ section:not(.nascosto) {
  margin-top: 34px; padding-top: 26px; border-top: 1px solid var(--bordo);
}
.capo-sezione { margin: 0 0 14px; }
.capo-sezione h2 { margin: 0; font-size: 1.12rem; color: var(--blu-8);
                   letter-spacing: -.1px; }
.capo-sezione p { margin: 3px 0 0; font-size: var(--f-piccolo);
                  color: var(--testo-tenue); }

/* l'elenco dei documenti lasciati cadere, con dove sono arrivati */
.elenco-file > div { display: flex; align-items: center; gap: 8px; }
.elenco-file .errore-doc { max-width: 44%; overflow: hidden; white-space: nowrap;
                           text-overflow: ellipsis; font-size: var(--f-piccolo); }

/* ===================== l'avviso di uscita ===================== */
.avviso-uscita {
  position: fixed; right: 18px; bottom: calc(var(--alt-stato) + 78px);
  z-index: 60; width: min(360px, calc(100vw - 36px));
  display: flex; gap: 11px; align-items: flex-start; padding: 13px 12px 13px 14px;
  background: #fff8e6; border: 1px solid #e8c56a; border-left: 4px solid var(--attesa);
  border-radius: 4px; color: #5c3d00;
  box-shadow: 0 2px 4px rgba(35, 29, 107, .12), 0 10px 26px rgba(35, 29, 107, .2);
  animation: avviso-entra .18s ease-out;
}
.avviso-uscita svg { width: 22px; height: 22px; flex: none; color: var(--attesa);
                     margin-top: 1px; }
.avviso-uscita b { display: block; font-size: var(--f-base); }
.avviso-uscita p { margin: 3px 0 0; font-size: var(--f-piccolo); line-height: 1.45; }
.avviso-uscita button { border: 0; background: none; cursor: pointer; flex: none;
                        font-size: 1.15rem; line-height: 1; color: #8a6400;
                        padding: 0 3px; margin-left: auto; }
@keyframes avviso-entra { from { transform: translateY(8px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .avviso-uscita { animation: none; } }


/* ===================== landing =====================
   Usa i gradini della scala dell'applicazione e nient'altro: chi entra non
   deve avere l'impressione di aver cambiato prodotto passando dalla vetrina
   al banco di lavoro. */
#landing { background: var(--sfondo); min-height: 100vh; color: var(--testo); }
#landing h1, #landing h2 { text-wrap: balance; }
.ld-barra {
  position: sticky; top: 0; z-index: 10; display: flex; align-items: center;
  gap: 22px; padding: 11px clamp(16px, 5vw, 64px);
  background: rgba(255, 255, 255, .9); backdrop-filter: blur(8px);
  border-top: 2px solid var(--accento); border-bottom: 1px solid var(--bordo);
}
.ld-marchio { display: flex; align-items: center; gap: 9px; font-weight: 700;
              font-size: 1.05rem; color: var(--blu-8); }
.ld-marchio img { height: 28px; }
.ld-voci { display: flex; gap: 20px; margin-left: auto; }
.ld-voci a, .ld-secondario { color: var(--blu-6); text-decoration: none;
                             font-size: var(--f-base); font-weight: 500; }
.ld-voci a:hover, .ld-secondario:hover { color: var(--blu-8); text-decoration: underline; }
@media (max-width: 700px) { .ld-voci { display: none; } .ld-barra { justify-content: space-between; } }

.ld-eroe {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(24px, 4vw, 56px); align-items: center;
  max-width: 1180px; margin: 0 auto;
  padding: clamp(36px, 7vw, 84px) clamp(16px, 5vw, 64px);
}
.ld-occhiello { font-size: var(--f-micro); letter-spacing: 1.4px; font-weight: 700;
                text-transform: uppercase; color: var(--accento); }
.ld-eroe h1 { font-size: clamp(1.9rem, 4.2vw, 3rem); line-height: 1.08;
              letter-spacing: -.8px; margin: 12px 0 16px; color: var(--blu-8); }
.ld-eroe p { font-size: 1.04rem; line-height: 1.6; color: var(--testo-tenue);
             margin: 0; max-width: 34em; }
.ld-azioni { display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
             margin-top: 26px; }
button.pulsante.grande { padding: 12px 20px; font-size: 1rem; }
.ld-figura { width: 100%; height: auto;
             filter: drop-shadow(0 12px 28px rgba(35, 29, 107, .14)); }
@media (max-width: 860px) { .ld-eroe { grid-template-columns: 1fr; } }

.ld-fascia { padding: clamp(36px, 6vw, 68px) clamp(16px, 5vw, 64px); }
.ld-fascia > * { max-width: 1052px; margin-left: auto; margin-right: auto; }
.ld-fascia.chiara { background: var(--carta); border-top: 1px solid var(--bordo);
                    border-bottom: 1px solid var(--bordo); }
.ld-fascia h2 { font-size: clamp(1.3rem, 2.4vw, 1.75rem); letter-spacing: -.3px;
                color: var(--blu-8); margin-top: 0; margin-bottom: 26px; }
.ld-passi { list-style: none; padding: 0; display: grid; gap: 18px;
            grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.ld-passi li { background: var(--carta); border: 1px solid var(--bordo);
               border-radius: 6px; padding: 20px; }
.ld-passi li span { display: grid; place-items: center; width: 30px; height: 30px;
                    border-radius: 50%; background: var(--blu-7); color: #fff;
                    font-weight: 700; margin-bottom: 12px; }
.ld-passi b, .ld-griglia b { display: block; font-size: 1rem; color: var(--blu-8); }
.ld-passi p, .ld-griglia p { margin: 6px 0 0; font-size: var(--f-base);
                             line-height: 1.55; color: var(--testo-tenue); }
.ld-griglia { display: grid; gap: 26px 32px;
              grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.ld-griglia svg { width: 22px; height: 22px; color: var(--accento); margin-bottom: 9px; }
.ld-piani { display: grid; gap: 18px; max-width: 640px;
            grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.ld-piano { background: var(--carta); border: 1px solid var(--bordo);
            border-radius: 6px; padding: 22px; display: flex; flex-direction: column; }
.ld-piano.evidenza { border-color: var(--blu-7); box-shadow: 0 0 0 1px var(--blu-7); }
.ld-piano > b { color: var(--blu-6); font-size: var(--f-piccolo);
                text-transform: uppercase; letter-spacing: 1px; }
.ld-prezzo { font-size: 1.5rem; font-weight: 700; color: var(--blu-8); margin: 6px 0 12px; }
.ld-piano ul { margin: 0 0 18px; padding-left: 18px; color: var(--testo-tenue);
               font-size: var(--f-base); line-height: 1.7; flex: 1; }
.ld-nota { margin-top: 22px; font-size: var(--f-base); color: var(--testo-tenue); }
.ld-piede { display: flex; align-items: center; gap: 10px; justify-content: center;
            padding: 26px 16px 40px; color: var(--testo-tenue);
            font-size: var(--f-piccolo); border-top: 1px solid var(--bordo); }
.ld-piede img { height: 20px; }

/* ===================== modelli: l'editor delle zone ===================== */
.griglia-modelli { display: grid; gap: 14px;
                   grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.scheda-modello {
  display: flex; flex-direction: column; text-align: left; padding: 0;
  border: 1px solid var(--bordo-forte); border-radius: 4px; background: #fff;
  cursor: pointer; overflow: hidden; font: inherit; color: inherit;
}
.scheda-modello:hover { border-color: var(--blu-7); }
.scheda-modello img { width: 100%; height: 150px; object-fit: cover;
                      object-position: top; background: var(--blu-1);
                      border-bottom: 1px solid var(--bordo); }
.scheda-modello span { padding: 9px 11px; display: flex; flex-direction: column; gap: 2px; }
.scheda-modello small { color: var(--testo-tenue); font-size: var(--f-piccolo); }

.barra-editor { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
                padding: 10px var(--dentro); border-bottom: 1px solid var(--bordo); }
.barra-editor input[type=text] { min-width: 220px; font-weight: 600; }
.pagine-editor { display: inline-flex; align-items: center; gap: 6px; }
.errore-testo { color: var(--male) !important; }
.editor-layout { display: grid; grid-template-columns: minmax(0, 1fr) 280px; }
.editor-pagina { padding: var(--dentro); background: var(--blu-1); overflow: auto;
                 max-height: 82vh; }
.editor-lato { padding: var(--dentro); border-left: 1px solid var(--bordo);
               max-height: 82vh; overflow: auto; }
@media (max-width: 900px) {
  .editor-layout { grid-template-columns: 1fr; }
  .editor-lato { border-left: 0; border-top: 1px solid var(--bordo); max-height: none; }
}
/* Il foglio prende la larghezza che c'e' e l'altezza che ne consegue: lo strato
   delle zone lo copre esattamente, ed e' per questo che le zone in percentuale
   cadono sempre nello stesso punto del documento. */
.foglio-editor { position: relative; margin: 0 auto; max-width: 980px;
                 box-shadow: var(--ombra-alta); background: #fff; line-height: 0; }
.foglio-editor img { width: 100%; height: auto; display: block; user-select: none; }
.strato-zone { position: absolute; inset: 0; cursor: crosshair; touch-action: none;
               line-height: 1.3; }
.strato-zone.sola-lettura { cursor: default; }
.zona { position: absolute; border: 2px solid var(--blu-7);
        background: rgba(55, 48, 163, .10); cursor: move; border-radius: 2px; }
/* Due colori per i due lettori: si vede a colpo d'occhio quali caselle vanno
   al lettore di cifre. Il colore non e' l'unico segno: l'etichetta dice
   «Abc» o «123». */
.zona.mano { border-style: dashed; }
.zona.numeri { border-color: var(--accento); background: rgba(13, 148, 136, .12); }
.zona.scelta { box-shadow: 0 0 0 3px rgba(55, 48, 163, .28); z-index: 2; }
.zona.numeri.scelta { box-shadow: 0 0 0 3px rgba(13, 148, 136, .3); }
.zona.vuota { border-style: dashed; }
.sola-lettura .zona { cursor: pointer; }
.zona-nome { position: absolute; left: -2px; bottom: 100%; padding: 1px 6px;
             background: var(--blu-7); color: #fff; font-size: .68rem;
             font-weight: 600; white-space: nowrap; border-radius: 2px 2px 0 0;
             pointer-events: none; }
.zona.numeri .zona-nome { background: var(--accento); }
.maniglia { position: absolute; right: -7px; bottom: -7px; width: 13px; height: 13px;
            background: #fff; border: 2px solid var(--blu-7); border-radius: 2px;
            cursor: nwse-resize; }
.zona.numeri .maniglia { border-color: var(--accento); }
.popup-azioni { display: flex; justify-content: space-between; gap: 8px; }
.voce-zona { display: flex; align-items: center; gap: 8px; width: 100%;
             padding: 7px 8px; margin-top: 6px; border: 1px solid var(--bordo);
             border-radius: 3px; background: #fff; cursor: pointer; font: inherit;
             text-align: left; color: inherit; }
.voce-zona.scelta { border-color: var(--blu-7); background: var(--blu-tenue); }
.voce-zona small { margin-left: auto; }
.sigla { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .66rem;
         padding: 1px 5px; border-radius: 2px; color: #fff; background: var(--blu-7); }
.sigla.numeri { background: var(--accento); }

/* il tipo di documento, sopra la zona di caricamento */
.tipo-documento { margin-bottom: 14px; align-items: center; }
.tipo-documento .nota-campo { margin: 16px 0 0; flex: 1 1 260px; }
button.collegamento { border: 0; background: none; padding: 0; font: inherit;
                      color: var(--blu-7); text-decoration: underline; cursor: pointer; }

/* i campi di un documento letto */
.campo-letto { padding: 9px 10px; margin-bottom: 8px; border: 1px solid var(--bordo);
               border-left: 3px solid var(--blu-5); border-radius: 3px; }
.campo-letto.vuoto { border-left-color: var(--attesa); }
.campo-letto.scelto { border-color: var(--blu-7); border-left-color: var(--blu-7); }
.campo-letto.salvato { border-left-color: var(--buono); }
.campo-letto label { display: flex; justify-content: space-between; gap: 8px;
                     font-size: var(--f-piccolo); font-weight: 600; margin-bottom: 5px; }
.campo-letto label small { font-weight: 400; text-align: right; }
.campo-letto input, .campo-letto textarea { width: 100%; font: inherit;
  font-size: .86rem; padding: 6px 8px; border: 1px solid var(--bordo-forte);
  border-radius: 3px; resize: vertical; }
.campo-letto > small { display: block; margin-top: 4px; font-size: var(--f-micro); }
#documentiBlocco { margin-bottom: var(--stacco); }

/* la pagina e' piu' vecchia del server: vedi `controllaPagina` in app.js */
.avviso-versione {
  position: fixed; left: 50%; transform: translateX(-50%); z-index: 70;
  bottom: calc(var(--alt-stato) + 14px); display: flex; align-items: center;
  gap: 12px; padding: 9px 12px 9px 15px; border-radius: 4px;
  background: var(--blu-8); color: #fff; font-size: var(--f-base);
  box-shadow: 0 6px 20px rgba(35, 29, 107, .3);
}

/* ===================== Importa: i due passi ===================== */
.passo-importa { display: flex; gap: 14px; align-items: flex-start; }
.passo-importa + .passo-importa { margin-top: 22px; }
.numero-passo {
  flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid;
  place-items: center; background: var(--blu-7); color: #fff; font-weight: 700;
  font-size: var(--f-base);
}
.corpo-passo { flex: 1; min-width: 0; }
.corpo-passo > b { display: block; margin: 4px 0 10px; font-size: 1rem; color: var(--blu-8); }
.scelte-lettura { display: grid; gap: 9px;
                  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.scelta-lettura {
  display: flex; gap: 11px; align-items: flex-start; text-align: left;
  padding: 12px 13px; border: 1px solid var(--bordo-forte); border-radius: 4px;
  background: #fff; cursor: pointer; font: inherit; color: inherit;
}
.scelta-lettura:hover { border-color: var(--blu-5); }
/* La scelta attiva si riconosce da tre cose, non dal solo colore: il bordo
   pieno, il fondo, e il segno di spunta. */
.scelta-lettura.scelta { border-color: var(--blu-7); background: var(--blu-tenue);
                         box-shadow: 0 0 0 1px var(--blu-7); }
.scelta-lettura svg { width: 20px; height: 20px; flex: none; color: var(--blu-6);
                      margin-top: 1px; }
.scelta-lettura.scelta svg { color: var(--blu-7); }
.scelta-lettura b { display: block; font-size: var(--f-base); }
.scelta-lettura.scelta b::after { content: " ✓"; color: var(--blu-7); }
.scelta-lettura small { display: block; margin-top: 3px; color: var(--testo-tenue);
                        font-size: var(--f-piccolo); line-height: 1.45; }

/* la riga che dice cosa fare, sopra la pagina dell'editor */
.guida-editor { padding: 10px var(--dentro); background: var(--blu-tenue);
                border-bottom: 1px solid var(--blu-4); color: var(--blu-8);
                font-size: var(--f-base); line-height: 1.5; }
.salva-modello { padding: 12px; margin-bottom: 12px; border-radius: 4px;
                 background: var(--blu-tenue); border: 1px solid var(--blu-4); }
.salva-modello p { margin: 4px 0 9px; font-size: var(--f-piccolo); line-height: 1.45; }
.salva-modello input { flex: 1 1 120px; min-width: 0; }

/* ===================== guida ===================== */
.guida { max-width: 780px; }
.guida-attacco { font-size: 1.02rem; line-height: 1.6; margin: 0 0 20px; }
.guida-passi { list-style: none; padding: 0; margin: 0 0 8px; display: grid; gap: 16px; }
.guida-passi li { display: flex; gap: 14px; }
.guida-passi li > span { flex: none; width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center; background: var(--blu-7); color: #fff;
  font-weight: 700; }
.guida-passi b { color: var(--blu-8); }
.guida-passi p, .guida-domande dd { margin: 4px 0 0; line-height: 1.6;
                                    color: var(--testo-tenue); font-size: var(--f-base); }
.guida h4 { margin: 28px 0 10px; font-size: 1rem; color: var(--blu-8);
            padding-top: 20px; border-top: 1px solid var(--bordo); }
.guida-domande dt { font-weight: 600; margin-top: 14px; }
.guida-domande dd { margin-left: 0; }

/* ===================== tutorial ===================== */
.velo-tutorial {
  position: fixed; inset: 0; z-index: 80; display: grid; place-items: center;
  padding: 16px; background: rgba(26, 27, 46, .42);
  -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px);
}
.scheda-tutorial {
  position: relative; width: min(460px, 100%); padding: 26px 28px 22px;
  background: var(--carta); border-radius: 8px; border-top: 3px solid var(--accento);
  box-shadow: 0 18px 50px rgba(35, 29, 107, .35);
}
.figura-tutorial { background: var(--blu-1); border: 1px solid var(--bordo);
                   border-radius: 6px; margin-bottom: 18px; }
.figura-tutorial svg { display: block; width: 100%; height: 170px; }
.scheda-tutorial h2 { margin: 6px 0 8px; font-size: 1.3rem; color: var(--blu-8);
                      letter-spacing: -.2px; }
.scheda-tutorial p { margin: 0; line-height: 1.6; color: var(--testo-tenue);
                     min-height: 5.2em; }
.piede-tutorial { display: flex; align-items: center; gap: 8px; margin-top: 18px; }
.punti-tutorial { display: flex; gap: 6px; margin-right: auto; }
.punti-tutorial i { width: 8px; height: 8px; border-radius: 50%; background: var(--blu-4); }
.punti-tutorial i.qui { background: var(--blu-7); width: 20px; border-radius: 4px; }

/* ===================== le impostazioni della zona, nella barra a lato ===================== */
.editor-lato > b { display: block; font-size: var(--f-piccolo); text-transform: uppercase;
                   letter-spacing: .6px; color: var(--testo-tenue); }
.editor-lato .titolo-lato { margin-top: 18px; padding-top: 14px;
                            border-top: 1px solid var(--bordo); }
.vuoto-lato { margin: 8px 0 0; font-size: var(--f-piccolo); line-height: 1.5; }
/* Il filo a sinistra ha il colore del lettore, lo stesso del riquadro sulla
   pagina: lega il pannello alla zona di cui parla. */
.impostazioni-zona { margin-top: 8px; padding: 12px; display: grid; gap: 11px;
                     border: 1px solid var(--blu-4); border-left: 3px solid var(--blu-7);
                     border-radius: 4px; background: #fff; }
.impostazioni-zona.numeri { border-left-color: var(--accento); }
.impostazioni-zona select, .impostazioni-zona input[type=text] { width: 100%; }
.nota-lato { margin: 6px 0 0; font-size: var(--f-piccolo); line-height: 1.45; }
.nuovo-voc { display: grid; gap: 6px; padding: 10px; border-radius: 3px;
             background: var(--blu-tenue); border: 1px solid var(--blu-4); }
.nuovo-voc label { font-size: var(--f-micro); font-weight: 600; }
.nuovo-voc textarea { width: 100%; font: inherit; font-size: .84rem; padding: 6px 8px;
                      border: 1px solid var(--bordo-forte); border-radius: 3px;
                      resize: vertical; }
.editor-layout { grid-template-columns: minmax(0, 1fr) 320px; }
@media (max-width: 900px) { .editor-layout { grid-template-columns: 1fr; } }

/* LA BARRA A LATO SI LEGGE SENZA OCCHIALI. Le scritte erano a 12 px e i
   pulsanti alti 24: chi non ha la vista e la mano di un ventenne li mancava.
   Qui il testo e' quello della pagina, i pulsanti sono alti almeno 40 px, e
   ogni scelta porta sotto un esempio. */
.editor-layout { grid-template-columns: minmax(0, 1fr) 360px; }
@media (max-width: 900px) { .editor-layout { grid-template-columns: 1fr; } }
.editor-lato { font-size: .95rem; }
.editor-lato > b { font-size: .8rem; color: var(--testo); }
.vuoto-lato { font-size: .95rem; line-height: 1.55; color: var(--testo); }
.impostazioni-zona { gap: 16px; padding: 14px; }
.impostazioni-zona label { font-size: .95rem; font-weight: 600; color: var(--testo);
                           text-transform: none; letter-spacing: 0; }
.impostazioni-zona input[type=text], .impostazioni-zona select {
  font-size: 1rem; padding: 10px 11px; min-height: 44px; }
.impostazioni-zona .nota-lato, .nuovo-voc label { font-size: .88rem; line-height: 1.5;
                                                   color: var(--testo-tenue); }
.impostazioni-zona .campo-riga { gap: 6px; }
.scelte-contenuto { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.scelta-contenuto { padding: 11px 10px; min-height: 60px; border: 2px solid var(--bordo-forte);
                    border-radius: 5px; background: #fff; cursor: pointer; font: inherit;
                    color: inherit; text-align: left; }
.scelta-contenuto b { display: block; font-size: 1.02rem; }
.scelta-contenuto small { display: block; margin-top: 2px; font-size: .84rem;
                          color: var(--testo-tenue); line-height: 1.35; }
/* la terza scelta («scritto a mano») c'e' solo se il lettore e' acceso:
   quando c'e' prende la riga intera, invece di lasciare mezza griglia vuota */
.scelta-contenuto:nth-child(3) { grid-column: 1 / -1; }
.scelta-contenuto:hover { border-color: var(--blu-5); }
.scelta-contenuto.scelta { border-color: var(--blu-7); background: var(--blu-tenue); }
.scelta-contenuto.scelta b::after { content: " ✓"; color: var(--blu-7); }
.come-altro { margin: 0; padding: 11px 12px; border-radius: 4px; line-height: 1.55;
              background: var(--blu-tenue); border: 1px solid var(--blu-4); }
.azioni-lato { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.azioni-lato .pulsante, .impostazioni-zona .campo-riga > .pulsante {
  font-size: .95rem; padding: 10px 14px; min-height: 42px; }
.nuovo-voc { gap: 8px; padding: 12px; }
.nuovo-voc textarea, .nuovo-voc input[type=text] { font-size: 1rem; padding: 9px 10px; }
.editor-lato .collegamento { font-size: .92rem; }
.voce-zona { padding: 10px 10px; font-size: .95rem; min-height: 42px; }
.editor-lato .nota-campo { font-size: .88rem; line-height: 1.5; color: var(--testo-tenue); }
.gira-editor { display: inline-flex; gap: 6px; }
.gira-editor .pulsante { font-size: .95rem; min-height: 40px; }

/* ===================== le regole del campo, e il margine ===================== */
.checklist-regole { display: grid; gap: 8px; }
.voce-regola {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px;
  border: 1px solid var(--bordo-forte); border-radius: 4px; background: #fff;
  cursor: pointer; font-size: .95rem;
}
.voce-regola:has(input:checked) { border-color: var(--blu-7); background: var(--blu-tenue); }
.voce-regola input[type=checkbox] { width: 19px; height: 19px; flex: none; accent-color: var(--blu-7); }
.pattern-regola {
  margin: -2px 0 0 29px; width: calc(100% - 29px); font-size: 1rem;
  padding: 9px 10px; border: 1px solid var(--bordo-forte); border-radius: 3px;
  font-family: ui-monospace, Menlo, Consolas, monospace;
}
.impostazioni-zona input[type=number] {
  width: 110px; font-size: 1rem; padding: 9px 10px; min-height: 44px;
  border: 1px solid var(--bordo-forte); border-radius: 3px;
}
.campo-percento { display: flex; align-items: center; gap: 8px; }
.campo-percento span { font-size: 1.05rem; font-weight: 600; color: var(--testo-tenue); }

/* A che punto e' la lettura di un documento, nell'elenco dei caricati: campi
   finiti su campi in tutto (`documenti._AVANTI`). */
.barra-lettura { flex: none; width: 110px; height: 8px; border-radius: 4px;
                 background: var(--blu-2); border: 1px solid var(--blu-4); overflow: hidden; }
.barra-lettura i { display: block; height: 100%; background: var(--blu-7);
                   transition: width .4s ease; }
@media (prefers-reduced-motion: reduce) { .barra-lettura i { transition: none; } }