/* =====================================================================================================
   portale.css: L'UNICO foglio di stile del portale (index.html e pagine FMS, fms_reports/web/templates/base.html).
   Regole: CLAUDE.md, sezione "Stile grafico". Niente <style> nelle pagine, niente CSS per sezione, niente style=""
   per l'aspetto (solo valori calcolati a runtime). Colori e misure dai token qui sotto.
   Indice: 1 token e base, 2 struttura (barra laterale, loader, aiuto), 3 portale (componenti e sezioni SPA),
           4 componenti comuni a tutte le sezioni, 5 tabelle (tabelle.js), 6 sezione FMS.
   ===================================================================================================== */
/* ----------------------------------------------------------------- 1. token (temi e varianti di colori) e base
   Modalità: chiara, scura o automatica (segue Windows: prefers-color-scheme), scelta in data-theme su <html>. Per ognuna
   l'utente sceglie una VARIANTE di colori (pagina Profilo del portale, Account dell'area clienti): data-chiaro e
   data-scuro su <html>; senza scelta valgono Neve e Carbone. Solo i token cambiano: le regole sotto non scrivono colori.
   Ogni variante è scritta una volta e vale anche per le sue anteprime ([data-chiaro=…] / [data-scuro=…] su un elemento,
   .aspetto-*); le scure si ripetono solo per la modalità automatica (dentro la media query).
   Ruoli: --brand = arancio PCS #EA5E14 (pulsante della chat, prima serie dei grafici; --on-brand sopra);
   --accent-fill/--on-accent = pulsanti principali; --accent = link, focus, bordi attivi; --sel-fill/--on-sel = scelte
   attive (selettori, filtri, schede); --testata/--on-testata = intestazione del pannello della chat; --titolo =
   titoletti; --sb-* = barra laterale. Le varianti sobrie (tutte tranne Sabbia e Terra) tengono l'arancio solo su
   pulsanti principali, link e marchio. Contrasti verificati AA; avvisi (--warn) color oro, distinti dall'arancio. */
