/* ============================================================================
   TEMA DESTAK — redesign "Nexora" adaptado à marca (verde-lima sobre escuro)
   ----------------------------------------------------------------------------
   Camada 100% aditiva, carregada por ÚLTIMO nos dois HTML (index e login).
   Mesmo padrão do tema Noir do Lockcar: tokens em :root + overrides com o
   prefixo "body .classe" para vencer o cascade sem tocar nos CSS antigos.

   Regras de segurança (contrato JS↔CSS):
   - Nenhum id/classe/data-* é renomeado; só estilizamos os nomes existentes.
   - [hidden] continua escondendo tudo, com !important.
   - #messages/#cdMessages continuam sendo os scrollers (não mexemos em
     overflow/altura deles), sem scroll-behavior: smooth.
   - Nada de animação de entrada em listas re-renderizadas por polling.
   - Nada de transition de altura no composer nem transform/zoom no .paper-sheet.
   - O QR do WhatsApp permanece sobre fundo branco (estilos inline do JS).
   ========================================================================== */

/* Garantia: nada que o JS escondeu pode reaparecer por causa do tema. */
[hidden] { display: none !important; }

/* ----------------------------------------------------------------------------
   1. TOKENS
   Os tokens antigos (--bg, --surface, --lime…) são redeclarados aqui para que
   todo var() legado herde a paleta nova. Os tokens novos usam o prefixo --nx-.
   -------------------------------------------------------------------------- */
:root {
  /* Neutros claros (conteúdo, estilo Nexora) */
  --bg: #f4f6f9;
  --surface: #ffffff;
  --surface-2: #f6f8fb;
  --surface-3: #eef2f7;
  --border: #e7eaf0;
  --border-soft: #eef1f5;
  --text: #0f172a;
  --muted: #64748b;
  --muted-2: #8a94a6;

  /* Marca Destak: verde-lima como acento único de interação */
  --lime: #8ce619;
  --lime-soft: rgba(140, 230, 25, .15);

  /* Auditoria r1: cor única de link/ação textual (verde escuro AA sobre claro).
     O azul fica reservado a dados e status, nunca a link padrão. */
  --nx-link: #136c3a;

  /* Semânticas (só para dados e status) */
  --amber: #d97706;
  --red: #dc2626;
  --blue: #0564ff;
  --purple: #9a68f0;

  /* Ponte com interface.css */
  --overview-navy: #0f1217;
  --overview-cyan: #74c20d;
  --overview-bg: #f4f6f9;
  --overview-line: #e7eaf0;
  --overview-shadow: 0 12px 32px rgba(15, 23, 42, .08);

  /* Tokens novos do tema */
  --nx-ink: #0a0c10;            /* sidebar e superfícies escuras da marca */
  --nx-ink-2: #12151b;          /* hover/cartões dentro do escuro */
  --nx-ink-line: #1d222b;       /* hairline sobre o escuro */
  --nx-lime: #8ce619;
  --nx-lime-ink: #10230b;       /* texto sobre lima (AA) */
  --nx-lime-dark: #4d7c0f;      /* lima escuro p/ texto e ícones sobre claro */
  --nx-lime-mid: #74c20d;       /* barras, dots e traços */
  --nx-lime-tint: #effbdd;      /* pastel de lima p/ tiles e fundos */
  --nx-blue: #0564ff;
  --nx-blue-text: #0554d6;
  --nx-blue-tint: #eaf1ff;
  --nx-purple: #9a68f0;
  --nx-purple-text: #6f3dd4;
  --nx-purple-tint: #f2ecfe;
  --nx-green: #16a34a;
  --nx-green-text: #15803d;
  --nx-green-tint: #e8f6ee;
  --nx-amber-text: #935e0a;
  --nx-amber-tint: #fbf2dc;
  --nx-red: #dc2626;
  --nx-red-text: #b42318;
  --nx-red-tint: #fdecec;
  --nx-text-1: #0f172a;
  --nx-text-2: #344054;
  --nx-text-3: #667085;

  /* Geometria e sombra */
  --nx-r-card: 20px;
  --nx-r-card-lg: 24px;
  --nx-r-tile: 12px;
  --nx-r-input: 14px;
  --nx-r-pill: 999px;
  --nx-shadow-card: 0 1px 2px rgba(15, 23, 42, .04), 0 12px 32px -14px rgba(15, 23, 42, .08);
  --nx-shadow-pop: 0 24px 60px -20px rgba(15, 23, 42, .22);
  --nx-shadow-lime: 0 8px 20px -6px rgba(140, 230, 25, .45);

  /* Tipografia */
  --nx-font-ui: "Plus Jakarta Sans", "DM Sans", Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --nx-font-display: "Space Grotesk", "Plus Jakarta Sans", ui-sans-serif, sans-serif;

  font-family: var(--nx-font-ui);
  color: var(--text);
  background: var(--bg);
}

/* ----------------------------------------------------------------------------
   2. BASE
   -------------------------------------------------------------------------- */
html, body { background: var(--bg); }
body { color: var(--text); font-family: var(--nx-font-ui); }

/* Títulos e números grandes: Space Grotesk, como os stat cards do Nexora. */
body h1, body h2, body h3 { font-family: var(--nx-font-ui); }
body .topbar h1,
body .overview-welcome h2,
body .section-heading h2,
body .welcome-row h2 {
  font-family: var(--nx-font-display);
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--nx-text-1);
}
body .summary-card strong,
body .crm-summary strong,
body .margin-summary-grid strong,
body .metric-card > strong,
body .campaign-numbers strong,
body .agent-metrics strong,
body .estimate strong,
body .policy-list strong,
body .discount-result strong,
body .cost-breakdown > div.total b,
body .funnel-card footer b,
body .donut strong {
  font-family: var(--nx-font-display);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
}

/* Eyebrows e micro-rótulos: caixa alta com respiro, em Space Grotesk. */
body .nav-section-label,
body .overview-kicker,
body .overview-card header span,
body .summary-card small,
body .unit-card small,
body .unit-period > span,
body .metric-card > small,
body .panel-header small,
body .review-card-header small,
body .margin-summary-grid small,
body .image-details small,
body .source-grid small,
body .crm-summary small,
body .campaign-head small,
body .ec-meta-head small,
body .ec-meta small,
body .approval-summary > span,
body .discount-result small,
body .items-header {
  font-family: var(--nx-font-display);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
}

/* Foco visível: anel azul (informação), sempre por cima do componente. */
body button:focus-visible,
body input:focus-visible,
body textarea:focus-visible,
body a:focus-visible {
  outline: 3px solid rgba(5, 100, 255, .35);
  outline-offset: 2px;
}
body select:focus-visible { outline: 3px solid rgba(5, 100, 255, .35); outline-offset: 2px; }
body button:disabled { cursor: not-allowed; }

::selection { background: rgba(140, 230, 25, .35); color: var(--nx-text-1); }

/* ----------------------------------------------------------------------------
   3. SIDEBAR — quase preta, marca Destak, item ativo em PÍLULA LIMA
   (como a pílula azul do Nexora, com texto escuro por contraste AA)
   -------------------------------------------------------------------------- */
