/* AEOS - un foglio di stile, nessuna dipendenza.
 *
 * Perche' non un framework: questa roba deve funzionare senza internet, su un
 * PC in valle, e deve essere ancora modificabile fra cinque anni da chi non
 * c'era quando l'abbiamo scritta. Niente npm, niente build, niente CDN: un
 * file CSS, un file JS, pagine HTML vere. Il browser e' il runtime.
 *
 * ---------------------------------------------------------------------------
 * LA DIREZIONE: IL REGISTRO
 *
 * Questo non e' un sito: e' il libro su cui un'azienda scrive quello che fa,
 * tutto il giorno, tutti i giorni. Quindi non si copia l'estetica dei
 * gestionali in abbonamento - schede che galleggiano, ombre ovunque, angoli
 * tondi, spazio sprecato - ma quella di un registro tenuto bene:
 *
 *   - FILI SOTTILI al posto delle scatole. Una riga di un pixel separa meglio
 *     di un bordo con l'ombra, e non toglie spazio ai dati.
 *   - NUMERI TABELLARI, sempre, allineati a destra. In colonna, le cifre
 *     devono stare una sopra l'altra: e' cosi' che l'occhio trova l'errore.
 *   - UN SERIF PER I TITOLI, un sans per l'interfaccia, un mono per i numeri.
 *     Tre caratteri che ci sono su qualunque macchina - perche' un font che
 *     si scarica da internet, in valle, e' un font che non arriva - ma scelti
 *     e accostati, non presi di default.
 *   - UN COLORE SOLO che conta: il verde della laguna. Tutto il resto e'
 *     carta e inchiostro. Il colore si usa per dire qualcosa, non per
 *     decorare: se e' verde vuol dire qualcosa, se e' rosso anche.
 *   - DENSITA'. Chi compila venti DDT al giorno non vuole scorrere: vuole
 *     vedere. Lo spazio si da' dove serve a capire, non per far respirare.
 *
 * ---------------------------------------------------------------------------
 * LARGHEZZA (corretto il 9/11/2026)
 *
 * La prima versione aveva `main { max-width: 1160px }` dentro una griglia che
 * occupava tutto lo schermo: su un monitor da 1920 restava un quarto di
 * schermo vuoto a destra, e intanto le tabelle venivano strizzate. Era un
 * errore, non una scelta. Adesso il guscio prende tutta la larghezza, il
 * contenuto si allarga fino a `--largo` e le colonne sono fluide.
 */

