/* Palette Authentica (CLAUDE.md): nero sfondi/titoli, bianco testo, rosso accenti.
 * I grigi non sono un quarto colore di marca: servono a togliere peso ai bordi delle tabelle,
 * che con il nero pieno su ogni cella risultavano pesanti. */
:root {
  --nero: #000000;
  --bianco: #ffffff;
  --rosso: #cc0000;

  --bordo: #e2e2e2;
  --bordo-tenue: #efefef;
  --sfondo-tenue: #f7f7f8;
  --sfondo-pagina: #fbfbfc;
  --testo-tenue: #63666b;
  --rosso-tenue: #fdeced;
  --raggio: 0.65rem;
  --ombra-menu: 0 0.75rem 1.75rem rgba(0, 0, 0, 0.13);
  --ombra-card: 0 1px 2px rgba(0, 0, 0, 0.05);

  /* Colori dei grafici: nero per i dati, rosso solo per lo stato che richiede attenzione.
   * Separazione verificata in OKLab su protanopia/deuteranopia/tritanopia (ΔE 19-41, soglia 8),
   * e comunque nessuna barra è identificata dal solo colore: ognuna ha etichetta e valore. */
  --grafico-dato: #1f1f1f;
  --grafico-attenzione: #cc0000;
  --grafico-traccia: #e8e8ea;
}

body {
  margin: 0;
  font-family: system-ui, sans-serif;
  color: var(--nero);
  background: var(--bianco);
}

/* Top bar. Bianca e non nera: il logo Authentica ha già il proprio fondo bianco, e su una
 * barra nera si vedeva come un rettangolo riportato invece che come parte dell'intestazione. */

.intestazione {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0 1.25rem;
  min-height: 3.75rem;
  background: var(--bianco);
  color: var(--nero);
  border-bottom: 1px solid var(--bordo);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  position: sticky;
  top: 0;
  z-index: 30;
}

.marchio {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--nero);
  text-decoration: none;
}

.marchio .logo {
  height: 2.1rem;
}

.nome-app {
  font-size: 1rem;
  font-weight: 650;
  letter-spacing: -0.01em;
}

.nav-sezioni {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 0.2rem;
}

.voce-nav,
.menu-sezione > summary {
  display: block;
  padding: 0.45rem 0.85rem;
  border: 1px solid transparent;
  border-radius: 999px;
  color: var(--testo-tenue);
  font-size: 0.92rem;
  font-weight: 550;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}

.voce-nav:hover,
.menu-sezione > summary:hover {
  background: var(--sfondo-tenue);
  border-color: var(--bordo);
  color: var(--nero);
}

/* La sezione aperta si distingue col contorno rosso, non con un riempimento pieno: resta un
   accento, non diventa un blocco di colore. */
.menu-sezione[open] > summary {
  background: var(--rosso-tenue);
  border-color: var(--rosso);
  color: var(--rosso);
}

/* Tendine di sezione: <details> con lo stesso `name`, mutuamente esclusive senza JavaScript */

.menu-sezione {
  position: relative;
}

.menu-sezione > summary {
  list-style: none;
}

.menu-sezione > summary::-webkit-details-marker {
  display: none;
}

.menu-sezione > summary::after {
  content: "⌄";
  margin-left: 0.4rem;
  font-size: 0.8em;
  opacity: 0.7;
}

.sottomenu,
.menu-utente {
  position: absolute;
  top: calc(100% + 0.4rem);
  right: 0;
  z-index: 20;
  min-width: 13rem;
  display: flex;
  flex-direction: column;
  padding: 0.35rem;
  background: var(--bianco);
  border: 1px solid var(--bordo);
  border-top: 3px solid var(--rosso);
  border-radius: var(--raggio);
  box-shadow: var(--ombra-menu);
}

.sottomenu a,
.menu-utente a {
  padding: 0.5rem 0.7rem;
  border-radius: 0.35rem;
  color: var(--nero);
  text-decoration: none;
  white-space: nowrap;
}

.sottomenu a:hover,
.menu-utente a:hover {
  background: var(--sfondo-tenue);
}

.voce-non-disponibile {
  padding: 0.5rem 0.7rem;
  color: var(--testo-tenue);
  font-style: italic;
  white-space: nowrap;
}

/* Hamburger: elenco completo di sezioni e sottosezioni, per saltare ovunque in un clic.
   Sta a sinistra del logo, dove si cerca un indice. */

.pulsante-hamburger {
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* Esplicito e non lasciato al valore iniziale: le tre barre non hanno una larghezza propria,
     la prendono stirandosi. La base condivisa dei pulsanti centra il contenuto, e centrare
     qualcosa di largo zero lo fa sparire — l'icona diventava un riquadro vuoto. */
  align-items: stretch;
  gap: 0.28rem;
  width: 2.4rem;
  height: 2.4rem;
  padding: 0 0.5rem;
  background: none;
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
}

.pulsante-hamburger span {
  display: block;
  height: 2px;
  border-radius: 1px;
  background: var(--nero);
  transition: background 0.12s;
}

.pulsante-hamburger:hover {
  background: var(--sfondo-tenue);
  border-color: var(--testo-tenue);
}

.pulsante-hamburger.attivo {
  background: var(--rosso-tenue);
  border-color: var(--rosso);
}

.pulsante-hamburger.attivo span {
  background: var(--rosso);
}

.pannello-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  padding: 1.25rem 1.5rem;
  background: var(--bianco);
  border-bottom: 1px solid var(--bordo);
  box-shadow: var(--ombra-menu);
}

/* `display: flex` batte la regola predefinita del browser per [hidden]: senza questa riga il
   pannello resterebbe aperto in permanenza. */
.pannello-nav[hidden] {
  display: none;
}

.gruppo-nav {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 12rem;
}

.gruppo-nav h3 {
  margin: 0 0 0.35rem;
  padding-bottom: 0.3rem;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--testo-tenue);
  border-bottom: 2px solid var(--rosso);
}

.gruppo-nav a {
  padding: 0.3rem 0;
  color: var(--nero);
  text-decoration: none;
}

.gruppo-nav a:hover {
  color: var(--rosso);
}

.gruppo-nav .voce-non-disponibile {
  padding: 0.3rem 0;
}

/* Selettore azienda: visibile solo con più di un'organizzazione in banca dati */

.selettore-azienda {
  position: relative;
  margin-left: 0.5rem;
}

.selettore-azienda > summary {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.8rem;
  border: 1px solid var(--bordo);
  border-radius: 999px;
  font-size: 0.88rem;
  font-weight: 550;
  cursor: pointer;
  list-style: none;
}

.selettore-azienda > summary::-webkit-details-marker {
  display: none;
}

.selettore-azienda > summary::after {
  content: "⌄";
  font-size: 0.8em;
  opacity: 0.7;
}

.selettore-azienda > summary:hover,
.selettore-azienda[open] > summary {
  background: var(--sfondo-tenue);
  border-color: var(--testo-tenue);
}

.selettore-azienda .sottomenu {
  padding: 0.35rem;
}

.voce-azienda {
  display: block;
  width: 100%;
  padding: 0.5rem 0.7rem;
  background: none;
  border: none;
  border-radius: 0.35rem;
  font: inherit;
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
}