body .sidebar {
  background: var(--nx-ink);
  border-right: 1px solid var(--nx-ink-line);
  box-shadow: none;
}
body .brand-mark {
  border: 0;
  border-radius: var(--nx-r-tile);
  background: var(--nx-lime);
  color: var(--nx-lime-ink);
  box-shadow: 0 0 26px rgba(140, 230, 25, .28);
  transform: none;
  font-weight: 800;
}
body .brand strong { color: #f5f7fa; letter-spacing: .06em; }
body .brand span { color: #7b8494; }
body .workspace-switcher {
  background: var(--nx-ink-2);
  border-color: var(--nx-ink-line);
  border-radius: 14px;
  box-shadow: none;
}
body .workspace-switcher::before { background: var(--nx-lime); }
body .workspace-switcher strong { color: #f5f7fa; }
body .workspace-switcher span { color: #7b8494; }
body .workspace-avatar { background: #1d232d; color: #cdd5e0; border-radius: 10px; }
body .nav-section-label { color: #5b6470; font-size: 9px; letter-spacing: .16em; }
body .nav-item {
  border-radius: var(--nx-r-pill);
  padding-left: 14px;
  padding-right: 12px;
  color: #b7bfc9;
  font-weight: 600;
}
body .nav-item:hover { color: #ffffff; background: var(--nx-ink-2); }
body .nav-item > span { color: #77808c; }
body .nav-item.active {
  color: var(--nx-lime-ink);
  background: var(--nx-lime);
  box-shadow: var(--nx-shadow-lime);
  font-weight: 800;
}
body .nav-item.active > span { color: var(--nx-lime-ink); }
body .nav-item b { border-radius: var(--nx-r-pill); background: #222834; color: #c3cad4; }
body .nav-item b.warn { background: #f4b740; color: #201704; }
body .nav-item.active b,
body .nav-item.active b.warn { background: rgba(16, 35, 11, .18); color: var(--nx-lime-ink); }
body .profile { border-top-color: var(--nx-ink-line); }
body .profile-avatar { background: rgba(140, 230, 25, .16); color: var(--nx-lime); }
body .profile strong { color: #f5f7fa; }
body .profile small { color: #7b8494; }
body .logout-button {
  border: 1px solid var(--nx-ink-line);
  border-radius: var(--nx-r-pill);
  color: #8a94a6;
  background: transparent;
}
body .logout-button:hover { color: #ffffff; border-color: #333b47; background: var(--nx-ink-2); }

/* ----------------------------------------------------------------------------
   4. TOPBAR E BARRA DE DEMONSTRAÇÃO
   -------------------------------------------------------------------------- */
body .topbar {
  background: rgba(255, 255, 255, .94);
  border-bottom: 1px solid var(--border);
  box-shadow: none;
  backdrop-filter: blur(14px);
}
/* Auditoria r1: um título só por tela. O H1 do corpo (.section-heading h2)
   é o título; o do topbar vira breadcrumb discreto e a descrição some. */
body .topbar h1 {
  font-family: var(--nx-font-ui);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--nx-text-3);
}
body .topbar .eyebrow { display: none; }
body .eyebrow { color: var(--nx-text-3); }
body .channel-health {
  border-radius: var(--nx-r-pill);
  border-color: var(--border);
  background: #ffffff;
  color: var(--nx-text-2);
  font-weight: 600;
}
body .channel-health i { background: var(--nx-green); box-shadow: 0 0 0 4px var(--nx-green-tint); }
body .icon-button {
  border-radius: var(--nx-r-pill);
  border-color: var(--border);
  background: #ffffff;
  color: var(--nx-text-2);
}
body .icon-button:hover { background: var(--surface-3); }
body .demo-bar {
  background: #eef2f8;
  border-bottom-color: var(--border);
  color: var(--nx-text-3);
}
body .demo-bar select { border-radius: var(--nx-r-pill); border-color: #d6dbe3; }

/* ----------------------------------------------------------------------------
   5. BOTÕES, PÍLULAS E CHIPS — tudo que é clicável vira pílula
   -------------------------------------------------------------------------- */
body .primary-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: var(--nx-r-pill);
  background: var(--nx-lime);
  border: 1px solid var(--nx-lime);
  color: var(--nx-lime-ink);
  font-weight: 800;
  text-decoration: none;
  box-shadow: var(--nx-shadow-lime);
}
body .primary-button:hover {
  background: #7fd90e;
  border-color: #7fd90e;
  color: var(--nx-lime-ink);
  transform: translateY(-1px);
}
body .primary-button:disabled {
  background: #e2e8f0;
  border-color: #e2e8f0;
  color: #94a3b8;
  box-shadow: none;
  transform: none;
}
body .secondary-button {
  border-radius: var(--nx-r-pill);
  background: #ffffff;
  border: 1px solid #d6dbe3;
  color: var(--nx-text-2);
  font-weight: 700;
}
body .secondary-button:hover { background: var(--surface-2); border-color: #c2c9d4; }
body .danger-button {
  border-radius: var(--nx-r-pill);
  background: var(--nx-red-tint);
  border: 1px solid #f5c2c2;
  color: var(--nx-red-text);
}
body .danger-button:hover { background: #fbdcdc; border-color: #efabab; }
body .text-button, body .row-action { color: var(--nx-link); font-weight: 700; }
body .review-back {
  border-radius: var(--nx-r-pill);
  border-color: #d6dbe3;
  background: #ffffff;
  color: var(--nx-text-2);
}

/* Botão do WhatsApp (recompra): mantém o verde oficial, só arredonda. */
body .ec-wa { border-radius: var(--nx-r-pill); box-shadow: 0 6px 16px -6px rgba(37, 211, 102, .5); }

/* Filtros e período: trilho cinza com pílula branca ativa (padrão Nexora). */
body .period-control, body .filter-pills {
  background: var(--surface-3);
  border: 1px solid transparent;
  border-radius: var(--nx-r-pill);
  padding: 4px;
}
body .period-control button, body .filter-pills button {
  border-radius: var(--nx-r-pill);
  color: var(--nx-text-3);
  font-weight: 600;
}
body .period-control button.active, body .filter-pills button.active {
  background: #ffffff;
  color: var(--nx-text-1);
  box-shadow: 0 1px 2px rgba(15, 23, 42, .08);
}

/* Pílulas de status: pastel + texto forte, sempre AA. */
body .status {
  border-radius: var(--nx-r-pill);
  padding: 6px 12px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .06em;
}
body .status.live { background: var(--nx-green-tint); color: var(--nx-green-text); }
body .status.live::before { background: var(--nx-green); }
body .status.pending { background: var(--nx-amber-tint); color: var(--nx-amber-text); }
body .status.danger { background: var(--nx-red-tint); color: var(--nx-red-text); }
body .status.draft { background: var(--surface-3); color: var(--nx-text-3); }
body .ai-status { background: var(--nx-purple-tint); color: var(--nx-purple-text); }

/* Mini-etiquetas das conversas. */
body .mini-tag { border-radius: var(--nx-r-pill); padding: 4px 8px; letter-spacing: .07em; }
body .mini-tag.ai { background: var(--nx-lime-tint); color: var(--nx-lime-dark); }
body .mini-tag.recipe { background: var(--nx-amber-tint); color: var(--nx-amber-text); }
body .mini-tag.human { background: var(--nx-blue-tint); color: var(--nx-blue-text); }
body .mini-tag.done { background: var(--surface-3); color: var(--nx-text-3); }

/* Chips genéricos e placar. */
body .tag { border-radius: var(--nx-r-pill); background: var(--surface-3); color: var(--nx-text-2); }
body .score.high { color: var(--nx-green-text); }
body .score.medium { color: var(--nx-amber-text); }
body .score.low { color: var(--nx-red-text); }
body .table-panel td.late { color: var(--nx-red-text); }

/* ----------------------------------------------------------------------------
   6. SUPERFÍCIES — cartões brancos 20px, hairline e sombra difusa
   -------------------------------------------------------------------------- */
body .panel,
body .table-panel,
body .agent-card,
body .new-agent-card,
body .campaign-card,
body .integration-card,
body .review-card,
body .overview-card,
body .summary-card,
body .metric-card,
body .crm-summary article,
body .margin-summary-grid article {
  background: #ffffff;
  border-color: var(--border);
  border-radius: var(--nx-r-card);
  box-shadow: var(--nx-shadow-card);
}
body .review-card { border-radius: var(--nx-r-card); }
body .review-card-header { border-bottom-color: var(--border-soft); }
body .review-card-header h2 { color: var(--nx-text-1); }

/* ----------------------------------------------------------------------------
   7. VISÃO GERAL — saudação grande, stat cards com número 34-40px
   -------------------------------------------------------------------------- */
body .overview-kicker { color: var(--nx-lime-dark); font-size: 10px; }
body .overview-welcome h2 { font-size: clamp(28px, 3vw, 38px); }
body .overview-welcome p { color: var(--nx-text-3); font-size: 15px; }

/* Ação principal do dia: cartão escuro da marca com tile lima. */
body .overview-main-action {
  background: var(--nx-ink);
  border-radius: 18px;
  box-shadow: 0 16px 36px -14px rgba(10, 12, 16, .5);
}
body .overview-main-action:hover { background: #141821; }
body .overview-main-action > span { background: var(--nx-lime); color: var(--nx-lime-ink); border-radius: var(--nx-r-tile); }
body .overview-main-action b { font-size: 14px; }
body .overview-main-action small { color: #9aa3b2; }

body .summary-card { gap: 14px; padding: 20px; }
body .summary-card small { color: var(--nx-text-3); }
body .summary-card strong { font-size: 32px; color: var(--nx-text-1); }
body .summary-card em { color: var(--nx-text-3); }
body .summary-card.attention { border-color: #f0dcb4; background: #fffcf4; }
body button.summary-card:hover { border-color: #d6dbe3; box-shadow: var(--overview-shadow); }
body .summary-icon { border-radius: var(--nx-r-tile); background: var(--nx-amber-tint); color: var(--nx-amber-text); }
body .summary-icon.blue { background: var(--nx-blue-tint); color: var(--nx-blue-text); }
body .summary-icon.green { background: var(--nx-green-tint); color: var(--nx-green-text); }
body .summary-icon.violet { background: var(--nx-purple-tint); color: var(--nx-purple-text); }
body .summary-card > b { color: var(--nx-text-3); }

body .overview-card > header { border-bottom-color: var(--border-soft); }
body .overview-card header span { color: var(--nx-text-3); }
body .overview-card header h3 { font-family: var(--nx-font-ui); font-weight: 800; color: var(--nx-text-1); }

body .priority-item { border-bottom-color: var(--border-soft); }
body .priority-item:hover { background: var(--surface-2); border-radius: var(--nx-r-tile); }
body .priority-mark { border-radius: var(--nx-r-tile); background: var(--nx-amber-tint); color: var(--nx-amber-text); }
body .priority-mark.chat { background: var(--nx-blue-tint); color: var(--nx-blue-text); }
body .priority-mark.budget { background: var(--nx-green-tint); color: var(--nx-green-text); }
body .priority-item > b { color: var(--nx-link); }
body .priority-item.critical > b { color: var(--nx-amber-text); }

/* Funil: barra em degradê de lima sobre trilho claro. */
body .funnel-steps i { background: var(--surface-3); }
body .funnel-steps i::after { background: linear-gradient(90deg, var(--nx-lime), var(--nx-lime-mid)); }
body .funnel-card > footer { background: var(--surface-2); border-top-color: var(--border-soft); }
body .funnel-card .positive { color: var(--nx-green-text); }

body .unit-card { border-right-color: var(--border-soft); }
body .unit-card:hover { background: var(--surface-2); }
body .unit-card.active { background: var(--nx-lime-tint); box-shadow: inset 0 -3px var(--nx-lime-mid); }
body .unit-card.active > b { color: var(--nx-lime-dark); }
body .unit-pin { border-radius: var(--nx-r-tile); background: var(--nx-lime-tint); color: var(--nx-lime-dark); }
body .unit-period select { border-radius: var(--nx-r-pill); border-color: #d6dbe3; }

body .quick-actions button { border-right-color: var(--border-soft); }
body .quick-actions button:hover { background: var(--surface-2); }
body .quick-actions button > span { border-radius: var(--nx-r-tile); background: var(--nx-lime-tint); color: var(--nx-lime-dark); }

/* Cartões de métrica (legado da demo): mesma família visual. */
body .metric-card { border-top-width: 1px; border-top-color: var(--border); }
body .metric-icon { border-radius: var(--nx-r-tile); }

/* ----------------------------------------------------------------------------
   8. INBOX — lista, chat e painel de contexto
   -------------------------------------------------------------------------- */
body .conversation-list, body .context-panel, body .chat-column, body .composer { background: #ffffff; }
body .conversation-list { border-right-color: var(--border); }
body .context-panel { border-left-color: var(--border); }

/* Busca em pílula (padrão Nexora). */
body .list-toolbar label, body .flow-list label, body .table-toolbar label {
  border-radius: var(--nx-r-pill);
  border-color: var(--border);
  background: var(--surface-2);
  padding: 0 14px;
}
body .list-toolbar button, body .chat-actions button {
  border-radius: var(--nx-r-pill);
  border-color: var(--border);
  background: #ffffff;
  color: var(--nx-text-2);
}
body .table-toolbar { border-bottom-color: var(--border-soft); }
body .table-toolbar button { border-radius: var(--nx-r-pill); background: #ffffff; color: var(--nx-text-2); }

body .conversation { border-bottom-color: var(--border-soft); background: #ffffff; color: var(--nx-text-2); }
body .conversation:hover { background: var(--surface-2); }
body .conversation.active { background: var(--nx-lime-tint); box-shadow: inset 3px 0 var(--nx-lime); }
body .conversation-copy strong { color: var(--nx-text-1); }
body .conversation-copy p { color: var(--nx-text-3); }
body .contact-avatar { border-radius: var(--nx-r-pill); }
body .contact-avatar i { background: var(--nx-green); border-color: #ffffff; }
body .unread { background: var(--nx-lime); color: var(--nx-lime-ink); }

body .chat-header { border-bottom-color: var(--border); }
body .person-title strong { color: var(--nx-text-1); }
body .chat-context { border-bottom-color: var(--border-soft); color: var(--nx-text-3); }
body .chat-context b { color: var(--nx-text-2); }
/* Select de etiqueta do chat real (#cdStatus) e selects da barra de equipe. */
body .chat-context select, body .ec-inline select {
  border-radius: var(--nx-r-pill);
  border-color: #d6dbe3;
  background-color: #ffffff;
}

body .messages { background: var(--bg); background-image: none; }
body .day-divider span {
  border-radius: var(--nx-r-pill);
  background: #ffffff;
  border-color: var(--border);
  color: var(--nx-text-3);
  letter-spacing: .1em;
}
body .message {
  border-radius: 6px 18px 18px 18px;
  background: #ffffff;
  border-color: var(--border);
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}
body .message.outgoing {
  border-radius: 18px 6px 18px 18px;
  background: #eef9da;
  border-color: #d8efb4;
}
body .message p { color: var(--nx-text-1); }
body .message small { color: var(--nx-lime-dark); letter-spacing: .08em; }
body .message time { color: var(--nx-text-3); }
body .system-message { border-radius: var(--nx-r-pill); background: var(--surface-3); border-color: var(--border); color: var(--nx-text-3); }
body .system-message span { color: var(--nx-lime-dark); }

body .composer { border-top-color: var(--border); }
body .composer form { border-radius: 24px; border-color: #d6dbe3; background: #ffffff; }
body .composer .send-button { border-radius: var(--nx-r-pill); background: var(--nx-lime); color: var(--nx-lime-ink); }
body .reply-mode { color: var(--nx-blue-text); }
body .reply-mode button { color: var(--nx-text-2); font-weight: 700; }

body .context-tabs { border-bottom-color: var(--border-soft); }
body .context-tabs button.active { color: var(--nx-text-1); border-bottom-color: var(--nx-lime); }
body .recipe-title small { color: var(--nx-lime-dark); letter-spacing: .1em; }
body .recipe-title h3 { color: var(--nx-text-1); }
body .confidence { border-radius: var(--nx-r-tile); background: var(--surface-2); border-color: var(--border-soft); }
body .confidence i { background: var(--nx-lime-mid); }
body .confidence-chip { color: var(--nx-green-text); }
body .confidence-chip.low { color: var(--nx-amber-text); }
body .recipe-fields input, body .formula-item input { border-radius: var(--nx-r-tile); border-color: #d6dbe3; }
body .estimate { border-radius: var(--nx-r-tile); border-color: #d8efb4; background: var(--nx-lime-tint); }
body .estimate span, body .estimate small { color: var(--nx-lime-dark); }
body .estimate strong { color: #3a5e0b; }
body .full-review-link { border-radius: var(--nx-r-tile); border-color: #c7dbff; background: var(--nx-blue-tint); color: var(--nx-blue-text); }
body .full-review-link > span { border-radius: 10px; background: var(--nx-blue); color: #ffffff; }
body .full-review-link:hover { border-color: #9dbfff; background: #dfeafe; }

/* Barra de etiquetas da equipe sobre o chat. */
body .ec-tagbar { background: var(--surface-2); border-bottom-color: var(--border-soft); }
body .ec-tag-toggle { border-radius: var(--nx-r-pill); border-color: #d6dbe3; }
body .ec-tag-toggle:hover { border-color: #aeb7c4; }
body .ec-tag-toggle.on { background: var(--nx-lime); border-color: var(--nx-lime); color: var(--nx-lime-ink); font-weight: 700; }
body .ec-status-select { border-radius: var(--nx-r-pill); }
/* background-color (e não o shorthand) para o chevron dos selects sobreviver. */
body .ec-status-select.a { background-color: var(--nx-blue-tint); color: var(--nx-blue-text); border-color: #c7dbff; }
body .ec-status-select.g { background-color: var(--nx-green-tint); color: var(--nx-green-text); border-color: #b9e4c8; }
body .ec-status-select.w { background-color: var(--nx-amber-tint); color: var(--nx-amber-text); border-color: #f0dcab; }
body .ec-status-select.r { background-color: var(--nx-red-tint); color: var(--nx-red-text); border-color: #f5c2c2; }
body .ec-tag { border-radius: var(--nx-r-pill); }
body .ec-tag.a { background: var(--nx-blue-tint); color: var(--nx-blue-text); }
body .ec-tag.g { background: var(--nx-green-tint); color: var(--nx-green-text); }
body .ec-tag.w { background: var(--nx-amber-tint); color: var(--nx-amber-text); }
body .ec-tag.r { background: var(--nx-red-tint); color: var(--nx-red-text); }
body .ec-owner { background: var(--nx-blue); }
body .ec-owner.queue { background: var(--surface-3); color: var(--nx-text-3); }
body .ec-filters { border-bottom-color: var(--border-soft); }
body .ec-filters select { border-radius: var(--nx-r-pill); border-color: #d6dbe3; }

/* ----------------------------------------------------------------------------
   9. RECEITA IA (fluxo real ec-*)
   -------------------------------------------------------------------------- */
body .ec-field > span { color: var(--nx-text-2); }
body .ec-field input, body .ec-field select, body .ec-field textarea {
  border-radius: var(--nx-r-input);
  border-color: #d6dbe3;
}
body .ec-field input:focus, body .ec-field select:focus, body .ec-field textarea:focus {
  border-color: var(--nx-blue);
  box-shadow: 0 0 0 3px rgba(5, 100, 255, .14);
}
body .ec-steps { border-bottom-color: var(--border-soft); }
body .ec-steps b { background: var(--surface-3); color: var(--nx-text-3); }
body .ec-steps li.active { color: var(--nx-text-1); }
body .ec-steps li.active b { background: var(--nx-lime); color: var(--nx-lime-ink); }
body .ec-steps li.done b { background: var(--nx-green-tint); color: var(--nx-green-text); }
body .ec-drop { border-radius: var(--nx-r-card); border-color: #c6d0dd; background: var(--surface-2); }
body .ec-drop:hover, body .ec-drop.over { border-color: var(--nx-lime-mid); background: var(--nx-lime-tint); }
body .ec-drop strong { color: var(--nx-text-1); }
body .ec-drop-change { border-radius: var(--nx-r-pill); background: rgba(10, 12, 16, .85); }
body .ec-photo { border-radius: var(--nx-r-card); border-color: var(--border); }
body .ec-meta span { border-radius: var(--nx-r-tile); background: var(--surface-2); border-color: var(--border-soft); }
body .ec-meta strong { color: var(--nx-text-1); }
body .ec-warnings { border-radius: var(--nx-r-tile); background: var(--nx-amber-tint); border-color: #f0dcab; color: var(--nx-amber-text); }
body .ec-ok { border-radius: var(--nx-r-tile); background: var(--nx-green-tint); border-color: #b9e4c8; color: var(--nx-green-text); }
body .ec-item { border-radius: var(--nx-r-card); border-color: var(--border); }
body .ec-item header b { border-radius: 8px; background: var(--nx-blue-tint); color: var(--nx-blue-text); }
body .ec-check { border-radius: var(--nx-r-input); background: var(--surface-2); border-color: var(--border); }
body .ec-check input { accent-color: var(--nx-text-1); }
body .ec-sale { border-radius: var(--nx-r-card); background: var(--surface-2); border-color: var(--border); }
body .ec-done { border-radius: var(--nx-r-card); background: var(--nx-green-tint); border-color: #b9e4c8; }
body .ec-done strong { color: var(--nx-green-text); }

/* ----------------------------------------------------------------------------
   10. RECOMPRA
   -------------------------------------------------------------------------- */
body .ec-rp-filters { border-radius: var(--nx-r-card); border-color: var(--border); box-shadow: var(--nx-shadow-card); }
body .ec-rp { border-radius: 16px; border-color: var(--border); border-left: 4px solid var(--nx-blue); }
body .ec-rp.late { border-left-color: var(--nx-red); }
body .ec-rp strong { color: var(--nx-text-1); }
body .ec-rp-when b { color: var(--nx-blue-text); }
body .ec-rp.late .ec-rp-when b { color: var(--nx-red-text); }
body .ec-rp-group > h3 b { background: var(--nx-blue-tint); color: var(--nx-blue-text); }

/* ----------------------------------------------------------------------------
   11. CONFERÊNCIA DE RECEITA (review-*)
   -------------------------------------------------------------------------- */
body .review-tabs { border-radius: 16px; border-color: var(--border); box-shadow: var(--nx-shadow-card); }
body .review-tabs button { color: var(--nx-text-3); }
body .review-tabs button:hover { color: var(--nx-text-1); }
body .review-tabs button.active { color: var(--nx-text-1); border-bottom-color: var(--nx-lime); }
body .review-tabs button > span { background: var(--surface-3); color: var(--nx-text-3); }
body .review-tabs button.active > span { background: var(--nx-lime); color: var(--nx-lime-ink); }
body .review-tabs button > b { border-radius: var(--nx-r-pill); background: var(--nx-purple-tint); color: var(--nx-purple-text); }

body .review-status.pending { background: var(--nx-amber-tint); color: var(--nx-amber-text); }
body .review-status.confirmed { background: var(--nx-green-tint); color: var(--nx-green-text); }
body .review-status.danger { background: var(--nx-red-tint); color: var(--nx-red-text); }

body .review-alert { border-radius: 16px; border-color: #f0dcab; background: #fffcf1; }
body .internal-alert { border-radius: 16px; border-color: #c7dbff; background: var(--nx-blue-tint); color: var(--nx-blue-text); }
body .internal-alert > span { background: var(--nx-blue); border-radius: 8px; }
body .internal-alert strong { color: var(--nx-blue-text); }
body .internal-alert p { color: #40598c; }

body .preview-actions button { border-radius: var(--nx-r-pill); border-color: #d6dbe3; color: var(--nx-text-2); }
body .prescription-preview { background-color: var(--surface-3); }
body .completion-chip, body .confidence-summary { border-radius: var(--nx-r-pill); background: var(--surface-3); color: var(--nx-text-2); }
body .required-chip { border-radius: var(--nx-r-pill); background: var(--nx-red-tint); color: var(--nx-red-text); }
body .confidence-summary b { color: var(--nx-lime-dark); }
body .quality-row { border-bottom-color: var(--border-soft); }
body .quality-row.warning { background: #fffcf1; }
body .quality-icon.ok { background: var(--nx-green-tint); color: var(--nx-green-text); }
body .quality-icon.warn { background: var(--nx-amber-tint); color: var(--nx-amber-text); }
/* Auditoria r1: status do checklist como pílula pastel com texto verde escuro
   (lima nunca vira cor de texto sobre fundo claro). */
body .quality-row > b {
  width: fit-content;
  border-radius: var(--nx-r-pill);
  padding: 3px 10px;
  background: rgba(140, 230, 25, .18);
  color: #35610b;
  font-size: 10px;
  letter-spacing: .07em;
}
body .quality-row.warning > b { background: var(--nx-amber-tint); color: var(--nx-amber-text); }
body .source-grid { background: var(--border-soft); }
body .audit-timeline .current i { background: var(--nx-lime-mid); box-shadow: 0 0 0 1px var(--nx-lime-mid); }

body .review-field input,
body .review-field select,
body .item-fields input,
body .critical-decision select,
body .review-notes textarea {
  border-radius: var(--nx-r-input);
  border-color: #d6dbe3;
}
body .review-field input:focus,
body .review-field select:focus,
body .item-fields input:focus,
body .critical-decision select:focus,
body .review-notes textarea:focus {
  border-color: var(--nx-blue);
  box-shadow: 0 0 0 3px rgba(5, 100, 255, .14);
}
body .field-guidance { border-radius: var(--nx-r-tile); background: var(--surface-2); }
body .field-guidance span { background: var(--nx-text-2); }
body .review-item { border-bottom-color: var(--border-soft); }
body .review-item.critical { border-radius: var(--nx-r-tile); border-color: #f0dcab; background: #fffcf1; }
body .review-item-title > span { border-radius: 8px; background: var(--nx-ink); color: #ffffff; }
body .critical-message { border-radius: var(--nx-r-tile); }

body .approval-card { border-color: #d8efb4; }
body .approval-checks label { border-radius: var(--nx-r-input); border-color: var(--border); background: var(--surface-2); }
body .approval-checks label:hover { border-color: #c2c9d4; background: #ffffff; }
body .approval-checks input { accent-color: var(--nx-text-1); }
body .approval-summary { border-radius: var(--nx-r-input); border-color: #d8efb4; background: var(--nx-lime-tint); }
body .approval-summary > span { color: var(--nx-lime-dark); }
body .approval-summary strong { color: var(--nx-text-1); }

/* Orçamento injetado pelo runtime (aba custos). */
body .budget-approval { border-radius: var(--nx-r-card); }
body .budget-approval h2 { font-family: var(--nx-font-display); letter-spacing: -.02em; color: var(--nx-text-1); }

/* ----------------------------------------------------------------------------
   12. MARGEM, CUSTOS E HISTÓRICO
   -------------------------------------------------------------------------- */
body .margin-summary-grid strong { font-size: 28px; color: var(--nx-text-1); }
body .margin-summary-grid .profit strong { color: var(--nx-green-text); }
body .margin-summary-grid .highlight { border-color: #d8efb4; background: var(--nx-lime-tint); }
body .margin-summary-grid .highlight strong { color: #3a5e0b; }
body .margin-table th { background: #eef2f8; color: var(--nx-text-2); border-bottom-color: var(--border); }
body .margin-table td { border-bottom-color: var(--border-soft); }
body .margin-table td.positive { color: var(--nx-green-text); }
body .margin-table tr.attention-row { background: #fffcf1; }
body .margin-table tfoot td { background: var(--nx-ink); color: #ffffff; }
body .margin-pill.healthy { background: var(--nx-green-tint); color: var(--nx-green-text); }
body .margin-pill.attention { background: var(--nx-amber-tint); color: var(--nx-amber-text); }
body .margin-legend i.healthy { background: var(--nx-green); }
body .margin-legend i.attention { background: var(--amber); }
body .calculation-note { border-radius: var(--nx-r-tile); background: var(--surface-2); }
body .discount-simulator input { accent-color: var(--nx-lime-mid); }
body .discount-simulator b { border-radius: var(--nx-r-pill); background: var(--nx-lime-tint); color: var(--nx-lime-dark); }
body .discount-result { border-radius: var(--nx-r-tile); border-color: var(--border); background: var(--border); }
body .discount-result strong { color: var(--nx-text-1); }
body .cost-breakdown i { background: var(--nx-ink); }
body .cost-breakdown i.packaging { background: var(--nx-lime-mid); }
body .cost-breakdown i.operation { background: #9aa3b2; }
body .cost-breakdown > div { border-bottom-color: var(--border-soft); }
body .cost-breakdown > div.total span, body .cost-breakdown > div.total b { color: var(--nx-text-1); }
body .price-warning { border-radius: var(--nx-r-tile); }
body .history-entry.current > i { background: var(--nx-lime-mid); box-shadow: 0 0 0 1px var(--nx-lime-mid); }

/* ----------------------------------------------------------------------------
   13. TABELAS — faixa suave no cabeçalho, linhas altas
   -------------------------------------------------------------------------- */
body .table-panel th {
  background: #eef2f8;
  color: var(--nx-text-2);
  border-bottom: 0;
  font-size: 11px;
  letter-spacing: .08em;
}
body .table-panel td { border-bottom-color: var(--border-soft); color: var(--nx-text-2); }
body .table-panel td strong { color: var(--nx-text-1); }
body .channel-dot { border-radius: 8px; }

/* ----------------------------------------------------------------------------
   14. CRM E CONTATOS
   -------------------------------------------------------------------------- */
body .crm-summary strong { font-size: 30px; color: var(--nx-text-1); }
body .kanban-column { background: var(--surface-3); border-color: transparent; border-radius: var(--nx-r-card); }
body .kanban-column > header { color: var(--nx-text-3); letter-spacing: .1em; }
body .kanban-column > header b { border-radius: var(--nx-r-pill); background: #ffffff; color: var(--nx-text-2); }
body .lead-card { border-radius: 16px; border-color: var(--border); background: #ffffff; box-shadow: 0 1px 2px rgba(15, 23, 42, .05); }
body .lead-card:hover { border-color: #c2c9d4; }
body .lead-card strong { color: var(--nx-text-1); }
body .lead-card.alert-card { border-left: 3px solid var(--amber); }
body .lead-card.won-card { border-left: 3px solid var(--nx-lime); background: linear-gradient(110deg, rgba(140, 230, 25, .08), #ffffff 55%); }
body .lead-card select { border-radius: var(--nx-r-tile); border-color: #d6dbe3; }
/* Auditoria r1: pílulas de canal em neutro — o azul/roxo saturado disputava
   com a primária lima. Canal é metadado, não ação. */
body .source { border-radius: var(--nx-r-pill); padding: 3px 8px; }
body .google-source,
body .meta-source,
body .organic-source { background: #eef1f4; color: var(--nx-text-2); }
body .lead-card footer span { background: #eef1f4; color: var(--nx-text-2); }

/* ----------------------------------------------------------------------------
   15. CAMPANHAS (funil real + demo)
   -------------------------------------------------------------------------- */
body .ec-invest { border-radius: 10px; border-color: #d6dbe3; }
body .ec-meta-head h3 { color: var(--nx-text-1); }
body .ec-events li { border-radius: var(--nx-r-tile); background: var(--surface-2); border-color: var(--border-soft); }
body .ec-ev { border-radius: var(--nx-r-pill); }
body .ec-ev.lead { background: var(--nx-blue-tint); color: var(--nx-blue-text); }
body .ec-ev.purchase { background: var(--nx-green-tint); color: var(--nx-green-text); }
body .campaign-channel { border-radius: var(--nx-r-tile); }
body .campaign-head h3 { color: var(--nx-text-1); }
body .campaign-numbers strong { color: var(--nx-text-1); }

/* ----------------------------------------------------------------------------
   16. AGENTES DE IA — roxo é a cor da IA
   -------------------------------------------------------------------------- */
body .agent-symbol { border-radius: var(--nx-r-tile); background: var(--nx-lime); color: var(--nx-lime-ink); }
body .agent-symbol.purple { background: var(--nx-purple-tint); color: var(--nx-purple-text); }
body .agent-card.featured { border-color: #d8efb4; background: linear-gradient(150deg, rgba(140, 230, 25, .07), #ffffff 52%); }
body .agent-card h3 { color: var(--nx-text-1); }
body .agent-tags span { border-radius: var(--nx-r-pill); background: var(--surface-3); color: var(--nx-text-2); }
body .agent-metrics { border-color: var(--border-soft); }
body .new-agent-card { border-style: dashed; border-color: #c6d0dd; }

/* ----------------------------------------------------------------------------
   17. FLUXOS
   -------------------------------------------------------------------------- */
body .flow-card { border-radius: var(--nx-r-input); }
body .flow-card.active { background: var(--nx-lime-tint); border-color: #d8efb4; }
body .flow-icon { border-radius: 10px; background: var(--nx-lime-tint); color: var(--nx-lime-dark); }
body .flow-icon.purple { background: var(--nx-purple-tint); color: var(--nx-purple-text); }
body .flow-icon.blue { background: var(--nx-blue-tint); color: var(--nx-blue-text); }
body .flow-canvas { background-color: var(--surface-2); background-image: radial-gradient(#d3dae4 1px, transparent 1px); }
body .canvas-toolbar { background: rgba(255, 255, 255, .96); border-bottom-color: var(--border-soft); }
body .canvas-toolbar > span i { background: var(--nx-lime-mid); }
body .canvas-toolbar button, body .canvas-toolbar b { background: #ffffff; color: var(--nx-text-2); }
body .node { border-radius: var(--nx-r-input); border-color: var(--border); box-shadow: var(--nx-shadow-card); }
body .node.trigger { border-top: 2px solid var(--nx-blue); }
body .node.condition { border-top: 2px solid var(--amber); }
body .node.ai-node { border-top: 2px solid var(--nx-purple); }
body .node.action { border-top: 2px solid var(--nx-lime-mid); }
body .branch-label.yes { color: var(--nx-green-text); }
body .branch-label.no { color: var(--nx-red-text); }
body .floating-add { background: var(--nx-lime); color: var(--nx-lime-ink); box-shadow: var(--nx-shadow-lime); }

/* ----------------------------------------------------------------------------
   18. INTEGRAÇÕES — o cartão do QR (#cdWhats) herda .review-card;
   o QR continua sobre branco por exigência de leitura da câmera.
   -------------------------------------------------------------------------- */
body .integration-logo { border-radius: var(--nx-r-tile); }
body .integration-logo.green { background: var(--nx-green-tint); color: var(--nx-green-text); }
body .integration-logo.red { background: var(--nx-red-tint); color: var(--nx-red-text); }
body .integration-logo.purple { background: var(--nx-purple-tint); color: var(--nx-purple-text); }
body .integration-logo.blue { background: var(--nx-blue-tint); color: var(--nx-blue-text); }
body .integration-card h3 { color: var(--nx-text-1); }
body .integration-card div > span { color: var(--nx-green-text); }
body .integration-card:not(.connected) div > span { color: var(--nx-text-3); }
body .integration-card button { border-radius: var(--nx-r-pill); background: #ffffff; border-color: #d6dbe3; color: var(--nx-text-2); }

/* ----------------------------------------------------------------------------
   19. EQUIPE
   -------------------------------------------------------------------------- */
body .ec-role { border-radius: var(--nx-r-pill); background: var(--surface-3); color: var(--nx-text-2); }
body .ec-role.admin { background: var(--nx-blue-tint); color: var(--nx-blue-text); }
body .ec-you { border-radius: var(--nx-r-pill); background: var(--nx-lime-tint); color: var(--nx-lime-dark); }
body .ec-danger { color: var(--nx-red-text) !important; }
body .ec-reset input { border-radius: 10px; border-color: #d6dbe3; }

/* ----------------------------------------------------------------------------
   20. DIALOG, TOAST E ESTADOS VAZIOS
   -------------------------------------------------------------------------- */
body dialog {
  border: 1px solid var(--border);
  border-radius: var(--nx-r-card-lg);
  color: var(--nx-text-1);
  box-shadow: var(--nx-shadow-pop);
}
body dialog::backdrop { background: rgba(10, 14, 20, .55); }
body dialog header button { border-radius: var(--nx-r-pill); background: var(--surface-3); color: var(--nx-text-2); }
body dialog input, body dialog select { border-radius: var(--nx-r-input); border-color: #d6dbe3; }

/* Toast escuro da marca com destaque lima. */
body .toast {
  background: var(--nx-ink);
  border: 1px solid var(--nx-ink-line);
  border-radius: 16px;
  color: #f5f7fa;
  box-shadow: var(--nx-shadow-pop);
}
body .toast span { color: var(--nx-lime); }
body .toast p { color: #f5f7fa; }

body .conversation-empty, body .empty-state, body .contact-empty, body .recipe-empty { color: var(--nx-text-3); }
body .ec-locked { color: var(--nx-text-3); }

/* ----------------------------------------------------------------------------
   21. LOGIN — painel da marca escuro (Destak) + cartão claro arredondado
   Os tokens de :root já clareiam o fundo; aqui entra o restante.
   -------------------------------------------------------------------------- */
body .login-brand {
  background: linear-gradient(165deg, #10141b 0%, #0b0e13 55%, var(--nx-ink) 100%);
  border-right: 1px solid var(--nx-ink-line);
}
body .login-brand::before { background: var(--nx-lime); opacity: .12; }
body .brand-top strong { color: #f5f7fa; }
body .brand-top span { color: #7b8494; }
body .login-brand .brand-mark {
  border-radius: var(--nx-r-tile);
  background: var(--nx-lime);
  color: var(--nx-lime-ink);
  box-shadow: 0 0 28px rgba(140, 230, 25, .3);
}
body .login-brand .eyebrow {
  color: var(--nx-lime);
  font-family: var(--nx-font-display);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
}
body .brand-center h1 { color: #f5f7fa; font-family: var(--nx-font-display); letter-spacing: -.03em; }
body .brand-center h1 span { color: var(--nx-lime); }
body .brand-list { color: #aab2bf; }
body .brand-list li::before { color: var(--nx-lime); }
body .brand-logo { box-shadow: 0 0 0 6px rgba(140, 230, 25, .12), 0 20px 60px rgba(140, 230, 25, .18); }
body .brand-footer { color: #7b8494; }
body .brand-footer b { color: #f5f7fa; }

body .login-panel { background: var(--bg); }
body .login-card {
  background: #ffffff;
  border: 1px solid var(--border);
  border-top: 1px solid var(--border);
  border-radius: var(--nx-r-card-lg);
  box-shadow: var(--nx-shadow-pop);
}
body .login-card .eyebrow {
  color: var(--nx-lime-dark);
  font-family: var(--nx-font-display);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
}
body .login-card h2 { color: var(--nx-text-1); font-family: var(--nx-font-display); letter-spacing: -.02em; }
body .login-card .lead { color: var(--nx-text-3); }
body .field > span { color: var(--nx-text-2); letter-spacing: .08em; }
body .field input {
  background: var(--surface-2);
  border-color: #d6dbe3;
  border-radius: var(--nx-r-input);
  color: var(--nx-text-1);
}
body .field input:focus { border-color: var(--nx-blue); box-shadow: 0 0 0 3px rgba(5, 100, 255, .14); }
body .field input[aria-invalid="true"] { border-color: var(--nx-red); }
body .ghost-toggle { border-radius: var(--nx-r-pill); color: var(--nx-text-3); }
body .ghost-toggle:hover { color: var(--nx-text-1); background: var(--surface-3); }
body .check { color: var(--nx-text-2); }
body .check input { accent-color: var(--nx-lime-dark); }
body .login-card .text-button { color: var(--nx-link); }
body .error { color: var(--nx-red-text); }
body .error.info { color: var(--nx-blue-text); }
body .login-card .primary-button {
  border-radius: var(--nx-r-pill);
  background: var(--nx-lime);
  border-color: var(--nx-lime);
  color: var(--nx-lime-ink);
  box-shadow: var(--nx-shadow-lime);
  font-weight: 800;
}
body .login-card .primary-button:hover { background: #7fd90e; transform: translateY(-1px); }
body .login-card .primary-button:disabled { opacity: .7; transform: none; }
body .hint { border-top-color: var(--border-soft); color: var(--nx-text-3); }
body .hint b { color: var(--nx-text-2); }

/* ----------------------------------------------------------------------------
   22. CORREÇÕES RESPONSIVAS DA CAMADA NOVA
   (mesmos breakpoints do JS e dos CSS antigos: 1000px e 680px)
   -------------------------------------------------------------------------- */
@media (max-width: 1000px) {
  /* O menu vira gaveta: as pílulas continuam, só encostam menos na borda. */
  body .nav-item { padding-left: 14px; }
}

@media (max-width: 680px) {
  body .topbar h1 { font-size: 13px; }
  /* O CTA do topbar não pode quebrar o texto dentro da pílula. */
  body .topbar .primary-button { font-size: 13px; padding: 9px 14px; }
  body .overview-welcome h2 { font-size: 26px; }
  body .section-heading h2, body .welcome-row h2 { font-size: 22px; }
  body .summary-card strong { font-size: 27px; }
  body .crm-summary strong { font-size: 25px; }
  body .margin-summary-grid strong { font-size: 24px; }
  body .metric-card > strong { font-size: 28px; }
  /* A régua de abas fica de canto a canto no celular (responsive.css usa
     margens negativas), então o raio sai. */
  body .review-tabs { border-radius: 0; }
  body .table-panel, body .review-card, body .overview-card { border-radius: 16px; }
  body .kanban-column { border-radius: 16px; }
  body dialog { padding: 18px; border-radius: 20px; }
  body .toast { border-radius: 14px; }
}

/* ----------------------------------------------------------------------------
   23. AJUSTES DA AUDITORIA VISUAL (RODADA 1)
   Correções apontadas nos screenshots: hierarquia de cabeçalho, CTA duplicado,
   selects nativos, ícones de emoji, tabelas e responsivo.
   -------------------------------------------------------------------------- */

/* 23.1 UM PRIMÁRIO LIMA POR TELA.
   Quando a view ativa já tem o próprio botão primário no corpo (CRM, Contatos,
   Campanhas, Agentes, Fluxos, Integrações), o CTA do topbar vira contorno.
   Em navegadores sem :has() nada muda (degrada para o comportamento atual). */
body:has(.view.active .section-heading .primary-button) .topbar .primary-button {
  background: #ffffff;
  border-color: #d6dbe3;
  color: var(--nx-text-2);
  box-shadow: none;
  font-weight: 700;
}
body:has(.view.active .section-heading .primary-button) .topbar .primary-button:hover {
  background: var(--surface-2);
  border-color: #c2c9d4;
  transform: none;
}
body .topbar .primary-button { white-space: nowrap; }

/* 23.2 CARTÃO ESCURO "Abrir conversas" do hero: duplicava exatamente o CTA do
   topbar na mesma dobra (desktop e celular) e lia como toast perdido. Sai. */
body .overview-main-action { display: none; }

/* 23.3 STAT CARDS: número grande nunca quebra em duas linhas. O cartão
   "Precisa de atenção" ("3 pendências") encolhe em vez de quebrar. */
body .summary-card > span:nth-child(2) { min-width: 0; }
body .summary-card strong { white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
body .summary-card.attention strong { font-size: 25px; }

/* 23.4 SELECTS E DATAS SEM CARA DE COMPONENTE NATIVO.
   Chevron próprio em SVG; as cores/raios de cada contexto continuam valendo. */
body select {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 32px;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='12'%20height='8'%20viewBox='0%200%2012%208'%3E%3Cpath%20d='M1.5%201.75%206%206.25l4.5-4.5'%20fill='none'%20stroke='%23667085'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 11px center;
  background-size: 12px 8px;
}
/* Reforço para os selects que outros CSS estilizam com mais especificidade. */
body .demo-bar select,
body .unit-period select,
body .chat-context select,
body .ec-inline select,
body .ec-filters select,
body .ec-rp-filters select,
body .ec-field select,
body .review-field select,
body .critical-decision select,
body dialog select,
body .lead-card select,
body .ec-status-select {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 30px;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='12'%20height='8'%20viewBox='0%200%2012%208'%3E%3Cpath%20d='M1.5%201.75%206%206.25l4.5-4.5'%20fill='none'%20stroke='%23667085'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 11px center;
  background-size: 12px 8px;
}
body input[type="date"] {
  border: 1px solid #d6dbe3;
  border-radius: 12px;
  padding: 9px 12px;
  background: #ffffff;
  color: var(--nx-text-1);
  font: inherit;
  font-size: 13px;
}

/* 23.5 FILTROS DO INBOX: os selects dividem a linha sem truncar o texto. */
body .ec-filters { display: flex; flex-wrap: wrap; gap: 6px; }
body .ec-filters select { flex: 1 1 140px; min-width: 0; width: auto; font-size: 13px; text-overflow: ellipsis; }

/* 23.6 FILTROS DA RECOMPRA: alturas e raios iguais na mesma barra. */
body .ec-rp-filters input,
body .ec-rp-filters select {
  height: 44px;
  border-radius: 12px;
  border-color: #d6dbe3;
}
body .ec-rp-filters .secondary-button { height: 44px; min-height: 44px; border-radius: 12px; }

/* 23.7 STEPPER 1-2-3 (Receita IA): sempre numa linha, rolando na horizontal
   no celular em vez de quebrar o passo 3 sozinho embaixo. */
body .ec-steps { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
body .ec-steps::-webkit-scrollbar { display: none; }
body .ec-steps li { flex: 0 0 auto; white-space: nowrap; }

/* 23.8 DROPZONE: o emoji de câmera vira tile pastel com ícone de linha
   (o glifo do sistema some com font-size 0; o SVG entra como background). */
body .ec-drop-icon {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  margin: 0 auto;
  border-radius: 16px;
  font-size: 0;
  line-height: 0;
  color: transparent;
  background-color: var(--nx-lime-tint);
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%233b6e00'%20stroke-width='1.7'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M3%208a2%202%200%200%201%202-2h1.6l1.6-2.2h7.6L17.4%206H19a2%202%200%200%201%202%202v9a2%202%200%200%201-2%202H5a2%202%200%200%201-2-2z'/%3E%3Ccircle%20cx='12'%20cy='12.5'%20r='3.4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 26px 26px;
}

/* 23.9 COMPOSER: os controles redondos ganham área de toque e o botão de
   áudio ganha ícone de microfone de verdade (o "◉" sumia como radio solto). */
body .composer form > button[type="button"] {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--nx-text-3);
}
body .composer form > button[type="button"]:hover { background-color: var(--surface-3); color: var(--nx-text-1); }
body .composer form > button[aria-label="Áudio"] {
  font-size: 0;
  line-height: 0;
  color: transparent;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23667085'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Crect%20x='9'%20y='3'%20width='6'%20height='11'%20rx='3'/%3E%3Cpath%20d='M5%2011a7%207%200%200%200%2014%200'/%3E%3Cpath%20d='M12%2018v3'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 18px 18px;
}

/* 23.10 TILES DE CANAL DAS CAMPANHAS: mesmo padrão das Integrações
   (tile pastel + glifo colorido), nada de quadrado saturado com letra branca. */
body .campaign-channel.meta-bg { background: #e8f0fe; color: #2563eb; }
body .campaign-channel.google-bg { background: #e6f4ea; color: #1e8e3e; }
body .campaign-channel.flow-bg { background: var(--nx-amber-tint); color: var(--nx-amber-text); }

/* 23.11 NOTA DO TOKEN (API de conversões): bloco de nota tracejado para não
   parecer um input que faltou; a linha alinha pelo topo. */
body .ec-row:has(.ec-note) { align-items: start; }
body .ec-field .ec-note {
  background: var(--surface-2);
  border: 1px dashed #c6d0dd;
  border-radius: 10px;
  padding: 11px 13px;
  color: var(--nx-text-3);
}

/* 23.12 CONTATOS: âncora visual no início da linha (chip redondo com ícone
   de pessoa) e cabeçalho alinhado com o novo recuo do nome. */
body #contactsView .table-panel td:nth-child(2) { position: relative; padding-left: 60px; }
body #contactsView .table-panel th:nth-child(2) { padding-left: 60px; }
body #contactsView .table-panel td:nth-child(2)::before {
  content: "";
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: #e7ecf3;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M12%2012a4%204%200%201%200-4-4%204%204%200%200%200%204%204zm0%202c-3.3%200-6%202-6%204.5V20h12v-1.5c0-2.5-2.7-4.5-6-4.5z'%20fill='%2333415c'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 18px 18px;
}
body #contactsView .table-panel th:first-child,
body #contactsView .table-panel td:first-child { width: 34px; padding-right: 2px; }

/* 23.13 AÇÕES DE LINHA (Equipe, Receitas): pílulas discretas em vez de link
   colorido cru; o vermelho fica suave, dentro da paleta adaptada. */
body .row-action {
  border: 1px solid #d6dbe3;
  border-radius: var(--nx-r-pill);
  padding: 6px 12px;
  background: #ffffff;
  color: var(--nx-text-1);
  font-weight: 700;
}
body .row-action:hover { background: var(--surface-2); border-color: #c2c9d4; }
body .row-action.ec-danger { border-color: #f3c6c0; background: #ffffff; }
body .ec-team-actions { white-space: nowrap; }
body .ec-team-actions .row-action + .row-action { margin-left: 6px; }
body .ec-reset { display: inline-flex; align-items: center; gap: 6px; }

/* 23.14 FLUXOS: o nó "Criar conferência" não fica mais cortado — o canvas
   ganha rolagem horizontal para o fluxo caber inteiro. */
body .flow-canvas { overflow-x: auto; }

/* 23.15 ESTADOS VAZIOS ("Conectando ao servidor…", filas): respiro e centro,
   sem cara de cartão travado. */
body .table-panel > .empty-state { margin: 0; padding: 26px 18px; text-align: center; }

/* 23.16 LOGIN NO CELULAR: o cartão sobe para a primeira dobra (sem a faixa
   cinza morta) e o logo compacto do cartão já aparece pelo login.css. */
@media (max-width: 900px) {
  body .login-panel { place-items: start center; padding-top: 28px; }
}

@media (max-width: 680px) {
  body .summary-card.attention strong { font-size: 20px; }
  body .ec-rp-filters input,
  body .ec-rp-filters select,
  body .ec-rp-filters .secondary-button { height: 42px; }
}

/* Redundância proposital no fim do arquivo: nada reaparece por cima do tema. */
[hidden] { display: none !important; }