/* ==========================================================================
   CRM — CAMADA VISUAL (design system)
   Carrega POR ÚLTIMO (também é reinserida depois do style.css no boot leve) e é a única fonte de
   verdade de cor, tipografia, raio, sombra e espaçamento. Tudo que era "azul" espalhado em 3 variáveis
   agora aponta para --crm-accent.

   O CLIENTE ESCOLHE o visual em Configurações → Aparência:
     html[data-crm-estilo="bitrix" | "corporativo" | "suave"]   (padrão: bitrix)
     --crm-accent                                                (cor da marca; inline no <html>)
   ========================================================================== */

@font-face {
  font-family: 'Inter';
  src: url('../fonts/inter-latin-wght.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ---------- 1. Tokens mestres ---------- */
html {
  --crm-font: 'Inter', 'Segoe UI Variable Text', 'Segoe UI', system-ui, -apple-system, Roboto, Arial, sans-serif;

  /* cor da marca (o cliente troca) e derivados */
  --crm-accent: #1c86d1;
  --crm-on-accent: #ffffff;
  --crm-accent-strong: color-mix(in srgb, var(--crm-accent) 80%, #000);
  --crm-accent-soft: color-mix(in srgb, var(--crm-accent) 10%, var(--crm-surface));
  --crm-accent-softer: color-mix(in srgb, var(--crm-accent) 5%, var(--crm-surface));
  --crm-ring: color-mix(in srgb, var(--crm-accent) 28%, transparent);

  /* neutros (Bitrix) */
  --crm-bg: #eef2f4;
  --crm-surface: #ffffff;
  --crm-surface-2: #f5f7f8;
  --crm-line: #dde4e8;
  --crm-line-strong: #c5cfd6;
  --crm-text: #2b3a45;
  --crm-muted: #66788a;
  --crm-faint: #94a3ae;

  /* forma */
  --crm-radius: 6px;
  --crm-radius-sm: 4px;
  --crm-shadow: 0 1px 2px rgba(31, 50, 66, .06);
  --crm-shadow-pop: 0 8px 24px rgba(31, 50, 66, .14);
  --crm-pad-x: 24px;

  /* semânticas (não mudam com o acento) */
  --crm-ok: #15803d;
  --crm-warn: #b45309;
  --crm-bad: #c62828;
  --crm-ok-soft: #e7f6ec;
  --crm-warn-soft: #fdf1df;
  --crm-bad-soft: #fdeaea;

  /* botão principal */
  --crm-btn-bg: #1d8536;
  --crm-btn-fg: #ffffff;
  --crm-btn-hover: #166a2b;

  /* cabeçalho (Bitrix: barra colorida) */
  --crm-header-bg: linear-gradient(180deg, var(--crm-accent), color-mix(in srgb, var(--crm-accent) 88%, #000));
  --crm-header-fg: #ffffff;
  --crm-header-fg-2: rgba(255, 255, 255, .86);
  --crm-header-hover: rgba(255, 255, 255, .15);
  --crm-header-active: rgba(255, 255, 255, .26);
  --crm-header-line: transparent;
  --crm-header-shadow: 0 1px 3px rgba(20, 40, 60, .18);
  --crm-plate-bg: rgba(255, 255, 255, .2);
  --crm-plate-fg: #ffffff;
  --crm-plate-line: rgba(255, 255, 255, .38);
  /* botão de criar dentro da barra colorida: branco (o verde escuro some no azul) */
  --crm-cta-bg: #ffffff;
  --crm-cta-fg: color-mix(in srgb, var(--crm-accent) 78%, #000);
  --crm-cta-hover: color-mix(in srgb, var(--crm-accent) 10%, #fff);
}

/* ---------- Estilo 2: Corporativo (sóbrio) ---------- */
html[data-crm-estilo="corporativo"] {
  --crm-accent: #2456c9;
  --crm-bg: #f3f4f6;
  --crm-surface-2: #f8f9fa;
  --crm-line: #e2e5e9;
  --crm-line-strong: #cbd0d7;
  --crm-text: #16202b;
  --crm-muted: #5d6a79;
  --crm-faint: #8b96a3;
  --crm-radius: 8px;
  --crm-radius-sm: 6px;
  --crm-shadow: none;
  --crm-shadow-pop: 0 10px 28px rgba(15, 23, 42, .14);
  --crm-btn-bg: var(--crm-accent);
  --crm-btn-fg: var(--crm-on-accent);
  --crm-btn-hover: var(--crm-accent-strong);
  --crm-header-bg: var(--crm-surface);
  --crm-header-fg: var(--crm-text);
  --crm-header-fg-2: var(--crm-muted);
  --crm-header-hover: var(--crm-surface-2);
  --crm-header-active: var(--crm-accent-soft);
  --crm-header-line: var(--crm-line);
  --crm-header-shadow: none;
  --crm-plate-bg: var(--crm-accent-soft);
  --crm-plate-fg: var(--crm-accent-strong);
  --crm-plate-line: color-mix(in srgb, var(--crm-accent) 30%, var(--crm-surface));
  --crm-cta-bg: var(--crm-accent);
  --crm-cta-fg: var(--crm-on-accent);
  --crm-cta-hover: var(--crm-accent-strong);
}

/* ---------- Estilo 3: Suave (leve e arredondado) ---------- */
html[data-crm-estilo="suave"] {
  --crm-accent: #0e9f8e;
  --crm-bg: #f2f6f8;
  --crm-surface-2: #f7fafb;
  --crm-line: #e4ebef;
  --crm-line-strong: #d0dae0;
  --crm-text: #1f2d3a;
  --crm-muted: #62758a;
  --crm-faint: #93a3b3;
  --crm-radius: 16px;
  --crm-radius-sm: 12px;
  --crm-shadow: 0 6px 20px rgba(28, 45, 60, .06);
  --crm-shadow-pop: 0 14px 36px rgba(28, 45, 60, .16);
  --crm-btn-bg: var(--crm-accent);
  --crm-btn-fg: var(--crm-on-accent);
  --crm-btn-hover: var(--crm-accent-strong);
  --crm-header-bg: color-mix(in srgb, var(--crm-surface) 92%, transparent);
  --crm-header-fg: var(--crm-text);
  --crm-header-fg-2: var(--crm-muted);
  --crm-header-hover: var(--crm-accent-softer);
  --crm-header-active: var(--crm-accent-soft);
  --crm-header-line: var(--crm-line);
  --crm-header-shadow: 0 4px 18px rgba(28, 45, 60, .06);
  --crm-plate-bg: var(--crm-accent-soft);
  --crm-plate-fg: var(--crm-accent-strong);
  --crm-plate-line: color-mix(in srgb, var(--crm-accent) 30%, var(--crm-surface));
  --crm-cta-bg: var(--crm-accent);
  --crm-cta-fg: var(--crm-on-accent);
  --crm-cta-hover: var(--crm-accent-strong);
}

/* ---------- Tema escuro (preferência pessoal: html[data-crm-tema="escuro"]) ---------- */
/* Só troca neutros/sombras/semânticas; o ESTILO (Bitrix/Corporativo/Suave) continua definindo forma, cabeçalho e botões. */
html[data-crm-tema="escuro"] {
  color-scheme: dark;
  --crm-bg: #11171e;
  --crm-surface: #19212a;
  --crm-surface-2: #202a35;
  --crm-line: #2b3743;
  --crm-line-strong: #3b4958;
  --crm-text: #e6ebf0;
  --crm-muted: #9dabb9;
  --crm-faint: #71818f;
  --crm-shadow: 0 1px 2px rgba(0, 0, 0, .4);
  --crm-shadow-pop: 0 12px 32px rgba(0, 0, 0, .55);
  --crm-accent-strong: color-mix(in srgb, var(--crm-accent) 60%, #fff);
  --crm-ok: #4ade80;
  --crm-warn: #fbbf24;
  --crm-bad: #f87171;
  --crm-ok-soft: rgba(74, 222, 128, .14);
  --crm-warn-soft: rgba(251, 191, 36, .14);
  --crm-bad-soft: rgba(248, 113, 113, .15);
  --crm-header-bg: linear-gradient(180deg, color-mix(in srgb, var(--crm-accent) 70%, #000), color-mix(in srgb, var(--crm-accent) 52%, #000));
  --crm-cta-hover: color-mix(in srgb, var(--crm-accent) 12%, #fff);
}
/* Texto/ícone na cor da marca precisa de versão clareada no fundo escuro (o CSS antigo usa --accent/--color-primary como cor de texto) */
html:root[data-crm-tema="escuro"] {
  --accent: var(--crm-accent-strong);
  --color-primary: var(--crm-accent-strong);
  --primary: var(--crm-accent-strong);
}
html[data-crm-tema="escuro"][data-crm-estilo="corporativo"] {
  --crm-shadow: none;
  --crm-header-bg: var(--crm-surface);
  --crm-header-fg: var(--crm-text);
  --crm-cta-hover: var(--crm-accent-strong);
}
html[data-crm-tema="escuro"][data-crm-estilo="suave"] {
  --crm-shadow: 0 8px 24px rgba(0, 0, 0, .35);
  --crm-header-bg: color-mix(in srgb, var(--crm-surface) 92%, transparent);
  --crm-header-fg: var(--crm-text);
  --crm-cta-hover: var(--crm-accent-strong);
}

/* ---------- 2. Variáveis antigas apontam para os tokens (acaba com "3 azuis") ---------- */
html:root {
  --accent: var(--crm-accent);
  --primary: var(--crm-accent);
  --primary-hover: var(--crm-accent-strong);
  --primary-light: var(--crm-accent-soft);
  --color-primary: var(--crm-accent);
  --color-primary-container: var(--crm-accent-soft);
  --color-on-primary-container: var(--crm-accent-strong);
  --card-bg: var(--crm-surface);
  --card-border: var(--crm-line);
  --border: var(--crm-line);
  --content-text: var(--crm-text);
  --text: var(--crm-text);
  --muted-text: var(--crm-muted);
  --text-secondary: var(--crm-muted);
  --bg: var(--crm-bg);
  --color-background: var(--crm-bg);
  --radius-card: var(--crm-radius);
  --radius-btn: var(--crm-radius-sm);
  --shadow-sm: var(--crm-shadow);
  --font: var(--crm-font);
  --neg-accent: var(--crm-accent);
  --neg-line: var(--crm-line);
  --muted: var(--crm-muted);
  --accent-soft: var(--crm-accent-soft);
  /* Variáveis estilo Material usadas pelo CSS antigo (on-surface 100x, outline-variant 84x…) */
  --color-surface: var(--crm-surface);
  --color-surface-dim: var(--crm-bg);
  --color-surface-bright: var(--crm-surface);
  --color-surface-container-lowest: var(--crm-surface);
  --color-surface-container-low: var(--crm-surface-2);
  --color-surface-container: var(--crm-surface-2);
  --color-surface-container-high: color-mix(in srgb, var(--crm-line) 55%, var(--crm-surface));
  --color-surface-container-highest: var(--crm-line);
  --color-surface-variant: var(--crm-line);
  --color-on-surface: var(--crm-text);
  --color-on-background: var(--crm-text);
  --color-on-surface-variant: var(--crm-muted);
  --color-outline: var(--crm-faint);
  --color-outline-variant: var(--crm-line);
  --color-error: var(--crm-bad);
  --color-error-container: var(--crm-bad-soft);
  --color-on-error-container: var(--crm-bad);
  --color-inverse-surface: var(--crm-text);
  --color-inverse-on-surface: var(--crm-surface);
  --content-bg: var(--crm-bg);
  --chart-grid: var(--crm-line);
  --success: var(--crm-ok);
  --warning: var(--crm-warn);
  --danger: var(--crm-bad);
}
/* O style.css redefine ESTAS 8 em `:root:not([data-theme])` (especificidade maior que `html:root`) e elas voltavam a branco/azul
   antigo no tema escuro — o menu Atividades ficava com fundo branco e texto claro. Mesma especificidade+1, vencem por ordem. */
html:root:not([data-theme]) {
  --bg: var(--crm-bg);
  --bg-secondary: var(--crm-surface);
  --border: var(--crm-line);
  --card-bg: var(--crm-surface);
  --sidebar-bg: var(--crm-surface);
  --sidebar-text: var(--crm-text);
  --text: var(--crm-text);
  --text-secondary: var(--crm-muted);
}

/* ---------- 3. Base ---------- */
body#spa-crm {
  background: var(--crm-bg) !important;
  color: var(--crm-text);
  font-family: var(--crm-font) !important;
  font-size: 14px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: 'cv11', 'ss01';
}
body#spa-crm button,
body#spa-crm input,
body#spa-crm select,
body#spa-crm textarea { font-family: inherit; }
body#spa-crm .material-symbols-outlined { font-family: 'Material Symbols Outlined' !important; }

/* Números de dinheiro/contagem alinhados */
body#spa-crm .crm-kpi-val,
body#spa-crm .neg-card-value,
body#spa-crm .neg-col-value,
body#spa-crm .neg-col-count,
body#spa-crm .crm-exec-table td,
body#spa-crm .crm-table td,
body#spa-crm .crm-hbar-val { font-variant-numeric: tabular-nums; }

/* O espaço de 80px foi criado para um cabeçalho fixo antigo; o atual fica no fluxo (sticky). */
body#spa-crm main { padding-top: 0 !important; background: transparent !important; }
/* Usa a largura toda da janela (mesma do cabeçalho). O teto só existe para monitores ultralargos. */
body#spa-crm main > .page-content {
  max-width: 2560px !important;
  margin: 0 auto !important;
  padding: 20px var(--crm-pad-x) 32px !important;
}
body#spa-crm main > #page-configuracoes { padding: 20px var(--crm-pad-x) 32px !important; }

/* ---------- 4. Cabeçalho ---------- */
body#spa-crm #rd-topbar-actions.crm-sysrh-shell {
  background: var(--crm-header-bg) !important;
  border-bottom: 1px solid var(--crm-header-line) !important;
  box-shadow: var(--crm-header-shadow) !important;
  backdrop-filter: none !important;
  padding: 0 var(--crm-pad-x) !important;
}
body#spa-crm .crm-shell-bar { min-height: 56px; padding: 0 !important; }
@media (min-width: 1100px) { body#spa-crm .crm-shell-bar { height: 56px; } }
body#spa-crm .crm-shell-title { color: var(--crm-header-fg) !important; font-size: 14px !important; font-weight: 700 !important; letter-spacing: .03em !important; }
body#spa-crm .crm-shell-sub { color: var(--crm-header-fg-2) !important; font-size: 11px !important; }

/* placa do logo / iniciais */
body#spa-crm .crm-shell-icon,
body#spa-crm .crm-shell-bar .crm-shell-icon {
  background: var(--crm-plate-bg) !important;
  color: var(--crm-plate-fg) !important;
  border: 1px solid var(--crm-plate-line) !important;
  border-radius: var(--crm-radius-sm) !important;
}
body#spa-crm .crm-shell-icon.has-logo,
body#spa-crm .crm-shell-bar .crm-shell-icon.has-logo {
  background: #fff !important;
  border-color: rgba(255, 255, 255, .6) !important;
}

/* navegação */
body#spa-crm .crm-shell-bar #spa-top-nav .rd-main-nav-link,
body#spa-crm .crm-shell-bar #spa-top-nav .rd-nav-trigger {
  color: var(--crm-header-fg-2) !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: var(--crm-radius-sm) !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  padding: 8px 12px !important;
  box-shadow: none !important;
  transition: background var(--crm-ease, .14s ease), color .14s ease;
}
body#spa-crm .crm-shell-bar #spa-top-nav .rd-main-nav-link:hover,
body#spa-crm .crm-shell-bar #spa-top-nav .rd-nav-trigger:hover { background: var(--crm-header-hover) !important; color: var(--crm-header-fg) !important; }
body#spa-crm .crm-shell-bar #spa-top-nav .rd-main-nav-link.bg-primary-container,
body#spa-crm .crm-shell-bar #spa-top-nav .rd-main-nav-link.active,
body#spa-crm .crm-shell-bar #spa-top-nav .rd-nav-trigger.active,
body#spa-crm .crm-shell-bar #spa-top-nav .rd-nav-trigger.bg-primary-container {
  background: var(--crm-header-active) !important;
  color: var(--crm-header-fg) !important;
  font-weight: 600 !important;
}
body#spa-crm .crm-shell-bar #spa-top-nav .material-symbols-outlined { color: inherit !important; }

/* ícones à direita */
body#spa-crm #rd-topbar-actions .rd-top-icon,
body#spa-crm #rd-topbar-actions .crm-shell-icon-btn {
  color: var(--crm-header-fg-2) !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: var(--crm-radius-sm) !important;
  box-shadow: none !important;
}
body#spa-crm #rd-topbar-actions .rd-top-icon:hover,
body#spa-crm #rd-topbar-actions .crm-shell-icon-btn:hover { background: var(--crm-header-hover) !important; color: var(--crm-header-fg) !important; }
body#spa-crm #rd-topbar-actions .rd-top-icon .material-symbols-outlined { color: inherit !important; }

/* "Ações" (criar) e "Fechar" */
body#spa-crm #btn-global-create {
  background: var(--crm-cta-bg) !important;
  color: var(--crm-cta-fg) !important;
  border: 0 !important;
  border-radius: var(--crm-radius-sm) !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  box-shadow: none !important;
}
body#spa-crm #btn-global-create:hover { background: var(--crm-cta-hover) !important; }
body#spa-crm #btn-global-create .material-symbols-outlined { color: inherit !important; }
body#spa-crm #btnFecharCrmShell {
  background: transparent !important;
  color: var(--crm-header-fg) !important;
  border: 1px solid color-mix(in srgb, var(--crm-header-fg) 30%, transparent) !important;
  border-radius: var(--crm-radius-sm) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
}
body#spa-crm #btnFecharCrmShell:hover { background: var(--crm-header-hover) !important; }
html[data-crm-estilo="corporativo"] body#spa-crm #btnFecharCrmShell,
html[data-crm-estilo="suave"] body#spa-crm #btnFecharCrmShell { border-color: var(--crm-line-strong) !important; }
html[data-crm-estilo="suave"] body#spa-crm #btn-global-create { border-radius: 999px !important; }
html[data-crm-estilo="suave"] body#spa-crm #btnFecharCrmShell { border-radius: 999px !important; }
html[data-crm-estilo="suave"] body#spa-crm .crm-shell-bar #spa-top-nav .rd-main-nav-link,
html[data-crm-estilo="suave"] body#spa-crm .crm-shell-bar #spa-top-nav .rd-nav-trigger { border-radius: 999px !important; }

/* ---------- 5. Títulos de página ---------- */
body#spa-crm .crm-dash-title,
body#spa-crm .neg-title,
body#spa-crm .crm-page-title,
body#spa-crm #page-configuracoes .crm-config-heading h1,
body#spa-crm #page-configuracoes .crm-config-heading h2 {
  margin: 0 !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  letter-spacing: -0.015em !important;
  color: var(--crm-text) !important;
  line-height: 1.2 !important;
}
body#spa-crm .crm-dash-sub,
body#spa-crm .neg-subtitle,
body#spa-crm .crm-page-sub {
  margin: 3px 0 0 !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  color: var(--crm-muted) !important;
}
body#spa-crm .crm-dash-toolbar { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; margin-bottom: 16px !important; flex-wrap: wrap; }

