/* ══════════════════════════════════════════════════════════════════════
   W2G CHURCH — camada visual "Moderno" (PROPOSTA)

   Carregada por último (depois de app-bundle.css e adm.css). Não muda
   nenhuma classe nem comportamento: só redefine tokens e refina a pele dos
   componentes que já existem. Para voltar ao visual anterior basta remover
   o <link> de css/moderno.css do index.html.

   Direção: instrumento sóbrio em azul-marinho (referências: Linear,
   Vercel, Stripe). A cor sai da decoração e volta a carregar significado:
     - dourado W2G   = ação primária, item ativo, foco
     - verde/âmbar/vermelho/azul = estado (ok, atenção, erro, informação)
     - todo o resto  = escala de cinzas-azulados em camadas
   ══════════════════════════════════════════════════════════════════════ */

/* ── 1. Tokens ─────────────────────────────────────────────────────────── */
:root {
  /* Superfícies em camadas: cada degrau sobe ~3% de luminosidade.
     plano (navegação) < bg (tela) < panel (cartão) < hover < elevado (popover) */
  --plano: #07111c;
  --bg: #0a1521;
  --panel-bg: #0f1c2a;
  --panel-bg-hover: #142435;
  --elevado: #172a3c;
  --superficie-afundada: #0b1724;

  /* Linhas: finas e frias. Duas forças só. */
  --border: rgba(148, 172, 198, 0.11);
  --border-strong: rgba(160, 184, 208, 0.20);
  --border-foco: rgba(246, 196, 0, 0.55);

  /* Texto — os três níveis passam AA sobre --panel-bg
     (#e7edf3 ≈ 15:1 · #9eb0c2 ≈ 7.6:1 · #7b8fa3 ≈ 4.8:1) */
  --text: #e7edf3;
  --text-muted: #9eb0c2;
  --text-fraco: #7b8fa3;

  /* Marca — dourado W2G, usado com parcimônia */
  --accent: #f6c400;
  --accent-texto: #ffd43b;
  --accent-strong: #ffd43b;
  --accent-soft: rgba(246, 196, 0, 0.10);
  --accent-ring: rgba(246, 196, 0, 0.42);

  /* Estados */
  --sucesso: #34d399;
  --aviso: #f59e0b;
  --perigo: #f87171;
  --info: #60a5fa;
  --sucesso-soft: rgba(52, 211, 153, 0.12);
  --sucesso-linha: rgba(52, 211, 153, 0.32);
  --aviso-soft: rgba(245, 158, 11, 0.12);
  --aviso-linha: rgba(245, 158, 11, 0.32);
  --perigo-soft: rgba(248, 113, 113, 0.12);
  --perigo-linha: rgba(248, 113, 113, 0.32);
  --info-soft: rgba(96, 165, 250, 0.12);
  --info-linha: rgba(96, 165, 250, 0.32);

  /* Séries de gráfico do dashboard: mesmos matizes, um pouco mais calmos */
  --serie-azul: #4f8fe0;
  --serie-verde: #2fae84;
  --serie-ambar: #d39a1c;

  /* Navegação */
  --sidebar-bg: #07111c;
  --sidebar-bg-2: #07111c;
  --sidebar-fg: #e7edf3;
  --sidebar-muted: #8899ab;
  --sidebar-line: rgba(148, 172, 198, 0.09);
  --sidebar-active: rgba(148, 172, 198, 0.09);

  --sobre-cor: #0a1521;

  /* Sombras: no escuro a profundidade vem do contorno + uma sombra longa
     e difusa; nada de brilho dourado em volta de botão. */
  --shadow-sm: 0 1px 0 rgba(255, 255, 255, 0.025) inset, 0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 1px 0 rgba(255, 255, 255, 0.03) inset, 0 12px 32px -14px rgba(0, 0, 0, 0.75);
  --shadow-lg: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 28px 64px -24px rgba(0, 0, 0, 0.9);

  /* Raios */
  --r-xs: 6px;
  --r-sm: 8px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-pill: 999px;

  /* Espaçamento — escala de 4px */
  --e-1: 4px;
  --e-2: 8px;
  --e-3: 12px;
  --e-4: 16px;
  --e-5: 20px;
  --e-6: 24px;
  --e-8: 32px;
  --e-10: 40px;

  /* Tipografia
     Geist: grotesca neutra de interface, algarismos tabulares nativos e
     ótima leitura em tamanhos pequenos. Archivo fica só na marca. */
  --font-body: "Geist", "IBM Plex Sans", system-ui, -apple-system, sans-serif;
  --font-display: "Geist", "Archivo", system-ui, sans-serif;
  --font-marca: "Archivo", "Geist", system-ui, sans-serif;
  --font-mono: "Geist Mono", "IBM Plex Mono", ui-monospace, SFMono-Regular, monospace;

  /* Escala tipográfica (razão ~1.2) */
  --t-xs: 11.5px;
  --t-sm: 12.5px;
  --t-base: 14px;
  --t-md: 15px;
  --t-lg: 18px;
  --t-xl: 22px;
  --t-2xl: 26px;
  --t-kpi: 30px;

  /* Movimento */
  --ease: cubic-bezier(.2, .8, .2, 1);
  --dur: .16s;

  /* Largura útil do conteúdo em telas muito largas */
  --conteudo-max: 1480px;
}

/* ── 2. Base ───────────────────────────────────────────────────────────── */
body {
  background:
    radial-gradient(1100px 380px at 60% -120px, rgba(96, 140, 190, 0.07), transparent 70%),
    var(--bg);
  font-family: var(--font-body);
  font-size: var(--t-base);
  font-feature-settings: "ss01", "cv11";
  letter-spacing: -0.003em;
}

/* Número sempre alinhado: valores, contadores, datas, moeda */
[class*="valor"], [class*="__num"], [class*="-num"], [class*="kpi"],
[class*="contador"], [class*="total"], [class*="badge"], time, td {
  font-variant-numeric: tabular-nums;
}

:focus-visible {
  outline: 2px solid var(--accent-ring);
  outline-offset: 2px;
}

::selection { color: var(--sobre-cor); background: var(--accent); }

* { scrollbar-color: rgba(148, 172, 198, 0.22) transparent; }
*::-webkit-scrollbar-thumb {
  background: rgba(148, 172, 198, 0.20);
  background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover {
  background: rgba(148, 172, 198, 0.34);
  background-clip: content-box;
}

/* ── 3. Shell: sidebar ─────────────────────────────────────────────────── */
.app { grid-template-columns: 248px 1fr; }

.sidebar {
  background: var(--sidebar-bg);
  border-right: 1px solid var(--sidebar-line);
  box-shadow: none;
  gap: 18px;
  padding: 16px 12px;
}

.sidebar__brand {
  min-height: 0;
  padding: 2px 8px 14px;
  gap: 10px;
  border-bottom: 1px solid var(--sidebar-line);
}
.brand__logo {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  border-color: rgba(246, 196, 0, 0.16);
  background: #0c1a28;
  box-shadow: none;
}
.brand__logo img { width: 32px; height: 32px; }
.brand__name {
  font-family: var(--font-marca);
  font-size: 14.5px;
  letter-spacing: .07em;
}

.sidebar__label {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .1em;
  color: var(--text-fraco);
  padding: 0 10px 4px;
}
.sidebar__nav { gap: 1px; }

.panel {
  gap: 10px;
  min-height: 36px;
  padding: 7px 10px;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  color: var(--sidebar-muted);
  transition: background var(--dur) ease, color var(--dur) ease;
}
.panel__title { font-size: 13.5px; font-weight: 500; letter-spacing: -0.005em; }
.panel:hover {
  background: rgba(148, 172, 198, 0.06);
  border-color: transparent;
  color: var(--sidebar-fg);
}
.panel.is-active {
  background: var(--sidebar-active);
  border-color: transparent;
  color: var(--text);
  box-shadow: inset 0 0 0 1px rgba(148, 172, 198, 0.06);
}
.panel.is-active .panel__title { font-weight: 600; }
.panel.is-active::before {
  left: -12px;
  width: 2px;
  height: 18px;
  border-radius: 0 2px 2px 0;
  background: var(--accent);
  box-shadow: none;
}

/* Ícones do menu: monocromáticos, um só traço, sem caixa colorida. A cor
   competia com o dourado do item ativo e com as cores de estado da tela. */
.sidebar .panel:not(.panel--sub) > .panel__icon,
.sidebar .panel--sub .panel__icon--channel:not(.panel__icon--brand) {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: currentColor;
  opacity: .85;
  transform: none;
  filter: none;
}
.sidebar .panel:not(.panel--sub) > .panel__icon svg,
.sidebar .panel--sub .panel__icon--channel svg { width: 18px; height: 18px; }
.sidebar .panel:not(.panel--sub):hover > .panel__icon,
.sidebar .panel--sub:hover .panel__icon--channel:not(.panel__icon--brand) {
  transform: none;
  filter: none;
  border-color: transparent;
  opacity: 1;
}
.sidebar .panel:not(.panel--sub).is-active > .panel__icon,
.sidebar .panel--sub.is-active .panel__icon--channel:not(.panel__icon--brand) {
  color: var(--accent-texto);
  border-color: transparent;
  box-shadow: none;
  opacity: 1;
}
/* Logos de terceiros (Google Maps) mantêm as cores próprias, num chip neutro */
.sidebar .panel--sub .panel__icon--brand {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  padding: 2px;
  border: 0;
  border-radius: 5px;
  background: #e7edf3;
  transform: none;
  filter: none;
}

/* Submenu de Extrair Leads: trilho fino em vez de caixa */
.panel--sub {
  min-height: 32px;
  padding: 6px 10px;
}
.panel--sub .panel__title { font-size: 13px; }
.panel__chevron { color: var(--text-fraco); }

.sidebar__foot { border-top-color: var(--sidebar-line); padding-top: 10px; }
.sidebar__toggle {
  min-height: 34px;
  padding: 6px 10px;
  border-radius: var(--r-sm);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-fraco);
}
.sidebar__toggle:hover {
  background: rgba(148, 172, 198, 0.06);
  border-color: transparent;
}
.sidebar__toggle-icone { color: var(--text-muted); width: 16px; height: 16px; }
.sidebar__usuario { padding: 6px 10px 2px; }
.sidebar__foot-nome { font-weight: 500; }
.sidebar__foot-avatar,
.topbar__avatar { box-shadow: none; }

