/* Statistiche JTD — foglio del solo lato consultazione.
   Si carica DOPO app.css e non riscrive nessuna delle sue regole: tutto quello
   che sta qui e' racchiuso in `body.client`, che esiste solo sulle due pagine
   del lato client. L'area di amministrazione resta identica a prima.

   Colori, font e loghi sono quelli di app.css: qui cambiano solo gerarchia,
   allineamenti, misure e movimento. */

body.client {
  /* Altezza reale della barra comandi, misurata da etichette.js: serve a far
     agganciare l'intestazione della tabella subito sotto la barra invece che
     sotto di lei. */
  --comandi-h: 60px;
  --gutter: 32px;
  --largo: 1560px;
}

/* ==========================================================================
   1 · FASCIA DATI — la banda navy che apre la pagina
   Marchio, titolo, selettore di piattaforma e numeri di sintesi stanno tutti
   dentro la stessa banda: si legge un blocco solo invece di quattro elementi
   sparsi, e il bianco sotto resta interamente ai dati.
   ========================================================================== */

.fascia {
  color: #fff;
  background-color: var(--navy-800);
  background-image:
    linear-gradient(rgb(255 255 255 / 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgb(255 255 255 / 0.05) 1px, transparent 1px);
  background-size: 28px 28px;
  background-position: -1px -1px;
  border-bottom: 1px solid var(--navy-900);
}

.fascia-interno {
  max-width: var(--largo);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* riga del marchio */
.fascia-testa {
  height: 62px;
  display: flex;
  align-items: center;
  gap: 14px;
  border-bottom: 1px solid rgb(255 255 255 / 0.1);
}
.fascia-testa .marchio img { height: 26px; }
.fascia-testa .marchio-titolo { color: rgb(255 255 255 / 0.6); }

/* titolo e sottotitolo */
.fascia-titolo { padding: 30px 0 0; display: flex; align-items: flex-end;
  justify-content: space-between; gap: 40px; flex-wrap: wrap; }
.fascia-titolo h1 {
  font-size: 29px;
  font-weight: 700;
  letter-spacing: -0.022em;
  line-height: 1.15;
}
.fascia-titolo .sottotitolo {
  color: rgb(255 255 255 / 0.58);
  font-size: 14px;
  margin-top: 9px;
  max-width: 62ch;
  text-wrap: pretty;
}
.fascia-data {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgb(255 255 255 / 0.42);
  padding-bottom: 4px;
  white-space: nowrap;
}

/* ==========================================================================
   2 · SELETTORE DI PIATTAFORMA sulla banda
   Allineato a sinistra come tutto il resto (prima era centrato, e rompeva
   l'unico asse verticale della pagina). Loghi piu' grandi: sono l'elemento
   che dice dove ci si trova.
   ========================================================================== */

.fascia .schede-riga {
  display: block;
  margin: 24px 0 0;
}

.fascia .schede {
  gap: 8px;
  padding: 6px;
  background: rgb(255 255 255 / 0.07);
  border: 1px solid rgb(255 255 255 / 0.12);
  border-radius: 14px;
  box-shadow: none;
  width: max-content;
  max-width: 100%;
}

.fascia .scheda {
  padding: 11px 18px;
  gap: 12px;
  font-size: 14.5px;
  color: rgb(255 255 255 / 0.62);
  border-radius: 10px;
  transition: background .16s ease, color .16s ease, transform .16s ease;
}
.fascia .scheda:hover { background: rgb(255 255 255 / 0.1); color: #fff; }
.fascia .scheda:active { transform: translateY(1px); }

.fascia .scheda[aria-selected="true"] {
  background: var(--carta);
  color: var(--navy-800);
  box-shadow: 0 2px 6px rgb(0 16 32 / 0.28);
}
.fascia .scheda[aria-selected="true"]:hover { background: #fff; color: var(--navy-800); }

.fascia .scheda .pallino {
  background: rgb(255 255 255 / 0.12);
  color: rgb(255 255 255 / 0.82);
}
.fascia .scheda[aria-selected="true"] .pallino {
  background: var(--acciaio-tenue);
  color: var(--acciaio);
}

/* Loghi piu' grandi del 30% rispetto a prima. Le proporzioni fra i tre
   wordmark restano quelle calcolate in dati.js (inchiostro pareggiato):
   qui si scala l'insieme, non il singolo. */
.fascia .scheda-logo {
  height: calc(var(--logo-altezza) * 1.3);
  width: calc(var(--logo-larghezza) * 1.3);
}

/* ==========================================================================
   3 · NUMERI DI SINTESI dentro la banda
   Non piu' quattro riquadri bianchi su fondo grigio, ma una fascia di cifre
   separate da filetti: pesano di piu' e non rubano spazio alla tabella.
   ========================================================================== */

.fascia-kpi {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  margin-top: 26px;
  border-top: 1px solid rgb(255 255 255 / 0.12);
}

.fkpi { padding: 20px 26px 24px; border-left: 1px solid rgb(255 255 255 / 0.12); min-width: 0; }
.fkpi:first-child { padding-left: 0; border-left: none; }

.fkpi-etichetta {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgb(255 255 255 / 0.52);
}

.fkpi-valore {
  font-size: 36px;
  font-weight: 660;
  letter-spacing: -0.025em;
  line-height: 1.05;
  margin-top: 8px;
  font-variant-numeric: tabular-nums;
}

/* Sotto la cifra una didascalia, non un altro numero: dice che cosa e' stato
   contato. Due dati nello stesso riquadro si contendevano lo sguardo. */
.fkpi-nota {
  margin-top: 8px;
  font-size: 12.5px;
  color: rgb(255 255 255 / 0.46);
  line-height: 1.4;
  max-width: 34ch;
  text-wrap: pretty;
}

/* Il riquadro dei non associati resta un segnale, non una voce fissa: ambra
   sul navy, senza fondo colorato. */
.fkpi.attenzione .fkpi-etichetta,
.fkpi.attenzione .fkpi-valore { color: #f0b429; }

/* ==========================================================================
   4 · BARRA COMANDI
   Ricerca, mese, filtri e doppioni escono dal riquadro della tabella e
   diventano una barra che resta in alto: con mille righe da scorrere, i
   comandi devono restare raggiungibili.
   ========================================================================== */

.comandi {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--carta);
  border-bottom: 1px solid var(--bordo);
  box-shadow: 0 1px 2px rgb(16 25 42 / 0.04);
}
.comandi-interno {
  max-width: var(--largo);
  margin: 0 auto;
  padding: 13px var(--gutter);
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.comandi .campo-cerca { flex: 1 1 260px; min-width: 0; }
.comandi input[type="search"], .comandi select { padding: 9px 12px; }
.comandi .conteggio-vivo { font-size: 13px; color: var(--testo-tenue); font-variant-numeric: tabular-nums; }
.comandi .conteggio-vivo strong { color: var(--testo); font-weight: 650; }

/* pannello dei filtri per colonna, aperto sotto la barra */
.filtri-pannello {
  background: var(--fondo-alt);
  border-bottom: 1px solid var(--bordo);
}
.filtri-pannello-interno { max-width: var(--largo); margin: 0 auto; padding: 16px var(--gutter) 18px; }

/* ==========================================================================
   5 · CONTENUTO
   ========================================================================== */

body.client .pagina {
  max-width: none;
  padding: 26px 0 56px;
  background-image:
    linear-gradient(var(--reticolo) 1px, transparent 1px),
    linear-gradient(90deg, var(--reticolo) 1px, transparent 1px);
  background-size: 28px 28px;
  background-position: -1px -1px;
}
.colonna {
  max-width: var(--largo);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: flex;
  flex-direction: column;
  gap: 20px;
}

body.client .riquadro-testa { padding: 16px 22px; align-items: baseline; }
body.client .riquadro-testa h2 { font-size: 15.5px; letter-spacing: -0.008em; }
body.client .riquadro-corpo { padding: 26px 22px 20px; }

/* ==========================================================================
   6 · TABELLA
   Densita' bilanciata: 11px di respiro verticale, filetti interni schiariti,
   confini di gruppo marcati. La griglia deve leggersi come una griglia, non
   come un reticolo di linee tutte uguali.
   ========================================================================== */

body.client table.dati th {
  top: var(--comandi-h);
  padding: 11px 14px;
  font-size: 11px;
  letter-spacing: 0.07em;
}
body.client table.dati.a-gruppi thead tr.fascia-gruppi th { top: var(--comandi-h); height: 48px; }
body.client table.dati.a-gruppi thead tr:last-child th { top: calc(var(--comandi-h) + 48px); }

body.client table.dati td { padding: 11px 14px; border-bottom: 1px solid #eef1f5; }
body.client table.dati td.numero { padding-bottom: 16px; }

/* I filetti verticali fra colonne dello stesso blocco sono piu' chiari dei
   confini fra blocchi: due informazioni diverse, due pesi diversi. */
body.client table.dati td { border-right-color: #f4f6f9; }
body.client table.dati th { border-right-color: #eef1f5; }
body.client table.dati th:first-of-type,
body.client table.dati td:first-of-type { border-right: 1px solid var(--bordo); }

body.client table.dati tbody tr { transition: background .12s ease; }
body.client th.ordinabile { transition: background .12s ease, color .12s ease; }
body.client th .freccia { transition: opacity .12s ease; }

/* Lo stato di una riga: una targhetta invece di testo nudo, cosi' si distingue
   dai dati numerici accanto. */
.stato-riga {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--acciaio);
  background: var(--acciaio-tenue);
  border: 1px solid var(--acciaio-bordo);
  border-radius: 100px;
  padding: 2px 10px;
  white-space: nowrap;
  display: inline-block;
}

body.client .paginazione { padding: 14px 22px; }


/* ==========================================================================
   7 · MOVIMENTO
   Discreto e breve: 120–220ms, solo su hover, ordinamento e cambio scheda.
   La media query di app.css lo spegne tutto quando il sistema lo chiede.
   ========================================================================== */

@keyframes entra-riquadro {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}
body.client .riquadro, body.client .fascia-kpi { animation: entra-riquadro .22s ease-out both; }

/* ==========================================================================
   8 · SCHERMI STRETTI
   La tabella continua a scorrere in orizzontale col nome agganciato: con
   sedici colonne e' l'unico modo di non perdere il confronto fra righe.
   ========================================================================== */

@media (max-width: 900px) {
  body.client { --gutter: 16px; }
  .fascia-titolo h1 { font-size: 23px; }
  .fascia-titolo .sottotitolo { font-size: 13px; }
  .fascia-data { display: none; }
  .fascia-kpi { grid-template-columns: 1fr 1fr; margin-top: 18px; }
  .fkpi { padding: 14px 14px 16px; }
  .fkpi:nth-child(odd) { padding-left: 0; border-left: none; }
  .fkpi:nth-child(n+3) { border-top: 1px solid rgb(255 255 255 / 0.12); }
  .fkpi-valore { font-size: 27px; }
  .fkpi-nota { font-size: 11.5px; }

  /* Il selettore esce dai margini per poter scorrere fino al bordo dello
     schermo: dentro il padding, l'ultima scheda sembra tagliata. */
  .fascia .schede-riga { margin: 16px calc(var(--gutter) * -1) 0; }
  .fascia .schede { width: auto; border-radius: 0; border-left: none; border-right: none;
    padding: 6px var(--gutter); background: transparent; border-top: none; }
  .fascia .scheda { flex: 0 0 auto; }

  .comandi-interno { padding: 11px var(--gutter); }
  .comandi .campo-cerca { flex: 1 1 100%; }
  body.client .riquadro-testa { padding: 13px 14px; }
  body.client .riquadro-corpo { padding: 18px 14px 14px; }
  body.client .paginazione { padding: 12px 14px; }
  body.client table.dati td { padding: 10px 12px; }
  body.client table.dati th { padding: 10px 12px; }
}

/* ==========================================================================
   9 · ACCESSO
   Stessa scatola di prima, con piu' respiro, il reticolo tecnico anche qui e
   la nota finale agganciata alla scheda invece che sospesa sotto.
   ========================================================================== */

body.client .login-pagina {
  background:
    radial-gradient(1100px 640px at 18% -10%, #013a68 0%, transparent 62%),
    radial-gradient(900px 520px at 92% 108%, #012a4d 0%, transparent 60%),
    linear-gradient(rgb(255 255 255 / 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgb(255 255 255 / 0.04) 1px, transparent 1px),
    var(--navy-900);
  background-size: auto, auto, 28px 28px, 28px 28px, auto;
  background-position: 0 0, 0 0, -1px -1px, -1px -1px, 0 0;
}
body.client .login-scatola { max-width: 412px; }
body.client .login-marchio { margin-bottom: 30px; }
body.client .login-marchio img { height: 58px; }
body.client .login-marchio p { font-size: 12px; letter-spacing: 0.12em; margin-top: 16px; }
body.client .login-carta { padding: 30px 28px; }
body.client .login-carta h1 { font-size: 20px; letter-spacing: -0.015em; }
body.client .login-carta .aiuto { margin-bottom: 22px; }

/* La nota sulla riservatezza entra nella scheda: sotto, sul navy, era la cosa
   meno leggibile della pagina proprio mentre spiega la cosa piu' delicata. */
.login-nota-interna {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid #eef1f5;
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.login-nota-interna::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--acciaio-bordo);
  flex: none;
  margin-top: 6px;
}
.login-nota-interna p { font-size: 12px; line-height: 1.5; color: var(--testo-fioco); }

body.client .bottone-primario {
  padding: 13px 16px;
  font-size: 14.5px;
  transition: background .14s ease, transform .14s ease;
}
body.client .bottone-primario:not(:disabled):active { transform: translateY(1px); }

/* ==========================================================================
   10 · RIFINITURE
   ========================================================================== */

/* --- anello di focus sulla banda navy --------------------------------------
   L'outline di app.css e' acciaio: sul navy e' quasi invisibile, e chi naviga
   da tastiera perderebbe la posizione proprio nel selettore di piattaforma. */
.fascia :where(button, a, input, select, [tabindex]):focus-visible {
  outline: 2px solid rgb(255 255 255 / 0.72);
  outline-offset: 2px;
}

/* --- righe alternate ------------------------------------------------------
   Sedici colonne e scorrimento orizzontale: senza un appoggio l'occhio cambia
   riga a meta' tabella. Il tono e' appena percettibile, non una zebratura.
   `nth-of-type` e non `nth-child`: fra le righe Alpine lascia i suoi
   <template>, che come figli sfalserebbero il conteggio. */
body.client table.dati tbody tr:nth-of-type(even) td,
body.client table.dati tbody tr:nth-of-type(even) td:first-of-type { background: #fbfcfe; }
body.client table.dati tbody tr:hover td,
body.client table.dati tbody tr:hover td:first-of-type { background: #f4f8fc; }

/* --- piastre dei gruppi su due righe --------------------------------------
   Il titolo della tappa era troncato dopo trenta caratteri. Il numero si
   stacca a sinistra come piastra, il titolo prende due righe. */
body.client table.dati th.gruppo {
  max-width: 340px;
  text-align: left;
  padding: 7px 14px;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  vertical-align: middle;
}
.gruppo-piastra { display: flex; align-items: center; gap: 10px; min-width: 0; }
.gruppo-numero {
  flex: none;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  background: var(--navy-800);
  color: #fff;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.gruppo-testo {
  font-size: 12px;
  font-weight: 650;
  line-height: 1.3;
  color: var(--navy-800);
  text-transform: none;
  letter-spacing: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-width: 0;
}

/* --- percentuali come barra ----------------------------------------------
   Per una percentuale la proporzione e' il dato e la cifra il dettaglio:
   la barra e' piena e allineata, la cifra le sta accanto in monospazio. */
.perc { display: flex; align-items: center; gap: 9px; justify-content: flex-end; }
.perc-binario {
  flex: 1 1 auto;
  max-width: 72px;
  min-width: 28px;
  height: 6px;
  border-radius: 100px;
  background: var(--bordo);
  overflow: hidden;
}
.perc-barra { display: block; height: 100%; border-radius: 100px; background: var(--acciaio); }
.perc-valore { font-family: var(--mono); font-size: 12.5px; font-variant-numeric: tabular-nums; flex: none; }
/* Cento per cento pieno: e' l'unico valore che vale la pena distinguere. */
.perc.pieno .perc-barra { background: var(--ok); }
body.client table.dati td.perc-cella { padding-bottom: 11px; }

/* --- chip dei filtri attivi ----------------------------------------------
   Con tre filtri per colonna impostati e il pannello chiuso, non si sapeva
   piu' cosa stesse filtrando. */
.chip-riga {
  max-width: var(--largo);
  margin: 0 auto;
  padding: 0 var(--gutter) 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.chip-riga .etichetta { padding-right: 2px; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 550;
  color: var(--acciaio);
  background: var(--acciaio-tenue);
  border: 1px solid var(--acciaio-bordo);
  border-radius: 100px;
  padding: 5px 6px 5px 12px;
  max-width: 320px;
}
.chip b { font-weight: 650; color: var(--navy-700); }
.chip-x {
  appearance: none;
  border: none;
  background: rgb(10 86 138 / 0.1);
  color: var(--acciaio);
  width: 20px; height: 20px;
  border-radius: 50%;
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  transition: background .12s ease;
}
.chip-x:hover { background: rgb(10 86 138 / 0.2); }

/* --- righe scheletro ------------------------------------------------------
   Al posto della rotellina: la pagina non salta piu' da vuota a piena, e si
   vede subito che quello che arriva e' una tabella. */
.scheletro { padding: 6px 0 0; }
.scheletro-riga {
  display: flex;
  gap: 14px;
  align-items: center;
  padding: 12px 22px;
  border-bottom: 1px solid #eef1f5;
}
.scheletro-blocco {
  height: 11px;
  border-radius: 100px;
  background: linear-gradient(90deg, #eef1f5 0%, #e3e8ef 40%, #eef1f5 80%);
  background-size: 240px 100%;
  animation: scheletro-onda 1.1s linear infinite;
}
@keyframes scheletro-onda {
  from { background-position: -240px 0; }
  to { background-position: 240px 0; }
}

/* --- piattaforme senza logo ----------------------------------------------- */
.scheda-sigla {
  flex: none;
  width: 34px;
  height: 30px;
  border-radius: 7px;
  background: rgb(255 255 255 / 0.12);
  color: currentColor;
  font-family: var(--mono);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.fascia .scheda[aria-selected="true"] .scheda-sigla {
  background: var(--acciaio-tenue);
  color: var(--acciaio);
}

/* --- stato con tono semantico -------------------------------------------- */
.stato-riga.ok { color: var(--ok); background: var(--ok-fondo); border-color: #bfe3d2; }
.stato-riga.corso { color: var(--acciaio); background: var(--acciaio-tenue); border-color: var(--acciaio-bordo); }
.stato-riga.fermo { color: var(--attenzione); background: var(--attenzione-fondo); border-color: #ecd9b0; }
.stato-riga.neutro { color: var(--testo-tenue); background: var(--fondo); border-color: var(--bordo-forte); }

@media (max-width: 900px) {
  .chip-riga { padding: 0 var(--gutter) 10px; }
  body.client table.dati th.gruppo { max-width: 240px; }
}

/* ==========================================================================
   11 · TACCHE DELLE TAPPE
   La colonna «Tappe fatte» diventa sei tacche: si legge quante sono fatte
   senza contare. La cifra resta accanto per chi cerca il numero.
   ========================================================================== */

.tacche { display: inline-flex; align-items: center; gap: 3px; }
.tacca {
  width: 7px;
  height: 14px;
  border-radius: 1.5px;
  background: var(--bordo);
  display: block;
  flex: none;
}
.tacca.fatta { background: var(--acciaio); }
.tacche .cifra {
  font-family: var(--mono);
  font-size: 12.5px;
  margin-left: 7px;
  color: var(--testo);
  font-variant-numeric: tabular-nums;
}

/* Sotto le sei tappe le tacche restano leggibili; oltre le dodici diventano
   troppo fitte e la cella torna alla sola cifra (gestito in pagina). */
@media (max-width: 900px) {
  .tacca { width: 5px; height: 12px; }
  .tacche { gap: 2px; }
  .tacche .cifra { margin-left: 5px; font-size: 12px; }
}

/* ==========================================================================
   12 · ACCESSO A SCHERMO DIVISO
   Navy a sinistra coi tre loghi impilati: dice cosa c'e' dentro prima di
   entrare. Modulo a destra, centrato verticalmente.
   ========================================================================== */

body.client .login-pagina.diviso {
  display: grid;
  grid-template-columns: 1fr 1fr;
  place-items: stretch;
  padding: 0;
  min-height: 100vh;
  min-height: 100dvh;
}

.login-lato-navy {
  padding: 48px 44px;
  display: flex;
  flex-direction: column;
  color: #fff;
}
/* align-self: in una colonna flex l'immagine viene stirata da align-items:
   stretch anche con width: auto, e il marchio si allarga fuori proporzione.
   L'altezza sale da 44 a 58px: piu' grande, non piu' largo. */
.login-lato-navy img {
  height: 58px;
  width: auto;
  align-self: flex-start;
  display: block;
}
.login-lato-navy .spinta { flex: 1; }
.login-lato-navy .dicitura {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgb(255 255 255 / 0.42);
}
.login-lato-navy h2 {
  font-size: 25px;
  font-weight: 700;
  letter-spacing: -0.022em;
  line-height: 1.3;
  margin-top: 14px;
}
/* Campo di rimbalzo dei tre wordmark. Senza JS resta una colonna come prima:
   i marchi sono in flusso normale finche' lo script non li stacca. */
.login-loghi {
  position: relative;
  flex: 1 1 auto;
  min-height: 230px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 30px;
  padding-top: 26px;
  border-top: 1px solid rgb(255 255 255 / 0.14);
  overflow: hidden;
}

/* Con lo script attivo i marchi escono dal flusso e si muovono per transform:
   nessun ricalcolo di impaginazione a ogni fotogramma. */
.login-loghi[data-rimbalzo] .login-logo {
  position: absolute;
  top: 26px;
  left: 0;
  will-change: transform;
}
/* Stessi wordmark del selettore, montati come maschere: un colore solo,
   quindi restano nitidi sul navy senza dover esportare altri file. */
.login-logo {
  display: block;
  background-color: rgb(255 255 255 / 0.66);
  -webkit-mask-position: left center;
  mask-position: left center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
}

.login-lato-modulo {
  background: var(--carta);
  padding: 48px 44px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.login-lato-modulo .login-scatola { max-width: 400px; width: 100%; }
.login-lato-modulo .area {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--acciaio);
}
.login-lato-modulo .area::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--acciaio);
  flex: none;
}
.login-lato-modulo h1 {
  font-size: 23px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-top: 16px;
  color: var(--navy-800);
}
.login-lato-modulo .aiuto { margin-top: 10px; max-width: 44ch; }

/* Sotto i 860px il navy diventa una fascia in cima invece di una colonna:
   diviso in due su un telefono, il modulo resterebbe in mezzo schermo. */
@media (max-width: 860px) {
  body.client .login-pagina.diviso { grid-template-columns: 1fr; min-height: 0; }
  .login-lato-navy { padding: 28px 22px 26px; }
  .login-lato-navy img { height: 42px; }
  .login-lato-navy .spinta { display: none; }
  .login-lato-navy h2 { font-size: 20px; margin-top: 10px; }
  /* Fascia in cima: non c'e' altezza per far rimbalzare niente, i marchi
     tornano in riga e lo script li lascia dove sono (min-height a 0 li
     mantiene in flusso). */
  .login-loghi {
    position: static;
    flex-direction: row;
    align-items: center;
    gap: 22px;
    flex-wrap: wrap;
    min-height: 0;
    margin-top: 22px;
    padding-top: 20px;
    overflow: visible;
  }
  .login-loghi[data-rimbalzo] .login-logo {
    position: static;
    transform: none !important;
  }
  .login-lato-modulo { padding: 32px 22px 44px; }
  .login-lato-modulo .login-scatola { max-width: none; }
}

/* ==========================================================================
   13 · SUPPORTO NELL'ACCESSO
   Azione secondaria: sotto il pulsante di ingresso, non accanto, cosi' non
   compete con l'accesso vero e proprio.
   ========================================================================== */

.login-supporto {
  margin-top: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}
.login-supporto .bottone { text-decoration: none; }
.login-supporto .segno-aiuto {
  width: 16px;
  height: 16px;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  flex: none;
}
.login-supporto .nota-supporto { font-size: 12.5px; color: var(--testo-fioco); }

@media (max-width: 860px) {
  .login-supporto { justify-content: flex-start; }
}

/* ==========================================================================
   14 · ACCESSO E REGISTRAZIONE
   Tre stati su una pagina sola: accesso, richiesta, attesa di approvazione.
   ========================================================================== */

/* Scelta fra i due stati: due schede piccole, non due pagine. */
.modo-scelta {
  display: flex;
  gap: 4px;
  margin-top: 24px;
  padding: 4px;
  background: var(--fondo-alt);
  border-radius: 10px;
  width: max-content;
  max-width: 100%;
}
.modo {
  appearance: none;
  border: none;
  background: none;
  font: inherit;
  cursor: pointer;
  padding: 8px 16px;
  border-radius: 7px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--testo-fioco);
  white-space: nowrap;
  transition: background .14s ease, color .14s ease;
}
.modo:hover { color: var(--testo); }
.modo[aria-selected="true"] {
  background: var(--carta);
  color: var(--navy-800);
  font-weight: 650;
  box-shadow: 0 1px 2px rgb(16 25 42 / 0.1);
}

/* Nota sotto un campo: regola di formato o errore di conferma. */
.aiuto-campo {
  font-size: 12px;
  color: var(--testo-fioco);
  line-height: 1.4;
}
.aiuto-campo.errore { color: var(--errore); font-weight: 550; }

/* Stato di attesa: ambra come il resto dei segnali di attenzione. */
.login-lato-modulo .area.attesa { color: #9a5b00; }
.login-lato-modulo .area.attesa::before { background: var(--attenzione); }

/* Nello stato di attesa il supporto e' un semplice collegamento accanto al
   pulsante di ritorno: nessuna competizione fra due bottoni pieni. */
.login-supporto a.nota-supporto { color: var(--acciaio); font-weight: 600; }

/* Riquadro delle domande frequenti, aperto dal pulsante «Serve aiuto».
   Nasce qui e non in app.css perche' riguarda solo il lato consultazione. */
body.client .aiuto-riquadro {
  margin-top: 16px;
  padding: 16px 18px;
  border-radius: var(--r-md);
  background: var(--fondo-alt);
  border: 1px solid var(--bordo);
  color: var(--testo-tenue);
  font-size: 13px;
  line-height: 1.6;
}
body.client .aiuto-riquadro p + p { margin-top: 10px; }
body.client .aiuto-riquadro strong { color: var(--testo); }

/* Nome e cognome affiancati nel modulo di richiesta. */
body.client .riga-campi { display: flex; gap: 12px; }
body.client .riga-campi .campo { flex: 1 1 0; min-width: 0; }
@media (max-width: 520px) { body.client .riga-campi { flex-direction: column; gap: 0; } }

/* ==========================================================================
   CORREZIONI ALLO STICKY — trovate rendendo le pagine in un browser
   ========================================================================== */

/* `app.css` mette `overflow-x: hidden` su html e body per impedire lo
   sbordamento orizzontale. L'effetto collaterale e' che il body diventa un
   contenitore di scorrimento, e questo annulla ogni `position: sticky` al suo
   interno: la barra comandi scorreva via insieme alla pagina.
   `clip` ottiene lo stesso taglio senza creare il contenitore, quindi lo
   sticky torna a funzionare. Si applica solo alle pagine client: `app.css`
   resta intatto e l'area di amministrazione non cambia. */
html:has(body.client) { overflow-x: clip; }
body.client { overflow-x: clip; }

/* L'intestazione della tabella vive dentro `.tabella-guscio`, che scorre in
   orizzontale ed e' quindi il suo riferimento per lo sticky, non la finestra.
   Con `top: var(--comandi-h)` si agganciava 60px sotto il bordo del guscio,
   lasciando scoperta una banda in cui si vedeva la prima riga sopra
   l'intestazione. Ancorata a zero, la banda sparisce. */
body.client table.dati th,
body.client table.dati.a-gruppi thead tr.fascia-gruppi th { top: 0; }
body.client table.dati.a-gruppi thead tr:last-child th { top: 48px; }

/* Navigazione fra gli incontri di una sorgente a caricamenti multipli.
   Le frecce affiancano il menu invece di stare altrove: passare dalla Zoom
   della domenica a quella del lunedi' e' il gesto piu' frequente, e deve
   costare un clic senza aprire nulla. */
body.client .navigatore-incontri {
  display: flex;
  align-items: stretch;
  gap: 6px;
  flex: 0 0 auto;
}
body.client .navigatore-incontri .campo-incontro { min-width: 230px; }
body.client .freccia-incontro {
  flex: 0 0 auto;
  padding: 0 12px;
  font-size: 18px;
  line-height: 1;
}
body.client .freccia-incontro:disabled { opacity: .4; cursor: default; }
@media (max-width: 700px) {
  body.client .navigatore-incontri { width: 100%; }
  body.client .navigatore-incontri .campo-incontro { flex: 1 1 auto; min-width: 0; }
}

/* Email mascherata al posto dell'username mancante. Monospaziata perche' gli
   asterischi restino allineati e la forma dell'indirizzo resti leggibile. */
body.client .email-mascherata {
  font-family: 'Fira Code', ui-monospace, monospace;
  font-size: 12px;
  color: var(--testo-fioco);
  letter-spacing: -0.2px;
}

/* L'indirizzo mascherato sotto il nome: seconda riga, piu' piccola e tenue.
   Non deve competere con il nome, che resta l'informazione principale. */
body.client .email-sotto {
  display: block;
  margin-top: 3px;
  font-size: 11px;
  opacity: .75;
}