/* ---------- 6. Controles ---------- */
body#spa-crm .crm-dash-select,
body#spa-crm .neg-search input,
body#spa-crm .neg-select,
body#spa-crm .crm-search input,
body#spa-crm .crm-marca-campos input[type="text"] {
  height: 34px;
  border: 1px solid var(--crm-line-strong) !important;
  border-radius: var(--crm-radius-sm) !important;
  background: var(--crm-surface) !important;
  color: var(--crm-text) !important;
  font-size: 13px !important;
  box-shadow: none !important;
}
body#spa-crm .crm-dash-select:focus-visible,
body#spa-crm .neg-search input:focus-visible,
body#spa-crm .crm-search input:focus-visible,
body#spa-crm .crm-marca-campos input[type="text"]:focus-visible {
  outline: 0 !important;
  border-color: var(--crm-accent) !important;
  box-shadow: 0 0 0 3px var(--crm-ring) !important;
}
body#spa-crm .crm-dash-period-wrap { border: 1px solid var(--crm-line-strong) !important; border-radius: var(--crm-radius-sm) !important; background: var(--crm-surface) !important; box-shadow: none !important; }
body#spa-crm .crm-dash-period-wrap .crm-dash-select { border: 0 !important; height: 32px; }

/* botões secundários */
body#spa-crm .crm-dash-btn,
body#spa-crm .neg-disclosure,
body#spa-crm .neg-funil-switch,
body#spa-crm .rd-secondary-btn,
body#spa-crm .crm-config-add {
  height: 34px;
  padding: 0 12px !important;
  background: var(--crm-surface) !important;
  color: var(--crm-text) !important;
  border: 1px solid var(--crm-line-strong) !important;
  border-radius: var(--crm-radius-sm) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  box-shadow: none !important;
  display: inline-flex; align-items: center; gap: 6px;
  transition: background .14s ease, border-color .14s ease;
}
body#spa-crm .crm-dash-btn:hover,
body#spa-crm .neg-disclosure:hover,
body#spa-crm .neg-funil-switch:hover,
body#spa-crm .rd-secondary-btn:hover,
body#spa-crm .crm-config-add:hover { background: var(--crm-surface-2) !important; border-color: var(--crm-faint) !important; }
body#spa-crm .neg-disclosure .material-symbols-outlined,
body#spa-crm .neg-funil-switch .material-symbols-outlined { font-size: 18px !important; color: var(--crm-muted) !important; }

/* botões principais */
body#spa-crm .crm-dash-btn-primary,
body#spa-crm .neg-btn-primary,
body#spa-crm .rd-primary-btn:not(.rd-global-create) {
  height: 34px;
  padding: 0 14px !important;
  background: var(--crm-btn-bg) !important;
  color: var(--crm-btn-fg) !important;
  border: 0 !important;
  border-radius: var(--crm-radius-sm) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  box-shadow: none !important;
  display: inline-flex; align-items: center; gap: 6px;
  transition: background .14s ease;
}
body#spa-crm .crm-dash-btn-primary:hover,
body#spa-crm .neg-btn-primary:hover,
body#spa-crm .rd-primary-btn:not(.rd-global-create):hover { background: var(--crm-btn-hover) !important; }
body#spa-crm .crm-dash-btn-primary .material-symbols-outlined,
body#spa-crm .neg-btn-primary .material-symbols-outlined { color: inherit !important; font-size: 18px !important; }
html[data-crm-estilo="suave"] body#spa-crm .crm-dash-btn,
html[data-crm-estilo="suave"] body#spa-crm .neg-disclosure,
html[data-crm-estilo="suave"] body#spa-crm .crm-dash-btn-primary,
html[data-crm-estilo="suave"] body#spa-crm .neg-btn-primary { border-radius: 999px !important; }

body#spa-crm :focus-visible { outline-color: var(--crm-accent); }

/* ---------- 7. Home: KPIs ---------- */
body#spa-crm .crm-kpi-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)) !important;
  gap: 12px !important;
  margin-bottom: 16px !important;
}
@media (min-width: 1180px) {
  body#spa-crm .crm-kpi-grid { grid-template-columns: 1.7fr repeat(5, minmax(0, 1fr)) !important; }
}
body#spa-crm .crm-kpi {
  background: var(--crm-surface) !important;
  border: 1px solid var(--crm-line) !important;
  border-radius: var(--crm-radius) !important;
  box-shadow: var(--crm-shadow) !important;
  padding: 14px 16px !important;
  transition: border-color .14s ease, box-shadow .14s ease;
}
body#spa-crm .crm-kpi.is-clickable:hover { border-color: var(--crm-accent) !important; box-shadow: var(--crm-shadow-pop) !important; }
body#spa-crm .crm-kpi-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px !important; }
body#spa-crm .crm-kpi-icon {
  width: 26px !important; height: 26px !important; flex: 0 0 26px;
  display: grid; place-items: center;
  background: var(--crm-accent-soft) !important;
  color: var(--crm-accent-strong) !important;
  border: 0 !important;
  border-radius: 999px !important;
}
body#spa-crm .crm-kpi-icon .material-symbols-outlined { font-size: 16px !important; color: inherit !important; }
body#spa-crm .crm-kpi-lbl { font-size: 12.5px !important; font-weight: 500 !important; color: var(--crm-muted) !important; text-transform: none !important; letter-spacing: 0 !important; }
body#spa-crm .crm-kpi-val { font-size: clamp(19px, 1.2vw + 10px, 26px) !important; overflow-wrap: anywhere; font-weight: 700 !important; letter-spacing: -0.02em; color: var(--crm-text) !important; line-height: 1.15 !important; }
body#spa-crm .crm-kpi-sub { font-size: 12px !important; color: var(--crm-muted) !important; margin-top: 4px; }
body#spa-crm .crm-kpi[data-kpi="pipeline"] { order: -1; background: linear-gradient(135deg, var(--crm-accent-soft), var(--crm-surface) 70%) !important; border-color: color-mix(in srgb, var(--crm-accent) 28%, var(--crm-line)) !important; }
body#spa-crm .crm-kpi[data-kpi="pipeline"] .crm-kpi-val { font-size: clamp(24px, 2vw + 12px, 32px) !important; color: var(--crm-accent-strong) !important; }
body#spa-crm .crm-kpi[data-kpi="ganhas"] .crm-kpi-icon { background: var(--crm-ok-soft) !important; color: var(--crm-ok) !important; }
body#spa-crm .crm-kpi[data-kpi="perdidas"] .crm-kpi-icon { background: var(--crm-bad-soft) !important; color: var(--crm-bad) !important; }
@media (max-width: 1179px) {
  body#spa-crm .crm-kpi-grid { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)) !important; }
  body#spa-crm .crm-kpi[data-kpi="pipeline"] { grid-column: 1 / -1; }
}
@media (max-width: 560px) { body#spa-crm .crm-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }

/* ---------- 8. Home: cartões, gráficos, tabelas ---------- */
body#spa-crm .crm-chart-card {
  background: var(--crm-surface) !important;
  border: 1px solid var(--crm-line) !important;
  border-radius: var(--crm-radius) !important;
  box-shadow: var(--crm-shadow) !important;
  padding: 0 !important;
  overflow: hidden;
}
body#spa-crm .crm-chart-head { padding: 14px 16px 10px !important; border-bottom: 0 !important; }
body#spa-crm .crm-chart-title { font-size: 14px !important; font-weight: 700 !important; color: var(--crm-text) !important; }
body#spa-crm .crm-chart-sub { font-size: 12px !important; color: var(--crm-muted) !important; margin-top: 2px; }
body#spa-crm .crm-chart-wrap,
body#spa-crm .crm-chart-wrap.crm-has-svgchart { padding: 4px 16px 16px !important; }
body#spa-crm .crm-has-svgchart { height: auto !important; min-height: 0 !important; max-height: none !important; }
body#spa-crm .crm-dash-empty { color: var(--crm-muted); font-size: 13px; padding: 18px 16px; text-align: center; }

body#spa-crm .crm-svgchart { width: 100%; }
body#spa-crm .crm-svgchart-svg { width: 100%; height: auto; display: block; }
body#spa-crm .crm-svgchart-grid { stroke: var(--crm-line); stroke-width: 1; }
body#spa-crm .crm-svgchart-eixo { fill: var(--crm-muted); font: 500 11px var(--crm-font); }
body#spa-crm .crm-svgchart-guia { stroke: var(--crm-line-strong); stroke-width: 1; stroke-dasharray: 3 3; }
body#spa-crm .crm-svgchart-ponto { stroke: var(--crm-surface); stroke-width: 1.5; }
body#spa-crm .crm-svgchart-wrap { position: relative; }
body#spa-crm .crm-svgchart-dica {
  position: absolute; top: 6px; z-index: 3; min-width: 130px;
  background: #0d141b; color: #fff; border: 1px solid rgba(255, 255, 255, .12); border-radius: var(--crm-radius-sm);
  padding: 8px 10px; font-size: 12px; line-height: 1.5; box-shadow: var(--crm-shadow-pop); pointer-events: none;
}
body#spa-crm .crm-svgchart-dica b { display: block; margin-bottom: 2px; }
body#spa-crm .crm-svgchart-dica span { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
body#spa-crm .crm-svgchart-dica i, body#spa-crm .crm-svgchart-legend i { width: 9px; height: 9px; border-radius: 3px; display: inline-block; flex: 0 0 9px; }
body#spa-crm .crm-svgchart-legend { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12px; color: var(--crm-muted); }
body#spa-crm .crm-svgchart-legend li { display: flex; align-items: center; gap: 6px; }
body#spa-crm .crm-svgchart-vazio { color: var(--crm-muted); text-align: center; padding: 24px 0; }

/* funil em barras */
body#spa-crm .crm-hbar { display: flex; flex-direction: column; gap: 2px; }
body#spa-crm .crm-hbar-row { display: grid; grid-template-columns: 150px 1fr; gap: 12px; align-items: center; padding: 7px 8px; border-radius: var(--crm-radius-sm); }
body#spa-crm .crm-hbar-row:hover { background: var(--crm-surface-2); }
body#spa-crm .crm-hbar-label { font-size: 13px; font-weight: 500; color: var(--crm-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body#spa-crm .crm-hbar-sets { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
body#spa-crm .crm-hbar-line { display: grid; grid-template-columns: 1fr 44px; gap: 10px; align-items: center; }
body#spa-crm .crm-hbar-track { height: 18px; background: var(--crm-surface-2); border-radius: var(--crm-radius-sm); overflow: hidden; display: block; }
body#spa-crm .crm-hbar-fill { display: block; height: 100%; border-radius: var(--crm-radius-sm); transition: width .3s ease; }
body#spa-crm .crm-hbar-val { text-align: right; font-size: 13px; font-weight: 700; color: var(--crm-text); }

/* rosca */
body#spa-crm .crm-svgchart-rosca-box { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
body#spa-crm .crm-svgchart-rosca { width: 132px; height: 132px; flex: 0 0 132px; }
body#spa-crm .crm-svgchart-rosca-fundo { stroke: var(--crm-surface-2); }
body#spa-crm .crm-svgchart-rosca-total { fill: var(--crm-text); font: 700 20px var(--crm-font); }
body#spa-crm .crm-svgchart-rosca-sub { fill: var(--crm-muted); font: 500 9px var(--crm-font); }
body#spa-crm .crm-svgchart-legend-col { flex: 1 1 140px; flex-direction: column; flex-wrap: nowrap; gap: 6px; margin: 0; }
body#spa-crm .crm-svgchart-legend-col li { display: grid; grid-template-columns: 12px 1fr auto auto; gap: 8px; }
body#spa-crm .crm-svgchart-legend-col b { color: var(--crm-text); font-variant-numeric: tabular-nums; }
body#spa-crm .crm-svgchart-legend-col em { font-style: normal; min-width: 34px; text-align: right; }

/* lista de etapas do pipeline */
body#spa-crm #page-dashboard-executivo .crm-exec-stage-list { padding: 0 16px 16px !important; gap: 8px !important; }
body#spa-crm #page-dashboard-executivo .crm-exec-stage-row {
  background: var(--crm-surface) !important;
  border: 1px solid var(--crm-line) !important;
  border-radius: var(--crm-radius-sm) !important;
  box-shadow: none !important;
  padding: 9px 12px !important;
}
body#spa-crm #page-dashboard-executivo .crm-exec-stage-row:hover { border-color: var(--crm-accent) !important; background: var(--crm-accent-softer) !important; }
body#spa-crm #page-dashboard-executivo .crm-exec-stage-name { font-size: 13px !important; font-weight: 600 !important; }

/* tabelas do dashboard */
body#spa-crm .crm-exec-table { width: 100%; border-collapse: collapse; font-size: 13px; }
body#spa-crm .crm-exec-table th { font-size: 11.5px !important; font-weight: 600 !important; color: var(--crm-muted) !important; text-transform: none !important; letter-spacing: 0 !important; text-align: left; padding: 8px 16px !important; border-bottom: 1px solid var(--crm-line) !important; background: var(--crm-surface-2) !important; }
body#spa-crm .crm-exec-table td { padding: 10px 16px !important; border-bottom: 1px solid var(--crm-line) !important; color: var(--crm-text); }
body#spa-crm .crm-exec-table tbody tr:last-child td { border-bottom: 0 !important; }
body#spa-crm .crm-exec-table tr.is-clickable:hover td { background: var(--crm-accent-softer); cursor: pointer; }
body#spa-crm .crm-exec-footnote { color: var(--crm-faint); font-size: 12px; margin-top: 12px; }