/* ===================================================================== TOKEN */
:root {
  color-scheme: light;

  /* --- carta e inchiostro ---------------------------------------------- */
  /* Il nero del sito e' #151515, il testo secondario #444444, i fili #eaeaea.
     Il fondo pagina e' un grigio appena caldo invece del bianco pieno: cosi'
     le schede bianche si staccano e l'occhio trova i bordi dei dati. */
  --carta:        #F4F3F0;
  --superficie:   #FFFFFF;
  --superficie-2: #EFEDEA;
  --superficie-3: #E4E1DD;
  --inchiostro:   #151515;
  --inchiostro-2: #444444;
  --tenue:        #7C7670;
  --filo:         #E4E1DD;
  --filo-forte:   #C9C4BE;

  /* --- i colori del marchio ---------------------------------------------
     Il bordeaux e' il colore di Valle del Lovo: fondo del footer del sito
     (#8e153a), colore dei pulsanti e dei prezzi, fondo del logo. Qui fa la
     barra in alto e tutto cio' su cui si clicca.
     I nomi `--verde*` restano perche' sono dentro undici pagine: cambiare il
     nome di una variabile per bellezza non vale il rischio di romperne una. */
  --vino:         #8E153A;
  --vino-vivo:    #BA1C4C;
  --vino-scuro:   #6B0F2B;
  --vino-chiaro:  #F7E9ED;
  --verde:        var(--vino);
  --verde-chiaro: var(--vino-chiaro);
  --verde-scuro:  var(--vino-scuro);

  /* Gli stati non devono somigliare al marchio, o si confonde «attenzione» con
     «questo si puo' premere». Bosco e ottone stanno lontani dal bordeaux; per
     l'errore un rosso-arancio, che accanto al vino si distingue perche' tira
     al caldo invece che al viola. */
  --bosco:        #1F6B4A;
  --bosco-chiaro: #E3F0E9;
  --ottone:       #8A6A1C;
  --ottone-chiaro:#F8F0DA;
  --terra:        #B23A1E;
  --terra-chiaro: #FBE9E2;

  /* --- i colori degli ambiti dell'Excel ---------------------------------
     Le linguette dei 21 fogli sono colorate per ambito, e quella e' una mappa
     che l'azienda si e' fatta da sola: nero la plancia, blu i documenti, ocra
     la merce, rosso il denaro, viola la ristorazione, verde le anagrafiche.
     La teniamo, perche' chi apre la mappa della copertura riconosce i colori
     che ha sotto le dita tutti i giorni. Il settimo, acciaio, e' per quello
     che l'Excel non ha mai avuto: eventi, permessi, backup, rete.
     Qui non si decora: il colore dice «fatto», il grigio dice «ancora no». */
  --ambito-plancia:      #3A3330;
  --ambito-documenti:    #1D4E89;
  --ambito-merce:        #8A6A1C;
  --ambito-denaro:       #B23A1E;
  --ambito-ristorazione: #6A3A7A;
  --ambito-ospitalita:   #0F7A85;
  --ambito-allevamento:  #3B3A8C;
  --ambito-anagrafiche:  #1F6B4A;
  --ambito-piattaforma:  #3F5B66;
  --ambito-infrastruttura: #4E4A52;
  /* il testo sopra un ambito a colore pieno */
  --su-colore:           #FFFFFF;

  --banda:        #8E153A;
  --banda-fg:     #FFFFFF;
  --banda-tenue:  #E6C2CE;

  /* --- caratteri ---------------------------------------------------------
     UN CARATTERE SOLO per tutta l'interfaccia, quello di sistema, titoli
     compresi. Provato il contrario e scartato: un serif lapidario sui titoli
     (prima Georgia, poi il Cinzel del marchio) fa sembrare la pagina un
     invito a nozze, e in un gestionale che si usa otto ore al giorno e'
     tempo perso a ogni sguardo. Il carattere di sistema e' disegnato per gli
     schermi, e' gia' sulla macchina e l'occhio lo legge senza accorgersene.
     IL MARCHIO STA NEL COLORE E NEL LOGO, NON NEI CARATTERI: il bordeaux e la
     scritta Valle del Lovo nella barra in alto dicono di chi e' il sistema;
     dentro, comanda la leggibilita'.
     I numeri vanno in mono tabellare, ma solo nelle tabelle e nei campi
     numerici - non nel testo normale, dove le cifre tabellari stonano. */
  --sans: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system,
          BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --titoli: var(--sans);
  --serif: var(--sans);          /* nomi vecchi, per non rompere le pagine */
  --mono: "Cascadia Mono", Consolas, "SF Mono", "Roboto Mono", ui-monospace, monospace;
  /* nome vecchio, tenuto per non rompere niente */
  --serif: var(--titoli);

  /* --- misure ------------------------------------------------------------ */
  --s1: .25rem; --s2: .5rem; --s3: .75rem; --s4: 1rem;
  --s5: 1.5rem; --s6: 2rem; --s7: 3rem;
  --r: 3px;                 /* appena smussato: e' carta, non una pastiglia */
  --r-grande: 5px;
  --nav: 216px;
  --banda-h: 64px;
  --largo: 1680px;          /* oltre, le righe diventano illeggibili */
  --testo: 15px;

  --ombra: 0 1px 2px rgba(21, 32, 31, .05);
  --ombra-alta: 0 4px 16px -4px rgba(21, 32, 31, .18), 0 1px 3px rgba(21, 32, 31, .08);
  --velo: 120ms cubic-bezier(.4, 0, .2, 1);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-tema="chiaro"]) {
    color-scheme: dark;
    --carta:        #141110;
    --superficie:   #1D1918;
    --superficie-2: #262120;
    --superficie-3: #312B29;
    --inchiostro:   #EFEBE8;
    --inchiostro-2: #BDB6B1;
    --tenue:        #8D8580;
    --filo:         #322C2A;
    --filo-forte:   #46403D;
    --vino:         #E4849E;
    --vino-vivo:    #F0A0B5;
    --vino-scuro:   #F5C6D1;
    --vino-chiaro:  #3A1522;
    --verde:        var(--vino);
    --verde-chiaro: var(--vino-chiaro);
    --verde-scuro:  var(--vino-scuro);
    --bosco:        #6DC79B;
    --bosco-chiaro: #102C20;
    --ottone:       #D9BE70;
    --ottone-chiaro:#2B2414;
    --terra:        #EC9272;
    --terra-chiaro: #3A1C12;
    --ambito-plancia:      #C9C0BA;
    --ambito-documenti:    #7FB2E8;
    --ambito-merce:        #D9BE70;
    --ambito-denaro:       #EC9272;
    --ambito-ristorazione: #C79BD6;
    --ambito-ospitalita:   #5FC7D1;
    --ambito-allevamento:  #A3A2E8;
    --ambito-anagrafiche:  #6DC79B;
    --ambito-piattaforma:  #93B6C3;
    --ambito-infrastruttura: #BBB0C6;
    --su-colore:           #141110;
    --banda:        #6B0F2B;
    --banda-fg:     #F8EDF1;
    --banda-tenue:  #D9A9B7;
    --ombra: 0 1px 2px rgba(0, 0, 0, .4);
    --ombra-alta: 0 6px 22px -6px rgba(0, 0, 0, .7), 0 1px 3px rgba(0, 0, 0, .5);
  }
}
:root[data-tema="scuro"] {
  color-scheme: dark;
  --carta:        #141110;
  --superficie:   #1D1918;
  --superficie-2: #262120;
  --superficie-3: #312B29;
  --inchiostro:   #EFEBE8;
  --inchiostro-2: #BDB6B1;
  --tenue:        #8D8580;
  --filo:         #322C2A;
  --filo-forte:   #46403D;
  --vino:         #E4849E;
  --vino-vivo:    #F0A0B5;
  --vino-scuro:   #F5C6D1;
  --vino-chiaro:  #3A1522;
  --verde:        var(--vino);
  --verde-chiaro: var(--vino-chiaro);
  --verde-scuro:  var(--vino-scuro);
  --bosco:        #6DC79B;
  --bosco-chiaro: #102C20;
  --ottone:       #D9BE70;
  --ottone-chiaro:#2B2414;
  --terra:        #EC9272;
  --terra-chiaro: #3A1C12;
  --ambito-plancia:      #C9C0BA;
  --ambito-documenti:    #7FB2E8;
  --ambito-merce:        #D9BE70;
  --ambito-denaro:       #EC9272;
  --ambito-ristorazione: #C79BD6;
  --ambito-ospitalita:   #5FC7D1;
  --ambito-allevamento:  #A3A2E8;
  --ambito-anagrafiche:  #6DC79B;
  --ambito-piattaforma:  #93B6C3;
  --ambito-infrastruttura: #BBB0C6;
  --su-colore:           #141110;
  --banda:        #6B0F2B;
  --banda-fg:     #F8EDF1;
  --banda-tenue:  #D9A9B7;
  --ombra: 0 1px 2px rgba(0, 0, 0, .4);
  --ombra-alta: 0 6px 22px -6px rgba(0, 0, 0, .7), 0 1px 3px rgba(0, 0, 0, .5);
}

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

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

