/* =========================================================================
   BankReport — foglio di stile unico.
   Scritto a mano invece che generato: niente toolchain, niente rebuild a ogni
   modifica di un template, niente binario da 100 MB nel progetto. Il file e'
   servito in locale, quindi la Content-Security-Policy puo' restare severa.

   Lo caricano tutte le pagine, comprese quelle della banca partner, che sopra
   ci mettono `banca.css`. Cio' che si cambia qui si vede anche di la'.
   ========================================================================= */

/* ------------------------------------------------------------- caratteri */
/* Gli stessi due del pannello banca, e da qui li prendono tutte e due le
   meta' dell'applicazione: un carattere solo nel progetto vuol dire che
   l'area interna e il report che esce da IGE si somigliano per costruzione,
   non per disciplina di chi scrive il CSS.

   Un file per famiglia, con l'asse dei pesi dentro: `font-weight: 100 900`
   dice al browser che quel file copre tutta la scala. La CSP e'
   `font-src 'self'`: da fuori non arriva niente, e un @import a Google Fonts
   non darebbe errore - verrebbe ignorato, e la pagina tornerebbe al carattere
   di sistema senza dirlo a nessuno. */
@font-face {
  font-family: "Jost";
  src: url("../font/jost-var.woff2") format("woff2-variations");
  font-weight: 100 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Rubik";
  src: url("../font/rubik-var.woff2") format("woff2-variations");
  font-weight: 100 900; font-style: normal; font-display: swap;
}

/* ------------------------------------------------------------------ tema */
:root {
  --sfondo:        #f6f7f9;
  --superficie:    #ffffff;
  --superficie-2:  #f0f2f5;
  --bordo:         #dfe3e8;
  --bordo-forte:   #c5ccd6;
  --testo:         #16202c;
  --testo-tenue:   #5b6878;
  --testo-debole:  #66707f;   /* 5,01:1 su bianco: le capitali piccole si leggono */

  /* I colori vengono dal marchio IGE, non da un accostamento inventato.
     Sono gli stessi misurati per il pannello banca, e i rapporti di contrasto
     scritti qui sotto li ricalcola un test: un commento che dichiara un numero
     sbagliato e' peggio di nessun commento.

     La regola che tiene insieme tutto: **una tinta, un significato**. Prima
     l'oro faceva quattro mestieri - accento dell'interfaccia, voce di menu
     corrente, cifra in evidenza, serie del grafico - ed era anche il colore
     della linea Gift nella tabella dei movimenti. Cinque cose. Adesso il verde
     e' IGE, e l'oro e' Gift: nient'altro. */
  --ige-verde:        #b0bf36;  /* il marchio. Su bianco 2,03:1: mai per il testo */
  --ige-verde-fondo:  #67720f;  /* verde scritto su bianco          5,26:1 */
  --ige-nero:         #1d1d1b;  /* bianco scritto sopra            16,88:1 */
  --ige-nero-2:       #2b2b28;
  --ige-blu:          #006699;  /* il secondario di ige.gold, su bianco 6,25:1 */

  --accento:       var(--ige-verde-fondo);
  --accento-forte: #59630c;   /* su bianco                          6,53:1 */
  --accento-tenue: #f4f6e4;

  --blu:           var(--ige-blu);
  --blu-tenue:     #e4eef4;
  --verde:         #1f7a4d;
  --verde-tenue:   #e3f3ea;
  --rosso:         #b3261e;
  --rosso-tenue:   #fbe9e7;
  --ambra:         #8a5d00;
  --ambra-tenue:   #fdf4e0;

  /* Le due linee di prodotto, coi colori esatti del sito IGE:
       ige.gold                  --primary-color  #b0bf36  -> Gold (verde)
       ige.gold/oro-da-regalo    theme-color      #deb306  -> Gift (oro)
     Pastiglia piena, non testo colorato: scuriti quanto basta a stare su fondo
     bianco i due diventavano due marroni indistinguibili, e una colonna in cui
     Gold e Gift si somigliano non serve a niente. Pieni restano quelli veri, e
     si distinguono a colpo d'occhio. Sono colori di marca: non cambiano col
     tema, come non cambia un logo. */
  --gold-fondo:    #b0bf36;
  --gold-testo:    #1d2000;
  --gift-fondo:    #deb306;
  --gift-testo:    #2b2200;

  --raggio:        10px;
  --raggio-s:      6px;
  --ombra:         0 1px 2px rgba(16, 24, 40, .06), 0 4px 12px rgba(16, 24, 40, .05);
  --ombra-alta:    0 8px 28px rgba(16, 24, 40, .14);
  --mono: ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, monospace;
  --sans: "Rubik", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  /* Jost porta soltanto le etichette: titoli di sezione e occhielli. Le cifre
     restano nel monospaziato, perche' qui si leggono una contro l'altra. */
  --display: "Jost", "Futura", "Century Gothic", system-ui, sans-serif;

  /* L'altezza della fascia in alto. Serve a chi ci sta sotto: le intestazioni
     appiccicate delle tabelle devono fermarsi qui, non a zero, o finiscono
     dietro la fascia. Cambia col telefono, dove la fascia sta su due righe. */
  --alt-testata: 56px;

  /* Le pagine sono solo chiare (vedi SOLO_CHIARO in app.js). Dichiararlo fa
     disegnare al sistema operativo barre di scorrimento, calendari e menu a
     tendina nella variante giusta: senza, su un sistema in tema scuro il
     calendario di un campo data esce nero dentro una pagina bianca. */
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-tema="chiaro"]) {
    --sfondo:       #10151c;
    --superficie:   #171d26;
    --superficie-2: #1f2732;
    --bordo:        #2a333f;
    --bordo-forte:  #3b4655;
    --testo:        #e8ecf1;
    --testo-tenue:  #a3aebd;
    --testo-debole: #99a4b3;

    --accento:       #c2d04f;   /* verde scritto sul nero            9,99:1 */
    --accento-forte: #d3de7d;
    --accento-tenue: #262a12;

    --blu:        #6aa9e0;  --blu-tenue:   #16283a;
    --verde:      #5fc38d;  --verde-tenue: #12291d;
    --rosso:      #f08b82;  --rosso-tenue: #331916;
    --ambra:      #e0b25c;  --ambra-tenue: #2e2410;
    --ombra:      0 1px 2px rgba(0,0,0,.4), 0 4px 12px rgba(0,0,0,.3);
    --ombra-alta: 0 8px 28px rgba(0,0,0,.5);
  }
}
:root[data-tema="scuro"] {
  --sfondo: #10151c; --superficie: #171d26; --superficie-2: #1f2732;
  --bordo: #2a333f; --bordo-forte: #3b4655;
  --testo: #e8ecf1; --testo-tenue: #a3aebd; --testo-debole: #99a4b3;
  --accento: #c2d04f; --accento-forte: #d3de7d; --accento-tenue: #262a12;
  --blu: #6aa9e0; --blu-tenue: #16283a;
  --verde: #5fc38d; --verde-tenue: #12291d;
  --rosso: #f08b82; --rosso-tenue: #331916;
  --ambra: #e0b25c; --ambra-tenue: #2e2410;
  --ombra: 0 1px 2px rgba(0,0,0,.4), 0 4px 12px rgba(0,0,0,.3);
  --ombra-alta: 0 8px 28px rgba(0,0,0,.5);
}

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