:root,[data-chiaro]{
  color-scheme:light;
  --accent:#b8470d;--accent-fill:#c94d0b;--on-accent:#ffffff;--brand:#ea5e14;--on-brand:#ffffff;
  --ok:#1f7a48;--ok-soft:#e7f4ec;--warn:#755a00;--warn-soft:#fbf4d9;--bad:#b3261e;--bad-soft:#fbeae8;
  --su:#6b3fa0;--su-soft:#f3ecfb;--su-border:#c5a8e6;
  --shadow:0 1px 2px rgba(20,22,28,.05),0 1px 3px rgba(20,22,28,.06);--shadow-pop:0 10px 28px rgba(20,22,28,.15);
  --velo:rgba(20,22,28,.38);--radius:8px;--radius-s:6px;--gap:16px;
  /* grafici: serie categoriche nell'ordine fisso (arancio PCS e bordeaux, verificate per daltonismo) e gravità
     con i colori dei report VA/WAS (1 moderate verde, 2 gravi arancio, 3 critiche rosso) */
  --g-1:#ea5e14;--g-2:#8a3a5c;--g-grav-1:#1d7a4f;--g-grav-2:#c4620a;--g-grav-3:#b42318;
  --font:14px/1.45 "Segoe UI",system-ui,-apple-system,sans-serif;--mono:Consolas,"Cascadia Mono",ui-monospace,monospace;
  --sb-accent:var(--brand);--sb-w:236px;--sb-w-ridotta:64px;
}
/* varianti chiare: Neve (predefinita), Perla, Avorio, Nebbia, Sabbia (calda, con più arancio) */
:root,[data-chiaro="neve"]{
  --bg:#f6f6f7;--surface:#ffffff;--surface-2:#fafafa;--text:#1d1e21;--muted:#62656c;--border:#e3e4e8;--neutral-soft:#f0f1f3;
  --accent-soft:#f2f3f5;--sel-fill:#2c2e33;--on-sel:#ffffff;--testata:#2c2e33;--on-testata:#ffffff;--titolo:#1d1e21;
  --sb-bg:#ffffff;--sb-bg-2:#f3f4f6;--sb-line:#ebecef;--sb-text:#3b3d42;--sb-muted:#76797f;--sb-on:#111214;--sb-on-bg:#f0f1f3;--sb-ico-on:#ea5e14;
}
[data-chiaro="perla"]{
  --bg:#eceef1;--surface:#ffffff;--surface-2:#f5f6f8;--text:#1c1f24;--muted:#5e646c;--border:#dadde2;--neutral-soft:#e9ebee;
  --accent-soft:#eaecef;--sel-fill:#3a3f47;--on-sel:#ffffff;--testata:#3a3f47;--on-testata:#ffffff;--titolo:#1c1f24;
  --sb-bg:#f5f6f8;--sb-bg-2:#e9ecef;--sb-line:#dfe2e6;--sb-text:#383c42;--sb-muted:#72777f;--sb-on:#111317;--sb-on-bg:#e4e7eb;--sb-ico-on:#ea5e14;
}
[data-chiaro="avorio"]{
  --bg:#f7f3ec;--surface:#fffdf9;--surface-2:#fbf7f0;--text:#25211c;--muted:#6c6358;--border:#e8e0d3;--neutral-soft:#f2ece2;
  --accent-soft:#f5ede1;--sel-fill:#4b4137;--on-sel:#ffffff;--testata:#4b4137;--on-testata:#ffffff;--titolo:#25211c;
  --sb-bg:#fffdf9;--sb-bg-2:#f6f0e6;--sb-line:#ece4d8;--sb-text:#3f382f;--sb-muted:#7b7266;--sb-on:#1f1a14;--sb-on-bg:#f3ebde;--sb-ico-on:#ea5e14;
}
[data-chiaro="nebbia"]{
  --bg:#f0f3f6;--surface:#ffffff;--surface-2:#f6f8fa;--text:#1b2430;--muted:#5d6b7b;--border:#dce2e9;--neutral-soft:#eaeef3;
  --accent-soft:#ebf0f5;--sel-fill:#3d4a5a;--on-sel:#ffffff;--testata:#3d4a5a;--on-testata:#ffffff;--titolo:#1b2430;
  --sb-bg:#ffffff;--sb-bg-2:#f1f4f8;--sb-line:#e3e8ee;--sb-text:#344150;--sb-muted:#6b7887;--sb-on:#111a24;--sb-on-bg:#eaf0f6;--sb-ico-on:#ea5e14;
}
[data-chiaro="sabbia"]{
  --bg:#f6f4f2;--surface:#ffffff;--surface-2:#faf8f6;--text:#1f1b18;--muted:#6b625b;--border:#e6e0da;--neutral-soft:#f1ece7;
  --accent-soft:#fdf0e8;--sel-fill:#c94d0b;--on-sel:#ffffff;--testata:#c94d0b;--on-testata:#ffffff;--titolo:#b8470d;
  --sb-bg:#ffffff;--sb-bg-2:#f6f2ee;--sb-line:#ebe5df;--sb-text:#3d342d;--sb-muted:#7a7068;--sb-on:#1f1610;--sb-on-bg:#fdf0e8;--sb-ico-on:#b8470d;
}
/* varianti scure: Carbone (predefinita), Grafite, Ardesia, Nocciola, Terra (calda, con più arancio) */
@media (prefers-color-scheme:dark){
:root:not([data-theme="light"]){
  color-scheme:dark;
  --ok:#5cc58a;--ok-soft:#13281c;--warn:#e2c04f;--warn-soft:#2b2510;--bad:#ef7c73;--bad-soft:#311917;
  --su:#d2b3f2;--su-soft:#2e1d40;--su-border:#8c63bf;
  --shadow:none;--shadow-pop:0 10px 28px rgba(0,0,0,.5);--velo:rgba(0,0,0,.55);
  --g-1:#e8661f;--g-2:#b85a86;--g-grav-1:#3fae74;--g-grav-2:#e8832a;--g-grav-3:#e5534b;
  --bg:#0c0c0d;--surface:#161618;--surface-2:#1d1d20;--text:#f4f4f5;--muted:#a1a1a8;--border:#2a2a2e;--neutral-soft:#202023;
  --accent:#ffa36b;--accent-soft:#222225;--accent-fill:#f07a3a;--on-accent:#1a1006;--brand:#ea5e14;--on-brand:#ffffff;
  --sel-fill:#38383d;--on-sel:#ffffff;--testata:#1d1d20;--on-testata:#f4f4f5;--titolo:#cacad0;
  --sb-bg:#111113;--sb-bg-2:#1c1c1f;--sb-line:#232326;--sb-text:#c8c8cd;--sb-muted:#8a8a91;--sb-on:#ffffff;--sb-on-bg:#232326;--sb-ico-on:#ffa36b;
}
:root:not([data-theme="light"])[data-scuro="grafite"]{
  --bg:#25272b;--surface:#2d3035;--surface-2:#34383e;--text:#eceef1;--muted:#adb4bc;--border:#40454c;--neutral-soft:#373b41;
  --accent:#ff9a5c;--accent-soft:#383c42;--accent-fill:#f07a3a;--on-accent:#1a1006;--brand:#ea5e14;--on-brand:#ffffff;
  --sel-fill:#50565f;--on-sel:#ffffff;--testata:#34383e;--on-testata:#eceef1;--titolo:#eceef1;
  --sb-bg:#2a2d31;--sb-bg-2:#33373c;--sb-line:#3a3e44;--sb-text:#ced3d9;--sb-muted:#959ca4;--sb-on:#ffffff;--sb-on-bg:#3a3f45;--sb-ico-on:#ff9a5c;
}
:root:not([data-theme="light"])[data-scuro="ardesia"]{
  --bg:#1a2029;--surface:#222a35;--surface-2:#29323e;--text:#e7ebf1;--muted:#a6b0bf;--border:#36404e;--neutral-soft:#2b3440;
  --accent:#ff8f52;--accent-soft:#2c3542;--accent-fill:#f07a3a;--on-accent:#1a1006;--brand:#ea5e14;--on-brand:#ffffff;
  --sel-fill:#44505f;--on-sel:#ffffff;--testata:#29323e;--on-testata:#e7ebf1;--titolo:#e7ebf1;
  --sb-bg:#1d242e;--sb-bg-2:#273040;--sb-line:#2e3846;--sb-text:#c8d0db;--sb-muted:#8c96a5;--sb-on:#ffffff;--sb-on-bg:#2c3645;--sb-ico-on:#ff8f52;
}
:root:not([data-theme="light"])[data-scuro="nocciola"]{
  --bg:#201e1c;--surface:#282624;--surface-2:#302d2a;--text:#f3efeb;--muted:#b3aca5;--border:#3d3936;--neutral-soft:#33302c;
  --accent:#ff9f68;--accent-soft:#36312c;--accent-fill:#f07a3a;--on-accent:#1a1006;--brand:#ea5e14;--on-brand:#ffffff;
  --sel-fill:#4a4540;--on-sel:#ffffff;--testata:#302d2a;--on-testata:#f3efeb;--titolo:#f3efeb;
  --sb-bg:#242220;--sb-bg-2:#2e2b28;--sb-line:#36322f;--sb-text:#d6d0ca;--sb-muted:#9b948d;--sb-on:#ffffff;--sb-on-bg:#36322e;--sb-ico-on:#ff9f68;
}
:root:not([data-theme="light"])[data-scuro="terra"]{
  --bg:#12100e;--surface:#1a1715;--surface-2:#221e1b;--text:#ece6e1;--muted:#a39a92;--border:#352f2a;--neutral-soft:#27221e;
  --accent:#ff8a4c;--accent-soft:#2e1d12;--accent-fill:#ff8a4c;--on-accent:#1f1208;--brand:#f0732a;--on-brand:#1f1208;
  --sel-fill:#ff8a4c;--on-sel:#1f1208;--testata:#ff8a4c;--on-testata:#1f1208;--titolo:#ff8a4c;
  --sb-bg:#1e1a17;--sb-bg-2:#29231f;--sb-line:#342d28;--sb-text:#cfc6be;--sb-muted:#958a81;--sb-on:#ffffff;--sb-on-bg:#33241a;--sb-ico-on:#ff8a4c;
}
}
:root[data-theme="dark"],[data-scuro]:not(:root){
  color-scheme:dark;
  --ok:#5cc58a;--ok-soft:#13281c;--warn:#e2c04f;--warn-soft:#2b2510;--bad:#ef7c73;--bad-soft:#311917;
  --su:#d2b3f2;--su-soft:#2e1d40;--su-border:#8c63bf;
  --shadow:none;--shadow-pop:0 10px 28px rgba(0,0,0,.5);--velo:rgba(0,0,0,.55);
  --g-1:#e8661f;--g-2:#b85a86;--g-grav-1:#3fae74;--g-grav-2:#e8832a;--g-grav-3:#e5534b;
}
:root[data-theme="dark"],[data-scuro="carbone"]:not(:root){
  --bg:#0c0c0d;--surface:#161618;--surface-2:#1d1d20;--text:#f4f4f5;--muted:#a1a1a8;--border:#2a2a2e;--neutral-soft:#202023;
  --accent:#ffa36b;--accent-soft:#222225;--accent-fill:#f07a3a;--on-accent:#1a1006;--brand:#ea5e14;--on-brand:#ffffff;
  --sel-fill:#38383d;--on-sel:#ffffff;--testata:#1d1d20;--on-testata:#f4f4f5;--titolo:#cacad0;
  --sb-bg:#111113;--sb-bg-2:#1c1c1f;--sb-line:#232326;--sb-text:#c8c8cd;--sb-muted:#8a8a91;--sb-on:#ffffff;--sb-on-bg:#232326;--sb-ico-on:#ffa36b;
}
:root[data-theme="dark"][data-scuro="grafite"],[data-scuro="grafite"]:not(:root){
  --bg:#25272b;--surface:#2d3035;--surface-2:#34383e;--text:#eceef1;--muted:#adb4bc;--border:#40454c;--neutral-soft:#373b41;
  --accent:#ff9a5c;--accent-soft:#383c42;--accent-fill:#f07a3a;--on-accent:#1a1006;--brand:#ea5e14;--on-brand:#ffffff;
  --sel-fill:#50565f;--on-sel:#ffffff;--testata:#34383e;--on-testata:#eceef1;--titolo:#eceef1;
  --sb-bg:#2a2d31;--sb-bg-2:#33373c;--sb-line:#3a3e44;--sb-text:#ced3d9;--sb-muted:#959ca4;--sb-on:#ffffff;--sb-on-bg:#3a3f45;--sb-ico-on:#ff9a5c;
}
:root[data-theme="dark"][data-scuro="ardesia"],[data-scuro="ardesia"]:not(:root){
  --bg:#1a2029;--surface:#222a35;--surface-2:#29323e;--text:#e7ebf1;--muted:#a6b0bf;--border:#36404e;--neutral-soft:#2b3440;
  --accent:#ff8f52;--accent-soft:#2c3542;--accent-fill:#f07a3a;--on-accent:#1a1006;--brand:#ea5e14;--on-brand:#ffffff;
  --sel-fill:#44505f;--on-sel:#ffffff;--testata:#29323e;--on-testata:#e7ebf1;--titolo:#e7ebf1;
  --sb-bg:#1d242e;--sb-bg-2:#273040;--sb-line:#2e3846;--sb-text:#c8d0db;--sb-muted:#8c96a5;--sb-on:#ffffff;--sb-on-bg:#2c3645;--sb-ico-on:#ff8f52;
}
:root[data-theme="dark"][data-scuro="nocciola"],[data-scuro="nocciola"]:not(:root){
  --bg:#201e1c;--surface:#282624;--surface-2:#302d2a;--text:#f3efeb;--muted:#b3aca5;--border:#3d3936;--neutral-soft:#33302c;
  --accent:#ff9f68;--accent-soft:#36312c;--accent-fill:#f07a3a;--on-accent:#1a1006;--brand:#ea5e14;--on-brand:#ffffff;
  --sel-fill:#4a4540;--on-sel:#ffffff;--testata:#302d2a;--on-testata:#f3efeb;--titolo:#f3efeb;
  --sb-bg:#242220;--sb-bg-2:#2e2b28;--sb-line:#36322f;--sb-text:#d6d0ca;--sb-muted:#9b948d;--sb-on:#ffffff;--sb-on-bg:#36322e;--sb-ico-on:#ff9f68;
}
:root[data-theme="dark"][data-scuro="terra"],[data-scuro="terra"]:not(:root){
  --bg:#12100e;--surface:#1a1715;--surface-2:#221e1b;--text:#ece6e1;--muted:#a39a92;--border:#352f2a;--neutral-soft:#27221e;
  --accent:#ff8a4c;--accent-soft:#2e1d12;--accent-fill:#ff8a4c;--on-accent:#1f1208;--brand:#f0732a;--on-brand:#1f1208;
  --sel-fill:#ff8a4c;--on-sel:#1f1208;--testata:#ff8a4c;--on-testata:#1f1208;--titolo:#ff8a4c;
  --sb-bg:#1e1a17;--sb-bg-2:#29231f;--sb-line:#342d28;--sb-text:#cfc6be;--sb-muted:#958a81;--sb-on:#ffffff;--sb-on-bg:#33241a;--sb-ico-on:#ff8a4c;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font:var(--font)}

/* ----------------------------------------------------------------- 2. struttura (SPOC + FMS): barra laterale sinistra con il menu.
   Usato sia dalle pagine SPOC (index.html) sia da quelle FMS (fms_reports/web/templates/base.html), e dall'area
   clienti. Colori propri (--sb-*), definiti nelle varianti (sezione 1). Il logo PCS (PNG trasparente) sta sempre al
   naturale: nelle varianti scure la barra non è mai nera pura, così il riquadro nero del marchio resta distinguibile. */
body.shell{margin:0;display:flex;min-height:100vh}
.sidebar{width:var(--sb-w);flex:none;background:var(--sb-bg);color:var(--sb-text);display:flex;flex-direction:column;
  position:sticky;top:0;height:100vh;overflow-y:auto;font:14px/1.4 "Segoe UI",system-ui,-apple-system,sans-serif;z-index:30;
  border-right:1px solid var(--sb-line);transition:width .15s ease}
.shell-main{flex:1;min-width:0}
.sb-brand{display:block;padding:18px 18px 14px;color:var(--sb-on);text-decoration:none;border-bottom:1px solid var(--sb-line)}
.sb-logo{display:block;width:132px;height:auto}
.sb-nav{flex:1;padding:10px 0}
/* gruppi di primo livello espandibili (<details>, vedi app/static/shell.js) */
.sb-gruppo{margin:2px 0}
.sb-titolo{display:flex;align-items:center;gap:10px;margin:1px 10px;padding:8px 10px 8px 12px;border-radius:6px;color:var(--sb-text);
  font-size:13px;font-weight:700;letter-spacing:.02em;cursor:pointer;list-style:none;user-select:none}
.sb-titolo::-webkit-details-marker{display:none}
.sb-titolo:hover{background:var(--sb-bg-2);color:var(--sb-on)}
.sb-titolo:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.sb-titolo-t{flex:1}
.sb-gruppo.sb-corrente>.sb-titolo{color:var(--sb-on)}
.sb-gruppo.sb-corrente>.sb-titolo .sb-ico{color:var(--sb-ico-on)}
.sb-ico{display:inline-flex;width:18px;height:18px;flex:none;color:var(--sb-muted)}
.sb-titolo:hover .sb-ico{color:var(--sb-on)}
.sb-freccia{display:inline-flex;color:var(--sb-muted);transition:transform .15s ease}
.sb-freccia svg{width:14px;height:14px}
.sb-gruppo[open]>.sb-titolo .sb-freccia{transform:rotate(90deg)}
.sb-voci>a{margin-left:22px;padding-left:20px;font-weight:500;font-size:13.5px}
.sb-voci-t{display:none}
.sb-gruppo[open]>.sb-voci{animation:sb-apri .15s ease}
@keyframes sb-apri{from{opacity:0;transform:translateY(-3px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.sb-freccia,.sidebar{transition:none}.sb-gruppo[open]>.sb-voci{animation:none}}
.sb-home,.sb-nav a.sb-voce{display:flex!important;align-items:center;gap:10px}
/* voce di primo livello con icona, fuori dai gruppi (area clienti): stessa resa dei titoli dei gruppi */
.sb-nav a.sb-voce:hover .sb-ico{color:var(--sb-on)}
.sb-nav a.sb-voce.on .sb-ico{color:var(--sb-ico-on)}
.sb-home{font-weight:700;border-bottom:1px solid var(--sb-line);margin-bottom:8px!important;padding:8px 10px 10px 12px!important;border-left:0!important}
.sb-home .sb-ico{color:var(--sb-ico-on)}
/* contatore degli allarmi non letti sulla voce del menu (shell.js, sbAllarmi) */
.sb-badge{margin-left:auto;min-width:20px;padding:1px 6px;border-radius:999px;background:var(--warn);color:#111;font-size:11px;font-weight:700;text-align:center}
.sb-badge.critico{background:var(--bad);color:#fff}
.sb-badge.nuovi{background:var(--accent-fill);color:var(--on-accent)}     /* novità da vedere (area clienti), non problemi */
.sb-nav a.al-presenti .sb-ico{color:var(--warn)}
.sb-nav a.al-critico .sb-ico{color:var(--bad)}
.sb-nav a.al-nuovi .sb-ico{animation:al-squilla 2.4s ease-in-out infinite;transform-origin:50% 15%}
@keyframes al-squilla{0%,80%,100%{transform:none}84%{transform:rotate(14deg)}88%{transform:rotate(-12deg)}92%{transform:rotate(8deg)}96%{transform:rotate(-4deg)}}
@media (prefers-reduced-motion:reduce){.sb-nav a.al-nuovi .sb-ico{animation:none}}
.sb-nav a{display:block;margin:1px 10px;padding:7px 12px 7px 16px;border-radius:6px;color:var(--sb-text);text-decoration:none;
  font-weight:600;border-left:3px solid transparent}
.sb-nav a:hover{background:var(--sb-bg-2);color:var(--sb-on)}
.sb-nav a.on,.sb-nav a.active{background:var(--sb-on-bg);color:var(--sb-on);border-left-color:var(--sb-accent)}
.sb-nav a:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
/* pulsante "Riduci menu" / "Espandi menu" (shell.js, costruisci): in alto a destra accanto al logo, solo icona */
.sb-riduci{position:absolute;top:22px;right:10px;display:flex;align-items:center;justify-content:center;width:32px;height:32px;
  padding:0;border:1px solid var(--sb-line);border-radius:6px;background:var(--sb-bg);color:var(--sb-muted);cursor:pointer}
.sb-riduci .sb-testo{display:none}
.sb-riduci:hover{background:var(--sb-bg-2);color:var(--sb-on)}
.sb-riduci:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.sb-utente{padding:12px 18px 16px;border-top:1px solid var(--sb-line);font-size:13px;color:var(--sb-text)}
.sb-utente .u-esci{display:inline-flex;align-items:center;gap:6px}
.sb-utente .u-esci .sb-ico{width:16px;height:16px;color:inherit}
.sb-utente .u-nome{display:block;color:var(--sb-on);font-weight:600;overflow-wrap:anywhere}
a.u-nome{text-decoration:none} a.u-nome:hover{text-decoration:underline}       /* porta alla pagina Profilo */
.sb-utente .u-sigla{color:var(--sb-muted);font-weight:400}
.sb-utente a{color:var(--accent);text-decoration:none} .sb-utente a:hover{text-decoration:underline}
.sb-utente .muted{color:var(--sb-muted)}
.sb-utente .u-ruoli{display:block;color:var(--sb-muted);font-size:11px;margin:2px 0 4px}
/* scelta del tema (shell.js, sceltaTema): stessa .seg del portale, con i colori della barra */
.seg.sb-tema{display:flex;margin-top:12px;border-color:var(--sb-line)}
.seg.sb-tema button{flex:1;padding:4px 6px;font-size:12px;color:var(--sb-muted)}
.seg.sb-tema button:hover{color:var(--sb-on)}
.seg.sb-tema button.on{background:var(--sb-on-bg);color:var(--sb-on);font-weight:600}

/* loader unico del portale (app/static/shell.js): stesso aspetto su pagine SPOC e FMS */
.loader-barra[hidden],.loader-box[hidden]{display:none!important}
.loader-barra{position:fixed;top:0;left:0;right:0;height:3px;z-index:1000;overflow:hidden;background:var(--accent-soft)}
.loader-barra::before{content:"";position:absolute;top:0;bottom:0;width:35%;background:var(--accent);animation:loader-scorri 1.1s ease-in-out infinite}
@keyframes loader-scorri{0%{left:-35%}100%{left:100%}}
.loader-box{position:fixed;top:72px;left:50%;transform:translateX(-50%);z-index:1000;display:flex;align-items:center;gap:10px;
  padding:10px 18px;border-radius:999px;background:var(--surface);color:var(--text);border:1px solid var(--border);
  box-shadow:var(--shadow-pop);font-weight:600}
.loader-giro{width:18px;height:18px;border-radius:50%;border:3px solid var(--accent-soft);border-top-color:var(--accent);animation:loader-gira .8s linear infinite}
@keyframes loader-gira{to{transform:rotate(360deg)}}
body.in-attesa{cursor:progress}
@media (prefers-reduced-motion:reduce){.loader-barra::before{animation:none;left:0;width:100%;opacity:.6}.loader-giro{animation-duration:2s}}

/* guida contestuale unica (window.portaleAiuto, app/static/shell.js): pannello a destra */
.aiuto[hidden],.aiuto-fondo[hidden]{display:none!important}
.aiuto-fondo{position:fixed;inset:0;z-index:900;background:var(--velo)}
.aiuto{position:fixed;top:0;right:0;bottom:0;z-index:901;width:min(680px,100vw);display:flex;flex-direction:column;
  background:var(--surface);color:var(--text);border-left:1px solid var(--border);
  box-shadow:var(--shadow-pop);font:14px/1.55 "Segoe UI",system-ui,-apple-system,sans-serif}
.aiuto-testa{display:flex;align-items:center;gap:10px;padding:14px 18px;border-bottom:1px solid var(--border)}
.aiuto-testa h2{flex:1;margin:0;font-size:17px}
.aiuto-chiudi{border:0;background:transparent;color:var(--muted);font-size:26px;line-height:1;cursor:pointer;padding:0 6px;border-radius:6px}
.aiuto-chiudi:hover,.aiuto-chiudi:focus-visible{color:var(--text);background:var(--surface-2)}
.aiuto-corpo{flex:1;overflow-y:auto;padding:14px 18px 32px}
.aiuto-corpo h3{margin:20px 0 6px;font-size:15px;color:var(--titolo)}
.aiuto-corpo h3:first-of-type{margin-top:12px}
.aiuto-corpo p{margin:6px 0}
.aiuto-corpo ol,.aiuto-corpo ul{margin:6px 0;padding-left:22px}
.aiuto-corpo li{margin:5px 0}
.aiuto-corpo code{font:12px/1.4 Consolas,"Cascadia Mono",monospace;background:var(--surface-2);padding:1px 5px;border-radius:4px;overflow-wrap:anywhere}
.aiuto-corpo table{width:100%;border-collapse:collapse;margin:8px 0;font-size:13px}
.aiuto-corpo th,.aiuto-corpo td{padding:6px 8px;border-bottom:1px solid var(--border);text-align:left;vertical-align:top}
.aiuto-corpo th{color:var(--muted);font-weight:600}
.aiuto-nota{margin:10px 0;padding:8px 12px;border-left:3px solid var(--warn);border-radius:4px;background:var(--warn-soft)}
.aiuto-nota.info{border-left-color:var(--accent);background:var(--accent-soft)}
.aiuto-copia{display:flex;gap:8px;align-items:flex-start;margin:6px 0}
.aiuto-copia pre{flex:1;min-width:0;margin:0;padding:8px 10px;border-radius:6px;background:var(--surface-2);
  font:12px/1.45 Consolas,"Cascadia Mono",monospace;white-space:pre-wrap;overflow-wrap:anywhere}
.aiuto-schede{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:6px}
.aiuto-schede button{border:1px solid var(--border);background:transparent;color:var(--muted);
  padding:5px 12px;border-radius:999px;font:inherit;font-size:13px;cursor:pointer}
.aiuto-schede button.on{background:var(--sel-fill);border-color:var(--sel-fill);color:var(--on-sel)}
.btn-guida{float:right;margin-left:8px}

/* barra ridotta alle sole icone (classe sb-ridotta su <html>, shell.js): i gruppi si aprono in un pannello accanto
   all'icona (posizione verticale calcolata da shell.js). Solo su schermi larghi: sotto i 900px vale la fascia in alto. */
@media (min-width:901px){
  .sb-ridotta .sidebar{width:var(--sb-w-ridotta);overflow-x:hidden}
  .sb-ridotta .sb-brand{display:flex;justify-content:center;padding:18px 0 14px}
  .sb-ridotta .sb-logo{width:48px}
  .sb-ridotta .sb-home .sb-testo,.sb-ridotta .sb-voce .sb-testo,.sb-ridotta .u-esci .sb-testo,.sb-ridotta .sb-titolo-t,.sb-ridotta .sb-freccia,.sb-ridotta .sb-utente .u-nome,
  .sb-ridotta .sb-utente .u-ruoli,.sb-ridotta .sb-utente .muted,.sb-ridotta .sb-tema{display:none}
  .sb-ridotta .sb-titolo{justify-content:center;margin:2px 10px;padding:9px 0}
  .sb-ridotta .sb-riduci{position:static;margin:10px auto 2px}
  .sb-ridotta .sb-home,.sb-ridotta .sb-nav a.sb-voce{justify-content:center;padding:9px 0!important;margin:2px 10px!important;border-bottom:0}
  .sb-ridotta .sb-nav a{position:relative}
  .sb-ridotta .sb-riduci .sb-ico{transform:rotate(180deg)}
  .sb-ridotta .sb-gruppo[open]>.sb-titolo{background:var(--sb-on-bg);color:var(--sb-on)}
  .sb-ridotta .sb-voci{position:fixed;left:calc(var(--sb-w-ridotta) + 6px);min-width:230px;padding:6px 0;background:var(--sb-bg);
    border:1px solid var(--sb-line);border-radius:var(--radius);box-shadow:var(--shadow-pop);z-index:40}
  .sb-ridotta .sb-voci-t{display:block;padding:6px 16px 8px;margin-bottom:4px;border-bottom:1px solid var(--sb-line);color:var(--sb-muted);
    font-size:11.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase}
  .sb-ridotta .sb-voci>a{margin:1px 6px;padding-left:13px}
  .sb-ridotta .sb-badge{position:absolute;top:2px;right:4px;min-width:16px;padding:0 4px;font-size:10px}
  .sb-ridotta .sb-utente{display:flex;justify-content:center;padding:12px 0}
}

/* schermi stretti: la barra diventa una fascia in alto, voci su righe orizzontali */
@media (max-width:900px){
  body.shell{flex-direction:column}
  .sidebar{width:auto;height:auto;position:static;flex-direction:row;flex-wrap:wrap;align-items:center}
  .sb-brand{border:0;padding:10px 14px}
  .sb-nav{display:flex;flex-wrap:wrap;gap:4px 12px;padding:6px 10px;flex-basis:100%;order:3}
  .sb-gruppo{display:flex;flex-wrap:wrap;align-items:center;margin:0}
  .sb-titolo{padding:4px 8px;margin:0}
  .sb-voci{display:flex;flex-wrap:wrap}
  .sb-voci>a{margin:0;padding:5px 9px}
  .sb-voci-t,.sb-riduci{display:none}
  .sb-nav a{margin:0;padding:5px 9px;border-left:0}
  .sb-utente{border:0;padding:8px 14px;margin-left:auto}
}

/* tabelle: ricerca, ordinamento, paginazione (app/static/tabelle.js, per tutte le tabelle di portale e FMS) */
.tb-fuori{display:none!important}
.tb-barra{display:flex;align-items:center;gap:10px;margin:8px 0}
.tb-cerca{flex:1;max-width:340px;padding:6px 10px;border:1px solid var(--border);border-radius:6px;background:var(--surface-2);color:var(--text);font:inherit}
.tb-cerca:focus{outline:2px solid var(--accent);outline-offset:-1px}
.tb-conta{color:var(--muted);font-size:12px;white-space:nowrap}
.tb-nessuno{color:var(--muted);font-size:13px;padding:10px 2px}
.tb-piede{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px;margin:8px 0 2px;font-size:12px}
.tb-nav{display:flex;align-items:center;gap:4px}
.tb-btn{padding:3px 9px!important;font-size:13px!important;min-width:30px}
.tb-btn:disabled{opacity:.4;cursor:default}
.tb-piede select{padding:3px 6px;border:1px solid var(--border);border-radius:6px;background:var(--surface-2);color:var(--text);font:inherit;font-size:12px}
th.tb-ord{cursor:pointer;user-select:none;white-space:nowrap}
th.tb-ord:hover{color:var(--text)}
th.tb-ord:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.tb-freccia{margin-left:4px;font-size:10px;opacity:.45}
th[aria-sort="ascending"] .tb-freccia,th[aria-sort="descending"] .tb-freccia{opacity:1;color:var(--accent)}

/* ----------------------------------------------------------------- 3. portale: componenti e sezioni della SPA */
header{position:sticky;top:0;z-index:10;background:var(--surface);border-bottom:1px solid var(--border)}
.bar{max-width:1280px;margin:0 auto;padding:12px 16px;display:flex;gap:16px;align-items:center}
.search{position:relative;flex:1;max-width:680px}
.search input{width:100%;padding:9px 12px;border:1px solid var(--border);border-radius:8px;background:var(--surface-2);color:var(--text);font:inherit}
.search input:focus{outline:2px solid var(--accent);outline-offset:-1px;background:var(--surface)}
.dropdown{position:absolute;top:calc(100% + 4px);left:0;right:0;background:var(--surface);border:1px solid var(--border);border-radius:8px;box-shadow:var(--shadow-pop);max-height:420px;overflow:auto;display:none}
.dropdown.open{display:block}
.opt{padding:8px 12px;cursor:pointer;display:flex;justify-content:space-between;gap:12px}
.opt:hover,.opt.active{background:var(--accent-soft)}
.opt .sub{color:var(--muted);font-size:12px;white-space:nowrap}
/* risultati ricerca cliente: nome sopra, località e codice sotto; mai scroll orizzontale */
#dd{overflow-x:hidden}
.search{min-width:220px}
.opt-cliente{flex-direction:column;gap:1px}
.opt-cliente .opt-nome{font-weight:600;overflow-wrap:anywhere}
.opt-cliente .sub{white-space:normal}
main{max-width:1280px;margin:0 auto;padding:16px}
.empty{color:var(--muted);text-align:center;padding:64px 16px}
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow)}
.cliente{padding:16px;display:flex;flex-wrap:wrap;gap:8px 32px;align-items:baseline}
.cliente h1{margin:0;font-size:20px;flex-basis:100%}
.cliente .kv{color:var(--muted)} .cliente .kv b{color:var(--text);font-weight:500}
.kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:12px 0}
.kpi{padding:12px 16px;cursor:pointer;text-align:left;font:inherit;color:inherit}
.kpi.sel{outline:2px solid var(--accent)}
.kpi .lbl{color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.04em}
.kpi .val{font-size:26px;font-weight:600}
.kpi .val small{font-size:14px;color:var(--muted);font-weight:400}
.tools{display:flex;gap:12px;align-items:center;flex-wrap:wrap;padding:12px 16px;border-bottom:1px solid var(--border)}
.tools h2{margin:0;font-size:16px;flex:1}
.tools input[type=search]{padding:7px 10px;border:1px solid var(--border);border-radius:6px;background:var(--surface-2);color:var(--text);font:inherit;min-width:220px}
.seg{display:inline-flex;border:1px solid var(--border);border-radius:6px;overflow:hidden}
.seg button{border:0;background:transparent;color:var(--muted);padding:6px 12px;font:inherit;cursor:pointer}
.seg button.on{background:var(--sel-fill);color:var(--on-sel)}
.tablewrap{overflow-x:auto}
table{width:100%;border-collapse:collapse}
th,td{padding:8px 12px;text-align:left;border-bottom:1px solid var(--border);vertical-align:top}
th{font-size:12px;color:var(--muted);font-weight:600;background:var(--surface-2);position:sticky;top:0}
tbody tr.row{cursor:pointer} tbody tr.row:hover{background:var(--surface-2)}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}
td.nowrap{white-space:nowrap}
.mono{font-family:Consolas,ui-monospace,monospace;font-size:12.5px}
.badge{display:inline-block;padding:1px 8px;border-radius:999px;font-size:12px;font-weight:500;white-space:nowrap;background:var(--neutral-soft);color:var(--muted)}
a.badge{text-decoration:none} a.badge:hover{text-decoration:underline}
.b-ok{background:var(--ok-soft);color:var(--ok)} .b-warn{background:var(--warn-soft);color:var(--warn)}
.b-bad{background:var(--bad-soft);color:var(--bad)} .b-info{background:var(--accent-soft);color:var(--accent)}
tr.detail td{background:var(--surface-2);white-space:pre-wrap;color:var(--text)}
tr.detail .meta{color:var(--muted);margin-bottom:6px;white-space:normal}
.foot{padding:10px 16px;color:var(--muted);font-size:12px}
.err{background:var(--bad-soft);color:var(--bad);padding:12px 16px;border-radius:8px;margin-bottom:12px}
.loading{opacity:.5;pointer-events:none}
/* presa chiamata */
:root{--e-red:#c62828;--e-orange:#e65100;--e-yellow:#a98600;--e-green:#2e7d32;--e-purple:#6a1b9a;--e-teal:#00695c;
  --e-gray:#5f6368;--e-blue:#0b5394;--e-amber:#946200;--e-darkred:#b71c1c;--e-indigo:#283593}
.kpis{grid-template-columns:repeat(4,1fr)}
.kpi.call{background:var(--accent-fill);border-color:var(--accent-fill);color:var(--on-accent)}
.kpi.call .lbl{color:var(--on-accent);opacity:.85} .kpi.call .val{font-size:20px;padding-top:4px}
.kpi.call.sel{outline-color:var(--text);outline-offset:2px}
.ch{padding:16px;display:grid;gap:24px}
.blocco h3{margin:0 0 12px;font-size:15px;color:var(--titolo);border-bottom:2px solid var(--accent-soft);padding-bottom:6px}
.sub-h{font-size:12px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;margin:12px 0 6px}
.muted{color:var(--muted);text-transform:none;letter-spacing:0;font-weight:400}
.sit{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.lista{margin:0;padding-left:18px} .lista li{margin:3px 0}
.scroll{max-height:320px;overflow:auto;border:1px solid var(--border);border-radius:8px}
tbody tr.sel{background:var(--accent-soft)}
.domanda{border:1px solid var(--border);border-radius:8px;padding:10px 12px;margin-bottom:8px;display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.domanda .txt{flex:1;min-width:240px}
.hint{display:block;font-size:12px;color:var(--muted);margin-top:3px}
.miss{border-color:var(--bad)!important;color:var(--bad)}
.opts{display:flex;gap:6px;flex-shrink:0}
.opts button{padding:6px 14px;border:1px solid var(--border);border-radius:6px;background:var(--surface-2);color:var(--muted);font:inherit;font-weight:600;cursor:pointer}
.opts button.on{background:var(--sel-fill);border-color:var(--sel-fill);color:var(--on-sel)}
.note{border-radius:8px;padding:10px 14px;font-size:13px;margin-top:8px}
.note.warn{background:var(--warn-soft);color:var(--warn)} .note.bad{background:var(--bad-soft);color:var(--bad)}
.form{display:grid;grid-template-columns:1fr 1fr;gap:10px 16px}
.form label{display:grid;gap:4px;font-size:12px;color:var(--muted)}
.form .full{grid-column:1/-1}
.form input:not([type=checkbox]):not([type=radio]),.form select,.form textarea{padding:7px 10px;border:1px solid var(--border);border-radius:6px;background:var(--surface-2);color:var(--text);font:inherit;width:100%}
.form label.miss input{border-color:var(--bad)}
/* pannello filtri attività aperte */
.pannello-filtri{margin:12px 0;border-top:3px solid var(--accent)}
.filtri-testa{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:center;padding:12px 16px;border-bottom:1px solid var(--border);background:var(--surface-2);border-radius:8px 8px 0 0}
.filtri-testa h2{margin:0;font-size:16px}
.filtri-testa .attivi{flex:1;display:flex;flex-wrap:wrap;gap:6px;align-items:center;min-width:200px}
.filtri-griglia{display:grid;grid-template-columns:minmax(260px,auto) 1fr 1fr minmax(200px,auto);gap:12px;padding:14px 16px}
.fbox{border:1px solid var(--border);border-radius:8px;background:var(--surface);overflow:hidden}
.fbox-t{font-size:12px;font-weight:700;color:var(--titolo);text-transform:uppercase;letter-spacing:.05em;padding:7px 12px;background:var(--accent-soft);border-bottom:1px solid var(--border)}
.fbox-c{padding:10px 12px}
.btn.reset{border:2px solid var(--border);background:var(--surface);white-space:nowrap}
.btn.reset.attivo{border-color:var(--e-red);background:var(--e-red);color:#fff}
.btn.reset:disabled{opacity:.5;cursor:default}
@media (max-width:1100px){.filtri-griglia{grid-template-columns:1fr 1fr}}
@media (max-width:720px){.filtri-griglia{grid-template-columns:1fr}}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-right:12px}
.chip{border:1px solid var(--border);background:var(--surface-2);color:var(--text);border-radius:999px;padding:4px 12px;font:inherit;font-size:13px;cursor:pointer}
.chip b{color:var(--muted);font-weight:600} .chip.on{background:var(--sel-fill);border-color:var(--sel-fill);color:var(--on-sel)} .chip.on b{color:var(--on-sel)}
/* attività aperte: tabella compatta, segnali a icone, intestazioni ordinabili */
table.aperte{font-size:13px}
table.aperte th,table.aperte td{padding:6px 8px}
table.aperte tr.r-scaduta{border-left:4px solid var(--bad)}
table.aperte tr.r-ferma:not(.r-scaduta){border-left:4px solid var(--warn)}
table.aperte tr.row:hover td{background:var(--surface-2)}
table.aperte .c-segnali{width:1%;white-space:nowrap;text-align:center}
table.aperte .c-oggetto{min-width:180px;max-width:320px}
table.aperte .c-cliente{max-width:170px}
table.aperte .c-persona{max-width:150px}
table.aperte .t-scaduta{color:var(--bad);font-weight:700} table.aperte .t-oggi{color:var(--warn);font-weight:700}
table.aperte .t-ferma{color:var(--warn);font-weight:600}
.ico{display:inline-block;font-size:16px;line-height:1;cursor:help;margin:0 1px;font-family:"Segoe UI Emoji","Apple Color Emoji",sans-serif}
.legenda .ico{cursor:default}
.th-ord{border:0;background:none;padding:0;font:inherit;font-weight:600;color:inherit;cursor:pointer;display:inline-flex;align-items:center;gap:4px;white-space:nowrap}
.th-ord .freccia{font-size:10px;opacity:.45} th[aria-sort="ascending"] .freccia,th[aria-sort="descending"] .freccia{opacity:1;color:var(--accent)}
.th-ord:hover{color:var(--accent)} .th-ord:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.chip.chip-ferma{border-color:var(--warn)} .chip.chip-ferma.on{background:var(--e-orange);border-color:var(--e-orange)}
.legenda{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;padding:8px 16px;font-size:12px;color:var(--muted);border-bottom:1px solid var(--border)}
/* presa chiamata: sezione 2 in evidenza */
#blocco-aperti{border:2px solid var(--accent);border-radius:10px;padding:14px 16px;background:var(--accent-soft)}
#blocco-aperti h3{font-size:17px;border-bottom-color:var(--accent)}
#blocco-aperti .scroll{background:var(--surface)} #blocco-aperti th{background:var(--surface-2)}
#blocco-aperti .sit-blocco{background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:4px 14px 12px;margin-top:12px}
.riga-titolo{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.seg-piccolo button{padding:4px 10px;font-size:12px;text-transform:none;letter-spacing:0}
#blocco-aperti tr.r-chiuso td{color:var(--muted);background:var(--surface-2)}
.commesse{display:grid;gap:8px}
.commessa{border:1px solid var(--border);border-left:4px solid var(--accent);border-radius:6px;padding:8px 12px}
.commessa-testa{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.commessa-desc{color:var(--muted);font-size:13px;margin:4px 0;white-space:pre-wrap;max-height:4.5em;overflow:auto}
.commessa-meta{display:flex;gap:6px 18px;flex-wrap:wrap;font-size:13px;color:var(--muted)} .commessa-meta b{color:var(--text)}
/* commesse e contratti selezionabili come riferimento della chiamata */
.contratti{display:grid;gap:4px;max-height:320px;overflow:auto;padding-right:4px}
.contratto{display:flex;align-items:center;gap:8px;border:1px solid var(--border);border-radius:6px;padding:6px 10px}
.scegli{cursor:pointer} .scegli:hover{background:var(--surface-2)}
.scegli:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.scegli.sel{border-color:var(--accent);background:var(--accent-soft);box-shadow:inset 4px 0 0 var(--accent)}
.spunta{flex:0 0 auto;display:inline-grid;place-items:center;width:18px;height:18px;border:1.5px solid var(--border);border-radius:4px;font-size:12px;font-weight:800;color:var(--on-accent)}
.scegli.sel .spunta{background:var(--sel-fill);border-color:var(--sel-fill);color:var(--on-sel)}
.allerta{display:flex;gap:10px;align-items:center;background:var(--e-red);color:#fff;border-radius:8px;padding:10px 14px;margin:8px 0;font-weight:600}
.conteggio{display:inline-block;min-width:26px;text-align:center;padding:1px 9px;border-radius:999px;background:var(--sel-fill);color:var(--on-sel);font-size:13px;margin-left:8px;vertical-align:middle}
/* tier cliente e tipologia richiesta */
.tier{display:inline-block;vertical-align:middle;margin-left:12px;border-radius:8px;white-space:nowrap}
/* Tier 1: molto evidente (pieno, grande, alone) + fascia viola sulla scheda cliente */
.tier-1{padding:5px 16px;font-size:18px;font-weight:800;letter-spacing:.08em;color:#fff;background:var(--e-purple);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--e-purple) 35%,transparent),0 4px 14px color-mix(in srgb,var(--e-purple) 45%,transparent)}
.card.cliente-t1{border-left:8px solid var(--e-purple);background:linear-gradient(90deg,color-mix(in srgb,var(--e-purple) 12%,var(--surface)),var(--surface) 45%)}
/* Tier 2: discreto (solo contorno, testo attenuato) */
.tier-2{padding:2px 10px;font-size:12px;font-weight:600;color:var(--muted);border:1px solid var(--border);background:transparent}
.tipo{display:inline-block;padding:1px 8px;border-radius:4px;font-size:12px;font-weight:700;color:#fff;white-space:nowrap}
.tipo-change{background:var(--e-amber)} .tipo-incident{background:var(--e-blue)}
.tipo-delivery{background:var(--e-teal)} .tipo-operation{background:var(--e-purple)}
.combo{position:relative} .combo .dropdown{z-index:20;color:var(--text)}
/* nome del chiamante scritto a mano (comboChiamante in chiamata.js): ultima voce, staccata dai referenti */
.opt.opt-libero{border-top:1px solid var(--border);color:var(--accent)}
.link{border:0;background:none;color:var(--accent);font:inherit;cursor:pointer;padding:0;text-decoration:underline}
.esiti{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:12px}
.esito{border-radius:8px;padding:12px 14px;color:#fff}
.esito .lbl{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.04em;opacity:.85}
.esito .val{font-size:17px;font-weight:700}
.btns{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.btn{padding:7px 15px;border:1px solid var(--border);border-radius:var(--radius-s);font:inherit;font-weight:600;cursor:pointer;
  background:var(--surface);color:var(--text);transition:background .12s,border-color .12s}
.btn:hover:not(:disabled){background:var(--neutral-soft)}
.btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.btn.primary{background:var(--accent-fill);border-color:var(--accent-fill);color:var(--on-accent)}
.btn.primary:hover:not(:disabled){background:color-mix(in srgb,var(--accent-fill) 88%,#000);border-color:transparent}
.ticket{white-space:pre-wrap;background:var(--surface-2);border:1px solid var(--border);border-radius:8px;padding:14px;font:13px/1.6 Consolas,ui-monospace,monospace;overflow-x:auto}
textarea.ticket{display:block;width:100%;margin-top:8px;resize:vertical;color:var(--text)}  /* email di aggiornamento correggibile */
/* attività aperte (il menu è nella barra laterale) */
.kpis-6{grid-template-columns:repeat(6,1fr)}
.k-bad .val{color:var(--bad)} .k-warn .val{color:var(--warn)} .k-info .val{color:var(--accent)} .k-ok .val{color:var(--ok)}
.tools select{padding:7px 10px;border:1px solid var(--border);border-radius:6px;background:var(--surface-2);color:var(--text);font:inherit;max-width:220px}
td a{color:var(--accent);text-decoration:none} td a:hover{text-decoration:underline}
@media (max-width:1000px){.kpis-6{grid-template-columns:repeat(3,1fr)}}
[hidden]{display:none!important}
/* utente del login (in fondo alla barra laterale) */
.u-sigla{font:600 11px Consolas,ui-monospace,monospace;padding:1px 6px;border-radius:4px;background:var(--accent-soft);color:var(--accent);margin-left:4px}
.u-sigla.u-no{background:var(--warn-soft);color:var(--warn)}
.op-login{display:flex;align-items:center;gap:8px;padding:7px 10px;border:1px solid var(--border);border-radius:6px;background:var(--surface-2);color:var(--text)}
/* interruttore "Usa la checklist" */
.switch{display:flex;align-items:center;gap:10px;cursor:pointer;margin-bottom:12px;padding:10px 12px;border:1px solid var(--border);border-radius:8px;background:var(--surface-2)}
.switch input{position:absolute;opacity:0;width:0;height:0}
.switch-slider{position:relative;flex:0 0 auto;width:40px;height:22px;border-radius:999px;background:var(--border);transition:background .15s}
.switch-slider::after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#fff;transition:transform .15s}
.switch input:checked + .switch-slider{background:var(--accent-fill)}
.switch input:checked + .switch-slider::after{transform:translateX(18px)}
.switch input:focus-visible + .switch-slider{outline:2px solid var(--accent);outline-offset:2px}
/* pagina KPI */
.kpi-filtri{grid-template-columns:2fr 1fr}
.kpi-griglia{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:12px 0}
.kpi-tag{display:inline-block;margin-left:8px;padding:1px 7px;border-radius:999px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;background:var(--warn-soft);color:var(--warn);vertical-align:middle}
.kpi-card{text-align:left;font:inherit;color:inherit;cursor:pointer;padding:14px 16px;border-top:5px solid var(--border);display:flex;flex-direction:column;gap:6px}
.kpi-card.sel{outline:2px solid var(--accent);outline-offset:2px}
.kpi-card.e-ok{border-top-color:var(--e-green)} .kpi-card.e-warn{border-top-color:var(--e-orange)} .kpi-card.e-bad{border-top-color:var(--e-red)}
.kpi-nome{font-weight:600;min-height:2.6em}
.kpi-val{font-size:30px;font-weight:700;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.kpi-sub{color:var(--muted);font-size:13px} .kpi-soglie{color:var(--muted);font-size:11px;border-top:1px solid var(--border);padding-top:6px}
.esito{display:inline-block;padding:2px 10px;border-radius:999px;font-size:12px;font-weight:700;color:#fff;background:var(--e-gray)}
.esito.e-ok{background:var(--e-green)} .esito.e-warn{background:var(--e-orange)} .esito.e-bad{background:var(--e-red)}
.piccolo{font-size:11px}
/* grafici andamento KPI */
.grafici-kpi{display:grid;grid-template-columns:repeat(3,1fr);gap:18px 24px;padding:14px 16px;border-bottom:1px solid var(--border)}
.g-pannello{min-width:0}
.g-titolo{font-weight:600;font-size:14px}
.g-sotto{font-size:12px;color:var(--muted);margin:2px 0 6px;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.g-chiave{display:inline-block;width:16px;height:0;border-top:2px solid;margin-left:4px}
.g-chiave.s-buono{border-color:var(--e-green)} .g-chiave.s-limite{border-color:var(--e-red)}
.g-box{position:relative}
.g-svg{width:100%;height:auto;display:block;overflow:visible}
.g-griglia{stroke:var(--border);stroke-width:1}
.g-asse{fill:var(--muted);font-size:11px;font-variant-numeric:tabular-nums}
.g-soglia{stroke-width:1.5;opacity:.7} .g-soglia.s-buono{stroke:var(--e-green)} .g-soglia.s-limite{stroke:var(--e-red)}
.g-linea{fill:none;stroke:var(--accent);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.g-hit{fill:transparent;cursor:pointer}
.g-dot{stroke:var(--surface);stroke-width:2;fill:var(--e-gray)}
.g-dot.e-ok{fill:var(--e-green)} .g-dot.e-warn{fill:var(--e-orange)} .g-dot.e-bad{fill:var(--e-red)}
.g-punto:focus{outline:none} .g-punto:focus .g-dot,.g-punto.sel .g-dot{stroke:var(--accent)}
.g-val{fill:var(--text);font-size:12px;font-weight:600;paint-order:stroke;stroke:var(--surface);stroke-width:3px}
.g-tip{position:absolute;transform:translate(-50%,calc(-100% - 12px));background:var(--surface);color:var(--text);border:1px solid var(--border);
  border-radius:6px;padding:6px 10px;font-size:12px;white-space:nowrap;box-shadow:var(--shadow-pop);pointer-events:none;z-index:5}
@media (max-width:1100px){.grafici-kpi{grid-template-columns:repeat(2,1fr)}}
@media (max-width:720px){.grafici-kpi{grid-template-columns:1fr}}
@media (max-width:1100px){.kpi-griglia{grid-template-columns:repeat(2,1fr)}}
@media (max-width:720px){.kpi-griglia,.kpi-filtri{grid-template-columns:1fr}}
@media (max-width:720px){
  .bar{flex-wrap:wrap}.search{max-width:none;flex-basis:100%}
  .kpis,.sit,.form,.esiti{grid-template-columns:1fr}
  .hide-sm{display:none}
}
.id-crm{font-size:11px}
/* numero attività con link al CRM (numeroAttivita in app.js) */
.link-crm{color:var(--accent);text-decoration:none;white-space:nowrap}
.link-crm:hover{text-decoration:underline} .link-crm:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:2px}
.link-crm .id-crm{opacity:.75} .link-crm .ext{font-size:10px;opacity:.6}
/* servizi Full Managed Services dei contratti (griglie "MS - …") */
.contratti{max-height:560px}
.contratto{align-items:flex-start}
.contratto-corpo{flex:1;min-width:0}
.servizi-ms{display:grid;gap:8px;margin-top:8px;white-space:normal}
.servizi-tit{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--titolo);margin-bottom:3px}
table.servizi{font-size:12px;border:1px solid var(--border);border-radius:6px}
table.servizi th{background:var(--surface-2);font-size:11px;padding:4px 8px;white-space:normal;vertical-align:bottom}
table.servizi td{padding:4px 8px}
table.servizi .c-check{text-align:center;width:1%}
table.servizi .si{color:var(--ok);font-weight:700} table.servizi .no{color:var(--muted)}
/* pagina Knowledge base (kb.js) */
.kb-prog{display:inline-flex;align-items:center;gap:10px;font-weight:600;color:var(--accent)}
.kb-prog-barra{display:inline-block;width:180px;height:6px;border-radius:3px;background:var(--surface-2);overflow:hidden}
.kb-prog-barra span{display:block;height:100%;background:var(--accent)}
.kb-cerca{padding:14px 16px;margin-top:12px}
.kb-riga{display:flex;gap:10px;align-items:stretch}
.kb-riga textarea{flex:1;resize:vertical;min-height:52px;padding:10px 12px;border:1px solid var(--border);border-radius:8px;background:var(--surface-2);color:var(--text);font:15px/1.4 inherit;font-family:inherit}
.kb-riga textarea:focus{outline:2px solid var(--accent);outline-offset:-1px}
.kb-riga .btn{padding:0 26px;font-size:15px}
.kb-filtri{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;margin-top:10px}
.kb-filtri select{padding:6px 10px;border:1px solid var(--border);border-radius:6px;background:var(--surface-2);color:var(--text);font:inherit;max-width:280px}
.kb-sintesi{margin-top:12px;padding:14px 18px;border-left:4px solid var(--accent)}
.kb-sintesi-t{font-weight:700;color:var(--titolo);margin-bottom:6px}
.kb-sintesi-testo p{margin:8px 0 4px} .kb-sintesi-testo ul{margin:2px 0 6px;padding-left:20px} .kb-sintesi-testo li{margin:3px 0}
.kb-attesa{display:flex;align-items:center;gap:10px;color:var(--muted);padding:6px 0}
.kb-sintesi-invito{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.kb-rifs{display:inline-flex;gap:3px;margin:0 2px}
.kb-rif{border:1px solid var(--accent);background:var(--accent-soft);color:var(--accent);border-radius:4px;font:600 11px/1 inherit;padding:2px 5px;cursor:pointer}
.kb-rif:hover{background:var(--accent-fill);color:var(--on-accent)}
.kb-titolo-lista{margin:16px 2px 8px;font-weight:700}
.kb-caso{padding:12px 16px;margin-bottom:10px}
.kb-caso.kb-lampeggia{animation:kb-lampo 1.6s ease-out}
@keyframes kb-lampo{0%{outline:2px solid var(--accent);outline-offset:2px}100%{outline:2px solid transparent;outline-offset:2px}}
.kb-caso-t{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;font-size:13px}
.kb-cliente{font-weight:600}
.kb-pert{margin-left:auto;display:inline-flex;align-items:center;gap:6px}
.kb-pert-barra{display:inline-block;width:70px;height:6px;border-radius:3px;background:var(--surface-2);overflow:hidden}
.kb-pert-barra span{display:block;height:100%;background:var(--ok)}
.kb-parole{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);border:1px solid var(--border);border-radius:4px;padding:1px 5px}
.kb-ogg{font-weight:700;margin:8px 0 4px}
.kb-blocco{margin-top:8px}
.kb-etichetta{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin-bottom:2px}
.kb-sol .kb-etichetta{color:var(--ok)}
.kb-testo{white-space:pre-wrap;overflow-wrap:anywhere}
.kb-testo.chiuso{max-height:6.2em;overflow:hidden;-webkit-mask-image:linear-gradient(#000 60%,transparent)}
.kb-altro{border:0;background:none;color:var(--accent);font:inherit;font-size:12px;padding:2px 0;cursor:pointer}
/* amministrazione: utenti e ruoli, impostazioni, modelli report (admin.js) — tre pagine separate nel menu */
/* impostazioni: menu verticale delle categorie a sinistra, la categoria scelta a destra (admin.js, renderImpostazioni) */
.adm-imp{display:grid;grid-template-columns:250px minmax(0,1fr);gap:var(--gap);align-items:start}
.adm-imp-menu{padding:8px;position:sticky;top:12px}
.adm-imp-gruppo + .adm-imp-gruppo{margin-top:10px;padding-top:10px;border-top:1px solid var(--border)}
.adm-imp-titolo{font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);padding:2px 8px 6px}
.adm-imp-voce{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;padding:7px 8px;border:0;
  border-radius:var(--radius-s);background:transparent;color:var(--text);font:inherit;text-align:left;cursor:pointer}
.adm-imp-voce:hover{background:var(--surface-2)}
.adm-imp-voce.on{background:var(--accent-soft);color:var(--accent);font-weight:600}
.adm-imp-corpo{padding:14px 16px}
.adm-imp-corpo .tools h2{margin:0}
.adm-imp-tendina{display:none}
/* tabella delle impostazioni: descrizione stretta, campo e Salva sulla stessa riga (vanno a capo solo se non c'è posto) */
.adm-imp-tabella td:first-child{width:28%;min-width:150px}
.adm-imp-tabella td:last-child{white-space:nowrap}
.adm-imp-valore{display:flex;align-items:flex-start;gap:8px;flex-wrap:wrap}
.adm-imp-valore > input,.adm-imp-valore > select{flex:1 1 100px;min-width:0}
.adm-imp-valore > .btn{flex:none;white-space:nowrap}
/* impostazione ON/OFF: il selettore da solo, senza il riquadro della .switch */
.switch.adm-imp-switch{display:inline-flex;margin:0;padding:0;border:0;background:transparent;font-weight:600}
.adm-chiave{margin-top:8px;font-size:13px}
.adm-verifica{display:grid;gap:6px;margin:0 0 12px}
.adm-scadenza{display:flex;align-items:center;gap:8px;margin-top:6px;font-size:12px;color:var(--muted)}
.adm-chiave-valore{user-select:all;overflow-wrap:anywhere;padding:4px 6px;border-radius:var(--radius-s);background:var(--surface-2);color:var(--text)}
@media (max-width:1100px){
  .adm-imp{grid-template-columns:minmax(0,1fr)}
  .adm-imp-menu{display:none}
  .adm-imp-tendina{display:block;width:100%}
}
table.adm input[type=text],table.adm input[type=password]{width:100%;min-width:220px;padding:7px 10px;border:1px solid var(--border);border-radius:6px;background:var(--surface-2);color:var(--text);font:inherit}
table.adm{font-size:13px}
table.adm td{vertical-align:top;padding-top:12px;padding-bottom:12px}
.adm-utente{min-width:250px;width:1%} .adm-email{font-weight:600;display:flex;gap:6px;align-items:center}
.adm-attivo{display:flex;align-items:center;gap:8px;margin-top:8px}
.adm-switch{display:inline-flex;margin:0;padding:0;border:0;background:none}
.adm-ruoli{display:flex;flex-wrap:wrap;gap:6px 14px}
.adm-area{display:flex;flex-wrap:wrap;align-items:center;gap:4px}
.adm-area-t{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin-right:2px}
.adm-ruolo{border:1px solid var(--border);background:var(--surface-2);color:var(--muted);border-radius:999px;padding:3px 10px;font:inherit;font-size:12px;cursor:pointer}
.adm-ruolo:hover{border-color:var(--accent);color:var(--text)}
.adm-ruolo.on{background:var(--accent-soft);border-color:var(--accent);color:var(--accent);font-weight:600}
.adm-ruolo.adm-su.on{background:var(--su-soft);border-color:var(--su-border);color:var(--su)}
.adm-effettivo{display:flex;flex-wrap:wrap;gap:4px;align-items:center;margin-top:8px;font-size:12px}
.adm-perm-chip{border-radius:4px;padding:1px 7px;font-size:11px;border:1px solid var(--border)}
.adm-perm-chip.lettura{color:var(--accent);border-color:color-mix(in srgb,var(--accent) 45%,transparent);background:var(--accent-soft)}
.adm-perm-chip.scrittura{color:var(--ok);border-color:color-mix(in srgb,var(--ok) 45%,transparent);background:var(--ok-soft);font-weight:600}
tr.adm-disattivo td{opacity:.5} tr.adm-disattivo td.adm-utente,tr.adm-disattivo td.adm-azioni{opacity:1}
tr.adm-modificato td{background:color-mix(in srgb,var(--warn) 10%,transparent)}
.adm-azioni{white-space:nowrap;text-align:right;width:1%} .adm-azioni .btn{padding:5px 10px;margin-left:4px}
.adm-elimina{color:var(--bad)}
.adm-avviso{margin:0;padding:4px 10px}
.adm-c{text-align:center}
table.adm-matrice{font-size:12px} table.adm-matrice th{white-space:normal;vertical-align:bottom;font-size:11px}
.adm-nuovo{display:grid;gap:8px;padding:12px 16px;margin-top:12px}
.adm-nuovo-riga{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.adm-nuovo input{padding:7px 10px;border:1px solid var(--border);border-radius:6px;background:var(--surface-2);color:var(--text);font:inherit}
.adm-nuovo input[type=email]{min-width:280px}
/* modelli report: logo, colori, header/footer (admin.js) */
.adm-nuovo select,.adm-nuovo textarea{padding:7px 10px;border:1px solid var(--border);border-radius:6px;background:var(--surface-2);color:var(--text);font:inherit}
.adm-piede{width:100%} .adm-piede textarea{width:100%;resize:vertical;font-family:ui-monospace,monospace;font-size:12px}
/* modelli email: segnaposto cliccabili e anteprima a tutta larghezza */
.em-segnaposto{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.em-segnaposto .btn{font-family:ui-monospace,monospace}
.em-anteprima > *{width:100%}
.adm-colore{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--muted)}
.adm-colore input[type=color]{width:32px;height:28px;padding:2px;border:1px solid var(--border);border-radius:6px;background:var(--surface-2);cursor:pointer}
.adm-predefinito{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--muted);margin-left:auto}
.adm-logo-anteprima{max-height:40px;max-width:160px;border-radius:4px;background:var(--surface-2);padding:4px}
.adm-logo-mini{max-height:24px;max-width:80px;border-radius:3px;display:block}
.adm-swatch{display:inline-block;width:16px;height:16px;border-radius:4px;border:1px solid var(--border);margin-right:3px;vertical-align:middle}
.adm-tenant{display:grid;gap:6px}
.adm-nuovo input.adm-tenant-q{flex:1;min-width:320px}
.adm-tenant-elenco{display:grid;gap:4px;max-height:320px;overflow:auto}
.adm-tenant-ris{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;text-align:left;border:1px solid var(--border);background:var(--surface-2);color:var(--text);border-radius:6px;padding:7px 10px;font:inherit;cursor:pointer}
.adm-tenant-ris:hover:not([disabled]){border-color:var(--accent)}
.adm-tenant-ris[disabled]{opacity:.55;cursor:default}
.adm-tenant-msg{margin:0;padding:6px 2px}
.adm-tenant-scelto{display:inline-flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;border:1px solid var(--accent);background:var(--accent-soft);border-radius:6px;padding:6px 10px}
.adm-nuovo input.adm-ruolo-descr{flex:1;min-width:320px}
table.adm-ruolo-permessi tr.adm-gruppo td{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);padding-top:12px}
/* VA: vulnerability assessment (va.js) */
/* VA: report automatici e su richiesta (va.js: comeFunziona, pannelloIstanze) */
.va-come{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.va-modo{padding:12px 16px}
.va-modo h3{margin:0 0 6px;font-size:15px}
.va-modo p{margin:4px 0}
.va-custom{display:grid;gap:12px;padding:6px 2px}
.va-passo{display:flex;gap:10px;align-items:flex-start}
.va-passo label{display:grid;gap:4px;font-size:12px;color:var(--muted)}
.va-passo select{padding:6px 8px;border:1px solid var(--border);border-radius:6px;background:var(--surface-2);color:var(--text);font:inherit;max-width:420px}
.va-n{flex:none;width:22px;height:22px;border-radius:50%;background:var(--accent-soft);color:var(--accent);display:grid;place-items:center;font-weight:700;font-size:12px}
.va-etichetta{font-size:12px;color:var(--muted);margin-bottom:6px}
.va-opzione{display:flex;gap:8px;align-items:flex-start;margin:4px 0;cursor:pointer}
.va-opzione input{margin-top:3px}
@media (max-width:900px){.va-come{grid-template-columns:1fr}}
.tab-va{width:100%;border-collapse:collapse;font-size:13px}
.tab-va th{text-align:left;font-weight:600;color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.03em;padding:6px 8px;border-bottom:1px solid var(--border)}
.tab-va td{padding:7px 8px;border-bottom:1px solid var(--border);vertical-align:top}
.tab-va .num{text-align:right}
.tab-va tr.row{cursor:pointer} .tab-va tr.row:hover td,.tab-va tr.sel td{background:var(--surface-2)}
.va-istanze{padding:6px 4px 10px}
.va-xml summary{cursor:pointer;color:var(--muted);font-size:13px}
.va-azioni{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0}
.va-peggio{color:var(--bad);font-weight:600} .va-meglio{color:var(--ok);font-weight:600}
@media print{
  .sidebar,.noprint,#barra-cliente,.loader-barra,.loader-box{display:none!important}
  .shell-main{margin:0!important}
  body{background:#fff!important;color:#000!important}
  .card{break-inside:avoid;border-color:#ccc!important;background:#fff!important}
}

/* commerciale: catalogo prodotti e contratti (commerciale.js) */
.cat-layout{display:grid;grid-template-columns:280px 1fr;gap:12px;margin-top:12px;align-items:start}
.cat-albero{padding:8px 0;position:sticky;top:12px;max-height:calc(100vh - 24px);overflow:auto}
.cat-titolo{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);padding:4px 12px 8px}
.cat-nodo{display:flex;align-items:center;gap:2px;padding-right:8px}
.cat-nodo.on{background:var(--accent-soft)} .cat-nodo.on .cat-nome{color:var(--accent);font-weight:600}
.cat-freccia{width:18px;flex:none;border:0;background:none;color:var(--muted);cursor:pointer;font:inherit;padding:0}
.cat-nome{flex:1;display:flex;justify-content:space-between;gap:8px;border:0;background:none;color:var(--text);font:inherit;font-size:13px;text-align:left;padding:5px 4px;cursor:pointer;border-radius:4px}
.cat-nome:hover{color:var(--accent)}
.cat-n{color:var(--muted);font-size:11px;font-variant-numeric:tabular-nums;white-space:nowrap}
.cat-lista{min-width:0}
.cat-lista .tools select{padding:7px 10px;border:1px solid var(--border);border-radius:6px;background:var(--surface-2);color:var(--text);font:inherit}
.cat-disp{display:inline-flex;align-items:center;gap:4px;font-size:13px;white-space:nowrap;cursor:pointer}
table.cat-tab td{vertical-align:middle} .cat-desc{font-weight:600}
.cat-thumb{width:52px;text-align:center;color:var(--muted)} .cat-thumb img{width:44px;height:44px;object-fit:contain;background:#fff;border-radius:4px}
tr.cat-esaurito td{opacity:.6}
.cat-badge{margin-left:6px;font-size:10px;vertical-align:middle}
.cat-web{margin-left:6px;font-size:11px;color:var(--ok);font-weight:600;white-space:nowrap}
.cat-costi { display:flex; flex-wrap:wrap; gap:6px 22px; padding:8px 12px; border:1px solid var(--border); border-radius:8px; }
.cat-titolo-web{color:var(--accent);font-weight:600;font-size:13px}
.cat-scheda{font-family:Consolas,ui-monospace,monospace;font-size:12px}
.cat-dett{display:flex;gap:16px;white-space:normal;flex-wrap:wrap}
.cat-imgs{display:flex;gap:8px} .cat-imgs img{max-width:220px;max-height:180px;background:#fff;border-radius:6px;object-fit:contain}
.cat-img-assente{padding:20px;border:1px dashed var(--border);border-radius:6px;color:var(--muted);font-size:12px}
.cat-testi{flex:1;min-width:260px;display:grid;gap:8px}
table.cat-giac{font-size:13px;width:auto;min-width:420px;background:var(--surface);border:1px solid var(--border);border-radius:6px}
table.cat-giac td,table.cat-giac th{padding:5px 10px}
table.ctr-lista td{vertical-align:top} table.ctr-lista tr.r-ferma{border-left:4px solid var(--warn)}
.ctr-cli{min-width:170px;max-width:240px} .ctr-cosa{min-width:220px;font-size:13px}
.ctr-dett{white-space:normal;display:grid;gap:10px}
table.ctr-tab{font-size:13px;background:var(--surface);border:1px solid var(--border);border-radius:6px}
table.ctr-tab tfoot td{border-top:2px solid var(--border)}
.ctr-moduli summary{cursor:pointer;color:var(--titolo);font-weight:600;padding:4px 0}
.ctr-coperti{display:flex;flex-wrap:wrap;gap:4px;padding-top:6px}
@media (max-width:900px){.cat-layout{grid-template-columns:1fr}.cat-albero{position:static;max-height:320px}}
/* presa chiamata: possibili soluzioni dalla knowledge base (chiamata.js) */
.kb-intro{margin-bottom:8px}
.kb-azioni{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;margin:4px 0 10px}
.kb-azioni .btn{padding:6px 12px}
.kb-link{margin-left:auto;color:var(--accent);text-decoration:none;font-size:13px} .kb-link:hover{text-decoration:underline}
.kb-mini{display:flex;gap:10px;padding:8px 10px;margin-bottom:6px;border:1px solid var(--border);border-radius:8px;background:var(--surface)}
.kb-mini.sel{border-color:var(--ok);background:var(--ok-soft)}
.kb-spunta{display:flex;align-items:flex-start;padding-top:2px}
.kb-spunta input{width:16px;height:16px;cursor:pointer}
.kb-mini-corpo{flex:1;min-width:0}
.kb-mini .kb-ogg{margin:4px 0 2px}
.kb-mini .kb-etichetta{display:inline;margin-right:4px} .kb-sol-t{color:var(--ok)}
.kb-testo.chiuso-2{display:inline;max-height:none;-webkit-line-clamp:2;display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden}
.kb-sintesi-mini{margin:0 0 10px;padding:10px 14px;background:var(--surface);border:1px solid var(--border);border-left:4px solid var(--accent);border-radius:8px}
.kb-sintesi-mini .kb-sintesi-testo p{margin:6px 0 2px}
.kb-includi{display:flex;align-items:center;gap:6px;margin-top:8px;font-weight:600}
/* pagina Carico tecnici (carico.js) */
.carico-lista{display:grid;padding:4px 0}
.carico-riga{display:grid;grid-template-columns:minmax(160px,230px) 52px 1fr minmax(150px,210px);gap:14px;align-items:center;
  padding:8px 16px;border:0;border-bottom:1px solid var(--border);background:none;color:inherit;font:inherit;text-align:left;cursor:pointer}
.carico-riga:hover{background:var(--surface-2)} .carico-riga:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.carico-riga.non-assegnata{opacity:.75;border-top:2px dashed var(--border)}
.carico-nome{font-weight:600;overflow-wrap:anywhere} .carico-nome .hint{font-weight:400;margin-top:0}
.carico-tot{font-size:22px;font-weight:700;text-align:right;font-variant-numeric:tabular-nums}
.carico-barra{display:flex;gap:2px;height:14px}
.carico-barra .sg{height:100%;min-width:3px}
.carico-barra .sg:first-child{border-radius:4px 0 0 4px} .carico-barra .sg:last-child{border-radius:0 4px 4px 0}
.carico-barra .sg:only-child{border-radius:4px}
.sg-scadute{background:var(--bad)} .sg-ferme{background:var(--warn)} .sg-regolari{background:var(--accent);opacity:.55}
.legenda .sw{display:inline-block;width:12px;height:12px;border-radius:3px}
.carico-dett{display:flex;gap:10px;font-size:13px;flex-wrap:wrap}
.t-bad{color:var(--bad)} .t-warn{color:var(--warn)}
@media (max-width:720px){.carico-riga{grid-template-columns:1fr 44px}.carico-barra,.carico-dett{grid-column:1 / -1}}
/* pagina Anomalie (anomalie.js) */
.filtri-anomalie,.chips-anomalie{display:flex;flex-wrap:wrap;gap:8px 10px;align-items:center;padding:10px 16px;margin-top:12px}
.filtri-anomalie .fbox-t,.chips-anomalie .fbox-t{border:0;border-radius:6px;padding:5px 10px}
.filtri-anomalie .btn.reset{margin-left:auto}
.filtri-anomalie select,.filtri-anomalie input[type=search]{padding:7px 10px;border:1px solid var(--border);border-radius:6px;background:var(--surface-2);color:var(--text);font:inherit}
.filtri-anomalie input[type=search]{min-width:200px;margin-left:auto}
tr.detail td .db-griglia,tr.detail td .db-sez{white-space:normal}
.db-griglia{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:6px 18px}
.db-sintesi{padding:10px 12px;margin-bottom:8px;background:var(--surface);border:1px solid var(--border);border-radius:8px}
.db-campo{overflow-wrap:anywhere}
.db-k{display:block;font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.03em}
.db-sez{margin-top:8px;padding:6px 12px 10px;background:var(--surface);border:1px solid var(--border);border-radius:8px}
.db-sez summary{cursor:pointer;font-weight:700;color:var(--titolo);padding:4px 0}
.db-lungo{margin-top:8px}
.db-testo{white-space:pre-wrap;overflow-wrap:anywhere;padding:6px 10px;border-left:3px solid var(--border);background:var(--surface-2);border-radius:0 6px 6px 0}
.db-riga{margin-top:8px;padding-top:8px;border-top:1px dashed var(--border)}
.db-riga > .db-k{font-weight:700;color:var(--text);margin-bottom:4px}
/* dashboard personalizzabile (dashboard.js): griglia a terzi, widget larghi 1/3, 2/3 o 3/3 */
.dash-griglia{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap);align-items:start}
.dash-card{padding:14px 16px;min-width:0;display:flex;flex-direction:column}
/* "= riga": alto quanto il widget più alto della stessa riga */
.dash-card.dash-alta{align-self:stretch}
.dash-w1{grid-column:span 1} .dash-w2{grid-column:span 2} .dash-w3{grid-column:span 3}
.dash-testa{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:12px}
.dash-testa h2{margin:0;font-size:15px;display:flex;align-items:center;gap:10px;min-width:0}
/* icona del widget in un riquadro colorato (dashIconaWidget) e pulsante tondo che apre la pagina */
.dash-ico{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:var(--radius-s);background:var(--accent-soft);color:var(--accent)}
.dash-ico svg{width:18px;height:18px}
.dash-ico.ok{background:var(--ok-soft);color:var(--ok)} .dash-ico.warn{background:var(--warn-soft);color:var(--warn)}
.dash-ico.bad{background:var(--bad-soft);color:var(--bad)} .dash-ico.su{background:var(--su-soft);color:var(--su)}
.dash-vai{flex:none;display:grid;place-items:center;width:30px;height:30px;border:1px solid var(--border);border-radius:50%;color:var(--muted)}
.dash-vai svg{width:16px;height:16px}
.dash-vai:hover,.dash-vai:focus-visible{color:var(--accent);border-color:var(--accent);background:var(--accent-soft)}
/* contenuto: oltre un'altezza massima scorre dentro il widget, titolo e comandi restano fermi */
.dash-corpo{display:grid;gap:8px;align-content:start;max-height:440px;overflow-y:auto;overscroll-behavior:contain;min-height:0;
  padding:2px;margin:-2px}   /* il margine negativo lascia spazio ai bordi di focus senza spostare nulla */
.dash-alta .dash-corpo{flex:1}
.dash-corpo .risultati{max-height:none;overflow:visible}
/* dentro il widget (che scorre) l'elenco dei referenti si apre sotto il campo invece di sovrapporsi */
.dash-corpo .combo .dropdown{position:static;margin-top:4px;max-height:240px}
.dash-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(105px,1fr));gap:8px}
.dash-kpis .kpi{padding:8px 12px}
.dash-kpis .kpi .val{font-size:22px}
.dash-kpis .kpi .lbl{font-size:11px}
.dash-kpis button.kpi:hover{border-color:var(--accent)}
/* elenchi del widget: attività, risultati KB, bozze */
.dash-lista{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.dash-riga{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;padding:8px 10px;background:var(--surface-2);border-radius:var(--radius-s)}
.dash-riga-testo{flex:1;min-width:0;display:grid;gap:2px;overflow-wrap:anywhere}
.dash-riga-sub{font-size:12px;color:var(--muted)}
.dash-riga .badge{flex:none}
.dash-apri{background:none;border:0;padding:0;color:var(--text);font:inherit;text-align:left;cursor:pointer}
.dash-apri:hover,.dash-apri:focus-visible{color:var(--accent);text-decoration:underline}
/* righe con barra orizzontale: reparti, tecnici (parte rossa = scadute) */
.dash-barra-riga{display:grid;grid-template-columns:1fr auto;gap:2px 10px;width:100%;padding:6px 8px;border:0;border-radius:var(--radius-s);
  background:none;color:var(--text);font:inherit;text-align:left;cursor:pointer}
.dash-barra-riga:hover:not(:disabled),.dash-barra-riga:focus-visible{background:var(--surface-2)}
.dash-barra-riga:disabled{cursor:default}
.dash-barra-nome{min-width:0;overflow-wrap:anywhere}
.dash-barra-num{font-variant-numeric:tabular-nums;white-space:nowrap}
.dash-barra{grid-column:1/-1;display:flex;height:6px;border-radius:3px;background:var(--neutral-soft);overflow:hidden}
.dash-barra-bad{background:var(--bad)} .dash-barra-ok{background:var(--accent)}
/* widget KPI: valore, esito e andamento a colonne degli ultimi 6 mesi */
.dash-kpi-val{display:flex;align-items:center;gap:10px}
.dash-kpi-val .val{font-size:30px;font-weight:600;font-variant-numeric:tabular-nums}
.dash-andamento{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;height:90px;margin-top:6px}
.dash-mese{display:flex;flex-direction:column;justify-content:flex-end;gap:4px;font-size:11px;color:var(--muted);text-align:center}
.dash-mese-v{display:block;border-radius:3px 3px 0 0;background:var(--neutral-soft)}
.dash-mese-v.e-ok{background:var(--ok)} .dash-mese-v.e-warn{background:var(--warn)} .dash-mese-v.e-bad{background:var(--bad)}
.dash-avvisi{margin:0;padding-left:18px}
.dash-corpo .t-scaduta{color:var(--bad);font-weight:600}
.dash-corpo .form-riga{margin:0}
.dash-corpo .form-riga input{flex:1;min-width:0}
/* modifica: comandi sopra ogni widget, segno di dove cadrà quello trascinato, elenco dei widget da aggiungere */
.dash-modifica .dash-card{border-style:dashed}
.dash-comandi{display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding:6px 8px;margin-bottom:10px;background:var(--surface-2);border-radius:var(--radius-s)}
.dash-maniglia{cursor:grab;font-size:18px;line-height:1;color:var(--muted);padding:0 4px;user-select:none;touch-action:none}
.dash-impostazioni{margin-bottom:10px}
.dash-trascina{opacity:.45}
.dash-prima{box-shadow:inset 4px 0 0 var(--accent)} .dash-dopo{box-shadow:inset -4px 0 0 var(--accent)}
.dash-w3.dash-prima{box-shadow:inset 0 4px 0 var(--accent)} .dash-w3.dash-dopo{box-shadow:inset 0 -4px 0 var(--accent)}
.dash-catalogo{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:8px}
.dash-voce{display:flex;align-items:flex-start;gap:10px;padding:10px 12px;background:var(--surface-2);border-radius:var(--radius-s)}
.dash-voce-testo{flex:1;min-width:0}
.dash-voce .btn{flex:none}
.dash-guida-widget{list-style:none;padding:0;display:grid;gap:8px}
.dash-guida-widget li{display:flex;align-items:flex-start;gap:10px}
@media (max-width:1100px){.dash-griglia{grid-template-columns:repeat(2,minmax(0,1fr))} .dash-w3,.dash-w2{grid-column:span 2}}
@media (max-width:700px){.dash-griglia{grid-template-columns:minmax(0,1fr)} .dash-w1,.dash-w2,.dash-w3{grid-column:auto}}

/* ----------------------------------------------------------------- 4. componenti comuni a tutte le sezioni
   Un componente, un nome (CLAUDE.md). I vecchi nomi rimasti nel JS sono raggruppati qui come alias. */
:where(main) :where(input:not([type=checkbox]):not([type=radio]):not([type=color]):not([type=file]):not([type=range]),select,textarea){
  padding:7px 10px;border:1px solid var(--border);border-radius:var(--radius-s);background:var(--surface-2);color:var(--text);font:inherit}
a{color:var(--accent)}
main.largo{max-width:1500px}
/* intestazione di pagina: percorso, titolo, sottotitolo e azioni a destra */
.crumbs{margin:0 0 6px;font-size:13px;color:var(--muted)}
.testa{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--gap);flex-wrap:wrap;margin-bottom:var(--gap)}
.testa h1{margin:0;font-size:20px}
.testa .muted{margin:2px 0 0}
.testa-azioni{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
/* schede (.tabs > button, .on = attiva): sottopagine della stessa sezione */
.tabs{display:flex;gap:4px;flex-wrap:wrap;border-bottom:1px solid var(--border);margin-bottom:var(--gap)}
.tabs button{border:0;border-bottom:2px solid transparent;margin-bottom:-1px;background:none;color:var(--muted);font:inherit;font-weight:600;padding:8px 14px;cursor:pointer}
.tabs button:hover{color:var(--text)}
.tabs button.on{color:var(--accent);border-bottom-color:var(--accent)}
/* card con contenuto diretto (senza .tools): margine interno standard */
.card.pad{padding:14px 16px}
.card.pad{margin-bottom:var(--gap)}
.card.pad h2{font-size:15px;margin:0 0 10px}
div.kpi{cursor:default}
/* elenco di scelta sotto un campo di ricerca (es. clienti): un pulsante per voce (clienti.js, dashboard.js) */
.risultati{display:grid;gap:4px;margin-top:8px;max-height:360px;overflow-y:auto}
.risultato{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;text-align:left;padding:8px 12px;border:1px solid var(--border);
  border-radius:var(--radius-s);background:var(--surface-2);color:var(--text);font:inherit;cursor:pointer}
.risultato:hover,.risultato:focus-visible{border-color:var(--accent);background:var(--accent-soft)}
/* stati, messaggi, pulsanti */
.b-muted{background:var(--neutral-soft);color:var(--muted)}
.badge + .badge{margin-left:4px}
.note.ok,.note.ok-note{background:var(--ok-soft);color:var(--ok)}
.note.neutra{background:var(--neutral-soft);color:var(--muted)}
.note.info{background:var(--accent-soft);color:var(--accent);display:flex;align-items:center;gap:10px}
a.btn{display:inline-block;text-decoration:none}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn.danger{background:var(--bad-soft);border-color:color-mix(in srgb,var(--bad) 35%,transparent);color:var(--bad)}
.btn.danger:hover:not(:disabled){background:color-mix(in srgb,var(--bad) 16%,var(--surface))}
.btn.small{padding:5px 10px;font-size:12.5px}
.btn.blocco{display:block;width:100%;margin-top:8px;text-align:center}
.banner{background:var(--warn-soft);color:var(--warn);padding:8px 16px;font-size:13px;text-align:center;border-bottom:1px solid var(--border)}
.fascia-test{position:sticky;top:0;z-index:1200;background:var(--bad-soft);color:var(--bad);font-weight:700}
.spinner{width:16px;height:16px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:loader-gira .8s linear infinite;flex:none}
.num{text-align:right;font-variant-numeric:tabular-nums} .nowrap{white-space:nowrap}
tr.attenuata td{opacity:.6}
/* piccole varianti ricorrenti (al posto di style="" nelle pagine) */
h2 .sottotitolo{font-weight:400;font-size:13px}
.card.stacco{margin:12px 0}
.barrato{text-decoration:line-through}
.badge.accanto{margin-left:6px}
.kb-attesa.ampio{padding:16px}
form.in-linea{display:inline}
/* form delle pagine generate dal server: sezioni (fieldset), scelte, campi affiancati, righe con pulsanti */
.form-sezioni fieldset{border:0;padding:0;margin:0 0 20px}
.form-sezioni legend{font-weight:700;margin-bottom:8px}
.form-sezioni label:not(.scelta){display:grid;gap:4px;font-size:12px;color:var(--muted)}
.scelta,.form label.scelta{display:flex;align-items:center;gap:8px;margin:6px 0;cursor:pointer;font-size:inherit;color:var(--text)}
.rientro{margin:4px 0 12px 26px;max-width:360px}
.riga-campi{display:flex;gap:12px;flex-wrap:wrap} .riga-campi > label{flex:1}
.form-riga{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:8px 0}
.zona-pericolo{margin-top:14px;padding-top:12px;border-top:1px solid var(--border)}
.cerca-elenco{width:100%;max-width:360px;margin-bottom:8px}
/* pagina di un singolo report (FMS e VA): Scarica / Azioni / Dati a sinistra, il report a destra */
.report-layout{display:grid;grid-template-columns:300px minmax(0,1fr);gap:var(--gap);align-items:start}
.report-lato{display:grid;gap:12px;position:sticky;top:12px}
.report-lato .card.pad{margin-bottom:0}
.report-scarica{display:flex;flex-wrap:wrap;gap:8px}
.dati{display:grid;grid-template-columns:auto 1fr;gap:6px 12px;margin:0;font-size:13px}
.dati dt{color:var(--muted)}
.dati dd{margin:0;text-align:right;overflow-wrap:anywhere}
.report-anteprima{position:sticky;top:12px}
.report-barra{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;font-weight:600;color:var(--muted)}
.report-frame{background:var(--bg);border:1px solid var(--border);border-radius:var(--radius);padding:12px;display:flex;justify-content:center}
.report-frame iframe{width:100%;height:calc(100vh - 150px);min-height:600px;border:0;background:#fff;border-radius:4px;transition:width .2s}
@media (max-width:1000px){.report-layout{grid-template-columns:1fr}.report-lato,.report-anteprima{position:static}}
/* tabella di dettaglio dentro una cella (non è un elenco: data-tabella="no") */
table.compatta{width:auto;font-size:12px}
table.compatta th,table.compatta td{padding:2px 10px 2px 0;border:0;background:none;position:static}

/* pagine fuori dalla SPA (accesso, errori, messaggi: app/pagine.py, app/routers/auth.py) */
body.pagina-sola{display:grid;place-items:center;min-height:90vh;padding:16px}
.card.pagina-box{width:100%;max-width:400px;padding:32px 32px 28px;box-shadow:var(--shadow-pop)}
.pagina-logo{display:block;width:150px;height:auto;margin:0 0 22px}
.pagina-box h1{font-size:20px;margin:0 0 6px}
.pagina-box p{margin:0 0 20px}
.btn-microsoft{display:flex;align-items:center;justify-content:center;gap:10px}
.pagina-form{grid-template-columns:1fr}
.pagina-oppure{text-align:center;margin:14px 0}

/* scelta dell'aspetto (Profilo del portale: profilo.js; Account dell'area clienti): anteprime delle varianti di colori.
   L'anteprima porta data-chiaro / data-scuro, quindi usa gli stessi token della variante che mostra (sezione 1). */
.aspetto-griglia{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:12px;margin:8px 0 18px}
.aspetto-var{display:grid;gap:4px;padding:8px;border:2px solid var(--border);border-radius:var(--radius);background:var(--surface);
  color:var(--text);font:inherit;text-align:left;cursor:pointer}
.aspetto-var:hover{border-color:var(--muted)}
.aspetto-var.on{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.aspetto-var:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.aspetto-nome{font-weight:600}
.aspetto-nome .hint{display:inline;font-weight:400}
.aspetto-anteprima{display:flex;height:84px;overflow:hidden;border:1px solid var(--border);border-radius:var(--radius-s);background:var(--bg)}
.aspetto-barra{display:grid;align-content:start;gap:5px;width:28%;padding:8px 6px;background:var(--sb-bg);border-right:1px solid var(--sb-line)}
.aspetto-barra i{display:block;height:5px;border-radius:3px;background:var(--sb-muted);opacity:.6}
.aspetto-barra i:first-child{background:var(--sb-ico-on);opacity:1}
.aspetto-pagina{flex:1;padding:8px}
.aspetto-card{display:grid;gap:5px;padding:7px;border:1px solid var(--border);border-radius:4px;background:var(--surface)}
.aspetto-card i{display:block;width:75%;height:5px;border-radius:3px;background:var(--text)}
.aspetto-card i+i{width:50%;background:var(--muted)}
.aspetto-card b{display:block;width:40%;height:10px;border-radius:3px;background:var(--accent-fill)}

/* chat (portale interno: Chat clienti, app/static/chat.js; area clienti: Assistenza). Messaggi in colonna inversa:
   il più recente in fondo e la vista resta sull'ultimo anche quando la conversazione si aggiorna. .mio = chi guarda. */
.chat{display:flex;flex-direction:column-reverse;gap:8px;overflow-y:auto;padding:14px 16px}
.chat-msg{align-self:flex-start;max-width:min(75%,640px);padding:8px 12px;border:1px solid var(--border);border-radius:12px;
  border-bottom-left-radius:4px;background:var(--surface-2);white-space:pre-wrap;overflow-wrap:anywhere}
.chat-msg.mio{align-self:flex-end;border-color:transparent;border-radius:12px;border-bottom-right-radius:4px;background:var(--accent-soft)}
.chat-meta{display:block;margin-bottom:2px;color:var(--muted);font-size:11px;white-space:normal}
.chat-msg.auto{align-self:center;max-width:90%;border-style:dashed;border-radius:12px;background:transparent;color:var(--muted);
  font-size:13px;text-align:center}
/* widget della chat: pulsante in basso a destra (spostabile: right/bottom calcolati dallo script e ricordati nel browser)
   e pannello vicino al pulsante, uguali nei due portali. Portale interno: app/static/chat-widget.js; area clienti:
   <details class="chat-widget"> con la finestra /chat in un riquadro (chat.html) e clienti/static/chat.js. */
.chat-widget{position:fixed;right:24px;bottom:24px;z-index:900}
.chat-lancio{position:relative;display:flex;align-items:center;justify-content:center;width:56px;height:56px;padding:0;border:0;
  border-radius:50%;background:var(--brand);color:var(--on-brand);box-shadow:var(--shadow-pop);cursor:pointer;list-style:none;
  transition:transform .15s ease;touch-action:none;user-select:none}
.chat-widget.trascina .chat-lancio{cursor:grabbing;transform:scale(1.08)}
/* messaggi da leggere a pagina visibile: il pulsante lampeggia finché non si apre la chat */
.chat-lancio.nuovo{animation:chat-lampeggia 1.2s ease-in-out infinite}
@keyframes chat-lampeggia{50%{background:var(--bad);transform:scale(1.1)}}
@media (prefers-reduced-motion:reduce){.chat-lancio.nuovo{animation:none;background:var(--bad)}}
.chat-lancio::-webkit-details-marker{display:none}
.chat-lancio:hover{transform:scale(1.06)}
.chat-lancio:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.chat-lancio svg{width:26px;height:26px}
.chat-lancio-stato{position:absolute;right:2px;bottom:2px;width:14px;height:14px;border:2px solid var(--surface);border-radius:50%;
  background:var(--muted)}
.chat-lancio.in-linea .chat-lancio-stato{background:var(--ok)}
.chat-lancio-badge{position:absolute;top:-4px;right:-4px;min-width:20px;padding:1px 6px;border-radius:999px;background:var(--bad);
  color:#fff;font-size:11px;font-weight:700;line-height:18px;text-align:center}
.chat-pannello{position:fixed;right:24px;bottom:92px;display:flex;flex-direction:column;width:380px;
  height:min(600px,calc(100vh - 120px));overflow:hidden;border:1px solid var(--border);border-radius:16px;background:var(--surface);
  box-shadow:var(--shadow-pop)}
.chat-pannello[hidden]{display:none}
.chat-pannello-testa{display:flex;align-items:center;gap:8px;padding:12px 14px;background:var(--testata);color:var(--on-testata)}
.chat-pannello-titolo{display:grid;flex:1;min-width:0;line-height:1.25}
.chat-pannello-titolo b,.chat-pannello-titolo span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chat-pannello-titolo span{font-size:12px;opacity:.85}
.chat-icona-btn{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;padding:0;border:0;border-radius:8px;
  background:transparent;color:inherit;font-size:20px;line-height:1;cursor:pointer}
.chat-icona-btn:hover{background:rgba(255,255,255,.16)}
.chat-icona-btn[hidden]{display:none}
.switch.chat-disponibile{flex:none;margin:0;padding:0;gap:6px;border:0;background:transparent;font-size:12px;font-weight:600}
.chat-disponibile .switch-slider{width:34px;height:20px}
.chat-disponibile .switch-slider::after{width:14px;height:14px}
.chat-disponibile input:checked + .switch-slider{background:var(--ok)}
.chat-disponibile input:checked + .switch-slider::after{transform:translateX(14px)}
.switch.chat-disponibile[hidden]{display:none}
.chat-pannello-stato,.chat-pannello-stato-testo{display:flex;align-items:center;gap:8px;min-width:0;font-size:12px}
.chat-pannello-stato{padding:8px 14px;border-bottom:1px solid var(--border)}
.chat-pannello-stato-testo{flex:1}
.chat-pannello-stato-testo .hint{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chat-pannello .chat{flex:1;min-height:0}
.chat-carico{display:flex;align-items:center;gap:8px;padding:8px 14px;border-bottom:1px solid var(--border);background:var(--surface-2);font-size:12px}
.chat-carico .hint{flex:1;min-width:0}
.chat-carico[hidden]{display:none}
.chat-lista{flex:1;min-height:0;overflow-y:auto}
.chat-lista[hidden],.chat-pannello .chat[hidden],.chat-scrivi[hidden]{display:none}
.chat-voce{display:grid;gap:2px;width:100%;padding:10px 14px;border:0;border-bottom:1px solid var(--border);background:none;color:inherit;
  font:inherit;text-align:left;cursor:pointer}
.chat-voce:hover{background:var(--surface-2)}
.chat-voce.nuova b{color:var(--accent)}
.chat-voce-testa{display:flex;justify-content:space-between;align-items:center;gap:8px}
.chat-voce-anteprima{overflow:hidden;color:var(--muted);font-size:12px;text-overflow:ellipsis;white-space:nowrap}
.chat-scrivi{display:flex;align-items:flex-end;gap:8px;padding:10px 12px;border-top:1px solid var(--border)}
.chat-scrivi textarea{flex:1;min-height:42px;max-height:140px;box-sizing:border-box;resize:none;font:inherit}
.chat-scrivi input[type=text]{flex:1;min-width:0;height:42px;box-sizing:border-box}      /* area clienti: Invio spedisce */
.chat-finestra .note{margin:8px 12px}
.chat-invia{display:inline-flex;align-items:center;justify-content:center;flex:none;width:42px;height:42px;padding:0;border-radius:50%}
.chat-invia svg{width:20px;height:20px}
/* a pannello aperto il pulsante mostra la ×: .aperto (portale interno) o details[open] (area clienti) */
.chat-lancio-chiudi,.chat-widget[open] .chat-lancio-apri,.chat-widget.aperto .chat-lancio-apri{display:none}
.chat-widget[open] .chat-lancio-chiudi,.chat-widget.aperto .chat-lancio-chiudi{display:block}
/* area clienti: nel pannello la finestra /chat (chat.html), e in essa la conversazione che si ricarica (chat_messaggi.html) */
.chat-riquadro{flex:1;width:100%;border:0}
.chat-finestra,.chat-messaggi-pagina{display:flex;flex-direction:column;height:100vh;margin:0;background:var(--surface)}
.chat-messaggi-pagina .chat{flex:1;min-height:0}
.chat-messaggi-pagina .chat-pannello-stato{flex-wrap:wrap}
@media (max-width:600px){
  .chat-pannello{left:8px;right:8px;bottom:84px;width:auto;height:calc(100vh - 110px)}
}

/* area clienti esterna (repository separato, che usa una copia di questo file: scripts/copia_css_portale_clienti.sh).
   Stessi componenti del portale, barra laterale compresa (.sidebar, .sb-*), generata dal server senza JavaScript. */
.pc-logo-accesso{display:block;height:44px;width:auto;margin:0 auto 18px}
/* panoramica (home.html): sommario, poi per cliente una card per servizio con indicatori, andamento ridotto e ultimo report */
.pc-riquadri .kpi{cursor:default;margin:0}
.pc-riquadri .badge{margin-top:6px}
.pc-cliente-t{margin:28px 0 12px;font-size:13px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
.pc-servizi{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(520px,100%),1fr));gap:var(--gap);margin-top:var(--gap)}
.pc-servizio{display:flex;flex-direction:column;margin:0;overflow:hidden}
.pc-servizio .tools h2{display:flex;align-items:center;gap:10px;flex:1 0 auto}   /* il titolo resta su una riga: i badge scendono */
.pc-ico{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;flex:none;border-radius:var(--radius-s);
  background:var(--accent-soft);color:var(--accent)}
.pc-servizio-corpo{flex:1;display:grid;gap:18px;align-content:start;padding:16px}
.pc-stat{grid-template-columns:repeat(auto-fit,minmax(140px,1fr));margin:0}
.pc-stat .kpi{background:var(--surface-2);box-shadow:none}
.pc-stat .kpi .val{font-size:22px}
.pc-stat .kpi .lbl{min-height:2.8em}          /* valori allineati anche con etichette su una o due righe */
.pc-servizio-piede{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:12px 16px;
  border-top:1px solid var(--border);background:var(--surface-2)}
.pc-servizio-piede .btns{margin:0}
.pc-ultimo{display:grid;gap:2px;min-width:0}
/* tendenza nel riquadro (grafici.sparkline): linea attenuata, ultimo valore nel colore della serie */
.pc-spark{display:block;width:100%;height:32px;margin-top:10px}
.pc-g-spark{fill:none;stroke:var(--muted);stroke-width:1.5;stroke-linejoin:round;stroke-linecap:round;opacity:.7}
.pc-g-spark-ora{stroke:var(--g-1);stroke-width:7;stroke-linecap:round}
.pc-filtri{display:flex;flex-wrap:wrap;gap:8px;align-items:flex-end}
.pc-filtri label{display:grid;gap:2px;font-size:12px;color:var(--muted)}
/* grafici dell'area clienti (clienti/grafici.py): SVG dal server, colori dai token --g-* */
.pc-grafici{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(420px,100%),1fr));gap:var(--gap)}
.pc-grafico{margin:0}
.pc-grafico figcaption{margin:0 0 6px}
.pc-g{display:block;width:100%;height:auto}
.pc-g-griglia{stroke:var(--border);stroke-width:1}
.pc-g-asse{fill:var(--muted);font-size:11px}
.pc-g-valore{fill:var(--text);font-size:12px;font-weight:600}
.pc-g-linea{fill:none;stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.pc-g-segno{stroke:var(--surface);stroke-width:2}
.pc-g-aggancio{fill:transparent}
.pc-g-punto:hover .pc-g-segno{stroke:var(--text)}
.pc-g-barra:hover{opacity:.8}
.pc-g-linea.pc-g-s1{stroke:var(--g-1)} .pc-g-linea.pc-g-s2{stroke:var(--g-2)}
.pc-g-segno.pc-g-s1,.pc-g-barra.pc-g-s1{fill:var(--g-1)} .pc-g-segno.pc-g-s2,.pc-g-barra.pc-g-s2{fill:var(--g-2)}
.pc-g-barra.pc-g-v1{fill:var(--g-grav-1)} .pc-g-barra.pc-g-v2{fill:var(--g-grav-2)} .pc-g-barra.pc-g-v3{fill:var(--g-grav-3)}
.pc-g-legenda{display:flex;gap:14px;flex-wrap:wrap;font-size:12px;color:var(--muted);margin:0 0 4px}
.pc-g-campione{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:6px;vertical-align:-1px}
.pc-g-campione.pc-g-s1{background:var(--g-1)} .pc-g-campione.pc-g-s2{background:var(--g-2)}
.pc-g-campione.pc-g-v1{background:var(--g-grav-1)} .pc-g-campione.pc-g-v2{background:var(--g-grav-2)}
.pc-g-campione.pc-g-v3{background:var(--g-grav-3)}
.pc-g-dati summary{cursor:pointer;color:var(--muted);font-size:12px;margin-top:6px}
/* senza JavaScript: Riduci menu, tema ed Esci sono pulsanti di piccoli form (preferenze in cookie, clienti/pagine.py) */
.sidebar form{margin:0}
.sb-utente button.u-esci{border:0;background:none;padding:0;font:inherit;color:var(--accent);cursor:pointer}
.sb-utente button.u-esci:hover{text-decoration:underline}
.pc-codice{font-size:22px;letter-spacing:8px;text-align:center;font-variant-numeric:tabular-nums}

/* ----------------------------------------------------------------- 5. tabelle (tabelle.js): filtri per colonna, export */
.tb-excel{margin-left:auto}
th .tb-filtro{border:0;background:none;color:var(--muted);cursor:pointer;padding:0 2px;margin-left:4px;font-size:11px;opacity:.55;vertical-align:middle;line-height:1}
th .tb-filtro:hover,th .tb-filtro:focus-visible{opacity:1;color:var(--accent)}
th .tb-filtro.on{opacity:1;color:var(--accent)}
.tb-filtri{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:6px 0}
.tb-chip{border:0;cursor:pointer;font:inherit;font-size:12px}
.tb-pop{position:fixed;z-index:1100;width:280px;max-width:calc(100vw - 16px);background:var(--surface);border:1px solid var(--border);
  border-radius:8px;box-shadow:var(--shadow-pop);padding:10px;display:grid;gap:8px}
.tb-pop .tb-cerca{width:100%}
.tb-pop-rapidi,.tb-pop-azioni{display:flex;gap:6px}
.tb-pop-azioni{justify-content:flex-end}
.tb-pop-elenco{max-height:260px;overflow:auto;display:grid;gap:2px}
.tb-pop-voce{display:flex;align-items:center;gap:8px;padding:3px 4px;border-radius:4px;cursor:pointer;font-size:13px}
.tb-pop-voce:hover{background:var(--surface-2)}
.tb-pop-val{flex:1;overflow-wrap:anywhere}

/* allarmi (allarmi.js): non letti in evidenza, dettaglio sotto la riga */
tr.al-non-letto td{background:var(--accent-soft)}
tr.al-non-letto td b{color:var(--text)}
.al-messaggio{max-width:640px;white-space:normal}
.al-dettaglio{padding:6px 4px;display:grid;gap:8px}
.al-dettaglio p{margin:0}

/* ----------------------------------------------------------------- 6. sezione FMS (pagine server) */
.fms-checks{list-style:none;margin:0;padding:0;font-size:13px}
.fms-checks li{padding:2px 0 2px 22px;position:relative}
.fms-checks li::before{position:absolute;left:0;font-weight:700}
.fms-checks li.ok::before{content:"✓";color:var(--ok)}
.fms-checks li.ko{color:var(--muted)} .fms-checks li.ko::before{content:"–"}
/* nuovo report: tabella dei clienti con selettore di riga (fms_reports/web/static/app.js) */
.fms-selezione{display:flex;align-items:center;gap:12px;margin:10px 0 2px;font-size:13px}
[data-fms-riga]{cursor:pointer}
[data-fms-riga].sel td{background:var(--accent-soft)}
.fms-col-scelta{width:36px;text-align:center}
.fms-storico{list-style:none;padding:0;margin:0;font-size:12.5px;max-height:240px;overflow-y:auto}
.fms-storico li{padding:4px 0;border-bottom:1px solid var(--border)}
.fms-bozza{padding:8px 0;border-bottom:1px solid var(--border)}
/* accesso in sola lettura alla sezione FMS (il server rifiuta comunque ogni azione) */
.sola-lettura main form[method="post"],.sola-lettura main a[href$="/adhoc"]{display:none!important}

/* workflow e struttura DB CRM (workflow.js) */
.wf-sezione{padding:12px 16px}
.wf-sezione h3{margin:16px 0 6px;font-size:13px;letter-spacing:.06em;color:var(--titolo)}
.wf-regole td{vertical-align:top}
.wf-se,.wf-allora{font-size:12.5px}
.wf-etichetta{font-weight:700;color:var(--muted);margin-right:4px;text-transform:uppercase;font-size:11px}
.wf-spenta td{opacity:.55}
.wf-aiuto{font-size:11px;font-weight:400;letter-spacing:0;margin-left:6px}
.wf-campi{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:6px 0 10px}
.wf-cond{display:grid;grid-template-columns:minmax(160px,1.3fr) minmax(140px,1fr) minmax(140px,1.3fr) auto;gap:8px;align-items:center;margin:6px 0}
.wf-azione{border:1px solid var(--border);border-radius:8px;margin:8px 0;background:var(--surface-2)}
.wf-azione .hint,.wf-azione .form{padding:0 12px}
.wf-azione .form{padding-bottom:12px}
@media (max-width:700px){.wf-cond{grid-template-columns:1fr}}