/* ═══════════════════════════════════════════════════════════════════════════
   VALIOM DS v2 — ADAPTADOR DO SISTEMA PRINCIPAL (reith/index.html)
   Escopo: html.vds body:is(.dark-theme, .light-theme)  (v2 é o tema ESCURO; o claro "Papel" segue igual)
   Estratégia: 1) remapear as variáveis legadas (--bg2, --border, --text…) para os
   tokens v2 → toda tela que já usa var() acompanha sozinha; 2) sobrescrever os
   componentes legados (.btn, .inp, .card, .tbl, .tag, modal…) com os valores dos
   componentes-base; 3) matar glow/gradiente/text-shadow do Navy Gold.
   Não mexe em ID, data-*, onclick, estrutura nem JS.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. Variáveis legadas → tokens ────────────────────────────────────────── */
html.vds body:is(.dark-theme, .light-theme) {
  --bg: var(--vds-bg-canvas);
  --bg2: var(--vds-surface-1);
  --bg3: var(--vds-surface-2);
  --bg4: var(--vds-surface-3);
  --bg5: #1A2B40;
  --border: var(--vds-border-default);
  --border2: var(--vds-border-strong);
  --border3: var(--vds-accent);
  --text: var(--vds-text-primary);
  --text2: var(--vds-text-body);
  --text3: var(--vds-text-secondary);
  --text4: var(--vds-text-tertiary);
  --t3: var(--vds-text-secondary);
  --accent: var(--vds-accent);
  --accent2: var(--vds-accent);
  --accent3: var(--vds-accent-hover);
  --green: var(--vds-success); --green2: #22B07C;
  --amber: var(--vds-warning); --amber2: var(--vds-accent-press);
  --red: var(--vds-danger); --red2: #E5484D;
  --blue: var(--vds-info); --blue2: #4F8FEA;
  --teal: #2DD4BF; --pink: #F472B6;
  --r: var(--vds-radius-md); --r2: var(--vds-radius-xl); --r3: 16px;
  --glow-gold: none; --glow-gold-sm: none;
  background: var(--vds-bg-canvas) !important;   /* sem radial ambiente */
  color: var(--vds-text-primary);
  font-family: var(--vds-font-sans);
  font-feature-settings: 'ss01' off;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
html.vds body:is(.dark-theme, .light-theme) :is(input, select, textarea, button) { font-family: inherit; }

/* ── 2. SIDEBAR ───────────────────────────────────────────────────────────── */
html.vds body:is(.dark-theme, .light-theme) #sidebar {
  width: 260px; min-width: 260px;
  background: var(--vds-bg-sidebar);
  border-right: 1px solid var(--vds-border-subtle);
  box-shadow: none;
}
html.vds body:is(.dark-theme, .light-theme) .logo-wrap { padding: 22px 20px 20px; border-bottom: 1px solid var(--vds-border-subtle); }
html.vds body:is(.dark-theme, .light-theme) .logo-wrap img,
html.vds body:is(.dark-theme, .light-theme) #valiom-logo-wrap img { filter: none; }
html.vds body:is(.dark-theme, .light-theme) .logo-text { text-shadow: none; }
html.vds body:is(.dark-theme, .light-theme) .logo-tag { font-size: 10px; font-weight: 500; letter-spacing: .22em; color: var(--vds-text-secondary); margin-top: 4px; }
html.vds body:is(.dark-theme, .light-theme) .nav-group { padding: 20px 12px 4px; }
html.vds body:is(.dark-theme, .light-theme) .nav-group-label {
  font: 600 11px/1 var(--vds-font-sans); letter-spacing: .14em; text-transform: uppercase;
  color: var(--vds-text-tertiary); padding: 0 12px; margin-bottom: 8px;
}
html.vds body:is(.dark-theme, .light-theme) .nav-btn {
  gap: 12px; height: 40px; padding: 0 12px; margin: 2px 0;
  border-radius: var(--vds-radius-md); border-left: 0;
  font: 500 14px/1 var(--vds-font-sans); color: var(--vds-text-secondary);
  background: transparent; text-shadow: none; transition: background var(--vds-dur), color var(--vds-dur);
}
html.vds body:is(.dark-theme, .light-theme) .nav-btn .nav-ico { width: 20px; height: 20px; font-size: 15px; color: var(--vds-text-tertiary); text-shadow: none; }
html.vds body:is(.dark-theme, .light-theme) .nav-btn:hover { background: var(--vds-nav-hover); color: var(--vds-text-primary); }
html.vds body:is(.dark-theme, .light-theme) .nav-btn:hover .nav-ico { color: var(--vds-text-secondary); text-shadow: none; }
html.vds body:is(.dark-theme, .light-theme) .nav-btn.active,
html.vds body:is(.dark-theme, .light-theme) .nav-btn.active-page {
  background: var(--vds-nav-active-bg); color: var(--vds-nav-active-fg); font-weight: 600; text-shadow: none; border-left: 0;
}
html.vds body:is(.dark-theme, .light-theme) .nav-btn.active::before {
  content: ''; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: var(--vds-accent);
}
html.vds body:is(.dark-theme, .light-theme) .nav-btn.active .nav-ico { color: var(--vds-nav-active-fg); text-shadow: none; }
/* Contadores do menu: NEUTROS (cor só com significado — o número sozinho não é alerta) */
html.vds body:is(.dark-theme, .light-theme) .nav-pill,
html.vds body:is(.dark-theme, .light-theme) .nav-badge {
  min-width: 24px; height: 22px; padding: 0 7px; margin-left: auto;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--vds-radius-pill) !important;
  background: var(--vds-surface-2) !important; border: 1px solid var(--vds-border-default) !important;
  color: var(--vds-text-primary) !important; box-shadow: none !important;
  font: 600 12px/1 var(--vds-font-sans) !important; font-variant-numeric: tabular-nums;
}
html.vds body:is(.dark-theme, .light-theme) .nav-pill:empty { display: none; }
html.vds body:is(.dark-theme, .light-theme) .nav-btn.active .nav-pill { background: var(--vds-surface-2) !important; color: var(--vds-text-primary) !important; }
/* Selos "BUSINESS"/"BÔNUS" (estilo inline com gradiente) → selo neutro discreto */
html.vds body:is(.dark-theme, .light-theme) #nav-crm-badge,
html.vds body:is(.dark-theme, .light-theme) #nav-btn-ponto > span[style*="gradient"] {
  background: transparent !important; color: var(--vds-text-secondary) !important;
  border: 1px solid var(--vds-border-strong) !important; border-radius: var(--vds-radius-xs) !important;
  font: 600 9px/1.4 var(--vds-font-sans) !important; letter-spacing: .08em !important;
}
/* Sair da conta (rodapé do menu) — perigo sem exagero */
html.vds body:is(.dark-theme, .light-theme) #sidebar [onclick*="logoutUser"] {
  background: transparent !important; border: 1px solid var(--vds-border-default) !important;
  color: var(--vds-text-secondary) !important; border-radius: var(--vds-radius-md) !important;
}
html.vds body:is(.dark-theme, .light-theme) #sidebar [onclick*="logoutUser"]:hover { color: var(--vds-danger) !important; border-color: var(--vds-danger-bd) !important; background: var(--vds-danger-bg) !important; }
html.vds body:is(.dark-theme, .light-theme) #sidebar > div:last-child { border-top-color: var(--vds-border-subtle) !important; }

/* ── 3. HEADER ────────────────────────────────────────────────────────────── */
html.vds body:is(.dark-theme, .light-theme) .topbar,
html.vds body:is(.dark-theme, .light-theme) #topbar {
  height: 64px; min-height: 64px; padding: 0 32px;
  background: var(--vds-bg-header); border-bottom: 1px solid var(--vds-border-subtle); box-shadow: none;
}
html.vds body:is(.dark-theme, .light-theme) .topbar-right { gap: 12px; }
html.vds body:is(.dark-theme, .light-theme) .status-dot { box-shadow: none; }
/* Tutorial = SECONDARY (não compete com CTA operacional) */
html.vds body:is(.dark-theme, .light-theme) #tutorial-btn {
  height: 36px; padding: 0 14px !important; border-radius: var(--vds-radius-md) !important;
  border: 1px solid var(--vds-border-strong) !important; background: var(--vds-surface-1) !important;
  color: var(--vds-text-primary) !important; font: 500 13px var(--vds-font-sans) !important; gap: 8px !important;
}
html.vds body:is(.dark-theme, .light-theme) #tutorial-btn i { color: var(--vds-brand); font-size: 11px; }
html.vds body:is(.dark-theme, .light-theme) #tutorial-btn:hover { background: var(--vds-surface-hover) !important; }
html.vds body:is(.dark-theme, .light-theme) #pwa-install-btn,
html.vds body:is(.dark-theme, .light-theme) #pwa-guide-btn {
  border-radius: var(--vds-radius-md) !important; border-color: var(--vds-border-strong) !important;
  background: var(--vds-surface-1) !important; color: var(--vds-text-primary) !important;
}
/* Notificações: ícone neutro, badge = ponto de atenção */
html.vds body:is(.dark-theme, .light-theme) .notif-btn {
  width: 40px; height: 40px; border-radius: var(--vds-radius-md);
  border: 1px solid transparent; background: transparent; color: var(--vds-text-body);
}
html.vds body:is(.dark-theme, .light-theme) .notif-btn:hover { background: var(--vds-surface-hover); border-color: var(--vds-border-subtle); }
html.vds body:is(.dark-theme, .light-theme) .notif-badge {
  top: 4px; right: 4px; min-width: 16px; height: 16px; padding: 0 4px; font-size: 10px;
  background: var(--vds-accent); color: var(--vds-on-accent); border: 2px solid var(--vds-bg-header);
}
/* Conta: avatar + nome + função, sem cápsula */
html.vds body:is(.dark-theme, .light-theme) .user-chip {
  gap: 12px; padding: 4px 8px 4px 4px; border-radius: var(--vds-radius-md);
  background: transparent; border: 1px solid transparent; border-left: 1px solid var(--vds-border-subtle);
  border-top-left-radius: 0; border-bottom-left-radius: 0; padding-left: 16px;
}
html.vds body:is(.dark-theme, .light-theme) .user-chip:hover { background: var(--vds-surface-hover); }
html.vds body:is(.dark-theme, .light-theme) .uc-av { width: 36px; height: 36px; font: 600 13px var(--vds-font-sans); }
html.vds body:is(.dark-theme, .light-theme) .uc-name { font: 600 14px/1.25 var(--vds-font-sans); color: var(--vds-text-primary); }
html.vds body:is(.dark-theme, .light-theme) .uc-role { font: 400 12px/1.3 var(--vds-font-sans); color: var(--vds-text-secondary); }
html.vds body:is(.dark-theme, .light-theme) .user-chip::after {
  content: '\f078'; font-family: 'Font Awesome 6 Free'; font-weight: 900; font-size: 10px;
  color: var(--vds-text-tertiary); margin-left: 6px;
}
/* Menus flutuantes (conta, notificações) */
html.vds body:is(.dark-theme, .light-theme) :is(.user-menu, .notif-menu) {
  background: var(--vds-surface-2); border: 1px solid var(--vds-border-default);
  border-radius: var(--vds-radius-xl); box-shadow: var(--vds-shadow-pop);
}
html.vds body:is(.dark-theme, .light-theme) .notif-item { background: var(--vds-surface-1); border-color: var(--vds-border-subtle); border-radius: var(--vds-radius-lg); }
html.vds body:is(.dark-theme, .light-theme) .notif-item.is-unread { background: var(--vds-surface-selected); border-color: var(--vds-accent-bd-weak); }
/* Toggle de tema sem glow */
html.vds body:is(.dark-theme, .light-theme) .theme-toggle-btn .tt-track { background: var(--vds-surface-3); border-color: var(--vds-border-strong); }
html.vds body:is(.dark-theme, .light-theme) .theme-toggle-btn .tt-thumb { background: var(--vds-accent); box-shadow: none; }
html.vds body:is(.dark-theme, .light-theme) .theme-toggle-btn .tt-moon, html.vds body:is(.dark-theme, .light-theme) .theme-toggle-btn .tt-sun { filter: none; }
html.vds body:is(.dark-theme, .light-theme) .theme-toggle-btn:hover .tt-track { filter: none; }
/* Barra de progresso de navegação: dourado sólido, sem shimmer azul */
html.vds body:is(.dark-theme, .light-theme) #nav-progress { background: var(--vds-accent); height: 2px; }

