/* ─────────────────────────────────────────────────────────────────
   Constelação Design System v1
   Identidade: chrome escuro espacial + miolo claro pra leitura confortável
   Aplica-se via wrappers .chrome (topo escuro) e .content (miolo claro).
   Os componentes existentes (.metric-card, .meu-card, .pill-filter, etc)
   recebem variantes via descendência pra não quebrar lógica JS.
   ───────────────────────────────────────────────────────────────── */


/* ─── Chrome (topo escuro espacial) ─────────────────────────── */

.chrome {
  background: linear-gradient(180deg, var(--color-bg-deep) 0%, var(--color-bg-deeper) 100%);
  border-bottom: 1px solid var(--color-border-soft);
  position: relative;
  overflow: hidden;
  /* Full-bleed dentro da .main (que tem padding 32px lateral) */
  margin: 0 -32px 18px;
  padding: 20px 32px 24px;
  /* Isola repaint/layout do chrome do resto da página — animação do starfield
     não força reflow nem repaint dos elementos abaixo. */
  contain: layout paint;
}
.chrome::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(800px circle at 15% 20%, rgba(167,139,250,0.15), transparent 50%),
    radial-gradient(600px circle at 85% 80%, rgba(34,211,238,0.08), transparent 50%);
}
.chrome::after {
  content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--color-accent-purple-light), transparent);
  opacity: 0.4;
}
.chrome > * { position: relative; z-index: 2; }

/* ─── Starfield estático no chrome (versão LEVE) ──────────────
   Antes: 2 layers em movimento parallax + 6 estrelas piscando = animações infinitas
   rodando sempre, mesmo com chrome fora da view. Agora: 1 layer estática densa.
   Visual: estrelas espalhadas em cores (dourado/roxo/ciano/branco). Custo: zero
   pintura por frame após carregamento inicial. */

.chrome-stars {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
}

.chrome-stars::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(0.8px 0.8px at 5%  50%, rgba(255,255,255,0.85), transparent 55%),
    radial-gradient(0.8px 0.8px at 13% 20%, rgba(255,255,255,0.9),  transparent 55%),
    radial-gradient(1px 1px at 18% 75%, var(--color-accent-gold-light), transparent 60%),
    radial-gradient(0.7px 0.7px at 27% 35%, rgba(255,255,255,0.7),  transparent 55%),
    radial-gradient(1.2px 1.2px at 33% 8%,  rgba(255,255,255,0.8),  transparent 60%),
    radial-gradient(0.8px 0.8px at 38% 60%, var(--color-accent-purple-light), transparent 60%),
    radial-gradient(0.7px 0.7px at 45% 90%, rgba(255,255,255,0.65), transparent 55%),
    radial-gradient(1px 1px at 52% 28%, var(--color-accent-cyan-light), transparent 60%),
    radial-gradient(0.8px 0.8px at 58% 70%, rgba(255,255,255,0.75), transparent 55%),
    radial-gradient(1.1px 1.1px at 65% 18%, var(--color-accent-gold-light), transparent 60%),
    radial-gradient(0.7px 0.7px at 71% 55%, rgba(255,255,255,0.7), transparent 55%),
    radial-gradient(0.8px 0.8px at 78% 88%, var(--color-accent-purple-light), transparent 60%),
    radial-gradient(0.9px 0.9px at 84% 35%, rgba(255,255,255,0.8), transparent 55%),
    radial-gradient(1px 1px at 90% 72%, var(--color-accent-cyan-light), transparent 60%),
    radial-gradient(0.7px 0.7px at 95% 22%, rgba(255,255,255,0.7), transparent 55%);
  /* Sem animation — starfield estático. */
}

/* Estrelas brilhantes em primeiro plano (.chrome-star do HTML) — opcional,
   mantém piscando suavemente porque são poucos elementos (6 por página). */
.chrome-star {
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,0.95);
  box-shadow: 0 0 3px rgba(255,255,255,0.6);
  animation: c-twinkle 4s infinite ease-in-out;
  z-index: 2;
}
.chrome-star.purple { background: var(--color-accent-purple-light); box-shadow: 0 0 4px var(--glow-purple); }
.chrome-star.cyan   { background: var(--color-accent-cyan-light);     box-shadow: 0 0 3px var(--glow-cyan); }

@keyframes c-twinkle {
  0%, 100% { opacity: 0.5;  transform: scale(1); }
  50%      { opacity: 1;    transform: scale(1.2); }
}

/* AJUSTE 1 — Linha de constelação cruzando o chrome (decoração da marca) */
.chrome-constellation {
  position: absolute; left: 0; right: 0; top: 50%;
  height: 1px; pointer-events: none; z-index: 1; opacity: 0.55;
}
.chrome-constellation svg { width: 100%; height: 60px; transform: translateY(-50%); display: block; }
.chrome-constellation .line { stroke: var(--color-accent-purple-light); stroke-width: 1; opacity: 0.4; }
.chrome-constellation .node {
  fill: var(--color-accent-gold-light);
  filter: drop-shadow(0 0 6px var(--glow-gold));
  animation: c-twinkle 4s infinite ease-in-out;
}
.chrome-constellation .node.purple { fill: var(--color-accent-purple-light); filter: drop-shadow(0 0 6px var(--glow-purple)); }
.chrome-constellation .node.cyan   { fill: var(--color-accent-cyan-light);     filter: drop-shadow(0 0 6px var(--glow-cyan)); }

/* ─── Header dentro do chrome ────────────────────────────────── */

.chrome .pageheader {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  margin-bottom: 18px;
}
.chrome .pageheader h1 {
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic; font-size: 28px; font-weight: 400;
  background: linear-gradient(135deg, #fff 0%, var(--color-accent-purple-light) 60%, var(--color-accent-gold-light) 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  letter-spacing: 0.3px; line-height: 1.2;
}
.chrome .pageheader h1 .marca-mini {
  display: inline-block; width: 6px; height: 6px;
  background: var(--color-accent-gold-light); border-radius: 50%;
  box-shadow: 0 0 8px var(--glow-gold);
  vertical-align: middle; margin: 0 8px;
}
.chrome .pageheader h1 .subtitle {
  font-style: normal; font-size: 13px; color: var(--color-text-muted);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-text-fill-color: var(--color-text-muted);
  font-weight: 500;
}
.chrome .pageheader .header-sub {
  font-size: 12px; color: var(--color-text-faint); margin-top: 4px;
}
.chrome .pageheader .actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* Hero status pill — substitui header-sub flat por pill com dot pulsante */
.chrome .pageheader .hero-status {
  display: inline-flex; align-items: center; gap: 7px;
  margin-top: 8px;
  padding: 4px 11px 4px 9px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--color-border-soft);
  border-radius: 999px;
  font-size: 11px; color: var(--color-text-muted);
  font-weight: 500; letter-spacing: 0.2px;
  transition: border-color 0.2s, background 0.2s;
}
.chrome .pageheader .hero-status:hover {
  border-color: var(--color-border-base);
  background: rgba(255,255,255,0.06);
}
.chrome .pageheader .hero-status-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: #6EE7B7;
  box-shadow: 0 0 8px rgba(110,231,183,0.55);
  animation: hero-status-pulse 2.4s ease-in-out infinite;
  flex-shrink: 0;
}
.chrome .pageheader .hero-status.amber .hero-status-dot {
  background: #FCD34D; box-shadow: 0 0 8px rgba(252,211,77,0.55);
}
.chrome .pageheader .hero-status.red .hero-status-dot {
  background: #FCA5A5; box-shadow: 0 0 8px rgba(252,165,165,0.55);
}
@keyframes hero-status-pulse {
  0%, 100% { opacity: 0.6; transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.2); }
}

/* Date anchor no page-label */
.chrome .page-label .page-label-sep { opacity: 0.4; margin: 0 4px; }
.chrome .page-label .page-label-date {
  color: var(--color-text-faint);
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0.2px;
}

/* ─── Botões no chrome (versão escura) ───────────────────────── */

.chrome .btn-chrome-primary {
  background: linear-gradient(135deg, var(--color-accent-purple) 0%, var(--color-accent-purple-light) 100%);
  color: #fff; border: none;
  padding: 10px 16px; font-size: 12px; font-weight: 600;
  border-radius: 7px; cursor: pointer; font-family: inherit;
  box-shadow: 0 4px 14px rgba(124,58,237,0.4);
  transition: all 0.2s;
}
.chrome .btn-chrome-primary:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(124,58,237,0.55); }
.chrome .btn-chrome-primary:disabled { opacity: 0.5; cursor: wait; transform: none; }

