/* ============================================================================
   PANTHEON — Sala di controllo
   Foglio di stile unico. Nessuna libreria, nessun CDN, nessun build step.

   Perche' il file si chiama console.css e non piu' tesla.css:
   il nome vecchio dichiarava uno stile ("Tesla") che non e' piu' la direzione.
   Qui il modello e' una consolle operativa: densita', numeri allineati,
   stati leggibili in diagonale. Il rinominare da' anche cache-busting gratis
   (URL nuovo = nessuna vecchia copia nel service worker).

   ORGANIZZAZIONE
     01 TOKEN            unica fonte di verita' (colori, spazi, raggi, testo)
     02 RESET / BASE
     03 LAYOUT           app, rail, contenuto, topbar
     04 NAVIGAZIONE      rail desktop + barra in basso su telefono
     05 ALLARME          kill switch
     06 ASPETTA TE       decisioni ferme (la ragione per cui apri la dashboard)
     07 LETTURE          stat / kpi / meter / strip
     08 SUPERFICI        panel, card, rack
     09 SEGNALI          badge, chip, dot, livelli
     10 TABELLE          base, flusso eventi, contabilita'
     11 FORM E BOTTONI
     12 CONVERSAZIONE    thread, messaggi, composer
     13 AVVISI           notice, note
     14 PAGINE           qualita', richieste, accesso
     15 UTILITY
     16 MOVIMENTO / A11Y

   COMPATIBILITA': tutte le classi gia' usate nei template restano valide.
   Si puo' installare questo file PRIMA di toccare i template.
   ========================================================================== */


/* ============================================================================
   01 · TOKEN
   Regola: nessun colore, spazio o dimensione scritto a mano fuori da qui.
   Se un valore serve in una pagina, diventa un token o una classe.
   ========================================================================== */

:root {
  color-scheme: dark;

  /* --- superfici (tema scuro = default) --------------------------------- */
  --bg:          #0c0e12;   /* fondo pagina                                 */
  --surface:     #14171d;   /* pannelli, card, barre                        */
  --surface-2:   #1a1e26;   /* campi, righe alternate, hover                */
  --surface-3:   #212630;   /* elementi premuti / selezionati               */
  --line:        #262b34;   /* divisori normali                             */
  --line-2:      #384150;   /* divisori marcati, bordi di input             */

  /* --- testo (contrasti misurati su --surface) -------------------------- */
  --text:        #eef1f6;   /* 15.8:1  corpo e numeri                       */
  --text-2:      #98a2b3;   /*  6.9:1  testo secondario, celle tabella      */
  --text-3:      #848e9d;   /*  5.4:1  etichette micro, meta (passa AA)     */

  /* --- accento: UNO solo ------------------------------------------------ */
  --accent:      #6cd0e0;   /* brand, link, focus, indicatore attivo        */
  --accent-2:    #91e2ec;   /* hover                                        */
  --accent-ink:  #071416;   /* testo sopra un riempimento di accento        */
  --accent-soft: #10262a;   /* fondo tenue d'accento                        */
  --info:        var(--accent);

  /* --- stati: colori pensati per essere LETTI, non solo visti ----------- */
  --ok:          #34d399;   /*  9.3:1 su --surface                          */
  --warn:        #fbbf24;   /* 10.7:1                                       */
  --bad:         #ff5f61;   /*  6.0:1                                       */
  --ok-ink:      #04140b;
  --ok-soft:     #10251d;
  --warn-soft:   #241d0c;
  --bad-soft:    #2a1417;
  --ok-line:     #1c5b45;
  --warn-line:   #6b5210;
  --bad-line:    #7a2226;

  /* --- bande di stato a tutta larghezza --------------------------------- */
  --alarm-bg:    #2a1417;   /* kill switch: testo 8.6:1                     */
  --alarm-line:  #7a2226;
  --alarm-text:  #ff9b9c;
  --await-bg:    #2a2110;   /* aspetta te: testo 10.4:1                     */
  --await-line:  #7a5c15;
  --await-text:  #ffc95c;

  --focus:       #6cd0e0;

  /* --- tipografia ------------------------------------------------------- */
  /* Niente webfont: nessun CDN, nessun FOUT, zero byte da scaricare.
     Lo stack di sistema e' anche quello che il telefono disegna piu' veloce. */
  --sans: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --mono: ui-monospace, 'Cascadia Mono', 'SF Mono', Consolas, 'Roboto Mono', monospace;

  --fs-00: 10px;  /* solo maiuscoletto decorativo, mai testo importante     */
  --fs-0:  11px;  /* etichette micro                                        */
  --fs-1:  12px;  /* meta, note                                             */
  --fs-2:  13px;  /* celle tabella, corpo denso                             */
  --fs-3:  15px;  /* corpo                                                  */
  --fs-4:  17px;
  --fs-5:  21px;  /* titolo pagina                                          */
  --fs-num:    34px;  /* numero grande                                      */
  --fs-num-sm: 24px;

  --lh-tight: 1.2;
  --lh:       1.5;
  --ls-caps:  .09em;  /* spaziatura per le etichette maiuscole              */

  /* --- movimento: quattro durate, tre curve ----------------------------
     Il movimento spiega uno stato, non decora. Prima le durate erano scritte
     a mano: .12s, .14s, .15s, .16s, .18s, .2s, .22s -- sette valori per la
     stessa cosa, differenze che nessuno vede e che nessuno puo' tenere
     allineate. Da qui in avanti si sceglie fra queste quattro.

       istantaneo  ciò che deve sembrare gia' fatto (hover, pressione)
       svelto      un cambio di stato locale (una scheda, una riga)
       calmo       qualcosa che entra o esce dalla pagina
       lento       solo il passaggio fra due schermate

     Le curve: 'esci' parte veloce e si posa (l'oggetto arriva), 'entra' fa il
     contrario (l'oggetto se ne va), 'ferma' e' per cio' che non deve avere
     inerzia. Nessuna curva elastica: uno strumento non rimbalza.
     Chi ha chiesto meno movimento lo ottiene: prefers-reduced-motion e'
     rispettato piu' avanti nel file. */
  --dur-istante: .10s;
  --dur-svelto:  .16s;
  --dur-calmo:   .24s;
  --dur-lento:   .36s;
  --ease-esci:  cubic-bezier(.2, .8, .3, 1);
  --ease-entra: cubic-bezier(.4, 0, 1, 1);
  --ease-ferma: linear;

  /* --- spazi: multipli di 4 -------------------------------------------- */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 20px; --s6: 24px; --s7: 32px; --s8: 48px;

  /* --- raggi: piu' stretti del vecchio 14px. Uno strumento non e' morbido */
  --r1: 4px; --r2: 6px; --r3: 10px; --r4: 12px; --r-pill: 999px;
  /* P6 · superfici premium della Control Room: piu' morbide, ma solo per le
     schede "prodotto" (Today/Inbox/Approvals), non per le tabelle dense. */
  --r5: 16px; --r6: 20px;
  --shadow-card: 0 1px 2px rgba(0,0,0,.18), 0 8px 24px rgba(0,0,0,.14);
  --shadow-hover: 0 2px 4px rgba(0,0,0,.20), 0 14px 34px rgba(0,0,0,.20);

  /* --- ombre: solo sotto le barre fisse. Zero ombre nelle liste lunghe,
         perche' su telefono medio sono la prima causa di scatti allo scroll */
  --shadow-bar: 0 -1px 0 var(--line), 0 -8px 24px rgba(0,0,0,.35);
  --shadow-top: 0 1px 0 var(--line), 0 8px 24px rgba(0,0,0,.35);

  /* --- misure di layout ------------------------------------------------- */
  --rail-w:   204px;
  --tabbar-h: 54px;
  --row-h:    34px;   /* altezza riga tabella densa                          */
  --tap:      44px;   /* bersaglio tattile minimo                            */
  --view-max: 1560px;

  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);

  /* --- alias di compatibilita' con il vecchio foglio --------------------
     Cosi' i template attuali (e gli style="" ancora presenti) non si rompono
     nel momento in cui si sostituisce il CSS. --ok e --err nel file vecchio
     erano USATI ma MAI DEFINITI: qui esistono davvero.                     */
  --panel:   var(--surface);
  --panel-2: var(--surface-2);
  --txt:     var(--text);
  --muted:   var(--text-2);
  --dim:     var(--text-3);
  --good:    var(--ok);
  --err:     var(--bad);
  --radius:  var(--r4);
}
/* --- TEMA CHIARO ------------------------------------------------------------
   Si attiva SOLO con data-theme="light" sull'elemento radice. L'impostazione
   del sistema operativo non c'entra piu' nulla: vedi la nota qui sotto.
   -------------------------------------------------------------------------- */

/* Il tema chiaro NON segue piu' l'impostazione del sistema operativo.

   Motivo concreto: aperta dal browser di un PC in modalita' chiara la consolle
   era bianca, mentre l'app installata sul telefono era scura — stessa
   applicazione, due facce diverse. Un pannello di controllo ha UN aspetto,
   e qui e' scuro.

   Il chiaro non sparisce: resta il blocco :root[data-theme="light"] qui sotto,
   che si attiva solo se lo si chiede. Quello che stava qui era la sua copia
   identica dentro un @media, quindi e' stato tolto e non convertito: due
   sorgenti per gli stessi colori si separano al primo ritocco. */


:root[data-theme="light"] {
  /* CHIARO — e' il tema di riferimento del prodotto.
     Base luminosa con un soffio di blu (non grigio ufficio), superfici bianche
     pulite, accento blu elettrico e un viola usato con parsimonia: da' carattere
     senza trasformare ogni elemento in un arcobaleno. */
  color-scheme: light;
  --bg:          #f6f7fc;
  --surface:     #ffffff;
  --surface-2:   #f3f5fc;
  --surface-3:   #e9edfa;
  --line:        #e7eaf5;
  --line-2:      #ccd3e8;
  --text:        #0e1330;
  --text-2:      #4c5573;
  --text-3:      #5c6480;
  --accent:      #3b53f0;
  --accent-2:    #2b3fd4;
  --accent-ink:  #ffffff;
  --accent-soft: #eef0ff;
  --viola:       #7b4bf5;
  --viola-soft:  #f2ecff;
  --ok:          #067647;
  --warn:        #8a5a00;
  --bad:         #c8102e;
  --ok-ink:      #ffffff;
  --ok-soft:     #e7f6ee;
  --warn-soft:   #fdf4e0;
  --bad-soft:    #fdecee;
  --ok-line:     #9fd6ba;
  --warn-line:   #e0c073;
  --bad-line:    #f0b3bc;
  --alarm-bg:    #fff1f2;
  --alarm-line:  #e88b95;
  --alarm-text:  #a01020;
  --await-bg:    #fff8e6;
  --await-line:  #e0b64a;
  --await-text:  #7a4e00;
  --focus:       #1568d8;
  --shadow-bar:  0 -1px 0 var(--line), 0 -8px 20px rgba(16,24,40,.10);
  --shadow-top:  0 1px 0 var(--line), 0 8px 20px rgba(16,24,40,.10);
  --shadow-card: 0 1px 2px rgba(16,24,40,.06), 0 10px 28px rgba(16,24,40,.08);
  --shadow-hover: 0 2px 4px rgba(16,24,40,.08), 0 16px 38px rgba(16,24,40,.12);
}

/* data-theme="dark" esplicito: rimette i valori scuri anche se il sistema
   e' in chiaro. Serve perche' l'interruttore manuale deve vincere nei DUE versi. */
:root[data-theme="dark"] {
  /* SCURO — stessa identita' del chiaro, non un negativo.
     Superfici neutre leggermente bluastre (mai nero puro, che schiaccia le
     ombre) e lo stesso accento blu, schiarito quel tanto che serve per restare
     leggibile su fondo scuro. */
  color-scheme: dark;
  --bg:#0d1017; --surface:#151a25; --surface-2:#1c2231; --surface-3:#242c3f;
  --line:#232a3a; --line-2:#39425c;
  --text:#eef1f9; --text-2:#a3adc6; --text-3:#8892ab;
  --accent:#7189ff; --accent-2:#93a5ff; --accent-ink:#0a0e1c; --accent-soft:#1a2140;
  --viola:#9a76ff; --viola-soft:#221c3d;
  --ok:#34d399; --warn:#fbbf24; --bad:#ff5f61; --ok-ink:#04140b;
  --ok-soft:#10251d; --warn-soft:#241d0c; --bad-soft:#2a1417;
  --ok-line:#1c5b45; --warn-line:#6b5210; --bad-line:#7a2226;
  --alarm-bg:#2a1417; --alarm-line:#7a2226; --alarm-text:#ff9b9c;
  --await-bg:#2a2110; --await-line:#7a5c15; --await-text:#ffc95c;
  --focus:#6cd0e0;
  --shadow-bar: 0 -1px 0 var(--line), 0 -8px 24px rgba(0,0,0,.35);
  --shadow-top: 0 1px 0 var(--line), 0 8px 24px rgba(0,0,0,.35);
}


/* ============================================================================
   02 · RESET / BASE
   ========================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  /* NOTA: qui NON c'e' overflow-x:hidden (c'era prima).
     Su html/body trasforma il documento in contenitore di scroll e rompe
     position:sticky rispetto al viewport — cioe' proprio la banda d'allarme.
     Lo sbordamento si evita alla radice: min-width:0 sui figli flex e
     .table-wrap sulle tabelle. */
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: var(--fs-3);
  line-height: var(--lh);
  -webkit-font-smoothing: antialiased;
  /* Cifre a larghezza fissa ovunque: in una consolle le colonne di numeri
     devono incolonnarsi anche mentre si aggiornano. */
  font-variant-numeric: tabular-nums;
}

a { color: inherit; text-decoration: none; }
a:hover { color: var(--text); }

h1, h2, h3, h4 { margin: 0; font-weight: 600; line-height: var(--lh-tight); }

p { margin: 0 0 var(--s3); }
p:last-child { margin-bottom: 0; }

img { max-width: 100%; height: auto; display: block; }

code, kbd, samp {
  font-family: var(--mono);
  font-size: .92em;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r1);
  padding: .1em .35em;
}

pre { margin: 0; font-family: var(--mono); }

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

::selection { background: var(--accent); color: var(--accent-ink); }

/* Focus: sempre visibile, mai rimosso. Un pannello si usa anche da tastiera. */
:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: var(--r1);
}
:focus:not(:focus-visible) { outline: none; }

/* Barre di scorrimento discrete (WebKit) */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: var(--r-pill);
  border: 3px solid var(--bg); }


/* ============================================================================
   03 · LAYOUT
   ========================================================================== */

.app { display: flex; min-height: 100vh; min-height: 100dvh; }

.content {
  flex: 1;
  min-width: 0;          /* senza questo un log lungo allarga tutta la pagina */
  display: flex;
  flex-direction: column;
}

.topbar {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s4);
  flex-wrap: wrap;
  padding: var(--s5) var(--s6) var(--s4);
  border-bottom: 1px solid var(--line);
  background: var(--bg);
}
.topbar h1 {
  font-size: var(--fs-5);
  letter-spacing: -.01em;
}
.heading-sub {                 /* "· MONETA" accanto al titolo */
  font-size: var(--fs-2);
  font-weight: 500;
  color: var(--text-2);
  letter-spacing: 0;
}
.top-meta {
  color: var(--text-2);
  font-size: var(--fs-1);
  font-family: var(--mono);
  overflow-wrap: anywhere;
  min-width: 0;
}

.view {
  padding: var(--s6);
  max-width: var(--view-max);
  width: 100%;
}

/* Titolo di sezione: e' l'unica gerarchia tipografica sotto l'H1.
   Con la riga che prosegue fino a bordo pagina si legge come uno stacco
   di pannello, non come un titolo di articolo. */
.section-title {
  display: flex;
  align-items: center;
  gap: var(--s3);
  margin: var(--s7) 0 var(--s3);
  font-size: var(--fs-0);
  font-weight: 600;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--text-3);
}
.section-title::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}
.view > .section-title:first-child { margin-top: 0; }


/* ============================================================================
   04 · NAVIGAZIONE
   Desktop: rail verticale appiccicata (prima scorreva via nelle pagine lunghe).
   Telefono: barra IN BASSO, dove arriva il pollice — vedi blocco responsive.
   ========================================================================== */

.sidebar {
  width: var(--rail-w);
  flex: 0 0 var(--rail-w);
  background: var(--surface);
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  padding: var(--s5) var(--s3);
  padding-left: calc(var(--s3) + var(--safe-l));
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100dvh;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.brand { display: flex; align-items: center; gap: var(--s2); padding: 0 var(--s2); }
.brand-mark {
  color: var(--accent);
  font-size: var(--fs-4);
  line-height: 1;
}
.brand-name {
  font-weight: 700;
  letter-spacing: .18em;
  font-size: var(--fs-2);
}
/* Marchio-madre: si legge, non compete. */
.brand-parent {
  font-size: var(--fs-00);
  letter-spacing: .28em;
  color: var(--text-3);
  margin: var(--s1) 0 var(--s6);
  padding-left: var(--s6);   /* rientra sotto il nome, non sotto il simbolo */
}

.sidebar nav { display: flex; flex-direction: column; gap: 2px; }
.sidebar nav a {
  display: flex;
  align-items: center;
  gap: var(--s2);
  min-height: 38px;
  padding: 0 var(--s3);
  border-radius: var(--r2);
  color: var(--text-2);
  font-size: var(--fs-2);
  font-weight: 500;
  /* transizione solo su colore: nessun layout, nessuna ombra */
  transition: background-color .12s linear, color .12s linear;
}
.sidebar nav a:hover { background: var(--surface-2); color: var(--text); }
.sidebar nav a.on {
  background: var(--surface-2);
  color: var(--text);
  font-weight: 600;
  /* barra d'accento disegnata con box-shadow: non muove il testo di 3px
     quando la voce diventa attiva */
  box-shadow: inset 3px 0 0 var(--accent);
}

.side-foot {
  margin-top: auto;
  padding-top: var(--s5);
  display: flex;
  flex-direction: column;
  gap: var(--s2);
}
.side-foot form { margin: 0; }

.phase-pill {
  display: inline-block;
  text-align: center;
  font-size: var(--fs-0);
  font-weight: 600;
  letter-spacing: var(--ls-caps);
  color: var(--text-3);
  border: 1px solid var(--line);
  border-radius: var(--r2);
  padding: var(--s1) var(--s3);
}

.logout {
  color: var(--text-3);
  font-size: var(--fs-1);
  padding: var(--s2) var(--s2);
  border-radius: var(--r2);
}
.logout:hover { color: var(--text); background: var(--surface-2); }
/* "Esci" e' diventato un form POST (un <a href> e' una GET, e una GET non
   passa dal controllo d'origine: bastava un'immagine remota per scollegare
   l'utente). Queste righe fanno si' che il bottone resti identico al link che
   sostituisce: `display: contents` toglie di mezzo il form dal layout, cosi'
   il bottone resta figlio della barra e della griglia come prima. */
form.esci { display: contents; }
button.logout {
  border: 0; background: none; font: inherit; cursor: pointer;
  line-height: inherit;
}

/* Pastiglia numerica sulle notifiche non lette */
.notif-badge {
  display: inline-block;
  min-width: 18px;
  padding: 0 5px;
  margin-left: auto;
  border-radius: var(--r-pill);
  background: var(--bad);
  color: #fff;
  font-size: var(--fs-0);
  font-weight: 700;
  line-height: 18px;
  text-align: center;
}
:root[data-theme="light"] .notif-badge,
:root:not([data-theme]) .notif-badge { color: #fff; }


/* ============================================================================
   05 · ALLARME — KILL SWITCH
   Deve essere impossibile non vederlo: banda piena a tutta larghezza,
   appiccicata in cima al contenuto, che resta li' mentre si scorre.
   Non e' un "avviso": e' lo stato del sistema.
   ========================================================================== */

.ks-banner {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: var(--s3);
  flex-wrap: wrap;
  padding: var(--s3) var(--s6);
  padding-top: calc(var(--s3) + var(--safe-t));
  background: var(--alarm-bg);
  color: var(--alarm-text);
  border-bottom: 1px solid var(--alarm-line);
  /* filo rosso pieno sul bordo alto + stacco sotto, cosi' quando resta
     appiccicata si legge come una banda SOPRA il contenuto, non dentro */
  box-shadow: inset 0 3px 0 var(--bad), var(--shadow-top);
  font-size: var(--fs-2);
  font-weight: 600;
  letter-spacing: .01em;
}
.ks-banner .dim,
.ks-banner .muted { color: var(--alarm-text); opacity: .8; }
.ks-banner b, .ks-banner strong { color: var(--alarm-text); }

/* Pittogramma pulsante: un quadrato che respira. Animo opacity+transform su
   UN elemento solo (mai nelle liste), quindi non costa nulla in scroll. */
.ks-banner::before {
  content: "";
  width: 10px; height: 10px;
  flex: none;
  border-radius: 2px;
  background: var(--bad);
  animation: beat 1.8s ease-in-out infinite;
}
@keyframes beat {
  0%, 100% { opacity: 1;  transform: scale(1); }
  50%      { opacity: .35; transform: scale(.8); }
}

/* Se un domani il bottone "Riattiva" entra dentro la banda, e' gia' vestito. */
.ks-banner form { margin: 0 0 0 auto; }
.ks-banner .ks-btn { width: auto; }

/* I due bottoni del kill switch nella rail */
.ks-btn {
  width: 100%;
  min-height: var(--tap);
  border-radius: var(--r2);
  padding: 0 var(--s3);
  font: inherit;
  font-size: var(--fs-2);
  font-weight: 600;
  cursor: pointer;
  transition: background-color .12s linear, color .12s linear;
}
.ks-btn.kill {
  background: transparent;
  color: var(--bad);
  border: 1px solid var(--bad-line);
}
.ks-btn.kill:hover { background: var(--bad-soft); }
.ks-btn.resume {
  background: var(--ok);
  color: var(--ok-ink);
  border: 1px solid var(--ok);
}
.ks-btn.resume:hover { filter: brightness(1.08); }


/* ============================================================================
   06 · ASPETTA TE
   Approvazioni ferme e spese da autorizzare. E' l'unica ragione per cui il
   proprietario apre la dashboard di fretta, quindi ha un linguaggio suo:
   fondo ambra, filo verticale, e non assomiglia a nessun altro blocco.
   ========================================================================== */

.awaiting {
  background: var(--await-bg);
  border: 1px solid var(--await-line);
  border-left-width: 3px;
  border-radius: var(--r3);
  padding: var(--s4);
  margin-bottom: var(--s5);
}
.awaiting__head {
  display: flex;
  align-items: center;
  gap: var(--s2);
  margin-bottom: var(--s3);
}
.awaiting__head h2 {
  font-size: var(--fs-0);
  font-weight: 700;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--await-text);
}
.awaiting__count {
  margin-left: auto;
  font-family: var(--mono);
  font-size: var(--fs-4);
  font-weight: 700;
  color: var(--await-text);
  line-height: 1;
}
.awaiting__list { list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: var(--s2); }
.awaiting__item {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r2);
  padding: var(--s3);
  display: grid;
  gap: var(--s2);
}
.awaiting__meta {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--s2);
  font-size: var(--fs-1); color: var(--text-3);
}
.awaiting__what {
  margin: 0;
  font-size: var(--fs-3);
  color: var(--text);
  overflow-wrap: anywhere;
}
.awaiting__actions { display: flex; gap: var(--s2); flex-wrap: wrap; margin: 0; }
.awaiting__actions .btn { flex: 1 1 140px; }