/* Perche' la pagina non balli.
 *
 * Il difetto che si vedeva sul telefono - la testata e il corpo che scivolano
 * a destra e a sinistra come su un elastico - non era una pagina piu' larga
 * dello schermo: misurata, la pagina ci sta. Era lo **scorrimento che si
 * propaga**. Dentro ci sono contenitori che scorrono di lato per mestiere - la
 * striscia delle sezioni in testata, le tabelle larghe - e quando uno di loro
 * arriva in fondo il browser passa il gesto a chi sta sopra, fino al
 * documento, che rimbalza. Un dito che spinge una tabella oltre l'ultima
 * colonna faceva scivolare tutta la pagina.
 *
 * Due regole, e il gesto resta dov'e' nato:
 *   - sul documento, `overscroll-behavior-x: none` toglie il rimbalzo laterale;
 *     in verticale basta `contain`, che ferma la propagazione e il
 *     ricaricamento a strappo ma lascia lo scorrimento normale;
 *   - su ogni contenitore che scorre, `overscroll-behavior-x: contain`.
 *
 * `overflow-x: clip` sul corpo e' la cintura, non il freno: i freni sono i
 * test che impediscono a una pagina di diventare piu' larga dello schermo.
 * `clip` e non `hidden` perche' `hidden` creerebbe un contenitore che scorre,
 * e le intestazioni appiccicate delle tabelle si aggancerebbero a lui. */