.chrome .btn-chrome-secondary {
  background: rgba(255,255,255,0.06);
  color: var(--color-text-bright);
  border: 1px solid var(--color-border-base);
  padding: 9px 14px; font-size: 12px; font-weight: 500;
  border-radius: 7px; cursor: pointer; font-family: inherit;
  /* backdrop-filter removido — custava re-blur a cada scroll em todos os botões */
  transition: all 0.2s;
}
.chrome .btn-chrome-secondary:hover {
  background: rgba(167,139,250,0.12);
  border-color: var(--color-accent-purple-light);
}

/* ─── Scoreboard dentro do chrome (override do tema claro) ──── */

.chrome .scoreboard { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 12px; }
.chrome .scoreboard:last-child { margin-bottom: 0; }
.chrome .scoreboard .metric-card {
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--color-border-soft);
  border-radius: 10px; padding: 14px 16px;
  /* backdrop-filter removido — pesado em listas com 4-8 cards rebakeando ao scroll */
  transition: border-color 0.2s, transform 0.2s;
}
.chrome .scoreboard .metric-card:hover { border-color: var(--color-border-base); transform: translateY(-1px); }
.chrome .scoreboard .metric-label {
  font-size: 9px; text-transform: uppercase; letter-spacing: 1px;
  color: var(--color-text-muted); font-weight: 600; margin-bottom: 6px;
}
.chrome .scoreboard .metric-value { color: var(--color-text-bright); font-size: 24px; font-weight: 700; line-height: 1; }
.chrome .scoreboard .metric-value.green  { color: #6EE7B7; text-shadow: 0 0 12px rgba(110,231,183,0.4); }
.chrome .scoreboard .metric-value.amber  { color: #FCD34D; text-shadow: 0 0 12px rgba(252,211,77,0.4); }
.chrome .scoreboard .metric-value.red    { color: #FCA5A5; text-shadow: 0 0 12px rgba(252,165,165,0.4); }
.chrome .scoreboard .metric-value.blue   { color: #93C5FD; text-shadow: 0 0 12px rgba(147,197,253,0.4); }
.chrome .scoreboard .metric-value.purple { color: var(--color-accent-purple-light); text-shadow: 0 0 12px var(--glow-purple); }
.chrome .scoreboard .metric-value.gold   { color: var(--color-accent-gold-light); text-shadow: 0 0 14px rgba(252,211,77,0.5); }
.chrome .scoreboard .metric-sub { color: var(--color-text-faint); font-size: 10px; margin-top: 4px; }

/* Override pra labels/toggles que vão dentro do chrome */
.chrome .toggle-llm,
.chrome .page-label { color: var(--color-text-muted) !important; }
.chrome .page-label::before { background: var(--color-accent-purple-light) !important; }
.chrome .progress-wrap {
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--color-border-soft);
  color: var(--color-text-bright);
}
.chrome .progress-wrap strong { color: var(--color-text-bright); }
.chrome .progress-bar { background: rgba(255,255,255,0.08); }

/* Filtros dentro do chrome (vendas .vfp, financeiro/promocoes .filter-pill,
   campanhas .period-pill, relatorios .ra-pill/.rf-pill, index .pp): tema escuro */
.chrome .vfp,
.chrome .filter-pill,
.chrome .period-pill,
.chrome .pill,
.chrome .ra-pill,
.chrome .rf-pill,
.chrome .pp,
.chrome .filtro-btn,
.chrome .ra-export-btn,
.chrome .rf-export-btn {
  background: rgba(255,255,255,0.04) !important;
  border-color: var(--color-border-soft) !important;
  color: var(--color-text-muted) !important;
}
.chrome .vfp:hover,
.chrome .filter-pill:hover,
.chrome .period-pill:hover,
.chrome .pill:hover,
.chrome .ra-pill:hover,
.chrome .rf-pill:hover,
.chrome .pp:hover,
.chrome .filtro-btn:hover,
.chrome .ra-export-btn:hover,
.chrome .rf-export-btn:hover {
  background: rgba(167,139,250,0.12) !important;
  color: #fff !important;
  border-color: var(--color-accent-purple-light) !important;
}
.chrome .vfp.active,
.chrome .filter-pill.active,
.chrome .period-pill.active,
.chrome .pill.active,
.chrome .ra-pill.active,
.chrome .rf-pill.active,
.chrome .pp.active {
  background: var(--color-accent-purple) !important;
  color: #fff !important;
  border-color: var(--color-accent-purple) !important;
}
/* Compare-toggle dos relatórios (label com checkbox) */
.chrome .ra-compare-toggle,
.chrome .rf-compare-toggle {
  color: var(--color-text-muted);
  font-size: 11px;
}
/* Badges no chrome (perguntas, agentes) ficam legíveis no escuro */
.chrome .badge {
  background: rgba(255,255,255,0.06);
  color: var(--color-text-bright);
  border: 1px solid var(--color-border-soft);
}
.chrome .badge.green  { color: #6EE7B7; border-color: rgba(110,231,183,0.3); }
.chrome .badge.amber  { color: #FCD34D; border-color: rgba(252,211,77,0.3); }
.chrome .badge.red    { color: #FCA5A5; border-color: rgba(252,165,165,0.3); }
.chrome .badge.blue   { color: #93C5FD; border-color: rgba(147,197,253,0.3); }
.chrome .badge.purple { color: var(--color-accent-purple-light); border-color: rgba(167,139,250,0.3); }
.chrome .badge.gray   { color: var(--color-text-muted); }
/* Popover de datas (vendas) precisa fundo claro pra os <input type="date"> ficarem legíveis */
.chrome .vfp-popover {
  background: #fff;
  color: #1F2937;
}

/* ─── Content (miolo) ────────────────────────────────────────
   Estende o fundo escuro até o final da página pra eliminar
   a faixa branca entre chrome e cards. Cards individuais
   continuam claros pra leitura confortável. */

/* Quando a página tem .chrome, o fundo geral da .main fica escuro.
   Usa classe explícita .has-chrome (adicionada pelo shared.js no DOMContentLoaded)
   em vez de :has() — mais compatível, sem custo de re-evaluation. */
.main.has-chrome {
  background: var(--color-bg-deep);
}
/* Topbar injetada pelo shared.js também precisa virar escura */
.main.has-chrome .topbar {
  background: var(--color-bg-deeper) !important;
  border-bottom: 1px solid var(--color-border-soft) !important;
  color: var(--color-text-bright);
}
.main.has-chrome .topbar a,
.main.has-chrome .topbar button { color: var(--color-text-bright); }

/* Chrome encosta no content sem gap branco */
.chrome { margin-bottom: 0 !important; }

.content {
  /* Mesma largura full-bleed do chrome */
  margin: 0 -32px;
  padding: 18px 32px 32px;
  background: var(--color-bg-deep);
  position: relative;
}

/* Filter pills: tema escuro, mas chips legíveis */
.content .pill-filter {
  background: rgba(255,255,255,0.04);
  color: var(--color-text-muted);
  border-color: var(--color-border-soft);
}
.content .pill-filter:hover {
  background: rgba(167,139,250,0.12);
  color: #fff;
  border-color: var(--color-accent-purple-light);
}
.content .pill-filter.active {
  background: var(--color-accent-purple);
  color: #fff;
  border-color: var(--color-accent-purple);
}

/* Loading text no content escuro precisa contraste */
.content .loading,
.content .empty-state,
.content .empty-mini {
  color: var(--color-text-muted);
}

/* Cards individuais (.meu-card) permanecem CLAROS pra leitura confortável.
   Eles "flutuam" sobre o fundo escuro como ilhas de informação. */

/* ─── AJUSTE 2 — Halo no card ativo + glow em badges aprovados ── */

/* Card expandido recebe halo roxo (foco visual).
   Usa :has() — funciona em browsers modernos (Chrome 105+, Safari 15.4+, Firefox 121+).
   Em listas com 50+ cards, :has() é re-avaliado a cada mudança de DOM filha; com
   `contain: content` no card individual, o re-eval fica isolado a cada item. */
.meu-card {
  position: relative;
  contain: content; /* isola re-eval e repaint de cada card */
}
.meu-card:has(.meu-body.open) {
  box-shadow: var(--shadow-card-halo);
  border-color: rgba(167,139,250,0.35);
  transition: box-shadow 0.25s, border-color 0.25s;
}
/* Linha-luz roxa sutil no topo do card (decoração da marca) */
.meu-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--color-accent-purple-light) 50%, transparent);
  opacity: 0.18; transition: opacity 0.25s;
  pointer-events: none;
}
.meu-card:hover::before { opacity: 0.4; }
.meu-card:has(.meu-body.open)::before { opacity: 0.6; }

/* Badges de tipo com status "aprovada" ganham micro-glow (sinaliza "vivo") */
.rec-block li:not(.decided) .rec-tipo.alta_intencao,
.rec-block li:not(.decided) .rec-tipo.atributo_meu_real {
  box-shadow: 0 0 0 1px rgba(167,139,250,0.08);
}
.rec-block li.decided .rec-tag.aprovada {
  box-shadow: 0 0 10px rgba(16,185,129,0.35);
}

/* ─── Performance: respeita reduced motion ──────────────────── */

@media (prefers-reduced-motion: reduce) {
  .chrome-star, .chrome-constellation .node { animation: none; }
  .meu-card, .meu-card::before { transition: none; }
}

/* ─── Drawer lateral reutilizável ────────────────────────────────
   Padrão UX: lista enxuta na página + click abre drawer à direita
   com todos os detalhes do item. Estilo Notion/Linear/Stripe.
   Uso: openDrawer({ titulo, subtitulo, body, footer }) — função no shared.js */

.cv-drawer-back {
  position: fixed; inset: 0;
  background: rgba(5, 5, 12, 0.45);
  z-index: 999;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease-out;
}
.cv-drawer-back.open { opacity: 1; pointer-events: auto; }

.cv-drawer {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: 540px; max-width: 92vw;
  background: #FFFFFF;
  z-index: 1000;
  display: flex; flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: -20px 0 60px -10px rgba(0, 0, 0, 0.25);
  border-left: 1px solid rgba(167, 139, 250, 0.2);
}
.cv-drawer.open { transform: translateX(0); }

.cv-drawer-head {
  padding: 18px 22px;
  border-bottom: 1px solid #E5E7EB;
  background: linear-gradient(180deg, #FAFAFA 0%, #FFFFFF 100%);
  display: flex; align-items: center; gap: 14px;
  flex-shrink: 0;
  position: relative;
}
/* Linha-luz roxa-dourada na borda inferior do header (assinatura marca) */
.cv-drawer-head::after {
  content: ''; position: absolute; bottom: 0; left: 22px; right: 22px; height: 1px;
  background: linear-gradient(90deg, transparent, #A78BFA 40%, #FCD34D 70%, transparent);
  opacity: 0.45;
}
.cv-drawer-head .titulo {
  font-size: 15px; font-weight: 700; color: #1F2937;
  flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cv-drawer-head .subtitulo {
  font-size: 11px; color: #6B7280;
  margin-top: 2px;
  font-family: "SF Mono", ui-monospace, monospace;
}
.cv-drawer-head .close {
  width: 32px; height: 32px;
  background: transparent; border: none;
  font-size: 22px; color: #6B7280; cursor: pointer;
  border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.cv-drawer-head .close:hover { background: #F3F4F6; color: #1F2937; }

.cv-drawer-body {
  flex: 1; overflow-y: auto;
  padding: 20px 22px 24px;
  font-size: 13px; line-height: 1.5; color: #1F2937;
}
.cv-drawer-body h4 {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.8px;
  color: #6B7280; font-weight: 700;
  margin: 18px 0 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid #E5E7EB;
}
.cv-drawer-body h4:first-child { margin-top: 0; }

/* Linhas key/value organizadas */
.cv-kv { display: grid; grid-template-columns: 130px 1fr; gap: 6px 14px; font-size: 12px; }
.cv-kv .k { color: #6B7280; font-weight: 500; }
.cv-kv .v { color: #1F2937; font-weight: 600; word-break: break-word; }
.cv-kv .v.green  { color: #059669; }
.cv-kv .v.red    { color: #DC2626; }
.cv-kv .v.amber  { color: #D97706; }
.cv-kv .v.purple { color: #7C3AED; }
.cv-kv .v.muted  { color: #9CA3AF; font-weight: 400; }
.cv-kv .v.mono   { font-family: "SF Mono", ui-monospace, monospace; font-size: 11px; }

/* Bloco financeiro: linha grande com valor destacado */
.cv-row { display: flex; justify-content: space-between; align-items: baseline; padding: 6px 0; font-size: 12px; }
.cv-row.total { border-top: 1.5px solid #1F2937; margin-top: 8px; padding-top: 10px; font-weight: 700; font-size: 13px; }
.cv-row .label { color: #6B7280; }
.cv-row .val { font-weight: 600; color: #1F2937; }
.cv-row .val.green  { color: #059669; }
.cv-row .val.red    { color: #DC2626; }

.cv-drawer-footer {
  padding: 14px 22px;
  border-top: 1px solid #E5E7EB;
  display: flex; gap: 8px; justify-content: flex-end;
  background: #FAFAFA;
  flex-shrink: 0;
}
.cv-drawer-footer:empty { display: none; }
.cv-btn {
  padding: 8px 14px; font-size: 12px; font-weight: 600;
  border-radius: 6px; cursor: pointer; font-family: inherit;
  border: 1px solid #E5E7EB; background: #fff; color: #4B5563;
  transition: all 0.15s;
}
.cv-btn:hover { background: #F5F3FF; border-color: #7C3AED; color: #7C3AED; }
.cv-btn.primary { background: #7C3AED; color: #fff; border-color: #7C3AED; }
.cv-btn.primary:hover { background: #6D28D9; }

/* Indicação visual na lista: linha clicável com cursor pointer */
.cv-clickable { cursor: pointer; transition: background 0.12s; }
.cv-clickable:hover { background: rgba(167, 139, 250, 0.06); }

/* ═══════════════════════════════════════════════════════════════
   PAINEL DARK — body.painel-dark estende o tema escuro pra .content
   inteiro (não só chrome). Cards, métricas, mapa: tudo escuro.
   ═══════════════════════════════════════════════════════════════ */

body.painel-dark .content {
  background: linear-gradient(180deg, #0d0a24 0%, #07051a 100%);
  color: var(--color-text-bright);
}

/* Section labels (No período, Snapshot agora, etc.) */
body.painel-dark .content > div[style*="font-size:13px"] {
  color: var(--color-text-bright) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
}
body.painel-dark .content > div[style*="font-size:13px"] span[style*="color:var(--text-muted)"] {
  color: var(--color-text-muted) !important;
  font-size: 12px !important;
}

/* Metric cards — tudo escuro */
body.painel-dark .metric-card,
body.painel-dark .uf-card,
body.painel-dark .card {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(167,139,250,0.16) !important;
  color: var(--color-text-bright) !important;
  box-shadow: none !important;
}
body.painel-dark .metric-card:hover,
body.painel-dark .uf-card:hover,
body.painel-dark .card:hover {
  border-color: rgba(167,139,250,0.30) !important;
}

/* Metric typography — MAIOR e mais legível */
body.painel-dark .metric-card .label {
  font-size: 11px !important;
  color: var(--color-text-muted) !important;
  font-weight: 600;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  margin-bottom: 8px;
}
body.painel-dark .metric-card .value {
  font-size: 26px !important;
  color: var(--color-text-bright) !important;
  font-weight: 700;
  line-height: 1.1;
}
body.painel-dark .metric-card .sub {
  font-size: 12px !important;
  color: var(--color-text-faint) !important;
  margin-top: 6px;
}
body.painel-dark .metrics-bento .metric-card.large .value {
  font-size: 38px !important;
}

/* Color variants no escuro */
body.painel-dark .metric-card .value.success { color: #6EE7B7 !important; }
body.painel-dark .metric-card .value.warning { color: #FCD34D !important; }
body.painel-dark .metric-card .value.danger  { color: #FCA5A5 !important; }
body.painel-dark .metric-card .value.info    { color: #93C5FD !important; }
body.painel-dark .metric-card .value.purple  { color: #A78BFA !important; }

/* Saúde catálogo — Bento horizontal com donut compacto + 3 pills destaque */
body.painel-dark .health-bento {
  grid-template-columns: 280px 1fr !important;
  gap: var(--space-3) !important;
  align-items: stretch;
}
body.painel-dark .health-donut-card {
  display: grid !important;
  grid-template-columns: 90px 1fr;
  gap: 18px;
  align-items: center;
  padding: 16px 20px !important;
}
body.painel-dark .health-donut-card .label {
  grid-column: 1 / -1;
  margin-bottom: 6px !important;
  font-size: 11px !important;
}
body.painel-dark .health-donut {
  width: 90px !important; height: 90px !important;
  min-width: 90px !important; max-width: 90px !important;
  min-height: 90px !important; max-height: 90px !important;
}
body.painel-dark .health-donut svg {
  width: 90px !important; height: 90px !important;
}
body.painel-dark .health-donut-row {
  padding-top: 0 !important;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px !important;
}
body.painel-dark .health-donut-bg { stroke: rgba(255,255,255,0.08) !important; }
body.painel-dark .health-donut-pct { color: #6EE7B7 !important; font-size: 18px !important; }
body.painel-dark .health-donut-cap { color: var(--color-text-faint) !important; font-size: 9px !important; }
body.painel-dark .health-totals-num { color: var(--color-text-bright) !important; font-size: 24px !important; }
body.painel-dark .health-totals-cap { color: var(--color-text-faint) !important; font-size: 11px !important; }
body.painel-dark .health-pills {
  grid-template-columns: repeat(3, 1fr) !important;
  gap: var(--space-3) !important;
}
body.painel-dark .health-pill { padding: 16px 20px !important; }
body.painel-dark .health-pill .label { font-size: 11px !important; margin-bottom: 8px !important; font-weight: 600; }
body.painel-dark .health-pill .value { font-size: 32px !important; font-weight: 700; line-height: 1; }
body.painel-dark .health-pill .sub { font-size: 11px !important; margin-top: 6px !important; }
@media (max-width: 900px) {
  body.painel-dark .health-bento { grid-template-columns: 1fr !important; }
}

/* Decisões IA — virar barra horizontal compacta */
body.painel-dark #cd-wrap {
  background: linear-gradient(135deg, rgba(124,58,237,0.10) 0%, rgba(34,211,238,0.04) 100%);
  border: 1px solid rgba(124,58,237,0.22);
  border-radius: 12px;
  padding: 16px 20px !important;
  margin-bottom: 18px !important;
}
body.painel-dark #cd-wrap .cd-feature-wrap,
body.painel-dark #cd-wrap .cd-mini-grid {
  display: none !important;
}
body.painel-dark #cd-wrap .cd-summary-bar {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
body.painel-dark .cd-summary-total {
  display: flex; align-items: baseline; gap: 6px;
  flex-shrink: 0;
}
body.painel-dark .cd-summary-total-num {
  font-size: 32px; font-weight: 800;
  color: #A78BFA; line-height: 1;
  text-shadow: 0 0 16px rgba(167,139,250,0.5);
}
body.painel-dark .cd-summary-total-cap {
  font-size: 13px; color: var(--color-text-bright); font-weight: 500;
}
body.painel-dark .cd-summary-divider {
  width: 1px; height: 32px;
  background: rgba(167,139,250,0.2);
  flex-shrink: 0;
}
body.painel-dark .cd-summary-list {
  display: flex; gap: 18px; flex-wrap: wrap;
  flex: 1; min-width: 0;
}
body.painel-dark .cd-summary-item {
  display: flex; flex-direction: column; gap: 2px;
}
body.painel-dark .cd-summary-item-num {
  font-size: 18px; font-weight: 700;
  color: var(--color-text-bright);
}
body.painel-dark .cd-summary-item-cap {
  font-size: 11px; color: var(--color-text-muted);
  text-transform: lowercase;
}
body.painel-dark .cd-summary-item.urgent .cd-summary-item-num { color: #FCA5A5; }
body.painel-dark .cd-summary-item.gold .cd-summary-item-num { color: #FCD34D; }
body.painel-dark .cd-summary-cta {
  background: linear-gradient(135deg, #7C3AED, #A78BFA);
  color: #fff; border: none;
  padding: 10px 18px; border-radius: 8px;
  font-size: 12px; font-weight: 700;
  cursor: pointer; text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 4px 14px rgba(124,58,237,0.4);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
body.painel-dark .cd-summary-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(124,58,237,0.6);
}

/* Resumo dos agentes — esconder (duplica Decisões) */
body.painel-dark #activity-wrap { display: none !important; }

/* UF map — adaptar pro tema escuro */
body.painel-dark .uf-card-title { color: var(--color-text-bright) !important; }
body.painel-dark .uf-card-sub { color: var(--color-text-muted) !important; }
body.painel-dark .uf-card-header { border-bottom-color: rgba(167,139,250,0.12) !important; }
body.painel-dark .uf-mapa svg path[data-uf] {
  stroke: rgba(255,255,255,0.06) !important;
}
body.painel-dark .uf-mapa svg text { fill: #1F2937 !important; }
body.painel-dark .uf-detalhes {
  background: rgba(255,255,255,0.03) !important;
  border-color: rgba(167,139,250,0.16) !important;
  color: var(--color-text-bright);
}
body.painel-dark .uf-d-titulo { color: var(--color-text-bright) !important; border-bottom-color: rgba(167,139,250,0.15) !important; }
body.painel-dark .uf-d-kpi {
  background: rgba(255,255,255,0.04) !important;
  border-color: rgba(167,139,250,0.16) !important;
}
body.painel-dark .uf-d-kpi-label { color: var(--color-text-muted) !important; }
body.painel-dark .uf-d-kpi-value { color: var(--color-text-bright) !important; }
body.painel-dark .uf-d-section-label { color: var(--color-text-muted) !important; font-size: 11px !important; }
body.painel-dark .uf-d-prod { border-bottom-color: rgba(167,139,250,0.10) !important; }
body.painel-dark .uf-d-prod-name,
body.painel-dark .uf-d-prod-val { color: var(--color-text-bright) !important; }
body.painel-dark .uf-empty { color: var(--color-text-muted) !important; }

/* UF Top 5 estados (default state) */
body.painel-dark .uf-top-row { border-bottom-color: rgba(167,139,250,0.10) !important; }
body.painel-dark .uf-top-row:hover { background: rgba(167,139,250,0.06) !important; }
body.painel-dark .uf-top-name { color: var(--color-text-bright) !important; }
body.painel-dark .uf-top-tag { background: rgba(255,255,255,0.06) !important; color: var(--color-text-muted) !important; }
body.painel-dark .uf-top-bar { background: rgba(255,255,255,0.06) !important; }
body.painel-dark .uf-top-foot { color: var(--color-text-muted) !important; }
body.painel-dark .uf-d-cta { color: var(--color-text-muted) !important; }

/* Top 15 produtos — tabela escura */
body.painel-dark .top-prod-row { border-bottom-color: rgba(167,139,250,0.10) !important; font-size: 13px !important; }
body.painel-dark .top-prod-row.top-prod-head {
  background: rgba(255,255,255,0.04) !important;
  color: var(--color-text-muted) !important;
  font-size: 11px !important;
}
body.painel-dark .top-prod-row:not(.top-prod-head):hover { background: rgba(167,139,250,0.06) !important; }
body.painel-dark .prod-name .pn-title { color: var(--color-text-bright) !important; }
body.painel-dark .prod-name .pn-mlb { color: var(--color-text-muted) !important; font-size: 11px !important; }
body.painel-dark .prod-thumb { background-color: rgba(255,255,255,0.06) !important; border-color: rgba(167,139,250,0.16) !important; }
body.painel-dark .top-prod-row .num { color: var(--color-text-bright) !important; }
body.painel-dark .badge-pill.gray { background: rgba(255,255,255,0.08) !important; color: var(--color-text-muted) !important; }
body.painel-dark .badge-pill.green { background: rgba(110,231,183,0.15) !important; color: #6EE7B7 !important; }
body.painel-dark .badge-pill.amber { background: rgba(252,211,77,0.15) !important; color: #FCD34D !important; }
body.painel-dark .badge-pill.red   { background: rgba(252,165,165,0.15) !important; color: #FCA5A5 !important; }
body.painel-dark .badge-pill.purple{ background: rgba(167,139,250,0.18) !important; color: #C4B5FD !important; }
body.painel-dark .rep-mini-bar { background: rgba(255,255,255,0.08) !important; }
body.painel-dark .rep-mini-pct { color: #C4B5FD !important; font-size: 11.5px !important; }
body.painel-dark .act-btn {
  background: rgba(255,255,255,0.06) !important;
  border-color: rgba(167,139,250,0.16) !important;
  color: var(--color-text-muted) !important;
}
body.painel-dark .act-btn:hover { background: rgba(167,139,250,0.15) !important; color: var(--color-text-bright) !important; }

/* Pos-Ads zone já é escura, só ajustar tipografia */
body.painel-dark .pos-ads-title { color: var(--color-text-bright) !important; font-size: 15px !important; }
body.painel-dark .pos-ads-hint { color: var(--color-text-muted) !important; font-size: 12px !important; }

/* Modal de produto e demais cards */
body.painel-dark .empty-state { color: var(--color-text-muted) !important; }

/* Top 15 — pills de período */
body.painel-dark .cp,
body.painel-dark .pp,
body.painel-dark .filtro-btn,
body.painel-dark .ufp {
  background: rgba(255,255,255,0.04) !important;
  border-color: rgba(167,139,250,0.16) !important;
  color: var(--color-text-bright) !important;
}
body.painel-dark .cp.active,
body.painel-dark .pp.active,
body.painel-dark .ufp.active {
  background: rgba(124,58,237,0.25) !important;
  border-color: rgba(124,58,237,0.5) !important;
  color: #fff !important;
}

/* Charts */
body.painel-dark .chart-kpis,
body.painel-dark .empty-state { color: var(--color-text-muted) !important; }

/* Section bars (purple/blue/green strips antes dos títulos) */
body.painel-dark .content > div > span[style*="background:var(--blue)"] { background: #93C5FD !important; }
body.painel-dark .content > div > span[style*="background:var(--green)"] { background: #6EE7B7 !important; }

/* Filtro temporal panel — popover branco vira escuro elevado, com contraste forte
   pra não se misturar com o fundo do painel-dark. */
body.painel-dark #filtro-panel,
body.painel-dark #chart-custom-popover,
body.painel-dark #top15-custom-popover {
  background: #2A1F4A !important;        /* mais claro que o fundo da página (#0F0A24) */
  border: 1.5px solid rgba(167,139,250,0.55) !important;
  box-shadow: 0 18px 60px rgba(0,0,0,0.55), 0 0 0 1px rgba(167,139,250,0.20) !important;
  color: #F4F2FF !important;
  opacity: 1 !important;
}
body.painel-dark .pp,
body.painel-dark .cp {
  color: #E5E0FF !important;
  background: rgba(255,255,255,0.06) !important;
  border-color: rgba(167,139,250,0.30) !important;
}
body.painel-dark .pp:hover,
body.painel-dark .cp:hover {
  background: rgba(167,139,250,0.20) !important;
  border-color: rgba(167,139,250,0.55) !important;
  color: #FFFFFF !important;
}
/* Drawer (.cv-drawer) — versão dark consistente com o painel-dark.
   Sem isso, o drawer abre branco e o conteúdo (que uso em campanhas com
   cores claras pra dark) fica invisível. */
body.painel-dark .cv-drawer {
  background: #1A1234 !important;
  border-left: 1px solid rgba(167,139,250,0.30) !important;
  color: #F4F2FF !important;
}
body.painel-dark .cv-drawer-head {
  background: linear-gradient(180deg, #221742 0%, #1A1234 100%) !important;
  border-bottom: 1px solid rgba(167,139,250,0.20) !important;
}
body.painel-dark .cv-drawer-head .titulo { color: #F4F2FF !important; }
body.painel-dark .cv-drawer-head .subtitulo { color: #CBD5E1 !important; }
body.painel-dark .cv-drawer-head .close {
  color: #CBD5E1 !important;
}
body.painel-dark .cv-drawer-head .close:hover {
  background: rgba(167,139,250,0.18) !important;
  color: #F4F2FF !important;
}
body.painel-dark .cv-drawer-body {
  color: #F4F2FF !important;
  background: #1A1234 !important;
}
body.painel-dark .cv-drawer-body h4 {
  color: #C4B5FD !important;
  border-bottom: 1px solid rgba(167,139,250,0.20) !important;
}
body.painel-dark .cv-drawer-footer {
  background: #221742 !important;
  border-top: 1px solid rgba(167,139,250,0.20) !important;
}
/* Key-value styles dentro do drawer */
body.painel-dark .cv-drawer .cv-kv .k { color: #CBD5E1 !important; }
body.painel-dark .cv-drawer .cv-kv .v { color: #F4F2FF !important; }
body.painel-dark .cv-drawer .cv-row .label { color: #CBD5E1 !important; }
body.painel-dark .cv-drawer .cv-row .val { color: #F4F2FF !important; }
body.painel-dark .cv-drawer .cv-row.total { border-top-color: rgba(167,139,250,0.35) !important; }
/* Backdrop um pouco mais escuro pra contraste no tema dark */
body.painel-dark .cv-drawer-back { background: rgba(5,5,12,0.65) !important; }
/* Tooltips de form/inputs dentro do drawer não viram brancos */
body.painel-dark .cv-drawer input[type="number"],
body.painel-dark .cv-drawer input[type="text"],
body.painel-dark .cv-drawer input[type="date"] {
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(167,139,250,0.30) !important;
  color: #F4F2FF !important;
}

body.painel-dark .pp.active,
body.painel-dark .cp.active {
  background: #7C3AED !important;
  border-color: #7C3AED !important;
  color: #FFFFFF !important;
}
body.painel-dark .date-inp {
  background: rgba(255,255,255,0.05) !important;
  border-color: rgba(167,139,250,0.2) !important;
  color: var(--color-text-bright) !important;
}

/* ═══════════════════════════════════════════════════════════════
   PAINEL DARK — EXTENSÃO PRA TODAS PÁGINAS OPERACIONAIS
   Catch-all pra agentes/mesas/análise: cards brancos viram escuros,
   tabs/inputs/buttons adaptados, fontes maiores e legíveis.
   ═══════════════════════════════════════════════════════════════ */

/* Base: TUDO no .content vira tema escuro */
body.painel-dark .content,
body.painel-dark .main {
  color: var(--color-text-bright);
}
body.painel-dark .content * {
  /* não força tudo, só dá contexto */
  border-color: rgba(167,139,250,0.16);
}

/* Cards genéricos dos agentes */
body.painel-dark .agent-card,
body.painel-dark .conn-card,
body.painel-dark .iag-card,
body.painel-dark .ag-kpi,
body.painel-dark .conn-cell,
body.painel-dark .reun-panel,
body.painel-dark .empty-state {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(167,139,250,0.16) !important;
  color: var(--color-text-bright) !important;
  box-shadow: none !important;
}
body.painel-dark .agent-card:hover,
body.painel-dark .conn-card:hover,
body.painel-dark .iag-card:hover {
  border-color: rgba(167,139,250,0.30) !important;
}

/* KPIs em agentes.html */
body.painel-dark .ag-kpi-label {
  color: var(--color-text-muted) !important;
  font-size: 11px !important;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
body.painel-dark .ag-kpi-value {
  color: var(--color-text-bright) !important;
  font-size: 26px !important;
  font-weight: 700;
}
body.painel-dark .ag-kpi-sub {
  color: var(--color-text-faint) !important;
  font-size: 12px !important;
}

/* Iag (inbox de agentes) */
body.painel-dark .iag-card-head {
  color: var(--color-text-bright) !important;
  border-bottom-color: rgba(167,139,250,0.14) !important;
}

/* Tabs / nav-pills */
body.painel-dark .tabs,
body.painel-dark .ag-internal-nav {
  background: rgba(255,255,255,0.03) !important;
  border: 1px solid rgba(167,139,250,0.12) !important;
  border-radius: 8px;
  padding: 6px;
  border-bottom: none !important;
}
body.painel-dark .tab,
body.painel-dark .ag-nav-pill {
  color: var(--color-text-muted) !important;
  font-size: 13px !important;
  padding: 8px 14px !important;
  border-bottom: none !important;
  border-radius: 6px;
  transition: background 0.15s, color 0.15s;
}
body.painel-dark .tab:hover,
body.painel-dark .ag-nav-pill:hover {
  background: rgba(167,139,250,0.08) !important;
  color: var(--color-text-bright) !important;
}
body.painel-dark .tab.active,
body.painel-dark .ag-nav-pill.active {
  background: rgba(124,58,237,0.25) !important;
  color: #fff !important;
  border-bottom-color: transparent !important;
}

/* Inputs / selects / textareas */
body.painel-dark .content input[type="text"],
body.painel-dark .content input[type="email"],
body.painel-dark .content input[type="password"],
body.painel-dark .content input[type="number"],
body.painel-dark .content input[type="search"],
body.painel-dark .content input[type="date"],
body.painel-dark .content input[type="url"],
body.painel-dark .content select,
body.painel-dark .content textarea {
  background: rgba(255,255,255,0.05) !important;
  border: 1px solid rgba(167,139,250,0.20) !important;
  color: var(--color-text-bright) !important;
  font-size: 13px !important;
  padding: 8px 12px !important;
  border-radius: 6px;
}
body.painel-dark .content input::placeholder,
body.painel-dark .content textarea::placeholder {
  color: var(--color-text-faint) !important;
}
body.painel-dark .content input:focus,
body.painel-dark .content select:focus,
body.painel-dark .content textarea:focus {
  outline: none !important;
  border-color: rgba(167,139,250,0.5) !important;
  background: rgba(255,255,255,0.07) !important;
}
body.painel-dark .content select {
  background-image: linear-gradient(45deg, transparent 50%, var(--color-text-muted) 50%),
                    linear-gradient(135deg, var(--color-text-muted) 50%, transparent 50%) !important;
  background-position: calc(100% - 16px) center, calc(100% - 11px) center !important;
  background-size: 5px 5px, 5px 5px !important;
  background-repeat: no-repeat !important;
  appearance: none;
  padding-right: 28px !important;
}

/* Buttons */
body.painel-dark .content .btn-purple,
body.painel-dark .btn-cosmic {
  background: linear-gradient(135deg, #7C3AED, #A78BFA) !important;
  border: none !important;
  color: #fff !important;
  font-weight: 700;
  font-size: 13px !important;
  padding: 9px 18px !important;
  box-shadow: 0 4px 14px rgba(124,58,237,0.35);
}
body.painel-dark .content .btn-outline,
body.painel-dark .content .cv-btn:not(.primary) {
  background: rgba(255,255,255,0.05) !important;
  border: 1px solid rgba(167,139,250,0.3) !important;
  color: var(--color-text-bright) !important;
  font-size: 13px !important;
  padding: 8px 14px !important;
}
body.painel-dark .content .btn-outline:hover,
body.painel-dark .content .cv-btn:not(.primary):hover {
  background: rgba(167,139,250,0.12) !important;
  border-color: rgba(167,139,250,0.5) !important;
}
body.painel-dark .cv-btn.primary {
  background: #7C3AED !important;
  color: #fff !important;
}

/* cv-kv (label/value pairs em mesa-precificacao, vendas) */
body.painel-dark .cv-kv {
  color: var(--color-text-bright) !important;
}
body.painel-dark .cv-row {
  border-bottom-color: rgba(167,139,250,0.10) !important;
  color: var(--color-text-bright) !important;
}
body.painel-dark .cv-clickable:hover { background: rgba(167,139,250,0.08) !important; }

/* Tables — qualquer table no .content */
body.painel-dark .content table {
  background: transparent !important;
  color: var(--color-text-bright) !important;
}
body.painel-dark .content table th {
  background: rgba(255,255,255,0.04) !important;
  color: var(--color-text-muted) !important;
  font-size: 11px !important;
  border-bottom: 1px solid rgba(167,139,250,0.18) !important;
  padding: 10px 12px !important;
}
body.painel-dark .content table td {
  border-bottom: 1px solid rgba(167,139,250,0.10) !important;
  color: var(--color-text-bright) !important;
  font-size: 13px !important;
  padding: 10px 12px !important;
}
body.painel-dark .content table tr:hover td {
  background: rgba(167,139,250,0.06) !important;
}

/* Loading / spinners */
body.painel-dark .loading,
body.painel-dark .empty-state {
  color: var(--color-text-muted) !important;
}
body.painel-dark .empty-state h3 { color: var(--color-text-bright) !important; }

/* Página financeiro: bucket-grid, bk-row, etc. */
body.painel-dark .bucket-grid,
body.painel-dark .bk-row,
body.painel-dark .breakdown {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(167,139,250,0.16) !important;
  color: var(--color-text-bright) !important;
}
body.painel-dark .bucket-label { color: var(--color-text-muted) !important; font-size: 11px !important; }
body.painel-dark .bucket-amount { color: var(--color-text-bright) !important; font-size: 22px !important; font-weight: 700; }
body.painel-dark .bucket-sub { color: var(--color-text-faint) !important; font-size: 12px !important; }

/* Análise (mesa-criativo, analista) */
body.painel-dark .conc-head { color: var(--color-text-bright) !important; }
body.painel-dark .badge-unit {
  background: rgba(167,139,250,0.15) !important;
  color: #C4B5FD !important;
  border: 1px solid rgba(167,139,250,0.25) !important;
}

/* Force backgrounds inline styles to lose pra dark */
body.painel-dark .content > *[style*="background:white"],
body.painel-dark .content > *[style*="background: white"],
body.painel-dark .content > *[style*="background:#fff"],
body.painel-dark .content > *[style*="background: #fff"],
body.painel-dark .content > *[style*="background:#FAFAF8"],
body.painel-dark .content > *[style*="background: #FAFAF8"] {
  background: rgba(255,255,255,0.04) !important;
  color: var(--color-text-bright) !important;
}

/* Section headers genéricos (h2, h3 dentro de cards) */
body.painel-dark .content h2,
body.painel-dark .content h3 {
  color: var(--color-text-bright) !important;
}

/* Breadcrumb / sub headers — div com font-size pequeno e color muted */
body.painel-dark .content div[style*="color:var(--text-muted)"],
body.painel-dark .content div[style*="color: var(--text-muted)"],
body.painel-dark .content span[style*="color:var(--text-muted)"],
body.painel-dark .content span[style*="color: var(--text-muted)"] {
  color: var(--color-text-muted) !important;
}

/* Dark surfaces para tabbars usados em escalacoes/perguntas/etc */
body.painel-dark .pill-filter,
body.painel-dark .cv-pill,
body.painel-dark .filter-chip {
  background: rgba(255,255,255,0.05) !important;
  border: 1px solid rgba(167,139,250,0.18) !important;
  color: var(--color-text-bright) !important;
}
body.painel-dark .pill-filter.active,
body.painel-dark .cv-pill.active,
body.painel-dark .filter-chip.active {
  background: rgba(124,58,237,0.3) !important;
  border-color: rgba(124,58,237,0.6) !important;
  color: #fff !important;
}

/* Catch-all: qualquer classe terminando em -card vira escura */
body.painel-dark .content [class$="-card"],
body.painel-dark .content [class*="-card "] {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(167,139,250,0.16) !important;
  color: var(--color-text-bright) !important;
  box-shadow: none !important;
}

/* escalacoes / perguntas — .stat .l .v */
body.painel-dark .content .stat,
body.painel-dark .content .esc-stat {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(167,139,250,0.16) !important;
  color: var(--color-text-bright) !important;
  border-radius: 12px;
}
body.painel-dark .content .stat .l,
body.painel-dark .content .esc-stat .l {
  color: var(--color-text-muted) !important;
  font-size: 11px !important;
  font-weight: 600;
  letter-spacing: 0.4px;
}
body.painel-dark .content .stat .v,
body.painel-dark .content .esc-stat .v {
  color: var(--color-text-bright) !important;
  font-size: 26px !important;
  font-weight: 700;
}
body.painel-dark .content .stat .v.amber  { color: #FCD34D !important; }
body.painel-dark .content .stat .v.green  { color: #6EE7B7 !important; }
body.painel-dark .content .stat .v.blue   { color: #93C5FD !important; }
body.painel-dark .content .stat .v.purple { color: #C4B5FD !important; }
body.painel-dark .content .stat .v.red    { color: #FCA5A5 !important; }

/* esc-card (escalacoes) */
body.painel-dark .esc-card {
  background: rgba(255,255,255,0.04) !important;
  border-color: rgba(167,139,250,0.16) !important;
  color: var(--color-text-bright) !important;
}
body.painel-dark .esc-card:hover { background: rgba(167,139,250,0.06) !important; }
body.painel-dark .esc-head,
body.painel-dark .esc-meta,
body.painel-dark .esc-foot { color: var(--color-text-bright) !important; }
body.painel-dark .esc-meta-detalhe { color: var(--color-text-muted) !important; }

/* hist-toggle (escalacoes) */
body.painel-dark .hist-toggle {
  color: var(--color-text-bright) !important;
  border-bottom: 1px solid rgba(167,139,250,0.10) !important;
}

/* badge-yn (escalacoes) */
body.painel-dark .badge-yn.yes { background: rgba(110,231,183,0.15) !important; color: #6EE7B7 !important; }
body.painel-dark .badge-yn.no  { background: rgba(252,165,165,0.15) !important; color: #FCA5A5 !important; }

/* Top 15 — children rows (expandidas) no tema escuro */
body.painel-dark .prod-children-wrap { background: rgba(167,139,250,0.04) !important; }
body.painel-dark .top-prod-row.top-prod-child {
  background: rgba(167,139,250,0.05) !important;
  border-left: 3px solid #A78BFA !important;
  border-bottom-color: rgba(167,139,250,0.10) !important;
  font-size: 12px !important;
}
body.painel-dark .top-prod-row.top-prod-child .pn-title { color: var(--color-text-bright) !important; }
body.painel-dark .top-prod-row.top-prod-child .pn-mlb { color: var(--color-text-muted) !important; }
body.painel-dark .top-prod-row.top-prod-child .num { color: var(--color-text-bright) !important; }
body.painel-dark .ads-count-btn {
  background: rgba(167,139,250,0.18) !important;
  border-color: rgba(167,139,250,0.35) !important;
  color: #C4B5FD !important;
}
body.painel-dark .ads-count-btn:hover {
  background: rgba(167,139,250,0.30) !important;
  border-color: rgba(167,139,250,0.55) !important;
}
body.painel-dark .ads-attrib-pill.ok {
  background: rgba(110,231,183,0.18) !important; color: #6EE7B7 !important;
}
body.painel-dark .ads-attrib-pill.warn {
  background: rgba(252,211,77,0.18) !important; color: #FCD34D !important;
}
body.painel-dark .prod-children-empty {
  color: var(--color-text-muted) !important;
  border-left-color: rgba(167,139,250,0.5) !important;
  background: rgba(167,139,250,0.03);
}

/* ═══════════════════════════════════════════════════════════════
   PAINEL DARK — VARREDURA FINAL: classes-padrão e catch-all
   Cobre cards/panels/boxes específicos de páginas operacionais que
   estavam com background branco "vazado" no tema escuro.
   ═══════════════════════════════════════════════════════════════ */

/* Padrões de nome universais — dark em qualquer:
   *-card, *-panel, *-box, *-block, *-cell (no contexto .content) */
body.painel-dark .content [class$="-card"],
body.painel-dark .content [class*="-card "],
body.painel-dark .content [class$="-panel"],
body.painel-dark .content [class*="-panel "],
body.painel-dark .content [class$="-box"],
body.painel-dark .content [class*="-box "],
body.painel-dark .content [class$="-block"],
body.painel-dark .content [class*="-block "],
body.painel-dark .content [class$="-wrap"],
body.painel-dark .content [class*="-wrap "],
body.painel-dark .content .panel,
body.painel-dark .content .meu-card,
body.painel-dark .content .meu-body,
body.painel-dark .content .modal {
  background: rgba(255,255,255,0.04) !important;
  border-color: rgba(167,139,250,0.16) !important;
  color: var(--color-text-bright) !important;
  box-shadow: none !important;
}

/* Pills/buttons genéricos (.pill, .pill-filter, .period-pill, prefix-pill) */
body.painel-dark .content .pill,
body.painel-dark .content [class$="-pill"],
body.painel-dark .content [class*="-pill "],
body.painel-dark .content .filter-pill,
body.painel-dark .content .period-pill {
  background: rgba(255,255,255,0.05) !important;
  border-color: rgba(167,139,250,0.2) !important;
  color: var(--color-text-bright) !important;
}
body.painel-dark .content [class*="-pill"].active,
body.painel-dark .content .pill.active,
body.painel-dark .content .filter-pill.active,
body.painel-dark .content .period-pill.active {
  background: rgba(124,58,237,0.3) !important;
  border-color: rgba(124,58,237,0.6) !important;
  color: #fff !important;
}

/* Botões prefixados das mesas (.mp-btn, .mr-btn, .me-btn, .rec-btn) */
body.painel-dark .content [class$="-btn"]:not(.btn-purple):not(.btn-cosmic):not(.btn-chrome-primary),
body.painel-dark .content [class*="-btn "]:not(.btn-purple):not(.btn-cosmic):not(.btn-chrome-primary) {
  background: rgba(255,255,255,0.05) !important;
  border: 1px solid rgba(167,139,250,0.25) !important;
  color: var(--color-text-bright) !important;
}
body.painel-dark .content [class$="-btn"]:hover {
  background: rgba(167,139,250,0.15) !important;
  border-color: rgba(167,139,250,0.5) !important;
}

/* Search/input boxes específicos (.tp-search, .vfp-input, etc) */
body.painel-dark .content [class$="-search"],
body.painel-dark .content [class$="-input"] {
  background: rgba(255,255,255,0.05) !important;
  border: 1px solid rgba(167,139,250,0.2) !important;
  color: var(--color-text-bright) !important;
}

/* Status bars (.rec-status-bar, .progress-wrap) */
body.painel-dark .content [class*="-status-bar"],
body.painel-dark .content .progress-wrap {
  background: rgba(255,255,255,0.04) !important;
  border-color: rgba(167,139,250,0.16) !important;
  color: var(--color-text-bright) !important;
}

/* Modals (.tp-modal-card, .modal) */
body.painel-dark .content [class$="-modal"],
body.painel-dark .content [class*="-modal-card"],
body.painel-dark .content [class*="-modal-btn"] {
  background: rgba(20,15,45,0.95) !important;
  border-color: rgba(167,139,250,0.3) !important;
  color: var(--color-text-bright) !important;
}

/* Texto pré-formatado / textarea */
body.painel-dark .content textarea,
body.painel-dark .content [class*="resposta"] {
  background: rgba(255,255,255,0.05) !important;
  border-color: rgba(167,139,250,0.2) !important;
  color: var(--color-text-bright) !important;
}

/* Badge cores semânticas */
body.painel-dark .badge.green,
body.painel-dark .content .badge.green { background: rgba(110,231,183,0.18) !important; color: #6EE7B7 !important; }
body.painel-dark .badge.amber,
body.painel-dark .content .badge.amber { background: rgba(252,211,77,0.18) !important; color: #FCD34D !important; }
body.painel-dark .badge.red,
body.painel-dark .content .badge.red { background: rgba(252,165,165,0.18) !important; color: #FCA5A5 !important; }
body.painel-dark .badge.blue,
body.painel-dark .content .badge.blue { background: rgba(147,197,253,0.18) !important; color: #93C5FD !important; }
body.painel-dark .badge.purple,
body.painel-dark .content .badge.purple { background: rgba(167,139,250,0.18) !important; color: #C4B5FD !important; }
body.painel-dark .badge.gray,
body.painel-dark .content .badge.gray { background: rgba(255,255,255,0.08) !important; color: var(--color-text-muted) !important; }

/* Bento nas mesas (.scoreboard) — primeiro card vira destaque */
body.painel-dark .scoreboard .metric-card.span-2 {
  grid-column: span 2;
}
body.painel-dark .scoreboard .metric-card.large {
  padding: 18px 22px !important;
}
body.painel-dark .scoreboard .metric-card.large .metric-value,
body.painel-dark .scoreboard .metric-card.large .value {
  font-size: 36px !important;
  font-weight: 700;
  line-height: 1;
}
body.painel-dark .scoreboard .metric-card.large .metric-label,
body.painel-dark .scoreboard .metric-card.large .label {
  margin-bottom: 8px !important;
  font-size: 11px !important;
}
body.painel-dark .scoreboard .metric-card.large .metric-sub,
body.painel-dark .scoreboard .metric-card.large .sub {
  font-size: 12px !important;
  margin-top: 6px;
}
body.painel-dark .scoreboard .metric-card.large::before {
  height: 3px !important; opacity: 0.6 !important;
  background: linear-gradient(90deg, var(--color-accent-purple-light), var(--color-accent-cyan-light)) !important;
}
@media (max-width: 768px) {
  body.painel-dark .scoreboard .metric-card.span-2 { grid-column: span 2; }
  body.painel-dark .scoreboard .metric-card.large .metric-value,
  body.painel-dark .scoreboard .metric-card.large .value { font-size: 26px !important; }
}

/* Quando .scoreboard tem um card .span-2 (4 cards: span-2 + 3×span-1 = 5 cells)
   expande grid pra 5 cols pra encaixar tudo em 1 linha */
body.painel-dark .scoreboard:has(> .metric-card.span-2) {
  grid-template-columns: repeat(5, 1fr) !important;
}

/* ═══════════════════════════════════════════════════════════════
   SISTEMA DE ANIMAÇÕES — micro-interações globais
   1. Botões com loading state (spinner girante)
   2. Botões com success state (check verde + bounce)
   3. Hover lift sutil em botões e cards
   4. Fade-in de cards ao carregar
   5. Pulse em alertas/badges importantes
   6. Number counter helper class
   ═══════════════════════════════════════════════════════════════ */

/* Loading state — qualquer botão com classe .is-loading */
.btn-purple.is-loading,
.btn-cosmic.is-loading,
.btn-chrome-primary.is-loading,
.btn-chrome-secondary.is-loading,
.cv-btn.is-loading,
.mp-btn.is-loading,
.mr-btn.is-loading,
.me-btn.is-loading,
[class*="-btn"].is-loading,
button.is-loading {
  position: relative;
  pointer-events: none;
  color: transparent !important;
}
.btn-purple.is-loading::after,
.btn-cosmic.is-loading::after,
.btn-chrome-primary.is-loading::after,
.btn-chrome-secondary.is-loading::after,
.cv-btn.is-loading::after,
.mp-btn.is-loading::after,
.mr-btn.is-loading::after,
.me-btn.is-loading::after,
[class*="-btn"].is-loading::after,
button.is-loading::after {
  content: '';
  position: absolute;
  inset: 0;
  margin: auto;
  width: 16px; height: 16px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: btn-spin 0.7s linear infinite;
  color: #fff;
}

/* Success state — adicionar .is-success por 1.5s após ação ok */
.is-success {
  animation: btn-success-bounce 0.5s ease;
}
.is-success::before {
  content: '✓';
  margin-right: 6px;
  display: inline-block;
  animation: btn-check-pop 0.4s ease;
}

@keyframes btn-spin { to { transform: rotate(360deg); } }
@keyframes btn-success-bounce {
  0%, 100% { transform: scale(1); }
  35%      { transform: scale(1.06); }
  70%      { transform: scale(0.98); }
}
@keyframes btn-check-pop {
  0%   { opacity: 0; transform: scale(0); }
  70%  { opacity: 1; transform: scale(1.3); }
  100% { opacity: 1; transform: scale(1); }
}

/* Hover lift universal em botões */
.btn-purple, .btn-cosmic, .btn-chrome-primary, .btn-chrome-secondary,
.cv-btn, [class*="-btn"]:not(.act-btn):not(.is-loading), button.btn,
.ads-sync-btn, .reun-btn, .panel-action {
  transition: transform 0.15s var(--ease-standard, cubic-bezier(.4,0,.2,1)),
              box-shadow 0.15s var(--ease-standard, cubic-bezier(.4,0,.2,1)),
              background 0.15s var(--ease-standard, cubic-bezier(.4,0,.2,1));
}
.btn-purple:hover:not(:disabled):not(.is-loading),
.btn-cosmic:hover:not(:disabled):not(.is-loading),
.btn-chrome-primary:hover:not(:disabled):not(.is-loading),
.cv-btn.primary:hover:not(:disabled):not(.is-loading),
.ads-sync-btn:hover:not(:disabled):not(.is-loading),
.reun-btn:hover:not(:disabled):not(.is-loading),
.panel-action:hover:not(:disabled):not(.is-loading) {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(124,58,237,0.35);
}
.btn-purple:active, .btn-cosmic:active, .btn-chrome-primary:active,
.cv-btn:active, .ads-sync-btn:active {
  transform: translateY(0);
}

/* Hover lift em metric cards interativos */
body.painel-dark a.metric-card,
body.painel-dark .agent-card,
body.painel-dark .metric-mini,
body.painel-dark .iag-card {
  transition: transform 0.18s var(--ease-standard),
              border-color 0.18s var(--ease-standard),
              background 0.18s var(--ease-standard);
}
body.painel-dark a.metric-card:hover,
body.painel-dark .agent-card:hover,
body.painel-dark .metric-mini:hover,
body.painel-dark .iag-card:hover {
  transform: translateY(-2px);
  border-color: rgba(167,139,250,0.40) !important;
}

/* Fade-in ao carregar — aplicar .fade-in onde quiser */
.fade-in {
  opacity: 0; transform: translateY(8px);
  animation: fade-in-up 0.45s var(--ease-standard) forwards;
}
@keyframes fade-in-up {
  to { opacity: 1; transform: translateY(0); }
}
/* Stagger: aplica delay incremental quando vários cards têm .fade-in juntos */
.fade-in-stagger > * { opacity: 0; transform: translateY(8px); animation: fade-in-up 0.4s var(--ease-standard) forwards; }
.fade-in-stagger > *:nth-child(1) { animation-delay: 0.05s; }
.fade-in-stagger > *:nth-child(2) { animation-delay: 0.10s; }
.fade-in-stagger > *:nth-child(3) { animation-delay: 0.15s; }
.fade-in-stagger > *:nth-child(4) { animation-delay: 0.20s; }
.fade-in-stagger > *:nth-child(5) { animation-delay: 0.25s; }
.fade-in-stagger > *:nth-child(6) { animation-delay: 0.30s; }
.fade-in-stagger > *:nth-child(7) { animation-delay: 0.35s; }
.fade-in-stagger > *:nth-child(8) { animation-delay: 0.40s; }

/* Skeleton loader — placeholder pulsante quando carregando */
.skeleton {
  background: linear-gradient(90deg,
    rgba(167,139,250,0.06) 0%,
    rgba(167,139,250,0.14) 50%,
    rgba(167,139,250,0.06) 100%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.4s ease-in-out infinite;
  border-radius: 6px;
  display: inline-block;
  min-height: 14px;
  color: transparent !important;
}
@keyframes skeleton-shimmer {
  0%   { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}

/* Pulse glow — aplicar .pulse-attention em alertas críticos */
.pulse-attention {
  animation: pulse-attention 2s ease-in-out infinite;
}
@keyframes pulse-attention {
  0%, 100% { box-shadow: 0 0 0 0 rgba(252,165,165,0); }
  50%      { box-shadow: 0 0 0 6px rgba(252,165,165,0.18); }
}

/* Number counter — animação suave de números (handled em JS via shared.js) */
.num-animating { transition: color 0.2s ease; }

/* Toast notification (success/error) */
.toast-msg {
  position: fixed; bottom: 24px; right: 24px;
  background: rgba(20,15,45,0.96); color: #fff;
  border: 1px solid rgba(167,139,250,0.35);
  border-left-width: 4px;
  border-radius: 10px;
  padding: 14px 20px;
  font-size: 13px; font-weight: 500;
  box-shadow: 0 12px 40px rgba(0,0,0,0.45);
  z-index: 9999;
  display: flex; align-items: center; gap: 10px;
  animation: toast-in 0.32s var(--ease-standard);
  max-width: 360px;
}
.toast-msg.success { border-left-color: #10B981; }
.toast-msg.error   { border-left-color: #EF4444; }
.toast-msg.warn    { border-left-color: #F59E0B; }
.toast-msg.info    { border-left-color: #A78BFA; }
.toast-msg.fading-out { animation: toast-out 0.3s ease forwards; }
@keyframes toast-in {
  from { opacity: 0; transform: translateY(20px) scale(0.95); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes toast-out {
  to { opacity: 0; transform: translateY(20px) scale(0.95); }
}

/* Respeita prefers-reduced-motion (acessibilidade) */
@media (prefers-reduced-motion: reduce) {
  .fade-in, .fade-in-stagger > *,
  .skeleton, .pulse-attention,
  .is-loading::after, .is-success {
    animation: none !important;
  }
  .btn-purple:hover, .btn-cosmic:hover, .btn-chrome-primary:hover,
  body.painel-dark a.metric-card:hover, body.painel-dark .metric-mini:hover {
    transform: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   MODO CENSURAR — body.censored aplica blur em dados sensíveis
   pra apresentações a clientes sem expor produtos reais.
   Toggle via window.toggleCensor() em shared.js, persiste em localStorage.
   ═══════════════════════════════════════════════════════════════ */

/* Títulos de produtos (Top 15, modal, mapa UF, escalações, mesas) */
body.censored .pn-title,
body.censored .modal-titulo,
body.censored #modal-titulo,
body.censored .produto-modal-title,
body.censored .uf-d-prod-name,
body.censored .conc-titulo,
body.censored .esc-prod,
body.censored .reun-msg-text,
body.censored [data-sensitive="title"] {
  filter: blur(5px);
  user-select: none;
  pointer-events: none;
}

/* MLBs (códigos) e SKUs */
body.censored .pn-mlb,
body.censored #modal-mlb,
body.censored .produto-modal-sub,
body.censored [data-sensitive="mlb"] {
  filter: blur(4px);
  user-select: none;
}

/* Thumbnails (fotos dos produtos) */
body.censored .prod-thumb,
body.censored .modal-thumb,
body.censored #modal-thumb,
body.censored .produto-modal-thumb,
body.censored .conc-thumb,
body.censored .sb-recent-thumb,
body.censored [data-sensitive="thumb"],
body.censored img[src*="mlstatic"] {
  filter: blur(8px);
}

/* Hover do título: não revela mas mostra que está censurado */
body.censored .pn-title::after {
  content: '[censurado]';
  display: none;
}
body.censored .pn-title:hover {
  filter: blur(5px) brightness(1.1);
}

/* Botão Censurar — pill discreta no header */
.censor-btn {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(167,139,250,0.25);
  color: var(--color-text-muted);
  font-size: 11px; font-weight: 600;
  padding: 6px 12px; border-radius: 6px;
  cursor: pointer; font-family: inherit;
  display: inline-flex; align-items: center; gap: 6px;
  transition: all 0.15s var(--ease-standard);
}
.censor-btn:hover {
  background: rgba(167,139,250,0.12);
  border-color: rgba(167,139,250,0.5);
  color: var(--color-text-bright);
}
body.censored .censor-btn {
  background: rgba(167,139,250,0.25);
  border-color: rgba(167,139,250,0.6);
  color: #fff;
}
.censor-btn-icon { font-size: 14px; line-height: 1; }