/*
 * I mattoni dell'interfaccia, con il nostro vocabolario di classi.
 *
 * Li carica sia il telaio amministrativo sia quello pubblico: un campo, un
 * pulsante e un avviso devono essere la stessa cosa nella schermata di accesso
 * e dentro il pannello, altrimenti si impara l'interfaccia due volte.
 *
 * Perché classi nostre e non quelle di Bootstrap: le nostre schermate le
 * scriviamo noi, e un vocabolario di dieci nomi che sappiamo a memoria si
 * scrive più in fretta di `btn btn-primary btn-sm d-inline-flex`. Le classi di
 * Bootstrap restano vive e rivestite nei loro colori (vedi admin.css): servono
 * ai pezzi che il tema W3CRM porta con sé — tendine, modali, menu — che non
 * possiamo riscrivere.
 *
 * Nessun colore in cifre qui dentro: solo variabili di tokens.css. Un valore
 * in cifre in questo file è un difetto.
 */

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--sfondo);
  color: var(--testo);
  font-family: var(--carattere);
  font-size: var(--t-m);
  line-height: var(--lh-corpo);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ── Tipografia ─────────────────────────────────────────────────────────────
   Una scala sola, applicata agli elementi: così una schermata scritta senza
   pensarci è già impaginata, e non serve ricordarsi una classe per ogni
   titolo. */
h1, h2, h3, h4 {
  margin: 0 0 var(--s3);
  font-weight: 600;
  line-height: var(--lh-stretta);
  letter-spacing: var(--sp-titolo);
  color: var(--testo);
}
h1 { font-size: var(--t-2xl); }
h2 { font-size: var(--t-xl); }
h3 { font-size: var(--t-l); }
h4 { font-size: var(--t-m); }

p { margin: 0 0 var(--s4); max-width: var(--misura); }
p:last-child { margin-bottom: 0; }

small, .minuto {
  font-size: var(--t-s);
  letter-spacing: var(--sp-minuto);
  color: var(--testo-tenue);
}

a { color: var(--accento-testo); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--accento-forte); }

/* Ciò che è scritto da una macchina si vede che lo è, e in colonna le cifre si
   confrontano senza rileggerle. */
code, kbd, samp, .dati {
  font-family: var(--carattere-dati);
  font-size: .9375em;
  font-weight: 400;   /* del Mono serviamo un peso solo: ereditarne un altro (dentro
                         un <strong>, in un <th>) darebbe un grassetto sintetico */
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}

hr {
  border: 0;
  border-top: 1px solid var(--bordo);
  margin: var(--s5) 0;
}

/* Testo che esiste solo per chi legge con le orecchie: un avviso colorato dice
   "errore" a chi lo vede e niente a chi lo ascolta. Stessa regola di Bootstrap,
   ridichiarata perché le pagine fuori dal pannello non caricano Bootstrap. */
.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* ── Anello del fuoco ───────────────────────────────────────────────────────
   Un anello solo, uguale in tutta l'applicazione, e visibile in entrambe le
   palette: chi naviga da tastiera deve sapere sempre dov'è.

   `:focus-visible` e non `:focus`, ma NON perché «altrimenti comparirebbe a
   ogni clic del mouse» — quella è la spiegazione che si trova scritta ovunque,
   e su un campo di testo è falsa: misurato su Chrome, cliccando dentro un
   `input[type=text]` col mouse `:focus-visible` combacia lo stesso, e l'anello
   compare. Il criterio vero lo decide il browser controllo per controllo, e per
   i campi di testo ha deciso che l'anello serve comunque, perché lì si scrive e
   sapere dove si sta scrivendo conta a prescindere da come ci si è arrivati.

   La ragione per cui la regola è scritta così resta buona, ed è un'altra: su
   ciò che NON è un campo di testo — un pulsante, una voce di menu — il browser
   non lo fa comparire dopo un clic, e lì l'anello sarebbe rumore. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--accento);
  outline-offset: 2px;
}

/* ── Riquadro ───────────────────────────────────────────────────────────────
   Bordo, non ombra: l'ombra è riservata a ciò che sta davvero sopra la pagina
   (tendine, popover, modali). Vedi la nota in testa a tokens.css. */
.riquadro {
  background: var(--superficie);
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
}
.riquadro + .riquadro { margin-top: var(--s4); }

.riquadro-testa {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s4);
  flex-wrap: wrap;
  padding: var(--s4) var(--s5);
  border-bottom: 1px solid var(--bordo);
}
.riquadro-testa > h2,
.riquadro-testa > h3 { margin: 0; }
.riquadro-corpo { padding: var(--s5); }
.riquadro-piede {
  padding: var(--s3) var(--s5);
  border-top: 1px solid var(--bordo);
  background: var(--superficie-alt);
  border-radius: 0 0 var(--raggio) var(--raggio);
}

/* ── Campi ──────────────────────────────────────────────────────────────────
   Il bordo dei comandi è volutamente più marcato di quello dei riquadri
   (`--bordo-forte`, sopra 3:1): il bordo è ciò che dice "qui si scrive". */
.campo-gruppo { margin-bottom: var(--s4); }
.campo-gruppo:last-child { margin-bottom: 0; }

/* Il titolo di un blocco dentro una scheda con più servizi (impostazioni,
   «Account calendari»): un bordo sopra e non un riquadro a parte, perché resta
   comunque un'unica scheda, un solo modulo che si compila. */
.sottogruppo-titolo {
  margin: var(--s5) 0 var(--s3);
  padding-top: var(--s4);
  border-top: 1px solid var(--bordo);
  font-size: var(--t-m);
  color: var(--testo);
}
.sottogruppo-titolo:first-child { margin-top: 0; padding-top: 0; border-top: none; }

.etichetta {
  display: block;
  margin-bottom: var(--s2);
  font-size: var(--t-s);
  font-weight: 500;
  color: var(--testo-tenue);
}

/*
 * `.campo` e' la classe dei comandi, ma non si puo' pretendere che ogni vista se
 * la ricordi: le pagine degli elenchi, dei filtri e delle schede dei moduli
 * scrivevano `<input>` e `<select>` nudi, e il risultato era un campo col bordo
 * di fabbrica del browser in mezzo a un'interfaccia disegnata — su tema scuro, un
 * rettangolo bianco. Quindi i campi dentro i nostri contenitori valgono come
 * `.campo` senza dirlo, e chi vuole puo' comunque mettere la classe.
 *
 * Escluse quattro famiglie: le caselle e i radio (che hanno una forma
 * propria), i campi nascosti, i selettori di colore (`type=color`: il
 * riquadro di fabbrica del browser è già il comando giusto — vestirlo da
 * campo di testo lo allunga a piena larghezza e ne nasconde il colore, fix
 * round 1 del Task 16 della newsletter), e i comandi che portano gia' le
 * classi di Bootstrap, che il tema riveste per conto suo in admin.css. Una
 * copia sola della regola: questo selettore si aggiunge ai blocchi `.campo`
 * gia' scritti, non li ripete.
 */
.campo,
:is(.forma, .filtri-riga, .riquadro-corpo, .salva-vista, .foglio-corpo, .tabella) :is(input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=file]):not([type=submit]):not([type=button]):not([type=color]), select, textarea):not(.form-control):not(.form-select):not(.form-check-input) {
  display: block;
  width: 100%;
  padding: .5625rem .75rem;
  font-family: inherit;
  font-size: var(--t-m);
  line-height: 1.4;
  color: var(--testo);
  background: var(--superficie);
  border: 1px solid var(--bordo-forte);
  border-radius: var(--raggio-s);
  transition: border-color var(--transizione), box-shadow var(--transizione);
}
/* Stessa altezza per ogni comando: un `select` nativo e un `input` hanno
   riempimenti interni diversi, e affiancati si vede. */
.campo,
:is(.forma, .filtri-riga, .riquadro-corpo, .salva-vista, .foglio-corpo, .tabella) :is(input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=file]):not([type=submit]):not([type=button]):not([type=color]), select, textarea):not(.form-control):not(.form-select):not(.form-check-input) {
  min-height: 2.5rem;
}

.campo::placeholder,
:is(.forma, .filtri-riga, .riquadro-corpo, .salva-vista, .foglio-corpo, .tabella) :is(input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=file]):not([type=submit]):not([type=button]):not([type=color]), select, textarea):not(.form-control):not(.form-select):not(.form-check-input)::placeholder { color: var(--testo-debole); opacity: 1; }
.campo:hover:not(:disabled),
:is(.forma, .filtri-riga, .riquadro-corpo, .salva-vista, .foglio-corpo, .tabella) :is(input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=file]):not([type=submit]):not([type=button]):not([type=color]), select, textarea):not(.form-control):not(.form-select):not(.form-check-input):hover:not(:disabled) { border-color: var(--testo-tenue); }
/* Due stati, due segni, mai insieme.
   Col mouse: bordo d'accento e alone morbido, nessun anello.
   Da tastiera: bordo d'accento e anello netto, nessun alone.

   `:focus-visible` combacia con un campo di testo anche quando lo si clicca col
   mouse, quindi una semplice esclusione su `outline` non basterebbe a separarli:
   ogni campo, su ogni schermata, mostrerebbe i due indicatori sovrapposti. È
   l'alone a dover stare in `:not(:focus-visible)`, non l'anello.

   L'anello resta quello globale, che usa `var(--accento)` diretto: non dipende
   da `color-mix()`, che un browser di due anni fa non calcola. */
.campo:focus,
:is(.forma, .filtri-riga, .riquadro-corpo, .salva-vista, .foglio-corpo, .tabella) :is(input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=file]):not([type=submit]):not([type=button]):not([type=color]), select, textarea):not(.form-control):not(.form-select):not(.form-check-input):focus { border-color: var(--accento); }
.campo:focus:not(:focus-visible),
:is(.forma, .filtri-riga, .riquadro-corpo, .salva-vista, .foglio-corpo, .tabella) :is(input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=file]):not([type=submit]):not([type=button]):not([type=color]), select, textarea):not(.form-control):not(.form-select):not(.form-check-input):focus:not(:focus-visible) {
  outline: none;
  box-shadow: 0 0 0 3px var(--anello);
}
.campo:disabled,
:is(.forma, .filtri-riga, .riquadro-corpo, .salva-vista, .foglio-corpo, .tabella) :is(input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=file]):not([type=submit]):not([type=button]):not([type=color]), select, textarea):not(.form-control):not(.form-select):not(.form-check-input):disabled { background: var(--superficie-alt); color: var(--testo-debole); cursor: not-allowed; }
.campo[aria-invalid="true"] { border-color: var(--errore); }

/* Un campo che aspetta un codice: cifre a larghezza fissa, distanziate, perché
   si riesca a confrontarle con quelle sullo schermo del telefono. */
.campo--codice {
  font-family: var(--carattere-dati);
  font-size: var(--t-xl);
  letter-spacing: .28em;
  text-align: center;
  padding-inline: var(--s3);
}

.aiuto { display: block; margin-top: var(--s2); font-size: var(--t-s); color: var(--testo-debole); }
.errore-campo { display: block; margin-top: var(--s2); font-size: var(--t-s); color: var(--errore); }

/* ── Pulsanti ───────────────────────────────────────────────────────────────
   Uno principale per schermata. Se ce ne sono due, non ce n'è nessuno. */
.pulsante {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  padding: .5625rem 1.125rem;
  font-family: inherit;
  font-size: var(--t-m);
  font-weight: 500;
  line-height: 1.4;
  color: var(--testo);
  background: var(--superficie);
  border: 1px solid var(--bordo-forte);
  border-radius: var(--raggio-s);
  cursor: pointer;
  text-decoration: none;
  transition: background var(--transizione), border-color var(--transizione), color var(--transizione);
}
.pulsante:hover { background: var(--superficie-alt); color: var(--testo); }
.pulsante:disabled, .pulsante[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }

.pulsante--principale {
  color: var(--su-accento);
  background: var(--accento);
  border-color: var(--accento);
}
.pulsante--principale:hover {
  color: var(--su-accento);
  background: var(--accento-forte);
  border-color: var(--accento-forte);
}

.pulsante--fantasma {
  background: transparent;
  border-color: transparent;
  color: var(--testo-tenue);
}
.pulsante--fantasma:hover { background: var(--superficie-alt); color: var(--testo); }

.pulsante--pericolo { color: var(--errore); border-color: var(--errore); background: transparent; }
.pulsante--pericolo:hover { color: var(--errore); background: var(--errore-tenue); }

.pulsante--larghezza-piena { width: 100%; }
.pulsante--piccolo { padding: .375rem .75rem; font-size: var(--t-s); }

/* ── Avvisi (i messaggi flash) ──────────────────────────────────────────────
   Dicono cosa è successo e, quando serve, cosa fare: un avviso che si limita a
   colorarsi non è un messaggio. */
.avviso {
  display: flex;
  align-items: flex-start;
  gap: var(--s3);
  padding: var(--s3) var(--s4);
  margin-bottom: var(--s4);
  border: 1px solid;
  border-left-width: var(--spessore-marcatore);
  border-radius: var(--raggio-s);
  font-size: var(--t-m);
}
.avviso > .fas, .avviso > .far, .avviso > .icona { margin-top: .15em; flex: none; }
.avviso p { margin: 0; }

.avviso--ok         { color: var(--ok);         background: var(--ok-tenue);         border-color: var(--ok); }
.avviso--errore     { color: var(--errore);     background: var(--errore-tenue);     border-color: var(--errore); }
.avviso--attenzione { color: var(--attenzione);  background: var(--attenzione-tenue); border-color: var(--attenzione); }
.avviso--info       { color: var(--info);       background: var(--info-tenue);       border-color: var(--info); }

/* ── Etichette di stato ─────────────────────────────────────────────────────
   Tonde perché non sono comandi: niente di ciò che è tondo si clicca. */
.stato {
  display: inline-flex;
  align-items: center;
  gap: var(--s1);
  padding: .1875rem .5rem;
  border-radius: var(--raggio-pill);
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: var(--sp-minuto);
  white-space: nowrap;
}
.stato--ok         { color: var(--ok);          background: var(--ok-tenue); }
.stato--attenzione { color: var(--attenzione);  background: var(--attenzione-tenue); }
.stato--errore     { color: var(--errore);      background: var(--errore-tenue); }
.stato--info       { color: var(--info);        background: var(--info-tenue); }
.stato--neutro     { color: var(--testo-tenue); background: var(--superficie-alt); }
.stato--accento    { color: var(--accento-testo); background: var(--accento-tenue); }

/* ── Tabelle ────────────────────────────────────────────────────────────────
   Righe separate da una linea sola e nessuna riga verticale: le colonne le
   tiene insieme l'allineamento, e un reticolo completo aggiunge ottanta linee
   che l'occhio deve scavalcare per leggere una riga. */
.tabella-scorrevole { overflow-x: auto; }
.tabella {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--t-m);
}
.tabella th {
  padding: var(--s3) var(--s4);
  text-align: left;
  font-size: var(--t-s);
  font-weight: 600;
  color: var(--testo-tenue);
  background: var(--superficie-alt);
  border-bottom: 1px solid var(--bordo);
  white-space: nowrap;
}
.tabella td {
  padding: var(--s3) var(--s4);
  border-bottom: 1px solid var(--bordo);
  vertical-align: middle;
}
.tabella tbody tr:last-child td { border-bottom: 0; }
.tabella tbody tr { transition: background var(--transizione); }
.tabella tbody tr:hover td { background: var(--superficie-alt); }
/* Le cifre in colonna vanno a larghezza fissa e allineate a destra: due importi
   uno sopra l'altro si confrontano senza rileggerli. L'intestazione resta nel
   carattere dell'interfaccia — non è un numero, è una parola. */
.tabella th.numero { text-align: right; }
.tabella td.numero {
  text-align: right;
  white-space: nowrap;
  font-family: var(--carattere-dati);
  font-variant-numeric: tabular-nums;
}