/* Stato vuoto: dire "non devi fare niente" vale quanto dire "devi decidere". */
.awaiting--empty {
  background: transparent;
  border-color: var(--line);
  border-left-color: var(--ok);
  color: var(--text-2);
}
.awaiting--empty .awaiting__head h2 { color: var(--text-3); }
.awaiting--empty .awaiting__count { color: var(--ok); }

/* Il punto che pulsa in testa al blocco (uno solo per pagina) */
.pulse-dot {
  position: relative;
  width: 8px; height: 8px; flex: none;
  border-radius: 50%;
  background: var(--warn);
}
.pulse-dot::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: 50%;
  background: var(--warn);
  animation: ring 1.9s ease-out infinite;
}
@keyframes ring {
  0%   { opacity: .55; transform: scale(1); }
  100% { opacity: 0;   transform: scale(3.2); }
}


/* ============================================================================
   07 · LETTURE — stat / kpi / meter / strip
   ========================================================================== */

/* .kpi-row e' il nome storico, .kpis e' quello usato in qualita.html
   (era usato ma NON esisteva: quella griglia non si formava). Ora valgono
   entrambi. minmax piu' stretto = piu' letture per schermata. */
.kpi-row, .kpis, .stat-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--s3);
  margin-bottom: var(--s4);
}

.kpi, .stat {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r3);
  padding: var(--s4);
  /* filo di stato sul bordo sinistro: neutro finche' non c'e' uno stato */
  box-shadow: inset 3px 0 0 var(--line-2);
}
.kpi .label, .stat__label {
  display: block;
  color: var(--text-2);
  font-size: var(--fs-0);
  font-weight: 600;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
}
.kpi .num, .stat__value {
  display: block;
  font-family: var(--mono);
  font-size: var(--fs-num);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -.02em;
  margin-top: var(--s2);
  color: var(--text);
  overflow-wrap: anywhere;
}
.num--sm, .stat__value--sm { font-size: var(--fs-num-sm); }
/* Dentro una tessera .kpi il numero secondario smetteva di essere secondario:
   `.kpi .num` (specificita' 0-2-0) batte `.num--sm` (0-1-0), quindi i sette
   numeri del mese uscivano tutti a 34px e la gerarchia spariva -- misurati
   identici uno per uno. Stessa malattia di .btn--sm: una regola che vince
   senza saperlo. Qui si pareggia la specificita', cosi' i due numeri che
   rispondono a "sto guadagnando?" restano gli unici grandi. */
.kpi .num--sm, .kpi .stat__value--sm { font-size: var(--fs-num-sm); }
/* "/16", "%", "€": unita' agganciata al numero, non un numero anch'essa.
   .num-frazione e' il nome gia' usato in dashboard.html. */
.num-frazione, .num__sub, .stat__unit {
  font-family: var(--mono);
  font-size: var(--fs-4);
  font-weight: 600;
  color: var(--text-3);
  letter-spacing: 0;
}
.kpi .sub, .stat__foot {
  display: block;
  color: var(--text-3);
  font-size: var(--fs-1);
  margin-top: var(--s2);
}

/* Un fatto testuale dentro una .kpi: quando il contenuto e' una frase
   ("solo abbonamento", "non disponibile") non un numero, non deve prendere
   la taglia/font mono riservata alle cifre (.num). --fs-4 e' la stessa
   taglia dei titoli di sezione: presente, mai confondibile con un numero. */
.kpi-fact { display:block; margin-top:var(--s2); font-size:var(--fs-4);
  font-weight:600; color:var(--text); line-height:1.3; }

/* Stati. Colore SUL FILO + colore sul numero: chi non distingue i colori
   legge comunque l'etichetta e il valore. Il colore non e' mai l'unico segnale. */
.kpi.good, .kpi.ok, .stat--ok   { box-shadow: inset 3px 0 0 var(--ok); }
.kpi.warn, .stat--warn          { box-shadow: inset 3px 0 0 var(--warn); }
.kpi.bad,  .stat--bad           { box-shadow: inset 3px 0 0 var(--bad); }
.kpi.good .num, .kpi.ok .num, .stat--ok   .stat__value { color: var(--ok); }
.kpi.warn .num,                 .stat--warn .stat__value { color: var(--warn); }
.kpi.bad  .num,                 .stat--bad  .stat__value { color: var(--bad); }

/* Barra di riempimento. La percentuale arriva dal template come DATO:
   style="--v: 38%". E' l'unico style="" che resta legittimo — non e' una
   scelta grafica, e' una misura. */
.meter {
  height: 6px;
  background: var(--surface-3);
  border-radius: var(--r-pill);
  overflow: hidden;
  margin-top: var(--s3);
}
.meter > span {
  display: block;
  height: 100%;
  width: var(--v, 0%);
  background: var(--ok);
  border-radius: inherit;
}
.meter.warn > span, .meter--warn > span { background: var(--warn); }
.meter.bad  > span, .meter--bad  > span { background: var(--bad); }

/* STRIP — fila compatta di letture, per la topbar o sopra una tabella.
   Serve a mettere 5-6 numeri in 40px di altezza. */
.strip {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r3);
  overflow: hidden;
  margin-bottom: var(--s4);
}
.strip__cell {
  flex: 1 1 120px;
  min-width: 0;
  padding: var(--s2) var(--s3);
  border-right: 1px solid var(--line);
}
.strip__cell:last-child { border-right: 0; }
.strip__k {
  display: block;
  font-size: var(--fs-0);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--text-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.strip__v {
  display: block;
  font-family: var(--mono);
  font-size: var(--fs-3);
  font-weight: 600;
  color: var(--text);
}
.strip__v.ok { color: var(--ok); }
.strip__v.warn { color: var(--warn); }
.strip__v.bad { color: var(--bad); }


/* ============================================================================
   08 · SUPERFICI — panel / card / rack
   ========================================================================== */

/* .panel era usato in richieste.html e qualita.html ma non esisteva nel CSS:
   quelle due pagine mostravano blocchi senza fondo ne' bordo. Ora esiste. */
.panel, .card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r3);
  padding: var(--s4);
  min-width: 0;
}
.panel + .panel { margin-top: var(--s3); }

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--s3);
}

.card h3 {
  display: flex;
  align-items: center;
  gap: var(--s2);
  flex-wrap: wrap;
  font-size: var(--fs-3);
  margin-bottom: var(--s1);
}
.card .role { color: var(--text-2); font-size: var(--fs-2); }
.card .meta {
  color: var(--text-3);
  font-size: var(--fs-1);
  margin-top: var(--s2);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s1) var(--s3);
  align-items: center;
}
.card .meta b { color: var(--text-2); font-weight: 600; }

/* Agente che sta lavorando adesso */
.card.live { border-color: var(--ok-line); box-shadow: inset 3px 0 0 var(--ok); }
.task-now {
  font-size: var(--fs-1);
  color: var(--ok);
  margin: var(--s1) 0 var(--s1);
  overflow-wrap: anywhere;
}
.task-now::before { content: "\25B8\00a0"; }   /* triangolino, niente emoji */

/* RACK — la stessa informazione delle card ma in righe da 34px.
   Con 16 agenti la griglia di card diventa una parete; il rack sta in
   una schermata sola ed e' leggibile in diagonale. */
.rack {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r3);
  overflow: hidden;
}
.rack__row {
  display: grid;
  grid-template-columns: 12px minmax(90px, 140px) 1fr auto;
  align-items: center;
  gap: var(--s3);
  min-height: var(--row-h);
  padding: var(--s2) var(--s3);
  border-bottom: 1px solid var(--line);
  font-size: var(--fs-2);
}
.rack__row:last-child { border-bottom: 0; }
.rack__row:hover { background: var(--surface-2); }
.rack__name { font-weight: 600; letter-spacing: .04em; }
.rack__role { color: var(--text-2); overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; min-width: 0; }
.rack__meta { color: var(--text-3); font-family: var(--mono); font-size: var(--fs-1);
  display: flex; gap: var(--s3); align-items: center; }


/* ============================================================================
   09 · SEGNALI — badge / chip / dot / livelli
   ========================================================================== */

.badge, .chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: var(--fs-0);
  font-weight: 600;
  letter-spacing: .03em;
  padding: 2px var(--s2);
  border-radius: var(--r1);
  border: 1px solid var(--line);
  color: var(--text-2);
  background: var(--surface-2);
  white-space: nowrap;
}
.badge--xs { font-size: var(--fs-00); padding: 1px 5px; }

.badge.active, .badge--ok   { color: var(--ok);   border-color: var(--ok-line);   background: var(--ok-soft); }
.badge.crit, .badge.warn,
.badge--warn                { color: var(--warn); border-color: var(--warn-line); background: var(--warn-soft); }
.badge--bad                 { color: var(--bad);  border-color: var(--bad-line);  background: var(--bad-soft); }
.badge.future, .badge--info { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }
.badge.off                  { color: var(--text-3); background: transparent; }

/* Spia agente. Il vecchio effetto animava box-shadow su ogni card: e' la cosa
   che fa scattare lo scroll su telefono medio con 16 agenti. Qui l'anello e'
   un pseudo-elemento animato in transform/opacity — la GPU lo regge. */
.dot {
  display: inline-block;
  position: relative;
  width: 8px; height: 8px;
  flex: none;
  border-radius: 50%;
  background: var(--line-2);
  vertical-align: middle;
}
.dot.idle { background: var(--ok-line); }
.dot.on   { background: var(--ok); }
.dot.on::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: 50%;
  background: var(--ok);
  animation: ring 1.8s ease-out infinite;
}
.dot.warn { background: var(--warn); }
.dot.bad  { background: var(--bad); }

/* Pittogrammi di stato al posto delle emoji (che cambiano forma su ogni
   sistema e non si possono colorare). */
.ico {
  display: inline-block;
  width: 10px; height: 10px;
  flex: none;
  border-radius: 2px;
  background: var(--text-3);
  vertical-align: -1px;
}
.ico--ok       { background: var(--ok); border-radius: 50%; }
.ico--warning  { background: var(--warn); }
.ico--error    { background: var(--bad); }
.ico--approval { background: var(--warn); border-radius: 50%;
                 box-shadow: inset 0 0 0 2px var(--await-bg); }

/* Livelli di log: testo maiuscolo + filo colorato. Anche in bianco e nero
   la parola dice tutto. */
.lvl {
  display: inline-block;
  font-family: var(--mono);
  font-size: var(--fs-0);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 1px var(--s2);
  border-radius: var(--r1);
  border: 1px solid var(--line);
  color: var(--text-3);
  background: var(--surface-2);
}
.lvl.info                { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }
.lvl.warning             { color: var(--warn); border-color: var(--warn-line); background: var(--warn-soft); }
.lvl.error, .lvl.critical{ color: var(--bad);  border-color: var(--bad-line);  background: var(--bad-soft); }
.lvl.debug               { color: var(--text-3); }


/* ============================================================================
   10 · TABELLE
   Densita' vera: righe da 34px, intestazioni appiccicate, cifre incolonnate.
   Su schermo stretto NON si scorre in orizzontale: le righe si ripiegano.
   ========================================================================== */

.table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--line);
  border-radius: var(--r3);
  background: var(--surface);
}
.table-wrap .table { border: 0; }

.table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-2);
}
.table th {
  position: sticky;   /* l'intestazione resta mentre si scorre un log lungo */
  top: 0;
  z-index: 1;
  text-align: left;
  padding: var(--s2) var(--s3);
  background: var(--surface-2);
  border-bottom: 1px solid var(--line);
  color: var(--text-2);
  font-size: var(--fs-0);
  font-weight: 600;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  white-space: nowrap;
}
.table td {
  padding: var(--s2) var(--s3);
  border-bottom: 1px solid var(--line);
  vertical-align: top;
  min-height: var(--row-h);
}
.table tbody tr:last-child td { border-bottom: 0; }
/* Righe alternate: l'occhio segue la riga da sinistra a destra senza perdersi.
   Costo zero in scroll (nessun blur, nessuna ombra). */
.table tbody tr:nth-child(even) td { background: var(--surface-2); }
.table tbody tr:hover td { background: var(--surface-3); }

.num-col { text-align: right; font-family: var(--mono); white-space: nowrap; }
th.num-col { text-align: right; }
.table--flush { margin: 0; }
.table--flush td { padding: var(--s1) var(--s2); }

/* FLUSSO EVENTI — aggiungere class="table table--stream" al log.
   Il filo colorato a sinistra della riga rende gli errori individuabili
   scorrendo in diagonale, senza leggere. */
.table--stream td { padding-top: 5px; padding-bottom: 5px; }
.table--stream td:first-child { font-family: var(--mono); color: var(--text-3);
  white-space: nowrap; }
.table--stream tr:has(.lvl.error) td:first-child,
.table--stream tr:has(.lvl.critical) td:first-child { box-shadow: inset 3px 0 0 var(--bad); }
.table--stream tr:has(.lvl.warning) td:first-child  { box-shadow: inset 3px 0 0 var(--warn); }
.table--stream tr:has(.lvl.info) td:first-child     { box-shadow: inset 3px 0 0 var(--line-2); }
.table--stream td:last-child { color: var(--text-2); overflow-wrap: anywhere; }


/* ============================================================================
   11 · FORM E BOTTONI
   ========================================================================== */

input, select, textarea {
  width: 100%;
  font: inherit;
  font-size: var(--fs-3);
  color: var(--text);
  background: var(--surface-2);
  border: 1px solid var(--line-2);
  border-radius: var(--r2);
  padding: var(--s2) var(--s3);
  min-height: var(--tap);
}
textarea {
  line-height: var(--lh);
  resize: vertical;
  min-height: 96px;
  /* Miglioria progressiva: dove supportato il campo cresce col testo, cosi'
     una bozza lunga si legge tutta senza scroll interno. Il tetto serve a
     non far sparire i bottoni sotto. Dove non e' supportato, valgono rows="". */
  field-sizing: content;
  max-height: 60vh;
}
select { appearance: none; padding-right: var(--s6);
  background-image: linear-gradient(45deg, transparent 50%, var(--text-3) 50%),
                    linear-gradient(135deg, var(--text-3) 50%, transparent 50%);
  background-position: right 16px center, right 11px center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat; }
input::placeholder, textarea::placeholder { color: var(--text-3); }
input:focus, select:focus, textarea:focus { border-color: var(--accent); }

.field { margin-bottom: var(--s3); }
.field label {
  display: block;
  font-size: var(--fs-1);
  font-weight: 600;
  color: var(--text-2);
  margin-bottom: var(--s1);
}
/* Sostituisce lo style="display:grid;..." del form contabilita' */
.form-grid {
  display: grid;
  gap: var(--s3);
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  align-items: end;
}
.form-grid > label {
  display: block;
  font-size: var(--fs-1);
  font-weight: 600;
  color: var(--text-2);
  min-width: 0;
}
.form-grid > label > br { display: none; }
.form-grid > label > input,
.form-grid > label > select { margin-top: var(--s1); }

.hint { color: var(--text-3); font-size: var(--fs-1); margin-top: var(--s2); }

/* --- bottoni ---------------------------------------------------------------
   .btn era largo 100% per forza (nasceva per il login) e nelle altre pagine
   veniva corretto a mano con style="". Ora e' in linea, e la larghezza piena
   e' un'opzione dichiarata (.btn--block, e automatica dentro .auth-card).   */
.btn, .ap-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  min-height: var(--tap);
  padding: 0 var(--s4);
  border: 1px solid var(--line-2);
  border-radius: var(--r2);
  background: var(--surface-2);
  color: var(--text);
  font: inherit;
  font-size: var(--fs-2);
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color .12s linear, border-color .12s linear, color .12s linear;
}
.btn:hover, .ap-btn:hover { background: var(--surface-3); border-color: var(--text-3); }
.btn:active, .ap-btn:active { transform: translateY(1px); }
.btn[disabled], .ap-btn[disabled] { opacity: .5; cursor: not-allowed; }