.app--menu-colapsado { grid-template-columns: 64px 1fr; }
.app--menu-colapsado .sidebar { padding: 16px 8px; }
.app--menu-colapsado .panel.is-active::before { left: -8px; }

/* ── 4. Shell: topbar e área de conteúdo ───────────────────────────────── */
.content { padding: 32px 40px 48px; }

/* Largura útil: em monitor largo o conteúdo não se espalha até a borda.
   A topbar continua de ponta a ponta. */
.content > .view {
  width: 100%;
  max-width: var(--conteudo-max);
  margin-left: auto;
  margin-right: auto;
}
.content::before { display: none; }

.topbar {
  height: 56px;
  margin: -32px -40px 28px;
  padding: 0 40px;
  background: rgba(10, 21, 33, 0.78);
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(14px) saturate(1.2);
}
body.modo-cheio .topbar { margin: -32px -40px 16px; }

.topbar__ws,
.topbar__perfil {
  height: 34px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  font-size: 13px;
  font-weight: 500;
  transition: background var(--dur) ease, border-color var(--dur) ease;
}
.topbar__ws { padding: 4px 10px 4px 5px; }
.topbar__perfil { padding: 3px 10px 3px 3px; }
.topbar__ws:hover,
.topbar__perfil:hover {
  background: var(--panel-bg-hover);
  border-color: var(--border-strong);
}
.topbar__ws-marca {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  border-color: var(--border);
  background: var(--panel-bg-hover);
  box-shadow: none;
}
.topbar__avatar { width: 26px; height: 26px; border-radius: 6px; font-size: 12px; }
.topbar__nome { font-size: 13px; font-weight: 500; }
.topbar__chevron { width: 14px; height: 14px; color: var(--text-fraco); }

.topbar__menu {
  background: var(--elevado);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
  padding: 4px;
}
.topbar__menu-item { border-radius: 6px; padding: 8px 10px; font-size: 13px; }
.topbar__menu-item:hover { background: rgba(148, 172, 198, 0.08); }
.topbar__menu-item.is-ativo { background: var(--accent-soft); color: var(--accent-texto); }

/* Títulos de página */
.view h1,
.dash__titulo,
.config__header h1 {
  font-family: var(--font-display);
  font-size: var(--t-2xl);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.15;
}
.view h2 { letter-spacing: -0.015em; }

/* Abas de subnavegação (Workspace: Funil / Fluxos / Delivery...) */
.subnav {
  gap: 2px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 22px;
}
.subnav__item {
  position: relative;
  padding: 10px 12px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--text-fraco);
  border-bottom: 0;
  margin-bottom: -1px;
}
.subnav__item:hover { color: var(--text); }
.subnav__item.is-ativo { color: var(--text); }
.subnav__item.is-ativo::after {
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 0;
  height: 2px;
  border-radius: 2px 2px 0 0;
  background: var(--accent);
}

/* ── 5. Componentes base ───────────────────────────────────────────────── */

/* Botões: quatro papéis — primário (dourado), secundário (contorno),
   ghost (sem fundo), perigo. Altura única de 34px. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 34px;
  padding: 7px 14px;
  border-radius: var(--r-sm);
  font-size: 13px;
  font-weight: 550;
  letter-spacing: -0.005em;
  line-height: 1.2;
  transition: background var(--dur) ease, border-color var(--dur) ease,
    color var(--dur) ease, box-shadow var(--dur) ease, transform .08s ease;
}
.btn svg { width: 15px; height: 15px; flex: none; }

.btn--primario,
.fmodal__salvar {
  background: var(--accent);
  color: #1a1400;
  border: 1px solid transparent;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.25) inset, 0 1px 2px rgba(0, 0, 0, 0.3);
  filter: none;
}
.btn--primario:hover,
.fmodal__salvar:hover {
  background: #ffd21f;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 4px 14px -6px rgba(246, 196, 0, 0.45);
  filter: none;
}
.btn--primario:disabled { background: rgba(246, 196, 0, 0.35); color: rgba(26, 20, 0, 0.7); }
/* #camp-proximo vem do campanhas-wizard.css com color:#fff e seletor por ID,
   que vence .btn--primario: branco sobre amarelo ficava ilegível. */
#camp-proximo { color: #1a1400; }

.btn--ghost,
.btn--secundario,
.btn--outline {
  background: rgba(148, 172, 198, 0.04);
  color: var(--text);
  border: 1px solid var(--border-strong);
  box-shadow: var(--shadow-sm);
}
.btn--ghost:hover,
.btn--secundario:hover,
.btn--outline:hover {
  background: rgba(148, 172, 198, 0.09);
  border-color: rgba(160, 184, 208, 0.28);
  color: var(--text);
}

.btn--perigo {
  background: var(--perigo-soft);
  color: #fca5a5;
  border: 1px solid var(--perigo-linha);
  box-shadow: none;
}
.btn--perigo:hover,
.btn--perigo:hover:not(:disabled) {
  background: #dc4a4a;
  border-color: #dc4a4a;
  color: #fff;
  filter: none;
}
.btn:disabled { cursor: not-allowed; }
.btn:focus-visible { outline: 2px solid var(--accent-ring); outline-offset: 2px; }

/* Campos */
.campo { gap: 6px; }
.campo__label {
  font-size: var(--t-sm);
  font-weight: 500;
  color: var(--text-muted);
}
.campo__hint { color: var(--text-fraco); font-size: var(--t-xs); }

.campo__input,
.ws-novo__campo,
.campo input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
.campo select,
.campo textarea {
  background-color: var(--superficie-afundada);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  color: var(--text);
  font-family: var(--font-body);
  transition: border-color var(--dur) ease, box-shadow var(--dur) ease, background-color var(--dur) ease;
}
.campo__input:hover:not(:focus),
.campo select:hover:not(:focus),
.campo textarea:hover:not(:focus) {
  border-color: rgba(160, 184, 208, 0.30);
}
.campo__input:focus,
.ws-novo__campo:focus,
input:focus,
textarea:focus,
select:focus {
  border-color: var(--border-foco);
  box-shadow: 0 0 0 3px rgba(246, 196, 0, 0.12);
}
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):focus,
textarea:focus,
select:focus { outline: none; }
::placeholder { color: var(--text-fraco); opacity: 1; }

/* Modais (<dialog>) */
.modal,
.ws-novo,
.trocar-conta {
  background: var(--elevado);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
}
.modal { padding: 24px; }
.modal::backdrop,
.ws-novo::backdrop,
dialog::backdrop {
  background: rgba(3, 8, 14, 0.62);
  backdrop-filter: blur(3px);
}
.modal__titulo {
  font-size: var(--t-lg);
  font-weight: 600;
  letter-spacing: -0.015em;
}
.modal__sub { color: var(--text-muted); }
.modal__acoes {
  margin-top: 8px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}
.modal__cabecalho-icone {
  width: 38px;
  height: 38px;
  border-radius: var(--r-md);
  border: 1px solid var(--border);
  background: var(--panel-bg-hover);
}
.modal__cabecalho-icone--api,
.modal__cabecalho-icone--sms { background: var(--accent-soft); color: var(--accent-texto); border-color: rgba(246, 196, 0, 0.18); }
.modal__nota { background: rgba(148, 172, 198, 0.06); border: 1px solid var(--border); }

/* Checkbox: mesmo desenho, paleta nova */
input[type="checkbox"]:not(.fluxo__inicio-switch):not(.fbloco-botoes-sem-int-chk) {
  width: 16px;
  height: 16px;
  flex-basis: 16px;
  border-radius: 4px;
  border-color: rgba(160, 184, 208, 0.36);
  background: var(--superficie-afundada);
  box-shadow: none;
}
input[type="checkbox"]:not(.fluxo__inicio-switch):not(.fbloco-botoes-sem-int-chk):checked,
input[type="checkbox"]:not(.fluxo__inicio-switch):not(.fbloco-botoes-sem-int-chk):indeterminate {
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: none;
}