body {
  margin: 0;
  background: var(--carta);
  color: var(--inchiostro);
  font: var(--testo)/1.5 var(--sans);
  /* una grana appena percettibile: la carta non e' mai perfettamente liscia */
  background-image: radial-gradient(circle at 1px 1px,
                    rgba(21, 32, 31, .024) 1px, transparent 0);
  background-size: 22px 22px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="chiaro"]) body { background-image: none; }
}
:root[data-tema="scuro"] body { background-image: none; }

h1, h2, h3 { margin: 0; font-weight: 600; }
a { color: var(--verde); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { text-decoration-thickness: 2px; }
code, .mono { font-family: var(--mono); font-size: .92em; }

::selection { background: var(--verde-chiaro); color: var(--verde-scuro); }

:focus-visible {
  outline: 2px solid var(--verde);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ============================================== 1. guscio e navigazione */
.banda {
  position: sticky; top: 0; z-index: 30;
  height: var(--banda-h);
  background: var(--banda); color: var(--banda-fg);
  display: flex; align-items: center; gap: var(--s3);
  padding: 0 var(--s4);
  border-bottom: 1px solid rgba(0, 0, 0, .18);
  box-shadow: 0 1px 0 rgba(0, 0, 0, .06);
}
.banda .logo {
  height: 42px; width: auto; display: block; flex: none;
  margin: 0 var(--s1) 0 calc(var(--s2) * -1);
  /* il logo e' bianco su trasparente: sul bordeaux sta come sul sito */
}
.banda .marchio {
  font-weight: 600; font-size: .82rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--banda-fg);
  padding-left: var(--s3); margin-left: var(--s1);
  border-left: 1px solid rgba(255, 255, 255, .3);
  opacity: .92;
}
.banda .spia {
  margin-left: auto; display: flex; align-items: center; gap: var(--s4);
  font-size: .78rem; color: var(--banda-tenue);
}
.banda .spia b { color: var(--banda-fg); font-weight: 600; }
.banda .spia span { white-space: nowrap; }
/* chi sta usando il sistema, e la via d'uscita. Sta nella banda perche' e'
   un'informazione che deve essere vera sempre: se uno guarda e non sa a nome
   di chi sta scrivendo, l'audit non serve a niente. */
.banda .chi { display: flex; align-items: center; gap: var(--s2); flex: none; }
.banda .chi .nome {
  font-size: .84rem; color: var(--banda-fg); font-weight: 600;
  max-width: 18ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
@media (max-width: 760px) { .banda .chi .nome { display: none; } }

.banda button {
  background: transparent; border: 1px solid rgba(255, 255, 255, .18);
  color: var(--banda-fg); border-radius: var(--r);
  padding: .22rem .55rem; font: inherit; font-size: .76rem; cursor: pointer;
  transition: background var(--velo), border-color var(--velo);
}
.banda button:hover { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .35); }
.apri-menu { display: none; }

/* Il guscio prende TUTTA la larghezza: la colonna di navigazione e' fissa,
   il contenuto si prende il resto. Nessun quarto di schermo sprecato. */
.guscio {
  display: grid;
  grid-template-columns: var(--nav) minmax(0, 1fr);
  align-items: start;
}
@media (max-width: 900px) { .guscio { grid-template-columns: minmax(0, 1fr); } }

.navigazione {
  position: sticky; top: var(--banda-h); align-self: start;
  height: calc(100vh - var(--banda-h)); overflow-y: auto;
  padding: var(--s4) var(--s2) var(--s7) var(--s3);
  border-right: 1px solid var(--filo);
  background: var(--carta);
}
.navigazione .gruppo {
  font-size: .62rem; text-transform: uppercase; letter-spacing: .14em;
  color: var(--tenue); font-weight: 700;
  margin: var(--s5) 0 var(--s2) var(--s2);
}
.navigazione .gruppo:first-child { margin-top: 0; }
.navigazione a {
  display: block; padding: .34rem var(--s2) .34rem calc(var(--s2) + 3px);
  border-radius: var(--r); color: var(--inchiostro-2);
  text-decoration: none; font-size: .9rem; line-height: 1.35;
  border-left: 3px solid transparent; margin-left: -3px;
  transition: background var(--velo), color var(--velo), border-color var(--velo);
}
.navigazione a:hover { background: var(--superficie-2); color: var(--inchiostro); }
.navigazione a[aria-current="page"] {
  background: var(--verde-chiaro); color: var(--verde-scuro);
  border-left-color: var(--verde); font-weight: 600;
}
@media (max-width: 900px) {
  .navigazione {
    position: fixed; inset: var(--banda-h) auto 0 0; width: 250px; z-index: 25;
    background: var(--superficie); box-shadow: var(--ombra-alta); display: none;
  }
  .navigazione.aperta { display: block; }
  .apri-menu { display: inline-block; }
}

main {
  width: 100%;
  max-width: var(--largo);
  margin: 0 auto;
  padding: var(--s5) var(--s5) var(--s7);
  min-width: 0;
}
@media (max-width: 700px) { main { padding: var(--s4) var(--s4) var(--s6); } }

/* ============================================== 2. titolo di pagina */
.titolo { margin-bottom: var(--s5); }
.titolo h1 {
  font-size: clamp(1.3rem, 1.05rem + .7vw, 1.6rem);
  font-weight: 600; letter-spacing: -.015em; line-height: 1.2;
}
/* Il sottotitolo a tutta larghezza, una colonna (9/11/2026, due correzioni).
   Era `max-width: 78ch`: su un monitor da 1920 sono 550px su 1616, un terzo,
   e la pagina sembrava tagliata a meta'. Provato a farlo scorrere su tre
   colonne per riempire la larghezza tenendo le righe corte: scartato
   dall'utente, e a ragione - in un sottotitolo di due frasi le colonne
   spezzano il discorso e l'occhio non sa dove andare dopo. Le colonne vanno
   bene per un articolo, non per una didascalia.
   Quindi: una colonna, tutta la larghezza, come il titolo. Le righe sono
   lunghe; l'interlinea un po' piu' aperta aiuta a ritrovare l'inizio della
   riga dopo, ed e' il prezzo che si paga per un blocco che non sembra
   tagliato. */
.titolo p {
  margin: var(--s2) 0 0; color: var(--inchiostro-2);
  font-size: .92rem; line-height: 1.65; max-width: none;
}
.titolo p + p { margin-top: var(--s3); }
.titolo p b { color: var(--inchiostro); font-weight: 600; }

/* ======================================= 2bis. finestra (dialog nativo)
 * Un modulo che si usa qualche volta al giorno non deve stare sempre aperto a
 * rubare un terzo di schermo a una tabella che si guarda tutto il giorno. Si
 * apre da un pulsante e si chiude.
 * E' il `<dialog>` del browser, non una finta finestra fatta di div: arriva
 * gia' con il fondo che oscura, la chiusura con Esc, il fuoco della tastiera
 * trattenuto dentro e il resto della pagina dichiarato inerte. Riscrivere
 * tutto questo a mano e' il modo classico di fare una finestra che non si
 * chiude piu' con la tastiera.
 * Testata e piede restano fermi, il corpo scorre: cosi' il pulsante che salva
 * non scappa mai sotto il bordo. */
dialog.finestra {
  border: none; padding: 0; border-radius: var(--r-grande);
  background: var(--superficie); color: var(--inchiostro);
  box-shadow: var(--ombra-alta);
  width: min(960px, 94vw); max-width: 94vw; max-height: min(88vh, 900px);
  display: flex; flex-direction: column; overflow: hidden;
}
dialog.finestra:not([open]) { display: none; }
/* per quello che ha dentro una tabella: un documento con dieci righe e nomi di
   prodotto lunghi non sta in 960px senza mandare a capo ogni cella */
dialog.finestra.larga { width: min(1180px, 95vw); }
dialog.finestra::backdrop {
  background: rgba(10, 6, 8, .55);
}
/* Il contenitore dentro il dialog e' un `form` quando c'e' qualcosa da
   salvare e un `div` quando no. I selettori qui sotto erano scritti come
   `.finestra > form > header`, e col div non prendevano: titolo senza
   padding che usciva dal riquadro e pulsante di chiusura a capo. Visto in
   una schermata il 9/11/2026. Adesso sono discendenti: vale comunque. */
.finestra > form, .finestra > div {
  display: flex; flex-direction: column; min-height: 0; flex: 1 1 auto;
}
.finestra header {
  display: flex; align-items: center; gap: var(--s3); flex: none;
  padding: var(--s4) var(--s5); border-bottom: 1px solid var(--filo);
  background: var(--superficie);
}
.finestra header h2 {
  margin: 0; font-size: 1.12rem; font-weight: 600; font-family: var(--titoli);
  letter-spacing: -.01em; color: var(--inchiostro);
  text-transform: none; border: none; padding: 0;
}
.finestra header .pillola { margin-left: var(--s2); }
.finestra .chiudi {
  margin-left: auto; flex: none; background: transparent; cursor: pointer;
  border: 1px solid var(--filo); border-radius: var(--r); color: var(--inchiostro-2);
  width: 30px; height: 30px; font-size: 1.1rem; line-height: 1;
}
.finestra .chiudi:hover { background: var(--superficie-2); color: var(--inchiostro); }
.finestra .corpo { padding: var(--s5); overflow: auto; min-height: 0; }
.finestra .corpo > p.spiega {
  margin: 0 0 var(--s4); color: var(--inchiostro-2); font-size: .88rem;
}
.finestra footer {
  flex: none; padding: var(--s4) var(--s5); border-top: 1px solid var(--filo);
  display: flex; gap: var(--s2); align-items: center; flex-wrap: wrap;
  background: var(--superficie-2);
}
.finestra footer .separa { margin-left: auto; }
@media (max-width: 700px) {
  dialog.finestra { width: 100vw; max-width: 100vw; max-height: 100vh;
                    height: 100vh; border-radius: 0; }
  .finestra .corpo, .finestra header, .finestra footer { padding-left: var(--s4);
                    padding-right: var(--s4); }
}

/* Il pulsante che apre una finestra sta nella testata della scheda, a destra.
   Se nella testata c'e' gia' una coda (il conteggio), quella si prende il
   margine automatico e al pulsante basta uno spazio: due `margin-left: auto`
   nella stessa riga si dividono lo spazio e lasciano il conteggio a mezz'aria. */
.scheda > h2 > .pulsante { margin-left: auto; flex: none; align-self: center;
  padding: .3rem .8rem; font-size: .84rem; text-transform: none;
  letter-spacing: 0; }
.scheda > h2 > .coda ~ .pulsante { margin-left: var(--s3); }

/* ============================================== 3. scheda */
.scheda {
  background: var(--superficie);
  border: 1px solid var(--filo);
  border-radius: var(--r-grande);
  padding: var(--s4);
  margin-bottom: var(--s4);
  box-shadow: var(--ombra);
}
.scheda > h2 {
  display: flex; align-items: baseline; gap: var(--s2);
  font-size: .66rem; text-transform: uppercase; letter-spacing: .14em;
  color: var(--tenue); font-weight: 700;
  padding-bottom: var(--s2); margin-bottom: var(--s3);
  border-bottom: 1px solid var(--filo);
}
.scheda > h2 .coda {
  margin-left: auto; text-transform: none; letter-spacing: 0;
  font-weight: 400; font-size: .8rem; color: var(--tenue);
}
.scheda.stretta { padding: var(--s3); }
.scheda.piatta { box-shadow: none; }

.griglia { display: grid; gap: var(--s4); align-items: start; }
@media (min-width: 1000px) {
  .griglia.due { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .griglia.tre { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* la colonna di destra cresce con lo schermo invece di restare un francobollo */
  .griglia.principale {
    grid-template-columns: minmax(0, 1fr) clamp(300px, 24vw, 420px);
  }
}
@media (min-width: 1500px) { .griglia.tre { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ============================================== 4. cifre */
.cifre {
  display: grid; gap: var(--s2);
  grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
}
.cifra {
  background: var(--superficie-2);
  border-radius: var(--r);
  padding: var(--s2) var(--s3);
  border-left: 2px solid transparent;
}
.cifra .n {
  display: block; font-size: 1.32rem; font-weight: 600; line-height: 1.1;
  letter-spacing: -.02em; font-variant-numeric: tabular-nums;
}
.cifra .d {
  font-size: .7rem; color: var(--tenue);
  text-transform: uppercase; letter-spacing: .07em;
}
.cifra.male { border-left-color: var(--terra); background: var(--terra-chiaro); }
.cifra.male .n { color: var(--terra); }
.cifra.bene { border-left-color: var(--bosco); }
.cifra.bene .n { color: var(--bosco); }

/* ============================================== 5. tabelle */
/* Il cuore del mestiere. Fili sottili, niente zebratura fissa, intestazione
   che resta attaccata sotto la banda mentre si scorre la pagina. */
.tabella {
  width: 100%; border-collapse: collapse;
  font-size: .875rem; font-variant-numeric: tabular-nums;
}
/* L'intestazione resta in vista mentre si scorre l'elenco.
   `top: 0` e non l'altezza della banda: il riferimento e' il contenitore
   `.scorre`, non la finestra. Con un valore piu' alto l'intestazione scende di
   quei pixel e copre la prima riga - ed e' esattamente l'errore che aveva
   questa pagina il 9/11. Nota: un contenitore con `overflow-x: auto` scorre
   anche in verticale, che lo si dichiari o no: e' sempre lui il riferimento. */
.tabella th {
  position: sticky; top: 0; z-index: 2;
  text-align: left; font-size: .63rem; text-transform: uppercase;
  letter-spacing: .1em; color: var(--tenue); font-weight: 700;
  padding: var(--s2);
  background: var(--superficie);
  border-bottom: 1px solid var(--filo-forte);
  white-space: nowrap;
}
.tabella td {
  padding: .42rem var(--s2);
  border-bottom: 1px solid var(--filo);
  color: var(--inchiostro-2); vertical-align: top;
}
.tabella tbody tr { transition: background var(--velo); }
.tabella tbody tr:hover td { background: var(--superficie-2); color: var(--inchiostro); }
.tabella tr:last-child td { border-bottom: none; }
.tabella td.n, .tabella th.n {
  text-align: right; white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.tabella tfoot td {
  font-weight: 600; color: var(--inchiostro);
  border-top: 2px solid var(--filo-forte); border-bottom: none;
  background: var(--superficie);
}
.tabella .fiacca { color: var(--tenue); }
/* UN DOCUMENTO ANNULLATO SI VEDE, BARRATO. Resta nell'elenco perche' il suo
   numero resta occupato: nasconderlo mostrerebbe una numerazione con dei
   buchi, che e' proprio quello che fa preoccupare chi la guarda. Barrato il
   numero e il nome - cioe' le due cose che si leggono - e non tutta la riga,
   che diventerebbe illeggibile. */
tr.annullata td { color: var(--tenue); }
tr.annullata td:first-child,
tr.annullata td:nth-child(3) { text-decoration: line-through; }

/* Dentro una cifra: il confronto con l'anno prima e la riga di dettaglio.
   Il confronto e' piccolo e sta accanto al numero, non sotto: e' un
   aggettivo del numero, non un secondo dato. */
.cifra .scarto { font-size: .78rem; font-weight: 700; margin-left: .4rem;
                 white-space: nowrap; }
.cifra .scarto.su { color: var(--bosco); }
.cifra .scarto.giu { color: var(--terra); }
.cifra .sotto { display: block; font-size: .76rem; color: var(--tenue);
                margin-top: .15rem; font-variant-numeric: tabular-nums; }
/* Quattro cifre di denaro col confronto accanto non stanno in 118 pixel:
   «18.619,94 € ▲ +12%» ne vuole almeno il doppio. */
.cifre.larghe { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }

/* UNO STORNO, e la riga che ha rimediato. Si vedono insieme - e' il senso
   di non cancellare niente - quindi vanno distinte a colpo d'occhio: la
   riga sbagliata grigia e barrata, lo storno con un filo a sinistra che
   dice «questa riga esiste per annullarne un'altra». */
tr.storno td:first-child { box-shadow: inset 3px 0 0 var(--filo-forte); }
tr.storno td { color: var(--tenue); }

/* Un pulsante dentro una riga di tabella: deve stare nell'altezza della
   riga senza allargarla, e non deve tirare l'occhio piu' del dato. */
.tabella .minuto {
  font: inherit; font-size: .82rem; line-height: 1;
  padding: .3rem .55rem; cursor: pointer;
  border: 1px solid var(--filo-forte); border-radius: 5px;
  background: var(--superficie); color: var(--inchiostro-2);
}
.tabella .minuto:hover { background: var(--superficie-2); border-color: var(--tenue); }
.tabella tr:hover .minuto { border-color: var(--tenue); }

/* Un campo che quella causale non usa: resta al suo posto - sparire sposta
   tutto il modulo a ogni cambio di causale - ma si fa da parte. */
.campo.spento { opacity: .5; }
.campo.spento > span { font-style: italic; }

/* Scorre in orizzontale se la tabella e' piu' larga dello spazio.
   `.alto` in piu' per gli elenchi lunghi: la tabella si scorre dentro il suo
   riquadro, con l'intestazione ferma in cima, e la pagina resta corta. Senza
   `.alto` la tabella e' alta quanto i suoi dati e scorre la pagina. */
.scorre { overflow-x: auto; }
.scorre.alto { max-height: min(72vh, 760px); overflow-y: auto; }

/* ============================================== 6. campi e moduli */
.campo { display: block; margin-bottom: var(--s3); min-width: 0; }
.campo > span, .campo > label > span {
  display: block; font-size: .68rem; text-transform: uppercase;
  letter-spacing: .09em; color: var(--tenue); font-weight: 700;
  margin-bottom: .25rem;
}
.campo > em {
  display: block; font-size: .78rem; color: var(--tenue);
  font-style: normal; margin-top: .25rem; line-height: 1.35;
}

input, select, textarea {
  width: 100%; font: inherit; color: var(--inchiostro);
  background: var(--superficie);
  border: 1px solid var(--filo-forte);
  border-radius: var(--r);
  padding: .38rem .55rem;
  transition: border-color var(--velo), box-shadow var(--velo), background var(--velo);
}
input::placeholder, textarea::placeholder { color: var(--tenue); opacity: .75; }
input[type="number"], input.n {
  text-align: right; font-variant-numeric: tabular-nums;
  font-family: var(--mono); font-size: .92em;
}
input[type="checkbox"] { width: auto; accent-color: var(--verde); }
input:hover:not(:disabled), select:hover:not(:disabled) { border-color: var(--tenue); }
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--verde);
  box-shadow: 0 0 0 3px var(--verde-chiaro);
}
input:disabled, select:disabled {
  background: var(--superficie-2); color: var(--tenue); cursor: not-allowed;
}
textarea { min-height: 3.6rem; resize: vertical; line-height: 1.45; }
select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 15px) center, calc(100% - 10px) center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 1.8rem;
}

fieldset {
  border: none; border-top: 1px solid var(--filo);
  padding: var(--s4) 0 0; margin: 0 0 var(--s5);
}
fieldset:first-of-type { border-top: none; padding-top: 0; }
legend {
  font-size: .95rem; font-weight: 600;
  color: var(--inchiostro); padding: 0 var(--s3) 0 0; float: left; width: 100%;
  margin-bottom: var(--s3);
}
legend + * { clear: both; }

.fila { display: grid; gap: var(--s3); }
@media (min-width: 760px) {
  .fila.due { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fila.tre { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .fila.quattro { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ============================================== 7. pulsanti */
.pulsante {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  font: inherit; font-size: .875rem; font-weight: 600;
  padding: .42rem .9rem; border-radius: var(--r); cursor: pointer;
  background: var(--verde); color: #FFF;
  border: 1px solid var(--verde);
  text-decoration: none; white-space: nowrap;
  transition: filter var(--velo), background var(--velo), border-color var(--velo),
              transform var(--velo);
}
:root[data-tema="scuro"] .pulsante { color: var(--carta); }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="chiaro"]) .pulsante { color: var(--carta); }
}
.pulsante:hover { filter: brightness(1.12); }
.pulsante:active { transform: translateY(1px); }
.pulsante:disabled { opacity: .45; cursor: not-allowed; filter: none; transform: none; }
.pulsante.secondario {
  background: var(--superficie); color: var(--inchiostro);
  border-color: var(--filo-forte);
}
.pulsante.secondario:hover { background: var(--superficie-2); border-color: var(--tenue); filter: none; }
.pulsante.piano {
  background: transparent; border-color: transparent; color: var(--verde);
  padding: .22rem .45rem; font-weight: 600;
}
.pulsante.piano:hover { background: var(--verde-chiaro); filter: none; }
.pulsante.pericolo {
  background: var(--superficie); color: var(--terra); border-color: var(--terra);
}
.pulsante.pericolo:hover { background: var(--terra-chiaro); filter: none; }
.pulsante.grande { font-size: .98rem; padding: .58rem 1.3rem; width: 100%; }

.azioni { display: flex; gap: var(--s2); flex-wrap: wrap; align-items: center; }
.azioni .separa { margin-left: auto; }

/* ============================================== 8. ricerca con proposte */
.ricerca { position: relative; }
/* L'elenco dei suggerimenti sta nello STRATO IN CIMA del browser (vedi il
   commento in aeos.js): `popover` lo tira fuori dalla pagina, cosi' nessun
   contenitore con `overflow` puo' ritagliarlo. Il browser pero' lo centra a
   mezzo schermo di suo: qui si annulla quel comportamento, e la posizione
   gliela da' il JavaScript, sotto al campo.
   Quando `popover` non c'e', restano le regole di prima. */
.proposte {
  position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 3px);
  min-width: 260px;
  background: var(--superficie);
  border: 1px solid var(--filo-forte); border-radius: var(--r-grande);
  box-shadow: var(--ombra-alta);
  max-height: 320px; overflow-y: auto;
  padding: var(--s1); margin: 0; list-style: none;
}
.proposte:empty, .proposte[hidden] { display: none; }

.proposte[popover] {
  position: fixed; inset: auto; margin: 0; padding: var(--s1);
  overflow: auto; max-height: 320px;
  border: 1px solid var(--filo-forte);
}
/* chiuso, il popover non deve occupare spazio ne' lampeggiare */
.proposte[popover]:not(:popover-open) { display: none; }
.proposte li {
  display: flex; gap: var(--s3); align-items: baseline;
  padding: .36rem var(--s2); border-radius: var(--r);
  cursor: pointer; font-size: .875rem; line-height: 1.3;
}
/* una voce, una riga: se il nome non ci sta si accorcia con i puntini invece
   di andare a capo. Due righe per voce dimezzano quello che si vede senza
   scorrere, e chi compila deve riconoscere la voce con un'occhiata. */
.proposte li > span:first-child {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}
.proposte li .dettaglio {
  margin-left: auto; color: var(--tenue); font-size: .78rem;
  white-space: nowrap; font-variant-numeric: tabular-nums;
}
.proposte li[aria-selected="true"], .proposte li:hover {
  background: var(--verde-chiaro); color: var(--verde-scuro);
}
.proposte li[aria-selected="true"] .dettaglio, .proposte li:hover .dettaglio {
  color: var(--verde-scuro);
}
.proposte li.nessuna { color: var(--tenue); cursor: default; }
.proposte li.nessuna:hover { background: transparent; }

/* L'ultima voce dell'elenco: «crea quello che hai scritto». Sta in fondo
   perche' prima vengono le cose che esistono, e si stacca con un filo perche'
   non e' un risultato - e' un'azione. Quando non c'e' nessun risultato e'
   l'unica voce, e allora vale la pena che si veda. */
.proposte li.nuova {
  border-top: 1px solid var(--filo); color: var(--verde); font-weight: 600;
}
.proposte li.nuova b { font-weight: 700; }
.proposte li.nuova.sola { border-top: none; }
.proposte li.nuova[aria-selected="true"], .proposte li.nuova:hover {
  background: var(--verde); color: var(--su-colore);
}
.proposte li.nuova[aria-selected="true"] .dettaglio,
.proposte li.nuova:hover .dettaglio { color: var(--su-colore); opacity: .85; }

/* Un campo con un pulsante attaccato: l'azione sta sulla stessa riga del
   campo a cui appartiene. Messa sotto, a mezza strada fra due righe, sembra
   appartenere a quella dopo - ed e' quello che succedeva al «nuovo cliente»
   del DDT. */
.ricerca.con-tasto { display: flex; gap: var(--s2); align-items: stretch; }
.ricerca.con-tasto > input { flex: 1 1 auto; min-width: 0; }
.ricerca.con-tasto > .pulsante { flex: none; white-space: nowrap; }

/* ============================================== 9. avvisi */
.avviso {
  display: flex; gap: var(--s2); align-items: flex-start;
  padding: var(--s2) var(--s3); margin-bottom: var(--s2);
  font-size: .86rem; line-height: 1.45;
  border-radius: var(--r);
  border: 1px solid var(--filo-forte);
  border-left: 3px solid var(--tenue);
  background: var(--superficie-2);
}
.avviso .segno {
  flex: none; font-weight: 700; font-family: var(--mono);
  line-height: 1.5; opacity: .85;
}
.avviso.attenzione {
  background: var(--ottone-chiaro); border-color: var(--filo);
  border-left-color: var(--ottone); color: var(--ottone);
}
.avviso.errore {
  background: var(--terra-chiaro); border-color: var(--filo);
  border-left-color: var(--terra); color: var(--terra);
}
.avviso.bene {
  background: var(--bosco-chiaro); border-color: var(--filo);
  border-left-color: var(--bosco); color: var(--bosco);
}

/* ============================================== 10. pillole */
.pillola {
  display: inline-block; font-size: .68rem; font-weight: 700;
  letter-spacing: .03em; padding: .1rem .42rem; border-radius: 2px;
  background: var(--superficie-2); color: var(--inchiostro-2);
  border: 1px solid var(--filo); white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.pillola.verde { background: var(--bosco-chiaro); color: var(--bosco); border-color: transparent; }
.pillola.ocra { background: var(--ottone-chiaro); color: var(--ottone); border-color: transparent; }
.pillola.rossa { background: var(--terra-chiaro); color: var(--terra); border-color: transparent; }

/* ============================================== 11. stati */
.vuoto {
  text-align: center; color: var(--tenue);
  padding: var(--s5) var(--s4); font-size: .9rem;
}
.vuoto b {
  display: block; color: var(--inchiostro-2); margin-bottom: var(--s1);
  font-size: .98rem; font-weight: 600;
}
.caricamento { color: var(--tenue); font-size: .85rem; padding: var(--s3) 0; }
.caricamento::after {
  content: ""; display: inline-block; width: 1.2em; text-align: left;
  animation: punti 1.2s infinite steps(4);
}
@keyframes punti {
  0% { content: ""; } 25% { content: "."; }
  50% { content: ".."; } 75% { content: "..."; }
}

/* ============================================== 12. messaggio volante */
.volante {
  position: fixed; bottom: var(--s5); left: 50%; z-index: 50;
  transform: translateX(-50%);
  background: var(--banda); color: var(--banda-fg);
  padding: var(--s2) var(--s4); border-radius: var(--r-grande);
  box-shadow: var(--ombra-alta); font-size: .88rem; max-width: 92vw;
  animation: sale 180ms cubic-bezier(.2, .8, .3, 1);
}
.volante.male { background: var(--terra); color: #FFF; }
@keyframes sale {
  from { opacity: 0; transform: translateX(-50%) translateY(8px); }
  to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* ============================================== 13. conversazione */
.conversazione { display: flex; flex-direction: column; height: min(68vh, 640px); }
.storia {
  flex: 1; overflow-y: auto; display: flex; flex-direction: column;
  gap: var(--s3); padding-right: var(--s2);
}
.bolla {
  padding: var(--s2) var(--s3); border-radius: var(--r-grande);
  max-width: 94%; font-size: .88rem; line-height: 1.5;
}
.bolla.io {
  align-self: flex-end; background: var(--verde); color: #FFF;
  border-bottom-right-radius: 2px;
}
:root[data-tema="scuro"] .bolla.io { color: var(--carta); }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="chiaro"]) .bolla.io { color: var(--carta); }
}
.bolla.lui {
  align-self: flex-start; background: var(--superficie-2);
  border-bottom-left-radius: 2px; max-width: 100%;
}
.bolla .fonte {
  display: block; margin-top: var(--s2); padding-top: var(--s2);
  border-top: 1px solid var(--filo);
  font-size: .7rem; color: var(--tenue); font-family: var(--mono);
}
.bolla .tabella { margin-top: var(--s2); font-size: .82rem; }
.bolla .tabella th { background: transparent; position: static; }
.dettatura { display: flex; gap: var(--s2); margin-top: var(--s3); }
.dettatura input { flex: 1; }
.dettatura .pulsante { flex: none; }
.ascolta.attivo, #voce.attivo {
  background: var(--terra); border-color: var(--terra); color: #FFF;
}

/* ============================================== 14. entrata */
/* Una sola animazione, all'apertura: il contenuto sale di pochi pixel. Non e'
   decorazione, da' il senso che la pagina ha finito di caricare. */
main > * { animation: entra 260ms cubic-bezier(.2, .7, .3, 1) backwards; }
main > *:nth-child(2) { animation-delay: 40ms; }
main > *:nth-child(3) { animation-delay: 80ms; }
main > *:nth-child(4) { animation-delay: 120ms; }
@keyframes entra {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .caricamento::after { content: "..."; }
}

/* ============================================== stampa */
@media print {
  .banda, .navigazione, .non-stampare { display: none !important; }
  .guscio { display: block; }
  main { padding: 0; max-width: none; }
  .scheda { border: none; box-shadow: none; padding: 0; margin: 0 0 1rem; }
  .tabella th { position: static; }
  body { background: #FFF; color: #000; background-image: none; }
}