.btn--block { width: 100%; }
.btn--accent { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn--accent:hover { background: var(--accent-2); border-color: var(--accent-2); color: var(--accent-ink); }
.btn--ok, .ap-btn.ok:hover  { border-color: var(--ok-line);  color: var(--ok);  background: var(--ok-soft); }
.btn--no, .btn--danger, .ap-btn.no:hover { border-color: var(--bad-line); color: var(--bad); background: var(--bad-soft); }
.btn--ghost { background: transparent; }
.btn--icon { min-width: var(--tap); padding: 0; font-family: var(--mono); }
.btn--sm { min-height: 34px; padding: 0 var(--s3); font-size: var(--fs-1); }

/* Il login vuole ancora il bottone a tutta larghezza: qui e' una regola,
   non un attributo sparso nel template. */
.auth-card .btn { width: 100%; min-height: 46px; font-size: var(--fs-3);
  background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.auth-card .btn:hover { background: var(--accent-2); border-color: var(--accent-2); }

.install-btn {
  width: 100%;
  min-height: var(--tap);
  border: 1px solid var(--accent);
  border-radius: var(--r2);
  background: transparent;
  color: var(--accent);
  font: inherit;
  font-size: var(--fs-2);
  font-weight: 600;
  cursor: pointer;
}
.install-btn:hover { background: var(--accent-soft); }

/* Interruttore tema (markup da aggiungere in base.html, vedi istruzioni) */
.theme-toggle {
  width: 100%;
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  border: 1px solid var(--line);
  border-radius: var(--r2);
  background: transparent;
  color: var(--text-3);
  font: inherit;
  font-size: var(--fs-1);
  cursor: pointer;
}
.theme-toggle:hover { color: var(--text); background: var(--surface-2); }

/* Barra dei bottoni di decisione nelle tabelle */
.decidi form { display: flex; gap: var(--s2); flex-wrap: wrap; margin: 0; }


/* ============================================================================
   12 · CONVERSAZIONE
   Deve reggere messaggi lunghi e testo preformattato. Nessuna "bolla" da
   chat social: blocchi allineati a sinistra, distinti dal filo colorato e
   dall'intestazione. Cosi' i messaggi lunghi restano leggibili a tutta riga.
   ========================================================================== */

/* .filo = il contenitore del dialogo, .thread = alias generico */
.filo, .thread { display: flex; flex-direction: column; gap: var(--s2); }

.msg {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r3);
  padding: var(--s3) var(--s4);
  box-shadow: inset 3px 0 0 var(--line-2);
  min-width: 0;
}

/* Chi parla. Nessuna "bolla" spostata a destra: su schermo stretto dimezza
   la larghezza utile proprio ai messaggi lunghi. La provenienza si legge dal
   filo colorato e dal nome, e il testo tiene tutta la riga. */
.msg--tu, .msg--me       { box-shadow: inset 3px 0 0 var(--ok); }
.msg--loro, .msg--claude { box-shadow: inset 3px 0 0 var(--line-2); }
.msg--agent              { box-shadow: inset 3px 0 0 var(--accent); }

/* Stato del messaggio. Vengono DOPO l'autore apposta: quando ci sono
   entrambe (class="msg msg--tu msg--in_coda") deve vincere lo stato,
   perche' "sta ancora aspettando" e' l'informazione piu' urgente. */
.msg--in_coda {
  box-shadow: inset 3px 0 0 var(--text-3);
  background: var(--surface-2);
}
.msg--lavorazione { box-shadow: inset 3px 0 0 var(--accent); }
.msg--errore      { box-shadow: inset 3px 0 0 var(--bad); border-color: var(--bad-line); }
.msg--fatto       { /* niente: e' lo stato normale */ }

/* Intestazione del messaggio: chi, quando, con che modello, in che stato. */
.msg-cap, .msg__head {
  display: flex;
  align-items: center;
  gap: var(--s2);
  flex-wrap: wrap;
  font-size: var(--fs-0);
  font-family: var(--mono);
  color: var(--text-3);
}
.msg-cap b, .msg__who {
  color: var(--text-2);
  font-weight: 700;
  letter-spacing: .05em;
}
.msg--tu .msg-cap b, .msg--me .msg__who    { color: var(--ok); }
.msg--agent .msg__who, .dialogo .msg-cap b { color: var(--accent); }

/* Corpo. pre-wrap rispetta a capo e indentazione (un modello risponde con
   elenchi e blocchi di codice), anywhere impedisce a un URL lungo di
   allargare la pagina su telefono. */
.msg-testo, .msg__body {
  margin-top: var(--s2);
  font-size: var(--fs-2);
  line-height: 1.55;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  color: var(--text);
}
.msg--in_coda .msg-testo { color: var(--text-2); }

/* Testo preformattato dentro un messaggio: scorre da solo, non trascina
   il layout della pagina. */
.msg-testo pre, .msg__body pre, .msg pre {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r2);
  padding: var(--s3);
  margin: var(--s2) 0;
  overflow-x: auto;
  font-size: var(--fs-1);
  line-height: 1.45;
  white-space: pre;
}

/* Registro degli ingaggi fra agenti: stessa grammatica, sola lettura. */
.dialogo { margin-bottom: var(--s2); box-shadow: inset 3px 0 0 var(--accent); }
.dialogo-chiesto, .msg__ask {
  font-size: var(--fs-1);
  color: var(--text-2);
  font-style: italic;
  margin-top: var(--s2);
  overflow-wrap: anywhere;
}

/* --- CAMPO DI SCRITTURA ---------------------------------------------------
   Resta agganciato al bordo inferiore mentre si scorre il dialogo, e sul
   telefono si ferma SOPRA la barra di navigazione (vedi blocco responsive).
   Tre pezzi: a chi scrivo, cosa scrivo, invia.                             */
.scrivi, .composer {
  position: sticky;
  bottom: 0;
  z-index: 20;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--s2);
  align-items: end;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r3);
  padding: var(--s3);
  box-shadow: var(--shadow-bar);
  margin: var(--s4) 0 var(--s2);
}
.scrivi-dest { width: auto; min-width: 130px; max-width: 190px; }
.scrivi-testo, .composer__input {
  margin: 0;
  min-height: 52px;
  max-height: 40vh;   /* piu' basso del solito: qui il tetto serve a non
                         seppellire il bottone Invia sotto un messaggio lungo */
  font-size: var(--fs-3);
}
.scrivi-nota { margin-top: var(--s2); font-size: var(--fs-1); color: var(--text-3); }
.scrivi-nota kbd { font-size: var(--fs-0); }

@media (max-width: 620px) {
  /* Il destinatario prende la sua riga: e' una scelta, non un dettaglio,
     e va letta prima di scrivere. */
  .scrivi, .composer { grid-template-columns: minmax(0, 1fr) auto; }
  .scrivi-dest { grid-column: 1 / -1; max-width: none; width: 100%; }
}


/* ============================================================================
   13 · AVVISI
   ========================================================================== */

.notice {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r3);
  box-shadow: inset 3px 0 0 var(--warn);
  padding: var(--s3) var(--s4);
  margin-bottom: var(--s4);
  color: var(--text-2);
  font-size: var(--fs-2);
  line-height: 1.55;
}
.notice b, .notice strong { color: var(--text); font-weight: 600; }
.notice a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.notice.info { box-shadow: inset 3px 0 0 var(--accent); }
.notice.bad  { box-shadow: inset 3px 0 0 var(--bad); }
.notice.ok   { box-shadow: inset 3px 0 0 var(--ok); }

/* Notifiche: stessa grammatica dei messaggi, filo colorato per livello. */
.note { box-shadow: inset 3px 0 0 var(--line-2); }
.note--ok       { box-shadow: inset 3px 0 0 var(--ok); }
.note--warning  { box-shadow: inset 3px 0 0 var(--warn); }
.note--error    { box-shadow: inset 3px 0 0 var(--bad); }
.note--approval { box-shadow: inset 3px 0 0 var(--warn); background: var(--await-bg);
                  border-color: var(--await-line); }
.note__title {
  display: flex;
  align-items: center;
  gap: var(--s2);
  font-size: var(--fs-3);
  margin: var(--s1) 0 var(--s1);
}


/* ============================================================================
   14 · PAGINE SPECIFICHE
   ========================================================================== */

/* --- Controllo qualita' (LYNCEUS) --- */
.qc-card { margin-bottom: var(--s3); }
.qc-head { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap;
  font-size: var(--fs-3); }
.qc-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; background: var(--line-2); }
.qc-dot.ok { background: var(--ok); }     /* prima --ok non esisteva: invisibile */
.qc-dot.ko { background: var(--bad); }
.qc-problemi { margin: var(--s2) 0 0; padding-left: var(--s5); color: var(--warn);
  font-size: var(--fs-2); }
.qc-problemi li { margin: 2px 0; }
.qc-none { margin: var(--s2) 0 0; font-size: var(--fs-2); }
.qc-sub {
  margin-top: var(--s3);
  font-size: var(--fs-0);
  letter-spacing: var(--ls-caps);
  color: var(--text-3);
  text-transform: uppercase;
  font-weight: 600;
}
.qc-dettagli { margin: var(--s1) 0 0; padding-left: var(--s5); color: var(--text-2);
  font-size: var(--fs-1); overflow-wrap: anywhere; }
.qc-shot {
  margin-top: var(--s3);
  max-width: 240px; width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--r2);
}
.qc-link { display: inline-block; margin-top: var(--s3); font-size: var(--fs-2);
  color: var(--accent); }
.qc-link:hover { color: var(--accent-2); text-decoration: underline; }

/* --- Richieste dal sito --- */
.lead-card { margin-bottom: var(--s3); }
/* Bozza pronta = aspetta una decisione tua: stesso trucco di .card.live ma
   col colore d'accento invece del verde, perche' qui non e' "in corso", e'
   "tocca a te". */
.lead-card--decidi { border-color:var(--accent); box-shadow: inset 3px 0 0 var(--accent); }
.lead-head { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap;
  font-size: var(--fs-3); }
.lead-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--line-2); }
.lead-dot.nuovo         { background: var(--warn); }
.lead-dot.bozza_pronta  { background: var(--accent); }
.lead-dot.risposto      { background: var(--ok); }
.lead-dot.scartato      { background: var(--text-3); }
.lead-att {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r1);
  padding: 1px var(--s2);
  font-size: var(--fs-0);
  color: var(--text-2);
}
.lead-stato {
  margin-left: auto;
  font-size: var(--fs-0);
  letter-spacing: var(--ls-caps);
  color: var(--text-3);
  text-transform: uppercase;
  font-weight: 600;
}
.lead-risposte { margin: var(--s3) 0 0; padding-left: var(--s5); font-size: var(--fs-2); }
.lead-risposte li { margin: 2px 0; }
.lead-sub {
  margin-top: var(--s3);
  font-size: var(--fs-0);
  letter-spacing: var(--ls-caps);
  color: var(--text-3);
  text-transform: uppercase;
  font-weight: 600;
}
.lead-edit { margin-top: var(--s2); font-size: var(--fs-2); line-height: 1.55;
  min-height: 200px; }
.lead-bozza {
  margin-top: var(--s2);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  color: var(--text-2);
  font-size: var(--fs-2);
  line-height: 1.55;
  font-family: var(--sans);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r2);
  padding: var(--s3);
}
.lead-azioni { display: flex; gap: var(--s2); margin-top: var(--s3); flex-wrap: wrap; }
.lead-note { margin-top: var(--s3); font-size: var(--fs-2); }

/* --- Accesso / 2FA --- */
.auth-wrap {
  min-height: 100vh; min-height: 100dvh;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg);
  padding: var(--s5);
  padding-top: calc(var(--s5) + var(--safe-t));
  padding-bottom: calc(var(--s5) + var(--safe-b));
}
.auth-card {
  width: 100%; max-width: 340px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r4);
  padding: var(--s7) var(--s6);
}
.auth-card .brand { justify-content: center; margin-bottom: var(--s6); }
.auth-card h2 { font-size: var(--fs-4); text-align: center; margin-bottom: var(--s1); }
.auth-card p.hint { text-align: center; margin: 0 0 var(--s5); font-size: var(--fs-2); }
.err {
  color: var(--bad);
  background: var(--bad-soft);
  border: 1px solid var(--bad-line);
  border-radius: var(--r2);
  padding: var(--s2) var(--s3);
  font-size: var(--fs-2);
  text-align: center;
  margin: 0 0 var(--s3);
}
.code-input input {
  letter-spacing: .5em;
  text-align: center;
  font-size: 22px;
  font-family: var(--mono);
  padding-left: .5em;   /* compensa lo spazio dopo l'ultima cifra */
}

/* --- File --- */
.card > .table, .card > .table-wrap { margin-top: var(--s2); }


/* ============================================================================
   15 · UTILITY
   ========================================================================== */

.mono { font-family: var(--mono); }
.dim  { color: var(--text-3); }
.muted{ color: var(--text-2); }
.good, .ok-txt { color: var(--ok); }
.bad, .err-txt { color: var(--bad); }
.warn-txt { color: var(--warn); }
.nowrap { white-space: nowrap; }
.wrap-any { overflow-wrap: anywhere; }
.right { text-align: right; }
.mt-2 { margin-top: var(--s2); }
.mt-3 { margin-top: var(--s3); }
.mb-0 { margin-bottom: 0; }
.stack { display: flex; flex-direction: column; gap: var(--s2); }
.row { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }
.push { margin-left: auto; }
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}


/* ============================================================================
   16 · RESPONSIVE
   Su telefono la rail sparisce e la navigazione va IN BASSO: e' dove arriva
   il pollice, e in PWA a schermo intero e' la posizione che non litiga con
   la barra di stato del sistema.
   Le 9 voci non stanno in 390px: la barra scorre in orizzontale (scroll-snap),
   con l'ultima voce volutamente tagliata a meta' — e' il segnale che ce n'e'
   ancora. Alternativa scartata: raggruppare sotto "Altro", che aggiunge un
   tocco a meta' delle destinazioni e nasconde proprio Notifiche e Richieste.
   ========================================================================== */


/* --- Barra in alto e velo: esistono SOLO su schermo stretto ----------------
   Su desktop la colonna laterale e' sempre visibile e non serve ne' la barra
   ne' il pannello a scomparsa. Qui si spengono; il blocco @media 860px li
   riaccende. ------------------------------------------------------------- */
.appbar { display: none; }
.velo   { display: none; }

@media (max-width: 860px) {

  /* ---- BARRA IN ALTO E PANNELLO A SCOMPARSA -------------------------------
     Richiesta esplicita del proprietario: in alto restano DUE cose sole. Lo
     stemma a sinistra, che apre l'elenco delle pagine oscurando il contenuto;
     il kill switch a destra, sempre nello stesso punto.

     Sostituisce la barra di navigazione in basso proposta in prima battuta.
     Quella metteva le nove voci sotto il pollice, ma ne teneva visibili tre e
     obbligava a scorrere per trovare le altre. Con il pannello si vedono tutte
     insieme, e soprattutto si libera la fascia alta, che era il problema
     segnalato.

     Il kill switch NON entra nel pannello: e' il comando che si cerca quando
     qualcosa sta andando storto, e in quel momento non si deve aprire niente.
     Un interruttore d'emergenza dietro un menu non e' un interruttore
     d'emergenza.
     ---------------------------------------------------------------------- */
  .appbar {
    display: flex;
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 60;
    align-items: center;
    justify-content: space-between;
    gap: var(--s3);
    height: calc(56px + var(--safe-t));
    padding: var(--safe-t) calc(var(--s3) + var(--safe-r)) 0 calc(var(--s3) + var(--safe-l));
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-top);
  }

  .appbar-stemma {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--tap); height: var(--tap);
    padding: 0;
    border: 1px solid var(--line-2);
    border-radius: var(--r3);
    background: var(--surface-2);
    cursor: pointer;
  }
  .appbar-stemma:active { background: var(--surface-3); }
  .appbar-stemma img { display: block; width: 30px; height: 30px; border-radius: var(--r1); }

  /* Pallino sullo stemma quando ci sono notifiche non lette: il numero preciso
     sta dentro il pannello, qui basta sapere CHE c'e' qualcosa. */
  .notif-punto {
    position: absolute; top: 2px; right: 2px;
    width: 9px; height: 9px;
    border-radius: 50%;
    background: var(--warn);
    border: 2px solid var(--surface);
  }

  .appbar-ks { margin: 0; }
  .ks-mini {
    min-height: var(--tap);
    padding: 0 var(--s4);
    border-radius: var(--r3);
    font-size: var(--fs-2);
    font-weight: 700;
    letter-spacing: .02em;
    cursor: pointer;
    gap: 6px;
  }
  .ks-mini.kill { background: transparent; color: var(--bad); border: 1px solid var(--bad-line); }
  .ks-mini.kill:hover, .ks-mini.kill:focus-visible, .ks-mini.kill:active { background: var(--bad-soft); }
  .ks-mini.resume { background: var(--ok); color: var(--ok-ink); border: 1px solid var(--ok); }

  /* ---- barra di navigazione in basso ---- */
  .app { display: block; }

  .sidebar {
    position: fixed;
    top: auto; right: 0; bottom: 0; left: 0;
    z-index: 70;
    width: 100%;
    height: calc(var(--tabbar-h) + var(--safe-b));
    padding: 0 var(--safe-r) var(--safe-b) var(--safe-l);
    background: var(--surface);
    border: 0;
    border-top: 1px solid var(--line);
    box-shadow: var(--shadow-bar);
    overflow-x: auto;
    overflow-y: hidden;
    transform: none;
    transition: none;
    visibility: visible;
  }
  body.menu-aperto .sidebar { transform: none; visibility: visible; }

  .velo, .velo[hidden], .sidebar .brand, .sidebar .nav-label, .sidebar .side-foot {
    display: none;
  }

  .sidebar nav {
    flex-direction: row;
    gap: 0;
    width: max-content;
    min-width: 100%;
    margin: 0;
  }
  .sidebar nav a {
    flex: 0 0 auto;
    justify-content: center;
    min-height: var(--tabbar-h);
    padding: 0 var(--s4);
    border-radius: 0;
    white-space: nowrap;
  }
  .sidebar nav a.on { box-shadow: inset 0 2px 0 var(--accent); }

  /* Il contenuto lascia spazio alle due barre fisse. */
  .content {
    padding-top: calc(56px + var(--safe-t));
    padding-bottom: calc(var(--tabbar-h) + var(--safe-b));
  }

  .view {
    padding: var(--s4);
    padding-left: calc(var(--s4) + var(--safe-l));
    padding-right: calc(var(--s4) + var(--safe-r));
    padding-bottom: var(--s6);
  }
  .scrivi, .composer { bottom: calc(var(--tabbar-h) + var(--s2) + var(--safe-b)); }

  .topbar {
    padding: var(--s4);
    padding-left: calc(var(--s4) + var(--safe-l));
    padding-right: calc(var(--s4) + var(--safe-r));
    flex-direction: column;
    align-items: flex-start;
    gap: var(--s1);
  }
  .topbar h1 { font-size: var(--fs-4); }

  /* La banda d'allarme resta appiccicata in cima al viewport:
     scorrendo un log di 500 righe non si perde mai di vista. */
  .ks-banner {
    padding: var(--s3) var(--s4);
    padding-top: var(--s3);
    top: calc(56px + var(--safe-t));
  }

  .kpi, .stat { padding: var(--s3); }
  .kpi .num, .stat__value { font-size: 28px; }
  .num--sm, .stat__value--sm { font-size: 20px; }
  .section-title { margin: var(--s5) 0 var(--s2); }
  .grid { grid-template-columns: 1fr; }

  /* Bersagli tattili: nelle liste i bottoni prendono tutta la larghezza
     disponibile, cosi' non si sbaglia mira. */
  .lead-azioni .ap-btn, .decidi .ap-btn { flex: 1 1 140px; }
}

/* --- Ripiegamento delle tabelle -------------------------------------------
   Sotto i 700px nessuna tabella scorre in orizzontale: ogni <tr> diventa una
   griglia di due-tre righe. Le intestazioni spariscono perche' l'ordine dei
   dati e' gia' comprensibile (ora, livello, agente / evento / messaggio).
   Fatto con nth-child: non serve toccare le celle una a una nel template.
   -------------------------------------------------------------------------- */
