/* =====================================================================
   muffin-admin — il foglio di stile del pannello. Uno solo, servito da
   `app/guscio.py` su /statico/pannello.css.

   FUORI dalle pagine, e non per eleganza: la CSP del pannello e'
   `default-src 'none'; style-src 'self'`, senza `'unsafe-inline'`. Uno stile
   dentro un <style> o dentro un attributo `style=` non verrebbe applicato
   dal browser.

   ---------------------------------------------------------------------
   ATTENZIONE, PRIMA DI SCRIVERE QUI DENTRO

   Questo foglio lo serve `app/guscio.py` SENZA autenticazione — deve, se no
   la pagina d'accesso si vedrebbe nuda. Quindi anche questi commenti li legge
   chiunque, collegato o no, con una richiesta sola: qui non si nominano ne' le
   sezioni, ne' i prodotti, ne' i programmi della macchina. Vale per tutto il
   file e non solo per il fondo, come non li nomina la pagina d'accesso.

   ---------------------------------------------------------------------
   RIFATTO IL 03/08/2026.

   Prima c'erano DUE fogli in uno: due palette nella stessa applicazione, e la
   seconda incompleta — venti classi usate dalle pagine di una parte del
   pannello non avevano nessuna regola qui dentro, quindi grafici senza forma,
   avvisi senza colore e conversazioni senza impaginazione.

   Adesso il vocabolario e' UNO SOLO e vale dappertutto. I colori sono quelli
   che si usavano gia' nella parte piu' frequentata e restano il riferimento;
   la forma — caratteri, raggi, ombre, respiro — e' quella dei siti di casa,
   cosi' il pannello appartiene alla stessa famiglia senza cambiare i colori a
   cui l'occhio e' abituato.

   Densita': questo e' un attrezzo da lavoro. Righe corte, tabelle strette,
   nessuna animazione oltre a quelle del fuoco da tastiera.
   ===================================================================== */

/* ---------------------------------------------------------------------
   0. I caratteri di famiglia

   Gli stessi due file dei siti di casa, serviti da qui (`app/guscio.py`,
   TIPI_STATICI): nessuna chiamata a un servizio esterno, e la CSP apre
   `font-src 'self'` e nient'altro. Il percorso e' relativo a questo foglio,
   quindi risolve su /statico/ da solo.

   `font-display: swap`: se per qualunque motivo il file non arriva, il testo
   si vede lo stesso col carattere di sistema. Un pannello che non si legge
   perche' manca un font e' un pannello rotto.
   --------------------------------------------------------------------- */

