/* ═══════════════════════════════════════════════════════════════════════════
   CONSOLE AC-ASSISTENZA · console.css
   Identita' «Readout Clinico», la stessa del pannello Admin di AC-Ordini, con le
   regole vincolanti di docs/DESIGN.md (direzione B «Superfici a livelli»).
   ---------------------------------------------------------------------------
   Regole della casa (DESIGN §1):
   · livelli, non riquadri: fondo (L0 --paper), carte e fogli (L1 --e1), UNA carta
     principale per vista (L2 --e2), cio' che galleggia (L3 --e3);
   · il colore e' un significato (Max Bill, SPEC §25): arancio = qualcuno aspetta noi, viola =
     aspettiamo il cliente, verde = in linea / fatta / risolta, rosso = urgente e non letti,
     blu cobalto = il lavoro e l'azione principale; il resto inchiostro e grigi;
   · un solo pulsante pieno per vista (in chiamata e' quello della barra: «Sì», poi «Ho chiuso»);
   · stato = forma + parola, mai solo colore;
   · niente vetro, glow, gradienti decorativi; transizioni <= 200 ms.
   Pensata da 1280 px (regge fino a 1024). Sotto i 900 px niente impaginazione
   telefono: l'invito «Sul telefono usa l'app AC-Assistenza» (.invito-app).
   Font (in <head> di console.html): IBM Plex Sans 400-700 e IBM Plex Mono 500-700.
   Icone: console-icone.js (icon(nome, cls) restituisce <span class="ui-ic">…</span>).

   ═══════════════════════════════════════════════════════════════════════════
   CATALOGO DELLE CLASSI
   console.html e i moduli (console-inizio.js, console-coda.js,
   console-download.js, console-risposte.js, console-squadra.js e quelli di
   Amministrazione) usano SOLO queste classi, piu' il loro stile proprio
   dichiarato in testa al modulo (classi col loro prefisso: ini-*, cd-*, rsp-*,
   sq-*…). Nessuno stile in linea, salvo la classe colore op-0 … op-7, la
   posizione dei menu a comparsa (style.top/left) e l'altezza del compositore
   (style.height, solo dove field-sizing:content non c'e').
   ───────────────────────────────────────────────────────────────────────────

   0. UTILITA'
     .sr  .mono  .num  .muto  .eyebrow  .dx  .tronca  .a-capo  .fila  .pila  .punti
     [hidden] nasconde sempre · .ui-ic (icona; .ic-lg 19px, .ic-xl 32px) · .rotella
     <span class="num-r">n. <b>1163</b></span>   numero di richiesta: «n.» nel testo, cifre mono

   1. TESTATA (86 px, una riga, logo 74 px a ogni larghezza: SPEC §15)
     <header class="app-top">
       <div class="top-sx">
         <img class="top-logo" src="logo-abutment-2x.png" alt="AbutmentCompatibili.com">
         <span class="top-titolo">AC-Assistenza</span>
         <nav class="caselle" aria-label="Sezioni">
           <button class="casella" aria-current="page" data-casella="inizio">${icon('home')}<span class="eti">Inizio</span></button>
           <button class="casella fl-cas fl-cad" data-casella="cad"><span class="fl-ic piccolo">…</span><span class="eti">Assistenza CAD</span><span class="c">5</span></button>
           … Riconoscimenti · Assistenza commerciale (.fl-ric, .fl-com; .aspetta = numero in ambra) · Mie ·
           <button class="casella admin">Amministrazione</button> (solo admin)   (§39f: niente piu' Richieste, Coda e quadro)
         </nav></div>
       <div class="top-dx">
         <button class="top-ico campana">${icon('bell')}<span class="pall">2</span></button>
         <button class="top-ico io" aria-haspopup="menu"><span class="avatar op-0">FR</span><span class="io-punto"></span></button>
       </div>
       <span class="demo-chip">Demo: dati finti</span>
     </header>
     <p class="rete-avviso" role="alert">Server non raggiungibile: riprovo fra poco.</p>   (§4.12)
     Sotto 1400 px sparisce «AC-Assistenza»; sotto 1240 px
     le caselle restano solo icona (con title).

   2. CORPO E SEZIONI
     <main class="app-body">  <section class="split">Richieste</section>
       <section class="sezione" data-sezione="inizio|coda|amministrazione"><div class="sezione-int">…</div></section>
     .sezione-int     contenitore largo al massimo 1180 px (Inizio: tutta la larghezza)
     .sez-testa · <h1 class="sez-tit">${icon} Titolo</h1> · .gruppo-tit
     AMMINISTRAZIONE (solo admin, SPEC §24): <section class="sezione adm">
       <div class="adm-testa"><h1 class="sez-tit">…</h1><div class="adm-tabs" role="tablist">
         <button class="adm-tab" role="tab" aria-selected="true">Orari e chiusure</button>…</div></div>
       <div class="adm-pannello" role="tabpanel"><div class="sezione-int">modulo</div></div>

   3. RICHIESTE: LISTA A SINISTRA (400 px, 380 sotto i 1400), SCHEDA A DESTRA
     <div class="lista-col"><div class="lista-testa">
       <button class="btn tenue|primario prossima-btn">${icon('hand')}Prendi in carico la prossima<span class="past">n. 1162</span></button>
       <div class="in-carico"><span class="eti-up">In carico a te</span>
         <button class="chip-tu on">${pt vivo|aspetta}${icon('phone')}<span class="mono">1164</span> Colombo</button></div>
       <nav class="linguette"><button class="linguetta" aria-current="true">Mie <span class="pt-ambra"></span><span class="c">2</span></button>…</nav>
       <div class="cerca-riga"><label class="cerca"><input type="search"></label><button class="btn">Nuova</button><button class="btn">Registra</button></div>
     </div><div class="lista">…</div>
     <div class="lista-piede"><span>Aggiornato alle 15:22</span><button class="link-btn" aria-current="true|">Altre viste</button></div></div>
     <div class="lista-gruppo"><span>In ordine di arrivo</span><span>attesa stimata circa 50 min</span></div>
     RIGA (un <button>, solo <span> dentro):
     <button class="riga con-pos [selezionata] [non-letta] e-attesa|e-lavora|e-aspetta">
       <span class="riga-pos">1°</span>  oppure  <span class="riga-pos segno lavora|aspetta|cliente|attesa|risolta|annullata|tel"><span class="sg"></span></span>
       <span class="riga-testa"><span class="prio-punto prio-urgente"></span><span class="riga-ogg">Oggetto</span></span>
       <span class="riga-dx"><span class="riga-quando">5 min</span> | <span class="riga-attesa [lungo]">da 1 h 24 min</span>
         | <span class="riga-aspetta [lungo]">Aspetta da 20 min</span> | <span class="riga-tocca">Tocca al cliente</span>
         | <span class="riga-tel">In chiamata · 02:15</span><span class="pallino"></span></span>
       <span class="riga-chi"><span class="riga-meta-testo punti"><span class="riga-num">n. <b>1162</b></span><span>Nome</span>…</span></span>
       <span class="riga-meta"><span class="riga-ic">${icon('phone')}</span>…</span></button>
     Le righe dei moduli (senza .con-pos) restano su due colonne. .riga-pos.primo = il prossimo.

   4. STATI, CHIP, PILLOLE, AVATAR (DESIGN §2.3, §4.2)
     <span class="chip [lavora|aspetta [forte]|cliente|urgente|risolta|attesa|vivo]"><span class="segno"></span>Parola</span>
     varianti dei moduli: .libera .info .ok .err .nota .canale .reg
     button.chip[aria-pressed="true"] = filtro acceso
     <span class="pill stato-in_carico">In lavorazione</span> · <span class="pill neutra">v2.1</span>
     .stato-* (nuovo, in_carico, attesa_cliente, risolto, annullato) e .prio-* danno --st
     <span class="avatar [piccolo] op-3">LE</span> · .avatars · .av-stato[.on .occ]
     <span class="pallino"></span>   rosso: da leggere

   5. SCHEDA DELLA RICHIESTA
     <div class="dettaglio">
       <div class="dett-avvisi"><div class="dett-avviso nonletto|mandato|dopo|sug|richiamo">…</div></div>   al massimo UNA riga
       <section class="dett-testa">                                     L2, la carta principale
         <div class="t-r1"><span class="num-r">n. <b>1164</b></span><h1 class="dett-ogg">…</h1><span class="t-chip">chip…</span></div>
         <p class="t-chi"><b>Anna Colombo</b> · studio · città · tipo</p>
         <p class="t-meta punti"><span>Arrivata alle <b>14:44</b></span>…<span class="fant">Per gli altri clienti è «Alice»</span></p>
         <div class="t-az" role="toolbar">.btn … <span class="t-chi-lavora">Ci lavorano <span class="avatars">…</span></span></div>
       </section>
       <div class="dett-corpo">  <section class="foglio fam-cliente pieno conv-foglio">…</section>  <div class="dett-lato">fogli</div>  </div>
     </div>
     «LA RICHIESTA» (primo elemento dello scorrimento della conversazione):
       <article class="la-richiesta"><div class="lr-testa">…</div><div class="lr-campi">…</div><div class="lr-testo">…</div>
         <div class="lr-file"><button class="th">img</button><button class="th doc">log.txt</button></div></article>
       <div class="lr-fissa"><button>La richiesta · oggetto · Apri</button></div>   quando esce dalla vista
     FOGLI (vanno bene anche nelle sezioni)
       <section class="foglio fam-lavoro"><h3 class="foglio-testa">${icon}<span>Titolo</span><span class="foglio-stato">…</span></h3>…</section>
       <details class="foglio fam-rif"><summary class="foglio-testa">…</summary><div class="foglio-corpo">…</div></details>
       Famiglie: fam-lavoro · fam-cliente · fam-gest · fam-note · fam-rif
       .foglio.pieno = senza margini interni (conversazione) · .foglio-sotto · <dl class="kv">
     FOGLIO CHIAMATA: .btn.primario.chiama-btn (o .in-corso «● In chiamata 02:15») · .ch-alt (WhatsApp, Video)
       · .ch-numero · .ch-storico > .ch-riga (ora mono, chi, canale, esito, durata, nota)
     FOGLIO FILE: .zona (rilascio compatto) · .sotto (Dal cliente · 3) · .f-mini > .th (miniature 52 px)

   6. CHAT
     <div class="conv"> scorre · <div class="chat-giorno">Oggi</div>
       <div class="bolla cliente|operatore|nota|sistema [nota]"><div class="bolla-chi">…</div><div class="bolla-testo">…</div>
         <div class="bolla-img"><button class="miniatura [pronta] [senza]" data-cornice>…</button></div>
         <div class="bolla-file"><button class="file-chip">…</button></div><div class="bolla-ora">15:20</div></div>
       <div class="dl-card">…</div> · <div class="bolla-link"><a class="file-chip link">…</a></div>
     COMPOSITORE: <div class="composer [interno]"><div class="composer-allegati"></div><div class="composer-mancanti"></div>
       <textarea class="composer-testo"></textarea><div class="composer-barra"><span class="seg" role="tablist">
       <button class="comp-tab" aria-selected="true">Al cliente</button><button class="comp-tab nota">Nota interna</button></span>
       <button class="btn testo icona">…</button> … <button class="btn comp-invia [primario|nota]">Invia</button></div></div>

   7. INVIO FILE (moduli e scheda)
     <label class="drop [sopra] [compatta] [spento]"><input type="file">…<span class="drop-tit">…</span><span class="drop-sub">…</span></label>
     <div class="files"><div class="file-riga in-coda|carico|fatto|errore [interno]">.file-ic .file-nome .file-info .file-az
       <progress class="barra"></progress> .file-errore</div></div>

   8. PULSANTI (DESIGN §4.1: UN pieno per vista)
     .btn · .btn.primario · .btn.tenue · .btn.testo (= .ghost) · .btn.pericolo [.pieno] · .btn.ok (verde tenue)
     · .btn.nota (giallo) · .btn.piccolo · .btn.icona · .btn.largo · .past (n. nel pulsante)
     · .btn.fatta (verde pieno, solo nella barra della chiamata) · .link-btn · .azioni
   9. CAMPI: .campi .campo[.pieno .obbligatorio .errore] .campo-eti .campo-aiuto .campo-errore
     .in[.piccolo] · .check · .segmenti · .switch[.nota]
   10. AVVISI: .banner info|warn|ok|err
   11. MODALE: .modale-ov > .modale[.largo] > .modale-testa (.modale-tit .modale-sotto .modale-chiudi) .modale-corpo .modale-piede
   12. MENU A COMPARSA: .pop[.largo] .pop-tit .pop-cerca .pop-voce[.on .pericolo] .pop-testo .pop-nome .pop-cosa .pop-spunta
       .pop-sep .pop-corpo .pop-piede .pop-vuoto · Per te: .avv[.nuovo .visto] .avv-ic .avv-corpo .avv-tit .avv-testo .avv-meta
       .avv-conta · .perte-sez («Da fare», «Già visti») · .avv-riga > .avv + .btn.avv-prendo («Prendo io»)
   13. TOAST: .toast[.ok .err .warn .show] (fondo notte, in basso al centro, sopra la barra) · .toast-az
   14. STATI DELLA PAGINA: .vuoto[.compatto .riquadro] .vuoto-tit .vuoto-testo · .sk .sk-riga .sk-titolo .sk-testo .sk-corto .sk-blocco
       · .plancia > .plancia-box (.plancia-logo .plancia-tit .plancia-sotto)
   15. ELENCHI: .elenco > .voce[.spenta .cliccabile .scelta] (.voce-ic .voce-corpo .voce-tit .voce-sub .voce-meta .voce-az)
   16. TABELLE: .tab-wrap > table.tab (th, td.num)
   17. BARRA DELLA CHIAMATA (L3, DESIGN §4.5): <div class="barra-chiamata" role="region">.bc-vivo .bc-chi .bc-tempo
       .bc-nota .bc-az (.btn.fatta .btn.scuro .btn.annulla)</div>; body.in-chiamata tiene lo spazio sotto.
   18. DEMO: .demo-chip nella testata.
   19. INVITO SOTTO I 900 PX: <div class="invito-app"><div class="invito-box">logo · titolo · Apri l'app</div></div>
   20. REGISTRATE E SCHEDA CLIENTE (SPEC §18): .chip.reg · .cli-scheda .cli-rs .cli-sub .cli-come · .cli-sug[.forte]
       · .altre > .altra (.altra-su .altra-ogg .altra-giu .altra-tipo) · .reg-risultati .reg-durata .reg-chip
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── TOKEN (DESIGN §2.1) ───────────────────────────────────────────────── */
:root{
  color-scheme: light;
  --font:'IBM Plex Sans','Segoe UI',system-ui,-apple-system,Arial,sans-serif;
  --mono:'IBM Plex Mono','SFMono-Regular',ui-monospace,Menlo,monospace;
  --paper:#F1EEE6; --white:#FFFFFF; --pearl:#F5F3EE; --light:#F8F7F3;
  --hairline:#E8E4DA; --border:#D9D4C8; --bordo-campo:#8494A6;
  --ink:#131A24; --dark:#131A24; --mid:#414A57; --gray:#5F6B7A;
  --canale:#1F4FA3; --canale-chiaro:#E8EEF9; --canale-scuro:#163A78;
  --amber:#E07A10; --amber-scuro:#9A4B00; --amber-light:#FDEDD8;
  --violet:#7B2D78; --violet-scuro:#5A1F57; --violet-light:#F5E7F3;
  --green:#2E8A3F; --green-scuro:#247032; --green-light:#E3F2E5; --green-testo:#1A4D25;
  --red:#D3291F; --red-scuro:#A61D15; --red-light:#FBE5E2;
  --slate:#94A3B8; --slate-scuro:#475569; --slate-light:#F1F5F9;
  --notte:#172046; --notte-2:#2B3868; --notte-testo:#B5BEDB;
  --nota:#FFF9E6; --nota-anello:#F3D27A; --nota-testo:#6B4700;
  /* Il blu resta solo per i link di riserva dei moduli: il colore dell'operatore e' il canale. */
  --blue:#1F4FA3; --blue-dark:#163A78; --blue-deep:#122F63; --blue-light:#E8EEF9;
  --sh:21,38,62;
  --e1:0 0 0 1px rgba(var(--sh),.06), 0 1px 2px rgba(var(--sh),.06);
  --e2:0 0 0 1px rgba(var(--sh),.05), 0 2px 4px rgba(var(--sh),.05), 0 8px 20px rgba(var(--sh),.08);
  --e3:0 8px 28px rgba(var(--sh),.18);
  --r-chip:999px; --r-btn:8px; --r-pozzetto:10px; --r-foglio:12px; --r-l2:14px;
  --topbar:86px; --logo-h:74px; --barra-chiamata:64px;
  --lista-w:400px; --lato-w:352px;
  /* Tavolozza Max Bill (15/10/2026): colori pieni e puri su carta calda. */
  --turchese:#00968C; --turchese-scuro:#00534D; --turchese-light:#DDF3F0; --giallo:#F2B705;
  --magenta:#B3245C; --magenta-scuro:#7D1740; --magenta-light:#FAE6EE;
  --fascia:linear-gradient(90deg, #1F4FA3 0 24%, #D3291F 24% 36%, #E07A10 36% 54%, #F2B705 54% 62%,
          #2E8A3F 62% 74%, #00968C 74% 88%, #7B2D78 88% 100%);
}

/* ── BASE ──────────────────────────────────────────────────────────────── */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html,body{ height:100%; background:var(--paper); }
body{
  font-family:var(--font); color:var(--ink); font-size:13px; line-height:1.45;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow:hidden;
}
button,input,select,textarea{ font-family:inherit; font-size:inherit; color:inherit; }
button{ cursor:pointer; }
a{ color:var(--canale-scuro); }
h1,h2,h3,h4{ font-weight:700; }
img{ max-width:100%; }
[hidden]{ display:none !important; }
:focus-visible{ outline:2px solid var(--canale); outline-offset:2px; }
::selection{ background:var(--canale-chiaro); color:var(--canale-scuro); }

.sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.mono{ font-family:var(--mono); font-variant-numeric:tabular-nums lining-nums; }
.num{ font-variant-numeric:tabular-nums lining-nums; }
.muto{ color:var(--mid); font-size:12px; line-height:1.5; }
.eyebrow{ font-size:11px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--gray); }
.dx{ margin-left:auto; }
.tronca{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; }
.a-capo{ white-space:pre-wrap; overflow-wrap:anywhere; }
.fila{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; min-width:0; }
.pila{ display:flex; flex-direction:column; gap:8px; min-width:0; }
.punti > * + *::before{ content:"·"; margin:0 6px; color:var(--gray); font-weight:400; }
.num-r{ white-space:nowrap; color:var(--canale-scuro); }
.num-r b{ font-family:var(--mono); font-weight:600; font-variant-numeric:tabular-nums; }