@media (max-width: 700px) {
  /* overflow-x:visible SOLO per le table-stream, che si ristrutturano a blocchi
     e non hanno piu' bisogno di scorrere. Le altre tabelle (es. Performance
     diagnostica, 6 colonne) DEVONO restare in overflow-x:auto, altrimenti
     sfondano il viewport su telefono invece di scorrere dentro il loro box. */
  .table-wrap:has(.table--stream) { overflow-x: visible; }

  /* Flusso eventi: ora + livello + agente in riga 1, evento in riga 2,
     messaggio a tutta larghezza in riga 3. */
  .table--stream thead { display: none; }
  .table--stream, .table--stream tbody { display: block; }
  .table--stream tr {
    display: grid;
    grid-template-columns: auto auto 1fr;
    align-items: baseline;
    gap: 2px var(--s2);
    padding: var(--s2) var(--s3);
    border-bottom: 1px solid var(--line);
  }
  .table--stream tr:nth-child(even) { background: var(--surface-2); }
  .table--stream td { display: block; border: 0; padding: 0; background: none !important; }
  .table--stream td:nth-child(1) { grid-column: 1; font-size: var(--fs-1); }
  .table--stream td:nth-child(2) { grid-column: 2; }
  .table--stream td:nth-child(3) { grid-column: 3; font-weight: 600;
    font-size: var(--fs-1); letter-spacing: .04em; }
  .table--stream td:nth-child(4) { grid-column: 1 / -1; font-family: var(--mono);
    font-size: var(--fs-1); color: var(--text-3); }
  .table--stream td:nth-child(5) { grid-column: 1 / -1; color: var(--text); }
  .table--stream tr:has(.lvl.error), .table--stream tr:has(.lvl.critical) {
    box-shadow: inset 3px 0 0 var(--bad); }
  .table--stream tr:has(.lvl.warning) { box-shadow: inset 3px 0 0 var(--warn); }

  /* Contabilita': descrizione e importo sulla prima riga (l'importo a destra,
     dove l'occhio lo cerca), data e cliente sotto in piccolo. Zero scroll
     laterale, due righe per movimento.
     Colonne attese: data | descrizione | cliente | categoria | importo | elimina.
     Ogni cella ha riga e colonna esplicite: niente `order`, che con la
     collocazione automatica della griglia da' risultati imprevedibili. */
  .table--ledger thead, .table--ledger tr:first-child:has(th) { display: none; }
  .table--ledger, .table--ledger tbody { display: block; }
  .table--ledger tr {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: baseline;
    gap: 2px var(--s2);
    padding: var(--s3);
    border-bottom: 1px solid var(--line);
  }
  .table--ledger td { display: block; border: 0; padding: 0; background: none !important; }
  .table--ledger td:nth-child(1) { grid-area: 2 / 1 / 3 / 2;      /* data      */
    font-family: var(--mono); font-size: var(--fs-1); color: var(--text-3); }
  .table--ledger td:nth-child(2) { grid-area: 1 / 1 / 2 / 3;      /* descriz.  */
    font-size: var(--fs-3); overflow-wrap: anywhere; }
  .table--ledger td:nth-child(3) { grid-area: 2 / 2 / 3 / 3;      /* cliente   */
    font-size: var(--fs-1); color: var(--text-3);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .table--ledger td:nth-child(4) { display: none; }               /* categoria:
       ridondante su telefono, si legge dalla descrizione e dal filtro */
  .table--ledger td:nth-child(5) { grid-area: 1 / 3 / 2 / 4;      /* importo   */
    justify-self: end; text-align: right; white-space: nowrap;
    font-family: var(--mono); font-weight: 700; font-size: var(--fs-3); }
  .table--ledger td:nth-child(6) { grid-area: 2 / 3 / 3 / 4;      /* elimina   */
    justify-self: end; }
  .table--ledger .btn--icon { min-height: 34px; min-width: 34px; }

  /* Tabelle a due colonne (voce/valore): restano tabelle, bastano da sole. */
  .table--pair td, .table--pair th { padding: var(--s2); }
}

/* Schermi molto stretti */
@media (max-width: 400px) {
  .kpi-row, .kpis, .stat-row { grid-template-columns: 1fr; gap: var(--s2); }
  .kpi .num, .stat__value { font-size: 26px; }
  .brand-parent { display: none; }   /* il marchio-madre cede il posto ai comandi */
}

/* Schermi larghi: piu' letture affiancate, non piu' spazio vuoto. */
@media (min-width: 1100px) {
  /* Tolto lo scroll orizzontale dal contenitore, .table-wrap smette di essere
     un contenitore di scorrimento e le intestazioni sticky si agganciano
     davvero al viewport: in un log da 500 righe si sa sempre che colonna
     si sta leggendo. Sotto i 1100px lo scroll serve, quindi resta. */
  .table-wrap { overflow-x: visible; }
  .table th { top: 0; }
}
@media (min-width: 1400px) {
  .kpi-row, .kpis, .stat-row { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
  .view { padding: var(--s6) var(--s7); }
}

/* Dispositivi a tocco: nessun bersaglio sotto i 44px, ovunque.
   E niente testo da 10px sotto le dita: le micro-etichette salgono a 11px. */
@media (pointer: coarse) {
  :root { --fs-00: 11px; }
  .sidebar nav a { min-height: var(--tap); }
  .btn, .ap-btn, .ks-btn, .install-btn { min-height: var(--tap); }
  .btn--sm { min-height: 40px; }
  a.qc-link, .logout { min-height: var(--tap); display: inline-flex; align-items: center; }
}


/* ============================================================================
   17 · MOVIMENTO
   Chi ha chiesto meno animazioni ottiene zero animazioni. Le transizioni di
   colore restano (non causano nausea e non spostano nulla), i battiti no.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  /* Senza il battito, l'allarme resta comunque un blocco rosso pieno. */
  .ks-banner::before { opacity: 1; }
  .dot.on::after, .pulse-dot::after { display: none; }
}

/* Alto contrasto forzato dal sistema: bordi sempre disegnati. */
@media (forced-colors: active) {
  .kpi, .stat, .card, .panel, .msg, .notice { border: 1px solid; }
  .sidebar nav a.on { outline: 2px solid; outline-offset: -2px; }
}

/* Stampa: la consolle su carta serve solo per la contabilita'. */
@media print {
  .sidebar, .composer, .ks-btn, .install-btn { display: none !important; }
  body { background: #fff; color: #000; }
  .card, .panel, .kpi, .stat { border: 1px solid #ccc; box-shadow: none; }
}


/* --- FIRMA TARVIO -----------------------------------------------------------
   Stessa firma di Olympian: marchio, nome, claim, e soprattutto il COLLEGAMENTO
   al sito. Su schermo largo sta in fondo alla colonna e ci resta mentre si
   scorre; su telefono e' in coda alla pagina, perche' una firma fissa su 390
   pixel ruba spazio a chi lavora.
   -------------------------------------------------------------------------- */
.firma-tarvio {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  width: fit-content;
  margin: var(--s7) auto var(--s3);
  padding: var(--s3) var(--s5);
  min-height: var(--tap);
  text-align: center;
}
/* Solo marchio+nome restano quieti a riposo: il claim (testuale, va letto)
   sta fuori da questo blocco e resta sempre a piena opacita'. */
.firma-mark {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  opacity: .62;
  transition: opacity var(--dur-svelto) var(--ease-esci);
}
.firma-tarvio:hover .firma-mark,
.firma-tarvio:focus-visible .firma-mark { opacity: 1; }
.firma-mark img { width: 30px; height: 30px; }
/* Il nome e' un SVG tracciato (vedi base.html), non piu' testo maiuscolo:
   stesso segno del sito Tarvio e di Olympian. Larghezza legata al rail, cosi'
   non sfonda la colonna quando il menu e' stretto. */
.firma-nome {
  width: min(92px, 78%);
  height: auto;
  fill: none;
  stroke: var(--text-2);
  stroke-width: 9;
  stroke-linecap: square;
  stroke-linejoin: miter;
}
/* La firma e' una frase, non un'etichetta: niente maiuscolo forzato e niente
   spaziatura larga, che la farebbero leggere come un tag tecnico. */
.firma-claim {
  font-size: 9px;
  line-height: 1.55;
  color: var(--text-3);
}

@media (min-width: 861px) {
  /* L'altezza della firma sta scritta UNA volta e la usano tutti e due.
     Prima era un numero copiato a mano in due punti: la firma cresceva, lo
     spazio riservato no, e il difetto tornava. E' gia' successo due volte
     (108 riservati per 111 di firma, poi 128 per 115). */
  :root { --firma-h: 116px; }
  .firma-tarvio {
    position: fixed;
    left: 0; bottom: 0;
    width: var(--rail-w);
    height: var(--firma-h);
    box-sizing: border-box;
    margin: 0;
    padding: var(--s3) var(--s2) var(--s4);
    background: var(--surface);
    border-top: 1px solid var(--line);
  }
  /* LA COLONNA FINISCE DOVE COMINCIA LA FIRMA.
     Prima si riservava spazio con padding-bottom: funziona solo quando il
     menu e' scorso fino in fondo. Con un menu piu' lungo dello schermo --
     e adesso lo e' -- le voci che capitano in fondo alla finestra finivano
     sotto la firma fissa a scorrimento fermo: "Impostazioni", "Archivio" e
     i tre bottoni del tema erano coperti (misurato nel browser, 13/8/2026).
     Accorciando la colonna, l'area che scorre non passa mai sotto la firma
     e il difetto non puo' ripresentarsi. */
  .sidebar {
    height: calc(100dvh - var(--firma-h));
    padding-bottom: var(--s3);
  }
}
@media (max-width: 860px) {
  .firma-tarvio { margin-bottom: calc(var(--s5) + var(--safe-b)); }
}

/* ============================================================================
   STRATO "CONSOLLE" — l'aspetto da sala di controllo
   ============================================================================
   Scurire la pagina non e' uno stile: era la critica del proprietario, ed era
   giusta. Quello che segue e' il linguaggio vero, costruito su quattro segni
   ricorrenti e nient'altro:

     1. CORNICI AD ANGOLO   quattro parentesi luminose invece di un bordo pieno.
                            E' il segno che dice "strumento" piu' di ogni altro,
                            e costa due pseudo-elementi.
     2. GRIGLIA TECNICA     un reticolo appena percettibile sul fondo. Non si
                            guarda: si sente. Da' la sensazione di un piano di
                            lavoro invece che di una pagina.
     3. FILO LUMINOSO       una riga di luce sul bordo superiore degli elementi
                            vivi, e un alone tenue sui numeri grandi.
     4. RESPIRO             un solo elemento animato per volta, e solo dove
                            significa qualcosa (sta lavorando / aspetta te).

   Cosa NON c'e', di proposito: neon su tutto, testo verde da terminale, cornici
   che lampeggiano, angoli tagliati ovunque. Il committente ha chiesto una console MA
   minimal-Tesla: la seconda meta' della frase e' quella che tiene a bada la
   prima. Un pannello che si guarda addosso stanca in due giorni.
   ========================================================================== */

/* --- 1. griglia tecnica sul fondo ------------------------------------------
   Due sfumature ripetute a 32px. L'opacita' e' bassissima di proposito: deve
   sparire appena ci si concentra su un numero. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(77,163,255,.055) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(77,163,255,.055) 1px, transparent 1px);
  background-size: 32px 32px;
  /* Si spegne verso il basso: in cima da' struttura, in fondo darebbe rumore
     sotto le tabelle lunghe. */
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, transparent 60%);
          mask-image: linear-gradient(to bottom, #000 0%, transparent 60%);
}
:root[data-theme="light"] body::before { display: none; }
.app { position: relative; z-index: 1; }

/* --- 2. cornici ad angolo --------------------------------------------------
   Su KPI e riquadri che contano. Sono due pseudo-elementi con solo due lati di
   bordo ciascuno: l'angolo in alto a sinistra e quello in basso a destra. Due
   bastano a leggere "cornice"; quattro sarebbero decorazione. */
.kpi, .awaiting, .stat {
  position: relative;
  background-image: linear-gradient(180deg, rgba(77,163,255,.05), transparent 55%);
}
/* QUATTRO angoli, non due.
   Con due opposti la cornice si legge come incompleta invece che come segno
   voluto — rilievo emerso dalla verifica visiva. Con quattro si chiude, e per
   non appesantire sono piu' corti (10px invece di 12) e piu' sottili (1.2px
   invece di 1.5). Fatti con un solo pseudo-elemento per lato usando le
   sfumature: quattro riquadri di colore agli angoli, ritagliati al centro. */
.kpi::before, .awaiting::before {
  content: "";
  position: absolute;
  inset: -1px;
  pointer-events: none;
  border-radius: inherit;
  opacity: .5;
  background:
    linear-gradient(var(--bordo-hud), var(--bordo-hud)) 0 0 / 10px 1.2px no-repeat,
    linear-gradient(var(--bordo-hud), var(--bordo-hud)) 0 0 / 1.2px 10px no-repeat,
    linear-gradient(var(--bordo-hud), var(--bordo-hud)) 100% 0 / 10px 1.2px no-repeat,
    linear-gradient(var(--bordo-hud), var(--bordo-hud)) 100% 0 / 1.2px 10px no-repeat,
    linear-gradient(var(--bordo-hud), var(--bordo-hud)) 0 100% / 10px 1.2px no-repeat,
    linear-gradient(var(--bordo-hud), var(--bordo-hud)) 0 100% / 1.2px 10px no-repeat,
    linear-gradient(var(--bordo-hud), var(--bordo-hud)) 100% 100% / 10px 1.2px no-repeat,
    linear-gradient(var(--bordo-hud), var(--bordo-hud)) 100% 100% / 1.2px 10px no-repeat;
}
.kpi, .awaiting { --bordo-hud: var(--accent); }
/* Sui riquadri di stato l'angolo prende il colore dello stato: il segno e il
   colore dicono la stessa cosa, quindi resta leggibile anche a chi non
   distingue i colori. */
.kpi.good { --bordo-hud: var(--ok); }
.kpi.warn { --bordo-hud: var(--warn); }
.kpi.bad  { --bordo-hud: var(--bad); }

/* --- 3. filo di luce in cima ai riquadri vivi ------------------------------ */
.kpi { box-shadow: inset 0 1px 0 rgba(77,163,255,.18); }
.kpi.bad { box-shadow: inset 0 1px 0 rgba(255,95,97,.35); }

/* --- 4. i numeri grandi ----------------------------------------------------
   Cifre a larghezza fissa: un numero che cambia non deve far ballare quello
   accanto. Nessun alone: l'alone neon e' gaming, non premium (P6 acceptance). */
.kpi .num, .stat__value {
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
}

/* --- 5. etichette da strumento --------------------------------------------
   Maiuscoletto spaziato e un trattino luminoso davanti: e' il modo piu'
   economico di far sembrare un'etichetta la scritta di un pannello. */
.kpi .label, .section-title {
  position: relative;
  padding-left: 14px;
}
.kpi .label::before, .section-title::before {
  content: "";
  position: absolute;
  left: 0; top: .55em;
  width: 7px; height: 1.5px;
  background: var(--accent);
  opacity: .8;
}

/* --- 6. la barra del titolo ------------------------------------------------ */
.topbar {
  position: relative;
  border-bottom: 1px solid var(--line);
}
.topbar::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg, var(--accent), transparent 45%);
  opacity: .5;
}

/* --- 7. il respiro ---------------------------------------------------------
   Un solo elemento animato, e solo dove vuol dire qualcosa: questo agente sta
   lavorando ADESSO. Se lampeggiasse tutto, il lampeggio non direbbe piu' nulla. */
@keyframes pn-respiro {
  0%, 100% { opacity: 1;   box-shadow: 0 0 0 0 rgba(52,211,153,.5); }
  50%      { opacity: .55; box-shadow: 0 0 0 5px rgba(52,211,153,0); }
}
.dot.live, .pulse-dot, .agent-card.live .dot {
  animation: pn-respiro 2.4s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .dot.live, .pulse-dot, .agent-card.live .dot { animation: none; }
}

/* --- 8. l'indirizzo in alto a destra --------------------------------------- */
.top-meta {
  font-family: var(--mono);
  font-size: var(--fs-1);
  letter-spacing: .02em;
  color: var(--text-3);
}

/* --- 9. profondita' e risposta al passaggio del mouse ----------------------
   Un riquadro che reagisce si legge come acceso, non come stampato. Il
   movimento e' 1 pixel: piu' di cosi', su una pagina fitta di riquadri,
   diventa un tremolio.
   Nessun effetto dove non si passa con il mouse (telefono): li' sarebbe uno
   stato che si accende al tocco e resta acceso, cioe' un difetto. */
@media (hover: hover) {
  .kpi, .card, .awaiting {
    transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
  }
  .kpi:hover, .card:hover {
    transform: translateY(-1px);
    border-color: var(--line-2);
    box-shadow: inset 0 1px 0 rgba(77,163,255,.28), 0 6px 22px rgba(77,163,255,.10);
  }
  .kpi:hover::before, .awaiting:hover::before { opacity: .9; }
}

/* --- 10. la barra in alto: allineamento verticale --------------------------
   Il bottone del kill switch risultava piu' basso dello stemma. Causa: altezza
   decisa dal contenuto invece che dichiarata, quindi i due elementi si
   allineavano su due altezze diverse. Ora hanno la stessa altezza esatta e si
   centrano tutti e due sul contenuto. */
.appbar-stemma, .ks-mini {
  height: var(--tap);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.appbar-ks { display: flex; align-items: center; }

/* Bottone delle notifiche quando sono gia' attive: verde e non piu' invitante,
   perche' non c'e' niente da fare. */
.install-btn.fatto {
  background: var(--ok-soft);
  color: var(--ok);
  border: 1px solid var(--ok-line);
}

/* --- CONSEGNE ---------------------------------------------------------------
   L'anteprima ha un'altezza fissa e ritaglia: senza, una schermata alta e
   stretta accanto a una larga e bassa rendeva la griglia una scalinata. */
.consegna__anteprima {
  display: block;
  width: 100%;
  height: 150px;
  object-fit: cover;
  border-radius: var(--r2);
  border: 1px solid var(--line);
  background: var(--surface-2);
  margin-bottom: var(--s3);
}
/* UN LINK DENTRO UNA CELLA E' ALTO QUANTO IL TESTO: 15 pixel.
   Nella tabella "Pagine controllate" sono dodici, e si premono per aprire il
   sito che ha un problema. Invece di dargli un rettangolo finto piu' grande
   del testo, si estende l'area premibile a tutta l'altezza della riga: il
   bersaglio cresce, la tabella non si muove di un pixel. */
.table--stream td > a:only-child {
  display: flex;
  align-items: center;
  min-height: 26px;
  margin: calc(var(--s2) * -1) 0;
  padding: var(--s2) 0;
}
@media (pointer: coarse) {
  .table--stream td > a:only-child { min-height: 40px; }
}

.consegna h3 { word-break: break-word; }
/* Il bottone piccolo DELLE CONSEGNE. Era scritto senza padre (`.btn--sm`), e
   quindi valeva ovunque: essendo l'ultima delle tre definizioni di .btn--sm
   vinceva sempre, e con i suoi 32px scavalcava anche la protezione touch di
   riga ~1788 (`@media (pointer: coarse) { .btn--sm { min-height: 40px } }`,
   scritta proprio per garantire "nessun bersaglio sotto i 44px, ovunque").
   Il 13/8/2026 il primo lotto di rollout ha riusato .btn--sm sui pulsanti
   Scarta/Approva/Rifiuta: i comandi con cui si DECIDE sono finiti a 32px su
   ogni dispositivo. axe non lo vede -- target-size e' WCAG 2.2, fuori dal set
   2.0/2.1 che il gate interroga -- l'ha trovato la misura di densita'.
   Adesso la regola ha il suo padre e non esce da casa sua. */
.consegna .btn--sm { min-height: 32px; margin-top: var(--s2); }

/* Pallini di stato usati nelle tabelle di controllo. */
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--text-3); margin-right: 6px; }
.dot.ok { background: var(--ok); }
.dot.bad { background: var(--bad); }

/* --- ORGANIGRAMMA -----------------------------------------------------------
   Il livello e' la posizione: ZEUS in cima, i capi-dominio sotto, gli
   specialisti sotto il proprio capo. Le linee sono pseudo-elementi, non
   immagini: si adattano da sole quando la squadra cambia.
   -------------------------------------------------------------------------- */
/* --- Organigramma | Elenco -------------------------------------------------
   Due viste sullo stesso registry. Il selettore e' un segmented control
   sobrio: due bottoni, quello attivo ha superficie e testo pieni. */
.vista-scelta {
  display: inline-flex;
  margin: 0 0 var(--s4);
  border: 1px solid var(--line-2);
  border-radius: var(--r2);
  overflow: hidden;
}
.vista-scelta button {
  padding: var(--s2) var(--s4);
  min-height: var(--tap, 40px);
  border: 0;
  background: transparent;
  color: var(--text-2);
  font: 600 var(--fs-2)/1 var(--sans);
  cursor: pointer;
  transition: background var(--dur-istante) var(--ease-ferma),
              color var(--dur-istante) var(--ease-ferma);
}
.vista-scelta button + button { border-left: 1px solid var(--line); }
.vista-scelta button[aria-selected="true"] {
  background: var(--surface-3);
  color: var(--text);
}
.vista-scelta button:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }

/* --- vista elenco: righe cliccabili, spia live come nei nodi --- */
.elenco-team__riga { cursor: pointer; }
.elenco-team__riga:hover td { background: var(--surface-2); }
.elenco-team__riga:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.elenco-team__riga--spenta td { opacity: .55; }
.elenco-team__riga .nodo__spia { display: inline-block; margin-right: var(--s2); }