.voce-azienda:hover {
  background: var(--sfondo-tenue);
}

.voce-azienda-attiva {
  font-weight: 650;
  color: var(--rosso);
}

/* Badge utente */

.badge-utente {
  position: relative;
}

.badge-utente {
  margin-left: 0.5rem;
}

.badge-utente > summary {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0.6rem 0.25rem 0.25rem;
  border: 1px solid var(--bordo);
  border-radius: 999px;
  cursor: pointer;
  list-style: none;
  transition: background 0.12s, border-color 0.12s;
}

.badge-utente > summary::-webkit-details-marker {
  display: none;
}

.badge-utente > summary:hover,
.badge-utente[open] > summary {
  background: var(--sfondo-tenue);
  border-color: var(--testo-tenue);
}

.avatar-iniziale {
  display: grid;
  place-items: center;
  width: 1.85rem;
  height: 1.85rem;
  border-radius: 50%;
  background: var(--rosso);
  color: var(--bianco);
  font-size: 0.85rem;
  font-weight: 700;
}

.nome-utente {
  font-size: 0.9rem;
  font-weight: 550;
}

.menu-utente {
  gap: 0.5rem;
  padding: 0.75rem;
}

.ruolo-utente {
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--testo-tenue);
}

body {
  background: var(--sfondo-pagina);
}

main {
  padding: 1.75rem 1.5rem;
}

section {
  margin-bottom: 1.75rem;
}

/* Il titolo non ha più la riga rossa a tutta larghezza: separava la pagina in fasce e
   invecchiava l'insieme. L'accento resta, ridotto a un trattino accanto al testo. */
section h2 {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0 0 0.9rem;
  font-size: 1.15rem;
  letter-spacing: -0.01em;
}

section h2::before {
  content: "";
  width: 3px;
  height: 1.1em;
  border-radius: 2px;
  background: var(--rosso);
}

.testo-introduttivo {
  max-width: 46rem;
  color: var(--testo-tenue);
}

/* Riquadro standard: ogni blocco di contenuto sta su una superficie bianca con bordo
   leggero, invece di galleggiare direttamente sulla pagina. */
.riquadro {
  padding: 1.25rem;
  background: var(--bianco);
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
  box-shadow: var(--ombra-card);
}

/* Sotto questa larghezza le tendine della top bar non ci stanno: resta l'hamburger, che porta
   già l'elenco completo. */
@media (max-width: 900px) {
  .nav-sezioni {
    display: none;
  }

  .pulsante-hamburger {
    margin-left: auto;
  }

  .nome-app {
    display: none;
  }
}

/* Colonne e filtro, affiancati sopra la griglia */

.strumenti-griglia {
  display: grid;
  grid-template-columns: minmax(18rem, 22rem) 1fr;
  gap: 1rem;
  align-items: start;
  margin-bottom: 1.25rem;
}

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

.titolo-strumento {
  margin: 0 0 0.6rem;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--testo-tenue);
}

.selettore-colonne {
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
  overflow: hidden;
}

#filtro-colonne {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 0.5rem 0.75rem;
  border: none;
  border-bottom: 1px solid var(--bordo);
  font-size: 0.9rem;
}

#filtro-colonne:focus {
  outline: none;
  background: var(--sfondo-tenue);
}

.azioni-colonne {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.4rem 0.75rem;
  border-bottom: 1px solid var(--bordo-tenue);
  font-size: 0.82rem;
}

#conteggio-colonne {
  opacity: 0.7;
  margin-right: auto;
}

.azioni-colonne button {
  background: none;
  border: none;
  color: var(--rosso);
  cursor: pointer;
  padding: 0;
  font-size: 0.85rem;
  text-decoration: underline;
}

.elenco-colonne {
  max-height: 13rem;
  overflow-y: auto;
}

.elenco-colonne label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.3rem 0.75rem;
  cursor: pointer;
}

.elenco-colonne label:hover {
  background: #f2f2f2;
}

.elenco-colonne label.nascosta {
  display: none;
}

.filtro-tabella {
  display: block;
  width: 100%;
  max-width: 22rem;
  box-sizing: border-box;
  padding: 0.4rem 0.6rem;
  margin-bottom: 0.5rem;
  border: 1px solid var(--nero);
}

/* Tabella condivisa da ogni sezione dell'app: prima ogni pagina ridefiniva le stesse regole
 * per id. Il bordo nero su ogni cella è diventato una cornice leggera con separatori tenui —
 * l'intestazione resta nera, la palette non cambia. */
.tabella-dati {
  width: 100%;
  margin-bottom: 1.5rem;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
  overflow: hidden;
}

/* Sotto i 900px la tabella scorre dentro di sé invece di allargare la pagina.
 *
 * Trovato con una prova in un browser vero (`scripts/verifica_filiera_browser.py`): a 420px il
 * documento arrivava a 1405px sul quadro economico, ~530 su anagrafica e storico. Difetto
 * preesistente e comune a ogni tabella larga, non di una pagina sola — per questo la correzione
 * sta nella classe condivisa e non in un template.
 *
 * `display: block` è ciò che rende scorrevole un elemento `table`; `max-width` gli impedisce di
 * spingere il proprio contenitore, che è la ragione per cui il documento si allargava. */
@media (max-width: 900px) {
  .tabella-dati {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
  }
}

.tabella-dati th,
.tabella-dati td {
  padding: 0.5rem 0.75rem;
  text-align: left;
  border-bottom: 1px solid var(--bordo-tenue);
}

/* L'intestazione non è più un blocco nero pieno: fondo tenue e testo scuro pesano meno e
   lasciano che siano i dati a farsi leggere. */
.tabella-dati th {
  background: var(--sfondo-tenue);
  color: var(--testo-tenue);
  font-size: 0.82rem;
  font-weight: 620;
  letter-spacing: 0.02em;
  white-space: nowrap;
  border-bottom: 1px solid var(--bordo);
}

/* Colonne di numeri: allineate a destra e a cifre di larghezza fissa, così le unità stanno
   incolonnate e gli importi si confrontano a colpo d'occhio. `nowrap` perché senza, un importo
   stretto va a capo fra il simbolo € e le cifre. */
.tabella-dati td.numerica {
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.tabella-dati th.numerica {
  text-align: right;
}

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

.tabella-dati tbody tr:hover {
  background: var(--sfondo-tenue);
}

.tabella-dati td input {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid transparent;
  border-radius: 0.25rem;
  padding: 0.25rem 0.35rem;
  font: inherit;
}

.tabella-dati td input:hover {
  border-color: var(--bordo);
}

.tabella-dati td input:focus {
  border-color: var(--rosso);
  outline: none;
}

.azioni-anagrafica {
  display: flex;
  gap: 0.5rem;
  white-space: nowrap;
}

.azioni-anagrafica button {
  cursor: pointer;
}

.form-elimina-inline {
  display: inline;
}

.messaggio-limite {
  color: var(--rosso);
  font-size: 0.85rem;
  margin: 0.35rem 0.75rem;
}

#applica-filtro {
  background: var(--rosso);
  color: var(--bianco);
  border: 1px solid var(--rosso);
  border-radius: var(--raggio);
  padding: 0.5rem 1.1rem;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  /* Il margine superiore ora lo dà `.filtro-comandi`, che contiene anche «Svuota filtro»:
     tenerlo anche qui raddoppiava lo spazio sopra la coppia di pulsanti. */
}