/* Tabelas genéricas: cabeçalho discreto, linhas separadas por fio */
.view table th {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-fraco);
}
.view table td { border-color: var(--border); }
.view table tbody tr { transition: background var(--dur) ease; }
.view table tbody tr:hover { background: rgba(148, 172, 198, 0.04); }

/* ── 6. Acessibilidade de movimento ────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── 7. Responsivo ─────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .content { padding: 24px 24px 40px; }
  .topbar { margin: -24px -24px 22px; padding: 0 24px; }
  body.modo-cheio .topbar { margin: -24px -24px 14px; }
}
@media (max-width: 767px) {
  /* A largura fixa da coluna do menu (acima) anulava a coluna única do
     mobile: o conteúdo ficava espremido em 248px. */
  .app,
  .app--menu-colapsado { grid-template-columns: 1fr; }
  .content { padding: 16px 16px 32px; }
  .topbar { margin: -16px -16px 18px; padding: 0 12px; gap: 8px; }
  body.modo-cheio .topbar { margin: -16px -16px 0; }
  .sidebar { width: 272px; padding: 16px 12px; }
  .app--menu-colapsado .sidebar { padding: 16px 12px; }
  .topbar__ws-nome { max-width: 120px; }
  .topbar__nome { display: none; }
  .view h1, .dash__titulo { font-size: var(--t-xl); }
}

/* ══════════════════════════════════════════════════════════════════════
   8. Telas — polimento onde o CSS de cada tela encontra a camada nova.
   Regra geral: borda colorida e cor fixa saem; estado vira pílula/ponto,
   superfícies seguem a escada de tokens, raios e espaços seguem a escala.
   ══════════════════════════════════════════════════════════════════════ */

/* ── 8.1 Dashboard ─────────────────────────────────────────────────────── */
/* .dash__secao tinha duas regras (caixa antiga + cabeçalho novo) somando:
   o título virava um cartão vazio. Aqui ele é só cabeçalho de seção. */
.dash { gap: var(--e-4); }
.dash__secao {
  margin: var(--e-6) 0 0;
  padding: 0;
  background: none;
  border: 0;
  box-shadow: none;
  font-size: var(--t-md);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text);
}
.dash__periodo { background: var(--superficie-afundada); border-color: var(--border); }
.dash__periodo-btn { padding: 5px 13px; }
.dash__periodo-btn.is-ativo { background: var(--panel-bg-hover); box-shadow: inset 0 0 0 1px var(--border-strong); }
.dash__atualizado { color: var(--text-fraco); }

.dash__kpi,
.dash__card,
.dash__monitor {
  border-radius: var(--r-lg);
  border-color: var(--border);
  box-shadow: var(--shadow-sm);
}
.dash__kpi:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); }
.dash__card:hover { transform: none; box-shadow: var(--shadow-sm); border-color: var(--border-strong); }
.dash__kpi-valor { font-weight: 600; letter-spacing: -0.025em; }
.dash__kpi--destaque .dash__kpi-valor { font-size: var(--t-kpi); }
.dash__kpi-rotulo { color: var(--text-muted); }

/* Ícone do KPI: um chip neutro só. Quatro cores diferentes disputavam com
   as cores de estado (verde/âmbar/vermelho) dos números. */
.dash__kpi .dash__kpi-icone {
  width: 32px;
  height: 32px;
  border-radius: var(--r-sm);
  background: var(--panel-bg-hover);
  border: 1px solid var(--border);
  color: var(--text-muted);
}
.dash__kpi--destaque .dash__kpi-icone svg { width: 16px; height: 16px; }
.dash__kpi-var { font-size: 11.5px; font-weight: 600; padding: 2px 7px; }
.dash__kpi-var.is-neutra { background: rgba(148, 172, 198, 0.06); color: var(--text-fraco); }
.dash__kpi-var.is-alta { background: var(--sucesso-soft); color: var(--sucesso); }
.dash__kpi-var.is-baixa { background: var(--aviso-soft); color: var(--aviso); }
.dash__kpi--apoio { border-radius: var(--r-md); padding: 10px 12px; }
.dash__kpi--apoio .dash__kpi-valor { font-size: var(--t-lg); }
.dash__kpi--apoio .dash__kpi-rotulo { color: var(--text-fraco); }

.dash__card-cabecalho { padding: var(--e-4) var(--e-5) 0; }
.dash__card-titulo,
.dash__secao-titulo { font-size: var(--t-base); font-weight: 600; }
.dash__card-corpo { padding: var(--e-3) var(--e-5) var(--e-5); }

.dash__barra-trilho { background: var(--superficie-afundada); border-color: var(--border); height: 6px; }
.dash__barra-fill { box-shadow: none; }

/* Fechamentos de clientes: o cartão não tinha respiro interno (título colado
   na borda) e cada número ganhava uma borda lateral de cor diferente. */
#dash-clientes-card { padding: var(--e-5); gap: var(--e-4); }
.dash__fechamentos-head { margin-bottom: 0; gap: var(--e-3); flex-wrap: wrap; }
.dash__fechamentos-titulo { font-size: var(--t-base); font-weight: 600; }
.dash__fechamentos-cards { gap: var(--e-3); margin-bottom: 0; }
.dash__fechamento-card,
.dash__fechamento-card--qtd,
.dash__fechamento-card--valor,
.dash__fechamento-card--ticket,
.dash__fechamento-card--mrr,
.dash__fechamento-card--arr {
  background: var(--superficie-afundada);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--e-3) var(--e-4);
}
.dash__fechamento-label { font-size: 11px; font-weight: 500; letter-spacing: .06em; color: var(--text-fraco); }
.dash__fechamento-valor { font-size: 21px; font-weight: 600; letter-spacing: -0.02em; }
.dash__fechamento-ajuda { font-size: 11px; color: var(--text-fraco); }
.dash__fechamento-grafico:empty { display: none; }
.clf-grafico { border-top-color: var(--border); }
.clf-grafico__barra { background: var(--serie-verde); opacity: .85; }

/* Histórico de campanhas e feed: estado fica na pílula, não na borda */
.dash__hist-item {
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--superficie-afundada);
}
.dash__hist-item--concluida,
.dash__hist-item--rodando,
.dash__hist-item--pausada,
.dash__hist-item--falhou { border-left-color: var(--border); }
.dash__hist-status--concluida { background: var(--sucesso-soft); }
.dash__hist-status--rodando { background: var(--info-soft); }
.dash__hist-status--pausada { background: var(--aviso-soft); }
.dash__hist-status--falhou { background: var(--perigo-soft); }
.dash__feed-item { border-left-width: 2px; }
.dash__motivo-trilho { background: var(--superficie-afundada); }

/* ── 8.2 Relatórios ────────────────────────────────────────────────────── */
.relatorios__sobretitulo { color: var(--text-fraco); font-family: var(--font-body); font-weight: 600; letter-spacing: .1em; }
.relatorios__filtro {
  background: var(--panel-bg);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
}
.relatorios__filtro h2 { font: 600 var(--t-md)/1.3 var(--font-display); }
.relatorios__campo > span { font-weight: 600; color: var(--text-fraco); }
.relatorios__campo select {
  min-height: 36px;
  background-color: var(--superficie-afundada);
  font: 500 13.5px/1 var(--font-body);
}
/* Cartões: a cor da métrica vira um ponto ao lado do rótulo; somem a faixa
   lateral de 4px e o círculo decorativo do canto. */
.relatorios__card {
  min-height: 0;
  padding: var(--e-5);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
}
.relatorios__card::before,
.relatorios__card::after { display: none; }
.relatorios__card-rotulo { display: flex; align-items: center; gap: 7px; font-weight: 600; color: var(--text-fraco); }
.relatorios__card-rotulo::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--rel-card-cor);
  flex: none;
}
.relatorios__card strong { font-weight: 600; font-size: 34px; letter-spacing: -0.03em; margin: 14px 0 8px; }
.relatorios__leitura { border-radius: var(--r-lg); box-shadow: var(--shadow-sm); }
.relatorios__leitura-cabecalho strong { font-weight: 600; }
.relatorios__barra { height: 6px; background: var(--superficie-afundada); }
.relatorios__barra-preenchimento--resposta { background: var(--sucesso); }
.relatorios__barra-preenchimento--tag-1 { background: var(--info); }
.relatorios__barra-preenchimento--tag-2 { background: var(--no-condicao); }

/* ── 8.3 Controles: altura única ───────────────────────────────────────── */
/* Campo e botão lado a lado (barras de busca/filtro) precisam ter a mesma
   altura; o campo antigo tinha 40px e 15px de fonte, o botão 34px. */
.btn { min-height: 36px; }
.campo__input { font-size: var(--t-base); padding: 7px 12px; min-height: 36px; }
textarea.campo__input { min-height: 72px; }