/* ── Stato vuoto ────────────────────────────────────────────────────────────
   Una schermata senza dati è un invito ad agire, non un silenzio. */
.stato-vuoto {
  padding: var(--s7) var(--s4);
  text-align: center;
  color: var(--testo-tenue);
}
.stato-vuoto .icona { font-size: 1.75rem; color: var(--testo-debole); margin-bottom: var(--s3); display: block; }
/* h3 per uno stato vuoto a piena pagina (sotto un h1 o un h2 di riquadro);
   h6 per uno annidato dentro un riquadro della dashboard, la cui intestazione
   di card è già un h5 — un h3 lì risalirebbe l'ordine dei titoli invece di
   scendere, cosa che uno screen reader legge come fuori posto. */
.stato-vuoto h3,
.stato-vuoto h6 { margin-bottom: var(--s2); font-size: var(--t-l); }
.stato-vuoto p { margin-inline: auto; max-width: 42ch; }
.stato-vuoto .pulsante { margin-top: var(--s4); }

/* Le sole due scorciatoie di spaziatura ammesse. Un file di utilità con
   quaranta classi finisce per essere un secondo linguaggio da imparare, e ogni
   schermata lo usa a modo suo. */
.spazio-sopra  { margin-top: var(--s5); }
.spazio-sotto  { margin-bottom: var(--s5); }

/* ── Interruttore del tema ──────────────────────────────────────────────────
   Tre posizioni visibili in una volta, non una rotellina a sorpresa: si vede
   quale è attiva senza cliccare, e si arriva a quella che si vuole con un clic
   invece di due. */
.interruttore-tema {
  display: inline-flex;
  padding: 2px;
  gap: 2px;
  background: var(--superficie-alt);
  border: 1px solid var(--bordo);
  border-radius: var(--raggio-s);
}
.interruttore-tema button {
  display: inline-flex;
  align-items: center;
  gap: var(--s1);
  padding: .3125rem .625rem;
  font-family: inherit;
  font-size: var(--t-xs);
  font-weight: 500;
  color: var(--testo-tenue);
  background: transparent;
  border: 0;
  border-radius: calc(var(--raggio-s) - 3px);
  cursor: pointer;
  transition: background var(--transizione), color var(--transizione);
}
.interruttore-tema button:hover { color: var(--testo); }
.interruttore-tema button[aria-pressed="true"] {
  color: var(--testo);
  background: var(--superficie);
  box-shadow: var(--ombra);
}
.interruttore-tema button i { font-size: .9em; }

/* ── Barre di scorrimento ───────────────────────────────────────────────────
   Anche quelle interne: una barra bianca dentro un pannello scuro è la prima
   cosa che si nota, e l'unica che non si può spiegare. */
* { scrollbar-color: var(--bordo-forte) transparent; scrollbar-width: thin; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--bordo-forte);
  border: 3px solid transparent;
  background-clip: content-box;
  border-radius: var(--raggio-pill);
}
::-webkit-scrollbar-thumb:hover { background: var(--testo-tenue); background-clip: content-box; }

/* ── Notifiche (Task 16) ────────────────────────────────────────────────────
   Una riga sola, condivisa dal riquadro della dashboard, dalla tendina della
   campanella e dall'elenco completo (templates/notifiche/voce.php): tre punti
   diversi che mostrano la stessa notifica, non tre disegni diversi. Niente
   coppia di colori nuova: `.stato--*` è già sorvegliata da TokensTest. */
.elenco-notifiche { display: flex; flex-direction: column; }
.voce-notifica {
  padding: var(--s3) var(--s4);
  border-bottom: 1px solid var(--bordo);
  display: flex;
  flex-direction: column;
  gap: var(--s1);
}
.elenco-notifiche .voce-notifica:last-child { border-bottom: 0; }
.voce-notifica-testa { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); }
.voce-notifica-titolo {
  margin: 0;
  font-weight: 600;
  color: var(--testo);
  text-decoration: none;
}
a.voce-notifica-titolo:hover { color: var(--accento-testo); text-decoration: underline; }
.voce-notifica-testo { margin: 0; color: var(--testo-tenue); font-size: var(--t-s); }

/* Chi ha chiesto meno animazioni le ottiene: non è una preferenza estetica, per
   qualcuno il movimento sullo schermo dà la nausea. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
 * Il vocabolario che le pagine usavano senza che nessuno l'avesse scritto.
 *
 * Trovato scrivendo il modulo delle aziende: quarantasei classi comparivano nel
 * markup di templates/ e dei moduli — `forma`, `intestazione-sezione`,
 * `testo-tenue`, `impaginazione`, `tabella-contenitore`, i passi
 * dell'installazione — e nessun foglio, nemmeno quello del tema, le definiva. Le
 * pagine funzionavano e si leggevano, ma nei punti coinvolti erano senza stile:
 * campi a piena larghezza uno sotto l'altro, pulsanti appiccicati, testo
 * secondario dello stesso colore del principale. Per un progetto il cui primo
 * requisito e' «graficamente molto curato», e' il difetto piu' visibile che
 * avesse.
 *
 * Perche' qui: `comuni.css` lo caricano sia il telaio amministrativo sia quello
 * pubblico, e queste classi compaiono in entrambi.
 *
 * Nessun colore in cifre: solo variabili di tokens.css, cosi' il tema chiaro e
 * quello scuro seguono senza una riga in piu'. `TemplateEStileTest` impedisce che
 * la mancanza torni: se un template usa una classe che nessun foglio definisce,
 * quel test diventa rosso.
 * ========================================================================== */

/* --- testo ---------------------------------------------------------------- */

.testo-tenue { color: var(--testo-tenue); }
.nowrap      { white-space: nowrap; }

/* --- intestazioni di sezione e file di azioni ----------------------------- */

/* La testa di una pagina di elenco: titolo e spiegazione a sinistra, le azioni a
   destra. Il titolo ha il corpo di un titolo di pagina (e non quello di un
   riquadro): e' il primo elemento che si legge entrando. */
.intestazione-sezione {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s4);
  margin-bottom: var(--s5);
  padding-bottom: var(--s4);
  border-bottom: 1px solid var(--bordo);
}

.intestazione-sezione h2 {
  margin: 0 0 var(--s2);
  font-size: var(--t-2xl);
  line-height: var(--lh-stretta);
  letter-spacing: var(--sp-titolo);
}

.intestazione-sezione p {
  margin: 0;
  max-width: var(--misura);
  color: var(--testo-tenue);
  line-height: var(--lh-corpo);
}

.intestazione-sezione > .azioni-riga { flex: 0 0 auto; }

.azioni-riga {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s2);
}

/* Un modulo dentro una riga di testo: il pulsante «elimina» accanto a una voce
   di elenco deve stare sulla stessa riga, non andare a capo da solo. */
.in-linea { display: inline; }
.in-linea > button { vertical-align: baseline; }

/* --- moduli --------------------------------------------------------------- */

.forma {
  display: flex;
  flex-direction: column;
  gap: var(--s4);
}

/* Un pulsante dentro un modulo non si allunga quanto i campi: in un contenitore
   `flex-direction: column` lo stira `align-items: stretch`, e un «Salva» largo
   come tutta la pagina sembra una barra, non un pulsante. */
.forma > button,
.forma > .pulsante { align-self: flex-start; }

/* Un modulo fatto di campi soli si tiene stretto, perche' una riga di testo lunga
   un monitor non si legge. Uno fatto di riquadri no: dentro un riquadro i campi si
   affiancano, e restringere il modulo restringerebbe i riquadri, lasciando
   mezza pagina vuota a destra. */
.forma:not(:has(.riquadro)) { max-width: var(--misura); }
.forma > .riquadro { width: 100%; }

/* Un modulo dentro un riquadro o una tendina: piu' stretto e piu' compatto. */
.forma--compatta { gap: var(--s3); max-width: 28rem; }

/* Discendenti e non figli diretti: dentro un riquadro le etichette sono annidate,
   e con `>` restavano righe di testo con un campo minuscolo accanto. */
.forma label,
.forma-riga > label,
.gruppo-campi > label {
  display: flex;
  flex-direction: column;
  gap: var(--s1);
  font-size: var(--t-m);
}

.forma label > span:first-child,
.forma-riga > label > span:first-child {
  font-weight: 600;
  font-size: var(--t-s);
  color: var(--testo-tenue);
  letter-spacing: var(--sp-minuto);
}

.forma label small { font-weight: 400; }

.forma label abbr[title] {
  color: var(--errore);
  text-decoration: none;
  cursor: help;
}

/* Piu' campi affiancati che diventano una colonna sola quando non ci stanno:
   niente media query, `wrap` piu' una base in `flex` bastano. */
.forma-riga {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s4);
}

.forma-riga > label { flex: 1 1 12rem; min-width: 0; }

/* I campi del catalogo delle anagrafiche: una griglia che si riempie da sola,
   tre o quattro colonne su schermo largo, una sul telefono. Il testo lungo
   occupa la riga intera. */
.forma-griglia {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr));
  gap: var(--s4);
}
.forma-griglia > .forma-griglia-intera { grid-column: 1 / -1; }
/* `.forma label` mette `display: flex`, che batte l'attributo `hidden`: i
   campi di un altro paese devono sparire davvero. */
.forma-griglia > label[hidden] { display: none; }

.gruppo-campi { display: block; margin-bottom: var(--s6); }
.gruppo-campi > h2,
.gruppo-campi > h3 { font-size: var(--t-l); margin: 0 0 var(--s3); }

/* Una casella con l'etichetta di fianco, non sopra. */
.campo-interruttore,
.etichetta-riga {
  display: flex !important;
  flex-direction: row !important;
  align-items: baseline;
  gap: var(--s2);
  flex-wrap: wrap;
}

.campo-interruttore > input,
.etichetta-riga > input { flex: 0 0 auto; margin: 0; }
.campo-interruttore > span,
.etichetta-riga > span { font-weight: 400; }
.etichetta-riga small { flex: 1 1 100%; }

.etichetta--quieta { font-weight: 400; color: var(--testo-tenue); }

.campo-elenco-opzioni textarea { font-family: var(--carattere-dati); }

/* --- avvisi e riquadri ---------------------------------------------------- */

.avviso--successo {
  background: var(--ok-tenue);
  border-color: var(--ok);
}

.riquadro--pericolo { border-color: var(--errore); }
/* h2 per il titolo di un riquadro di primo livello, h3 per il titolo di un
   riquadro annidato (una card per riga in un elenco, es. «I miei calendari»,
   task 14): la regola di margine qui sopra (riquadro-testa > h2, h3) già
   prevede entrambi i livelli, questa deve farlo altrettanto — un riquadro
   annidato in errore aveva il bordo rosso ma il titolo restava del colore
   normale, perché il selettore guardava solo h2. */
.riquadro--pericolo .riquadro-testa h2,
.riquadro--pericolo .riquadro-testa h3 { color: var(--errore); }

/* Lo stato vuoto di un elenco non e' un buco nella pagina: e' un riquadro
   quieto che dice che non c'e' niente, non che qualcosa non ha funzionato. */
.tabella-contenitore + .stato-vuoto,
.riquadro-corpo > .stato-vuoto { margin: 0; }

/* --- elenchi -------------------------------------------------------------- */

.elenco-semplice,
.elenco-compatto {
  list-style: none;
  margin: 0;
  padding: 0;
}

.elenco-semplice > li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s2);
  padding: var(--s3) 0;
  border-bottom: 1px solid var(--bordo);
}

.elenco-semplice > li:last-child { border-bottom: 0; }

.elenco-compatto > li {
  padding: var(--s2) 0;
  border-bottom: 1px solid var(--bordo);
  font-size: var(--t-s);
}

.elenco-compatto > li:last-child { border-bottom: 0; }

/* --- fasi e lavorazioni (scheda progetto, task 4) -------------------------- */

.fase-blocco {
  padding: var(--s4) 0;
  border-bottom: 1px solid var(--bordo);
}

.fase-blocco:last-of-type { border-bottom: 0; }

.fase-testa {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s2);
}

.fase-forma,
.lavorazione-forma { margin-top: var(--s2); font-size: var(--t-s); }

.lavorazione-riga {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s2);
  width: 100%;
}

.lavorazione-azioni {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
}

/* Il banner «ce ne sono di archiviate nascoste» (task 14): un elenco che
   nasconde righe senza dirlo e' un elenco di cui non ci si fida piu'. */
.avviso-archiviate {
  padding: var(--s2) var(--s3);
  margin-bottom: var(--s3);
  background: var(--superficie-alt);
  border-radius: var(--raggio-s);
}

/* --- tabelle -------------------------------------------------------------- */

/* Una tabella larga scorre da sola invece di allargare la pagina: senza questo,
   su un portatile la barra orizzontale e' quella del documento e l'intestazione
   fissa scivola via. Ed e' un riquadro: una tabella appoggiata sul fondo della
   pagina, senza bordo ne' superficie, sembra un foglio di calcolo incollato. */
.tabella-contenitore {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--superficie);
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
  box-shadow: var(--ombra);
}

.tabella-contenitore > .tabella { margin: 0; }

/* La colonna delle azioni sta stretta in fondo: se si allarga, i pulsanti
   finiscono in mezzo alla riga e l'occhio non sa piu' dove cercarli. */
.tabella .cella-azioni {
  width: 1%;
  white-space: nowrap;
}

.tabella .cella-azioni > .azioni-riga {
  flex-wrap: nowrap;
  justify-content: flex-end;
}

/* La matrice dei permessi di campo: tante colonne strette e la prima ferma. */
.tabella--matrice { min-width: 44rem; }
.tabella--matrice th:first-child,
.tabella--matrice td:first-child {
  position: sticky;
  left: 0;
  background: var(--superficie);
}

/* --- filtri, viste salvate, impaginazione -------------------------------- */

/* `stretch` e non `flex-end`: le etichette dei filtri stanno tutte sulla stessa
   riga, e i campi tutti sulla stessa base. Con `flex-end` bastava che un `select`
   fosse alto un pixel piu' di un `input` perche' la sua etichetta salisse, e la
   fila sembrava montata male. */
.filtri-riga {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: var(--s3) var(--s4);
  margin-bottom: var(--s5);
  padding: var(--s4) var(--s5);
  background: var(--superficie);
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
  box-shadow: var(--ombra);
}

/* I pulsanti del modulo filtri non si allungano come i campi, e stanno sulla
   base dei campi, non a meta' altezza. */
.filtri-riga > button,
.filtri-riga > a {
  flex: 0 0 auto;
  align-self: flex-end;
}

.filtri-riga > label {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: var(--s1);
  flex: 1 1 11rem;
  min-width: 0;
  font-size: var(--t-s);
}

.filtri-riga > label > span:first-child {
  color: var(--testo-tenue);
  font-weight: 500;
  letter-spacing: var(--sp-minuto);
}

.barra-viste {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s3);
  margin-bottom: var(--s3);
}

/* Senza viste salvate il solo «Salva questa vista» resterebbe appeso a sinistra
   sopra il pannello dei filtri: va all'estremo opposto, dove stanno le azioni. */
.salva-vista { margin-left: auto; }

.viste-elenco {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s2);
  list-style: none;
  margin: 0;
  padding: 0;
}

.salva-vista > summary { cursor: pointer; }
.salva-vista[open] > summary { margin-bottom: var(--s3); }

.salva-vista[open] {
  padding: var(--s4);
  background: var(--superficie);
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
}

.impaginazione {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s2);
  margin-top: var(--s4);
}

.impaginazione > p { margin: 0 auto 0 0; font-size: var(--t-s); }