/* ---------- 9. Negociações (kanban) ---------- */
body#spa-crm .neg-header { display: flex !important; justify-content: space-between; align-items: center !important; gap: 12px 16px; flex-wrap: wrap; margin-bottom: 12px !important; }
body#spa-crm .neg-header-titles { display: flex !important; align-items: center; gap: 10px 14px; flex-wrap: wrap; }
body#spa-crm .neg-subtitle { display: none !important; }
body#spa-crm .neg-title { display: flex; align-items: center; gap: 8px; }
body#spa-crm .neg-title-count { background: var(--crm-accent-soft) !important; color: var(--crm-accent-strong) !important; border-radius: 999px !important; font-size: 12px !important; font-weight: 700 !important; padding: 2px 9px !important; }
body#spa-crm .neg-header-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
body#spa-crm .neg-search { position: relative; }
body#spa-crm .neg-search input { width: min(420px, 100%); padding-left: 34px !important; }
body#spa-crm .neg-search .material-symbols-outlined { color: var(--crm-faint) !important; }
body#spa-crm .neg-search-bar { margin-bottom: 12px !important; }

body#spa-crm .neg-col {
  background: var(--crm-surface-2) !important;
  border: 1px solid var(--crm-line) !important;
  border-top: 3px solid var(--neg-col-color, var(--crm-accent)) !important;
  border-radius: var(--crm-radius) !important;
  box-shadow: none !important;
}
body#spa-crm .neg-col-head { background: transparent !important; padding: 10px 12px 8px !important; border: 0 !important; }
body#spa-crm .neg-col-title { font-size: 12px !important; font-weight: 700 !important; letter-spacing: .04em !important; text-transform: uppercase !important; color: var(--crm-text) !important; }
body#spa-crm .neg-col-count { background: var(--crm-surface) !important; border: 1px solid var(--crm-line) !important; color: var(--crm-muted) !important; border-radius: 999px !important; font-size: 11px !important; font-weight: 700 !important; padding: 1px 8px !important; }
body#spa-crm .neg-col-value { font-size: 12px !important; font-weight: 600 !important; color: var(--crm-muted) !important; }
body#spa-crm .neg-col-toggle, body#spa-crm .neg-col-tools button { color: var(--crm-faint) !important; }
html[data-crm-estilo="bitrix"] body#spa-crm .neg-col-head,
html:not([data-crm-estilo]) body#spa-crm .neg-col-head { background: color-mix(in srgb, var(--neg-col-color, var(--crm-accent)) 13%, var(--crm-surface)) !important; border-radius: calc(var(--crm-radius) - 1px) calc(var(--crm-radius) - 1px) 0 0; }
html[data-crm-estilo="bitrix"] body#spa-crm .neg-col-title,
html:not([data-crm-estilo]) body#spa-crm .neg-col-title { color: color-mix(in srgb, var(--neg-col-color, var(--crm-accent)) 65%, #000) !important; }

body#spa-crm .neg-card {
  background: var(--crm-surface) !important;
  border: 1px solid var(--crm-line) !important;
  border-top: 1px solid var(--crm-line) !important;
  border-radius: var(--crm-radius) !important;
  box-shadow: var(--crm-shadow) !important;
  padding: 10px 12px !important;
  transition: border-color .14s ease, box-shadow .14s ease, transform .14s ease;
}
body#spa-crm .neg-card:hover { border-color: var(--crm-line-strong) !important; box-shadow: var(--crm-shadow-pop) !important; }
body#spa-crm .neg-card-top { margin-bottom: 4px; }
body#spa-crm .neg-temp { background: transparent !important; border: 0 !important; padding: 0 !important; }
body#spa-crm .neg-temp-lbl { display: none !important; }
body#spa-crm .neg-temp .material-symbols-outlined { font-size: 17px !important; }
body#spa-crm .neg-temp.is-quente .material-symbols-outlined { color: var(--crm-bad) !important; }
body#spa-crm .neg-temp.is-morno .material-symbols-outlined { color: #d97706 !important; }
body#spa-crm .neg-temp.is-frio .material-symbols-outlined { color: #3b82f6 !important; }
body#spa-crm .neg-badge { background: transparent !important; border: 0 !important; padding: 0 !important; }
body#spa-crm .neg-badge .material-symbols-outlined { font-size: 17px !important; }
body#spa-crm .neg-risk-late .material-symbols-outlined { color: var(--crm-bad) !important; }
body#spa-crm .neg-card-menu { opacity: 0; transition: opacity .12s ease; color: var(--crm-faint) !important; }
body#spa-crm .neg-card:hover .neg-card-menu, body#spa-crm .neg-card:focus-within .neg-card-menu { opacity: 1; }
body#spa-crm .neg-card-name { font-size: 13.5px !important; font-weight: 600 !important; line-height: 1.3 !important; color: var(--crm-text) !important; }
body#spa-crm .neg-card-meta { display: flex !important; align-items: center; gap: 8px; margin-top: 4px; font-size: 12px !important; color: var(--crm-muted) !important; }
body#spa-crm .neg-card-value { font-size: 13px !important; font-weight: 700 !important; color: var(--crm-text) !important; }
body#spa-crm .neg-foot-sep { display: none !important; }
body#spa-crm .neg-seller { display: none !important; }
body#spa-crm .neg-avatar {
  width: 22px; height: 22px; border-radius: 50%;
  display: inline-grid; place-items: center; flex: 0 0 22px;
  background: var(--crm-accent-soft); color: var(--crm-accent-strong);
  font-size: 9.5px; font-weight: 700; letter-spacing: .02em;
  overflow: hidden; padding: 0;
}
body#spa-crm .neg-avatar img,
body#spa-crm .crm-rank-avatar img,
body#spa-crm .crm-person-avatar img,
body#spa-crm .ae-avatar img,
body#spa-crm .rd-det-avatar img {
  width: 100%; height: 100%; object-fit: cover; display: block; border-radius: inherit;
}
body#spa-crm .neg-prob { margin-left: auto; font-size: 11.5px !important; color: var(--crm-muted) !important; background: transparent !important; }
body#spa-crm .neg-prob .material-symbols-outlined { display: none; }
body#spa-crm .neg-card-next {
  display: flex !important; align-items: center; gap: 6px; margin-top: 8px;
  background: transparent !important; border: 0 !important; padding: 0 !important;
  font-size: 12px !important; color: var(--crm-muted) !important;
}
body#spa-crm .neg-card-next .material-symbols-outlined { font-size: 15px !important; color: var(--crm-faint) !important; }
body#spa-crm .neg-card-next.is-late { background: var(--crm-bad-soft) !important; color: var(--crm-bad) !important; padding: 4px 8px !important; border-radius: var(--crm-radius-sm) !important; font-weight: 600; }
body#spa-crm .neg-card-next.is-late .material-symbols-outlined { color: var(--crm-bad) !important; }

/* ---------- 10. Páginas com tabela (Oportunidades e afins) ---------- */
body#spa-crm .crm-page-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
body#spa-crm .crm-panel { background: var(--crm-surface); border: 1px solid var(--crm-line); border-radius: var(--crm-radius); box-shadow: var(--crm-shadow); overflow: hidden; }
body#spa-crm .crm-panel-bar { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--crm-line); flex-wrap: wrap; }
body#spa-crm .crm-search { position: relative; flex: 0 1 380px; min-width: 220px; }
body#spa-crm .crm-search .material-symbols-outlined { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); font-size: 18px !important; color: var(--crm-faint); pointer-events: none; }
body#spa-crm .crm-search input { width: 100%; padding: 0 12px 0 34px !important; }
body#spa-crm .crm-table { width: 100%; border-collapse: collapse; font-size: 13px; }
body#spa-crm .crm-table th {
  text-align: left; padding: 10px 16px; background: var(--crm-surface-2);
  font-size: 11.5px; font-weight: 600; color: var(--crm-muted); border-bottom: 1px solid var(--crm-line); white-space: nowrap;
}
body#spa-crm .crm-table th.sort-col { cursor: pointer; user-select: none; }
body#spa-crm .crm-table th.sort-col:hover { color: var(--crm-text); }
body#spa-crm .crm-table th .material-symbols-outlined { font-size: 15px !important; vertical-align: -3px; color: var(--crm-faint); }
body#spa-crm .crm-table td { padding: 11px 16px; border-bottom: 1px solid var(--crm-line); color: var(--crm-text); vertical-align: middle; }
body#spa-crm .crm-table tbody tr { cursor: pointer; transition: background .12s ease; }
body#spa-crm .crm-table tbody tr:hover td { background: var(--crm-accent-softer); }
body#spa-crm .crm-table tbody tr:last-child td { border-bottom: 0; }
body#spa-crm .crm-table td.is-num, body#spa-crm .crm-table th.is-num { text-align: right; }
body#spa-crm .crm-cell-main { font-weight: 600; }
body#spa-crm .crm-cell-muted { color: var(--crm-muted); }
body#spa-crm .crm-cell-person { display: inline-flex; align-items: center; gap: 8px; }
body#spa-crm .crm-etapa-pill { display: inline-flex; align-items: center; gap: 6px; padding: 2px 9px; border-radius: 999px; background: var(--crm-surface-2); border: 1px solid var(--crm-line); font-size: 12px; font-weight: 500; white-space: nowrap; }
body#spa-crm .crm-etapa-pill .kanban-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin: 0; }
body#spa-crm .crm-prob { display: inline-flex; align-items: center; gap: 8px; min-width: 110px; }
body#spa-crm .crm-prob-track { flex: 1; height: 6px; background: var(--crm-line); border-radius: 999px; overflow: hidden; }
body#spa-crm .crm-prob-fill { display: block; height: 100%; background: var(--crm-accent); border-radius: 999px; }
body#spa-crm .crm-prob-val { font-size: 12px; font-weight: 700; color: var(--crm-muted); min-width: 32px; text-align: right; }
body#spa-crm .crm-table-vazio { text-align: center; color: var(--crm-muted); padding: 36px 16px !important; }

/* ---------- 11. Configurações ---------- */
body#spa-crm #page-configuracoes .crm-config-card { background: var(--crm-surface) !important; border: 1px solid var(--crm-line) !important; border-radius: var(--crm-radius) !important; box-shadow: var(--crm-shadow) !important; }
body#spa-crm #page-configuracoes .crm-config-card h4 { font-size: 14px !important; font-weight: 700 !important; }
body#spa-crm .crm-marca-body { padding: 18px 22px 22px; }

/* ---------- 12. Compatibilidade: utilitários do Tailwind que sobraram em telas antigas ---------- */
/* Pipeline (legado), Orçamentos ERP e WhatsApp foram escritos com Tailwind, removido do boot. */
body#spa-crm .gap-sm { gap: 8px; } body#spa-crm .gap-md { gap: 12px; } body#spa-crm .gap-lg { gap: 24px; } body#spa-crm .gap-gutter { gap: 16px; }
body#spa-crm .mb-6 { margin-bottom: 24px; } body#spa-crm .mb-8 { margin-bottom: 32px; } body#spa-crm .mb-lg { margin-bottom: 24px; } body#spa-crm .mt-lg { margin-top: 24px; }
body#spa-crm .ml-2 { margin-left: 8px; } body#spa-crm .mr-2 { margin-right: 8px; } body#spa-crm .mr-4 { margin-right: 16px; } body#spa-crm .pb-4 { padding-bottom: 16px; }
body#spa-crm .p-md { padding: 16px; } body#spa-crm .p-lg { padding: 20px; } body#spa-crm .py-4 { padding-top: 16px; padding-bottom: 16px; } body#spa-crm .py-8 { padding-top: 32px; padding-bottom: 32px; }
body#spa-crm .py-1\.5 { padding-top: 6px; padding-bottom: 6px; } body#spa-crm .px-1 { padding-left: 4px; padding-right: 4px; }
body#spa-crm .pl-3 { padding-left: 12px; } body#spa-crm .pl-10 { padding-left: 40px; } body#spa-crm .pr-4 { padding-right: 16px; } body#spa-crm .pr-8 { padding-right: 32px; }
body#spa-crm .border { border: 1px solid var(--crm-line); } body#spa-crm .border-b { border-bottom: 1px solid var(--crm-line); }
body#spa-crm .border-t { border-top: 1px solid var(--crm-line); } body#spa-crm .border-r { border-right: 1px solid var(--crm-line); }
body#spa-crm .border-outline-variant { border-color: var(--crm-line); } body#spa-crm .border-collapse { border-collapse: collapse; }
body#spa-crm .rounded-md { border-radius: var(--crm-radius-sm); } body#spa-crm .rounded-t-xl { border-radius: var(--crm-radius) var(--crm-radius) 0 0; } body#spa-crm .rounded-b-xl { border-radius: 0 0 var(--crm-radius) var(--crm-radius); }
body#spa-crm .divide-y > * + * { border-top: 1px solid var(--crm-line); }
body#spa-crm .font-headline-lg, body#spa-crm .text-headline-lg { font-size: 22px; line-height: 1.2; } body#spa-crm .font-headline-md, body#spa-crm .text-headline-md { font-size: 18px; }
body#spa-crm .font-title-lg, body#spa-crm .text-title-lg { font-size: 16px; font-weight: 600; } body#spa-crm .font-body-md, body#spa-crm .text-body-md { font-size: 14px; }
body#spa-crm .tracking-tight { letter-spacing: -0.015em; } body#spa-crm .tracking-wider { letter-spacing: .04em; }
body#spa-crm .text-\[10px\] { font-size: 10px; } body#spa-crm .text-\[18px\] { font-size: 18px; } body#spa-crm .text-\[32px\] { font-size: 32px; }
body#spa-crm .text-on-primary { color: var(--crm-on-accent); }
body#spa-crm .bg-surface-container-high\/50, body#spa-crm .bg-surface-container-low\/50, body#spa-crm .bg-surface-container-low\/30 { background: var(--crm-surface-2); }
body#spa-crm .bg-surface-container-lowest\/50, body#spa-crm .bg-surface-container\/80 { background: var(--crm-surface); }
body#spa-crm .bg-primary-container\/10 { background: var(--crm-accent-soft); } body#spa-crm .bg-secondary-container\/10 { background: var(--crm-ok-soft); } body#spa-crm .bg-tertiary-container\/10 { background: var(--crm-warn-soft); }
body#spa-crm .bg-secondary { background: var(--crm-ok); } body#spa-crm .bg-surface-variant { background: var(--crm-line); }
body#spa-crm .hover\:bg-surface-container-highest:hover { background: var(--crm-surface-2); } body#spa-crm .hover\:bg-error-container:hover { background: var(--crm-bad-soft); }
body#spa-crm .hover\:text-error:hover { color: var(--crm-bad); } body#spa-crm .hover\:text-on-surface:hover { color: var(--crm-text); }
body#spa-crm .hover\:brightness-110:hover { filter: brightness(1.08); } body#spa-crm .hover\:shadow-lg:hover { box-shadow: var(--crm-shadow-pop); } body#spa-crm .active\:scale-90:active { transform: scale(.94); }
body#spa-crm .transition-all { transition: all .14s ease; } body#spa-crm .outline-none { outline: 0; } body#spa-crm .backdrop-blur { backdrop-filter: blur(6px); }
body#spa-crm .focus\:ring-2:focus, body#spa-crm .focus\:border-primary:focus { border-color: var(--crm-accent); box-shadow: 0 0 0 3px var(--crm-ring); outline: 0; }
body#spa-crm .grid-cols-1 { grid-template-columns: 1fr; } body#spa-crm .max-w-md { max-width: 28rem; }
body#spa-crm .w-10 { width: 40px; } body#spa-crm .h-10 { height: 40px; } body#spa-crm .w-1\.5 { width: 6px; } body#spa-crm .h-1\.5 { height: 6px; }
body#spa-crm .w-\[320px\] { width: 320px; } body#spa-crm .h-\[600px\] { height: 600px; } body#spa-crm .h-\[52px\] { height: 52px; }
body#spa-crm .left-3 { left: 12px; } body#spa-crm .top-1\/2 { top: 50%; } body#spa-crm .-translate-y-1\/2 { transform: translateY(-50%); }
body#spa-crm .overflow-y-auto { overflow-y: auto; } body#spa-crm .kanban-scroll { overflow-x: auto; }
@media (min-width: 768px) {
  body#spa-crm .md\:flex-row { flex-direction: row; } body#spa-crm .md\:items-end { align-items: flex-end; } body#spa-crm .md\:items-center { align-items: center; }
  body#spa-crm .md\:grid-cols-3 { grid-template-columns: repeat(3, 1fr); } body#spa-crm .md\:w-72 { width: 18rem; }
}