/* ── 4. PÁGINA / TIPOGRAFIA ───────────────────────────────────────────────── */
html.vds body:is(.dark-theme, .light-theme) .page { padding: 32px 32px 40px; }
html.vds body:is(.dark-theme, .light-theme) .pg-title { font: 600 28px/1.2 var(--vds-font-sans); letter-spacing: -.02em; color: var(--vds-text-primary); margin-bottom: 4px; }
html.vds body:is(.dark-theme, .light-theme) .pg-sub { font-size: 14px; color: var(--vds-text-secondary); margin-bottom: 24px; }
html.vds body:is(.dark-theme, .light-theme) .sec-title { font: 600 16px/1.3 var(--vds-font-sans); color: var(--vds-text-primary); }
html.vds body:is(.dark-theme, .light-theme) :is(h1, h2, h3, h4) { color: var(--vds-text-primary); text-shadow: none; }
html.vds body:is(.dark-theme, .light-theme) :is(h1, h2, h3) { font-weight: 600; }
html.vds body:is(.dark-theme, .light-theme) :is(small, .note) { color: var(--vds-text-secondary); }
html.vds body:is(.dark-theme, .light-theme) hr { border-color: var(--vds-border-default); }
html.vds body:is(.dark-theme, .light-theme) a { color: var(--vds-link); }
html.vds body:is(.dark-theme, .light-theme) .divider { background: var(--vds-border-default); }

/* ── 5. CARDS / MÉTRICAS ──────────────────────────────────────────────────── */
html.vds body:is(.dark-theme, .light-theme) :is(.card, .metric, .settings-panel, .settings-sidebar, .settings-section-card, .settings-summary-card, .auth-panel) {
  background: var(--vds-surface-1); border: 1px solid var(--vds-border-default);
  border-radius: var(--vds-radius-xl); box-shadow: none;
}
html.vds body:is(.dark-theme, .light-theme) .card:hover { border-color: var(--vds-border-default); box-shadow: none; }
html.vds body:is(.dark-theme, .light-theme) :is(.card-sm, .card-inset, .settings-group, .settings-info, .settings-empty, .cfcc-card, .ret-card, .welcome-feat, .weekday-item) {
  background: var(--vds-surface-2); border-color: var(--vds-border-subtle); border-radius: var(--vds-radius-lg); box-shadow: none;
}
html.vds body:is(.dark-theme, .light-theme) .card.accent::before { background: var(--vds-accent); }
html.vds body:is(.dark-theme, .light-theme) .metric-lbl {
  font: 500 12px/1.3 var(--vds-font-sans); letter-spacing: .02em; text-transform: none; color: var(--vds-text-secondary);
}
html.vds body:is(.dark-theme, .light-theme) :is(.metric-val, .kpi-val, .dash-kpi-val, .cfcc-val, .settings-summary-value, .stat-val, .bar-amt, .week-num, .price-big) {
  font-family: var(--vds-font-sans); font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; text-shadow: none;
}
html.vds body:is(.dark-theme, .light-theme) .metric-val { color: var(--vds-text-primary); }
html.vds body:is(.dark-theme, .light-theme) .settings-section-title { color: var(--vds-text-primary); text-shadow: none; font-weight: 600; }
html.vds body:is(.dark-theme, .light-theme) .settings-head-title { font-weight: 600; }
html.vds body:is(.dark-theme, .light-theme) :is(.settings-subbtn.active, .settings-subitem.active) { background: var(--vds-surface-selected); color: var(--vds-accent); border-color: var(--vds-accent-bd-weak); }
html.vds body:is(.dark-theme, .light-theme) :is(.settings-subbtn, .settings-subitem):hover { background: var(--vds-surface-hover); }
html.vds body:is(.dark-theme, .light-theme) .settings-subtag { background: var(--vds-surface-3); border-color: var(--vds-border-default); color: var(--vds-text-body); }
html.vds body:is(.dark-theme, .light-theme) .cfcc-card { border-left: 3px solid var(--vds-accent); }
html.vds body:is(.dark-theme, .light-theme) .cfcc-kpi { background: var(--vds-surface-1); border-color: var(--vds-border-subtle); }
html.vds body:is(.dark-theme, .light-theme) .card.drag-over, html.vds body:is(.dark-theme, .light-theme) .dash-kpi.drag-over { box-shadow: 0 0 0 1px var(--vds-accent) !important; }
html.vds body:is(.dark-theme, .light-theme) :is(.dash-edit-mode, .dash-drag-mode) :is(.dash-kpi, .card[data-card-id]):hover { box-shadow: none; transform: none; }
html.vds body:is(.dark-theme, .light-theme) #db-edit-banner { background: var(--vds-surface-selected); color: var(--vds-text-primary); border: 1px solid var(--vds-accent-bd-weak); }

/* ── 6. BOTÕES ────────────────────────────────────────────────────────────── */
html.vds body:is(.dark-theme, .light-theme) .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 36px; padding: 8px 14px; border-radius: var(--vds-radius-md);
  font: 500 13px/1.2 var(--vds-font-sans); letter-spacing: 0; text-shadow: none;
  transition: background var(--vds-dur) var(--vds-ease), border-color var(--vds-dur), color var(--vds-dur);
}
html.vds body:is(.dark-theme, .light-theme) .btn.sm { min-height: 30px; padding: 6px 10px; font-size: 12px; }
/* PRIMARY — dourado sólido, texto quase preto, sem glow/gradiente/pulo */
html.vds body:is(.dark-theme, .light-theme) .btn:not(.outline):not(.ghost) {
  background: var(--vds-accent); color: var(--vds-on-accent); font-weight: 600;
  border: 1px solid transparent; box-shadow: none; letter-spacing: 0;
}
html.vds body:is(.dark-theme, .light-theme) .btn:not(.outline):not(.ghost):hover { background: var(--vds-accent-hover); box-shadow: none; transform: none; opacity: 1; }
html.vds body:is(.dark-theme, .light-theme) .btn:not(.outline):not(.ghost):active { background: var(--vds-accent-press); transform: none; box-shadow: none; }
/* SECONDARY (.outline) */
html.vds body:is(.dark-theme, .light-theme) .btn.outline {
  background: var(--vds-surface-1); color: var(--vds-text-primary); border: 1px solid var(--vds-border-strong); box-shadow: none;
}
html.vds body:is(.dark-theme, .light-theme) .btn.outline:hover { background: var(--vds-surface-hover); border-color: var(--vds-border-strong); color: var(--vds-text-primary); box-shadow: none; }
/* GHOST */
html.vds body:is(.dark-theme, .light-theme) .btn.ghost { background: transparent; color: var(--vds-text-body); border: 1px solid var(--vds-border-default); box-shadow: none; }
html.vds body:is(.dark-theme, .light-theme) .btn.ghost:hover { background: var(--vds-surface-hover); color: var(--vds-text-primary); }
/* Verde / vermelho (inline) → tons semânticos contidos */
html.vds body:is(.dark-theme, .light-theme) .btn[style*="green"]:not(.outline),
html.vds body:is(.dark-theme, .light-theme) .btn[style*="#00875"],
html.vds body:is(.dark-theme, .light-theme) .btn.green {
  background: var(--vds-success-bg) !important; color: var(--vds-success-fg) !important;
  border: 1px solid var(--vds-success-bd) !important; box-shadow: none !important;
}
html.vds body:is(.dark-theme, .light-theme) .btn[style*="red"]:not(.outline),
html.vds body:is(.dark-theme, .light-theme) .btn[style*="var(--red)"]:not(.outline),
html.vds body:is(.dark-theme, .light-theme) .btn.red {
  background: var(--vds-danger-bg) !important; color: var(--vds-danger-fg) !important;
  border: 1px solid var(--vds-danger-bd) !important; box-shadow: none !important;
}
html.vds body:is(.dark-theme, .light-theme) .btn.outline[style*="var(--red)"] { border-color: var(--vds-danger-bd) !important; color: var(--vds-danger) !important; }
html.vds body:is(.dark-theme, .light-theme) .btn:disabled, html.vds body:is(.dark-theme, .light-theme) .btn[disabled] { opacity: .45; cursor: not-allowed; }
html.vds body:is(.dark-theme, .light-theme) #db-edit-btn { border-radius: var(--vds-radius-md); background: var(--vds-surface-1); border-color: var(--vds-border-strong); color: var(--vds-text-primary); }
html.vds body:is(.dark-theme, .light-theme) #db-edit-btn.active { background: var(--vds-accent); color: var(--vds-on-accent); border-color: transparent; }

/* ── 7. INPUTS ────────────────────────────────────────────────────────────── */
html.vds body:is(.dark-theme, .light-theme) .inp,
html.vds body:is(.dark-theme, .light-theme) #main :is(input[type="text"], input[type="search"], input[type="email"], input[type="number"], input[type="tel"], input[type="date"], input[type="time"], input[type="datetime-local"], input[type="month"], input[type="password"], input:not([type]), select, textarea):not(.vds-raw):not([style*="background:transparent"]):not([style*="background: transparent"]) {
  background-color: var(--vds-surface-input); border: 1px solid var(--vds-border-default);
  border-radius: var(--vds-radius-md); color: var(--vds-text-primary); box-shadow: none;
}
html.vds body:is(.dark-theme, .light-theme) .inp { min-height: 36px; padding: 8px 12px; font-size: 14px; }
html.vds body:is(.dark-theme, .light-theme) .inp:hover { border-color: var(--vds-border-strong); }
html.vds body:is(.dark-theme, .light-theme) .inp:focus,
html.vds body:is(.dark-theme, .light-theme) #main :is(input, select, textarea):focus {
  border-color: var(--vds-focus-border) !important; box-shadow: var(--vds-focus-ring) !important; outline: none; background-color: var(--vds-surface-input);
}
html.vds body:is(.dark-theme, .light-theme) :is(.inp, input, textarea)::placeholder { color: var(--vds-text-placeholder); }
html.vds body:is(.dark-theme, .light-theme) select.inp option,
html.vds body:is(.dark-theme, .light-theme) select option { background: var(--vds-surface-2); color: var(--vds-text-primary); }
html.vds body:is(.dark-theme, .light-theme) :is(.inp, input, select, textarea):disabled { opacity: .5; cursor: not-allowed; }
html.vds body:is(.dark-theme, .light-theme) .inp-lbl { font: 500 12px/1.3 var(--vds-font-sans); text-transform: none; letter-spacing: 0; color: var(--vds-text-secondary); }