.ui-ic{ display:inline-flex; align-items:center; justify-content:center; vertical-align:-.16em; flex:none; }
.ui-ic svg{ width:16px; height:16px; display:block; }
.ui-ic.ic-lg svg{ width:19px; height:19px; }
.ui-ic.ic-xl svg{ width:32px; height:32px; }

.rotella{
  display:inline-block; width:14px; height:14px; flex:none; border-radius:50%;
  border:2px solid var(--border); border-top-color:var(--canale);
  animation:gira .8s linear infinite; vertical-align:-2px;
}
@keyframes gira{ to{ transform:rotate(360deg); } }
@keyframes fadeIn{ from{ opacity:0; } to{ opacity:1; } }
@keyframes slideUp{ from{ transform:translateY(10px); opacity:0; } to{ transform:none; opacity:1; } }
@keyframes skPulse{ 50%{ opacity:.45; } }

/* ── APP: testata, riga di rete, corpo ─────────────────────────────────── */
#app{ height:100vh; height:100dvh; display:flex; flex-direction:column; }

/* ── 1. TESTATA ────────────────────────────────────────────────────────── */
.app-top{
  position:relative; z-index:100; flex:none;
  height:var(--topbar); padding:0 24px 0 20px; gap:16px;
  display:flex; align-items:center; justify-content:space-between;
  background:#fff; box-shadow:0 6px 16px -10px rgba(var(--sh),.22);
}
/* La fascia di Bill sotto la testata: sette colori pieni, in proporzioni diverse. */
.app-top::after{ content:""; position:absolute; left:0; right:0; bottom:-4px; height:4px; background:var(--fascia); pointer-events:none; }
.top-sx{ display:flex; align-items:center; gap:16px; min-width:0; }
.top-logo{ height:var(--logo-h); width:auto; display:block; flex:none; }
.top-titolo{
  font-size:15px; font-weight:600; color:var(--canale-scuro); white-space:nowrap;
  padding-left:16px; box-shadow:inset 1px 0 0 var(--hairline); line-height:34px;
}
.caselle{ display:flex; gap:2px; padding:3px; background:var(--pearl); border-radius:10px; min-width:0; }
.casella{
  display:inline-flex; align-items:center; gap:7px; height:34px; padding:0 12px; border:0; border-radius:7px;
  background:transparent; font-size:13px; font-weight:500; color:var(--mid); white-space:nowrap;
  transition:background .12s ease-out, color .12s ease-out;
}
.casella:hover{ background:#fff; color:var(--ink); }
.casella[aria-current="page"]{ background:var(--canale); color:#fff; font-weight:600; box-shadow:0 1px 2px rgba(15,23,42,.18); }
.casella .c{
  font-family:var(--mono); font-size:11px; font-weight:600; min-width:18px; height:18px; padding:0 5px; border-radius:9px;
  display:inline-grid; place-items:center; background:#fff; color:var(--ink);
}
.casella .c:empty{ display:none; }
.casella[aria-current="page"] .c{ background:var(--canale-scuro); color:#fff; }
.casella.admin:not([aria-current="page"]){ color:var(--slate-scuro); }
/* §39f: le caselle dei flussi, col quadratino del flusso; accese prendono il loro colore. Il
   numero dice quanti aspettano noi; per la posta in ambra quando qualcuno aspetta. */
.casella.fl-cas[aria-current="page"]{ background:var(--fl); }
.casella.fl-cas[aria-current="page"] .fl-ic{ background:rgba(255,255,255,.2); }
.casella.fl-cas[aria-current="page"] .c{ background:var(--fl-scuro); }
.casella.aspetta:not([aria-current="page"]) .c{ background:var(--amber-light); color:var(--amber-scuro); }
.casella .pt-ambra{ margin-left:-2px; }
.top-dx{ display:flex; align-items:center; gap:8px; flex:none; }
.top-ico{
  position:relative; width:40px; height:40px; border:0; border-radius:var(--r-btn); padding:0;
  display:grid; place-items:center; background:transparent; color:var(--mid); flex:none;
}
.top-ico:hover{ background:var(--light); color:var(--ink); }
.top-ico[aria-expanded="true"]{ background:var(--canale-chiaro); color:var(--canale-scuro); }
.top-ico .ui-ic svg{ width:19px; height:19px; }
.pall{
  position:absolute; top:4px; right:3px; min-width:17px; height:17px; padding:0 4px; border-radius:9px;
  background:var(--red); color:#fff; font-size:10.5px; font-weight:600; line-height:17px; text-align:center;
  box-shadow:0 0 0 2px #fff; font-variant-numeric:tabular-nums;
}
.pall:empty{ display:none; }
.top-ico.io .avatar{ width:32px; height:32px; font-size:12px; box-shadow:none; }
.io-punto{
  position:absolute; right:3px; bottom:3px; width:10px; height:10px; border-radius:50%;
  background:var(--green); box-shadow:0 0 0 2px #fff;
}
.top-ico.io.offline .io-punto{ background:var(--bordo-campo); }
.pop-io-testa{ display:flex; align-items:center; gap:10px; padding:8px 8px 10px; }
.pop-io-testa .avatar{ width:32px; height:32px; font-size:12px; }
.pop-io-nome{ font-size:13.5px; font-weight:600; color:var(--ink); }
.pop-io-cosa{ font-size:12px; color:var(--gray); }
.demo-chip{
  position:absolute; top:4px; right:12px; z-index:2; display:inline-flex; align-items:center; gap:4px;
  height:17px; padding:0 7px; border-radius:var(--r-chip); background:var(--amber-light); color:var(--amber-scuro);
  font-size:11px; font-weight:600; line-height:1; white-space:nowrap; pointer-events:none;
}
.demo-chip .ui-ic svg{ width:11px; height:11px; }
/* La rete: una riga sottile sotto la testata, mai una finestra (DESIGN §4.12). */
.rete-avviso{
  flex:none; display:flex; align-items:center; gap:8px; min-height:32px; padding:6px 24px;
  background:var(--amber-light); color:var(--amber-scuro); font-size:12.5px; font-weight:600;
  box-shadow:inset 0 -1px 0 #FDE68A;
}

/* ── 2. CORPO E SEZIONI ───────────────────────────────────────────────── */
.app-body{ position:relative; flex:1 1 auto; min-height:0; overflow:hidden; }
.sezione{ height:100%; overflow-y:auto; padding:14px 24px 28px; }
.sezione-int{ max-width:1180px; margin:0 auto; }
.sezione[data-sezione="inizio"] .sezione-int{ max-width:none; }
body.in-chiamata .sezione{ padding-bottom:calc(var(--barra-chiamata) + 32px); }
.sez-testa{ display:flex; align-items:center; gap:10px 14px; flex-wrap:wrap; margin-bottom:14px; }
.sez-tit{ font-size:18px; font-weight:600; letter-spacing:-.01em; color:var(--ink); display:flex; align-items:center; gap:8px; }
.sez-tit .ui-ic svg{ width:19px; height:19px; color:var(--canale); }
.gruppo-tit{
  font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--canale-scuro); margin:18px 0 8px; display:flex; align-items:center; gap:10px;
}
.gruppo-tit:first-child{ margin-top:0; }
.gruppo-tit::after{ content:""; flex:1; height:1px; background:var(--hairline); }
.gruppo-tit .n{ font-family:var(--mono); font-weight:600; color:var(--gray); letter-spacing:0; }

/* Amministrazione (solo admin, SPEC §24): linguette, un foglio per linguetta. */
.adm-testa{ max-width:1180px; margin:0 auto 14px; display:flex; align-items:center; gap:12px 18px; flex-wrap:wrap; }
.adm-tabs{ display:flex; gap:2px; padding:3px; background:#fff; border-radius:10px; box-shadow:var(--e1); flex-wrap:wrap; }
.adm-tab{
  display:inline-flex; align-items:center; gap:7px; height:34px; padding:0 12px; border:0; border-radius:7px;
  background:transparent; font-size:13px; font-weight:500; color:var(--mid); white-space:nowrap;
}
.adm-tab .ui-ic svg{ width:15px; height:15px; }
.adm-tab:hover{ background:var(--light); color:var(--ink); }
.adm-tab[aria-selected="true"]{ background:var(--canale-chiaro); color:var(--canale-scuro); font-weight:600; box-shadow:inset 0 0 0 1px #BCCBEA; }
.adm-nota{ font-size:12px; color:var(--gray); }

/* ── 3. RICHIESTE ─────────────────────────────────────────────────────── */
.split{ display:grid; grid-template-columns:var(--lista-w) minmax(0,1fr); height:100%; min-height:0; }
.lista-col{ display:flex; flex-direction:column; min-height:0; min-width:0; background:#fff; box-shadow:1px 0 0 var(--border); position:relative; z-index:1; }
body.in-chiamata .lista-col{ padding-bottom:calc(var(--barra-chiamata) + 16px); }
.lista-testa{ padding:14px 16px 0; display:flex; flex-direction:column; gap:10px; }
.btn.prossima-btn{ width:100%; height:42px; justify-content:flex-start; padding:0 7px 0 13px; font-size:13.5px; border-radius:10px; }
.btn.prossima-btn .ui-ic svg{ width:18px; height:18px; }
.btn.prossima-btn .past{ margin-left:auto; }
.btn.prossima-btn.vuota .past{ display:none; }
/* «In carico a te» su UNA riga: con tre chip l'etichetta si toglie (resta l'aria-label del
   gruppo) e i cognomi si accorciano coi puntini; il «+2» non si stringe mai. Il margine
   negativo tiene intero l'anello del fuoco. */
.in-carico{ display:flex; align-items:center; gap:6px; flex-wrap:nowrap; min-width:0; overflow:hidden; padding:4px; margin:-4px; }
.in-carico.molte .eti-up{ display:none; }
.in-carico .chip-tu{ flex:0 1 auto; }
.in-carico .chip-tu.piu,.in-carico .chip-tu .pt,.in-carico .chip-tu .ui-ic,.in-carico .chip-tu .mono{ flex:none; }
.eti-up{ font-size:11px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--gray); margin-right:2px; white-space:nowrap; }
.chip-tu{
  display:inline-flex; align-items:center; gap:6px; height:30px; padding:0 10px; border:0; border-radius:var(--r-chip);
  background:#fff; box-shadow:inset 0 0 0 1px var(--border); font-size:12.5px; color:var(--ink); white-space:nowrap; min-width:0;
}
.chip-tu:hover{ box-shadow:inset 0 0 0 1px var(--bordo-campo); }
.chip-tu .ui-ic svg{ width:14px; height:14px; color:var(--canale); }
.chip-tu .mono{ font-weight:600; }
.chip-tu .cognome{ min-width:0; overflow:hidden; text-overflow:ellipsis; }
.chip-tu.on{ background:var(--canale-chiaro); box-shadow:inset 0 0 0 1.5px var(--canale); color:var(--canale-scuro); font-weight:600; }
.pt{ width:8px; height:8px; flex:none; display:inline-block; }
.pt.vivo{ border-radius:50%; background:var(--green); box-shadow:0 0 0 3px rgba(46,138,63,.18); }
.pt.aspetta{ border-radius:2px; background:var(--amber); }
.linguette{ display:flex; flex-wrap:wrap; align-items:stretch; margin:0 -16px; padding:0 8px 0 10px; box-shadow:inset 0 -1px 0 var(--hairline); }
.linguetta{
  display:inline-flex; align-items:center; gap:4px; height:34px; padding:0 5px; border:0; background:none; flex:none;
  font-size:13px; font-weight:500; color:var(--mid); white-space:nowrap; box-shadow:inset 0 -2px 0 transparent;
}
.linguetta:hover{ color:var(--ink); }
.linguetta[aria-current="true"]{ color:var(--ink); font-weight:600; box-shadow:inset 0 -2px 0 var(--canale); }
.linguetta .c{ font-family:var(--mono); font-size:11px; font-weight:600; color:var(--gray); background:var(--pearl); border-radius:8px; padding:0 4px; min-width:17px; text-align:center; line-height:18px; }
.linguetta .c:empty{ display:none; }
.linguetta[aria-current="true"] .c{ background:var(--canale); color:#fff; }
.pt-ambra{ width:7px; height:7px; border-radius:2px; background:var(--amber); flex:none; }
/* La testa della lista di un flusso: il suo nome nel suo colore. */
.lista-gruppo.fl-gruppo{ color:var(--fl-scuro); }
.lista-gruppo.fl-gruppo > span:first-child{ display:inline-flex; align-items:center; gap:7px; }
.lista-gruppo.fl-gruppo > span:first-child::before{ content:""; width:8px; height:8px; border-radius:2px; background:var(--fl); flex:none; }
.lista-gruppo.fl-gruppo > span + span{ color:var(--gray); }
.cerca-riga{ display:flex; gap:6px; padding:10px 0 12px; }
.cerca{ position:relative; flex:1 1 auto; min-width:0; display:flex; align-items:center; }
.cerca::before{
  content:""; position:absolute; left:11px; width:11px; height:11px; pointer-events:none;
  border:1.6px solid var(--gray); border-radius:50%; box-shadow:3px 3px 0 -1.1px var(--gray); transform:translateY(-1px);
}
.cerca input{
  width:100%; height:36px; padding:0 10px 0 31px; font-size:13px; color:var(--ink);
  border:0; border-radius:var(--r-btn); background:#fff; box-shadow:inset 0 0 0 1px var(--bordo-campo); outline:none;
  transition:box-shadow .15s ease-out;
}
.cerca input:focus{ box-shadow:inset 0 0 0 1.5px var(--canale), 0 0 0 3px rgba(31,79,163,.18); }
.cerca input::placeholder{ color:var(--gray); }
.cerca-riga .btn{ flex:none; }
.lista{ flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain; box-shadow:inset 0 1px 0 var(--hairline); }
.lista-gruppo{
  display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 16px 6px; white-space:nowrap;
  font-size:11px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--gray);
}
.lista-gruppo + .riga{ border-top-color:var(--hairline); }
.lista-gruppo > span{ min-width:0; overflow:hidden; text-overflow:ellipsis; }
.lista-gruppo > span:first-child{ flex:none; }
.lista-piede{ flex:none; display:flex; align-items:center; justify-content:space-between; gap:10px; padding:6px 16px; min-height:34px;
  font-size:12px; color:var(--gray); box-shadow:inset 0 1px 0 var(--hairline); background:var(--light); }
.lista-piede .link-btn{ font-size:12px; text-decoration:none; }
.lista-piede .link-btn[aria-current="true"]{ text-decoration:underline; }
.lista-gruppo .link-btn{ font-size:11px; letter-spacing:0; text-transform:none; text-decoration:none; }
.lista-nota{
  display:flex; align-items:flex-start; gap:7px; padding:8px 16px; font-size:12px; line-height:1.45; color:var(--mid);
  background:var(--slate-light); box-shadow:inset 0 -1px 0 var(--hairline);
}
.lista-nota > .ui-ic{ flex:none; margin-top:1px; color:var(--slate-scuro); }

/* Una riga, due linee (DESIGN §3.2, §4.6): segno o posizione, oggetto e tempo; n., cliente,
   studio e le icone. Bordo-segnale da 3 px: canale in lavorazione, ambra aspetta noi,
   #8494A6 in attesa. */
.riga{
  display:grid; grid-template-columns:minmax(0,1fr) auto; column-gap:10px; row-gap:2px; align-items:center;
  width:100%; padding:9px 16px 9px 14px; text-align:left; border:0; border-top:1px solid var(--hairline);
  background:#fff; box-shadow:inset 3px 0 0 var(--edge, transparent); color:var(--ink); font-size:13px;
  transition:background .12s ease-out;
}
.riga:first-child{ border-top-color:transparent; }
.riga:hover{ background:var(--light); }
.riga.selezionata{ background:var(--canale-chiaro); }
.riga:focus-visible{ outline-offset:-2px; }
.riga.e-attesa,.riga.stato-nuovo.con-pos{ --edge:var(--bordo-campo); }
.riga.e-lavora{ --edge:var(--canale); }
.riga.e-aspetta{ --edge:var(--amber); }
.riga > span{ display:block; min-width:0; }
.riga > .riga-testa{ grid-column:1; grid-row:1; display:flex; align-items:center; gap:7px; min-width:0; }
.riga > .riga-dx{ grid-column:2; grid-row:1; display:flex; align-items:center; justify-content:flex-end; gap:6px; }
.riga > .riga-chi{ grid-column:1; grid-row:2; display:flex; align-items:center; gap:8px; min-width:0; }
.riga > .riga-meta{ grid-column:2; grid-row:2; display:flex; align-items:center; justify-content:flex-end; gap:6px; flex-wrap:nowrap; }
.riga.con-pos{ grid-template-columns:26px minmax(0,1fr) auto; }
.riga.con-pos > .riga-pos{
  grid-column:1; grid-row:1 / span 2; align-self:center; width:26px; height:26px; border-radius:7px;
  display:grid; place-items:center; background:var(--pearl); color:var(--slate-scuro);
  font-family:var(--mono); font-size:11.5px; font-weight:600;
}
.riga.con-pos > .riga-pos.primo{ color:var(--ink); box-shadow:inset 0 0 0 1px var(--bordo-campo); }
.riga.con-pos > .riga-testa,.riga.con-pos > .riga-chi{ grid-column:2; }
.riga.con-pos > .riga-dx,.riga.con-pos > .riga-meta{ grid-column:3; }
/* Il segno dello stato al posto della posizione: forma + parola (la parola e' nel title e per i lettori). */
.riga.con-pos > .riga-pos.segno{ background:none; }
.segno .sg{ display:block; width:8px; height:8px; }
.segno.attesa .sg{ border-radius:50%; box-shadow:inset 0 0 0 1.5px var(--bordo-campo); }
.segno.lavora .sg{ border-radius:50%; background:var(--canale); }
.segno.aspetta .sg{ border-radius:2px; background:var(--amber); }
.segno.cliente .sg{ border-radius:2px; box-shadow:inset 0 0 0 1.5px var(--violet-scuro); }
.segno.risolta .sg{ width:10px; height:6px; border-radius:0; border-left:2px solid var(--green-scuro); border-bottom:2px solid var(--green-scuro); transform:rotate(-45deg) translate(1px,-1px); }
.segno.annullata .sg{ height:2px; width:9px; background:var(--slate); }
.segno.tel .sg{ border-radius:50%; background:var(--green); box-shadow:0 0 0 3px rgba(46,138,63,.18); }
.riga-ogg{ font-size:13.5px; font-weight:600; color:var(--ink); min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.riga.non-letta .riga-ogg{ font-weight:700; }
.riga-meta-testo{ display:block; min-width:0; font-size:12px; color:var(--gray); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.riga-num{ font-size:12px; color:var(--canale-scuro); white-space:nowrap; }
.riga-num b{ font-family:var(--mono); font-weight:600; }
.riga-ic{ flex:none; display:inline-flex; align-items:center; gap:3px; color:var(--slate-scuro); font-size:12px; }
.riga-ic .ui-ic svg{ width:14px; height:14px; }
.riga-ic .mono{ font-size:11.5px; }
.riga-quando{ font-size:12px; color:var(--gray); white-space:nowrap; font-variant-numeric:tabular-nums; }
.riga-attesa{ font-size:12px; color:var(--gray); white-space:nowrap; font-variant-numeric:tabular-nums; }
.riga-attesa.lungo,.riga-aspetta{ color:var(--amber-scuro); font-weight:600; display:inline-flex; align-items:center; gap:5px; font-size:12px; white-space:nowrap; }
.riga-attesa.lungo::before,.riga-aspetta::before{ content:""; width:7px; height:7px; border-radius:2px; background:var(--amber); flex:none; }
.riga-aspetta:not(.lungo){ font-weight:500; }
.riga-tocca{ font-size:12px; color:var(--gray); white-space:nowrap; }
.riga-tel{ display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:600; color:var(--canale-scuro); white-space:nowrap; }
.riga-tel::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--green); box-shadow:0 0 0 2px rgba(46,138,63,.2); }
.riga-tel .mono{ font-weight:600; }
.riga-libera{ font-size:12px; color:var(--gray); }
.prio-punto{ display:inline-block; flex:none; width:8px; height:8px; border-radius:50%; background:var(--st, var(--gray)); }
.prio-punto.prio-normale{ background:var(--border); }
.pallino{ display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--red); flex:none; }
.link-btn{
  display:inline; padding:0; border:none; background:none; font:inherit; font-weight:600;
  color:var(--canale-scuro); text-decoration:underline; text-underline-offset:2px; cursor:pointer;
}
.link-btn:hover{ color:var(--canale); }

/* ── 4. STATI, CHIP, PILLOLE, AVATAR ──────────────────────────────────── */
.stato-nuovo{ --st:var(--bordo-campo); --st-chiaro:var(--pearl); --st-scuro:var(--slate-scuro); }
.stato-in_carico{ --st:var(--canale); --st-chiaro:var(--canale-chiaro); --st-scuro:var(--canale-scuro); }
.stato-attesa_cliente{ --st:var(--violet-scuro); --st-chiaro:var(--violet-light); --st-scuro:var(--violet-scuro); }
.stato-risolto{ --st:var(--green-scuro); --st-chiaro:var(--green-light); --st-scuro:var(--green-testo); }
.stato-annullato{ --st:var(--slate); --st-chiaro:var(--slate-light); --st-scuro:var(--slate-scuro); }
.prio-normale{ --st:var(--gray); --st-chiaro:var(--pearl); --st-scuro:var(--mid); }
.prio-alta{ --st:var(--slate-scuro); --st-chiaro:var(--pearl); --st-scuro:var(--ink); }
.prio-urgente{ --st:var(--red); --st-chiaro:var(--red-light); --st-scuro:var(--red-scuro); }

.chip{
  display:inline-flex; align-items:center; gap:6px; height:22px; padding:0 9px; max-width:100%;
  border:0; border-radius:var(--r-chip); background:var(--pearl); color:var(--mid);
  font-size:12px; font-weight:600; line-height:1; white-space:nowrap;
}
.chip .ui-ic svg{ width:13px; height:13px; }
.chip .segno{ width:8px; height:8px; flex:none; border-radius:50%; background:currentColor; }
.chip .avatar{ margin-left:-5px; width:18px; height:18px; font-size:10px; box-shadow:none; }
.chip.lavora{ background:var(--canale-chiaro); color:var(--canale-scuro); }
.chip.lavora .segno{ background:var(--canale); }
.chip.aspetta{ background:var(--amber-light); color:var(--amber-scuro); }
.chip.aspetta .segno{ background:var(--amber); border-radius:2px; }
.chip.aspetta.forte{ background:var(--amber-scuro); color:#fff; }
.chip.aspetta.forte .segno{ background:#fff; }
.chip.cliente{ background:var(--violet-light); color:var(--violet-scuro); }
.chip.cliente .segno{ background:none; box-shadow:inset 0 0 0 1.5px currentColor; border-radius:2px; }
.chip.attesa .segno{ background:none; box-shadow:inset 0 0 0 1.5px var(--bordo-campo); }
.chip.attesa{ color:var(--slate-scuro); }
.chip.urgente{ background:var(--red-light); color:var(--red-scuro); }
.chip.urgente .segno{ background:var(--red); }
.chip.risolta{ background:var(--green-light); color:var(--green-testo); }
.chip.vivo .segno{ background:var(--green); box-shadow:0 0 0 3px rgba(46,138,63,.18); }
/* varianti dei moduli */
.chip.libera{ background:var(--pearl); color:var(--slate-scuro); }
.chip.info{ background:var(--canale-chiaro); color:var(--canale-scuro); }
.chip.ok{ background:var(--green-light); color:var(--green-testo); }
.chip.err{ background:var(--red-light); color:var(--red-scuro); }
.chip.nota{ background:var(--nota); color:var(--nota-testo); box-shadow:inset 0 0 0 1px var(--nota-anello); }
.chip.canale{ background:var(--canale-chiaro); color:var(--canale-scuro); }
.chip.reg{ background:#EAEEF3; color:#334155; }
.chip.reg .mono{ font-weight:600; }
button.chip{ cursor:pointer; font-family:var(--font); box-shadow:inset 0 0 0 1px var(--border); background:#fff; }
button.chip:hover{ box-shadow:inset 0 0 0 1px var(--canale); color:var(--canale-scuro); }
button.chip[aria-pressed="true"]{ background:var(--canale); box-shadow:none; color:#fff; }

.pill{
  display:inline-flex; align-items:center; gap:6px; height:22px; padding:0 9px; white-space:nowrap;
  font-size:12px; font-weight:600; line-height:1; border-radius:var(--r-chip);
  background:var(--st-chiaro, var(--pearl)); color:var(--st-scuro, var(--mid));
}
.pill::before{ content:""; width:8px; height:8px; border-radius:50%; flex:none; background:var(--st, var(--gray)); }
.pill.stato-nuovo::before{ background:none; box-shadow:inset 0 0 0 1.5px var(--bordo-campo); }
.pill.stato-attesa_cliente::before{ background:none; border-radius:2px; box-shadow:inset 0 0 0 1.5px var(--violet-scuro); }
.pill.stato-annullato{ text-decoration:line-through; text-decoration-color:var(--slate); }
.pill.neutra{ --st:var(--gray); --st-chiaro:var(--pearl); --st-scuro:var(--mid); }
.pill.neutra::before{ display:none; }

:where(.avatar){ --op:var(--slate-scuro); }
.avatar{
  display:inline-flex; align-items:center; justify-content:center; flex:none; position:relative;
  width:24px; height:24px; border-radius:50%; background:var(--op); color:#fff;
  font-family:var(--font); font-size:10px; font-weight:700; letter-spacing:.02em; line-height:1;
  text-transform:uppercase; user-select:none;
}
.avatar.piccolo{ width:20px; height:20px; font-size:10px; }
.op-0{ --op:#1D4ED8; } .op-1{ --op:#B45309; } .op-2{ --op:#BE185D; } .op-3{ --op:#0E7490; }
.op-4{ --op:#4D7C0F; } .op-5{ --op:#6D28D9; } .op-6{ --op:#9A3412; } .op-7{ --op:#475569; }
.avatars{ display:inline-flex; align-items:center; }
.avatars .avatar + .avatar{ margin-left:-6px; box-shadow:0 0 0 2px #fff; }
.av-stato{ position:relative; display:inline-flex; flex:none; }
.av-stato.on::after{
  content:""; position:absolute; right:-1px; bottom:-1px; width:9px; height:9px; border-radius:50%;
  background:var(--green); box-shadow:0 0 0 2px #fff;
}
/* occupato: al telefono (una chiamata in corso, dal PC o dal telefono) */
.av-stato.occ::after{ background:var(--canale); }

/* ── 5. SCHEDA DELLA RICHIESTA ────────────────────────────────────────── */
.dettaglio{
  position:relative; min-height:0; min-width:0; overflow:hidden;
  display:flex; flex-direction:column; gap:12px; padding:14px 18px 18px;
}
.dettaglio > *{ flex:none; }
.dettaglio > .dett-corpo{ flex:1 1 auto; }
.dettaglio:has(> .vuoto){ justify-content:center; }
body.in-chiamata .dettaglio{ padding-bottom:calc(var(--barra-chiamata) + 28px); }
.dett-avvisi{ display:flex; flex-direction:column; gap:6px; min-width:0; }
.dett-avvisi:empty{ display:none; }
.dett-avviso{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap; min-width:0; min-height:36px;
  padding:4px 6px 4px 12px; border-radius:var(--r-pozzetto); background:#fff; box-shadow:var(--e1);
  font-size:12.5px; line-height:1.4; color:var(--mid);
}
.dett-avviso > .ui-ic{ flex:none; color:var(--slate-scuro); }
.dett-avviso-testo{ flex:1 1 240px; min-width:0; }
.dett-avviso-testo b{ color:var(--ink); font-weight:600; }
.dett-avviso .btn{ flex:none; }
.dett-avviso.nonletto,.dett-avviso.dopo{ background:var(--amber-light); box-shadow:none; }
.dett-avviso.nonletto > .ui-ic,.dett-avviso.nonletto b,.dett-avviso.dopo > .ui-ic,.dett-avviso.dopo b{ color:var(--amber-scuro); }
.dett-avviso.mandato{ background:var(--green-light); box-shadow:none; }
.dett-avviso.mandato > .ui-ic{ color:var(--green-scuro); }
.dett-avviso.sug{ background:#FCE8F2; box-shadow:none; }
.dett-avviso.sug > .ui-ic{ color:#9D174D; }
.dett-avviso.sug.forte{ box-shadow:inset 3px 0 0 var(--magenta); }
.dett-avviso.richiamo{ background:var(--canale-chiaro); box-shadow:none; }
.dett-avviso.richiamo > .ui-ic,.dett-avviso.richiamo b{ color:var(--canale-scuro); }

.dett-testa{ background:#fff; border-radius:var(--r-l2); box-shadow:var(--e2); padding:14px 18px 12px; min-width:0; }
.t-r1{ display:flex; align-items:center; gap:10px; min-width:0; }
.t-r1 > .num-r{ font-size:14px; flex:none; }
.dett-ogg{ flex:1 1 auto; min-width:0; font-size:18px; font-weight:600; letter-spacing:-.01em; line-height:1.3;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.t-chip{ margin-left:auto; display:flex; gap:6px; flex:none; }
.t-chi{ font-size:13px; color:var(--mid); margin-top:3px; min-width:0; }
.t-chi b{ color:var(--ink); font-weight:600; }
.t-meta{ display:flex; flex-wrap:wrap; gap:2px 14px; font-size:12px; color:var(--gray); margin-top:4px; }
.t-meta > *{ white-space:nowrap; }
.t-meta b{ color:var(--ink); font-weight:600; font-family:var(--mono); font-variant-numeric:tabular-nums; }
.t-meta .fant{ color:var(--mid); }
.t-meta .tardi{ color:var(--amber-scuro); font-weight:600; }
.t-az{ display:flex; align-items:center; gap:6px; margin-top:10px; min-width:0; flex-wrap:wrap; }
.t-lavora{ margin-left:auto; display:flex; align-items:center; gap:8px; font-size:12px; color:var(--gray); white-space:nowrap; }
.t-lavora .avatar{ width:24px; height:24px; font-size:10px; }

.dett-corpo{ display:grid; grid-template-columns:minmax(0,1fr) var(--lato-w); gap:12px; min-height:0; min-width:0; }
.dett-lato{ display:flex; flex-direction:column; gap:12px; overflow-y:auto; min-height:0; overscroll-behavior:contain; padding-bottom:2px; }
.dett-lato > .foglio{ margin:0; flex:none; }
/* File trascinati sopra la scheda: un velo dice dove vanno. */
.dettaglio.sopra::after{
  content:'Lascia qui i file: partono nella conversazione'; position:absolute; z-index:20; pointer-events:none; inset:8px;
  display:grid; place-items:center; border:2px dashed var(--canale); border-radius:var(--r-foglio);
  background:color-mix(in srgb, var(--canale-chiaro) 88%, transparent); font:600 15px var(--font); color:var(--canale-scuro);
}
.vuoto.vuoto-coda > .ui-ic{ color:var(--canale); }
.azioni.centro{ justify-content:center; }

/* FOGLI (DESIGN §4.7): bordo tinto della famiglia, testata tinta col quadratino dell'icona. */
.foglio{
  --f:var(--canale); --f-chiaro:var(--canale-chiaro); --f-scuro:var(--canale-scuro); --f-ic:#fff;
  display:block; position:relative; min-width:0; margin-bottom:12px; padding:12px 14px 14px;
  background:#fff; border-radius:var(--r-foglio);
  border:1px solid color-mix(in srgb, var(--f) 26%, #fff); box-shadow:0 1px 2px rgba(var(--sh),.06);
}
.fam-lavoro{ --f:var(--canale); --f-chiaro:var(--canale-chiaro); --f-scuro:var(--canale-scuro); --f-ic:#fff; }
.fam-cliente{ --f:var(--turchese); --f-chiaro:var(--turchese-light); --f-scuro:var(--turchese-scuro); --f-ic:#fff; }
.fam-gest{ --f:var(--magenta); --f-chiaro:var(--magenta-light); --f-scuro:var(--magenta-scuro); --f-ic:#fff; }
.fam-note{ --f:#D9A000; --f-chiaro:#FFF4D6; --f-scuro:#6B4700; --f-ic:#3F2A00; }
.fam-rif{ --f:#64748B; --f-chiaro:#EAEEF3; --f-scuro:#334155; --f-ic:#fff; }
/* §39: i tre flussi, un nome, un colore e un'icona ciascuno (SPEC §39, DESIGN §2.0): Assistenza
   CAD blu (in diretta), Riconoscimenti turchese e Assistenza commerciale viola (per messaggio).
   Il segno del flusso e' il quadratino pieno con l'icona bianca (.fl-ic); con la parola, .flusso. */
.fl-cad{ --fl:var(--canale); --fl-chiaro:var(--canale-chiaro); --fl-scuro:var(--canale-scuro); }
.fl-ric{ --fl:var(--turchese); --fl-chiaro:var(--turchese-light); --fl-scuro:var(--turchese-scuro); }
.fl-com{ --fl:var(--violet); --fl-chiaro:var(--violet-light); --fl-scuro:var(--violet-scuro); }
.foglio.fl-cad,.foglio.fl-ric,.foglio.fl-com{ --f:var(--fl); --f-chiaro:var(--fl-chiaro); --f-scuro:var(--fl-scuro); --f-ic:#fff; }
.fl-ic{ display:inline-grid; place-items:center; width:18px; height:18px; border-radius:5px; flex:none; background:var(--fl, var(--slate-scuro)); color:#fff; }
.fl-ic .ui-ic svg{ width:12px; height:12px; color:#fff; }
.fl-ic.piccolo{ width:16px; height:16px; border-radius:4px; }
.fl-ic.piccolo .ui-ic svg{ width:11px; height:11px; }
.flusso{
  display:inline-flex; align-items:center; gap:6px; height:22px; padding:0 8px 0 2px; border-radius:7px; flex:none;
  background:var(--fl-chiaro); color:var(--fl-scuro); font-size:12px; font-weight:600; white-space:nowrap;
}
.foglio-testa{
  display:flex; align-items:center; gap:10px; height:40px; margin:-12px -14px 12px; padding:0 14px 0 12px;
  border-radius:11px 11px 0 0; background:var(--f-chiaro); box-shadow:inset 0 -1px 0 color-mix(in srgb, var(--f) 22%, #fff);
  font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--f-scuro); min-width:0;
}
.foglio-testa > span:not(.ui-ic):not(.foglio-stato){ white-space:nowrap; }
.foglio-testa > .ui-ic:first-child{ width:22px; height:22px; border-radius:6px; background:var(--f); color:var(--f-ic); }
.foglio-testa > .ui-ic:first-child svg{ width:14px; height:14px; }
.foglio-stato{ margin-left:auto; text-transform:none; letter-spacing:0; min-width:0; }
.foglio-stato{ font-size:12px; font-weight:500; color:var(--f-scuro); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:inline-flex; align-items:center; gap:6px; }
.foglio-stato .ui-ic svg{ width:14px; height:14px; }
.foglio-stato .mono{ font-weight:600; }
details.foglio{ padding:0; }
details.foglio > summary.foglio-testa{ margin:0; border-radius:11px; box-shadow:none; cursor:pointer; list-style:none; }
details.foglio > summary.foglio-testa::-webkit-details-marker{ display:none; }
details.foglio > summary.foglio-testa:hover{ background:color-mix(in srgb, var(--f) 14%, #fff); }
details.foglio[open] > summary.foglio-testa{ border-radius:11px 11px 0 0; box-shadow:inset 0 -1px 0 color-mix(in srgb, var(--f) 22%, #fff); }
details.foglio > summary.foglio-testa::after{
  content:""; flex:none; width:7px; height:7px; margin:0 3px 2px 4px;
  border-right:1.7px solid var(--f-scuro); border-bottom:1.7px solid var(--f-scuro); transform:rotate(45deg); transition:transform .15s ease-out;
}
details.foglio > summary.foglio-testa:not(:has(> .foglio-stato))::after{ margin-left:auto; }
details.foglio[open] > summary.foglio-testa::after{ transform:translateY(3px) rotate(-135deg); }
.foglio-corpo{ padding:12px 14px 14px; }
.foglio.pieno{ padding:0; display:flex; flex-direction:column; overflow:hidden; }
.foglio.pieno > .foglio-testa{ margin:0; flex:none; }
.foglio-sotto{
  font-size:11px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--gray);
  margin:14px 0 6px; display:flex; align-items:center; gap:10px;
}
.foglio-sotto:first-child{ margin-top:0; }
.foglio-sotto::after{ content:""; flex:1; height:1px; background:var(--hairline); }
.kv{ display:grid; grid-template-columns:110px minmax(0,1fr); gap:5px 12px; align-items:baseline; font-size:12.5px; }
.kv dt{ font-size:12px; color:var(--gray); }
.kv dd{ font-weight:600; color:var(--ink); min-width:0; overflow-wrap:anywhere; }
.kv dd a{ color:var(--canale-scuro); }
.kv.tasti{ grid-template-columns:170px minmax(0,1fr); gap:7px 12px; }
kbd{
  display:inline-block; min-width:22px; padding:1px 6px; border-radius:5px; background:var(--light);
  box-shadow:inset 0 0 0 1px var(--border), inset 0 -1px 0 var(--border);
  font-family:var(--mono); font-size:11.5px; font-weight:600; color:var(--ink); text-align:center;
}

/* Conversazione: «La richiesta» e' il primo elemento e scorre coi messaggi. */
.conv-foglio{ min-height:0; }
.conv{ flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain; padding:12px 16px; display:flex; flex-direction:column; gap:8px; scroll-behavior:auto; }
.conv > .chat{ display:flex; flex-direction:column; gap:8px; }
.lr-fissa{
  position:absolute; top:40px; left:0; right:0; z-index:3; height:32px; display:flex; align-items:center;
  background:color-mix(in srgb, var(--pearl) 92%, #fff); box-shadow:0 1px 0 var(--hairline), 0 4px 10px -8px rgba(var(--sh),.4);
}
.lr-fissa button{
  display:flex; align-items:center; gap:8px; width:100%; height:100%; padding:0 16px; border:0; background:none;
  font-size:12.5px; color:var(--mid); text-align:left; min-width:0;
}
.lr-fissa b{ color:var(--ink); font-weight:600; flex:none; }
.lr-fissa .tronca{ flex:1; }
.lr-fissa .lr-apri{ color:var(--canale-scuro); font-weight:600; flex:none; }
.la-richiesta{ flex:none; background:var(--pearl); border-radius:var(--r-pozzetto); padding:12px 14px; }
.lr-testa{ display:flex; align-items:center; gap:7px; font-size:12px; color:var(--gray); flex-wrap:wrap; }
.lr-testa b{ color:var(--ink); font-weight:600; }
.lr-testa .ui-ic svg{ width:14px; height:14px; }
.lr-campi{ display:flex; flex-wrap:wrap; gap:4px 16px; font-size:12px; color:var(--gray); margin-top:6px; }
.lr-campi b{ color:var(--ink); font-weight:600; }
.lr-testo{ font-size:13.5px; line-height:1.5; margin:6px 0 0; color:var(--ink); overflow-wrap:anywhere; white-space:pre-wrap; }
.lr-testo.corta{ display:-webkit-box; -webkit-line-clamp:5; -webkit-box-orient:vertical; overflow:hidden; }
.lr-altri{ font-size:12px; color:var(--mid); margin-top:6px; }
.lr-file{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-top:10px; }
.lr-az{ display:flex; gap:6px; flex-wrap:wrap; margin-top:10px; }
.la-richiesta .link-btn{ font-size:12px; margin-top:4px; align-self:flex-start; }
.th{
  position:relative; width:52px; height:52px; border-radius:var(--r-pozzetto); overflow:hidden; padding:0; border:0; flex:none;
  box-shadow:0 0 0 1px rgba(var(--sh),.08); background:var(--light); display:block; cursor:pointer;
}
.th img{ display:none; width:100%; height:100%; object-fit:cover; }
.th.pronta img{ display:block; }
.th.pronta > .ui-ic{ display:none; }
.th > .ui-ic{ position:absolute; inset:0; display:grid; place-items:center; color:var(--slate-scuro); }
.th:hover{ box-shadow:0 0 0 1.5px var(--canale); }
.th.doc{ background:var(--pearl); display:flex; flex-direction:column; justify-content:space-between; align-items:flex-start; padding:6px 6px 5px; text-align:left; }
.th.doc > .ui-ic{ position:static; display:inline-flex; }
.th.doc > .ui-ic svg{ width:17px; height:17px; }
.th.doc .th-nome{ font-size:11px; font-weight:600; line-height:1.15; color:var(--ink); max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.th.scaduta{ cursor:default; opacity:.7; }
.th .th-lucchetto{ position:absolute; top:3px; right:3px; display:inline-flex; padding:2px; border-radius:4px; background:var(--nota-anello); color:var(--nota-testo); }
.th .th-lucchetto svg{ width:10px; height:10px; }

/* ── 6. CHAT ──────────────────────────────────────────────────────────── */
.chat-giorno{
  align-self:stretch; display:flex; align-items:center; gap:10px; margin:4px 0 0;
  font-size:11px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--gray);
}
.chat-giorno::before,.chat-giorno::after{ content:""; flex:1; height:1px; background:var(--hairline); }
.bolla{ max-width:78%; padding:8px 12px; border-radius:12px; font-size:13.5px; line-height:1.5; overflow-wrap:anywhere; }
.bolla-chi{ font-size:12px; font-weight:600; margin-bottom:2px; display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.bolla-chi .ui-ic svg{ width:13px; height:13px; }
.bolla-testo{ white-space:pre-wrap; }
.bolla-ora{ font-family:var(--mono); font-size:11px; margin-top:2px; font-variant-numeric:tabular-nums; }
.bolla.cliente{ align-self:flex-start; background:var(--pearl); color:var(--ink); border-top-left-radius:4px; }
.bolla.cliente .bolla-chi{ color:var(--mid); }
.bolla.cliente .bolla-ora{ color:var(--gray); }
.bolla.operatore{ align-self:flex-end; background:var(--canale); color:#fff; border-top-right-radius:4px; }
.bolla.operatore .bolla-chi{ color:#C9D7F2; }
.bolla.operatore .bolla-ora{ color:#E8EEF9; text-align:right; }
.bolla.operatore a:not([class]){ color:#fff; }
.bolla.nota{ align-self:stretch; max-width:none; background:var(--nota); color:var(--ink); border-radius:var(--r-pozzetto); box-shadow:inset 0 0 0 1px var(--nota-anello); }
.bolla.nota .bolla-chi{ color:var(--nota-testo); }
.bolla.nota .bolla-chi .bolla-ora{ margin:0 0 0 auto; font-weight:500; }
.bolla.nota .bolla-ora{ color:var(--nota-testo); }
.bolla-eti{ font-weight:600; color:var(--nota-testo); }
.bolla.sistema{
  align-self:center; max-width:94%; text-align:center; background:var(--pearl); color:var(--mid);
  border-radius:var(--r-chip); padding:4px 12px; font-size:12px;
}
.bolla.sistema .bolla-ora{ display:inline; color:var(--gray); margin-left:6px; }
.bolla.sistema.nota{ align-self:center; max-width:94%; background:var(--nota); color:var(--nota-testo); box-shadow:inset 0 0 0 1px var(--nota-anello); border-radius:var(--r-chip); }
.bolla.sistema.nota .ui-ic svg{ width:12px; height:12px; }
.bolla-file{ display:flex; flex-wrap:wrap; gap:6px; margin-top:6px; }
.bolla.sistema .bolla-link,.bolla.sistema .bolla-file{ justify-content:center; }
.file-chip{
  display:inline-flex; align-items:center; gap:6px; max-width:100%; min-height:30px; padding:0 10px;
  border:0; border-radius:var(--r-btn); background:#fff; box-shadow:0 0 0 1px rgba(var(--sh),.10);
  font-family:var(--font); font-size:12px; font-weight:600; color:var(--canale-scuro); cursor:pointer; text-decoration:none; text-align:left;
}
.file-chip:hover{ box-shadow:0 0 0 1.5px var(--canale); }
.file-chip .ui-ic svg{ width:14px; height:14px; }
.file-chip .nome{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.file-chip .dim{ font-weight:500; color:var(--gray); white-space:nowrap; }
.file-chip.scaduto{ color:var(--mid); background:var(--light); cursor:default; box-shadow:0 0 0 1px var(--border); }
.file-chip.scaduto .dim{ text-decoration:line-through; }
.file-chip.link .ui-ic{ color:var(--canale); }
.file-chip.spento{ color:var(--gray); cursor:default; }
.bolla-img{ display:flex; flex-wrap:wrap; gap:6px; margin-top:6px; }
.miniatura{
  position:relative; display:block; flex:none; width:132px; max-width:100%; aspect-ratio:4 / 3; padding:0; overflow:hidden;
  border:0; border-radius:var(--r-pozzetto); background:var(--light); box-shadow:0 0 0 1px rgba(var(--sh),.10); cursor:pointer;
}
.miniatura:hover{ box-shadow:0 0 0 1.5px var(--canale); }
.miniatura img{ display:none; width:100%; height:100%; object-fit:cover; }
.miniatura.pronta img{ display:block; }
.miniatura-segno{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; padding:4px; font-size:11px; color:var(--slate-scuro); text-align:center; }
.miniatura.pronta .miniatura-segno{ display:none; }
.miniatura-eti{ position:absolute; top:4px; right:4px; display:inline-flex; padding:2px; border-radius:4px; background:var(--nota-anello); color:var(--nota-testo); }
.miniatura-eti .ui-ic svg{ width:11px; height:11px; }
.bolla-link{ display:flex; flex-wrap:wrap; gap:6px; margin-top:6px; }
.dl-card{
  display:flex; align-items:center; gap:9px; margin-top:6px; max-width:100%; padding:7px 10px; border-radius:var(--r-btn);
  background:#fff; color:var(--ink); box-shadow:0 0 0 1px rgba(var(--sh),.10), inset 3px 0 0 var(--canale);
  text-align:left; text-decoration:none; font-family:var(--font);
}
a.dl-card:hover{ box-shadow:0 0 0 1.5px var(--canale), inset 3px 0 0 var(--canale); }
.dl-card .ui-ic{ color:var(--canale); }
.dl-card .ui-ic svg{ width:18px; height:18px; }
.dl-card-corpo{ display:flex; flex-direction:column; min-width:0; }
.dl-card-tit{ font-size:12.5px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dl-card-sub{ font-size:11.5px; color:var(--gray); }
.conv .banner{ margin-top:4px; }

.composer{
  flex:none; margin:0 12px 12px; padding:8px 10px; border-radius:12px; background:#fff;
  box-shadow:inset 0 0 0 1px var(--bordo-campo); transition:box-shadow .15s ease-out, background .15s ease-out;
}
.composer:focus-within{ box-shadow:inset 0 0 0 1.5px var(--canale), 0 0 0 3px rgba(31,79,163,.16); }
.composer.interno{ background:var(--nota); box-shadow:inset 0 0 0 1.5px #D9A000; }
.composer.interno:focus-within{ box-shadow:inset 0 0 0 1.5px #D9A000, 0 0 0 3px rgba(217,160,0,.2); }
.composer-allegati{ display:flex; flex-direction:column; gap:5px; margin:0 0 6px; }
.composer-allegati:empty{ display:none; }
.composer-testo{
  display:block; width:100%; min-height:44px; max-height:34vh; resize:none; field-sizing:content;
  padding:4px 4px 8px; border:none; outline:none; background:transparent; font-size:13.5px; line-height:1.5; color:var(--ink);
}
.composer-testo::placeholder{ color:var(--gray); }
.composer-barra{ display:flex; align-items:center; gap:4px; flex-wrap:wrap; }
.seg{ display:inline-flex; gap:2px; padding:2px; border-radius:9px; background:var(--pearl); margin-right:6px; }
.comp-tab{
  display:inline-flex; align-items:center; gap:6px; height:30px; padding:0 10px; border:0; border-radius:7px; background:none;
  font-family:var(--font); font-size:12.5px; font-weight:600; color:var(--mid); white-space:nowrap;
}
.comp-tab .ui-ic svg{ width:14px; height:14px; }
.comp-tab:hover{ color:var(--ink); }
.comp-tab[aria-selected="true"]{ background:#fff; color:var(--canale-scuro); box-shadow:var(--e1); }
.comp-tab.nota[aria-selected="true"]{ background:#FDE68A; color:#422006; box-shadow:none; }
/* §37b: su un'annullata «Al cliente» e' spento (il cliente non legge piu'). */
.comp-tab:disabled{ opacity:.45; cursor:not-allowed; }
.comp-tab:disabled:hover{ color:var(--mid); }
.composer.interno .seg{ background:#FEF3C7; }
.btn.comp-invia{ margin-left:auto; }
.composer-link{ display:flex; flex-wrap:wrap; align-items:center; gap:5px; }
.composer-link-eti{ flex-basis:100%; display:flex; align-items:center; gap:5px; font-size:11.5px; font-weight:600; color:var(--gray); }
.link-chip{
  display:inline-flex; align-items:center; gap:4px; max-width:100%; min-height:28px; padding:1px 2px 1px 10px; border-radius:var(--r-chip);
  background:var(--canale-chiaro); color:var(--canale-scuro); font-size:12px; font-weight:600;
}
.link-chip .nome{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.link-chip.err{ background:var(--red-light); color:var(--red-scuro); }
.link-chip-x{ flex:none; display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px; padding:0; border:none; border-radius:50%; background:transparent; color:inherit; }
.link-chip-x:hover{ background:rgba(var(--sh),.08); }
.link-chip-x .ui-ic svg{ width:12px; height:12px; }
.composer-mancanti{
  display:flex; flex-wrap:wrap; align-items:center; gap:5px; margin:0 0 6px; padding:5px 8px; border-radius:var(--r-btn);
  background:var(--red-light); color:var(--red-scuro); font-size:12px; font-weight:600;
}
.composer-mancanti .chip{ font-family:var(--mono); background:#fff; }
.composer-allegati .file-ic.mini{ width:40px; height:40px; cursor:default; }

/* ── FOGLIO CHIAMATA (SPEC §21b): sempre aperto, niente cassetti ───────── */
.chiama-btn{ width:100%; height:44px; font-size:14px; border-radius:var(--r-pozzetto); }
.chiama-btn .ui-ic svg{ width:17px; height:17px; }
.in-corso{
  display:flex; align-items:center; gap:10px; height:48px; padding:0 14px; border-radius:var(--r-pozzetto);
  background:var(--canale-chiaro); color:var(--canale-scuro); font-weight:600; font-size:14px;
}
.in-corso .vivo{ width:10px; height:10px; border-radius:50%; background:var(--green); box-shadow:0 0 0 4px rgba(46,138,63,.18); flex:none; }
.in-corso .mono{ margin-left:auto; font-size:16px; }
.in-corso.altrove{ height:auto; min-height:40px; padding:8px 12px; font-size:12.5px; font-weight:500; background:var(--pearl); color:var(--mid); }
.in-corso.altrove .vivo{ width:8px; height:8px; }
.ch-alt{ display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:8px; }
.ch-alt .btn{ width:100%; padding:0 8px; }
.ch-alt .wa .ui-ic{ color:#15803D; }
.ch-numero{ display:flex; align-items:center; gap:8px; margin-top:10px; min-height:30px; font-size:12px; color:var(--gray); }
.ch-numero .mono{ color:var(--ink); font-size:12.5px; font-weight:600; }
.ch-numero .link-btn{ margin-left:auto; text-decoration:none; }
.ch-numero .in{ flex:1; min-width:0; }
.ch-video{ margin-top:10px; display:flex; flex-direction:column; gap:6px; }
.ch-video .fila{ flex-wrap:nowrap; }
.ch-video .in{ flex:1; min-width:0; }
.ch-testa{ display:flex; align-items:center; gap:8px; margin-bottom:10px; font-size:12.5px; color:var(--mid); }
.ch-storico{ margin-top:12px; box-shadow:inset 0 1px 0 var(--hairline); padding-top:8px; }
.ch-tit{ font-size:11px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--gray); padding:2px 0 4px; }
.ch-riga{ display:grid; grid-template-columns:18px minmax(0,1fr) auto; gap:2px 8px; align-items:start; padding:6px 0; }
.ch-riga + .ch-riga{ box-shadow:inset 0 1px 0 var(--hairline); }
.ch-riga > .ui-ic{ margin-top:1px; color:var(--slate-scuro); }
.ch-riga > .ui-ic svg{ width:15px; height:15px; }
.ch-riga.fatta > .ui-ic{ color:var(--green-scuro); }
.ch-riga.non_risponde > .ui-ic,.ch-riga.occupato > .ui-ic{ color:var(--amber-scuro); }
.ch-riga.in_corso > .ui-ic{ color:var(--canale); }
.ch-cosa{ font-size:12.5px; font-weight:600; color:var(--ink); min-width:0; }
.ch-sotto{ grid-column:2; font-size:12px; color:var(--gray); min-width:0; overflow-wrap:anywhere; }
.ch-ora{ font-family:var(--mono); font-size:12px; color:var(--gray); white-space:nowrap; font-variant-numeric:tabular-nums; }
.ch-fuori{ margin-top:10px; font-size:12px; color:var(--gray); }
.ch-sotto .ch-rap{ font-size:12px; font-weight:600; color:var(--canale); text-decoration:none; }
.ch-sotto .ch-rap:hover{ text-decoration:underline; }
/* §26a: la conferma prima di chiamare e la fine della telefonata */
.ch-conf{ display:flex; align-items:baseline; flex-wrap:wrap; gap:4px 10px; margin-bottom:8px; }
.ch-conf .mono{ font-size:20px; font-weight:600; color:var(--ink); letter-spacing:.01em; }
.ch-conf span:not(.mono){ font-size:12.5px; color:var(--mid); }
.ch-conf-avviso{ display:flex; align-items:flex-start; gap:8px; margin-top:10px; padding:8px 10px; border-radius:var(--r-btn);
  background:var(--amber-light); color:var(--amber-scuro); font-size:12.5px; line-height:1.45; }
.ch-conf-avviso .ui-ic svg{ width:15px; height:15px; }
/* §37b: niente prese nascoste. Su una richiesta che nessuno segue la conferma e il riquadro
   «Chiama» dicono prima che chiamando la prendi tu. */
.ch-conf-presa{ margin:0 0 8px; font-size:13px; font-weight:600; color:var(--canale-scuro); }
.ch-presa{ display:flex; align-items:flex-start; gap:7px; margin-bottom:10px; padding:7px 10px; border-radius:var(--r-btn);
  background:var(--canale-chiaro); color:var(--canale-scuro); font-size:12.5px; line-height:1.45; }
.ch-presa .ui-ic svg{ width:15px; height:15px; }
.fc-durata{ font-size:14px; line-height:1.5; margin-bottom:10px; }
.fc-durata b{ font-weight:600; }
.fc-meno{ margin-top:10px; }
.fc-meno .fila{ flex-wrap:nowrap; }
.fc-meno .in{ width:96px; flex:none; font-family:var(--mono); }
.modale-corpo > .muto:last-child{ margin-top:12px; }
/* §26b: il foglio Rapporto */
.rap-voce{ padding:8px 0; }
.rap-voce + .rap-voce{ box-shadow:inset 0 1px 0 var(--hairline); }
.rap-testa{ display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; font-size:12.5px; }
.rap-testa b{ font-weight:600; color:var(--ink); }
.rap-testa span{ color:var(--gray); font-size:12px; }
.rap-testo{ margin-top:4px; font-size:13px; line-height:1.5; color:var(--ink); }
.rap-corretto{ margin-top:4px; font-size:11.5px; color:var(--gray); }
.rap-az{ display:flex; gap:12px; margin-top:4px; }
.rap-az .link-btn{ font-size:12px; text-decoration:none; }
.rap-az .link-btn:hover{ text-decoration:underline; }
.rap-piede{ margin:10px 0 6px; }
.ch-fuori .link-btn{ font-size:12px; text-decoration:none; }
.ch-fuori .link-btn:hover{ text-decoration:underline; }
/* Spenti mentre un esito della chiamata di questa richiesta aspetta i suoi 5 s. */
.link-btn:disabled,.link-btn:disabled:hover{ color:var(--gray); text-decoration:none; cursor:default; }

/* ── FOGLIO FILE ───────────────────────────────────────────────────────── */
.zona{
  position:relative; display:flex; align-items:center; gap:10px; min-height:44px; padding:6px 12px; border-radius:var(--r-pozzetto);
  border:1.5px dashed var(--bordo-campo); background:var(--light); color:var(--mid); font-size:13px; cursor:pointer;
  transition:background .12s ease-out, border-color .12s ease-out;
}
.zona input[type="file"]{ position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer; }
.zona:hover,.zona.sopra{ border-color:var(--canale); background:var(--canale-chiaro); }
.zona.sopra{ border-style:solid; }
.zona:focus-within{ outline:2px solid var(--canale); outline-offset:2px; }
.zona > .ui-ic{ color:var(--canale); }
.zona > .ui-ic svg{ width:18px; height:18px; }
.zona b{ font-weight:600; color:var(--ink); }
.zona-solo{ margin-top:6px; }
.sotto{ font-size:11px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--gray); margin:12px 0 6px; }
.f-mini{ display:flex; gap:8px; flex-wrap:wrap; }
.vuoto-breve{ font-size:12px; color:var(--gray); }
.file-regola{ display:flex; align-items:center; gap:6px; margin-top:10px; font-size:12px; color:var(--gray); }
.file-regola .ui-ic svg{ width:13px; height:13px; }
.file-chiuso{ display:flex; align-items:flex-start; gap:6px; }

/* ── 7. INVIO FILE (moduli) ───────────────────────────────────────────── */
.drop{
  position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:4px; min-height:120px; padding:20px 16px; text-align:center; border:1.5px dashed var(--bordo-campo); border-radius:var(--r-pozzetto);
  background:var(--light); color:var(--ink); cursor:pointer; transition:background .15s ease-out, border-color .15s ease-out;
}
.drop input[type="file"]{ position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer; }
.drop:hover{ border-color:var(--canale); background:var(--canale-chiaro); }
.drop:focus-within{ outline:2px solid var(--canale); outline-offset:2px; }
.drop.sopra{ border-style:solid; border-color:var(--canale); background:var(--canale-chiaro); }
.drop > .ui-ic{ color:var(--canale); margin-bottom:4px; }
.drop-tit{ font-size:14px; font-weight:600; color:var(--ink); }
.drop-sub{ font-size:12px; color:var(--mid); }
.drop.compatta{ min-height:64px; padding:10px 12px; flex-direction:row; justify-content:flex-start; gap:10px; text-align:left; }
.drop.compatta > .ui-ic{ margin:0; }
.drop.compatta .drop-tit{ font-size:13px; }
.drop.spento{ opacity:.55; pointer-events:none; }
.files{ display:flex; flex-direction:column; gap:6px; margin-top:10px; }
.files:empty{ display:none; }
.file-riga{
  --fs:var(--border); --fs-testo:var(--gray);
  display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:2px 10px; align-items:center;
  background:#fff; border-radius:var(--r-btn); box-shadow:0 0 0 1px var(--border), inset 3px 0 0 var(--fs);
  padding:7px 8px 7px 12px; min-width:0;
}
.file-ic{
  grid-row:1 / span 2; display:inline-flex; align-items:center; justify-content:center;
  width:30px; height:30px; border-radius:7px; background:var(--pearl); color:var(--canale-scuro);
}
.file-ic .ui-ic svg{ width:16px; height:16px; }
.file-ic.mini{ position:relative; width:44px; height:44px; padding:0; overflow:hidden; border:0; box-shadow:0 0 0 1px var(--border); cursor:pointer; }
.file-ic.mini img{ display:none; width:100%; height:100%; object-fit:cover; }
.file-ic.mini.pronta img{ display:block; }
.file-ic.mini.pronta > .ui-ic{ display:none; }
.file-nome{ font-size:12.5px; font-weight:600; color:var(--ink); min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.file-info{ grid-column:2; font-size:11.5px; color:var(--gray); min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.file-stato{ font-weight:600; color:var(--fs-testo); }
.file-az{ grid-column:3; grid-row:1 / span 2; display:flex; align-items:center; gap:4px; }
.file-errore{ grid-column:2 / -1; font-size:12px; font-weight:600; color:var(--red-scuro); overflow-wrap:anywhere; }
.barra{
  grid-column:2 / -1; display:block; width:100%; height:6px; margin-top:4px; -webkit-appearance:none; appearance:none;
  border:none; border-radius:3px; background:var(--pearl); color:var(--canale); overflow:hidden;
}
.barra::-webkit-progress-bar{ background:var(--pearl); border-radius:3px; }
.barra::-webkit-progress-value{ background:var(--fs-barra, var(--canale)); border-radius:3px; transition:width .2s ease-out; }
.barra::-moz-progress-bar{ background:var(--fs-barra, var(--canale)); border-radius:3px; }
.file-riga.in-coda{ --fs:var(--slate); --fs-testo:var(--slate-scuro); }
.file-riga.carico{ --fs:var(--canale); --fs-testo:var(--canale-scuro); }
.file-riga.fatto{ --fs:var(--green-scuro); --fs-testo:var(--green-scuro); --fs-barra:var(--green-scuro); }
.file-riga.errore{ --fs:var(--red-scuro); --fs-testo:var(--red-scuro); --fs-barra:var(--red-scuro); background:#FEF2F2; }
.file-riga.interno{ --fs:#D9A000; background:var(--nota); }
.file-riga.fatto .barra{ display:none; }

/* ── 8. PULSANTI ──────────────────────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:7px; height:36px; padding:0 13px;
  border:0; border-radius:var(--r-btn); background:#fff; color:var(--ink); box-shadow:inset 0 0 0 1px var(--border);
  font-family:var(--font); font-size:13px; font-weight:600; line-height:1.2; text-decoration:none; white-space:nowrap; cursor:pointer;
  transition:background .12s ease-out, box-shadow .12s ease-out, color .12s ease-out;
}
.btn:hover{ background:var(--light); box-shadow:inset 0 0 0 1px var(--bordo-campo); }
.btn:active{ transform:translateY(.5px); }
.btn .ui-ic svg{ width:16px; height:16px; }
.btn.primario{ background:var(--canale); color:#fff; box-shadow:0 1px 2px rgba(22,58,120,.25); }
.btn.primario:hover{ background:var(--canale-scuro); }
.btn.tenue{ background:var(--canale-chiaro); color:var(--canale-scuro); box-shadow:inset 0 0 0 1px #BCCBEA; }
.btn.tenue:hover{ background:#D6E1F5; }
.btn.testo,.btn.ghost{ background:none; box-shadow:none; color:var(--mid); padding:0 9px; }
.btn.testo:hover,.btn.ghost:hover{ background:var(--light); color:var(--ink); box-shadow:none; }
.btn.pericolo{ color:var(--red-scuro); box-shadow:inset 0 0 0 1px #F3B4B4; }
.btn.pericolo:hover{ background:var(--red-light); }
.btn.pericolo.pieno{ background:var(--red-scuro); color:#fff; box-shadow:none; }
.btn.pericolo.pieno:hover{ background:#991B1B; }
.btn.ok{ background:var(--green-light); color:var(--green-testo); box-shadow:inset 0 0 0 1px #A7E3BC; }
.btn.ok:hover{ background:#CBF5D9; }
.btn.nota{ background:#FDE68A; color:#422006; box-shadow:inset 0 0 0 1px #D9A000; }
.btn.nota:hover{ background:#FCD34D; }
.btn.fatta{ background:var(--green-scuro); color:#fff; box-shadow:none; }
.btn.fatta:hover{ background:#166534; }
.btn.piccolo{ height:30px; padding:0 10px; font-size:12.5px; border-radius:7px; gap:6px; }
.btn.piccolo .ui-ic svg{ width:14px; height:14px; }
.btn.icona{ width:36px; padding:0; }
.btn.icona.piccolo{ width:30px; }
.btn.largo{ width:100%; }
.btn:disabled,.btn[aria-disabled="true"]{ opacity:.45; cursor:default; transform:none; }
.btn:disabled:hover{ background:#fff; box-shadow:inset 0 0 0 1px var(--border); }
.btn.primario:disabled:hover{ background:var(--canale); box-shadow:none; }
.btn.testo:disabled:hover,.btn.ghost:disabled:hover{ background:none; box-shadow:none; }
.btn.primario .rotella,.btn.fatta .rotella,.btn.pericolo.pieno .rotella{ border-color:rgba(255,255,255,.35); border-top-color:#fff; }
.btn .az-eti,.btn .comp-eti,.btn .nuova-eti{ white-space:nowrap; }
.past{ font-family:var(--mono); font-size:12.5px; font-weight:600; border-radius:7px; padding:3px 8px; background:#fff; color:var(--canale-scuro); box-shadow:inset 0 0 0 1px #BCCBEA; }
.btn.primario .past{ background:var(--canale-scuro); color:#fff; box-shadow:none; }
.azioni{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.modale-chiudi{
  flex:none; width:36px; height:36px; display:inline-flex; align-items:center; justify-content:center;
  border:0; border-radius:var(--r-btn); background:#fff; box-shadow:inset 0 0 0 1px var(--border); color:var(--mid); cursor:pointer;
}
.modale-chiudi:hover{ color:var(--ink); box-shadow:inset 0 0 0 1px var(--bordo-campo); }
/* In chiamata il pieno e' quello della barra, «Sì» e poi «Ho chiuso» (DESIGN §1.4, SPEC §26a):
   gli altri pieni della pagina diventano tenui. */
body.in-chiamata .app-body .btn.primario:not(.comp-invia){ background:var(--canale-chiaro); color:var(--canale-scuro); box-shadow:inset 0 0 0 1px #BCCBEA; }
body.in-chiamata .app-body .btn.primario:not(.comp-invia) .past{ background:#fff; color:var(--canale-scuro); box-shadow:inset 0 0 0 1px #BCCBEA; }
/* Anche «Prendi in carico la prossima» di Inizio e della Coda (il loro stile proprio): tenue. */
body.in-chiamata .app-body :is(.ini-btn-prossima, .cq-prossima):not(:disabled){ background:var(--canale-chiaro); color:var(--canale-scuro); box-shadow:inset 0 0 0 1px #BCCBEA; }

/* ── 9. CAMPI ─────────────────────────────────────────────────────────── */
.campi{ display:grid; grid-template-columns:1fr 1fr; gap:12px 14px; }
.campo{ display:flex; flex-direction:column; gap:4px; min-width:0; }
.campo.pieno{ grid-column:1 / -1; }
.campo > label,.campo-eti{ font-size:12px; font-weight:600; color:var(--mid); }
.campo.obbligatorio > label::after,.campo.obbligatorio > .campo-eti::after{ content:" *"; color:var(--red-scuro); }
.campo :where(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), select, textarea),
.in{
  width:100%; height:40px; padding:0 10px; font-family:var(--font); font-size:13px; color:var(--ink);
  border:1px solid var(--bordo-campo); border-radius:var(--r-btn); background:#fff; outline:none;
  transition:border-color .15s ease-out, box-shadow .15s ease-out;
}
.campo textarea,textarea.in{ height:auto; min-height:72px; padding:8px 10px; resize:vertical; line-height:1.45; }
.campo :is(input, select, textarea):focus,.in:focus{ border-color:var(--canale); box-shadow:0 0 0 3px rgba(31,79,163,.25); }
.campo :is(input, textarea)::placeholder,.in::placeholder{ color:var(--gray); }
.campo :is(input, select, textarea):disabled,.in:disabled,.in[readonly]{ background:var(--light); color:var(--mid); }
.campo select,select.in{
  -webkit-appearance:none; appearance:none; padding-right:28px; cursor:pointer;
  background-image:linear-gradient(45deg, transparent 50%, var(--mid) 50%), linear-gradient(135deg, var(--mid) 50%, transparent 50%);
  background-position:calc(100% - 15px) 52%, calc(100% - 10px) 52%; background-size:5px 5px; background-repeat:no-repeat;
}
.in.piccolo{ height:32px; padding:0 9px; font-size:12.5px; border-radius:7px; }
select.in.piccolo{ padding-right:26px; }
.campo-aiuto{ font-size:12px; color:var(--gray); line-height:1.45; }
.campo-errore{ font-size:12px; font-weight:600; color:var(--red-scuro); line-height:1.45; }
.campo.errore :is(input, select, textarea){ border-color:var(--red-scuro); background:#FEF2F2; }
.campo > :is(.segmenti, .switch, .check, .azioni){ align-self:flex-start; }
.check{ display:inline-flex; align-items:flex-start; gap:8px; font-size:12.5px; color:var(--mid); cursor:pointer; line-height:1.4; }
.check input{ width:16px; height:16px; margin-top:1px; flex:none; accent-color:var(--canale); cursor:pointer; }
.segmenti{ display:inline-flex; flex-wrap:wrap; gap:2px; padding:3px; max-width:100%; background:var(--pearl); border-radius:10px; }
.segmenti label{ position:relative; display:inline-flex; }
.segmenti input{ position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:pointer; }
.segmenti label > span{
  display:inline-flex; align-items:center; gap:6px; height:30px; padding:0 11px; border-radius:7px;
  font-size:12.5px; font-weight:500; color:var(--mid); white-space:nowrap; transition:background .12s ease-out, color .12s ease-out;
}
.segmenti label > span .ui-ic svg{ width:14px; height:14px; }
.segmenti label:hover > span{ background:#fff; color:var(--ink); }
.segmenti input:checked + span{ background:#fff; color:var(--canale-scuro); font-weight:600; box-shadow:var(--e1); }
.segmenti input:focus-visible + span{ outline:2px solid var(--canale); outline-offset:1px; }
.segmenti input:disabled + span{ opacity:.5; }
.switch{ position:relative; display:inline-flex; align-items:center; gap:8px; min-height:28px; font-size:12.5px; font-weight:500; color:var(--mid); cursor:pointer; user-select:none; }
.switch input{ position:absolute; opacity:0; width:1px; height:1px; margin:0; }
.switch-track{ position:relative; flex:none; width:32px; height:18px; border-radius:9px; background:var(--bordo-campo); transition:background .15s ease-out; }
.switch-track::after{ content:""; position:absolute; top:2px; left:2px; width:14px; height:14px; border-radius:50%; background:#fff; box-shadow:0 1px 2px rgba(15,23,42,.25); transition:transform .15s ease-out; }
.switch input:checked + .switch-track{ background:var(--canale); }
.switch input:checked + .switch-track::after{ transform:translateX(14px); }
.switch input:focus-visible + .switch-track{ outline:2px solid var(--canale); outline-offset:2px; }
.switch input:disabled + .switch-track{ opacity:.5; }
.switch:has(input:disabled){ cursor:default; }
.switch input:checked ~ .switch-eti{ color:var(--ink); }
.switch.nota input:checked + .switch-track{ background:#D9A000; }
.switch.nota input:checked ~ .switch-eti{ color:var(--nota-testo); font-weight:600; }

/* ── 10. AVVISI IN PAGINA ─────────────────────────────────────────────── */
.banner{
  display:flex; align-items:flex-start; gap:9px; padding:9px 12px; border-radius:var(--r-pozzetto);
  font-size:12.5px; line-height:1.5; overflow-wrap:anywhere; background:var(--pearl); color:var(--mid);
}
.banner > .ui-ic{ margin-top:1px; }
.banner b,.banner strong{ color:inherit; }
.banner.info{ background:var(--canale-chiaro); color:var(--canale-scuro); }
.banner.warn{ background:var(--amber-light); color:var(--amber-scuro); }
.banner.ok{ background:var(--green-light); color:var(--green-testo); }
.banner.err{ background:var(--red-light); color:var(--red-scuro); }

/* ── 11. MODALE ───────────────────────────────────────────────────────── */
body.modale-aperta{ overflow:hidden; }
.modale-ov{
  position:fixed; inset:0; z-index:800; background:rgba(15,25,35,.45);
  display:flex; align-items:flex-start; justify-content:center; padding:7vh 16px 24px; overflow-y:auto; animation:fadeIn .15s ease-out both;
}
.modale{
  display:flex; flex-direction:column; width:100%; max-width:480px; max-height:86vh; max-height:86dvh;
  background:#fff; border-radius:var(--r-l2); box-shadow:var(--e3); animation:slideUp .18s ease-out both;
}
.modale.largo{ max-width:720px; }
.modale-testa{ display:flex; align-items:flex-start; gap:12px; padding:16px 18px 12px; box-shadow:inset 0 -1px 0 var(--hairline); }
.modale-testa > div:first-child{ min-width:0; flex:1; }
.modale-tit{ font-size:16px; font-weight:600; color:var(--ink); display:flex; align-items:center; gap:8px; line-height:1.3; }
.modale-tit .ui-ic svg{ width:18px; height:18px; color:var(--canale); }
.modale-sotto{ font-size:12.5px; color:var(--gray); margin-top:3px; line-height:1.5; }
.modale-corpo{ flex:1 1 auto; padding:16px 18px; overflow-y:auto; min-height:0; }
.modale-piede{ display:flex; justify-content:flex-end; align-items:center; gap:8px; flex-wrap:wrap; padding:12px 18px; box-shadow:inset 0 1px 0 var(--hairline); background:var(--light); border-radius:0 0 var(--r-l2) var(--r-l2); }

/* ── 12. MENU A COMPARSA E PER TE ─────────────────────────────────────── */
.pop{
  position:fixed; z-index:1000; min-width:240px; max-width:min(360px, calc(100vw - 16px));
  max-height:min(72vh, 560px); overflow-y:auto; overscroll-behavior:contain; padding:4px;
  background:#fff; border-radius:var(--r-foglio); box-shadow:0 0 0 1px rgba(var(--sh),.08), var(--e3); font-family:var(--font);
  animation:fadeIn .12s ease-out both;
}
.pop.largo{ width:min(400px, calc(100vw - 16px)); max-width:min(400px, calc(100vw - 16px)); }
.pop-tit{ display:flex; align-items:center; gap:8px; padding:7px 8px 5px; font-size:11px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--gray); }
.pop-tit .btn{ text-transform:none; letter-spacing:0; }
.pop-cerca{ padding:2px 4px 4px; }
.pop-voce{
  display:flex; align-items:center; gap:9px; width:100%; min-height:38px; padding:6px 8px; border:none; border-radius:var(--r-btn);
  background:none; text-align:left; cursor:pointer; font-family:var(--font); font-size:13px; color:var(--ink); text-decoration:none;
}
.pop-voce:hover,.pop-voce.on,.pop-voce[aria-selected="true"]{ background:var(--canale-chiaro); }
.pop-voce:focus-visible{ outline-offset:-2px; }
.pop-voce:disabled{ opacity:.5; cursor:default; background:none; }
.pop-voce > .ui-ic{ color:var(--canale-scuro); }
.pop-testo{ display:flex; flex-direction:column; gap:1px; min-width:0; flex:1; }
.pop-nome{ font-size:13px; font-weight:600; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pop-cosa{ font-size:12px; color:var(--gray); }
.pop-spunta{ margin-left:auto; color:var(--canale); display:none; }
.pop-voce.on .pop-spunta,.pop-voce[aria-checked="true"] .pop-spunta{ display:inline-flex; }
.pop-voce.pericolo .pop-nome,.pop-voce.pericolo > .ui-ic{ color:var(--red-scuro); }
.pop-voce > .prio-punto{ margin:0 4px; }
.pop-sep{ height:1px; background:var(--hairline); margin:4px 2px; }
.pop-corpo{ padding:6px 8px; display:flex; flex-direction:column; gap:6px; }
.pop-piede{ display:flex; align-items:center; justify-content:flex-end; gap:6px; padding:8px 8px 4px; box-shadow:inset 0 1px 0 var(--hairline); margin-top:4px; }
.pop-vuoto{ padding:14px 10px; text-align:center; font-size:12.5px; color:var(--gray); }
.avv{
  display:flex; align-items:flex-start; gap:9px; width:100%; padding:8px 9px; border:none; border-radius:var(--r-btn);
  background:none; text-align:left; cursor:pointer; font-family:var(--font);
}
.avv + .avv{ margin-top:1px; }
.avv:hover{ background:var(--light); }
.avv-ic{ position:relative; flex:none; display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; border-radius:7px; background:var(--pearl); color:var(--mid); }
.avv.nuovo .avv-ic::after{ content:""; position:absolute; top:-2px; right:-2px; width:9px; height:9px; border-radius:50%; background:var(--red); box-shadow:0 0 0 2px #fff; }
.avv-ic .ui-ic svg{ width:15px; height:15px; }
.avv-corpo{ display:flex; flex-direction:column; gap:1px; min-width:0; flex:1; }
.avv-tit{ font-size:13px; font-weight:500; color:var(--ink); }
.avv.nuovo .avv-tit{ font-weight:600; }
.avv-testo{ font-size:12px; color:var(--mid); line-height:1.4; overflow-wrap:anywhere; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.avv-meta{ font-size:12px; color:var(--gray); margin-top:2px; }
/* §37h: «Da fare» e «Già visti»; la riga con «Prendo io» accanto (un pulsante non sta dentro un
   pulsante); i già visti piu' tenui, una riga di testo, col perche' si sono spenti. */
.perte-sez{
  display:flex; align-items:center; justify-content:space-between; gap:10px; padding:9px 9px 4px; margin:0;
  font-size:11px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--gray);
}
.perte-sez + .pop-vuoto{ padding-top:8px; }
.avv-riga{ display:flex; align-items:center; gap:4px; }
.avv-riga + .avv, .avv + .avv-riga, .avv-riga + .avv-riga{ margin-top:1px; }
.avv-riga > .avv{ flex:1 1 auto; min-width:0; }
.btn.avv-prendo{ flex:none; margin-right:6px; }
.avv-conta{ font-weight:600; color:var(--canale-scuro); }
.avv.visto .avv-tit{ color:var(--mid); }
.avv.visto .avv-ic{ background:var(--light); color:var(--gray); }
.avv.visto .avv-testo{ -webkit-line-clamp:1; color:var(--gray); }

/* ── 13. TOAST (DESIGN §4.13) ─────────────────────────────────────────── */
.toast{
  position:fixed; left:50%; bottom:24px; z-index:9500; transform:translate(-50%, 8px);
  display:flex; align-items:center; gap:12px; max-width:min(520px, calc(100vw - 32px));
  padding:11px 16px; border-radius:12px; background:var(--notte); color:#fff;
  font-size:14px; font-weight:600; line-height:1.4; box-shadow:var(--e3);
  opacity:0; transition:opacity .2s ease-out, transform .2s ease-out; pointer-events:none;
}
.toast::before{ content:""; flex:none; width:8px; height:8px; border-radius:50%; background:var(--notte-testo); }
.toast.ok::before{ background:#4ADE80; }
.toast.err::before{ background:#F87171; }
.toast.warn::before{ background:#FBBF24; }
.toast:empty{ display:none; }
.toast.show{ opacity:1; transform:translate(-50%, 0); }
.toast.show:has(button){ pointer-events:auto; }
body.in-chiamata .toast{ bottom:calc(var(--barra-chiamata) + 28px); }
.toast-az{ flex:none; height:30px; padding:0 10px; border-radius:7px; border:0; background:var(--notte-2); color:#fff; font-size:13px; font-weight:600; cursor:pointer; }
.toast-az:hover{ background:#3A4D63; }

/* ── 14. STATI DELLA PAGINA ───────────────────────────────────────────── */
.vuoto:not(.avatar){ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; padding:40px 20px; text-align:center; color:var(--gray); }
.vuoto > .ui-ic{ color:var(--slate-scuro); margin-bottom:4px; }
.vuoto-tit{ font-size:14px; font-weight:600; color:var(--ink); }
.vuoto-testo{ font-size:12.5px; color:var(--mid); max-width:400px; line-height:1.5; }
.vuoto .btn,.vuoto .azioni{ margin-top:6px; }
.vuoto.compatto{ padding:20px 12px; }
.vuoto.compatto > .ui-ic svg{ width:26px; height:26px; }
.vuoto.riquadro{ align-items:flex-start; text-align:left; padding:12px 14px; gap:4px; background:var(--light); border-radius:var(--r-pozzetto); }
.vuoto.riquadro > .ui-ic{ display:none; }
.dettaglio > .vuoto{ background:#fff; border-radius:var(--r-l2); box-shadow:var(--e1); max-width:560px; width:100%; margin:0 auto; }
/* §39: a destra, con la lista di un flusso aperta, il flusso nel suo colore. */
.vuoto > .fl-ic.fl-grande{ width:40px; height:40px; border-radius:10px; margin-bottom:6px; }
.vuoto > .fl-ic.fl-grande .ui-ic svg{ width:22px; height:22px; }
.vuoto.vuoto-flusso{ box-shadow:var(--e1), inset 0 4px 0 var(--fl); }
.vuoto.vuoto-flusso .vuoto-tit{ color:var(--fl-scuro); }
.sk{ display:block; height:12px; border-radius:5px; background:var(--pearl); animation:skPulse 1.2s ease-in-out infinite; }
.sk + .sk{ margin-top:8px; }
.sk-riga{ height:62px; border-radius:0; margin:0 !important; box-shadow:inset 0 -1px 0 #fff; }
.sk-titolo{ height:18px; width:55%; }
.sk-testo{ width:88%; }
.sk-corto{ width:40%; }
.sk-blocco{ height:120px; border-radius:var(--r-foglio); }
.plancia{ min-height:100vh; min-height:100dvh; display:flex; align-items:center; justify-content:center; padding:24px 16px; background:var(--paper); overflow:auto; }
.app-body .plancia{ min-height:100%; }
.plancia-box{ width:100%; max-width:420px; background:#fff; border-radius:var(--r-l2); box-shadow:var(--e2); padding:26px 28px 24px; position:relative; overflow:hidden; }
.plancia-logo{ display:block; height:74px; width:auto; margin:0 0 14px -4px; }
.plancia-tit{ font-size:18px; font-weight:600; letter-spacing:-.01em; color:var(--ink); }
.plancia-sotto{ font-size:13px; color:var(--gray); line-height:1.5; margin:4px 0 18px; display:flex; align-items:center; gap:8px; }
.plancia-box .campo + .campo{ margin-top:12px; }
.plancia-box .btn.largo{ margin-top:16px; height:42px; font-size:13.5px; }
.plancia-box .banner{ margin-top:12px; }
.plancia-nota{ margin-top:14px; font-size:12px; color:var(--gray); line-height:1.5; }

/* ── 15. ELENCHI ──────────────────────────────────────────────────────── */
.elenco{ display:flex; flex-direction:column; gap:6px; }
.voce{
  --v:transparent;
  display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:2px 12px; align-items:center;
  background:#fff; border-radius:var(--r-pozzetto); box-shadow:0 0 0 1px var(--border), inset 3px 0 0 var(--v); padding:9px 12px; min-width:0;
}
.voce.cliccabile{ cursor:pointer; transition:background .12s ease-out; }
.voce.cliccabile:hover{ background:var(--light); }
.voce.spenta{ background:var(--light); }
.voce.spenta .voce-tit{ color:var(--mid); }
.voce.scelta{ --v:var(--canale); background:var(--canale-chiaro); }
.voce-ic{ display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; border-radius:var(--r-btn); background:var(--pearl); color:var(--canale-scuro); }
.voce-ic .ui-ic svg{ width:17px; height:17px; }
.voce-corpo{ min-width:0; }
.voce-tit{ font-size:13px; font-weight:600; color:var(--ink); display:flex; align-items:center; gap:6px; flex-wrap:wrap; overflow-wrap:anywhere; }
.voce-sub{ font-size:12px; color:var(--mid); line-height:1.45; margin-top:1px; overflow-wrap:anywhere; }
.voce-meta{ display:flex; flex-wrap:wrap; align-items:center; gap:5px; margin-top:4px; }
.voce-az{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; justify-content:flex-end; }
.foglio .elenco{ gap:0; }
.foglio .elenco .voce{ box-shadow:none; border-radius:0; border-bottom:1px solid var(--hairline); padding:10px 2px; }
.foglio .elenco .voce:last-child{ border-bottom:none; }

/* ── 16. TABELLE ──────────────────────────────────────────────────────── */
.tab-wrap{ overflow-x:auto; }
.tab{ width:100%; border-collapse:collapse; background:#fff; font-size:12.5px; border-radius:var(--r-pozzetto); overflow:hidden; box-shadow:0 0 0 1px var(--border); }
.tab th{ text-align:left; white-space:nowrap; padding:8px 10px; background:var(--light); box-shadow:inset 0 -1px 0 var(--border); font-size:11px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--gray); }
.tab td{ padding:8px 10px; border-bottom:1px solid var(--hairline); vertical-align:middle; }
.tab tr:last-child td{ border-bottom:0; }
.tab td.num,.tab th.num{ text-align:right; white-space:nowrap; font-family:var(--mono); font-variant-numeric:tabular-nums; }

/* ── 17. BARRA DELLA CHIAMATA (L3, DESIGN §4.5) ───────────────────────── */
.barra-chiamata{
  position:fixed; left:16px; right:16px; bottom:16px; z-index:150; height:var(--barra-chiamata);
  display:flex; align-items:center; gap:14px; padding:0 12px 0 18px;
  background:var(--notte); color:#fff; border-radius:var(--r-l2); box-shadow:var(--e3); animation:slideUp .18s ease-out both;
}
.bc-vivo{ width:10px; height:10px; border-radius:50%; background:#4ADE80; box-shadow:0 0 0 4px rgba(74,222,128,.2); flex:none; }
.bc-chi{
  display:block; min-width:0; max-width:260px; padding:0; border:0; background:none; color:#fff; text-align:left;
  font-size:13.5px; line-height:1.3; white-space:nowrap; cursor:pointer;
}
.bc-chi b{ display:block; font-weight:600; overflow:hidden; text-overflow:ellipsis; }
.bc-chi span{ display:block; font-size:12px; color:var(--notte-testo); overflow:hidden; text-overflow:ellipsis; }
.bc-chi:hover b{ text-decoration:underline; text-underline-offset:2px; }
.bc-chi:focus-visible{ outline-color:#4ADE80; }
.bc-tempo{ font-family:var(--mono); font-size:22px; font-weight:600; padding:0 6px; font-variant-numeric:tabular-nums; flex:none; }
.bc-nota{
  flex:1; min-width:120px; height:40px; padding:0 12px; border:0; border-radius:var(--r-pozzetto);
  background:#1C2B3B; box-shadow:inset 0 0 0 1px #3A4A5C; color:#fff; font-family:var(--font); font-size:13px; outline:none;
}
.bc-nota::placeholder{ color:var(--notte-testo); }
.bc-nota:focus{ box-shadow:inset 0 0 0 1.5px #9DB7EE; }
.bc-domanda{ flex:none; font-size:14px; font-weight:600; color:#fff; padding-left:4px; }
.bc-az{ display:flex; gap:6px; flex:none; }
.bc-az .btn{ height:40px; }
.btn.scuro{ background:transparent; color:#fff; box-shadow:inset 0 0 0 1px #4A5B6E; }
.btn.scuro:hover{ background:#1C2B3B; }
.btn.annulla{ background:transparent; box-shadow:none; color:var(--notte-testo); font-weight:500; }
.btn.annulla:hover{ background:#1C2B3B; color:#fff; }
.barra-chiamata .btn:focus-visible{ outline-color:#9DB7EE; }

/* ── 19. INVITO SOTTO I 900 PX (SPEC §23a) ────────────────────────────── */
.invito-app{ display:none; position:fixed; inset:0; z-index:5000; background:var(--paper); overflow:auto; padding:24px 16px; }
.invito-box{ position:relative; overflow:hidden; width:100%; max-width:400px; margin:auto; background:#fff; border-radius:var(--r-l2); box-shadow:var(--e2); padding:24px 22px 22px; text-align:center; }
.invito-box .invito-logo{ display:block; height:74px; width:auto; margin:0 auto 18px; }
.invito-tit{ font-size:20px; font-weight:600; letter-spacing:-.01em; line-height:1.25; color:var(--ink); }
.invito-sotto{ margin:8px auto 20px; max-width:30ch; font-size:14px; line-height:1.5; color:var(--mid); }
.invito-box .btn{ height:48px; width:100%; font-size:15px; border-radius:12px; }
.invito-box .btn .ui-ic svg{ width:18px; height:18px; }

/* La fascia di Bill anche in cima alla schermata d'accesso e all'invito all'app. */
.plancia-box::before, .invito-box::before{ content:""; position:absolute; left:0; right:0; top:0; height:5px; background:var(--fascia); }

/* ── 20. REGISTRATE E SCHEDA CLIENTE (SPEC §18) ───────────────────────── */
.reg-risultati{ max-height:min(300px, 42vh); overflow-y:auto; overscroll-behavior:contain; }
.reg-risultati:empty{ display:none; }
.reg-durata{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.reg-durata input{ width:90px; flex:none; }
.reg-chip{ display:inline-flex; flex-wrap:wrap; gap:4px; }
.reg-chip .chip{ min-width:38px; height:28px; justify-content:center; font-family:var(--mono); font-size:12px; }
.nuova-segue{ display:flex; align-items:center; gap:8px; margin:12px 0 4px; font-size:12.5px; font-weight:600; color:var(--ink); }
.nuova-segue .ui-ic{ color:var(--canale); }
.campo-posto{ display:contents; }
.altro-modo{ margin-top:10px; border-radius:var(--r-pozzetto); background:var(--light); }
.altro-modo > summary{
  display:flex; align-items:center; gap:8px; min-height:38px; padding:0 12px; cursor:pointer; list-style:none;
  font-size:12.5px; font-weight:600; color:var(--canale-scuro);
}
.altro-modo > summary::-webkit-details-marker{ display:none; }
.altro-modo > summary::before{ content:""; flex:none; width:6px; height:6px; border-right:1.7px solid currentColor; border-bottom:1.7px solid currentColor; transform:rotate(-45deg); transition:transform .15s ease-out; }
.altro-modo[open] > summary::before{ transform:rotate(45deg); }
.altro-modo > .pila{ padding:10px 12px 12px; }
.cli-scheda{ display:flex; flex-direction:column; gap:6px; padding:10px 12px; background:var(--pearl); border-radius:var(--r-pozzetto); }
.cli-rs{ font-size:14px; font-weight:600; line-height:1.3; color:var(--ink); overflow-wrap:anywhere; }
.cli-sub{ font-size:12px; color:var(--mid); }
.cli-sub .mono{ font-weight:600; color:var(--f-scuro, var(--canale-scuro)); }
.cli-come{ display:flex; align-items:flex-start; gap:6px; font-size:12px; line-height:1.45; color:var(--mid); }
.cli-come > .ui-ic{ flex:none; margin-top:1px; color:var(--f-scuro, var(--canale-scuro)); }
.cli-sug .pila{ gap:4px; min-width:0; }
.cli-sug-dati,.cli-sug-perche{ font-size:12px; }
.cli-sug .azioni{ margin-top:2px; }
.cli-sug.forte{ box-shadow:inset 3px 0 0 var(--magenta); }
.altre{ display:flex; flex-direction:column; border-radius:var(--r-pozzetto); overflow:hidden; box-shadow:0 0 0 1px var(--hairline); }
.altra{
  display:flex; flex-direction:column; gap:2px; width:100%; min-width:0; padding:8px 10px 8px 12px; text-align:left;
  background:#fff; border:none; border-bottom:1px solid var(--hairline); font-family:var(--font); color:var(--ink); cursor:pointer;
}
.altra:last-child{ border-bottom:none; }
.altra:hover{ background:var(--light); }
.altra-su{ display:flex; align-items:center; gap:6px; min-width:0; }
.altra-ogg{ flex:1 1 auto; min-width:0; font-size:12.5px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.altra-su .pill{ flex:none; }
.altra-giu{ font-size:12px; color:var(--gray); min-width:0; }
.altra-tipo{ display:inline-flex; align-items:center; gap:4px; }
.altra-tipo .ui-ic svg{ width:12px; height:12px; }

/* ── LARGHEZZE (pensata da 1280, regge fino a 1024) ───────────────────── */
@media (max-width:1399.98px){
  :root{ --lista-w:380px; --lato-w:316px; }
  .top-titolo{ display:none; }
  .linguetta{ font-size:12.5px; padding:0 4px; }
  .linguette{ padding:0 6px 0 8px; }
  .in-carico .eti-up{ display:none; }
  .dettaglio{ padding:14px 16px 16px; }
  .composer-barra{ gap:2px; }
  .composer-barra .btn.icona{ width:32px; }
  .composer-barra .btn.testo:not(.icona){ padding:0 7px; }
  .composer-barra .btn.comp-invia{ padding:0 11px; }
  .comp-tab{ padding:0 8px; }
  .seg{ margin-right:2px; }
}
@media (max-width:1239.98px){
  .casella .eti{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
  .casella{ padding:0 10px; }
  .t-az .btn .az-eti{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
  .t-az .btn.con-eti .az-eti{ position:static; width:auto; height:auto; clip:auto; }
}
@media (max-width:1099.98px){
  :root{ --lista-w:330px; }
  .linguetta{ font-size:12px; padding:0 3px; }
  .app-top{ padding:0 16px; }
  .dettaglio{ overflow-y:auto; }
  .dettaglio > .dett-corpo{ flex:none; }
  .dett-corpo{ grid-template-columns:minmax(0,1fr); }
  .conv-foglio{ height:max(460px, 64vh); }
  .dett-lato{ overflow:visible; display:grid; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); align-items:start; }
  .bc-chi{ max-width:180px; }
}
/* Sotto i 900 px: l'invito all'app al posto della console (SPEC §23a, DESIGN §3.2). */
@media (max-width:899.98px){
  #app,.toast,.barra-chiamata,.pop,.modale-ov{ display:none !important; }
  .invito-app{ display:flex; }
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ transition:none !important; animation:none !important; scroll-behavior:auto !important; }
}
@media print{
  body{ overflow:visible; }
  #app{ height:auto; }
  .app-top,.lista-col,.composer,.zona,.demo-chip,.toast,.t-az,.dett-avvisi,.barra-chiamata{ display:none !important; }
  .app-body,.split,.dettaglio,.conv,.dett-lato{ height:auto; overflow:visible; display:block; }
}

/* 29. IL PANNELLO DELLA RICHIESTA, PIU' SEMPLICE (SPEC §29, Francesco 16/10: «solo l'assistenza
   e le info sul cliente»): a destra Cliente e File; «Chiama» apre il suo riquadro; Rapporto e
   Registro in una finestra dal ⋯; «Chiudi l'assistenza» con il rapporto e «poi la prossima». */
.pop-tit-sotto{ margin-left:auto; text-transform:none; letter-spacing:0; font-weight:500; font-size:12px; color:var(--canale-scuro); }
.ch-pop{ padding:4px 8px 8px; gap:0; }
.cli-testa{ display:flex; align-items:center; gap:10px; min-width:0; }
.cli-av{ width:40px; height:40px; border-radius:50%; flex:none; display:grid; place-items:center;
  background:var(--magenta-light); color:var(--magenta-scuro); font-weight:700; font-size:14px; }
.cli-nome{ font-size:15px; font-weight:600; color:var(--ink); line-height:1.3; overflow-wrap:anywhere; }
.cli-dove{ font-size:12.5px; color:var(--mid); line-height:1.4; }
.cli-contatti{ list-style:none; margin:10px 0 0; padding:0; display:flex; flex-direction:column; gap:5px; font-size:13px; color:var(--ink); }
.cli-contatti li{ display:flex; align-items:center; gap:8px; min-width:0; }
.cli-contatti li > span{ min-width:0; overflow-wrap:anywhere; }
.cli-contatti .ui-ic{ color:var(--gray); flex:none; }
.cli-contatti .ui-ic svg{ width:15px; height:15px; }
/* Numero ed email da copiare: un clic sul numero lo seleziona tutto, il pulsantino lo copia. */
.cli-num{ user-select:all; cursor:text; }
.cli-copia{ display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px; margin-left:4px; padding:0;
  border:0; border-radius:7px; background:transparent; color:var(--gray); cursor:pointer; vertical-align:middle; }
.cli-copia:hover{ background:var(--light); color:var(--canale-scuro); }
.cli-copia:focus-visible{ outline:2px solid var(--canale); outline-offset:1px; }
.cli-contatti .cli-copia .ui-ic svg{ width:14px; height:14px; }
@media (pointer:coarse){ .cli-copia{ width:36px; height:36px; } }
.cli-gest{ margin-top:12px; padding-top:10px; box-shadow:inset 0 1px 0 var(--hairline); display:flex; flex-direction:column; gap:8px; }
.cli-gest-tit{ display:flex; align-items:center; gap:6px; font-size:11px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--gray); }
.cli-gest-tit .ui-ic svg{ width:13px; height:13px; }
.cli-scheda .cli-gest-tit{ margin-bottom:2px; }
.cli-scheda .azioni{ margin-top:4px; flex-wrap:wrap; }
.cli-link{ display:flex; align-items:center; flex-wrap:wrap; gap:6px; margin-top:12px; padding-top:10px; box-shadow:inset 0 1px 0 var(--hairline); }
.cli-link-eti{ display:flex; align-items:center; gap:6px; flex-basis:100%; font-size:11px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--gray); }
.cli-link-eti .ui-ic svg{ width:14px; height:14px; }
/* §31c: il link su WhatsApp partito da solo */
.cli-wa{ display:flex; align-items:flex-start; gap:6px; margin:8px 0 0; font-size:12.5px; line-height:1.45; color:var(--mid); }
.cli-wa .ui-ic{ flex:none; margin-top:1px; }
.cli-wa .ui-ic svg{ width:14px; height:14px; }
.cli-wa.ok .ui-ic{ color:var(--green-testo); }
.cli-wa.no{ color:var(--amber-scuro); }
.cli-piede{ margin-top:10px; font-size:12px; color:var(--gray); line-height:1.5; }
.cli-piede b{ font-weight:600; color:var(--mid); }
.cli-piede .link-btn{ font-size:12px; }
.spunta{ display:flex; align-items:center; gap:8px; font-size:13.5px; color:var(--ink); cursor:pointer; margin-top:12px; }
.spunta input{ width:16px; height:16px; accent-color:var(--canale); }
.finestra-foglio{ display:flex; flex-direction:column; gap:8px; }
.finestra-foglio .elenco{ gap:0; }
.finestra-foglio .elenco .voce{ box-shadow:none; border-radius:0; border-bottom:1px solid var(--hairline); padding:10px 2px; }
.finestra-foglio .elenco .voce:last-child{ border-bottom:none; }

/* ── 30. STORICO DELLA RICHIESTA (SPEC §30) ─────────────────────────────
   Nella finestra dal ⋯: in cima la sintesi del cliente, poi squadra e cliente in una lista
   sola; le righe del cliente hanno l'icona turchese (la famiglia del cliente). */
.storico-sintesi{ display:flex; align-items:flex-start; gap:10px; padding:10px 12px; border-radius:var(--r-pozzetto);
  background:var(--turchese-light); color:var(--turchese-scuro); font-size:13px; line-height:1.5; }
.storico-sintesi .ui-ic{ flex:none; margin-top:2px; }
.storico-sintesi p{ margin:0; }
.storico-carico{ margin:0; }
.finestra-foglio .elenco .voce{ align-items:start; }
.voce.del-cliente .voce-ic{ background:var(--turchese-light); color:var(--turchese-scuro); }
.voce-dett{ font-size:12.5px; color:var(--ink); line-height:1.45; margin-top:2px; overflow-wrap:anywhere; }
.storico-nota{ margin:2px 0 0; font-size:12px; color:var(--gray); line-height:1.5; }