@font-face {
  font-family: 'Fraunces';
  src: url('fraunces.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'InterVar';
  src: url('inter.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ---------------------------------------------------------------------
   1. I colori — chiaro e scuro, gli stessi nomi.

   Le variabili sono definite due volte con lo stesso nome: le pagine e le
   classi qui sotto non sanno in quale dei due modi si stia guardando il
   pannello, e non devono saperlo. Un `@media (prefers-color-scheme: dark)`
   sparso dentro venti regole e' venti punti in cui dimenticarsene uno.
   --------------------------------------------------------------------- */

:root {
  /* `color-scheme` fa seguire il tema anche a cio' che disegna il browser e
     non noi: caselle di testo, tendine, barre di scorrimento, checkbox. */
  color-scheme: light dark;

  --sfondo: #f4f5f7;
  --superficie: #ffffff;
  --superficie-2: #f8f9fb;   /* intestazioni di tabella, righe al passaggio */
  --bordo: #e2e5ea;
  --bordo-forte: #cfd4db;
  --testo: #1c2128;
  --testo-tenue: #67707d;

  --primario: #c2410c;
  --primario-scuro: #9a3412;
  --primario-chiaro: #fff1e9;
  /* L'inchiostro che sta SOPRA un pieno di primario, e non «il bianco»: in
     modo scuro il primario e' la meta' CHIARA della coppia e il bianco crolla.
     Un colore che deve girare col tema si scrive qui, non nel punto in cui si
     usa. */
  --su-primario: #ffffff;
  /* Lo stesso problema del rosso pieno: la fascia d'allarme e il pallino col
     numero hanno il fondo `--rosso` e il testo sopra. In chiaro il rosso e'
     scuro e il bianco ci sta; in scuro il rosso e' la meta' CHIARA della
     coppia e il bianco sopra fa 2,3:1. Anche questo gira col tema. */
  --su-rosso: #ffffff;

  --verde:  #15803d;  --verde-chiaro:  #e8f6ed;
  --rosso:  #b91c1c;  --rosso-chiaro:  #fdecec;
  --giallo: #a16207;  --giallo-chiaro: #fdf5e3;
  --blu:    #1d4ed8;  --blu-chiaro:    #eaf0fe;
  /* Le due tinte che il vocabolario di partenza non aveva e che le pagine
     usano: l'arancio delle pastiglie di stato — che NON e' il
     primario, se no ogni stato sembrerebbe un'azione — e il grigio del «non
     lo so». */
  --arancio: #b45309; --arancio-chiaro: #fdf0e0;
  --grigio:  #67707d; --grigio-chiaro:  #eef0f3;

  --ombra: 0 1px 2px rgba(16, 24, 40, .06), 0 4px 12px rgba(16, 24, 40, .05);
  --ombra-alta: 0 2px 4px rgba(16, 24, 40, .05), 0 12px 28px -8px rgba(16, 24, 40, .16);

  --raggio: 10px;
  --raggio-g: 14px;   /* le schede grandi e la scheda d'accesso */
  --raggio-p: 7px;    /* pulsanti e campi */

  --sans: 'InterVar', ui-sans-serif, system-ui, -apple-system, 'Segoe UI',
          Roboto, 'Helvetica Neue', Arial, sans-serif;
  --serif: 'Fraunces', 'Iowan Old Style', 'Palatino Linotype', Palatino,
           Georgia, serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono',
          monospace;

  --larghezza: 1360px;

  /* I nomi di prima, tenuti come sinonimi. Non sono decorazione: se una regola
     scritta altrove — o una che qui dentro mi e' sfuggita — nomina ancora
     `--accento` o `--linea`, prende il colore giusto invece di prendere il
     nulla, che nel CSS non da' nessun errore e si vede solo a schermo. */
  --carta: var(--sfondo);
  --inchiostro: var(--testo);
  --inchiostro-quieto: var(--testo-tenue);
  --linea: var(--bordo);
  --linea-forte: var(--bordo-forte);
  --accento: var(--primario);
  --accento-vivo: var(--primario-scuro);
  --accento-quieto: var(--primario-chiaro);
  --su-accento: var(--su-primario);
  --verde-quieto: var(--verde-chiaro);
  --rosso-quieto: var(--rosso-chiaro);
  --giallo-quieto: var(--giallo-chiaro);
  --blu-quieto: var(--blu-chiaro);
  --arancio-quieto: var(--arancio-chiaro);
  --grigio-quieto: var(--grigio-chiaro);
}

@media (prefers-color-scheme: dark) {
  :root {
    --sfondo: #14181d;
    --superficie: #1b2027;
    --superficie-2: #222831;
    --bordo: #2c333c;
    --bordo-forte: #414a55;
    --testo: #e7eaee;
    --testo-tenue: #9aa4b1;

    /* Il primario si schiarisce: #c2410c su fondo scuro fa 2,6:1 e non si
       legge. Il «piu' scuro» del passaggio del mouse diventa un «piu'
       chiaro», che e' l'unico verso in cui un accento si accende sul nero. */
    --primario: #f97316;
    --primario-scuro: #fb923c;
    --primario-chiaro: #3a1e0d;
    --su-primario: #14181d;
    --su-rosso: #14181d;

    --verde:  #4ade80;  --verde-chiaro:  #13291d;
    --rosso:  #f87171;  --rosso-chiaro:  #2c1718;
    --giallo: #fbbf24;  --giallo-chiaro: #2a2210;
    --blu:    #7dabf8;  --blu-chiaro:    #141f2f;
    --arancio: #fb923c; --arancio-chiaro: #2b1c0e;
    --grigio:  #9aa4b1; --grigio-chiaro:  #232830;

    --ombra: 0 1px 2px rgba(0, 0, 0, .4), 0 4px 12px rgba(0, 0, 0, .3);
    --ombra-alta: 0 2px 4px rgba(0, 0, 0, .4), 0 12px 28px -8px rgba(0, 0, 0, .55);
  }
}

/* ---------------------------------------------------------------------
   2. Le fondamenta
   --------------------------------------------------------------------- */

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font: 15px/1.5 var(--sans);
  color: var(--testo);
  background: var(--sfondo);
  -webkit-font-smoothing: antialiased;
  /* La testata sta in alto, il pie' in fondo anche sulle pagine corte — e ce
     ne sono: una conferma e' quattro righe. */
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

a { color: var(--primario); text-decoration: none; }
a:hover { color: var(--primario-scuro); text-decoration: underline; }

img, svg { max-width: 100%; }

/* Il fuoco da tastiera si deve VEDERE. Questo pannello si usa col Tab: da qui
   si spengono cose a clienti che pagano, e non sapere su quale pulsante si e'
   fermi e' il modo
   in cui si preme quello sbagliato. `:focus-visible` e non `:focus`, cosi' il
   contorno non compare a chi clicca col mouse. */
:focus-visible {
  outline: 2px solid var(--primario);
  outline-offset: 2px;
  border-radius: 3px;
}

/* Chi arriva col Tab non deve attraversare la navigazione a ogni pagina.
   Nascosto finche' non lo si mette a fuoco. */
.salta {
  position: absolute;
  left: .5rem;
  top: -3.5rem;
  z-index: 200;
  padding: .6rem 1.1rem;
  background: var(--testo);
  color: var(--sfondo);
  font-weight: 600;
  text-decoration: none;
  border-radius: 0 0 var(--raggio) var(--raggio);
  transition: top .15s ease;
}
.salta:focus { top: 0; color: var(--sfondo); text-decoration: none; }

/* ---------------------------------------------------------------------
   3. La testata e la navigazione fra le sezioni

   Bianca e appiccicata in alto, come le barre di casa. Prima era una fascia
   scura: staccava bene ma non
   somigliava a niente del resto di casa, ed e' la prima cosa che si vede.
   --------------------------------------------------------------------- */

.testata {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 1.25rem;
  min-height: 58px;
  padding: .4rem 1.25rem;
  flex-wrap: wrap;
  background: var(--superficie);
  border-bottom: 1px solid var(--bordo);
}

.marchio {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font: 600 1.15rem/1 var(--serif);
  font-variation-settings: 'opsz' 40, 'SOFT' 50, 'WONK' 1;
  letter-spacing: -.015em;
  color: var(--testo);
  text-decoration: none;
  white-space: nowrap;
}
.marchio:hover { color: var(--testo); text-decoration: none; }
.marchio b { color: var(--primario); font-weight: 600; }

/* Il muffin del logo, messo da qui e non dentro le pagine: si cambia in un
   punto solo. Nel modello resta il nome scritto, che il lettore di schermo
   legge e che si vede lo stesso se l'immagine non arriva. */
.marchio-segno {
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
  border-radius: 8px;
  object-fit: contain;
  display: block;
}

.sezioni { display: flex; gap: .25rem; flex: 1; flex-wrap: wrap; min-width: 0; }

.sezioni a, .sezioni .spenta {
  padding: .45rem .8rem;
  border-radius: var(--raggio-p);
  font-weight: 500;
  color: var(--testo-tenue);
  text-decoration: none;
  white-space: nowrap;
}
.sezioni a:hover { background: var(--sfondo); color: var(--testo); text-decoration: none; }
.sezioni a[aria-current="page"] {
  background: var(--primario-chiaro);
  color: var(--primario-scuro);
  font-weight: 600;
}
/* La sezione che non si e' caricata resta scritta e barrata: una voce che
   manca non si nota, e «c'e' una sezione in meno» e' la cosa da notare. */
.sezioni .spenta { color: var(--testo-tenue); opacity: .55; text-decoration: line-through; cursor: not-allowed; }

.chi { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.chi .nome { color: var(--testo-tenue); font-size: .9rem; text-decoration: none; }
.chi .nome:hover { color: var(--testo); text-decoration: underline; }

/* La seconda riga, dove la sezione ha delle pagine dentro. */
.sottonavigazione {
  display: flex;
  gap: .25rem;
  flex-wrap: wrap;
  padding: .45rem 1.25rem;
  background: var(--superficie);
  border-bottom: 1px solid var(--bordo);
}
.sottonavigazione a {
  padding: .28rem .65rem;
  border-radius: 999px;
  font-size: .875rem;
  color: var(--testo-tenue);
  text-decoration: none;
  white-space: nowrap;
}
.sottonavigazione a:hover { background: var(--sfondo); color: var(--testo); text-decoration: none; }
.sottonavigazione a[aria-current="page"] {
  background: var(--primario-chiaro);
  color: var(--primario-scuro);
  font-weight: 600;
}

/* ---------------------------------------------------------------------
   4. Il corpo e i titoli
   --------------------------------------------------------------------- */

main {
  flex: 1;                      /* spinge il pie' di pagina in fondo */
  width: 100%;
  max-width: var(--larghezza);
  margin: 0 auto;
  padding: 1.5rem 1.25rem 3.5rem;
}

/* I titoli nel serif di famiglia: e' il segno che lega il pannello ai siti,
   e costa una riga. Il resto della pagina resta nel sans, che alle tabelle
   serve piu' della personalita'. */
h1, h2, h3 {
  font-family: var(--serif);
  font-variation-settings: 'opsz' 40, 'SOFT' 45, 'WONK' 1;
  letter-spacing: -.015em;
  font-weight: 600;
  text-wrap: balance;
}
h1 { font-size: 1.55rem; margin: 0 0 1rem; line-height: 1.2; }
h2 { font-size: 1.15rem; margin: 1.9rem 0 .7rem; line-height: 1.25; }
h3 { font-size: 1rem; margin: 1.3rem 0 .45rem; }
p { margin: .6rem 0; }

/* L'intestazione di pagina: titolo a sinistra, azioni a destra, su una riga
   sola finche' ci sta. */
.titolo-pagina {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.25rem;
  flex-wrap: wrap;
}
.titolo-pagina h1 { margin: 0; }
.titolo-pagina p { margin: .2rem 0 0; color: var(--testo-tenue); font-size: .9rem; }
.azioni { display: flex; gap: .5rem; flex-wrap: wrap; }

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

code {
  background: var(--superficie-2);
  border: 1px solid var(--bordo);
  padding: .05rem .3rem;
  border-radius: 5px;
}

/* Il codice lungo mostrato in chiaro. Grande e spaziato apposta: si legge a voce
   al telefono e si ricopia a mano piu' spesso di quanto sembri. */
.chiave {
  font-family: var(--mono);
  font-size: 1.4rem;
  letter-spacing: .08em;
  padding: .7rem 1.1rem;
  background: var(--superficie);
  border: 2px dashed var(--bordo-forte);
  border-radius: var(--raggio);
  display: inline-block;
  color: var(--testo);
  /* Un doppio clic prende la chiave intera e non una parola sola. */
  user-select: all;
}

/* ---------------------------------------------------------------------
   5. Schede
   --------------------------------------------------------------------- */

.scheda {
  background: var(--superficie);
  border: 1px solid var(--bordo);
  border-radius: var(--raggio-g);
  padding: 1.15rem 1.3rem;
  box-shadow: var(--ombra);
  margin-bottom: 1.15rem;
}
.scheda > h2 {
  font-size: 1.05rem;
  margin: 0 0 .9rem;
}
.scheda > h2 small { font-family: var(--sans); font-weight: 400; color: var(--testo-tenue); margin-left: .5rem; }
.scheda > :last-child { margin-bottom: 0; }

.griglia { display: grid; gap: 1.15rem; }
.griglia.due     { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }
.griglia.tre     { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.griglia.quattro { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }

/* La scheda da cui si cancella per sempre: si deve vedere che non e' come le
   altre, prima ancora di leggere cosa c'e' scritto. */
.zona-pericolo { border-color: var(--rosso-chiaro); border-left: 4px solid var(--rosso); }
.zona-pericolo h2 { color: var(--rosso); }

/* ---------------------------------------------------------------------
   6. I numeri in evidenza

   Due vocabolari per la stessa cosa — `.riquadro-dato` e `.numero` — tenuti
   tutti e due perche' li usano pagine diverse, ma con
   la STESSA faccia: sono la stessa cosa e devono sembrarlo.
   --------------------------------------------------------------------- */

.numeri {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11.5rem, 1fr));
  gap: .9rem;
  margin: 1.15rem 0;
}

.numero, .riquadro-dato {
  background: var(--superficie);
  border: 1px solid var(--bordo);
  border-radius: var(--raggio-g);
  padding: .95rem 1.1rem;
  box-shadow: var(--ombra);
}

/* Il numero prima dell'etichetta, e grande: chi apre questa pagina cerca una
   cifra, non una parola. In tabellare, cosi' le cifre non ballano quando il
   valore passa da 9 a 10. */
.numero b, .riquadro-dato .valore-dato {
  display: block;
  font-size: 1.9rem;
  line-height: 1.15;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  margin-top: .15rem;
}
.numero span { font-size: .875rem; color: var(--testo-tenue); }
.numero .sotto { display: block; margin-top: .3rem; font-size: .8rem; }

.riquadro-dato .etichetta-dato {
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--testo-tenue);
  font-weight: 600;
}
.riquadro-dato .nota-dato { font-size: .82rem; color: var(--testo-tenue); margin-top: .15rem; }

.numero.verde   b { color: var(--verde); }
.numero.giallo  b { color: var(--giallo); }
.numero.rosso   b { color: var(--rosso); }
.numero.blu     b { color: var(--blu); }
.numero.arancio b { color: var(--arancio); }
.numero.grigio  b { color: var(--grigio); }

/* Zero e' un numero come gli altri e non si nasconde: «0 revocate» e «non lo
   so» sono due cose diverse, e in un cruscotto la differenza e' tutto. Si
   scolora soltanto, per non chiamare l'occhio dove non c'e' niente da
   guardare. */
.numero.vuoto b { color: var(--testo-tenue); opacity: .5; }

/* `vuoto` e' la stessa parola per due cose diverse: qui e' «questa casella
   segna zero», piu' avanti (§9) e' «questo elenco non ha trovato niente», che
   invece centra il testo e lo circonda d'aria. Senza queste due righe la
   casella a zero si centrava e cresceva in altezza, e in una fila di quattro
   era l'unica storta. Peso (0,2,0) contro (0,1,0): vince questa. */
.numero.vuoto { text-align: left; padding: .95rem 1.1rem; }

/* ---------------------------------------------------------------------
   7. Pastiglie di stato

   Due nomi — `.pastiglia` e `.etichetta` — una faccia sola. Testo colorato su fondo tinto, non bianco su fondo pieno: in modo
   scuro i colori si schiariscono e il bianco sopra un verde chiaro non si
   legge piu'.
   --------------------------------------------------------------------- */

.pastiglia, .etichetta {
  display: inline-block;
  padding: .1rem .55rem;
  border-radius: 999px;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .01em;
  white-space: nowrap;
  background: var(--grigio-chiaro);
  color: var(--testo-tenue);
}

.pastiglia.verde,   .etichetta.verde   { background: var(--verde-chiaro);   color: var(--verde); }
.pastiglia.rosso,   .etichetta.rossa   { background: var(--rosso-chiaro);   color: var(--rosso); }
.pastiglia.giallo,  .etichetta.gialla  { background: var(--giallo-chiaro);  color: var(--giallo); }
.pastiglia.blu,     .etichetta.blu     { background: var(--blu-chiaro);     color: var(--blu); }
.pastiglia.arancio, .etichetta.arancio { background: var(--arancio-chiaro); color: var(--arancio); }
.pastiglia.grigio,  .etichetta.grigia,
.pastiglia.mai                         { background: var(--grigio-chiaro);  color: var(--grigio); }

/* Il pallino rosso col numero, in testata e nel menu. */
.pastiglia-avviso, .pastiglia-menu {
  background: var(--rosso);
  color: var(--su-rosso);
  border-radius: 999px;
  font-weight: 700;
  text-decoration: none;
}
.pastiglia-avviso {
  min-width: 22px; height: 22px; padding: 0 7px;
  display: grid; place-items: center; font-size: .75rem;
}
.pastiglia-menu { padding: 0 6px; font-size: .7rem; vertical-align: middle; }
.pastiglia-avviso:hover { color: #fff; text-decoration: none; }

.pallino-non-letto {
  display: inline-block; width: 9px; height: 9px;
  border-radius: 50%; background: var(--primario); flex: none;
}
.riga-da-leggere { font-weight: 600; }

/* ---------------------------------------------------------------------
   8. Riquadri e avvisi

   Anche qui due vocabolari per la stessa cosa: `.riquadro` col colore in una
   seconda classe (`.grave`, `.avviso`, `.fatto`, `.neutro`) e `.avviso` con
   la sua (`.errore`, `.successo`, `.attenzione`, `.informazione`). Restano
   tutti e due — li usano pagine diverse — con la stessa faccia.

   ATTENZIONE alla parola `avviso`, che nei due vocabolari e' due cose: nel
   primo e' il COLORE giallo di un `.riquadro`, nel secondo e' l'elemento. Le
   due regole non si pestano perche' la prima e' `.riquadro.avviso`, che pesa
   di piu' e vale solo dentro un riquadro.
   --------------------------------------------------------------------- */

.riquadro, .avviso {
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
  background: var(--superficie);
  padding: .85rem 1.05rem;
  margin: 1rem 0;
  font-size: .94rem;
}
.riquadro > :first-child, .avviso > :first-child { margin-top: 0; }
.riquadro > :last-child,  .avviso > :last-child  { margin-bottom: 0; }

.riquadro.avviso, .avviso.attenzione   { border-left: 4px solid var(--giallo); background: var(--giallo-chiaro); }
.riquadro.grave,  .avviso.errore       { border-left: 4px solid var(--rosso);  background: var(--rosso-chiaro); }
.riquadro.fatto,  .avviso.successo     { border-left: 4px solid var(--verde);  background: var(--verde-chiaro); }
.riquadro.neutro                       { border-left: 4px solid var(--grigio); background: var(--grigio-chiaro); }
.avviso.informazione                   { border-left: 4px solid var(--blu);    background: var(--blu-chiaro); }

/* La fascia rossa di quando una risorsa della macchina e' sopra soglia: sta
   sopra al contenuto, su ogni pagina, finche' non rientra. */
.banner-allarme {
  display: flex; align-items: center; gap: .75rem; flex-wrap: wrap;
  padding: .65rem 1.25rem;
  background: var(--rosso); color: var(--su-rosso); font-size: .92rem;
}
.banner-allarme .bottone-piccolo {
  margin-left: auto;
  background: rgba(127, 127, 127, .2); color: var(--su-rosso);
  border-color: currentColor;
}
.banner-allarme .bottone-piccolo:hover { background: rgba(127, 127, 127, .34); color: var(--su-rosso); }

.banner-gestione {
  background: #422006; color: #fed7aa;
  display: flex; align-items: center; justify-content: center; gap: .9rem;
  padding: .5rem 1rem; font-size: .9rem; flex-wrap: wrap;
}
.banner-gestione strong { color: #fff; }

.quieto, .tenue { color: var(--testo-tenue); font-size: .88rem; }

/* Distacco verticale, al posto degli attributi `style="margin-top:…"` che la
   CSP non lascerebbe passare. */
.staccato { margin-top: 1.25rem; }

/* ---------------------------------------------------------------------
   9. Tabelle — dense: sono elenchi da scorrere, non da ammirare

   `table` e `.tabella` sono la stessa cosa: le pagine del pannello scrivono
   una tabella nuda, altre le mettono una classe. Una faccia sola.
   --------------------------------------------------------------------- */

/* Una tabella larga scorre dentro di se', il corpo della pagina non si muove. */
.scorre, .contenitore-tabella { overflow-x: auto; }

table, .tabella {
  width: 100%;
  border-collapse: collapse;
  font-size: .9rem;
  margin: .5rem 0;
}

th, .tabella th {
  text-align: left;
  padding: .55rem .7rem;
  font-size: .72rem;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--testo-tenue);
  background: var(--superficie-2);
  border-bottom: 1px solid var(--bordo);
  white-space: nowrap;
}

td, .tabella td {
  padding: .6rem .7rem;
  border-bottom: 1px solid var(--bordo);
  vertical-align: middle;
}

tbody tr:hover td, .tabella tbody tr:hover td { background: var(--superficie-2); }
.tabella tbody tr:last-child td { border-bottom: none; }
.numerico { text-align: right; font-variant-numeric: tabular-nums; }

/* La riga del registro che spegne qualcosa a un cliente che paga: in un
   elenco di venti e' l'unica che si va a cercare. */
tr.grave td { background: var(--rosso-chiaro); }

/* Non e' una tabella vuota, e' una frase: una tabella con le intestazioni e
   nessuna riga si legge come «non ho trovato niente». */
.vuoto { text-align: center; padding: 2.2rem 1rem; color: var(--testo-tenue); }
.vuoto strong { display: block; margin-bottom: .3rem; color: var(--testo); }

/* ---------------------------------------------------------------------
   10. Moduli e pulsanti
   --------------------------------------------------------------------- */

button, .bottone, .bottone-piccolo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  font: inherit;
  font-weight: 550;
  padding: .5rem .95rem;
  border: 1px solid var(--bordo-forte);
  border-radius: var(--raggio-p);
  background: var(--superficie);
  color: var(--testo);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  line-height: 1.35;
  transition: background .14s ease, border-color .14s ease, color .14s ease;
}
.bottone-piccolo { padding: .3rem .65rem; font-size: .82rem; }

button:hover, .bottone:hover, .bottone-piccolo:hover {
  background: var(--sfondo);
  border-color: var(--testo-tenue);
  color: var(--testo);
  text-decoration: none;
}

/* Il pulsante che fa la cosa principale della pagina: pieno, uno per
   schermata. `.principale` e `.primario` sono lo stesso pulsante con due
   nomi, uno per vocabolario. */
button.principale, button.primario, .bottone.primario, .bottone-piccolo.primario {
  background: var(--primario);
  border-color: var(--primario);
  color: var(--su-primario);
  font-weight: 600;
}
button.principale:hover, button.primario:hover,
.bottone.primario:hover, .bottone-piccolo.primario:hover {
  background: var(--primario-scuro);
  border-color: var(--primario-scuro);
  color: var(--su-primario);
}
/* L'anello del §2 e' del primario, e attorno a un pulsante pieno di primario
   e' arancio su arancio. Sul comando piu' importante della pagina diventa
   inchiostro. */
button.principale:focus-visible, button.primario:focus-visible,
.bottone.primario:focus-visible { outline-color: var(--testo); }

/* Il pulsante che fa la cosa grave: contornato di rosso, non pieno. Pieno lo
   diventa solo quello che conclude davvero, sulla pagina di conferma. */
button.pericolo, .bottone.pericolo, .bottone-piccolo.pericolo, a.bottone.pericolo {
  background: var(--superficie);
  color: var(--rosso);
  border-color: var(--rosso);
}
button.pericolo:hover, .bottone.pericolo:hover,
.bottone-piccolo.pericolo:hover, a.bottone.pericolo:hover {
  background: var(--rosso-chiaro);
  border-color: var(--rosso);
  color: var(--rosso);
}

.bottone.fantasma, .bottone-piccolo.fantasma, button.fantasma {
  border-color: transparent; background: transparent; color: var(--testo-tenue);
}
.bottone.fantasma:hover, .bottone-piccolo.fantasma:hover, button.fantasma:hover {
  background: var(--sfondo); color: var(--testo); border-color: transparent;
}

.bottone.largo, button.largo { width: 100%; padding: .7rem; font-size: 1rem; }
.bottone.grande, button.grande { font-size: 1.05rem; padding: .85rem 1.6rem; margin-top: 1.1rem; }

form.azione { display: inline; }

/* I moduli che si modificano DENTRO la scheda: una nota, un nome. `flex-wrap` perche' in una tabella stretta il pulsante
   deve andare a capo invece di uscire dalla cella. */
form.in-linea {
  display: flex;
  align-items: flex-start;
  gap: .4rem;
  flex-wrap: wrap;
  margin: 0;
}
form.in-linea input[type="text"], form.in-linea textarea {
  flex: 1 1 12rem;
  min-width: 0;
}
form.in-linea textarea { flex-basis: 100%; }
/* Nell'altro vocabolario `.in-linea` non e' un modulo in colonna: e' un
   <form> che sta dentro una riga di testo. Vale solo dove NON c'e' anche `form`. */
span.in-linea, div.in-linea { display: inline; }

label { display: block; margin: .7rem 0 .25rem; font-weight: 600; font-size: .9rem; }

.campo { margin-bottom: .9rem; }
.campo > label { display: block; font-size: .85rem; font-weight: 600; margin: 0 0 .3rem; }
.campo .aiuto { font-size: .78rem; color: var(--testo-tenue); margin-top: .25rem; }
.campo-riga { display: flex; align-items: center; gap: .55rem; margin-bottom: .7rem; }
.campo-riga label { font-size: .9rem; margin: 0; font-weight: 500; }
.griglia-campi { display: grid; gap: 0 1rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

input[type=text], input[type=password], input[type=number], input[type=date],
input[type=time], input[type=tel], input[type=email], select, textarea {
  width: 100%;
  padding: .5rem .7rem;
  font: inherit;
  border: 1px solid var(--bordo-forte);
  border-radius: var(--raggio-p);
  background: var(--superficie);
  color: var(--testo);
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--primario);
  box-shadow: 0 0 0 3px var(--primario-chiaro);
}
textarea { min-height: 74px; resize: vertical; }
input[type=checkbox] { width: 16px; height: 16px; accent-color: var(--primario); }

fieldset {
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
  padding: 1rem 1.1rem;
  margin: 0 0 1.15rem;
}
legend { font-weight: 650; font-size: .9rem; padding: 0 .4rem; }

ul.conseguenze { margin: .5rem 0; padding-left: 1.2rem; }
ul.conseguenze li { margin-bottom: .35rem; }
ol.passi { margin: .5rem 0; padding-left: 1.4rem; }
ol.passi li { margin-bottom: .5rem; }

/* ---------------------------------------------------------------------
   11. Il pie' di pagina
   --------------------------------------------------------------------- */

.pie {
  border-top: 1px solid var(--bordo);
  background: var(--superficie);
  color: var(--testo-tenue);
  font-size: .82rem;
  padding: .8rem 1.25rem;
}
.pie .dentro {
  max-width: var(--larghezza);
  margin: 0 auto;
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  flex-wrap: wrap;
}
.pie code { background: transparent; border: none; padding: 0; }
/* La seconda meta' del nome, come in testata e sulla pagina d'accesso: e' lo
   stesso marchio in tre posti e deve essere lo stesso segno in tutti e tre. */
.pie b { color: var(--primario); font-weight: 600; }

/* ---------------------------------------------------------------------
   12. Minuterie condivise
   --------------------------------------------------------------------- */

.piccolo { font-size: .82rem; }
.grassetto { font-weight: 650; }
.destra { text-align: right; }
.centro { text-align: center; }
.separatore { height: 1px; background: var(--bordo); margin: 1rem 0; border: none; }
.pila { display: flex; flex-direction: column; gap: .5rem; }
.riga { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }
.spinta { margin-left: auto; }
.cresce { flex: 1; }
.in-fondo { align-items: flex-end; }

.barra-progresso { height: 7px; background: var(--sfondo); border-radius: 999px; overflow: hidden; }
.barra-progresso > div { height: 100%; background: var(--primario); border-radius: 999px; }
.barra-progresso > div.oltre-soglia { background: var(--rosso); }

/* Le domande frequenti, aperte e chiuse. */
.faq-voce { border: 1px solid var(--bordo); border-radius: var(--raggio); overflow: hidden; margin-bottom: .6rem; }
.faq-voce > summary { padding: .75rem .9rem; cursor: pointer; font-weight: 600; list-style: none; }
.faq-voce > summary::-webkit-details-marker { display: none; }
.faq-voce > summary::before { content: "+ "; color: var(--primario); font-weight: 700; }
.faq-voce[open] > summary::before { content: "− "; }
.faq-voce[open] > summary { background: var(--sfondo); }
.faq-risposta { padding: .75rem .9rem; border-top: 1px solid var(--bordo); color: var(--testo-tenue); }

/* La conversazione di un ticket: i messaggi del cliente a sinistra, i nostri
   rientrati e col bordo colorato, come in una chat. */
.conversazione { display: flex; flex-direction: column; gap: .9rem; }
.intervento { border: 1px solid var(--bordo); border-radius: 12px; padding: .75rem .9rem; max-width: 82%; }
.intervento.da-cliente { align-self: flex-start; background: var(--sfondo); }
.intervento.da-muffin { align-self: flex-end; background: var(--primario-chiaro); border-color: var(--primario); }
.intervento-testa { display: flex; align-items: baseline; gap: .6rem; margin-bottom: .4rem; flex-wrap: wrap; }
.intervento-testo { white-space: pre-wrap; }

.elenco-ticket { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .75rem; }
.elenco-ticket li { border-bottom: 1px solid var(--bordo); padding-bottom: .6rem; }
.elenco-ticket li:last-child { border-bottom: 0; padding-bottom: 0; }

.elenco-eliminazione { margin: .4rem 0 0; }

/* ---------------------------------------------------------------------
   13. Il grafico dello stato del server

   Un SVG disegnato dal server, senza JavaScript: si allarga quanto la scheda
   e si schiaccia in altezza, quindi niente tratti scalati.
   --------------------------------------------------------------------- */

.grafico-server {
  width: 100%; height: 120px; margin-top: .9rem; display: block;
  background: var(--sfondo); border-radius: var(--raggio);
}
.grafico-server .area-grafico { fill: var(--primario-chiaro); stroke: none; }
.grafico-server .linea-grafico {
  fill: none; stroke: var(--primario); stroke-width: 2;
  vector-effect: non-scaling-stroke; stroke-linejoin: round;
}
.grafico-server .soglia-grafico {
  stroke: var(--rosso); stroke-width: 1.5; stroke-dasharray: 6 5;
  vector-effect: non-scaling-stroke;
}
.grafico-server .griglia-grafico {
  stroke: var(--bordo); stroke-width: 1; vector-effect: non-scaling-stroke;
}

/* ---------------------------------------------------------------------
   14. L'istogramma degli incassi

   Le altezze a passi del 5% sono classi e non attributi `style`: la CSP non
   applicherebbe uno stile in linea, e le barre resterebbero alte zero senza
   dare nessun errore. Su una pista di centoventi pixel il 5% sono sei pixel:
   a occhio non si distingue da un decimo di punto.
   --------------------------------------------------------------------- */

.istogramma { display: flex; gap: .5rem; align-items: flex-end; overflow-x: auto; padding-top: .4rem; }
.colonna-istogramma { flex: 1 1 0; min-width: 52px; display: flex; flex-direction: column; align-items: center; }
.cima-istogramma { font-size: .7rem; color: var(--testo-tenue); height: 16px; white-space: nowrap; }
.pista-istogramma {
  width: 100%; height: 180px; display: flex; align-items: flex-end;
  background: var(--sfondo); border-radius: var(--raggio-p); overflow: hidden;
}
.barra-istogramma { width: 100%; min-height: 2px; background: var(--primario); border-radius: var(--raggio-p) var(--raggio-p) 0 0; }
.etichetta-istogramma { font-size: .7rem; color: var(--testo-tenue); margin-top: .4rem; text-align: center; white-space: nowrap; }

.barra-istogramma.alta-0 { height: 0%; }
.barra-istogramma.alta-5 { height: 5%; }
.barra-istogramma.alta-10 { height: 10%; }
.barra-istogramma.alta-15 { height: 15%; }
.barra-istogramma.alta-20 { height: 20%; }
.barra-istogramma.alta-25 { height: 25%; }
.barra-istogramma.alta-30 { height: 30%; }
.barra-istogramma.alta-35 { height: 35%; }
.barra-istogramma.alta-40 { height: 40%; }
.barra-istogramma.alta-45 { height: 45%; }
.barra-istogramma.alta-50 { height: 50%; }
.barra-istogramma.alta-55 { height: 55%; }
.barra-istogramma.alta-60 { height: 60%; }
.barra-istogramma.alta-65 { height: 65%; }
.barra-istogramma.alta-70 { height: 70%; }
.barra-istogramma.alta-75 { height: 75%; }
.barra-istogramma.alta-80 { height: 80%; }
.barra-istogramma.alta-85 { height: 85%; }
.barra-istogramma.alta-90 { height: 90%; }
.barra-istogramma.alta-95 { height: 95%; }
.barra-istogramma.alta-100 { height: 100%; }

.barra-progresso > div.larga-0 { width: 0%; }
.barra-progresso > div.larga-5 { width: 5%; }
.barra-progresso > div.larga-10 { width: 10%; }
.barra-progresso > div.larga-15 { width: 15%; }
.barra-progresso > div.larga-20 { width: 20%; }
.barra-progresso > div.larga-25 { width: 25%; }
.barra-progresso > div.larga-30 { width: 30%; }
.barra-progresso > div.larga-35 { width: 35%; }
.barra-progresso > div.larga-40 { width: 40%; }
.barra-progresso > div.larga-45 { width: 45%; }
.barra-progresso > div.larga-50 { width: 50%; }
.barra-progresso > div.larga-55 { width: 55%; }
.barra-progresso > div.larga-60 { width: 60%; }
.barra-progresso > div.larga-65 { width: 65%; }
.barra-progresso > div.larga-70 { width: 70%; }
.barra-progresso > div.larga-75 { width: 75%; }
.barra-progresso > div.larga-80 { width: 80%; }
.barra-progresso > div.larga-85 { width: 85%; }
.barra-progresso > div.larga-90 { width: 90%; }
.barra-progresso > div.larga-95 { width: 95%; }
.barra-progresso > div.larga-100 { width: 100%; }

/* ---------------------------------------------------------------------
   15. I margini che le pagine traslocate avevano scritti in linea

   Qui non si possono lasciare: `style-src 'self'` senza `'unsafe-inline'`
   non li applicherebbe, e il difetto sarebbe una pagina compressa senza
   nessun errore. Nomi che dicono la misura, non il posto.
   --------------------------------------------------------------------- */

p.senza-margine { margin: 0; }
.senza-margine-sotto { margin-bottom: 0; }
p.nota-dato.staccata { margin-top: .65rem; }
h3.staccato-sopra { margin-top: 1.15rem; }
.su-8 { margin-top: .5rem; }
.su-10-e-basta { margin: .65rem 0 0; }
.su-12 { margin-top: .75rem; }
.su-14 { margin-top: .9rem; }
.su-26 { margin-top: 1.6rem; }
.su-meno-8 { margin-top: -.5rem; }
.attorno-8-2 { margin: .5rem 0 .15rem; }
.senza-ombra { box-shadow: none; }
.stretto-120 { max-width: 120px; }
.stretto-160 { max-width: 160px; }

/* ---------------------------------------------------------------------
   16. La pagina di accesso — l'unica senza testata e senza pie' di pagina

   Il guscio la cornice non la disegna a chi non e' ancora entrato, e il
   perche' sta in base.html. Qui conta la conseguenza: tutte le altre pagine
   le tiene su la cornice, questa no.

   Un avvertimento per chi scrivera' qui dentro: questo foglio lo serve
   `app/guscio.py` SENZA autenticazione — deve, se no la pagina d'accesso si
   vedrebbe nuda — quindi i commenti li legge chiunque, collegato o no. Qui
   sotto non si nominano ne' i prodotti ne' i programmi della macchina,
   esattamente come non li nomina la pagina.
   --------------------------------------------------------------------- */

/* `100dvh` e non `100vh`: su iPhone `vh` e' la finestra GRANDE, quella senza
   la barra dell'indirizzo, e la scheda «centrata» si siede sotto il bordo di
   sotto — proprio sul dispositivo da cui questa pagina si apre davvero. */
.pagina-accesso { min-height: 100dvh; }

.pagina-accesso main {
  display: flex;
  max-width: none;
  margin: 0;
  padding: 2rem 1rem 5rem;
}

/* La scheda. 23rem e non di piu': tre campi corti larghi mezzo schermo si
   leggono come un modulo riempito a meta'. Sotto c'e' piu' aria che sopra
   apposta — il centro geometrico l'occhio lo legge sempre un dito troppo
   basso. */
.scheda-accesso {
  width: 100%;
  max-width: 23rem;
  margin: auto;
  padding: 2rem 1.75rem;
  background: var(--superficie);
  border: 1px solid var(--bordo);
  border-radius: var(--raggio-g);
  box-shadow: var(--ombra-alta);
}

.marchio-accesso { text-align: center; margin: 0 0 1.6rem; }
.marchio-accesso img { width: 64px; height: 64px; object-fit: contain; margin: 0 auto .7rem; display: block; }
.marchio-accesso .nome {
  display: block;
  font: 600 1.6rem/1.15 var(--serif);
  font-variation-settings: 'opsz' 40, 'SOFT' 50, 'WONK' 1;
  letter-spacing: -.02em;
  color: var(--testo);
}
.marchio-accesso .nome b { font-weight: 600; color: var(--primario); }

/* Il messaggio d'errore sta dentro la scheda, fra il marchio e i campi: e' li'
   che l'occhio torna dopo aver premuto Entra, ed e' l'unica risposta che il
   pannello da'. */
.pagina-accesso .riquadro.grave {
  margin: 0 0 1.5rem;
  padding: .6rem .8rem;
  font-size: .9rem;
}

/* Il ritmo, scritto e non lasciato ai margini di sistema: .35rem fra
   un'etichetta e il suo campo, 1.1rem fra un campo e l'etichetta dopo,
   1.7rem fra i blocchi. */
.pagina-accesso form { margin: 0; }
.pagina-accesso form label { margin: 1.1rem 0 .35rem; }
.pagina-accesso form label:first-of-type { margin-top: 0; }

/* `1rem` al posto dei 15px del corpo per una ragione concreta: sotto i 16px
   Safari su iPhone ingrandisce la pagina da solo appena si tocca un campo, e
   da li' non torna piu' indietro. Questa e' l'unica pagina del pannello che
   dal telefono si apre davvero, perche' il codice sta nell'app di quello
   stesso telefono. */
.pagina-accesso input[type=text],
.pagina-accesso input[type=password] {
  font-size: 1rem;
  padding: .6rem .7rem;
}

/* Il campo del codice e' corto perche' il codice e' corto. Uno lungo come
   quello del nome promette una risposta lunga che non esiste, e la larghezza
   e' l'unica istruzione che si puo' dare senza aggiungere una riga di testo a
   una pagina che a chi e' rimasto fuori non deve dire niente. */
.pagina-accesso input[type=text].cifre {
  width: 9.5rem;
  font-family: var(--mono);
  letter-spacing: .18em;
}

/* La spunta. Il `label` avvolge la casella, quindi si preme anche il testo: su
   un telefono una casella da 13 pixel e' un bersaglio che si manca. */
.pagina-accesso label.spunta {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin: 1.3rem 0 0;
  font-weight: 400;
  font-size: .9rem;
  color: var(--testo-tenue);
  cursor: pointer;
}
.pagina-accesso label.spunta input[type=checkbox] { width: 16px; margin: 0; cursor: pointer; }

.pagina-accesso button.principale {
  display: flex;
  width: 100%;
  margin-top: 1.7rem;
  padding: .7rem 1rem;
  font-size: 1rem;
}

@media (max-width: 26rem) {
  .pagina-accesso main { padding: 1.25rem .75rem 2.5rem; }
  .scheda-accesso { padding: 1.5rem 1.25rem; }
}

/* ---------------------------------------------------------------------
   17. Schermi stretti

   Non e' un pannello da telefono e non si finge che lo sia. Serve che una
   mezza finestra su un portatile resti usabile — e che la pagina d'accesso,
   che dal telefono si apre davvero, stia dove deve.
   --------------------------------------------------------------------- */

@media (max-width: 56rem) {
  .testata { padding: .5rem .9rem; gap: .6rem; }
  .sezioni { flex: 1 1 100%; order: 3; }
  .marchio { flex: 1 1 auto; }
  .sottonavigazione { padding: .45rem .9rem; }
  main { padding: 1.1rem .9rem 3rem; }
  .chiave { font-size: 1.15rem; }
  .intervento { max-width: 100%; }
}

/* Chi ha chiesto al sistema operativo meno movimento, non lo riceve. */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

/* Stampa: capita di stampare una conferma o una scheda cliente. Via la
   navigazione, che su carta e' solo inchiostro sprecato. */
@media print {
  .testata, .sottonavigazione, .pie, .salta, .azioni,
  button, .bottone, .bottone-piccolo { display: none !important; }
  body { background: #fff; color: #000; }
  main { max-width: none; margin: 0; padding: 0; }
  .scheda, .numero, .riquadro-dato { box-shadow: none; border-color: #ccc; }
}