/* Voice — sistema de peles (4 temas por usuário, decisão 24/08).
   Um DOM só: cada pele redefine TOKENS + o layout do rail via classe no <html>:
   skin-denso (A·Linear) · skin-claro-pb (B·Vercel) · skin-amigavel (C·Polaris) ·
   skin-comando (D·NOC). Regra: componente NUNCA usa cor literal — só var(--*). */

:root{
  /* tokens neutros — cada skin sobrescreve TUDO isto */
  --ground:#101114; --panel:#16181D; --panel2:#1A1C21; --line:#24262C;
  --ink:#F0F1F3; --mut:#84898F; --dim:#5E646B;
  --ok:#3FD69C; --bad:#F0666B; --warn:#F5B454; --acc:#3FD69C; --nexus:#A78BFA;
  --acc-soft:rgba(63,214,156,.12); --nexus-soft:rgba(167,139,250,.12);
  --r:10px; --r-lg:12px;
  --font:'Inter',system-ui,sans-serif; --mono:'JetBrains Mono',ui-monospace,monospace;
  --shadow:none;
  --cta-bg:#F0F1F3; --cta-ink:#101114; --cta-r:8px; --cta-shadow:none;
  --nav-w:196px; --nav-bg:#16181D; --nav-line:#24262C;
  --nav-item-on-bg:#1F2126; --nav-item-on-ink:#F0F1F3;
  --glow-ok:none; --glow-bad:none; --glow-warn:none;
}

/* ---------- A · Denso & Escuro (padrão de fábrica) = tokens neutros acima ---------- */
.skin-denso{ color-scheme:dark }

/* ---------- B · Preto no Branco (claro, topbar) ---------- */
.skin-claro-pb{
  color-scheme:light;
  --ground:#FAFAFA; --panel:#FFFFFF; --panel2:#F5F5F5; --line:#EAEAEA;
  --ink:#111111; --mut:#666666; --dim:#999999;
  --ok:#0CA678; --bad:#E5484D; --warn:#D97706; --acc:#111111; --nexus:#7C5CE0;
  --acc-soft:#F0F0F0; --nexus-soft:#F5F3FF;
  --r:8px; --r-lg:8px;
  --font:'Instrument Sans','Inter',system-ui,sans-serif;
  --cta-bg:#111111; --cta-ink:#FFFFFF; --cta-r:999px;
  --nav-bg:#FFFFFF; --nav-line:#EAEAEA;
  --nav-item-on-bg:#F0F0F0; --nav-item-on-ink:#111111;
}
/* topbar: o rail vira faixa horizontal */
.skin-claro-pb .shell{grid-template-columns:1fr;grid-template-rows:auto 1fr}
.skin-claro-pb .rail{flex-direction:row;align-items:center;border-right:none;
  border-bottom:1px solid var(--nav-line);padding:8px 20px;gap:2px;overflow-x:auto}
.skin-claro-pb .rail .logo{padding:0 12px 0 0}
.skin-claro-pb .rail .sep,.skin-claro-pb .rail .spacer{display:none}
.skin-claro-pb .ritem{border-radius:999px;padding:7px 13px}

/* ---------- C · Claro & Amigável (Polaris) ---------- */
.skin-amigavel{
  color-scheme:light;
  --ground:#F1F4F7; --panel:#FFFFFF; --panel2:#F7FAFC; --line:#E3E8EE;
  --ink:#1A2733; --mut:#5B6B7B; --dim:#8695A5;
  --ok:#0E9F6E; --bad:#E0475B; --warn:#F0A32E; --acc:#0E9F6E; --nexus:#7C5CE0;
  --acc-soft:#E5F7F0; --nexus-soft:#F1EBFF;
  --r:14px; --r-lg:16px;
  --font:'Figtree',system-ui,sans-serif;
  --shadow:0 1px 2px rgba(16,42,67,.05),0 6px 18px rgba(16,42,67,.05);
  --cta-bg:linear-gradient(135deg,#10B981,#0B9C6C); --cta-ink:#fff; --cta-r:999px;
  --cta-shadow:0 4px 12px rgba(16,185,129,.3);
  --nav-bg:#FFFFFF; --nav-line:#E3E8EE;
  --nav-item-on-bg:#E5F7F0; --nav-item-on-ink:#0B7A55;
}

/* ---------- D · Central de Comando (NOC, rail de ícones) ---------- */
.skin-comando{
  color-scheme:dark;
  --ground:#0A1522; --panel:#0D1B2C; --panel2:#102136; --line:rgba(120,170,220,.12);
  --ink:#DCE8F5; --mut:#8FA6BC; --dim:#5E7A96;
  --ok:#2EE6A8; --bad:#F0666B; --warn:#F5B454; --acc:#2EE6A8; --nexus:#B79CF9;
  --acc-soft:rgba(16,185,129,.15); --nexus-soft:rgba(139,92,246,.16);
  --r:12px; --r-lg:12px;
  --font:'IBM Plex Sans',system-ui,sans-serif; --mono:'IBM Plex Mono',ui-monospace,monospace;
  --cta-bg:rgba(16,185,129,.15); --cta-ink:#2EE6A8; --cta-r:8px;
  --nav-w:64px; --nav-bg:#0D1B2C; --nav-line:rgba(120,170,220,.12);
  --nav-item-on-bg:rgba(16,185,129,.15); --nav-item-on-ink:#2EE6A8;
  --glow-ok:0 0 8px rgba(16,185,129,.7); --glow-bad:0 0 8px rgba(240,102,107,.7);
  --glow-warn:0 0 8px rgba(245,180,84,.7);
}
.skin-comando .ritem span{display:none}
.skin-comando .ritem{justify-content:center;padding:10px}
.skin-comando .ritem svg{width:17px;height:17px}
.skin-comando .rail .logo b{display:none}
.skin-comando .rail{align-items:center;padding:14px 8px}
.skin-comando .cta{border:1px solid rgba(16,185,129,.4)}
.skin-comando .kpi .num{font-family:var(--mono);font-weight:600}
.skin-comando h2{text-transform:uppercase;letter-spacing:.06em;font-size:15px}
.skin-comando .sdot{box-shadow:var(--glow-ok)}
.skin-comando .sdot.bad{box-shadow:var(--glow-bad)}
.skin-comando .sdot.warn{box-shadow:var(--glow-warn)}