/* ═══════════════════════════════════════════════════════════════
   ML2Chain · Console del gestore
   Sistema di design ML TWO: navy + oro su carta calda,
   Fraunces / Inter / JetBrains Mono — come ML2Project.
   ═══════════════════════════════════════════════════════════════

   Stessa lingua visiva, **densità diversa**. ML2Project è editoriale: titoli
   grandi, molta aria, si legge. Questa è una plancia: ci si sta mezz'ora a
   rispondere a «chi copre sabato?», e ogni pixel speso in respiro è una riga
   di griglia in meno. Palette, caratteri e componenti sono gli stessi; le
   spaziature no, e non è una svista.

   **La carta è verde, non beige.** Navy e oro restano i colori di casa in tutte
   le applicazioni ML2; cambia il fondo, di poco. Serve a una cosa sola e
   pratica: chi tiene aperte tre schede — ML2Project, ML2Chain, ML2Coach — le
   riconosce con la coda dell'occhio senza leggere il titolo. La tinta è
   volutamente appena percepibile: un fondo che si nota è un fondo che disturba
   una griglia da settanta caselle.

   I quattro colori di stato non sono mai l'unica informazione: accanto c'è
   sempre la parola o il codice del vincolo. Un daltonico deve poter
   pianificare (doc 07 §2.4). */

:root {
  /* Palette ML TWO — navy e oro, uguali in tutta la casa */

  /* La carta di ML2Chain: verde tenue. ML2Project la ha beige, ML2Coach la avrà
     sua. È l'unica famiglia di colori che cambia da un'applicazione all'altra. */
  --paper: #F7F9F5;
  --paper-warm: #EDF2E9;
  --paper-tint: #E2EBDD;
  --ink: #181B17;
  --ink-soft: #363C34;
  --ink-mute: #67705F;
  --rule: #CFDAC8;
  --rule-soft: #E3EBDE;

  --navy: #1B3A5C;
  --navy-deep: #0F2540;
  --navy-soft: #2B4E75;
  --gold: #C4944A;
  --gold-light: #D4AD6B;
  --gold-deep: #8E682D;

  /* Stati, nella stessa gamma smorzata dell'insegna.

     Il verde del «confermato» è più saturo di quanto sarebbe su carta beige: su
     un fondo già verde una tinta chiara sparirebbe, e il colore che dice «questa
     casella è a posto» deve restare leggibile. */
  --sage: #4A6B3E;          /* confermato, ammissibile */
  --sage-tint: #D8E8CC;
  --amber: #B8852E;         /* proposta, penalità */
  --amber-tint: #FBF2DF;
  --clay: #A8443A;          /* scoperto, vietato */
  --clay-tint: #F8E9E6;

  --ff-display: 'Fraunces', Georgia, serif;
  --ff-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --ff-mono: 'JetBrains Mono', 'SF Mono', Consolas, monospace;

  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  /* Questi due mancavano, e cinque regole li usavano già.
   *
   * `var(--s-6)` senza definizione non vale zero: rende **invalida l'intera
   * dichiarazione**, che il browser butta via. Così sono spariti in silenzio il rientro in
   * fondo alla scheda cliente (e la barra di salvataggio ha coperto l'ultima sezione), i
   * margini laterali (e la pagina si è incollata alla colonna di sinistra), lo spazio fra
   * le sezioni e il menù di salto. Tre difetti che sembravano di impaginazione, e invece
   * era una riga che non c'era.
   *
   * È il difetto peggiore delle variabili CSS: nessun errore, nessun avviso, e il codice
   * che legge la variabile è scritto giusto. */
  --s-6: 32px;
  --s-7: 48px;
  --radius: 3px;
  /* La colonna di sinistra ha **due larghezze**, come in ML2Project: aperta con le
     etichette, chiusa con le sole icone. Chi impara le icone chiude e guadagna schermo; chi
     arriva la prima volta legge i nomi — e i nomi delle voci valgono più dei pixel che
     occupano, finché non si sono imparati. */
  --barra: 64px;         /* chiusa: solo icone */
  --barra-aperta: 208px; /* aperta: icone e nomi */
  --barra-admin: 208px;
}

* { box-sizing: border-box; }

/* `hidden` deve vincere. Sempre.
 *
 * La regola del browser è `[hidden] { display: none }`, che ha la specificità di un
 * attributo: **qualunque** nostra classe con un `display:` la scavalca. Il menù
 * dell'account era `display: flex` e restava fisso a video, aperto, sopra la pagina — e
 * il JavaScript che lo chiudeva funzionava benissimo, per niente. Lo stesso valeva per il
 * percorso sul rosone e per ogni componente che si nasconde con `hidden`.
 *
 * È il difetto peggiore da cercare, perché il codice che dovrebbe governarlo è giusto. */
[hidden] { display: none !important; }

body {
  margin: 0;
  /* `--rientro` è **la larghezza della colonna adesso**: la scrive il corpo della pagina e
     la leggono tutti quelli che devono starle accanto — la barra di salvataggio, l'avviso,
     il rientro del contenuto. Prima ognuno nominava la propria variabile, e aggiungere una
     seconda larghezza voleva dire trovarli tutti. */
  --rientro: var(--barra-aperta);
  padding-left: var(--rientro);
  /* Senza la colonna delle icone — accesso e pannello ML TWO — il rientro va tolto,
     altrimenti resta una fascia vuota di 56 pixel che sembra un difetto di stampa. */
  font-family: var(--ff-body);
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink);
  /* Il fondo è sfumato dall'alto, come il rosone: dà profondità senza chiedere
     attenzione. `background-attachment: fixed` lo tiene fermo mentre la griglia
     scorre — altrimenti la sfumatura si ripete e si nota. */
  background:
    radial-gradient(1100px 620px at 50% -12%, rgba(74, 107, 62, .13), transparent 62%),
    var(--paper);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
}

/* ═══════════ Scheda a pagina piena ═══════════
   L'impianto della scheda Cliente di ML2Project: briciole, testata con marchio e numeri,
   sezioni numerate, menù di salto a destra. È l'alternativa a una dialog che scorre in
   verticale — che è una pagina travestita, e si comporta peggio di una pagina. */

/* Il rientro in fondo tiene conto della barra di salvataggio, che è fissa: senza, l'ultima
   sezione le finisce sotto — e l'ultima sezione è quella che cancella il cliente. Il valore
   è generoso di proposito: sbagliarlo per difetto nasconde un pulsante, per eccesso lascia
   un po' di carta bianca.

   `margin: 0 auto` centra la scheda nello spazio che resta a destra della colonna: senza,
   la pagina si appoggia al bordo sinistro e il bianco si accumula tutto a destra — che
   sembra una pagina finita male, non una pagina larga. */
.scheda-piena {
  max-width: 1180px;
  margin: 0 auto;
  padding: var(--s-5) var(--s-6) 150px;
}
/* Lo spazio per l'account agganciato in alto a destra, che altrimenti coprirebbe le
   briciole o il pulsante «Tutti i clienti». */
body.con-admin .scheda-piena { padding-top: 62px; }

.briciole {
  display: flex;
  gap: var(--s-2);
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: .06em;
  color: var(--ink-mute);
  margin-bottom: var(--s-4);
}
.briciole a { color: var(--navy); text-decoration: none; }
.briciole a:hover { color: var(--gold-deep); }

.testata-scheda {
  display: flex;
  align-items: flex-start;
  gap: var(--s-5);
  padding-bottom: var(--s-5);
}
.marchio-cliente { display: flex; flex-direction: column; gap: var(--s-2); width: 130px; }
.marchio-cliente img,
.marchio-cliente .senza-logo {
  width: 130px;
  height: 96px;
  object-fit: contain;
  padding: var(--s-2);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
}
.marchio-cliente .senza-logo {
  display: grid;
  place-items: center;
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-mute);
  background: var(--paper-warm);
}
.marchio-cliente .azioni-logo { flex-direction: row; gap: var(--s-1); }
.marchio-cliente .scegli-file,
.marchio-cliente button { font-size: 11px; padding: 3px 8px; }

.identita-cliente { flex: 1; }
.occhiello-scheda {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin: 0 0 var(--s-1);
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold-deep);
}
.occhiello-scheda::before {
  content: "";
  width: 26px;
  height: 1px;
  background: var(--gold);
}
.identita-cliente h1 {
  font-family: var(--ff-display);
  font-weight: 300;
  font-size: 38px;
  line-height: 1.05;
  color: var(--navy);
  margin: 0 0 var(--s-3);
}
.targhette { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.targhetta {
  font-family: var(--ff-mono);
  font-size: 10.5px;
  letter-spacing: .06em;
  padding: 3px 9px;
  color: var(--ink-soft);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
}
.targhetta.attenzione { color: var(--clay); border-color: var(--clay); }

.comandi-scheda { display: flex; gap: var(--s-2); }
/* Un collegamento che sembra un pulsante: le due azioni di uscita — «annulla» e «tutti i
   clienti» — sono navigazioni, e forzarle in un `button` vorrebbe dire scriverci sopra
   del JavaScript per fare quello che un `href` fa da sé. */
.pulsante {
  display: inline-block;
  font-family: var(--ff-body);
  font-size: 13px;
  padding: 6px 13px;
  border: 1px solid var(--navy);
  border-radius: var(--radius);
  color: var(--navy);
  text-decoration: none;
}
.pulsante:hover { background: var(--paper-warm); color: var(--navy-deep); }

.numeri-scheda {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-4);
  margin-bottom: var(--s-6);
}
.numeri-scheda .numero {
  padding: var(--s-4);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
}
.numeri-scheda .voce {
  margin: 0 0 var(--s-2);
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.numeri-scheda .valore {
  margin: 0;
  font-family: var(--ff-display);
  font-weight: 300;
  font-size: 40px;
  line-height: 1;
  color: var(--navy);
}
.numeri-scheda .sotto { margin: var(--s-1) 0 0; font-size: 12px; color: var(--ink-mute); }

.corpo-scheda { display: grid; grid-template-columns: 1fr 232px; gap: var(--s-6); }
.sezioni { min-width: 0; }

/* Aria fra le sezioni: erano attaccate, e un modulo lungo senza respiro si legge come un
   muro. Il filetto da solo non basta a separare — separa lo spazio, il filetto lo conferma. */
.sezione {
  padding: var(--s-6) var(--s-5);
  margin-bottom: var(--s-5);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
}
.sezione h2 {
  display: flex;
  align-items: baseline;
  gap: var(--s-3);
  font-family: var(--ff-display);
  font-weight: 300;
  font-size: 26px;
  color: var(--navy);
  margin: 0 0 var(--s-5);
}
.sezione h2 em { font-style: italic; color: var(--gold-deep); }
.sezione h2 .progressivo {
  font-family: var(--ff-mono);
  font-size: 11px;
  padding: 3px 7px;
  color: var(--paper);
  background: var(--navy);
  border-radius: 3px;
}
/* ── I moduli: **mai un campo per riga** ───────────────────────────────────
 *
 * È una regola, non una preferenza. Un modulo a colonna singola su una pagina larga fa
 * scorrere per niente, e lo scorrimento verticale in una scheda è sempre da evitare: quello
 * che sta sotto il bordo, per chi guarda, non esiste — e in un modulo significa campi che
 * non si compilano perché nessuno sa che ci sono.
 *
 * `auto-fit` con un minimo di 210px: due colonne in un pannello stretto, tre o quattro in
 * uno largo, una sola sul telefono. Non si decide il numero di colonne, si decide **quanto
 * dev'essere largo un campo perché ci si scriva dentro**; il numero lo trova la griglia.
 *
 * La regola sta su `.campi` e non su `.sezione .campi`: legata alle sezioni valeva per la
 * scheda cliente e non per la pagina dei punti, che ha gli stessi moduli fuori da una
 * sezione — e lì i campi tornavano uno per riga. Una regola di impaginazione ristretta a un
 * contenitore è una regola che vale a metà. */
.campi {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: var(--s-3) var(--s-4);
  align-items: start;
}
/* I campi che hanno bisogno di più spazio lo chiedono: un indirizzo con il civico non sta
   in 210 pixel, e una riga tagliata a metà si rilegge due volte. */
.campi .campo.largo { grid-column: span 2; }

.campi label,
.campi .campo {
  display: block;
  min-width: 0;
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.campi input,
.campi select,
.campi textarea {
  width: 100%;
  margin-top: var(--s-1);
  padding: 8px 10px;
  font-family: var(--ff-body);
  font-size: 14px;
  letter-spacing: normal;
  text-transform: none;
  color: var(--ink);
}
.campi input:disabled,
.campi select:disabled {
  background: var(--paper-tint);
  color: var(--ink-mute);
  cursor: not-allowed;
}
.campi .aiuto-campo {
  display: block;
  margin-top: 3px;
  text-transform: none;
  letter-spacing: normal;
}
.sezione > .aiuto-campo { margin: var(--s-4) 0 0; }

/* Un campo con l'azione attaccata: il sito si controlla aprendolo, e copiarlo nella barra
   degli indirizzi è un gesto in più che nessuno fa. Come in ML2Project. */
.campo-con-azione { display: flex; align-items: stretch; gap: 0; }
.campo-con-azione input {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.campo-con-azione a {
  display: grid;
  place-items: center;
  width: 34px;
  margin-top: var(--s-1);
  border: 1px solid var(--rule);
  border-left: 0;
  border-radius: 0 var(--radius) var(--radius) 0;
  background: var(--paper-warm);
  color: var(--navy);
  text-decoration: none;
  font-size: 13px;
}
.campo-con-azione a:hover { background: var(--paper-tint); color: var(--gold-deep); }

/* ── Posizione della sede ──────────────────────────────────────────────────
   L'indirizzo steso, le coordinate, i modi di rimediare, e la mappa accanto. La mappa
   serve a una cosa sola — vedere se il puntino è dove deve essere — e per quella un
   `iframe` di OpenStreetMap basta: una libreria di mappe per mostrare un puntino è
   qualcosa da aggiornare per sempre. */
.posizione {
  display: grid;
  grid-template-columns: 1fr minmax(280px, 420px);
  gap: var(--s-5);
  align-items: start;
}
.riga-posizione { display: flex; gap: var(--s-3); margin: 0 0 var(--s-2); font-size: 13px; }
.riga-posizione .etichetta {
  flex: none;
  width: 84px;
  font-family: var(--ff-mono);
  font-size: 9.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-mute);
  padding-top: 3px;
}
.riga-posizione code {
  font-family: var(--ff-mono);
  font-size: 12px;
  padding: 1px 6px;
  background: var(--paper-tint);
  border-radius: 3px;
}
.riga-posizione code.attenzione { color: var(--clay); background: var(--clay-tint); }
.azioni-posizione {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin: var(--s-4) 0 var(--s-2);
}
.mappa-posizione { min-height: 220px; }
.mappa-posizione .riquadro-mappa { height: 260px; }

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

/* ── Campi in errore ───────────────────────────────────────────────────────
   Il rosso sta **sul campo**, e la spiegazione accanto. Un messaggio in fondo al modulo
   costringe a rileggere sei campi per trovare quello sbagliato — ed è esattamente il
   difetto che «Dati non validi» produceva. */
input.in-errore,
select.in-errore {
  border-color: var(--clay);
  background: var(--clay-tint);
}
input.in-errore:focus, select.in-errore:focus { outline-color: var(--clay); }
.errore-campo {
  display: block;
  margin-top: 3px;
  font-size: 11.5px;
  line-height: 1.35;
  color: var(--clay);
  text-transform: none;
  letter-spacing: normal;
}
/* La sezione che distrugge si vede che distrugge, anche prima di leggerla. */
.sezione.pericolo { border-color: var(--clay); background: var(--clay-tint); }
.sezione.pericolo h2 em { color: var(--clay); }

.salti { position: sticky; top: var(--s-4); align-self: start; }
.titolo-salti {
  margin: 0 0 var(--s-2);
  padding-bottom: var(--s-2);
  border-bottom: 1px solid var(--rule);
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.salti a {
  display: flex;
  align-items: baseline;
  gap: var(--s-2);
  padding: 7px var(--s-3);
  font-size: 13px;
  color: var(--ink-soft);
  text-decoration: none;
  border-left: 2px solid transparent;
}
.salti a .progressivo { font-family: var(--ff-mono); font-size: 9.5px; color: var(--ink-mute); }
.salti a:hover { color: var(--navy); background: var(--paper-warm); }
/* La voce corrente ha il filetto oro, come l'area attiva nella colonna delle icone: è lo
   stesso segno per la stessa cosa, «sei qui». */
.salti a.attiva {
  color: var(--navy);
  background: var(--paper-warm);
  border-left-color: var(--gold);
}

/* Il salvataggio resta in vista mentre si scorre: in una pagina lunga un pulsante in fondo
   al documento è un pulsante che si cerca.

   **Galleggia**, come la colonna di sinistra: staccata dal fondo, angoli arrotondati,
   larga quanto la scheda e centrata con lei. Attaccata al bordo e larga tutta la finestra
   sembrava tagliare la scheda in orizzontale — e su una sezione rossa quel taglio si
   leggeva come un difetto. Staccata, si vede che sta *sopra* la pagina. */
.barra-salva {
  position: fixed;
  bottom: var(--s-4);
  left: var(--rientro);
  right: 0;
  /* Con `left`, `right` e un `max-width`, `margin: auto` centra il riquadro: la barra
     resta allineata alla scheda invece di scivolare a sinistra. */
  width: auto;
  max-width: calc(1180px - var(--s-6) * 2);
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(27, 58, 92, .14);
  z-index: 30;
}

@media (max-width: 900px) {
  .corpo-scheda { grid-template-columns: 1fr; }
  .salti { position: static; }
}

/* ═══════════ Pannello dei clienti ═══════════ */

/* L'elenco scorre da sé: con venti clienti la pagina intera diventa lunga, e la barra
   degli strumenti con i totali sparisce in alto proprio mentre serve. */
#elenco {
  max-height: calc(100vh - 190px);
  overflow: auto;
  border-bottom: 1px solid var(--rule-soft);
}
.griglia.clienti thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--paper-warm);
}
.griglia.clienti td { vertical-align: top; }
.cella-logo { width: 52px; }
.cella-logo img {
  width: 40px;
  height: 40px;
  object-fit: contain;
  padding: 3px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
}
/* Le iniziali per chi non ha un logo: una colonna con dei buchi si legge peggio di una
   piena, e il buco non dice niente. */
