/* Astra Mining: veste «Smeraldo e oro». Prima il telefono, poi il computer.
   Tutte le tinte stanno qui in :root (lo controlla test_veste). L'oro e la menta non reggono
   il testo su fondo chiaro: sono solo decorativi, il testo usa smeraldo e inchiostro.
   Manrope e' servito dall'app, nessuna richiesta a server esterni (licenza in fonts/OFL.txt). */
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url("fonts/manrope-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url("fonts/manrope-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* Barra laterale */
  --barra-alto: #0D4434;
  --barra-mezzo: #0A3328;
  --barra-basso: #072219;
  --barra-testo: #E6F2EC;
  --barra-secondario: #A9C9BB;
  --barra-in-arrivo: #8FB7A6;
  --barra-voce: #D3E6DD;
  --barra-velo: rgba(255, 255, 255, .10);
  --barra-velo-tenue: rgba(255, 255, 255, .06);
  --barra-bordo: rgba(255, 255, 255, .25);
  --gradiente-barra: linear-gradient(180deg, var(--barra-alto) 0%, var(--barra-mezzo) 55%, var(--barra-basso) 100%);
  /* Smeraldo e menta */
  --smeraldo: #0F7A5A;
  --smeraldo-scuro: #0B5E45;
  --menta: #2BB673;
  --menta-chiara: #6FD3A4;
  --menta-pallida: #A8E2C6;
  --velo-menta: #E3F4EC;
  --testo-chip: #0B6B4C;
  /* Oro */
  --oro: #E0B36D;
  --oro-scuro: #D9A54C;
  --oro-chiaro: #F2D19A;
  --testo-su-oro: #2A1C05;
  /* Fondi e bordi */
  --sfondo: #F3F7F5;
  --carta: #FFFFFF;
  --carta-tenue: #F6FAF8;
  --bordo: #E1EBE6;
  --bordo-campo: #CFE0D8;
  --righe: #EEF3F0;
  --pista: #E6EFEA;
  /* Testi */
  --inchiostro: #0E2620;
  --testo-secondario: #5B6F68;
  --testo-inverso: #FFFFFF;
  /* Stati */
  --ok: #16A06A;
  --neutro: #9DB3AA;
  --neutro-fondo: #E9EEEC;
  --neutro-testo: #4A5C55;
  --allarme: #A33A3A;
  --allarme-fondo: #FBEAEA;
  --attenzione: #6B5000;
  --attenzione-fondo: #FFF4CC;
  /* Carta principale */
  --gradiente-carta: linear-gradient(125deg, #0B3B2E 0%, #0F6B4F 55%, #2BB673 100%);
  --gradiente-tessera: linear-gradient(125deg, #0B3B2E 0%, #0F6B4F 100%);
  --ombra-carta: 0 12px 30px rgba(11, 59, 46, .25);
  --carta-etichetta: #CFEDE0;
  --carta-velo: rgba(7, 34, 25, .55);
  --gradiente-barre: linear-gradient(180deg, var(--menta) 0%, var(--smeraldo) 100%);
  --gradiente-avanzamento: linear-gradient(90deg, var(--menta), var(--smeraldo));
  --velo-pagina: rgba(7, 34, 25, .55);
  --ombra-riquadro: 0 6px 16px rgba(11, 59, 46, .15);
  --grafico-teorico: var(--oro-scuro);
  --grafico-reale: var(--smeraldo);
  --grafico-terza: var(--menta);
  --ombra-logo: 0 6px 16px rgba(0, 0, 0, .25);
  /* Misure che non cambiano col dispositivo */
  --raggio-chip: 999px;
  --altezza-intestazione: 72px;
  --larghezza-contenuto: 1600px;
  --riga-testa-modo: flex;
  --riga-modulo-modo: flex;
  --riga-allinea: stretch;
  --azione-file: 104px;
  --azione-casella: 140px;
  --azione-conferma: 150px;
  --azione-apri: 72px;

  /* Densita': qui i valori del telefono, sotto il blocco del computer */
  /* Testi */
  --testo-base: 15px;
  --testo-titolo: 1.5rem;
  --testo-titolo-cliente: 1.25rem;
  --testo-titolo-scheda: 1.5rem;
  --testo-carta: 1.0625rem;
  --testo-sezione: 1rem;
  --testo-logo: 1.0625rem;
  --testo-pu-totale: 2.375rem;
  --testo-pu-numero: 1.0625rem;
  --testo-tessera-valore: 1.375rem;
  --testo-tessera-titolo: 1.0625rem;
  --testo-campo: .9375rem;
  --testo-piccolo: .875rem;
  --testo-nota: .8125rem;
  --testo-mini: .75rem;
  --testo-chip-testata: .75rem;
  --testo-etichetta: .6875rem;
  --testo-verso: .625rem;
  /* Pagina e griglia */
  --margine-alto: 18px;
  --margine-lato: 16px;
  --margine-basso: 32px;
  --griglia-salto: 12px;
  --testa-salto: 12px;
  --testa-sotto: 14px;
  --titolo-sotto: 1rem;
  --cerca-larghezza: 320px;
  /* Carte */
  --raggio-carta: 18px;
  --raggio-campo: 10px;
  --raggio-riga: 14px;
  --carta-spazio: 16px;
  --carta-salto: 12px;
  --pu-spazio: 18px 20px;
  --pu-salto: 10px;
  --pu-velo-spazio: 10px 14px;
  --pu-velo-salto: 8px;
  --tessera-spazio: 14px 16px;
  --tessera-salto: 6px;
  --scheda-spazio: 28px 22px;
  --chip-spazio: 4px 10px;
  --chip-ssot-spazio: 8px 14px;
  /* Barra laterale */
  --larghezza-barra: min(280px, 85vw);
  --larghezza-barra-compressa: 56px;
  --barra-spazio: 16px 18px 20px;
  --barra-salto: 24px;
  --logo-segno: 30px;
  --raggio-logo: 8px;
  --logo-completo: 180px;
  --menu-salto: 4px;
  --voce-spazio: 8px 12px;
  --segnaposto-verticale: 9px;
  --separatore-margine: 10px 12px;
  --persona-spazio: 14px 10px;
  --avatar: 36px;
  /* Campi e pulsanti */
  --altezza-tocco: 44px;
  --campo-spazio: 8px 14px;
  --pulsante-spazio: 8px 16px;
  --pulsante-sopra: 20px;
  /* Elenchi e tabelle */
  --filtri-sotto: 16px;
  --filtri-salto: 12px;
  --testa-elenco-sotto: 12px;
  --riga-scheda-spazio: 14px;
  --riga-scheda-sotto: 8px;
  --cella-elenco: 10px 14px;
  --cella-dettaglio: 8px;
  /* Scheda cliente */
  --testata-spazio: 12px 14px;
  --testata-sotto: 12px;
  --testata-titolo-sotto: 6px;
  --chip-testata-spazio: 2px 8px;
  --linguetta-spazio: 8px 12px;
  --corpo-linguette: 22px 26px;
  --voce-verticale: 8px;
  /* Blocchi della home */
  --grafico-altezza: 150px;
  --grafico-salto: 6px;
  --barra-mese-massima: 44px;
  --barra-composta: 14px;
  --riga-home-verticale: 10px;
  --nazione-verticale: 6px;
  --nazione-salto: 6px;
  --dafare-spazio: 10px 12px;
  --dafare-salto: 8px;
}

/* DENSITA' DA COMPUTER. Per regolarla si cambia questo blocco e nient'altro: contiene solo
   variabili, e fuori da qui le misure che cambiano si leggono sempre dalle variabili. */
@media (min-width: 1024px) {
  :root {
    /* Le azioni dei pagamenti in colonne fisse */
    --riga-testa-modo: grid;
    --riga-modulo-modo: contents;
    --riga-allinea: center;
    /* Testi: nessuno sotto 11 px */
    --testo-base: 14px;
    --testo-titolo: 25px;
    --testo-titolo-cliente: 25px;
    --testo-titolo-scheda: 22px;
    --testo-carta: 15px;
    --testo-sezione: 14px;
    --testo-logo: 15px;
    --testo-pu-totale: 42px;
    --testo-pu-numero: 16px;
    --testo-tessera-valore: 26px;
    --testo-tessera-titolo: 18px;
    --testo-campo: 14px;
    --testo-piccolo: 13px;
    --testo-nota: 12px;
    --testo-mini: 11px;
    --testo-chip-testata: 12px;
    --testo-etichetta: 11px;
    --testo-verso: 11px;
    /* Pagina e griglia */
    --margine-alto: 24px;
    --margine-lato: 32px;
    --margine-basso: 32px;
    --griglia-salto: 16px;
    --testa-salto: 16px;
    --testa-sotto: 16px;
    --titolo-sotto: 12px;
    --cerca-larghezza: 280px;
    /* Carte */
    --raggio-carta: 16px;
    --raggio-campo: 8px;
    --raggio-riga: 12px;
    --carta-spazio: 18px 20px;
    --carta-salto: 10px;
    --pu-spazio: 18px 20px;
    --pu-salto: 8px;
    --pu-velo-spazio: 8px 12px;
    --pu-velo-salto: 4px;
    --tessera-spazio: 18px 20px;
    --tessera-salto: 8px;
    --scheda-spazio: 30px 28px;
    --chip-spazio: 3px 9px;
    --chip-ssot-spazio: 6px 12px;
    /* Barra laterale */
    --larghezza-barra: 208px;
    --barra-spazio: 14px 8px;
    --barra-salto: 20px;
    --logo-segno: 30px;
    --raggio-logo: 8px;
    --logo-completo: 220px;
    --menu-salto: 2px;
    --voce-spazio: 8px 12px;
    --segnaposto-verticale: 7px;
    --separatore-margine: 8px 12px;
    --persona-spazio: 10px 8px;
    --avatar: 32px;
    /* Campi e pulsanti: almeno 36 px */
    --altezza-tocco: 36px;
    --campo-spazio: 6px 12px;
    --pulsante-spazio: 6px 14px;
    --pulsante-sopra: 16px;
    /* Elenchi e tabelle: righe piu' basse del 20% circa */
    --filtri-sotto: 12px;
    --filtri-salto: 10px;
    --testa-elenco-sotto: 8px;
    --riga-scheda-spazio: 10px 12px;
    --riga-scheda-sotto: 6px;
    --cella-elenco: 6px 12px;
    --cella-dettaglio: 5px 8px;
    /* Scheda cliente */
    --testata-spazio: 14px 20px;
    --testata-sotto: 12px;
    --testata-titolo-sotto: 8px;
    --chip-testata-spazio: 3px 10px;
    --linguetta-spazio: 6px 10px;
    --corpo-linguette: 14px 20px;
    --voce-verticale: 6px;
    /* Blocchi della home */
    --grafico-altezza: 150px;
    --grafico-salto: 8px;
    --barra-mese-massima: 36px;
    --barra-composta: 10px;
    --riga-home-verticale: 6px;
    --nazione-verticale: 4px;
    --nazione-salto: 4px;
    --dafare-spazio: 8px 10px;
    --dafare-salto: 6px;
  }
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--sfondo);
  color: var(--inchiostro);
  font: 400 var(--testo-base)/1.5 Manrope, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-variant-numeric: tabular-nums;
}
a { color: var(--smeraldo); }
a:hover { color: var(--smeraldo-scuro); }
h1 { margin: 0 0 var(--titolo-sotto); font-size: var(--testo-titolo); font-weight: 800; line-height: 1.25; letter-spacing: -.01em; }
h2 { margin: 0; font-size: var(--testo-carta); font-weight: 800; }
:focus-visible { outline: 2px solid var(--smeraldo); outline-offset: 2px; }
.solo-lettore {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* Marchio */
.logo { display: flex; align-items: center; gap: 12px; color: inherit; text-decoration: none; }
.logo:hover { color: inherit; }
.logo-segno {
  display: flex; flex: none; align-items: center; justify-content: center;
  width: var(--logo-segno); height: var(--logo-segno); border-radius: var(--raggio-logo);
  background: var(--carta); box-shadow: var(--ombra-logo);
}
.logo-segno img { display: block; width: calc(var(--logo-segno) - 4px); height: auto; }
.logo-completo { display: block; width: var(--logo-completo); max-width: 100%; height: auto; }
.logo-testi { display: flex; flex-direction: column; min-width: 0; }
.logo-nome { font-size: var(--testo-logo); font-weight: 800; letter-spacing: .01em; }
.logo-ruolo { color: var(--barra-secondario); font-size: var(--testo-mini); }

/* Intestazione del telefono */
.intestazione {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; gap: 12px;
  height: var(--altezza-intestazione); padding: 14px 16px;
  background: linear-gradient(180deg, var(--barra-alto) 0%, var(--barra-mezzo) 100%);
  color: var(--testo-inverso);
}
.marchio { display: flex; flex: 1; align-items: center; gap: 10px; min-width: 0; color: inherit; font-size: var(--testo-logo); font-weight: 800; text-decoration: none; }
.marchio:hover { color: inherit; }
.apri-menu {
  display: flex; flex: none; flex-direction: column; justify-content: center; gap: 4px;
  width: 44px; height: 44px; padding: 11px;
  background: transparent; border: 1px solid var(--barra-bordo); border-radius: 12px; cursor: pointer;
}
.apri-menu span { display: block; height: 2px; border-radius: 1px; background: var(--testo-inverso); }
.avatar {
  display: flex; flex: none; align-items: center; justify-content: center;
  width: var(--avatar); height: var(--avatar); border-radius: 50%;
  background: var(--oro); color: var(--testo-su-oro); font-size: var(--testo-piccolo); font-weight: 800;
}

/* Barra laterale: a scomparsa sul telefono */
.barra {
  position: fixed; top: 0; bottom: 0; left: 0; z-index: 30;
  display: flex; flex-direction: column; gap: var(--barra-salto);
  width: var(--larghezza-barra); padding: var(--barra-spazio);
  background: var(--gradiente-barra); color: var(--barra-testo);
  transform: translateX(-100%); visibility: hidden; overflow-y: auto;
  transition: transform .15s ease, visibility .15s;
}
.barra.aperto { transform: none; visibility: visible; }
.barra :focus-visible { outline-color: var(--oro); }
.barra .logo { padding: 0 6px; }
.menu { display: flex; flex-direction: column; gap: var(--menu-salto); }
.menu ul { display: flex; flex-direction: column; gap: var(--menu-salto); margin: 0; padding: 0; list-style: none; }
.menu a {
  display: flex; align-items: center; gap: 12px;
  min-height: var(--altezza-tocco); padding: var(--voce-spazio);
  border-radius: var(--raggio-campo);
  color: var(--barra-voce); font-size: var(--testo-piccolo); font-weight: 600; text-decoration: none;
}
.menu-icona { display: block; flex: none; width: 18px; height: 18px; }
.menu-testo { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu a:hover { background: var(--barra-velo-tenue); color: var(--testo-inverso); }
.menu a.attiva { background: var(--barra-velo); box-shadow: inset 2px 0 0 var(--oro); color: var(--testo-inverso); font-weight: 700; }
.menu-separatore { height: 1px; margin: var(--separatore-margine); background: var(--barra-velo); }
.menu-gruppo {
  padding: 4px 12px; color: var(--barra-in-arrivo);
  font-size: var(--testo-etichetta); letter-spacing: .08em; text-transform: uppercase;
}
.segnaposto { display: flex; align-items: center; gap: 12px; padding: var(--segnaposto-verticale) 12px; color: var(--barra-in-arrivo); font-size: var(--testo-piccolo); cursor: default; }
.persona {
  display: flex; align-items: center; gap: 10px; margin-top: auto; padding: var(--persona-spazio);
  border-radius: 12px; background: var(--barra-velo-tenue);
}
.persona-testi { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.nome-utente { overflow: hidden; font-size: var(--testo-piccolo); font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.ruolo-utente { color: var(--barra-secondario); font-size: var(--testo-mini); }
.persona form { margin: 0; }
.pulsante-esci {
  min-height: var(--altezza-tocco); padding: 0 10px;
  background: transparent; color: var(--testo-inverso);
  border: 1px solid var(--barra-bordo); border-radius: 8px;
  font: inherit; font-size: var(--testo-nota); cursor: pointer;
}
.pulsante-esci:hover { background: var(--barra-velo); }
.pulsante-esci .menu-icona { display: none; }
/* Comprimere non ha senso sul telefono, dove il menu e' gia' un pannello che si chiude */
.comprimi {
  display: none; flex: none; align-items: center; gap: 12px;
  width: 100%; min-height: var(--altezza-tocco); padding: var(--voce-spazio);
  background: none; color: var(--barra-voce);
  border: 0; border-radius: var(--raggio-campo);
  font: inherit; font-size: var(--testo-piccolo); font-weight: 600; cursor: pointer;
}
.comprimi:hover { background: var(--barra-velo-tenue); color: var(--testo-inverso); }
.chiudi-menu {
  align-self: flex-end; flex: none; width: 44px; height: 44px; margin-bottom: -16px;
  background: none; border: 0; color: var(--testo-inverso); font-size: var(--testo-titolo); cursor: pointer;
}
.velo { position: fixed; inset: 0; z-index: 20; background: var(--velo-pagina); }
.contenuto { min-width: 0; padding: var(--margine-alto) var(--margine-lato) var(--margine-basso); }

/* Carte */
.carta {
  padding: var(--carta-spazio); background: var(--carta);
  border: 1px solid var(--bordo); border-radius: var(--raggio-carta);
}
.carta-errore { max-width: 560px; }
.carta-errore h1 { margin-bottom: .5rem; }

/* Chip */
.chip, .chip-neutro, .chip-oro, .chip-allarme {
  display: inline-flex; align-items: center; gap: 6px;
  padding: var(--chip-spazio); border-radius: var(--raggio-chip);
  font-size: var(--testo-nota); font-weight: 700; white-space: nowrap;
}
.chip { background: var(--velo-menta); color: var(--testo-chip); }
.chip-neutro { background: var(--neutro-fondo); color: var(--neutro-testo); }
.chip-oro { background: var(--attenzione-fondo); color: var(--attenzione); }
.chip-allarme { background: var(--allarme-fondo); color: var(--allarme); }
.chip-codice {
  display: inline-flex; justify-content: center; min-width: 34px; padding: 3px 6px;
  border-radius: 6px; background: var(--velo-menta); color: var(--testo-chip);
  font-size: var(--testo-mini); font-weight: 800; white-space: nowrap;
}

/* Pagine pubbliche */
.pagina-pubblica { min-height: 100vh; background: var(--gradiente-carta) fixed; }
.pubblica {
  display: flex; flex-direction: column; justify-content: center;
  width: 100%; max-width: 440px; min-height: 100vh; margin: 0 auto; padding: 32px 16px;
}
.scheda {
  padding: var(--scheda-spazio); background: var(--carta);
  border-radius: var(--raggio-carta); box-shadow: var(--ombra-carta);
}
.logo-pubblico { justify-content: center; margin-bottom: 24px; color: var(--inchiostro); }
.logo-pubblico:hover { color: var(--inchiostro); }
.scheda h1 { margin-bottom: 1rem; font-size: var(--testo-titolo-scheda); text-align: center; }
.modulo { display: flex; flex-direction: column; }
.modulo label { margin: 12px 0 4px; font-size: var(--testo-piccolo); font-weight: 600; }
.modulo input, .campo-ricerca input, .campo-filtro select, .campo-filtro input, .cerca-home input {
  width: 100%; min-height: var(--altezza-tocco); padding: var(--campo-spazio);
  background: var(--carta); color: var(--inchiostro);
  border: 1px solid var(--bordo-campo); border-radius: var(--raggio-campo);
  font: inherit; font-size: var(--testo-campo); font-weight: 400;
}
input::placeholder { color: var(--testo-secondario); opacity: 1; }
.pulsante {
  min-height: var(--altezza-tocco); margin-top: var(--pulsante-sopra); padding: var(--pulsante-spazio);
  background: var(--smeraldo); color: var(--testo-inverso);
  border: 0; border-radius: var(--raggio-campo);
  font: inherit; font-weight: 700; cursor: pointer;
}
.pulsante:hover { background: var(--smeraldo-scuro); }
.avviso, .conferma { margin: 0 0 12px; padding: 10px 14px; border-radius: var(--raggio-campo); }
.avviso { background: var(--allarme-fondo); color: var(--allarme); }
.conferma { background: var(--velo-menta); color: var(--testo-chip); }
.nota { margin: 4px 0 0; color: var(--testo-secondario); font-size: var(--testo-nota); }
.sotto { margin: 16px 0 0; }
.scheda .sotto { text-align: center; }

/* Elenchi: sul telefono ogni riga e' una scheda */
.filtri { margin-bottom: var(--filtri-sotto); }
.campo-ricerca, .campo-filtro { display: block; font-size: var(--testo-piccolo); font-weight: 600; }
.campo-ricerca input, .campo-filtro select, .campo-filtro input { display: block; margin-top: 4px; }
.altri-filtri { margin-top: 8px; }
.altri-filtri summary { min-height: var(--altezza-tocco); padding: 10px 0; color: var(--smeraldo); font-weight: 700; cursor: pointer; }
.griglia-filtri { display: grid; grid-template-columns: 1fr; gap: var(--filtri-salto); }
#risultati.htmx-request { opacity: .6; }
.testa-elenco { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: var(--testa-elenco-sotto); }
.testa-elenco form { margin: 0; }
.riepilogo { margin: 0; font-weight: 700; }
.pulsante-secondario {
  min-height: var(--altezza-tocco); padding: var(--pulsante-spazio);
  background: var(--carta); color: var(--inchiostro);
  border: 1px solid var(--bordo-campo); border-radius: var(--raggio-campo);
  font: inherit; font-weight: 600; cursor: pointer;
}
.pulsante-secondario:hover { background: var(--velo-menta); }
.ordina-telefono { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin: 0 0 12px; font-size: var(--testo-piccolo); }
.ordina-telefono a { display: inline-flex; align-items: center; min-height: var(--altezza-tocco); }
.ordina-telefono a[aria-current] { font-weight: 800; }
.vuoto { color: var(--testo-secondario); }
.etichetta {
  display: inline-block; padding: 0 8px; border-radius: var(--raggio-chip);
  background: var(--neutro-fondo); color: var(--neutro-testo); font-size: var(--testo-mini); font-weight: 700;
}
.solo-computer { display: none; }
.elenco { display: block; width: 100%; }
.elenco thead { display: none; }
.elenco tbody { display: block; }
.elenco tr {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px;
  margin-bottom: var(--riga-scheda-sotto); padding: var(--riga-scheda-spazio);
  background: var(--carta); border: 1px solid var(--bordo); border-radius: var(--raggio-riga);
}
.elenco td { display: block; min-width: 0; overflow-wrap: anywhere; }
.elenco td.solo-computer { display: none; }
.riga-apribile { position: relative; }
.riga-apribile:hover { border-color: var(--bordo-campo); background: var(--velo-menta); }
.riga-link { font-weight: 700; text-decoration: none; }
.riga-link::after { content: ""; position: absolute; inset: 0; }
.cella-nome { grid-column: 1; }
.cella-pu { grid-column: 2; grid-row: 1; white-space: nowrap; }
.cella-metodo { grid-column: 1 / -1; color: var(--testo-secondario); font-size: var(--testo-piccolo); }
.numero { text-align: right; font-variant-numeric: tabular-nums; }
.elenco-ordini .cella-data { grid-column: 1 / -1; color: var(--testo-secondario); font-size: var(--testo-piccolo); }
.elenco-ordini .cella-nome { grid-column: 1; grid-row: 2; }
.elenco-ordini .cella-nome a { font-weight: 700; text-decoration: none; }
.elenco-ordini .cella-pu { grid-column: 2; grid-row: 2; }
.elenco-ordini .cella-fonte, .elenco-ordini .cella-stato { grid-column: 1 / -1; font-size: var(--testo-piccolo); }
.elenco-ordini .cella-note { grid-column: 1 / -1; color: var(--testo-secondario); font-size: var(--testo-piccolo); }
.paginazione { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; margin-top: 12px; }
.paginazione a { display: inline-flex; align-items: center; min-height: var(--altezza-tocco); font-weight: 600; }
.verso { margin-left: 4px; font-size: var(--testo-verso); }

/* Scheda cliente */
.torna { margin: 0 0 8px; font-size: var(--testo-piccolo); }
.torna a { display: inline-flex; align-items: center; min-height: var(--altezza-tocco); font-weight: 600; }
.testata-cliente {
  position: sticky; top: var(--altezza-intestazione); z-index: 5;
  margin: 0 0 var(--testata-sotto); padding: var(--testata-spazio);
  background: var(--carta); border: 1px solid var(--bordo); border-radius: var(--raggio-carta);
}
.testata-cliente h1 { margin: 0 0 var(--testata-titolo-sotto); font-size: var(--testo-titolo-cliente); overflow-wrap: anywhere; }
.dati-testata { display: flex; flex-wrap: wrap; gap: 4px; margin: 0; padding: 0; list-style: none; }
.dati-testata .chip, .dati-testata .chip-neutro, .dati-testata .chip-allarme { padding: var(--chip-testata-spazio); font-size: var(--testo-chip-testata); }
.linguette { display: none; }
.sezione {
  margin-bottom: 8px; background: var(--carta);
  border: 1px solid var(--bordo); border-radius: var(--raggio-carta);
}
.sezione > summary { min-height: var(--altezza-tocco); padding: 12px 16px; font-weight: 700; cursor: pointer; }
.corpo-sezione { padding: 0 16px 16px; }
.corpo-sezione h2 { margin: 16px 0 8px; font-size: var(--testo-sezione); }
.conteggio {
  display: inline-block; min-width: 1.5em; padding: 0 6px;
  border-radius: var(--raggio-chip); background: var(--velo-menta); color: var(--testo-chip);
  font-size: var(--testo-mini); font-weight: 700; text-align: center;
}
.voci { margin: 0; }
.voce { padding: var(--voce-verticale) 0; border-bottom: 1px solid var(--righe); }
.voce:last-child { border-bottom: 0; }
.voce dt { color: var(--testo-secondario); font-size: var(--testo-nota); }
.voce dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.controllo { margin: 12px 0 0; padding: 10px 14px; border-radius: var(--raggio-campo); }
.controllo-ok { background: var(--velo-menta); color: var(--testo-chip); }
.controllo-attenzione { background: var(--attenzione-fondo); color: var(--attenzione); }
.dettaglio { display: block; width: 100%; }
.dettaglio thead { display: none; }
.dettaglio tbody { display: block; }
.dettaglio tr { display: block; padding: 8px 0; border-bottom: 1px solid var(--bordo); }
.dettaglio tr:last-child { border-bottom: 0; }
.dettaglio td { display: flex; justify-content: space-between; gap: 16px; padding: 2px 0; text-align: right; overflow-wrap: anywhere; }
.dettaglio td::before { content: attr(data-et); flex: none; max-width: 50%; color: var(--testo-secondario); font-size: var(--testo-nota); text-align: left; }

/* Home: intestazione */
.testa-home { display: flex; flex-direction: column; gap: var(--testa-salto); margin-bottom: var(--testa-sotto); }
.testa-home h1 { margin: 0; font-size: var(--testo-titolo); }
.data-oggi { color: var(--testo-secondario); font-size: var(--testo-nota); font-weight: 600; }
.saluto { display: flex; flex-direction: column; gap: 2px; }
.strumenti-home { display: flex; flex-direction: column; gap: 12px; }
.chip-ssot { align-self: flex-start; padding: var(--chip-ssot-spazio); white-space: normal; }
.chip-ssot::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.chip-ssot.chip::before { background: var(--ok); }
.cerca-home { margin: 0; }

/* Home: griglia. Sul telefono «Da fare» sale subito dopo i numeri, come nella proposta */
.griglia-home { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--griglia-salto); }
.blocco-pu, .blocco-fabbisogno, .blocco-mesi, .blocco-metodi, .blocco-dafare, .blocco-nazioni, .blocco-ordini { grid-column: 1 / -1; }
.blocco-pu, .blocco-mese, .blocco-vendite, .blocco-fabbisogno { order: 1; }
.blocco-dafare { order: 2; }
.blocco-mesi { order: 3; }
.blocco-metodi, .blocco-nazioni, .blocco-ordini { order: 4; }
.griglia-home > .carta { display: flex; flex-direction: column; gap: var(--carta-salto); min-width: 0; }
.non-disponibile { margin: 0; color: var(--testo-secondario); font-size: var(--testo-piccolo); }
.testa-carta { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; }
.testa-carta a { display: inline-flex; align-items: center; min-height: var(--altezza-tocco); font-size: var(--testo-nota); font-weight: 700; text-decoration: none; }
.sottotitolo { color: var(--testo-secondario); font-size: var(--testo-nota); }

/* Home: carta principale */
.blocco-pu {
  display: flex; flex-direction: column; gap: var(--pu-salto);
  padding: var(--pu-spazio); border-radius: var(--raggio-carta);
  background: var(--gradiente-carta); box-shadow: var(--ombra-carta); color: var(--testo-inverso);
}
.blocco-pu .pu-non-disponibile { color: var(--carta-etichetta); }
.pu-etichetta { color: var(--carta-etichetta); font-size: var(--testo-mini); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.pu-totale { font-size: var(--testo-pu-totale); font-weight: 800; line-height: 1.1; letter-spacing: -.02em; }
/* Il velo tiene il contrasto dove il gradiente arriva alla menta */
.pu-dettagli { display: flex; flex-direction: column; gap: var(--pu-velo-salto); padding: var(--pu-velo-spazio); border-radius: 12px; background: var(--carta-velo); }
.pu-numeri { display: flex; flex-wrap: wrap; gap: 6px 20px; margin: 0; padding: 0; list-style: none; font-size: var(--testo-piccolo); }
.pu-numeri strong { font-size: var(--testo-pu-numero); font-weight: 800; }
.pu-numeri .in-attivazione strong { color: var(--oro-chiaro); }
.pu-prossime { margin: 0; color: var(--oro-chiaro); font-size: var(--testo-nota); font-weight: 600; }

/* Home: carte piccole */
.tessera-etichetta { color: var(--testo-secondario); font-size: var(--testo-etichetta); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.griglia-home > .blocco-mese, .griglia-home > .blocco-vendite { gap: var(--tessera-salto); padding: var(--tessera-spazio); }
.tessera-titolo { font-size: var(--testo-tessera-titolo); font-weight: 800; line-height: 1.25; }
.tessera-valore { color: var(--smeraldo); font-size: var(--testo-tessera-valore); font-weight: 800; line-height: 1.2; }
.tessera-nota { color: var(--testo-secondario); font-size: var(--testo-mini); }
.griglia-home > .blocco-fabbisogno { gap: var(--griglia-salto); padding: var(--tessera-spazio); }
.fabbisogno-sintesi { display: flex; flex-direction: column; gap: var(--tessera-salto); min-width: 0; }
.fabbisogno-grafico { min-width: 0; }
.voce-spiega { display: block; color: var(--testo-secondario); font-size: var(--testo-mini); font-weight: 400; }
.voce-totale { font-weight: 800; }
.blocco-fabbisogno-mese .controllo { margin: 0 0 8px; }

/* Grafici a linee: una sola scala, le linee in SVG, punti e testi in HTML (grafico.py). */
.grafico { margin: 0; }
.grafico-legenda { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0 0 8px; padding: 0; list-style: none; color: var(--testo-secondario); font-size: var(--testo-mini); }
.grafico-legenda li { display: flex; align-items: center; gap: 6px; }
.grafico-campione { display: inline-block; flex: none; width: 14px; height: 3px; border-radius: 2px; margin-right: 6px; vertical-align: middle; }
.grafico-legenda .grafico-campione { margin-right: 0; }
.grafico-campione.serie-teorico { background: var(--grafico-teorico); }
.grafico-campione.serie-reale { background: var(--grafico-reale); }
.grafico-campione.serie-terza { background: var(--grafico-terza); }
.grafico-corpo { display: flex; height: 170px; padding-top: 18px; }
.grafico-scala { position: relative; flex: none; width: 40px; }
.grafico-scala span { position: absolute; right: 8px; transform: translateY(50%); color: var(--testo-secondario); font-size: var(--testo-etichetta); white-space: nowrap; }
.grafico-area { position: relative; flex: 1; min-width: 0; }
.grafico-riga { position: absolute; left: 0; right: 0; border-top: 1px solid var(--righe); }
.grafico-linee { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.grafico-linee polyline { fill: none; stroke-width: 2px; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.grafico-linee .serie-teorico { stroke: var(--grafico-teorico); }
.grafico-linee .serie-reale { stroke: var(--grafico-reale); }
.grafico-linee .serie-terza { stroke: var(--grafico-terza); }
.grafico-colonna { position: absolute; top: 0; bottom: 0; outline: none; }
.grafico-mirino { position: absolute; top: 0; bottom: 0; left: 50%; border-left: 1px solid var(--bordo-campo); opacity: 0; }
.grafico-punto { position: absolute; left: 50%; width: 8px; height: 8px; border-radius: 50%; transform: translate(-50%, -50%); box-shadow: 0 0 0 2px var(--carta); }
.grafico-punto.serie-teorico { background: var(--grafico-teorico); }
.grafico-punto.serie-reale { background: var(--grafico-reale); }
.grafico-punto.serie-terza { background: var(--grafico-terza); }
.grafico-etichetta { position: absolute; right: 50%; margin-top: -22px; color: var(--inchiostro); font-size: var(--testo-etichetta); font-weight: 700; white-space: nowrap; pointer-events: none; }
.grafico-riquadro { position: absolute; z-index: 5; top: 0; left: calc(50% + 10px); display: none; flex-direction: column; gap: 2px; width: max-content; max-width: 240px; padding: 8px 10px; border: 1px solid var(--bordo); border-radius: var(--raggio-campo); background: var(--carta); box-shadow: var(--ombra-riquadro); font-size: var(--testo-mini); }
.a-destra > .grafico-riquadro { left: auto; right: calc(50% + 10px); }
.grafico-colonna:hover > .grafico-riquadro, .grafico-colonna:focus > .grafico-riquadro { display: flex; }
.grafico-colonna:hover > .grafico-mirino, .grafico-colonna:focus > .grafico-mirino { opacity: 1; }
.grafico-mesi { display: flex; margin: 4px 0 0 40px; padding: 0; list-style: none; color: var(--testo-secondario); font-size: var(--testo-etichetta); }
.grafico-mesi li { flex: 1 1 0; min-width: 0; text-align: center; }
@media (max-width: 767px) { .grafico-alterna { visibility: hidden; } }

/* Pagina KPI */
.kpi-riga-testo { margin: 0; color: var(--testo-secondario); font-size: var(--testo-piccolo); }
.kpi-scenari { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--griglia-salto); }
.kpi-scenario { display: flex; flex-direction: column; gap: var(--tessera-salto); padding: var(--tessera-spazio); border-radius: 12px; background: var(--carta-tenue); }
.kpi-mesi { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px !important; font-weight: 400 !important; }
.kpi-mesi a { text-decoration: none; }
.tabella-kpi { width: 100%; border-collapse: collapse; font-size: var(--testo-nota); }
.tabella-kpi th, .tabella-kpi td { padding: 6px 8px; border-bottom: 1px solid var(--righe); text-align: left; white-space: nowrap; }
.tabella-kpi thead th { color: var(--testo-secondario); font-weight: 700; white-space: normal; vertical-align: bottom; min-width: 72px; }
.tabella-kpi .numero { text-align: right; }
.tabella-kpi .forte, .tabella-kpi tfoot td, .tabella-kpi tfoot th { font-weight: 800; }
.tabella-kpi th:first-child { position: sticky; left: 0; min-width: 0; background: var(--carta); }
@media (min-width: 768px) { .kpi-scenari { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.avanzamento { height: 8px; overflow: hidden; border-radius: 4px; background: var(--pista); }
.avanzamento div { height: 100%; background: var(--gradiente-avanzamento); }

/* Home: PU attivate per mese */
.scelta-anno { display: flex; flex-wrap: wrap; gap: 4px; margin: 0; padding: 0; list-style: none; }
.scelta-anno a {
  display: inline-flex; align-items: center; min-height: var(--altezza-tocco); padding: 0 12px;
  border-radius: var(--raggio-chip); font-size: var(--testo-nota); font-weight: 700; text-decoration: none;
}
.scelta-anno a:hover { background: var(--velo-menta); }
.scelta-anno a[aria-current] { background: var(--velo-menta); color: var(--testo-chip); }
.barre-mesi { display: flex; gap: var(--grafico-salto); height: var(--grafico-altezza); margin: 0; padding: 0; list-style: none; }
.mese-barra { display: flex; flex: 1; flex-direction: column; gap: 4px; min-width: 0; height: 100%; }
.mese-pista { display: flex; flex: 1; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; min-height: 0; }
.mese-valore { color: var(--neutro-testo); font-size: var(--testo-etichetta); font-weight: 700; white-space: nowrap; }
.mese-colonna { flex: none; width: 100%; max-width: var(--barra-mese-massima); min-height: 2px; border-radius: 6px 6px 3px 3px; background: var(--gradiente-barre); }
.mese-chiaro .mese-colonna { background: linear-gradient(180deg, var(--menta-pallida) 0%, var(--menta-chiara) 100%); }
.mese-nome { color: var(--testo-secondario); font-size: var(--testo-mini); text-align: center; }
.mese-vecchio { display: none; }
.nota-mesi { margin: 0; color: var(--testo-secondario); font-size: var(--testo-mini); }

/* Home: come vengono pagati */
.barra-composta { display: flex; height: var(--barra-composta); overflow: hidden; border-radius: 7px; background: var(--pista); }
.serie-1 { background: var(--smeraldo); }
.serie-2 { background: var(--menta-chiara); }
.serie-3 { background: var(--oro-scuro); }
.serie-4 { background: var(--neutro); }
.lista-home { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.riga-home { display: flex; align-items: center; gap: 12px; padding: var(--riga-home-verticale) 0; border-bottom: 1px solid var(--righe); }
.riga-home:last-child { border-bottom: 0; }
.pallino { flex: none; width: 12px; height: 12px; border-radius: 50%; }
.riga-testi { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.riga-titolo { font-size: var(--testo-piccolo); font-weight: 700; overflow-wrap: anywhere; }
.riga-titolo a { text-decoration: none; }
.riga-nota { color: var(--testo-secondario); font-size: var(--testo-mini); }
.riga-destra { display: flex; flex: none; flex-direction: column; align-items: flex-end; }
.riga-forte { font-size: var(--testo-campo); font-weight: 800; white-space: nowrap; }

/* Home: dove sono i clienti */
.nazione { display: flex; flex-direction: column; gap: var(--nazione-salto); padding: var(--nazione-verticale) 0; }
.nazione-riga { display: flex; align-items: center; gap: 10px; }
.nazione-nome { flex: 1; min-width: 0; font-size: var(--testo-piccolo); font-weight: 600; }
.nazione-pu { font-size: var(--testo-piccolo); font-weight: 800; }
.nazione-quota { width: 52px; color: var(--testo-secondario); font-size: var(--testo-mini); text-align: right; }
.barra-nazione { height: 6px; overflow: hidden; border-radius: 3px; background: var(--pista); }
.barra-nazione div { height: 100%; border-radius: 3px; background: var(--gradiente-avanzamento); }

/* Home: da fare */
.voci-dafare { display: flex; flex-direction: column; gap: var(--dafare-salto); margin: 0; padding: 0; list-style: none; }
.voce-dafare { position: relative; display: flex; align-items: flex-start; gap: 12px; padding: var(--dafare-spazio); border-radius: 12px; background: var(--carta-tenue); }
.voce-dafare.con-link { min-height: var(--altezza-tocco); }
.voce-dafare.con-link:hover { background: var(--velo-menta); }
.voce-dafare a { color: var(--inchiostro); text-decoration: none; }
.voce-dafare a::after { content: ""; position: absolute; inset: 0; border-radius: 12px; }
.voce-dafare a:hover { color: var(--smeraldo-scuro); }
.segno { flex: none; width: 10px; height: 10px; margin-top: 5px; border-radius: 50%; }
.tono-allarme { background: var(--allarme); }
.tono-attenzione { background: var(--oro-scuro); }
.tono-neutro { background: var(--neutro); }
.tono-ok { background: var(--ok); }
.voce-allarme { background: var(--allarme-fondo); }
.voce-allarme .riga-titolo { color: var(--allarme); }

/* Da 768 px cambia l'impaginazione: la barra e' una colonna fissa e l'intestazione non serve.
   Qui solo disposizione: le misure arrivano dalle variabili. */
@media (min-width: 768px) {
  .intestazione, .chiudi-menu, .velo { display: none; }
  .impaginato { display: flex; min-height: 100vh; }
  .barra {
    position: sticky; top: 0; z-index: auto;
    flex: 0 0 var(--larghezza-barra); height: 100vh;
    transform: none; visibility: visible; transition: none;
  }
  .comprimi { display: flex; }

  /* Il menu compresso: sole icone. I testi restano per i lettori di schermo, i title per il mouse */
  html.menu-compresso { --larghezza-barra: var(--larghezza-barra-compressa); }
  .menu-compresso .barra { overflow-x: hidden; }
  .menu-compresso .barra .logo { justify-content: center; padding: 0; }
  .menu-compresso .barra .menu-testo, .menu-compresso .logo-testi, .menu-compresso .persona-testi {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }
  .menu-compresso .menu a, .menu-compresso .segnaposto, .menu-compresso .comprimi { justify-content: center; padding-inline: 0; }
  .menu-compresso .menu-gruppo { display: none; }
  .menu-compresso .persona { flex-direction: column; gap: 8px; padding: 8px 0; }
  .menu-compresso .pulsante-esci { display: flex; align-items: center; justify-content: center; width: var(--altezza-tocco); padding: 0; }
  .menu-compresso .pulsante-esci .menu-icona { display: block; }
  .menu-compresso .comprimi .menu-icona { transform: rotate(180deg); }

  /* Il contenuto si ferma a --larghezza-contenuto, margini esclusi, e resta centrato */
  .contenuto { flex: 1; max-width: calc(var(--larghezza-contenuto) + 2 * var(--margine-lato)); margin-inline: auto; }

  .testata-cliente { top: 0; }
  .dati-testata { gap: 6px 8px; }
  .con-linguette .linguette {
    display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 12px;
    border-bottom: 1px solid var(--bordo-campo);
  }
  .linguette button {
    min-height: var(--altezza-tocco); padding: var(--linguetta-spazio);
    background: none; color: var(--inchiostro);
    border: 0; border-bottom: 3px solid transparent;
    font: inherit; font-weight: 600; cursor: pointer;
  }
  .linguette button[aria-pressed="true"] { color: var(--smeraldo-scuro); font-weight: 800; border-bottom-color: var(--oro); }
  .con-linguette .sezione > summary { display: none; }
  .con-linguette .corpo-sezione { padding: var(--corpo-linguette); }
  .voci { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 0 24px; }
  .voce:last-child { border-bottom: 1px solid var(--righe); }
  .dettaglio { display: table; border-collapse: collapse; }
  .dettaglio thead { display: table-header-group; }
  .dettaglio tbody { display: table-row-group; }
  .dettaglio tr { display: table-row; padding: 0; border: 0; }
  .dettaglio th, .dettaglio td { display: table-cell; padding: var(--cella-dettaglio); font-size: var(--testo-piccolo); text-align: left; border-bottom: 1px solid var(--righe); vertical-align: top; }
  .dettaglio th { color: var(--testo-secondario); font-size: var(--testo-nota); font-weight: 700; }
  .dettaglio td::before { content: none; }
  .dettaglio td.numero { text-align: right; white-space: nowrap; }
  .dettaglio td.breve { white-space: nowrap; }
  .dettaglio td.testo-lungo { min-width: 10ch; overflow-wrap: anywhere; }

  .griglia-filtri { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); padding-bottom: 4px; }
  .altri-filtri summary { display: none; }
  .altri-filtri { margin-top: 12px; }

  /* Home */
  .testa-home { flex-direction: row; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; }
  .strumenti-home { flex-direction: row; flex-wrap: wrap; align-items: center; }
  .cerca-home input { width: var(--cerca-larghezza); max-width: 100%; }
  .chip-ssot { align-self: center; }
  .mese-vecchio { display: flex; }
}

/* Da qui la griglia della proposta: 4 colonne sopra, 3 sotto */
@media (min-width: 768px) {
  .griglia-home > .blocco-fabbisogno { display: grid; grid-template-columns: minmax(220px, 1fr) minmax(0, 2fr); gap: 24px; align-items: start; }
}
@media (min-width: 1100px) {
  .griglia-home { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .blocco-pu { grid-column: span 6; }
  .blocco-mese, .blocco-vendite { grid-column: span 3; }
  .blocco-mesi { grid-column: span 8; }
  .blocco-metodi { grid-column: span 4; }
  .blocco-dafare, .blocco-nazioni, .blocco-ordini { grid-column: span 4; }
  .blocco-pu, .blocco-mese, .blocco-vendite, .blocco-fabbisogno, .blocco-mesi, .blocco-metodi, .blocco-dafare, .blocco-nazioni, .blocco-ordini { order: 0; }
}

/* Da qui gli elenchi sono tabelle: sotto, accanto alla barra, non ci starebbero */
@media (min-width: 1200px) {
  .solo-telefono, .ordina-telefono { display: none; }
  /* Tabella in una carta, intestazione fissa */
  .elenco {
    display: table; border-collapse: separate; border-spacing: 0;
    background: var(--carta); border: 1px solid var(--bordo); border-radius: var(--raggio-carta);
  }
  .elenco thead { display: table-header-group; }
  .elenco tbody { display: table-row-group; }
  .elenco tr { display: table-row; margin: 0; padding: 0; background: none; border: 0; border-radius: 0; }
  .elenco th, .elenco td, .elenco td.solo-computer {
    display: table-cell; padding: var(--cella-elenco); text-align: left;
    border-bottom: 1px solid var(--righe); vertical-align: middle;
  }
  .elenco tbody tr:last-child td { border-bottom: 0; }
  .elenco th {
    position: sticky; top: 0; z-index: 2;
    background: var(--carta); color: var(--testo-secondario);
    font-size: var(--testo-nota); font-weight: 700; white-space: nowrap;
    border-bottom: 1px solid var(--bordo);
  }
  .elenco th:first-child { border-top-left-radius: var(--raggio-carta); }
  .elenco th:last-child { border-top-right-radius: var(--raggio-carta); }
  .elenco th a { color: inherit; text-decoration: none; }
  .elenco th.numero, .elenco td.numero { text-align: right; }
  .elenco tbody tr:hover { background: var(--velo-menta); }
  .riga-apribile:hover { background: var(--velo-menta); }
  .cella-metodo { color: inherit; font-size: inherit; }
  .elenco-ordini .cella-data, .elenco-ordini .cella-fonte, .elenco-ordini .cella-stato { color: inherit; font-size: inherit; }
  .elenco-ordini .cella-note { color: var(--testo-secondario); font-size: inherit; }
}

/* Ciclo mensile */
.griglia-ciclo { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--griglia-salto); margin-bottom: var(--griglia-salto); }
.blocco-ciclo { display: flex; flex-direction: column; gap: var(--carta-salto); min-width: 0; margin-bottom: var(--griglia-salto); }
.griglia-ciclo > .blocco-ciclo { margin-bottom: 0; }
.contenuto > .controllo { margin: 0 0 var(--griglia-salto); }
.blocco-ciclo h2 { margin: 0; font-size: var(--testo-sezione); }
.blocco-ciclo .sotto { margin: 0; }
.pulsante-riga { display: inline-flex; align-items: center; justify-content: center; width: auto; margin: 0; text-decoration: none; }
.modulo-ciclo { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--griglia-salto); align-items: end; }
.riferimento-cambio { display: flex; flex-direction: column; gap: 2px; }
.fuori-banda { grid-column: 1 / -1; }
.fuori-banda .avviso { margin-bottom: 8px; }
.spunta { display: flex; align-items: center; gap: 8px; min-height: var(--altezza-tocco); font-weight: 700; }
.spunta input { width: 20px; height: 20px; accent-color: var(--smeraldo); }
.controlli-ciclo .avviso { margin: 0; }
.nomi-controllo { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 6px 0 0; padding: 0; list-style: none; }
.nomi-controllo a { color: inherit; }
.ordina-ciclo { margin-bottom: 4px; }
.ordina-colonna { padding: 0; border: 0; background: none; color: inherit; font: inherit; font-weight: 700; cursor: pointer; }
.tabella-ciclo th[aria-sort="ascending"] .ordina-colonna::after { content: " \25B2"; }
.tabella-ciclo th[aria-sort="descending"] .ordina-colonna::after { content: " \25BC"; }
.tabella-scorre { overflow-x: auto; }
.stato-interruttori { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 var(--griglia-salto); }
.titolo-sezione { margin: 0 0 var(--griglia-salto); scroll-margin-top: 72px; }
.modulo-conferma { display: flex; flex-direction: column; gap: var(--griglia-salto); }
.modulo-pagamento { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.pulsanti-conferma { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.azioni-lotto { display: flex; flex-wrap: wrap; gap: 8px; }
.riga-evidenziata { background: var(--allarme-fondo); }
.cella-wallet { overflow-wrap: anywhere; }
.griglia-modifica { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--griglia-salto); }
.errore-campo { display: block; margin-top: 4px; color: var(--allarme); font-weight: 700; }
.campo-filtro input[aria-invalid="true"], .campo-filtro select[aria-invalid="true"] { border-color: var(--allarme); }
.azioni-scheda { margin: 8px 0 0; }
.testo-nota-interna { white-space: pre-wrap; overflow-wrap: anywhere; }
.griglia-area { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--griglia-salto); margin: 12px 0; }
/* Il kit riusa la carta della home. Sulle schede strette la menta del gradiente finirebbe sotto
   il testo e il contrasto non reggerebbe: qui il gradiente si ferma allo smeraldo. */
.griglia-area > .blocco-pu { grid-column: auto; order: 0; min-width: 0; justify-content: space-between; padding: var(--tessera-spazio); background: var(--gradiente-tessera); }
.griglia-area .pu-totale { color: var(--oro-chiaro); font-size: var(--testo-tessera-valore); overflow-wrap: anywhere; }
.griglia-area .pu-dettagli { padding: 6px 10px; }
.griglia-area .pu-etichetta, .griglia-area .pu-prossime { overflow-wrap: anywhere; }
.senza-a-capo { white-space: nowrap; }
.segno-cambio { display: block; color: var(--attenzione); font-weight: 700; }
.scelta-metodi { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: var(--griglia-salto); margin: 0; padding: 0; border: 0; min-width: 0; }
.scelta-metodi legend { margin-bottom: 8px; padding: 0; font-weight: 700; }
.scelta-metodo { display: flex; align-items: flex-start; gap: 10px; min-width: 0; min-height: var(--altezza-tocco); padding: var(--tessera-spazio); border: 1px solid var(--bordo-campo); border-radius: var(--raggio-riga); background: var(--carta); cursor: pointer; }
.scelta-metodo input { flex: none; width: 20px; height: 20px; margin: 0; accent-color: var(--smeraldo); }
.scelta-metodo:has(input:checked) { border-color: var(--smeraldo); background: var(--velo-menta); }
.scelta-spenta { background: var(--neutro-fondo); cursor: not-allowed; }
.scelta-testo { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; }
.blocco-metodo { display: flex; flex-direction: column; gap: 8px; }
.valore-oro { display: inline-block; padding: 1px 8px; border-radius: var(--raggio-chip); background: var(--oro-chiaro); color: var(--testo-su-oro); font-weight: 800; }
.tessera-area { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.tessera-area .tessera-valore { overflow-wrap: anywhere; }
.piede-area { margin-top: 24px; color: var(--testo-secondario); font-size: var(--testo-nota); }
.piede-area p { margin: 0 0 12px; }
.tessera-risultato { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: var(--griglia-salto); margin: 12px 0; }
.valore-grande { overflow-wrap: anywhere; }
.avvertenza-proiezioni { font-weight: 600; }
.griglia-scenari { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: var(--griglia-salto); }
.griglia-scenari .kpi-scenario { min-width: 0; }
.trimestre { border-bottom: 1px solid var(--righe); padding: 8px 0; }
.trimestre summary { display: flex; flex-direction: column; gap: 2px; cursor: pointer; list-style-position: inside; }
.scegli-scheda { margin: 0 0 12px; max-width: 420px; }
.fascia-anteprima { position: sticky; top: 0; z-index: 5; }
.mostra-cf summary { cursor: pointer; }
.scegli-lingua { display: flex; justify-content: center; gap: 4px; margin: 0 0 12px; }
.scegli-lingua button { min-height: 32px; padding: 4px 10px; border: 0; border-radius: 8px; background: none; color: var(--testo-secondario); font: inherit; font-size: var(--testo-nota); cursor: pointer; }
.scegli-lingua button[aria-current] { color: var(--smeraldo); font-weight: 800; text-decoration: underline; }
.avviso-anteprima { margin: 0 0 var(--griglia-salto); }
.tabella-riepilogo + .controllo, .tabella-riepilogo ~ form { margin-top: var(--griglia-salto); }
.stato-scheda { white-space: normal; overflow-wrap: anywhere; }
.blocco-ciclo .testa-elenco { flex-wrap: wrap; gap: 8px; }
.elenco-scheda summary { cursor: pointer; font-weight: 700; min-height: var(--altezza-tocco); display: flex; align-items: center; }
.campo-filtro textarea {
  display: block; width: 100%; margin-top: 4px; padding: 10px 12px; font: inherit; font-weight: 400; resize: vertical;
  border: 1px solid var(--bordo-campo); border-radius: var(--raggio-campo); background: var(--carta); color: var(--inchiostro);
}
.campo-filtro textarea[aria-invalid="true"] { border-color: var(--allarme); }
.gruppo-canali { margin: 0; padding: 0; border: 0; display: flex; flex-wrap: wrap; gap: 8px 24px; }
.gruppo-canali legend { padding: 0 0 6px; font-size: var(--testo-piccolo); font-weight: 600; }
.dettaglio td.cella-breve { white-space: nowrap; }
.chip-riga { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.anteprima-messaggio { padding: 14px 16px; border: 1px solid var(--bordo-campo); border-radius: var(--raggio-campo); overflow-wrap: anywhere; }
.anteprima-messaggio p { margin: 0 0 10px; }
.anteprima-messaggio p:last-child { margin-bottom: 0; }
.anteprima-oggetto { margin: 0 0 6px; }
.testo-notifica { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; text-align: left; }
.riga-pagamento { margin-bottom: var(--griglia-salto); padding: 0; gap: 0; scroll-margin-top: 72px; }
/* Le azioni delle righe: al telefono e fino a 1023 px impilate sotto il riassunto; da 1024 px quattro
   colonne fisse, le stesse per tutte, cosi' i pulsanti stanno in fila da una riga all'altra. Lo decidono
   le variabili --riga-*-modo: in colonna grid-column e grid-row non contano. In griglia il modulo
   sparisce (display: contents) e casella e conferma ne diventano figlie dirette. */
.riga-testa {
  display: var(--riga-testa-modo); flex-direction: column; gap: 8px 24px; padding: 12px 16px;
  grid-template-columns: minmax(0, 1fr) auto; align-items: var(--riga-allinea);
}
.riga-riassunto { min-width: 0; }
.riga-titoli { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; min-width: 0; }
.riga-titoli h3 { margin: 0; font-size: var(--testo-sezione); }
.riga-numeri { margin: 0; color: var(--testo-secondario); font-size: var(--testo-nota); font-variant-numeric: tabular-nums; }
.riga-azioni {
  display: var(--riga-testa-modo); flex-direction: column; gap: 8px 12px; min-width: 0; align-items: var(--riga-allinea);
  grid-template-columns: var(--azione-file) var(--azione-casella) var(--azione-conferma) var(--azione-apri);
}
.riga-azioni > *, .riga-azioni .modulo-pagamento > * { grid-row: 1; }
.azione-file { grid-column: 1; }
.riga-azioni .spunta { grid-column: 2; }
.riga-azioni .pulsante-riga { grid-column: 3; }
.azione-larga { grid-column: 2 / 4; }
.pulsante-apri { grid-column: 4; }
.riga-azioni form { margin: 0; }
.riga-azioni .pulsante-riga, .riga-azioni .pulsante-secondario { width: 100%; }
.riga-azioni a.pulsante-secondario { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.riga-azioni .modulo-pagamento { display: var(--riga-modulo-modo); flex-direction: column; align-items: stretch; gap: 8px; }
.riga-azioni .spunta input { flex: none; }
.riga-azioni .spunta { font-weight: 600; font-size: var(--testo-nota); }
.riga-azioni .nota { margin: 0; }
.riga-scaricato { margin: 0; color: var(--testo-secondario); font-size: var(--testo-mini); overflow-wrap: anywhere; }
.riga-pagamento > .controllo { margin: 12px 16px 0; }
#decisioni-punti, #decisioni-btc, #decisioni-gp { scroll-margin-top: 72px; }
.righe-chiuse .riga-pagamento:not(:target) .riga-pannello { display: none; }
.riga-pannello { display: flex; flex-direction: column; gap: var(--carta-salto); padding: 12px 16px 16px; border-top: 1px solid var(--bordo-campo); min-width: 0; }
.riga-pannello[hidden] { display: none; }
.riga-pannello h4 { margin: 0 0 6px; font-size: var(--testo-nota); }
.parte-pannello { min-width: 0; }
.decisioni { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; }
.decisione { padding: 10px 12px; border-radius: var(--raggio-campo); background: var(--allarme-fondo); }
.decisione-calma { background: var(--neutro-fondo); }
.decisione-chi { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; margin-bottom: 6px; }
.decisione form { display: flex; flex-direction: column; gap: 4px; margin: 0; }
.decisione .spunta { min-height: 32px; font-weight: 400; align-items: flex-start; }
.decisione .spunta input { flex: none; margin-top: 2px; }
.decisione .pulsante-secondario { align-self: flex-start; }
.azioni-lotto form { margin: 0; }
.avvia-lotto { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.avvia-lotto .spunta { min-height: 32px; font-weight: 400; font-size: var(--testo-nota); }
@media (min-width: 768px) {
  .griglia-ciclo { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .modulo-ciclo { grid-template-columns: repeat(3, minmax(0, 1fr)) auto; }
  .griglia-modifica { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .campo-largo { grid-column: 1 / -1; }
  .solo-telefono-blocco { display: none; }
  .tabella-ciclo th.numero { text-align: right; }
}
@media (min-width: 1280px) {
  :root { --azione-file: 128px; --azione-casella: 190px; --azione-conferma: 190px; --azione-apri: 84px; }
}
@media (min-width: 1200px) {
  .griglia-ciclo { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .griglia-ciclo-due { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}