.pagina {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.25rem;
  padding: var(--s1) var(--s2);
  border: 1px solid var(--bordo-forte);
  border-radius: var(--raggio-s);
  color: var(--testo);
  text-decoration: none;
  font-size: var(--t-s);
  transition: background var(--transizione), border-color var(--transizione);
}

.pagina:hover { background: var(--superficie-alt); }

.pagina--corrente {
  background: var(--accento);
  border-color: var(--accento);
  color: var(--su-accento);
  font-weight: 600;
}

.pagina--salto { border: 0; min-width: auto; color: var(--testo-tenue); }

/* --- registro delle modifiche -------------------------------------------- */

.audit-modifiche { margin: 0; font-size: var(--t-s); }
.audit-modifiche dt { font-weight: 600; color: var(--testo-tenue); }
.audit-modifiche dd { margin: 0 0 var(--s2); }

.audit-prima,
.audit-dopo {
  font-family: var(--carattere-dati);
  padding: 0 var(--s1);
  border-radius: var(--raggio-s);
}

.audit-prima {
  background: var(--errore-tenue);
  text-decoration: line-through;
  text-decoration-color: var(--errore);
}

.audit-dopo { background: var(--ok-tenue); }

/* --- installazione -------------------------------------------------------- */

.foglio--installa { max-width: 44rem; }
.foglio-corpo { padding: var(--s5); }

.passi {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  list-style: none;
  margin: 0 0 var(--s5);
  padding: 0 var(--s5);
  font-size: var(--t-s);
}

.passi > .passo {
  display: flex;
  align-items: center;
  gap: var(--s2);
  color: var(--testo-tenue);
}

.passo-numero {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: var(--raggio-pill);
  border: 1px solid var(--bordo-forte);
  font-size: var(--t-xs);
  font-variant-numeric: tabular-nums;
}

.passo--corrente { color: var(--testo); font-weight: 600; }
.passo--corrente .passo-numero {
  background: var(--accento);
  border-color: var(--accento);
  color: var(--su-accento);
}

.passo--fatto .passo-numero {
  background: var(--ok-tenue);
  border-color: var(--ok);
  color: var(--testo);
}

.elenco-passi { padding-left: var(--s5); line-height: var(--lh-corpo); }
.elenco-passi > li { margin-bottom: var(--s2); }

.requisiti { list-style: none; margin: 0 0 var(--s5); padding: 0; }

.requisiti > .requisito {
  display: grid;
  grid-template-columns: 1.5rem 1fr;
  gap: var(--s1) var(--s3);
  padding: var(--s3) 0;
  border-bottom: 1px solid var(--bordo);
}

.requisiti > .requisito:last-child { border-bottom: 0; }

.requisito-esito { grid-row: span 2; }
.requisito--ok .requisito-esito { color: var(--ok); }
.requisito--manca .requisito-esito { color: var(--errore); }
.requisito-nome { font-weight: 600; }
.requisito-dettaglio { font-size: var(--t-s); }

/* --- pezzi singoli ------------------------------------------------------- */

.marchio-logo { max-height: 2rem; width: auto; }


.campanella { position: relative; }

/* Il segreto TOTP da copiare a mano: si legge a gruppi di quattro, quindi
   carattere a larghezza fissa e spaziatura leggibile. */
.segreto-manuale > summary { cursor: pointer; font-size: var(--t-s); }

.segreto-testo {
  font-family: var(--carattere-dati);
  font-size: var(--t-l);
  letter-spacing: var(--sp-minuto);
  user-select: all;
  word-break: break-all;
}

.riferimento-errore { font-family: var(--carattere-dati); color: var(--testo-tenue); }

.dettaglio-eccezione {
  margin-top: var(--s5);
  padding: var(--s4);
  background: var(--superficie-alt);
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
  overflow-x: auto;
  font-family: var(--carattere-dati);
  font-size: var(--t-s);
}

/* Un pulsante che c'e' ma non chiama: «Annulla», «Esporta», la vista non
   aperta. Il principale resta uno solo per schermata. */
.pulsante--quieto {
  background: transparent;
  border-color: var(--bordo-forte);
  color: var(--testo);
}

.pulsante--quieto:hover { background: var(--superficie-alt); }

/* --- tag ------------------------------------------------------------------
 * Il colore di un tag e' un NOME DI TOKEN (`ok`, `attenzione`, …) trasformato in
 * una classe da `tag_chip()`: nel markup non entra mai un valore che arriva dal
 * database, e nel CSS non entra mai un colore in cifre. Un `style="background:…"`
 * con dentro una colonna sarebbe il modo piu' diretto di far entrare CSS
 * arbitrario in ogni pagina.
 */
.tag-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--s1);
  padding: .125rem var(--s2);
  border: 1px solid var(--bordo-forte);
  border-radius: var(--raggio-pill);
  font-size: var(--t-xs);
  line-height: 1.6;
  white-space: nowrap;
  color: var(--testo);
}

.tag-chip--accento    { background: var(--accento-tenue);    border-color: var(--accento); }
.tag-chip--ok         { background: var(--ok-tenue);         border-color: var(--ok); }
.tag-chip--attenzione { background: var(--attenzione-tenue); border-color: var(--attenzione); }
.tag-chip--errore     { background: var(--errore-tenue);     border-color: var(--errore); }
.tag-chip--info       { background: var(--info-tenue);       border-color: var(--info); }

.tag-chip-togli {
  border: 0;
  background: none;
  padding: 0;
  color: var(--testo-tenue);
  font-size: var(--t-m);
  line-height: 1;
  cursor: pointer;
}

.tag-chip-togli:hover { color: var(--errore); }

.tag-elenco {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  margin-bottom: var(--s4);
}

.cella-tag { white-space: normal; }
.cella-tag .tag-chip { margin: 0 var(--s1) var(--s1) 0; }

/* L'albero dei tag in amministrazione: i figli rientrati, con una guida
   verticale — senza, due livelli si leggono come uno solo. */
.tag-gruppo { padding: var(--s3) 0; border-bottom: 1px solid var(--bordo); }
.tag-gruppo:last-of-type { border-bottom: 0; }

.tag-riga {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s3);
  padding: var(--s1) 0;
}

.tag-riga > .azioni-riga { margin-left: auto; }

.tag-figli {
  margin: var(--s2) 0 0 var(--s4);
  padding-left: var(--s4);
  border-left: 2px solid var(--bordo);
}

/* --- cronologia ----------------------------------------------------------
 * Una colonna di eventi con una guida verticale: senza la linea, dieci righe
 * con l'icona a sinistra si leggono come un elenco puntato disordinato.
 */
.cronologia {
  list-style: none;
  margin: 0;
  padding: 0;
}

.cronologia-riga {
  position: relative;
  display: flex;
  gap: var(--s3);
  padding: 0 0 var(--s4);
}

/* La guida si ferma all'ultima riga: una linea che continua nel vuoto sembra
   un elenco troncato. */
.cronologia-riga::before {
  content: "";
  position: absolute;
  left: .875rem;
  top: 1.75rem;
  bottom: 0;
  width: 1px;
  background: var(--bordo);
}

.cronologia-riga:last-child { padding-bottom: 0; }
.cronologia-riga:last-child::before { display: none; }

.cronologia-segno {
  flex: 0 0 auto;
  width: 1.75rem;
  height: 1.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--raggio-pill);
  background: var(--superficie-alt);
  border: 1px solid var(--bordo);
  color: var(--testo-tenue);
  font-size: var(--t-xs);
}

.cronologia-corpo > p { margin: 0; }
.cronologia-titolo { font-size: var(--t-m); }
.cronologia-testo { font-size: var(--t-s); color: var(--testo-tenue); margin-top: var(--s1) !important; }
.cronologia-quando { font-size: var(--t-xs); color: var(--testo-debole); margin-top: var(--s1) !important; }

/* --- barra di avanzamento ------------------------------------------------- */

.barra-avanzamento {
  height: .5rem;
  margin: var(--s4) 0;
  background: var(--superficie-alt);
  border-radius: var(--raggio-pill);
  overflow: hidden;
}

.barra-avanzamento-riempita {
  height: 100%;
  width: 0;
  background: var(--accento);
  border-radius: var(--raggio-pill);
  transition: width var(--transizione);
}

.import-stato { font-size: var(--t-l); font-weight: 600; margin: 0; }
.import-conti { margin-bottom: var(--s4); }

/* --- allegati di una nota ------------------------------------------------- */

.allegati {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
  gap: var(--s4);
  list-style: none;
  margin: 0 0 var(--s5);
  padding: 0;
}

.allegato {
  display: flex;
  gap: var(--s3);
  padding: var(--s3);
  background: var(--superficie-alt);
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
}

/* L'anteprima ha una forma fissa: una griglia in cui ogni riquadro è alto
   quanto la sua immagine si legge come un mucchio, non come un elenco. */
.allegato-anteprima {
  flex: 0 0 auto;
  width: 4.5rem;
  height: 4.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: var(--raggio-s);
  background: var(--superficie);
  border: 1px solid var(--bordo);
}

.allegato-anteprima img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.allegato-icona { color: var(--testo-tenue); font-size: var(--t-xl); }

.allegato-dati { min-width: 0; }
.allegato-dati > p { margin: 0 0 var(--s1); }

/* Il nome di un file può essere lunghissimo e non ha spazi: senza questo, una
   scheda si allarga fino a rompere la griglia. */
.allegato-nome {
  font-size: var(--t-s);
  font-weight: 600;
  overflow-wrap: anywhere;
}

.campo-testo-lungo { min-height: 22rem; resize: vertical; }

/* --- il QR per il telefono ------------------------------------------------ */

.qr-zona { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s3); }

.qr-riquadro {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s2);
  padding: var(--s4);
  /* Fondo BIANCO sempre, anche in tema scuro: un QR chiaro su fondo scuro molte
     fotocamere non lo leggono, ed e' il genere di dettaglio che fa dire «non
     funziona» a una funzione che funziona. */
  background: #ffffff;
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
}

.qr-riquadro canvas,
.qr-riquadro img { display: block; }