.logo-iniziali {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  background: var(--paper-tint);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  font-family: var(--ff-mono);
  font-size: 11px;
  color: var(--ink-mute);
}
.griglia.clienti tbody tr { cursor: pointer; }
.griglia.clienti tbody tr:hover { background: var(--paper-warm); }
.griglia.clienti tr.sospeso { opacity: .55; }
.master { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; padding: 2px 0; }
.master .email { font-size: 13px; color: var(--ink); }
.master .ruoli-master {
  font-family: var(--ff-mono);
  font-size: 9.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.master .accesso-master { font-family: var(--ff-mono); font-size: 10px; color: var(--ink-mute); }
/* «Mai entrato» è l'informazione più utile del pannello: un cliente che ha ricevuto le
   credenziali e non le ha mai usate è una vendita che non è ancora successa. */
.master .accesso-master.mai { color: var(--gold-deep); }
.master .stato-master {
  font-family: var(--ff-mono);
  font-size: 9.5px;
  text-transform: uppercase;
  color: var(--clay);
}
/* Nella scheda: l'attivo è quello che comanda, i congedati stanno sotto e si vede che
   sono passati. Uno solo è attivo, sempre. */
.master.attivo { padding: var(--s-2) 0; }
.master.attivo .email { font-weight: 500; }
.master.congedato { padding: 1px 0; opacity: .62; }
.master.congedato .email { font-size: 12px; }
.vuoto-cella { font-size: 12px; color: var(--clay); }

/* Le tre larghezze della colonna, dichiarate in un posto solo. Tutto il resto legge
   `--rientro` e non sa quale delle tre sia. */
body.barra-chiusa { --rientro: var(--barra); }
body.senza-barra { --rientro: 0px; }

/* ═══════════ Colonna dell'amministrazione ═══════════
   Larga e con le etichette, come la barra di ML2Project. Le voci sono due e sono le sue:
   qui non si scorre una plancia da settanta caselle, si amministra — e il nome di una voce
   vale più dei pixel che occupa. */


/* Un pannello che **galleggia**, come in ML2Project: staccato dai bordi, angoli
   arrotondati, la carta che si vede intorno. Attaccata al bordo la colonna sembra parte
   della finestra del browser; staccata sembra parte del prodotto. */
.laterale-admin,
.laterale-icone {
  position: fixed;
  top: var(--s-3);
  left: var(--s-3);
  bottom: var(--s-3);
  width: calc(var(--rientro) - var(--s-4));
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: var(--s-3);
  background: var(--navy-deep);
  border-radius: 16px;
  box-shadow: 0 12px 32px rgba(15, 37, 64, .22);
  z-index: 40;
  /* La larghezza cambia con un'animazione breve: senza, il contenuto della pagina «salta»
     di 144 pixel e per un istante non si capisce cosa sia cambiato. */
  transition: width .15s ease;
}
.laterale-admin .insegna {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin-bottom: var(--s-3);
  padding: var(--s-2);
  text-decoration: none;
}
.laterale-admin .insegna img {
  width: 34px;
  height: 34px;
  padding: 4px;
  background: var(--paper);
  border-radius: 9px;
}
.laterale-admin .insegna .nome {
  font-family: var(--ff-body);
  font-weight: 300;
  font-size: 12px;
  letter-spacing: .2em;
  color: var(--paper);
}
.laterale-admin .voce-menu {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: 10px var(--s-3);
  border-radius: 10px;
  font-size: 13.5px;
  color: rgba(247, 249, 245, .78);
  text-decoration: none;
  transition: background .13s, color .13s;
}
.laterale-admin .voce-menu svg { width: 18px; height: 18px; flex: none; }
.laterale-admin .voce-menu:hover { background: rgba(247, 249, 245, .09); color: var(--paper); }
/* La voce attiva è un blocco **pieno** d'oro con il testo scuro sopra: è il segno di
   ML2Project, e si vede da lontano più di un filetto. */
.laterale-admin .voce-menu.attiva {
  background: var(--gold);
  color: var(--navy-deep);
  font-weight: 500;
}

/* ═══════════ Barra laterale della catena ═══════════
   Stessa forma di quella dell'amministrazione: una colonna che galleggia, con le voci e i
   loro nomi. Si chiude a icone quando i nomi si sono imparati. */

.laterale-icone .insegna {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin-bottom: var(--s-3);
  padding: var(--s-2);
  text-decoration: none;
}
.laterale-icone .insegna img {
  width: 34px;
  height: 34px;
  flex: none;
  padding: 4px;
  background: var(--paper);
  border-radius: 9px;
}
.laterale-icone .insegna .due {
  font-family: var(--ff-body);
  font-weight: 300;
  font-size: 12px;
  letter-spacing: .2em;
  color: rgba(250, 247, 241, .82);
}
.laterale-icone a.icona {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: 10px var(--s-3);
  border-radius: 10px;
  font-size: 13.5px;
  color: rgba(247, 249, 245, .78);
  text-decoration: none;
  transition: background .13s, color .13s;
}
.laterale-icone a.icona svg { width: 19px; height: 19px; flex: none; }
.laterale-icone a.icona:hover { background: rgba(247, 249, 245, .09); color: var(--paper); }
/* La voce attiva è un blocco pieno d'oro col testo scuro: il segno di ML2Project, e si vede
   da lontano più di un filetto. */
.laterale-icone a.icona.attiva {
  background: var(--gold);
  color: var(--navy-deep);
  font-weight: 500;
}

/* ── Chiusa: solo icone, e i nomi tornano a essere suggerimenti al passaggio ── */

body.barra-chiusa .laterale-icone,
body.barra-chiusa .laterale-admin { align-items: center; }
body.barra-chiusa .laterale-icone .insegna,
body.barra-chiusa .laterale-admin .insegna { justify-content: center; padding: var(--s-2) 0; }
body.barra-chiusa .laterale-icone .insegna .due,
body.barra-chiusa .laterale-admin .insegna .nome { display: none; }
body.barra-chiusa .laterale-icone a.icona,
body.barra-chiusa .laterale-admin .voce-menu {
  width: 38px;
  justify-content: center;
  padding: 10px 0;
}
/* Il nome non si nasconde: **diventa un'etichetta al passaggio**. Sparire del tutto
   lascerebbe una fila di simboli da indovinare, che è il difetto delle barre a icone. */
body.barra-chiusa .nome-voce {
  position: absolute;
  left: 52px;
  padding: 3px 8px;
  background: var(--ink);
  color: var(--paper);
  font-size: 11px;
  font-weight: 400;
  white-space: nowrap;
  border-radius: var(--radius);
  opacity: 0;
  pointer-events: none;
  transition: opacity .12s;
  z-index: 2;
}
body.barra-chiusa .laterale-icone a.icona:hover .nome-voce,
body.barra-chiusa .laterale-admin .voce-menu:hover .nome-voce { opacity: 1; }

/* Il pulsante che apre e chiude: in fondo alla colonna, come in ML2Project. Sta dopo uno
   spazio che si allunga da sé, così resta in basso qualunque sia il numero di voci. */
.piega-barra {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: 9px var(--s-3);
  font-family: var(--ff-body);
  font-size: 12px;
  color: rgba(247, 249, 245, .55);
  background: none;
  border: none;
  border-top: 1px solid rgba(247, 249, 245, .12);
  border-radius: 0;
  cursor: pointer;
  text-align: left;
}
.piega-barra:hover { color: var(--paper); }
.piega-barra .freccia { font-size: 14px; line-height: 1; }
body.barra-chiusa .piega-barra { justify-content: center; padding: 9px 0; }
body.barra-chiusa .piega-barra .etichetta-piega { display: none; }

/* ═══════════ Testata ═══════════ */

.barra {
  display: flex;
  align-items: baseline;
  gap: var(--s-4);
  padding: var(--s-3) var(--s-5);
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
}
.marchio {
  font-family: var(--ff-body);
  font-weight: 300;
  font-size: 15px;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--navy);
  text-decoration: none;
}
.occhiello {
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-mute);
  padding-left: var(--s-3);
  border-left: 1px solid var(--rule);
}
.utente { color: var(--ink-mute); font-size: 13px; }
.spazio { flex: 1; }

/* ═══════════ Il contesto: dove sto lavorando ═══════════
   Un gettone solo, in testata, su tutte le aree: quale punto e quale settimana. Prima
   erano tre tendine `#punto` indipendenti — planner, presenze, mansionario — e nessuna
   ricordava niente. Sta nella fascia perché è **della sessione di lavoro**, non della
   pagina, e chi cambia area deve ritrovarlo dov'era. */

.contesto {
  display: flex;
  align-items: stretch;
  align-self: center;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: var(--paper-warm);
  overflow: visible;
}
.scelta-punto { position: relative; display: flex; }
.scelta-punto .segno-punto { width: 14px; height: 14px; flex: none; color: var(--gold-deep); }

.bottone-punto,
.scelta-punto.solo-uno {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 5px 12px 5px 11px;
  border: 0;
  border-radius: 999px 0 0 999px;
  background: transparent;
  font-family: var(--ff-body);
  font-size: 13px;
  color: var(--ink);
}
.bottone-punto { cursor: pointer; }
.bottone-punto:hover { background: var(--paper-tint); color: var(--ink); }
.bottone-punto[aria-expanded="true"] { background: var(--paper-tint); }
.contesto .nome-punto { font-weight: 500; color: var(--navy); }
.contesto .freccia { font-size: 11px; color: var(--ink-mute); }
/* Con un punto solo non c'è niente da scegliere e il gettone non finge di essere un
   comando: nessun bordo tondo a sinistra da premere, nessuna freccia. */
.scelta-punto.solo-uno { border-radius: 999px; }

.menu-punto {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 40;
  min-width: 248px;
  max-height: 340px;
  overflow: auto;
  display: flex;
  flex-direction: column;
  padding: var(--s-1) 0;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  box-shadow: 0 14px 34px rgba(15, 37, 64, .16);
}
.voce-punto {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  width: 100%;
  padding: 7px var(--s-3);
  border: 0;
  border-radius: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
}
.voce-punto:hover { background: var(--paper-warm); }
.voce-punto.scelta { background: var(--paper-tint); box-shadow: inset 3px 0 0 var(--gold); }
.voce-punto .nome { font-size: 13px; color: var(--ink); }
.voce-punto.scelta .nome { font-weight: 500; color: var(--navy); }
.voce-punto .sotto { font-family: var(--ff-mono); font-size: 10.5px; color: var(--ink-mute); }

.scelta-periodo {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: 4px 10px 4px 4px;
  border-left: 1px solid var(--rule);
}
.scelta-periodo .quando {
  font-family: var(--ff-mono);
  font-size: 12px;
  color: var(--ink-soft);
  white-space: nowrap;
}
.scelta-periodo .passo {
  display: grid;
  place-items: center;
  /* Ventiquattro pixel: erano due frecce in un pulsante da tredici, e le si mancava. */
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--navy);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
}
.scelta-periodo .passo:hover { background: var(--paper-tint); }

/* Senza testata: **solo l'account**, agganciato in alto a destra.
   È così in ML2Project, e la ragione è che il marchio sta già nella colonna e il titolo
   nella pagina — una fascia che ripete l'uno e annuncia l'altro toglie spazio al
   contenuto senza dire niente di nuovo. */
.solo-account {
  position: fixed;
  top: var(--s-3);
  right: var(--s-4);
  z-index: 45;
}
.solo-account .account {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 999px;
  box-shadow: 0 6px 18px rgba(15, 37, 64, .10);
}

/* ═══════════ Account ═══════════
   In alto a destra, come in ML2Project. Il disco con le iniziali è il punto fermo:
   sta sempre lì, ed è l'unico posto dove si risponde a «chi sono, dove sono, come esco».
   Il nome della catena nel menù non è un vezzo — con più clienti sulla stessa
   installazione è l'unica cosa che dice in quale sei entrato. */

.account { position: relative; align-self: center; }

.pulsante-account {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: 4px 6px 4px 4px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
}
.pulsante-account:hover { background: var(--paper-warm); border-color: var(--rule); }
.pulsante-account[aria-expanded="true"] { background: var(--paper-tint); border-color: var(--rule); }

.pulsante-account .iniziali {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--navy);
  color: var(--paper);
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: .04em;
}
.pulsante-account .chi { display: grid; text-align: left; line-height: 1.25; }
.pulsante-account .nome-utente { font-size: 13px; color: var(--ink); }
.pulsante-account .ruolo-utente {
  font-family: var(--ff-mono);
  font-size: 9px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

.menu-account {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 40;
  min-width: 232px;
  display: flex;
  flex-direction: column;
  padding: var(--s-2) 0;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  box-shadow: 0 14px 34px rgba(15, 37, 64, .16);
}
.menu-account .voce-testata {
  padding: var(--s-2) var(--s-3) var(--s-3);
  margin-bottom: var(--s-2);
  border-bottom: 1px solid var(--rule-soft);
}
.menu-account .catena-corrente {
  font-family: var(--ff-display);
  font-size: 15px;
  color: var(--navy);
}
.menu-account .dettaglio-account {
  margin-top: 2px;
  font-size: 11px;
  color: var(--ink-mute);
}
.menu-account .voce {
  width: 100%;
  padding: 7px var(--s-3);
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  font-size: 13px;
  text-align: left;
  text-decoration: none;
}
.menu-account .voce:hover { background: var(--paper-warm); color: var(--navy-deep); }
.menu-account .voce.uscita { color: var(--clay); }

/* ═══════════ Il registro degli avvisi ═══════════
   Il fumetto dura otto secondi; questo resta per la sessione. Il pallino conta **solo gli
   errori non letti**: contare anche le conferme vorrebbe dire un numero sempre acceso, e
   un numero sempre acceso smette di voler dire qualcosa. */

.registro { position: relative; align-self: center; }
.pulsante-registro {
  position: relative;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink-soft);
  cursor: pointer;
}
.pulsante-registro svg { width: 16px; height: 16px; }
.pulsante-registro:hover { background: var(--paper-warm); color: var(--navy); }
.conto-registro {
  position: absolute;
  top: -3px;
  right: -3px;
  display: grid;
  place-items: center;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--clay);
  color: var(--paper);
  font-family: var(--ff-mono);
  font-size: 9.5px;
}