/* ---------- 13. Seletor de estilo (Configurações → Aparência) ---------- */
body#spa-crm .crm-estilo-card { margin-bottom: 16px; }
body#spa-crm .crm-estilo-body { padding: 18px 22px 22px; display: flex; flex-direction: column; gap: 18px; }
body#spa-crm .crm-estilo-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; }
body#spa-crm .crm-estilo-op {
  text-align: left; display: flex; flex-direction: column; gap: 4px; cursor: pointer;
  padding: 10px 10px 12px; background: var(--crm-surface); color: var(--crm-text);
  border: 2px solid var(--crm-line); border-radius: var(--crm-radius); font: inherit;
  transition: border-color .14s ease, box-shadow .14s ease;
}
body#spa-crm .crm-estilo-op:hover { border-color: var(--crm-line-strong); }
body#spa-crm .crm-estilo-op[aria-checked="true"] { border-color: var(--crm-accent); box-shadow: 0 0 0 3px var(--crm-ring); }
body#spa-crm .crm-estilo-op strong { font-size: 14px; margin-top: 6px; }
body#spa-crm .crm-estilo-op small { font-size: 12px; color: var(--crm-muted); line-height: 1.35; }
body#spa-crm .crm-estilo-prev { position: relative; display: block; height: 96px; border-radius: 6px; overflow: hidden; background: #eef2f4; border: 1px solid #dde4e8; }
body#spa-crm .crm-estilo-prev i { position: absolute; display: block; }
body#spa-crm .crm-estilo-prev .pv-bar { left: 0; right: 0; top: 0; height: 22px; background: #1c86d1; }
body#spa-crm .crm-estilo-prev .pv-card { top: 34px; width: 38%; height: 44px; background: #fff; border: 1px solid #dde4e8; border-radius: 4px; }
body#spa-crm .crm-estilo-prev .pv-c1 { left: 6%; }
body#spa-crm .crm-estilo-prev .pv-c2 { left: 52%; }
body#spa-crm .crm-estilo-prev .pv-btn { right: 8px; top: 5px; width: 30px; height: 12px; border-radius: 2px; background: #fff; }
body#spa-crm .crm-estilo-op[data-estilo="corporativo"] .crm-estilo-prev { background: #f3f4f6; }
body#spa-crm .crm-estilo-op[data-estilo="corporativo"] .pv-bar { background: #fff; border-bottom: 1px solid #e2e5e9; }
body#spa-crm .crm-estilo-op[data-estilo="corporativo"] .pv-btn { background: #2456c9; border-radius: 3px; }
body#spa-crm .crm-estilo-op[data-estilo="suave"] .crm-estilo-prev { background: #f2f6f8; border-radius: 12px; }
body#spa-crm .crm-estilo-op[data-estilo="suave"] .pv-bar { background: #fff; border-bottom: 1px solid #e4ebef; }
body#spa-crm .crm-estilo-op[data-estilo="suave"] .pv-card { border-radius: 10px; box-shadow: 0 4px 10px rgba(28, 45, 60, .07); border-color: #e4ebef; }
body#spa-crm .crm-estilo-op[data-estilo="suave"] .pv-btn { background: #0e9f8e; border-radius: 999px; }
body#spa-crm .crm-acento-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
body#spa-crm .crm-acento-row label { font-size: 12px; font-weight: 700; color: var(--crm-muted); }
body#spa-crm .crm-acento-row input[type="color"] { width: 44px; height: 34px; padding: 2px; border: 1px solid var(--crm-line-strong); border-radius: var(--crm-radius-sm); background: var(--crm-surface); cursor: pointer; }
body#spa-crm .crm-acento-row code { font: 600 12px var(--crm-font); color: var(--crm-muted); }
body#spa-crm .crm-estilo-card[aria-busy="true"] { opacity: .7; cursor: progress; }
body#spa-crm button:disabled { opacity: .55; cursor: not-allowed; }

/* ---------- 14. Padronização das telas antigas (Agenda, Contatos, Relatórios, Roadmap…) ---------- */
/* Títulos de página: tudo 22px/700 (as telas antigas usavam 34px/800) */
body#spa-crm .ac-title,
body#spa-crm .ae-title,
body#spa-crm .crm-ct-title,
body#spa-crm .rm-title,
body#spa-crm .crm-lote-title,
body#spa-crm h2.font-headline-lg {
  font-size: 22px !important;
  font-weight: 700 !important;
  letter-spacing: -0.015em !important;
  line-height: 1.2 !important;
  color: var(--crm-text) !important;
}

/* Botões principais de cada tela e dos modais: mesma cor/forma do sistema */
body#spa-crm .crm-eq-btn-primary,
body#spa-crm .crm-ct-btn-primary,
body#spa-crm .ac-btn-primary,
body#spa-crm .ae-btn-primary,
body#spa-crm .rm-btn-primary,
body#spa-crm .crm-lote-btn-primary,
body#spa-crm .crm-btn-primary,
body#spa-crm .crm-modal-btn-primary,
body#spa-crm .crm-etapa-btn-primary,
body#spa-crm .crm-agenda-btn-primary,
body#spa-crm .rd-det-btn-primary,
body#spa-crm button.bg-primary,
body#spa-crm a.bg-primary {
  background: var(--crm-btn-bg) !important;
  color: var(--crm-btn-fg) !important;
  border: 0 !important;
  border-radius: var(--crm-radius-sm) !important;
  font-weight: 700 !important;
  box-shadow: none !important;
}
body#spa-crm .crm-eq-btn-primary:hover,
body#spa-crm .crm-ct-btn-primary:hover,
body#spa-crm .ac-btn-primary:hover,
body#spa-crm .ae-btn-primary:hover,
body#spa-crm .rm-btn-primary:hover,
body#spa-crm .crm-lote-btn-primary:hover,
body#spa-crm .crm-btn-primary:hover,
body#spa-crm .crm-modal-btn-primary:hover,
body#spa-crm .crm-etapa-btn-primary:hover,
body#spa-crm .crm-agenda-btn-primary:hover,
body#spa-crm .rd-det-btn-primary:hover,
body#spa-crm button.bg-primary:hover,
body#spa-crm a.bg-primary:hover { background: var(--crm-btn-hover) !important; filter: none; }
body#spa-crm .crm-eq-btn-primary .material-symbols-outlined,
body#spa-crm .crm-ct-btn-primary .material-symbols-outlined,
body#spa-crm .ac-btn-primary .material-symbols-outlined,
body#spa-crm button.bg-primary .material-symbols-outlined { color: inherit !important; }

/* Botões secundários */
body#spa-crm .crm-eq-btn-ghost,
body#spa-crm .crm-ct-btn-ghost,
body#spa-crm .neg-btn-ghost,
body#spa-crm .rd-det-btn-outline,
body#spa-crm .rd-det-btn-ghost,
body#spa-crm .crm-modal-btn-ghost,
body#spa-crm .crm-etapa-btn-ghost,
body#spa-crm .crm-agenda-btn-ghost,
body#spa-crm .crm-lote-btn-ghost,
body#spa-crm .crm-btn-outline,
body#spa-crm .ac-btn-ghost {
  background: var(--crm-surface) !important;
  color: var(--crm-text) !important;
  border: 1px solid var(--crm-line-strong) !important;
  border-radius: var(--crm-radius-sm) !important;
  font-weight: 600 !important;
  box-shadow: none !important;
}
body#spa-crm .crm-eq-btn-ghost:hover,
body#spa-crm .crm-ct-btn-ghost:hover,
body#spa-crm .neg-btn-ghost:hover,
body#spa-crm .crm-modal-btn-ghost:hover,
body#spa-crm .ac-btn-ghost:hover { background: var(--crm-surface-2) !important; }
html[data-crm-estilo="suave"] body#spa-crm .crm-eq-btn-primary,
html[data-crm-estilo="suave"] body#spa-crm .crm-ct-btn-primary,
html[data-crm-estilo="suave"] body#spa-crm .ac-btn-primary,
html[data-crm-estilo="suave"] body#spa-crm .crm-modal-btn-primary { border-radius: 999px !important; }


/* ---------- 15. Seletor de tema (Configurações → Aparência) ---------- */
body#spa-crm .crm-tema-card { margin-bottom: 16px; }
body#spa-crm .crm-tema-body { padding: 18px 22px 22px; }
body#spa-crm .crm-tema-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; max-width: 760px; }
body#spa-crm .crm-tema-op {
  display: grid; grid-template-columns: 34px 1fr; column-gap: 12px; align-items: center; text-align: left; cursor: pointer;
  padding: 12px 14px; background: var(--crm-surface); color: var(--crm-text);
  border: 2px solid var(--crm-line); border-radius: var(--crm-radius); font: inherit;
  transition: border-color .14s ease, box-shadow .14s ease;
}
body#spa-crm .crm-tema-op .material-symbols-outlined { grid-row: 1 / 3; font-size: 26px !important; color: var(--crm-muted); }
body#spa-crm .crm-tema-op strong { font-size: 14px; }
body#spa-crm .crm-tema-op small { font-size: 12px; color: var(--crm-muted); line-height: 1.35; }
body#spa-crm .crm-tema-op:hover { border-color: var(--crm-line-strong); }
body#spa-crm .crm-tema-op[aria-checked="true"] { border-color: var(--crm-accent); box-shadow: 0 0 0 3px var(--crm-ring); }
body#spa-crm .crm-tema-op[aria-checked="true"] .material-symbols-outlined { color: var(--crm-accent-strong); }


/* ---------- 16. Tema escuro: rede de proteção contra as cores fixas do CSS antigo ---------- */
/* O style.css antigo força branco/azul-escuro com !important em cartões, tabelas e campos (nos dois temas).
   Aqui cada uma dessas regras ganha o equivalente escuro. */
html[data-crm-tema="escuro"] body#spa-crm :is(.glass-card, .chart-card, .kpi-card, .table-crm, .kanban-col, .opp-card, .negocio-card, .agenda-item, .wa-shell, .org-box, .roadmap-step, .rd-table-card),
html[data-crm-tema="escuro"] body#spa-crm.page-content :is(.glass-card),
html[data-crm-tema="escuro"] body#spa-crm .page-content :is(.glass-card, .chart-card, .kpi-card, .rd-table-card, .kanban-col, .opp-card, .negocio-card, .agenda-item, .wa-shell, .org-box, .roadmap-step),
html[data-crm-tema="escuro"] body#spa-crm :is(.bg-surface-container-low, .bg-surface-container, .bg-surface-container-high, .bg-surface-container-lowest) {
  background: var(--crm-surface) !important;
  border-color: var(--crm-line) !important;
  box-shadow: var(--crm-shadow) !important;
}
html[data-crm-tema="escuro"] body#spa-crm table td,
html[data-crm-tema="escuro"] body#spa-crm .table-crm td { color: var(--crm-text) !important; }
html[data-crm-tema="escuro"] body#spa-crm table th,
html[data-crm-tema="escuro"] body#spa-crm .table-crm th { background: var(--crm-surface-2) !important; color: var(--crm-muted) !important; border-color: var(--crm-line) !important; }
html[data-crm-tema="escuro"] body#spa-crm :is(input, select, textarea, .form-control, .form-select):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]) {
  background: var(--crm-surface) !important;
  color: var(--crm-text) !important;
  border-color: var(--crm-line-strong) !important;
}
html[data-crm-tema="escuro"] body#spa-crm ::placeholder { color: var(--crm-faint) !important; opacity: 1; }
html[data-crm-tema="escuro"] body#spa-crm select option { background: var(--crm-surface); color: var(--crm-text); }
/* títulos das colunas do Kanban: clareia a cor da etapa em vez de escurecer */
html[data-crm-tema="escuro"] body#spa-crm .neg-col-title { color: color-mix(in srgb, var(--neg-col-color, var(--crm-accent)) 50%, #fff) !important; }

/* ---------- 17. Tema escuro: telas antigas (Agenda, Roadmap, Relatórios, Empresas, Configurações…) ---------- */
html[data-crm-tema="escuro"] body#spa-crm :is(
  .neg-search, .ac-kpi, .ac-view-switch, .ac-cal-card, .ac-day-count, .ac-empty, .agenda-grid-cell,
  .ae-kpi, .ae-btn, .ae-filters, .ae-list-count, .ae-empty,
  .crm-ct-pager, .crm-emp-kpi, .rd-report-card,
  .rm-card, .rm-kpi, .rm-timeline, .rm-btn,
  .crm-lote-back, .crm-lote-aviso, .crm-lote-card, .crm-config-menu > div
) {
  background: var(--crm-surface) !important;
  border-color: var(--crm-line) !important;
  color: var(--crm-text) !important;
}
html[data-crm-tema="escuro"] body#spa-crm :is(.ac-kpi.is-on, .ae-kpi.is-on) { background: var(--crm-accent-soft) !important; border-color: var(--crm-accent) !important; }
html[data-crm-tema="escuro"] body#spa-crm :is(.ac-kpi.is-late, .ae-kpi.is-late) { background: var(--crm-bad-soft) !important; border-color: color-mix(in srgb, var(--crm-bad) 45%, transparent) !important; }

/* rótulos e textos de apoio */
html[data-crm-tema="escuro"] body#spa-crm :is(
  .ac-kpi-lbl, .ac-kpi-hint, .ae-kpi-lbl, .ae-kpi-hint, .rm-kpi-lbl, .crm-ct-pager-info, .crm-ct-empresa, .crm-ct-num,
  .ac-view-btn, .agenda-grid-header, .agenda-grid-cell.other-month, .text-on-surface-variant, .rm-card li, .crm-lote-aviso span
) { color: var(--crm-muted) !important; }
html[data-crm-tema="escuro"] body#spa-crm :is(.ac-view-btn.is-on, .ac-view-btn.active) { background: var(--crm-accent-soft) !important; color: var(--crm-accent-strong) !important; }
/* valores e títulos */
html[data-crm-tema="escuro"] body#spa-crm :is(
  .ae-kpi-val, .rm-kpi-val, .rm-card-titulo, .crm-ct-nome, .crm-emp-kpi b, .crm-emp-kpi strong, .ac-kpi-val,
  .font-title-lg, .font-headline-md, .text-on-surface
) { color: var(--crm-text) !important; }
html[data-crm-tema="escuro"] body#spa-crm .material-symbols-outlined { color: inherit; }

/* chips de status e tendências: tons "soft" do tema */
html[data-crm-tema="escuro"] body#spa-crm :is(.crm-status.status-produtivo, .crm-kpi-trend.up, .rm-badge.is-concluida) { background: var(--crm-ok-soft) !important; color: var(--crm-ok) !important; border-color: transparent !important; }
html[data-crm-tema="escuro"] body#spa-crm :is(.crm-status.status-atencao, .rm-badge.is-pendente) { background: var(--crm-warn-soft) !important; color: var(--crm-warn) !important; border-color: transparent !important; }
html[data-crm-tema="escuro"] body#spa-crm :is(.crm-kpi-trend.down, .crm-status.status-critico) { background: var(--crm-bad-soft) !important; color: var(--crm-bad) !important; border-color: transparent !important; }
html[data-crm-tema="escuro"] body#spa-crm .rm-tl-dot { background: var(--crm-surface-2) !important; border-color: var(--crm-line-strong) !important; }

/* Configurações: contadores/menus e botões de item */
html[data-crm-tema="escuro"] body#spa-crm .crm-config-count.is-accent { background: var(--crm-accent-soft) !important; color: var(--crm-accent-strong) !important; }
html[data-crm-tema="escuro"] body#spa-crm .crm-config-menu button { background: transparent !important; color: var(--crm-text) !important; }
html[data-crm-tema="escuro"] body#spa-crm .crm-config-menu button:hover { background: var(--crm-surface-2) !important; }
html[data-crm-tema="escuro"] body#spa-crm .crm-config-menu button.is-danger { color: var(--crm-bad) !important; }
html[data-crm-tema="escuro"] body#spa-crm .crm-config-section-tabs button.is-active,
html[data-crm-tema="escuro"] body#spa-crm [data-config-section].is-active { background: var(--crm-surface) !important; color: var(--crm-accent-strong) !important; }

