/* ============================================================================ UI FOUNDATION — token e utility THEME-INDEPENDENT. ADDITIVI: non cambiano il render esistente finche' non usati (nessuna regressione). Base per rifinire spaziatura/elevazione, palette dati e stati vuoti/caricamento in modo coerente. ============================================================================ */ :root{ /* scala di spaziatura (4pt) */ --sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:24px;--sp-6:32px; /* raggi ed elevazioni coerenti */ --r-1:8px;--r-2:12px;--r-3:16px; --el-1:0 1px 2px rgba(0,0,0,.12);--el-2:0 4px 16px rgba(0,0,0,.16);--el-3:0 8px 32px rgba(0,0,0,.22); /* Palette SEVERITA' centralizzata e CVD-consapevole: rosso critico (convenzione universale) + verde-teal per "ok", piu' separabile dal rosso per il daltonismo rosso-verde; va SEMPRE accompagnata da etichetta testuale (ridondanza, non solo colore). Fonte unica per grafici/badge/KPI quando li si allinea. */ --sev-critical:#e0503a;--sev-high:#e07b3a;--sev-medium:#c08a2a;--sev-low:#5c9dd1;--sev-info:#8a94a6;--sev-ok:#1a9e73; } /* Stato VUOTO coerente (additivo): usare dove oggi compare un messaggio "nessun dato" spoglio. */ .emptystate{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--sp-2); padding:var(--sp-6) var(--sp-5);color:var(--muted);text-align:center;font-size:13px;line-height:1.5} .emptystate .es-ico{font-size:26px;opacity:.55} .emptystate .es-t{color:var(--text);font-weight:600;font-size:14px} /* SKELETON di caricamento (additivo): .skel su un placeholder mentre i dati arrivano. */ .skel{position:relative;overflow:hidden;background:var(--panel2);border-radius:var(--r-1);min-height:14px} .skel::after{content:"";position:absolute;inset:0;transform:translateX(-100%); background:linear-gradient(90deg,transparent,var(--seltint),transparent);animation:skelshine 1.3s infinite} @keyframes skelshine{100%{transform:translateX(100%)}} @media (prefers-reduced-motion:reduce){.skel::after{animation:none}} body[data-theme="claude-dark"]{--font:-apple-system,Segoe UI,Roboto,sans-serif;--mono:'JetBrains Mono',Consolas,monospace;--bg:#1f1e1c;--bg2:#262624;--panel:#30302e;--panel2:#2a2a28;--border:#45443f;--text:#e8e6df;--muted:#a6a49b;--accent:#d97757;--accent2:#e0a184;--accent-text:#1a1712;--head:#26251f;--head-text:#f2f0ea;--tab:#c9c6bd;--tab-active:#45443f;--tab-active-text:#f2f0ea;--input:#1c1b19;--link:#e0a184;--good:#57b87a;--warnbg:#3a2f1a;--warnbd:#b7791f;--warntx:#e8c98a;--glow:none;--neon:0 0 12px rgba(217,119,87,.25);--grid:rgba(217,119,87,.05);--termbg:#111110;--termtx:#8fe6a8;--seltint:#352a22;--selring:rgba(217,119,87,.26);--chipbg:#242320} body[data-theme="dark"]{--font:-apple-system,Segoe UI,Roboto,sans-serif;--mono:'JetBrains Mono',Consolas,monospace;--bg:#070d18;--bg2:#0e1626;--panel:#15223a;--panel2:#0f1b30;--border:#24365a;--text:#e6ecf5;--muted:#adc1de;--accent:#2f8fe0;--accent2:#8fd0ff;--accent-text:#00121f;--head:#0a1424;--head-text:#fff;--tab:#bcd4f0;--tab-active:#1d3a5f;--tab-active-text:#ffffff;--input:#0b1424;--link:#8fd0ff;--good:#57d98a;--warnbg:#2a1f10;--warnbd:#b7791f;--warntx:#e8c98a;--glow:none;--neon:0 0 14px rgba(47,143,224,.3);--grid:rgba(47,143,224,.06);--termbg:#060c16;--termtx:#7fd0ff;--seltint:#122a45;--selring:rgba(47,143,224,.28);--chipbg:#0e1728} body[data-theme="light"]{--font:-apple-system,Segoe UI,Roboto,sans-serif;--mono:'JetBrains Mono',Consolas,monospace;--bg:#e7eaef;--bg2:#eef0f3;--panel:#fff;--panel2:#f5f6f8;--border:#dce0e6;--text:#1a1c22;--muted:#4b5563;--accent:#123a6b;--accent2:#2f6fe0;--accent-text:#fff;--head:#0d2340;--head-text:#fff;--tab:#cfe0f5;--tab-active:#1d3a5f;--tab-active-text:#ffffff;--input:#fff;--link:#1565c0;--good:#1e7d3a;--warnbg:#fff3e0;--warnbd:#b7791f;--warntx:#8a5a12;--glow:none;--neon:0 4px 18px rgba(0,0,0,.08);--grid:rgba(18,58,107,.05);--termbg:#0d1117;--termtx:#7fd0ff;--seltint:#e9f0fd;--selring:rgba(18,58,107,.20);--chipbg:#f3f6fb} body[data-theme="hacker"]{--font:'JetBrains Mono',Consolas,monospace;--mono:'JetBrains Mono',Consolas,monospace;--bg:#000;--bg2:#020602;--panel:#040c04;--panel2:#061006;--border:#0e3f0e;--text:#00ff41;--muted:#12a012;--accent:#00ff41;--accent2:#7dff9e;--accent-text:#001a06;--head:#000;--head-text:#00ff41;--tab:#12c012;--tab-active:#0c2a0c;--tab-active-text:#00ff41;--input:#050d05;--link:#39ff6a;--good:#00ff41;--warnbg:#0a1a00;--warnbd:#7fbf00;--warntx:#aaff00;--glow:0 0 5px rgba(0,255,65,.4);--neon:0 0 16px rgba(0,255,65,.35);--grid:rgba(0,255,65,.06);--termbg:#000;--termtx:#00ff41;--seltint:#08240f;--selring:rgba(0,255,65,.28);--chipbg:#040c04} body[data-theme="purple"]{--font:-apple-system,Segoe UI,Roboto,sans-serif;--mono:'JetBrains Mono',Consolas,monospace;--bg:#120a1f;--bg2:#190f28;--panel:#221436;--panel2:#1a0f2b;--border:#3d2a5c;--text:#ece6f7;--muted:#b6a6d6;--accent:#9d5cff;--accent2:#cbb0ff;--accent-text:#160a26;--head:#160a26;--head-text:#fff;--tab:#d0bef0;--tab-active:#3a2559;--tab-active-text:#ffffff;--input:#160c26;--link:#cbb0ff;--good:#57d98a;--warnbg:#2a1f10;--warnbd:#b7791f;--warntx:#e8c98a;--glow:none;--neon:0 0 14px rgba(157,92,255,.3);--grid:rgba(157,92,255,.06);--termbg:#0f0819;--termtx:#c9a8ff;--seltint:#2a1745;--selring:rgba(157,92,255,.30);--chipbg:#1c1030} body[data-theme="tokyo-night"]{--tokyo-bg-base:#16161E;--tokyo-bg-surface:#1A1B26;--tokyo-bg-surface-elevated:#1F2335;--tokyo-bg-highlight:#292E42;--tokyo-text-primary:#C0CAF5;--tokyo-text-secondary:#9AA5CE;--tokyo-text-muted:#828ab0;--tokyo-accent-blue:#7AA2F7;--tokyo-accent-purple:#BB9AF7;--tokyo-accent-cyan:#7DCFFF;--tokyo-accent-green:#9ECE6A;--tokyo-accent-orange:#FF9E64;--tokyo-accent-red:#F7768E;--tokyo-border-subtle:#292E42;--tokyo-border-focus:#3B4261;--tokyo-gradient-neon:linear-gradient(135deg,#7AA2F7,#BB9AF7);--tokyo-shadow-glow:rgba(122,162,247,.25);--tokyo-radius-sm:6px;--tokyo-radius-md:10px;--tokyo-radius-lg:16px;--tokyo-transition:200ms cubic-bezier(0.4,0,0.2,1);--font:'Outfit',-apple-system,Segoe UI,Roboto,sans-serif;--mono:'Fira Code','JetBrains Mono',Consolas,monospace;--bg:var(--tokyo-bg-surface);--bg2:var(--tokyo-bg-base);--panel:var(--tokyo-bg-surface-elevated);--panel2:var(--tokyo-bg-highlight);--border:var(--tokyo-border-subtle);--text:var(--tokyo-text-primary);--muted:var(--tokyo-text-muted);--accent:var(--tokyo-accent-blue);--accent2:var(--tokyo-accent-purple);--accent-text:var(--tokyo-bg-base);--head:var(--tokyo-bg-base);--head-text:var(--tokyo-text-primary);--tab:var(--tokyo-text-secondary);--tab-active:var(--tokyo-border-focus);--tab-active-text:#C0CAF5;--input:var(--tokyo-bg-base);--link:var(--tokyo-accent-cyan);--good:var(--tokyo-accent-green);--warnbg:#3d2f24;--warnbd:var(--tokyo-accent-orange);--warntx:var(--tokyo-accent-orange);--glow:none;--neon:0 0 14px var(--tokyo-shadow-glow);--grid:rgba(122,162,247,.05);--termbg:var(--tokyo-bg-base);--termtx:var(--tokyo-accent-green);--seltint:#24283b;--selring:var(--tokyo-shadow-glow);--chipbg:var(--tokyo-bg-surface-elevated)} body[data-theme="dracula"]{--font:-apple-system,Segoe UI,Roboto,sans-serif;--mono:'JetBrains Mono',Consolas,monospace;--bg:#282A36;--bg2:#21222C;--panel:#44475A;--panel2:#343746;--border:#44475A;--text:#F8F8F2;--muted:#afb8d1;--accent:#BD93F9;--accent2:#FF79C6;--accent-text:#21222C;--head:#21222C;--head-text:#F8F8F2;--tab:#6272A4;--tab-active:#BD93F9;--tab-active-text:#21222C;--input:#21222C;--link:#8BE9FD;--good:#50FA7B;--warnbg:#3a2f1a;--warnbd:#FFB86C;--warntx:#FFB86C;--glow:none;--neon:0 0 14px rgba(189,147,249,.3);--grid:rgba(189,147,249,.05);--termbg:#21222C;--termtx:#50FA7B;--seltint:#3b3d52;--selring:rgba(189,147,249,.28);--chipbg:#44475A} body[data-theme="one-dark"]{--font:-apple-system,Segoe UI,Roboto,sans-serif;--mono:'JetBrains Mono',Consolas,monospace;--bg:#282c34;--bg2:#21252b;--panel:#2c313a;--panel2:#353b45;--border:#3e4451;--text:#abb2bf;--muted:#939aa6;--accent:#61afef;--accent2:#c678dd;--accent-text:#1e2228;--head:#21252b;--head-text:#e6e9ef;--tab:#9da5b4;--tab-active:#3e4451;--tab-active-text:#e6e9ef;--input:#21252b;--link:#56b6c2;--good:#98c379;--warnbg:#3a2f1a;--warnbd:#e5c07b;--warntx:#e5c07b;--glow:none;--neon:0 0 14px rgba(97,175,239,.28);--grid:rgba(97,175,239,.05);--termbg:#21252b;--termtx:#98c379;--seltint:#2a3140;--selring:rgba(97,175,239,.26);--chipbg:#2c313a} body[data-theme="catppuccin"]{--font:-apple-system,Segoe UI,Roboto,sans-serif;--mono:'JetBrains Mono',Consolas,monospace;--bg:#1e1e2e;--bg2:#181825;--panel:#313244;--panel2:#45475a;--border:#45475a;--text:#cdd6f4;--muted:#989cac;--accent:#89b4fa;--accent2:#cba6f7;--accent-text:#11111b;--head:#181825;--head-text:#cdd6f4;--tab:#a6adc8;--tab-active:#45475a;--tab-active-text:#cdd6f4;--input:#181825;--link:#b4befe;--good:#a6e3a1;--warnbg:#3d3028;--warnbd:#fab387;--warntx:#fab387;--glow:none;--neon:0 0 14px rgba(137,180,250,.28);--grid:rgba(137,180,250,.05);--termbg:#11111b;--termtx:#a6e3a1;--seltint:#2a2a3d;--selring:rgba(137,180,250,.30);--chipbg:#313244} body[data-theme="synthwave"]{--font:-apple-system,Segoe UI,Roboto,sans-serif;--mono:'JetBrains Mono',Consolas,monospace;--bg:#262335;--bg2:#1a1825;--panel:#34294f;--panel2:#463465;--border:#463465;--text:#f0eff1;--muted:#8f95c3;--accent:#ff7edb;--accent2:#72f1b8;--accent-text:#1a1825;--head:#1a1825;--head-text:#f0eff1;--tab:#b6a8d9;--tab-active:#463465;--tab-active-text:#f0eff1;--input:#1a1825;--link:#36f9f6;--good:#72f1b8;--warnbg:#3d2838;--warnbd:#f97e72;--warntx:#f97e72;--glow:0 0 8px rgba(255,126,219,.35);--neon:0 0 18px rgba(255,126,219,.4);--grid:rgba(255,126,219,.06);--termbg:#1a1825;--termtx:#36f9f6;--seltint:#362a50;--selring:rgba(255,126,219,.32);--chipbg:#34294f} body[data-theme="antigravity"]{--font:'Inter',-apple-system,Segoe UI,Roboto,sans-serif;--mono:'JetBrains Mono',Consolas,monospace;--bg:#13151A;--bg2:#0B0C10;--panel:#1D1F27;--panel2:#252830;--border:#2D3039;--text:#E8EAED;--muted:#83888e;--accent:#A8C7FA;--accent2:#C58AF9;--accent-text:#0B0C10;--head:#0B0C10;--head-text:#E8EAED;--tab:#9AA0A6;--tab-active:#4A4D56;--tab-active-text:#E8EAED;--input:#0B0C10;--link:#8AB4F8;--good:#81C995;--warnbg:#3d3520;--warnbd:#FDD663;--warntx:#FDD663;--glow:none;--neon:0 0 16px rgba(168,199,250,.22);--grid:rgba(168,199,250,.06);--termbg:#0B0C10;--termtx:#81C995;--seltint:#1a1d26;--selring:rgba(168,199,250,.15);--chipbg:#1D1F27} body[data-theme="nord"]{--font:'Inter',-apple-system,Segoe UI,Roboto,sans-serif;--mono:'JetBrains Mono',Consolas,monospace;--bg:#2E3440;--bg2:#292E39;--panel:#3B4252;--panel2:#434C5E;--border:#434C5E;--text:#ECEFF4;--muted:#a8b0c1;--accent:#81A1C1;--accent2:#88C0D0;--accent-text:#2E3440;--head:#292E39;--head-text:#ECEFF4;--tab:#D8DEE9;--tab-active:#81A1C1;--tab-active-text:#2E3440;--input:#292E39;--link:#88C0D0;--good:#A3BE8C;--warnbg:#3d3528;--warnbd:#D08770;--warntx:#EBCB8B;--glow:none;--neon:0 0 14px rgba(129,161,193,.25);--grid:rgba(136,192,208,.05);--termbg:#292E39;--termtx:#A3BE8C;--seltint:#3b4252;--selring:rgba(129,161,193,.28);--chipbg:#3B4252} body[data-theme="monokai-pro"]{--font:-apple-system,Segoe UI,Roboto,sans-serif;--mono:'Fira Code','JetBrains Mono',Consolas,monospace;--bg:#2D2E27;--bg2:#272822;--panel:#403E3C;--panel2:#4a4846;--border:#403E3C;--text:#FCFCFA;--muted:#acaaac;--accent:#AB9DF2;--accent2:#FF6188;--accent-text:#272822;--head:#272822;--head-text:#FCFCFA;--tab:#939293;--tab-active:#FFD866;--tab-active-text:#2D2A2E;--input:#272822;--link:#78DCE8;--good:#A9DC76;--warnbg:#3d3020;--warnbd:#FC9867;--warntx:#FFD866;--glow:none;--neon:0 0 14px rgba(171,157,242,.28);--grid:rgba(171,157,242,.05);--termbg:#272822;--termtx:#A9DC76;--seltint:#353632;--selring:rgba(255,216,102,.25);--chipbg:#403E3C} body[data-theme="minimal-black"]{--font:'Inter',-apple-system,Segoe UI,Roboto,sans-serif;--mono:'JetBrains Mono',Consolas,monospace;--bg:#000000;--bg2:#000000;--panel:#111111;--panel2:#18181b;--border:#27272A;--text:#EDEDED;--muted:#7d7d86;--accent:#FFFFFF;--accent2:#E4E4E7;--accent-text:#000000;--head:#000000;--head-text:#EDEDED;--tab:#A1A1AA;--tab-active:#EDEDED;--tab-active-text:#000000;--input:#000000;--link:#3B82F6;--good:#10B981;--warnbg:#1a1408;--warnbd:#F59E0B;--warntx:#F59E0B;--glow:none;--neon:0 0 12px rgba(255,255,255,.08);--grid:rgba(255,255,255,.04);--termbg:#000000;--termtx:#10B981;--seltint:#18181b;--selring:rgba(237,237,237,.2);--chipbg:#111111} /* palette severità UNICA (punto design #6): stessi colori per badge, dot, grafici, mappa e Risk Radar. Semantica, quindi theme-independent (un "critical" è rosso ovunque). JS (SEVC in app.js) usa gli stessi hex. */ :root{--sev-critical:#e0503a;--sev-high:#e07b3a;--sev-medium:#d99a2b;--sev-low:#3a9d5c;--sev-info:#5c7c9d; --sp1:8px;--sp2:16px;--sp3:24px; /* scala di spaziatura uniforme (punto #1) */ --ui-font:-apple-system,Segoe UI,Roboto,sans-serif; /* pulsanti/tab: stessa metrica su tutti i temi */ --tab-active-text:var(--head-text)} /* testo tab selezionata (minimal-black: nero su pill bianca) */ *{box-sizing:border-box} html,body{margin:0} body{font-family:var(--font);background:var(--bg);color:var(--text);transition:background .2s,color .2s;min-height:100vh} body::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none; background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:38px 38px} body[data-theme="hacker"]::after{content:"";position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.35; background:repeating-linear-gradient(0deg,rgba(0,0,0,0) 0,rgba(0,0,0,0) 2px,rgba(0,20,0,.25) 3px)} body[data-theme="synthwave"]::after{content:"";position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.22; background:repeating-linear-gradient(0deg,rgba(0,0,0,0) 0,rgba(0,0,0,0) 2px,rgba(255,126,219,.12) 3px)} body[data-theme="tokyo-night"] header{box-shadow:0 1px 0 rgba(122,162,247,.14)} /* Tokyo Night — card / bottoni neon / input (anche classi utility .tokyo-*) */ body[data-theme="tokyo-night"] .card,body[data-theme="tokyo-night"] .tokyo-card{background:var(--tokyo-bg-surface-elevated);border:1px solid var(--tokyo-border-subtle);border-radius:var(--tokyo-radius-lg);box-shadow:0 4px 6px rgba(0,0,0,.1);transition:transform var(--tokyo-transition),border-color var(--tokyo-transition)} body[data-theme="tokyo-night"] .card:hover,body[data-theme="tokyo-night"] .tokyo-card:hover{transform:translateY(-2px);border-color:var(--tokyo-border-focus)} body[data-theme="tokyo-night"] #terminal .card:hover{transform:none} body[data-theme="tokyo-night"] button.go,body[data-theme="tokyo-night"] .tokyo-btn-primary{background:var(--tokyo-accent-blue);color:var(--tokyo-bg-base);border:0;border-radius:var(--tokyo-radius-sm);font-weight:600;transition:all var(--tokyo-transition)} body[data-theme="tokyo-night"] button.go:hover,body[data-theme="tokyo-night"] .tokyo-btn-primary:hover{background:#8db0fc;filter:none;box-shadow:0 0 12px var(--tokyo-shadow-glow)} body[data-theme="tokyo-night"] select,body[data-theme="tokyo-night"] input,body[data-theme="tokyo-night"] textarea,body[data-theme="tokyo-night"] .tokyo-input{background:var(--tokyo-bg-base);border:1px solid var(--tokyo-border-subtle);color:var(--tokyo-text-primary);border-radius:var(--tokyo-radius-sm);transition:all var(--tokyo-transition)} body[data-theme="tokyo-night"] select:focus,body[data-theme="tokyo-night"] input:focus,body[data-theme="tokyo-night"] textarea:focus,body[data-theme="tokyo-night"] .tokyo-input:focus{outline:none;border-color:var(--tokyo-accent-blue);box-shadow:0 0 0 2px var(--tokyo-shadow-glow)} body[data-theme="tokyo-night"] code,body[data-theme="tokyo-night"] pre,body[data-theme="tokyo-night"] .termout{font-family:var(--mono);font-variant-ligatures:normal} body[data-theme="tokyo-night"] code{color:var(--tokyo-accent-cyan)} body[data-theme="tokyo-night"] .cfgblk{border-radius:var(--tokyo-radius-md)} /* Antigravity — glassmorphism (Deep Space / AI) */ body[data-theme="antigravity"] header{background:rgba(11,12,16,.78);backdrop-filter:blur(14px) saturate(1.25);border-bottom-color:rgba(45,48,57,.9)} body[data-theme="antigravity"] .card{background:rgba(29,31,39,.72);backdrop-filter:blur(10px);border-color:rgba(45,48,57,.85);box-shadow:0 4px 24px rgba(0,0,0,.35)} body[data-theme="antigravity"] .card:hover{border-color:var(--border-focus);box-shadow:0 0 20px var(--selring)} body[data-theme="antigravity"] #terminal .card{background:var(--panel);backdrop-filter:none} body[data-theme="antigravity"] button.go:hover{box-shadow:0 0 14px var(--selring)} body[data-theme="minimal-black"] .card{border-color:var(--border);box-shadow:none} body[data-theme="minimal-black"] button.go{border:1px solid var(--border)} header{position:sticky;top:0;z-index:20;background:var(--head);color:var(--head-text);border-bottom:1px solid var(--border);padding:12px 24px;display:flex;align-items:center;gap:16px;text-shadow:var(--glow);backdrop-filter:blur(6px)} .logo{display:flex;align-items:center;gap:10px} .logo svg{filter:drop-shadow(var(--glow))} .logo .valor-product-logo, .logo svg.valor-product-logo{display:block;height:34px;width:auto;max-width:180px;object-fit:contain;flex:0 0 auto;filter:drop-shadow(var(--glow))} .logo .logo-meta{min-width:0} /* logo aziendale (personalizzabile da Config): a sinistra, prima dell'icona-scudo e del nome, separato da una linea */ .brandco{display:inline-flex;align-items:center;height:26px;padding-right:12px;margin-right:2px;border-right:1px solid var(--border)} .brandco img,.brandco svg{height:24px;width:auto;max-width:150px;display:block;object-fit:contain} .brandco svg{filter:none} .tab.tab-ico{padding:8px 11px;display:inline-flex;align-items:center} .tab.tab-ico i{font-size:14px} /* scheda Config */ .cfggrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:var(--sp2)} .cfgblk{border:1px solid var(--border);border-radius:10px;padding:14px 16px;background:var(--panel2)} .cfgblk-h{font-weight:700;font-size:13px;color:var(--accent);display:flex;align-items:center;gap:8px;margin-bottom:8px} .logorow{display:flex;align-items:center;gap:12px;margin-top:6px} .logobtns{display:flex;gap:8px;flex-wrap:wrap} .logoprev{width:96px;height:44px;border:1px dashed var(--border);border-radius:8px;background:var(--head);display:flex;align-items:center;justify-content:center;overflow:hidden;flex:0 0 auto} .logoprev img,.logoprev svg{max-width:88px;max-height:36px;width:auto;height:auto;object-fit:contain} .feedrow{display:flex;gap:8px;align-items:center;margin-bottom:7px} .feedrow input{flex:1;min-width:0} .feedrow input.fn{flex:0 0 120px} .feedrow .del{flex:0 0 auto;padding:8px 10px;line-height:1} .feedrow .feed-kind{flex:0 0 auto;font-size:9px;font-weight:700;letter-spacing:.4px;padding:2px 6px;border-radius:5px;background:color-mix(in srgb,var(--accent) 18%,transparent);color:var(--accent)} .feedrow-off{opacity:.55} .feedrow-off input{text-decoration:line-through} .feedrow-invalid input.fu{border:1px solid var(--sev-high)} header h1{margin:0;font-family:'Orbitron',var(--font);font-size:17px;font-weight:800;letter-spacing:1.5px} header .sub{font-size:10.5px;opacity:.7;font-family:var(--mono);letter-spacing:.3px} .dotlive{width:8px;height:8px;border-radius:50%;background:var(--good);box-shadow:0 0 8px var(--good);animation:pulse 1.6s infinite;display:inline-block;margin-right:5px} @keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}} nav{margin-left:auto;display:flex;gap:5px;align-items:center;flex-wrap:wrap} .tab{color:var(--tab);background:transparent;border:1px solid transparent;padding:8px 13px;border-radius:9px;cursor:pointer;font-size:12.5px;font-weight:600;font-family:var(--ui-font);letter-spacing:.2px;line-height:1.2} .tab:hover{border-color:var(--border)} .tab.active{background:var(--tab-active);color:var(--tab-active-text);box-shadow:var(--glow)} /* Badge scadenze incidenti NIS2 sulla tab «Incidenti»: ambra = in avvicinamento, rosso pulsante = scaduta. */ .tab-badge{display:inline-flex;align-items:center;justify-content:center;min-width:17px;height:17px;padding:0 5px;margin-left:6px;border-radius:9px;background:#e0a800;color:#1a1205;font-size:10.5px;font-weight:800;line-height:1;vertical-align:middle} .tab-badge.over{background:#e5484d;color:#fff;animation:incpulse 1.6s ease-in-out infinite} .tab-badge.calm{background:#64748b;color:#fff} @keyframes incpulse{0%,100%{opacity:1}50%{opacity:.5}} .themesw{display:inline-flex;gap:6px;align-items:center;background:var(--input);border:1px solid var(--border);border-radius:10px;padding:5px 7px} /* in header: sfondo come la barra (blu nel tema chiaro); padding = anello blu attorno allo swatch */ header .themesw{background:var(--head);border-color:rgba(255,255,255,.18)} .themesw-pop{position:relative;padding:5px;flex-shrink:0} header .themesw-pop{padding:6px} .tsw{width:20px;height:20px;border-radius:6px;border:1.5px solid transparent;cursor:pointer;padding:0;transition:transform .14s,border-color .14s} .tsw-main{width:20px;height:20px;border-radius:6px;box-shadow:none;border:1.5px solid transparent} header .tsw-main{border-color:transparent;box-shadow:none} .tsw-menu{position:absolute;top:calc(100% + 6px);right:0;display:none;flex-direction:column;gap:5px;padding:6px;background:var(--input);border:1px solid var(--border);border-radius:10px;z-index:120;box-shadow:0 10px 28px rgba(0,0,0,.35);max-height:min(70vh,420px);overflow-y:auto} .themesw-pop.open .tsw-menu{display:flex} .tsw:hover{transform:scale(1.1)} .tsw[aria-pressed="true"]{border-color:var(--head-text);transform:scale(1.08)} .tsw:focus-visible{outline:2px solid var(--accent);outline-offset:1px} main{position:relative;z-index:2;max-width:1240px;margin:0 auto;padding:18px 24px 60px} section{display:none} section.on{display:block;animation:fade .25s} /* F.R.O.D.O. a piena pagina: quando attiva, occupa tutto il viewport (come aprirla direttamente) */ /* la sezione parte SOTTO l'header sticky (--headh misurata a runtime): header in alto + sidebar nativa + contenuto, layout coerente col resto del tool. Full-bleed (fuori dal max-width di main) per dare spazio alle tabelle FRODO. */ #frodo.on{position:fixed;top:var(--headh,61px);left:0;right:0;bottom:0;z-index:3000;margin:0;padding:0;background:var(--bg);display:flex;flex-direction:column;animation:fade .2s} #frodo .frodobody{flex:1;display:flex;min-height:0} #frodo #frodoframe{flex:1;width:100%;border:0;background:#fff;min-width:0} #toto.on{position:fixed;top:var(--headh,61px);left:0;right:0;bottom:0;z-index:3000;margin:0;padding:0;background:var(--bg);display:flex;flex-direction:column;animation:fade .2s} #toto #totoframe{flex:1;width:100%;border:0;min-width:0;background:var(--bg)} #milou.on{position:fixed;top:var(--headh,61px);left:0;right:0;bottom:0;z-index:3000;margin:0;padding:0;background:var(--bg);display:flex;flex-direction:column;animation:fade .2s} #milou #milouframe{flex:1;width:100%;border:0;min-width:0;background:var(--bg)} #ai.on{position:fixed;top:var(--headh,61px);left:0;right:0;bottom:0;z-index:3000;margin:0;padding:0;background:var(--bg);display:flex;flex-direction:column;animation:fade .2s} #ai #aiframe{flex:1;width:100%;border:0;min-width:0;background:var(--bg)} /* sidebar NATIVA della sezione Gestione del rischio (rispecchia la nav di FRODO, stile della console): la sidebar interna di FRODO e' nascosta dal bridge -> qui usiamo le variabili del tema per un look coerente col resto del tool */ /* display:block + margin-left:0 NEUTRALIZZANO la regola generica `nav{display:flex;gap:5px;flex-wrap:wrap;margin-left:auto}` (pensata per la tab-bar in alto) che, applicandosi a questo