.menu-registro {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 40;
  width: 380px;
  max-height: 420px;
  overflow: auto;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  box-shadow: 0 14px 34px rgba(15, 37, 64, .16);
}
.testa-registro {
  position: sticky;
  top: 0;
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-3);
  background: var(--paper-warm);
  border-bottom: 1px solid var(--rule);
}
.eti-registro {
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.riga-registro {
  padding: 9px var(--s-3);
  border-left: 3px solid var(--rule);
  border-bottom: 1px solid var(--rule-soft);
}
.riga-registro:last-child { border-bottom: 0; }
.riga-registro.errore { border-left-color: var(--clay); background: var(--clay-tint); }
/* Già letto: resta, ma smette di chiedere attenzione. */
.riga-registro:not(.da-leggere) { opacity: .62; }
.testo-registro { margin: 0 0 2px; font-size: 12.5px; color: var(--ink); }
.quando-registro { margin: 0; font-family: var(--ff-mono); font-size: 10.5px; color: var(--ink-mute); }
.vuoto-registro { margin: 0; padding: var(--s-4) var(--s-3); font-size: 12.5px; color: var(--ink-mute); }

/* ═══════════ La tastiera: «vai a» e la mappa dei tasti ═══════════ */

kbd {
  display: inline-block;
  font-family: var(--ff-mono);
  font-size: 10.5px;
  padding: 1px 6px;
  margin-right: 3px;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-bottom-width: 2px;
  border-radius: 4px;
  line-height: 1.4;
}

dialog.palette {
  width: min(92vw, 560px);
  max-width: 560px;
  padding: 0;
  border-radius: 10px;
  overflow: hidden;
}
.riga-vaia {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--rule);
}
.riga-vaia svg { width: 16px; height: 16px; flex: none; color: var(--ink-mute); }
.riga-vaia input {
  flex: 1;
  border: 0;
  padding: 0;
  font-size: 15px;
  background: transparent;
}
.riga-vaia input:focus { outline: none; }
#vaia-esiti { max-height: 340px; overflow: auto; }
.esito-vaia {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  width: 100%;
  padding: 8px var(--s-4);
  border: 0;
  border-radius: 0;
  border-bottom: 1px solid var(--rule-soft);
  background: transparent;
  text-align: left;
  cursor: pointer;
}
.esito-vaia svg { width: 15px; height: 15px; flex: none; color: var(--ink-mute); }
.esito-vaia.evidenziata { background: var(--paper-tint); box-shadow: inset 3px 0 0 var(--gold); }
.esito-vaia.evidenziata svg { color: var(--navy); }
.chi-vaia { display: grid; flex: 1; min-width: 0; }
.chi-vaia .nome { font-size: 13px; color: var(--ink); }
.esito-vaia.evidenziata .chi-vaia .nome { font-weight: 500; color: var(--navy); }
.chi-vaia .sotto { font-size: 11px; color: var(--ink-mute); }
.genere-vaia {
  font-family: var(--ff-mono);
  font-size: 9px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.suggerimento-vaia { margin: 0; padding: var(--s-5) var(--s-4); font-size: 13px; color: var(--ink-mute); }
.piede-vaia {
  margin: 0;
  padding: var(--s-2) var(--s-4);
  background: var(--paper-warm);
  border-top: 1px solid var(--rule);
  font-size: 11.5px;
  color: var(--ink-mute);
}

.mappa-tasti { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5); }
.eti-tasti {
  margin: 0 0 var(--s-2);
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.riga-tasti {
  display: flex;
  align-items: baseline;
  gap: var(--s-3);
  padding: 5px 0;
  border-bottom: 1px solid var(--rule-soft);
}
.riga-tasti:last-child { border-bottom: 0; }
.riga-tasti .quali { flex: none; width: 96px; }
.riga-tasti .cosa { flex: 1; font-size: 13px; }

/* ═══════════ La barra del salvataggio ═══════════
   Il «Salva» compariva e spariva. Un'azione primaria che si sposta è un'azione che si
   cerca, e quella che dice se il lavoro è al sicuro non può essere un pulsante che a volte
   non c'è. Sta in fondo alla scheda — dove lo sguardo finisce di compilare — e da spenta
   dice che non c'è niente da salvare. Un solo Salva per scheda (D131). */

.barra-salvataggio {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  flex: none;
  padding: var(--s-2) var(--s-3);
  background: var(--paper-warm);
  border-top: 1px solid var(--rule);
}
/* Con qualcosa da salvare la barra si accende: è ambra e non terracotta, perché non c'è
   niente di rotto — c'è solo del lavoro che non è ancora al sicuro. */
.barra-salvataggio.sporca { background: var(--amber-tint); border-top-color: var(--gold); }
.pallino-sporco {
  width: 7px;
  height: 7px;
  flex: none;
  border-radius: 50%;
  background: var(--gold);
}
.stato-salvataggio { font-size: 12.5px; color: var(--ink-soft); }
.barra-salvataggio.sporca .stato-salvataggio { font-weight: 500; }
.barra-salvataggio button { font-size: 12.5px; padding: 4px 12px; }

/* Il conto dei risultati accanto alla ricerca: senza, un filtro attivo fa credere che
   manchino delle righe, e qualcuno le reinserisce. */
.conto-elenco {
  font-family: var(--ff-mono);
  font-size: 10.5px;
  color: var(--ink-mute);
  white-space: nowrap;
}
.conto-elenco.filtrato { color: var(--gold-deep); }

/* ═══════════ Comandi ═══════════ */

button {
  font-family: var(--ff-body);
  font-size: 13px;
  padding: 6px 13px;
  border: 1px solid var(--navy);
  border-radius: var(--radius);
  background: transparent;
  color: var(--navy);
  cursor: pointer;
  transition: background .13s, color .13s, border-color .13s;
}
button:hover { background: var(--paper-warm); color: var(--navy-deep); }
button:disabled { opacity: .38; cursor: default; background: transparent; }
button.primario { background: var(--navy); color: var(--paper); }
button.primario:hover:not(:disabled) { background: var(--navy-deep); }

/* Un pulsante che cancella si vede che cancella, e da spento si vede che non si può. */
button.distruttivo { border-color: var(--clay); color: var(--clay); }
button.distruttivo:hover:not(:disabled) { background: var(--clay-tint); color: var(--clay); }
button.collegamento {
  border: 0;
  background: none;
  color: var(--ink-mute);
  padding: 2px 4px;
  text-decoration: underline;
}
button.collegamento:hover { color: var(--navy); background: none; }

select, input, textarea {
  font-family: var(--ff-body);
  font-size: 13px;
  padding: 6px 9px;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--ink);
}
/* Il bordo che si scurisce resta: è un'indicazione gentile per chi ha appena cliccato
   dentro un campo. Quello che **non** resta è `outline: none`, che era l'unica cosa scritta
   qui e che toglieva l'anello di serie senza rimetterne uno. */
select:focus, input:focus, textarea:focus { border-color: var(--navy); }

/* ── Il fuoco, che si deve vedere ──────────────────────────────────────────
 *
 * C'era `outline: none` su ogni campo, sostituito da un bordo di **un pixel** che cambia
 * tinta. Non è un indicatore di fuoco: in un modulo da venti campi chi si muove con TAB
 * non sa dove si trova, e su uno schermo poco contrastato non si nota affatto.
 *
 * L'anello è quello che `.posto` usa già nella griglia del planner — oro, due pixel,
 * staccato di uno. Non è un colore nuovo: è quello di casa, messo dove mancava.
 *
 * `:focus-visible` e non `:focus`: chi clicca con il mouse non vede niente (e non deve
 * vedere niente), chi arriva da tastiera lo vede sempre. È il browser a decidere, e
 * decide meglio di qualunque regola nostra. */
:where(select, input, textarea, button, a, [tabindex], summary):focus-visible {
  outline: 2px solid var(--gold);
  /* Staccato di un pixel: sul navy pieno dei pulsanti primari l'anello attaccato si
     confonde col bordo, e il distacco lascia vedere il fondo. L'anello segue da sé gli
     angoli dell'elemento — anche quelli tondi dell'account. */
  outline-offset: 1px;
}
/* La colonna di sinistra è su navy scuro: l'oro c'è ma serve più stacco, o l'anello si
   appoggia al bordo arrotondato della voce e sembra un difetto di disegno. */
.laterale-icone :focus-visible,
.laterale-admin :focus-visible { outline-offset: 2px; }

/* ═══════════ Accesso ═══════════ */

/* ═══════════ Accesso ═══════════
   Stesso impianto di ML2Project — card centrata su un fondo sfumato, marchio, verbo,
   sottotitolo — con **la carta di casa nostra**: il verde al posto del beige. I due aloni
   restano oro e navy, che sono i colori di tutte le applicazioni ML2 (D102). */

body.accesso-pagina {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: var(--s-5);
  background:
    radial-gradient(1100px 760px at 20% -10%, rgba(196, 148, 74, .20), transparent 55%),
    radial-gradient(1000px 820px at 100% 110%, rgba(27, 58, 92, .22), transparent 55%),
    linear-gradient(135deg, #eaf2e3 0%, var(--paper) 46%, #e9eef4 100%);
  background-attachment: fixed;
}
body.accesso-pagina main { width: 100%; }

/* **Chi non è ancora entrato non ha aree.**
 *
 * Le due colonne e la testata restavano dietro la card d'accesso: su `/admin` si vedevano
 * «Catene» e «Impostazioni» dietro un modulo che chiedeva chi sei, cioè un menù di posti in
 * cui non si può andare. Ogni pagina se ne occupava per conto suo nel proprio JavaScript —
 * `admin.js` nascondeva la testata e non la colonna — e la prossima se ne dimenticherà.
 *
 * Qui vale per tutte, comprese quelle che non esistono ancora: `accesso-pagina` è il nome
 * dello stato «sto chiedendo di entrare», e in quello stato la navigazione non c'è. */
body.accesso-pagina {
  --rientro: 0px;
}
body.accesso-pagina .laterale-icone,
body.accesso-pagina .laterale-admin,
body.accesso-pagina .barra,
body.accesso-pagina .solo-account { display: none; }

.accesso {
  width: 100%;
  max-width: 380px;
  margin: 0 auto;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 18px;
  padding: 34px 30px;
  box-shadow: 0 18px 50px rgba(27, 58, 92, .14);
}
.accesso .occhiello {
  border: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: var(--s-3);
  color: var(--gold-deep);
}
.accesso .occhiello::before {
  content: "";
  width: 24px;
  height: 1px;
  background: var(--gold);
}
.accesso h1 {
  font-family: var(--ff-display);
  font-weight: 500;
  font-size: 26px;
  color: var(--navy);
  text-align: center;
  margin: 0 0 4px;
}
.accesso p.nota {
  margin: 0 0 22px;
  text-align: center;
  font-size: 13px;
  color: var(--ink-mute);
}
.accesso label {
  display: block;
  margin: 14px 0 5px;
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.accesso input {
  width: 100%;
  padding: 11px 12px;
  border: 1px solid var(--rule);
  border-radius: 8px;
  font-family: var(--ff-body);
  font-size: 14px;
  text-transform: none;
  letter-spacing: normal;
  color: var(--ink);
  background: var(--paper);
}
/* Qui l'anello lo mette la regola generale del fuoco. Toglierlo con `outline: none` —
   com'era — significava che sulla pagina d'accesso, che è tutta tastiera, non si vedeva
   dove si stava scrivendo. */
.accesso input:focus { border-color: var(--gold); }
.accesso button {
  width: 100%;
  margin-top: 20px;
  padding: 12px;
  border: 0;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
}

/* Il marchio: il solo monogramma **ML**, centrato, come in ML2Project. Qui il nome del
   prodotto lo dice il sottotitolo, e ripeterlo due volte non aggiunge niente. */
.marchio-accesso { display: block; width: 54px; margin: 0 auto 14px; }

/* «ADMIN» sopra il verbo: chi apre questa pagina deve sapere in un colpo d'occhio che
   non è il prodotto, è la sua amministrazione. */
.timbro-admin {
  display: block;
  margin: 0 0 8px;
  text-align: center;
  font-family: var(--ff-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .34em;
  text-indent: .34em;
  color: var(--gold-deep);
}

/* Versione e ora di avvio. La prima domanda di ogni segnalazione è «quale versione stai
   guardando»: averla qui evita mezz'ora di indagine su una cache o su un processo che
   non è stato riavviato. */
.accesso .versione {
  margin: 18px 0 0;
  text-align: center;
  font-family: var(--ff-mono);
  font-size: 11px;
  color: var(--ink-mute);
}

/* ═══════════ Strumenti e metriche ═══════════ */

.strumenti {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  flex-wrap: wrap;
  padding: var(--s-2) var(--s-5);
  background: var(--paper-warm);
  border-bottom: 1px solid var(--rule);
}
.filtro { display: flex; align-items: center; gap: 5px; color: var(--ink-mute); font-size: 13px; }
.metriche { display: flex; gap: var(--s-5); margin-left: auto; }
.metrica { text-align: right; }
.metrica .valore {
  font-family: var(--ff-mono);
  font-weight: 500;
  font-size: 15px;
  color: var(--navy);
}
.metrica .voce {
  display: block;
  font-family: var(--ff-mono);
  font-size: 9px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

/* ═══════════ Linguette e schede ═══════════ */

.linguette { display: flex; gap: 2px; }
.linguetta {
  border: 1px solid transparent;
  border-bottom-color: var(--rule);
  border-radius: var(--radius) var(--radius) 0 0;
  background: transparent;
  color: var(--ink-mute);
  padding: 5px 14px;
}
.linguetta:hover { background: var(--paper); color: var(--navy); }
.linguetta.attiva {
  background: var(--paper);
  border-color: var(--rule);
  border-bottom-color: var(--paper);
  color: var(--navy);
  font-weight: 500;
}
/* Il numero di documenti allegati, sulla linguetta. È l'unico posto in cui «il file è stato
   allegato» resta visibile: l'avviso sparisce dopo tre secondi, e chi ha appena visto dieci
   campi riempirsi sta guardando i campi. Il numero è in cifre tabellari e in oro perché
   deve **cambiare sotto gli occhi** da «Documenti» a «Documenti 1». */
.linguetta.con-conto {
  font-variant-numeric: tabular-nums;
  color: var(--navy);
}
/* La linguetta che il documento ha precompilato: c'è qualcosa da confermare là dentro.
   Il segno sparisce appena la si apre — ha fatto il suo lavoro nel momento in cui è stata
   guardata, e un pallino che resta acceso per sempre smette di voler dire qualcosa. */
/* Il mansionario di un ruolo, dentro la scheda della persona. Un blocco per ruolo: chi ne
   ha due ha due mansionari, e vanno letti come due cose distinte — non come un elenco
   unico in cui non si capisce più quale attività appartiene a quale mestiere. */
.mansionario-ruolo {
  margin-bottom: var(--s-4);
  padding: var(--s-3) var(--s-4);
  background: var(--paper-warm);
  border-left: 3px solid var(--navy);
  border-radius: var(--radius);
}
.testa-mansionario {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin-bottom: var(--s-3);
}
.testa-mansionario .titolo-collegato { margin: 0; }
.nome-fase {
  margin: var(--s-3) 0 4px;
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.attivita-riga {
  display: flex;
  align-items: baseline;
  gap: var(--s-3);
  padding: 3px 0;
  border-bottom: 1px solid var(--rule-soft);
}
.attivita-riga:last-child { border-bottom: none; }
.codice-attivita {
  flex: none;
  min-width: 96px;
  font-family: var(--ff-mono);
  font-size: 10.5px;
  color: var(--ink-mute);
}
.titolo-attivita { flex: 1; font-size: 13px; }

.linguetta.con-proposta { color: var(--navy); font-weight: 500; }
.linguetta.con-proposta::after {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-left: 6px;
  vertical-align: 2px;
  border-radius: 50%;
  background: var(--gold);
}
.linguetta.con-conto::after {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-left: 6px;
  vertical-align: 2px;
  border-radius: 50%;
  background: var(--gold);
}

tr.riga-scegliibile { cursor: pointer; }
tr.riga-scegliibile:hover td { background: var(--paper-warm); }
tr.riga-scegliibile.scelta td { background: var(--paper-tint); box-shadow: inset 3px 0 0 var(--gold); }
table.griglia td.num { text-align: right; font-family: var(--ff-mono); }

.modulo { display: flex; flex-direction: column; gap: var(--s-3); }
.campo { display: flex; flex-direction: column; gap: 3px; }
.campo .nome-campo {
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.campo .aiuto-campo { font-size: 11px; color: var(--ink-mute); font-style: italic; }
.campo input[type="checkbox"] { width: 14px; height: 14px; }
.azioni-scheda {
  display: flex; align-items: center; gap: var(--s-2);
  margin-top: var(--s-2); flex-wrap: wrap;
}

/* Le sezioni collegate della scheda: rapporto, contratto, ruoli.
   Staccate dal modulo principale da un filetto, perché si salvano da sé — premere «Salva»
   sull'anagrafica non registra un contratto, e due moduli che sembrano uno solo fanno
   credere il contrario. */
.sezione-collegata {
  margin-top: var(--s-5);
  padding-top: var(--s-4);
  border-top: 1px solid var(--rule);
}
.sezione-collegata h3 {
  font-family: var(--ff-display);
  font-size: 14px;
  font-weight: 400;
  color: var(--navy);
  margin: 0;
}
.sezione-collegata > .aiuto-campo { margin: 0 0 var(--s-2); }
.aiuto-campo.attenzione { color: var(--clay); }

/* Il dialogo dei dati della catena: due colonne di campi, e il logo in testa. */
dialog.largo { max-width: 640px; }
dialog h3 {
  font-family: var(--ff-display);
  font-size: 14px;
  font-weight: 400;
  color: var(--navy);
  margin: var(--s-4) 0 0;
  padding-top: var(--s-3);
  border-top: 1px solid var(--rule-soft);
}
.riga-logo {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-3) 0;
}
.riga-logo img {
  width: 84px; height: 84px;
  object-fit: contain;
  padding: var(--s-2);
  background: var(--paper-warm);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
}
.azioni-logo { display: flex; flex-direction: column; gap: var(--s-1); align-items: flex-start; }
/* Il selettore di file di serie non si può vestire: si nasconde e si veste l'etichetta. */
.scegli-file {
  display: inline-block;
  font-size: 13px;
  padding: 6px 13px;
  border: 1px solid var(--navy);
  border-radius: var(--radius);
  color: var(--navy);
  cursor: pointer;
}
.scegli-file:hover { background: var(--paper-warm); }
.scegli-file input[type="file"] { display: none; }

.riquadro-mappa {
  width: 100%;
  height: 220px;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--paper-warm);
}

/* ═══════════ Selezione multipla ═══════════ */

.selezione {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-5);
  background: var(--navy);
  color: var(--paper);
  font-size: 13px;
}
.selezione button { border-color: rgba(250, 247, 241, .45); color: var(--paper); }
.selezione button:hover { background: rgba(255, 255, 255, .12); color: var(--paper); }
.selezione button.primario { background: var(--gold); border-color: var(--gold); color: var(--ink); }
.selezione button.primario:hover { background: var(--gold-light); color: var(--ink); }
.selezione button.collegamento { color: rgba(250, 247, 241, .8); border: 0; }
.selezione button.collegamento:hover { color: var(--paper); background: none; }

/* **I comandi vanno dove si sta guardando.**
 *
 * La barra stava in cima alla pagina. Si spunta una colonna intera — trenta caselle su
 * quattro giorni — e per confermarle bisogna risalire con lo sguardo fino alla testata,
 * dove nel frattempo non si stava guardando: metà delle volte non ci si accorge nemmeno che
 * esista, e si conferma una casella alla volta come prima.
 *
 * Fluttuante e vicina alla prima casella spuntata. `fixed` e non `absolute`: la griglia
 * scorre dentro il suo riquadro, e una barra ancorata al documento se ne andrebbe fuori
 * schermo insieme alla riga a cui punta. */
.selezione.fluttuante {
  position: fixed;
  z-index: 30;
  border-radius: 10px;
  padding: var(--s-2) var(--s-3);
  box-shadow: 0 8px 24px -6px rgba(15, 37, 64, .45);
  border: 1px solid var(--navy-deep);
  /* Non si trascina dietro il clic quando si sta spuntando la casella sotto. */
  animation: comparsa-barra .12s ease-out;
}
@keyframes comparsa-barra {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .selezione.fluttuante { animation: none; }
}

/* La fascia che dice che piano si sta guardando. Il pubblicato è quello che le persone
   vedono davvero, e si distingue: confonderlo con una bozza vuol dire credere di stare
   provando quando si sta cambiando la settimana a trenta persone. */
.fascia-piano {
  margin: 0;
  padding: var(--s-2) var(--s-5);
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ink-soft);
  background: var(--paper-warm);
  border-bottom: 1px solid var(--rule);
  border-left: 3px solid var(--rule);
}
.fascia-piano.bozza { border-left-color: var(--navy); }
.fascia-piano.pubblicato {
  border-left-color: var(--sage);
  background: var(--sage-tint);
  color: var(--ink);
}

/* La spiegazione di un codice, sotto la scheda del candidato. Una riga per codice, con la
   distinzione che conta più di tutte: divieto o prezzo. */
.spiega-codice {
  display: block;
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--ink-mute);
  margin-top: 3px;
  padding-left: var(--s-2);
  border-left: 2px solid var(--rule);
}
.spiega-codice b {
  font-family: var(--ff-mono);
  font-size: 10.5px;
  font-weight: 500;
}
/* La riga intera è il bersaglio del tooltip, non solo la sigla: tre caratteri sono un
   bersaglio da centrare, e chi non sa che c'è qualcosa da leggere non lo centra mai. */
.spiega-codice.con-spiega { cursor: help; }
.spiega-codice.con-spiega:hover,
.spiega-codice.con-spiega:focus-visible { background: var(--paper-warm); outline: none; }
/* Il divieto è argilla, il prezzo è ambra: rosso vuol dire «non si può», ambra «costa». */
.spiega-codice.divieto { border-left-color: var(--clay); }
.spiega-codice.divieto b { color: var(--clay); }
.spiega-codice.prezzo { border-left-color: var(--amber); }
.spiega-codice.prezzo b { color: var(--gold-deep); }

/* Il punteggio in cima all'elenco: cosa vuol dire quel numero, detto una volta sola invece
   che su ogni scheda. */
.spiega-punteggio {
  margin: 0 0 var(--s-3);
  font-size: 12px;
  line-height: 1.5;
  color: var(--ink-mute);
  background: var(--paper-warm);
  border-radius: var(--radius);
  padding: var(--s-2) var(--s-3);
}

/* ── La bolla che spiega ───────────────────────────────────────────────────
 *
 * **Perché non l'attributo `title`.** Perché appare dopo un secondo e mezzo, in un grigio
 * di sistema, largo quanto capita e senza andare a capo: una spiegazione di tre righe ci
 * diventa un serpente illeggibile, e su un tocco non appare affatto.
 *
 * Il numero in alto a destra la usa per dire cosa significa; ogni codice la usa per il
 * paragrafo che prima stava stampato sotto il codice stesso — tre per tessera, sei tessere,
 * e la colonna era un muro di testo. Il testo lungo esiste ancora, e adesso lo si va a
 * cercare invece di subirlo. */
.bolla-spiega {
  position: absolute;
  z-index: 60;
  max-width: 320px;
  padding: var(--s-3);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--navy);
  border-radius: var(--radius);
  background: var(--paper);
  box-shadow: 0 12px 28px rgba(27, 58, 92, .18);
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--ink-soft);
  /* Non intercetta il mouse: la bolla compare **sotto il puntatore** quando il bersaglio è
     in basso, e se catturasse gli eventi il `mouseleave` non arriverebbe mai — la bolla
     resterebbe appesa allo schermo. */
  pointer-events: none;
}
.bolla-spiega strong {
  display: block;
  margin-bottom: 5px;
  font-family: var(--ff-mono);
  font-size: 10.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.bolla-spiega p { margin: 0 0 var(--s-2); }
.bolla-spiega p:last-child { margin-bottom: 0; }
/* Lo stesso codice colore del resto: argilla vuol dire «non si può», ambra «costa». */
.bolla-spiega.divieto { border-left-color: var(--clay); }
.bolla-spiega.prezzo { border-left-color: var(--amber); }

.spunta {
  appearance: none;
  width: 12px;
  height: 12px;
  margin: 0 5px 0 0;
  border: 1px solid var(--ink-mute);
  border-radius: 2px;
  background: var(--paper);
  cursor: pointer;
  vertical-align: -1px;
  flex: none;
}
.spunta:checked { background: var(--navy); border-color: var(--navy); }
.spunta:checked::after {
  content: "✓";
  display: block;
  margin-top: -4px;
  font-size: 11px;
  line-height: 1;
  text-align: center;
  color: var(--paper);
}
.posto.selezionata { box-shadow: inset 0 0 0 2px var(--gold); }
table.griglia thead th .spunta, table.griglia td.giorno .spunta { margin-right: 4px; }

.legenda .aiuto { margin-left: var(--s-4); font-style: italic; }

/* ═══════════ Legenda ═══════════ */

.legenda {
  margin: 0;
  padding: 5px var(--s-5);
  background: var(--paper);
  border-bottom: 1px solid var(--rule-soft);
  color: var(--ink-mute);
  font-size: 12px;
}
.legenda .segno {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin: 0 4px 0 var(--s-4);
  border: 1px solid var(--rule);
  border-radius: 2px;
  vertical-align: -1px;
}
.legenda .segno:first-child { margin-left: 0; }
.legenda .segno.scoperto { border-color: var(--clay); background: var(--clay-tint); }
.legenda .segno.opzionale { border-style: dashed; background: transparent; }
.legenda .segno.proposta { border-color: var(--amber); background: var(--amber-tint); }
.legenda .segno.confermata { border-color: var(--sage); background: var(--sage-tint); }

/* ═══════════ Le condizioni di un comando spento ═══════════
   Una fascia sottile sotto gli strumenti, che c'è **solo** quando manca qualcosa. Stessa
   misura e stesso fondo della legenda: è una riga di servizio, non un allarme. */

.condizioni {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-4);
  margin: 0;
  padding: 5px var(--s-5);
  background: var(--paper);
  border-bottom: 1px solid var(--rule-soft);
  font-size: 12px;
}
.eti-condizioni {
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold-deep);
}
.condizione { display: inline-flex; align-items: center; gap: 5px; }
.condizione svg { width: 13px; height: 13px; flex: none; stroke-width: 2.4; }
/* Il segno non è mai il colore da solo: la spunta e la croce si distinguono anche in
   bianco e nero, e accanto c'è sempre la frase. */