/* regras antigas por #id (ex.: #page-negociacoes .neg-search) vencem pelo peso: repete com o mesmo peso */
html[data-crm-tema="escuro"] body#spa-crm #page-negociacoes :is(.neg-search, .neg-search input, .neg-toolbar, .neg-select) {
  background: var(--crm-surface) !important;
  color: var(--crm-text) !important;
  border-color: var(--crm-line-strong) !important;
}

/* ---------- 18. Tema escuro: modais, painel lateral, menus e popovers ---------- */
html[data-crm-tema="escuro"] body#spa-crm :is(
  .crm-modal, .crm-modal-foot, .crm-modal-head, .rd-generic-modal, .rd-generic-modal-head, .rd-generic-modal-body, .rd-generic-modal-footer, .rd-search-modal,
  .crm-equipe-modal, .crm-eq-list-wrap, .crm-etapa-modal, .crm-etapa-modal-footer, .crm-etapa-cor-row, .crm-ct-lookup-box, .crm-paleta-modal,
  #crm-side-panel, .crm-opp-hero, .crm-opp-tabs, .crm-opp-ativ-head, .crm-opp-etapa-actions, .crm-opp-panel-foot,
  .rd-floating-panel, .rd-create-menu, .rd-config-menu, .rd-notif-panel, .rd-neg-popover, .rd-user-menu
) {
  background: var(--crm-surface) !important;
  color: var(--crm-text) !important;
  border-color: var(--crm-line) !important;
}
html[data-crm-tema="escuro"] body#spa-crm :is(.crm-modal, .rd-generic-modal, .rd-search-modal, .crm-equipe-modal, .crm-etapa-modal, #crm-side-panel, .rd-floating-panel, .rd-neg-popover) {
  box-shadow: var(--crm-shadow-pop) !important;
}
/* títulos e destaques dentro deles */
html[data-crm-tema="escuro"] body#spa-crm :is(.crm-modal, .rd-generic-modal, .rd-search-modal, .crm-equipe-modal, .crm-etapa-modal, #crm-side-panel, .rd-floating-panel, .rd-neg-popover) :is(h1, h2, h3, h4, strong, b, .crm-opp-title, .crm-opp-valor-prospect):not(.crm-paleta-preview *) { color: var(--crm-text) !important; }
html[data-crm-tema="escuro"] body#spa-crm :is(.crm-modal, .rd-generic-modal, .crm-equipe-modal, .crm-etapa-modal, #crm-side-panel) :is(p, label, small, em, .crm-eq-kicker, .crm-eq-modal-sub, .crm-etapa-cor-hint) { color: var(--crm-muted); }
/* botões-ícone de fechar/enviar */
html[data-crm-tema="escuro"] body#spa-crm :is(#rd-search-close, #rd-search-submit, #crm-generic-close, .crm-eq-close, .crm-etapa-modal-close) { color: var(--crm-muted) !important; background: transparent !important; }

/* chips, alternadores e abas */
html[data-crm-tema="escuro"] body#spa-crm :is(
  .crm-eq-origem-chip, .crm-eq-perfil-chip, .crm-paleta-preset, .crm-etapa-protheus-chip, .crm-etapa-entrada-toggle, .crm-etapa-equipe-chip,
  .crm-opp-ativ-filter, .crm-opp-tab, .btn.btn-ghost, .rd-neg-menu-item
) {
  background: var(--crm-surface-2) !important;
  color: var(--crm-text) !important;
  border-color: var(--crm-line-strong) !important;
}
html[data-crm-tema="escuro"] body#spa-crm :is(
  .crm-eq-origem-chip.is-on, .crm-eq-perfil-chip.is-on, .crm-paleta-preset.is-active, .crm-etapa-protheus-chip.is-on, .crm-etapa-entrada-toggle.is-on,
  .crm-etapa-equipe-chip.is-on, .crm-opp-ativ-filter.is-active, .crm-opp-tab.is-active, .rd-neg-menu-item.active
) {
  background: var(--crm-accent-soft) !important;
  color: var(--crm-accent-strong) !important;
  border-color: var(--crm-accent) !important;
}
html[data-crm-tema="escuro"] body#spa-crm .rd-neg-menu-item:hover { background: var(--crm-surface) !important; }
html[data-crm-tema="escuro"] body#spa-crm :is(.temp-badge.morno) { background: var(--crm-warn-soft) !important; color: var(--crm-warn) !important; }
html[data-crm-tema="escuro"] body#spa-crm .crm-opp-tab-badge { background: var(--crm-accent-soft) !important; color: var(--crm-accent-strong) !important; }

/* itens dos menus suspensos (Ações, Configurações, usuário, notificações) e botões primários genéricos */
html[data-crm-tema="escuro"] body#spa-crm :is(.rd-create-menu, .rd-config-menu, .rd-user-menu, .rd-notif-panel, .rd-neg-popover) :is(button, a) { color: var(--crm-text) !important; background: transparent !important; }
html[data-crm-tema="escuro"] body#spa-crm :is(.rd-create-menu, .rd-config-menu, .rd-user-menu, .rd-notif-panel, .rd-neg-popover) :is(button, a):hover { background: var(--crm-surface-2) !important; }
html[data-crm-tema="escuro"] body#spa-crm .rd-neg-popover .rd-neg-menu-item.active { background: var(--crm-accent-soft) !important; color: var(--crm-accent-strong) !important; }
html[data-crm-tema="escuro"] body#spa-crm :is(.rd-neg-menu-title, .crm-modal-ctx, .crm-eq-badge, .rd-panel-header h4) { color: var(--crm-muted) !important; background: transparent; }
html[data-crm-tema="escuro"] body#spa-crm .btn.btn-primary { background: var(--crm-btn-bg) !important; color: var(--crm-btn-fg) !important; border-color: transparent !important; }

/* cada tela tem seu próprio conjunto de variáveis com verde/vermelho/âmbar fixos (bons no claro, ruins no escuro) */
html[data-crm-tema="escuro"] :is(#page-agenda, #page-agenda-equipe, #page-roadmap, #page-negociacoes, #crm-side-panel.is-v3) {
  --ac-late: var(--crm-bad); --ac-ok: var(--crm-ok); --ac-warn: var(--crm-warn);
  --ae-late: var(--crm-bad); --ae-ok: var(--crm-ok); --ae-warn: var(--crm-warn);
  --rm-ok: var(--crm-ok); --rm-warn: var(--crm-warn);
  --o-ok: var(--crm-ok); --o-risk: var(--crm-bad); --o-warn: var(--crm-warn);
}
/* botões de fechar (X) dos modais e do painel lateral */
html[data-crm-tema="escuro"] body#spa-crm :is(.crm-modal, .rd-generic-modal, .crm-equipe-modal, .crm-etapa-modal, .rd-search-modal) :is(button[aria-label="Fechar"], [class*="-close"]),
html[data-crm-tema="escuro"] body#spa-crm #crm-side-panel .crm-opp-close {
  background: var(--crm-surface-2) !important;
  color: var(--crm-muted) !important;
  border-color: var(--crm-line-strong) !important;
}
html[data-crm-tema="escuro"] body#spa-crm :is(.crm-ct-avatar, .crm-eq-av) { background: var(--crm-accent-soft) !important; color: var(--crm-accent-strong) !important; }

/* ---------- 19. WhatsApp: card de configuração (Configurações → Integrações) e selo na página WhatsApp ---------- */
/* Só tokens --crm-*: acompanha o tema claro/escuro e a cor da marca. */
body#spa-crm .crm-wa-card[aria-busy="true"] { cursor: progress; }
body#spa-crm .crm-wa-card[aria-busy="true"] .crm-wa-corpo { opacity: .75; }
body#spa-crm .crm-wa-corpo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 20px; padding: 18px 22px 22px; }
body#spa-crm .crm-wa-grupo { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 20px; }
body#spa-crm :is(.crm-wa-corpo, .crm-wa-grupo, .crm-wa-aviso, .crm-wa-ok, .crm-wa-acoes button)[hidden] { display: none; }
body#spa-crm .crm-wa-campo { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
body#spa-crm .crm-wa-campo--cheio { grid-column: 1 / -1; }
body#spa-crm .crm-wa-campo label { font-size: 12px; font-weight: 700; color: var(--crm-text); }
body#spa-crm .crm-wa-campo :is(input, select) {
  width: 100%;
  height: 34px;
  padding: 0 10px;
  border: 1px solid var(--crm-line-strong) !important;
  border-radius: var(--crm-radius-sm) !important;
  background: var(--crm-surface) !important;
  color: var(--crm-text) !important;
  font: inherit;
  font-size: 13px !important;
  box-shadow: none !important;
}
body#spa-crm .crm-wa-campo :is(input, select):focus-visible {
  outline: 0 !important;
  border-color: var(--crm-accent) !important;
  box-shadow: 0 0 0 3px var(--crm-ring) !important;
}
body#spa-crm :is(.crm-wa-campo small, .crm-wa-dica) { font-size: 12px; line-height: 1.45; color: var(--crm-muted); }
body#spa-crm .crm-wa-dica--bloco { grid-column: 1 / -1; margin: 0; }
body#spa-crm :is(.crm-wa-campo small, .crm-wa-dica) code { font-size: 11.5px; padding: 0 4px; border: 1px solid var(--crm-line); border-radius: 3px; background: var(--crm-surface-2); color: var(--crm-text); }
body#spa-crm .crm-wa-ok { color: var(--crm-ok); font-weight: 700; }
body#spa-crm .crm-wa-senha { position: relative; display: flex; }
body#spa-crm .crm-wa-senha input { padding-right: 40px; }
body#spa-crm .crm-wa-olho {
  position: absolute; top: 2px; right: 2px; width: 30px; height: 30px;
  display: grid; place-items: center;
  border: 0 !important; border-radius: var(--crm-radius-sm); background: transparent !important;
  color: var(--crm-muted) !important; cursor: pointer;
}
body#spa-crm .crm-wa-olho:hover { background: var(--crm-surface-2) !important; color: var(--crm-text) !important; }
body#spa-crm .crm-wa-olho .material-symbols-outlined { font-size: 18px; }
body#spa-crm .crm-wa-acoes { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; }
body#spa-crm .crm-wa-estado { grid-column: 1 / -1; margin: 0; font-size: 13px; font-weight: 600; line-height: 1.45; color: var(--crm-text); }
body#spa-crm .crm-wa-estado:empty { display: none; }
body#spa-crm .crm-wa-estado.is-ok { color: var(--crm-ok); }
body#spa-crm .crm-wa-estado.is-erro { color: var(--crm-bad); }
body#spa-crm .crm-wa-estado.is-busy { color: var(--crm-muted); }
body#spa-crm .crm-wa-aviso { margin: 14px 22px 18px; padding: 10px 12px; border-radius: var(--crm-radius-sm); background: var(--crm-warn-soft); color: var(--crm-warn); font-size: 13px; font-weight: 600; }
@media (max-width: 720px) {
  body#spa-crm .crm-wa-corpo, body#spa-crm .crm-wa-grupo { grid-template-columns: minmax(0, 1fr); }
}

/* selo do provedor no topo da página WhatsApp */
body#spa-crm .crm-wa-selo {
  display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px;
  border: 1px solid transparent; border-radius: 999px; font-family: inherit; font-size: 12px; font-weight: 700;
}
body#spa-crm .crm-wa-selo.is-ativo { background: var(--crm-ok-soft); color: var(--crm-ok); border-color: color-mix(in srgb, var(--crm-ok) 30%, transparent); }
body#spa-crm .crm-wa-selo.is-inativo { background: var(--crm-warn-soft); color: var(--crm-warn); border-color: color-mix(in srgb, var(--crm-warn) 30%, transparent); cursor: pointer; }
body#spa-crm .crm-wa-selo.is-inativo:hover { filter: brightness(.96); }

/* ---------- 20. Aba «Cliente» do painel da negociação (contexto do ERP) ---------- */
/* Só tokens --crm-*: acompanha tema claro/escuro e a cor da marca. Prefixo body#spa-crm para vencer o CSS antigo do painel. */
body#spa-crm .crm-cli { display: flex; flex-direction: column; gap: 18px; padding: 4px 2px 12px; color: var(--crm-text); }
body#spa-crm .crm-cli-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
body#spa-crm .crm-cli-id { min-width: 0; flex: 1 1 240px; }
body#spa-crm .crm-cli-id h3 { margin: 0; font-size: 16px; font-weight: 700; line-height: 1.3; color: var(--crm-text); overflow-wrap: anywhere; }
body#spa-crm .crm-cli-id p { margin: 3px 0 0; font-size: 12.5px; color: var(--crm-muted); overflow-wrap: anywhere; }
body#spa-crm .crm-cli-id .crm-cli-meta { color: var(--crm-faint); font-size: 12px; }
body#spa-crm .crm-cli-pills { display: flex; flex-wrap: wrap; gap: 6px; }
body#spa-crm .crm-cli-pill { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 999px; font-size: 11.5px; font-weight: 700; letter-spacing: .02em; background: var(--crm-surface-2); color: var(--crm-muted); border: 1px solid var(--crm-line); }
body#spa-crm .crm-cli-pill.is-quente { background: var(--crm-ok-soft); color: var(--crm-ok); border-color: color-mix(in srgb, var(--crm-ok) 30%, transparent); }
body#spa-crm .crm-cli-pill.is-ativacao { background: var(--crm-accent-soft); color: var(--crm-accent-strong); border-color: color-mix(in srgb, var(--crm-accent) 30%, transparent); }
body#spa-crm .crm-cli-pill.is-esfriando { background: var(--crm-warn-soft); color: var(--crm-warn); border-color: color-mix(in srgb, var(--crm-warn) 30%, transparent); }
body#spa-crm .crm-cli-pill.is-perdido { background: var(--crm-bad-soft); color: var(--crm-bad); border-color: color-mix(in srgb, var(--crm-bad) 30%, transparent); }

body#spa-crm .crm-cli-sec h4 { margin: 0 0 8px; font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--crm-muted); }
body#spa-crm .crm-cli-alertas { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
body#spa-crm .crm-cli-alerta { display: flex; gap: 9px; align-items: flex-start; padding: 9px 11px; border-radius: var(--crm-radius-sm); font-size: 13px; line-height: 1.45; border: 1px solid transparent; }
body#spa-crm .crm-cli-alerta .material-symbols-outlined { font-size: 19px; flex: 0 0 auto; margin-top: 1px; }
body#spa-crm .crm-cli-alerta.is-critico { background: var(--crm-bad-soft); color: var(--crm-bad); border-color: color-mix(in srgb, var(--crm-bad) 28%, transparent); }
body#spa-crm .crm-cli-alerta.is-atencao { background: var(--crm-warn-soft); color: var(--crm-warn); border-color: color-mix(in srgb, var(--crm-warn) 28%, transparent); }
body#spa-crm .crm-cli-alerta.is-info { background: var(--crm-accent-soft); color: var(--crm-accent-strong); border-color: color-mix(in srgb, var(--crm-accent) 25%, transparent); }
body#spa-crm .crm-cli-ok { display: flex; gap: 8px; align-items: center; margin: 0; padding: 9px 11px; border-radius: var(--crm-radius-sm); background: var(--crm-ok-soft); color: var(--crm-ok); font-size: 13px; font-weight: 600; }
body#spa-crm .crm-cli-ok .material-symbols-outlined { font-size: 19px; }

body#spa-crm .crm-cli-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
body#spa-crm .crm-cli-kpi { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border: 1px solid var(--crm-line); border-radius: var(--crm-radius-sm); background: var(--crm-surface-2); min-width: 0; }
body#spa-crm .crm-cli-kpi span { font-size: 11.5px; color: var(--crm-muted); font-weight: 600; }
body#spa-crm .crm-cli-kpi b { font-size: 15px; font-weight: 700; color: var(--crm-text); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
body#spa-crm .crm-cli-kpi small { font-size: 11.5px; color: var(--crm-faint); }
body#spa-crm .crm-cli-kpi.is-bad { background: var(--crm-bad-soft); border-color: color-mix(in srgb, var(--crm-bad) 28%, transparent); }
body#spa-crm .crm-cli-kpi.is-bad b, body#spa-crm .crm-cli-kpi.is-bad small { color: var(--crm-bad); }
body#spa-crm .crm-cli-kpi.is-ok b { color: var(--crm-ok); }