/* --- fisarmonica dei reparti (solo telefono) --- */
.dominio__apri {
  display: flex;
  align-items: baseline;
  gap: var(--s2);
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  text-align: left;
  /* Su computer la fisarmonica non serve e il click non fa niente: allora
     l'elemento dev'essere DAVVERO inerte, non un bottone finto alto 13px.
     Con pointer-events:none non riceve il fuoco, non finisce nel giro del
     Tab e non conta come bersaglio da premere -- che e' la verita', non un
     modo per far tacere il controllo. Sotto gli 861px torna un bottone
     vero, con l'altezza del dito. */
  cursor: default;
  pointer-events: none;
}
.dominio__conta { font-weight: 400; color: var(--text-3); }
.dominio__vivi  { color: var(--ok); }
.dominio__spenti{ color: var(--text-3); }
@media (max-width: 860px) {
  .dominio__apri { cursor: pointer; pointer-events: auto;
                   min-height: var(--tap, 44px); align-items: center; }
  .dominio__apri::before {
    content: '';
    width: 7px; height: 7px;
    border-right: 1.5px solid var(--text-3);
    border-bottom: 1.5px solid var(--text-3);
    transform: rotate(45deg);
    transition: transform var(--dur-svelto) var(--ease-esci);
    flex: none;
  }
  .dominio--chiuso .dominio__apri::before { transform: rotate(-45deg); }
  .dominio--chiuso .dominio__corpo { display: none; }
  .dominio__apri:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
}

.piramide { padding-top: var(--s2); }
.piramide__vertice { display: flex; justify-content: center; }
.piramide__giunzione {
  width: 1px; height: var(--s5);
  margin: 0 auto;
  background: linear-gradient(var(--accent), var(--line));
  opacity: .5;
}
.piramide__domini {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: var(--s4);
  padding-top: var(--s4);
  border-top: 1px solid var(--line);
}
.dominio { display: flex; flex-direction: column; align-items: center; gap: var(--s2); }
.dominio__nome {
  margin: 0 0 var(--s1);
  font-size: var(--fs-0);
  font-weight: 700;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--text-3);
}
.dominio__ramo {
  width: 1px; height: var(--s4);
  background: var(--line-2);
}
.dominio__squadra { display: flex; flex-direction: column; gap: var(--s2); width: 100%; }

.nodo {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  width: 100%;
  min-height: var(--tap);
  padding: var(--s3);
  text-align: left;
  cursor: pointer;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r3);
  transition: border-color .16s ease, transform .16s ease;
}
.nodo:hover, .nodo:focus-visible { border-color: var(--accent); transform: translateY(-1px); }
.nodo--l0 { border-color: var(--accent); background: var(--accent-soft); max-width: 260px; }
.nodo--l1 { border-left: 3px solid var(--line-2); }
.nodo--l2 { margin-left: var(--s3); width: calc(100% - var(--s3)); }
/* SPENTO = distinguibile, NON illeggibile. Prima era opacity:.5 sull'intero
   nodo: appena i cinque agenti di trading sono passati a enabled:false, axe
   ha segnalato nome a 3.44:1 e ruolo a 2.09:1 — un quarto dell'organigramma
   sotto soglia. Un nodo spento resta un bottone vivo (si clicca per
   riaccenderlo): il testo deve restare leggibile. Si sbiadiscono superficie
   e bordo, il testo scende di UN gradino di token (mai sotto soglia), e la
   spia si spegne. */
.nodo--spento { background: transparent; border-style: dashed; }
.nodo--spento .nodo__nome { color: var(--text-2); font-weight: 600; }
.nodo--spento .nodo__ruolo { color: var(--text-2); }
.nodo--spento .nodo__quota { color: var(--text-2); border-color: var(--line-2); }
.nodo--spento .nodo__spia { background: var(--line-2); }
.nodo__nome { font-weight: 700; letter-spacing: .06em; color: var(--text); }
.nodo__ruolo { font-size: var(--fs-1); color: var(--text-3); }
.nodo__spia {
  position: absolute; top: var(--s3); right: var(--s3);
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--text-3);
}
/* La spia si accende del colore DELL'AGENTE, non di un verde uguale per tutti:
   guardando l'organigramma si riconosce chi sta lavorando senza leggere il nome.
   Il respiro usa la stessa tinta, altrimenti l'alone sarebbe verde attorno a un
   pallino di un altro colore. */
.nodo--live { border-color: var(--tinta); }
.nodo__spia.live {
  background: var(--tinta);
  animation: pn-respiro-tinta 2.4s ease-in-out infinite;
}
@keyframes pn-respiro-tinta {
  0%, 100% { opacity: 1;   box-shadow: 0 0 0 0 var(--tinta); }
  50%      { opacity: .55; box-shadow: 0 0 0 6px transparent; }
}
@media (prefers-reduced-motion: reduce) { .nodo__spia.live { animation: none; } }
/* IN SERVIZIO (22/9/2026): fra un giro e l'altro l'agente a cadenza non e'
   spento. Stessa tinta dell'agente, a mezza luce e senza respiro: acceso ma
   non "al lavoro adesso", e la differenza si deve vedere a colpo d'occhio. */
.nodo--servizio { border-color: var(--tinta); border-style: solid; }
.nodo__spia.servizio { background: var(--tinta); opacity: .55; }
.nodo__quota {
  font-size: var(--fs-0); color: var(--ok);
  border: 1px solid var(--ok-line); border-radius: var(--r-pill);
  padding: 0 6px; margin-top: 4px;
}

/* --- scheda dell'agente --- */
.scheda-agente {
  position: fixed;
  z-index: 80;
  right: 0; top: 0; bottom: 0;
  width: min(92vw, 420px);
  overflow-y: auto;
  padding: calc(var(--s5) + var(--safe-t)) var(--s5) calc(var(--s5) + var(--safe-b));
  background: var(--surface);
  border-left: 1px solid var(--line);
  box-shadow: -12px 0 40px rgba(0,0,0,.45);
}
.scheda-agente__testa { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); }
.scheda-agente__testa h2 { margin: 0; font-size: var(--fs-5); letter-spacing: .06em; }
.scheda-agente__chiudi {
  min-width: var(--tap); min-height: var(--tap);
  background: transparent; border: 1px solid var(--line); border-radius: var(--r3);
  color: var(--text-2); cursor: pointer;
}
.scheda-agente__ruolo { margin: var(--s1) 0 var(--s4); color: var(--text-2); }
.scheda-agente__righe {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3);
  padding: var(--s3) 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.scheda-agente__righe div { display: flex; flex-direction: column; gap: 2px; font-size: var(--fs-2); }
/* Il motivo della scelta del modello: sta subito sotto la riga "Gira su",
   rientrato, in corpo minore. E' una nota a margine, non un'informazione da
   leggere ogni volta. */
.scheda-agente__perche {
  margin: var(--s3) 0 0; padding-left: var(--s3);
  border-left: 2px solid var(--line);
  font-size: var(--fs-1); line-height: 1.6; color: var(--text-3);
}
.scheda-agente__titolo { margin: var(--s5) 0 var(--s2); font-size: var(--fs-0); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--text-3); }
.scheda-agente__competenze { margin: 0; color: var(--text-2); line-height: 1.65; }
.scheda-agente__ultimo { margin-top: var(--s4); font-family: var(--mono); font-size: var(--fs-1); color: var(--text-3); }

/* Classi che sostituiscono gli ultimi attributi style="" scritti a mano nelle
   pagine. Vivono qui perche' un valore ripetuto in sette celle e' una regola,
   non una decisione presa cella per cella: cambiandolo qui cambia ovunque. */
.num-col { text-align: right; font-variant-numeric: tabular-nums; }
.heading-sub { font-size: var(--fs-3); font-weight: 400; color: var(--text-2); }
.lead-note { margin-top: var(--s3); }
.form-grid {
  display: grid;
  gap: var(--s3);
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  align-items: end;
}
.form-grid input, .form-grid select, .form-grid textarea { width: 100%; }

/* --- CHAT A DUE RIQUADRI ----------------------------------------------------
   A sinistra le decisioni, a destra il lavoro. Ogni riquadro scorre per conto
   suo: se scorressero insieme, leggere una risposta lunga di un agente farebbe
   sparire la conversazione di comando.
   Su telefono i due riquadri si impilano — affiancarli su 390 pixel darebbe due
   colonne da 190, cioe' nessuna delle due leggibile.
   -------------------------------------------------------------------------- */
.due-fili { display: grid; gap: var(--s4); }
@media (min-width: 900px) {
  .due-fili { grid-template-columns: 1fr 1fr; align-items: start; }
}
.filo-col {
  display: flex;
  flex-direction: column;
  min-width: 0;                     /* senza, un messaggio lungo allarga la colonna */
  border: 1px solid var(--line);
  border-radius: var(--r4);
  background: var(--surface);
  overflow: hidden;
}
.filo-col__testa {
  display: flex; align-items: baseline; gap: var(--s2);
  padding: var(--s3) var(--s4);
  border-bottom: 1px solid var(--line);
  background: var(--surface-2);
}
.filo-col__testa h2 {
  margin: 0; font-size: var(--fs-1); font-weight: 700;
  letter-spacing: var(--ls-caps); text-transform: uppercase;
}
.filo-col--agenti .filo-col__testa { box-shadow: inset 0 2px 0 var(--accent); }
.filo-col .filo {
  display: flex; flex-direction: column; gap: var(--s3);
  padding: var(--s4);
  max-height: 62vh;
  overflow-y: auto;
  overscroll-behavior: contain;     /* arrivati in fondo non trascina la pagina */
}
.filo-col .scrivi {
  display: flex; gap: var(--s2); flex-wrap: wrap;
  padding: var(--s3) var(--s4);
  border-top: 1px solid var(--line);
  background: var(--surface-2);
}
.scrivi-testo { flex: 1 1 200px; min-width: 0; resize: vertical; }
.scrivi-dest { flex: 0 0 auto; max-width: 45%; }
.scrivi-nota { margin: var(--s2) 0 0; font-size: var(--fs-1); }
.dialogo-chiesto {
  font-style: italic; font-size: var(--fs-2); color: var(--text-3);
  margin: var(--s1) 0 var(--s2);
}

/* --- MARCHIO SCRITTO --------------------------------------------------------
   Il simbolo sta dentro la parola, al posto della A. Allineato sulla linea di
   base come una lettera vera: senza il ritocco verticale "galleggia" rispetto
   alle altre, ed e' la cosa che fa sembrare un logo montato male.
   -------------------------------------------------------------------------- */
.brand-name {
  display: inline-flex;
  align-items: center;
  gap: 0;
  font-weight: 600;
  letter-spacing: .3em;
  font-size: var(--fs-4);
  color: #fff;
}
.brand-a {
  width: 1.55em; height: 1.55em;
  margin: 0 .04em 0 0;
  transform: translateY(.02em);
  /* Nessun alone neon sul marchio: la "A" e' il simbolo, non un LED. */
  transition: transform 0.2s ease;
}
.brand-a:hover {
  transform: translateY(.02em) scale(1.06);
}
.brand { gap: 0; }

/* --- UN COLORE PER AGENTE ---------------------------------------------------
   Nella chat di gruppo scrivono in sedici: senza un segno di riconoscimento si
   legge il nome ogni volta per capire chi parla. Il colore sta sul filo a
   sinistra e sul nome, non sul testo: colorare il corpo del messaggio
   peggiorerebbe il contrasto proprio dove serve leggere.
   La tinta arriva dal template come variabile: e' un DATO calcolato dal nome
   dell'agente, non una scelta grafica presa qui.
   -------------------------------------------------------------------------- */
.msg--agente { border-left: 3px solid var(--tinta); padding-left: var(--s3); }
.msg--agente .chi { color: var(--tinta); letter-spacing: .06em; }

.chat-message.has-agent-color {
  border-left: 3px solid var(--agent-color);
}
.chat-message.has-agent-color .chat-message__meta strong {
  color: var(--agent-color);
}
/* Il colore per-agente e' hsl(H 70% 68%): tarato per il fondo scuro. Su
   bianco arriva a 3.22:1 (misurato da axe su un nome viola). Nel tema chiaro
   si tiene il TONO dell'agente e si abbassa solo la luce: L=28% regge la
   soglia 4.5:1 anche sul tono peggiore (il giallo, verificato con la formula
   WCAG: 5.06:1). I browser senza sintassi colore relativa tengono la riga
   sopra: leggibile comunque, solo meno contrastato. */
:root[data-theme="light"] .chat-message.has-agent-color .chat-message__meta strong {
  color: hsl(from var(--agent-color) h 60% 28%);
}

/* --- CHAT MASTER IN MINIATURA -----------------------------------------------
   In basso a destra, sopra il contenuto. Su telefono si allarga da bordo a
   bordo: a 390 pixel un riquadro "piccolo" in un angolo sarebbe illeggibile e
   impossibile da centrare col pollice.
   -------------------------------------------------------------------------- */
.master {
  position: fixed;
  right: var(--s4); bottom: calc(var(--s4) + var(--safe-b));
  z-index: 55;
  width: min(360px, calc(100vw - var(--s5)));
  display: flex; flex-direction: column; align-items: flex-end; gap: var(--s2);
}
.master__maniglia {
  display: inline-flex; align-items: center; gap: var(--s2);
  min-height: var(--tap); padding: 0 var(--s4);
  background: var(--surface); color: var(--text);
  border: 1px solid var(--line-2); border-radius: var(--r-pill);
  box-shadow: 0 8px 26px rgba(0,0,0,.45);
  font-size: var(--fs-2); font-weight: 700; cursor: pointer;
}
.master__maniglia:hover { border-color: var(--accent); }
.master__corpo {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r4);
  box-shadow: 0 12px 40px rgba(0,0,0,.5);
  overflow: hidden;
}
.master__filo {
  display: flex; flex-direction: column; gap: var(--s2);
  max-height: 40vh; overflow-y: auto; overscroll-behavior: contain;
  padding: var(--s3);
}
.master__scrivi {
  display: flex; gap: var(--s2); align-items: flex-end;
  padding: var(--s3); border-top: 1px solid var(--line); background: var(--surface-2);
}
.master__scrivi textarea { flex: 1; min-width: 0; resize: none; }
@media (max-width: 860px) {
  .master { right: var(--s3); left: var(--s3); width: auto; }
}

/* Tre stati di salute, non due. L'arancione dice "qualcuno ci sta lavorando":
   senza, una pagina in riparazione restava rossa e il rosso smetteva di voler
   dire "tocca a te". */
.dot--ok { background: var(--ok); }
.dot--riparazione { background: var(--warn); }
.dot--aperto { background: var(--bad); }

/* --- INSTALLA E NOTIFICHE: FUORI DALLA COLONNA ------------------------------
   Erano tre bottoni fissi in fondo alla barra laterale — installa, notifiche,
   pastiglia della fase — e stavano sempre li' anche quando non servivano a
   niente: la fase e' gia' un riquadro in Overview, e "installa" serve una volta
   sola in tutta la vita dell'app.
   Ora vivono in Overview, accanto alle altre integrazioni, e spariscono da soli
   una volta fatti.
   -------------------------------------------------------------------------- */
.azioni-app { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s3); }
.azioni-app .install-btn { width: auto; min-height: var(--tap); padding: 0 var(--s4); }

.scheda-agente__modello { margin-top: var(--s5); display: flex; flex-direction: column; gap: var(--s2); }
.scheda-agente__modello label {
  font-size: var(--fs-0); letter-spacing: var(--ls-caps);
  text-transform: uppercase; color: var(--text-3);
}
.scheda-agente__modello select { width: 100%; }
.scheda-agente__modello .btn { align-self: flex-start; margin-top: var(--s2); }

/* La diagnosi dell'agente sotto l'anomalia che l'ha generata. */
.diagnosi { margin-top: var(--s3); border-top: 1px solid var(--line); padding-top: var(--s3); }
.diagnosi summary { cursor: pointer; font-size: var(--fs-2); color: var(--text-2); }
.diagnosi summary b { color: var(--ok); }
.diagnosi .msg-testo { margin-top: var(--s2); }
.diagnosi-attesa { margin-top: var(--s3); font-size: var(--fs-2); }

/* --- PROPOSTE DI MODIFICA AL CODICE ----------------------------------------
   La patch si legge in monospaziato e scorre nel SUO riquadro: un diff di
   duecento righe non deve allungare la pagina fino a nascondere i bottoni di
   approvazione, che sono il motivo per cui si sta guardando.
   -------------------------------------------------------------------------- */
.proposta-rischio {
  margin: var(--s2) 0 0;
  padding: var(--s2) var(--s3);
  border-left: 3px solid var(--warn);
  background: var(--warn-soft);
  color: var(--warn);
  font-size: var(--fs-2);
}
.proposta-patch { margin-top: var(--s3); }
.proposta-patch summary {
  cursor: pointer; font-size: var(--fs-2); color: var(--accent);
  padding: var(--s2) 0;
}
.patch {
  max-height: 40vh; overflow: auto;
  margin: var(--s2) 0 0;
  padding: var(--s3);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r2);
  font-family: var(--mono);
  font-size: var(--fs-1);
  line-height: 1.5;
  white-space: pre;
  tab-size: 2;
}

.chat-queue {
  display: inline-flex; align-items: center; min-height: 28px; padding: 0 10px;
  border: 1px solid var(--line); border-radius: var(--r-pill);
  color: var(--text-2); background: var(--surface); font-size: var(--fs-1);
}
.chat-queue.is-busy { color: var(--warn); border-color: var(--warn-line); background: var(--warn-soft); }
.chat-shell {
  display: grid; grid-template-columns: 260px minmax(0, 1fr) 300px;
  /* La riga va vincolata, non solo l'altezza del riquadro.
     Senza questa dichiarazione la griglia creava una riga IMPLICITA alta
     quanto il contenuto — 1940px con una conversazione lunga — mentre il
     riquadro restava alto 730 con overflow:hidden. Risultato: i messaggi si
     vedevano e il campo per scrivere finiva a 1943px, cioe' tagliato via.
     Dal di fuori sembrava una chat di sola lettura, ed e' stato segnalato
     esattamente cosi': "vedo la chat ma non posso scrivere". */
  grid-template-rows: minmax(0, 1fr);
  height: min(760px, calc(100dvh - 170px)); min-height: 520px;
  overflow: hidden; border: 1px solid var(--line); border-radius: var(--r4);
  background: var(--surface); box-shadow: 0 16px 36px rgba(0,0,0,.22);
}
/* min-height:0 su entrambe le colonne: senza, una griglia non lascia
   rimpicciolire i figli sotto il loro contenuto, e il vincolo qui sopra non
   servirebbe a niente. */
.chat-list { min-width: 0; min-height: 0; display: flex; flex-direction: column; border-right: 1px solid var(--line); background: var(--surface-2); }
.chat-list__head { min-height: 58px; display: flex; align-items: center; justify-content: space-between; padding: 0 var(--s4); border-bottom: 1px solid var(--line); }
.chat-list__head strong { font-size: var(--fs-2); }
.chat-list__head span { color: var(--text-3); font-size: var(--fs-1); }
.chat-list__items { padding: var(--s2); overflow-y: auto; }
.chat-contact {
  width: 100%; min-height: 64px; display: grid; grid-template-columns: 34px minmax(0,1fr) 8px;
  align-items: center; gap: var(--s3); padding: var(--s2) var(--s3); text-align: left;
  color: var(--text-2); background: transparent; border: 1px solid transparent;
  border-radius: var(--r3); cursor: pointer;
}
.chat-contact:hover { color: var(--text); background: var(--surface-3); }
.chat-contact.is-active { color: var(--text); background: var(--surface); border-color: var(--line-2); }
.chat-avatar { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; background: color-mix(in srgb, var(--avatar-color) 16%, var(--surface)); color: var(--avatar-color); border: 1px solid color-mix(in srgb, var(--avatar-color) 34%, transparent); font-size: var(--fs-1); font-weight: 800; }
.chat-contact__copy { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.chat-contact__copy strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-2); }
.chat-contact__copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-3); font-size: 11px; }
.chat-live { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); }
.chat-workspace { min-width: 0; min-height: 0; display: grid; grid-template-rows: minmax(0,1fr) auto; background: var(--bg); }
.chat-thread { display: none; min-height: 0; grid-row: 1; grid-column: 1; grid-template-rows: auto minmax(0,1fr); }
.chat-thread.is-active { display: grid; }
.chat-thread__head { min-height: 58px; display: flex; align-items: center; justify-content: space-between; gap: var(--s3); padding: 0 var(--s4); border-bottom: 1px solid var(--line); background: var(--surface); }
.chat-thread__head > div { display: flex; flex-direction: column; gap: 2px; }
.chat-thread__head strong { font-size: var(--fs-3); }
.chat-thread__head span { color: var(--text-3); font-size: var(--fs-1); }
.chat-messages { min-height: 0; overflow-y: auto; padding: var(--s5); display: flex; flex-direction: column; gap: var(--s3); }
.chat-empty { margin: auto; display: flex; flex-direction: column; align-items: center; gap: var(--s1); color: var(--text-3); text-align: center; }
.chat-empty strong { color: var(--text-2); }
.chat-message { max-width: min(720px, 84%); padding: var(--s3) var(--s4); border: 1px solid var(--line); border-radius: var(--r3); background: var(--surface); }
.chat-message.is-mine { align-self: flex-end; background: color-mix(in srgb, var(--accent) 9%, var(--surface)); border-color: color-mix(in srgb, var(--accent) 30%, var(--line)); }
.chat-message.is-theirs { align-self: flex-start; }
.chat-message.msg--errore { border-color: var(--bad-line); }
.chat-message__meta { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s2); margin-bottom: var(--s2); font-size: var(--fs-1); }
.chat-message__meta time { color: var(--text-3); font-variant-numeric: tabular-nums; }
.chat-message__body { color: var(--text); line-height: 1.62; white-space: pre-wrap; overflow-wrap: anywhere; }
.chat-request { margin-bottom: var(--s2); padding-left: var(--s2); border-left: 2px solid var(--line-2); color: var(--text-3); font-size: var(--fs-1); }
.chat-composer { grid-row: 2; display: grid; grid-template-columns: 150px minmax(0,1fr) auto; align-items: end; gap: var(--s2); padding: var(--s3); border-top: 1px solid var(--line); background: var(--surface); }
.chat-composer select { width: 100%; min-height: 44px; }
.chat-composer textarea { width: 100%; min-height: 44px; max-height: 150px; resize: vertical; }
.chat-send { min-height: 44px; padding-inline: var(--s4); }
.chat-composer small { grid-column: 2; color: var(--text-3); font-size: 10px; }