html {
  -webkit-text-size-adjust: 100%;
  overscroll-behavior-x: none;
  overscroll-behavior-y: contain;
}
body {
  margin: 0;
  overflow-x: clip;
  max-width: 100%;
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.55;
  color: var(--testo);
  background: var(--sfondo);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { margin: 0 0 .4em; line-height: 1.25; font-weight: 650; letter-spacing: -.01em; }
h1 {
  font-family: var(--display);
  font-size: 1.6rem; font-weight: 500; letter-spacing: .01em;
}
h2 { font-size: 1.15rem; }
h3 { font-size: .95rem; }
p  { margin: 0 0 1em; }
a  { color: var(--blu); text-decoration: none; }
/* `manipulation` toglie i trecento millisecondi che il browser aspetta per
   sapere se il tocco era un doppio tocco per ingrandire. Su un pulsante quel
   ritardo si sente, e fa sembrare lenta l'applicazione. */
button, a, select, input[type="checkbox"], .segmento {
  touch-action: manipulation;
}
a:hover { text-decoration: underline; }
code, .mono, .num { font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* Saltare la fascia.
   Chi naviga da tastiera, a ogni pagina, doveva passare per il marchio, quattro
   voci di menu, il nome utente e «Esci» prima di arrivare ai numeri. Il
   collegamento si vede solo quando lo si raggiunge col Tab. */
.salta-fascia {
  position: absolute; left: -9999px; top: 0; z-index: 60;
  padding: .6rem 1rem; border-radius: 0 0 var(--raggio-s) 0;
  background: var(--ige-nero); color: #fff; font-weight: 500;
}
.salta-fascia:focus {
  left: 0; text-decoration: none;
  outline: 2px solid var(--ige-verde); outline-offset: -4px;
}
/* Il <main> si puo' mettere a fuoco per ricevere il salto, ma non e' un
   comando: il contorno lo farebbe sembrare tale. */
main:focus { outline: none; }

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

/* Chi ha chiesto meno movimento lo ottiene: qui non ce n'e' molto, ma quel
   poco che c'e' non deve diventare un ostacolo. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important; transition-duration: .001ms !important;
  }
}

/* -------------------------------------------------------------- la fascia */
/* Fondo nero, come nel pannello banca, e per la stessa ragione: nel file del
   logo che IGE pubblica la parola «IGE» e' bianca, quindi il fondo scuro e' la
   posa prevista. Averlo uguale nelle due meta' dell'applicazione le fa
   riconoscere come un prodotto solo.

   Da qui in giu' non c'e' piu' nero: la fascia e' l'unico pezzo di arredo,
   tutto il resto e' bianco e sottile perche' quello che conta sono i numeri. */
.testata {
  position: sticky; top: 0; z-index: 30;
  display: flex; flex-wrap: wrap; align-items: center;
  column-gap: 1.25rem;
  /* Il ritaglio dello schermo, in orizzontale, sta di lato e non in alto: con
     il telefono girato il marchio e «Esci» finivano sotto la tacca. Lo sfondo
     resta pieno per tutta la larghezza - e' solo il contenuto che si scosta. */
  padding: 0;
  padding-top: env(safe-area-inset-top);
  padding-left: max(1.25rem, env(safe-area-inset-left));
  padding-right: max(1.25rem, env(safe-area-inset-right));
  min-height: var(--alt-testata);
  background: var(--ige-nero);
  border-bottom: 1px solid var(--ige-nero-2);
}
.marchio {
  order: 1;
  display: flex; align-items: center; gap: .65rem;
  color: #fff; text-decoration: none;
  font-family: var(--display); font-weight: 500;
  font-size: 1.02rem; letter-spacing: .02em;
  white-space: nowrap;
}
.marchio:hover { text-decoration: none; }
/* 2,2rem e' la misura sotto la quale il vuoto interno del marchio si chiude e
   il segno diventa una macchia. E' la stessa lezione del pannello banca. */
.marchio-ige { height: 2.2rem; width: auto; flex: none; display: block; }

.menu {
  order: 2; flex: 1;
  display: flex; align-self: stretch; gap: .1rem;
  min-width: 0; overflow-x: auto; overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.menu::-webkit-scrollbar { display: none; }
.menu a {
  position: relative;
  display: flex; align-items: center;
  padding: 0 .8rem; white-space: nowrap;
  color: rgba(255, 255, 255, .72);
  font-weight: 500; text-decoration: none;
}
.menu a:hover { color: #fff; text-decoration: none; }
/* La tacca sul filo.
   E' il segno che si ripete in tutta quest'area: una linea grigia divide, e un
   trattino verde in testa dice dove sei. Qui il filo e' il bordo inferiore
   della fascia, e la tacca sta sotto la voce corrente. Una pastiglia piena
   farebbe la stessa cosa su schermo largo, ma sul telefono - dove il menu
   scorre di lato - la tacca resta agganciata al bordo e si vede sempre. */
.menu a[aria-current="page"] { color: #fff; }
.menu a[aria-current="page"]::after {
  content: ""; position: absolute; left: .55rem; right: .55rem; bottom: 0;
  height: 2px; background: var(--ige-verde);
}
.menu a:focus-visible { outline-color: var(--ige-verde); outline-offset: -3px; }

.testata-destra { order: 3; display: flex; align-items: center; gap: .6rem; }
/* Nome e ruolo di chi e' entrato. Su fondo nero non serve la pastiglia colorata
   che c'era prima: il ruolo e' gia' distinto dal peso e dal colore. */
.chi { min-width: 0; line-height: 1.15; text-align: right; }
.chi-nome {
  display: block; color: #fff; font-weight: 500; font-size: .82rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 11rem;
}
.chi-ruolo {
  display: block; font-family: var(--display);
  font-size: .62rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ige-verde);
}
.testata .bottone {
  background: transparent; color: rgba(255, 255, 255, .88);
  border-color: rgba(255, 255, 255, .3);
}
.testata .bottone:hover { background: rgba(255, 255, 255, .1); color: #fff; }
.testata .bottone:focus-visible { outline-color: var(--ige-verde); }

/* Sotto i 760px la fascia va su due righe: il marchio e chi sei sopra, le
   sezioni sotto, in una striscia che scorre. Prima il menu veniva schiacciato
   fino a mostrare una lettera per voce - cioe' su un telefono
   l'applicazione non si poteva navigare affatto. */
@media (max-width: 759px) {
  :root { --alt-testata: 94px; }
  .testata {
    padding-left: max(.9rem, env(safe-area-inset-left));
    padding-right: max(.9rem, env(safe-area-inset-right));
    row-gap: 0;
  }
  /* La striscia scorre da bordo a bordo: i margini negativi la riportano fuori
     dal fianco della fascia, e il riempimento le ridà lo stesso scostamento
     dentro, cosi' la prima voce e' allineata al marchio ma la striscia non
     finisce prima del bordo dello schermo. */
  .menu {
    order: 3; flex-basis: 100%; flex-grow: 0; height: 42px;
    margin-left: calc(-1 * max(.9rem, env(safe-area-inset-left)));
    margin-right: calc(-1 * max(.9rem, env(safe-area-inset-right)));
    padding-left: max(.9rem, env(safe-area-inset-left));
    padding-right: max(.9rem, env(safe-area-inset-right));
  }
  .testata-destra { order: 2; margin-left: auto; }
  .marchio { font-size: .95rem; min-height: 52px; }
  .marchio-ige { height: 2rem; }
  .chi-nome { max-width: 7.5rem; }
}
@media (max-width: 380px) {
  /* Al di sotto, «BankReport» accanto al marchio costa piu' spazio di
     quanto dica: il logo e il titolo della pagina bastano a dire dove sei. */
  .marchio span { display: none; }
}

/* ------------------------------------------------------------- impaginato */
.pagina {
  max-width: 1400px; margin: 0 auto;
  padding: 1.5rem;
  padding-left: max(1.5rem, env(safe-area-inset-left));
  padding-right: max(1.5rem, env(safe-area-inset-right));
  padding-bottom: max(2rem, env(safe-area-inset-bottom));
}
.pagina-stretta { max-width: 900px; }
.intestazione-pagina {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 1rem; margin-bottom: 1.25rem; flex-wrap: wrap;
}
.intestazione-pagina > :first-child { min-width: 0; }
.sottotitolo { color: var(--testo-tenue); margin: .15rem 0 0; }

/* `min()` invece della sola misura: `minmax(380px, 1fr)` chiede 380px anche
   quando lo schermo ne ha 328, e allora la griglia esce dal telaio. Con
   `min(380px, 100%)` la traccia non puo' superare il contenitore. */
.griglia { display: grid; gap: 1rem; }
.griglia-kpi { grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr)); }
.griglia-2   { grid-template-columns: repeat(auto-fit, minmax(min(380px, 100%), 1fr)); }

/* --------------------------------------------------------------- riquadri */
.riquadro {
  background: var(--superficie);
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
  box-shadow: var(--ombra);
  min-width: 0;
}
/* Il filo con la tacca.
   La riga che separa il titolo dal contenuto e' grigia per tutta la larghezza
   e verde per i primi 2,5rem. E' lo stesso segno della fascia in alto, e vuol
   dire la stessa cosa: qui comincia qualcosa. Costa un pseudo-elemento e
   nessuna modifica ai template. */
.riquadro-testa {
  position: relative;
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: .5rem 1rem;
  padding: .85rem 1.1rem; border-bottom: 1px solid var(--bordo);
}
.riquadro-testa::after {
  content: ""; position: absolute; left: 0; bottom: -1px;
  width: 2.5rem; height: 2px; background: var(--ige-verde);
}
/* Il titolo (con la sua eventuale nota) si prende lo spazio che avanza, cosi'
   i comandi restano a destra invece di finire sotto la nota appena questa e'
   lunga una riga e mezza. */
.riquadro-testa > :first-child { flex: 1 1 16rem; min-width: 0; }
.riquadro-testa h2, .riquadro-testa h3 { margin: 0; }
/* I titoli di sezione sono etichette, non titoli di giornale: capitali piccole
   e staccate, nel carattere delle etichette. Sono la stessa voce degli
   occhielli e del ruolo nella fascia. */
.riquadro-testa h2 {
  font-family: var(--display);
  font-size: .92rem; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase;
}
.riquadro-corpo { padding: 1.1rem; min-width: 0; }
/* I contenitori che aspettano un messaggio restano vuoti quasi sempre, e vuoti
   lasciavano una fascia bianca alta un centimetro fra il filo e la tabella.
   Si dichiarano: `zona-esito`.

   Prima la regola era `:has(> :only-child:empty)`, cioe' «se dentro c'e' un
   elemento senza niente, sparisci». Sembrava piu' furba ed era sbagliata: un
   grafico, finche' non gli si disegna dentro, e' un div vuoto. I quattro
   riquadri del cruscotto sparivano per un istante, ECharts li misurava larghi
   zero e ripiegava sulla sua misura di sicurezza - cento pixel - dentro
   contenitori larghi milletrecento. Non dava errore: dava grafici sbagliati.

   Da qui la regola generale: cio' che si nasconde va nominato, non dedotto
   dallo stato in cui si trova un elemento mentre la pagina sta ancora
   nascendo. */
.zona-esito { padding: 0; }
.zona-esito:empty { display: none; }
.zona-esito > *:empty { display: none; }
.zona-esito .avviso { margin: .9rem 1.1rem; }

/* Testate di sezione col nome al centro. Le spiegazioni che stavano qui sotto
   sono state tolte: coprivano la pagina prima ancora dei pulsanti, e chi usa
   questa schermata sa gia' cosa fanno le due fonti. */
.riquadro-testa-centrata {
  display: block; text-align: center; position: relative;
}
.riquadro-testa-centrata h2 { margin: 0; }
.riquadro-testa-centrata .azione-testa {
  position: absolute; right: 1.1rem; top: .85rem;
}
/* Su schermo stretto il pulsante staccato dal flusso si sovrappone al titolo
   centrato: a 390px «Aggiorna» copriva la coda di «Import precedenti». Torna
   nel flusso, sotto. */
@media (max-width: 559px) {
  .riquadro-testa-centrata .azione-testa {
    position: static; display: block; margin: .6rem auto 0;
  }
}

.kpi { padding: 1.1rem; position: relative; }
.kpi .etichetta {
  font-family: var(--display);
  font-size: .68rem; text-transform: uppercase; letter-spacing: .12em;
  color: var(--testo-debole); font-weight: 500;
}
.kpi .cifra {
  font-family: var(--mono); font-variant-numeric: tabular-nums;
  font-size: 1.75rem; font-weight: 600; letter-spacing: -.02em;
  margin: .35rem 0 .1rem;
}
.kpi .nota { font-size: .8rem; color: var(--testo-tenue); }
/* La cifra di testa non si distingue col colore: in questa applicazione il
   verde vuol dire IGE Gold e l'oro vuol dire Gift, e una cifra colorata per
   sola enfasi rimetterebbe in circolo il significato che si e' appena tolto.
   Si distingue con la tacca, che qui non separa: segnala. */
.kpi.principale::before,
.kpi.linea-gold::before,
.kpi.linea-gift::before {
  content: ""; position: absolute; left: -1px; top: -1px;
  width: 2.5rem; height: 3px;
  background: var(--ige-verde); border-radius: var(--raggio) 0 0 0;
}
/* Le due linee di prodotto affiancate: la tacca prende il colore della linea,
   che e' lo stesso della pastiglia nella tabella dei movimenti. Due tessere
   identiche con due parole diverse si confondono guardandole di sfuggita. */
.kpi.linea-gold::before { background: var(--gold-fondo); }
.kpi.linea-gift::before { background: var(--gift-fondo); }

/* Le due tacche della coda di riconciliazione. Qui il colore NON e' enfasi: e'
   il grado di urgenza, e sono le due sole tinte che in questa applicazione lo
   dicono gia' altrove - il rosso degli errori e l'ambra degli avvisi. Un numero
   rosso in questa pagina vuol dire «dei soldi non hanno una provenienza», e va
   distinto da «questa proposta aspetta un sì». */
.kpi.allarme::before,
.kpi.attesa::before {
  content: ""; position: absolute; left: -1px; top: -1px;
  width: 2.5rem; height: 3px;
  border-radius: var(--raggio) 0 0 0;
}
.kpi.allarme::before { background: var(--rosso); }
.kpi.attesa::before  { background: var(--ambra); }

/* ------------------------------------------------- la coda da decidere */
/* Le proposte di un ordine. Sono poche per definizione - se fossero tante
   sarebbe un difetto dell'abbinamento, non della pagina - e stanno una sotto
   l'altra perche' si leggono confrontandole. */
.proposte { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.proposta {
  border: 1px solid var(--bordo);
  border-radius: var(--raggio-s);
  padding: .6rem .75rem;
  display: grid; gap: .25rem;
}
.proposta-testa { font-size: .95rem; }
.proposta-azioni { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .2rem; }
/* Una proposta rifiutata resta visibile e si smorza: chi riguarda una decisione
   deve poter vedere fra che cosa si sceglieva, non solo che cosa e' rimasto. */
.proposta-scartata { opacity: .55; }
.proposta-scartata .proposta-testa { text-decoration: line-through; }

/* Nella colonna «Da ordine» sta un numero d'ordine, o piu' d'uno separati da un
   punto. Il numero singolo non deve mai spezzarsi a meta': fra un ordine e
   l'altro invece si va a capo volentieri, ed e' quello che fa da solo lo spazio
   attorno al separatore. */
table.dati code.piccolo { word-break: keep-all; }

/* ── la coda «Da decidere» ──────────────────────────────────────────────
   Una riga per candidato, e le colonne raggruppate per fonte. I gruppi hanno
   una tinta di fondo appena accennata perche' l'occhio capisca dove finisce
   una fonte e comincia l'altra: senza, venti colonne sono un muro. */
table.dati.coda { font-size: .82rem; }
table.dati.coda th, table.dati.coda td { padding: .3rem .5rem; }
table.dati.coda tr.gruppi th {
  text-align: left; font-size: .7rem; letter-spacing: .06em;
  text-transform: uppercase; border-bottom: 2px solid var(--bordo-forte);
}
table.dati.coda .g-ordine { background: var(--ambra-tenue); }
table.dati.coda .g-conto  { background: var(--blu-tenue); }
table.dati.coda .g-stripe { background: var(--accento-tenue); }
table.dati.coda .g-legame { background: var(--verde-tenue); }
table.dati.coda .g-banca  { background: var(--accento-tenue); }
/* La riga di un ordine senza nessun candidato: le colonne delle altre fonti
   sono vuote per davvero, e dirlo con un tratto e' piu' onesto che lasciarle
   bianche - bianco vuol dire «non lo so», il tratto vuol dire «non c'e'». */
table.dati.coda td.niente { color: var(--debole); text-align: center; }
table.dati.coda tr.decisa td { opacity: .55; }
table.dati.coda tr.decisa .scelta-fatta { opacity: 1; font-weight: 600; }
table.dati.coda .azioni { white-space: nowrap; }
table.dati.coda .azioni button { margin: 0 .1rem; }

/* La voce del menu che porta a un attrezzo, non a una pagina del prodotto: si
   vede che e' un'altra cosa, senza gridarlo. Sparisce insieme alla rotta. */
nav .voce-attrezzo { opacity: .72; font-size: .92em; }

/* Elenchi che non sono elenchi puntati: i passi di una prova di connessione e
   gli avvisi di un import. Il pallino li farebbe leggere come una lista di
   cose da fare, e non lo sono. */
ul.elenco-nudo { list-style: none; margin: .4rem 0 0; padding: 0; }
ul.elenco-nudo li { margin: .15rem 0; }

/* Coppie etichetta-valore, una per riga su schermo stretto e due per riga
   quando c'e' spazio. */
.griglia-fitta {
  display: grid; gap: .15rem .9rem;
  grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
}

.grafico { width: 100%; height: 300px; }
.grafico-alto { height: 380px; }
@media (max-width: 560px) {
  /* Su un telefono un grafico alto 380px occupa mezzo schermo e obbliga a
     scorrere per leggere l'asse. */
  .grafico { height: 240px; }
  .grafico-alto { height: 280px; }
}

/* --------------------------------------------------------------- etichette */
.etichetta-stato {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .12rem .5rem; border-radius: 999px;
  font-size: .72rem; font-weight: 650; white-space: nowrap;
}
.et-verde  { background: var(--verde-tenue);   color: var(--verde); }
.et-rosso  { background: var(--rosso-tenue);   color: var(--rosso); }
.et-ambra  { background: var(--ambra-tenue);   color: var(--ambra); }
.et-blu    { background: var(--blu-tenue);     color: var(--blu); }
.et-accento { background: var(--accento-tenue); color: var(--accento-forte); }
.et-grigia { background: var(--superficie-2);  color: var(--testo-tenue); }
.et-linea-gold { background: var(--gold-fondo); color: var(--gold-testo); }
.et-linea-gift { background: var(--gift-fondo); color: var(--gift-testo); }

/* --------------------------------------------------------------- tabelle */
.tabella-scorrevole { overflow-x: auto; overscroll-behavior-x: contain; }
/* Le intestazioni appiccicate non funzionavano.
   `overflow-x: auto` sul contenitore lo rende il piu' vicino antenato che
   scorre, e da quel momento `position: sticky` sul `th` si aggancia a lui -
   che in verticale non scorre affatto. Risultato: si scendeva di mille righe e
   i nomi delle colonne, con la riga dei filtri, sparivano. Non dava errore, e
   nessun test poteva vederlo.
   Il contenitore che scorre in tutte e due le direzioni rimette le cose a
   posto: dentro di lui il `th` ha qualcosa a cui aggrapparsi. */
.tabella-fissa {
  overflow: auto;
  max-height: calc(100dvh - var(--alt-testata) - 9rem);
  overscroll-behavior: contain;
}
table.dati { width: 100%; border-collapse: collapse; font-size: .84rem; }
table.dati th {
  position: sticky; top: 0; z-index: 1;
  text-align: left; font-weight: 500; font-size: .7rem;
  font-family: var(--display);
  text-transform: uppercase; letter-spacing: .09em; color: var(--testo-debole);
  background: var(--superficie-2);
  padding: .55rem .7rem; border-bottom: 1px solid var(--bordo);
  white-space: nowrap;
}
table.dati th.ordinabile { cursor: pointer; user-select: none; }
table.dati th.ordinabile:hover { color: var(--testo); }
table.dati td {
  padding: .5rem .7rem; border-bottom: 1px solid var(--bordo);
  vertical-align: top;
}
table.dati tbody tr:hover { background: var(--superficie-2); }
table.dati td.num, table.dati th.num { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; }
table.dati .tenue { color: var(--testo-tenue); }
.vuoto { padding: 2.5rem 1rem; text-align: center; color: var(--testo-tenue); }

/* Il gruppo di colonne a scomparsa non c'e' piu': grammi, prezzo al grammo e
   valore del metallo sono stati tolti dalla tabella (restano negli export e nel
   dettaglio di una riga), e le due che restano - Fee IGE e Scaglione - si
   vedono sempre. Con una sola colonna da nascondere, un interruttore costava
   piu' di quanto rendesse. */
table.dati .confine { color: var(--ambra); }

/* --------------------------------------------------------------- controlli */
.campo { display: flex; flex-direction: column; gap: .3rem; min-width: 0; }
.campo > label {
  font-family: var(--display);
  font-size: .68rem; font-weight: 500;
  letter-spacing: .09em; text-transform: uppercase;
  color: var(--testo-debole);
}
/* Il campo file resta come lo disegna il sistema operativo: dargli
   `width: 100%` qui dentro vinceva - per specificita' - su `.fuori-vista`, e
   il campo nascosto della pagina Fonti tornava largo quanto lo schermo,
   spingendo la pagina fuori di lato. */
input[type="text"], input[type="password"], input[type="date"],
input[type="number"], input[type="search"],
select, textarea {
  font: inherit; color: var(--testo);
  background: var(--superficie);
  border: 1px solid var(--bordo-forte);
  border-radius: var(--raggio-s);
  padding: .45rem .6rem;
  width: 100%;
  min-width: 0;
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--accento);
  box-shadow: 0 0 0 3px var(--accento-tenue);
}
.filtri {
  display: grid; gap: .75rem;
  grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
  align-items: end;
}
/* La griglia dei filtri, quando sta sotto il titolo della pagina invece che
   dentro un riquadro. Riga intera: accanto al titolo si spezzava in cinque piu'
   due, e un blocco sfrangiato accanto a un'intestazione si legge peggio di una
   fila sola sotto. Con tutta la larghezza a disposizione i sette controlli
   stanno in riga su uno schermo da scrivania e si impilano sul telefono. */
.intestazione-pagina .filtri-cruscotto {
  flex: 1 1 100%;
  grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr));
}

/* Scaricare e sfogliare sono due gruppi: vanno a capo interi, non si spezzano
   in mezzo lasciando «Excel» sopra e «CSV» sotto. */
.comandi-tabella { gap: .4rem 1.1rem; }

.bottone {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  font: inherit; font-weight: 500;
  padding: .45rem .9rem; border-radius: var(--raggio-s);
  border: 1px solid var(--bordo-forte);
  background: var(--superficie); color: var(--testo);
  cursor: pointer; text-decoration: none;
}
.bottone:hover { background: var(--superficie-2); text-decoration: none; }
.bottone:disabled { opacity: .5; cursor: not-allowed; }
/* Nero e non verde. Su questa pagina i pulsanti principali sono quelli che
   riscrivono l'archivio - «Ricalcola tutto», «Riattribuisci», «Carica tabella»,
   che sostituisce la tabella degli scaglioni: hanno il peso del nero della
   fascia, e lasciano il verde libero di voler dire una cosa sola. */
.bottone-primario {
  background: var(--ige-nero); border-color: var(--ige-nero); color: #fff;
}
.bottone-primario:hover { background: var(--ige-nero-2); border-color: var(--ige-nero-2); }
.bottone-pericolo { color: var(--rosso); border-color: var(--rosso); background: transparent; }
.bottone-piccolo { padding: .25rem .55rem; font-size: .8rem; }

/* --------------------------------------------------------------- messaggi */
/* `overflow-wrap: anywhere` non e' una precauzione teorica: dentro un avviso
   finisce spesso un percorso di file o un identificativo Stripe, che non
   contengono spazi e quindi non vanno a capo da soli. Uno solo, lungo,
   allargava tutta la pagina e la faceva scorrere di lato su un telefono. */
.avviso {
  /* Un blocco, non una riga flessibile. Dentro un avviso c'e' una frase, non
     un'icona e un testo: da contenitore flex ogni `<strong>` diventava un
     riquadro a se' e la frase si spezzava in mezzo alle parole in grassetto. */
  padding: .7rem .9rem; border-radius: var(--raggio-s);
  border: 1px solid transparent; margin-bottom: 1rem;
  min-width: 0; overflow-wrap: anywhere;
}
.avviso .bottone { margin-left: .5rem; vertical-align: baseline; }
.avviso-ok      { background: var(--verde-tenue); border-color: var(--verde); color: var(--verde); }
.avviso-errore  { background: var(--rosso-tenue); border-color: var(--rosso); color: var(--rosso); }
.avviso-attenzione { background: var(--ambra-tenue); border-color: var(--ambra); color: var(--ambra); }
.avviso-info    { background: var(--blu-tenue); border-color: var(--blu); color: var(--blu); }

/* --------------------------------------------------------------- login */
.schermata-accesso {
  min-height: 100dvh; display: grid; place-items: center; padding: 1.5rem;
  background:
    radial-gradient(900px 500px at 15% -10%, var(--accento-tenue), transparent 60%),
    var(--sfondo);
}
.scheda-accesso { width: 100%; max-width: 380px; }
.scheda-accesso .riquadro-corpo { padding: 1.6rem; }
/* Qui il marchio non sta sulla fascia nera: sta su una scheda bianca. Il file
   del logo ha «IGE» in bianco, quindi si posa su un rettangolo nero suo. */
.scheda-accesso .marchio {
  justify-content: center; margin-bottom: 1.4rem;
  flex-direction: column; gap: .7rem;
  color: var(--testo); font-size: 1.05rem;
}
.scheda-accesso .marchio .posa {
  display: block; padding: .7rem 1.2rem;
  background: var(--ige-nero); border-radius: var(--raggio);
}
.scheda-accesso .marchio-ige { height: 2.6rem; }
.scheda-accesso .campo { margin-bottom: .9rem; }
.scheda-accesso .bottone { width: 100%; margin-top: .4rem; }
.nota-riservato {
  margin-top: 1.2rem; text-align: center;
  font-size: .75rem; color: var(--testo-debole);
}

/* --------------------------------------------------------------- utilita' */
/* `flex-wrap: wrap` di serie. Una riga che non va a capo e' la causa piu'
   frequente di una pagina che sborda: bastano tre pulsanti e un'etichetta su
   uno schermo da 360px. Andando a capo non cambia niente dove c'e' spazio. */
.riga { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; min-width: 0; }
.riga-fine { justify-content: flex-end; }
.spazio { flex: 1; }
.tenue { color: var(--testo-tenue); }
.debole { color: var(--testo-debole); }
.piccolo { font-size: .8rem; }
.centro { text-align: center; }
.nascosto { display: none !important; }

/* --------------------------------------------------------------- telefono */
@media (max-width: 759px) {
  /* Solo il respiro sopra e sotto: rifare `padding` per intero cancellerebbe
     i margini di sicurezza dei fianchi, che qui servono piu' che altrove. */
  .pagina {
    padding-top: 1rem;
    padding-left: max(1rem, env(safe-area-inset-left));
    padding-right: max(1rem, env(safe-area-inset-right));
    padding-bottom: max(2rem, env(safe-area-inset-bottom));
  }
  h1 { font-size: 1.35rem; }

  /* Sotto i 16px iOS ingrandisce da solo la pagina appena si tocca un campo, e
     non la rimpicciolisce piu': si resta su una pagina zoomata senza aver
     chiesto niente. */
  input[type="text"], input[type="password"], input[type="date"],
  input[type="number"], input[type="search"], select, textarea {
    font-size: 16px;
  }

  /* Un dito non e' un puntatore. I pulsanti piccoli restano piccoli come
     scritta, ma diventano toccabili. */
  .bottone { min-height: 38px; }
  .bottone-piccolo { min-height: 34px; padding: .3rem .7rem; }
  .menu a { min-height: 42px; }
  /* `.fuori-vista` esclusa: quel campo non si tocca, lo pilota un pulsante. */
  input[type="file"]:not(.fuori-vista) { min-height: 38px; }
  input[type="checkbox"] { width: 18px; height: 18px; }
  /* Un pulsante che sembra un collegamento resta alto quanto una riga di
     testo: qui gli si da' l'altezza di un polpastrello senza cambiarne
     l'aspetto. */
  .collegamento { padding: .4rem 0; }

  /* Un elenco di pulsanti stretto in fondo alla riga si legge peggio di uno
     allineato a sinistra, dove comincia tutto il resto. */
  .riga-fine { justify-content: flex-start; }

  /* I comandi di una sezione, quando vanno a capo: larghi quanto il riquadro,
     invece che ognuno della propria misura. Due pulsanti impilati e sfalsati
     sembrano capitati li'; due pulsanti pieni sembrano una scelta. */
  .riquadro-testa > .riga { width: 100%; }
  .riquadro-testa > .riga > .bottone,
  .riquadro-testa > .bottone { flex: 1 1 12rem; width: 100%; }
}

/* --------------------------------------------- pannello banche partner */
/* Un pulsante che si comporta da collegamento: e' un'azione, quindi resta un
   <button> per la tastiera e i lettori di schermo, ma dentro una cella di
   tabella un bottone vero peserebbe troppo. */
.collegamento {
  background: none; border: none; padding: 0;
  font: inherit; font-size: .78rem;
  color: var(--blu); text-decoration: underline; cursor: pointer;
}
.collegamento:hover { color: var(--accento-forte); }

td.azioni { white-space: nowrap; }
td.azioni .bottone { margin-bottom: .2rem; }

dialog::backdrop { background: rgba(8, 12, 18, .55); }
/* Il pulsante che chiude il lavoro resta sempre a portata.
   Il modulo di una banca partner e' lungo: su un telefono «Salva» finiva sotto
   il bordo dello schermo, e per premerlo bisognava indovinare che la finestra
   scorreva. Adesso scorre il corpo e il piede sta fermo in fondo.
   `[open]`: senza, la regola di visualizzazione del browser che tiene nascoste
   le finestre chiuse verrebbe scavalcata, e sarebbero tutte aperte. */
dialog.riquadro { max-height: calc(100dvh - 2rem); }
dialog.riquadro[open] { display: flex; flex-direction: column; }
dialog.riquadro > form { display: flex; flex-direction: column; min-height: 0; }
/* `overscroll-behavior: contain` anche qui: arrivata in fondo, una finestra
   modale passava il gesto alla pagina che le sta dietro, che scorreva sotto
   il velo. */
dialog.riquadro > .riquadro-corpo,
dialog.riquadro > form > .riquadro-corpo {
  overflow: auto; min-height: 0; overscroll-behavior: contain;
}
.pie-modale {
  flex: none; overflow: visible;
  border-top: 1px solid var(--bordo);
}

/* La griglia dei dodici mesi cliccabili non c'e' piu': la sezione che la usava
   e' stata tolta dal pannello banca, e un test tiene fermo che non torni
   (`test_le_sezioni_vuote_non_ci_sono_piu`). Con lei se ne vanno trenta righe
   di stile che nessun elemento chiedeva piu'. */

/* ============================================ tabella movimenti, a larghezza piena */
/* `.pagina` sta a 1400px: giusto per una pagina di testo, sbagliato per una
   tabella di diciotto colonne. Rimpicciolendo lo zoom si ottenevano piu' pixel
   e due margini enormi, mentre le colonne restavano strette come prima. */
.pagina-larga { max-width: none; }


/* Densita': con molte colonne il respiro va tolto dai bordi, non dai contenuti. */
.pagina-larga table.dati { font-size: .8rem; }
.pagina-larga table.dati th,
.pagina-larga table.dati td { padding: .38rem .4rem; }

/* Le colonne di testo libero sono le uniche che possono crescere senza limite:
   un ordinante con la ragione sociale lunga allargava la tabella per tutti.
   Si troncano con i puntini, e il valore intero resta nel titolo della cella. */
.pagina-larga table.dati .tronca {
  max-width: 11rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Le colonne con dentro una sola etichetta corta - Gold, Gift, BPC, ABI -
   non hanno motivo di essere larghe quanto il filtro che ci sta sotto. */
.pagina-larga table.dati .stretta { width: 1%; white-space: nowrap; }

/* Le intestazioni possono andare a capo: `nowrap` su «Attribuita per» costringe
   la colonna a una larghezza che il contenuto non chiede. */
.pagina-larga table.dati thead th { white-space: normal; line-height: 1.15; }

/* Una precisazione dentro l'intestazione, senza pagarla in larghezza. Scritta
   com'e' il titolo - maiuscoletto spaziato - «(CALCOLATO)» sarebbe la parola
   piu' larga della riga e allargherebbe la colonna; qui va a capo da sola, piu'
   piccola e in tondo, e la colonna resta quella di prima. */
/* Il blocco dei dati grezzi in fondo al dettaglio di un movimento: nomi dei
   campi come li manda la sorgente, valori a larghezza fissa. Il testo va a capo
   perche' una causale bancaria e' lunga e non si taglia. */
.titolo-grezzi {
  margin: 1.4rem 0 .5rem; font-size: .82rem; font-weight: 500;
  font-family: var(--display);
  text-transform: uppercase; letter-spacing: .09em; color: var(--testo-debole);
  border-top: 1px solid var(--bordo); padding-top: .9rem;
}
.grezzo { font-size: .78rem; word-break: break-word; white-space: pre-wrap; }

table.dati th .th-nota {
  display: block; font-size: .64rem; font-weight: 400;
  font-family: var(--sans);
  text-transform: none; letter-spacing: 0; opacity: .8;
}

/* ------------------------------------------- filtri dentro le intestazioni */
/* Si filtra dove si legge. Il pannello sopra chiedeva di ricordare quale
   controllo governasse quale colonna: qui la domanda non si pone. */
/* 2,1rem e' il ripiego: la misura vera la scrive `movimenti.js` nella
   variabile, perche' l'altezza della riga sopra cambia da sola - una
   intestazione che va a capo, due colonne in meno per un `viewer`. */
table.dati tr.riga-filtri th {
  position: sticky; top: var(--alt-intestazione, 2.1rem); z-index: 1;
  padding: .25rem .4rem .35rem;
  text-transform: none; letter-spacing: 0; font-weight: 400;
  font-family: var(--sans);
  background: var(--superficie-2);
  border-bottom: 1px solid var(--bordo-forte);
  vertical-align: top;
}
table.dati tr.riga-filtri select {
  width: 100%; min-width: 4.2rem; max-width: 9rem;
  font-size: .72rem; padding: .15rem 1.1rem .15rem .3rem;
  background-position: right .2rem center;
}
table.dati tr.riga-filtri select + select { margin-top: .2rem; }
/* un filtro attivo si vede senza doverlo cercare */
table.dati tr.riga-filtri select.attivo {
  border-color: var(--accento); color: var(--accento-forte); font-weight: 600;
}

/* Su schermo stretto la riga dei filtri NON si nasconde: nasconderla
   toglierebbe la funzione proprio dove serve di piu'. La tabella scorre gia'
   in orizzontale, e i filtri scorrono con lei. */
@media (max-width: 759px) {
  /* Dentro la tabella il campo resta piccolo: qui l'ingrandimento di iOS non
     scatta, perche' il filtro e' un `select` gia' toccabile e allargarlo a
     16px farebbe una tabella larga il doppio. */
  table.dati tr.riga-filtri select { font-size: .72rem; }
}

/* Un elemento che serve al sistema operativo ma non all'occhio: `display:none`
   impedirebbe al browser di aprire la finestra di scelta file, quindi si
   nasconde senza toglierlo dal flusso. */
.fuori-vista {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}