/* ── 8. TABELAS ───────────────────────────────────────────────────────────── */
html.vds body:is(.dark-theme, .light-theme) .tbl { font-size: 13px; font-variant-numeric: tabular-nums; }
html.vds body:is(.dark-theme, .light-theme) .tbl thead tr { background: transparent; }
html.vds body:is(.dark-theme, .light-theme) .tbl th,
html.vds body:is(.dark-theme, .light-theme) .tbl thead th {
  font: 500 11px/1.2 var(--vds-font-sans); letter-spacing: .06em; text-transform: uppercase;
  color: var(--vds-text-tertiary); border-bottom: 1px solid var(--vds-border-default); padding: 10px 16px;
}
html.vds body:is(.dark-theme, .light-theme) .tbl td { padding: 12px 16px; color: var(--vds-text-body); border-bottom: 1px solid var(--vds-border-subtle); }
html.vds body:is(.dark-theme, .light-theme) .tbl tbody tr { border-bottom: 0; }
html.vds body:is(.dark-theme, .light-theme) .tbl tbody tr:hover { background: var(--vds-tint-row); }

/* ── 9. BADGES / TAGS (neutral · success · warning · danger · info · brand) ─ */
html.vds body:is(.dark-theme, .light-theme) .tag {
  height: 22px; padding: 0 8px; border-radius: var(--vds-radius-sm); border: 1px solid var(--vds-border-default);
  background: var(--vds-surface-2); color: var(--vds-text-body); font: 500 12px/1 var(--vds-font-sans); letter-spacing: 0;
}
html.vds body:is(.dark-theme, .light-theme) .tag.g { background: var(--vds-success-bg); color: var(--vds-success-fg); border-color: var(--vds-success-bd); }
html.vds body:is(.dark-theme, .light-theme) .tag.r { background: var(--vds-danger-bg); color: var(--vds-danger-fg); border-color: var(--vds-danger-bd); }
html.vds body:is(.dark-theme, .light-theme) .tag.a { background: var(--vds-warning-bg); color: var(--vds-warning-fg); border-color: var(--vds-warning-bd); }
html.vds body:is(.dark-theme, .light-theme) .tag.b { background: var(--vds-info-bg); color: var(--vds-info-fg); border-color: var(--vds-info-bd); }
html.vds body:is(.dark-theme, .light-theme) .tag.p { background: transparent; color: var(--vds-accent); border-color: var(--vds-accent-bd); }
html.vds body:is(.dark-theme, .light-theme) .status-pill { border-radius: var(--vds-radius-sm); box-shadow: none; }
html.vds body:is(.dark-theme, .light-theme) .notif-pill { border-radius: var(--vds-radius-sm); }
html.vds body:is(.dark-theme, .light-theme) .notif-pill.upcoming { background: var(--vds-info-bg); color: var(--vds-info-fg); border-color: var(--vds-info-bd); }
html.vds body:is(.dark-theme, .light-theme) .topbar-badge { background: var(--vds-accent); color: var(--vds-on-accent); box-shadow: none; }

/* ── 10. TABS ─────────────────────────────────────────────────────────────── */
html.vds body:is(.dark-theme, .light-theme) .mcd-tab { color: var(--vds-text-tertiary); font-weight: 500; }
html.vds body:is(.dark-theme, .light-theme) .mcd-tab:hover { color: var(--vds-text-secondary); }
html.vds body:is(.dark-theme, .light-theme) .mcd-tab.active { color: var(--vds-text-primary); border-bottom-color: var(--vds-accent); }

/* ── 11. ALERTAS ──────────────────────────────────────────────────────────── */
html.vds body:is(.dark-theme, .light-theme) .alert { border-radius: var(--vds-radius-lg); background: var(--vds-surface-2); border: 1px solid var(--vds-border-default); border-left-width: 3px; }
html.vds body:is(.dark-theme, .light-theme) .alert.warn { border-left-color: var(--vds-warning); }
html.vds body:is(.dark-theme, .light-theme) .alert.info { border-left-color: var(--vds-info); }
html.vds body:is(.dark-theme, .light-theme) .alert.ok   { border-left-color: var(--vds-success); }
html.vds body:is(.dark-theme, .light-theme) .alert.err  { border-left-color: var(--vds-danger); }
html.vds body:is(.dark-theme, .light-theme) .alert-title { font-weight: 600; }
html.vds body:is(.dark-theme, .light-theme) .alert-body { color: var(--vds-text-secondary); }
html.vds body:is(.dark-theme, .light-theme) .tip-box { border-radius: var(--vds-radius-lg); box-shadow: none; }

/* ── 12. MODAIS / TOAST / LOADING ─────────────────────────────────────────── */
html.vds body:is(.dark-theme, .light-theme) #modal-overlay { background: var(--vds-overlay); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); }
html.vds body:is(.dark-theme, .light-theme) .modal-box,
html.vds body:is(.dark-theme, .light-theme) #modal-box {
  background: var(--vds-surface-2) !important; border: 1px solid var(--vds-border-default) !important;
  border-radius: var(--vds-radius-xl) !important; box-shadow: var(--vds-shadow-modal) !important;
}
html.vds body:is(.dark-theme, .light-theme) .modal-title { font: 600 18px/1.3 var(--vds-font-sans); color: var(--vds-text-primary); }
html.vds body:is(.dark-theme, .light-theme) .modal-sub { font-size: 13px; color: var(--vds-text-secondary); }
html.vds body:is(.dark-theme, .light-theme) .modal-footer { border-top-color: var(--vds-border-subtle); gap: 8px; }
html.vds body:is(.dark-theme, .light-theme) .modal-close-btn {
  width: 32px; height: 32px; font-size: 18px; border-radius: var(--vds-radius-md);
  background: transparent; border: 1px solid var(--vds-border-default); color: var(--vds-text-secondary);
}
html.vds body:is(.dark-theme, .light-theme) .modal-close-btn:hover { background: var(--vds-surface-hover); color: var(--vds-text-primary); transform: none; }
html.vds body:is(.dark-theme, .light-theme) #toast {
  background: var(--vds-surface-2); border: 1px solid var(--vds-border-default); border-left: 3px solid var(--vds-accent);
  border-radius: var(--vds-radius-lg); box-shadow: var(--vds-shadow-pop); color: var(--vds-text-primary); font-size: 13px;
}
html.vds body:is(.dark-theme, .light-theme) #data-loading-overlay { background: var(--vds-loading-overlay); backdrop-filter: none; -webkit-backdrop-filter: none; }
html.vds body:is(.dark-theme, .light-theme) .dl-spinner { border-color: var(--vds-spinner-track); border-top-color: var(--vds-accent); }
html.vds body:is(.dark-theme, .light-theme) .dl-msg { background: var(--vds-surface-2); border-color: var(--vds-border-default); box-shadow: none; }
html.vds body:is(.dark-theme, .light-theme) .skeleton { background: linear-gradient(90deg, var(--vds-skel-a) 25%, var(--vds-track-soft) 50%, var(--vds-skel-a) 75%); background-size: 200%; }

/* ── 13. AGENDA / CALENDÁRIO ──────────────────────────────────────────────── */
html.vds body:is(.dark-theme, .light-theme) .cal-day { border-color: var(--vds-border-subtle); }
html.vds body:is(.dark-theme, .light-theme) .cal-day:hover { background: var(--vds-tint-row); }
html.vds body:is(.dark-theme, .light-theme) .cal-day-num { color: var(--vds-text-tertiary); }
html.vds body:is(.dark-theme, .light-theme) .cal-day-num.today { color: var(--vds-accent); text-shadow: none; font-weight: 600; }
html.vds body:is(.dark-theme, .light-theme) .cal-header-cell { color: var(--vds-text-tertiary); font-weight: 500; }
html.vds body:is(.dark-theme, .light-theme) :is(.cal-day-today, [class*="today"]):not(.notif-pill) { background: var(--vds-surface-selected) !important; border-color: var(--vds-accent-bd) !important; }
html.vds body:is(.dark-theme, .light-theme) .week-col { background: var(--vds-surface-1); border-color: var(--vds-border-subtle); }
html.vds body:is(.dark-theme, .light-theme) .week-col:hover { background: var(--vds-surface-hover); }

/* ── 14. MATA-GLOW GLOBAL (Navy Gold → v2) ────────────────────────────────── */
html.vds body:is(.dark-theme, .light-theme) [style*="text-shadow"] { text-shadow: none !important; }
html.vds body:is(.dark-theme, .light-theme) [style*="0 0 12px rgba(235"],
html.vds body:is(.dark-theme, .light-theme) [style*="0 0 16px rgba(235"],
html.vds body:is(.dark-theme, .light-theme) [style*="0 0 20px rgba(235"],
html.vds body:is(.dark-theme, .light-theme) [style*="0 0 24px rgba(235"],
html.vds body:is(.dark-theme, .light-theme) [style*="0 4px 16px rgba(212,168,67"] { box-shadow: none !important; }
html.vds body:is(.dark-theme, .light-theme) .bar-fill { color: var(--vds-on-accent); }