/* ── 8.4 Workspace › Sales (Funil) ─────────────────────────────────────── */
.funil__sub { font-size: var(--t-base); color: var(--text-muted); }
.funil__resumo { gap: var(--e-2); margin: 0 0 var(--e-2); }
.funil__resumo-card {
  min-width: 132px;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--panel-bg);
  box-shadow: var(--shadow-sm);
}
.funil__resumo-card,
.funil__resumo-card.is-enviado,
.funil__resumo-card.is-novo,
.funil__resumo-card.is-erro { border-left: 1px solid var(--border); }
.funil__resumo-card strong { font-size: var(--t-xl); font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.funil__resumo-card span {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .06em;
  color: var(--text-fraco);
}
.funil__resumo-card.is-enviado span::before,
.funil__resumo-card.is-novo span::before,
.funil__resumo-card.is-erro span::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex: none;
}
.funil__resumo-card.is-enviado span::before { background: var(--sucesso); }
.funil__resumo-card.is-novo span::before { background: var(--info); }
.funil__resumo-card.is-erro span::before { background: var(--aviso); }

.funil__btn-nova-etapa {
  min-height: 36px;
  background: rgba(148, 172, 198, 0.04);
  border-color: var(--border-strong);
  font-weight: 550;
  box-shadow: var(--shadow-sm);
}
.funil__btn-nova-etapa:hover { background: rgba(148, 172, 198, 0.09); border-color: rgba(160, 184, 208, 0.28); color: var(--text); }

.funil__board { gap: var(--e-3); }
.funil__coluna {
  width: 264px;
  background: var(--superficie-afundada);
  border-color: var(--border);
  border-radius: var(--r-lg);
}
.funil__coluna-cabecalho { padding: 12px 12px 12px 14px; font-size: 13.5px; border-bottom-color: var(--border); }
.funil__coluna-ponto { width: 8px; height: 8px; }
.funil__coluna-contagem { background: rgba(148, 172, 198, 0.08); border-color: transparent; font-size: 11.5px; color: var(--text-muted); }
.funil__coluna-btn { border-radius: var(--r-xs); }
.funil__cards { padding: var(--e-2); gap: var(--e-2); }
.funil__vazio { color: var(--text-fraco); }

.funil__card {
  background: var(--panel-bg);
  border-color: var(--border);
  border-radius: var(--r-md);
  padding: 11px 12px;
  box-shadow: var(--shadow-sm);
}
.funil__card:hover { border-color: var(--border-strong); background: var(--panel-bg-hover); box-shadow: var(--shadow-sm); }
.funil__card-nome { font-size: 13.5px; }
.funil__card-numero { font-size: var(--t-xs); color: var(--text-fraco); font-family: var(--font-mono); letter-spacing: -0.01em; }
.funil__card-btn-editar { background: transparent; border-radius: var(--r-xs); color: var(--text-fraco); }
.funil__card-btn-editar:hover { background: rgba(148, 172, 198, 0.1); color: var(--text); }
.funil__card-fluxo { border-radius: var(--r-xs); color: var(--accent-texto); }

/* Ações do card: "Ver" vira botão neutro; "Fechar"/"Cliente" mantêm o verde
   porque comunicam estado (venda fechada). */
.funil__card-ver-btn,
.funil__card-fechar-btn,
.funil__card-fechado {
  min-height: 24px;
  padding: 2px 9px;
  border-radius: var(--r-xs);
  font-size: 11.5px;
  font-weight: 550;
}
.funil__card-ver-btn {
  border: 1px solid var(--border-strong);
  background: rgba(148, 172, 198, 0.05);
  color: var(--text);
}
.funil__card-ver-btn:hover { background: rgba(148, 172, 198, 0.11); border-color: rgba(160, 184, 208, 0.3); }
.funil__card-ver-btn:focus-visible,
.funil__card-fechar-btn:focus-visible { outline-color: var(--accent-ring); }
.funil__card-fechar-btn,
.funil__card-fechado { border-color: var(--sucesso-linha); background: var(--sucesso-soft); color: var(--sucesso); }
.funil__card-fechar-btn:hover { background: rgba(52, 211, 153, 0.2); border-color: var(--sucesso); }

.funil__selecao { border-color: rgba(246, 196, 0, 0.3); border-radius: var(--r-md); }
.funil__popover-etapas { background: var(--elevado); border-radius: var(--r-md); box-shadow: var(--shadow-lg); padding: 4px; }
.funil__popover-item { border-radius: var(--r-xs); padding: 8px 10px; }
.funil__popover-item:hover { background: rgba(148, 172, 198, 0.08); color: var(--text); }
.funil__popover-item:active { background: var(--accent-soft); color: var(--accent-texto); }

/* Barra de rolagem do quadro: continua visível (para quem não sabe que rola),
   mas cinza-claro em vez de branco puro. */
.funil__board { scrollbar-color: rgba(203, 216, 229, 0.5) rgba(148, 172, 198, 0.08); }
.funil__board::-webkit-scrollbar-thumb,
.funil__board::-webkit-scrollbar-thumb:hover { background: rgba(203, 216, 229, 0.5); background-clip: content-box; }