/* Il testo sotto il QR sta sul fondo bianco: non puo' usare i token del tema. */
.qr-riquadro p { margin: 0; color: #4a586a; font-size: var(--t-xs); text-align: center; }

.qr-indirizzo { max-width: 16rem; overflow-wrap: anywhere; }

/* --- la pagina sul telefono ---------------------------------------------- */

.foglio-telefono {
  max-width: 32rem;
  margin: 0 auto;
  padding: var(--s5) var(--s4);
}

.foglio-telefono h1 { font-size: var(--t-xl); margin: 0 0 var(--s3); }

/* --- la pagina pubblica da leggere (l'offerta da firmare) ----------------- */
.foglio-documento { max-width: 60rem; margin: 0 auto; padding: var(--s5) var(--s4); }
.foglio-documento h1 { font-size: var(--t-xl); margin: 0 0 var(--s2); }
.firma-pdf { width: 100%; height: 70vh; border: 1px solid var(--bordo); border-radius: var(--raggio-s); background: #fff; }
.firma-totali { display: flex; flex-wrap: wrap; gap: var(--s4); margin: var(--s3) 0; font-variant-numeric: tabular-nums; }
.firma-tela { width: 100%; max-width: 600px; height: 200px; border: 1px dashed var(--bordo-forte); border-radius: var(--raggio-s); background: #fff; touch-action: none; }
.firma-scelte { display: flex; flex-wrap: wrap; gap: var(--s3); }
.firma-invito { padding-bottom: var(--s3); margin-bottom: var(--s3); border-bottom: 1px solid var(--bordo); }
.firma-invito p { margin: 0 0 var(--s1); }
.firma-codice { font-size: var(--t-xl); letter-spacing: .4em; max-width: 12rem; text-align: center; font-family: var(--carattere-dati); }
.foglio-telefono-intestazione { margin-bottom: var(--s4); }
.foglio-telefono-piede {
  margin-top: var(--s5);
  text-align: center;
  font-size: var(--t-xs);
  color: var(--testo-debole);
}

/* Il campo esca del modulo pubblico di iscrizione alla newsletter
   (Newsletter\Controllers\PubblicoController::iscrivi()): fuori dallo
   schermo, non `display:none`/`visibility:hidden` — alcuni programmi
   automatici ignorano i campi nascosti in quei due modi ma compilano
   comunque quelli spostati fuori vista, ed è la stessa cautela con cui va
   nascosto ogni honeypot di questo genere. */
.newsletter-esca {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Su un telefono il bersaglio deve essere grande: un pulsante da 32 pixel si
   sbaglia con il pollice, e chi lo sbaglia due volte rinuncia. */
.pulsante--grande {
  width: 100%;
  justify-content: center;
  padding: var(--s3) var(--s5);
  font-size: var(--t-l);
}

.foglio-telefono input[type="file"] {
  width: 100%;
  padding: var(--s4);
  border: 1px dashed var(--bordo-forte);
  border-radius: var(--raggio);
  background: var(--superficie);
}

/* --- l'agenda: mese, giorno, «le mie prossime» (C3, task 5) -------------- */

/* La barra che collega le tre viste: le stesse classi di `.filtri-riga`
   nello spirito (una riga di comandi), ma sono link di navigazione, non
   azioni su un elenco, e per questo restano un componente loro. */
.agenda-barra {
  display: flex;
  gap: var(--s2);
  margin-bottom: var(--s4);
  border-bottom: 1px solid var(--bordo);
}

.agenda-barra-voce {
  padding: var(--s3) var(--s4);
  color: var(--testo-tenue);
  font-weight: 600;
  font-size: var(--t-s);
  border-bottom: var(--spessore-marcatore) solid transparent;
  text-decoration: none;
}

.agenda-barra-voce:hover { color: var(--testo); }

.agenda-barra-voce--attiva {
  color: var(--accento-testo);
  border-bottom-color: var(--accento);
}

/* Il titolo del mese/giorno con le freccette prima/dopo: la stessa riga per
   entrambe le viste, cambia solo il testo al centro. */
.agenda-nav-mese {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s4);
  margin-bottom: var(--s4);
}

.agenda-titolo-mese {
  margin: 0;
  min-width: 14ch;
  text-align: center;
  display: flex;
  align-items: center;
  gap: var(--s2);
}

/* La griglia del mese: sette colonne fisse, e le righe le decide il
   contenuto del grid — mai il numero di celle, che è sempre 42 (vedi
   `Services\Calendario::mese()`). L'intestazione dei giorni occupa la prima
   riga, le celle riempiono le sei sotto. */
.agenda-griglia {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1px;
  background: var(--bordo);
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
  overflow: hidden;
}

.agenda-intestazione-giorno {
  padding: var(--s2) var(--s3);
  background: var(--superficie-alt);
  color: var(--testo-tenue);
  font-size: var(--t-xs);
  font-weight: 600;
  text-align: center;
}

/* Ogni cella è alta uguale (min-height), non quanto le sue voci: un giorno
   pieno non deve spingere in basso la riga intera — per questo le voci in
   più diventano «e altre N» invece di allungare la cella. */
.agenda-cella {
  min-height: 6.5rem;
  padding: var(--s2);
  background: var(--superficie);
  display: flex;
  flex-direction: column;
  gap: var(--s1);
}

.agenda-cella--fuori-mese {
  background: var(--superficie-alt);
}

.agenda-cella--fuori-mese .agenda-cella-numero,
.agenda-cella--fuori-mese .agenda-voce {
  color: var(--testo-debole);
}

/* Oggi si deve riconoscere a colpo d'occhio: lo stesso accento che segna la
   voce di menu corrente, non un colore inventato per l'occasione. */
.agenda-cella--oggi {
  background: var(--accento-tenue);
  box-shadow: inset 0 0 0 2px var(--accento);
}

.agenda-cella-numero {
  align-self: flex-start;
  font-size: var(--t-s);
  font-weight: 600;
  color: var(--testo-tenue);
  text-decoration: none;
}

.agenda-cella-numero:hover { color: var(--accento-testo); }

.agenda-cella-voci {
  display: flex;
  flex-direction: column;
  gap: var(--s1);
  min-height: 0;
  overflow: hidden;
}

.agenda-voce {
  display: block;
  padding: .125rem var(--s2);
  border-radius: var(--raggio-s);
  background: var(--superficie-alt);
  color: var(--testo);
  font-size: var(--t-xs);
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.agenda-voce:hover { background: var(--accento-tenue); }

.agenda-voce-ora { margin-right: var(--s1); color: var(--testo-tenue); }

.agenda-voce-altre {
  font-size: var(--t-xs);
  color: var(--testo-tenue);
  text-decoration: none;
}

.agenda-voce-altre:hover { color: var(--accento-testo); }

/* m-18, revisione finale: fatta/annullata si marcano, non si nascondono —
   filtrarle dalla griglia produrrebbe l'elenco «solo cose aperte» che la
   spec §3 esiste per evitare, spostato dall'agenda al mese. Il testo si
   attenua e si riga (fatta un tratto storico, non un'attività da fare
   ancora), col colore --ok/--errore della riga corrispondente in
   .stato--ok/.stato--errore (scheda.php) invece di un colore inventato qui:
   le due viste devono dire la stessa cosa con lo stesso colore. */
.agenda-voce--fatta,
.agenda-voce--annullata {
  text-decoration: line-through;
  opacity: .65;
}

.agenda-voce--fatta { background: var(--ok-tenue); }

/* Le lavorazioni dei progetti (Progetti → Services\Agenda): un colore loro,
   con la barretta a sinistra, per distinguerle a colpo d'occhio dalle attività. */
.agenda-voce--lavorazione { background: var(--lavorazione-tenue); color: var(--lavorazione); border-left: 3px solid var(--lavorazione); }
.agenda-voce--lavorazione:hover { background: var(--lavorazione-tenue); filter: brightness(.96); }
.agenda-riga-giorno--lavorazione { border-left: 3px solid var(--lavorazione); background: var(--lavorazione-tenue); }
.agenda-legenda { display: flex; gap: var(--s3); align-items: center; font-size: var(--t-xs); color: var(--testo-tenue); margin: var(--s2) 0; }
.agenda-legenda-lavorazione::before { content: ''; display: inline-block; width: .8em; height: .8em; margin-right: var(--s1); border-radius: 2px;
  background: var(--lavorazione-tenue); border-left: 3px solid var(--lavorazione); vertical-align: -1px; }
.etichetta-lavorazione { font-size: var(--t-xs); color: var(--lavorazione); font-weight: 600; }
.agenda-voce--annullata { background: var(--errore-tenue); }

/* La vista giorno e «le mie prossime» condividono la stessa riga: orario,
   titolo, e un terzo pezzo (assegnatari o «in ritardo») a destra. */
.agenda-riga-giorno {
  display: flex;
  align-items: baseline;
  gap: var(--s3);
  flex-wrap: wrap;
}

.agenda-riga-giorno-ora {
  flex: 0 0 auto;
  min-width: 4rem;
  color: var(--testo-tenue);
}

.agenda-riga-giorno-titolo { font-weight: 600; }

/* Stesso principio di .agenda-voce--fatta/--annullata qui sopra: si attenua
   il titolo, non si nasconde la riga — nella vista giorno lo storico serve
   (vedere che la chiamata delle 9 è già fatta fa parte del colpo d'occhio
   della giornata). Il badge di stato (.stato--ok/--errore) porta già il
   colore: qui basta l'attenuazione del testo. */
.agenda-riga-giorno--chiusa .agenda-riga-giorno-titolo {
  text-decoration: line-through;
  color: var(--testo-tenue);
  font-weight: 400;
}

/* --- le icone del meteo ----------------------------------------------------

   Gli SVG sono incorporati nel markup (vedi `meteo_svg_inline()` nel widget),
   non caricati con `<img src>`: è la ragione per cui da qui si può colorarli
   con i token e animarli. Un SVG dentro un `<img>` è un documento a sé, e
   questo foglio non lo raggiungerebbe.

   UNA cosa si muove per icona, non tre. Il meteo sta in un angolo di un
   cruscotto che qualcuno guarda otto ore al giorno: un'icona che si agita
   ruba l'attenzione a ciò per cui la pagina esiste. Il sole gira in venti
   secondi — a guardarlo fermo sembra fermo, e si accorge del movimento solo
   chi torna a guardarlo dopo un minuto.

   Le durate sono diverse e non multiple fra loro (4s, 6s, 20s): due
   animazioni con lo stesso periodo si sincronizzano e l'occhio le legge come
   un unico battito, che è più insistente della somma delle due. */

.meteo-icona-svg { display: block; overflow: visible; }

/* Il sole: gira il raggio, non il disco. Far ruotare tutto farebbe vibrare il
   bordo del cerchio per l'antialiasing, su un disco che è perfettamente
   simmetrico e non ha nessun motivo di girare. */
.meteo-raggi {
  transform-origin: 12px 12px;
  animation: meteo-gira 20s linear infinite;
}

/* Il sole di «poco nuvoloso» e di «variabile» non sta al centro del riquadro:
   gira attorno al proprio disco, che e' piu' in alto e a destra. */
.meteo-raggi--alto { transform-origin: 15px 7.5px; }

@keyframes meteo-gira { to { transform: rotate(360deg); } }

/* La nuvola respira: due pixel in orizzontale, mai in verticale. Salendo e
   scendendo sembrerebbe staccata dal fondo; scorrendo sembra spinta dal vento,
   che è quello che fa una nuvola. */
.meteo-nuvola-forma { animation: meteo-deriva 6s ease-in-out infinite; }
.meteo-nuvola-dietro { animation: meteo-deriva 9s ease-in-out infinite reverse; }

@keyframes meteo-deriva {
  0%, 100% { transform: translateX(-.35px); }
  50%      { transform: translateX(.35px); }
}

/* Le gocce cadono sfalsate. Senza lo sfasamento cadrebbero in fila come una
   tendina, che non è pioggia: è una griglia che scende. */
.meteo-goccia { animation: meteo-cade 1.5s ease-in infinite; }
.meteo-goccia--2 { animation-delay: .5s; }
.meteo-goccia--3 { animation-delay: .25s; }

@keyframes meteo-cade {
  0%        { opacity: 0; transform: translateY(-2.5px); }
  25%       { opacity: 1; }
  70%       { opacity: 1; }
  100%      { opacity: 0; transform: translateY(3.5px); }
}

/* I fiocchi scendono più piano delle gocce, e si spengono invece di cadere
   fuori: la neve non ha fretta. */
.meteo-fiocco { animation: meteo-scende 3.4s ease-in-out infinite; }
.meteo-fiocco--2 { animation-delay: 1.1s; }
.meteo-fiocco--3 { animation-delay: 2.2s; }

@keyframes meteo-scende {
  0%   { opacity: 0; transform: translate(0, -2.5px); }
  30%  { opacity: 1; }
  70%  { opacity: 1; transform: translate(.6px, 1.6px); }
  100% { opacity: 0; transform: translate(-.4px, 3.4px); }
}

/* Il fulmine: buio quasi sempre, un lampo corto. Un fulmine che pulsa a ritmo
   regolare è una lucina di stato, non un temporale. */
.meteo-saetta { animation: meteo-lampo 4s steps(1, end) infinite; }

@keyframes meteo-lampo {
  0%, 6%, 12%, 100% { opacity: 1; }
  3%, 9%            { opacity: .15; }
}

/* I banchi di nebbia scorrono in direzioni opposte: è quello che li fa
   leggere come strati e non come due righe. */
.meteo-banco--1 { animation: meteo-deriva-lunga 7s ease-in-out infinite; }
.meteo-banco--2 { animation: meteo-deriva-lunga 11s ease-in-out infinite reverse; }

@keyframes meteo-deriva-lunga {
  0%, 100% { transform: translateX(-1.1px); opacity: .75; }
  50%      { transform: translateX(1.1px); opacity: 1; }
}

/* Chi ha chiesto al sistema meno movimento lo ha chiesto anche qui. Non è una
   cortesia: per una parte delle persone l'animazione continua è nausea o
   emicrania, e un cruscotto si tiene aperto tutto il giorno. */
@media (prefers-reduced-motion: reduce) {
  .meteo-raggi,
  .meteo-nuvola-forma,
  .meteo-nuvola-dietro,
  .meteo-goccia,
  .meteo-fiocco,
  .meteo-saetta,
  .meteo-banco--1,
  .meteo-banco--2 { animation: none; }
}

/*
 * Il kanban dei progetti (task 7): cinque colonne, una per stato di
 * lavorazione. Niente trascinamento (spec §8): lo spostamento è una POST per
 * cambio di stato, quindi ogni scheda porta due pulsanti — lo stato prima e
 * quello dopo, quando esistono — invece di un gesto che su un tablet non c'è.
 *
 * Il contenitore scorre in orizzontale (`overflow-x: auto`) invece di
 * impilare le colonne sotto una larghezza di soglia: a ~400px cinque colonne
 * da 240px non ci stanno comunque fianco a fianco, e un elenco impilato di
 * cinque liste lunghe sarebbe più difficile da scorrere di una singola
 * scheda alla volta. Ogni colonna resta larga abbastanza da restare
 * leggibile, indipendentemente da quanto è stretta la finestra.
 *
 * Colori solo da `tokens.css`: `.kanban-colonna` riusa `.riquadro`, le
 * schede riusano `.elenco-semplice`, niente introdotto qui è un colore
 * nuovo — funziona in chiaro e in scuro perché lo fanno già quelle regole.
 */
.kanban {
  display: flex;
  gap: var(--s4);
  overflow-x: auto;
  padding-bottom: var(--s2);
  -webkit-overflow-scrolling: touch;
}

.kanban-colonna {
  flex: 0 0 240px;
  display: flex;
  flex-direction: column;
}

.kanban-colonna-testa {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s2);
}

.kanban-colonna .riquadro-corpo {
  padding: var(--s3);
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  flex: 1 1 auto;
}

.kanban-scheda {
  border: 1px solid var(--bordo);
  border-radius: var(--raggio-s);
  padding: var(--s3);
  background: var(--superficie);
}

.kanban-scheda-titolo { font-weight: 600; }

.kanban-scheda-fase {
  display: block;
  margin-top: var(--s1);
  color: var(--testo-tenue);
  font-size: var(--t-s);
}

.kanban-scheda-azioni {
  display: flex;
  gap: var(--s2);
  margin-top: var(--s3);
}

.kanban-scheda-azioni form { flex: 1 1 0; }
.kanban-scheda-azioni .pulsante { width: 100%; }

/*
 * Il diagramma temporale dei progetti (task 8, C4a): una riga per
 * lavorazione, con una barra posizionata sulla finestra del progetto.
 *
 * Il servizio (`Services\Diagramma::barre()`) produce solo percentuali
 * (0-100): la larghezza VERA la decide questa regola, non lui — è il motivo
 * per cui il diagramma funziona anche a larghezza da telefono senza una
 * seconda implementazione (spec del task). `.diagramma-riga` è una griglia a
 * due colonne (etichetta, traccia): a differenza del `.kanban` qui non si
 * impila NULLA sotto una soglia, perché ogni riga è già una sola lavorazione
 * — non c'è una colonna in più da far scorrere.
 *
 * Colori solo da `tokens.css`, via `currentColor` su classi: l'SVG è
 * incorporato nel markup (mai `<img src="…svg">`, che isolerebbe
 * `currentColor` dal tema — `docs/lista-controllo-temi.md`).
 */
.diagramma {
  display: flex;
  flex-direction: column;
  gap: var(--s4);
}

.diagramma-riga {
  display: grid;
  grid-template-columns: minmax(140px, 220px) 1fr;
  gap: var(--s2) var(--s4);
  align-items: center;
}

.diagramma-etichetta { min-width: 0; }
.diagramma-traccia { min-width: 0; }

.diagramma-nome { font-weight: 600; }
.diagramma-fase { display: block; font-size: var(--t-s); }

.diagramma-motivo {
  margin: var(--s1) 0 0;
  padding: 2px var(--s2);
  border-radius: var(--raggio-pill);
  display: inline-block;
  font-size: var(--t-xs);
}

.diagramma-svg { display: block; width: 100%; height: 28px; overflow: visible; }

.diagramma-asse { stroke: var(--bordo); stroke-width: 0.3; }

.diagramma-barra {
  fill: currentColor;
  color: var(--accento);
}
.diagramma-barra--violazione { color: var(--errore); }

/*
 * Il segno della dipendenza (rivisto al task 9): ogni riga è il proprio SVG
 * (`viewBox="0 0 100 10"`), quindi una `<path>` non può collegare due righe
 * qualunque — un tentativo in quel senso produceva un tratto di ~2,8px,
 * invisibile, e per giunta assente del tutto senza una violazione a farlo
 * notare. La freccia qui sotto resta dentro la propria riga: parte dal
 * bordo sinistro della traccia e punta alla barra, sempre presente quando
 * `dipende_da` c'è — non solo quando le date non tornano. Il CHI (il nome
 * della lavorazione da cui si dipende) è testo, non colore: vedi
 * `<title>` e `aria-label` in `diagramma.php`.
 */
.diagramma-dipendenza-linea {
  stroke: currentColor;
  color: var(--testo-debole);
  stroke-width: 1;
  stroke-dasharray: 3 2;
}
.diagramma-dipendenza-punta {
  fill: currentColor;
  color: var(--testo-debole);
}
.diagramma-dipendenza--violazione .diagramma-dipendenza-linea {
  color: var(--errore);
  stroke-dasharray: none;
  stroke-width: 1.4;
}
.diagramma-dipendenza--violazione .diagramma-dipendenza-punta {
  color: var(--errore);
}

/* --- la riga dei numeri di una campagna (newsletter, task 15) -------------
 *
 * «3.000 destinatari · 2.870 invii tentati · 118 saltati»: cifre in fila, con
 * i separatori a punto centrale. Non riusa `.elenco-dati` (quello è un `<dl>`
 * di coppie etichetta/valore in colonna) né `.numero` (l'allineamento di una
 * cella di tabella): qui è una riga di prosa in cui i numeri devono staccare
 * dal testo e restare leggibili incolonnati fra una campagna e l'altra.
 *
 * `tabular-nums` come ogni altra cifra del progetto (`.meteo-giorno-gradi`,
 * `.campanella-contatore`): senza, «1.118» e «2.870» hanno larghezze diverse e
 * la riga balla. `line-height` largo perché su schermo stretto la riga va a
 * capo fra un numero e l'altro, ed è giusto che lo faccia: è prosa, non una
 * tabella da far scorrere in orizzontale.
 */
.numeri-campagna {
  margin: 0 0 var(--s3);
  font-size: var(--t-l);
  line-height: 1.7;
  font-variant-numeric: tabular-nums;
  color: var(--testo-tenue);
}

.numeri-campagna strong {
  font-size: var(--t-xl);
  font-weight: 600;
  color: var(--testo);
}

/* «Scrivi con l'AI» (modulo AI): il testo che arriva parola per parola e le
   tre parti della proposta. */
.ai-scrivi-flusso {
  white-space: pre-wrap;
  font-family: inherit;
  background: var(--superficie-alt);
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
  padding: var(--s3);
  max-height: 22rem;
  overflow: auto;
}
.ai-scrivi { margin-top: var(--s4); }
.ai-scrivi-richiesta { max-width: 40rem; }
.ai-scrivi-risultato { margin-top: var(--s3); }
.ai-scrivi-parte { border-top: 1px solid var(--bordo); padding-top: var(--s3); margin-top: var(--s3); }
.ai-scrivi-parte h3 { font-size: var(--t-s); color: var(--testo-tenue); margin: 0 0 var(--s1); }
.ai-scrivi-valore { white-space: pre-wrap; margin-bottom: var(--s2); }
.testo-errore { color: var(--errore); }

/* Impostazioni → AI: l'impronta del certificato è lunga e senza spazi, va a
   capo dove serve invece di allargare la pagina. */
.impronta { word-break: break-all; font-size: var(--t-s); }

/* Allegati di un lead (la foto del biglietto da visita): miniature in fila. */
.elenco-allegati { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s3); }
.elenco-allegati a { display: flex; flex-direction: column; gap: var(--s1); max-width: 16rem; }
.allegato-miniatura { max-width: 16rem; max-height: 10rem; object-fit: contain; border: 1px solid var(--bordo); border-radius: var(--raggio); }

/* Biglietto da visita (modulo AI): foto accanto alla forma di revisione. */
.ai-biglietto .forma-riga > .riquadro { flex: 1 1 22rem; min-width: 0; }
.ai-biglietto-revisione > .riquadro:last-child { flex: 2 1 28rem; }
.ai-biglietto-foto { width: 100%; max-height: 28rem; object-fit: contain; border: 1px solid var(--bordo); border-radius: var(--raggio); margin-bottom: var(--s3); }
.ai-biglietto-qr { display: inline-block; padding: var(--s2); background: #fff; border-radius: var(--raggio); }
.ai-biglietto-azienda { border: 1px solid var(--bordo); border-radius: var(--raggio); padding: var(--s3); margin: var(--s3) 0; }
.ai-scrivi-blocchi { margin: var(--s2) 0 var(--s3); padding-left: var(--s5); }
.ai-scrivi-blocchi li { margin-bottom: var(--s1); }

/* Immagine a tutto schermo (anteprima-immagini.js). */
.lightbox {
  padding: 0; border: 0; background: transparent;
  max-width: 100vw; max-height: 100vh; width: 100vw; height: 100vh;
}
.lightbox[open] { display: flex; align-items: center; justify-content: center; }
.lightbox::backdrop { background: rgb(0 0 0 / 0.85); }
.lightbox-immagine { max-width: 96vw; max-height: 94vh; object-fit: contain; border-radius: var(--raggio); box-shadow: 0 8px 40px rgb(0 0 0 / 0.5); }
.lightbox-chiudi {
  position: fixed; top: var(--s3); right: var(--s4);
  font-size: 2rem; line-height: 1; color: #fff; background: transparent; border: 0; cursor: pointer;
}
a[data-lightbox] { cursor: zoom-in; }

/* Avanzamento della lettura di un biglietto: barra, fase, passi. */
.ai-avanzamento { margin-bottom: var(--s4); }
.ai-avanzamento-testa { display: flex; justify-content: space-between; gap: var(--s3); font-size: var(--t-s); margin-bottom: var(--s1); }
.ai-avanzamento-barra { height: 0.6rem; background: var(--superficie-alt); border-radius: 999px; overflow: hidden; }
.ai-avanzamento-riempimento { height: 100%; width: 0; background: var(--accento); border-radius: 999px; transition: width 0.6s ease; }
.ai-avanzamento-passi { display: flex; flex-wrap: wrap; gap: var(--s3); list-style: none; padding: 0; margin: var(--s2) 0 0; font-size: var(--t-s); color: var(--testo-tenue); }
.ai-avanzamento-passi li::before { content: '○ '; }
.ai-avanzamento-passi li.in-corso { color: var(--testo); font-weight: 600; }
.ai-avanzamento-passi li.in-corso::before { content: '◐ '; }
.ai-avanzamento-passi li.fatto { color: var(--ok); }
.ai-avanzamento-passi li.fatto::before { content: '✓ '; }
.ai-campo-appena { animation: ai-lampeggio 1.2s ease; }
@keyframes ai-lampeggio { from { background: var(--accento-tenue, var(--superficie-alt)); } to { background: transparent; } }

/* Import con l'AI: l'etichetta delle proposte accanto alle tendine. */
.ai-proposta-etichetta { margin-left: var(--s2); }
.ai-import-valori { margin-top: var(--s3); }
.ai-import { margin-top: var(--s4); }

/* ── Media (modulo Media): sezioni, filtri, griglia, dettaglio ── */
.media { display: grid; grid-template-columns: 14rem 1fr; gap: var(--s4); align-items: start; }
.media-corpo { min-width: 0; } /* nella griglia: la colonna si stringe invece di allargare la pagina */
.media-sezioni { display: flex; flex-direction: column; gap: var(--s1); }
.media-sezione { display: flex; justify-content: space-between; gap: var(--s2); padding: .5rem .75rem; border-radius: var(--raggio-s); color: var(--testo); text-decoration: none; }
.media-sezione:hover { background: var(--superficie-alt); }
.media-sezione.attiva { background: var(--superficie-alt); font-weight: 600; }
.media-conta { color: var(--testo-tenue); font-variant-numeric: tabular-nums; }
.media-filtri { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; margin-bottom: var(--s3); }
.media-filtro { padding: .3rem .8rem; border: 1px solid var(--bordo); border-radius: var(--raggio-pill); color: var(--testo); text-decoration: none; font-size: var(--t-s); }
.media-filtro.attivo { background: var(--accento); border-color: var(--accento); color: #fff; }
.media-cerca { margin-left: auto; }
.media-cerca input { padding: .4rem .7rem; border: 1px solid var(--bordo); border-radius: var(--raggio-s); background: var(--superficie); color: var(--testo); min-width: 14rem; }
.media-carica { display: flex; gap: var(--s3); align-items: center; margin-bottom: var(--s4); flex-wrap: wrap; }
.media-trascina { flex: 1; min-width: 16rem; display: block; padding: var(--s4); border: 2px dashed var(--bordo); border-radius: var(--raggio); cursor: pointer; text-align: center; }
.media-trascina.sopra { border-color: var(--accento); background: var(--superficie-alt); }
.media-trascina input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.media-griglia { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); gap: var(--s3); }
.media-voce { width: 100%; display: flex; flex-direction: column; gap: var(--s1); padding: var(--s2); border: 1px solid var(--bordo); border-radius: var(--raggio); background: var(--superficie); color: var(--testo); text-align: left; cursor: pointer; }
.media-voce:hover { border-color: var(--accento); }
.media-anteprima { display: flex; align-items: center; justify-content: center; aspect-ratio: 4 / 3; background: var(--superficie-alt); border-radius: var(--raggio-s); overflow: hidden; font-size: 2.5rem; color: var(--testo-tenue); }
.media-anteprima img { width: 100%; height: 100%; object-fit: cover; }
.media-nome { font-size: var(--t-s); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.media-sotto { font-size: var(--t-s); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.media-dettaglio { max-width: min(46rem, 94vw); width: 100%; border: 0; border-radius: var(--raggio); padding: var(--s4); background: var(--superficie); color: var(--testo); }
.media-dettaglio::backdrop { background: rgb(0 0 0 / 0.6); }
.media-dettaglio-anteprima img { max-width: 100%; max-height: 50vh; display: block; margin: 0 auto var(--s3); border-radius: var(--raggio-s); }
.media-dettaglio-dati { display: grid; grid-template-columns: max-content 1fr; gap: var(--s1) var(--s3); margin: var(--s3) 0; }
.media-dettaglio-dati dt { color: var(--testo-tenue); }
.media-dettaglio-dati dd { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 760px) {
  .media { grid-template-columns: 1fr; }
  .media-sezioni { flex-direction: row; overflow-x: auto; }
  .media-cerca { margin-left: 0; width: 100%; }
  .media-cerca input { width: 100%; min-width: 0; }
}
.allegato-dove { font-size: var(--t-s); margin: 0; overflow-wrap: anywhere; }

/* ── Progetto da documento (modulo AI) ── */
.ai-documento-anteprima { display: grid; grid-template-columns: max-content 1fr; gap: var(--s1) var(--s3); margin: var(--s3) 0 0; font-size: var(--t-s); }
.ai-documento-anteprima dt { color: var(--testo-tenue); }
.ai-documento-anteprima dd { margin: 0; overflow-wrap: anywhere; }
.ai-documento-fasi { margin: 0; padding-left: var(--s4); display: flex; flex-direction: column; gap: var(--s3); }
.ai-documento-fase::marker { color: var(--testo-tenue); }
.ai-documento-lavorazioni { list-style: none; margin: var(--s2) 0 0; padding-left: var(--s4); display: flex; flex-direction: column; gap: var(--s1); }
.ai-documento-riga { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; }
.ai-documento-riga input[type=text] { flex: 1 1 14rem; min-width: 0; }
.ai-documento-ore input { width: 4.5rem; }
.ai-documento-ore, .ai-documento-traguardo { display: inline-flex; gap: var(--s1); align-items: center; font-size: var(--t-s); white-space: nowrap; }
.in-attesa { opacity: .6; pointer-events: none; }
.ai-documento-descrizione { flex: 1 1 100%; margin-left: 1.75rem; font-size: var(--t-s); }
.ai-documento-lavorazioni > li { padding-bottom: var(--s2); border-bottom: 1px solid var(--bordo); }

/* ── Agenda: la settimana ── */
.settimana { --altezza-ora: 3.5rem; border: 1px solid var(--bordo); border-radius: var(--raggio); background: var(--superficie); overflow-x: auto; }
.settimana-testa, .settimana-fascia, .settimana-corpo { display: grid; grid-template-columns: 4rem repeat(7, minmax(7rem, 1fr)); min-width: 56rem; }
.settimana-testa { border-bottom: 1px solid var(--bordo); }
.settimana-giorno { display: flex; flex-direction: column; align-items: center; padding: var(--s2); color: var(--testo-tenue); text-decoration: none; font-size: var(--t-s); border-left: 1px solid var(--bordo); }
.settimana-giorno strong { font-size: 1.25rem; color: var(--testo); }
.settimana-giorno--oggi strong { background: var(--accento); color: #fff; border-radius: 999px; min-width: 2rem; text-align: center; }
.settimana-fascia { grid-template-rows: repeat(var(--righe), minmax(1.6rem, auto)); gap: 2px 0; padding: var(--s1) 0; border-bottom: 2px solid var(--bordo); }
.settimana-angolo { grid-row: 1 / -1; }
.settimana-etichetta { font-size: var(--t-xs); color: var(--testo-tenue); padding: 0 var(--s1); align-self: center; }
.settimana-barra { margin: 0 2px; padding: .15rem var(--s2); border-radius: var(--raggio-s); background: var(--accento-tenue); color: var(--testo); font-size: var(--t-xs);
  text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.settimana-barra--prima { border-top-left-radius: 0; border-bottom-left-radius: 0; margin-left: 0; }
.settimana-barra--dopo { border-top-right-radius: 0; border-bottom-right-radius: 0; margin-right: 0; }
.settimana-barra--lavorazione, .settimana-evento--lavorazione { background: var(--lavorazione-tenue); color: var(--lavorazione); border-left: 3px solid var(--lavorazione); }
.settimana-barra--fatta, .settimana-evento--fatta { text-decoration: line-through; opacity: .65; }
.settimana-barra--annullata, .settimana-evento--annullata { text-decoration: line-through; opacity: .5; }
.settimana-corpo { position: relative; }
.settimana-ore { display: flex; flex-direction: column; }
.settimana-ora { height: var(--altezza-ora); font-size: var(--t-xs); color: var(--testo-tenue); text-align: right; padding-right: var(--s1); transform: translateY(-.5em); }
.settimana-colonna { position: relative; height: calc(var(--ore) * var(--altezza-ora)); border-left: 1px solid var(--bordo);
  background-image: repeating-linear-gradient(to bottom, transparent 0, transparent calc(var(--altezza-ora) - 1px), var(--bordo) calc(var(--altezza-ora) - 1px), var(--bordo) var(--altezza-ora)); }
.settimana-colonna--oggi { background-color: color-mix(in srgb, var(--accento-tenue) 40%, transparent); }
.settimana-evento { position: absolute; box-sizing: border-box; padding: .15rem .35rem; border-radius: var(--raggio-s); background: var(--accento-tenue); border-left: 3px solid var(--accento);
  color: var(--testo); font-size: var(--t-xs); overflow: hidden; text-decoration: none; line-height: 1.25; }
.settimana-evento { min-height: 2.3rem; }
.settimana-evento:hover { z-index: 2; min-height: fit-content; box-shadow: var(--ombra-alta); }
.settimana-evento:hover, .settimana-barra:hover { filter: brightness(.96); }
.settimana-evento .dati { display: block; color: var(--testo-tenue); }

/* ── Dashboard (2026-10): riquadri, numeri in evidenza, grafici, calendario ── */
/* La griglia dei riquadri: 12 colonne, ogni riquadro largo quanto scelto (data-colonne: 4, 6, 8, 12). Con lo script
   (dashboard.js) diventa «masonry»: righe da 8px, ogni riquadro ne occupa quante ne servono alla sua altezza e i vuoti
   accanto ai riquadri alti si riempiono con quelli che vengono dopo (dense). Sotto i 992px: metà o tutta la riga. */
.griglia-riquadri { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 1.5rem; row-gap: 1.5rem; align-items: start; }
.griglia-riquadri-cella { grid-column: span 12; min-width: 0; }
@media (min-width: 768px) { .griglia-riquadri-cella:not([data-colonne="12"]) { grid-column: span 6; } }
@media (min-width: 992px) {
  .griglia-riquadri-cella[data-colonne="3"] { grid-column: span 3; }
  .griglia-riquadri-cella[data-colonne="4"] { grid-column: span 4; }
  .griglia-riquadri-cella[data-colonne="5"] { grid-column: span 5; }
  .griglia-riquadri-cella[data-colonne="6"] { grid-column: span 6; }
  .griglia-riquadri-cella[data-colonne="7"] { grid-column: span 7; }
  .griglia-riquadri-cella[data-colonne="8"] { grid-column: span 8; }
  .griglia-riquadri-cella[data-colonne="9"] { grid-column: span 9; }
}
.griglia-riquadri--masonry { grid-auto-rows: 8px; grid-auto-flow: row dense; row-gap: 0; }
.griglia-riquadri--masonry .card.riquadro { height: auto; }
[data-griglia-widget] .card.riquadro { border: 1px solid var(--bordo); border-radius: var(--raggio); box-shadow: var(--ombra); transition: box-shadow .2s ease; height: 100%; }
[data-griglia-widget] .card.riquadro:hover { box-shadow: var(--ombra-alta); }
[data-griglia-widget] .card.riquadro > .card-header { padding: .75rem 1rem; }
.riquadro-titolo { display: flex; align-items: center; gap: .6rem; font-size: 1rem; font-weight: 600; }
.riquadro-icona { display: inline-flex; align-items: center; justify-content: center; width: 1.9rem; height: 1.9rem; border-radius: .55rem;
  background: var(--accento-tenue); color: var(--accento-testo, var(--accento)); font-size: .85rem; flex: none; }
[data-colonna-widget^="progetti-"] .riquadro-icona { background: var(--lavorazione-tenue); color: var(--lavorazione); }
[data-colonna-widget^="lead-"] .riquadro-icona { background: var(--info-tenue); color: var(--info); }
[data-colonna-widget="indicatori"] .card.riquadro { background: transparent; border: 0; box-shadow: none; }
[data-colonna-widget="indicatori"] .card-header { border-bottom: 0; padding-left: 0; }
[data-colonna-widget="indicatori"] .card-body { padding: 0; }

.indicatori { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: var(--s3); }
/* Gli indicatori si trascinano per riordinarli: quello in movimento lascia una sagoma tenue al suo posto. */
[data-indicatori-ordinabili] .indicatore.sortable-ghost { opacity: .35; }
[data-indicatori-ordinabili] .indicatore.sortable-chosen { box-shadow: var(--ombra-alta); }
.indicatore { --tono: var(--accento); --tono-tenue: var(--accento-tenue);
  display: flex; gap: var(--s3); align-items: flex-start; padding: 1rem 1.1rem; border-radius: var(--raggio); background: var(--superficie);
  border: 1px solid var(--bordo); box-shadow: var(--ombra); color: var(--testo); text-decoration: none; position: relative; overflow: hidden; }
.indicatore::after { content: ''; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--tono); }
.indicatore:hover { box-shadow: var(--ombra-alta); transform: translateY(-1px); transition: all .15s ease; }
.indicatore--ok { --tono: var(--ok); --tono-tenue: var(--ok-tenue); }
.indicatore--info { --tono: var(--info); --tono-tenue: var(--info-tenue); }
.indicatore--attenzione { --tono: var(--attenzione); --tono-tenue: var(--attenzione-tenue); }
.indicatore--errore { --tono: var(--errore); --tono-tenue: var(--errore-tenue); }
.indicatore--lavorazione { --tono: var(--lavorazione); --tono-tenue: var(--lavorazione-tenue); }
.indicatore-icona { display: inline-flex; align-items: center; justify-content: center; width: 2.6rem; height: 2.6rem; border-radius: .75rem;
  background: var(--tono-tenue); color: var(--tono); font-size: 1.05rem; flex: none; }
.indicatore-testo { display: flex; flex-direction: column; min-width: 0; }
.indicatore-titolo { font-size: var(--t-s); color: var(--testo-tenue); }
.indicatore-valore { font-size: 1.6rem; line-height: 1.2; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.indicatore-dettaglio, .indicatore-variazione { font-size: var(--t-xs); color: var(--testo-tenue); }
.indicatore-variazione--su { color: var(--ok); }
.indicatore-variazione--giu { color: var(--errore); }

.grafico { position: relative; width: 100%; }
.grafico-totale { font-size: 1.25rem; font-weight: 700; margin: 0 0 var(--s2); font-variant-numeric: tabular-nums; }

.avanzamenti { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s3); }
.avanzamento { display: block; color: var(--testo); text-decoration: none; }
.avanzamento-testa { display: flex; justify-content: space-between; gap: var(--s2); font-size: var(--t-s); margin-bottom: .3rem; }
.avanzamento-nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.avanzamento-numeri { font-variant-numeric: tabular-nums; white-space: nowrap; }
.avanzamento-barra { display: block; height: .5rem; border-radius: 999px; background: var(--superficie-alt); overflow: hidden; }
.avanzamento-barra > span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--lavorazione), var(--accento)); }
.avanzamento-barra--ritardo > span { background: var(--errore); }

.calendario-mini { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s4); }
.calendario-mini-mese, .calendario-mini-prossimi { min-width: 0; }
.calendario-mini-titolo { font-weight: 600; margin: 0 0 var(--s2); }
.calendario-mini-griglia { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; text-align: center; }
.calendario-mini-intestazione { font-size: var(--t-xs); color: var(--testo-tenue); padding-bottom: .2rem; }
.calendario-mini-giorno { position: relative; display: flex; flex-direction: column; align-items: center; padding: .3rem 0 .45rem; border-radius: .5rem;
  font-size: var(--t-s); color: var(--testo); text-decoration: none; font-variant-numeric: tabular-nums; }
.calendario-mini-giorno:hover { background: var(--superficie-alt); }
.calendario-mini-giorno--fuori { color: var(--testo-debole); opacity: .6; }
.calendario-mini-giorno--oggi { background: var(--accento); color: #fff; font-weight: 700; }
.calendario-mini-giorno--oggi:hover { background: var(--accento); }
.calendario-mini-punti { position: absolute; bottom: .12rem; display: flex; gap: 2px; }
.calendario-mini-punti .punto { width: 5px; height: 5px; border-radius: 50%; background: var(--accento); }
.calendario-mini-giorno--oggi .punto { background: #fff; }
.calendario-mini-punti .punto--lavorazione { background: var(--lavorazione); }
.calendario-mini-elenco { list-style: none; margin: 0 0 var(--s2); padding: 0; display: flex; flex-direction: column; gap: .35rem; }
.calendario-mini-elenco a { display: flex; gap: var(--s2); padding: .35rem .5rem; border-radius: .5rem; border-left: 3px solid var(--accento); background: var(--superficie-alt);
  color: var(--testo); text-decoration: none; font-size: var(--t-s); }
.calendario-mini-elenco a.calendario-mini-voce--lavorazione { border-left-color: var(--lavorazione); background: var(--lavorazione-tenue); }
.calendario-mini-quando { flex: none; color: var(--testo-tenue); min-width: 5.5rem; }
.calendario-mini-cosa { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.calendario-mini-link { font-size: var(--t-s); }
@media (max-width: 575px) { .calendario-mini { grid-template-columns: 1fr; } }
.avanzamento-barra > span { transition: width 1.1s cubic-bezier(.22, 1, .36, 1); }
@media (prefers-reduced-motion: reduce) { .avanzamento-barra > span { transition: none; } }

/* ── Offerte ── */
.offerta-schede { display: flex; gap: var(--s3); margin-bottom: var(--s3); position: sticky; top: 0; z-index: 3; background: var(--sfondo, var(--superficie-alt)); padding: var(--s2) 0; }
.offerta-schede a { font-size: var(--t-s); }
.sezione-editor { border: 1px solid var(--bordo); border-radius: var(--raggio); margin-bottom: var(--s3); background: var(--superficie); }
.sezione-editor--fissa { border-left: 4px solid var(--testo-debole); }
.sezione-editor--compilabile { border-left: 4px solid var(--accento); }
.sezione-editor--automatica { border-left: 4px solid var(--lavorazione); }
.sezione-editor--esclusa { opacity: .55; }
.sezione-testa { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; padding: var(--s2) var(--s3); background: var(--superficie-alt); border-radius: var(--raggio) var(--raggio) 0 0; }
.sezione-tipo { font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .04em; color: var(--testo-tenue); min-width: 9rem; }
.sezione-titolo { flex: 1 1 14rem; min-width: 0; }
.sezione-titolo-fisso { flex: 1 1 auto; }
.sezione-comandi { display: inline-flex; gap: 2px; margin-left: auto; }
.sezione-includi { display: inline-flex; gap: var(--s1); align-items: center; font-size: var(--t-s); margin-left: auto; }
.sezione-corpo { padding: var(--s3); display: grid; gap: var(--s3); }
.sezione-campo { display: flex; flex-direction: column; gap: var(--s1); font-size: var(--t-s); min-width: 0; }
.sezione-campo > span:first-child { color: var(--testo-tenue); }
.sezione-miniatura { max-height: 5rem; max-width: 12rem; object-fit: contain; border: 1px solid var(--bordo); border-radius: var(--raggio-s); margin-top: var(--s1); }
.sezione-loghi { display: flex; flex-wrap: wrap; gap: var(--s2); }
.sezione-logo { display: inline-flex; align-items: center; gap: var(--s1); padding: var(--s1); border: 1px solid var(--bordo); border-radius: var(--raggio-s); }
.sezione-logo img { height: 2rem; max-width: 8rem; object-fit: contain; }
.sezione-righe { display: flex; flex-direction: column; gap: var(--s2); }
.sezione-righe-titolo { font-size: var(--t-s); color: var(--testo-tenue); }
.sezione-riga { display: flex; gap: var(--s2); align-items: flex-end; padding: var(--s2); background: var(--superficie-alt); border-radius: var(--raggio-s); }
.sezione-riga > .sezione-campo { flex: 1 1 0; }
.sezione-nota { margin: 0; padding: var(--s2) var(--s3); }
.sezione-aggiungi { display: flex; gap: var(--s2); align-items: flex-end; margin-top: var(--s3); }
.modello-immagini { list-style: none; margin: var(--s3) 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); gap: var(--s3); }
.modello-immagini li { display: flex; flex-direction: column; gap: var(--s1); font-size: var(--t-xs); }
.modello-immagini img { width: 100%; aspect-ratio: 4 / 3; object-fit: contain; background: var(--superficie-alt); border-radius: var(--raggio-s); }
.voci-tabella { overflow-x: auto; }
.voci-intestazione, .voce-riga { display: grid; grid-template-columns: 9rem minmax(14rem, 1fr) 4.5rem 4.5rem 6.5rem 4.5rem 8.5rem 6.5rem 4.5rem; gap: var(--s2); align-items: start; min-width: 60rem; }
.voci-intestazione { font-size: var(--t-xs); color: var(--testo-tenue); padding-bottom: var(--s1); border-bottom: 1px solid var(--bordo); }
.voce-riga { padding: var(--s2) 0; border-bottom: 1px solid var(--bordo); }
.voce-descrizione { display: flex; flex-direction: column; gap: var(--s1); }
.voce-descrizione textarea { font-size: var(--t-s); }
.voce-importo { text-align: right; padding-top: .45rem; }
.voce-comandi { display: inline-flex; gap: 2px; }
.voci-totali { display: flex; flex-wrap: wrap; gap: var(--s4); margin-top: var(--s3); padding: var(--s3); background: var(--superficie-alt); border-radius: var(--raggio-s); font-variant-numeric: tabular-nums; }
.voci-margine { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s4); margin-top: var(--s2); padding: var(--s2) var(--s3); border: 1px dashed var(--bordo-forte); border-radius: var(--raggio-s); font-variant-numeric: tabular-nums; }
.voci-aggiungi { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: flex-start; }
.catalogo-scelta { position: relative; flex: 1 1 18rem; max-width: 34rem; }
.catalogo-scelta > input { width: 100%; }
.catalogo-risultati { position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 2px); margin: 0; padding: var(--s1); list-style: none; max-height: 18rem; overflow-y: auto;
  background: var(--superficie); border: 1px solid var(--bordo-forte); border-radius: var(--raggio-s); box-shadow: var(--ombra-alta); }
.catalogo-risultati > li.testo-tenue { padding: var(--s2); }
.catalogo-risultato { display: flex; justify-content: space-between; gap: var(--s3); width: 100%; padding: var(--s2); text-align: left; background: none; border: 0; border-radius: var(--raggio-s); color: var(--testo); cursor: pointer; }
.catalogo-risultato:hover, .catalogo-risultato:focus-visible { background: var(--accento-tenue); }
.catalogo-risultato .dati { white-space: nowrap; color: var(--testo-tenue); }
.selezione-barra { position: sticky; top: var(--s2); z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); margin-bottom: var(--s3);
  padding: var(--s2) var(--s3); background: var(--accento-tenue); border: 1px solid var(--accento); border-radius: var(--raggio-s); }
.selezione-barra > [data-selezione-conto] { font-weight: 600; margin-right: auto; }
.ai-voci-revisione td { vertical-align: top; }
.ai-voci-revisione input[type=text], .ai-voci-revisione select, .ai-voci-revisione textarea { width: 100%; }
.ai-voci-revisione td:nth-child(2) { min-width: 8rem; }
.ai-voci-revisione td:nth-child(3) { min-width: 7rem; }
.ai-voci-descrizione { min-width: 18rem; }
.ai-voci-descrizione textarea { margin-top: var(--s1); }
.ai-riga-dubbia td, .ai-riga-dubbia-esempio { background: var(--attenzione-tenue); }
.ai-riga-dubbia-esempio { padding: 0 var(--s1); border-radius: var(--raggio-s); }
.offerta-scheda { display: grid; grid-template-columns: minmax(0, 1fr) 22rem; gap: var(--s4); align-items: start; }
.offerta-anteprima iframe { width: 100%; height: 80vh; border: 1px solid var(--bordo); border-radius: var(--raggio); background: #fff; }
.offerta-lato { display: flex; flex-direction: column; gap: var(--s3); }
.offerta-lato .riquadro + .riquadro { margin-top: 0; }
.offerta-totali { display: grid; grid-template-columns: 1fr auto; gap: var(--s1) var(--s3); margin: 0 0 var(--s2); font-variant-numeric: tabular-nums; }
.offerta-totali dd { margin: 0; text-align: right; }
.offerta-azioni { display: flex; flex-direction: column; gap: var(--s3); }
.offerta-azioni form { display: flex; flex-direction: column; gap: var(--s1); }
@media (max-width: 1100px) { .offerta-scheda { grid-template-columns: 1fr; } }
/* Nell'intestazione di una sezione i campi stanno in riga: lo stile generale
   dei moduli li allargherebbe a tutta larghezza. */
.sezione-testa > select { width: auto !important; flex: 0 0 auto; }
.sezione-testa > .sezione-titolo { width: auto !important; flex: 1 1 14rem; }

/* ── Assistenza (ticket) ─────────────────────────────────────────────── */
.ticket-cronometro { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; margin: var(--s2) 0; }
.ticket-cronometro-tempo { font-size: 1.6rem; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: .04em; }
.ticket-durata { display: flex; gap: var(--s2); flex-wrap: wrap; }
.ticket-durata label { flex: 1 1 6rem; }
.ticket-correggi > summary { cursor: pointer; color: var(--accento-testo); font-size: var(--t-s); }
.ticket-correggi[open] > summary { margin-bottom: var(--s2); }
.ticket-spunta { display: flex; align-items: center; gap: var(--s1); }
.ticket-conti { display: flex; gap: var(--s1); flex-wrap: wrap; margin: 0 0 var(--s2); }
.ticket-conti a { text-decoration: none; }
.assistenza-griglia { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 26rem), 1fr)); gap: var(--s3); margin-top: var(--s4); }
.assistenza-griglia .riquadro + .riquadro { margin-top: 0; }
.ticket-nuovo-contratto > summary { cursor: pointer; list-style: none; }
.ticket-nuovo-contratto > summary::-webkit-details-marker { display: none; }