/* ═══ 15. CENTRAL DE COMANDO (#vi-home) — referência direta do mockup ═══════ */
html.vds body:is(.dark-theme, .light-theme) #vi-home {
  --vi-radius: var(--vds-radius-xl); --vi-shadow: none; --vi-num: var(--vds-font-sans);
  font-family: var(--vds-font-sans); max-width: 1440px;
}
html.vds body:is(.dark-theme, .light-theme) #vi-home .vi-card { background: var(--vds-surface-1); border-color: var(--vds-border-default); box-shadow: none; }
/* Cabeçalho */
html.vds body:is(.dark-theme, .light-theme) #vi-home .vi-head { margin: 0 0 24px; align-items: flex-end; }
html.vds body:is(.dark-theme, .light-theme) #vi-home .vi-eyebrow { font-size: 12px; letter-spacing: .16em; color: var(--vds-text-secondary); margin-bottom: 12px; }
html.vds body:is(.dark-theme, .light-theme) #vi-home .vi-eyebrow .vi-mark,
html.vds body:is(.dark-theme, .light-theme) #vi-home .vi-diag-eyebrow .vi-mark { width: 8px; height: 8px; border-radius: 1px; background: var(--vds-brand); }
html.vds body:is(.dark-theme, .light-theme) #vi-home .vi-hello { font-size: 32px; font-weight: 600; letter-spacing: -.025em; }
html.vds body:is(.dark-theme, .light-theme) #vi-home .vi-headline { font-size: 16px; color: var(--vds-text-body); margin-top: 8px; }
html.vds body:is(.dark-theme, .light-theme) #vi-home .vi-head-meta { font-size: 13px; color: var(--vds-text-secondary); gap: 16px; }
html.vds body:is(.dark-theme, .light-theme) #vi-home .vi-btn-ghost {
  height: 40px; padding: 0 16px; gap: 10px; border-radius: var(--vds-radius-lg);
  border: 1px solid var(--vds-border-strong); background: var(--vds-surface-1);
  color: var(--vds-text-primary); font: 600 13px var(--vds-font-sans);
}
html.vds body:is(.dark-theme, .light-theme) #vi-home .vi-btn-ghost:hover { background: var(--vds-surface-hover); border-color: var(--vds-border-strong); }
/* Faixa executiva: UM container, colunas com divisores sutis (não 4 cards) */
html.vds body:is(.dark-theme, .light-theme) #vi-home .vi-pulse {
  gap: 0; background: var(--vds-surface-1); border: 1px solid var(--vds-border-default);
  border-radius: var(--vds-radius-xl); margin-bottom: 24px; overflow: hidden;
}
html.vds body:is(.dark-theme, .light-theme) #vi-home .vi-pulse > .vi-kpi {
  background: transparent; border: 0; border-radius: 0; box-shadow: none;
  padding: 24px 28px; min-height: 0; transform: none; position: relative;
}
html.vds body:is(.dark-theme, .light-theme) #vi-home .vi-pulse > .vi-kpi + .vi-kpi::before {
  content: ''; position: absolute; left: 0; top: 24px; bottom: 24px; width: 1px; background: var(--vds-border-default);
}
html.vds body:is(.dark-theme, .light-theme) #vi-home .vi-pulse > .vi-kpi:hover { transform: none; border: 0; background: var(--vds-tint-faint); }
html.vds body:is(.dark-theme, .light-theme) #vi-home .vi-kpi-label { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 500; color: var(--vds-text-body); letter-spacing: 0; }
html.vds body:is(.dark-theme, .light-theme) #vi-home .vi-kpi[data-key] .vi-kpi-label::before {
  font-family: 'Font Awesome 6 Free'; font-weight: 900; font-size: 15px; width: 18px; text-align: center; color: var(--vds-kpi-icon);
}
html.vds body:is(.dark-theme, .light-theme) #vi-home .vi-kpi[data-key="revenue"] .vi-kpi-label::before { content: '\f080'; }
html.vds body:is(.dark-theme, .light-theme) #vi-home .vi-kpi[data-key="goal"] .vi-kpi-label::before { content: '\f140'; }
html.vds body:is(.dark-theme, .light-theme) #vi-home .vi-kpi[data-key="scheduled"] .vi-kpi-label::before { content: '\f073'; }
html.vds body:is(.dark-theme, .light-theme) #vi-home .vi-kpi[data-key="services"] .vi-kpi-label::before { content: '\f466'; }
html.vds body:is(.dark-theme, .light-theme) #vi-home .vi-kpi[data-key="ticket"] .vi-kpi-label::before { content: '\f02b'; }
html.vds body:is(.dark-theme, .light-theme) #vi-home .vi-kpi-value { font-size: 36px; font-weight: 650; letter-spacing: -.03em; margin: 14px 0 6px 28px; }
html.vds body:is(.dark-theme, .light-theme) #vi-home .vi-kpi-value small { font-size: 22px; font-weight: 500; color: var(--vds-text-body); }
html.vds body:is(.dark-theme, .light-theme) #vi-home .vi-kpi-period { font-size: 14px; color: var(--vds-text-secondary); margin-left: 28px; }
html.vds body:is(.dark-theme, .light-theme) #vi-home .vi-kpi-foot { padding-top: 16px; gap: 6px; }
html.vds body:is(.dark-theme, .light-theme) #vi-home .vi-cmp { font-size: 14px; color: var(--vds-text-secondary); }
html.vds body:is(.dark-theme, .light-theme) #vi-home .vi-cmp b { font-size: 15px; }
html.vds body:is(.dark-theme, .light-theme) #vi-home .vi-hint { font-size: 14px; color: var(--vds-text-secondary); line-height: 1.45; }
html.vds body:is(.dark-theme, .light-theme) #vi-home .vi-progress { height: 8px; background: var(--vds-track-soft); border-radius: var(--vds-radius-pill); margin: 12px 0 6px; }
html.vds body:is(.dark-theme, .light-theme) #vi-home .vi-progress > span { background: var(--vds-accent); border-radius: var(--vds-radius-pill); }
html.vds body:is(.dark-theme, .light-theme) #vi-home .vi-progress > i { background: var(--vds-text-secondary); }
/* Diagnóstico executivo: PROBLEMA → EVIDÊNCIAS → IMPACTO → RECOMENDAÇÃO → AÇÃO */
html.vds body:is(.dark-theme, .light-theme) #vi-home .vi-diag { padding: 28px 32px; border-radius: var(--vds-radius-xl); }
html.vds body:is(.dark-theme, .light-theme) #vi-home .vi-diag::before { display: none; }
html.vds body:is(.dark-theme, .light-theme) #vi-home .vi-diag-eyebrow { font-size: 12px; font-weight: 600; letter-spacing: .16em; color: var(--vds-text-secondary); }
html.vds body:is(.dark-theme, .light-theme) #vi-home .vi-diag-kicker { font-size: 16px; color: var(--vds-text-body); }
html.vds body:is(.dark-theme, .light-theme) #vi-home .vi-diag-area { font-size: 32px; font-weight: 600; letter-spacing: -.02em; }
html.vds body:is(.dark-theme, .light-theme) #vi-home .vi-diag-summary { font-size: 16px; color: var(--vds-text-body); }
html.vds body:is(.dark-theme, .light-theme) #vi-home .vi-diag-label { font-size: 12px; font-weight: 600; letter-spacing: .16em; color: var(--vds-text-secondary); }
html.vds body:is(.dark-theme, .light-theme) #vi-home .vi-diag-causes { gap: 12px; }
html.vds body:is(.dark-theme, .light-theme) #vi-home .vi-diag-causes li { padding-left: 40px; font-size: 15px; line-height: 28px; color: var(--vds-text-primary); }
html.vds body:is(.dark-theme, .light-theme) #vi-home .vi-diag-causes li::before {
  width: 28px; height: 28px; border-radius: 50%; background: var(--vds-surface-2);
  border: 1px solid var(--vds-border-strong); color: var(--vds-text-primary); box-shadow: none;
  font: 600 13px/26px var(--vds-font-sans); text-align: center;
}
html.vds body:is(.dark-theme, .light-theme) #vi-home .vi-diag-side { border-left-color: var(--vds-border-default); }
html.vds body:is(.dark-theme, .light-theme) #vi-home .vi-diag-impact { font-size: 32px; font-weight: 650; letter-spacing: -.02em; color: var(--vds-text-primary); font-variant-numeric: tabular-nums; }
html.vds body:is(.dark-theme, .light-theme) #vi-home .vi-diag-sub { color: var(--vds-text-secondary); font-size: 14px; }
html.vds body:is(.dark-theme, .light-theme) #vi-home .vi-diag-rec { font-size: 17px; font-weight: 600; color: var(--vds-text-primary); line-height: 1.45; }
html.vds body:is(.dark-theme, .light-theme) #vi-home .vi-prio,
html.vds body:is(.dark-theme, .light-theme) #vi-aya .vi-prio { height: 28px; display: inline-flex; align-items: center; padding: 0 12px; font-size: 13px; font-weight: 600; border-radius: var(--vds-radius-pill); color: var(--vds-text-secondary); border: 1px solid var(--vds-border-strong); vertical-align: middle; }
/* "Alta prioridade" é uso semântico legítimo do dourado */
html.vds body:is(.dark-theme, .light-theme) #vi-home .vi-prio-high,
html.vds body:is(.dark-theme, .light-theme) #vi-aya .vi-prio-high { color: var(--vds-prio-fg); border-color: var(--vds-prio-bd); background: var(--vds-prio-bg); }
html.vds body:is(.dark-theme, .light-theme) :is(#vi-home, #vi-aya) .vi-diag-cta {
  height: 48px; padding: 0 20px; gap: 12px; border-radius: var(--vds-radius-lg);
  background: var(--vds-accent); color: var(--vds-on-accent); font: 600 14px var(--vds-font-sans); box-shadow: none;
}
html.vds body:is(.dark-theme, .light-theme) :is(#vi-home, #vi-aya) .vi-diag-cta:hover { background: var(--vds-accent-hover); transform: none; }
html.vds body:is(.dark-theme, .light-theme) #vi-home .vi-diag-actions .vi-action {
  height: 48px; padding: 0 20px; gap: 12px; border-radius: var(--vds-radius-lg);
  border: 1px solid var(--vds-border-strong); background: var(--vds-surface-1); color: var(--vds-text-primary); font: 600 14px var(--vds-font-sans);
}
html.vds body:is(.dark-theme, .light-theme) #vi-home .vi-diag-actions .vi-action:hover { background: var(--vds-surface-hover); }
/* Demais blocos da Central */
html.vds body:is(.dark-theme, .light-theme) #vi-home :is(.vi-sec-title) { font-size: 18px; font-weight: 600; }
html.vds body:is(.dark-theme, .light-theme) #vi-home .vi-insight { box-shadow: none; }
html.vds body:is(.dark-theme, .light-theme) #vi-home .vi-insight::before { opacity: .9; }
html.vds body:is(.dark-theme, .light-theme) #vi-home .vi-insight:hover { border-color: var(--vds-border-strong); transform: none; }
html.vds body:is(.dark-theme, .light-theme) #vi-home .vi-impact { background: var(--vds-surface-2); border-color: var(--vds-border-subtle); border-radius: var(--vds-radius-lg); }
html.vds body:is(.dark-theme, .light-theme) #vi-home .vi-badge { border-radius: var(--vds-radius-sm); }
html.vds body:is(.dark-theme, .light-theme) #vi-home .vi-filter { border-radius: var(--vds-radius-md); }
html.vds body:is(.dark-theme, .light-theme) #vi-home .vi-filter.on { background: var(--vds-surface-selected); border-color: var(--vds-accent-bd); color: var(--vds-text-primary); }
html.vds body:is(.dark-theme, .light-theme) #vi-home .vi-sk { background: var(--vds-skel-a); }
html.vds body:is(.dark-theme, .light-theme) #vi-home .vi-stage-value { font-variant-numeric: tabular-nums; font-weight: 600; }
html.vds body:is(.dark-theme, .light-theme) #vi-aya { font-family: var(--vds-font-sans); }

/* ── 16. RESPONSIVO ───────────────────────────────────────────────────────── */
@media (max-width: 1366px) {
  html.vds body:is(.dark-theme, .light-theme) #vi-home .vi-pulse > .vi-kpi { padding: 20px 20px; }
  html.vds body:is(.dark-theme, .light-theme) #vi-home .vi-kpi-value { font-size: 30px; }
  html.vds body:is(.dark-theme, .light-theme) #vi-home .vi-kpi-value small { font-size: 18px; }
}
@media (max-width: 1180px) {
  /* a Central quebra a faixa em 2 colunas: divisores viram grade */
  html.vds body:is(.dark-theme, .light-theme) #vi-home .vi-pulse > .vi-kpi + .vi-kpi::before { display: none; }
  html.vds body:is(.dark-theme, .light-theme) #vi-home .vi-pulse > .vi-kpi { border-bottom: 1px solid var(--vds-border-subtle); }
  html.vds body:is(.dark-theme, .light-theme) #vi-home .vi-pulse > .vi-kpi:nth-child(even) { border-left: 1px solid var(--vds-border-subtle); }
  html.vds body:is(.dark-theme, .light-theme) .page { padding: 24px; }
}
@media (max-width: 900px) {
  html.vds body:is(.dark-theme, .light-theme) .topbar { padding: 0 16px; height: 56px; min-height: 56px; }
  html.vds body:is(.dark-theme, .light-theme) .user-chip { border-left: 0; padding-left: 4px; }
  html.vds body:is(.dark-theme, .light-theme) .user-chip::after { display: none; }
  html.vds body:is(.dark-theme, .light-theme) #vi-home .vi-diag { padding: 20px; }
  html.vds body:is(.dark-theme, .light-theme) #vi-home .vi-diag-area { font-size: 24px; }
}
@media (max-width: 600px) {
  html.vds body:is(.dark-theme, .light-theme) .page { padding: 16px; }
  html.vds body:is(.dark-theme, .light-theme) #vi-home .vi-pulse > .vi-kpi { padding: 16px; }
  html.vds body:is(.dark-theme, .light-theme) #vi-home .vi-pulse > .vi-kpi:nth-child(even) { border-left: 0; }
  html.vds body:is(.dark-theme, .light-theme) #vi-home .vi-kpi-value { font-size: 26px; margin-left: 0; }
  html.vds body:is(.dark-theme, .light-theme) #vi-home .vi-kpi-period { margin-left: 0; }
  html.vds body:is(.dark-theme, .light-theme) #vi-home .vi-hello { font-size: 26px; }
  html.vds body:is(.dark-theme, .light-theme) .pg-title { font-size: 22px; }
}

