/* Portale clienti stech - le sole regole del portale.

   Si carica DOPO base.css, che e' la copia esatta del foglio dei rapportini e non si
   modifica qui (vedi base.css.sorgente e deploy/sincronizza-base-css.sh). Il vocabolario
   intero - testata, sotto-titolo, riga-nuovo, titolo-sezione, voce-elenco con marcatore e
   corpo, vuoto, filtri, schede, gruppo, azione, azione-principale - viene da li', usato
   cosi' com'e': i template non inventano classi proprie per quello che la base sa gia'
   fare, e una correzione fatta nei rapportini arriva qui con la prossima sincronizzazione.

   Qui sta solo cio' che al portale serve e ai rapportini no. Nessun colore nuovo: solo le
   variabili della base, cosi' il tema scuro e i blocchi di accessibilita' valgono anche
   per queste regole senza scriverli due volte. Una regola che corregge la base non va
   qui: va nei rapportini, e poi si sincronizza. */

/* Lo sprite delle icone non deve occupare spazio. Nei rapportini basta `style="display:none"`
   sul tag, qui no: la CSP del portale vieta gli stili inline (`style-src 'self'` senza
   `unsafe-inline`), quindi quell'attributo viene scartato in silenzio e lo sprite restava
   alto 150px in cima a ogni pagina, spingendo la testata sotto la piega. Misurato il
   2026-09-10 in un browser vero. Ogni cosa che nei rapportini si fa con uno stile inline,
   qui va in una classe. */
.sprite-icone { display: none; }

/* --- Esci, nella barra delle schede ------------------------------------------------------
   Uscire cambia stato, quindi e' un form e non un link - ma nella barra deve sembrare una
   scheda come le altre. `display: contents` toglie il form dalla griglia flessibile: il
   bottone dentro diventa lui stesso una scheda, senza un contenitore in mezzo che rompa
   `gap` e allineamento. Le regole generiche dei pulsanti (bordo, sfondo, margine sopra)
   si spengono qui: senza, il bottone spunterebbe nero e squadrato fra due link trasparenti. */
.scheda-uscita { display: contents; }
button.scheda {
  margin: 0;
  border: none;
  background: none;
  font-family: inherit;
  cursor: pointer;
}
button.scheda:active { transform: none; }

/* --- Il contenitore di pagina ------------------------------------------------------------
   `main.pagina` e non `.foglio`: nella base `.foglio` e' il foglio della firma, un dialogo
   con `overflow: hidden` e il fondo bianco fisso, e riusare quel nome per la pagina le
   avrebbe addosso regole che non sono sue.

   Meta' dei referenti apre il portale dal PC dell'ufficio: sopra i 700px il contenuto
   respira di piu'. La barra delle schede NON cambia: resta galleggiante come nei
   rapportini, a qualunque larghezza - ".schede" nella base si ferma a 612px e si centra da
   sola, quindi segue la colonna del contenuto (il body, 640px) invece di stiracchiarsi da
   bordo a bordo. Una versione precedente la fissava con "position: static", e su una
   finestra larga finiva fuori dalla vista appena la pagina superava un'altezza di schermo:
   il cliente restava senza navigazione. Rimossa il 2026-09-10. */
@media (min-width: 700px) {
  .pagina { padding: 2rem; }
}

/* La freschezza: quando sono arrivati i dati, in fondo alla pagina, piccola e attenuata
   di proposito - non deve competere con niente sopra. `.vecchia` dice che l'aggiornamento
   si e' fermato: stesso ambra delle pastiglie di stato in attesa, non un rosso nuovo. */
.freschezza {
  margin: 18px 4px 0;
  font-size: 12px;
  color: var(--testo-tenue);
}
.freschezza.vecchia {
  color: var(--attesa);
  font-weight: 600;
}

/* --- L'avviso di un modulo respinto ------------------------------------------------------
   Il modulo delle segnalazioni non torna mai in JSON (task A9): un errore di validazione
   ridisegna la stessa pagina con questo avviso in cima, role="alert" nel markup perche' un
   lettore di schermo lo annunci da solo. Il colore e' --errore, come ".errore" della base -
   ma li' e' solo testo dentro un esito gia' vestito, qui serve una superficie propria
   che la base non definisce. */