/* ── 8.5 Workspace › Delivery ──────────────────────────────────────────── */
.delivery .funil__topo { margin-bottom: var(--e-2); }
.delivery__resumo { gap: var(--e-2); margin: 0 0 var(--e-4); }
.delivery__resumo > div {
  min-width: 160px;
  padding: 10px 14px;
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
}
.delivery__resumo strong { font: 600 var(--t-xl)/1.15 var(--font-display); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.delivery__resumo span { font-size: 11px; font-weight: 500; letter-spacing: .06em; color: var(--text-fraco); }
.delivery__coluna { min-width: 284px; }
.delivery__coluna-cabecalho { padding-bottom: 12px; align-items: center; }
.delivery__coluna-titulo-wrap { align-items: center; }
.delivery__coluna-titulo-wrap .funil__coluna-ponto { align-self: flex-start; margin-top: 5px; }

/* Barra colorida com a mesma cor da bolinha da etapa */
.delivery__card { border-left: 3px solid var(--cor-etapa, var(--border)); }
.delivery__card:hover { box-shadow: var(--shadow-sm); border-color: var(--border-strong); border-left-color: var(--cor-etapa, var(--border)); }
.delivery__card-nome { font-size: 13.5px; }
.delivery__card-tel { font-size: var(--t-xs); color: var(--text-fraco); }
.delivery__card-meta { margin-top: 10px; padding-top: 8px; }
.delivery__selo { font-size: 10.5px; font-weight: 600; padding: 1px 8px; background: rgba(148, 172, 198, 0.06); }
.delivery__selo--atrasado { background: var(--perigo-soft); border-color: var(--perigo-linha); color: var(--perigo); }
.delivery__selo--hoje { background: var(--aviso-soft); border-color: var(--aviso-linha); color: var(--aviso); }
.delivery__prog { font-size: 10.5px; color: var(--text-fraco); }
.delivery__prog-barra { background: rgba(148, 172, 198, 0.14); }
.delivery__filtro.is-ativo { background: var(--accent-soft); border-color: rgba(246, 196, 0, 0.45); color: var(--accent-texto); }
.delivery__filtro-n:not(:empty) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: var(--r-pill);
  background: rgba(148, 172, 198, 0.12);
  font-size: 11px;
}
.delivery__nav-badge { background: #dc4a4a; }

/* Pop-up do cliente */
.delivery__dash { padding: 0; }
.dc__topo { padding: var(--e-4) var(--e-5); gap: var(--e-3); }
.dc__nome { font: 600 var(--t-lg)/1.2 var(--font-display); letter-spacing: -0.015em; }
.dc__fechar {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border-radius: var(--r-sm);
  color: var(--text-muted);
}
.dc__grade { gap: var(--e-5); padding: var(--e-5); }
.dc__col { gap: var(--e-4); }
.dc__metricas > div {
  padding: 10px 12px;
  border-radius: var(--r-md);
  background: var(--superficie-afundada);
}
.dc__metricas span { font-size: 10.5px; font-weight: 500; letter-spacing: .06em; color: var(--text-fraco); }
.dc__metricas strong { font-size: var(--t-base); font-weight: 600; }
.dc__bloco {
  padding: var(--e-4);
  border-radius: var(--r-md);
  background: rgba(148, 172, 198, 0.025);
}
.dc__bloco-topo { margin-bottom: 10px; }
.dc__bloco-topo h3 { font-size: 11px; font-weight: 600; letter-spacing: .07em; color: var(--text-fraco); }
.dc__barra { height: 6px; background: rgba(148, 172, 198, 0.12); }
.dc__notas li { border-radius: var(--r-sm); background: var(--superficie-afundada); padding: 9px 11px; }
.dc__nota-topo button { border-radius: var(--r-xs); }
.dc__nota-topo button:hover { color: var(--perigo); }
.dc__hist li { border-left-color: var(--border-strong); }
.delivery__checklist-topo { font-size: 10.5px; font-weight: 600; letter-spacing: .06em; color: var(--text-fraco); }
.delivery__checklist-topo button { font-weight: 600; border-radius: var(--r-xs); padding: 2px 6px; }
.delivery__checklist-topo button:hover { background: var(--accent-soft); }
.delivery__check-item { font-size: 12.5px; padding: 6px 4px; border-radius: var(--r-xs); }
.delivery__check-item:hover { background: rgba(148, 172, 198, 0.05); }
.delivery__check-item button { border-radius: var(--r-xs); }
.delivery__check-item button:hover { color: var(--perigo); }

/* Aviso "Contatos de hoje" */
.delivery__aviso-lista { border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden auto; }
.delivery__aviso-lista li:last-child button { border-bottom: 0; }
.delivery__aviso-lista button { padding: 10px 12px; font-size: 13px; }
.delivery__aviso-lista button:hover { background: rgba(148, 172, 198, 0.06); }

/* Campo inline do checklist (PR #16): campo e botão na mesma altura */
.delivery__checklist-add { align-items: center; }
.delivery__checklist-add .campo__input { min-height: 34px; padding: 6px 11px; font-size: 13px; }
.delivery__checklist-add .btn { min-height: 34px; padding: 6px 12px; font-size: 12.5px; flex: none; }
.delivery__checklist-topo:has(> span:empty:only-child) { display: none; }
/* Alerta inline do pop-up (estilo vem inline do JS) */
.delivery-alerta-inline {
  background: #dc4a4a !important;
  border-radius: var(--r-sm) !important;
  box-shadow: var(--shadow-md) !important;
  font-size: 13px;
  font-weight: 550;
}
/* Nome editável no topo do pop-up: lê como título, vira campo no hover/foco */
.dc__topo .dc__nome {
  background-color: transparent;
  border-color: transparent;
  padding-left: 8px;
  margin-left: -8px;
}
.dc__topo .dc__nome:hover:not(:focus) { border-color: var(--border); background-color: var(--superficie-afundada); }
.dc__topo .dc__nome:focus { background-color: var(--superficie-afundada); }
.dc__contato .btn { min-height: 36px; }

/* ── 8.6 Workspace › Fluxos ────────────────────────────────────────────── */
/* Só pele. Nada de largura, padding ou borda nos nós (.fluxo__no): a posição
   das portas de conexão é medida a partir deles. */
.fluxo-gallery__topo h1 { font-size: var(--t-2xl); font-weight: 600; }
.fluxo-gallery__vazio {
  padding: var(--e-10) var(--e-6);
  border: 1px dashed var(--border-strong);
  border-radius: var(--r-lg);
  text-align: center;
  color: var(--text-muted);
}
.fluxo-card { border-radius: var(--r-lg); padding: var(--e-5); }
.fluxo-card:hover { transform: translateY(-1px); }
.fluxo-card__icone {
  width: 36px;
  height: 36px;
  border-radius: var(--r-md);
  border: 1px solid var(--border);
  background: var(--panel-bg-hover);
  font-size: 17px;
}
.fluxo-card__nome { font-size: var(--t-md); font-weight: 600; }
.fluxo-card__tag { border-radius: var(--r-pill); font-size: 11px; background: rgba(148, 172, 198, 0.08); }

.fluxo__topo { gap: var(--e-3); }
.fluxo__voltar { margin-right: 0; }
.fluxo__nome {
  background-color: transparent;
  font-size: var(--t-lg);
  letter-spacing: -0.015em;
  min-height: 36px;
}
.fluxo__nome:hover { background-color: var(--superficie-afundada); border-color: var(--border); }
.fluxo__nome:focus { background-color: var(--superficie-afundada); }
.fluxo__conta { min-height: 36px; background-color: var(--superficie-afundada); border-color: var(--border-strong); border-radius: var(--r-sm); }
.fluxo__canal-badge,
.fluxo-card__tag--canal { padding: 3px 9px; font-size: 11px; font-weight: 600; }
.fluxo__canal-badge[data-canal="sms"],
.fluxo-card__tag--canal[data-canal="sms"] { color: #c4b5fd; }
.fluxo__canal-badge[data-canal="multicanal"],
.fluxo-card__tag--canal[data-canal="multicanal"] { color: #93c5fd; }
.fluxo__canal-badge[data-canal="whatsapp_normal"],
.fluxo-card__tag--canal[data-canal="whatsapp_normal"] { color: #4ade80; }

.fluxo__paleta {
  padding: var(--e-3);
  gap: 6px;
  border-radius: var(--r-lg);
  background: var(--panel-bg);
}
.fluxo__paleta-titulo,
.fluxo__paleta-cat { font-size: 10.5px; font-weight: 600; letter-spacing: .08em; color: var(--text-fraco); }
.fluxo__no-btn {
  font-size: 13px;
  padding: 9px 10px;
  border-radius: var(--r-md);
  background: var(--superficie-afundada);
}
/* A cor lateral da paleta é a legenda do tipo de bloco (a mesma do nó no
   canvas): fica, mas fina. */
.fluxo__paleta-card { border-left-width: 2px; }
.fluxo__no-btn:hover {
  border-color: var(--border-strong);
  background: var(--panel-bg-hover);
  transform: none;
}
.fluxo__dica { color: var(--text-fraco); }

.fluxo__canvas {
  border-radius: var(--r-lg);
  background-color: var(--superficie-afundada);
  background-image: radial-gradient(circle, rgba(148, 172, 198, 0.09) 1px, transparent 1px);
}
.fluxo__no { background: var(--panel-bg); box-shadow: var(--shadow-md); }
.fluxo__no-cabecalho { font-weight: 600; }

/* ── 8.7 Modais genéricos: FluxoModal (.fmodal) e confirmar.js ─────────── */
.fmodal__overlay { background: rgba(3, 8, 14, 0.62); backdrop-filter: blur(3px); }
.fmodal,
.confirmar {
  background: var(--elevado);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
}
.confirmar::backdrop { background: rgba(3, 8, 14, 0.62); backdrop-filter: blur(3px); }
.fmodal__cabecalho { padding: var(--e-5) var(--e-5) var(--e-4); border-bottom-color: var(--border); }
.fmodal__titulo,
.confirmar__titulo { font-size: var(--t-lg); font-weight: 600; letter-spacing: -0.015em; }
.fmodal__subtitulo { color: var(--text-muted); font-size: var(--t-sm); }
.fmodal__fechar { width: 32px; height: 32px; border-radius: var(--r-sm); }
.fmodal__fechar:hover { background: rgba(148, 172, 198, 0.08); }
.fmodal__corpo { padding: var(--e-5); }
.fmodal__rodape { padding: var(--e-4) var(--e-5); border-top-color: var(--border); }
.fmodal-mensagem { color: var(--text-muted); }
.fmodal-rotulo { font-size: var(--t-sm); font-weight: 500; }
.fmodal-input,
.confirmar__campo {
  background: var(--superficie-afundada);
  border-color: var(--border-strong);
  border-radius: var(--r-sm);
  padding: 8px 12px;
}
.fmodal-input:focus,
.confirmar__campo:focus { border-color: var(--border-foco); box-shadow: 0 0 0 3px rgba(246, 196, 0, 0.12); }
.fmodal__salvar,
.fmodal-btn {
  min-height: 38px;
  padding: 8px 16px;
  border-radius: var(--r-sm);
  font-size: 13.5px;
  font-weight: 550;
}
.fmodal-btn--primario { color: #1a1400; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.25) inset; }
.fmodal-btn--primario:hover:not(:disabled) { background: #ffd21f; filter: none; }
.fmodal-btn--secundario { background: rgba(148, 172, 198, 0.06); border: 1px solid var(--border-strong); }
.fmodal-btn--secundario:hover { background: rgba(148, 172, 198, 0.11); filter: none; }
.fmodal-btn--perigo { background: #dc4a4a; color: #fff; }
.fmodal-btn--perigo:hover { background: #e25b5b; filter: none; }
.fmodal-btn:focus-visible,
.fmodal__fechar:focus-visible { outline: 2px solid var(--accent-ring); outline-offset: 2px; }

.confirmar { padding: var(--e-6); }
.confirmar__passo { font-weight: 600; color: var(--text-fraco); }
.confirmar__perdas {
  background: var(--perigo-soft);
  border: 1px solid var(--perigo-linha);
  border-left-width: 1px;
  color: var(--text-muted);
}
.confirmar__btn {
  min-height: 36px;
  padding: 7px 14px;
  font-size: 13px;
  font-weight: 550;
  background: rgba(148, 172, 198, 0.05);
  border-color: var(--border-strong);
}
.confirmar__btn:hover { background: rgba(148, 172, 198, 0.1); }
.confirmar__btn:focus-visible { outline-color: var(--accent-ring); }
/* Era dourado com texto branco (≈1.6:1). Destruir é vermelho. */
.confirmar__btn--perigo { background: #dc4a4a; border-color: #dc4a4a; color: #fff; }
.confirmar__btn--perigo:hover { background: #e25b5b; filter: none; }
.confirmar__btn:disabled:hover { background: rgba(148, 172, 198, 0.05); }
.confirmar__btn--perigo:disabled:hover { background: #dc4a4a; }
/* Confirmação comum (sem perigo): o OK é a ação primária */
.confirmar__btn--ok:not(.confirmar__btn--perigo) { background: var(--accent); border-color: transparent; color: #1a1400; }
.confirmar__btn--ok:not(.confirmar__btn--perigo):hover { background: #ffd21f; }
.confirmar:not(.confirmar--perigo) .confirmar__perdas { background: rgba(148, 172, 198, 0.05); border-color: var(--border); }

/* ── 8.8 Contatos ──────────────────────────────────────────────────────── */
.envio { gap: var(--e-5); }
.envio__header h1 { font-size: var(--t-2xl); font-weight: 600; }
.envio__header p { color: var(--text-muted); }
.envio__tab.is-active { color: var(--text); }
.crm { gap: var(--e-4); }

/* Métricas: a cor sai da faixa lateral e vira ponto antes do rótulo */
.crm__metricas { gap: var(--e-2); grid-template-columns: repeat(auto-fit, minmax(136px, 1fr)); }
.crm__metrica {
  padding: 12px 14px;
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
}
.crm__metrica::before { display: none; }
.crm__metrica:hover { transform: none; }
.crm__metrica-n { font-size: var(--t-xl); font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.crm__metrica-nome {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-muted);
}
.crm__metrica-nome::first-letter { text-transform: uppercase; }
.crm__metrica-nome::before {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--crm-cor, rgba(148, 172, 198, 0.35));
  transform: translateY(-1px);
}
.crm__metrica--total { --crm-cor: var(--accent); }
.crm__metrica--respondendo,
.crm__metrica--convertidos { --crm-cor: var(--sucesso); }
.crm__metrica--disponiveis,
.crm__metrica--leads_frios { --crm-cor: var(--info); }
.crm__metrica--bloqueados { --crm-cor: var(--perigo); }
.crm__metrica--importados_hoje { --crm-cor: var(--aviso); }

/* Abas: mesmo desenho do subnav (traço dourado, sem fundo) */
.crm__abas { gap: 2px; border-bottom-color: var(--border); }
.crm__aba { padding: 9px 12px; font-size: 13.5px; font-weight: 500; color: var(--text-fraco); border-radius: 0; }
.crm__aba:hover { background: none; color: var(--text); }
.crm__aba.is-active { color: var(--text); background: none; font-weight: 600; }
.crm__aba-n { background: rgba(148, 172, 198, 0.1); font-size: 11px; padding: 0 7px; }
.crm__aba.is-active .crm__aba-n { background: var(--accent); color: #1a1400; }

.crm__barra { gap: var(--e-2); }
.crm__barra .campo__input,
.crm__barra select { min-height: 36px; }
.crm__filtros,
.crm__dup-topo,
.crm__mapeamento,
.crm__gr { border-radius: var(--r-lg); box-shadow: var(--shadow-sm); }
.crm__filtro-rotulo { font-size: 11px; font-weight: 500; color: var(--text-fraco); }
.crm__selecao { border-color: rgba(246, 196, 0, 0.3); }
.crm__dup-grupo { border-left: 1px solid var(--aviso-linha); border-radius: var(--r-md); }

/* Tabela */
.crm__tabela-wrap {
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--panel-bg);
}
.crm__th {
  background: var(--panel-bg);
  font-size: 11px;
  letter-spacing: .06em;
  color: var(--text-fraco);
  border-bottom-color: var(--border);
  box-shadow: 0 1px 0 var(--border);
}
.crm__linha td { border-bottom-color: var(--border); }
.crm__linha:last-child td { border-bottom: 0; }
.crm__linha:hover { background: rgba(148, 172, 198, 0.04); }
.crm__avatar { width: 30px; height: 30px; font-size: 12.5px; font-weight: 600; }
.crm__num { color: var(--text-fraco); }
.crm__nome:hover { color: var(--text); text-decoration-color: var(--accent); text-underline-offset: 3px; }
.crm__etapa { border-radius: var(--r-pill); font-size: 11.5px; background: rgba(148, 172, 198, 0.06); border-color: var(--border-strong); }
.crm__tag { background: rgba(148, 172, 198, 0.06); }
.crm__situacao { background: rgba(148, 172, 198, 0.08); font-weight: 550; }
.crm__gr-trilho { background: var(--superficie-afundada); height: 6px; }
.crm__gr-barra { background: var(--accent); }

/* Ficha do contato (painel lateral) */
.ficha__fundo { background: rgba(3, 8, 14, 0.62); }
.ficha { background: var(--elevado); padding: var(--e-6); gap: var(--e-5); }
.ficha__nome { font-size: var(--t-lg); font-weight: 600; letter-spacing: -0.015em; }
.ficha__dado-rotulo { color: var(--text-fraco); font-weight: 500; }
.ficha__campanha { background: var(--superficie-afundada); border-radius: var(--r-md); }
.ficha__evento-icone { background: var(--elevado); }

.envio__card { border-radius: var(--r-md); }
.envio__card strong { font-weight: 600; }
.envio__tag-row .campo__input { border-color: var(--border-strong); background: var(--superficie-afundada); }
.envio__tag-row .campo__label { color: var(--text-muted); font-weight: 500; }
.envio__contador strong { color: var(--text); }
/* Contadores em linha (Sales, Delivery, Contatos): mesmo rótulo, em caixa
   normal — em maiúsculas de 11px "Total de contatos" quebrava em duas linhas. */
.funil__resumo-card span,
.delivery__resumo span {
  font-size: 12px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-muted);
}

/* ── 8.9 Disparos / Campanhas ──────────────────────────────────────────── */
.disparo__header h1,
.campanhas-sec__head h2 { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.02em; }
.disparo__header h1 { font-size: var(--t-2xl); }
.campanhas-sec__head h2 { font-size: var(--t-lg); }

/* Aviso "WhatsApp Business API não configurado": era texto solto com link
   na cor padrão do navegador (roxo de visitado). Vira faixa de atenção. */
#status-meta-banner:not([hidden]) {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 8px;
  margin: 0 0 var(--e-4);
  padding: 10px 14px;
  border: 1px solid var(--aviso-linha);
  border-radius: var(--r-md);
  background: var(--aviso-soft);
  color: var(--text);
  font-size: 13px;
}
#status-meta-banner a,
#status-meta-banner a:visited {
  color: var(--accent-texto);
  font-weight: 550;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.conta--add { border-color: var(--border-strong); border-radius: var(--r-md); color: var(--text-muted); }
.conta--add:hover { border-color: var(--border-strong); background: rgba(148, 172, 198, 0.05); color: var(--text); }
.conta--add:focus-visible { outline-color: var(--accent-ring); box-shadow: none; }
.contas__placeholder { color: var(--text-muted); font-size: 13.5px; }

.disparo__resumo { border-radius: var(--r-lg); box-shadow: var(--shadow-sm); }
.resumo__item { padding: 12px 16px; }
.resumo__valor { font-size: var(--t-xl); font-weight: 600; letter-spacing: -0.02em; }
.resumo__rotulo { font-size: 12px; text-transform: none; letter-spacing: 0; color: var(--text-muted); }
.resumo__rotulo::first-letter { text-transform: uppercase; }

.disparo__toolbar { gap: var(--e-2); }
input.toolbar__busca,
.toolbar__busca input,
.toolbar__ordem select {
  min-height: 34px;
  font-size: 13px;
  background-color: var(--superficie-afundada);
  border-color: var(--border-strong);
}
input.toolbar__busca:focus,
.toolbar__busca input:focus,
.toolbar__ordem select:focus { border-color: var(--border-foco); box-shadow: 0 0 0 3px rgba(246, 196, 0, 0.12); }
.filtro-chip {
  min-height: 30px;
  padding: 4px 11px;
  font-size: 12.5px;
  background: transparent;
  border-color: var(--border-strong);
}
.filtro-chip:hover { background: rgba(148, 172, 198, 0.06); }
.filtro-chip.is-ativo { background: var(--accent-soft); border-color: rgba(246, 196, 0, 0.45); color: var(--accent-texto); }
.filtro-chip:focus-visible { outline-color: var(--accent-ring); box-shadow: none; }
.toolbar__periodo { border-left-color: var(--border); }

.disparo__estado { color: var(--text-muted); }
#disp-tabela-slot > .disparo__estado {
  border: 1px dashed var(--border-strong);
  border-radius: var(--r-lg);
  background: transparent;
}

.tabela-campanhas-wrap { border-radius: var(--r-lg); border-color: var(--border); box-shadow: var(--shadow-sm); }
.tabela-campanhas thead th { font-size: 11px; letter-spacing: .06em; color: var(--text-fraco); background: var(--panel-bg); }
.campanha-linha:hover { background: rgba(148, 172, 198, 0.04); }
.status-chip { font-size: 11px; font-weight: 600; padding: 2px 9px; }
.status-chip.is-agendada { color: var(--info); background: var(--info-soft); }
.status-chip.is-agendada::before { background: var(--info); }
.status-chip.is-rodando { background: var(--aviso-soft); }
.campanha-acao-btn--excluir:hover { color: var(--perigo); }
.campanha-bulk-bar { border-radius: var(--r-md); }

/* Contas: o âmbar #d8ad1b do SMS competia com o dourado da marca */
.modal__cabecalho-icone--sms,
.tipo-conexao--sms .tipo-conexao__icone,
.tipo-conexao__selo--sms,
.conta-chip__tipo--sms { color: #c4b5fd; background: rgba(167, 139, 250, 0.12); }
.tipo-conexao--waha .tipo-conexao__icone,
.conta-chip__tipo--waha { color: #a5b4fc; background: rgba(129, 140, 248, 0.12); }
.sms-ajuda a { color: var(--accent-texto); }
.conta__menu { background: var(--elevado); border-color: var(--border-strong); border-radius: var(--r-md); box-shadow: var(--shadow-lg); }

/* Wizard de campanha (3 etapas). campanhas.css e campanhas-wizard.css
   desenhavam o mesmo toggle duas vezes: sobrava uma caixa dentro da outra
   (com 14px de deslocamento) e o checkbox aparecia ao lado do switch. */
.camp-agendar-card {
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--superficie-afundada);
}
.camp-agendar-card .camp-agendar-toggle {
  align-items: center;
  gap: 14px;
  margin: 0;
  padding: 14px 16px;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.camp-agendar-card .camp-agendar-toggle > input[type="checkbox"] {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
  opacity: 0;
}
.camp-agendar-toggle > input:focus-visible + .camp-agendar-toggle__track {
  outline: 2px solid var(--accent-ring);
  outline-offset: 2px;
}
.camp-agendar-toggle__track { display: block; background: rgba(148, 172, 198, 0.12); border-color: var(--border-strong); }
.camp-agendar-toggle__thumb { display: block; background: #c3d0dc; }
.camp-agendar-toggle input:checked + .camp-agendar-toggle__track { background: var(--accent); border-color: var(--accent); }
.camp-agendar-toggle input:checked + .camp-agendar-toggle__track .camp-agendar-toggle__thumb { background: #1a1400; }
.camp-agendar-toggle__texto { display: flex; gap: 2px; }
.camp-agendar-toggle__texto strong { font-weight: 600; }
.camp-agendar-card .camp-agendamento {
  margin: 0;
  padding: 0;
  border: 0;
  border-top: 1px solid var(--border);
  border-radius: 0;
  background: rgba(148, 172, 198, 0.03);
}
.camp-agendamento__inner { padding: 14px 16px 16px; }
.camp-agendamento__fuso { color: var(--text-fraco); }

/* ── 8.10 Conversas (Inbox) ────────────────────────────────────────────── */
:root {
  --msg-entrada-bg: #172a3c;
  --msg-entrada-borda: rgba(160, 184, 208, 0.16);
  --msg-saida-bg: #1d3a3f;
  --msg-saida-borda: rgba(52, 211, 153, 0.22);
}
.inbox { border-color: var(--border); box-shadow: var(--shadow-sm); background: var(--panel-bg); }
/* Lista e filtros na mesma superfície do cartão; a área de mensagens afunda
   um degrau. Antes a lista era o painel mais claro da tela. */
.inbox__lista,
.inbox__filtros { background: var(--panel-bg); }
.inbox__lista { border-right-color: var(--border); }
.inbox__lista-topo { padding: 14px 16px; }
.inbox__lista-titulo { font-size: var(--t-md); letter-spacing: -0.01em; }
.inbox__contagem { background: rgba(148, 172, 198, 0.08); border-color: transparent; color: var(--text-muted); }
.inbox__busca {
  min-height: 34px;
  border-radius: var(--r-sm);
  background: var(--superficie-afundada);
}
.inbox__filtro-sel {
  min-height: 32px;
  border-radius: var(--r-sm);
  background-color: var(--superficie-afundada);
}
.inbox__busca:focus,
.inbox__filtro-sel:focus,
.inbox__texto:focus { border-color: var(--border-foco); box-shadow: 0 0 0 3px rgba(246, 196, 0, 0.12); }
.inbox__chip { background: transparent; border-color: var(--border-strong); font-weight: 550; }
.inbox__chip:hover { background: rgba(148, 172, 198, 0.06); }
.inbox__chip.is-ativo { background: var(--accent-soft); border-color: rgba(246, 196, 0, 0.45); color: var(--accent-texto); }

.inbox__conversa { padding: 12px 16px; border-bottom-color: var(--border); }
.inbox__conversa:hover { background: rgba(148, 172, 198, 0.04); }
.inbox__conversa--ativa { background: rgba(148, 172, 198, 0.08); box-shadow: inset 2px 0 0 var(--accent); }
.inbox__avatar {
  width: 38px;
  height: 38px;
  min-width: 38px;
  border-radius: var(--r-pill);
  background: var(--panel-bg-hover);
  border-color: var(--border-strong);
}
.inbox__conversa-hora { color: var(--text-fraco); }
.inbox__badge { color: #1a1400; }

.inbox__chat { background: var(--panel-bg); }
.inbox__vazio-chat { color: var(--text-fraco); }
.inbox__mensagens { background: var(--superficie-afundada); padding: var(--e-5); }
.inbox__msg { border-radius: 14px; font-size: 13.5px; line-height: 1.45; }
.inbox__msg--entrada { box-shadow: none; border-bottom-left-radius: 4px; }
.inbox__msg--saida { border-bottom-right-radius: 4px; }
.inbox__msg--falhou { border-left-width: 1px; }
.inbox__msg-hora { color: var(--text-fraco); }
.inbox__data-separador { background: var(--elevado); font-weight: 600; color: var(--text-muted); }
.inbox__meta-conta { background: var(--info-soft); }
.inbox__meta-var { background: var(--aviso-soft); }
.inbox__janela--aberta { background: var(--sucesso-soft); }
.inbox__janela--fechada { background: var(--aviso-soft); }
.inbox__alerta-entrega-acao { border-radius: var(--r-sm); font-weight: 600; }
.inbox__alerta-sync { border-color: var(--aviso-linha); background: var(--aviso-soft); }

.inbox__composer { padding: 12px 16px; border-top-color: var(--border); background: var(--panel-bg); }
.inbox__texto {
  border-radius: var(--r-md);
  background: var(--superficie-afundada);
  font-size: 13.5px;
  padding: 10px 14px;
}
.inbox__texto:focus { background: var(--superficie-afundada); }
.inbox__respostas-rapidas { background: var(--panel-bg); }
.inbox__funil-popover { background: var(--elevado); border-color: var(--border-strong); border-radius: var(--r-md); box-shadow: var(--shadow-lg); }
.inbox-canal-conta { border-radius: var(--r-md); }
.inbox-canal-vazio { border-color: var(--border-strong); border-radius: var(--r-md); }

/* ── 8.11 Administrativo (conciliação) ─────────────────────────────────── */
/* Boa parte desta tela vem com style="" no HTML; por isso alguns !important,
   sempre presos a um id ou classe da própria tela. */
.administrativo {
  /* adm.css troca a mono global por Roboto Mono; valor financeiro aqui usa a
     fonte da interface com algarismos tabulares, como no resto do app. */
  --font-mono: var(--font-body);
  font-variant-numeric: tabular-nums;
}
.administrativo__topo { align-items: flex-end; gap: var(--e-4); flex-wrap: wrap; margin-bottom: var(--e-5); }
.administrativo__topo h1 { margin: 0; }
.administrativo__topo p { color: var(--text-muted); margin: 4px 0 0; }

.administrativo .periodo-toggle-wrap {
  min-height: 36px;
  padding: 0 4px 0 12px !important;
  background: var(--superficie-afundada) !important;
  border: 1px solid var(--border-strong) !important;
  border-radius: var(--r-sm) !important;
}
.administrativo .periodo-toggle-wrap > span { color: var(--text-fraco) !important; font-size: 12.5px !important; }
#periodo-select,
#periodo-inicio,
#periodo-fim {
  background-color: transparent !important;
  border: 0 !important;
  color: var(--text) !important;
  font-family: var(--font-body);
  font-size: 13px !important;
  font-weight: 550 !important;
}
#periodo-aplicar { background: var(--accent) !important; color: #1a1400 !important; border-radius: var(--r-xs) !important; }

/* Três botões de ação com três cores (âmbar/roxo/verde) viram secundários
   neutros; o emoji continua como ícone. */
#btn-sync-historico,
#btn-recategorizar,
#btn-gerar-relatorio-pdf {
  min-height: 36px;
  padding: 7px 14px !important;
  background: rgba(148, 172, 198, 0.04) !important;
  border: 1px solid var(--border-strong) !important;
  border-radius: var(--r-sm) !important;
  color: var(--text) !important;
  font-family: var(--font-body);
  font-size: 13px !important;
  font-weight: 550 !important;
  box-shadow: var(--shadow-sm);
  transition: background var(--dur) ease, border-color var(--dur) ease;
}
#btn-sync-historico:hover,
#btn-recategorizar:hover,
#btn-gerar-relatorio-pdf:hover { background: rgba(148, 172, 198, 0.09) !important; border-color: rgba(160, 184, 208, 0.28) !important; }
#btn-sync-historico:disabled,
#btn-recategorizar:disabled { opacity: .55; cursor: progress !important; }

/* Abas: o JS pinta a ativa de azul-céu inline; aqui seguem o subnav. */
#admin-tab-bar {
  gap: 2px !important;
  padding: 0 !important;
  border-bottom: 1px solid var(--border) !important;
  margin-bottom: var(--e-5) !important;
}
#admin-tab-bar .admin-tab {
  padding: 10px 12px !important;
  margin-bottom: -1px;
  color: var(--text-fraco) !important;
  font-family: var(--font-body);
  font-size: 13.5px !important;
  font-weight: 500 !important;
  border-bottom: 2px solid transparent !important;
}
#admin-tab-bar .admin-tab:hover { color: var(--text) !important; }
#admin-tab-bar .admin-tab.is-ativa { color: var(--text) !important; border-bottom-color: var(--accent) !important; font-weight: 600 !important; }

/* Cartões */
.container_info { gap: var(--e-4); }
.padrao_dashCard {
  border-radius: var(--r-lg);
  border-color: var(--border);
  box-shadow: var(--shadow-sm);
  padding: var(--e-5);
}
/* Título de cartão herdava os 26px do título de página (.view h1) */
.view .padrao_dashCard h1 {
  margin: 0 0 var(--e-3);
  padding: 0;
  font-size: var(--t-base);
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--text-muted);
}
#brlSaldo,
#usdSaldo { font-size: 28px; font-weight: 600; letter-spacing: -0.025em; padding-top: 2px; }
#saldoTotal { font-weight: 600; letter-spacing: -0.025em; }
#brlPorcentagem,
#usdPorcentagem { color: var(--text-fraco); }
.saldo-split { border-top-color: var(--border); }
.saldo-split__divisor { background: var(--border); }
.saldo-split__label { font-size: 11px; font-weight: 500; letter-spacing: .06em; color: var(--text-fraco); }
.saldo-split__label--entrada,
.saldo-split__label--saida { color: var(--text-fraco); }
.saldo-split__valor { font-size: var(--t-md); font-weight: 600; }
.saldo-split__valor--entrada { color: var(--sucesso); }
.saldo-split__valor--saida { color: var(--perigo); }

.mini-card { border-radius: var(--r-lg); border-color: var(--border); box-shadow: var(--shadow-sm); padding: var(--e-4) var(--e-5); }
.mini-card__titulo { font-size: 11px; font-weight: 500; letter-spacing: .06em; color: var(--text-fraco); }
.mini-card__valor { font-size: var(--t-xl); font-weight: 600; letter-spacing: -0.02em; }
.mini-card__sub { color: var(--text-fraco); font-size: 11.5px; }

.categoria-card { border-width: 1px; border-radius: var(--r-md); background: var(--superficie-afundada); }
.categoria-card:hover { transform: none; box-shadow: none; border-color: var(--border-strong); }
.categoria-card.ativa { box-shadow: inset 0 0 0 1px var(--cor, var(--border-strong)); }
.filtro-select,
.filtro-input {
  min-height: 34px;
  background-color: var(--superficie-afundada);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  color: var(--text);
  font-size: 13px;
}
.btn-paginacao { border-radius: var(--r-sm); }
.diario-cabecalho,
.transacoes-cabecalho { color: var(--text-fraco); font-size: 11px; letter-spacing: .06em; }
.diario-item,
.transacao-item { border-color: var(--border); }
.extrato_load__btn { background: var(--accent); color: #1a1400; border-color: transparent; transition: background var(--dur) ease; }
.extrato_load__btn:hover { transform: none; background: #ffd21f; }

/* Modal do relatório PDF (inline) */
#modal-relatorio-pdf {
  background: var(--elevado) !important;
  border: 1px solid var(--border-strong) !important;
  border-radius: var(--r-lg) !important;
  box-shadow: var(--shadow-lg);
}
#modal-relatorio-pdf select {
  background-color: var(--superficie-afundada) !important;
  border-color: var(--border-strong) !important;
  border-radius: var(--r-sm) !important;
}
#btn-confirmar-relatorio { background: var(--accent) !important; color: #1a1400 !important; border-radius: var(--r-sm) !important; }
#btn-cancelar-relatorio { color: var(--text) !important; border-color: var(--border-strong) !important; border-radius: var(--r-sm) !important; }

/* ── 8.12 Menu: grupo com submenu aberto ───────────────────────────────── */
/* Com "Extrair Leads" aberto, pai e filho ganhavam o traço dourado ao mesmo
   tempo. O traço fica no item real; o pai só mantém o texto destacado. */
.sidebar .panel--group.is-active[aria-expanded="true"]::before { display: none; }
.sidebar .panel--group.is-active[aria-expanded="true"] { background: transparent; box-shadow: none; }
.panel__submenu .panel--sub { padding-left: 14px; }

/* ── 8.13 Extrair Leads (Google Maps, Cadastro Nacional, WhatsApp…) ────── */
.gd-paineis {
  gap: 2px;
  padding: 3px;
  border-radius: var(--r-md);
  background: var(--superficie-afundada);
}
.gd-paineis__item { padding: 7px 12px; font-size: 13px; font-weight: 550; border-radius: var(--r-sm); }
.gd-paineis__item:hover:not(:disabled) { background: rgba(148, 172, 198, 0.06); }
/* Pílula ativa era vermelha (#d5281f), fora da paleta */
.gd-paineis__item.is-ativo,
.gd-paineis__item.is-ativo:hover,
.gd-paineis__item.is-ativo:focus-visible {
  background: var(--panel-bg-hover);
  color: var(--text);
  box-shadow: inset 0 0 0 1px var(--border-strong);
}
.gd-paineis__item.is-ativo span { background: var(--accent); color: #1a1400; }
.gd-paineis__item span { color: #1a1400; }
.gd-paineis__item:focus-visible { box-shadow: 0 0 0 2px var(--accent-ring); }

.extrair-leads__card {
  border-radius: var(--r-lg);
  padding: var(--e-5);
  box-shadow: var(--shadow-sm);
}
.extrair-leads__card:hover { border-color: var(--border); }
.extrair-leads__card-title { font-weight: 600; letter-spacing: -0.01em; }
.gd-campo__label { font-size: var(--t-sm); font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--text-muted); }
.gd-campo__input {
  min-height: 38px;
  padding: 8px 12px;
  background: var(--superficie-afundada);
  font-size: var(--t-base);
}
.gd-campo__input:focus {
  border-color: var(--border-foco);
  background: var(--superficie-afundada);
  box-shadow: 0 0 0 3px rgba(246, 196, 0, 0.12);
}

/* ── 8.14 Configurações ────────────────────────────────────────────────── */
.cfg__aba { border-radius: var(--r-sm); color: var(--text-muted); }
.cfg__aba:hover { background: rgba(148, 172, 198, 0.06); }
.cfg__aba.is-ativa { background: var(--panel-bg-hover); color: var(--text); box-shadow: inset 2px 0 0 var(--accent); }
.cfg__secao {
  padding: var(--e-5);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
}
.cfg__secao-titulo { font-size: var(--t-md); font-weight: 600; letter-spacing: -0.01em; }
.cfg__secao-sub { color: var(--text-muted); }
.cfg__linha { border-color: var(--border); }

/* ── 8.15 Tela de entrada (login) ──────────────────────────────────────── */
.entrada {
  background:
    radial-gradient(720px 420px at 50% 0%, rgba(96, 140, 190, 0.12), transparent 72%),
    var(--plano);
}
.entrada::before { opacity: .12; }
.entrada__caixa {
  max-width: 400px;
  padding: var(--e-8);
  background: var(--panel-bg);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  backdrop-filter: none;
}
.entrada__marca { gap: var(--e-3); margin-bottom: var(--e-6); }
.entrada__logo { width: 56px; height: 56px; border-radius: var(--r-lg); }
.entrada__logo img { width: 56px; height: 56px; }
.entrada__nome { font-family: var(--font-marca); font-size: 15px; letter-spacing: .09em; }
.entrada__titulo { font-size: var(--t-2xl); font-weight: 600; letter-spacing: -0.025em; }
.entrada__sub { font-size: var(--t-base); margin-bottom: var(--e-6); }
.entrada__form { gap: var(--e-4); }
.entrada__botao { min-height: 40px; font-size: var(--t-base); }

/* ── 8.16 Telas estreitas (≥ 400px) ────────────────────────────────────── */
@media (max-width: 767px) {
  /* KPIs de campanhas: cinco colunas num cartão com overflow:hidden cortavam
     os números; viram grade de duas. */
  .disparo__resumo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .resumo__item { border-right: 0; border-bottom: 1px solid var(--border); }
  .resumo__item:nth-child(odd) { border-right: 1px solid var(--border); }
  .resumo__item:last-child { border-bottom: 0; }
  #admin-tab-bar { overflow-x: auto; scrollbar-width: none; }
  #admin-tab-bar .admin-tab { flex: none; white-space: nowrap; }
  .administrativo__topo > div:last-child { width: 100%; }
  .relatorios__card strong { font-size: 28px; }
  .funil__resumo-card,
  .delivery__resumo > div { min-width: 0; flex: 1 1 calc(50% - var(--e-2)); }
  .fmodal,
  .confirmar { width: calc(100vw - 32px); }
  .dc__topo { padding: var(--e-3) var(--e-4); }
  .dc__grade { padding: var(--e-4); }
}
@media (max-width: 767px) {
  /* Topo do Sales/Delivery: título e ferramentas lado a lado espremiam o
     subtítulo em quatro linhas. Empilha. */
  .funil__topo { flex-direction: column; align-items: stretch; }
  .funil__topo-dir,
  .funil__topo-btns { width: 100%; }
  .funil__topo-dir .funil__busca { flex: 1 1 100%; width: 100%; }
  .funil__topo-btns > * { flex: 1; }
}