/* --- il modulo di assistenza dentro un iframe su un altro sito ------------ */
body.incorporata { min-height: 0; background: transparent; }
.foglio-incorporato { max-width: 40rem; margin: 0 auto; padding: var(--s3) var(--s2); }
.foglio-incorporato h1 { font-size: var(--t-xl); margin: 0 0 var(--s3); }
.assistenza-codice { width: 100%; font-family: 'IBM Plex Mono', monospace; font-size: var(--t-s); }

/* ── Area documentale ────────────────────────────────────────────────── */
.documento-testo { max-height: 24rem; overflow: auto; white-space: pre-wrap; font-size: var(--t-s); background: var(--superficie-alt); padding: var(--s3); border-radius: var(--raggio-s); }
.documento-avanzamento { margin-top: var(--s3); }
.documento-barra { height: .5rem; background: var(--superficie-alt); border-radius: 999px; overflow: hidden; }
.documento-barra > span { display: block; height: 100%; width: 0; background: var(--accento); transition: width .4s ease; }
.documenti-filtro-area { width: auto; }
.faq-azioni { position: sticky; top: 4.5rem; z-index: 5; background: var(--sfondo); padding: var(--s2) 0; margin-bottom: var(--s2); }
.faq-elenco { display: flex; flex-direction: column; gap: var(--s3); }
.faq-elenco .riquadro + .riquadro { margin-top: 0; }
.faq-voce-testa { display: flex; align-items: flex-start; gap: var(--s2); }
.faq-voce-testa strong { flex: 1 1 auto; }
.faq-voce p { margin: var(--s2) 0 0; }
/* la pagina pubblica */
.aiuto h1 { margin-bottom: var(--s2); }
.aiuto-cerca { width: 100%; margin: var(--s3) 0 var(--s4); padding: var(--s3); font-size: var(--t-m); border: 1px solid var(--bordo-forte); border-radius: var(--raggio); background: var(--superficie); color: var(--testo); }
.aiuto-area { margin-bottom: var(--s5); }
.aiuto-area h2 { font-size: var(--t-l); margin: 0 0 var(--s2); color: var(--accento-testo); }
.aiuto-domanda { border: 1px solid var(--bordo); border-radius: var(--raggio-s); background: var(--superficie); margin-bottom: var(--s2); }
.aiuto-domanda > summary { cursor: pointer; padding: var(--s3); font-weight: 600; }
.aiuto-domanda[open] > summary { border-bottom: 1px solid var(--bordo); }
.aiuto-risposta { padding: var(--s3); line-height: var(--lh-corpo); }
.aiuto-altro { margin-top: var(--s5); padding-top: var(--s4); border-top: 1px solid var(--bordo); }
.forma label.ticket-spunta { flex-direction: row; align-items: center; justify-content: flex-start; text-align: left; }