.condizione.fatta { color: var(--sage); }
.condizione.manca { color: var(--clay); }

/* ═══════════ Primo avvio ═══════════ */

.avvio { max-width: 760px; margin: 6vh auto; padding: 0 var(--s-5); }
.occhiello-oro {
  font-family: var(--ff-mono);
  font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--gold-deep);
  display: flex; align-items: center; gap: var(--s-3);
}
.occhiello-oro::before { content: ""; width: 24px; height: 1px; background: var(--gold); }
.avvio h1 {
  font-family: var(--ff-display);
  font-weight: 300; font-size: clamp(34px, 4.4vw, 52px);
  margin: var(--s-2) 0 var(--s-3);
}
.avvio h1 em { font-style: italic; color: var(--navy); }
.avvio .nota { color: var(--ink-soft); max-width: 62ch; margin: 0 0 var(--s-5); }
.avvio .campo { margin-top: var(--s-4); }
.avvio input { width: 100%; padding: 9px 11px; }

.tipologie {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
  gap: var(--s-3);
  margin-top: var(--s-2);
}
.tipologia {
  display: flex; flex-direction: column; gap: 5px;
  padding: var(--s-3) var(--s-4);
  text-align: left;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--paper);
  cursor: pointer;
}
.tipologia:hover { border-color: var(--navy); background: var(--paper); }
.tipologia.scelta {
  border-color: var(--gold);
  background: var(--amber-tint);
  box-shadow: inset 3px 0 0 var(--gold);
}
.nome-tipologia { font-weight: 600; color: var(--navy); font-size: 14px; }
.desc-tipologia { font-size: 12px; color: var(--ink-soft); line-height: 1.4; }
.porta { font-family: var(--ff-mono); font-size: 10.5px; color: var(--ink-mute); margin-top: 2px; }

.avvio .altro { margin-top: var(--s-5); }
.avvio .altro summary {
  cursor: pointer; font-size: 13px; color: var(--ink-mute);
}

/* ═══════════ Il percorso sul rosone ═══════════ */

.percorso {
  position: absolute;
  left: 50%; bottom: -14px;
  transform: translateX(-50%);
  display: flex; align-items: center; gap: var(--s-2);
  padding: var(--s-2) var(--s-4);
  background: var(--paper);
  border: 1px solid var(--gold);
  border-radius: 24px;
  box-shadow: 0 6px 20px rgba(27, 58, 92, .12);
  font-size: 13px;
  white-space: nowrap;
  z-index: 5;
}
.percorso .conteggio {
  font-family: var(--ff-mono); font-size: 11px; color: var(--gold-deep);
}
.percorso a { color: var(--navy); font-weight: 500; text-decoration: none; }
.percorso a:hover { text-decoration: underline; }
.passi-fatti { display: flex; gap: 3px; }
.passo-pallino {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--rule); display: inline-block;
}
.passo-pallino.fatto { background: var(--sage); }

/* ═══════════ Rosone ═══════════ */

.rosone { display: grid; place-items: center; min-height: calc(100vh - 92px); padding: 32px 16px; }
.orbita { position: relative; width: 660px; height: 660px; max-width: 92vw; }
.orbita::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  /* Lo stesso verde del fondo, un poco più denso: il rosone galleggia sulla carta
     invece di starci appoggiato sopra. */
  background: radial-gradient(circle at 50% 50%,
    rgba(74, 107, 62, .10) 28%, rgba(27, 58, 92, .04) 58%, transparent 78%);
}
.anelli { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.anelli circle { fill: none; stroke: rgba(196, 148, 74, .55); stroke-width: .4; stroke-dasharray: 1.4 2; }
.anelli circle.interno { stroke: rgba(27, 58, 92, .18); stroke-width: .3; stroke-dasharray: .7 2.4; }

/* Il centro: **il marchio della catena**, e grande davvero.
 *
 * Era da 176 pixel con dentro un logo da 50: al centro di un rosone da 660 un francobollo.
 * Questa è la pagina di casa dell'insegna, e l'insegna si deve riconoscere entrando —
 * prima di leggere qualunque parola. */
.centro {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 232px; height: 232px;
  border-radius: 50%;
  background: var(--paper);
  border: 2px solid var(--navy);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--s-2);
  padding: var(--s-5);
  box-shadow: 0 14px 38px rgba(27, 58, 92, .18);
}
.centro::after {
  content: "";
  position: absolute; inset: 8px;
  border-radius: 50%;
  border: 1px solid var(--gold);
  opacity: .5;
}

.marchio-catena { display: flex; align-items: center; justify-content: center; }
/* Il logo della catena: **dentro il tondo, senza deformarsi**. Un logo largo e uno quadrato
   devono stare tutti e due, e `contain` è l'unica regola che li fa stare entrambi senza
   stirarne nessuno — un marchio schiacciato è peggio di un marchio piccolo. */
.marchio-catena img#logo-catena {
  max-width: 132px;
  max-height: 76px;
  width: auto;
  height: auto;
  object-fit: contain;
}
.marchio-pieno { display: flex; align-items: center; gap: 7px; }
.marchio-pieno img { width: 64px; height: auto; }
.marchio-pieno .due {
  font-size: 24px; font-weight: 300; letter-spacing: .18em;
  color: var(--navy); line-height: 1;
}
/* Il nome dell'insegna, non quello del prodotto: il prodotto si sa già qual è. Su due righe
   se serve — «Ristorazione Mediterranea» non si tronca a metà parola. */
.centro .nome {
  font-size: 13px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--navy); font-weight: 600;
  text-align: center; line-height: 1.3;
  max-width: 100%;
}
.centro .sotto { font-family: var(--ff-mono); font-size: 9.5px; color: var(--ink-mute); }