body#spa-crm .crm-cli-limite { margin-top: 10px; }
body#spa-crm .crm-cli-limite-topo { display: flex; justify-content: space-between; gap: 8px; font-size: 12.5px; margin-bottom: 5px; flex-wrap: wrap; }
body#spa-crm .crm-cli-limite-topo span { color: var(--crm-muted); font-weight: 600; }
body#spa-crm .crm-cli-limite-topo b { color: var(--crm-text); font-variant-numeric: tabular-nums; }
body#spa-crm .crm-cli-bar { height: 8px; border-radius: 999px; background: var(--crm-line); overflow: hidden; }
body#spa-crm .crm-cli-bar i { display: block; height: 100%; border-radius: inherit; background: var(--crm-ok); }
body#spa-crm .crm-cli-limite.is-warn .crm-cli-bar i { background: var(--crm-warn); }
body#spa-crm .crm-cli-limite.is-bad .crm-cli-bar i { background: var(--crm-bad); }

body#spa-crm .crm-cli-tab { width: 100%; border-collapse: collapse; font-size: 12.5px; }
body#spa-crm .crm-cli-tab th { text-align: left; font-size: 11.5px; font-weight: 700; color: var(--crm-muted); padding: 6px 8px; border-bottom: 1px solid var(--crm-line-strong); background: transparent; }
body#spa-crm .crm-cli-tab td { padding: 7px 8px; border-bottom: 1px solid var(--crm-line); color: var(--crm-text); background: transparent; }
body#spa-crm .crm-cli-tab .is-num { text-align: right; font-variant-numeric: tabular-nums; }
body#spa-crm .crm-cli-tab td:nth-child(3) { text-transform: capitalize; color: var(--crm-muted); }
@media (max-width: 480px) {
  body#spa-crm .crm-cli-tab :is(th, td):nth-child(3) { display: none; }
}

body#spa-crm .crm-cli-prods { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
body#spa-crm .crm-cli-prods li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; padding: 8px 2px; border-bottom: 1px solid var(--crm-line); }
body#spa-crm .crm-cli-prod-nome { font-size: 13px; font-weight: 600; color: var(--crm-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body#spa-crm .crm-cli-prod-qtd { font-size: 13px; font-weight: 700; color: var(--crm-text); font-variant-numeric: tabular-nums; }
body#spa-crm .crm-cli-prods small { grid-column: 1 / -1; font-size: 11.5px; color: var(--crm-faint); }

body#spa-crm .crm-cli-vazio { margin: 0; font-size: 13px; color: var(--crm-muted); }
body#spa-crm .crm-cli-vazio.is-erro { color: var(--crm-bad); }
body#spa-crm .crm-cli-dica { margin: 8px 0 0; font-size: 12px; color: var(--crm-muted); }

body#spa-crm .crm-cli-foot { display: flex; justify-content: space-between; align-items: center; gap: 8px 12px; flex-wrap: wrap; padding-top: 10px; border-top: 1px solid var(--crm-line); font-size: 12px; color: var(--crm-faint); }
body#spa-crm .crm-cli-acoes { display: flex; flex-wrap: wrap; gap: 4px 12px; }
body#spa-crm .crm-cli-link { display: inline-flex; align-items: center; gap: 4px; padding: 2px 0; border: 0 !important; background: transparent !important; color: var(--crm-accent-strong) !important; font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; }
body#spa-crm .crm-cli-link:hover { text-decoration: underline; }
body#spa-crm .crm-cli-link.is-perigo { color: var(--crm-bad) !important; }
body#spa-crm .crm-cli-link .material-symbols-outlined { font-size: 16px; }

body#spa-crm .crm-cli-estado { display: flex; align-items: center; gap: 10px; padding: 16px 4px; font-size: 13px; color: var(--crm-muted); }
body#spa-crm .crm-cli-estado.is-erro { align-items: flex-start; padding: 12px; border-radius: var(--crm-radius-sm); background: var(--crm-bad-soft); color: var(--crm-bad); flex-wrap: wrap; }
body#spa-crm .crm-cli-estado.is-erro strong { display: block; }
body#spa-crm .crm-cli-estado.is-erro p { margin: 2px 0 0; color: var(--crm-muted); font-size: 12px; }

body#spa-crm .crm-cli-vinc { display: flex; flex-direction: column; gap: 12px; padding: 4px 2px 12px; }
body#spa-crm .crm-cli-vinc header h3 { margin: 0; font-size: 15px; font-weight: 700; color: var(--crm-text); }
body#spa-crm .crm-cli-vinc header p { margin: 4px 0 0; font-size: 12.5px; color: var(--crm-muted); line-height: 1.45; }
body#spa-crm .crm-cli-busca { display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 10px; border: 1px solid var(--crm-line-strong); border-radius: var(--crm-radius-sm); background: var(--crm-surface); }
body#spa-crm .crm-cli-busca:focus-within { border-color: var(--crm-accent); box-shadow: 0 0 0 3px var(--crm-ring); }
body#spa-crm .crm-cli-busca .material-symbols-outlined { font-size: 19px; color: var(--crm-muted); }
body#spa-crm .crm-cli-busca input { flex: 1; min-width: 0; height: 100%; border: 0 !important; outline: 0 !important; box-shadow: none !important; background: transparent !important; color: var(--crm-text) !important; font: inherit; font-size: 13.5px; }
body#spa-crm .crm-cli-itens { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
body#spa-crm .crm-cli-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border: 1px solid var(--crm-line); border-radius: var(--crm-radius-sm); background: var(--crm-surface); }
body#spa-crm .crm-cli-item.is-provavel { border-color: var(--crm-accent); background: var(--crm-accent-softer); }
body#spa-crm .crm-cli-item > div { min-width: 0; }
body#spa-crm .crm-cli-item strong { font-size: 13.5px; color: var(--crm-text); overflow-wrap: anywhere; }
body#spa-crm .crm-cli-item em { font-style: normal; font-size: 12.5px; color: var(--crm-muted); }
body#spa-crm .crm-cli-item small { display: block; margin-top: 2px; font-size: 12px; color: var(--crm-muted); overflow-wrap: anywhere; }
body#spa-crm .crm-cli-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
body#spa-crm .crm-cli-chip { padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; background: var(--crm-surface-2); color: var(--crm-muted); border: 1px solid var(--crm-line); }
body#spa-crm .crm-cli-chip.is-forte { background: var(--crm-ok-soft); color: var(--crm-ok); border-color: color-mix(in srgb, var(--crm-ok) 30%, transparent); }
body#spa-crm .crm-cli-item .rd-primary-btn { flex: 0 0 auto; }

/* selo de alertas na aba */
body#spa-crm #crm-side-panel .crm-opp-tab-badge.is-critico { background: var(--crm-bad) !important; color: #fff !important; }

