/* ==========================================================================
   Email API — impaginazione delle pagine e componenti del kit resi in CSS.

   Regola: i componenti stanno in ui-kit.css e non si toccano. Qui c'e' solo
   quello che il kit non copre:

   1. il guscio dell'applicazione (laterale scura + testata chiara + contenuto);
   2. i componenti che nel kit sono componenti Vue con utility Tailwind
      (stato vuoto, indicatore, pannello laterale, notifiche): la CSP di questa
      applicazione e' `script-src 'self'; style-src 'self'`, quindi niente CDN
      di Tailwind e niente Vue. Le classi mantengono i nomi del kit;
   3. poche primitive di impaginazione, deliberatamente contate.
   ========================================================================== */


/* `[hidden]` vale display:none a specificita' zero, quindi qualunque regola di
   componente lo batte: `.btn` e' inline-flex e un bottone nascosto resterebbe
   visibile. Qui si nasconde davvero. */
[hidden] { display: none !important; }


/* ============================== guscio ============================== */

.guscio { display: flex; height: 100%; min-height: 100vh; }

/* ------------------------------ laterale ------------------------------ */
.lat {
  width: 220px; flex: none; background: var(--side);
  display: flex; flex-direction: column; min-height: 0;
}
.lat-h {
  height: 52px; flex: none; display: flex; align-items: center; gap: 10px;
  padding: 0 16px; border-bottom: 1px solid var(--side-line);
}
.lat-h img { width: 26px; height: 26px; object-fit: contain; flex: none; }
.lat-h-t { min-width: 0; }
.lat-h b { display: block; font-size: 12.5px; font-weight: 600; color: #fff; line-height: 1.25; }
.lat-h span { display: block; font-size: 10px; color: #7C90A8; }
.lat-n { flex: 1; padding: 4px 0; overflow-y: auto; min-height: 0; }
.lat-p { flex: none; padding: 8px; border-top: 1px solid var(--side-line); }

/* Il piede della laterale: chi sei e come esci. Il modulo di uscita e' un
   modulo perche' e' una POST con token, non un collegamento. */
.lat-u {
  display: flex; align-items: center; gap: 10px; width: 100%;
  height: 38px; padding: 0 8px; border: 0; border-radius: 7px;
  background: none; font-family: inherit; text-align: left; cursor: pointer;
}
.lat-u:hover { background: rgba(255, 255, 255, .05); }
.lat-av {
  width: 26px; height: 26px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  background: var(--pri); color: #fff; font-size: 10px; font-weight: 600;
}
.lat-u-t { flex: 1; min-width: 0; line-height: 1.25; }
.lat-u-t b { display: block; font-size: 12px; font-weight: 500; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lat-u-t span { display: block; font-size: 10.5px; color: #7C90A8; }
.lat-u i { flex: none; font-size: 14px; color: #7C90A8; font-style: normal; }
.lat-u:hover i { color: #fff; }

/* ------------------------------ corpo ------------------------------ */
.corpo { flex: 1; min-width: 0; display: flex; flex-direction: column; background: var(--bg); }

.testa {
  min-height: 52px; flex: none; background: #fff; border-bottom: 1px solid var(--line);
  display: flex; align-items: center; gap: 12px; padding: 8px 16px; flex-wrap: wrap;
}
.testa-t { flex: 1; min-width: 0; }
.testa-t h1 {
  font-size: 14px; font-weight: 600; color: var(--ink); line-height: 1.25;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.testa-a { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* Il contenuto scorre, non il documento: la testata e la laterale restano
   ferme. Su schermo stretto il guscio non ha altezza fissa e scorre la
   pagina, percio' `overflow` torna visibile (vedi la coda del foglio). */
.pagina { flex: 1; min-height: 0; overflow-y: auto; padding: 16px; }
@media (min-width: 640px) { .pagina { padding: 20px; } }
.pagina > * + * { margin-top: 16px; }

/* Il bottone che apre la laterale esiste solo sotto i 1024px. */
.lat-apri { display: none; }
.velo-lat { display: none; }

@media (max-width: 1023px) {
  .lat {
    position: fixed; inset: 0 auto 0 0; z-index: 50;
    transform: translateX(-100%); transition: transform .18s cubic-bezier(.3, 0, .2, 1);
  }
  .lat.aperta { transform: none; }
  .lat-apri { display: inline-flex; }
  .velo-lat.aperto {
    display: block; position: fixed; inset: 0; z-index: 45;
    background: rgba(29, 38, 48, .35);
  }
  html.app, body.app { height: auto; overflow: visible; }
  .guscio { min-height: 100vh; }
  .pagina { overflow: visible; }
}
@media (prefers-reduced-motion: reduce) { .lat { transition: none; } }


/* ============================== accesso ============================== */
/* La pagina di accesso non ha guscio: nessuna laterale, nessuna testata. */

.acc {
  min-height: 100vh; display: grid; place-items: center; padding: 20px;
  background: var(--bg);
}
.acc-c {
  width: min(380px, 100%); background: #fff; border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--sh-md); padding: 28px 26px;
}
.acc-m { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; }
.acc-m img { width: 30px; height: 30px; object-fit: contain; }
.acc-m b { font-size: 14.5px; font-weight: 600; color: var(--ink); }
.acc-c h1 { font-size: 17px; font-weight: 600; margin-bottom: 4px; }
.acc-s { font-size: 12.5px; color: var(--mut); margin: 0 0 20px; }
.acc-c .btn { width: 100%; }


/* ====================== componenti resi in CSS ====================== */

/* --- stato vuoto (kit: componente `vuoto`) --- */
.vuoto { padding: 56px 20px; text-align: center; }
.vuoto-i {
  width: 42px; height: 42px; border-radius: 50%; background: #F1F5F9;
  display: grid; place-items: center; margin: 0 auto 12px;
  color: var(--faint); font-size: 20px;
}
.vuoto-t { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.vuoto-s { font-size: 12.5px; color: var(--mut); margin-top: 4px; }
.vuoto-a { margin-top: 12px; }
/* Dentro una tabella lo stato vuoto occupa la riga intera e non si comporta
   come una cella: nessun bordo, nessuna altezza di riga. */
.tbl .vuoto { padding: 40px 20px; }
.tbl td.vuoto-td { height: auto; padding: 0; }

/* --- pannello laterale (kit: componente `side-panel`) --- */
/* Mai finestre modali centrate: il pannello entra da destra. Qui e' un
   <dialog> nativo, che porta con se' fuoco, Esc e sfondo inerte senza JS. */
.pan[open] {
  position: fixed; inset: 0; z-index: 50; max-width: none; max-height: none;
  width: 100%; height: 100%; margin: 0; padding: 0; border: 0; background: none;
  display: flex; justify-content: flex-end;
}
.pan::backdrop { background: rgba(29, 38, 48, .35); }
.pan-c {
  width: min(480px, calc(100vw - 32px)); height: 100%; background: #fff;
  display: flex; flex-direction: column; animation: pan-entra .18s cubic-bezier(.3, 0, .2, 1);
}
.pan-sm .pan-c { width: min(380px, calc(100vw - 32px)); }
.pan-lg .pan-c { width: min(620px, calc(100vw - 32px)); }
@keyframes pan-entra { from { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) { .pan-c { animation: none; } }
.pan-h {
  height: 56px; flex: none; display: flex; align-items: center; gap: 12px;
  padding: 0 16px; border-bottom: 1px solid var(--line);
}
.pan-h h2 { font-size: 14px; font-weight: 600; flex: 1; min-width: 0; }
.pan-b { flex: 1; overflow-y: auto; padding: 16px; }
.pan-p {
  flex: none; display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 12px 16px; border-top: 1px solid var(--line); background: #FAFBFD;
}

/* --- notifica di esito (kit: `toasts`, qui in linea nella pagina) --- */
/* Un esito che arriva con il ricaricamento della pagina non e' una notifica
   che scompare: sta nel flusso, sopra il contenuto, e si legge con calma. */
.avv {
  display: flex; align-items: flex-start; gap: 10px; padding: 11px 14px;
  border: 1px solid; border-radius: var(--r); font-size: 12.5px;
}
.avv i { font-style: normal; font-size: 16px; line-height: 1.2; flex: none; }
.avv-t { flex: 1; min-width: 0; }
.avv-ok { color: #15855C; background: #E9F8F1; border-color: #C0E8D6; }
.avv-bad { color: #CB3549; background: #FDEDEF; border-color: #F6C7CE; }
.avv-info { color: var(--pri-testo); background: var(--pri-soft); border-color: var(--pri-line); }


/* ======================= primitive di impaginazione ======================= */
/* Contate: se qui dentro cresce un secondo Tailwind, la cosa giusta e'
   aggiungere un componente al kit, non un'altra utility. */

.g { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
.g > * { min-width: 0; }
@media (min-width: 640px)  { .g-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 640px)  { .g-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .g-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .g-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* Una colonna che occupa la griglia intera. */
.g-tutto { grid-column: 1 / -1; }

.riga { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.riga-a { margin-left: auto; }
.pila { display: flex; flex-direction: column; gap: 14px; }
.pila-s { display: flex; flex-direction: column; gap: 8px; }

.t-mut { color: var(--mut); }
.t-ink { color: var(--ink); font-weight: 500; }
.t-sm { font-size: 12.5px; }
.t-xs { font-size: 11.5px; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; }
.tronca { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.spezza { overflow-wrap: anywhere; }


/* ===================== niente stili in linea ===================== */
/* La CSP di questa applicazione e' `style-src 'self'`, che (per ricaduta su
   style-src-attr) blocca anche gli attributi `style=""`. Tutto quello che
   altrove sarebbe uno stile in linea vive qui, con un nome. */

/* La voce di un elenco dentro una card: una riga per record, separata da una
   linea sottile. Non e' una `.sez` (che intesta un blocco di campi) e non e'
   una tabella: sono due o tre dati e un comando. */
.voce { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
        padding: 11px 16px; border-top: 1px solid var(--line-2); }
.voce:hover { background: #FAFBFD; }
.voce-t { flex: 1; min-width: 0; }

/* Il piede di un modulo dentro una card. */
.piede-f { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 16px; }

/* La colonna di una griglia che contiene solo un pulsante: si allinea al
   fondo dei campi accanto, non al loro bordo superiore. */
.g-btn { align-self: end; }
/* Quando il campo accanto ha una nota sotto, il fondo non e' piu' allineato:
   il pulsante scende dell'altezza dell'etichetta e resta in linea col campo.
   Solo da 640px in su: a una colonna sola quel rientro e' spazio morto. */
.g-btn-alto { align-self: start; }
@media (min-width: 640px) { .g-btn-alto { padding-top: 22px; } }

/* L'elenco degli errori dentro un avviso. */
.avv-l { margin: 6px 0 0; padding-left: 18px; }
.avv-sopra { margin-bottom: 16px; }

/* Larghezze delle colonne della tabella delle utenze. Stanno qui e non nel
   markup perche' con `table-layout: fixed` sono una decisione di
   impaginazione, e perche' `style=""` e' vietato dalla CSP. */
.tbl-utenti th:nth-child(1) { width: 210px; }
.tbl-utenti th:nth-child(2) { width: 260px; }
.tbl-utenti th:nth-child(3) { width: 190px; }
.tbl-utenti th:nth-child(4) { width: 130px; }

/* ===================== utenze ===================== */

/* Le azioni di riga stanno a destra, in fila. */
.riga-fine { display: inline-flex; align-items: center; gap: 8px; justify-content: flex-end; }

/* Larghezze delle colonne della tabella delle utenze. Stanno qui e non nel
   markup perche' con `table-layout: fixed` sono una decisione di impaginazione,
   e perche' `style=""` e' vietato dalla CSP. */
.tbl-utenti th:nth-child(1) { width: 170px; }
.tbl-utenti th:nth-child(2) { width: 210px; }
.tbl-utenti th:nth-child(3) { width: 160px; }
.tbl-utenti th:nth-child(4) { width: 150px; }
.tbl-utenti th:nth-child(5) { width: 150px; }
.tbl-utenti th:nth-child(6) { width: 120px; }

/* Dentro un pannello le voci di un elenco non hanno i 16px di rientro della
   card: il pannello ha gia' il suo. */
.pan-b .voce { padding-left: 0; padding-right: 0; }
.pan-b .voce:hover { background: none; }

/* Una textarea non e' alta 34px come gli altri campi. */
textarea.input { height: auto; min-height: 76px; padding: 8px 11px; line-height: 1.6; resize: vertical; }

/* La chiave o il token appena emessi: si vedono una volta sola. */
.card-avviso { border-color: var(--pri-line); background: var(--pri-soft); }
.chiave { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 14px 16px; }
.chiave-t { flex: 1 1 100%; }
.chiave-v {
  flex: 1; min-width: 220px; padding: 9px 11px; border-radius: var(--r-sm);
  background: #fff; border: 1px solid var(--pri-line); color: var(--ink);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; overflow-wrap: anywhere;
}

/* Un esempio di comando da copiare. */
pre.cod {
  margin: 10px 0 0; padding: 14px; overflow-x: auto;
  background: var(--side-deep); color: #D8E4F0; border-radius: var(--r-sm);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; line-height: 1.6;
}
pre.cod code { font-family: inherit; }

/* L'elenco delle condizioni sotto un campo password: e' una nota, non un
   contenuto, quindi ha il peso di `.hint` e non quello del testo. */
.regole { margin: 4px 0 6px; padding-left: 18px; font-size: 11.5px; color: var(--mut); }
.regole li { margin-top: 2px; }

/* ===================== il token appena emesso ===================== */
/* Sta in cima al suo pannello e si distingue dal resto: e' l'unica cosa nella
   pagina che non si puo' rileggere ricaricando. */
.token-nuovo {
  display: flex; flex-direction: column; gap: 12px;
  padding: 14px; margin-bottom: 18px;
  background: var(--pri-soft); border: 1px solid var(--pri-line); border-radius: var(--r);
}
.token-nuovo-i { flex: none; font-size: 19px; color: var(--pri-testo); font-style: normal; }

/* Il valore: monospaziato, spezzabile, e selezionabile tutto in un clic —
   perche' la copia a mano resta la via d'uscita quando la clipboard non c'e'. */
.token-valore {
  display: block; padding: 10px 12px; border-radius: var(--r-sm);
  background: #fff; border: 1px solid var(--pri-line); color: var(--ink);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px;
  line-height: 1.5; overflow-wrap: anywhere; user-select: all;
}

/* ===================== strutture ===================== */
/* Ogni struttura e' una card sua: sono cose separate, e dentro un unico
   riquadro si leggevano come un elenco continuo. */


.struttura { overflow: hidden; }
/* Una struttura spenta si vede a meta', e torna piena sotto il puntatore:
   la si guarda proprio quando la si vuole riattivare. */
.struttura-spenta { opacity: .62; transition: opacity .12s; }
.struttura-spenta:hover, .struttura-spenta:focus-within { opacity: 1; }

.struttura-testa-riga {
  display: flex; align-items: flex-start; flex-wrap: wrap; gap: 16px;
  padding: 14px 16px;
}
.struttura-testa-riga > .voce-t { flex: 1; min-width: 180px; }
.struttura-nome { font-size: 14px; font-weight: 600; color: var(--ink); }

/* Il contatore sta su una riga sola. Non va a capo al suo interno: se lo
   spazio non basta e' la riga intera a scendere, cosi' "9 da leggere" non si
   spezza mai fra il numero e quello che dice cos'e'.

   Tutte le parti hanno lo stesso colore e la stessa dimensione: si legge come
   una frase, non come un numero grosso con delle note intorno. */
.conta {
  margin: 0; flex: none; display: inline-flex; align-items: center; gap: 6px;
  white-space: nowrap; font-size: 12.5px; font-weight: 400; color: var(--bodi);
}
/* Nessuna di queste porta colore o misura propri: ereditano tutte da .conta.
   La cifra tiene solo i numeri tabellari, che non cambiano l'aspetto ma
   tengono allineate le colonne quando le strutture sono molte. */
.conta-n { font-size: inherit; font-weight: inherit; color: inherit; font-variant-numeric: tabular-nums; }
.conta-l,
.conta-sep,
.conta-tot,
.conta-nulla,
.conta-ok { font-size: inherit; font-weight: inherit; color: inherit; }
i.conta-ok { font-style: normal; font-size: inherit; line-height: 1; }

.struttura-vuota {
  margin: 0; padding: 12px 16px; border-top: 1px solid var(--line-2);
  font-size: 12.5px; color: var(--mut); background: #FBFCFE;
}


/* ------------------------------ fisarmonica ------------------------------ */
/* Il kit non ha un componente per aprire e chiudere un blocco, quindi e'
   scritto qui. E' un <details> nativo: funziona senza JavaScript, si comanda
   da tastiera e i lettori di schermo annunciano da soli se e' aperto o chiuso.
   Una fisarmonica costruita a mano con un bottone e una classe costerebbe di
   piu' e direbbe di meno. */
.fisa { border-top: 1px solid var(--line-2); }

.fisa-t {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  padding: 11px 16px; cursor: pointer; user-select: none;
  font-size: 12.5px; font-weight: 500; color: var(--bodi); background: #FBFCFE;
  list-style: none;
}
/* Il triangolino predefinito se ne va: al suo posto c'e' la freccia del kit,
   che ruota. Servono entrambe le righe, WebKit usa la sua. */
.fisa-t::-webkit-details-marker { display: none; }
.fisa-t::marker { content: ''; }

.fisa-t:hover { background: #F2F6FB; color: var(--ink); }
.fisa-t:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--pri); }

.fisa-freccia {
  flex: none; font-size: 16px; line-height: 1; color: var(--faint);
  transition: transform .15s;
}
.fisa[open] > .fisa-t { background: #fff; color: var(--ink); border-bottom: 1px solid var(--line-2); }
.fisa[open] > .fisa-t .fisa-freccia { transform: rotate(90deg); color: var(--pri-testo); }

@media (prefers-reduced-motion: reduce) { .fisa-freccia { transition: none; } }

.tbl-collegate th:nth-child(1) { width: 190px; }
.tbl-collegate th:nth-child(2) { width: 220px; }
.tbl-collegate th:nth-child(3) { width: 170px; }
.tbl-collegate th:nth-child(4) { width: 120px; }
.tbl-collegate th:nth-child(5) { width: 150px; }

/* ------------------------------ ricerca ------------------------------ */
/* La lente del kit e' posizionata da `.cerca > svg`: qui l'icona e' un <i> di
   Remix, quindi resta fuori dal campo e finisce sopra, storta. Stessa regola
   per l'icona a carattere. */
.cerca > i {
  position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
  font-style: normal; font-size: 15px; line-height: 1;
  color: var(--faint); pointer-events: none;
}

/* Fuori da una card: la ricerca e' uno strumento della pagina, non un suo
   contenuto, e chiusa in un riquadro pesava come una sezione in piu'. */
.cerca-riga { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cerca-riga form { display: flex; align-items: center; gap: 8px; flex: 1 1 340px; min-width: 0; }
/* Il campo deve stare largo quanto il suo suggerimento: troncato a meta' non
   dice piu' cosa si puo' cercare, che e' l'unica cosa che fa. */
.cerca-riga .cerca { flex: 1 1 260px; min-width: 200px; max-width: 380px; }

.cerca-nota { flex: 1 1 100%; margin: 0; font-size: 11.5px; color: var(--faint); }

/* Una pastiglia che e' anche un comando. Resta una pastiglia — stesso
   dizionario di stato del resto dell'applicazione — ma si vede che si preme:
   cambia tinta sotto il puntatore e prende il fuoco da tastiera. */
.pill-b { cursor: pointer; font-family: inherit; transition: filter .12s, box-shadow .12s; }
.pill-b:hover { filter: brightness(.96); }
.pill-b:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(26, 124, 149, .3); }

/* Il progetto nell'elenco "collega utenze": sempre presente, anche quando non
   c'e', perche' una riga che sparisce lascia il dubbio. */
.sw-progetto {
  display: inline-flex; align-items: center; gap: 5px; margin-top: 4px;
  font-size: 11px; color: var(--pri-testo);
  background: var(--pri-soft); border: 1px solid var(--pri-line);
  border-radius: 20px; padding: 1px 8px;
}
.sw-progetto i { font-style: normal; font-size: 12px; }

/* ===================== email ===================== */
/* I filtri stanno sul fondo pagina, non in una card: sono uno strumento, non
   un contenuto. Vanno a capo per gruppi quando lo spazio non basta. */
.filtri { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; }
.filtri-cerca { flex: 1 1 260px; min-width: 200px; max-width: 340px; }
.filtri-c { display: block; flex: 0 1 190px; min-width: 150px; }
/* La voce dell'utenza porta anche il progetto, quindi e' piu' lunga delle
   altre: le si lascia piu' spazio invece di troncarla a meta' parola. */
.filtri-c-larga { flex: 0 1 260px; min-width: 190px; }
.filtri-c-stretta { flex: 0 1 140px; min-width: 120px; }
.filtri-azioni { display: flex; align-items: center; gap: 8px; }
/* L'interruttore occupa la riga sotto: e' una condizione, non un campo. */
.filtri-sw { flex: 1 1 100%; margin-top: 2px; }
.filtri-sw.sw-spenta { opacity: .5; }

.tbl-email th:nth-child(1) { width: 130px; }
.tbl-email th:nth-child(2) { width: 170px; }
.tbl-email th:nth-child(3) { width: 210px; }
.tbl-email th:nth-child(4) { width: 140px; }
.tbl-email th:nth-child(5) { width: 120px; }
.tbl-email th:nth-child(6) { width: 130px; }
.tbl-email th:nth-child(7) { width: 140px; }
.tbl-email th:nth-child(8) { width: 150px; }
/* Due informazioni in una cella: la seconda va sotto, piu' tenue. */
.tbl-email td .t-xs { display: block; }

/* Coppie etichetta/valore nel pannello di dettaglio. Una griglia e non una
   tabella: sono dati di un oggetto solo, non righe da confrontare. */
.dati { margin: 0; display: grid; gap: 10px; }
@media (min-width: 560px) { .dati { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.dati > div { min-width: 0; }
.dati dt { font-size: 11px; color: var(--mut); margin-bottom: 2px; }
.dati dd { margin: 0; font-size: 12.5px; color: var(--ink); }

/* Una camera richiesta. */
.camera {
  padding: 10px 12px; margin-top: 8px;
  background: #FBFCFE; border: 1px solid var(--line-2); border-radius: var(--r-sm);
}
.camera .t-xs { margin-top: 4px; }

/* Il testo scritto dal cliente: si legge come un messaggio, quindi conserva
   gli a capo invece di diventare un paragrafo unico. */
.informazioni {
  margin: 0; padding: 10px 12px;
  background: #FBFCFE; border: 1px solid var(--line-2); border-radius: var(--r-sm);
  font-size: 12.5px; line-height: 1.6; color: var(--bodi);
  white-space: pre-wrap; overflow-wrap: anywhere;
}

.tbl-email th:nth-child(9) { width: 120px; }

/* ------------------------------ paginazione ------------------------------ */
/* Il kit ha `.pg` per il singolo pulsante ma non il gruppo, ne' la variante
   con l'icona: `.pg` e' dimensionata per una cifra e un'icona ci sta storta. */
.pg-gruppo { display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap; }

/* `.pg` e' nato per un numero: le voci che sono collegamenti devono comunque
   comportarsi come pulsanti (allineamento, nessuna sottolineatura). */
a.pg, span.pg, button.pg {
  display: inline-flex; align-items: center; justify-content: center;
  text-decoration: none; line-height: 1;
}
/* La pagina corrente non si preme: `.pg` porta `cursor: pointer` per i
   pulsanti, ma su di lei sarebbe un invito a un clic che non fa niente. */
span.pg.on { cursor: default; }

.pg-ic { padding: 0; }
.pg-ic i { font-style: normal; font-size: 16px; line-height: 1; }

/* Il salto fra intervalli di pagine non e' un comando: niente cornice. */
.pg-salto {
  min-width: 20px; text-align: center; color: var(--faint);
  font-size: 12.5px; user-select: none;
}


/* ===================== console API ===================== */
/* La pagina che documenta le API e le prova. Il kit non ha un componente per un
   blocco di prosa tecnica — non gli serve, e' una pagina di applicazione — ne'
   per un client HTTP, che e' quello che la console e'. */

/* Un blocco dentro una card: la linea del kit piu' il rientro della card
   sommerebbero i due spazi in alto. Gli altri usi di `.sez` stanno dentro un
   pannello (`.pan-b`), che non ha questo problema. */
.card > .sez { padding-top: 0; }

/* --- prosa --- */
/* Testo tecnico continuo: paragrafi, elenchi e codice in linea. Le regole
   stanno sul contenitore e non su ogni elemento, cosi' il markup resta
   leggibile — e perche' la CSP vieta gli attributi `style`. */
.prosa { font-size: 12.5px; line-height: 1.65; color: var(--bodi); }
.prosa > * + * { margin-top: 10px; }
.prosa p { margin: 0; }
.prosa ul, .prosa ol { margin: 0; padding-left: 20px; }
.prosa li + li { margin-top: 4px; }
.prosa b, .prosa strong { color: var(--ink); font-weight: 600; }
.prosa i { font-style: italic; }
/* Un titoletto dentro la prosa: pesa come `.sez-t` del kit ma senza la linea,
   perche' qui separa due paragrafi, non due sezioni. */
.prosa h3 {
  font-size: 12.5px; font-weight: 600; color: var(--ink);
  margin: 18px 0 0; padding-top: 14px; border-top: 1px solid var(--line-2);
}
.prosa h3:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
/* Un nome di campo o di rotta dentro una frase. */
.prosa code, code.cod-in {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11.5px;
  background: #F1F5F9; border: 1px solid var(--line-2); border-radius: 4px;
  padding: 0 4px; color: var(--ink); overflow-wrap: anywhere;
}
/* Dentro un blocco di codice il `code` non e' in linea: e' il blocco. */
.prosa pre.cod code { background: none; border: 0; padding: 0; color: inherit; font-size: 12px; }
.prosa .hint { margin-top: 10px; }

/* Un elenco numerato di passi: le cifre contano, quindi restano visibili. */
.passi { margin: 0; padding-left: 20px; }
.passi > li + li { margin-top: 8px; }
.passi ul { margin-top: 4px; }

/* --- console di prova --- */
.cons { display: grid; gap: 14px; }
/* I parametri della richiesta: ognuno con il suo controllo, e si vedono solo
   quelli che la rotta usa davvero — un campo che non c'entra e' un campo che
   si compila per sbaglio. Quelli nascosti escono dalla griglia da soli. */
.cons-p { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 720px) { .cons-p { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* Il campo con una nota lunga sotto prende la riga intera. */
.cons-p-larga { grid-column: 1 / -1; }
.cons-invia { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
/* L'utenza di chi non amministra: e' un dato, non una scelta, ma sta nella riga
   dei campi e deve pesarci come gli altri — percio' ha la cornice di un campo
   e l'aria di uno spento. */
.cons-utenza-fissa { display: flex; align-items: center; background: #F8FAFC; color: var(--bodi); cursor: default; }
.cons-stato { font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
.cons-ok { color: #15855C; }
.cons-bad { color: #CB3549; }
/* Il corpo della richiesta e' alto quanto un JSON leggibile: piu' basso
   costringerebbe a scorrere dentro un campo per vedere cosa si sta inviando. */
textarea#cons-corpo { min-height: 180px; }
/* La risposta puo' essere lunga: scorre lei, non la pagina. Gli a capo si
   conservano ma le righe lunghissime rientrano, perche' una riga di JSON senza
   spazi manderebbe la barra orizzontale fuori dallo schermo. */
pre.cod-out { max-height: 420px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; }

/* --- tabelle della documentazione --- */
.tbl-rotte th:nth-child(1) { width: 80px; }
.tbl-rotte th:nth-child(2) { width: 220px; }
.tbl-rotte th:nth-child(3) { width: 140px; }
.tbl-campi th:nth-child(1) { width: 190px; }
.tbl-campi th:nth-child(2) { width: 90px; }
.tbl-errori th:nth-child(1) { width: 90px; }
.tbl-errori th:nth-child(2) { width: 300px; }
.tbl-guasti th:nth-child(1) { width: 300px; }


/* --- esempi di codice a schede --- */
/* Le schede sono `.tabs`/`.tab` del kit, ma il comando e' un radio invece di
   un bottone con una classe: cosi' cambiare esempio non richiede JavaScript,
   le frecce funzionano da tastiera e lo stato lo tiene il documento.

   I radio stanno tutti in testa al riquadro, percio' il pannello acceso si
   sceglie con il combinatore di fratelli e `:nth-of-type`: dieci righe invece
   di cinque, ma funziona in qualunque browser sappia fare `:checked`. La
   versione con `:has()` si appoggiava a `@supports selector(...)`, e dove quel
   controllo non vale la pagina mostrava tutti e cinque gli esempi in fila —
   che e' esattamente l'aspetto di una pagina rotta. */
.cod-t { margin-top: 10px; }
/* Il radio comanda ma non si vede: resta nel documento per prendere il fuoco,
   e fuori dal flusso per non occupare spazio. */
.cod-t-r { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

/* Le schede a sinistra, il pulsante di copia a destra: la linea di fondo sta
   sulla riga intera, non solo sotto le schede, che altrimenti si interrompe
   dove comincia il pulsante. */
.cod-t-h { display: flex; align-items: flex-end; gap: 8px; border-bottom: 1px solid var(--line); }
.cod-t-h .tabs { flex: 1; min-width: 0; border-bottom: 0; }
.cod-t-c { flex: none; margin-bottom: 6px; }
.cod-t-n { margin-bottom: -1px; }
.cod-t .tab { cursor: pointer; user-select: none; }

/* Il blocco attaccato alle schede: niente stacco fra la scheda e il suo codice.

   E con un'altezza contenuta: gli esempi vanno da quattro righe di curl a
   novanta di Go, e senza un tetto cambiare scheda spostava la pagina di
   millecinquecento pixel sotto il puntatore. Dentro scorre il blocco. */
.cod-t pre.cod {
  display: none; margin-top: 0;
  border-top-left-radius: 0; border-top-right-radius: 0;
  min-height: 132px; max-height: 460px; overflow: auto;
}

/* Il pannello acceso e la sua scheda. Cinque righe per parte: una per
   posizione, perche' il legame fra la scheda e il pannello e' l'ordine. */
.cod-t-r:nth-of-type(1):checked ~ pre:nth-of-type(1),
.cod-t-r:nth-of-type(2):checked ~ pre:nth-of-type(2),
.cod-t-r:nth-of-type(3):checked ~ pre:nth-of-type(3),
.cod-t-r:nth-of-type(4):checked ~ pre:nth-of-type(4),
.cod-t-r:nth-of-type(5):checked ~ pre:nth-of-type(5) { display: block; }

.cod-t-r:nth-of-type(1):checked ~ .cod-t-h label:nth-of-type(1),
.cod-t-r:nth-of-type(2):checked ~ .cod-t-h label:nth-of-type(2),
.cod-t-r:nth-of-type(3):checked ~ .cod-t-h label:nth-of-type(3),
.cod-t-r:nth-of-type(4):checked ~ .cod-t-h label:nth-of-type(4),
.cod-t-r:nth-of-type(5):checked ~ .cod-t-h label:nth-of-type(5) {
  color: var(--pri-testo); border-bottom-color: var(--pri); font-weight: 600;
}

/* Il fuoco da tastiera: in un gruppo di radio le frecce spostano insieme fuoco
   e selezione, quindi la scheda col fuoco e' sempre quella accesa. */
.cod-t-r:nth-of-type(1):focus-visible ~ .cod-t-h label:nth-of-type(1),
.cod-t-r:nth-of-type(2):focus-visible ~ .cod-t-h label:nth-of-type(2),
.cod-t-r:nth-of-type(3):focus-visible ~ .cod-t-h label:nth-of-type(3),
.cod-t-r:nth-of-type(4):focus-visible ~ .cod-t-h label:nth-of-type(4),
.cod-t-r:nth-of-type(5):focus-visible ~ .cod-t-h label:nth-of-type(5) {
  outline: none; box-shadow: inset 0 0 0 2px var(--pri); border-radius: var(--r-sm);
}


/* ===================== statistiche ===================== */
/* La pagina che dice se il sistema sta funzionando. Il kit ha la cornice del
   grafico (`.graf`) e i pezzi del riquadro numerico (`.kpi-ic`, `.kpi-v`,
   `.kpi-l`), ma il disegno lo fa con ECharts da CDN e i riquadri li compone
   con utility Tailwind: qui non c'e' ne' l'uno ne' le altre (CSP
   `script-src 'self'`, nessun passo di build). Quello che segue e' il minimo
   per mettere insieme quei pezzi: le classi restano quelle del kit. */

/* Nascosto agli occhi, non ai lettori di schermo. Nel kit e' l'utility
   `sr-only` di Tailwind; qui serve per le didascalie delle tabelle. */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* --- il riquadro numerico (kit: componente `Kpi`) --- */
.kpi { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; }
.kpi-t { flex: 1; min-width: 0; }
.kpi-ic { width: 34px; height: 34px; border-radius: 9px; }
.kpi-ic i { font-style: normal; font-size: 17px; line-height: 1; }
.kpi-v { display: block; margin-top: 1px; }
.kpi-n { display: block; margin-top: 2px; font-size: 11px; line-height: 1.45; color: var(--mut); }
/* Le tinte dell'icona: fondo tenue e simbolo pieno, come nel kit, dove il
   colore arriva da `:style` — qui e' una classe perche' la CSP vieta gli
   attributi di stile. */
.ki-info { background: var(--pri-soft); color: var(--pri-testo); }
.ki-ok   { background: #E9F8F1; color: #15855C; }
.ki-warn { background: #FFF6E6; color: #B0700A; }
.ki-bad  { background: #FDEDEF; color: #CB3549; }
.ki-mute { background: #F1F5F9; color: #5D6B7B; }

/* La riga di riepilogo del kit (`.sintesi`) dentro una card: i numeri che non
   meritano un riquadro per uno, ma che si vogliono vedere senza scorrere. */
.card > .sintesi:last-child { border-bottom: 0; }
.sintesi-val.t-warn { color: #B0700A; }

/* --- il grafico disegnato dal server --- */
/* La tela ha coordinate sue (520x150, vicine alla larghezza vera del riquadro)
   e si allarga quanto la card. Scala tutta insieme, testo compreso: allargare
   solo la larghezza — con `preserveAspectRatio: none` — schiaccerebbe le cifre
   dell'asse, e una tela molto piu' larga della card le rimpicciolirebbe. */
.graf-svg { display: block; width: 100%; height: auto; overflow: visible; }
.graf-riga { stroke: var(--line-2); stroke-width: 1; }
.graf-zero { stroke: var(--line); }
.graf-asse { fill: var(--faint); font-size: 10px; font-variant-numeric: tabular-nums; }
.graf-barra { rx: 1.5; }
.graf-linea { fill: none; stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; }
.graf-area { stroke: none; }

.graf-leg { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-left: auto; }
.graf-leg > span { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--mut); }
.graf-leg b { color: var(--ink); font-variant-numeric: tabular-nums; }
.graf-vuoto { margin: 0; padding: 30px 0; text-align: center; font-size: 12.5px; color: var(--faint); }

/* La cautela sotto il disegno: e' una nota, quindi pesa come `.hint`. */
.graf-nota { margin: 8px 0 0; font-size: 11px; line-height: 1.55; color: var(--faint); }
.graf-nota b { color: var(--mut); font-weight: 600; }
/* La tabella dei numeri chiude la card: e' la stessa cosa del grafico, non una
   sezione nuova, quindi si appoggia ai suoi bordi. Niente margine negativo in
   basso oltre il rientro della card, o il contenuto seguente ci monterebbe
   sopra. */
.graf-tab { margin: 12px -16px -14px; }
.graf-tab .fisa-t { font-size: 12px; }

/* Il colore delle serie e' quello dei pallini del kit, cosi' la legenda e il
   disegno dicono lo stesso: la legenda usa `.dot`, qui sono riempimento
   (colonne e aree) e tratto (linee). */
.b-arrivate   { fill: #46C0DF; }
.b-lette      { fill: #22A06B; }
.b-archiviate { fill: #9AA7B5; }
.b-prelievi   { fill: #7B5CE0; }
.b-rifiuti    { fill: #DB4B60; }
.b-frenate    { fill: #D99413; }

.l-arrivate   { stroke: #46C0DF; }
.l-lette      { stroke: #22A06B; }
.l-archiviate { stroke: #9AA7B5; }
.l-prelievi   { stroke: #7B5CE0; }
.l-rifiuti    { stroke: #DB4B60; }
.l-frenate    { stroke: #D99413; }

.a-arrivate   { fill: rgba(70, 192, 223, .16); }
.a-lette      { fill: rgba(34, 160, 107, .16); }
.a-archiviate { fill: rgba(154, 167, 181, .16); }
.a-prelievi   { fill: rgba(123, 92, 224, .16); }
.a-rifiuti    { fill: rgba(219, 75, 96, .16); }
.a-frenate    { fill: rgba(217, 148, 19, .16); }

/* --- il suggerimento --- */
/* La fascia del giorno: invisibile, prende il puntatore e si accende appena. */
.graf-mira { fill: transparent; }
.graf-mira:hover { fill: rgba(29, 38, 48, .045); }

/* Il riquadro con i numeri, costruito da `app.js`. Senza JavaScript non c'e' e
   al suo posto resta il `<title>` dell'SVG, che il browser mostra da solo. */
.graf-tip {
  position: absolute; top: 0; left: 0; z-index: 5; pointer-events: none;
  display: flex; flex-direction: column; gap: 3px; white-space: nowrap;
  padding: 8px 10px; border-radius: var(--r-sm);
  background: #fff; border: 1px solid var(--line); box-shadow: var(--sh-md);
  font-size: 11.5px; color: var(--bodi);
}
.graf-tip-g { font-size: 11px; color: var(--mut); font-variant-numeric: tabular-nums; }
.graf-tip-r { display: flex; align-items: center; gap: 6px; }
.graf-tip-r b { margin-left: auto; padding-left: 10px; color: var(--ink); }

/* --- la barra del periodo --- */
/* `.seg` del kit, ma le voci sono collegamenti: il periodo sta nell'indirizzo,
   quindi si condivide e si ricarica, e non serve JavaScript. */
a.seg-b { text-decoration: none; }
.stat-barra { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.stat-barra form { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* Il motivo di un blocco: due righe in una cella, la seconda e' il rimedio.
   `display:block` e un po' d'aria sopra, altrimenti la pastiglia e il testo si
   toccano. */
.blocco-r { display: block; margin-top: 4px; font-size: 11px; line-height: 1.5; color: var(--mut); }

/* Un elenco di pastiglie dentro una voce: vanno a capo e non si toccano. */
.pill-elenco { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }

/* Due dati sulla stessa riga di una cella (nome e email, conteggio e nota):
   il secondo va sotto, piu' tenue, con il suo spazio. */
.tbl-letture td .t-xs,
.tbl-blocchi td .t-xs { display: block; margin-top: 2px; }

.tbl-letture th:nth-child(1) { width: 180px; }
.tbl-letture th:nth-child(2) { width: 150px; }
.tbl-letture th:nth-child(3) { width: 100px; }
.tbl-letture th:nth-child(4) { width: 100px; }
.tbl-letture th:nth-child(5) { width: 100px; }
.tbl-letture th:nth-child(6) { width: 100px; }
.tbl-letture th:nth-child(7) { width: 140px; }

.tbl-blocchi th:nth-child(1) { width: 180px; }
.tbl-blocchi th:nth-child(2) { width: 190px; }
.tbl-blocchi th:nth-child(3) { width: 140px; }
.tbl-blocchi th:nth-child(5) { width: 130px; }


/* ===================== campo password ===================== */
/* Il pulsante che mostra la password sta dentro il campo, a destra. Il kit non
   ha questo componente: ha `.input` e ha i bottoni, ma non la loro
   sovrapposizione. Il campo lascia lo spazio, il pulsante ci si appoggia. */
.pwd { position: relative; }
.pwd .input { padding-right: 38px; }
.pwd-b {
  position: absolute; right: 3px; top: 50%; transform: translateY(-50%);
  width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: var(--r-sm); background: none; cursor: pointer;
  color: var(--faint); font-family: inherit;
}
.pwd-b:hover { color: var(--bodi); background: #F1F5F9; }
.pwd-b:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(26, 124, 149, .3); color: var(--bodi); }
.pwd-b i { font-style: normal; font-size: 16px; line-height: 1; }


/* ===================== console: domanda e risposta ===================== */
/* Meta' e meta' da 1024px in su. Sotto, una colonna sola: affiancare due
   colonne su un tablet in verticale vuol dire due colonne illeggibili. */
.cons-due { display: grid; grid-template-columns: minmax(0, 1fr); }
.cons-col { padding: 16px; min-width: 0; }

@media (min-width: 1024px) {
  .cons-due { grid-template-columns: 1fr 1fr; }
  .cons-col + .cons-col { border-left: 1px solid var(--line-2); }
  /* La risposta resta in vista mentre si scorre la colonna dei parametri:
     e' l'unica ragione per cui le due stanno affiancate. */
  .cons-col-ris { position: sticky; top: 0; align-self: start; }
  /* I parametri sono quattro per riga a tutta larghezza: in meta' pagina
     starebbero in quaranta pixel l'uno. */
  .cons-due .cons-p { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* La risposta e' alta quanto la finestra e scorre lei, non la pagina. */
.cons-col-ris pre.cod-out { margin-top: 10px; max-height: min(66vh, 620px); }

/* Il marchio sulla laterale scura: il file porta il suo fondo bianco, quindi
   si arrotondano gli angoli perche' legga come una tessera e non come un
   ritaglio. */
.lat-marchio { border-radius: 6px; background: #fff; }

/* La risposta vuota deve comunque leggersi come un pannello, non come una riga
   dimenticata in cima alla colonna. */
.cons-col-ris pre.cod-out { min-height: 180px; }


/* ------------------------------ calendario ------------------------------ */
/* Il componente `Calendario` del kit, reso senza Vue. Le classi sono le sue e
   stanno in ui-kit.css: qui c'e' solo quello che nel kit e' un'utility di
   Tailwind (`ml-auto`, `mx-auto`), piu' l'icona a carattere al posto dell'svg —
   la stessa correzione gia' fatta per la lente della ricerca. */

/* `.cal-campo-b svg` del kit dimensiona l'icona: qui e' un `<i>` di Remix, che
   non ha larghezza propria. */
.cal-campo-b i, .cal-campo-i { font-style: normal; font-size: 15px; line-height: 1; }

/* Nel kit: `class="cal-campo-b ml-auto"`. */
.cal-campo-b-fine { margin-left: auto; }
/* Nel kit: `class="flex items-center gap-1.5 mx-auto"`. */
.cal-scelte { display: flex; align-items: center; gap: 6px; margin: 0 auto; }
/* Nel kit: `class="ml-auto flex gap-2"`. */
.cal-piede-a { margin-left: auto; display: flex; gap: 8px; }

/* Il campo con l'ora accanto al giorno: il kit ha il calendario, non un
   orologio, e "cosa le e' arrivato dalle 9 in poi" ha bisogno dell'ora. */
.cons-quando { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; }
.cons-quando-g { flex: 1 1 180px; min-width: 160px; }
.cons-quando-o { flex: 0 0 120px; }