#applica-filtro:hover {
  background: #a80000;
  border-color: #a80000;
}

/* Filtro della griglia — disegnato da `filtro_griglia.js`, nessuna libreria.
 * Un solo raggio (var(--raggio)) per il blocco, e `calc()` per le righe annidate dentro:
 * un raggio uguale su due elementi annidati si legge come un errore di allineamento. */

.filtro-gruppo {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.filtro-gruppo-annidato {
  /* Il rientro con la barra a sinistra è ciò che rende visibile l'annidamento senza un
     secondo riquadro dentro il riquadro, che a schermo stretto si legge male. */
  margin: 0.2rem 0 0.2rem 0.9rem;
  padding: 0.6rem 0.7rem;
  border-left: 3px solid var(--bordo);
  background: var(--sfondo-tenue);
  border-radius: calc(var(--raggio) - 0.2rem);
}

.filtro-intestazione-gruppo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  font-size: 0.82rem;
  color: var(--testo-tenue);
}

.filtro-condizione {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 0.6rem;
  background: var(--bianco);
  border: 1px solid var(--bordo);
  border-radius: calc(var(--raggio) - 0.2rem);
}

.filtro-condizione select,
.filtro-condizione input {
  padding: 0.3rem 0.5rem;
  border: 1px solid var(--bordo);
  border-radius: 0.4rem;
  font: inherit;
  font-size: 0.88rem;
  background: var(--bianco);
}

.filtro-condizione select:first-child { min-width: 11rem; }
.filtro-condizione input { min-width: 7rem; flex: 1 1 7rem; }

/* Un `<select>` non scende sotto la larghezza della sua opzione più lunga se non glielo si
   dice: «maggiore o uguale a» teneva la riga a 424px dentro un viewport da 420, cioè 4px di
   scorrimento orizzontale — misurati in browser, invisibili a occhio. Sotto la soglia stretta
   i controlli vanno a capo e occupano tutta la riga. */
@media (max-width: 560px) {
  .filtro-condizione {
    flex-direction: column;
    align-items: stretch;
  }

  .filtro-condizione select,
  .filtro-condizione input,
  .filtro-condizione select:first-child {
    min-width: 0;
    max-width: 100%;
    width: 100%;
  }

  .filtro-rimuovi { margin-left: 0; align-self: flex-end; }
}
.filtro-e { color: var(--testo-tenue); font-size: 0.85rem; }
.filtro-rimuovi { margin-left: auto; }

/* Il connettore sta **fra** due condizioni e dice a parole cosa fa: era il punto in cui
   QueryBuilder si limitava a due pulsantini «AND | OR» senza spiegare cosa governassero. */
.filtro-connettore {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.9rem;
  padding: 0.15rem 0.2rem 0.15rem 0.9rem;
  font-size: 0.85rem;
  color: var(--testo-tenue);
}

.filtro-connettore label {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  cursor: pointer;
}

.filtro-nota-connettore { font-size: 0.78rem; opacity: 0.8; }

.filtro-azioni-gruppo {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.15rem;
}

.filtro-vuoto {
  margin: 0 0 0.5rem;
  font-size: 0.88rem;
  color: var(--testo-tenue);
}

/* Il riassunto a parole del filtro attivo: è la risposta a «che cosa sto guardando adesso»,
   che prima non era scritta da nessuna parte. */
.filtro-riepilogo {
  margin: 0.75rem 0 0;
  padding: 0.5rem 0.65rem;
  background: var(--sfondo-tenue);
  border: 1px solid var(--bordo-tenue);
  border-radius: calc(var(--raggio) - 0.2rem);
  font-size: 0.85rem;
  color: var(--testo-tenue);
}

.filtro-comandi {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

.kpi-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 1rem;
}

.kpi-card {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 1.1rem 1.25rem;
  background: var(--bianco);
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
  box-shadow: var(--ombra-card);
}

.kpi-etichetta {
  font-size: 0.82rem;
  font-weight: 550;
  letter-spacing: 0.01em;
  color: var(--testo-tenue);
}

/* Cifre proporzionali, non tabulari: a questa dimensione `tabular-nums` fa sembrare slegate
   le cifre strette. Le colonne di numeri allineati sono un caso diverso, vedi .tabella-dati. */
.kpi-valore {
  font-size: 1.65rem;
  font-weight: 660;
  letter-spacing: -0.02em;
}

.kpi-card-evidenza {
  border-color: var(--nero);
}

.kpi-card-evidenza .kpi-valore {
  font-size: 2.1rem;
}

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

.collegamento-azione {
  align-self: flex-start;
  margin-top: 0.35rem;
  padding: 0.3rem 0.7rem;
  border: 1px solid var(--bordo);
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 550;
  color: var(--nero);
  text-decoration: none;
}

.collegamento-azione:hover {
  border-color: var(--rosso);
  background: var(--rosso-tenue);
  color: var(--rosso);
}

/* Riepilogo per responsabile */

.griglia-responsabili {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(24rem, 1fr));
  gap: 1rem;
  /* `stretch` e non `start`: i due riquadri contengono elenchi di lunghezza diversa e da soli
     avrebbero altezze diverse, che a fianco leggono come un errore di impaginazione. */
  align-items: stretch;
}

.griglia-responsabili .riquadro {
  display: flex;
  flex-direction: column;
}

/* Il piede resta in fondo anche quando la tabella è più corta dell'altra. */
.griglia-responsabili .paginazione {
  margin-top: auto;
}

.griglia-responsabili .tabella-dati {
  margin-bottom: 0;
  font-size: 0.9rem;
}

/* La colonna del nome può andare a capo, le altre no: è l'unica larghezza variabile. */
.griglia-responsabili .tabella-dati td:first-child {
  min-width: 9rem;
}

/* Sezione richiudibile: <details> come per le tendine del menu, senza JavaScript. Serve a
   comprimere le aree che non si stanno guardando — la pagina del quadro economico ne ha
   quattro, e scorrerle tutte per arrivare in fondo è la ragione della richiesta. */
.sezione-comprimibile > summary {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.9rem;
  cursor: pointer;
  list-style: none;
}

.sezione-comprimibile > summary::-webkit-details-marker {
  display: none;
}

.sezione-comprimibile > summary::before {
  content: "";
  width: 3px;
  height: 1.1em;
  border-radius: 2px;
  background: var(--rosso);
}