/* ---------- 21. Aba «Cliente»: formulário de cadastro no ERP ---------- */
body#spa-crm .crm-cli-cad { display: flex; flex-direction: column; gap: 14px; padding: 4px 2px 12px; }
body#spa-crm .crm-cli-cad header h3 { margin: 0; font-size: 15px; font-weight: 700; color: var(--crm-text); }
body#spa-crm .crm-cli-cad header p { margin: 4px 0 0; font-size: 12.5px; color: var(--crm-muted); line-height: 1.45; }
body#spa-crm .crm-cli-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
body#spa-crm .crm-cli-campo { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
body#spa-crm .crm-cli-campo--cheio { grid-column: 1 / -1; }
body#spa-crm .crm-cli-campo > span { font-size: 12px; font-weight: 700; color: var(--crm-text); }
body#spa-crm .crm-cli-campo input {
  width: 100%; height: 36px; padding: 0 10px;
  border: 1px solid var(--crm-line-strong) !important; border-radius: var(--crm-radius-sm) !important;
  background: var(--crm-surface) !important; color: var(--crm-text) !important;
  font: inherit; font-size: 13.5px !important; box-shadow: none !important;
}
body#spa-crm .crm-cli-campo input:focus-visible { outline: 0 !important; border-color: var(--crm-accent) !important; box-shadow: 0 0 0 3px var(--crm-ring) !important; }
body#spa-crm .crm-cli-erro { margin: 0; padding: 9px 11px; border-radius: var(--crm-radius-sm); background: var(--crm-bad-soft); color: var(--crm-bad); font-size: 13px; font-weight: 600; }
body#spa-crm .crm-cli-existente { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 10px 12px; border-radius: var(--crm-radius-sm); background: var(--crm-warn-soft); border: 1px solid color-mix(in srgb, var(--crm-warn) 28%, transparent); }
body#spa-crm .crm-cli-existente p { margin: 0; font-size: 13px; color: var(--crm-warn); font-weight: 600; }
body#spa-crm :is(.crm-cli-erro, .crm-cli-existente)[hidden] { display: none; }
body#spa-crm .crm-cli-form-acoes { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
body#spa-crm .crm-cli-inline { display: flex; gap: 6px; align-items: stretch; font-weight: 400; }
body#spa-crm .crm-cli-inline input { flex: 1 1 auto; min-width: 0; }
body#spa-crm .crm-cli-inline button { flex: 0 0 auto; height: 36px; padding: 0 12px; white-space: nowrap; }
body#spa-crm #crm-cli-avulso .crm-modal { max-height: calc(100vh - 32px); overflow: auto; }
@media (max-width: 480px) {
  body#spa-crm .crm-cli-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- 22. Página «Recompra e reativação» ---------- */
body#spa-crm .crm-rec { display: flex; flex-direction: column; gap: 14px; padding: 0 0 24px; color: var(--crm-text); }
body#spa-crm .crm-rec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
body#spa-crm .crm-rec-head h2 { margin: 0; font-size: 22px; font-weight: 700; color: var(--crm-text); }
body#spa-crm .crm-rec-head p { margin: 4px 0 0; max-width: 720px; font-size: 13.5px; line-height: 1.5; color: var(--crm-muted); }
body#spa-crm .crm-rec-head .rd-secondary-btn { display: inline-flex; align-items: center; gap: 6px; }
body#spa-crm .crm-rec-head .material-symbols-outlined { font-size: 18px; }
body#spa-crm .crm-rec-filtros { display: flex; flex-wrap: wrap; gap: 8px; }
body#spa-crm .crm-rec-chip { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 14px; border: 1px solid var(--crm-line-strong) !important; border-radius: 999px; background: var(--crm-surface) !important; color: var(--crm-text) !important; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
body#spa-crm .crm-rec-chip b { font-variant-numeric: tabular-nums; color: var(--crm-muted); }
body#spa-crm .crm-rec-chip.is-ativo { background: var(--crm-accent-soft) !important; border-color: var(--crm-accent) !important; color: var(--crm-accent-strong) !important; }
body#spa-crm .crm-rec-chip.is-ativo b { color: var(--crm-accent-strong); }
body#spa-crm .crm-rec-nota { margin: 0; font-size: 12.5px; color: var(--crm-muted); }
body#spa-crm .crm-rec-nota[hidden] { display: none; }
body#spa-crm .crm-rec-lista { display: flex; flex-direction: column; gap: 10px; }
body#spa-crm .crm-rec-item { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 12px 24px; padding: 14px 16px; border: 1px solid var(--crm-line); border-radius: var(--crm-radius); background: var(--crm-surface); box-shadow: var(--crm-shadow); }
body#spa-crm .crm-rec-main { min-width: 0; }
body#spa-crm .crm-rec-nome { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
body#spa-crm .crm-rec-nome strong { font-size: 15px; font-weight: 700; color: var(--crm-text); overflow-wrap: anywhere; }
body#spa-crm .crm-rec-tag { display: inline-flex; align-items: center; height: 22px; padding: 0 10px; border-radius: 999px; font-size: 11.5px; font-weight: 700; border: 1px solid transparent; }
body#spa-crm .crm-rec-tag.is-recompra { background: var(--crm-warn-soft); color: var(--crm-warn); border-color: color-mix(in srgb, var(--crm-warn) 30%, transparent); }
body#spa-crm .crm-rec-tag.is-reativacao { background: var(--crm-bad-soft); color: var(--crm-bad); border-color: color-mix(in srgb, var(--crm-bad) 30%, transparent); }
body#spa-crm .crm-rec-sub { margin-top: 2px; font-size: 12.5px; color: var(--crm-muted); overflow-wrap: anywhere; }
body#spa-crm .crm-rec-nums { display: flex; flex-wrap: wrap; gap: 4px 18px; margin-top: 8px; font-size: 13px; color: var(--crm-muted); }
body#spa-crm .crm-rec-nums b { color: var(--crm-text); font-variant-numeric: tabular-nums; }
body#spa-crm .crm-rec-msg { margin: 8px 0 0; padding: 7px 10px; border-left: 3px solid var(--crm-line-strong); background: var(--crm-surface-2); border-radius: 0 var(--crm-radius-sm) var(--crm-radius-sm) 0; font-size: 12.5px; line-height: 1.45; color: var(--crm-muted); font-style: italic; }
body#spa-crm .crm-rec-valor { display: flex; flex-direction: column; align-items: flex-end; text-align: right; min-width: 130px; }
body#spa-crm .crm-rec-valor b { font-size: 16px; font-weight: 700; color: var(--crm-text); font-variant-numeric: tabular-nums; }
body#spa-crm .crm-rec-valor small { font-size: 11.5px; color: var(--crm-faint); }
body#spa-crm .crm-rec-acoes { display: flex; flex-direction: column; align-items: stretch; gap: 6px; min-width: 168px; }
body#spa-crm .crm-rec-acoes .rd-primary-btn, body#spa-crm .crm-rec-acoes .rd-secondary-btn { justify-content: center; display: inline-flex; align-items: center; gap: 6px; }
body#spa-crm .crm-rec-link { border: 0 !important; background: transparent !important; color: var(--crm-muted) !important; font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; padding: 2px 0; }
body#spa-crm .crm-rec-link:hover { color: var(--crm-text) !important; text-decoration: underline; }
body#spa-crm .crm-rec-estado { display: flex; align-items: center; gap: 12px; padding: 28px 18px; border: 1px dashed var(--crm-line-strong); border-radius: var(--crm-radius); color: var(--crm-muted); font-size: 13.5px; }
body#spa-crm .crm-rec-estado > .material-symbols-outlined { font-size: 26px; }
body#spa-crm .crm-rec-estado strong { display: block; color: var(--crm-text); }
body#spa-crm .crm-rec-estado p { margin: 2px 0 0; font-size: 12.5px; }
body#spa-crm .crm-rec-estado.is-erro { border-style: solid; border-color: color-mix(in srgb, var(--crm-bad) 30%, transparent); background: var(--crm-bad-soft); color: var(--crm-bad); flex-wrap: wrap; }
body#spa-crm .crm-rec-estado.is-erro strong { color: var(--crm-bad); }
@media (max-width: 900px) {
  body#spa-crm .crm-rec-item { grid-template-columns: minmax(0, 1fr); }
  body#spa-crm .crm-rec-valor { align-items: flex-start; text-align: left; }
  body#spa-crm .crm-rec-acoes { flex-direction: row; flex-wrap: wrap; min-width: 0; }
}
/* o CSS antigo força a cor dos títulos de página: garante a cor do tema (claro/escuro) no título da Recompra */
body#spa-crm #page-recompra .crm-rec-head h2 { color: var(--crm-text) !important; font-size: 22px !important; font-weight: 700 !important; }

/* ---------- 23. Aviso «Orçamento criado no SysRepWeb» (na volta do SysRepWeb) ---------- */
body#spa-crm .crm-sysrep-retorno { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 5150; display: flex; align-items: center; gap: 12px; width: max-content; max-width: min(560px, calc(100vw - 32px)); padding: 12px 14px; background: var(--crm-surface); color: var(--crm-text); border: 1px solid var(--crm-line-strong); border-left: 4px solid var(--crm-ok); border-radius: var(--crm-radius); box-shadow: var(--crm-shadow-pop); }
body#spa-crm .crm-sysrep-retorno > .material-symbols-outlined { flex: none; font-size: 26px; color: var(--crm-ok); }
body#spa-crm .crm-sysrep-retorno-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: 13px; line-height: 1.35; }
body#spa-crm .crm-sysrep-retorno-txt strong { color: var(--crm-text); font-size: 13.5px; }
body#spa-crm .crm-sysrep-retorno-txt span { color: var(--crm-muted); overflow-wrap: anywhere; }
body#spa-crm .crm-sysrep-retorno-acoes { display: flex; flex: none; gap: 8px; }
@media (max-width: 640px) {
  body#spa-crm .crm-sysrep-retorno { left: 12px; right: 12px; bottom: 12px; transform: none; width: auto; max-width: none; flex-wrap: wrap; }
  body#spa-crm .crm-sysrep-retorno-acoes { width: 100%; justify-content: flex-end; }
}
/* «Criar no SysRepWeb» no card da Proposta: ação secundária com borda leve (o .btn-ghost sozinho parece texto solto) */
body#spa-crm .crm-opp-proposta-card-actions [data-criar-orcamento-sysrep] { border: 1px solid var(--crm-line-strong); background: var(--crm-surface); color: var(--crm-accent-strong); font-weight: 600; }
body#spa-crm .crm-opp-proposta-card-actions [data-criar-orcamento-sysrep]:hover { background: var(--crm-accent-soft); }

/* ---------- 24. Fundo da página inteira (o <html>) ---------- */
/* O style.css antigo pinta o <html> de #f5f8fb com !important (html:not(.dark)), mas o tema escuro do CRM usa data-crm-tema, não a classe .dark:
   sem isto o <html> ficava claro e, onde a página é mais curta que a tela, aparecia uma faixa branca embaixo. O <html> segue o mesmo token do <body>. */
html:root { background: var(--crm-bg) !important; }

/* ---------- 25. Tema escuro: correções achadas na varredura de todas as telas ---------- */
/* O style.css antigo tem regras `html:not(.dark)` e cores fixas de tema claro; o escuro do CRM usa data-crm-tema (não a classe .dark), então elas valiam no escuro também. */

/* 25a. Utilitárias antigas e cor de texto sobre --color-error (o `--color-on-error` nunca foi definido: o texto do selo «Atrasada» herdava a cor da página) */
html:root { --color-on-error: var(--crm-on-accent); }
html[data-crm-tema="escuro"]:root { --color-on-error: var(--crm-bg); }
html[data-crm-tema="escuro"] body#spa-crm .text-primary { color: var(--crm-accent-strong) !important; }

/* 25b. Modais «Configurar funis» e «Estatísticas das etapas» (.rd-stage-modal: branco fixo no style.css) */
html[data-crm-tema="escuro"] body#spa-crm .rd-stage-modal { background: var(--crm-surface); color: var(--crm-text); border: 1px solid var(--crm-line); box-shadow: var(--crm-shadow-pop); }
html[data-crm-tema="escuro"] body#spa-crm .rd-stage-modal-head { border-bottom-color: var(--crm-line); }
html[data-crm-tema="escuro"] body#spa-crm .rd-stage-modal-head h2 { color: var(--crm-text); }
html[data-crm-tema="escuro"] body#spa-crm .rd-stage-modal-head p,
html[data-crm-tema="escuro"] body#spa-crm .rd-stage-modal-head button { color: var(--crm-muted); }
html[data-crm-tema="escuro"] body#spa-crm .rd-stage-modal-summary div { background: var(--crm-surface-2); border-color: var(--crm-line); }
html[data-crm-tema="escuro"] body#spa-crm .rd-stage-modal-summary span { color: var(--crm-muted); }
html[data-crm-tema="escuro"] body#spa-crm .rd-stage-modal-summary strong { color: var(--crm-text); }
html[data-crm-tema="escuro"] body#spa-crm .rd-stage-modal input { border-color: var(--crm-line-strong) !important; }
/* lista de funis do «Configurar funis» (as linhas não tinham estilo nenhum, nem no claro) */
body#spa-crm .rd-funil-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--crm-line); font-size: 13px; }
body#spa-crm .rd-funil-row:last-child { border-bottom: 0; }
body#spa-crm .rd-funil-del { border: 0; background: transparent; color: var(--crm-muted); cursor: pointer; font-size: 18px; line-height: 1; padding: 2px; border-radius: var(--crm-radius-sm); }
body#spa-crm .rd-funil-del:hover { color: var(--crm-bad); background: var(--crm-bad-soft); }

/* 25c. «Tipo» selecionado no agendamento (misturava a cor da marca com #fff fixo: azul claro sobre azul claro) */
html[data-crm-tema="escuro"] body#spa-crm .crm-agenda-tipo.is-on { background: var(--crm-accent-soft); border-color: var(--crm-accent); color: var(--crm-accent-strong); }

/* 25d. Integrações: selos de estado e mensagens (verde/âmbar/vermelho fixos de tema claro) */
html[data-crm-tema="escuro"] body#spa-crm #page-configuracoes .crm-rd-status.is-ok { background: var(--crm-ok-soft); color: var(--crm-ok); }
html[data-crm-tema="escuro"] body#spa-crm #page-configuracoes .crm-rd-status.is-off { background: var(--crm-warn-soft); color: var(--crm-warn); }
html[data-crm-tema="escuro"] body#spa-crm #page-configuracoes .crm-rd-msg.is-ok { background: var(--crm-ok-soft); color: var(--crm-ok); border-color: transparent; }
html[data-crm-tema="escuro"] body#spa-crm #page-configuracoes .crm-rd-msg.is-err { background: var(--crm-bad-soft); color: var(--crm-bad); border-color: transparent; }

/* 25e. Configurações → Funis: chips das regras da etapa e funil selecionado (pastéis claros fixos) */
html[data-crm-tema="escuro"] body#spa-crm #page-configuracoes .crm-stage-chip.is-entrada { background: color-mix(in srgb, #818cf8 20%, var(--crm-surface)); border-color: color-mix(in srgb, #818cf8 45%, transparent); color: #c7d2fe; }
html[data-crm-tema="escuro"] body#spa-crm #page-configuracoes .crm-stage-chip.is-cliente { background: color-mix(in srgb, #60a5fa 20%, var(--crm-surface)); border-color: color-mix(in srgb, #60a5fa 45%, transparent); color: #bfdbfe; }
html[data-crm-tema="escuro"] body#spa-crm #page-configuracoes .crm-stage-chip.is-orcamento { background: color-mix(in srgb, #fb923c 20%, var(--crm-surface)); border-color: color-mix(in srgb, #fb923c 45%, transparent); color: #fed7aa; }
html[data-crm-tema="escuro"] body#spa-crm #page-configuracoes .crm-stage-chip.is-pedido { background: var(--crm-ok-soft); border-color: color-mix(in srgb, var(--crm-ok) 40%, transparent); color: var(--crm-ok); }
html[data-crm-tema="escuro"] body#spa-crm #page-configuracoes .crm-stage-chip.is-equipes { background: var(--crm-surface-2); border-color: var(--crm-line-strong); color: var(--crm-muted); }
html[data-crm-tema="escuro"] body#spa-crm #page-configuracoes button.crm-pipeline-tag.is-active { border-color: var(--crm-accent); background: var(--crm-accent-soft); color: var(--crm-accent-strong); box-shadow: 0 0 0 1px color-mix(in srgb, var(--crm-accent) 45%, transparent); }

/* 25f. Relatórios: botão de filtros ativos (cinza fixo com texto branco) */
html[data-crm-tema="escuro"] body#spa-crm .rd-active-filter { background: var(--crm-accent-soft); color: var(--crm-accent-strong); box-shadow: none; }

/* 25g. Modais antigos feitos com classes utilitárias (Agendar mensagem, Filtro de equipe): botão de fechar com fundo cinza chapado e ícone apagado */
html[data-crm-tema="escuro"] body#spa-crm :is(#btn-fechar-agendar-wa, #btn-fechar-filtro-equipe) { background: transparent !important; color: var(--crm-muted) !important; }
html[data-crm-tema="escuro"] body#spa-crm :is(#btn-fechar-agendar-wa, #btn-fechar-filtro-equipe):hover { background: var(--crm-surface-2) !important; color: var(--crm-text) !important; }

/* 25h. Pré-visualização da paleta do Kanban: usa as cores DELA (--pv-*), não as do tema — a regra genérica de modais pintava o texto de cinza-claro sobre o cartão branco */
html[data-crm-tema="escuro"] body#spa-crm .crm-paleta-preview .crm-paleta-preview-head em { color: var(--pv-accent) !important; }
html[data-crm-tema="escuro"] body#spa-crm .crm-paleta-preview .crm-paleta-preview-card small { color: var(--pv-muted) !important; }

/* ---------- 20. Automações do funil (Configurações → Automações) ---------- */
/* Reaproveita .crm-wa-campo / .crm-wa-aviso; só tokens --crm-* (claro/escuro e 3 estilos). */
body#spa-crm .crm-auto-form { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px 20px; padding: 18px 22px 22px; align-items: end; }
body#spa-crm .crm-auto-form[hidden] { display: none; }
body#spa-crm .crm-auto-acoes { grid-column: 1 / -1; display: flex; justify-content: flex-end; }
body#spa-crm #crm-auto-card[aria-busy="true"] { cursor: progress; }
body#spa-crm .crm-auto-tabela-wrap { overflow-x: auto; padding: 0 22px 18px; }
body#spa-crm .crm-auto-tabela { width: 100%; }
body#spa-crm .crm-auto-tabela tr.is-off td { color: var(--crm-muted); }
body#spa-crm .crm-auto-vazio { text-align: center; color: var(--crm-muted); padding: 18px 0; }
body#spa-crm .crm-auto-excluir { display: grid; place-items: center; width: 30px; height: 30px; border: 0 !important; border-radius: var(--crm-radius-sm); background: transparent !important; color: var(--crm-muted) !important; cursor: pointer; }
body#spa-crm .crm-auto-excluir:hover { color: var(--crm-bad) !important; background: var(--crm-bad-soft) !important; }
body#spa-crm #crm-auto-executar[hidden] { display: none; }
@media (max-width: 900px) { body#spa-crm .crm-auto-form { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { body#spa-crm .crm-auto-form { grid-template-columns: minmax(0, 1fr); } }

/* Cards do funil — mesmo layout do Gestor (código + valor, nome, status, responsável com foto) */
body#spa-crm .crm-av {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  overflow: hidden;
  border-radius: 50%;
  line-height: 1;
  vertical-align: middle;
}
body#spa-crm .crm-av-xs {
  width: 18px;
  height: 18px;
  font-size: 8px;
  font-weight: 800;
  background: color-mix(in srgb, var(--accent, var(--crm-accent)) 14%, var(--card-bg, var(--crm-surface)));
  color: var(--accent, var(--crm-accent));
}
body#spa-crm #page-negociacoes .neg-card.neg-card-v2 {
  gap: 6px;
  padding: 12px 14px 10px !important;
  border-radius: 10px !important;
  border: 1px solid color-mix(in srgb, var(--neg-fg) 9%, transparent) !important;
  border-top: 1px solid color-mix(in srgb, var(--neg-fg) 9%, transparent) !important;
  box-shadow: 0 1px 2px color-mix(in srgb, var(--neg-fg) 6%, transparent) !important;
}
body#spa-crm #page-negociacoes .neg-card.neg-card-v2:hover {
  border-color: color-mix(in srgb, var(--neg-card-color, var(--neg-accent)) 45%, transparent) !important;
  box-shadow: 0 1px 2px color-mix(in srgb, var(--neg-fg) 8%, transparent) !important;
}
body#spa-crm #page-negociacoes .neg-card.neg-card-v2.has-erp {
  box-shadow: inset 3px 0 0 #16a34a, 0 1px 2px color-mix(in srgb, var(--neg-fg) 6%, transparent) !important;
}
body#spa-crm #page-negociacoes .neg-card.neg-card-v2.is-frozen {
  opacity: .82;
  filter: saturate(.85);
  box-shadow: inset 3px 0 0 #0ea5e9, 0 1px 2px color-mix(in srgb, var(--neg-fg) 6%, transparent) !important;
}
body#spa-crm #page-negociacoes .neg-card.neg-card-v2.is-rotting:not(.is-frozen) {
  box-shadow: inset 3px 0 0 var(--neg-risk, var(--crm-bad)), 0 1px 2px color-mix(in srgb, var(--neg-fg) 6%, transparent) !important;
}
body#spa-crm #page-negociacoes .neg-card-v2 .neg-card-head {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
body#spa-crm #page-negociacoes .neg-card-v2 .neg-card-ref {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--neg-muted);
}
body#spa-crm #page-negociacoes .neg-card-v2 .neg-card-ref.is-sem { font-style: italic; opacity: .8; }
body#spa-crm #page-negociacoes .neg-card-v2 .neg-card-value {
  flex: 0 0 auto;
  font-size: 13px !important;
  font-weight: 800 !important;
  color: var(--neg-fg) !important;
  white-space: nowrap;
}
body#spa-crm #page-negociacoes .neg-card-v2 .neg-card-value.is-prospect {
  font-weight: 600 !important;
  color: var(--neg-muted) !important;
}
body#spa-crm #page-negociacoes .neg-card-v2 .neg-card-menu {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  margin: -2px -6px -2px -2px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--neg-muted) !important;
  opacity: 0;
}
body#spa-crm #page-negociacoes .neg-card-v2 .neg-card-menu .material-symbols-outlined { font-size: 18px !important; }
body#spa-crm #page-negociacoes .neg-card-v2:hover .neg-card-menu,
body#spa-crm #page-negociacoes .neg-card-v2:focus-within .neg-card-menu { opacity: 1; }
body#spa-crm #page-negociacoes .neg-card-v2 .neg-card-name {
  margin: 0;
  font-size: 13px !important;
  font-weight: 800 !important;
  line-height: 1.25 !important;
  letter-spacing: 0 !important;
  text-transform: uppercase !important;
  color: var(--neg-fg) !important;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body#spa-crm #page-negociacoes .neg-card-v2 .neg-card-badges {
  display: flex !important;
  gap: 5px;
  margin-top: 2px;
  flex-wrap: wrap;
  overflow: visible;
}
body#spa-crm #page-negociacoes .neg-card-v2 .neg-deal-status {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 8px;
  border-radius: 6px;
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1;
}
body#spa-crm #page-negociacoes .neg-card-v2 .neg-deal-status.is-ongoing { background: color-mix(in srgb, #0ea5e9 13%, transparent); color: #0369a1; }
body#spa-crm #page-negociacoes .neg-card-v2 .neg-deal-status.is-won { background: color-mix(in srgb, #22c55e 15%, transparent); color: #15803d; }
body#spa-crm #page-negociacoes .neg-card-v2 .neg-deal-status.is-lost { background: color-mix(in srgb, #ef4444 13%, transparent); color: #b91c1c; }
body#spa-crm #page-negociacoes .neg-card-v2 .neg-deal-status.is-paused,
body#spa-crm #page-negociacoes .neg-card-v2 .neg-deal-status.is-frozen { background: color-mix(in srgb, #a855f7 14%, transparent); color: #7e22ce; }
html[data-crm-tema="escuro"] body#spa-crm #page-negociacoes .neg-card-v2 .neg-deal-status.is-ongoing { color: #7dd3fc; }
html[data-crm-tema="escuro"] body#spa-crm #page-negociacoes .neg-card-v2 .neg-deal-status.is-won { color: #86efac; }
html[data-crm-tema="escuro"] body#spa-crm #page-negociacoes .neg-card-v2 .neg-deal-status.is-lost { color: #fca5a5; }
html[data-crm-tema="escuro"] body#spa-crm #page-negociacoes .neg-card-v2 .neg-deal-status.is-paused,
html[data-crm-tema="escuro"] body#spa-crm #page-negociacoes .neg-card-v2 .neg-deal-status.is-frozen { color: #d8b4fe; }
body#spa-crm #page-negociacoes .neg-card-v2 .neg-badge {
  height: 22px;
  border-radius: 6px !important;
  font-size: 11px !important;
  padding: 0 8px !important;
  background: color-mix(in srgb, var(--neg-fg) 6%, transparent) !important;
  border: 0 !important;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