/* ── 17. VENCE OS !important DO BLOCO "NAVY GOLD" (fim do <style> do index.html) ──
   Lá há regras body.dark-theme … !important; aqui a especificidade é maior
   (html.vds + body.dark-theme), então !important contra !important vence. */
html.vds body:is(.dark-theme, .light-theme)::after { display: none !important; }          /* glow ambiente dourado */
html.vds body:is(.dark-theme, .light-theme) #sidebar { background: var(--vds-bg-sidebar) !important; border-right: 1px solid var(--vds-border-subtle) !important; }
html.vds body:is(.dark-theme, .light-theme) #topbar { background: var(--vds-bg-header) !important; border-bottom: 1px solid var(--vds-border-subtle) !important; }
html.vds body:is(.dark-theme, .light-theme) .logo-text { color: var(--vds-text-primary) !important; }
html.vds body:is(.dark-theme, .light-theme) .logo-sub { color: var(--vds-text-secondary) !important; }
html.vds body:is(.dark-theme, .light-theme) .nav-btn { color: var(--vds-text-secondary) !important; }
html.vds body:is(.dark-theme, .light-theme) .nav-btn .nav-ico { color: var(--vds-text-tertiary) !important; }
html.vds body:is(.dark-theme, .light-theme) .nav-btn:hover { color: var(--vds-text-primary) !important; background: var(--vds-nav-hover) !important; }
html.vds body:is(.dark-theme, .light-theme) .nav-btn:hover .nav-ico { color: var(--vds-text-secondary) !important; }
html.vds body:is(.dark-theme, .light-theme) .nav-btn.active,
html.vds body:is(.dark-theme, .light-theme) .nav-btn.active-page { color: var(--vds-nav-active-fg) !important; background: var(--vds-nav-active-bg) !important; }
html.vds body:is(.dark-theme, .light-theme) .nav-btn.active .nav-ico,
html.vds body:is(.dark-theme, .light-theme) .nav-btn.active-page .nav-ico { color: var(--vds-nav-active-fg) !important; }
html.vds body:is(.dark-theme, .light-theme) :is(.nav-section-title, .nav-group-label) { color: var(--vds-text-tertiary) !important; }
html.vds body:is(.dark-theme, .light-theme) .inp:focus { border-color: var(--vds-focus-border) !important; box-shadow: var(--vds-focus-ring) !important; }
html.vds body:is(.dark-theme, .light-theme) :is(.tag.b, .tag[class~="b"]) { background: var(--vds-info-bg) !important; color: var(--vds-info-fg) !important; border-color: var(--vds-info-bd) !important; }
html.vds body:is(.dark-theme, .light-theme) .tag.p { background: transparent !important; color: var(--vds-accent) !important; border-color: var(--vds-accent-bd) !important; }
html.vds body:is(.dark-theme, .light-theme) a { color: var(--vds-link); }
/* Dashboard clássico (painel detalhado) — KPI Mestre → superfície v2, ícone sem caixa */
html.vds body:is(.dark-theme, .light-theme) .dash-kpi { background: var(--vds-surface-1) !important; border: 1px solid var(--vds-border-default) !important; border-radius: var(--vds-radius-xl) !important; }
html.vds body:is(.dark-theme, .light-theme) .dash-kpi:hover { border-color: var(--vds-border-strong) !important; }
html.vds body:is(.dark-theme, .light-theme) .dash-kpi-ico { background: transparent !important; color: var(--vds-kpi-icon); width: 20px; height: 20px; top: 16px; right: 16px; }
html.vds body:is(.dark-theme, .light-theme) .dash-kpi-lbl { color: var(--vds-text-secondary) !important; font-size: 13px !important; }
html.vds body:is(.dark-theme, .light-theme) .dash-kpi-val { color: var(--vds-text-primary) !important; font-family: var(--vds-font-sans) !important; font-weight: 600 !important; letter-spacing: -.02em !important; font-variant-numeric: tabular-nums; }
html.vds body:is(.dark-theme, .light-theme) .dash-kpi-sub { color: var(--vds-text-secondary) !important; font-size: 12px !important; }
html.vds body:is(.dark-theme, .light-theme) .dash-kpi-bar { background: var(--vds-track-soft) !important; }
html.vds body:is(.dark-theme, .light-theme) #card-metas-mes { background: var(--vds-surface-1) !important; border: 1px solid var(--vds-border-default) !important; border-radius: var(--vds-radius-xl) !important; }
html.vds body:is(.dark-theme, .light-theme) #card-metas-mes .dash-section-ttl i { background: transparent; color: var(--vds-kpi-icon); width: 20px; }
html.vds body:is(.dark-theme, .light-theme) #card-metas-mes .dash-section-sub { color: var(--vds-text-secondary) !important; }
html.vds body:is(.dark-theme, .light-theme) #db-metas-content span[style*="font-size:20px"] { font-family: var(--vds-font-sans) !important; font-weight: 600 !important; color: var(--vds-text-primary) !important; }
html.vds body:is(.dark-theme, .light-theme) #db-metas-content div[style*="height:12px"],
html.vds body:is(.dark-theme, .light-theme) #db-metas-cc div[style*="height:6px"] { background: var(--vds-track-soft) !important; }
html.vds body:is(.dark-theme, .light-theme) #db-metas-content [style*="border-top"] { border-top-color: var(--vds-border-default) !important; }
/* Botão flutuante da IA (só p/ quem tem o gate) — sólido, sem anel pulsante */
html.vds body:is(.dark-theme, .light-theme) .ai-fab { background: var(--vds-accent); color: var(--vds-on-accent); box-shadow: var(--vds-shadow-fab); width: 52px; height: 52px; font-size: 20px; }
html.vds body:is(.dark-theme, .light-theme) .ai-fab:hover { transform: none; background: var(--vds-accent-hover); }
html.vds body:is(.dark-theme, .light-theme) .ai-fab .pulse-ring { display: none; }
html.vds body:is(.dark-theme, .light-theme) #mobile-menu-fab { background: var(--vds-surface-2); border-color: var(--vds-border-strong); box-shadow: var(--vds-shadow-fab-sm); }
html.vds body:is(.dark-theme, .light-theme) .ai-drawer-backdrop { background: var(--vds-overlay); }