.titolo-sezione {
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.sezione-comprimibile > summary::after {
  content: "⌄";
  margin-left: 0.2rem;
  font-size: 0.9rem;
  color: var(--testo-tenue);
  transition: transform 0.15s;
}

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

.sezione-comprimibile > summary:hover .titolo-sezione {
  color: var(--rosso);
}

tr.riga-fuori-pagina {
  display: none;
}

.paginazione {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.4rem;
  padding-top: 0.75rem;
}

.paginazione-conteggio {
  margin-right: auto;
  font-size: 0.82rem;
  color: var(--testo-tenue);
  font-variant-numeric: tabular-nums;
}

.paginazione button {
  width: 2rem;
  height: 2rem;
  background: var(--bianco);
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
}

.paginazione button:hover:not(:disabled) {
  border-color: var(--nero);
}

.paginazione button:disabled {
  color: var(--bordo);
  cursor: default;
}

/* La percentuale da sola si legge male in colonna: la barra dà la proporzione a colpo
   d'occhio, il numero resta accanto per il valore esatto. */
.barra-utilizzo {
  display: inline-block;
  width: 3.5rem;
  height: 0.4rem;
  margin-right: 0.4rem;
  vertical-align: middle;
  border-radius: 999px;
  background: var(--grafico-traccia);
  overflow: hidden;
}

.barra-utilizzo-piena {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--grafico-dato);
}

/* Grafici */

.griglia-grafici {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(21rem, 1fr));
  gap: 1rem;
  align-items: start;
}

.riquadro-grafico {
  padding: 1.1rem 1.25rem 0.75rem;
  background: var(--bianco);
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
  box-shadow: var(--ombra-card);
}

.titolo-grafico {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 620;
}

.sottotitolo-grafico {
  margin: 0.15rem 0 0.5rem;
  font-size: 0.82rem;
  color: var(--testo-tenue);
}

/* Il grafico non è mai l'unico modo di leggere un valore: sotto ogni grafico la stessa
   informazione in forma di testo, per chi usa uno screen reader o stampa la pagina. */
.tabella-grafico {
  width: 100%;
  margin-top: 0.25rem;
  border-collapse: collapse;
  font-size: 0.85rem;
}

.tabella-grafico th,
.tabella-grafico td {
  padding: 0.3rem 0;
  text-align: left;
  border-bottom: 1px solid var(--bordo-tenue);
}