/* ── Chat dell'assistenza ────────────────────────────────────────────── */
.chat { display: flex; flex-direction: column; gap: var(--s3); }
.chat-messaggi { display: flex; flex-direction: column; gap: var(--s2); max-height: 60vh; min-height: 12rem; overflow-y: auto; padding: var(--s2); border: 1px solid var(--bordo); border-radius: var(--raggio); background: var(--superficie-alt); }
.chat--lettura .chat-messaggi { max-height: none; }
.chat-messaggio { max-width: 85%; padding: var(--s2) var(--s3); border-radius: var(--raggio); white-space: pre-wrap; line-height: var(--lh-corpo); overflow-wrap: anywhere; }
.chat-messaggio--assistente { align-self: flex-start; background: var(--superficie); border: 1px solid var(--bordo); }
.chat-messaggio--cliente { align-self: flex-end; background: var(--accento); color: var(--su-accento); }
.chat-messaggio--attesa { color: var(--testo-tenue); font-style: italic; }
.chat-messaggio--errore { border-color: var(--errore); color: var(--errore); }
.chat-fonti, .chat-ora { display: block; margin-top: var(--s1); font-size: var(--t-xs); color: var(--testo-tenue); white-space: normal; }
.chat-messaggio--cliente .chat-ora { color: inherit; opacity: .8; }
/* il campo di scrittura: una «pillola» col pulsante d'invio rotondo dentro, che si illumina mentre si scrive */
.chat .chat-scrivi { display: flex; align-items: flex-end; gap: var(--s2); padding: .375rem .375rem .375rem 1.1rem; border: 1px solid var(--bordo-forte);
  border-radius: 1.6rem; background: var(--superficie); box-shadow: 0 1px 3px rgba(0, 0, 0, .08); transition: border-color .15s ease, box-shadow .15s ease; }