body#spa-crm #page-negociacoes .neg-card-v2 .neg-badge .material-symbols-outlined { font-size: 14px !important; }
body#spa-crm #page-negociacoes .neg-card-v2 .neg-prob {
  margin-left: 0 !important;
  color: var(--neg-muted) !important;
  background: color-mix(in srgb, var(--neg-fg) 6%, transparent) !important;
}
body#spa-crm #page-negociacoes .neg-card-v2 .neg-prob .material-symbols-outlined { display: inline !important; }
body#spa-crm #page-negociacoes .neg-card.neg-card-v2 > .neg-card-next {
  margin: 2px 0 0 !important;
  padding: 5px 8px !important;
  border-radius: 6px !important;
  font-size: 11.5px !important;
  background: color-mix(in srgb, var(--neg-fg) 4%, transparent) !important;
  border: 0 !important;
}
body#spa-crm #page-negociacoes .neg-card-v2 .neg-card-foot2 {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  margin-top: 4px;
  padding-top: 8px;
  border-top: 1px solid color-mix(in srgb, var(--neg-fg) 8%, transparent);
  font-size: 11.5px;
  color: var(--neg-muted);
}
body#spa-crm #page-negociacoes .neg-card-v2 .neg-seller {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  flex: 1 1 auto;
  min-width: 0;
  font-size: 11.5px !important;
  color: var(--neg-muted) !important;
}
body#spa-crm #page-negociacoes .neg-card-v2 .neg-seller-nome {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body#spa-crm #page-negociacoes .neg-card-v2 .neg-card-foot2 .neg-card-next.is-vazio {
  flex: 0 0 auto;
  display: inline-flex !important;
  align-items: center;
  gap: 3px;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  white-space: nowrap;
}

/* ---------- 26. Abas extras da negociação: Contatos · Arquivos · Proposta (crm-opp-extras.js) ---------- */
body#spa-crm .crm-ex { display: flex; flex-direction: column; gap: 14px; padding: 4px 2px 12px; color: var(--crm-text); }
body#spa-crm .crm-ex-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
body#spa-crm .crm-ex-item { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; padding: 10px 12px; border: 1px solid var(--crm-line); border-radius: var(--crm-radius-sm); background: var(--crm-surface); }
body#spa-crm .crm-ex-item-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: 13px; }
body#spa-crm .crm-ex-item-txt strong { font-weight: 700; overflow-wrap: anywhere; }
body#spa-crm .crm-ex-item-txt small, body#spa-crm .crm-ex-item-txt span { color: var(--crm-muted); font-size: 12px; overflow-wrap: anywhere; }
body#spa-crm .crm-ex-item-txt a { color: var(--crm-accent); text-decoration: none; }
body#spa-crm .crm-ex-item-txt a:hover { text-decoration: underline; }
body#spa-crm .crm-ex-vazio { margin: 0; padding: 14px 12px; color: var(--crm-muted); font-size: 13px; text-align: center; list-style: none; }
body#spa-crm .crm-ex-x { flex: 0 0 auto; width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: var(--crm-radius-sm); background: transparent; color: var(--crm-muted); cursor: pointer; }
body#spa-crm .crm-ex-x:hover { background: var(--crm-bad-soft); color: var(--crm-bad); }
body#spa-crm .crm-ex-x.is-armado { background: var(--crm-bad); color: var(--crm-surface); }
body#spa-crm .crm-ex-x .material-symbols-outlined { font-size: 18px; }
body#spa-crm .crm-ex-existentes { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
body#spa-crm .crm-ex-existentes small { flex: 1 1 100%; color: var(--crm-muted); font-size: 12px; }
body#spa-crm .crm-ex-existentes[hidden] { display: none; }
body#spa-crm .crm-ex-form { border-top: 1px solid var(--crm-line); padding-top: 14px; }
body#spa-crm .crm-ex-envio { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
body#spa-crm .crm-ex-envio small { color: var(--crm-muted); font-size: 12px; }
body#spa-crm .crm-ex-file { cursor: pointer; }
body#spa-crm .crm-ex-file.is-busy { opacity: .6; pointer-events: none; }
body#spa-crm .crm-ex-resumo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px; }
body#spa-crm .crm-ex-resumo div { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
body#spa-crm .crm-ex-resumo small { color: var(--crm-muted); font-size: 11.5px; }
body#spa-crm .crm-ex-resumo b { font-size: 13px; overflow-wrap: anywhere; }
body#spa-crm .crm-ex-tabela-wrap { overflow-x: auto; }
body#spa-crm .crm-ex-tabela td small { display: block; color: var(--crm-muted); font-size: 11.5px; }
body#spa-crm .crm-ex-tabela .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
body#spa-crm .crm-ex-totais { margin: 0; display: flex; flex-direction: column; gap: 4px; align-items: flex-end; font-size: 13px; }
body#spa-crm .crm-ex-totais div { display: flex; gap: 16px; }
body#spa-crm .crm-ex-totais dt { color: var(--crm-muted); }
body#spa-crm .crm-ex-totais dd { margin: 0; font-variant-numeric: tabular-nums; }
body#spa-crm .crm-ex-totais .is-total { font-size: 15px; font-weight: 700; }
body#spa-crm .crm-ex-totais .is-total dt { color: var(--crm-text); }
body#spa-crm .crm-ex-obs { margin: 0; padding: 10px 12px; border-radius: var(--crm-radius-sm); background: var(--crm-surface-2); color: var(--crm-muted); font-size: 12.5px; white-space: pre-wrap; }

/* ---------- 27. «Meu perfil» (crm-perfil.js) ---------- */
body#spa-crm .crm-pf { display: flex; flex-direction: column; gap: 14px; }
body#spa-crm .crm-pf-foto { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
body#spa-crm .crm-pf-avatar { width: 76px; height: 76px; flex: 0 0 auto; border-radius: 50%; overflow: hidden; display: flex; align-items: center; justify-content: center; background: var(--crm-accent-soft); color: var(--crm-accent); font-size: 28px; font-weight: 700; border: 1px solid var(--crm-line); }
body#spa-crm .crm-pf-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
body#spa-crm .crm-pf-foto-acoes { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; }
body#spa-crm .crm-pf-foto-acoes small, body#spa-crm .crm-pf-nota { color: var(--crm-muted); font-size: 12px; }
body#spa-crm .crm-pf-escolher { cursor: pointer; }
body#spa-crm .crm-pf-som { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--crm-text); cursor: pointer; }
body#spa-crm .crm-pf [hidden] { display: none; }

/* ---------- 28. Ranking de vendedores na página Relatórios (crm-ranking.js) ---------- */
body#spa-crm .crm-rk { margin-top: 20px; padding: 16px; display: flex; flex-direction: column; gap: 14px; color: var(--crm-text); }
body#spa-crm .crm-rk-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
body#spa-crm .crm-rk-head h3 { margin: 0; font-size: 16px; font-weight: 700; }
body#spa-crm .crm-rk-head p { margin: 2px 0 0; font-size: 12.5px; color: var(--crm-muted); }
body#spa-crm .crm-rk-periodos { display: flex; gap: 6px; flex-wrap: wrap; }
body#spa-crm .crm-rk-periodos .is-active { background: var(--crm-accent-soft); color: var(--crm-accent); border-color: var(--crm-accent); }
body#spa-crm .crm-rk-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; }
body#spa-crm .crm-rk-kpis > div { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border: 1px solid var(--crm-line); border-radius: var(--crm-radius-sm); background: var(--crm-surface); }
body#spa-crm .crm-rk-kpis small { font-size: 11.5px; color: var(--crm-muted); }
body#spa-crm .crm-rk-kpis b { font-size: 20px; font-variant-numeric: tabular-nums; }
body#spa-crm .crm-rk-kpis span { font-size: 12px; color: var(--crm-muted); font-variant-numeric: tabular-nums; }
body#spa-crm .crm-rk-tabela .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
body#spa-crm .crm-rk-tabela small { display: block; color: var(--crm-muted); font-size: 11.5px; }
body#spa-crm .crm-rk-pos { color: var(--crm-muted); width: 32px; }
body#spa-crm .crm-rk-barra { display: block; height: 6px; margin-top: 3px; border-radius: 3px; background: var(--crm-line); overflow: hidden; }
body#spa-crm .crm-rk-barra i { display: block; height: 100%; background: var(--crm-ok); }
body#spa-crm .crm-rk-nota { margin: 0; font-size: 12px; color: var(--crm-muted); }

/* ---------- 29. Análises e Mapa na página Relatórios (crm-analises.js) ---------- */
body#spa-crm .crm-an { margin-top: 20px; padding: 16px; display: flex; flex-direction: column; gap: 14px; color: var(--crm-text); }
body#spa-crm .crm-an-vend { height: 32px; padding: 0 8px; border: 1px solid var(--crm-line-strong) !important; border-radius: var(--crm-radius-sm) !important; background: var(--crm-surface) !important; color: var(--crm-text) !important; font: inherit; font-size: 13px; }
body#spa-crm .crm-an-abas { display: flex; gap: 4px; flex-wrap: wrap; border-bottom: 1px solid var(--crm-line); }
body#spa-crm .crm-an-abas button { border: 0; background: transparent; color: var(--crm-muted); font: inherit; font-size: 13.5px; font-weight: 600; padding: 8px 12px; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; }
body#spa-crm .crm-an-abas button:hover { color: var(--crm-text); }
body#spa-crm .crm-an-abas button.is-active { color: var(--crm-accent); border-bottom-color: var(--crm-accent); }
body#spa-crm .crm-an-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; }
body#spa-crm .crm-an-kpis > div { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border: 1px solid var(--crm-line); border-radius: var(--crm-radius-sm); background: var(--crm-surface); }
body#spa-crm .crm-an-kpis small { font-size: 11.5px; color: var(--crm-muted); }
body#spa-crm .crm-an-kpis b { font-size: 20px; font-variant-numeric: tabular-nums; }
body#spa-crm .crm-an-kpis span { font-size: 12px; color: var(--crm-muted); }
body#spa-crm .crm-an-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 12px; }
body#spa-crm .crm-an-card { display: flex; flex-direction: column; gap: 10px; padding: 14px; border: 1px solid var(--crm-line); border-radius: var(--crm-radius); background: var(--crm-surface); min-width: 0; }
body#spa-crm .crm-an-card h4 { margin: 0; font-size: 14px; font-weight: 700; }
body#spa-crm .crm-an-card header small { color: var(--crm-muted); font-size: 12px; }
body#spa-crm .crm-an-nota { margin: 0; font-size: 12px; color: var(--crm-muted); }
body#spa-crm .crm-an-barras { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
body#spa-crm .crm-an-barras li { display: grid; grid-template-columns: minmax(80px, 34%) 1fr auto; align-items: center; gap: 8px; font-size: 12.5px; border-radius: var(--crm-radius-sm); padding: 2px 4px; }
body#spa-crm .crm-an-barras li[data-an-drill] { cursor: pointer; }
body#spa-crm .crm-an-barras li[data-an-drill]:hover, body#spa-crm .crm-an-barras li[data-an-drill]:focus-visible { background: var(--crm-accent-soft); outline: 0; }
body#spa-crm .crm-an-rot { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body#spa-crm .crm-an-trilho { height: 10px; border-radius: 5px; background: var(--crm-line); overflow: hidden; }
body#spa-crm .crm-an-trilho i { display: block; height: 100%; background: var(--crm-accent); border-radius: 5px; }
body#spa-crm .crm-an-val { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
body#spa-crm .crm-an-val small { margin-left: 6px; color: var(--crm-muted); font-size: 11px; }
body#spa-crm .crm-an-colunas { list-style: none; margin: 0; padding: 0; display: flex; align-items: flex-end; gap: 6px; height: 190px; }
body#spa-crm .crm-an-colunas li { flex: 1 1 0; min-width: 0; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 2px; border-radius: var(--crm-radius-sm); }
body#spa-crm .crm-an-colunas li[data-an-drill] { cursor: pointer; }
body#spa-crm .crm-an-colunas li[data-an-drill]:hover, body#spa-crm .crm-an-colunas li[data-an-drill]:focus-visible { background: var(--crm-accent-soft); outline: 0; }
body#spa-crm .crm-an-col { width: 100%; flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column-reverse; justify-content: flex-start; }
body#spa-crm .crm-an-col i, body#spa-crm .crm-an-legenda i { display: block; width: 100%; border-radius: 3px 3px 0 0; }
body#spa-crm .crm-an-valtopo, body#spa-crm .crm-an-eixo, body#spa-crm .crm-an-colunas small { font-size: 10.5px; color: var(--crm-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
body#spa-crm .crm-an-eixo.is-oculto { visibility: hidden; }
body#spa-crm .crm-an-colunas.is-denso .crm-an-valtopo { display: none; }
body#spa-crm .s0 { background: var(--crm-accent); }
body#spa-crm .s1 { background: var(--crm-ok); }
body#spa-crm .s2 { background: var(--crm-warn); }
body#spa-crm .s3 { background: var(--crm-bad); }
body#spa-crm .s4 { background: color-mix(in srgb, var(--crm-accent) 55%, var(--crm-ok)); }
body#spa-crm .s5 { background: color-mix(in srgb, var(--crm-warn) 60%, var(--crm-bad)); }
body#spa-crm .crm-an-legenda { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12px; color: var(--crm-muted); }
body#spa-crm .crm-an-legenda li { display: inline-flex; align-items: center; gap: 5px; }
body#spa-crm .crm-an-legenda i { width: 10px; height: 10px; border-radius: 2px; }
body#spa-crm .crm-an-destaque { font-size: 13px; color: var(--crm-muted); }
body#spa-crm .crm-an-destaque b { font-size: 22px; color: var(--crm-text); }
body#spa-crm .crm-an-modal { width: min(880px, calc(100vw - 24px)); max-height: calc(100vh - 32px); overflow: auto; }
body#spa-crm .crm-an-modal td small { display: block; color: var(--crm-muted); font-size: 11.5px; }
body#spa-crm .crm-an-pag { display: flex; align-items: center; justify-content: center; gap: 12px; padding-top: 10px; font-size: 13px; color: var(--crm-muted); }
body#spa-crm .crm-mp-barra { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
body#spa-crm .crm-mp-metricas { display: flex; gap: 6px; flex-wrap: wrap; }
body#spa-crm .crm-mp-metricas .is-active { background: var(--crm-accent-soft); color: var(--crm-accent); border-color: var(--crm-accent); }
body#spa-crm .crm-mp { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(220px, 1fr); gap: 16px; align-items: start; }
body#spa-crm .crm-mp-grade { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); grid-auto-rows: 46px; gap: 4px; }
body#spa-crm .crm-mp-uf { display: flex; flex-direction: column; align-items: center; justify-content: center; border: 1px solid var(--crm-line); border-radius: var(--crm-radius-sm); background: var(--crm-surface); color: var(--crm-muted); cursor: pointer; padding: 0; font: inherit; }
body#spa-crm .crm-mp-uf b { font-size: 12.5px; color: var(--crm-text); }
body#spa-crm .crm-mp-uf small { font-size: 9.5px; font-variant-numeric: tabular-nums; color: var(--crm-text); }
body#spa-crm .crm-mp-uf.tem { background: color-mix(in srgb, var(--crm-accent) var(--forca), var(--crm-surface)); border-color: color-mix(in srgb, var(--crm-accent) 50%, var(--crm-line)); }
body#spa-crm .crm-mp-uf.is-sel { outline: 2px solid var(--crm-accent); outline-offset: 1px; }
body#spa-crm .crm-mp-lado { padding: 12px 14px; border: 1px solid var(--crm-line); border-radius: var(--crm-radius); background: var(--crm-surface); min-height: 120px; }
body#spa-crm .crm-mp-lado h4 { margin: 0 0 8px; font-size: 14px; }
body#spa-crm .crm-mp-dl { margin: 0; display: flex; flex-direction: column; gap: 8px; font-size: 13px; }
body#spa-crm .crm-mp-dl dt { color: var(--crm-muted); font-size: 11.5px; }
body#spa-crm .crm-mp-dl dd { margin: 0; font-variant-numeric: tabular-nums; }
body#spa-crm .crm-mp-chips { display: flex; flex-wrap: wrap; gap: 6px; }
body#spa-crm .crm-cli-campo select { width: 100%; height: 36px; padding: 0 10px; border: 1px solid var(--crm-line-strong) !important; border-radius: var(--crm-radius-sm) !important; background: var(--crm-surface) !important; color: var(--crm-text) !important; font: inherit; font-size: 13.5px; }
body#spa-crm .crm-mp-chip { min-width: 40px; padding: 6px 8px; border: 1px solid var(--crm-line-strong); border-radius: var(--crm-radius-sm); background: var(--crm-surface); color: var(--crm-text); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; }
body#spa-crm .crm-mp-chip.is-on { background: var(--crm-accent); border-color: var(--crm-accent); color: var(--crm-btn-fg); }
@media (max-width: 760px) {
  body#spa-crm .crm-mp { grid-template-columns: minmax(0, 1fr); }
  body#spa-crm .crm-an-cards { grid-template-columns: minmax(0, 1fr); }
}