.tabella-grafico td:last-child {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.tabella-grafico tr:last-child th,
.tabella-grafico tr:last-child td {
  border-bottom: none;
}

.dettaglio-grafico > summary {
  margin-top: 0.5rem;
  font-size: 0.82rem;
  color: var(--testo-tenue);
  cursor: pointer;
}

/* Badge di stato a pillola. Nei mockup di riferimento gli stati sono verdi e ambra: qui la
 * palette è nero/bianco/rosso, quindi la distinzione passa dal contrasto (pieno vs tenue) e il
 * rosso resta un accento riservato a ciò che richiede attenzione, non un colore di stato. */
.badge-pill {
  display: inline-block;
  padding: 0.15rem 0.7rem;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 600;
  white-space: nowrap;
}

.badge-pill-attivo {
  background: var(--nero);
  color: var(--bianco);
}

.badge-pill-cessato,
.badge-pill-neutro {
  background: var(--sfondo-tenue);
  color: var(--testo-tenue);
  border: 1px solid var(--bordo);
}

.badge-pill-attenzione {
  background: #fdeaea;
  color: var(--rosso);
  border: 1px solid var(--rosso);
}

.form-logout {
  margin-left: 1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.form-logout .utente-corrente {
  opacity: 0.85;
}

.form-logout button,
.form-nuovo-utente button {
  background: var(--rosso);
  color: var(--bianco);
  border: 1px solid var(--rosso);
  border-radius: var(--raggio);
  padding: 0.4rem 0.9rem;
  font: inherit;
  cursor: pointer;
}

.form-login label,
.form-nuovo-utente label {
  display: block;
  margin-bottom: 0.9rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--testo-tenue);
}

.form-login input,
.form-nuovo-utente input,
.form-nuovo-utente select {
  display: block;
  width: 100%;
  margin-top: 0.3rem;
  padding: 0.6rem 0.75rem;
  box-sizing: border-box;
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
  font: inherit;
  font-weight: 400;
  color: var(--nero);
}

.form-login input:focus,
.form-nuovo-utente input:focus,
.form-nuovo-utente select:focus {
  outline: none;
  border-color: var(--nero);
}

/* Pagina di accesso: autonoma, senza l'intestazione dell'app — prima del login non avrebbe
   nulla da mostrare. Due colonne: il form a sinistra, e a destra una vetrina che dice cosa fa
   la piattaforma, come nei pannelli di accesso dei gestionali moderni. */

body.pagina-login {
  display: grid;
  place-items: center;
  min-height: 100vh;
  padding: 1.5rem;
  box-sizing: border-box;
  background: var(--sfondo-pagina);
}

.riquadro-login {
  /* È un <main>: senza questo eredita il padding di `main` dell'app, che lascia un bordo
     bianco attorno al pannello scuro invece di farlo arrivare al bordo della card. */
  padding: 0;
  display: grid;
  /* La seconda colonna assorbe lo spazio che avanza: con due larghezze massime fisse la somma
     restava sotto la larghezza della card e lasciava una striscia bianca a destra del pannello
     scuro. */
  grid-template-columns: minmax(19rem, 24rem) 1fr;
  width: 100%;
  max-width: 52rem;
  background: var(--bianco);
  border: 1px solid var(--bordo);
  border-radius: 1.1rem;
  box-shadow: 0 1.5rem 3rem rgba(0, 0, 0, 0.12);
  overflow: hidden;
}

.login-form {
  padding: 2.5rem 2.25rem;
}

.logo-login {
  height: 2.4rem;
  margin-bottom: 1.75rem;
}

/* Il marchio per esteso chiude la composizione sotto al monogramma: uno dice chi, l'altro è
   il segno. Centrato, perché il pannello ora è simmetrico. */
.logo-vetrina {
  height: 2rem;
  align-self: center;
  margin: 0;
}

.login-form h1 {
  margin: 0;
  font-size: 1.6rem;
  letter-spacing: -0.02em;
}

.sottotitolo-login {
  margin: 0.3rem 0 1.75rem;
  color: var(--testo-tenue);
  font-size: 0.9rem;
}

.form-login button {
  width: 100%;
  margin-top: 0.4rem;
  padding: 0.7rem 1rem;
  background: var(--rosso);
  color: var(--bianco);
  border: 1px solid var(--rosso);
  border-radius: var(--raggio);
  font: inherit;
  font-weight: 620;
  cursor: pointer;
}

.form-login button:hover {
  background: #a80000;
  border-color: #a80000;
}

.nota-login {
  margin: 1.5rem 0 0;
  font-size: 0.8rem;
  color: var(--testo-tenue);
}

/* Il nero pieno sta qui e non nella barra: è la superficie dove il marchio può pesare. */
.login-vetrina {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2.75rem;
  padding: 3rem 2.25rem;
  background: var(--nero);
  color: var(--bianco);
  /* Alone appena percettibile dietro il monogramma: dà profondità al nero pieno, che
     altrimenti appiattisce la lettera contro il fondo. */
  background-image: radial-gradient(
    circle at 50% 42%,
    rgba(204, 0, 0, 0.1) 0%,
    rgba(204, 0, 0, 0) 62%
  );
}

.monogramma {
  width: 66%;
  max-width: 14rem;
  height: auto;
}

/* La Λ recede come nel logo originale, dove è grigia accanto al rosso pieno: su fondo nero il
   bianco al 22% dà lo stesso grigio, senza cablare un colore fuori palette. */
.monogramma-lettera {
  fill: var(--bianco);
  fill-opacity: 0.26;
}

.monogramma-barra {
  fill: var(--rosso);
}

/* Sotto questa larghezza la vetrina toglie spazio al form invece di aggiungere contesto. */
@media (max-width: 780px) {
  .riquadro-login {
    grid-template-columns: 1fr;
    max-width: 26rem;
  }

  .login-vetrina {
    display: none;
  }
}

.messaggio-errore {
  color: var(--rosso);
  font-weight: bold;
}

.form-formazione {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}

.form-formazione button {
  background: var(--rosso);
  color: var(--bianco);
  border: none;
  padding: 0.5rem 1rem;
  cursor: pointer;
}

.messaggio-esito {
  border-left: 4px solid var(--rosso);
  padding: 0.5rem 0.75rem;
  background: #f7f7f7;
}

th.ordinabile {
  cursor: pointer;
  user-select: none;
}

th.ordinabile:hover {
  color: var(--rosso);
}

.indicatore-ordinamento {
  margin-left: 0.3rem;
  font-size: 0.75rem;
  opacity: 0.9;
}

/* Invito discreto sulle colonne ordinabili ma non ancora ordinate. `tabelle_ordinabili.js`
 * riempie lo span con ▲/▼ al primo clic: da quel momento `:empty` non combacia più e il
 * simbolo sparisce da solo, senza una riga di JavaScript in più. */
.indicatore-ordinamento:empty::before {
  content: "⇅";
  opacity: 0.4;
  font-size: 0.75rem;
}

/* Tabulator porta il proprio CSS dal CDN: questi override allineano la griglia alle tabelle
 * server-rendered. Non toccano né il JS né l'altezza fissa del contenitore, che è quella che
 * tiene attivo il rendering virtuale. */
.tabulator {
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
}

.tabulator .tabulator-header {
  background: var(--sfondo-tenue);
  color: var(--testo-tenue);
  border-bottom: 1px solid var(--bordo);
}

.tabulator .tabulator-header .tabulator-col {
  background: var(--sfondo-tenue);
  color: var(--testo-tenue);
  font-size: 0.82rem;
  font-weight: 620;
  border-right: 1px solid var(--bordo-tenue);
}

.tabulator .tabulator-row {
  border-bottom: 1px solid var(--bordo-tenue);
}

.tabulator .tabulator-row.tabulator-row-even {
  background: var(--bianco);
}

.tabulator .tabulator-row:hover {
  background: var(--sfondo-tenue);
}

.tabulator-col-content,
.tabulator-col-title {
  cursor: pointer;
}

.elenco-template-export {
  list-style: none;
  padding: 0;
}

.elenco-template-export li {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 0.75rem;
}

.pulsante-export {
  display: inline-block;
  background: var(--rosso);
  color: var(--bianco);
  text-decoration: none;
  padding: 0.5rem 1rem;
}

.descrizione-template {
  opacity: 0.75;
  font-size: 0.9rem;
}

.zona-drag-drop {
  border: 2px dashed var(--nero);
  padding: 1.5rem;
  max-width: 30rem;
  text-align: center;
  margin-bottom: 0.75rem;
}

.zona-drag-drop-attiva {
  border-color: var(--rosso);
  background: #fff3cd;
}

.nome-file-selezionato {
  font-weight: bold;
  min-height: 1.2rem;
}

.riepilogo-import {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 0.75rem;
}

.dettaglio-riepilogo {
  font-size: 0.9rem;
  opacity: 0.85;
  margin: 0.25rem 0;
}

/* Spiegazione in coda a una sezione: perché quel comando si comporta così, non cosa fa. */
.nota-sezione {
  font-size: 0.9rem;
  opacity: 0.8;
  margin: 0.75rem 0 0;
  max-width: 70ch;
}

/* Sta dentro una cella di tabella: senza wrap la colonna diventerebbe larghissima. */
.form-starter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.form-starter input[type="file"] {
  font-size: 0.85rem;
  max-width: 18rem;
}

.anomalie-import {
  border-left: 4px solid var(--rosso);
  background: #f7f7f7;
  padding: 0.5rem 0.75rem;
  margin-bottom: 1rem;
}

.messaggio-avviso {
  padding: 0.5rem 0.75rem;
  margin-bottom: 0.75rem;
  background: #fff3cd;
  border-left: 4px solid var(--rosso);
  font-weight: bold;
}

.azioni-anteprima {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.form-conferma-import button {
  background: var(--rosso);
  color: var(--bianco);
  border: none;
  padding: 0.6rem 1.2rem;
  cursor: pointer;
  font-weight: bold;
}

.azioni-storico {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.form-rollback {
  display: inline;
}

.form-rollback button {
  background: none;
  border: 1px solid var(--rosso);
  color: var(--rosso);
  padding: 0.2rem 0.6rem;
  cursor: pointer;
}

.messaggio-caricamento {
  padding: 0.5rem 0.75rem;
  margin-bottom: 0.5rem;
  background: #fff3cd;
  border-left: 4px solid var(--rosso);
  font-weight: bold;
}

/* Wiki (milestone 13) */

.wiki-intro {
  max-width: 42rem;
  opacity: 0.85;
}

.wiki-fili-ariadna {
  font-size: 0.85rem;
  opacity: 0.7;
  margin-top: -0.5rem;
}

.wiki-fili-ariadna a {
  color: var(--nero);
}

.wiki-schede {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.wiki-scheda {
  display: block;
  max-width: 20rem;
  padding: 1rem 1.25rem;
  border: 1px solid var(--nero);
  border-top: 4px solid var(--rosso);
  color: var(--nero);
  text-decoration: none;
}

.wiki-scheda:hover {
  background: #f7f7f7;
}

.wiki-scheda h3 {
  margin-top: 0;
}

.wiki-scheda p {
  font-size: 0.9rem;
  opacity: 0.85;
  margin-bottom: 0;
}

.wiki-scheda-assente {
  border-top-color: #999;
  opacity: 0.75;
}

.wiki-sezione {
  max-width: 60rem;
}

.wiki-nota-piccola {
  font-size: 0.85rem;
  opacity: 0.75;
}

.wiki-regola-generale {
  font-weight: bold;
  border-left: 4px solid var(--rosso);
  padding: 0.5rem 0.75rem;
  background: #f7f7f7;
}

/* Diagramma 1: colore + formula -> classe */

.diagramma-colori {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin: 1.5rem 0;
}

.diagramma-colori-compatto {
  align-items: center;
}

.diagramma-colori-compatto .swatch-colonna {
  flex-direction: row;
  align-items: center;
  gap: 0.6rem;
}

.swatch-colonna {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  max-width: 12rem;
  text-align: center;
}

.swatch {
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid var(--nero);
}

.swatch-nome {
  font-size: 0.8rem;
  font-weight: bold;
}

.swatch-classe {
  font-family: monospace;
  background: var(--nero);
  color: var(--bianco);
  padding: 0.15rem 0.5rem;
}

.swatch-nota {
  font-size: 0.75rem;
  opacity: 0.75;
}

.swatch-eccezione {
  max-width: 20rem;
}

.biforcazione {
  display: flex;
  gap: 1rem;
  margin-top: 0.5rem;
}

.ramo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  flex: 1;
}

.ramo-eccezione .swatch-classe {
  background: var(--rosso);
}

.freccia-giu {
  font-size: 1.1rem;
  color: var(--rosso);
}

/* Diagramma 2: catena di ricalcolo */

.diagramma-catena {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 1.5rem 0;
}

.diagramma-catena-secondaria {
  margin-top: 0.5rem;
}

.nodo-catena {
  border: 1px solid var(--nero);
  padding: 0.5rem 0.75rem;
  font-size: 0.85rem;
  background: #fafafa;
}

.nodo-presentazione {
  border-style: dashed;
}

.freccia-h {
  color: var(--rosso);
  font-size: 1.1rem;
}

.rami-catena {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.ramo-catena {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Registro trasformazioni: trappole */

.griglia-trappole {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 1rem;
  margin: 1rem 0;
}

.trappola-card {
  position: relative;
  border: 1px solid var(--nero);
  border-left: 4px solid var(--rosso);
  padding: 0.75rem 1rem;
}

.trappola-card h4 {
  margin: 0 0 0.4rem 1.5rem;
  font-size: 0.95rem;
}

.trappola-card p {
  margin: 0;
  font-size: 0.85rem;
  opacity: 0.85;
}

.trappola-numero {
  position: absolute;
  top: 0.6rem;
  left: 0.75rem;
  font-weight: bold;
  color: var(--rosso);
}

/* Guardie import / colonne duplicate */

.griglia-guardie {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1rem;
  margin: 1rem 0;
}

.guardia-card {
  border: 1px solid var(--nero);
  padding: 0.75rem 1rem;
}

.guardia-card h4 {
  margin-top: 0;
}

.guardia-card p {
  font-size: 0.85rem;
  opacity: 0.85;
  margin-bottom: 0;
}

/* Risoluzione CDC/sedi: flusso decisionale */

.flusso-decisione {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.4rem;
  margin: 1rem 0;
}

.step-decisione {
  display: flex;
  align-items: center;
  gap: 1rem;
  border: 1px solid var(--nero);
  padding: 0.5rem 0.9rem;
}

.step-decisione-finale {
  border-color: var(--rosso);
}

.step-domanda {
  font-weight: bold;
}

.step-esito {
  font-size: 0.9rem;
}

.step-esito-si {
  color: var(--rosso);
}

/* Badge classe (tabella mappatura campi) */

.badge-classe {
  display: inline-block;
  font-family: monospace;
  font-size: 0.8rem;
  padding: 0.1rem 0.5rem;
  border: 1px solid var(--nero);
}

.badge-classe-chiave {
  background: #ff8000;
}

.badge-classe-congelato {
  background: #ffff00;
}

.badge-classe-calcolato,
.badge-classe-calcolato_su_header_azzurro {
  background: #cccccc;
}

.badge-classe-aggiornabile {
  background: #b8cce4;
}



/* --- Filiera: l'albero capo area → direttore → CdC → persone -------------------------------
 * I livelli si distinguono per rientro e peso, non per colori nuovi: la palette resta quella, e
 * un albero riconoscibile a colpo d'occhio vale più di quattro sfumature da imparare. */
.gruppo-filiera {
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
  margin-bottom: 0.75rem;
  background: var(--sfondo-riquadro, #fff);
}

.gruppo-filiera > summary {
  padding: 0.7rem 1rem;
  cursor: pointer;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: baseline;
}

.gruppo-filiera > summary:hover {
  background: var(--sfondo-tenue, #f6f6f6);
}

.gruppo-annidato {
  margin: 0 0.75rem 0.75rem;
  border-left: 3px solid var(--bordo-tenue);
}

.gruppo-filiera .tabella-dati {
  margin: 0 0.75rem 0.75rem;
  width: calc(100% - 1.5rem);
}

.conteggio-gruppo,
.sottotitolo-gruppo {
  color: var(--testo-tenue, #666);
  font-size: 0.9rem;
}

/* Il quarto livello sta dentro una cella: senza margini propri, o spingerebbe la colonna. */
.dettaglio-persone > summary {
  cursor: pointer;
}

.tabella-annidata {
  margin: 0.5rem 0 0.25rem !important;
  width: 100% !important;
  font-size: 0.92rem;
}

.motivo-riga {
  display: block;
  color: var(--testo-tenue, #666);
  font-size: 0.85rem;
  margin-top: 0.2rem;
}

/* Stati del centro di costo e del device. Ogni pillola porta **anche** l'etichetta scritta: il
 * colore non è mai l'unico portatore dell'informazione. */
.badge-filiera-completo { background: #e6f4ea; color: #1a5c33; }
.badge-filiera-a_un_passo { background: #fff4e5; color: #7a4b00; }
.badge-filiera-fermo { background: #fdecea; color: #8a1c12; }
.badge-filiera-gia_partito { background: #eef1f5; color: #3c4858; }
.badge-filiera-da_chiarire { background: #f3edf7; color: #4a2b62; }
.badge-motivo-cessato { background: #fdecea; color: #8a1c12; }
.badge-motivo-scadenza_prevista { background: #fff4e5; color: #7a4b00; }
.badge-origine-manuale { background: #e8eefc; color: #1f3d7a; }
.badge-origine-filiera { background: #eef1f5; color: #3c4858; }
.badge-origine-file { background: #f4f4f4; color: #555; }

.form-inline-eta,
.form-inline-filiera {
  display: inline-flex;
  gap: 0.4rem;
  align-items: center;
  /* Su schermo stretto questi moduli (campo file + bottone) restavano su una riga sola e
     spingevano la pagina a 612px su un viewport da 420: era l'unico punto che faceva scorrere
     la filiera in orizzontale. */
  flex-wrap: wrap;
  max-width: 100%;
}

.form-inline-eta input[type="file"],
.form-inline-filiera input[type="file"] {
  min-width: 0;
  max-width: 100%;
}

.eta-dati {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  margin-bottom: 1rem;
}

.chip-eta {
  background: var(--sfondo-tenue, #f6f6f6);
  border: 1px solid var(--bordo-tenue);
  border-radius: 999px;
  padding: 0.2rem 0.7rem;
  font-size: 0.88rem;
}

.chip-eta-assente { background: #fff4e5; border-color: #f0d3a8; }

/* Testo di servizio dentro una tabella: presente ma che non compete col dato. */
.nota-secondaria {
  color: var(--testo-tenue);
  font-size: 0.85rem;
}

/* `hidden` da solo non basta: la regola di layout del modulo (display: flex sulle label) vince
   sul display:none del browser, e il menu dell'ambito restava visibile anche per i ruoli che
   non ne hanno uno — dove poi non veniva nemmeno inviato, perché disabilitato. */
.form-nuovo-utente label[hidden] {
  display: none;
}

/* Guida utente (milestone 13). Queste classi erano usate dal template fin dal primo giorno ma
 * non sono mai esistite nel foglio di stile: le schermate sono larghe 1400px e senza una regola
 * che le rimpicciolisca sfondavano la pagina in orizzontale su qualunque schermo. È la stessa
 * classe di difetto trovata in browser al milestone 18, e per lo stesso motivo: un test sul
 * client Flask vede l'HTML, non la larghezza che assume. */

.passo-guida {
  max-width: 60rem;
  margin-bottom: 2.5rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--bordo-tenue);
}

.passo-guida:last-of-type {
  border-bottom: none;
}

.passo-guida h2 {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

/* Il numero del passo: pastiglia scura, così l'occhio ritrova la sequenza scorrendo. */
.numero-passo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 50%;
  background: var(--nero);
  color: var(--bianco);
  font-size: 0.95rem;
}

.schermata {
  margin: 1.25rem 0 0;
}

.schermata img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  /* Il bordo dentro la larghezza: con `content-box` i due pixel del contorno si sommano al 100%
     e l'immagine esce dalla propria figura. Trovato in browser, invisibile nell'HTML. */
  box-sizing: border-box;
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
  box-shadow: var(--ombra-card);
}

.schermata figcaption {
  margin-top: 0.5rem;
  color: var(--testo-tenue);
  font-size: 0.85rem;
}

/* Flusso orizzontale a riquadri (wiki · filiera). Va a capo da sé: sotto i 900px i tre passi
 * si impilano invece di stringersi fino a diventare illeggibili. */
.diagramma-flusso {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 0.75rem;
  margin: 1.25rem 0;
}

.passo-flusso {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  flex: 1 1 12rem;
  padding: 0.85rem 1rem;
  border: 1px solid var(--bordo);
  border-top: 3px solid var(--rosso);
  border-radius: var(--raggio);
  background: var(--sfondo-tenue);
}

.etichetta-passo {
  font-weight: bold;
}

.dettaglio-passo {
  color: var(--testo-tenue);
  font-size: 0.85rem;
}

.freccia-flusso {
  align-self: center;
  color: var(--testo-tenue);
}

/* ==========================================================================
   Controlli — un aspetto solo per tutta la piattaforma
   ==========================================================================
   Fino al 2026-08-16 ogni sezione si dava lo stile dei propri pulsanti (undici selettori
   `.form-qualcosa button`), e quelli che nessuna regola copriva restavano i pulsanti grezzi del
   browser: bordo scavato, grigio, angoli vivi. Sulla pagina della filiera erano tutti così.
   Qui c'è la base: `button` di default prende l'aspetto secondario, e due modificatori coprono
   il resto. Le regole per sezione più sopra hanno specificità maggiore e continuano a vincere
   dove l'aspetto era già voluto — questa è la rete, non una riscrittura. */

button,
.bottone-primario,
.bottone-secondario,
.bottone-tenue {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.45rem 0.95rem;
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
  background: var(--bianco);
  color: var(--nero);
  font: inherit;
  font-weight: 560;
  line-height: 1.25;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
}

button:hover,
.bottone-secondario:hover,
.bottone-tenue:hover {
  background: var(--sfondo-tenue);
  border-color: #c9c9cc;
}

/* Il focus resta visibile e non è il contorno di sistema: chi naviga da tastiera deve vedere
   dov'è, e l'anello rosso è l'accento di marca già usato altrove. */
button:focus-visible,
.bottone-primario:focus-visible,
.bottone-secondario:focus-visible,
.bottone-tenue:focus-visible,
input:focus-visible,
select:focus-visible {
  outline: 2px solid var(--rosso);
  outline-offset: 2px;
}

button:active,
.bottone-primario:active,
.bottone-secondario:active {
  transform: translateY(1px);
}

button:disabled,
button[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
}

/* L'azione principale della pagina. Una per riquadro: se sono due, non è più principale. */
.bottone-primario {
  background: var(--rosso);
  border-color: var(--rosso);
  color: var(--bianco);
  box-shadow: var(--ombra-card);
}

.bottone-primario:hover {
  background: #a80000;
  border-color: #a80000;
}

.bottone-secondario {
  background: var(--bianco);
  border-color: var(--bordo);
}

/* Azione minore dentro una tabella o una riga: presente, ma che non compete col dato. */
.bottone-tenue {
  padding: 0.25rem 0.6rem;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--testo-tenue);
}

.bottone-tenue:hover {
  color: var(--nero);
}

/* I campi: stesso raggio e stesso bordo dei pulsanti, o la riga sembra montata da due kit. */
input[type="text"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="date"],
input[type="file"],
select,
textarea {
  padding: 0.4rem 0.6rem;
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
  background: var(--bianco);
  color: var(--nero);
  font: inherit;
}

input[type="file"] {
  padding: 0.3rem;
  font-size: 0.88rem;
}

/* Il pulsante interno di `input[type=file]`, che altrimenti resta quello di sistema. */
input[type="file"]::file-selector-button {
  margin-right: 0.6rem;
  padding: 0.3rem 0.7rem;
  border: 1px solid var(--bordo);
  border-radius: calc(var(--raggio) - 0.2rem);
  background: var(--sfondo-tenue);
  font: inherit;
  font-size: 0.88rem;
  cursor: pointer;
}

input[type="file"]::file-selector-button:hover {
  background: #ececed;
}

/* Riga di azioni sotto un riquadro: i collegamenti hanno l'aspetto di pulsanti secondari,
   perché fanno la stessa cosa e distinguerli per forma sarebbe un dettaglio senza significato. */
.azioni-sezione {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  margin: 1rem 0 0;
}

.azioni-sezione .collegamento-azione {
  display: inline-flex;
  align-items: center;
  padding: 0.45rem 0.95rem;
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
  background: var(--bianco);
  color: var(--nero);
  font-weight: 560;
  text-decoration: none;
}

.azioni-sezione .collegamento-azione:hover {
  background: var(--sfondo-tenue);
  border-color: #c9c9cc;
}

.etichetta-file {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.88rem;
  color: var(--testo-tenue);
}

/* Esiti di un'operazione. Verde non è in palette: la riuscita si segna con un bordo neutro e
   il testo, l'errore col rosso — che qui è l'unico accento e quindi si nota. */
.esito {
  margin: 1rem 0;
  padding: 0.75rem 1rem;
  border: 1px solid var(--bordo);
  border-left: 4px solid var(--nero);
  border-radius: var(--raggio);
  background: var(--sfondo-tenue);
}

.esito p:first-child { margin-top: 0; }
.esito p:last-child { margin-bottom: 0; }

.esito-errore {
  border-left-color: var(--rosso);
  background: var(--rosso-tenue);
}

.elenco-esito {
  margin: 0.5rem 0 0;
  padding-left: 1.1rem;
  font-size: 0.9rem;
}

/* ==========================================================================
   Wiki — impianto a indice (2026-08-16)
   ==========================================================================
   Le pagine erano una colonna sola di sezioni tutte uguali: arrivate a otto capitoli non si
   trovava più niente e non si capiva quanto mancasse. Impianto alla Wikipedia — introduzione,
   indice sempre a portata, capitoli che si aprono e si chiudono — dentro i vincoli di sempre:
   nessuna libreria, le tendine sono `<details>`. */

.wiki-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2rem;
  align-items: start;
}

@media (min-width: 62rem) {
  .wiki-layout {
    grid-template-columns: 16rem minmax(0, 1fr);
  }
}

/* L'indice. Su schermo largo resta agganciato mentre si scorre: è la differenza fra un indice
   e un elenco all'inizio della pagina. Sotto i 62rem torna in cima, chiuso. */
.wiki-indice-laterale {
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
  background: var(--sfondo-tenue);
  padding: 0.9rem 1rem;
  font-size: 0.9rem;
}

@media (min-width: 62rem) {
  .wiki-indice-laterale {
    position: sticky;
    top: 1.5rem;
    max-height: calc(100vh - 3rem);
    overflow-y: auto;
  }
}

.wiki-indice-laterale h2 {
  margin: 0 0 0.6rem;
  font-size: 0.78rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--testo-tenue);
}

.wiki-indice-laterale ol {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: capitolo;
}

.wiki-indice-laterale li {
  counter-increment: capitolo;
}

.wiki-indice-laterale a {
  display: flex;
  gap: 0.55rem;
  padding: 0.4rem 0.5rem;
  border-radius: calc(var(--raggio) - 0.2rem);
  color: var(--nero);
  text-decoration: none;
  line-height: 1.35;
}

.wiki-indice-laterale a::before {
  content: counter(capitolo);
  flex: 0 0 1.15rem;
  color: var(--testo-tenue);
  font-variant-numeric: tabular-nums;
}

.wiki-indice-laterale a:hover {
  background: var(--bianco);
  box-shadow: inset 0 0 0 1px var(--bordo);
}

/* Il capitolo evidenziato mentre lo si legge (`indice_wiki.js`, IntersectionObserver). */
.wiki-indice-laterale a.attivo {
  background: var(--bianco);
  box-shadow: inset 0 0 0 1px var(--bordo);
  font-weight: 640;
}

.wiki-indice-laterale a.attivo::before {
  color: var(--rosso);
}

/* Apri/chiudi tutti: due comandi, perché con otto capitoli aperti si scorre a lungo e con otto
   chiusi non si cerca dentro il testo col comando del browser. */
.wiki-comandi-indice {
  display: flex;
  gap: 0.4rem;
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--bordo);
}

.wiki-corpo {
  min-width: 0;
  max-width: 52rem;
}

/* Il cappello della pagina: cosa c'è dentro e a chi serve, prima dei capitoli. */
.wiki-cappello {
  margin-bottom: 1.75rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--bordo);
}

.wiki-cappello h1 {
  margin: 0 0 0.5rem;
  font-size: 1.9rem;
  line-height: 1.15;
}

.wiki-cappello .wiki-sommario {
  margin: 0;
  max-width: 44rem;
  font-size: 1.02rem;
  line-height: 1.6;
  color: var(--testo-tenue);
}

/* Un capitolo. `open` di default: la pagina si legge di seguito, e chi cerca chiude quelli che
   non gli servono — il contrario obbligherebbe a otto clic per leggerla tutta. */
.wiki-capitolo {
  margin-bottom: 0.75rem;
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
  background: var(--bianco);
  box-shadow: var(--ombra-card);
  scroll-margin-top: 1.5rem;
}

.wiki-capitolo > summary {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.9rem 1.15rem;
  border-radius: var(--raggio);
  cursor: pointer;
  list-style: none;
  font-size: 1.15rem;
  font-weight: 640;
}

.wiki-capitolo > summary::-webkit-details-marker {
  display: none;
}

.wiki-capitolo > summary:hover {
  background: var(--sfondo-tenue);
}

.wiki-capitolo[open] > summary {
  border-bottom: 1px solid var(--bordo-tenue);
  border-radius: var(--raggio) var(--raggio) 0 0;
}

/* Numero del capitolo: pastiglia rossa, l'unico elemento saturo della riga. */
.wiki-capitolo > summary .numero-capitolo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: var(--rosso);
  color: var(--bianco);
  font-size: 0.9rem;
  font-weight: 700;
}

/* La freccia ruota all'apertura: dice se sotto c'è altro senza aggiungere una parola. */
.wiki-capitolo > summary .freccia-capitolo {
  margin-left: auto;
  color: var(--testo-tenue);
  transition: transform 0.15s ease;
}

.wiki-capitolo[open] > summary .freccia-capitolo {
  transform: rotate(90deg);
}

.wiki-contenuto-capitolo {
  padding: 0.35rem 1.15rem 1.25rem;
}

.wiki-contenuto-capitolo > :first-child {
  margin-top: 0.75rem;
}

.wiki-contenuto-capitolo > :last-child {
  margin-bottom: 0;
}

.wiki-contenuto-capitolo h3 {
  margin: 1.5rem 0 0.5rem;
  font-size: 1rem;
  letter-spacing: 0.01em;
}

/* Dentro l'impianto nuovo i vecchi blocchi non devono più darsi una larghezza propria. */
.wiki-contenuto-capitolo .wiki-sezione {
  max-width: none;
}

/* I tre canali di lettura della filiera, un riquadro ciascuno. Sulla riga unica di prima
   sembravano tre modi equivalenti di fare la stessa cosa: non lo sono, e il terzo sa meno cose
   degli altri due in un modo che va letto prima di usarlo, non dopo. */
.riquadri-sorgenti {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
  gap: 1rem;
  margin-top: 1.5rem;
}

.riquadro-sorgente {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 1.1rem 1.25rem;
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
  background: var(--bianco);
  box-shadow: var(--ombra-card);
}

.riquadro-sorgente-consigliata {
  border-top: 3px solid var(--rosso);
}

.riquadro-sorgente h3 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  font-size: 1.05rem;
}

.riquadro-sorgente p {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.5;
}

/* Il modulo va in fondo al riquadro anche quando i testi hanno lunghezze diverse: i pulsanti
   allineati su una riga sola si leggono come tre alternative, sfalsati come tre pagine. */
.riquadro-sorgente form {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: auto;
  padding-top: 0.4rem;
}

.riquadro-sorgente .etichetta-file {
  flex-direction: column;
  align-items: flex-start;
  gap: 0.25rem;
}

.chip-eta-azione {
  border-color: var(--nero);
  color: var(--nero);
  text-decoration: none;
  font-weight: 560;
}

.chip-eta-azione:hover {
  background: var(--nero);
  color: var(--bianco);
}

/* Una card che è anche un collegamento (il «Da chiarire» delle partenze porta al proprio
   elenco). Eredita l'aspetto di `.kpi-card`: qui serve solo togliere la decorazione del link e
   dire che si può cliccare. */
.kpi-card-collegata {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}

.kpi-card-collegata:hover {
  border-color: var(--nero);
  box-shadow: var(--ombra-card);
}

/* Finestra modale (`<dialog>` nativa — niente libreria per un popup con due campi). Il backdrop
   e la chiusura con Escape li dà il browser; qui c'è solo l'aspetto. */
.finestra-modale {
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
  box-shadow: var(--ombra-menu);
  padding: 1.5rem;
  min-width: min(24rem, 92vw);
  max-width: 92vw;
  background: var(--bianco);
  color: var(--nero);
}

.finestra-modale::backdrop {
  background: rgba(0, 0, 0, 0.35);
}

.finestra-modale h3 {
  margin: 0 0 0.25rem;
}

.finestra-modale label {
  display: block;
  margin-bottom: 0.9rem;
}

.finestra-modale input[type="text"],
.finestra-modale input[type="password"] {
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin-top: 0.25rem;
}