.avviso-modulo {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0 0 16px;
  padding: 12px 14px;
  border-radius: var(--raggio-gruppo);
  background: var(--superficie-tenue);
  border: 1px solid var(--errore);
}
.avviso-modulo svg {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  color: var(--errore);
}
.avviso-modulo p {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--errore);
  line-height: 1.35;
}

/* --- La lista etichetta/valore ----------------------------------------------------------
   Il contratto, l'informativa e la scheda di una segnalazione la usano con la sequenza
   nativa del browser (<dt><dd><dt><dd>...): senza una regola, ogni <dd> va a capo
   indentato di suo - e' la lista meno leggibile che il browser sappia disegnare da solo.
   La griglia a due colonne mette etichetta e valore sulla stessa riga quando c'e' spazio,
   seguendo l'alternanza gia' scritta nel markup senza bisogno di un contenitore per
   coppia; sotto una certa larghezza il valore va a capo dentro la sua colonna, allineato
   al bordo sinistro invece che rientrato verso il centro.

   La superficie non la mette lei: sta dentro un `.gruppo`, la stessa scheda che i
   rapportini usano per qualunque blocco di campi o di testo. */
dl {
  display: grid;
  grid-template-columns: minmax(96px, max-content) 1fr;
  column-gap: 14px;
  row-gap: 10px;
  margin: 0;
}
dt {
  font-size: 13px;
  font-weight: 600;
  color: var(--testo-tenue);
}
dd {
  margin: 0;
  font-size: 16px;
  color: var(--testo);
  word-break: break-word;
}

/* --- Lo stato di una segnalazione ---------------------------------------------------------
   Ricevuta, in lavorazione, risolta: a che punto siamo, non quanto siamo in ritardo. Una
   pastiglia sola per tutti e tre gli stati, sempre lo stesso grigio neutro: nessun colore
   di allarme, il portale non deve sembrare dire al cliente che siamo indietro.

   Non e' ".corpo .stato" della base, che su "da-fare"/"fatto" prende l'ambra o il verde:
   in elenco, dentro un ".corpo", misure e posto li decide comunque quella (e' piu'
   specifica), e i template del portale non usano mai le due varianti colorate. Questa
   regola serve alla pastiglia da sola in testa alla scheda di una segnalazione, un
   contesto che ai rapportini non serve mai. */
.stato {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  margin: 0;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--superficie-tenue);
  color: var(--testo-tenue);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
p.stato { margin: 4px 0 14px; }

/* Un link in mezzo al testo, dove non c'e' un componente della base che gia' lo colora
   (".fascia a", ".nota a"): senza questa riga torna il blu di sistema sottolineato, che e'
   esattamente cio' che l'accento grafite dell'app non e'. Vale sul ruolo e non su un
   contenitore preciso, perche' la prima versione era attaccata a `section` e
   l'informativa riscritta, che usa i gruppi come il resto del portale, e' tornata blu
   senza che nessuna regola fosse cambiata. Un selettore che nomina il contenitore vale
   finche' quel contenitore non cambia; uno che nomina il ruolo vale sempre. Per lo
   stesso motivo `section a` non c'e' piu': nessun template usa <section>. */
.gruppo dd a,
.gruppo p a { color: var(--accento); font-weight: 600; }

/* Il numero grande del monte ore: l'unica cifra della schermata per cui vale la pena di
   una gerarchia propria (vedi riepilogo.html). Nessuna misura nuova - e' lo stesso peso
   e la stessa dimensione di un H1, solo su un <p> perche' il titolo della pagina resta
   uno solo. Le cifre tabulari sono lo stesso trattamento che la base da' a ogni numero
   che conta (".marcatore .g", ".consumo .quanto"). */
.cifra-grande {
  margin: 2px 0 0;
  font-size: 28px;
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.022em;
  color: var(--testo);
  font-variant-numeric: tabular-nums;
}