/* TERZA COLONNA — dettaglio operativo (stile Teams). */
.chat-detail { min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: var(--s3); overflow-y: auto; padding: var(--s3); border-left: 1px solid var(--line); background: var(--surface-2); }
.chat-detail__head { display: flex; align-items: center; justify-content: space-between; min-height: 40px; }
.chat-detail__head strong { font-size: var(--fs-2); }
.chat-detail-close { display: none; width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 50%; background: var(--surface); color: var(--text-2); font-size: 18px; cursor: pointer; }
.chat-detail__sec h4 { margin: 0 0 var(--s2); color: var(--text-3); font-size: var(--fs-0); letter-spacing: var(--ls-caps); text-transform: uppercase; }
.chat-detail__card { display: block; padding: var(--s3); margin-bottom: var(--s2); border: 1px solid var(--line); border-radius: var(--r3); background: var(--surface); color: var(--text); }
.chat-detail__card--link { text-decoration: none; transition: border-color .15s; }
.chat-detail__card--link:hover { border-color: var(--accent); }
.chat-detail__card b { display: block; margin-top: 4px; font-size: var(--fs-1); overflow-wrap: anywhere; }
.chat-detail__row { display: flex; align-items: center; gap: var(--s2); }
.chat-detail__step { color: var(--text-3); font-size: 10px; text-transform: uppercase; letter-spacing: .04em; }
.chat-detail__meta { margin-top: 4px; color: var(--text-3); font-size: 11px; overflow-wrap: anywhere; }
.chat-detail__meta.mono { font-family: var(--mono, ui-monospace, monospace); }
.chat-detail__empty { color: var(--text-3); font-size: var(--fs-1); }
/* Freccia indietro e toggle dettaglio: solo su telefono. */
.chat-back, .chat-detail-toggle { display: none; }
.chat-detail-veil { display: none; }

.brand-a { filter: none; }
.brand-a:hover { transform: translateY(.02em); filter: none; }
.cost-summary { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--s3); margin-bottom: var(--s5); }
.cost-summary > div { display: flex; flex-direction: column; gap: var(--s1); padding: var(--s4); border: 1px solid var(--line); border-radius: var(--r3); background: var(--surface); }
.cost-summary span { color: var(--text-3); font-size: var(--fs-0); letter-spacing: var(--ls-caps); text-transform: uppercase; }
.cost-summary strong { font-size: clamp(24px, 3vw, 34px); font-variant-numeric: tabular-nums; }
.subscription-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px,1fr)); gap: var(--s3); }
.subscription-card { min-width: 0; padding: var(--s4); border: 1px solid var(--line); border-radius: var(--r3); background: var(--surface); }
.subscription-card__top { display: flex; align-items: center; justify-content: space-between; }
.subscription-icon { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 9px; border: 1px solid var(--line-2); color: var(--accent); font-weight: 800; }
.subscription-card h3 { margin: var(--s4) 0 var(--s2); font-size: var(--fs-2); }
.subscription-price { font-size: clamp(26px, 3vw, 36px); font-weight: 650; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.subscription-price small { margin-left: 4px; color: var(--text-3); font-size: var(--fs-1); font-weight: 500; letter-spacing: 0; }
.subscription-card p { min-height: 36px; margin: var(--s2) 0 0; color: var(--text-3); font-size: var(--fs-1); line-height: 1.5; }
@media (max-width: 760px) {
  /* 168px = quello che sta SOPRA il riquadro sul telefono (intestazione e
     margini), misurato. Prima ne toglieva 132: venticinque pixel in meno, e
     il campo per scrivere finiva sotto il bordo dello schermo.
     min-height abbassato a 400: su un telefono corto, 520 forzati facevano
     rispuntare lo stesso difetto. Se questi numeri si allontanano dal vero,
     scripts/controlla_layout.py lo dice — non serve accorgersene guardando. */
  /* CONVERSATION-FIRST: una schermata sola alla volta. Si parte dall'elenco;
     scegliere una conversazione fa scorrere via la lista e porta al thread
     (la classe show-thread la mette il JS). Il pulsante ‹ riporta indietro.
     Il dettaglio operativo diventa un foglio dal bordo destro (☰). E' lo
     schema di una chat vera sul telefono, non il desktop compresso. */
  .chat-shell { grid-template-columns: 1fr; grid-template-rows: minmax(0,1fr); height: calc(100dvh - 168px); min-height: 400px; position: relative; }
  .chat-list { grid-row: 1; grid-column: 1; min-height: 0; height: auto; max-height: none; overflow-y: auto; border-right: 0; }
  .chat-shell.show-thread .chat-list { display: none; }
  .chat-workspace { grid-row: 1; grid-column: 1; min-height: 0; display: none; }
  .chat-shell.show-thread .chat-workspace { display: grid; }
  .chat-back { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; margin-right: var(--s1); border: 1px solid var(--line); border-radius: 50%; background: var(--surface); color: var(--text-2); font-size: 20px; line-height: 1; cursor: pointer; }
  .chat-detail-toggle { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); color: var(--text-2); font-size: 15px; cursor: pointer; }
  .chat-thread__head { min-height: 52px; padding-inline: var(--s3); }
  .chat-messages { padding: var(--s3); }
  .chat-message { max-width: 92%; }
  .chat-composer { grid-template-columns: minmax(0,1fr) auto; }
  .chat-composer select { grid-column: 1 / -1; }
  .chat-composer small { display: none; }
  /* Dettaglio come foglio scorrevole da destra. */
  .chat-detail { position: absolute; top: 0; right: 0; z-index: 30; width: min(86%, 320px); height: 100%; border-left: 1px solid var(--line); transform: translateX(101%); transition: transform .22s ease; }
  .chat-detail.is-open { transform: translateX(0); box-shadow: -16px 0 36px rgba(0,0,0,.28); }
  .chat-detail-close { display: inline-flex; align-items: center; justify-content: center; }
  .chat-detail-veil.is-open { display: block; position: fixed; inset: 0; z-index: 20; background: rgba(0,0,0,.45); }
  .cost-summary { grid-template-columns: 1fr; }
}
/* 19 · COMPANY OS — moduli densi, riutilizzabili e leggibili su telefono */
.ops-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--s3); }
.ops-grid .panel h3 { margin-bottom:var(--s4); }
.ops-form .span-2 { grid-column:1/-1; }
.ops-form textarea { min-height:82px; }
.ops-list { display:grid; gap:var(--s2); }
.ops-list .card h3 { margin:var(--s2) 0; }
.inline-form { display:flex; align-items:center; gap:var(--s2); min-width:360px; }
.inline-form select,.inline-form input { min-height:34px; padding-block:4px; }
.search-row { display:flex; gap:var(--s2); max-width:680px; margin:var(--s5) 0; }
.search-row input { flex:1; }
@media (max-width:760px) {
  .ops-grid { grid-template-columns:1fr; }
  .inline-form { min-width:300px; }
  .view { padding:var(--s4); }
}

/* 21 · CEO SURFACES — task, CRM, engineering e archivio */
.task-overview { padding:var(--s4); border:1px solid var(--line); border-radius:var(--r3); background:var(--surface); }
.task-overview__head { display:flex; align-items:end; justify-content:space-between; gap:var(--s3); margin-bottom:var(--s4); }
.task-overview__head h2 { margin-top:2px; font-size:var(--fs-4); }
.task-strip { display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:var(--s2); }
.task-tile { min-width:0; min-height:132px; display:flex; flex-direction:column; align-items:flex-start; gap:var(--s2); padding:var(--s3); text-align:left; background:var(--surface-2); color:var(--text); border:1px solid var(--line); border-radius:var(--r3); cursor:pointer; }
.task-tile:hover { border-color:var(--accent); background:var(--surface-3); }
.task-tile__top { width:100%; display:flex; align-items:center; justify-content:space-between; color:var(--text-3); font-size:10px; }
.task-tile strong { font-size:var(--fs-2); }
.task-tile small,.task-deadline { color:var(--text-3); font-size:var(--fs-1); }
.task-deadline { margin-top:auto; color:var(--warn); }
.task-tile--blocked { border-color:var(--warn-line); }
.task-tile--failed { border-color:var(--bad-line); }
.task-empty,.archive-empty { display:flex; flex-direction:column; gap:var(--s1); padding:var(--s5); color:var(--text-3); }
.task-empty strong,.archive-empty strong { color:var(--text); }
.task-dialog { width:min(760px,calc(100vw - 32px)); max-height:min(820px,calc(100dvh - 32px)); padding:var(--s6); overflow:auto; color:var(--text); background:var(--surface); border:1px solid var(--line-2); border-radius:var(--r4); box-shadow:0 32px 90px rgba(0,0,0,.75); }
.task-dialog::backdrop { background:rgba(2,4,7,.78); backdrop-filter:blur(6px); }
.task-dialog__close { position:absolute; top:var(--s3); right:var(--s3); }
.task-dialog__close button { width:36px; height:36px; border:1px solid var(--line); border-radius:50%; background:var(--surface-2); color:var(--text-2); font-size:22px; cursor:pointer; }
.task-dialog__eyebrow { color:var(--accent); font:10px/1.5 var(--mono); text-transform:uppercase; }
.task-dialog > h2 { margin:var(--s2) 48px var(--s3) 0; font-size:24px; }
.task-dialog__description { color:var(--text-2); }
.task-dialog__facts { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--s2); margin:var(--s5) 0; }
.task-dialog__facts div { display:flex; flex-direction:column; gap:3px; padding:var(--s3); background:var(--surface-2); border-radius:var(--r2); }
.task-dialog__facts span,.task-dialog section h3 { color:var(--text-3); font-size:10px; letter-spacing:.09em; text-transform:uppercase; }
.task-dialog section { margin-top:var(--s5); }
.task-output { max-height:240px; overflow:auto; padding:var(--s3); white-space:pre-wrap; background:var(--bg); border:1px solid var(--line); border-radius:var(--r2); color:var(--text-2); }
.chip-row { display:flex; flex-wrap:wrap; gap:var(--s2); }
.task-timeline { display:grid; gap:var(--s2); padding:0; list-style:none; }
.task-timeline li { display:grid; grid-template-columns:130px 90px 1fr; gap:var(--s2); padding:var(--s2) 0; border-bottom:1px solid var(--line); font-size:var(--fs-1); }
.task-timeline time { color:var(--text-3); font-family:var(--mono); }
.agenda-list { display:grid; gap:var(--s2); margin-top:var(--s4); }
.agenda-list > div { display:grid; grid-template-columns:90px auto 1fr; gap:var(--s2); align-items:center; padding:var(--s2) 0; border-bottom:1px solid var(--line); }
.agenda-list time { color:var(--accent); font:10px var(--mono); }
.agenda-list small { grid-column:3; color:var(--text-3); }

.customer-summary,.archive-stats { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--s3); margin-bottom:var(--s4); }
.customer-summary > div,.archive-stats > div { display:flex; flex-direction:column; gap:var(--s1); padding:var(--s4); border:1px solid var(--line); border-radius:var(--r3); background:var(--surface); }
.customer-summary span,.archive-stats span { color:var(--text-3); font-size:10px; text-transform:uppercase; letter-spacing:.09em; }
.customer-summary strong,.archive-stats strong { font-size:var(--fs-4); }
.customer-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:var(--s3); }
.customer-card { padding:var(--s4); border:1px solid var(--line); border-radius:var(--r3); background:var(--surface); }
.customer-card header { display:grid; grid-template-columns:38px 1fr auto; gap:var(--s3); align-items:center; }
.customer-avatar { width:38px; height:38px; display:grid; place-items:center; border:1px solid var(--line-2); border-radius:11px; color:var(--accent); font-weight:800; background:var(--accent-soft); }
.customer-card header span,.customer-card p,.customer-contact { color:var(--text-3); font-size:var(--fs-1); }
.customer-card p { margin:var(--s4) 0; }
.customer-contact { display:flex; flex-wrap:wrap; gap:var(--s3); margin-top:var(--s3); }
.customer-card footer { display:flex; justify-content:space-between; gap:var(--s2); color:var(--text-3); font-size:10px; }
.feedback-row { display:grid; grid-template-columns:auto 1fr auto; gap:var(--s3); align-items:start; padding:var(--s3); border:1px solid var(--line); border-radius:var(--r2); background:var(--surface); }
.feedback-row p { margin-top:var(--s1); color:var(--text-2); }
.feedback-row time { color:var(--text-3); font:10px var(--mono); }
.feedback-decision { display:grid; gap:var(--s2); }
.feedback-note-label { color:var(--text-2); font-size:var(--fs-1); font-weight:600; }
.feedback-decision textarea { min-height:76px; }
.feedback-style-exception { display:flex; align-items:flex-start; gap:var(--s2); color:var(--text-2); font-size:var(--fs-1); line-height:1.45; }
.feedback-style-exception input { width:18px; min-width:18px; min-height:18px; margin-top:2px; accent-color:var(--accent); }
.feedback-triage { margin:var(--s2) 0 0; white-space:pre-wrap; overflow-wrap:anywhere; color:var(--text-2); font:var(--fs-2)/var(--lh) var(--sans); }

.engineering-hero { display:grid; grid-template-columns:1fr minmax(240px,.42fr); gap:var(--s3); padding:var(--s5); border:1px solid var(--line); border-radius:var(--r3); background:linear-gradient(135deg,var(--surface),rgba(85,221,234,.035)); }
.engineering-hero h2 { margin:var(--s1) 0 var(--s2); font-size:26px; }
.engineering-hero p { max-width:720px; color:var(--text-2); }
.engineering-gate { display:flex; flex-direction:column; justify-content:center; gap:var(--s1); padding:var(--s4); border-left:2px solid var(--bad); background:var(--bad-soft); }
.engineering-gate span { color:var(--bad); font:9px var(--mono); letter-spacing:.14em; }
.engineering-gate small { color:var(--text-3); }
.repo-list { display:grid; gap:var(--s2); }
.repo-row { position:relative; display:grid; grid-template-columns:10px minmax(260px,1fr) minmax(320px,.7fr); gap:var(--s3); align-items:center; padding:var(--s4); border:1px solid var(--line); border-radius:var(--r3); background:var(--surface); }
.repo-status { width:8px; height:8px; border-radius:50%; background:var(--bad); }
.repo-status.is-ready { background:var(--ok); }
.repo-status.is-protected { background:#60a5fa; }
.repo-main { min-width:0; }   /* senza, il code col percorso lungo sfonda la colonna su mobile */
.repo-main p { margin:var(--s1) 0 var(--s2); color:var(--text-3); font-size:var(--fs-1); }
.repo-main code { display:block; min-width:0; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.repo-facts { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s2); }
.repo-facts span { display:flex; flex-direction:column; gap:3px; }
.repo-facts small { color:var(--text-3); font-size:9px; text-transform:uppercase; }
.repo-facts strong { font-size:var(--fs-1); }
.repo-warning { grid-column:2/-1; color:var(--warn); font-size:var(--fs-1); }
.pipeline-board { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--s2); }
.pipeline-board section { min-width:0; padding:var(--s3); border:1px solid var(--line); border-radius:var(--r3); background:var(--surface); }
.pipeline-board header { display:flex; justify-content:space-between; color:var(--text-3); font-size:10px; }
.pipeline-board article { display:flex; flex-direction:column; gap:var(--s1); margin-top:var(--s2); padding:var(--s3); background:var(--surface-2); border-radius:var(--r2); }
.pipeline-board article span,.pipeline-board p { color:var(--text-3); font-size:10px; }
.release-flow { display:flex; align-items:center; justify-content:center; gap:var(--s2); margin-top:var(--s5); color:var(--text-2); font-size:var(--fs-1); }
.release-flow i { width:38px; height:1px; background:var(--line-2); }

.archive-toolbar { display:flex; align-items:end; justify-content:space-between; gap:var(--s4); margin-bottom:var(--s4); }
.archive-toolbar h2 { margin-top:var(--s1); font-size:26px; }
.archive-search { display:flex; gap:var(--s2); width:min(560px,100%); }
.archive-search input { flex:1; }
.archive-list { display:grid; gap:4px; }
.archive-item { display:grid; grid-template-columns:42px minmax(0,1fr) 120px auto auto; gap:var(--s3); align-items:center; padding:var(--s3); border:1px solid transparent; border-bottom-color:var(--line); background:var(--surface); }
.archive-item:hover { border-color:var(--line-2); }
.archive-icon { width:42px; height:42px; display:grid; place-items:center; color:var(--accent); border:1px solid var(--line); border-radius:var(--r2); background:var(--surface-2); font-size:20px; }
.archive-info { min-width:0; }
.archive-info h3 { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:var(--fs-2); }
.archive-info p,.archive-item time { margin:3px 0 0; color:var(--text-3); font-size:10px; }
.scheda-agente__modello input,.scheda-agente__modello select { width:100%; }

@media (max-width:900px) {
  .engineering-hero { grid-template-columns:1fr; }.repo-row { grid-template-columns:10px 1fr; }.repo-facts,.repo-warning { grid-column:2; }
  .pipeline-board { grid-template-columns:repeat(2,1fr); }.archive-item { grid-template-columns:42px 1fr auto; }.archive-item time,.archive-item .badge { display:none; }
}
@media (max-width:640px) {
  .task-dialog__facts,.customer-summary,.archive-stats { grid-template-columns:repeat(2,1fr); }
  .task-timeline li { grid-template-columns:1fr; }.agenda-list > div { grid-template-columns:80px 1fr; }.agenda-list strong,.agenda-list small { grid-column:2; }
  .feedback-row { grid-template-columns:auto 1fr; }.feedback-row time { grid-column:2; }
  .pipeline-board { grid-template-columns:1fr; }.release-flow { overflow-x:auto; justify-content:flex-start; padding-bottom:var(--s2); }
  .archive-toolbar { align-items:stretch; flex-direction:column; }.archive-search { flex-direction:column; }.archive-item { grid-template-columns:36px 1fr auto; padding:var(--s2); }.archive-icon { width:36px;height:36px; }.archive-item .btn { min-width:44px;padding:0 var(--s2);font-size:0;}.archive-item .btn::after { content:'↓';font-size:16px; }
}

/* 20 · COMMAND DECK — rifiniture sulla palette Pantheon */
:root {
  --bg:#0c0e12; --surface:#14171d; --surface-2:#1a1e26; --surface-3:#212630;
  --line:#262b34; --line-2:#384150; --text:#eef1f6; --text-2:#98a2b3;
  --text-3:#848e9d; --accent:#6cd0e0; --accent-2:#91e2ec;
  --accent-soft:#10262a; --focus:#6cd0e0;
}
body { background:var(--bg); }
.sidebar { background:var(--surface); }
.brand { min-height:40px; }
.sidebar nav { margin-top:var(--s7); gap:2px; }
.nav-label { margin:var(--s4) var(--s3) var(--s1); color:var(--text-3);
  font-size:9px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; }