.chat .chat-scrivi:focus-within { border-color: var(--accento); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accento) 25%, transparent); }
.chat .chat-scrivi textarea { flex: 1 1 auto; min-height: 2.25rem; max-height: 8rem; padding: .5rem 0; border: 0; border-radius: 0; background: transparent;
  color: var(--testo); font: inherit; line-height: 1.4; resize: none; outline: none; box-shadow: none; overflow-y: auto; }
.chat .chat-scrivi textarea::placeholder { color: var(--testo-tenue); }
.chat .chat-scrivi .pulsante { flex: none; width: 2.5rem; height: 2.5rem; padding: 0; border-radius: 50%; display: grid; place-items: center; }
.chat .chat-scrivi .pulsante:disabled { opacity: .5; }
.chat-messaggio--cliente { border-radius: 1rem 1rem .25rem 1rem; }
.chat-messaggio--assistente { border-radius: 1rem 1rem 1rem .25rem; }
.chat-ticket { padding: var(--s3); border: 1px solid var(--accento); border-radius: var(--raggio); background: var(--accento-tenue); display: flex; flex-direction: column; gap: var(--s2); }
.chat-ticket label { display: flex; flex-direction: column; gap: var(--s1); }
.chat-piede { font-size: var(--t-xs); margin: 0; }
.chat-link { background: none; border: 0; padding: 0; color: var(--accento-testo); text-decoration: underline; cursor: pointer; font: inherit; }
.chat-prova { max-width: 40rem; }
.impostazioni-sottotitolo { font-size: var(--t-l); margin: var(--s5) 0 var(--s2); padding-top: var(--s4); border-top: 1px solid var(--bordo); }
.forma fieldset > legend { font-size: var(--t-m); font-weight: 600; margin-bottom: var(--s2); }
/* la chat nel riquadro della vignetta: tutta l'altezza, i messaggi al centro */
body.incorporata.vignetta { height: 100vh; overflow: hidden; }
body.vignetta .foglio-incorporato { height: 100%; max-width: none; padding: var(--s2); display: flex; flex-direction: column; }
.chat-vignetta { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.chat-vignetta .chat { flex: 1 1 auto; min-height: 0; }
.chat-vignetta .chat-messaggi { flex: 1 1 auto; max-height: none; min-height: 0; }
.chat-ticket[hidden], .chat [hidden] { display: none !important; }

/* le impostazioni dell'aspetto della vignetta, con l'anteprima */
.vignetta-aspetto-griglia { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 22rem); gap: var(--s4); align-items: start; }
.vignetta-aspetto-scelte { display: flex; flex-direction: column; gap: var(--s3); }
.forma label.vignetta-colore { flex-direction: row; align-items: center; gap: var(--s3); }
.vignetta-colore input[type="color"] { width: 3rem; height: 2.25rem; padding: 2px; border: 1px solid var(--bordo-forte); border-radius: var(--raggio-s); background: var(--superficie); cursor: pointer; flex: none; }
.vignetta-colore small { display: block; font-weight: 400; }
.vignetta-anteprima { --v-colore: #0e7c77; --v-testo: #fff; --v-sfondo: #eef1f5; --v-alto: 9px; }
.vignetta-anteprima-pagina { position: relative; height: 30rem; border: 1px dashed var(--bordo-forte); border-radius: var(--raggio); background:
  repeating-linear-gradient(0deg, transparent 0 1.6rem, color-mix(in srgb, var(--testo) 6%, transparent) 1.6rem 1.7rem), var(--superficie); overflow: hidden; }
.vignetta-anteprima-riquadro { position: absolute; right: .75rem; bottom: calc(var(--v-alto) + 2.85rem); width: 15.5rem; height: 19rem; background: #fff; border-radius: .8rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .25); display: flex; flex-direction: column; overflow: hidden; font-size: .75rem; color: #1f2933; }
.vignetta-anteprima-testa { display: flex; justify-content: space-between; padding: .5rem .7rem; background: var(--v-colore); color: var(--v-testo); font-weight: 600; }
.vignetta-anteprima-messaggi { flex: 1 1 auto; margin: .45rem; padding: .45rem; border-radius: .6rem; background: var(--v-sfondo); display: flex; flex-direction: column; gap: .35rem; }
.vignetta-anteprima-bolla { max-width: 85%; padding: .35rem .55rem; border-radius: .7rem .7rem .7rem .2rem; background: #fff; border: 1px solid #dde3ea; }
.vignetta-anteprima-bolla--cliente { align-self: flex-end; background: var(--v-colore); color: var(--v-testo); border-color: transparent; border-radius: .7rem .7rem .2rem .7rem; }
.vignetta-anteprima-scrivi { display: flex; align-items: center; justify-content: space-between; margin: 0 .45rem .45rem; padding: .3rem .3rem .3rem .7rem;
  border: 1px solid var(--v-colore); border-radius: 1rem; color: #7b8794; }
.vignetta-anteprima-scrivi i { width: 1.3rem; height: 1.3rem; border-radius: 50%; background: var(--v-colore); }
.vignetta-anteprima-pulsante { position: absolute; right: .75rem; bottom: var(--v-alto); padding: .5rem .85rem; border-radius: 999px; background: var(--v-colore);
  color: var(--v-testo); font-weight: 600; font-size: .8rem; box-shadow: 0 6px 18px rgba(0, 0, 0, .25); white-space: nowrap; max-width: calc(100% - 1.5rem); overflow: hidden; text-overflow: ellipsis; }
.vignetta-anteprima--sinistra .vignetta-anteprima-riquadro, .vignetta-anteprima--sinistra .vignetta-anteprima-pulsante { right: auto; left: .75rem; }
.vignetta-anteprima--scuro .vignetta-anteprima-riquadro { background: #1b222c; color: #e6e9ee; }
.vignetta-anteprima--scuro .vignetta-anteprima-bolla--assistente { background: #232b36; border-color: #313b48; }
@media (max-width: 60rem) { .vignetta-aspetto-griglia { grid-template-columns: minmax(0, 1fr); } }
.vignetta-aspetto { min-width: 0; }
.vignetta-aspetto input[type="range"] { width: 100%; accent-color: var(--accento); }

/* ── Impostazioni: blocchi separati, campi in griglia, «Salva» sempre a portata ── */
.impostazioni-blocco { border: 1px solid var(--bordo); border-radius: var(--raggio); background: var(--superficie); padding: var(--s4) var(--s5); margin: 0 0 var(--s4); }
.impostazioni-blocco-testa { display: flex; gap: var(--s3); align-items: flex-start; margin: 0 0 var(--s4); padding-bottom: var(--s3); border-bottom: 1px solid var(--bordo); }
.impostazioni-blocco-testa > i { flex: none; width: 2.25rem; height: 2.25rem; display: grid; place-items: center; border-radius: 50%;
  background: var(--accento-tenue); color: var(--accento-testo); font-size: 1rem; }
.impostazioni-blocco-testa h3 { margin: 0; font-size: var(--t-l); }
.impostazioni-blocco-testa p { margin: var(--s1) 0 0; color: var(--testo-tenue); font-size: var(--t-s); max-width: var(--misura); }
.impostazioni-campi { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); gap: var(--s4) var(--s5); align-items: start; }
.impostazioni-campi > .campo-gruppo, .impostazioni-campi > label { margin: 0; }
.impostazioni-campi > .impostazioni-intera { grid-column: 1 / -1; }
.impostazioni-salva { position: sticky; bottom: 0; z-index: 4; display: flex; gap: var(--s3); align-items: center; padding: var(--s3) 0;
  margin-top: var(--s2); background: linear-gradient(to top, var(--superficie) 70%, transparent); }
.impostazioni-blocco .forma, .impostazioni-blocco form { max-width: none; }
.impostazioni-indice { display: flex; flex-wrap: wrap; gap: var(--s2); margin: var(--s3) 0 var(--s4); }
.impostazioni-indice a { padding: .3rem .75rem; border: 1px solid var(--bordo); border-radius: 999px; font-size: var(--t-s); text-decoration: none; color: var(--testo); background: var(--superficie); }
.impostazioni-indice a:hover { border-color: var(--accento); color: var(--accento-testo); }
.impostazioni-capitolo { display: flex; align-items: center; gap: var(--s2); font-size: var(--t-xl); margin: var(--s6) 0 var(--s2); padding-top: var(--s5); border-top: 2px solid var(--bordo); scroll-margin-top: 5rem; }
.impostazioni-blocco { scroll-margin-top: 5rem; }
.impostazioni-etichetta { display: block; font-weight: 600; font-size: var(--t-s); margin: var(--s2) 0 var(--s1); }
.impostazioni-etichetta:first-child { margin-top: 0; }
.impostazioni-codici .assistenza-codice { margin-bottom: var(--s2); }
.impostazioni-modulo fieldset { border: 0; padding: 0; margin: 0; }
/* i moduli delle impostazioni a blocchi usano tutta la larghezza della scheda (i blocchi tengono in ordine i campi) */
.forma.impostazioni-modulo { max-width: none; gap: 0; }
.impostazioni-blocco { max-width: 72rem; }

/* ── Impostazioni → Email inviate: elenco, stile comune ed editor a blocchi ── */
.email-elenco { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.email-voce { display: flex; gap: var(--s3); align-items: center; justify-content: space-between; padding: var(--s3) 0; border-top: 1px solid var(--bordo); }
.email-voce:first-child { border-top: 0; padding-top: 0; }
.email-voce-testo { min-width: 0; display: flex; flex-wrap: wrap; gap: .35rem var(--s2); align-items: center; }
.email-voce-testo small { flex-basis: 100%; }
.email-voce .pulsante { flex: none; }
.email-anteprima { border: 1px solid var(--bordo); border-radius: var(--raggio); background: #f3f5f8; overflow: hidden; transition: max-width .25s ease; margin: 0 auto; max-width: 100%; }
.email-anteprima iframe { display: block; width: 100%; min-height: 20rem; border: 0; background: transparent; }
.email-anteprima--telefono { max-width: 375px; }
.email-stile-griglia { grid-template-columns: minmax(0, 1fr) minmax(0, 32rem); }
.email-anteprima--stile { position: sticky; top: var(--s3); }
.email-editor { min-width: 0; }

.email-editor-testa { display: flex; gap: var(--s4); align-items: flex-start; margin: 0 0 var(--s4); }
.email-editor-testa h3 { margin: 0 0 .2rem; display: flex; gap: var(--s2); align-items: center; flex-wrap: wrap; }
.email-editor-testa p { margin: 0; }
.email-editor-griglia { display: grid; grid-template-columns: 11.5rem minmax(0, 1fr) minmax(0, 27rem); gap: var(--s4); align-items: start; }
.email-tavolozza, .email-anteprima-colonna { position: sticky; top: var(--s3); }
.email-tavolozza h4, .email-anteprima-colonna h4 { margin: 0 0 .25rem; font-size: var(--t-s); text-transform: uppercase; letter-spacing: .04em; color: var(--testo-tenue); }
.email-tavolozza p { font-size: var(--t-xs); margin: 0 0 var(--s2); }
.email-tavolozza ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .4rem; }
.email-tavolozza-voce { display: flex; gap: var(--s2); align-items: center; padding: .55rem .7rem; border: 1px solid var(--bordo); border-radius: var(--raggio-s);
  background: var(--superficie); cursor: grab; font-size: var(--t-s); user-select: none; transition: border-color var(--transizione), box-shadow var(--transizione); }
.email-tavolozza-voce i { width: 1.1rem; text-align: center; color: var(--accento); }
.email-tavolozza-voce:hover, .email-tavolozza-voce:focus-visible { border-color: var(--accento); box-shadow: var(--ombra); outline: none; }

.email-composizione { min-width: 0; display: flex; flex-direction: column; gap: var(--s3); }
.forma .email-oggetto input { font-size: var(--t-m); font-weight: 600; }
.email-dati { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; font-size: var(--t-xs); color: var(--testo-tenue); }
.email-dati > span { flex-basis: 100%; }
.email-dato { border: 1px dashed var(--accento); background: var(--accento-tenue); color: var(--accento-testo); border-radius: var(--raggio-pill); padding: .2rem .65rem;
  font: inherit; font-size: var(--t-xs); cursor: pointer; }
.email-dato:hover { background: var(--accento); color: var(--su-accento); }
.email-dato--obbligatorio { border-style: solid; font-weight: 600; }
.email-barra { position: sticky; top: 0; z-index: 3; display: flex; flex-wrap: wrap; gap: .25rem; padding: .35rem; border: 1px solid var(--bordo); border-radius: var(--raggio-s);
  background: var(--superficie); box-shadow: var(--ombra); }
.email-barra button { border: 0; background: transparent; color: var(--testo); width: 2rem; height: 2rem; border-radius: var(--raggio-s); cursor: pointer; }
.email-barra button:hover { background: var(--superficie-alt); }
.email-barra-link { display: inline-flex; gap: .25rem; align-items: center; }
.email-barra-link input { width: 15rem; max-width: 50vw; padding: .25rem .5rem; }
.email-barra-link button { width: auto; padding: 0 .6rem; font-weight: 600; color: var(--accento); }

/* La tela somiglia all'email vera: carta bianca, riga di colore in cima, il carattere scelto. */
.email-tela { background: #f3f5f8; border-radius: var(--raggio); padding: var(--s4); }
.email-tela-carta { max-width: 600px; margin: 0 auto; background: #fff; color: #1f2937; border-radius: 12px; border-top: 4px solid var(--em-colore, #0e7c77);
  padding: var(--s4) var(--s3); box-shadow: 0 1px 3px rgba(0,0,0,.08); font-family: var(--em-carattere, sans-serif); font-size: 15px; line-height: 1.6; min-height: 12rem; }
.email-blocchi { list-style: none; margin: 0; padding: 0; min-height: 6rem; }
.email-tela-vuota { text-align: center; color: #6b7280; border: 2px dashed #d1d5db; border-radius: 10px; padding: var(--s5) var(--s3); margin: 0; }
.email-blocco { position: relative; border: 1px solid transparent; border-radius: 8px; padding: .5rem .6rem; margin: 0 0 .5rem; transition: border-color var(--transizione), background var(--transizione); }
.email-blocco:hover, .email-blocco:focus-within { border-color: #d1d5db; background: #fafbfc; z-index: 1; }
.email-blocco--nuovo { animation: email-nuovo 1.2s ease; }
@keyframes email-nuovo { from { background: color-mix(in srgb, var(--em-colore, #0e7c77) 14%, #fff); } to { background: transparent; } }
.email-blocco--fantasma { opacity: .45; background: color-mix(in srgb, var(--em-colore, #0e7c77) 10%, #fff); }
.email-blocchi .email-tavolozza-voce { margin: .35rem 0; }
.email-tela-carta b, .email-tela-carta strong, .email-tela-carta i, .email-tela-carta em { color: inherit; }
.email-blocco-testa { position: absolute; z-index: 2; top: -.95rem; left: .5rem; right: .5rem; display: flex; justify-content: space-between; align-items: center; pointer-events: none;
  font-family: var(--carattere); font-size: 11px; color: #6b7280; opacity: 0; transition: opacity var(--transizione); }
.email-blocco-testa > span { pointer-events: auto; background: #fff; border: 1px solid #d1d5db; border-radius: 6px; box-shadow: 0 1px 2px rgba(0,0,0,.06); }
.email-blocco:hover .email-blocco-testa, .email-blocco:focus-within .email-blocco-testa { opacity: 1; }
.email-blocco-maniglia { cursor: grab; text-transform: uppercase; letter-spacing: .04em; padding: .1rem .2rem; }
.email-blocco-azioni { display: flex; gap: .15rem; }
.email-blocco-azioni button { border: 0; background: transparent; color: #6b7280; width: 1.7rem; height: 1.7rem; border-radius: 6px; cursor: pointer; }
.email-blocco-azioni button:hover { background: #eef0f3; color: #111827; }
.email-blocco-azioni button[aria-label="Elimina"]:hover { color: #b91c1c; background: #fee2e2; }
.email-blocco [contenteditable] { outline: none; border-radius: 4px; cursor: text; }
.email-blocco [contenteditable]:focus { box-shadow: 0 0 0 2px color-mix(in srgb, var(--em-colore, #0e7c77) 35%, transparent); }
.email-b-titolo { font-size: 23px; line-height: 1.3; font-weight: 700; color: #111827; margin: 0; }
.email-b-testo p, .email-b-riquadro p { margin: 0 0 12px; }
.email-b-testo > :last-child, .email-b-riquadro > :last-child { margin-bottom: 0; }
.email-b-testo a, .email-b-riquadro a { color: var(--em-colore, #0e7c77); font-weight: 600; }
.email-b-riquadro { background: color-mix(in srgb, var(--em-colore, #0e7c77) 8%, #fff); border-left: 4px solid var(--em-colore, #0e7c77); border-radius: 8px; padding: 14px 18px; font-size: 14px; }
.email-b-codice { text-align: center; background: #f3f4f6; border: 1px dashed #cbd2d9; border-radius: 10px; padding: 14px; font-family: 'Courier New', monospace; font-size: 24px;
  font-weight: 700; letter-spacing: .12em; color: #111827; }
.email-b-allinea--centro { text-align: center; }
.email-b-pulsante { display: inline-block; background: var(--em-colore, #0e7c77); color: var(--em-su-colore, #fff); font-weight: 700; padding: 12px 26px; border-radius: 8px; min-width: 4rem; }
.email-b-immagine img { max-width: 100%; height: auto; border-radius: 6px; }
.email-b-immagine-vuota { display: block; padding: var(--s4); border: 2px dashed #d1d5db; border-radius: 8px; color: #6b7280; text-align: center; font-size: 13px; }
.email-b-separatore { border: 0; border-top: 1px solid #e5e7eb; margin: .6rem 0; }
.email-b-spazio { background: repeating-linear-gradient(45deg, transparent 0 6px, #f1f3f5 6px 12px); border-radius: 4px; }
.email-blocco-opzioni { display: none; flex-wrap: wrap; gap: var(--s2); margin-top: .5rem; font-family: var(--carattere); font-size: var(--t-xs); }
.email-blocco:focus-within .email-blocco-opzioni, .email-blocco:hover .email-blocco-opzioni { display: flex; }
.forma .email-blocco-campo { flex: 1 1 12rem; gap: .15rem; }
.email-blocco-campo span { color: var(--testo-tenue); }
.email-blocco-opzioni input[type="range"] { width: 100%; accent-color: var(--em-colore, #0e7c77); }

.email-anteprima-testa { display: flex; justify-content: space-between; align-items: center; margin: 0 0 var(--s2); }
.email-schermi { display: inline-flex; border: 1px solid var(--bordo); border-radius: var(--raggio-pill); overflow: hidden; }
.email-schermi button { border: 0; background: var(--superficie); color: var(--testo-tenue); padding: .3rem .7rem; cursor: pointer; }
.email-schermi button.attivo { background: var(--accento); color: var(--su-accento); }
.email-anteprima-oggetto { font-size: var(--t-s); margin: 0 0 var(--s2); overflow-wrap: anywhere; }
.email-anteprima-colonna > .testo-tenue { font-size: var(--t-xs); margin: var(--s2) 0 0; }
.email-anteprima-colonna .email-anteprima { max-height: calc(100vh - 12rem); overflow-y: auto; }
.email-editor-azioni { flex-wrap: wrap; }
.email-ripristina { display: flex; gap: var(--s3); align-items: center; flex-wrap: wrap; margin-top: var(--s3); }
@media (max-width: 90rem) { .email-editor-griglia { grid-template-columns: 10.5rem minmax(0, 1fr); } .email-anteprima-colonna { grid-column: 1 / -1; position: static; } }
@media (max-width: 48rem) {
  .email-editor-griglia { grid-template-columns: minmax(0, 1fr); }
  .email-tavolozza { position: static; }
  .email-tavolozza ul { flex-direction: row; flex-wrap: wrap; }
  .email-tela { padding: var(--s2); }
  .email-stile-griglia { grid-template-columns: minmax(0, 1fr); }
  .email-voce { flex-direction: column; align-items: stretch; }
}

/* ── Posta → Caselle → Firma: l'editor a blocchi della firma ── */
.firma-editor { min-width: 0; }
.forma.firma-forma { max-width: none; }
.firma-editor-griglia { display: grid; grid-template-columns: 15rem minmax(0, 1fr) minmax(0, 24rem); gap: var(--s4); align-items: start; }
.firma-colonna { position: sticky; top: var(--s3); display: flex; flex-direction: column; gap: var(--s2); }
.firma-colonna h4 { margin: var(--s2) 0 0; font-size: var(--t-s); text-transform: uppercase; letter-spacing: .04em; color: var(--testo-tenue); }
.firma-colonna > p { font-size: var(--t-xs); margin: 0; }
.firma-modelli { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: .45rem; }
.firma-modello { display: flex; flex-direction: column; width: 100%; height: 100%; padding: 0; border: 1px solid var(--bordo); border-radius: var(--raggio-s);
  background: var(--superficie); cursor: pointer; overflow: hidden; text-align: left; font: inherit; transition: border-color var(--transizione), box-shadow var(--transizione); }
.firma-modello:hover, .firma-modello:focus-visible { border-color: var(--accento); box-shadow: var(--ombra); outline: none; }
.firma-modello-anteprima { display: block; height: 4.6rem; overflow: hidden; background: #fff; padding: .35rem; pointer-events: none; }
.firma-modello-anteprima > table { transform: scale(.42); transform-origin: top left; }
.firma-modello-nome { display: block; padding: .3rem .45rem; font-size: var(--t-xs); font-weight: 600; border-top: 1px solid var(--bordo); }
.firma-tavolozza { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: .35rem; }
.firma-tavolozza .email-tavolozza-voce { padding: .4rem .5rem; font-size: var(--t-xs); }
.firma-composizione { min-width: 0; background: var(--superficie-alt); border-radius: var(--raggio); padding: var(--s3); }
.firma-blocchi { list-style: none; margin: 0; padding: 0; min-height: 5rem; display: flex; flex-direction: column; gap: .5rem; }
.firma-blocco { background: var(--superficie); border: 1px solid var(--bordo); border-radius: var(--raggio-s); padding: .5rem .7rem .65rem; display: flex; flex-direction: column; gap: .4rem; }
.firma-blocco-testa { display: flex; justify-content: space-between; align-items: center; font-size: var(--t-xs); color: var(--testo-tenue); }
.firma-blocco-maniglia { cursor: grab; display: inline-flex; gap: .4rem; align-items: center; text-transform: uppercase; letter-spacing: .04em; font-weight: 600; }
.firma-blocco-testa button { border: 0; background: transparent; color: var(--testo-tenue); width: 1.7rem; height: 1.7rem; border-radius: 6px; cursor: pointer; }
.firma-blocco-testa button:hover { color: #b91c1c; background: #fee2e2; }
.firma-blocco .email-tavolozza-voce { margin: 0; }
.forma .firma-campo { display: flex; flex-direction: column; gap: .15rem; font-size: var(--t-xs); }
.firma-campo > span { color: var(--testo-tenue); }
.firma-campo output { font-size: var(--t-xs); color: var(--testo-tenue); }
.firma-campo input[type="range"] { accent-color: var(--accento); }
.firma-opzioni { display: flex; flex-wrap: wrap; gap: var(--s3); }
.forma .firma-spunta { display: inline-flex; flex-direction: row; gap: .35rem; align-items: center; font-size: var(--t-xs); }
.firma-immagine { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: end; }
.firma-miniatura { max-width: 7rem; max-height: 4rem; border: 1px solid var(--bordo); border-radius: 4px; background: #fff; }
.firma-reti { display: grid; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); gap: .4rem; }
.firma-affiancato { display: grid; grid-template-columns: minmax(10rem, 14rem) minmax(0, 1fr); gap: var(--s3); align-items: start; }
.firma-affiancato-immagine { display: flex; flex-direction: column; gap: .4rem; }
.firma-sottoblocchi { background: var(--sfondo); border: 2px dashed var(--bordo); border-radius: var(--raggio-s); padding: .45rem; min-height: 4rem; }
.firma-stile { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--s2); }
.firma-stile input[type="color"] { width: 100%; height: 2.3rem; padding: .15rem; }
.firma-anteprima { border: 1px solid var(--bordo); border-radius: var(--raggio); background: #fff; overflow: hidden; }
.firma-anteprima iframe { display: block; width: 100%; min-height: 9rem; border: 0; }
.firma-azioni { margin-top: var(--s4); }
@media (max-width: 90rem) { .firma-editor-griglia { grid-template-columns: 14rem minmax(0, 1fr); } .firma-editor-griglia > .firma-colonna:last-child { grid-column: 1 / -1; position: static; } }
@media (max-width: 48rem) {
  .firma-editor-griglia, .firma-affiancato { grid-template-columns: minmax(0, 1fr); }
  .firma-colonna { position: static; }
}

/* ── Impostazioni → Aspetto → Tema grafico ── */
.tema-mini { display: inline-flex; gap: 3px; flex: none; }
.tema-mini-pannello { display: flex; width: 3.6rem; height: 2.5rem; border-radius: 5px; overflow: hidden; box-shadow: 0 0 0 1px rgb(0 0 0 / .12); }
.tema-mini-barra { width: 32%; display: flex; flex-direction: column; gap: 3px; padding: 5px 4px; }
.tema-mini-barra i, .tema-mini-riquadro i { display: block; height: 3px; border-radius: 2px; }
.tema-mini-corpo { flex: 1; padding: 5px; }
.tema-mini-riquadro { display: flex; flex-direction: column; gap: 3px; height: 100%; padding: 4px; border: 1px solid; border-radius: 3px; }
.tema-mini-riquadro i:nth-child(2) { width: 70%; }
.tema-mini-riquadro b { display: block; width: 55%; height: 5px; margin-top: auto; border-radius: 2px; }
.tema-riquadro { display: flex; gap: var(--s4); align-items: center; flex-wrap: wrap; padding: var(--s3) var(--s4); border: 1px solid var(--bordo); border-radius: var(--raggio); }
.tema-riquadro > div { flex: 1 1 16rem; }
.tema-riquadro h3 { margin: 0 0 .2rem; font-size: var(--t-l); }
.tema-riquadro p { margin: 0; }
.tema-editor { max-width: none; }
.tema-gruppo { border: 0; padding: 0; margin: 0 0 var(--s4); min-width: 0; }
.tema-gruppo legend { font-size: var(--t-s); font-weight: 600; color: var(--testo-tenue); margin-bottom: var(--s2); }
.tema-preset { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s2); }
@media (max-width: 62rem) { .tema-preset { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.tema-preset .tema-mini-pannello { width: 4.6rem; height: 3rem; }
.tema-scelta { position: relative; display: flex; flex-direction: column; gap: .4rem; padding: .6rem; border: 1px solid var(--bordo); border-radius: var(--raggio-s);
  background: var(--superficie); cursor: pointer; transition: border-color var(--transizione), box-shadow var(--transizione); }
.tema-scelta:hover { border-color: var(--bordo-forte); }
.tema-scelta input { position: absolute; opacity: 0; pointer-events: none; }
.tema-scelta:has(input:checked) { border-color: var(--accento); box-shadow: 0 0 0 2px var(--anello); }
.tema-scelta:has(input:focus-visible) { box-shadow: 0 0 0 3px var(--anello); }
.tema-scelta-nome { font-size: var(--t-s); font-weight: 600; }
.tema-manopole { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 0 var(--s5); }
.tema-accento { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.tema-accento input[type="color"] { width: 3rem; height: 2.2rem; padding: .1rem; border: 1px solid var(--bordo-forte); border-radius: var(--raggio-s); background: var(--superficie); }
.tema-tinta { width: 1.6rem; height: 1.6rem; border-radius: 50%; border: 2px solid var(--superficie); box-shadow: 0 0 0 1px var(--bordo-forte); cursor: pointer; padding: 0; }
.tema-tinta:hover, .tema-tinta:focus-visible { box-shadow: 0 0 0 2px var(--testo); outline: none; }
.tema-opzioni { display: flex; flex-wrap: wrap; gap: .4rem; }
.forma .tema-opzione { display: inline-flex; flex-direction: row; align-items: center; gap: .35rem; padding: .35rem .7rem; border: 1px solid var(--bordo); border-radius: var(--raggio-s); cursor: pointer; font-size: var(--t-s); }
.tema-opzione:has(input:checked) { border-color: var(--accento); background: var(--accento-tenue); color: var(--accento-testo); }
.tema-prova { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; padding-top: var(--s3); border-top: 1px solid var(--bordo); }
.tema-ripristina { margin-top: var(--s3); }
.tema-opzione input { accent-color: var(--accento); }

/* Dashboard: riquadri sbloccati per riordinarli («Sblocca riquadri»). Bloccati,
   le intestazioni non sono maniglie e la pagina scorre senza spostarli. */
.griglia-riquadri--sbloccata .riquadro { outline: 2px dashed var(--accento); outline-offset: 3px; }
.griglia-riquadri--sbloccata .riquadro > .card-header { cursor: grab; }
.griglia-riquadri--sbloccata [data-indicatori-ordinabili] > * { cursor: grab; }