.nodo {
  position: absolute;
  top: 50%; left: 50%;
  --r: 258px;
  transform: translate(-50%, -50%) rotate(var(--a)) translateY(calc(-1 * var(--r)))
             rotate(calc(-1 * var(--a)));
  width: 124px; min-height: 100px;
  padding: 12px 8px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 14px;
  text-decoration: none;
  color: var(--ink);
  box-shadow: 0 4px 14px rgba(0, 0, 0, .05);
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.nodo:hover {
  border-color: var(--navy);
  box-shadow: 0 10px 26px rgba(27, 58, 92, .16);
  transform: translate(-50%, -50%) rotate(var(--a)) translateY(calc(-1 * var(--r)))
             rotate(calc(-1 * var(--a))) scale(1.05);
}
.icona-nodo {
  width: 40px; height: 40px;
  border-radius: 11px;
  background: var(--paper-warm);
  color: var(--navy);
  display: grid; place-items: center;
}
.icona-nodo svg { width: 21px; height: 21px; }
.nome-nodo { font-size: 12.5px; font-weight: 600; color: var(--navy); text-align: center; }
.conto {
  font-family: var(--ff-mono);
  font-size: 11px;
  color: var(--ink-mute);
  background: var(--paper-warm);
  border-radius: 9px;
  padding: 1px 8px;
  min-width: 22px;
  text-align: center;
}
.conto.acceso { background: var(--amber-tint); color: var(--gold-deep); border: 1px solid var(--gold); }

@media (max-width: 860px) {
  .orbita {
    width: 100%; height: auto;
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px;
  }
  .orbita::before, .anelli { display: none; }
  .centro {
    position: static; transform: none;
    grid-column: 1 / -1;
    width: 100%; height: auto;
    border-radius: 14px; flex-direction: row; gap: 12px; padding: 14px;
  }
  .centro::after { display: none; }
  .centro img { width: 40px; }
  .marchio-pieno img { width: 34px; }
  .marchio-pieno .due { font-size: 15px; }
  .nodo { position: static; transform: none; width: auto; }
  .nodo:hover { transform: scale(1.02); }
}

/* ═══════════ Mansionario ═══════════ */

/* ── Il livello di scrittura ──────────────────────────────────────────────
   Era una tendina di punti in cui la voce vuota voleva dire «catena»: scegliere un punto
   cambiava in silenzio cosa fa «Salva». Due stati con un nome, e una fascia che dice la
   conseguenza prima del salvataggio invece che nel `title` di un pulsante. */

.eti-livello {
  font-family: var(--ff-mono);
  font-size: 9px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.scelta-livello {
  display: flex;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: var(--paper);
  overflow: hidden;
}
.scelta-livello .liv {
  padding: 5px 13px;
  border: 0;
  border-radius: 0;
  background: transparent;
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: .08em;
  color: var(--ink-mute);
  cursor: pointer;
}
.scelta-livello .liv + .liv { border-left: 1px solid var(--rule); }
.scelta-livello .liv:hover:not(:disabled) { background: var(--paper-warm); color: var(--navy); }
/* I due livelli si distinguono anche fra loro, non solo dallo spento: la catena è navy
   come tutto ciò che vale ovunque, il punto è oro come tutto ciò che è locale — sono già
   i colori della colonna «viene da». */
.scelta-livello .liv.attivo { font-weight: 500; }
.scelta-livello #liv-catena.attivo { background: #dde5ee; color: var(--navy); }
.scelta-livello #liv-punto.attivo { background: var(--amber-tint); color: var(--gold-deep); }
/* Spento e non nascosto (D132): senza un punto scelto in testata il livello locale non
   esiste, e nasconderlo lascerebbe credere che non esista affatto. */
.scelta-livello .liv:disabled { opacity: .35; cursor: not-allowed; }

.fascia-livello {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin: 0;
  padding: 6px var(--s-5);
  border-bottom: 1px solid var(--rule);
  font-size: 13px;
  color: var(--ink-soft);
}
.fascia-livello svg { width: 16px; height: 16px; flex: none; }
.fascia-livello.alla-catena { background: #dde5ee; border-bottom-color: var(--navy-soft); }
.fascia-livello.alla-catena svg { color: var(--navy); }
.fascia-livello.al-punto { background: var(--amber-tint); border-bottom-color: var(--gold); }
.fascia-livello.al-punto svg { color: var(--gold-deep); }

/* L'icona dentro un pulsante degli strumenti: era l'unico simbolo del prodotto disegnato
   con un carattere («▶») invece che con un tracciato, e a corpo 13 si vedeva. */
/* ═══════════ I comandi della barra ═══════════
 *
 * Nella barra i pulsanti stanno **in fila e vicini**, e con il solo testo diventano sei
 * rettangoli identici: per distinguerli bisogna leggerli uno per uno, ogni volta. In una
 * plancia che si apre venti volte al giorno leggere è la prima cosa che si smette di fare
 * — si va a memoria della posizione, e si preme quello accanto.
 *
 * Due cose insieme, e servono tutte e due. L'**icona**, che si riconosce prima di leggere e
 * regge la memoria della posizione. E l'**angolo morbido**, che nella fila separa un
 * comando dall'altro meglio di quanto faccia lo spazio: `3px` è il raggio di tutta la
 * console e va bene su un pulsante isolato in fondo a un modulo, non su sei affiancati.
 *
 * Morbido solo qui, non ovunque: è la barra che ha il problema, e cambiare il raggio a
 * tutta l'applicazione per risolverlo in un posto è il modo di ritrovarsi con una console
 * che non somiglia più a nessuna delle altre di casa. */

.strumenti button,
.strumenti .scelta-criterio,
.strumenti select { border-radius: 8px; }

.strumenti button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 14px;
}
/* L'icona è **dentro** il pulsante e ne segue il colore: su «AI Planner», che è pieno di
   navy, diventa carta senza che nessuno debba dichiararlo. */
.strumenti button svg {
  width: 15px; height: 15px;
  flex: 0 0 auto;
  margin: 0;
  vertical-align: baseline;
}
/* L'etichetta è un figlio a sé, e non è una finezza: `bottone.textContent = "…"` sostituisce
   **tutti** i figli, icona compresa. Il pulsante parte con la sua icona, il primo
   aggiornamento la fa sparire, e resta un rettangolo di testo che nessuno collega alla riga
   di prima. Con lo `span` si scrive dentro quello — vedi `ML2.etichetta`. */
.etichetta-comando { white-space: nowrap; }

/* La tendina del criterio: era «costo» e basta, e cosa scegliesse stava nel `title` — cioè
   in un posto che non esiste da tastiera né su un tablet. Adesso ha il suo nome accanto, e
   si legge come un comando solo invece che come una tendina orfana. */
.scelta-criterio {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 4px 2px 10px;
  border: 1px solid var(--rule);
  background: var(--paper);
}
.scelta-criterio > svg { width: 14px; height: 14px; color: var(--ink-mute); flex: 0 0 auto; }
.scelta-criterio > span {
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
/* Dentro il gruppo la tendina non ha più un bordo suo: due cornici annidate a due pixel di
   distanza si leggono come un difetto di allineamento. */
.scelta-criterio select {
  border: 0;
  background: none;
  padding: 4px 6px;
  color: var(--navy);
  font-weight: 500;
}
.scelta-criterio:focus-within { border-color: var(--navy); }

.legenda .segno.base { border-color: var(--rule); background: var(--paper-tint); }
.legenda .segno.catena { border-color: var(--navy); background: #dde5ee; }
.legenda .segno.punto { border-color: var(--gold); background: var(--amber-tint); }

.livello {
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: .08em;
  padding: 1px 6px;
  border-radius: 2px;
  border: 1px solid var(--rule);
  background: var(--paper-tint);
  color: var(--ink-soft);
}
.livello.catena { border-color: var(--navy); background: #dde5ee; color: var(--navy); }
.livello.punto { border-color: var(--gold); background: var(--amber-tint); color: var(--gold-deep); }
.eredita { font-family: var(--ff-mono); font-size: 10px; color: var(--ink-mute); }

.codice-cella { font-family: var(--ff-mono); font-size: 11px; color: var(--ink-mute); }
.marca-critica {
  font-family: var(--ff-mono);
  font-size: 9px;
  letter-spacing: .1em;
  margin-left: 6px;
  padding: 1px 5px;
  border-radius: 2px;
  background: var(--clay-tint);
  color: var(--clay);
  border: 1px solid var(--clay);
}
h2.fase {
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin: var(--s-4) 0 var(--s-2);
}
h2.fase:first-child { margin-top: 0; }
h2.blocco {
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin: var(--s-4) 0 var(--s-2);
}
ol.passi { margin: 0; padding-left: 20px; font-size: 13px; line-height: 1.5; }
ol.passi li { margin-bottom: 4px; }
.avviso-critico {
  margin: var(--s-3) 0;
  padding: var(--s-2) var(--s-3);
  background: var(--clay-tint);
  border-left: 3px solid var(--clay);
  border-radius: var(--radius);
  font-size: 13px;
}

/* ═══════════ Pannelli ═══════════ */

.pannelli { display: grid; grid-template-columns: 1fr 340px; align-items: start; }
.griglia-zona { padding: var(--s-4) var(--s-5); overflow-x: auto; }
.laterale {
  border-left: 1px solid var(--rule);
  background: var(--paper);
  min-height: calc(100vh - 108px);
  padding: var(--s-4);
}
.laterale h2, .scoperti h2 {
  font-family: var(--ff-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin: 0 0 var(--s-2);
}

/* ═══════════ I punti: tre riquadri ═══════════
   Elenco in alto a sinistra, scheda a linguette sotto, mappa a destra per tutta l'altezza.
   Le proporzioni non sono simmetriche di proposito: le righe dell'elenco hanno tre dati e
   una tabella larga per tre dati è spazio buttato, mentre venti bandierine su una mappa
   piccola si sovrappongono. Quindi la mappa prende quasi metà della larghezza, e l'elenco
   un terzo dell'altezza. */

.tre-riquadri {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  grid-template-rows: minmax(180px, 34%) minmax(0, 1fr);
  gap: var(--s-3);
  height: calc(100vh - 56px);
  padding: var(--s-3);
}
.tre-riquadri .elenco-punti { grid-column: 1; grid-row: 1; }
.tre-riquadri .scheda-punto { grid-column: 1; grid-row: 2; }
/* La mappa occupa entrambe le righe: una mappa alta si legge, una mappa schiacciata no. */
.tre-riquadri .mappa-punti { grid-column: 2; grid-row: 1 / span 2; }

.riquadro {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 10px;
  overflow: hidden;
}
.testa-riquadro {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-2) var(--s-3);
  background: var(--paper-warm);
  border-bottom: 1px solid var(--rule);
}
.testa-riquadro h2 {
  margin: 0;
  font-family: var(--ff-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.testa-riquadro input { padding: 4px 8px; font-size: 12.5px; width: 150px; }
.testa-riquadro button { font-size: 12.5px; padding: 4px 10px; }
/* Il corpo scorre **dentro** il riquadro, non trascina la pagina: è ciò che rende i tre
   riquadri tre riquadri e non tre pezzi di una pagina lunga. */
.corpo-riquadro { flex: 1; min-height: 0; overflow: auto; padding: var(--s-3); }
.mappa-punti #mappa { flex: 1; min-height: 0; border: none; border-radius: 0; }

.marchio-punto { width: 42px; height: 32px; flex: none; }
.marchio-punto img,
.marchio-punto .senza-logo {
  width: 42px;
  height: 32px;
  object-fit: contain;
  display: grid;
  place-items: center;
  font-size: 10px;
  color: var(--ink-mute);
  background: var(--paper);
  border: 1px solid var(--rule-soft);
  border-radius: var(--radius);
}
.titolo-punto { min-width: 0; }
.titolo-punto h2 {
  margin: 0;
  font-family: var(--ff-display);
  font-weight: 300;
  font-size: 19px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--navy);
}
.titolo-punto .targhette { margin-top: 2px; }
.titolo-punto .targhetta { font-size: 9.5px; padding: 1px 6px; }

/* Il marchio nell'elenco: una catena di locali si riconosce dai loghi prima che dai nomi. */
.griglia.punti td.marchio-riga { width: 34px; padding: 2px 4px; }
.griglia.punti td.marchio-riga img {
  width: 26px;
  height: 20px;
  object-fit: contain;
  display: block;
}
.griglia.punti tbody tr { cursor: pointer; }
.griglia.punti tr.chiuso { opacity: .5; }

/* ── Le linguette ──────────────────────────────────────────────────────────
   Cinque facce in un riquadro alto mezzo schermo: una pagina a sezioni si scorrerebbe per
   sempre. Un clic, e tutta l'altezza va a quello che si sta guardando. */

.linguette {
  display: flex;
  gap: 2px;
  padding: 0 var(--s-3);
  border-bottom: 1px solid var(--rule);
  background: var(--paper);
  overflow-x: auto;
}
button.linguetta {
  padding: 7px 12px;
  font-family: var(--ff-body);
  font-size: 12.5px;
  white-space: nowrap;
  color: var(--ink-mute);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
}
button.linguetta:hover:not(:disabled) { color: var(--navy); }
/* Spenta e non nascosta: mentre si crea un punto le altre facce non hanno ancora un punto
   a cui appartenere. Nascoste sembravano perse. */
button.linguetta:disabled { opacity: .35; cursor: not-allowed; }
button.linguetta.attiva {
  color: var(--navy);
  border-bottom-color: var(--gold);
  font-weight: 500;
}
/* Nella testata del riquadro le linguette non hanno cornice: sono due modi di leggere lo
   stesso elenco, non due pagine. */
.linguette.piccole {
  padding: 0;
  border: none;
  background: none;
}
.linguette.piccole button.linguetta { padding: 3px 9px; font-size: 11.5px; }

.origine.pianificato { color: var(--clay); }
.origine.esteso { color: var(--gold-deep); }
.origine.base { color: var(--sage); }

.riga-marchio {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  margin-top: var(--s-4);
  padding-top: var(--s-3);
  border-top: 1px solid var(--rule-soft);
}
.azioni-marchio { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
/* Dove si carica il marchio, il marchio si **vede**: nella testata è un francobollo che
   serve a riconoscere il punto, qui serve ad accorgersi che è quello sbagliato o che il
   ridimensionamento l'ha storto. */
.marchio-grande {
  width: 132px;
  height: 96px;
  flex: none;
  object-fit: contain;
  padding: var(--s-2);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  cursor: zoom-in;
}
.marchio-grande:hover { border-color: var(--navy); }

dialog.a-schermo {
  width: min(92vw, 900px);
  padding: var(--s-4);
  text-align: center;
  background: var(--navy-deep);
  border: none;
  border-radius: 14px;
  cursor: zoom-out;
}
dialog.a-schermo::backdrop { background: rgba(15, 37, 64, .72); }
dialog.a-schermo img {
  max-width: 100%;
  max-height: 72vh;
  object-fit: contain;
  background: var(--paper);
  border-radius: var(--radius);
}
dialog.a-schermo .titolo-immagine {
  margin: 0 0 var(--s-3);
  font-family: var(--ff-display);
  font-weight: 300;
  font-size: 20px;
  color: var(--paper);
}
dialog.a-schermo .aiuto-campo { margin: var(--s-3) 0 0; color: rgba(247, 249, 245, .55); }

/* I suggerimenti dell'indirizzo: un elenco che scende sotto il campo, non una finestra.
   Sta dentro la casella del campo, che è `position: relative` per questo. */
.campi .campo { position: relative; }
.suggerimenti {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 20;
  max-height: 220px;
  overflow: auto;
  background: var(--paper);
  border: 1px solid var(--navy);
  border-radius: var(--radius);
  box-shadow: 0 10px 24px rgba(27, 58, 92, .18);
}
button.suggerimento {
  display: block;
  width: 100%;
  padding: 7px 10px;
  font-family: var(--ff-body);
  font-size: 12.5px;
  letter-spacing: normal;
  text-transform: none;
  text-align: left;
  color: var(--ink);
  background: none;
  border: none;
  border-bottom: 1px solid var(--rule-soft);
  cursor: pointer;
}
button.suggerimento:last-child { border-bottom: none; }
button.suggerimento:hover { background: var(--paper-warm); color: var(--navy); }

@media (max-width: 1100px) {
  /* Sotto una certa larghezza i tre riquadri diventano tre righe: due colonne strette sono
     peggio di una colonna sola. */
  .tre-riquadri {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto 340px;
    height: auto;
  }
  .tre-riquadri .elenco-punti,
  .tre-riquadri .scheda-punto,
  .tre-riquadri .mappa-punti { grid-column: 1; grid-row: auto; }
}

/* ═══════════ Il personale: due riquadri ═══════════
   Stesso impianto dei punti senza la mappa: la scheda prende la larghezza che lì va alla
   mappa, perché una persona ha più campi di un locale. */

.due-riquadri {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: var(--s-3);
  height: calc(100vh - 56px);
  padding: var(--s-3);
}

/* Il ritratto: nella testata piccolo, nella scheda grande e apribile. Chi non ha la foto
   mostra le iniziali — un buco grigio in una colonna di volti sembra un errore. */
.ritratto {
  width: 38px;
  height: 38px;
  flex: none;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--paper-warm);
  border: 1px solid var(--rule);
  border-radius: 50%;
}
.ritratto img { width: 100%; height: 100%; object-fit: cover; }
.iniziali-persona {
  font-family: var(--ff-mono);
  font-size: 13px;
  color: var(--ink-mute);
}
.foto-grande {
  width: 120px;
  height: 150px;
  flex: none;
  object-fit: cover;
  background: var(--paper-warm);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  cursor: zoom-in;
}
.foto-grande:hover { border-color: var(--navy); }

.griglia.persone td.ritratto-riga { width: 34px; padding: 2px 4px; }
.griglia.persone td.ritratto-riga img {
  width: 26px;
  height: 26px;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}
.griglia.persone .iniziali-riga {
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  font-family: var(--ff-mono);
  font-size: 10px;
  color: var(--ink-mute);
  background: var(--paper-warm);
  border-radius: 50%;
}
.griglia.persone tbody tr { cursor: pointer; }
.griglia.persone tr.chiuso { opacity: .5; }

.titolo-collegato {
  margin: 0 0 var(--s-2);
  font-family: var(--ff-display);
  font-weight: 300;
  font-size: 19px;
  color: var(--navy);
}

/* ═══════════ I documenti che compilano i campi ═══════════
   Si trascina un file sulla pagina e la scheda si riempie. Quello che arriva da un
   documento **si vede**: un dato letto da una macchina e uno scritto da una persona non
   sono la stessa cosa, e chi rilegge deve distinguerli prima di confermare. */

/* Il velo di attesa. Leggere un contratto di quattro pagine su CPU dura secondi: senza un
   segnale che il lavoro è in corso si trascina il file una seconda volta, che raddoppia
   l'attesa e confonde il risultato. Copre la pagina di proposito — durante la lettura non
   c'è nient'altro da fare, e poter cliccare altrove significa poter rompere quello che sta
   arrivando. */
.velo-attesa {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: grid;
  place-items: center;
  background: rgba(15, 37, 64, .45);
}
.riquadro-attesa {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-4) var(--s-6);
  background: var(--paper);
  border-radius: 14px;
  box-shadow: 0 14px 40px rgba(15, 37, 64, .3);
}
/* Il riquadro diventa una colonna quando c'è anche il dettaglio: il nome del file sopra,
   cosa sta succedendo e da quanti secondi sotto. */
.riquadro-attesa { flex-wrap: wrap; }
.riquadro-attesa p { margin: 0; font-size: 14px; color: var(--navy); }
.dettaglio-attesa {
  flex-basis: 100%;
  margin-left: calc(22px + var(--s-4)) !important;   /* allineato al testo, non alla rotella */
  font-size: 12.5px !important;
  color: var(--ink-mute) !important;
  font-variant-numeric: tabular-nums;   /* i secondi non devono far ballare la riga */
}
.dettaglio-attesa:empty { display: none; }

/* Il nastro del lavoro che continua. In basso a destra, piccolo, senza velo: la scheda è
   già utilizzabile — è tutto il punto — e coprirla per dire «sto ancora lavorando»
   annullerebbe il vantaggio appena guadagnato. */
.nastro-lavoro {
  position: fixed;
  right: var(--s-4);
  bottom: var(--s-4);
  z-index: 70;
  display: flex;
  align-items: center;
  gap: var(--s-3);
  max-width: 380px;
  padding: 9px var(--s-4);
  font-size: 12.5px;
  color: var(--paper);
  background: var(--navy-deep);
  border-radius: 999px;
  box-shadow: 0 8px 24px rgba(15, 37, 64, .35);
}
.nastro-lavoro .rotella {
  width: 14px;
  height: 14px;
  border-color: rgba(247, 249, 245, .35);
  border-top-color: var(--gold);
}
.rotella {
  width: 22px;
  height: 22px;
  flex: none;
  border: 2px solid var(--rule);
  border-top-color: var(--gold);
  border-radius: 50%;
  animation: gira .8s linear infinite;
}
@keyframes gira { to { transform: rotate(360deg); } }
/* Chi ha chiesto meno animazioni non ne riceve: la rotella resta un segno fermo, e il testo
   accanto continua a dire che si sta lavorando. */
@media (prefers-reduced-motion: reduce) {
  .rotella { animation: none; border-top-color: var(--navy); }
}

.velo-trascinamento {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: none;
  place-items: center;
  background: rgba(15, 37, 64, .55);
  pointer-events: none;
}
.velo-trascinamento p {
  margin: 0;
  padding: var(--s-5) var(--s-6);
  font-family: var(--ff-display);
  font-weight: 300;
  font-size: 22px;
  color: var(--navy);
  background: var(--paper);
  border: 2px dashed var(--gold);
  border-radius: 14px;
}
body:has(.in-trascinamento-file) .velo-trascinamento { display: grid; }

input.da-documento,
select.da-documento {
  border-color: var(--gold);
  box-shadow: inset 3px 0 0 var(--gold);
  background: #FFFDF5;
}

/* I campi numerici sono stretti: un campo largo quanto un indirizzo per scrivere «40» dice
   a chi compila che ci sta qualcos'altro, ed è così che in «ore settimanali» finisce del
   testo. La larghezza di un campo è un'istruzione. */
.campi .campo.stretto { max-width: 220px; }
.campi input.numerico { max-width: 140px; text-align: right; font-family: var(--ff-mono); }

/* ── Il selettore che si cerca scrivendo ──────────────────────────────────────
   Una tendina con cento voci non è una scelta: è una lista in cui si scorre. Qui si scrive
   e l'elenco si stringe. La forma viene dal disegno: riquadro alto, segno a sinistra,
   crocetta per cancellare, freccia a destra, e l'anello di fuoco che dice dove si sta
   scrivendo. I colori sono quelli della console — un secondo verde qui dentro sarebbe una
   seconda identità. */
.selettore { position: relative; }
.riga-selettore {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 0 8px 0 10px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
}
.selettore.aperto .riga-selettore {
  border-color: var(--navy);
  box-shadow: 0 0 0 3px rgba(27, 58, 92, .12);
}
/* Il fuoco lo mostra la **riga**, non il campo che ci sta dentro: l'anello attorno a un
   input senza bordo, dentro una riga che il bordo ce l'ha, disegna due cornici concentriche.
   Prima non lo mostrava nessuno dei due — la riga si accendeva solo da aperta. */
.riga-selettore:focus-within { outline: 2px solid var(--gold); outline-offset: 1px; }
.riga-selettore input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  padding: 6px 0;
  font-family: inherit;
  font-size: 13px;
  color: var(--ink);
}
.segno-selettore, .segno-voce {
  flex: none;
  font-size: 15px;
  line-height: 1;
}
.segno-selettore[hidden], .pulisci-selettore[hidden] { display: none; }
.pulisci-selettore {
  flex: none;
  padding: 2px 6px;
  font-size: 11px;
  line-height: 1;
  color: var(--ink-mute);
  border: 0;
  background: transparent;
  cursor: pointer;
}
.pulisci-selettore:hover { color: var(--navy); background: var(--paper-warm); }
.freccia-selettore { flex: none; font-size: 10px; color: var(--ink-mute); }

.voci-selettore {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 30;
  max-height: 280px;
  overflow-y: auto;
  padding: 4px;
  background: var(--paper);
  border: 1px solid var(--navy);
  border-radius: var(--radius);
  box-shadow: 0 14px 34px -18px rgba(15, 37, 64, .45);
}
.voci-selettore .voce {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 6px 8px;
  border-radius: var(--radius);
  cursor: pointer;
}
/* «scelta» è quella su cui cadrebbe l'invio: la tastiera deve poter fare tutto, e senza un
   segno visibile chi usa le frecce non sa dove si trova. */
.voci-selettore .voce.scelta { background: var(--paper-tint); box-shadow: inset 2px 0 0 var(--gold); }
.voci-selettore .voce.vuota { color: var(--ink-mute); font-style: italic; }
.nome-voce-selettore {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nome-voce-selettore .secondaria { color: var(--ink-mute); }
.nota-selettore { margin: 3px 0 0; }
.nota-selettore[hidden] { display: none; }

/* La nazionalità: due lettere e la bandiera accanto. Il codice è quello che capiscono i
   sistemi a valle; la bandiera è quella che si legge a colpo d'occhio. Il nome per esteso
   sta nel suggerimento, per chi ha un dubbio — non in una terza colonna. */
.campo .bandiera-paese {
  position: absolute;
  right: 10px;
  bottom: 7px;
  font-size: 17px;
  line-height: 1;
  cursor: help;
  pointer-events: auto;
}
.campo .bandiera-paese:empty { display: none; }
.campi input[maxlength="2"] {
  max-width: 120px;
  text-transform: uppercase;
  letter-spacing: .12em;
  font-family: var(--ff-mono);
  padding-right: 34px;   /* il posto della bandiera */
}

/* ── I documenti della persona ─────────────────────────────────────────── */

.elenco-documenti { display: flex; flex-direction: column; gap: 4px; margin-bottom: var(--s-4); }
.documento {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: 6px var(--s-3);
  background: var(--paper-warm);
  border-radius: var(--radius);
}
.tipo-documento {
  min-width: 190px;
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.nome-documento { flex: 1; min-width: 0; font-size: 13px; color: var(--navy); }

/* La nota sul trattamento sta **dove si carica**, non in una pagina di condizioni: una
   copia di una carta d'identità è un dato di qualcun altro, e le tre cose da sapere —
   perché la si tiene, chi la vede, per quanto — servono a chi sta per premere «scegli
   file». Scritte altrove sono scritte per nessuno. */
.nota-privacy {
  margin-bottom: var(--s-4);
  padding: var(--s-3) var(--s-4);
  background: var(--paper-warm);
  border-left: 3px solid var(--navy);
  border-radius: var(--radius);
}
.nota-privacy p { margin: 0 0 5px; font-size: 12.5px; color: var(--ink-soft); }
.nota-privacy p:last-child { margin-bottom: 0; }
.titolo-privacy {
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--navy);
}

/* L'anteprima di un documento **non è più una finestra dentro la pagina**.
 *
 * C'era, con un `iframe` dentro, ed è stata riscritta tre volte per tre difetti diversi:
 * troppo piccola per leggere un contratto; poi bianca senza dire se stesse caricando o
 * fosse rotta; poi un «Chiudi» che a volte non chiudeva, lasciando sullo schermo un
 * pannello blu vuoto che non se ne andava più.
 *
 * Il documento si apre in una **scheda del browser**: c'è il visualizzatore PDF vero con le
 * sue pagine, la ricerca e la stampa; la console resta dov'era, dietro; e si chiude come si
 * chiude una scheda, cioè in un modo che non può rompersi. Trenta righe di CSS, quindici di
 * JavaScript e due `dialog` in meno.
 *
 * Resta `dialog.a-schermo`, che serve alla foto della persona — un'immagine si guarda, e lì
 * il clic per chiudere è il gesto giusto. */
.pulsante.chiaro {
  padding: 5px 12px;
  font-size: 12.5px;
  color: var(--paper);
  background: none;
  border: 1px solid rgba(247, 249, 245, .5);
  border-radius: var(--radius);
  cursor: pointer;
  text-decoration: none;
}
.pulsante.chiaro:hover { background: rgba(247, 249, 245, .12); color: var(--paper); }

.esito-estrazione {
  margin-bottom: var(--s-4);
  padding: var(--s-3);
  background: var(--paper-warm);
  border-left: 3px solid var(--gold);
  border-radius: var(--radius);
}
.titolo-estrazione {
  margin: 0 0 var(--s-2);
  font-size: 13.5px;
  color: var(--navy);
}
.esito-estrazione .aiuto-campo { display: block; margin-top: 3px; }

/* ═══════════ La vista d'insieme punti × ruoli ═══════════
   «Dove manca chi» in una tabella. La distinzione che porta tutto il peso è fra la casella
   vuota — qui questo mestiere non serve — e quella scoperta: la prima è un locale fatto in
   un altro modo, la seconda è un problema. Un punto medio e un rosso, non due grigi. */

/* Le colonne dei mestieri sono strette e i nomi lunghi: la tabella scorre da sé invece di
   allargare la pagina. */
#panoramica-tabella { overflow-x: auto; }
table.incrocio { font-size: 12px; }
table.incrocio th { white-space: nowrap; }
table.incrocio td.punto-incrocio { white-space: nowrap; color: var(--navy); }
table.incrocio td.non-serve { text-align: center; color: var(--rule); }
table.incrocio td.coperta { color: var(--sage); }
table.incrocio td.scoperta { color: var(--clay); background: var(--clay-tint); font-weight: 500; }

/* ═══════════ La squadra di ruoli: l'organigramma ═══════════
   PF03 chiede «una soluzione UX molto rapida, tipo costruzione organigramma». Un menù a
   tendina con «aggiungi» sarebbe rapido da scrivere e lento da usare: sei mestieri sono
   diciotto clic e tre letture dell'elenco per capire cosa c'è già. Qui è un tabellone
   diviso per famiglia — cucina, sala, cassa, gestione, supporto — perché è così che si
   ragiona quando si compone una squadra, e in ordine alfabetico il cuoco finirebbe fra il
   cassiere e il lavapiatti. */

.organigramma { display: flex; flex-direction: column; gap: var(--s-4); }
.famiglia { border-left: 2px solid var(--rule); padding-left: var(--s-3); }
.titolo-famiglia {
  margin: 0 0 var(--s-2);
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.mestieri { display: flex; flex-wrap: wrap; gap: var(--s-3); }

.mestiere {
  position: relative;
  min-width: 168px;
  padding: var(--s-3);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
}
/* Il mestiere scoperto si vede **prima di leggere i numeri**: è la casella su cui si agisce,
   e in un tabellone da venti caselle trovarla contando è il lavoro che il colore fa da sé. */
.mestiere.scoperto { border-color: var(--clay); background: var(--clay-tint); }
.riga-mestiere {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-2);
}
.nome-mestiere { font-size: 13.5px; color: var(--navy); }
.mestiere .organico { margin: var(--s-2) 0 0; font-size: 11.5px; color: var(--ink-mute); }
.mestiere .organico.manca { color: var(--clay); }

.conta { display: flex; align-items: center; gap: 5px; margin-top: var(--s-2); }
.conta .quanti, .coppia .quanti {
  min-width: 20px;
  text-align: center;
  font-family: var(--ff-mono);
  font-size: 14px;
  color: var(--navy);
}
.previsti-etichetta {
  font-family: var(--ff-mono);
  font-size: 9.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
button.passo {
  width: 22px;
  height: 22px;
  padding: 0;
  font-size: 14px;
  line-height: 1;
  color: var(--navy);
  background: var(--paper-warm);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  cursor: pointer;
}
button.passo:hover { background: var(--paper); border-color: var(--navy); }
button.togli {
  padding: 0 4px;
  font-size: 12px;
  line-height: 1.2;
  color: var(--ink-mute);
  background: none;
  border: none;
  cursor: pointer;
}
button.togli:hover { color: var(--clay); }
button.togli:disabled { opacity: .3; cursor: not-allowed; }

/* La panchina: i mestieri che la catena ha e questo locale no. Un clic li porta dentro. */
.panchina { margin-top: var(--s-5); padding-top: var(--s-3); border-top: 1px solid var(--rule); }
.titolo-panchina {
  margin: 0 0 var(--s-2);
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.riserva { display: flex; flex-wrap: wrap; gap: var(--s-2); }
button.gettone {
  padding: 4px 10px;
  font-family: var(--ff-body);
  font-size: 12.5px;
  color: var(--ink-soft);
  background: var(--paper-warm);
  border: 1px dashed var(--rule);
  border-radius: 12px;
  cursor: pointer;
}
button.gettone:hover {
  color: var(--navy);
  background: var(--paper);
  border-style: solid;
  border-color: var(--navy);
}

.azioni-sezione { display: flex; gap: var(--s-2); margin-top: var(--s-4); }

/* ═══════════ I turni tipo del punto ═══════════ */

.turno-tipo {
  padding: var(--s-4);
  margin-bottom: var(--s-4);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
}
.testa-turno { display: flex; align-items: flex-end; gap: var(--s-3); flex-wrap: wrap; }
.campo-turno { display: flex; flex-direction: column; gap: 3px; }
.etichetta-turno {
  font-family: var(--ff-mono);
  font-size: 9.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.campo-turno input { padding: 5px 7px; font-size: 13px; border: 1px solid var(--rule); }
.campo-turno input.breve { width: 78px; }

/* I giorni come sette interruttori: la domanda è «quando è aperto», e la risposta si legge
   tutta in una riga. Sette caselle da spuntare occupano il triplo e si leggono peggio. */
.giorni { display: flex; gap: 4px; margin: var(--s-3) 0; }
button.giorno {
  width: 38px;
  padding: 4px 0;
  font-family: var(--ff-mono);
  font-size: 10.5px;
  color: var(--ink-mute);
  background: var(--paper-warm);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  cursor: pointer;
}
button.giorno.acceso {
  color: var(--paper);
  background: var(--navy);
  border-color: var(--navy);
}

.sommario-turno {
  margin: 0 0 var(--s-3);
  font-size: 12px;
  color: var(--ink-mute);
}
.composizione { display: flex; flex-direction: column; gap: 5px; margin-bottom: var(--s-3); }
.requisito {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  padding: 5px var(--s-2);
  background: var(--paper-warm);
  border-radius: var(--radius);
}
.requisito .nome-mestiere { flex: 1; min-width: 120px; }
.coppia { display: flex; align-items: center; gap: 4px; }

/* ═══════════ La mappa con le bandierine ═══════════
   Duecento righe di JavaScript invece di una libreria di mappe (vedi `mappa.js`). Qui c'è
   solo l'impaginazione: i tasselli in un piano che scorre, i segnaposto in un piano sopra
   che non scorre con loro — così una bandierina resta cliccabile mentre si trascina. */

.mappa-viva {
  position: relative;
  /* Dentro il riquadro dei punti l'altezza la decide la griglia; altrove — la scheda del
     cliente — serve una misura sua. */
  height: 320px;
  overflow: hidden;
  background: #dfe6df;   /* il colore del mare dei tasselli OSM: evita il lampo bianco */
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  cursor: grab;
  /* Senza questo il trascinamento su schermo tattile scorre la pagina invece della mappa. */
  touch-action: none;
  user-select: none;
}
.mappa-viva.in-trascinamento { cursor: grabbing; }
.mappa-viva .tasselli,
.mappa-viva .segnaposti { position: absolute; inset: 0; }
.mappa-viva .tasselli img {
  position: absolute;
  width: 256px;
  height: 256px;
  /* I tasselli sono immagini: senza questo il browser ne offre il trascinamento al posto
     nostro, e la mappa si «stacca» sotto il dito. */
  pointer-events: none;
}
/* Il piano dei segnaposto non intercetta i clic dove non ci sono bandierine: altrimenti
   coprirebbe la mappa e il trascinamento non partirebbe più. */
.mappa-viva .segnaposti { pointer-events: none; }

.mappa-viva .bandierina {
  position: absolute;
  /* Il vertice in basso al centro è **il punto**: centrare il riquadro sposterebbe il
     locale di dieci metri verso nord, che a zoom 18 si vede. */
  transform: translate(-50%, -100%);
  display: flex;
  align-items: center;
  gap: 5px;
  margin: 0;
  padding: 3px 7px 4px;
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: .06em;
  color: var(--paper);
  background: var(--navy);
  border: 1px solid var(--paper);
  border-radius: 10px;
  box-shadow: 0 2px 6px rgba(27, 58, 92, .35);
  cursor: pointer;
  pointer-events: auto;
}
/* La punta: è quella che dice **dove**. Senza, l'etichetta galleggia e il locale è
   «da qualche parte lì». */
.mappa-viva .bandierina::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -5px;
  width: 6px;
  height: 6px;
  transform: translateX(-50%) rotate(45deg);
  background: var(--navy);
  border-right: 1px solid var(--paper);
  border-bottom: 1px solid var(--paper);
}
.mappa-viva .bandierina:hover { background: var(--navy-deep); }
.mappa-viva .bandierina.scelta {
  background: var(--gold-deep);
  z-index: 2;
}
.mappa-viva .bandierina.scelta::after { background: var(--gold-deep); }

/* **La sede della catena si vede che è la sede.**
   Fra venti bandierine uguali quella della direzione era indistinguibile — e non è un punto
   operativo: non ha turni né squadra, e cliccarla non apre niente. Più grande, in oro, con
   la parola scritta per esteso: è il riferimento rispetto a cui si leggono le distanze di
   tutti gli altri, e si deve riconoscere senza passarci sopra il mouse. */
.mappa-viva .bandierina.sede {
  padding: 5px 11px 6px;
  font-family: var(--ff-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--navy-deep);
  background: var(--gold);
  border-width: 2px;
  border-radius: 12px;
  box-shadow: 0 3px 10px rgba(27, 58, 92, .45);
  cursor: default;
  z-index: 3;   /* sopra le bandierine: è il riferimento, non una di loro */
}
.mappa-viva .bandierina.sede::after {
  bottom: -6px;
  width: 8px;
  height: 8px;
  background: var(--gold);
  border-right-width: 2px;
  border-bottom-width: 2px;
}
.mappa-viva .bandierina.sede:hover { background: var(--gold); }

.comandi-mappa {
  position: absolute;
  top: var(--s-2);
  right: var(--s-2);
  display: flex;
  flex-direction: column;
  gap: 3px;
  z-index: 3;
}
.comandi-mappa button {
  width: 26px;
  height: 26px;
  padding: 0;
  font-size: 14px;
  line-height: 1;
  color: var(--navy);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  cursor: pointer;
}
.comandi-mappa button:hover { background: var(--paper-warm); }

/* L'attribuzione non è decorazione: è la condizione d'uso dei tasselli di OpenStreetMap. */
.crediti-mappa {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 3;
  padding: 1px 5px;
  font-size: 9.5px;
  color: var(--ink-soft);
  background: rgba(255, 255, 255, .82);
  text-decoration: none;
}
.crediti-mappa:hover { color: var(--navy); }

/* ═══════════ Griglia ═══════════ */

table.griglia {
  border-collapse: collapse;
  width: 100%;
  background: var(--paper);
  font-size: 13px;
}
table.griglia th, table.griglia td {
  border: 1px solid var(--rule-soft);
  padding: 5px 7px;
  vertical-align: top;
  text-align: left;
}
table.griglia thead th {
  background: var(--paper-warm);
  border-bottom-color: var(--rule);
  font-family: var(--ff-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-mute);
  white-space: nowrap;
}
table.griglia td.giorno {
  white-space: nowrap;
  font-family: var(--ff-mono);
  font-size: 11px;
  color: var(--ink-mute);
  background: var(--paper-warm);
}
table.griglia tbody tr:hover td.giorno { color: var(--navy); }

/* ── La prima colonna non scorre via ───────────────────────────────────────
 *
 * `.griglia-zona` scorre in orizzontale, e con cinque ruoli o sette giorni si scorre
 * davvero. Fin qui, scorrendo di tre colonne spariva la sola cosa che dice **di quale
 * riga** si sta guardando la casella — il turno sul planner, il giorno e la persona
 * sulle presenze — e si tornava indietro per ricontrollare.
 *
 * La colonna resta ferma; il resto le passa sotto. Il fondo caldo non è una tinta nuova:
 * è quello delle intestazioni, ed è il segno che quella colonna è la chiave di lettura.
 * Il filetto a destra si vede solo mentre qualcosa le scorre dietro.
 *
 * Vale solo dentro `.griglia-zona`: gli elenchi dentro un riquadro non scorrono in
 * orizzontale, e bloccarne una colonna sarebbe fatica per niente. */
.griglia-zona table.griglia thead th:first-child,
.griglia-zona table.griglia tbody td:first-child {
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--paper-warm);
  box-shadow: 1px 0 0 var(--rule);
}
/* L'angolo in alto a sinistra sta sopra tutti e due: appartiene alla riga d'intestazione
   e alla colonna ferma, e senza questo le passa sotto. */
.griglia-zona table.griglia thead th:first-child { z-index: 2; }

/* ═══════════ La casella ═══════════ */

.posto {
  display: block;
  width: 100%;
  min-height: 28px;
  margin: 2px 0;
  padding: 4px 7px;
  border: 1px dashed var(--rule);
  border-radius: var(--radius);
  background: transparent;
  font-size: 13px;
  cursor: pointer;
  text-align: left;
}
.posto:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }
.posto.pieno { border-style: solid; background: var(--paper); }
.posto.scoperto { border-color: var(--clay); background: var(--clay-tint); }
.posto.opzionale { opacity: .6; }
.posto.proposta { border-color: var(--amber); background: var(--amber-tint); }
.posto.confermata { border-color: var(--sage); background: var(--sage-tint); }
.posto.da_rivedere { border-color: var(--amber); background: var(--amber-tint); border-style: dashed; }
.posto.scelto { box-shadow: inset 0 0 0 2px var(--navy); }
.posto.bersaglio { border-color: var(--navy); background: var(--paper-tint); }
.posto .chi { font-weight: 500; }
/* Il bersaglio che toglie una persona dal turno era alto dodici pixel e stava a filo del
   bordo, a un pelo dalla spunta della selezione e dai verdetti: tre comandi diversi in
   venti pixel, e uno dei tre cancellava. Ventiquattro, staccato, e adesso si disfa. */
.posto .via {
  float: right;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  margin: -3px -4px 0 0;
  border-radius: var(--radius);
  color: var(--ink-mute);
  line-height: 1;
}
.posto .via:hover { background: var(--clay-tint); color: var(--clay); }
.posto .requisito { display: block; font-size: 11px; color: var(--ink-mute); }

/* Le regole di coppia sulla tessera. Il colore non è mai l'unica informazione — vale qui
   come nel resto del planner — quindi i tre stati hanno tre **segni** diversi prima ancora
   di avere tre colori, e il titolo dice per esteso con chi e perché. */
.segno-coppia {
  display: inline-block;
  margin-left: 5px;
  font-size: 12px;
  line-height: 1;
  cursor: help;
}
.segno-coppia.coppia-unita { color: var(--sage); }
.segno-coppia.coppia-divisa { color: var(--amber); }
.segno-coppia.coppia-vicina { color: var(--clay); }
.posto .verdetti { display: block; margin-top: 3px; }
.posto .verdetti button {
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: .06em;
  padding: 0 6px;
  margin-right: 3px;
  border-color: var(--rule);
  color: var(--ink-mute);
  line-height: 1.7;
}
.posto .verdetti button:hover { border-color: var(--navy); color: var(--navy); }
.posto .verdetti button.scelto {
  background: var(--navy);
  border-color: var(--navy);
  color: var(--paper);
}

/* ═══════════ Le schede delle persone ═══════════ */

.persona {
  display: block;
  width: 100%;
  margin-bottom: 4px;
  padding: 6px 9px;
  border: 1px solid var(--rule);
  border-left-width: 3px;
  border-radius: var(--radius);
  background: var(--paper);
  cursor: grab;
  text-align: left;
  font-size: 13px;
}
.persona .riga { display: flex; justify-content: space-between; gap: var(--s-2); }
.persona .motivo { display: block; font-size: 11px; color: var(--ink-mute); margin-top: 2px; }
.persona.ammissibile { border-left-color: var(--sage); }
.persona.penalita { border-left-color: var(--amber); background: var(--amber-tint); }
.persona.vietata { border-left-color: var(--clay); background: var(--clay-tint); cursor: not-allowed; }
.persona.forzabile { cursor: grab; }

.codice {
  font-family: var(--ff-mono);
  font-size: 10.5px;
  padding: 0 3px;
  /* Stava in `presenze.js` come stile in linea. Un distacco fra due codici affiancati
     serve ovunque si affianchino, e questo è il posto dove dirlo una volta. */
  margin-right: 3px;
  border-radius: 2px;
  background: var(--paper-tint);
  color: var(--ink-soft);
}

/* ── I due colori che non si vedevano ──────────────────────────────────────
 *
 * `presenze.js` scriveva `style.color = "var(--rosso)"` sull'anomalia bloccante e
 * `"var(--verde)"` sulla riga validata. Quelle due variabili **non esistono**: il foglio
 * ha `--clay` e `--sage`. Una variabile non definita non vale zero — rende invalida
 * l'intera dichiarazione, che il browser scarta in silenzio.
 *
 * Risultato: A01 «uscita mai timbrata», che blocca la chiusura del periodo, si leggeva
 * identica a A03 «entrata in ritardo», che non blocca niente. Ed era l'unica differenza
 * visibile fra le due.
 *
 * Il difetto è quello raccontato in testa a questo foglio per i margini della scheda
 * cliente: nessun errore, nessun avviso, e il codice che legge la variabile è scritto
 * giusto. In classe invece che in linea, la prossima volta si trova cercando qui. */
.codice.bloccante {
  padding: 0 4px;
  border: 1px solid var(--clay);
  background: var(--clay-tint);
  color: var(--clay);
}
/* Il colore non è mai l'unica informazione: accanto c'è sempre il codice, e il
   suggerimento al passaggio porta titolo e dettaglio dell'anomalia. */
.stato-presenza.validata { color: var(--sage); }
.stato-presenza.chiusa { color: var(--ink-mute); }

/* ═══════════ Scoperti, fatti, vuoti ═══════════ */

.scoperti {
  margin-top: var(--s-4);
  padding: var(--s-3) var(--s-4);
  background: var(--clay-tint);
  border: 1px solid var(--clay);
  border-radius: var(--radius);
}
.scoperti h2 { color: var(--clay); }
.scoperti ul { margin: 0; padding-left: 18px; font-size: 13px; }

/* La bozza non è un guasto: è un avvertimento. Ambra, non terracotta — chi vede rosso
   pensa che qualcosa non funzioni, e qui invece funziona tutto, solo che nessuno ha
   ancora firmato. */
.scoperti.bozza {
  background: var(--amber-tint);
  border-color: var(--gold);
  font-size: 13px;
  line-height: 1.5;
}
.scoperti.bozza strong { color: var(--gold-deep); }

.fatti {
  white-space: pre-wrap;
  font-family: var(--ff-mono);
  font-size: 11.5px;
  line-height: 1.55;
  background: var(--paper-warm);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: var(--s-3);
  max-height: 40vh;
  overflow: auto;
}
.prosa { margin-bottom: var(--s-3); }
.vuoto { color: var(--ink-mute); padding: var(--s-5) 0; }

/* ═══════════ I quattro stati vuoti ═══════════
   `.vuoto` diceva la stessa cosa per quattro situazioni: sto caricando, non c'è ancora
   nulla, il filtro esclude tutto, la chiamata è fallita. Le ultime due si somigliavano
   pericolosamente — un guasto letto come «non c'è nessuno» fa ricreare una persona che
   esiste già. Ora hanno un segno, una frase e, dove serve, il gesto che le scioglie. */

/* Per chi legge con la voce e non vede la forma dello scheletro. */
.solo-voce {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.scheletro { display: flex; flex-direction: column; gap: 7px; padding: var(--s-4) 0; }
.osso {
  display: block;
  height: 11px;
  border-radius: var(--radius);
  background: var(--rule-soft);
  /* Un respiro lento, non un lampeggio: deve dire «sto lavorando», non chiedere attenzione. */
  animation: respiro 1.6s ease-in-out infinite;
}
@keyframes respiro { 50% { opacity: .45; } }
/* Chi ha chiesto meno movimento al sistema lo ha chiesto anche a noi. */
@media (prefers-reduced-motion: reduce) {
  .osso { animation: none; }
}

.stato-vuoto {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-6) var(--s-4);
  color: var(--ink-mute);
  text-align: center;
}
.stato-vuoto svg { width: 26px; height: 26px; color: var(--rule); }
.stato-vuoto .dice { margin: 0; max-width: 42ch; font-size: 13px; text-wrap: pretty; }
.stato-vuoto button { font-size: 12.5px; padding: 4px 11px; }

/* Il guasto è l'unico dei tre che si tinge: gli altri due sono situazioni normali, e
   colorarli insegnerebbe a leggere come allarme un elenco che è semplicemente vuoto. */
.stato-vuoto.guasto {
  background: var(--clay-tint);
  border: 1px solid var(--clay);
  border-radius: var(--radius);
  color: var(--clay);
}
.stato-vuoto.guasto svg { color: var(--clay); }
.stato-vuoto.guasto button { border-color: var(--clay); color: var(--clay); }
.stato-vuoto.guasto button:hover { background: var(--paper); }

/* ═══════════ Avvisi e finestre ═══════════ */

.avviso {
  position: fixed;
  bottom: var(--s-4);
  left: calc(50% + var(--rientro) / 2);
  transform: translateX(-50%);
  max-width: 620px;
  padding: 9px 14px;
  border-radius: var(--radius);
  background: var(--navy-deep);
  color: var(--paper);
  font-size: 13px;
  box-shadow: 0 4px 20px rgba(15, 37, 64, .22);
  z-index: 50;
}
.avviso.errore { background: var(--clay); }

/* L'avviso può portare un gesto: «Ripristina» dopo aver tolto qualcuno dal turno. Oro sul
   navy, come la voce attiva nella colonna — è il colore di ciò che si può premere. */
.avviso { display: flex; align-items: center; gap: var(--s-4); }
.azione-avviso {
  flex: none;
  padding: 2px 10px;
  border: 1px solid var(--gold);
  border-radius: var(--radius);
  background: transparent;
  color: var(--gold-light);
  font-family: var(--ff-body);
  font-size: 12.5px;
  cursor: pointer;
}
.azione-avviso:hover { background: var(--gold); color: var(--navy-deep); }
.avviso.errore .azione-avviso { border-color: var(--paper); color: var(--paper); }
.avviso.errore .azione-avviso:hover { background: var(--paper); color: var(--clay); }

dialog {
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--ink);
  padding: var(--s-5);
  max-width: 580px;
  width: 92vw;
}
dialog h2 {
  font-family: var(--ff-display);
  font-weight: 300;
  font-size: 24px;
  margin: 0 0 var(--s-3);
}
dialog label { display: block; margin-top: var(--s-3); font-size: 13px; }
dialog::backdrop { background: rgba(15, 37, 64, .38); }
dialog .violazione { padding: var(--s-2) 0; border-bottom: 1px solid var(--rule-soft); }
dialog .violazione:last-of-type { border-bottom: 0; }
dialog textarea, dialog input, dialog select { width: 100%; margin-top: var(--s-1); }
dialog details { margin-top: var(--s-4); }
dialog summary {
  cursor: pointer;
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: var(--s-2);
}
table.confronto { margin: var(--s-3) 0; }
table.confronto td.num, table.confronto th:not(:first-child) {
  text-align: right;
  font-family: var(--ff-mono);
}
table.confronto td.num.migliore { color: var(--gold-deep); font-weight: 500; }
table.confronto td:first-child { font-weight: 500; }
table.confronto td:last-child { text-align: right; }

dialog .azioni { display: flex; justify-content: flex-end; gap: var(--s-2); margin-top: var(--s-4); }

.violazione .quante { color: var(--ink-mute); font-family: var(--ff-mono); font-size: 12px; }

/* ═══════════ Rettificare una giornata ═══════════
   Si tocca il campo al suo posto, con il tipo giusto, e sotto si legge il prima e il dopo:
   qui si scrive un numero che qualcuno riceverà a fine mese. */

.campi-rettifica {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-3) var(--s-4);
  margin: var(--s-4) 0 var(--s-3);
}
.campo-r { display: flex; flex-direction: column; gap: 3px; margin: 0; font-size: 13px; }
.campo-r input, .campo-r select { width: 100%; margin: 0; }
.campo-r .aiuto-campo { font-size: 11px; color: var(--ink-mute); font-style: italic; }

.anomalia-r {
  display: flex;
  align-items: baseline;
  gap: var(--s-2);
  margin: 0 0 var(--s-1);
  padding: 7px 10px;
  border-left: 3px solid var(--rule);
  border-radius: var(--radius);
  background: var(--paper-warm);
  font-size: 12.5px;
}
.anomalia-r.bloccante { border-left-color: var(--clay); background: var(--clay-tint); }

/* Le ore non si ricalcolano da sole: il servizio scrive il campo che gli si dà. Chi
   correggeva l'uscita e non le ore lasciava la giornata a zero con l'uscita giusta scritta
   accanto — il conto lo proponiamo, e si applica con un gesto. */
.proposta-ore {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin: 0 0 var(--s-3);
  padding: 8px 11px;
  background: var(--amber-tint);
  border: 1px solid var(--gold);
  border-radius: var(--radius);
  font-size: 12.5px;
  color: var(--ink-soft);
}
.proposta-ore button { flex: none; font-size: 12px; padding: 3px 10px; }

.prima-dopo {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  padding: 9px 12px;
  background: var(--paper-warm);
  border-radius: var(--radius);
}
.prima-dopo svg { width: 16px; height: 16px; color: var(--ink-mute); }
.voce-pd { display: flex; flex-direction: column; }
.eti-pd {
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.val-pd { font-family: var(--ff-mono); font-size: 15px; color: var(--ink-soft); }
.val-pd.cambia { font-weight: 500; color: var(--sage); }
.scarto-pd { margin-left: auto; font-size: 12px; color: var(--ink-mute); }

/* ═══════════════════════════════════════════════════════════════
   Il PLAY del mansionario — un'attività alla volta, grande.
   ═══════════════════════════════════════════════════════════════

   **Perché questa schermata non somiglia al resto della console.**

   Il resto è una plancia: densa, molte righe, ci si sta seduti. Questa si usa in piedi,
   in cucina, con una mano occupata e il telefono su una mensola a mezzo metro. La densità
   che altrove è una virtù qui è il difetto: un elenco di venti righe letto da lontano è un
   elenco che non si legge, e chi non lo legge lo spunta a memoria.

   Da qui tutto il resto: un'attività per schermata, i passi numerati e grandi, i comandi in
   fondo dove sta il pollice, e il fondo scuro — che a mezzo metro riposa l'occhio e non
   riflette le luci della cucina.

   **È una finestra, non una pagina.** A tutto schermo sembrava una pagina, e una pagina fa
   perdere il posto: chi apre il mansionario di una persona per controllare una cosa deve
   ritrovarsi dove era quando chiude. Resta grande — si legge da mezzo metro — e lascia
   vedere che sotto c'è la scheda da cui è stata aperta. Su un telefono torna a riempire lo
   schermo, perché lì il bordo sarebbe solo spazio sprecato. */

dialog.finestra-play {
  width: min(96vw, 860px);
  max-width: 96vw;
  height: min(92vh, 900px);
  max-height: 92vh;
  margin: auto;
  padding: 0;
  border: 1px solid var(--navy-soft);
  border-radius: 12px;
  box-shadow: 0 24px 64px -12px rgba(15, 37, 64, .55);
  background: var(--navy-deep);
  color: var(--paper);
  overflow: hidden;
}
dialog.finestra-play::backdrop { background: rgba(15, 37, 64, .62); }

@media (max-width: 620px) {
  /* Su un telefono il bordo è spazio sprecato: la finestra riempie lo schermo. */
  dialog.finestra-play {
    width: 100vw; max-width: 100vw; height: 100vh; max-height: 100vh;
    border: none; border-radius: 0;
  }
}

.play-telaio {
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: var(--s-4);
  gap: var(--s-3);
}

.play-uscita { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; }
.play-dove {
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(247, 249, 245, .55);
}
.play-uscita button {
  background: none;
  border: 1px solid rgba(247, 249, 245, .25);
  color: rgba(247, 249, 245, .8);
  border-radius: var(--radius);
  padding: var(--s-2) var(--s-3);
  cursor: pointer;
  font-size: 13px;
}
.play-uscita button:hover { border-color: var(--gold); color: var(--gold-light); }

/* --- i comandi della voce ------------------------------------------------
 *
 * Stanno **sempre visibili** e non dentro un menù: la velocità si corregge mentre si
 * ascolta, e un comando dentro un menù, con le mani occupate, non si raggiunge. */

.play-voce { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; }
.play-voce select {
  background: rgba(247, 249, 245, .06);
  border: 1px solid rgba(247, 249, 245, .2);
  color: var(--paper);
  border-radius: var(--radius);
  padding: 3px var(--s-2);
  font-size: 12px;
  max-width: 190px;
}
.play-voce select:disabled { opacity: .45; }
.play-velocita {
  display: flex; align-items: center; gap: var(--s-2);
  font-size: 11px; color: rgba(247, 249, 245, .55);
}
.play-velocita input { width: 88px; accent-color: var(--gold); }
.play-velocita .mono { font-family: var(--ff-mono); font-variant-numeric: tabular-nums; }

.play-avviso-voce {
  margin: 0;
  font-size: 12px;
  line-height: 1.45;
  color: var(--gold-light);
  border-left: 2px solid var(--gold);
  padding-left: var(--s-3);
}

#play-dentro { flex: 1; min-height: 0; display: flex; }
#play-dentro > * { flex: 1; min-height: 0; }

/* --- la scelta del modo, e la schermata finale --------------------------- */

.play-scelta {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  justify-content: center;
  max-width: 620px;
  margin: 0 auto;
  overflow-y: auto;
}
.play-scelta h2 {
  font-family: var(--ff-display);
  font-weight: 300;
  font-size: 30px;
  color: var(--paper);
  margin: 0;
}
.play-scelta .prosa, .play-scelta .aiuto-campo { color: rgba(247, 249, 245, .68); }
.play-scelta .aiuto-campo.attenzione { color: var(--gold-light); }

.play-modo {
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: left;
  padding: var(--s-4);
  border: 1px solid rgba(247, 249, 245, .22);
  border-radius: var(--radius);
  background: rgba(247, 249, 245, .04);
  color: var(--paper);
  cursor: pointer;
}
.play-modo:hover { border-color: var(--gold); background: rgba(196, 148, 74, .12); }
.play-modo .play-modo-nome { font-size: 17px; font-weight: 500; }
.play-modo .aiuto-campo { color: rgba(247, 249, 245, .6); }

.play-livello-grande {
  font-family: var(--ff-display);
  font-size: 42px;
  font-weight: 300;
  color: var(--gold-light);
  margin: 0;
}

/* --- l'attività corrente ------------------------------------------------- */

.play-corpo { display: flex; flex-direction: column; gap: var(--s-3); min-height: 0; }

.play-testa {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  flex-wrap: wrap;
}
.play-conta {
  font-family: var(--ff-mono);
  font-size: 13px;
  color: rgba(247, 249, 245, .6);
  font-variant-numeric: tabular-nums;
}
.play-barra {
  flex: 1;
  min-width: 80px;
  height: 4px;
  border-radius: 2px;
  background: rgba(247, 249, 245, .16);
  overflow: hidden;
}
.play-barra span { display: block; height: 100%; background: var(--gold); }
.play-testa .targhetta {
  background: rgba(247, 249, 245, .1);
  color: rgba(247, 249, 245, .85);
  border-color: transparent;
}
.play-testa .targhetta.livello-l2 { background: rgba(74, 107, 62, .5); color: #CFE7BE; }
.play-testa .targhetta.livello-l3 { background: var(--gold-deep); color: #FBF2DF; }

/* La scheda dell'attività: **carta chiara sul fondo scuro**. Il testo si legge da mezzo
   metro, e l'inversione lo stacca da tutto il resto — che è cornice. */
.play-attivita {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  background: var(--paper);
  color: var(--ink);
  border-radius: 10px;
  padding: var(--s-5);
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}
.play-attivita.critica { border-top: 5px solid var(--clay); }

.play-titolo { display: flex; align-items: baseline; gap: var(--s-3); flex-wrap: wrap; }
.play-titolo h2 {
  font-family: var(--ff-display);
  font-weight: 400;
  font-size: clamp(22px, 3.4vw, 30px);
  line-height: 1.2;
  margin: 0;
  flex: 1;
  min-width: 200px;
}
.play-fase {
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-mute);
  width: 100%;
}

.play-passi {
  margin: 0;
  padding-left: 0;
  list-style: none;
  counter-reset: passo;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.play-passi li {
  counter-increment: passo;
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: var(--s-3);
  align-items: baseline;
  font-size: clamp(16px, 2vw, 18px);
  line-height: 1.5;
}
.play-passi li::before {
  content: counter(passo);
  font-family: var(--ff-mono);
  font-size: 13px;
  color: var(--gold-deep);
  border: 1px solid var(--rule);
  border-radius: 999px;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  /* Il numero non si scrive al contrario in nessuna lingua: la griglia si specchia in
     arabo — il pallino va a destra — ma «3» resta «3». */
  direction: ltr;
}
/* In arabo e in urdu i numeri dei passi stanno a **destra**, dove comincia la riga.
   `dir` sulla lista basta a specchiare la griglia; qui si rimette solo l'allineamento del
   testo, che senza resterebbe a sinistra dentro la sua colonna. */
.play-passi[dir="rtl"] li,
.play-criteri ul[dir="rtl"] li,
.play-errori ul[dir="rtl"] li,
.play-attivita h2[dir="rtl"],
.play-risposta p[dir="rtl"] { text-align: right; }
.play-criteri ul[dir="rtl"],
.play-errori ul[dir="rtl"] { padding-left: 0; padding-right: 18px; }

.play-etichetta {
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin: 0 0 var(--s-2);
}
.play-criteri, .play-errori {
  border-left: 3px solid var(--rule);
  padding-left: var(--s-3);
}
.play-criteri { border-left-color: var(--sage); }
.play-errori { border-left-color: var(--clay); }
.play-criteri ul, .play-errori ul {
  margin: 0;
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  font-size: 14px;
  color: var(--ink-soft);
}

/* I comandi in fondo, dove sta il pollice. Alti abbastanza da prenderli senza guardare. */
.play-comandi { display: flex; gap: var(--s-2); align-items: center; flex-wrap: wrap; }
.play-comandi button { min-height: 46px; padding: 0 var(--s-4); font-size: 15px; }
.play-comandi .chiaro {
  background: none;
  border: 1px solid rgba(247, 249, 245, .25);
  color: rgba(247, 249, 245, .85);
}
.play-comandi .chiaro:hover:not(:disabled) { border-color: var(--gold); color: var(--gold-light); }
.play-comandi .chiaro:disabled { opacity: .35; cursor: not-allowed; }
.play-comandi .primario { min-width: 140px; }

@media (max-width: 560px) {
  .play-comandi { display: grid; grid-template-columns: 1fr 1fr; }
  .play-comandi .spazio { display: none; }
  .play-comandi .primario { grid-column: 1 / -1; }
}

/* --- la guida: chiedere sull'attività che si ha davanti -------------------
 *
 * I cinque tagli sono **pulsanti** e non un campo di testo, perché chi ha le mani occupate
 * non scrive «spiegami perché si fa così»: preme un tasto. Il campo libero resta per le
 * domande che i cinque tagli non coprono, ed è il secondo gesto, non il primo. */

.play-guida {
  border-top: 1px solid var(--rule);
  padding-top: var(--s-3);
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}
.play-tagli { display: flex; gap: var(--s-2); flex-wrap: wrap; }
.play-guida input[type="text"] {
  width: 100%;
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  font-size: 14px;
}

.play-risposta {
  background: var(--paper-warm);
  border-left: 3px solid var(--navy);
  border-radius: var(--radius);
  padding: var(--s-3) var(--s-4);
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  font-size: 14.5px;
  line-height: 1.55;
}
.play-risposta p { margin: 0; }
.play-risposta p.vuoto-riga { height: var(--s-2); }

/* **Ambra, non rosso.** Il rosso in questa console vuol dire «scoperto, vietato»: su una
   risposta corretta si legge come un errore, e chi la vede si chiede cosa abbia sbagliato.
   Qui il segno dice un'altra cosa — «questo testo è copiato, non riscritto» — che è una
   cautela, non un guasto. */
.play-risposta.citata {
  border-left-color: var(--amber);
  background: var(--amber-tint);
}

.play-piede-risposta {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  flex-wrap: wrap;
  border-top: 1px solid var(--rule-soft);
  padding-top: var(--s-2);
  margin-top: var(--s-1);
}
.play-provenienza {
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

/* La procedura per intero: sotto, e chiusa. Il contesto non si nasconde, ma se si apre da
   solo seppellisce la risposta. */
.play-risposta details { font-size: 13.5px; }
.play-risposta details summary {
  cursor: pointer;
  font-family: var(--ff-mono);
  font-size: 10.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-mute);
  padding: var(--s-1) 0;
}
.play-risposta details summary:hover { color: var(--navy); }
.play-risposta details p { margin: 2px 0; color: var(--ink-soft); }

/* ═══════════════════════════════════════════════════════════════
   La pagina che spiega invece di operare.
   ═══════════════════════════════════════════════════════════════

   Densità diversa dal resto della console: qui non si scorre una plancia, si legge una
   volta e si capisce dove finisce il prodotto. Colonna stretta, righe lunghe il giusto,
   e un diagramma che si legge da sinistra a destra come si legge il giro vero. */

.foglio-idea {
  max-width: 980px;
  margin: 0 auto;
  padding: var(--s-4) var(--s-4) var(--s-7);
  display: flex;
  flex-direction: column;
  gap: var(--s-6);
}

.fascia-standby {
  display: flex; align-items: flex-start; gap: var(--s-3);
  margin: 0;
  padding: var(--s-3) var(--s-4);
  background: var(--amber-tint);
  border-left: 3px solid var(--amber);
  border-radius: var(--radius);
  font-size: 14px; line-height: 1.5; color: var(--ink-soft);
}
.fascia-standby svg { flex: 0 0 auto; color: var(--gold-deep); margin-top: 2px; }

.blocco-idea { display: flex; flex-direction: column; gap: var(--s-3); }
.blocco-idea h2 {
  font-family: var(--ff-display); font-weight: 300; font-size: 22px;
  color: var(--navy); margin: 0;
}
.prosa-idea { margin: 0; max-width: 72ch; font-size: 14.5px; line-height: 1.6; color: var(--ink-soft); }
.nota-idea {
  margin: 0; max-width: 72ch; font-size: 13.5px; line-height: 1.55;
  color: var(--ink-mute); border-left: 2px solid var(--rule); padding-left: var(--s-3);
}

/* Fa / non fa: due colonne affiancate, perché è un confronto e un confronto si guarda
   insieme. Il verde e il rosso qui dicono «dentro» e «fuori dal perimetro», non «bene» e
   «male»: non fare le buste paga è una scelta, non un difetto. */
.due-colonne-idea {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--s-4);
}
.colonna-idea {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-top-width: 3px;
  border-radius: var(--radius);
  padding: var(--s-4);
  display: flex; flex-direction: column; gap: var(--s-2);
}
.colonna-idea.fa { border-top-color: var(--sage); }
.colonna-idea.non-fa { border-top-color: var(--clay); }
.etichetta-idea {
  margin: 0; font-family: var(--ff-mono); font-size: 10px;
  letter-spacing: .14em; text-transform: uppercase;
}
.colonna-idea.fa .etichetta-idea { color: var(--sage); }
.colonna-idea.non-fa .etichetta-idea { color: var(--clay); }
.colonna-idea ul {
  margin: 0; padding-left: 18px;
  display: flex; flex-direction: column; gap: var(--s-2);
  font-size: 14px; line-height: 1.5; color: var(--ink-soft);
}

/* La catena dei cinque passaggi. Le frecce sono `::after` fra un anello e l'altro: in
   orizzontale quando ci stanno, in verticale quando la finestra si stringe — e il verso
   della lettura resta quello del giro vero. */
.catena-idea {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--s-5) var(--s-4);
  counter-reset: anello;
}
.anello {
  position: relative;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: var(--s-4) var(--s-3) var(--s-3);
  display: flex; flex-direction: column; gap: var(--s-2);
}
/* Chi fa quel passaggio: noi, o qualcun altro. È l'informazione che la pagina esiste per
   dare, e va vista prima di leggere. */
.anello.nostro { border-left: 3px solid var(--navy); }
.anello.altrui {
  border-left: 3px solid var(--gold);
  border-style: dashed;
  border-left-style: solid;
  background: var(--gold-tint);
}
.anello::after {
  content: "";
  position: absolute; right: calc(var(--s-4) * -1 + 2px); top: 50%;
  width: 10px; height: 10px;
  border-top: 1.5px solid var(--rule);
  border-right: 1.5px solid var(--rule);
  transform: translateY(-50%) rotate(45deg);
}
.anello:last-child::after { content: none; }
.cifra-idea {
  font-family: var(--ff-mono); font-size: 11px; color: var(--gold-deep);
  letter-spacing: .1em;
}
.icona-idea { color: var(--navy); }
.icona-idea svg { width: 22px; height: 22px; }
.anello b { font-size: 14.5px; }
.anello span:last-child { font-size: 13px; line-height: 1.5; color: var(--ink-mute); }

/* I punti di innesto: quattro riquadri con il verso della freccia scritto, perché «si
   integra» senza dire in che direzione non vuol dire niente. */
.innesti {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--s-3);
}
.innesto {
  border: 1px dashed var(--rule);
  border-radius: var(--radius);
  padding: var(--s-3);
  display: flex; flex-direction: column; gap: 3px;
  background: var(--paper-warm);
}
.innesto b { font-size: 13.5px; color: var(--navy); }
.innesto span { font-size: 12.5px; color: var(--ink-mute); line-height: 1.45; }
.innesto .verso {
  font-family: var(--ff-mono); font-size: 11px; color: var(--gold-deep);
  margin-top: var(--s-1);
}

.elenco-idea {
  margin: 0; padding-left: 18px;
  display: flex; flex-direction: column; gap: var(--s-2);
  font-size: 14px; line-height: 1.55; color: var(--ink-soft); max-width: 78ch;
}
.elenco-idea b { color: var(--ink); }

.chiusa-idea {
  margin: 0; padding-top: var(--s-4);
  border-top: 1px solid var(--rule);
  font-size: 14px; color: var(--ink-soft);
}
.chiusa-idea a { color: var(--navy); font-weight: 500; }

/* ── La pagina del dipendente ───────────────────────────────────────────────
 *
 * Più larga di riga e più alta di interlinea del resto della console, di proposito. Le
 * altre pagine le guarda chi ci lavora otto ore e ha bisogno di densità; questa la si apre
 * trenta secondi, spesso in piedi e spesso dal telefono, per rispondere a una domanda sola.
 *
 * **La colonna è stretta apposta.** Un elenco di appuntamenti largo milleduecento pixel
 * costringe l'occhio a rifare tutto il tragitto a ogni riga: qui la misura è quella di una
 * pagina di testo, e il resto della larghezza resta vuoto — che è la scelta giusta quando
 * il contenuto è poco e va letto, non scansionato. */
/* Impostazioni: un modulo, non una plancia. La griglia dei campi si adatta alla larghezza
   disponibile, e su una pagina piena distribuiva sette voci su una riga sola — con i testi
   d'aiuto ridotti a colonnine di due parole e la spunta finita in fondo a destra, lontana
   da quello a cui si riferisce. Una colonna da leggere, non uno schieramento. */
.pagina-impostazioni #vista-account,
.pagina-impostazioni #vista-posta { max-width: 780px; padding-top: var(--s-4); }
.pagina-impostazioni .corpo-riquadro { overflow: visible; padding: 0; }
.pagina-impostazioni .campi { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }

.pagina-io .linguette { max-width: 640px; }
.pagina-io #vista-turni,
.pagina-io #vista-mansionari,
.pagina-io #vista-scheda { max-width: 640px; padding-top: var(--s-4); }

/* La settimana: due frecce e una data. Non è la barra strumenti di un'area operativa —
   niente fondo caldo, niente bordo — perché qui non si opera, si sfoglia. */
.settimana-io {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin-bottom: var(--s-3);
}
.settimana-io .spazio { flex: 1; }

.giorno-io {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin: var(--s-5) 0 var(--s-2);
  font-family: var(--ff-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
/* Una linea che continua dopo il nome del giorno: separa i gruppi senza aggiungere un
   bordo per ciascuno, che moltiplicato per sei giorni diventa una gabbia. */
.giorno-io::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--rule);
}
.giorno-io:first-child { margin-top: 0; }

.turno-io {
  position: relative;
  margin-bottom: var(--s-2);
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--paper);
}
/* Il filetto oro è **dipinto**, non un bordo: un `border-left` di tre pixel sposta il
   contenuto e disallinea le tessere rispetto al titolo del giorno. */
.turno-io::before {
  content: "";
  position: absolute;
  top: 10px; bottom: 10px; left: 0;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--gold);
}

.quando-io { display: flex; align-items: baseline; gap: var(--s-2); }
.quando-io strong {
  font-family: var(--ff-display);
  font-size: 22px;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  color: var(--navy);
}
.ore-io { font-size: 12.5px; color: var(--ink-mute); }
.dove-io { display: flex; align-items: center; gap: var(--s-2); margin-top: 6px; }
.punto-io { font-size: 14px; color: var(--ink-soft); }

.squadra-io {
  margin-top: var(--s-3);
  padding-top: var(--s-2);
  border-top: 1px dashed var(--rule);
}
.eti-squadra {
  display: block;
  margin-bottom: 6px;
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.squadra-io ul { margin: 0; padding: 0; list-style: none; }
.squadra-io li { display: flex; gap: var(--s-3); padding: 3px 0; font-size: 14.5px; }
.ruolo-collega {
  flex: 0 0 8.5em;
  color: var(--ink-mute);
  /* Il ruolo a larghezza fissa: i nomi si incolonnano, e a colpo d'occhio si legge «chi
     c'è in sala» senza rileggere ogni riga da capo. */
}

.scadenze-io, .ruoli-io, .dati-io { margin: 0 0 var(--s-4); padding: 0; list-style: none; }
.scadenze-io li, .ruoli-io li {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-2) 0;
  border-bottom: 1px solid var(--rule);
  font-size: 15px;
}
.dati-io li { padding: 4px 0; font-size: 15px; }
.quando-scade { margin-left: auto; font-size: 13px; color: var(--ink-mute); }
/* Scaduta: il colore **e** il testo, come ovunque nel prodotto. «scaduta il 12/06» lo dice
   già da sé; il rosso serve a farla trovare, non a dirla. */
.scadenze-io li.scaduta { color: var(--clay); }
.scadenze-io li.scaduta .quando-scade { color: var(--clay); font-weight: 500; }

.periodo-corrente {
  font-size: 14px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 700px) {
  /* Sul telefono la tessera prende tutta la riga e il ruolo del collega va sopra il nome:
     otto em di etichetta su uno schermo da trecentocinquanta pixel lascerebbero ai nomi
     una colonna in cui non ci stanno. */
  .pagina-io { padding-left: var(--s-3); padding-right: var(--s-3); }
  .squadra-io li { flex-direction: column; gap: 0; }
  .ruolo-collega { flex: none; font-size: 12px; }
}