.nav-label:first-child { margin-top:0; }
.sidebar nav a.on { background:linear-gradient(90deg,rgba(108,208,224,.12),rgba(108,208,224,.025)); }
.topbar { min-height:70px; background:var(--surface); }
.kpi,.card,.panel,.calendar-panel { box-shadow:inset 0 1px 0 rgba(255,255,255,.018); }
.kpi:hover,.card:hover { border-color:#334454; }
.chat-runtime { width:max-content; max-width:100%; margin:-2px 0 var(--s2); padding:2px 7px;
  border:1px solid var(--line); border-radius:var(--r-pill); color:var(--text-3);
  font:10px/1.5 var(--mono); overflow-wrap:anywhere; }
.chat-to { color:var(--accent); font-size:var(--fs-1); }

.calendar-layout { display:grid; grid-template-columns:minmax(0,1.65fr) minmax(280px,.65fr); gap:var(--s3); }
.calendar-panel { min-width:0; padding:var(--s4); border:1px solid var(--line); border-radius:var(--r3); background:var(--surface); }
.calendar-head { display:flex; align-items:flex-end; justify-content:space-between; gap:var(--s3); margin-bottom:var(--s4); }
.calendar-head h2 { margin-top:2px; font-size:var(--fs-4); text-transform:capitalize; }
.eyebrow { color:var(--accent); font-size:9px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; }
.calendar-weekdays,.calendar-grid { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); }
.calendar-weekdays span { padding:var(--s2); color:var(--text-3); font-size:10px; font-weight:700; text-transform:uppercase; }
.calendar-day { position:relative; min-width:0; min-height:96px; padding:var(--s2); border-top:1px solid var(--line); border-right:1px solid var(--line); background:rgba(255,255,255,.008); }
.calendar-day:nth-child(7n) { border-right:0; }
.calendar-day.is-outside { opacity:.28; }
.calendar-day.is-today { background:linear-gradient(145deg,rgba(108,208,224,.1),transparent 70%); }
.calendar-day.is-today::after { content:""; position:absolute; inset:0; border:1px solid rgba(108,208,224,.48); pointer-events:none; }
.calendar-date { display:grid; place-items:center; width:24px; height:24px; color:var(--text-2); font:11px var(--mono); }
.calendar-day.is-today .calendar-date { color:var(--accent); font-weight:800; }
.calendar-events { display:grid; gap:3px; margin-top:var(--s1); }
/* Gli eventi sono bottoni: si toccano e si aprono. Da qui il cursore, il
   testo allineato a sinistra e l'area di tocco piu' alta di prima. */
.calendar-event {
  width:100%; display:block; overflow:hidden; padding:4px 6px; text-align:left;
  border:0; border-left:2px solid var(--line-2); border-radius:3px;
  background:var(--surface-2); color:var(--text-2); font:inherit; font-size:10px;
  white-space:nowrap; text-overflow:ellipsis; cursor:pointer;
}
.calendar-event:hover { color:var(--text); background:var(--surface-3); }
.calendar-event:focus-visible { outline:2px solid var(--accent); outline-offset:1px; }

/* Tre gradini, un criterio: quanto chiede a te.
   Il grigio non e' pigrizia — i controlli automatici sono la maggioranza delle
   voci, e se avessero un colore forte il calendario sembrerebbe pieno di cose
   urgenti che invece si sbrigano da sole. */
.calendar-event--alta  { border-left-color:var(--bad); background:var(--bad-soft); color:var(--text); }
.calendar-event--media { border-left-color:var(--accent); background:var(--accent-soft); }
.calendar-event--bassa { border-left-color:var(--line-2); opacity:.72; }

.calendar-piu { display:block; padding:2px 6px; color:var(--text-3); font-size:10px; }

.calendar-legenda { display:flex; flex-wrap:wrap; gap:var(--s4); padding:var(--s3) var(--s4); border-top:1px solid var(--line); color:var(--text-3); font-size:var(--fs-1); }
.calendar-legenda span { display:inline-flex; align-items:center; gap:6px; }
.pallino { width:8px; height:8px; border-radius:2px; }
.pallino--alta { background:var(--bad); }
.pallino--media { background:var(--accent); }
.pallino--bassa { background:var(--line-2); }

/* La scheda dell'evento riusa il pannello laterale della scheda agente:
   stesso comportamento, stesso aspetto, niente da imparare due volte. */
.scheda-evento {
  position:fixed; top:0; right:0; z-index:60; width:min(420px, 92vw); height:100dvh;
  overflow-y:auto; padding:var(--s5); background:var(--surface);
  border-left:1px solid var(--line); box-shadow:-18px 0 40px rgba(0,0,0,.34);
}
.calendar-side { display:grid; align-content:start; gap:var(--s3); }
.calendar-form { display:grid; gap:var(--s3); margin-top:var(--s4); }
.calendar-form label { display:grid; gap:var(--s1); color:var(--text-2); font-size:var(--fs-1); font-weight:600; }
.schedule-list { display:grid; gap:var(--s1); margin-top:var(--s3); }
.schedule-list > div { display:grid; grid-template-columns:8px 1fr; gap:0 var(--s2); padding:var(--s2) 0; border-bottom:1px solid var(--line); }
.schedule-list > div:last-child { border-bottom:0; }
.schedule-list small { grid-column:2; color:var(--text-3); font:10px/1.5 var(--mono); }
.status-orb { width:6px; height:6px; margin-top:7px; border-radius:50%; background:var(--ok); }
@media (max-width:980px) { .calendar-layout { grid-template-columns:1fr; } }
@media (max-width:760px) {
  .calendar-panel { padding:var(--s3); overflow-x:auto; }
  .calendar-weekdays,.calendar-grid { min-width:650px; }
  .calendar-day { min-height:84px; }
  .sidebar nav { margin-top:0; }
}

/* ============================================================================
   18 · MOBILE VERO E PROPRIO (<= 430px)
   Riprogettazione dedicata allo smartphone: priorità a leggibilità, densità 
   verticale ed edge-to-edge per le tabelle.
   ========================================================================== */
@media (max-width: 430px) {
  /* Overview: KPI verticali, senza fronzoli HUD */
  .kpi-row, .kpis, .stat-row { display: flex; flex-direction: column; gap: var(--s3); }
  .kpi, .stat {
    padding: var(--s4) var(--s5);
    background: var(--surface-2);
    border-radius: var(--r4);
    box-shadow: none;
    border: none;
  }
  .kpi::before, .kpi::after, .awaiting::before { display: none; }
  .kpi .num { font-size: 32px; font-weight: 800; text-shadow: none; margin-top: var(--s1); }
  /* .num--sm smetteva di essere piccolo qui dentro: `.kpi .num` (0-2-0) batte
     `.num--sm` (0-1-0), quindi i sette numeri del mese uscivano tutti a 32px
     e la gerarchia spariva -- misurati identici, 44px di glifo ciascuno.
     Stessa malattia di .btn--sm: una regola che vince senza saperlo.
     Il secondario torna secondario, e i due numeri che rispondono a "sto
     guadagnando?" diventano gli unici grandi della sezione. */
  .kpi .num--sm { font-size: 22px; font-weight: 700; }
  
  /* Densità card agente */
  .grid { display: flex; flex-direction: column; gap: var(--s3); }
  .card {
    padding: var(--s4);
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: baseline;
    gap: var(--s2);
  }
  .card h3 { font-size: var(--fs-4); grid-column: 1 / -1; margin-bottom: 0; }
  .card .role { font-size: var(--fs-2); grid-column: 1 / -1; margin-top: -4px; }
  .card .meta { grid-column: 1 / -1; justify-content: flex-start; margin-top: var(--s1); }
  
  /* Navigazione Bottom Bar: compatta, senza scroll */
  .sidebar { height: calc(64px + var(--safe-b)); padding-bottom: var(--safe-b); }
  .sidebar nav { justify-content: space-evenly; width: 100%; padding: 0; }
  .sidebar nav a {
    flex-direction: column; 
    gap: 2px;
    font-size: var(--fs-0);
    padding: var(--s2) 4px;
    flex: 1;
    min-height: 100%;
    white-space: normal;
    text-align: center;
    line-height: 1.1;
  }
  .sidebar nav a.on { box-shadow: inset 0 3px 0 var(--accent); background: var(--surface-2); }
  
  /* Tabelle Log: edge-to-edge */
  .table-wrap {
    margin-left: calc((var(--s4) + var(--safe-l)) * -1);
    margin-right: calc((var(--s4) + var(--safe-r)) * -1);
    border-left: 0;
    border-right: 0;
    border-radius: 0;
  }
  
  .view { padding-bottom: calc(84px + var(--safe-b)); }
  .section-title { font-size: var(--fs-2); margin: var(--s6) 0 var(--s3); }
}


/* ============================================================================
   19 · CONTROL ROOM — P6 (Apple-inspired, NON clone Apple)
   Componenti premium condivisi da Today/Inbox/Work/Approvals/System/…
   Principi: molto whitespace, gerarchia forte, UN accent, superfici pulite,
   colori di stato semantici, movimento leggero, progressive disclosure.
   Nessun neon/glow. Riusa i token; qui solo la composizione.
   ========================================================================== */

/* --- intro di pagina: eyebrow + titolo grande + sottotitolo ---------------- */
.p6-lead { margin: 0 0 var(--s6); }
.p6-lead .eyebrow { display:block; font-size:var(--fs-0); letter-spacing:var(--ls-caps);
  text-transform:uppercase; color:var(--text-3); margin-bottom:var(--s2); }
.p6-lead h2 { font-size:clamp(22px, 4vw, 30px); font-weight:640; letter-spacing:-.01em;
  line-height:1.15; margin:0; }
.p6-lead p { color:var(--text-2); margin:var(--s2) 0 0; max-width:60ch; }

/* --- intestazione di sezione: titolo + azione a destra --------------------- */
.p6-sec { display:flex; align-items:baseline; justify-content:space-between; gap:var(--s3);
  margin:var(--s7) 0 var(--s3); }
.p6-sec:first-child { margin-top:0; }
.p6-sec h2, .p6-sec h3 { font-size:var(--fs-4); font-weight:620; letter-spacing:-.005em; margin:0; }
.p6-sec .p6-sec__count { color:var(--text-3); font-weight:500; font-size:var(--fs-2); }
.p6-sec a { color:var(--accent); font-size:var(--fs-2); font-weight:560; }
.p6-sec a:hover { color:var(--accent-2); }

/* --- griglia a schede, auto-fit: si impagina da sola su ogni schermo -------- */
.p6-grid { display:grid; gap:var(--s4);
  grid-template-columns:repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }
.p6-grid--wide { grid-template-columns:repeat(auto-fill, minmax(min(100%, 340px), 1fr)); }

/* --- scheda premium: superficie pulita, hover discreto --------------------- */
.p6-card { background:var(--surface); border:1px solid var(--line); border-radius:var(--r5);
  padding:var(--s5); box-shadow:var(--shadow-card);
  transition:border-color .16s ease, box-shadow .16s ease, transform .06s ease; }
a.p6-card { display:block; text-decoration:none; color:inherit; }
a.p6-card:hover { border-color:var(--line-2); box-shadow:var(--shadow-hover); }
a.p6-card:active { transform:scale(.996); }
.p6-card--flat { box-shadow:none; }

/* --- tessera statistica: poche, grandi, leggibili in diagonale ------------- */
.p6-stat { display:flex; flex-direction:column; gap:var(--s1); }
.p6-stat .k { font-size:var(--fs-0); letter-spacing:var(--ls-caps); text-transform:uppercase;
  color:var(--text-3); }
.p6-stat .v { font-size:clamp(26px, 5vw, 34px); font-weight:640; letter-spacing:-.02em;
  line-height:1.05; }
.p6-stat .v small { font-size:var(--fs-3); font-weight:500; color:var(--text-3); letter-spacing:0; }
.p6-stat .s { font-size:var(--fs-1); color:var(--text-3); }
.p6-stat.accent .v { color:var(--accent); }
.p6-stat.ok .v { color:var(--ok); }
.p6-stat.warn .v { color:var(--warn); }
.p6-stat.bad .v { color:var(--bad); }

/* --- riga pulita (liste che comunicano piu' di una tabella) ---------------- */
/* list-style/margin/padding sono no-op sui <div> gia' in uso: l'estensione
   a <ul>/<li> non tocca gli usi esistenti. */
.p6-rows { display:flex; flex-direction:column; list-style:none; margin:0; padding:0; }
.p6-row { display:flex; align-items:center; gap:var(--s3); padding:var(--s3) 0;
  border-bottom:1px solid var(--line); }
.p6-row:last-child { border-bottom:none; }
.p6-row__main { min-width:0; flex:1; }
.p6-row__t { font-weight:560; font-size:var(--fs-3); }
.p6-row__s { color:var(--text-3); font-size:var(--fs-1); margin-top:2px;
  display:flex; gap:var(--s2); flex-wrap:wrap; }
.p6-row__s details summary { cursor:pointer; color:inherit; }
.p6-row__r { margin-left:auto; color:var(--text-3); font-size:var(--fs-1); white-space:nowrap; }

/* --- riga con azione a portata: badge/testo + 1-2 bottoni piccoli ---------- */
.p6-row__actions { display:flex; gap:var(--s2); flex:0 0 auto; margin-left:auto; }
.p6-row--decide { flex-wrap:wrap; }

@media (max-width:700px) {
  .p6-row--decide { align-items:flex-start; }
  .p6-row--decide .p6-row__actions { flex:1 1 100%; margin-left:0; margin-top:var(--s2); }
  .p6-row--decide .p6-row__actions .ap-btn { flex:1 1 auto; }
}

/* --- riga compressa: duplicato consecutivo, stesso evento, solo l'orario --- */
.p6-row--dup { padding:2px 0; border-bottom-color:transparent; }
.p6-row--dup .p6-row__s { color:var(--text-3); font-style:italic; }

/* --- pastiglia di stato: semantica, sobria --------------------------------- */
.p6-pill { display:inline-flex; align-items:center; gap:6px; padding:3px 10px;
  border-radius:var(--r-pill); font-size:var(--fs-0); font-weight:600; letter-spacing:.02em;
  border:1px solid var(--line-2); color:var(--text-2); background:var(--surface-2);
  /* una pastiglia non si spezza mai su due righe: o sta, o accapo intera */
  white-space:nowrap; flex:0 0 auto; }
.p6-pill::before { content:""; width:6px; height:6px; border-radius:50%; background:currentColor; }
.p6-pill.ok { color:var(--ok); border-color:var(--ok-line); background:var(--ok-soft); }
.p6-pill.warn { color:var(--warn); border-color:var(--warn-line); background:var(--warn-soft); }
.p6-pill.bad { color:var(--bad); border-color:var(--bad-line); background:var(--bad-soft); }
.p6-pill.accent { color:var(--accent); border-color:var(--accent); background:var(--accent-soft); }
.p6-pill.mute { color:var(--text-3); }

/* --- Stato aggregato: l'unica risposta a "devo intervenire?" --------------- */
.p6-status { display:flex; align-items:center; gap:var(--s3);
  padding:var(--s5); border-radius:var(--r6); border:1px solid var(--line);
  background:var(--surface); box-shadow:var(--shadow-card); }
.p6-status__dot { width:10px; height:10px; border-radius:50%; flex:0 0 auto;
  background:var(--text-3); }
.p6-status__headline { margin:0; font-size:clamp(30px, 5.4vw, 40px);
  font-weight:680; letter-spacing:-.028em; line-height:1.05; }
.p6-status__sub { margin:var(--s1) 0 0; font-size:var(--fs-2); color:var(--text-2); }
.p6-status--ok { background:var(--ok-soft); border-color:var(--ok-line); }
.p6-status--ok .p6-status__dot { background:var(--ok); }
.p6-status--ok .p6-status__headline { color:var(--ok); }

/* --- Needs Attention: la ragione per cui apri la dashboard ------------------ */
.p6-attn { background:var(--await-bg); border:1px solid var(--await-line); border-radius:var(--r5);
  padding:var(--s5); }
.p6-attn__head { display:flex; align-items:center; gap:var(--s3); margin-bottom:var(--s4); }
.p6-attn__head h2, .p6-attn__head h3 { font-size:clamp(30px, 5.4vw, 40px); font-weight:680;
  letter-spacing:-.028em; line-height:1.05; margin:0; color:var(--await-text); }
.p6-attn__head .pulse-dot { width:10px; height:10px; }
.p6-attn__item { display:flex; align-items:center; gap:var(--s3); padding:var(--s3) 0;
  border-top:1px solid color-mix(in srgb, var(--await-line) 45%, transparent); }
.p6-attn__item:first-of-type { border-top:none; }
.p6-attn__item .t { flex:1; min-width:0; font-weight:540; }
.p6-attn__item .go { color:var(--await-text); font-weight:600; font-size:var(--fs-2); white-space:nowrap; }

/* --- righe informative sobrie: alert motori, eco notifiche ----------------- */
.p6-notes { display:flex; flex-direction:column; margin-bottom:var(--s5); }
.p6-note { display:block; padding:var(--s2) 0; color:var(--text-2);
  font-size:var(--fs-2); line-height:1.5; text-decoration:none; }
.p6-note:hover, .p6-note:focus-visible { color:var(--text); }
.p6-note + .p6-note { border-top:1px solid var(--line); }

/* --- stato vuoto: calmo, non un errore ------------------------------------- */
.p6-empty { text-align:center; padding:var(--s8) var(--s4); color:var(--text-3); }
.p6-empty b { display:block; color:var(--text-2); font-size:var(--fs-4); font-weight:600;
  margin-bottom:var(--s2); }
.p6-empty--inline { text-align:left; padding:var(--s3) 0; color:var(--text-3); }
.p6-empty--inline b { display:inline; font-size:inherit; font-weight:600;
  color:var(--text); margin:0; }
/* Il link dentro una riga di testo si riconosce SENZA il colore: sottolineato.
   Colorarlo e basta lo rende distinguibile solo a chi vede i colori -- axe lo
   chiama link-in-text-block, ed e' il motivo per cui TALOS aveva rifiutato la
   riga "color:var(--accent)" che la specifica suggeriva. Questa e' la
   correzione giusta: si vede da chiunque, e il contrasto resta quello del
   testo attorno (5.47:1). */
.p6-empty--inline a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.p6-empty--inline a:hover, .p6-empty--inline a:focus-visible { color: var(--text); }

/* --- pulsante d'azione morbido (coerente con .ap-btn esistente) ------------ */
.p6-btn { display:inline-flex; align-items:center; gap:6px; min-height:var(--tap);
  padding:0 var(--s5); border-radius:var(--r3); font-weight:600; font-size:var(--fs-2);
  border:1px solid transparent; cursor:pointer; text-decoration:none;
  transition:background-color .14s ease, border-color .14s ease; }
.p6-btn.primary { background:var(--accent); color:var(--accent-ink); }
.p6-btn.primary:hover { background:var(--accent-2); }
.p6-btn.ghost { background:transparent; border-color:var(--line-2); color:var(--text); }
.p6-btn.ghost:hover { background:var(--surface-2); }

@media (prefers-reduced-motion: reduce) {
  .p6-card, a.p6-card, .p6-btn { transition:none; }
}

/* Mobile: la griglia collassa e le schede respirano meno, ma restano pulite. */
@media (max-width: 700px) {
  .p6-grid, .p6-grid--wide { grid-template-columns:1fr; gap:var(--s3); }
  .p6-card, .p6-attn { padding:var(--s4); border-radius:var(--r4); }
  .p6-sec { margin-top:var(--s6); }
  .p6-lead { margin-bottom:var(--s5); }
}

/* --- scheda motore (System): struttura identica per tutte -------------------
   Il nome e la pastiglia stavano sulla stessa riga: con i nomi corti la
   pastiglia restava in linea, con quelli lunghi andava a capo. Risultato: card
   allineate in modo diverso l'una dall'altra, che e' esattamente cio' che fa
   sembrare un'interfaccia "montata" invece che disegnata. Ora la struttura e'
   sempre la stessa: nome, pastiglia sotto, riga tecnica in fondo. */
.eng-head { display:flex; flex-direction:column; align-items:flex-start; gap:var(--s2); }
.eng-head b { font-size:var(--fs-3); font-weight:600; letter-spacing:-.005em; }
.eng-meta { color:var(--text-3); font-size:var(--fs-1); margin-top:var(--s3);
  line-height:1.55; }
.eng-tags { margin-top:var(--s3); display:flex; gap:var(--s1); flex-wrap:wrap; }