/* ── 18. VENCE OS BLOCOS "PROBLEMA 1–5" (fim do <style>, todos !important) ───── */
/* Modal: surface 2, borda neutra, sem halo dourado; título sem gradiente */
html.vds body:is(.dark-theme, .light-theme) :is(.modal, .modal-content, .modal-box, #modal-agendar) {
  background: var(--vds-surface-2) !important; border: 1px solid var(--vds-border-default) !important;
  border-radius: var(--vds-radius-xl) !important; box-shadow: var(--vds-shadow-modal) !important;
}
html.vds body:is(.dark-theme, .light-theme) :is(.modal-title, #modal-agendar .modal-title) {
  font-family: var(--vds-font-sans) !important; font-weight: 600 !important; font-size: 18px !important; letter-spacing: -.01em !important;
  background: none !important; -webkit-background-clip: initial !important; background-clip: initial !important; color: var(--vds-text-primary) !important;
}
html.vds body:is(.dark-theme, .light-theme) :is(.modal-sub, #modal-agendar .modal-sub) { color: var(--vds-text-secondary) !important; margin-bottom: 20px !important; }
html.vds body:is(.dark-theme, .light-theme) :is(#modal-agendar, .modal-box) div[style*="text-transform:uppercase"] { color: var(--vds-text-secondary) !important; opacity: 1 !important; letter-spacing: .08em !important; }
html.vds body:is(.dark-theme, .light-theme) :is(.modal label, .modal .field-label, .modal .inp-lbl, .modal-box .inp-lbl) {
  font: 500 12px/1.3 var(--vds-font-sans) !important; letter-spacing: 0 !important; text-transform: none !important;
  color: var(--vds-text-secondary) !important; opacity: 1 !important;
}
html.vds body:is(.dark-theme, .light-theme) :is(.modal, .modal-box) :is(input, select, textarea),
html.vds body:is(.dark-theme, .light-theme) #modal-agendar .inp {
  background: var(--vds-surface-input) !important; border: 1px solid var(--vds-border-default) !important;
  border-radius: var(--vds-radius-md) !important; color: var(--vds-text-primary) !important; font-family: var(--vds-font-sans) !important;
}
html.vds body:is(.dark-theme, .light-theme) :is(.modal, .modal-box) :is(input, select, textarea):focus,
html.vds body:is(.dark-theme, .light-theme) #modal-agendar .inp:focus {
  border-color: var(--vds-focus-border) !important; box-shadow: var(--vds-focus-ring) !important; background: var(--vds-surface-input) !important;
}
html.vds body:is(.dark-theme, .light-theme) :is(.modal, .modal-box) :is(input, textarea)::placeholder { color: var(--vds-text-placeholder) !important; }
html.vds body:is(.dark-theme, .light-theme) :is(.modal .btn-add-small, .modal button.btn-small-gold, #modal-agendar .btn.outline.sm) {
  background: var(--vds-surface-1) !important; color: var(--vds-text-primary) !important; border: 1px solid var(--vds-border-strong) !important;
  text-transform: none !important; letter-spacing: 0 !important; font-weight: 500 !important; box-shadow: none !important; padding: 8px 12px !important;
}
html.vds body:is(.dark-theme, .light-theme) :is(.modal .btn-add-small, #modal-agendar .btn.outline.sm):hover { background: var(--vds-surface-hover) !important; box-shadow: none !important; transform: none; }
html.vds body:is(.dark-theme, .light-theme) .modal .section-divider-label { color: var(--vds-text-secondary); border-bottom-color: var(--vds-border-default); letter-spacing: .12em; }
html.vds body:is(.dark-theme, .light-theme) .modal .empty-state-msg { background: var(--vds-surface-1); border-color: var(--vds-border-strong); color: var(--vds-text-secondary); }
/* Tabelas: header neutro, hover discreto sem barra dourada */
html.vds body:is(.dark-theme, .light-theme) :is(.services-table, .tbl) thead { background: transparent !important; border-bottom: 1px solid var(--vds-border-default) !important; }
html.vds body:is(.dark-theme, .light-theme) :is(.services-table, .tbl) thead th {
  font: 500 11px/1.2 var(--vds-font-sans) !important; letter-spacing: .06em !important; text-transform: uppercase !important;
  color: var(--vds-text-tertiary) !important; padding: 10px 16px !important;
}
html.vds body:is(.dark-theme, .light-theme) :is(.services-table, .tbl) tbody tr { border-bottom: 1px solid var(--vds-border-subtle) !important; }
html.vds body:is(.dark-theme, .light-theme) :is(.services-table, .tbl) tbody tr:hover { background: var(--vds-tint-row) !important; box-shadow: none !important; }
html.vds body:is(.dark-theme, .light-theme) :is(.services-table .price-highlight, .services-table .profit-highlight, .services-table td.value-gold, .tbl td.value-gold) {
  font-family: var(--vds-font-sans) !important; font-weight: 600 !important; font-size: 14px !important;
  background: none !important; -webkit-background-clip: initial !important; background-clip: initial !important; color: var(--vds-text-primary) !important; font-variant-numeric: tabular-nums;
}
html.vds body:is(.dark-theme, .light-theme) .margin-pill { font-family: var(--vds-font-sans); font-weight: 600; border-radius: var(--vds-radius-sm); letter-spacing: 0; }
html.vds body:is(.dark-theme, .light-theme) .status-pill { border-radius: var(--vds-radius-sm); font-size: 11px; letter-spacing: .04em; font-weight: 600; }
/* Labels de KPI/cartão: neutros (o dourado não é cor de rótulo) */
html.vds body:is(.dark-theme, .light-theme) :is(.kpi-label, .card-label, .section-eyebrow, .field-eyebrow, .metric-lbl) {
  font-family: var(--vds-font-sans) !important; font-size: 12px !important; font-weight: 500 !important;
  letter-spacing: .02em !important; text-transform: none !important; color: var(--vds-text-secondary) !important;
}
html.vds body:is(.dark-theme, .light-theme) :is(.section-eyebrow, .field-eyebrow) { font-size: 11px !important; letter-spacing: .14em !important; text-transform: uppercase !important; }
html.vds body:is(.dark-theme, .light-theme) :is(.metric-sub, .kpi-subtitle, .kpi-description, .card-subtitle, .card-description, .kpi p:last-child) {
  color: var(--vds-text-secondary) !important; font-family: var(--vds-font-sans) !important; opacity: 1 !important;
}
/* Calendário */
html.vds body:is(.dark-theme, .light-theme) :is(.calendar-weekday, .calendar-weekday-label, .day-header-name, .weekday-name) { color: var(--vds-text-tertiary) !important; font-family: var(--vds-font-sans); letter-spacing: .08em; }
html.vds body:is(.dark-theme, .light-theme) :is(.calendar-weekday, .calendar-weekday-label, .day-header-name, .weekday-name).today { color: var(--vds-accent) !important; text-shadow: none; }
/* Abas "inline" do legado (OS, Financeiro…): o JS pinta a ativa com
   border-bottom + color var(--accent2). Texto vira primary; o dourado fica só no indicador. */
html.vds body:is(.dark-theme, .light-theme) button[style*="border-bottom"][style*="solid var(--accent2)"] { color: var(--vds-text-primary) !important; font-weight: 600 !important; }
html.vds body:is(.dark-theme, .light-theme) button[style*="border-bottom"][style*="solid transparent"] { font-weight: 500 !important; }

/* ── 19. AGENDA — KPIs de status: número neutro, status só no indicador ─────── */
html.vds body:is(.dark-theme, .light-theme) #page-agenda .ag-kpi { background: var(--vds-surface-1); border-color: var(--vds-border-default); border-radius: var(--vds-radius-xl); }
html.vds body:is(.dark-theme, .light-theme) #page-agenda .ag-kpi:hover { transform: none; box-shadow: none; border-color: var(--vds-border-strong); }
html.vds body:is(.dark-theme, .light-theme) #page-agenda .ag-kpi::before { width: 2px; top: 16px; bottom: 16px; border-radius: 0 2px 2px 0; }
html.vds body:is(.dark-theme, .light-theme) #page-agenda .ag-kpi .klbl { font-size: 12px; font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--vds-text-secondary); }
/* ícone-emoji → ponto de status (emoji não é ícone estrutural) */
html.vds body:is(.dark-theme, .light-theme) #page-agenda .ag-kpi .kico { width: 8px; height: 8px; border-radius: 50%; font-size: 0; background: var(--kc); overflow: hidden; }
html.vds body:is(.dark-theme, .light-theme) #page-agenda .ag-kpi .kval { font-weight: 600; font-size: 24px; color: var(--vds-text-primary); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
html.vds body:is(.dark-theme, .light-theme) #page-agenda .ag-kpi .ksub { color: var(--vds-text-secondary); font-size: 12px; }

/* ═══════════════════════════════════════════════════════════════════════════
   ONDA 2 — POLIMENTO / CONSISTÊNCIA (25/09/2026)
   Regras de RAIZ primeiro (valem para toda tela), exceções locais depois.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 20. MetricGroup automático: KPIs correlacionados = UM container com divisores ──
   Qualquer grade cujos filhos diretos sejam ≥3 KPIs vira faixa executiva. Divisores por
   box-shadow (o container recorta as bordas externas) → funciona também quando a grade quebra
   em 2 colunas no mobile. */
html.vds body:is(.dark-theme, .light-theme) :is(.g3, .g4, .g5):has(> .metric:nth-child(3)),
html.vds body:is(.dark-theme, .light-theme) #page-fidelizacao .g4:has(> .card:nth-child(3)),
html.vds body:is(.dark-theme, .light-theme) #ag-status-dashboard,
html.vds body:is(.dark-theme, .light-theme) .team-kpis {
  gap: 0 !important; background: var(--vds-surface-1); border: 1px solid var(--vds-border-default);
  border-radius: var(--vds-radius-xl); overflow: hidden;
}
html.vds body:is(.dark-theme, .light-theme) :is(.g3, .g4, .g5):has(> .metric:nth-child(3)) > .metric,
html.vds body:is(.dark-theme, .light-theme) #page-fidelizacao .g4:has(> .card:nth-child(3)) > .card,
html.vds body:is(.dark-theme, .light-theme) #ag-status-dashboard > .ag-kpi,
html.vds body:is(.dark-theme, .light-theme) .team-kpis > .team-kpi {
  background: transparent !important; border: 0 !important; border-radius: 0 !important; margin: 0 !important;
  box-shadow: -1px 0 0 0 var(--vds-border-default), 0 -1px 0 0 var(--vds-border-default) !important;
  padding: 18px 20px !important; min-height: 0; transform: none !important;
}
html.vds body:is(.dark-theme, .light-theme) :is(.g3, .g4, .g5):has(> .metric:nth-child(3)) > .metric:hover,
html.vds body:is(.dark-theme, .light-theme) #ag-status-dashboard > .ag-kpi:hover { background: var(--vds-tint-faint) !important; }
/* número do KPI: neutro (cor decorativa sai; sucesso/perigo semânticos ficam) */
html.vds body:is(.dark-theme, .light-theme) :is(.metric-val.p, .metric-val.a, .metric-val.b),
html.vds body:is(.dark-theme, .light-theme) #dre-kpis .metric-val { color: var(--vds-text-primary) !important; }
html.vds body:is(.dark-theme, .light-theme) .metric-val { font-size: 26px; font-weight: 600; letter-spacing: -.02em; line-height: 1.15; }
html.vds body:is(.dark-theme, .light-theme) .metric-lbl { margin-bottom: 8px !important; }
/* Fidelização: rótulo em caixa-alta miúdo → label padrão; número neutro exceto "atrasados" (risco real) */
html.vds body:is(.dark-theme, .light-theme) #page-fidelizacao .g4 > .card { text-align: left !important; }
html.vds body:is(.dark-theme, .light-theme) #page-fidelizacao .g4 > .card > div:first-child { font-size: 12px !important; letter-spacing: 0 !important; text-transform: none !important; color: var(--vds-text-secondary) !important; }
html.vds body:is(.dark-theme, .light-theme) #page-fidelizacao .g4 > .card:not(:first-child) > div:nth-child(2) { color: var(--vds-text-primary) !important; }
html.vds body:is(.dark-theme, .light-theme) .team-kpi-v { color: var(--vds-text-primary) !important; font-weight: 600; font-variant-numeric: tabular-nums; }
html.vds body:is(.dark-theme, .light-theme) .team-kpi-l { letter-spacing: .02em; text-transform: none; font-size: 12px; color: var(--vds-text-secondary); }

/* ── 21. Controles: MESMAS alturas/raios/tipos nos 3 módulos ─────────────────── */
html.vds body:is(.dark-theme, .light-theme) .btn { min-height: var(--vds-h-md); font-size: 13px; }
html.vds body:is(.dark-theme, .light-theme) .btn.sm { min-height: var(--vds-h-sm); padding: 6px 12px; font-size: 12px !important; }
html.vds body:is(.dark-theme, .light-theme) .btn:not(.outline):not(.ghost) { font-weight: 600 !important; }
html.vds body:is(.dark-theme, .light-theme) .btn:focus-visible { outline: none; box-shadow: var(--vds-focus-ring) !important; }
html.vds body:is(.dark-theme, .light-theme) .btn[aria-busy="true"], html.vds body:is(.dark-theme, .light-theme) .btn.loading { opacity: .75; cursor: progress; }
/* outline colorido "por estética" (roxo #9F7AEA etc.) → secundário padrão */
html.vds body:is(.dark-theme, .light-theme) .btn.outline:is([style*="#9F7AEA"], [style*="159,122,234"], [style*="var(--accent2)"], [style*="var(--blue)"]) {
  color: var(--vds-text-primary) !important; border-color: var(--vds-border-strong) !important; background: var(--vds-surface-1) !important;
}
/* perigo inline (#d32f2f / #c62828 / rgba(232,96,74)) → token de perigo */
html.vds body:is(.dark-theme, .light-theme) :is([style*="#d32f2f"], [style*="#c62828"]):not(div):not([style*="background:#d32f2f"]):not([style*="background:#c62828"]) { color: var(--vds-danger) !important; border-color: var(--vds-danger-bd) !important; border-radius: var(--vds-radius-md) !important; }
html.vds body:is(.dark-theme, .light-theme) div[style*="#c62828"] { color: var(--vds-danger) !important; }
html.vds body:is(.dark-theme, .light-theme) div[style*="rgba(211,47,47,.05)"] { background: var(--vds-danger-bg) !important; border-color: var(--vds-danger-bd) !important; }
html.vds body:is(.dark-theme, .light-theme) .btn.outline[style*="var(--red)"] { background: var(--vds-danger-bg) !important; border-color: var(--vds-danger-bd) !important; }
html.vds body:is(.dark-theme, .light-theme) .inp, html.vds body:is(.dark-theme, .light-theme) select.inp { min-height: var(--vds-h-md); font-size: 14px; }
/* filtros de barra de ferramentas (font-size:12px inline) = versão compacta */
html.vds body:is(.dark-theme, .light-theme) :is(.inp[style*="font-size:12px"], select.inp[style*="font-size:12px"]) { min-height: var(--vds-h-sm); height: var(--vds-h-sm); font-size: 13px !important; }
html.vds body:is(.dark-theme, .light-theme) select.inp { border-radius: var(--vds-radius-md) !important; font-weight: 400 !important; }

/* ── 22. Raios "arbitrários" em estilo inline (14/16/18/20px em containers) → 12 ── */
html.vds body:is(.dark-theme, .light-theme) #content-area :is(div, section)[style*="border-radius:14px"],
html.vds body:is(.dark-theme, .light-theme) #content-area :is(div, section)[style*="border-radius: 14px"],
html.vds body:is(.dark-theme, .light-theme) #content-area :is(div, section)[style*="border-radius:16px"],
html.vds body:is(.dark-theme, .light-theme) #content-area :is(div, section)[style*="border-radius: 16px"],
html.vds body:is(.dark-theme, .light-theme) #content-area :is(div, section)[style*="border-radius:18px"],
html.vds body:is(.dark-theme, .light-theme) #content-area :is(div, section)[style*="border-radius:20px"]:not([style*="height:"]) { border-radius: var(--vds-radius-xl) !important; }

/* ── 23. Abas: ativa = texto primary + indicador dourado; nunca texto dourado ─── */
html.vds body:is(.dark-theme, .light-theme) .team-tab { color: var(--vds-text-tertiary) !important; font-weight: 500 !important; }
html.vds body:is(.dark-theme, .light-theme) .team-tab[style*="var(--accent"] ,
html.vds body:is(.dark-theme, .light-theme) .team-tab.active { color: var(--vds-text-primary) !important; }
html.vds body:is(.dark-theme, .light-theme) .team-tab span { color: inherit !important; }
html.vds body:is(.dark-theme, .light-theme) .team-tabs { border-bottom-width: 1px !important; border-bottom-color: var(--vds-border-default) !important; }
html.vds body:is(.dark-theme, .light-theme) button[style*="border-bottom"][style*="var(--accent2)"] span { color: inherit !important; }
html.vds body:is(.dark-theme, .light-theme) :is(#os-tab-lista, #os-tab-campo, [id^="fin-tab-"]) { min-height: 40px; }

/* ── 24. DRE: categoria não é cor — rótulos neutros; resultado (+/−) segue semântico ── */
html.vds body:is(.dark-theme, .light-theme) #page-dre div[style*="text-transform:uppercase"][style*="font-weight:700"] { color: var(--vds-text-secondary) !important; letter-spacing: .1em !important; font-weight: 600 !important; }
html.vds body:is(.dark-theme, .light-theme) #page-dre div[style*="background:var(--bg3)"] { background: var(--vds-surface-2) !important; }

/* ── 25. Resíduos de glow/gradiente ─────────────────────────────────────────── */
html.vds body:is(.dark-theme, .light-theme) .ai-drawer-header { background: var(--vds-surface-1) !important; border-bottom: 1px solid var(--vds-border-default) !important; }
html.vds body:is(.dark-theme, .light-theme) .ai-drawer { background: var(--vds-surface-1) !important; border-left: 1px solid var(--vds-border-default) !important; }
html.vds body:is(.dark-theme, .light-theme) .ag-cell.wknd { background: var(--vds-tint-faint) !important; }
html.vds body:is(.dark-theme, .light-theme) .ag-cell.today { box-shadow: inset 0 0 0 1px var(--vds-focus-border) !important; }
html.vds body:is(.dark-theme, .light-theme) .btn:is(.outline, .sm) { background-image: none !important; }
html.vds body:is(.dark-theme, .light-theme) .btn:not(.outline):not(.ghost) { background-image: none !important; box-shadow: none !important; }

/* ── 26. Estados vazios / carregamento: um padrão ───────────────────────────── */
html.vds body:is(.dark-theme, .light-theme) :is(.settings-empty, .notif-empty, .vi-empty) { color: var(--vds-text-secondary); font-size: 13px; border-radius: var(--vds-radius-xl); }
html.vds body:is(.dark-theme, .light-theme) .tbl td[colspan] { color: var(--vds-text-secondary) !important; font-size: 13px; padding: 32px 16px !important; text-align: center; }
html.vds body:is(.dark-theme, .light-theme) :is(.fa-spin, .fa-spinner, .fa-circle-notch) { color: var(--vds-text-tertiary); }
html.vds body:is(.dark-theme, .light-theme) div[style*="border-radius:50%"][style*="animation:spin"] { border-color: var(--vds-spinner-track) !important; border-top-color: var(--vds-accent) !important; }
html.vds body:is(.dark-theme, .light-theme) #page-dre span[style*="border"]:is([style*="var(--accent"], [style*="var(--amber)"]) { border-color: var(--vds-border-strong) !important; color: var(--vds-text-secondary) !important; }
/* Agenda: fim de semana não é erro — cabeçalho neutro */
html.vds body:is(.dark-theme, .light-theme) #page-agenda .ag-weekhead > div.wknd { color: var(--vds-text-tertiary) !important; }
html.vds body:is(.dark-theme, .light-theme) #page-agenda .ag-weekhead > div { letter-spacing: .08em; font-weight: 500; }

/* ═══ ONDA 3 — FIDELIDADE DE COR AO MOCKUP (25/09/2026) ══════════════════════
   Paleta medida pixel a pixel no mockup: canvas navy #060E17 com luz azul sutil no
   topo, superfícies #0D1824/#111E2C, bordas e divisores com tinta azul. */
html.vds body:is(.dark-theme, .light-theme) { background: var(--vds-canvas-light), var(--vds-bg-canvas) !important; background-attachment: fixed !important; }
html.vds body:is(.dark-theme, .light-theme) #vi-home .vi-progress { background: var(--vds-track) !important; }
html.vds body:is(.dark-theme, .light-theme) .dash-kpi-bar, html.vds body:is(.dark-theme, .light-theme) #db-metas-content div[style*="height:12px"] { background: var(--vds-track) !important; }
html.vds body:is(.dark-theme, .light-theme) #vi-home .vi-diag-causes li::before { background: var(--vds-surface-2); border-color: var(--vds-border-default); }
html.vds body:is(.dark-theme, .light-theme) .nav-pill, html.vds body:is(.dark-theme, .light-theme) .nav-badge { background: var(--vds-count-bg) !important; border-color: transparent !important; color: var(--vds-count-fg) !important; }

/* ═══ ONDA 4 — FIDELIDADE CROMÁTICA (25/09/2026) — só cor/contraste/profundidade ═══ */
/* header do shell translúcido sobre a luz do canvas (mockup: escuro nas bordas, claro no centro) */
html.vds body:is(.dark-theme, .light-theme) .topbar,
html.vds body:is(.dark-theme, .light-theme) #topbar { background: var(--vds-header-light), var(--vds-header-glass) !important; border-bottom-color: var(--vds-border-default) !important; }
html.vds body:is(.dark-theme, .light-theme) .notif-badge { border-color: var(--vds-bg-header); }
/* sidebar recua: um tom abaixo do canvas + linha fria visível (mockup #172431) */
html.vds body:is(.dark-theme, .light-theme) #sidebar { background: var(--vds-bg-sidebar) !important; border-right: 1px solid var(--vds-border-divider) !important; }
html.vds body:is(.dark-theme, .light-theme) .logo-wrap { border-bottom-color: var(--vds-border-default); }
/* painéis emergem: aresta superior mais clara (mockup), laterais frias discretas */
html.vds body:is(.dark-theme, .light-theme) :is(.card, #vi-home .vi-card, #vi-home .vi-pulse, .settings-panel, .settings-sidebar, .settings-section-card),
html.vds body:is(.dark-theme, .light-theme) :is(.g3, .g4, .g5):has(> .metric:nth-child(3)),
html.vds body:is(.dark-theme, .light-theme) :is(#ag-status-dashboard, .team-kpis) { border-top-color: var(--vds-border-top) !important; }
html.vds body:is(.dark-theme, .light-theme) #vi-home .vi-pulse > .vi-kpi { border-top-color: transparent !important; }
/* rótulos em caixa-alta com o cinza-azulado do mockup */
html.vds body:is(.dark-theme, .light-theme) :is(.nav-section-title, .nav-group-label) { color: var(--vds-text-label) !important; }
html.vds body:is(.dark-theme, .light-theme) #vi-home :is(.vi-eyebrow, .vi-diag-eyebrow, .vi-diag-label) { color: var(--vds-text-label); }
html.vds body:is(.dark-theme, .light-theme) .logo-tag { color: var(--vds-text-label); }

/* ═══ ONDA 5 — FIDELIDADE VISUAL FINAL (25/09/2026) ═══════════════════════════ */
/* painéis grandes: luz vertical sutil (mockup) sobre a cor da superfície */
html.vds body:is(.dark-theme, .light-theme) :is(.card, #vi-home .vi-card:not(.vi-kpi), #vi-home .vi-pulse, .settings-panel, .settings-section-card),
html.vds body:is(.dark-theme, .light-theme) :is(.g3, .g4, .g5):has(> .metric:nth-child(3)),
html.vds body:is(.dark-theme, .light-theme) :is(#ag-status-dashboard, .team-kpis) { background-image: var(--vds-panel-light) !important; }
/* cabeçalho no desenho do mockup: menu + busca à esquerda; ações à direita */
html.vds body:is(.dark-theme, .light-theme) .status-dot { display: none !important; }            /* decorativo; não existe no mockup */
html.vds body:is(.dark-theme, .light-theme) .topbar .topbar-left { gap: 20px; flex: 1; min-width: 0; }
html.vds body:is(.dark-theme, .light-theme) .vds-shell-menu {
  width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  border: 0; border-radius: var(--vds-radius-md); background: transparent; color: var(--vds-text-primary); font-size: 18px; cursor: pointer;
}
html.vds body:is(.dark-theme, .light-theme) .vds-shell-menu:hover { background: var(--vds-tint-hover); }
html.vds body:is(.dark-theme, .light-theme) .vds-shell-search { position: relative; width: min(380px, 38vw); flex-shrink: 1; }
html.vds body:is(.dark-theme, .light-theme) .vds-shell-search > i { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--vds-text-secondary); font-size: 14px; pointer-events: none; }
html.vds body:is(.dark-theme, .light-theme) .vds-shell-search input {
  width: 100%; height: 38px; padding: 0 40px 0 40px; border-radius: var(--vds-radius-md);
  background: var(--vds-shell-input); border: 1px solid var(--vds-border-default); color: var(--vds-text-primary);
  font: 400 14px var(--vds-font-sans); outline: none; box-shadow: none;
}
html.vds body:is(.dark-theme, .light-theme) .vds-shell-search input::placeholder { color: var(--vds-shell-placeholder); }
html.vds body:is(.dark-theme, .light-theme) .vds-shell-search input::-webkit-search-cancel-button { display: none; }
html.vds body:is(.dark-theme, .light-theme) .vds-shell-search input:focus { border-color: var(--vds-focus-border) !important; box-shadow: var(--vds-focus-ring) !important; }
html.vds body:is(.dark-theme, .light-theme) .vds-shell-search kbd {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%); min-width: 20px; height: 20px; padding: 0 5px;
  display: inline-flex; align-items: center; justify-content: center; border-radius: var(--vds-radius-xs);
  border: 1px solid var(--vds-border-default); color: var(--vds-text-tertiary); font: 500 11px var(--vds-font-sans); background: transparent;
}
html.vds body:is(.dark-theme, .light-theme) .vds-shell-search input:focus ~ kbd { display: none; }
html.vds body:is(.dark-theme, .light-theme) .vds-shell-list {
  position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 120; max-height: 380px; overflow: auto; padding: 6px;
  background: var(--vds-surface-2); border: 1px solid var(--vds-border-default); border-radius: var(--vds-radius-lg); box-shadow: var(--vds-shadow-pop);
}
html.vds body:is(.dark-theme, .light-theme) .vds-shell-sec { padding: 8px 10px 4px; font: 600 11px var(--vds-font-sans); letter-spacing: .12em; text-transform: uppercase; color: var(--vds-text-label); }
html.vds body:is(.dark-theme, .light-theme) .vds-shell-item {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 0; border-radius: var(--vds-radius-sm);
  background: transparent; color: var(--vds-text-body); font: 400 13px var(--vds-font-sans); text-align: left; cursor: pointer;
}
html.vds body:is(.dark-theme, .light-theme) .vds-shell-item i { width: 16px; text-align: center; color: var(--vds-text-tertiary); }
html.vds body:is(.dark-theme, .light-theme) .vds-shell-item small { margin-left: auto; color: var(--vds-text-tertiary); font-size: 12px; font-variant-numeric: tabular-nums; }
html.vds body:is(.dark-theme, .light-theme) .vds-shell-item:hover, html.vds body:is(.dark-theme, .light-theme) .vds-shell-item.is-active { background: var(--vds-surface-hover); color: var(--vds-text-primary); }
html.vds body:is(.dark-theme, .light-theme) .vds-shell-item.is-active i { color: var(--vds-accent); }
html.vds body:is(.dark-theme, .light-theme) .vds-shell-empty { padding: 14px 10px; color: var(--vds-text-secondary); font-size: 13px; }
/* menu recolhido pelo hambúrguer (só desktop; preferência do navegador) */
@media (min-width: 901px) { html.vds body:is(.dark-theme, .light-theme).vds-nav-collapsed #sidebar { display: none !important; } }
@media (max-width: 900px) { html.vds body:is(.dark-theme, .light-theme) :is(.vds-shell-menu, .vds-shell-search) { display: none !important; } }

/* ═══ TEMA CLARO OFICIAL (18/10/2026) — o que só existe no claro ══════════════
   Todo o adaptador acima vale nos dois temas (tokens trocam por tema em valiom-ds.css).
   Aqui ficam só os ajustes que não são troca de token. */
html.vds body.light-theme {
  --bg5: #F4F4F5; --green2: #15803D; --red2: #B91C1C; --blue2: #1D4ED8;
  --teal: #0F766E; --pink: #BE185D; --amber2: #B45309;
}
/* legado pinta "background:var(--accent2);color:#000" — no claro o acento é preto */
html.vds body.light-theme [style*="background:var(--accent2);color:#000"],
html.vds body.light-theme [style*="background:var(--accent2);color:#1A1410"],
html.vds body.light-theme [style*="background:var(--accent);color:#000"] { color: #FFFFFF !important; }
/* sidebar: separação suave do conteúdo; marca sem subtítulo */
html.vds body.light-theme #sidebar { border-right: 1px solid var(--vds-border-divider) !important; }
html.vds body.light-theme .logo-wrap { border-bottom-color: var(--vds-border-subtle); }
html.vds body.light-theme .nav-group-label,
html.vds body.light-theme .nav-section-title { color: var(--vds-text-tertiary) !important; }
html.vds body.light-theme .nav-btn { color: #2B2F33 !important; }
html.vds body.light-theme .nav-btn .nav-ico { color: #2B2F33 !important; opacity: .82; }
html.vds body.light-theme .nav-btn:is(.active, .active-page) .nav-ico { opacity: 1; }
html.vds body.light-theme .nav-btn.active-page::before {
  content: ''; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: var(--vds-accent);
}
/* topbar limpa: branca, borda inferior sutil, sem sombra */
html.vds body.light-theme :is(.topbar, #topbar) { box-shadow: none !important; border-bottom-color: var(--vds-border-default) !important; }
/* cards: branco, borda fina, sombra quase nula */
html.vds body.light-theme :is(.card, .metric, #vi-home .vi-card, #vi-home .vi-pulse, .dash-kpi, #card-metas-mes, .settings-panel, .settings-section-card) { box-shadow: 0 1px 2px rgba(17, 17, 17, .03) !important; }
html.vds body.light-theme :is(.g3, .g4, .g5):has(> .metric:nth-child(3)) > .metric { box-shadow: -1px 0 0 0 var(--vds-border-default), 0 -1px 0 0 var(--vds-border-default) !important; }
/* tabelas: cabeçalho suave */
html.vds body.light-theme :is(.services-table, .tbl) thead { background: var(--vds-surface-2) !important; }
/* inputs: foco escuro, halo quase invisível */
html.vds body.light-theme :is(.inp, input, select, textarea):hover:not(:focus):not(:disabled) { border-color: var(--vds-border-strong); }
/* scrollbar clara */
html.vds body.light-theme, html.vds body.light-theme * { scrollbar-color: var(--vds-scroll-thumb) transparent; }
/* PRIMARY: a regra legada do :root (.btn:not(...)×5 { color:#000 }) tem especificidade maior;
   no claro o acento é preto → força o texto branco (verde/vermelho semânticos ficam de fora) */
html.vds body.light-theme .btn:not(.outline):not(.ghost):not(.green):not(.red):not([style*="green"]):not([style*="red"]):not([style*="#00875"]) { color: var(--vds-on-accent) !important; }
/* drawer da IA fechado (fora da tela) não vaza sombra na borda direita */
html.vds body.light-theme .ai-drawer { box-shadow: none; }
html.vds body.light-theme .ai-drawer.visible { box-shadow: var(--vds-shadow-drawer); }
/* CTA legado com gradiente do acento + texto escuro inline → acento sólido, texto claro */
html.vds body.light-theme [style*="gradient"][style*="var(--accent"][style*="color:#1A1410"] { background: var(--vds-accent) !important; color: var(--vds-on-accent) !important; }
/* Tapetes: cartões de indicador brancos; status só no filete lateral, número neutro */
html.vds body.light-theme #tap-kpis > div { background: var(--vds-surface-1) !important; border-top-color: var(--vds-border-default) !important; border-right-color: var(--vds-border-default) !important; border-bottom-color: var(--vds-border-default) !important; border-radius: var(--vds-radius-xl) !important; }
html.vds body.light-theme #tap-kpis > div > div:first-child { background: var(--vds-surface-3) !important; }
html.vds body.light-theme #tap-kpis > div > div:nth-child(2) > div:first-child { color: var(--vds-text-primary) !important; font-family: var(--vds-font-sans) !important; font-weight: 600 !important; }
html.vds body.light-theme #tap-kpis > div > div:nth-child(2) > div:nth-child(2) { color: var(--vds-text-secondary); opacity: 1 !important; letter-spacing: .06em !important; }
/* Trial / WOW / Upgrade: texto #0b0f19 cravado sobre var(--accent2) → no claro o acento é preto */
html.vds body.light-theme :is(.vtr-cta, .vtr-demo-tag, .vtr-aya-av, .vtr-chip.ex, .vwow-ex, .vwow-cta, .vwow-aya-av, .vup-cta) { color: var(--vds-on-accent) !important; }
html.vds body.light-theme .vwow-aya-av { background: var(--vds-accent); }
html.vds body.light-theme .vwow-chips input:checked + span,
html.vds body.light-theme .vwow-linha li.on { background: var(--vds-surface-selected); }
html.vds body.light-theme .nav-btn.vwow-nav-atual::after { box-shadow: 0 0 0 4px var(--vds-accent-bd-weak); }
html.vds body.light-theme .vwow-alvo { box-shadow: 0 0 0 9999px rgba(17, 17, 17, .28) !important; }
html.vds body.light-theme .vwow-guia { box-shadow: var(--vds-shadow-pop); }
html.vds body.light-theme .vtr-fn i { background: var(--vds-accent); }
/* 18/10 (Lucas): no claro a LOGO é preta — PNG transparente → silhueta preta, sem amarelo */
html.vds body.light-theme :is(img.logo-light, #valiom-logo-wrap img, #modal-welcome img.logo-light) { filter: brightness(0) !important; }
/* 18/10 (Lucas): ZERO amarelo no claro — resíduos legados (folhas e estilo inline) → preto/neutro.
   "Atenção" funcional continua laranja (#D97706, token --vds-warning). */
html.vds body.light-theme #vi-home .vi-badge.gold { color: var(--vds-text-primary); border-color: var(--vds-border-strong); }
html.vds body.light-theme .team-filter-chip.active { background: var(--vds-surface-selected); border-color: var(--vds-border-strong); color: var(--vds-text-primary); }
html.vds body.light-theme :is(.cfcc-aviso, .notif-pill.today) { background: var(--vds-warning-bg) !important; border-color: var(--vds-warning-bd) !important; }
html.vds body.light-theme .notif-pill.today { color: var(--vds-warning-fg) !important; }
html.vds body.light-theme [style*="background:rgba(240,180,41"] { background: var(--vds-warning-bg) !important; }
html.vds body.light-theme :is([style*="border:1px solid rgba(240,180,41"], [style*="border-color:rgba(240,180,41"]) { border-color: var(--vds-warning-bd) !important; }
html.vds body.light-theme :is([style*="rgba(212,168,67"], [style*="rgba(235,200,63"], [style*="rgba(201,162,39"]) { border-color: var(--vds-border-strong) !important; }
html.vds body.light-theme :is([style*="background:rgba(212,168,67"], [style*="background:rgba(235,200,63"], [style*="background:rgba(201,162,39"]) { background: var(--vds-surface-selected) !important; }
/* categoria não é cor: "Impostos" (#f0b429) e dourados legados inline → neutro */
html.vds body.light-theme :not([id^="cfg-brand-preview"]):is([style*="color:#f0b429"], [style*="color:#F0B429"], [style*="color:#EBC83F"], [style*="color:#ebc83f"], [style*="color:#d4a843"], [style*="color:#C9A227"], [style*="color:#c9a227"], [style*="color:#E8C547"], [style*="color:#FBBF24"], [style*="color:#fbbf24"]) { color: var(--vds-text-primary) !important; }
html.vds body.light-theme :not([id^="cfg-brand-preview"]):is([style*="#f0b429"], [style*="#F0B429"], [style*="#EBC83F"], [style*="#ebc83f"], [style*="#d4a843"], [style*="#C9A227"], [style*="#c9a227"], [style*="#E8C547"]):not([style*="border:none"]):not([style*="border:0"]) { border-color: var(--vds-border-strong) !important; }
html.vds body.light-theme :is([style*="background:#f0b429"], [style*="background:#EBC83F"], [style*="background:#d4a843"], [style*="background:#C9A227"]):not([id^="cfg-brand-preview"]):not([id^="cfg-brand-preview"] *) { background: var(--vds-accent) !important; color: var(--vds-on-accent) !important; }
html.vds body.light-theme :is([style*="#F59E0B"], [style*="#f59e0b"]):is(i, span, svg) { color: var(--vds-warning) !important; }
/* toggle de tema: polegar preto, sem gradiente dourado */
html.vds body.light-theme .theme-toggle-btn .tt-thumb { background: var(--vds-accent) !important; }
/* (a prévia "Cor dos documentos" em Configurações é DADO da empresa e fica com a cor escolhida) */
/* estilos gravados via JS (style.cssText) chegam serializados em rgb() */
html.vds body.light-theme :is([style*="solid rgb(240, 180, 41)"], [style*="solid rgb(235, 200, 63)"], [style*="solid rgb(212, 168, 67)"], [style*="solid rgb(201, 162, 39)"], [style*="solid rgb(251, 191, 36)"]) { border-color: var(--vds-accent) !important; }
html.vds body.light-theme :is([style*="color: rgb(240, 180, 41)"], [style*="color: rgb(235, 200, 63)"], [style*="color: rgb(212, 168, 67)"], [style*="color: rgb(201, 162, 39)"], [style*="color: rgb(251, 191, 36)"]):not([style*="background-color: rgb"]) { color: var(--vds-text-primary) !important; }
/* categoria não é cor: rótulos de grupo de custo (azul/laranja/lilás claros somem no branco) → neutro */
html.vds body.light-theme #page-custosvariaveis :is([style*="color:#5ab4ff"], [style*="color:#f97316"], [style*="color:#40d0c0"], [style*="color:#a89dff"], [style*="color:#e8604a"], [style*="color: rgb(90, 180, 255)"], [style*="color: rgb(249, 115, 22)"], [style*="color: rgb(64, 208, 192)"], [style*="color: rgb(168, 157, 255)"], [style*="color: rgb(232, 96, 74)"]) { color: var(--vds-text-secondary) !important; }
html.vds body.light-theme :is(.rev-k-v.pos) { color: var(--vds-success-fg) !important; }
html.vds body.light-theme :is(.rev-k-v.neg) { color: var(--vds-danger-fg) !important; }
/* (18/10/2026, correção preto-no-preto) letra/fundo de botões legados sobre o acento.
   O código usa var(--on-accent, <cor original>) e var(--lx-accent, <dourado original>): só o CLARO define
   estas variáveis — no escuro elas não existem e cada ponto continua com o valor original. */
html.vds body.light-theme { --on-accent: #FFFFFF; --lx-accent: #111111; }
/* botão de perigo sólido (fundo #d32f2f): ícone acompanha o texto branco (antes amarelo sobre vermelho) */
html.vds body:is(.dark-theme, .light-theme) button:is([style*="background:#d32f2f"], [style*="background:#c62828"]) i { color: currentColor !important; }