/* --- interruttore del tema (piede della colonna) ---------------------------- */
.tema-seg { display:flex; border:1px solid var(--line); border-radius:var(--r2);
  overflow:hidden; margin-bottom:var(--s2); }
.tema-seg button { flex:1; min-height:32px; border:0; border-left:1px solid var(--line);
  background:transparent; color:var(--text-3); font:600 var(--fs-0)/1 var(--sans);
  letter-spacing:.04em; cursor:pointer; transition:background-color .15s ease, color .15s ease; }
.tema-seg button:first-child { border-left:0; }
.tema-seg button:hover { background:var(--surface-2); color:var(--text-2); }
.tema-seg button.on { background:var(--surface-3); color:var(--text); }
.tema-seg button:focus-visible { outline:2px solid var(--focus); outline-offset:-2px; }
/* Su schermo stretto la colonna laterale non c'e': l'interruttore a tre
   posizioni cede il posto al bottone singolo nella barra in alto. Prima qui
   c'era display:none e basta -- il tema NON si poteva cambiare dal telefono. */
@media (max-width: 860px) { .tema-seg { display:none; } }

/* --- tema: bottone singolo nella barra in alto (telefono) ------------------ */
.appbar-tema { display:none; }
@media (max-width: 860px) {
  .appbar-tema {
    display:inline-flex; align-items:center; justify-content:center;
    width:40px; height:40px; margin-left:auto; margin-right:var(--s2);
    border:1px solid var(--line-2); border-radius:var(--r2);
    background:var(--surface); color:var(--text-2); cursor:pointer;
    transition:background-color .15s ease, color .15s ease;
  }
  .appbar-tema:hover, .appbar-tema:active { background:var(--surface-2); color:var(--text); }
  .appbar-tema:focus-visible { outline:2px solid var(--focus); outline-offset:2px; }
  .tema-ico { font-size:17px; line-height:1; }
  /* il kill switch resta all'estrema destra: non lo si sposta mai */
  .appbar-ks { margin-left:0; }
}

/* ============================================================================
   20 · MARCHIO — Pantheon 1.0
   Composizione: simbolo + nome + qualifica. Il simbolo eredita il colore dal
   tema (e' inline), quindi non esistono due versioni da tenere allineate.
   ========================================================================== */
.brand { display:flex; align-items:center; gap:10px; padding:2px var(--s2) var(--s6);
  text-decoration:none; color:inherit; }
.brand-mark { color:var(--accent); display:flex; flex:0 0 auto;
  transition:transform .2s cubic-bezier(.2,.7,.3,1); }
.brand:hover .brand-mark { transform:translateY(-1px); }
.brand-text { display:flex; flex-direction:column; gap:2px; min-width:0; }
.brand-word { font-size:var(--fs-2); font-weight:700; letter-spacing:.20em;
  color:var(--text); line-height:1; }
.brand-sub { font-size:8px; font-weight:600; letter-spacing:.20em;
  text-transform:uppercase; color:var(--text-3); line-height:1; }
@media (prefers-reduced-motion: reduce) { .brand-mark { transition:none; } }

/* --- APERTURA: breve, e con un senso ---------------------------------------
   La prima versione era un fondo piatto col simbolo che spuntava e le lettere
   che si allargavano: sembrava un caricamento, non un'apertura. E il simbolo
   prendeva il colore dell'accento su un fondo diverso da quello dell'app, per
   cui "cambiava colore" rispetto a quello che si vedeva un attimo dopo.

   Ora: il fondo e' lo STESSO dell'interfaccia (nessuno stacco di colore), il
   frontone si costruisce dal basso -- come un edificio che si alza -- e la luce
   passa una volta sola sull'oculo. Poi la scena si apre e sotto c'e' gia' la
   dashboard. Meno di un secondo e mezzo in tutto.
   -------------------------------------------------------------------------- */
.apertura {
  position:fixed; inset:0; z-index:200; display:grid; place-items:center;
  background:var(--bg);
  transition:opacity .38s cubic-bezier(.4,0,.2,1), transform .38s cubic-bezier(.4,0,.2,1);
}
.apertura.via { opacity:0; transform:scale(1.04); pointer-events:none; }
.apertura-in { display:flex; flex-direction:column; align-items:center; gap:var(--s5); }

/* il marchio: stesso colore che avra' nell'app, nessun salto cromatico */
.apertura-in svg { color:var(--accent); overflow:visible; }
/* si alza dal basso, come si costruisce un edificio */
.apertura-in svg > g > * {
  transform-origin:50% 100%;
  animation:mattone .52s cubic-bezier(.2,.8,.25,1) both;
}
.apertura-in svg > g > *:nth-child(1) { animation-delay:.30s; }  /* frontone   */
.apertura-in svg > g > *:nth-child(2) { animation-delay:.24s; }  /* architrave */
.apertura-in svg > g > *:nth-child(3),
.apertura-in svg > g > *:nth-child(4),
.apertura-in svg > g > *:nth-child(5),
.apertura-in svg > g > *:nth-child(6) { animation-delay:.14s; }  /* colonne    */
.apertura-in svg > g > *:nth-child(7) { animation-delay:0s; }    /* basamento  */
@keyframes mattone {
  from { opacity:0; transform:translateY(10px) scaleY(.82); }
  to   { opacity:1; transform:none; }
}

.apertura-word {
  font-size:var(--fs-3); font-weight:700; letter-spacing:.36em;
  color:var(--text); padding-left:.36em;
  animation:nome-appare .42s .52s cubic-bezier(.2,.8,.25,1) both;
}
@keyframes nome-appare { from { opacity:0; transform:translateY(6px); }
                         to   { opacity:1; transform:none; } }

html.in-apertura, html.in-apertura body { overflow:hidden; }
.appbar-mark { color:var(--accent); display:block; }

@media (prefers-reduced-motion: reduce) {
  .apertura, .apertura-in svg > g > *, .apertura-word { animation:none; transition:none; }
}



/* --- firma: su finestre BASSE non deve coprire il menu ---------------------
   La firma e' fissata in fondo alla colonna. Con la navigazione cresciuta
   (Chat e Orchestra in piu') su una finestra bassa copriva le ultime voci:
   "Team" e "Clienti" finivano dietro al logo Tarvio. Sotto una certa altezza
   smette di essere fissata e scorre insieme al menu, dove non copre niente. */
@media (min-width: 861px) and (max-height: 780px) {
  .firma-tarvio { position: static; width: auto; border-top: 1px solid var(--line);
                  margin-top: var(--s5); }
  .sidebar { padding-bottom: var(--s5); }
}

/* ============================================================================
   21 · NAVIGAZIONE TELEFONO — cinque destinazioni, non quindici
   Nel video la barra in basso conteneva TUTTE le sezioni in fila, minuscole e
   scorrevoli: si sbagliava bersaglio e non si capiva dove si era. Qui restano
   cinque voci fisse (Today, Chat, Work, Calendar, Altro) e il resto vive in un
   foglio che si apre dal basso.
   ========================================================================== */
@media (max-width: 860px) {
  /* nella barra in basso restano SOLO i tab e "Altro" */
  .sidebar nav a:not([data-tab]) { display: none; }
  .sidebar nav { justify-content: space-around; width: 100%; }
  .sidebar nav a[data-tab], .tab--altro {
    flex: 1 1 0; min-width: 0; display: flex; align-items: center;
    justify-content: center; min-height: var(--tabbar-h);
    font-size: var(--fs-1); font-weight: 600; color: var(--text-3);
    background: none; border: 0; cursor: pointer; padding: 0 4px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .sidebar nav a[data-tab].on { color: var(--accent); box-shadow: inset 0 2px 0 var(--accent); }
  .tab--altro[aria-expanded="true"] { color: var(--accent); }

  /* il foglio */
  .velo--foglio { position: fixed; inset: 0; z-index: 80; background: rgba(6,9,18,.5); }
  /* TENDINA LATERALE — esce da sinistra, come chiesto dal proprietario.
     Prima era un foglio dal basso: comodo, ma lui preferisce il menu classico
     che scorre da sinistra e si apre dallo stemma in alto. */
  .foglio {
    position: fixed; top: 0; bottom: 0; left: 0; z-index: 90;
    width: min(82vw, 320px);
    background: var(--surface); border-right: 1px solid var(--line);
    padding: calc(var(--s5) + var(--safe-t)) var(--s4) var(--s5);
    padding-left: calc(var(--s4) + var(--safe-l));
    box-shadow: 8px 0 28px -12px rgba(6,9,18,.5);
    overflow-y: auto; overscroll-behavior: contain;
    animation: foglio-entra .2s cubic-bezier(.2,.7,.3,1) both;
  }
  .foglio-maniglia { width: 34px; height: 4px; border-radius: 999px;
    background: var(--line-2); margin: 0 0 var(--s5); }
  .foglio-griglia { display: grid; grid-template-columns: 1fr; gap: 4px; }
  .foglio-griglia a, .foglio-griglia button {
    display: flex; align-items: center; min-height: var(--tap);
    padding: 0 var(--s4); border-radius: var(--r3);
    background: var(--surface-2); color: var(--text);
    font-size: var(--fs-2); font-weight: 560; text-decoration: none;
    width: 100%; border: 0; font-family: inherit; text-align: left;
    cursor: pointer;
  }
  .foglio-griglia a:active, .foglio-griglia button:active {
    background: var(--surface-3); }
  @keyframes foglio-entra { from { transform: translateX(-14px); opacity: 0; }
                            to   { transform: none; opacity: 1; } }
}
@media (min-width: 861px) { .tab--altro, .foglio, .velo--foglio { display: none !important; } }
@media (prefers-reduced-motion: reduce) { .foglio { animation: none; } }

/* ============================================================================
   22 · COMPOSIZIONE — avvicinamento alle reference
   Il confronto con i riferimenti mostrava il difetto vero: non i colori, ma la
   COMPOSIZIONE. Tutto pesava uguale, l'accento non si vedeva, le schede erano
   rettangoli chiari su fondo chiaro. Qui si interviene su tre cose che si
   notano in tutte le pagine: voce attiva, superfici, numeri.
   ========================================================================== */

/* --- 1. la voce attiva e' una PILLOLA piena, non una barretta laterale ------
   Nelle reference si capisce dove sei da tre metri di distanza. Prima era una
   riga di 3px sul bordo sinistro: corretta, ma invisibile. */
.sidebar nav a.on {
  background: var(--accent);
  color: var(--accent-ink);
  box-shadow: none;
  font-weight: 640;
}
.sidebar nav a.on .notif-badge { background: var(--accent-ink); color: var(--accent); }
.sidebar nav a { border-radius: var(--r3); }

/* --- 2. superfici con vera presenza ----------------------------------------
   Radius piu' generoso e un'ombra morbida (non un bordo duro): e' cio' che
   nelle reference stacca la scheda dal fondo senza sporcare. */
.p6-card {
  border-radius: var(--r6);
  border-color: color-mix(in srgb, var(--line) 70%, transparent);
  box-shadow: 0 1px 2px rgba(16,24,40,.04), 0 12px 28px -12px rgba(16,24,40,.14);
}
a.p6-card:hover { box-shadow: 0 2px 4px rgba(16,24,40,.06), 0 18px 40px -14px rgba(16,24,40,.22); }
:root[data-theme="dark"] .p6-card {
  box-shadow: 0 1px 2px rgba(0,0,0,.28), 0 14px 32px -14px rgba(0,0,0,.55);
}
:root[data-theme="dark"] a.p6-card:hover {
  box-shadow: 0 2px 6px rgba(0,0,0,.34), 0 20px 44px -16px rgba(0,0,0,.7);
}

/* --- 3. i numeri sono il contenuto, non un dettaglio ------------------------
   Nelle reference il dato importante e' grande e colorato: e' la prima cosa
   che l'occhio prende. */
.p6-stat .v { font-size: clamp(30px, 5.4vw, 40px); font-weight: 680; letter-spacing:-.028em; }
.p6-stat .k { font-weight: 650; }
.p6-stat.accent .v, a.p6-card .p6-stat .v { color: var(--accent); }

/* KPI di Oggi: il blu segnala una sola cosa per schermata (direzione APELLES,
   sez. 3). La regola sopra colora di accento ogni .p6-stat dentro un
   a.p6-card — qui si esce da quella regola per i tre numeri neutri. */
a.p6-card .p6-stat--neutral .v { color: var(--text); }
a.p6-card .p6-stat--neutral.ok .v { color: var(--ok); }
.p6-stat .s.bad { color: var(--bad); font-weight:600; }

/* titoli di sezione un po' piu' presenti */
.p6-sec h2, .p6-sec h3 { font-size: var(--fs-4); font-weight: 680; letter-spacing:-.012em; }

/* --- avviso "ci sono novita'" (sostituisce i ricaricamenti automatici) ------ */
.live-avviso {
  position: fixed; z-index: 120; left: 50%; transform: translateX(-50%);
  bottom: calc(var(--s5) + var(--safe-b));
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 40px; padding: 0 var(--s5);
  border: 1px solid var(--accent); border-radius: var(--r-pill);
  background: var(--accent); color: var(--accent-ink);
  font-size: var(--fs-2); font-weight: 640; cursor: pointer;
  box-shadow: 0 6px 20px -6px rgba(16,24,40,.45);
  animation: avviso-sale .22s cubic-bezier(.2,.7,.3,1) both;
}
.live-avviso:hover { background: var(--accent-2); border-color: var(--accent-2); }
@keyframes avviso-sale { from { opacity:0; transform:translateX(-50%) translateY(8px); }
                         to   { opacity:1; transform:translateX(-50%); } }
@media (max-width: 860px) { .live-avviso { bottom: calc(var(--tabbar-h) + var(--s4) + var(--safe-b)); } }
@media (prefers-reduced-motion: reduce) { .live-avviso { animation: none; } }

/* ============================================================================
   23 · TELEFONO: VIA LA PULSANTIERA IN BASSO
   Il proprietario aveva chiesto il menu a tendina da sinistra. Io avevo
   AGGIUNTO la tendina lasciando anche la barra di bottoni in basso: due
   navigazioni per la stessa cosa, e lo schermo mangiato da una pulsantiera che
   non voleva. Resta soltanto la tendina, aperta dallo stemma in alto a sinistra.
   ========================================================================== */
@media (max-width: 860px) {
  .sidebar { display: none !important; }
  /* niente barra in basso = il contenuto si riprende lo spazio */
  .content { padding-bottom: var(--safe-b) !important; }
  .view { padding-bottom: var(--s6) !important; }
  .scrivi, .composer { bottom: calc(var(--s3) + var(--safe-b)) !important; }
  .live-avviso { bottom: calc(var(--s5) + var(--safe-b)) !important; }
  /* la tendina parte da sopra: non deve piu' lasciare spazio a nulla sotto */
  .foglio { bottom: 0 !important; }
}

/* ============================================================================
   24 · STEMMA IN RILIEVO + TENDINA COMPLETA (telefono)
   Lo stemma era chiuso in un riquadro grigio: sembrava un bottone qualunque.
   Ora e' il marchio, in rilievo, e quando apri la tendina si accende mentre
   tutto il resto sfuma indietro -- si capisce dove sei senza leggere niente.
   ========================================================================== */
@media (max-width: 860px) {
  /* stemma: nessun riquadro, solo il simbolo in rilievo */
  .appbar-stemma {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    filter: drop-shadow(0 2px 4px rgba(16,24,40,.22));
    transition: transform .18s cubic-bezier(.2,.7,.3,1), filter .18s ease;
  }
  .appbar-stemma:active { transform: scale(.94); }
  .appbar-mark { color: var(--accent); }

  /* aperto: il marchio si accende, il resto si opacizza */
  .appbar-stemma[aria-expanded="true"] {
    transform: scale(1.06);
    filter: drop-shadow(0 0 10px color-mix(in srgb, var(--accent) 55%, transparent))
            drop-shadow(0 2px 6px rgba(16,24,40,.28));
  }
  body:has(.foglio:not([hidden])) .content,
  body:has(.foglio:not([hidden])) .appbar-ks,
  body:has(.foglio:not([hidden])) .appbar-tema {
    opacity: .38;
    filter: saturate(.65);
    transition: opacity .22s ease, filter .22s ease;
  }
  .content, .appbar-ks, .appbar-tema { transition: opacity .22s ease, filter .22s ease; }

  /* la tendina: sezioni leggibili, voce corrente evidente */
  .foglio-sez {
    font-size: var(--fs-0); font-weight: 700; letter-spacing: var(--ls-caps);
    text-transform: uppercase; color: var(--text-3);
    margin: var(--s4) 0 var(--s2);
  }
  .foglio-sez:first-of-type { margin-top: 0; }
  .foglio-griglia a.on {
    background: var(--accent); color: var(--accent-ink); font-weight: 660;
  }
  /* il velo scurisce meno: l'opacizzazione la fa gia' il contenuto */
  .velo--foglio { background: rgba(6,9,18,.34); backdrop-filter: blur(2px); }
}
@media (prefers-reduced-motion: reduce) {
  .appbar-stemma, .content, .appbar-ks, .appbar-tema { transition: none; }
}

/* --- intestazione di marca dentro la tendina -------------------------------- */
@media (max-width: 860px) {
  .foglio-brand { display:flex; align-items:center; gap:10px; margin-bottom:var(--s5);
    padding-bottom:var(--s4); border-bottom:1px solid var(--line); }
  .foglio-mark { color:var(--accent); display:flex;
    filter:drop-shadow(0 2px 4px rgba(16,24,40,.18)); }
  .foglio-nome { display:flex; flex-direction:column; gap:2px; }
  .foglio-word { font-size:var(--fs-3); font-weight:700; letter-spacing:.18em; color:var(--text); }
  .foglio-sub { font-size:8px; font-weight:600; letter-spacing:.2em;
    text-transform:uppercase; color:var(--text-3); }
}

/* --- Chat fra persone: ricerca, gruppi, non letti ----------------------- */
.chat-cerca { display: flex; gap: 6px; padding: 8px 10px; position: relative; }
.chat-cerca input[type="search"] {
  flex: 1; min-width: 0; padding: 6px 8px; font-size: 13px;
  background: var(--surface-3); color: var(--text);
  border: 1px solid var(--line); border-radius: 6px;
}
.chat-nuovo-gruppo { white-space: nowrap; font-size: 12px; padding: 6px 8px; }
.chat-risultati {
  position: absolute; top: 100%; left: 10px; right: 10px; z-index: 20;
  background: var(--surface); border: 1px solid var(--line-2);
  border-radius: 6px; overflow: hidden; box-shadow: 0 6px 18px rgba(0,0,0,.35);
}
.chat-risultato {
  display: block; width: 100%; text-align: left; padding: 8px 10px;
  background: none; border: 0; color: var(--text); font-size: 13px; cursor: pointer;
}
.chat-risultato:hover { background: var(--surface-3); }
.chat-gruppo-form { padding: 8px 10px; display: grid; gap: 6px; }
/* `display:grid` batte l'attributo hidden dell'HTML: senza questa riga il
   modulo del nuovo gruppo resta aperto sempre, e la colonna sinistra si apre
   con dentro un modulo che nessuno ha chiesto. */
.chat-gruppo-form[hidden] { display: none; }
.chat-risultati[hidden] { display: none; }
/* Anche il selettore del destinatario e' un figlio del composer con un
   display suo: senza questa riga, l'attributo hidden non lo nasconde e
   "AUTO - scegli tu" resta sotto una conversazione fra persone. */
/* Scrivendo a una persona non si sceglie un agente destinatario. */
.chat-composer--persone select { display: none; }
.chat-composer--persone { grid-template-columns: minmax(0,1fr) auto; }
.chat-gruppo-form input[type="text"] {
  padding: 6px 8px; background: var(--surface-3); color: var(--text);
  border: 1px solid var(--line); border-radius: 6px; font-size: 13px;
}
.chat-gruppo-membri { display: grid; gap: 4px; font-size: 13px; color: var(--text-2); }
.chat-gruppo-membri label {
  display: flex; align-items: center; gap: 8px; cursor: pointer;
}
/* Le caselle ereditavano la larghezza dei campi del modulo e diventavano
   quadrati enormi accanto a un nome piccolo. */
.chat-gruppo-membri input[type="checkbox"] {
  width: 15px; height: 15px; flex: none; margin: 0;
}
/* Il pallino dei non letti: numero, non un puntino muto -- "3" dice quanto
   sei indietro, un puntino no. */
.chat-nonletti {
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
  background: var(--accent, #6c8ae4); color: #fff; font-size: 11px;
  font-weight: 600; display: inline-flex; align-items: center;
  justify-content: center; margin-left: auto;
}