/* source: css/styles.css */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* `hidden` esconde. Sempre.
 *
 * O navegador ja traz `[hidden] { display: none }`, mas essa regra vem da
 * folha DELE, e qualquer regra nossa vence — inclusive um simples
 * `.panel { display: flex }`. O resultado e um elemento que o JS marcou como
 * escondido e que continua na tela, sem erro nenhum para denunciar.
 *
 * Isso ja aconteceu aqui pelo menos oito vezes, e a resposta foi sempre a
 * mesma: mais um remendo `X[hidden] { display: none }` no CSS daquela tela.
 * Sao 37 remendos espalhados por 8 arquivos, e o proximo elemento com
 * `display` proprio repetia o defeito — foi assim que o botao de Organizacoes,
 * restrito a admin_geral, apareceu no menu de todo mundo.
 *
 * Uma regra, no lugar onde a cascata alcanca tudo. `!important` aqui nao e
 * forca bruta: e dizer que `hidden` nao se discute, e nenhum CSS do projeto
 * mostra um `[hidden]` de proposito (conferido nos 8 arquivos). */
[hidden] { display: none !important; }

:root {
  color-scheme: dark;

  /* Design system W2G CHURCH, derivado do W2G Live:
     azul-marinho profundo nas superfícies, dourado para marca e ações,
     texto frio e luminoso para leitura prolongada. */

  /* Superfícies — três planos: fundo, cartão e elevado */
  --plano: #081a2a;
  --bg: #0b1f31;
  --panel-bg: #10283b;
  --panel-bg-hover: #173449;
  --elevado: #1a3a50;

  /* Linhas: branco translúcido. Sobre preto, borda é o que separa
     camadas — no escuro a diferença de luminosidade sozinha não basta. */
  --border: rgba(156, 181, 199, 0.16);
  --border-strong: rgba(188, 208, 221, 0.28);

  --text: #f4f7f9;
  --text-muted: #a6b5c1;
  --text-fraco: #7f93a3;

  /* Marca — amarelo W2G. A variação clara serve para texto/ícone e o
     amarelo principal usa texto azul-marinho em botões. */
  --accent: #f6c400;
  --accent-texto: #ffd21a;
  --accent-strong: #ffda3d;
  --accent-soft: rgba(246, 196, 0, 0.13);
  --accent-ring: rgba(246, 196, 0, 0.48);

  /* Estados — reservados para significado, nunca para decorar */
  --sucesso: #3ddc84;
  --aviso: #f5a524;
  --perigo: #ff5a5a;
  --info: #5aa9ff;

  /* Sidebar: um degrau mais escura que o conteúdo, para o olho saber
     onde termina a navegação e começa o trabalho. */
  --sidebar-bg: #071827;
  --sidebar-bg-2: #0b2032;
  --sidebar-fg: #f4f7f9;
  --sidebar-muted: #8ca0af;
  --sidebar-line: rgba(156, 181, 199, 0.13);
  --sidebar-active: rgba(246, 196, 0, 0.13);

  /* Balões da conversa */
  --msg-entrada-bg: #173449;
  --msg-entrada-borda: rgba(156, 181, 199, 0.16);
  --msg-saida-bg: #213d42;
  --msg-saida-borda: rgba(246, 196, 0, 0.30);

  /* Sombra no escuro quase não aparece; o peso vem do anel de luz na
     borda superior, que simula a luz batendo de cima. */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.6);
  --shadow-md: 0 10px 28px -12px rgba(0, 0, 0, 0.85);
  --shadow-lg: 0 26px 56px -20px rgba(0, 0, 0, 0.95);

  /* Raios menores que no tema claro: canto muito redondo amolece a
     leitura de instrumento. */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-pill: 999px;

  /* Texto e marcas SOBRE preenchimento colorido (botão vermelho, selo, alça de
     toggle). Não é "branco do tema" — é a cor que contrasta com a cor de baixo,
     e por isso continua branca mesmo num tema escuro. */
  --sobre-cor: #071827;

  /* Fundos suaves de estado: no tema claro eram pastéis sólidos (#a7f3d0,
     #fde68a...), que no escuro viram manchas claras. Como transparência da
     própria cor de estado, funcionam nos dois temas. */
  --sucesso-soft: rgba(61, 220, 132, 0.14);
  --sucesso-linha: rgba(61, 220, 132, 0.38);
  --aviso-soft: rgba(245, 165, 36, 0.14);
  --aviso-linha: rgba(245, 165, 36, 0.38);
  --perigo-soft: rgba(255, 90, 90, 0.14);
  --perigo-linha: rgba(255, 90, 90, 0.38);
  --info-soft: rgba(90, 169, 255, 0.14);
  --info-linha: rgba(90, 169, 255, 0.38);

  /* Identidade dos blocos do editor de fluxo. É paleta CATEGÓRICA — cada matiz
     identifica um tipo de bloco, não uma grandeza. Todas medidas sobre a
     superfície escura (mínimo 3:1 para marca); `http` era #475569 e dava 2.36,
     sumindo no fundo preto, então subiu para #7b8ca3. */
  --no-inicio: #10b981;
  --no-condicao: #8b5cf6;
  --no-tag: #ec4899;
  --no-mover-funil: #f97316;
  --no-remover-tag: #22c55e;
  --no-midia: #a855f7;
  --no-template: #06b6d4;
  --no-http: #7b8ca3;
  --no-botoes: #6366f1;
  --no-lista: #14b8a6;
  --no-atribuir: #f43f5e;
  --conector: #9aa1ad;

  /* Tipografia
     Archivo: grotesca de traço firme, desenhada para interface densa,
       com algarismos tabulares de verdade.
     IBM Plex Sans: feita para interface técnica — diferencia 1/l/I e
       0/O, que importa quando a tela é cheia de número e ID.
     IBM Plex Mono: só onde o alinhamento de dígito manda (wamid,
       códigos de erro, horários da linha do tempo). */
  --font-body: "IBM Plex Sans", system-ui, -apple-system, sans-serif;
  --font-display: "Archivo", "IBM Plex Sans", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, monospace;
}

html, body { height: 100%; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.app {
  display: grid;
  grid-template-columns: 264px 1fr;
  min-height: 100vh;
}

/* ── Sidebar ─────────────────────────────────────────────────────── */
.sidebar {
  /* Trava o menu no scroll: fica fixo no topo da viewport enquanto o conteúdo
     rola. align-self:start impede o grid de esticar a coluna (senão a altura
     100vh é ignorada e o sticky não gruda). O rodapé "Online" mora dentro, com
     margin-top:auto, então também fica travado embaixo. */
  position: sticky;
  top: 0;
  height: 100vh;
  align-self: start;
  background:
    radial-gradient(120% 60% at 0% 0%, rgba(246, 196, 0, 0.06), transparent 60%),
    linear-gradient(180deg, var(--sidebar-bg), var(--sidebar-bg-2));
  border-right: 1px solid var(--sidebar-line);
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding: 22px 16px;
  color: var(--sidebar-fg);
}

.sidebar__brand {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 4px 8px 6px;
}
.brand__logo {
  width: 34px;
  height: 34px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  color: var(--sobre-cor);
  background: linear-gradient(140deg, var(--accent), var(--accent-strong));
  box-shadow: 0 4px 14px -2px rgba(246, 196, 0, 0.30);
}
.brand__logo svg { width: 19px; height: 19px; }
.brand__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -0.01em;
  color: var(--text);
}

.sidebar__label {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sidebar-muted);
  padding: 0 10px 2px;
}

.sidebar__nav {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

/* Itens de navegação (antigos "painéis") */
.panel {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  background: transparent;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  font: inherit;
  color: var(--sidebar-muted);
  padding: 11px 12px;
  text-align: left;
  width: 100%;
  transition: background 0.16s ease, color 0.16s ease;
}
.panel:hover {
  background: rgba(17, 17, 17, 0.045);
  color: var(--sidebar-fg);
}
.panel:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.panel.is-active {
  background: transparent;
  color: var(--sidebar-fg);
  box-shadow: none;
}
/* Listra dourada no início do item ativo. */
.panel.is-active::before {
  content: "";
  position: absolute;
  left: -6px;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 22px;
  border-radius: 0 3px 3px 0;
  background: var(--accent);
}
.panel__icon {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: currentColor;
  opacity: 0.9;
}
.panel__icon svg { width: 19px; height: 19px; }
.sidebar .panel--sub .panel__icon--channel {
  box-sizing: border-box;
  width: 26px;
  height: 26px;
  flex: 0 0 26px;
  padding: 4px;
  border: 1px solid color-mix(in srgb, var(--channel-color) 38%, transparent);
  border-radius: 8px;
  background: var(--channel-soft);
  color: var(--channel-color);
  opacity: 1;
  transition: transform .16s ease, border-color .16s ease, filter .16s ease;
}
.sidebar .panel--sub:hover .panel__icon--channel { transform: translateY(-1px) scale(1.04); filter: brightness(1.12); }
.sidebar .panel--sub.is-active .panel__icon--channel { color: var(--channel-color); box-shadow: 0 0 0 2px var(--channel-soft); }
.panel--maps { --channel-color:#4285f4; --channel-soft:rgba(66,133,244,.13); }
.panel--cadastro { --channel-color:#3ddc84; --channel-soft:rgba(61,220,132,.12); }
.panel--profissionais { --channel-color:#5aa9ff; --channel-soft:rgba(90,169,255,.13); }
.panel--whatsapp { --channel-color:#25d366; --channel-soft:rgba(37,211,102,.12); }
.panel--conversas-wa { --channel-color:#f5a524; --channel-soft:rgba(245,165,36,.13); }
.panel--grupos-wa { --channel-color:#b995ff; --channel-soft:rgba(185,149,255,.13); }
.sidebar .panel--sub .panel__icon--brand { padding: 3px; background: #fff; }
.panel.is-active .panel__icon { color: var(--accent); opacity: 1; }
.panel__title {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.005em;
}

.sidebar__foot {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px 0 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--sidebar-muted);
  border-top: 1px solid var(--sidebar-line);
}
.sidebar__usuario {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 6px 12px 2px;
}
.sidebar__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px rgba(246, 196, 0, 0.18);
}

/* Rodapé com a conta em uso e a saída. Substituiu o "Online", que informava
   algo que já é o caso normal — e escondia o que a pessoa precisa saber: com
   qual conta está entrada, e por onde sair. */
.sidebar__foot-avatar {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  flex: none;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
}
.sidebar__foot-nome {
  flex: 1;
  min-width: 0;
  /* Nome longo empurraria o botão de sair para fora da barra. */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--sidebar-fg);
  font-size: 13px;
}
.sidebar__sair {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  flex: none;
  padding: 0;
  border: 0;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--sidebar-muted);
  cursor: pointer;
  transition: background .15s, color .15s;
}
.sidebar__sair svg { width: 16px; height: 16px; }
.sidebar__sair:hover { background: var(--accent-soft); color: var(--accent-texto); }
.sidebar__sair:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* Seletor seguro de login: a senha só aparece no formulário de adição e nunca
   é guardada no navegador. As contas já autenticadas viram botões de troca. */
.trocar-conta { width: min(520px, calc(100vw - 28px)); }
.trocar-conta__conteudo { display: grid; gap: 16px; padding: 24px; }
.trocar-conta__cabecalho {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
.trocar-conta__fechar {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: none;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: transparent;
  color: var(--text-muted);
  font: inherit;
  font-size: 22px;
  cursor: pointer;
}
.trocar-conta__fechar:hover { background: var(--panel-bg-hover); color: var(--text); }
.trocar-conta__lista { display: grid; gap: 8px; }
.trocar-conta__item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 5px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--panel-bg);
  color: var(--text);
}
.trocar-conta__item:hover { border-color: var(--border-strong); }
.trocar-conta__item.is-atual { border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); }
.trocar-conta__selecionar {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  min-width: 0;
  padding: 5px 7px;
  border: 0;
  border-radius: calc(var(--r-md) - 4px);
  background: transparent;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.trocar-conta__selecionar:hover:not(:disabled) { background: var(--panel-bg-hover); }
.trocar-conta__selecionar:disabled { opacity: 1; cursor: default; }
.trocar-conta__editar {
  padding: 7px 9px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--text-muted);
  font: inherit;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
}
.trocar-conta__editar:hover {
  border-color: var(--accent);
  color: var(--accent-texto);
  background: var(--panel-bg-hover);
}
.trocar-conta__avatar {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--sobre-cor);
  font-weight: 700;
  background-position: center;
  background-size: cover;
}
.trocar-conta__dados { min-width: 0; }
.trocar-conta__dados strong,
.trocar-conta__dados small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trocar-conta__dados small { margin-top: 2px; color: var(--text-muted); font-size: 12px; }
.trocar-conta__estado { color: var(--accent-texto); font-size: 12px; font-weight: 700; }
.trocar-conta__adicionar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: 100%;
  padding: 10px 12px;
  border: 1px dashed var(--border);
  border-radius: var(--r-md);
  background: transparent;
  color: var(--text-muted);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.trocar-conta__adicionar:hover { border-color: var(--accent); color: var(--text); }
.trocar-conta__form {
  display: grid;
  gap: 12px;
  padding-top: 4px;
  border-top: 1px solid var(--border);
}
.trocar-conta__form[hidden] { display: none; }
.trocar-conta__form > p { margin: 0; color: var(--text-muted); font-size: 13px; }
.trocar-conta__campos-criar { display: grid; gap: 12px; }
.trocar-conta__campos-criar[hidden] { display: none; }
.trocar-conta__criar {
  justify-self: center;
  padding: 4px 8px;
  border: 0;
  background: transparent;
  color: var(--text-muted);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}
.trocar-conta__criar strong { color: var(--accent-texto); }
.trocar-conta__criar:hover strong { text-decoration: underline; }
.trocar-conta__erro { margin: 0; color: var(--danger, #ff7777); font-size: 13px; }

/* ── Conteúdo ────────────────────────────────────────────────────── */
.content {
  padding: 40px;
  min-width: 0;
  position: relative;
  isolation: isolate;
}
/* Fundo pontilhado atrás de tudo: forte no centro, some nas bordas */
.content::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: radial-gradient(circle, rgba(17, 17, 17, 0.07) 1px, transparent 1px);
  background-size: 24px 24px;
  /* #000 e rgba(0,0,0,...) numa máscara não são cor: são opacidade. Preto = opaco,
     transparente = recortado. Trocar por token quebraria o recorte. */
  -webkit-mask-image: radial-gradient(ellipse 72% 62% at 50% 42%, #000 0%, rgba(0, 0, 0, 0.5) 45%, transparent 72%);
  mask-image: radial-gradient(ellipse 72% 62% at 50% 42%, #000 0%, rgba(0, 0, 0, 0.5) 45%, transparent 72%);
}

.view { display: none; }
/* `backwards`, não `both`: o fill `forwards` retém o último keyframe, e mesmo
   sendo `transform: none` o navegador conserva uma matriz identidade. Isso faz
   a .view virar bloco de contenção de todo `position: fixed` descendente —
   menus, drawer e modais passam a se posicionar contra ela em vez da viewport
   (ADR-P002). `backwards` mantém o estado inicial e descarta a retenção final,
   que era inútil: o keyframe 100% é igual ao estado natural do elemento. */
.view.is-active { display: block; animation: viewIn 0.28s ease backwards; }

@keyframes viewIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

.view h1 {
  font-family: var(--font-display);
  font-size: 27px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text);
}

/* ── Botões (base compartilhada) ─────────────────────────────────── */
.btn {
  font: inherit;
  font-weight: 600;
  font-size: 13.5px;
  border-radius: var(--r-sm);
  padding: 9px 16px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.08s ease;
}
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--accent-ring); outline-offset: 2px; }

.btn--primario {
  background: linear-gradient(140deg, var(--accent), var(--accent-strong));
  color: var(--sobre-cor);
  box-shadow: 0 4px 12px -3px rgba(246, 196, 0, 0.28);
}
.btn--primario:hover { box-shadow: 0 6px 16px -3px rgba(246, 196, 0, 0.36); }
.btn--primario:disabled { opacity: 0.6; cursor: default; box-shadow: none; }

.btn--ghost {
  background: var(--panel-bg);
  color: var(--text);
  border-color: var(--border-strong);
}
.btn--ghost:hover { background: var(--panel-bg-hover); border-color: var(--border-strong); }

/* Barras de rolagem discretas */
* { scrollbar-width: thin; scrollbar-color: rgba(17,17,17,0.18) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }

/* ── Checkbox padrão W2G ─────────────────────────────────────────────
   Base visual para tabelas, listas e formulários. Componentes que funcionam
   como switch mantêm seus estilos específicos nas folhas de cada módulo. */
input[type="checkbox"]:not(.fluxo__inicio-switch):not(.fbloco-botoes-sem-int-chk) {
  appearance: none;
  -webkit-appearance: none;
  display: inline-grid;
  place-content: center;
  width: 17px;
  height: 17px;
  margin: 0;
  flex: 0 0 17px;
  border: 1px solid rgba(166, 193, 211, .38);
  border-radius: 6px;
  background: rgba(7, 25, 40, .82);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .24);
  vertical-align: middle;
  cursor: pointer;
  transition:
    background-color .16s ease,
    border-color .16s ease,
    box-shadow .16s ease,
    transform .12s ease;
}

input[type="checkbox"]:not(.fluxo__inicio-switch):not(.fbloco-botoes-sem-int-chk)::before {
  content: "";
  width: 9px;
  height: 9px;
  background: #071a2a;
  clip-path: polygon(13% 45%, 0 59%, 39% 96%, 100% 20%, 84% 7%, 38% 68%);
  opacity: 0;
  transform: scale(.45);
  transition: transform .16s cubic-bezier(.2, .8, .2, 1), opacity .12s ease;
}

input[type="checkbox"]:not(.fluxo__inicio-switch):not(.fbloco-botoes-sem-int-chk):hover {
  border-color: rgba(246, 196, 0, .68);
  background: rgba(246, 196, 0, .07);
}

input[type="checkbox"]:not(.fluxo__inicio-switch):not(.fbloco-botoes-sem-int-chk):active {
  transform: scale(.92);
}

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 {
  border-color: var(--accent);
  background: linear-gradient(145deg, #ffd21a, var(--accent-strong));
  box-shadow: 0 4px 12px -7px rgba(246, 196, 0, .9);
}

input[type="checkbox"]:not(.fluxo__inicio-switch):not(.fbloco-botoes-sem-int-chk):checked::before {
  opacity: 1;
  transform: scale(1);
}

input[type="checkbox"]:not(.fluxo__inicio-switch):not(.fbloco-botoes-sem-int-chk):indeterminate::before {
  width: 9px;
  height: 2px;
  border-radius: 2px;
  clip-path: none;
  opacity: 1;
  transform: scale(1);
}

input[type="checkbox"]:not(.fluxo__inicio-switch):not(.fbloco-botoes-sem-int-chk):focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-ring);
}

input[type="checkbox"]:not(.fluxo__inicio-switch):not(.fbloco-botoes-sem-int-chk):disabled {
  opacity: .42;
  cursor: not-allowed;
}

@media (prefers-reduced-motion: reduce) {
  input[type="checkbox"]:not(.fluxo__inicio-switch):not(.fbloco-botoes-sem-int-chk),
  input[type="checkbox"]:not(.fluxo__inicio-switch):not(.fbloco-botoes-sem-int-chk)::before {
    transition: none;
  }
}
*::-webkit-scrollbar-thumb { background: rgba(17,17,17,0.18); border-radius: 999px; border: 3px solid transparent; background-clip: content-box; }
*::-webkit-scrollbar-thumb:hover { background: rgba(17,17,17,0.30); background-clip: content-box; }

/* ── Recolher a barra lateral (só ícones) ───────────────────────── */
.sidebar__toggle {
  width: 100%;
  min-height: 38px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--sidebar-muted);
  cursor: pointer;
  padding: 8px 10px 8px 12px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  gap: 10px;
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  text-align: left;
  transition: background .16s ease, border-color .16s ease, color .16s ease;
}
.sidebar__toggle:hover {
  background: var(--panel-bg-hover);
  border-color: var(--sidebar-line);
  color: var(--sidebar-fg);
}
.sidebar__toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sidebar__toggle-texto { flex: 1; white-space: nowrap; }
.sidebar__toggle-icone {
  width: 18px;
  height: 18px;
  flex: none;
  color: var(--accent-texto);
  transition: transform .28s cubic-bezier(.2, .8, .2, 1);
}

.app--menu-colapsado { grid-template-columns: 72px 1fr; }
.app--menu-colapsado .brand__name,
.app--menu-colapsado .sidebar__label,
.app--menu-colapsado .panel__title,
.app--menu-colapsado .sidebar__usuario,
.app--menu-colapsado .sidebar__toggle-texto { display: none; }
.app--menu-colapsado .sidebar { padding: 22px 10px; }
.app--menu-colapsado .sidebar__brand { justify-content: center; padding: 4px 0 6px; }
.app--menu-colapsado .brand__logo { display: grid; }
.app--menu-colapsado .sidebar__foot { display: flex; }
.app--menu-colapsado .sidebar__toggle {
  width: 40px;
  margin: 0 auto;
  padding: 0;
  justify-content: center;
}
.app--menu-colapsado .sidebar__toggle-icone { transform: rotate(180deg); }
.app--menu-colapsado .panel { justify-content: center; padding-left: 0; padding-right: 0; }
.app--menu-colapsado .panel__icon { margin: 0; }

/* ── Topbar permanente (perfil) ─────────────────────────────────── */
.topbar {
  display: flex; align-items: center; justify-content: flex-end;
  height: 58px; margin: -40px -40px 24px; padding: 0 40px;
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--panel-bg) 70%, transparent);
  backdrop-filter: blur(8px);
  position: sticky; top: 0; z-index: 30;
}
.topbar__perfil-wrap { position: relative; }
.topbar__perfil {
  display: flex; align-items: center; gap: 8px; cursor: pointer;
  border: 1px solid var(--border); background: var(--panel-bg);
  border-radius: 999px; padding: 4px 12px 4px 4px; color: var(--text); font: inherit;
}
.topbar__perfil:hover { background: var(--panel-bg-hover); }
.topbar__avatar {
  width: 28px; height: 28px; border-radius: 50%; background: var(--accent);
  color: var(--sobre-cor); font-weight: 700; display: flex; align-items: center;
  justify-content: center; font-size: 13px;
}
.topbar__nome { font-size: 13.5px; font-weight: 600; }
.topbar__chevron { width: 15px; height: 15px; color: var(--text-muted); }
.topbar__menu {
  position: absolute; right: 0; top: 100%; margin-top: 6px; z-index: 40; min-width: 190px;
  background: var(--panel-bg); border: 1px solid var(--border);
  border-radius: var(--r-sm); box-shadow: var(--shadow-md); padding: 5px;
}
.topbar__menu[hidden] { display: none; }
.topbar__menu-item {
  display: flex; align-items: center; gap: 9px; width: 100%; text-align: left;
  border: none; background: transparent; color: var(--text); font: inherit; font-size: 13.5px;
  padding: 9px 10px; border-radius: 10px; cursor: pointer;
}
.topbar__menu-item:hover { background: var(--panel-bg-hover); }
.topbar__menu-item svg { width: 16px; height: 16px; color: var(--text-muted); }

/* ── Configurações ──────────────────────────────────────────────── */
.config { display: flex; flex-direction: column; gap: 20px; max-width: 640px; }
.config__header h1 { font-family: var(--font-display); font-size: 26px; margin: 0; }
.config__header p { color: var(--text-muted); margin: 4px 0 0; }
.config__card {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  background: var(--panel-bg); border: 1px solid var(--border);
  border-radius: var(--r-md); padding: 18px 20px; box-shadow: var(--shadow-sm);
}
.config__card-info { display: flex; flex-direction: column; gap: 3px; }
.config__card-info strong { font-size: 15px; }
.config__card-info span { color: var(--text-muted); font-size: 13px; }

/* ── Telas que ocupam a aba inteira ────────────────────────────────── */
/* Conversas precisa preencher a viewport e rolar SÓ por dentro (lista e
   mensagens). Antes a .inbox usava height: calc(100vh - 80px) — um número
   chutado que não batia com o cabeçalho real, então a página inteira passava a
   rolar e o compositor ficava cortado no rodapé. Aqui a altura é derivada, não
   adivinhada: cada nível repassa o espaço que recebeu.
   `min-height: 0` em cada nível é o que permite o filho encolher e rolar —
   sem isso o flex usa o tamanho do conteúdo e o estouro volta. */
body.modo-cheio { overflow: hidden; }
body.modo-cheio .app { height: 100vh; min-height: 0; }
body.modo-cheio .content {
  height: 100vh;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding-bottom: 24px;
}
/* No modo cheio a página não rola, então `sticky` não tem o que fazer — e era
   ela, junto das margens negativas, que fazia a topbar deixar de reservar o
   próprio espaço no flex, com o conteúdo passando por baixo. Como item normal
   do flex ela ocupa a altura dela e o resto recebe o que sobra. */
body.modo-cheio .topbar {
  position: static;
  flex: none;
  margin: -40px -40px 16px;
}
body.modo-cheio .view.is-active {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* Aviso de versão nova do painel (ver eventos.js). */
.aviso-versao {
  position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%);
  z-index: 2000;
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px;
  border-radius: 12px;
  background: var(--text); color: var(--sobre-cor);
  font-size: 13.5px;
  box-shadow: 0 12px 30px -8px rgba(0, 0, 0, 0.45);
}
.aviso-versao__btn {
  font: inherit; font-weight: 600;
  padding: 6px 12px; border-radius: 8px;
  border: none; cursor: pointer;
  background: var(--accent); color: var(--sobre-cor);
}
.aviso-versao__btn:hover { filter: brightness(1.08); }

/* ── Tela de entrada ───────────────────────────────────────────────── */
.entrada {
  position: fixed; inset: 0; z-index: 3000;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(246, 196, 0, 0.10), transparent 60%),
    var(--plano);
}
.entrada[hidden] { display: none; }

.entrada__caixa {
  width: 100%; max-width: 380px;
  padding: 28px;
  background: var(--panel-bg);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
}
.entrada__marca { display: flex; align-items: center; gap: 10px; margin-bottom: 22px; }
.entrada__logo {
  width: 34px; height: 34px; border-radius: 10px;
  display: grid; place-items: center;
  background: linear-gradient(140deg, var(--accent), var(--accent-strong));
  color: var(--sobre-cor);
}
.entrada__logo svg { width: 18px; height: 18px; }
.entrada__nome { font-family: var(--font-display); font-weight: 700; font-size: 16px; }

.entrada__titulo { font-family: var(--font-display); font-size: 24px; margin-bottom: 4px; }
.entrada__sub { color: var(--text-muted); font-size: 13.5px; margin-bottom: 20px; }

.entrada__form { display: flex; flex-direction: column; gap: 12px; }
.entrada__campo[hidden] { display: none; }
.entrada__botao { width: 100%; margin-top: 6px; }

.entrada__erro {
  padding: 9px 11px; border-radius: 8px;
  background: var(--perigo-soft);
  border: 1px solid var(--perigo-linha);
  color: var(--perigo);
  font-size: 13px;
}
.entrada__erro[hidden] { display: none; }

/* ── Subnavegação (Workspace: Funil / Fluxos) ──────────────────────── */
.subnav {
  display: flex; gap: 4px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--border);
}
.subnav[hidden] { display: none; }
.subnav__item {
  font: inherit; font-size: 13.5px; font-weight: 600;
  padding: 9px 14px;
  background: none; border: none;
  border-bottom: 2px solid transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: color .15s, border-color .15s;
}
.subnav__item:hover { color: var(--text); }
.subnav__item.is-ativo { color: var(--accent-texto); border-bottom-color: var(--accent-texto); }
.subnav__item:focus-visible { outline: 2px solid var(--accent-ring); outline-offset: -2px; }

/* ── Seletor de workspace na barra do topo ─────────────────────────── */
.topbar { justify-content: space-between; }
.topbar__ws-wrap { position: relative; display: flex; align-items: center; gap: 6px; }
.topbar__ws {
  display: flex; align-items: center; gap: 9px;
  padding: 5px 12px 5px 8px;
  font: inherit; font-size: 13.5px; font-weight: 600;
  background: var(--panel-bg); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--r-pill);
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.topbar__ws:hover { border-color: var(--border-strong); background: var(--panel-bg-hover); }
.topbar__ws:focus-visible { outline: 2px solid var(--accent-ring); outline-offset: 2px; }
.topbar__ws-marca {
  width: 24px;
  height: 24px;
  border: 1px solid rgba(246, 196, 0, .22);
  border-radius: 7px;
  display: grid;
  place-items: center;
  flex: none;
  background: #0d263b;
  color: var(--accent-texto);
}
.topbar__ws-marca svg {
  width: 14px;
  height: 14px;
}
.topbar__ws-nome { max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.topbar__menu--ws { left: 0; right: auto; min-width: 250px; }
.topbar__menu-titulo {
  padding: 8px 12px 4px;
  font-size: 11px; font-weight: 700; letter-spacing: .4px;
  text-transform: uppercase; color: var(--text-fraco);
}
.topbar__ws-item { flex-direction: column; align-items: flex-start; gap: 1px; }
.topbar__ws-item-nome { font-weight: 600; }
.topbar__ws-item-meta { font-size: 11.5px; color: var(--text-fraco); }
.topbar__menu-item.is-ativo { background: var(--accent-soft); color: var(--accent-texto); }
.topbar__menu-item--novo { border-top: 1px solid var(--border); margin-top: 4px; color: var(--text-muted); }
.topbar__menu-item--sair { border-top: 1px solid var(--border); margin-top: 4px; color: var(--perigo); }
.topbar__menu-item svg { width: 16px; height: 16px; flex: none; }

/* Identificação de quem está logado, no topo do menu do usuário. */
.topbar__menu-usuario {
  display: flex; flex-direction: column; gap: 1px;
  padding: 10px 12px; margin-bottom: 4px;
  border-bottom: 1px solid var(--border);
}
.topbar__menu-nome { font-weight: 700; font-size: 13.5px; }
.topbar__menu-email { font-size: 11.5px; color: var(--text-fraco); }

/* ── Subnavegação das telas agrupadas ───────────────────────────────────── */
.subnav { display: flex; align-items: center; gap: 20px; }
.subnav__abas { display: flex; align-items: center; gap: 4px; }

/* ── Lista de workspaces: renomear e apagar ────────────────────────────────
   Os ícones só aparecem no hover. No estado normal a lista serve para
   ESCOLHER, e dois botões em cada linha competiriam com essa leitura. */
.topbar__ws-linha { display: flex; align-items: stretch; gap: 2px; }
.topbar__ws-linha .topbar__ws-item { flex: 1; min-width: 0; }
.topbar__ws-acoes {
  display: flex; align-items: center; gap: 2px;
  padding-right: 6px; opacity: 0;
  transition: opacity .15s;
}
.topbar__ws-linha:hover .topbar__ws-acoes,
.topbar__ws-linha:focus-within .topbar__ws-acoes { opacity: 1; }
.topbar__ws-acao {
  display: grid; place-items: center;
  width: 28px; height: 28px; padding: 0;
  border: 0; border-radius: var(--r-sm);
  background: transparent; color: var(--text-muted);
  cursor: pointer; transition: background .15s, color .15s;
}
.topbar__ws-acao svg { width: 15px; height: 15px; }
.topbar__ws-acao:hover { background: var(--elevado); color: var(--text); }
.topbar__ws-acao--perigo:hover { background: var(--accent-soft); color: var(--accent-texto); }
/* Sempre visíveis no teclado: quem navega por Tab não tem hover. */
.topbar__ws-acao:focus-visible { opacity: 1; outline: 2px solid var(--accent); outline-offset: -2px; }

/* ── Painel de novo workspace ──────────────────────────────────────────── */
.ws-novo {
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--panel-bg);
  color: var(--text);
  padding: 24px;
  width: min(460px, calc(100vw - 32px));
  box-shadow: var(--shadow-lg);
  margin: auto;  /* o reset do projeto zera a margem que centraliza o dialog */
}
.ws-novo::backdrop { background: rgba(0, 0, 0, .66); }
.ws-novo__titulo { margin: 0 0 4px; font-size: 19px; font-weight: 700; }
.ws-novo__sub { margin: 0 0 18px; font-size: 13px; line-height: 1.6; color: var(--text-muted); }
.ws-novo__rotulo {
  display: block; margin: 14px 0 6px;
  font-size: 12px; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: var(--text-muted);
}
.ws-novo__campo {
  width: 100%; padding: 10px 12px;
  border-radius: var(--r-sm); border: 1px solid var(--border);
  background: var(--bg); color: var(--text); font: inherit; font-size: 14px;
}
.ws-novo__campo:focus { outline: none; border-color: var(--accent); }

.ws-novo__oque { margin-top: 16px; display: grid; gap: 10px; }
/* O atributo hidden PERDE para display:grid. Sem esta linha as caixas de
   clonagem apareciam no modo "do zero", oferecendo copiar de lugar nenhum. */
.ws-novo__oque[hidden] { display: none; }
.ws-novo__caixa {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 12px; border-radius: var(--r-md);
  border: 1px solid var(--border); background: var(--elevado);
  cursor: pointer;
}
.ws-novo__caixa:hover { border-color: var(--border-strong); }
.ws-novo__caixa input { margin-top: 2px; accent-color: var(--accent); cursor: pointer; }
.ws-novo__caixa strong { display: block; font-size: 14px; font-weight: 600; }
.ws-novo__caixa small { display: block; margin-top: 2px; font-size: 12px; color: var(--text-muted); line-height: 1.5; }

.ws-novo__acoes { display: flex; justify-content: flex-end; gap: 10px; margin-top: 22px; }
.ws-novo__btn {
  padding: 9px 16px; border-radius: var(--r-sm);
  border: 1px solid var(--border); background: var(--elevado);
  color: var(--text); font: inherit; font-weight: 600; font-size: 14px; cursor: pointer;
  transition: background .18s;
}
.ws-novo__btn:hover { background: var(--panel-bg-hover); }
.ws-novo__btn--ok { background: var(--accent); border-color: var(--accent); color: #fff; }
.ws-novo__btn--ok:hover { filter: brightness(1.1); }
.ws-novo__btn:disabled { opacity: .5; cursor: not-allowed; }
.ws-novo__erro { margin: 14px 0 0; font-size: 13px; color: var(--accent-texto); }

/* ── Botão hambúrguer (só mobile) ───────────────────────────────── */
.hamburger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex: none;
  border: none;
  background: transparent;
  color: var(--text-muted);
  border-radius: var(--r-sm);
  cursor: pointer;
  padding: 0;
}
.hamburger:hover { background: var(--panel-bg-hover); color: var(--text); }
.hamburger:focus-visible { outline: 2px solid var(--accent-ring); outline-offset: 2px; }
.hamburger svg { width: 20px; height: 20px; }

/* ── Backdrop da sidebar (só mobile) ────────────────────────────── */
.sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 199;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}
.sidebar-backdrop--visivel {
  opacity: 1;
  pointer-events: auto;
}

/* ── Layout responsivo ≤ 767px ──────────────────────────────────── */
@media (max-width: 767px) {
  /* Grade: coluna única — sidebar sai do fluxo normal */
  .app,
  .app--menu-colapsado { grid-template-columns: 1fr; }

  /* Sidebar: gaveta deslizante fixa à esquerda */
  .sidebar {
    position: fixed;
    left: 0;
    top: 0;
    height: 100%;
    width: 264px;
    z-index: 200;
    align-self: auto;
    transform: translateX(-100%);
    transition: transform 0.25s ease;
  }

  .sidebar.sidebar--aberta {
    transform: translateX(0);
    box-shadow: 8px 0 40px rgba(0, 0, 0, 0.6);
  }

  /* A classe de colapso (ícones-só) não faz sentido numa gaveta.
     Restaura o conteúdo textual e o layout normal da sidebar. */
  .app--menu-colapsado .sidebar {
    padding: 22px 16px;
    transform: translateX(-100%);
  }
  .app--menu-colapsado .sidebar.sidebar--aberta { transform: translateX(0); }
  .app--menu-colapsado .brand__name,
  .app--menu-colapsado .sidebar__label,
  .app--menu-colapsado .panel__title,
  .app--menu-colapsado .sidebar__toggle-texto { display: revert; }
  .app--menu-colapsado .sidebar__usuario { display: flex; }
  .app--menu-colapsado .sidebar__foot { display: flex; }
  .app--menu-colapsado .brand__logo { display: grid; }
  .app--menu-colapsado .sidebar__brand { justify-content: flex-start; padding: 4px 8px 6px; }
  .app--menu-colapsado .sidebar__toggle {
    width: 100%;
    margin: 0;
    padding: 8px 10px 8px 12px;
    justify-content: flex-start;
  }
  .app--menu-colapsado .panel { justify-content: flex-start; padding: 11px 12px; }
  .app--menu-colapsado .panel__icon { margin: 0; }

  /* Backdrop e hambúrguer */
  .sidebar-backdrop { display: block; }
  .hamburger { display: flex; }

  /* Topbar: perfil empurrado para a direita quando hambúrguer aparece */
  .topbar__perfil-wrap { margin-left: auto; }

  /* Conteúdo: padding reduzido em tela pequena */
  .content { padding: 16px; }
  .topbar {
    margin: -16px -16px 16px;
    padding: 0 16px;
  }

  /* Modo cheio (conversas): ajusta margem negativa proporcional */
  body.modo-cheio .topbar { margin: -16px -16px 0; }
}

/* ── Identidade W2G CHURCH ───────────────────────────────────────
   Derivada da linguagem visual do W2G Live: azul-marinho profundo,
   dourado para ações e marca, superfícies técnicas e texto luminoso. */
body {
  background:
    radial-gradient(900px 520px at 105% 45%, rgba(0, 126, 167, 0.10), transparent 70%),
    radial-gradient(700px 420px at -8% 28%, rgba(246, 196, 0, 0.055), transparent 72%),
    var(--bg);
}

.sidebar {
  background:
    linear-gradient(180deg, rgba(246, 196, 0, 0.035), transparent 22%),
    linear-gradient(180deg, var(--sidebar-bg), var(--sidebar-bg-2));
  box-shadow: 16px 0 50px rgba(3, 13, 22, 0.22);
}

.sidebar__brand {
  min-height: 50px;
  padding-top: 0;
  border-bottom: 1px solid var(--sidebar-line);
  padding-bottom: 16px;
}

.brand__logo,
.entrada__logo {
  position: relative;
  overflow: hidden;
  flex: none;
  border: 1px solid rgba(246, 196, 0, 0.20);
  background: #0d263b;
  box-shadow: 0 8px 24px -10px rgba(246, 196, 0, 0.55);
}
.brand__logo {
  width: 40px;
  height: 40px;
  border-radius: 11px;
}
.brand__logo img,
.entrada__logo img {
  position: absolute;
  top: 50%;
  left: 50%;
  max-width: none;
  object-fit: contain;
  transform: translate(-50%, -50%);
}
.brand__logo img { width: 40px; height: 40px; }

.brand__name {
  color: var(--accent);
  font-size: 16px;
  font-weight: 800;
  letter-spacing: .055em;
  white-space: nowrap;
}
.brand__name strong {
  color: var(--text);
  font-weight: 700;
  letter-spacing: .035em;
}

.panel {
  border: 1px solid transparent;
  border-radius: 9px;
}
.panel:hover {
  background: rgba(255, 255, 255, 0.035);
  border-color: rgba(156, 181, 199, 0.10);
}
.panel.is-active {
  color: var(--text);
  background: linear-gradient(90deg, rgba(246, 196, 0, 0.14), rgba(246, 196, 0, 0.035));
  border-color: rgba(246, 196, 0, 0.18);
}
.panel.is-active::before {
  left: -1px;
  width: 3px;
  height: 24px;
  background: var(--accent);
  box-shadow: 0 0 16px rgba(246, 196, 0, 0.38);
}
.panel.is-active .panel__icon { color: var(--accent-texto); }

.sidebar__foot-avatar,
.topbar__avatar {
  background: var(--accent);
  color: var(--sobre-cor);
  box-shadow: 0 0 0 3px rgba(246, 196, 0, 0.10);
}
.sidebar__foot-avatar.tem-foto,
.topbar__avatar.tem-foto {
  background-color: #0d263b;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.content::before {
  background-image: radial-gradient(circle, rgba(166, 193, 211, 0.11) 1px, transparent 1px);
  opacity: .45;
}

.topbar {
  background: rgba(8, 26, 42, 0.82);
  border-bottom-color: rgba(156, 181, 199, 0.14);
  backdrop-filter: blur(16px) saturate(1.15);
}
.topbar__perfil,
.topbar__ws {
  background: rgba(16, 40, 59, 0.88);
  border-color: rgba(156, 181, 199, 0.18);
}
.topbar__perfil:hover,
.topbar__ws:hover {
  border-color: rgba(246, 196, 0, 0.30);
  background: var(--panel-bg-hover);
}
.topbar__ws-marca {
  background: #0d263b;
  box-shadow: 0 0 0 3px rgba(246, 196, 0, 0.06);
}

.btn--primario,
.fmodal__salvar {
  background: linear-gradient(135deg, var(--accent), var(--accent-strong));
  color: var(--sobre-cor);
  border-color: rgba(255, 225, 94, 0.30);
  box-shadow: 0 8px 22px -10px rgba(246, 196, 0, 0.75);
}
.btn--primario:hover,
.fmodal__salvar:hover {
  filter: brightness(1.04);
  box-shadow: 0 10px 28px -10px rgba(246, 196, 0, 0.85);
}

.campo__input:focus,
input:focus,
textarea:focus,
select:focus {
  border-color: rgba(246, 196, 0, 0.62);
  box-shadow: 0 0 0 3px rgba(246, 196, 0, 0.10);
}

.entrada {
  background:
    radial-gradient(680px 460px at 50% 10%, rgba(0, 126, 167, 0.16), transparent 72%),
    radial-gradient(620px 380px at 18% 92%, rgba(246, 196, 0, 0.08), transparent 70%),
    #081a2a;
}
.entrada::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .18;
  background-image: radial-gradient(circle, rgba(208, 224, 234, .32) 1px, transparent 1px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(ellipse 62% 60% at 50% 50%, #000, transparent 78%);
  mask-image: radial-gradient(ellipse 62% 60% at 50% 50%, #000, transparent 78%);
}
.entrada__caixa {
  position: relative;
  max-width: 410px;
  padding: 34px;
  background: rgba(16, 40, 59, 0.88);
  border-color: rgba(156, 181, 199, 0.20);
  box-shadow: 0 32px 80px -28px rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(18px);
}
.entrada__marca {
  flex-direction: column;
  justify-content: center;
  margin-bottom: 26px;
}
.entrada__logo {
  width: 68px;
  height: 68px;
  border-radius: 17px;
}
.entrada__logo img { width: 68px; height: 68px; }
.entrada__nome {
  color: var(--accent);
  font-size: 17px;
  font-weight: 800;
  letter-spacing: .08em;
}
.entrada__nome strong { color: var(--text); }
.entrada__titulo {
  font-size: 28px;
  text-align: center;
}
.entrada__sub {
  text-align: center;
  color: var(--text-muted);
  margin-bottom: 24px;
}

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

/* Sistema de ícones coloridos para todos os canais da W2G Church. */
.sidebar .panel:not(.panel--sub) > .panel__icon {
  box-sizing: border-box;
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  padding: 5px;
  border: 1px solid color-mix(in srgb, var(--channel-color) 38%, transparent);
  border-radius: 9px;
  background: var(--channel-soft);
  color: var(--channel-color);
  opacity: 1;
  transition: transform .16s ease, border-color .16s ease, filter .16s ease, box-shadow .16s ease;
}
.sidebar .panel:not(.panel--sub):hover > .panel__icon {
  transform: translateY(-1px) scale(1.04);
  border-color: color-mix(in srgb, var(--channel-color) 64%, transparent);
  filter: brightness(1.14);
}
.sidebar .panel:not(.panel--sub).is-active > .panel__icon {
  color: var(--channel-color);
  border-color: color-mix(in srgb, var(--channel-color) 70%, transparent);
  box-shadow: 0 0 0 2px var(--channel-soft);
}
.sidebar .panel:not(.panel--sub)[data-panel="dashboard"] { --channel-color:#5aa9ff; --channel-soft:rgba(90,169,255,.13); }
.sidebar .panel:not(.panel--sub)[data-panel="relatorios"] { --channel-color:#b995ff; --channel-soft:rgba(185,149,255,.13); }
.sidebar .panel:not(.panel--sub)[data-panel="workspace"] { --channel-color:#36c5d8; --channel-soft:rgba(54,197,216,.13); }
.sidebar .panel:not(.panel--sub)[data-panel="contatos"] { --channel-color:#3ddc84; --channel-soft:rgba(61,220,132,.12); }
.sidebar .panel:not(.panel--sub)[data-panel="disparo"] { --channel-color:#ff8c52; --channel-soft:rgba(255,140,82,.13); }
.sidebar .panel:not(.panel--sub)[data-panel="conversas"] { --channel-color:#f5a524; --channel-soft:rgba(245,165,36,.13); }
.sidebar .panel:not(.panel--sub)[data-panel="extrair-leads"] { --channel-color:#ff6f91; --channel-soft:rgba(255,111,145,.13); }

/* source: css/disparo.css */
/* disparo.css — tela Disparo */

/* ═══════════════════════════════════════════════════════════════
   LEGADO — mantido enquanto o Painel B migra o HTML
   ═══════════════════════════════════════════════════════════════ */

/* ── Header ─────────────────────────────────────────────────── */
.disparo__header {
  margin-bottom: 24px;
}

.disparo__header h1 {
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text);
  margin: 0 0 4px;
}

.disparo__sub {
  font-size: 0.875rem;
  color: var(--text-muted);
  margin: 0;
}

/* ── Faixa de contas (wrapper legado convertido para flex strip) ─ */
/* O JS agora gera .conta-chip (desenhados para flex row), não .conta (cards). */
.contas-wrapper {
  display: flex;
  align-items: stretch;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
  margin-bottom: 16px;
  max-width: 100%;
  min-width: 0;
  scrollbar-width: none;
}
.contas-wrapper::-webkit-scrollbar { display: none; }

#contas {
  display: contents;
}

.contas__placeholder {
  grid-column: 1 / -1;
  margin: 0;
  padding: 20px 4px;
  color: var(--text-muted);
  font-size: 0.9rem;
}

.contas__placeholder--erro {
  color: var(--perigo);
}

/* ── Card de conta (legado) ──────────────────────────────────── */
.conta {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--panel-bg);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 16px;
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.16s ease, border-color 0.16s ease, transform 0.16s ease;
  position: relative;
}

.conta:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--border-strong);
  transform: translateY(-2px);
}

.conta--inativa { opacity: 0.55; }

.conta__avatar {
  width: 40px;
  height: 40px;
  min-width: 40px;
  border-radius: 12px;
  background: linear-gradient(140deg, var(--accent-soft), rgba(19,192,138,0.16));
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1rem;
  color: var(--accent-strong);
  text-transform: uppercase;
}
.conta__avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }

.conta__info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

.conta__nome {
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.conta__numero {
  font-size: 0.8125rem;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.conta__tipo {
  width: max-content;
  margin-top: 3px;
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 0.65rem;
  font-weight: 700;
}
.conta__tipo--api { color: var(--sucesso); background: rgba(15,122,77,0.12); }
.conta__tipo--web { color: var(--aviso); background: rgba(183,121,31,0.12); }

.conta__status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.75rem;
  font-weight: 500;
  padding: 3px 8px;
  border-radius: 999px;
  white-space: nowrap;
  flex-shrink: 0;
}
.conta__status::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}
.conta__status--conectado  { color: var(--sucesso); background: rgba(15,122,77,0.12); }
.conta__status--conectado::before { background: var(--sucesso); }
.conta__status--desconectado { color: var(--accent); background: rgba(246,196,0,0.1); }
.conta__status--desconectado::before { background: var(--accent); }
.conta__status--conectando { color: var(--aviso); background: rgba(183,121,31,0.12); }
.conta__status--conectando::before { background: var(--aviso); animation: pulsar-chip 1.4s ease-in-out infinite; }

.conta--add {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: transparent;
  border: 1px dashed var(--border);
  border-radius: var(--r-md);
  padding: 10px 16px;
  cursor: pointer;
  color: var(--text-muted);
  font-size: 0.8125rem;
  font-family: inherit;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
  min-height: 64px;
  min-width: 120px;
  flex-shrink: 0;
  white-space: nowrap;
}
.conta--add:hover {
  border-color: var(--accent);
  color: var(--accent-strong);
  background: var(--accent-soft);
}
.conta--add:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px var(--accent-ring);
}
.conta--add__icone {
  font-size: 1.75rem;
  font-weight: 300;
  line-height: 1;
}

/* ── Ações da conta (menu ⋮) ─────────────────────────────────── */
/* `fixed`, não `absolute`: a faixa `.contas-wrapper` é `overflow-x: auto` (l. 29)
   e recortaria um dropdown absoluto. `top`/`left` são escritos inline pelo JS a
   partir do rect do botão — não os declare aqui (ADR-P002). */
.conta__menu {
  position: fixed; z-index: 20; min-width: 150px;
  background: var(--panel-bg); border: 1px solid var(--border);
  border-radius: var(--r-sm); box-shadow: var(--shadow-md); padding: 4px; margin-top: 4px;
  display: flex; flex-direction: column;
}
.conta__menu[hidden] { display: none; }
.conta__menu-item {
  text-align: left; border: none; background: transparent; color: var(--text);
  font: inherit; font-size: 13.5px; padding: 8px 10px; border-radius: 6px; cursor: pointer;
}
.conta__menu-item:hover { background: var(--panel-bg-hover); }
.conta__menu-item:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
  box-shadow: 0 0 0 3px var(--accent-ring);
}
.conta__menu-item--perigo { color: var(--accent); }

/* ═══════════════════════════════════════════════════════════════
   MODAL (legado + novo)
   ═══════════════════════════════════════════════════════════════ */
.modal {
  margin: auto;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 26px;
  width: 430px;
  max-width: calc(100vw - 32px);
  box-shadow: var(--shadow-lg);
  background: var(--panel-bg);
  animation: modalIn 0.2s ease both;
}
@keyframes modalIn {
  from { opacity: 0; transform: translateY(8px) scale(0.98); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  @keyframes modalIn { from { opacity: 0; } to { opacity: 1; } }
}
.modal::backdrop {
  background: rgba(10, 16, 14, 0.45);
  backdrop-filter: blur(2px);
}

.modal--conta { width: 460px; }
.modal__cabecalho { display: flex; align-items: flex-start; gap: 13px; margin-bottom: 4px; }
.modal__cabecalho-texto { min-width: 0; flex: 1; }
.modal__cabecalho-icone {
  flex-shrink: 0; width: 42px; height: 42px; border-radius: 12px;
  display: grid; place-items: center;
}
.modal__cabecalho-icone svg { width: 22px; height: 22px; }
.modal__cabecalho-icone--api { background: var(--accent-soft); color: var(--accent-strong); }
.modal__cabecalho-icone--sms { background: rgba(216,173,27,0.12); color: #d8ad1b; }
.modal__sub { margin: 3px 0 0; color: var(--text-muted); font-size: 13px; line-height: 1.45; }
.modal__titulo { font-family: var(--font-display); font-size: 1.0625rem; font-weight: 700; color: var(--text); margin: 0 0 4px; }
.modal__intro { margin: -8px 0 2px; color: var(--text-muted); font-size: .875rem; }
.modal__ajuda { margin: -4px 0 0; color: var(--text-muted); font-size: 0.78rem; line-height: 1.45; }
.modal__nota {
  display: flex; align-items: flex-start; gap: 9px;
  margin: 2px 0 0; padding: 10px 12px;
  background: var(--panel-bg-hover); border-radius: var(--r-sm);
  color: var(--text-muted); font-size: 12px; line-height: 1.45;
}
.modal__nota svg { flex-shrink: 0; width: 16px; height: 16px; color: var(--accent-strong); margin-top: 1px; }
.modal__form { display: flex; flex-direction: column; gap: 16px; }
.modal__acoes { display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; }

.sms-ajuda__botao {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  padding: 6px 9px;
  background: transparent;
  color: var(--text-muted);
  font: 600 12px/1 var(--font-body);
  cursor: pointer;
}
.sms-ajuda__botao:hover,
.sms-ajuda__botao[aria-expanded="true"] {
  border-color: #d8ad1b;
  background: rgba(216, 173, 27, .09);
  color: #f0c62b;
}
.sms-ajuda__botao:focus-visible {
  outline: 2px solid #d8ad1b;
  outline-offset: 2px;
}
.sms-ajuda__botao svg { width: 15px; height: 15px; }
.sms-ajuda {
  margin: -2px 0 2px;
  padding: 14px 15px;
  border: 1px solid rgba(216, 173, 27, .26);
  border-radius: var(--r-sm);
  background: rgba(216, 173, 27, .07);
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.5;
}
.sms-ajuda[hidden] { display: none; }
.sms-ajuda__titulo {
  margin-bottom: 7px;
  color: var(--text);
  font-size: 13px;
  font-weight: 700;
}
.sms-ajuda ol { margin: 0; padding-left: 18px; }
.sms-ajuda li + li { margin-top: 5px; }
.sms-ajuda p { margin: 10px 0 0; }
.sms-ajuda a { color: #f0c62b; text-underline-offset: 2px; }

@media (max-width: 520px) {
  .modal { padding: 20px; }
  .modal__cabecalho { flex-wrap: wrap; }
  .sms-ajuda__botao { margin-left: 55px; margin-top: -8px; }
  .modal__acoes { flex-direction: column-reverse; }
  .modal__acoes .btn { width: 100%; }
}

/* ── Campos ──────────────────────────────────────────────────── */
.campo { display: flex; flex-direction: column; gap: 6px; }
.campo__label { font-size: 0.8125rem; font-weight: 500; color: var(--text); }
.campo__input {
  font-family: inherit; font-size: 0.9375rem; color: var(--text);
  background: var(--panel-bg); border: 1px solid var(--border-strong);
  border-radius: var(--r-sm); padding: 9px 12px; outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.campo__input::placeholder { color: var(--text-muted); }
.campo__input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-ring);
}
.campo__hint { display: block; margin-top: 4px; font-size: 11.5px; color: var(--text-muted); line-height: 1.4; }
.campo__senha { position: relative; display: flex; align-items: center; }
.campo__senha .campo__input { flex: 1; padding-right: 40px; }
.campo__olho {
  position: absolute; right: 6px; border: none; background: transparent;
  color: var(--text-muted); cursor: pointer; padding: 6px; border-radius: 6px; display: inline-flex;
}
.campo__olho:hover { color: var(--text); background: var(--panel-bg-hover); }
.campo__olho:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; box-shadow: 0 0 0 3px var(--accent-ring); }
.campo__olho svg { width: 17px; height: 17px; }
.campo__olho.is-on { color: var(--accent-strong); }

/* ── Tipo de conexão ─────────────────────────────────────────── */
.tipo-conexao {
  position: relative; display: grid; grid-template-columns: 44px 1fr auto; gap: 12px;
  align-items: center; width: 100%; padding: 15px; text-align: left; font: inherit;
  color: var(--text); background: var(--panel-bg); border: 1px solid var(--border);
  border-radius: var(--r-md); cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.12s ease, background 0.15s ease;
}
.tipo-conexao:hover { border-color: var(--accent); background: var(--panel-bg-hover); transform: translateY(-1px); }
.tipo-conexao:hover .tipo-conexao__icone { transform: scale(1.05); }
.tipo-conexao:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; box-shadow: 0 0 0 4px var(--accent-ring); }
.tipo-conexao__icone {
  display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px;
  transition: transform 0.15s ease;
}
.tipo-conexao__icone svg { width: 21px; height: 21px; }
.tipo-conexao--segura .tipo-conexao__icone { color: var(--accent-strong); background: var(--accent-soft); }
.tipo-conexao--risco .tipo-conexao__icone { color: var(--aviso); background: rgba(183,121,31,0.12); }
.tipo-conexao--sms .tipo-conexao__icone { color: #d8ad1b; background: rgba(216,173,27,0.12); }
.tipo-conexao--waha .tipo-conexao__icone { color: #6d5bd0; background: rgba(109,91,208,0.12); font-size: 0.68rem; font-weight: 800; }
.tipo-conexao__texto strong { display: block; font-size: 14.5px; }
.tipo-conexao__texto small { display: block; margin-top: 3px; color: var(--text-muted); font-size: 12px; line-height: 1.4; }
.tipo-conexao__selo {
  align-self: flex-start; font-size: .64rem; font-weight: 700; white-space: nowrap;
  padding: 3px 8px; border-radius: 999px; text-transform: uppercase; letter-spacing: .03em;
}
.tipo-conexao__selo--ok { color: var(--accent-strong); background: var(--accent-soft); }
.tipo-conexao__selo--risco { color: var(--aviso); background: rgba(183,121,31,0.12); }
.tipo-conexao__selo--erro { color: var(--accent); background: rgba(246,196,0,0.12); }

.campo-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.45;
  cursor: pointer;
}

.campo-check input {
  width: 17px;
  height: 17px;
  margin-top: 1px;
  accent-color: var(--accent);
  flex: 0 0 auto;
}
.tipo-conexao__selo--sms { color: #d8ad1b; background: rgba(216,173,27,0.12); }
.tipo-manual { background: none; border: none; padding: 2px; font: inherit; font-size: .8rem; color: var(--text-muted); text-decoration: underline; cursor: pointer; align-self: center; }
.tipo-manual:hover { color: var(--accent-strong); }

/* QR */
.alerta-risco { padding: 11px 12px; color: var(--aviso); background: rgba(183,121,31,0.1); border: 1px solid rgba(183,121,31,0.3); border-radius: var(--r-sm); font-size: .8rem; line-height: 1.45; }
.qr-area { display: flex; flex-direction: column; align-items: center; gap: 12px; }
/* O branco aqui NÃO é cor de tema e não deve virar token: o QR precisa de fundo
   branco para a câmera ler. Código escuro sobre fundo escuro não é reconhecido. */
.qr-frame { position: relative; width: 260px; height: 260px; display: grid; place-items: center; background: #ffffff; border-radius: 16px; padding: 14px; box-shadow: 0 10px 30px -10px rgba(0,0,0,0.6), 0 0 0 1px var(--border); }
.qr-imagem { width: 100%; height: 100%; border-radius: 6px; display: block; }
.qr-carregando { display: flex; flex-direction: column; align-items: center; gap: 12px; color: var(--text-muted); font-size: 13px; }
.qr-spinner { width: 34px; height: 34px; border-radius: 50%; border: 3px solid rgba(246,196,0,0.2); border-top-color: var(--accent); animation: qrspin 0.8s linear infinite; }
@keyframes qrspin { to { transform: rotate(360deg); } }
.qr-status { display: flex; align-items: center; gap: 8px; color: var(--text-muted); font-size: 13px; }
.qr-pulse { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); animation: qrpulse 1.6s ease-out infinite; }
@keyframes qrpulse {
  0%   { box-shadow: 0 0 0 0 rgba(246,196,0,0.4); }
  70%  { box-shadow: 0 0 0 9px rgba(246,196,0,0); }
  100% { box-shadow: 0 0 0 0 rgba(246,196,0,0); }
}
.qr-ok { display: flex; flex-direction: column; align-items: center; gap: 8px; color: var(--accent-strong); font-weight: 700; }
.qr-ok[hidden] { display: none; }
.qr-ok svg { width: 46px; height: 46px; color: var(--accent); }
.qr-passos { margin: 0; padding-left: 22px; color: var(--text-muted); font-size: .8rem; line-height: 1.6; }

/* Estados QR são mutuamente exclusivos: display:flex não pode vencer [hidden]. */
.qr-carregando[hidden], .qr-status[hidden], .qr-imagem[hidden] { display: none !important; }


/* ═══════════════════════════════════════════════════════════════
   NOVO — contrato Disparo empresarial
   ═══════════════════════════════════════════════════════════════ */

/* ── Faixa de contas compacta ────────────────────────────────── */
.disparo__contas {
  display: flex;
  align-items: center;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
  margin-bottom: 16px;
  scrollbar-width: none;
  max-width: 100%;
  min-width: 0;
}
.disparo__contas::-webkit-scrollbar { display: none; }

/* Cartão de conta: retângulo 2 linhas — nome/ponto + número/tipo. */
.conta-chip {
  display: grid;
  grid-template-columns: 40px 1fr auto;
  grid-template-rows: auto auto;
  column-gap: 10px;
  row-gap: 3px;
  align-items: center;
  padding: 10px 14px;
  min-height: 64px;
  min-width: 180px;
  flex-shrink: 0;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--panel-bg);
  color: var(--text);
  cursor: default;
  transition: box-shadow 0.14s ease;
}
.conta-chip:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px var(--accent-ring);
}

.conta-chip__avatar {
  grid-column: 1;
  grid-row: 1 / 3;
  align-self: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: var(--accent-soft);
  color: var(--accent-strong);
  font-size: 0.875rem;
  font-weight: 700;
  display: grid;
  place-items: center;
  text-transform: uppercase;
}

.conta-chip__nome {
  grid-column: 2;
  grid-row: 1;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.conta-chip__numero {
  grid-column: 2;
  grid-row: 2;
  font-size: 0.75rem;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.conta-chip__tipo {
  grid-column: 3;
  grid-row: 2;
  align-self: start;
  font-size: 0.6rem;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  white-space: nowrap;
}
.conta-chip__tipo--api { color: var(--sucesso); background: rgba(15,122,77,0.12); }
.conta-chip__tipo--web { color: var(--aviso); background: rgba(183,121,31,0.12); }
.conta-chip__tipo--sms { color: #d8ad1b; background: rgba(216,173,27,0.12); }
.conta-chip__tipo--waha { color: #6d5bd0; background: rgba(109,91,208,0.12); }

/* Ponto de saúde: cor informa estado, borda permanece neutra. */
.conta-chip__saude {
  grid-column: 3;
  grid-row: 1;
  align-self: center;
  justify-self: end;
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.conta-chip.is-conectado  .conta-chip__saude { background: var(--sucesso); }
.conta-chip.is-conectando .conta-chip__saude { background: var(--aviso); animation: pulsar-chip 1.4s ease-in-out infinite; }
.conta-chip.is-erro       .conta-chip__saude { background: var(--accent); }

@keyframes pulsar-chip {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.35; }
}

/* Botão kebab do chip de conta — ocupa grid-col3/row1 via auto-placement. */
.conta-chip__menu-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  justify-self: end;
  width: 26px;
  height: 26px;
  border: none;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--text-muted);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  transition: background 0.12s ease, opacity 0.14s ease;
}
.conta-chip:hover .conta-chip__menu-btn,
.conta-chip:focus-within .conta-chip__menu-btn { opacity: 1; }
.conta-chip__menu-btn:hover { background: var(--panel-bg-hover); color: var(--text); }
.conta-chip__menu-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  opacity: 1;
}

/* ── Faixa de KPI ────────────────────────────────────────────── */
.disparo__resumo {
  display: flex;
  gap: 0;
  background: var(--panel-bg);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
  margin-bottom: 16px;
  max-width: 100%;
  min-width: 0;
}

.resumo__item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  padding: 10px 14px;
  border-right: 1px solid var(--border);
}
.resumo__item:last-child { border-right: none; }

.resumo__valor {
  font-family: var(--font-display);
  font-size: 1.625rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  color: var(--text);
}

.resumo__rotulo {
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  white-space: nowrap;
}

/* ── Toolbar ─────────────────────────────────────────────────── */
.disparo__toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 12px;
  min-width: 0;
}

/* ── Busca da toolbar ─────────────────────────────────────────── */
/* Wrapper (quando JS futuramente embrulhar o input num div) */
.toolbar__busca {
  position: relative;
  flex: 1;
  min-width: 180px;
  max-width: 300px;
}
.toolbar__busca input {
  width: 100%;
  padding: 7px 10px 7px 32px;
  font: inherit;
  font-size: 0.8125rem;
  color: var(--text);
  background: var(--panel-bg);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  outline: none;
  transition: border-color 0.14s ease, box-shadow 0.14s ease;
}
.toolbar__busca input::placeholder { color: var(--text-muted); }
.toolbar__busca input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-ring);
}
.toolbar__busca:not(input)::before {
  content: "";
  position: absolute;
  left: 9px;
  top: 50%;
  transform: translateY(-50%);
  width: 14px;
  height: 14px;
  background: var(--text-muted);
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='currentColor'%3E%3Cpath fill-rule='evenodd' d='M9 3.5a5.5 5.5 0 1 0 0 11 5.5 5.5 0 0 0 0-11ZM2 9a7 7 0 1 1 12.452 4.391l3.328 3.329a.75.75 0 1 1-1.06 1.06l-3.329-3.328A7 7 0 0 1 2 9Z' clip-rule='evenodd'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* Quando o JS coloca a classe diretamente no <input> (estado atual) */
input.toolbar__busca {
  padding: 7px 10px;
  font: inherit;
  font-size: 0.8125rem;
  color: var(--text);
  background: var(--panel-bg);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  outline: none;
  transition: border-color 0.14s ease, box-shadow 0.14s ease;
  box-sizing: border-box;
}
input.toolbar__busca::placeholder { color: var(--text-muted); }
input.toolbar__busca:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-ring);
}

.toolbar__filtros {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.toolbar__periodo {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  padding-left: 12px;
  border-left: 1px solid var(--border);
  margin-left: 4px;
}
.toolbar__periodo > span:first-child {
  font-size: 0.75rem;
  color: var(--text-muted);
  white-space: nowrap;
}

.toolbar__exportar {
  flex-shrink: 0;
  margin-left: auto;
}

.filtro-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 10px;
  font: inherit;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--text-muted);
  background: var(--panel-bg);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.13s ease, border-color 0.13s ease, color 0.13s ease;
}
.filtro-chip:hover {
  border-color: var(--border-strong);
  color: var(--text);
  background: var(--panel-bg-hover);
}
.filtro-chip.is-ativo {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent-strong);
}
.filtro-chip:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px var(--accent-ring);
}

.toolbar__ordem {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 6px;
}
.toolbar__ordem select {
  font: inherit;
  font-size: 0.78rem;
  color: var(--text);
  background: var(--panel-bg);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 5px 8px;
  outline: none;
  cursor: pointer;
  transition: border-color 0.14s ease;
}
.toolbar__ordem select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-ring);
}

.toolbar__acoes {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* ── Paginação ───────────────────────────────────────────────── */
.disparo__paginacao {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 0 4px;
  font-size: 0.8125rem;
  color: var(--text-muted);
  min-width: 0;
  flex-wrap: wrap;
}

/* "Mostrando X–Y de Z" — texto informativo à esquerda da paginação. */
.paginacao-mostrando {
  color: var(--text-muted);
  font-size: 0.78rem;
  white-space: nowrap;
}

.disparo__paginacao-controles {
  display: flex;
  align-items: center;
  gap: 4px;
}

.paginacao-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  padding: 0 6px;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--text);
  background: var(--panel-bg);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease;
}
.paginacao-btn:hover:not(:disabled) {
  background: var(--panel-bg-hover);
  border-color: var(--border-strong);
}
.paginacao-btn.is-ativo {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--sobre-cor);
}
.paginacao-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.paginacao-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px var(--accent-ring);
}

.paginacao-itens-por-pagina {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  color: var(--text-muted);
}
.paginacao-itens-por-pagina select {
  font: inherit;
  font-size: 0.78rem;
  color: var(--text);
  background: var(--panel-bg);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 4px 6px;
  cursor: pointer;
  outline: none;
  transition: border-color 0.14s ease;
}
.paginacao-itens-por-pagina select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-ring);
}

/* ── Drawer de detalhe ───────────────────────────────────────── */
/* clip-path em vez de translateX(100%): o elemento fica em right:0
   mas clipado a zero — não empurra o scrollWidth do documento. */
.campanha-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 420px;
  max-width: 100vw;
  background: var(--panel-bg);
  border-left: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
  z-index: 200;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  clip-path: inset(0 0 0 100%);
  transition: clip-path 0.28s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
}
.campanha-drawer.is-aberto {
  clip-path: inset(0);
  pointer-events: auto;
}

@media (prefers-reduced-motion: reduce) {
  .campanha-drawer { transition: none; }
}

/* Seções internas do drawer (criadas pelo JS sem .campanha-drawer__corpo) */
.campanha-drawer__secao {
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.campanha-drawer__secao:last-child {
  border-bottom: none;
  flex: 1;
  overflow-y: auto;
}
/* Primeira seção do drawer: identifica a conta da campanha. Usada sempre em
   conjunto com .campanha-drawer__secao, só reforça a hierarquia visual. */
.campanha-drawer__conta {
  background: var(--panel-bg-hover);
}
.campanha-drawer__conta p {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--text);
}
.campanha-drawer__secao h4 {
  font-size: 0.8125rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  margin: 0 0 10px;
}

.campanha-drawer__cabecalho {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.campanha-drawer__titulo {
  font-family: var(--font-display);
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.campanha-drawer__fechar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  border-radius: var(--r-sm);
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.12s ease, color 0.12s ease;
}
.campanha-drawer__fechar:hover { background: var(--panel-bg-hover); color: var(--text); }
.campanha-drawer__fechar:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px var(--accent-ring);
}

.campanha-drawer__corpo {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.campanha-drawer__metricas {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.drawer-metrica {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px;
  background: var(--bg);
  border-radius: var(--r-sm);
}
.drawer-metrica__valor {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}
.drawer-metrica__rotulo {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}

.campanha-drawer__erros h3 {
  font-size: 0.8125rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  margin: 0 0 10px;
}

.drawer-erro {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  background: rgba(246,196,0,0.05);
  border: 1px solid rgba(246,196,0,0.15);
  border-radius: var(--r-sm);
  margin-bottom: 8px;
}
.drawer-erro__codigo {
  font-size: 0.7rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--accent);
  flex-shrink: 0;
  padding: 2px 6px;
  background: rgba(246,196,0,0.1);
  border-radius: var(--r-sm);
  margin-top: 1px;
}
.drawer-erro__info { flex: 1; min-width: 0; }
.drawer-erro__rotulo { font-size: 0.8125rem; font-weight: 600; color: var(--text); }
.drawer-erro__total { font-size: 0.75rem; color: var(--accent); font-weight: 600; }
.drawer-erro__acao { font-size: 0.75rem; color: var(--text-muted); margin-top: 2px; }

/* ── Estados (carregando / vazio / erro) ─────────────────────── */
.disparo__estado {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 48px 24px;
  text-align: center;
}
.disparo__estado.is-carregando,
.disparo__estado.is-vazio,
.disparo__estado.is-erro {
  display: flex;
}

.disparo__estado-icone {
  font-size: 2rem;
  line-height: 1;
  color: var(--text-muted);
  opacity: 0.5;
}
.disparo__estado.is-erro .disparo__estado-icone { color: var(--accent); opacity: 0.7; }

.disparo__estado-texto {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--text);
}
.disparo__estado-sub {
  font-size: 0.8125rem;
  color: var(--text-muted);
  max-width: 320px;
}

/* ── Skeleton ────────────────────────────────────────────────── */
.skeleton {
  background: var(--border);
  border-radius: var(--r-sm);
  position: relative;
  overflow: hidden;
}
.skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255,255,255,0.18) 50%,
    transparent 100%);
  background-size: 200% 100%;
  animation: shimmer 1.4s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .skeleton::after { animation: none; }
}
@keyframes shimmer {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}

.skeleton-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}
.skeleton-row:last-child { border-bottom: none; }
.skeleton--nome  { width: 40%; height: 14px; }
.skeleton--num   { width: 10%; height: 14px; }
.skeleton--bar   { width: 15%; height: 8px; border-radius: var(--r-pill); }
.skeleton--chip  { width: 60px; height: 20px; border-radius: var(--r-pill); }

/* ── Overlay de fundo ao abrir drawer em mobile ──────────────── */
.disparo__overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.35);
  z-index: 199;
}
.disparo__overlay.is-visivel { display: block; }

/* source: css/fluxo.css */
/* ── Tela Fluxo: construtor visual ──────────────────────────────── */
.fluxo {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 80px); /* 80px = padding vertical do .content */
  gap: 12px;
}

/* ── Barra superior ─────────────────────────────────────────────── */
.fluxo__topo {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.fluxo__nome {
  font-size: 18px;
  font-weight: 600;
  color: var(--text);
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 6px 10px;
  min-width: 200px;
  font-family: inherit;
}
.fluxo__nome:hover { border-color: var(--border); }
.fluxo__nome:focus { outline: none; border-color: var(--accent); }

.fluxo__conta {
  min-width: 230px;
  max-width: 340px;
  padding: 7px 10px;
  color: var(--text);
  background: var(--panel-bg);
  border: 1px solid var(--border);
  border-radius: 9px;
  font: inherit;
}
.fluxo__conta:focus { outline: none; border-color: var(--accent); }

.fluxo__canal-badge,
.fluxo-card__tag--canal {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 5px 9px;
  border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--border));
  border-radius: 999px;
  color: var(--accent);
  background: var(--accent-soft);
  font-size: 11px;
  font-weight: 700;
}
.fluxo__canal-badge[data-canal="sms"],
.fluxo-card__tag--canal[data-canal="sms"] { color: #a78bfa; border-color: rgba(167,139,250,.35); background: rgba(167,139,250,.1); }
.fluxo__canal-badge[data-canal="whatsapp_normal"],
.fluxo-card__tag--canal[data-canal="whatsapp_normal"] { color: #25d366; border-color: rgba(37,211,102,.3); background: rgba(37,211,102,.09); }
.fluxo__canal-badge[data-canal="multicanal"],
.fluxo-card__tag--canal[data-canal="multicanal"] { color: #60a5fa; border-color: rgba(96,165,250,.3); background: rgba(96,165,250,.09); }

.fluxo-canais { display: grid; gap: 10px; }
.fluxo-canal-opcao {
  display: grid;
  grid-template-columns: 42px 1fr auto;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 14px;
  color: var(--text);
  text-align: left;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--panel-bg);
  cursor: pointer;
  transition: border-color .15s ease, transform .15s ease, background .15s ease;
}
.fluxo-canal-opcao:hover { border-color: var(--accent); background: var(--accent-soft); transform: translateY(-1px); }
.fluxo-canal-opcao__icone {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  color: var(--accent);
  background: var(--accent-soft);
  font-size: 20px;
}
.fluxo-canal-opcao strong,
.fluxo-canal-opcao small { display: block; }
.fluxo-canal-opcao small { margin-top: 3px; color: var(--text-muted); line-height: 1.35; }
.fluxo-canal-opcao__seta { color: var(--text-muted); font-size: 24px; }

.fluxo__canal-badge,
.fluxo-card__tag--canal {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 5px 9px;
  border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--border));
  border-radius: 999px;
  color: var(--accent);
  background: var(--accent-soft);
  font-size: 11px;
  font-weight: 700;
}
.fluxo__canal-badge[data-canal="sms"],
.fluxo-card__tag--canal[data-canal="sms"] { color: #a78bfa; border-color: rgba(167,139,250,.35); background: rgba(167,139,250,.1); }
.fluxo__canal-badge[data-canal="whatsapp_normal"],
.fluxo-card__tag--canal[data-canal="whatsapp_normal"] { color: #25d366; border-color: rgba(37,211,102,.3); background: rgba(37,211,102,.09); }
.fluxo__canal-badge[data-canal="multicanal"],
.fluxo-card__tag--canal[data-canal="multicanal"] { color: #60a5fa; border-color: rgba(96,165,250,.3); background: rgba(96,165,250,.09); }

.fluxo-canais { display: grid; gap: 10px; }
.fluxo-canal-opcao {
  display: grid;
  grid-template-columns: 42px 1fr auto;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 14px;
  color: var(--text);
  text-align: left;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--panel-bg);
  cursor: pointer;
  transition: border-color .15s ease, transform .15s ease, background .15s ease;
}
.fluxo-canal-opcao:hover { border-color: var(--accent); background: var(--accent-soft); transform: translateY(-1px); }
.fluxo-canal-opcao__icone {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  color: var(--accent);
  background: var(--accent-soft);
  font-size: 20px;
}
.fluxo-canal-opcao strong,
.fluxo-canal-opcao small { display: block; }
.fluxo-canal-opcao small { margin-top: 3px; color: var(--text-muted); line-height: 1.35; }
.fluxo-canal-opcao__seta { color: var(--text-muted); font-size: 24px; }

.fluxo__gatilho {
  display: flex;
  align-items: center;
  gap: 8px;
}
.fluxo__gatilho-label {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
}

.fluxo__select,
.fluxo__gatilho-valor {
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 500;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background-color: var(--panel-bg);
  color: var(--text);
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}
/* Select limpo: sem a seta nativa, com um chevron discreto e área pro texto respirar */
.fluxo__select {
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  padding-right: 34px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238a978f' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 11px center;
  background-size: 15px;
}
.fluxo__select:hover,
.fluxo__gatilho-valor:hover { border-color: var(--border-strong); background-color: var(--panel-bg-hover); }
.fluxo__select:focus,
.fluxo__gatilho-valor:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.fluxo__gatilho-valor { width: 150px; }

.fluxo__topo-dir {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ── Corpo: paleta + canvas ─────────────────────────────────────── */
.fluxo__corpo {
  display: flex;
  gap: 12px;
  flex: 1;
  min-height: 0;
}

.fluxo__paleta {
  width: 190px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  background: var(--panel-bg);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
  overflow-y: auto;
}
.fluxo__paleta-titulo {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  margin-bottom: 2px;
}
.fluxo__no-btn {
  text-align: left;
  font: inherit;
  font-size: 14px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--panel-bg);
  color: var(--text);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.12s ease;
}
.fluxo__no-btn:hover {
  border-color: var(--accent);
  background: var(--accent-soft);
  transform: translateX(2px);
}
.fluxo__dica {
  margin-top: 8px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-muted);
}

/* ── Canvas ─────────────────────────────────────────────────────── */
.fluxo__canvas {
  flex: 1;
  position: relative;
  overflow: hidden;
  cursor: grab;
  border: 1px solid var(--border);
  border-radius: 10px;
  background-color: var(--bg);
  background-image: radial-gradient(circle, rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size: 22px 22px;
}

.fluxo__mundo {
  position: absolute;
  top: 0;
  left: 0;
  /* Tamanho inicial, não limite. O JS aumenta a superfície conforme os
     blocos avançam e o overflow mantém coordenadas negativas visíveis. */
  width: 2600px;
  height: 1700px;
  overflow: visible;
  transform-origin: 0 0;
  will-change: transform;
}
.fluxo__canvas--pan { cursor: grabbing; }
.fluxo__canvas--pan .fluxo__no { pointer-events: none; }

.fluxo__conexoes {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none; /* paths reativam por conta própria */
  overflow: visible;
}
.fluxo__conexao {
  fill: none;
  stroke: var(--conector);
  stroke-width: 2.5;
  stroke-linecap: round;
  pointer-events: stroke;
  cursor: pointer;
  opacity: .72;
  transition: stroke .18s ease, stroke-width .18s ease, opacity .18s ease;
}
.fluxo__conexao:hover { stroke: var(--perigo); stroke-width: 3; }
.fluxo__conexao-fluxo { fill:none; stroke:var(--accent); stroke-width:3.2; stroke-linecap:round; stroke-dasharray:4 12; pointer-events:none; animation:fluxoFormigas .72s linear infinite; animation-delay:var(--fluxo-atraso,0s); }
.fluxo__particula { fill:var(--accent); stroke:var(--panel-bg); stroke-width:1.4; pointer-events:none; }
.fluxo__conexao--temp { stroke: var(--accent); stroke-dasharray: 5 4; animation:fluxoFormigas .7s linear infinite; }
@keyframes fluxoFormigas { from { stroke-dashoffset:0; } to { stroke-dashoffset:-16; } }

/* ── Nó ─────────────────────────────────────────────────────────── */
.fluxo__no {
  position: absolute;
  width: 210px;
  background: var(--panel-bg);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-md);
  user-select: none;
}
.fluxo__no--selecionado {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-ring);
}

.fluxo__no-cabecalho {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  border-radius: 10px 10px 0 0;
  cursor: grab;
  font-size: 13px;
  font-weight: 600;
}
.fluxo__no-cabecalho:active { cursor: grabbing; }
.fluxo__no-titulo { flex: 1; }
.fluxo__no-x {
  border: none;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  padding: 0 2px;
}
.fluxo__no-x:hover { color: var(--perigo); }

.fluxo__no-corpo {
  padding: 10px;
  font-size: 13px;
}
.fluxo__no-corpo textarea,
.fluxo__no-corpo input {
  width: 100%;
  font: inherit;
  font-size: 13px;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px 8px;
  resize: vertical;
  color: var(--text);
}
.fluxo__no-corpo textarea:focus,
.fluxo__no-corpo input:focus { outline: none; border-color: var(--accent); }
.fluxo__no-vazio { color: var(--text-muted); }

/* Cores por tipo (faixa no cabeçalho) */

/* ── Portas ─────────────────────────────────────────────────────── */
.fluxo__porta {
  position: absolute;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--panel-bg);
  border: 2px solid var(--conector);
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
}
.fluxo__porta--entrada { top: -8px; }
.fluxo__porta--saida {
  bottom: -8px;
  cursor: crosshair;
  border-color: var(--accent);
}
.fluxo__porta--saida:hover { background: var(--accent); }
.fluxo__porta--alvo { background: var(--sucesso); border-color: var(--sucesso); }

/* Saídas rotuladas da condição ficam empilhadas no corpo */
.fluxo__saidas { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.fluxo__saida-linha {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
}
.fluxo__saida-linha input { flex: 1; }
.fluxo__saida-linha .fluxo__porta--saida {
  position: absolute;
  right: -8px;
  bottom: auto;
  top: 50%;
  left: auto;
  transform: translateY(-50%);
}
.fluxo__saida-add {
  font: inherit;
  font-size: 12px;
  border: 1px dashed var(--border);
  background: transparent;
  border-radius: 6px;
  padding: 5px;
  cursor: pointer;
  color: var(--text-muted);
}
.fluxo__saida-add:hover { border-color: var(--accent); color: var(--accent); }

/* ── Polimento V2: bordas coloridas por tipo + categorias da paleta ── */
.fluxo__no { border-left-width: 4px; }
/* O bloco inicial carrega mais controles que os demais (descrição + toggle +
   botão), então é mais largo — como na referência de design. */
.fluxo__no--inicio      { border-left-color: var(--sucesso); width: 250px; }
.fluxo__no--mensagem    { border-left-color: var(--info); }
.fluxo__no--espera      { border-left-color: var(--aviso); }
.fluxo__no--condicao    { border-left-color: var(--no-condicao); }
.fluxo__no--atraso      { border-left-color: var(--text-muted); }
.fluxo__no--tag         { border-left-color: var(--no-tag); }
.fluxo__no--fim         { border-left-color: var(--perigo); }
.fluxo__no--mover_funil { border-left-color: var(--no-mover-funil); }
.fluxo__no--remover_tag { border-left-color: var(--sucesso); }
.fluxo__no--humano      { border-left-color: var(--info); }
.fluxo__no--midia       { border-left-color: var(--no-midia); }
.fluxo__no--template    { border-left-color: var(--no-template); }
.fluxo__no--http        { border-left-color: var(--no-http); }

/* Rótulos de categoria na paleta */
.fluxo__paleta-cat {
  display: block;
  margin: 12px 0 4px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.fluxo__paleta-cat:first-of-type { margin-top: 6px; }

/* Conexões um tico mais visíveis */
.fluxo__conexao { stroke: var(--border-strong); stroke-width: 2.5; }

/* Botões / Lista (cabeçalho + borda) */
.fluxo__no--botoes { border-left-color: var(--no-botoes); }
.fluxo__no--lista  { border-left-color: var(--no-lista); }
.fluxo__no--botoes .fluxo__no-corpo textarea,
.fluxo__no--lista .fluxo__no-corpo textarea { min-height: 42px; }

/* Atribuir setor (rose) */
.fluxo__no--atribuir { border-left-color: var(--no-atribuir); }

/* Workspace: coluna de fluxos salvos (esquerda do canvas) */
.fluxo__workspace {
  width: 190px; flex-shrink: 0;
  display: flex; flex-direction: column; gap: 8px;
  padding: 12px; background: var(--panel-bg);
  border: 1px solid var(--border); border-radius: var(--r-md);
  box-shadow: var(--shadow-sm); overflow-y: auto;
}
.fluxo__workspace-lista { display: flex; flex-direction: column; gap: 4px; }
.fluxo__workspace-item {
  display: flex; align-items: center; gap: 4px;
  border-radius: var(--r-sm); border: 1px solid transparent;
}
.fluxo__workspace-item:hover { background: var(--panel-bg-hover); }
.fluxo__workspace-item.is-ativo { border-color: var(--accent); background: var(--accent-soft); }
.fluxo__workspace-nome {
  flex: 1; text-align: left; border: none; background: transparent; color: var(--text);
  font: inherit; font-size: 13px; padding: 8px 8px; cursor: pointer;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fluxo__workspace-del {
  border: none; background: transparent; color: var(--text-muted);
  cursor: pointer; font-size: 16px; line-height: 1; padding: 0 6px; border-radius: 5px;
}
.fluxo__workspace-del:hover { color: var(--perigo); }
.fluxo__workspace-vazio { color: var(--text-muted); font-size: 12.5px; padding: 4px; }

/* ── Galeria de fluxos (tela inicial da aba Fluxo) ──────────────── */
.fluxo-gallery { display: flex; flex-direction: column; gap: 20px; }
.fluxo-gallery[hidden] { display: none; }
.fluxo-gallery__topo { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.fluxo-gallery__topo h1 { font-family: var(--font-display); font-size: 26px; margin: 0; }
.fluxo-gallery__sub { color: var(--text-muted); margin: 4px 0 0; }
.fluxo-gallery__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 16px; }
.fluxo-gallery__vazio { color: var(--text-muted); grid-column: 1 / -1; }
.fluxo__builder[hidden], .fluxo[hidden] { display: none; }

.fluxo-card {
  display: flex; flex-direction: column; gap: 7px;
  background: var(--panel-bg); border: 1px solid var(--border);
  border-radius: var(--r-md); padding: 18px; box-shadow: var(--shadow-sm);
  transition: border-color .15s ease, transform .12s ease, box-shadow .15s ease;
}
.fluxo-card:hover { border-color: var(--border-strong); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.fluxo-card__icone {
  width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center;
  background: var(--accent-soft); font-size: 20px; margin-bottom: 4px;
}
.fluxo-card__nome { font-size: 15.5px; margin: 0; }
.fluxo-card__desc { color: var(--text-muted); font-size: 13px; margin: 0; }
.fluxo-card__tag {
  align-self: flex-start; font-size: 11.5px; color: var(--text-muted);
  background: var(--panel-bg-hover); border-radius: 6px; padding: 2px 8px;
}
.fluxo-card__acoes {
  display: flex; gap: 8px; justify-content: flex-end;
  margin-top: 8px; padding-top: 12px; border-top: 1px solid var(--border);
}
.fluxo-card__excluir:hover { color: var(--perigo); border-color: var(--perigo); }
.fluxo__voltar { margin-right: 8px; }

/* ── Nó Início — card e cabeçalho ───────────────────────────────── */

.fluxo__no--inicio {
  border-radius: 16px;
}

/* Cabeçalho: fundo vermelho suave, texto vermelho, raio superior alinhado */
.fluxo__no--inicio .fluxo__no-cabecalho {
  background: var(--accent-soft);
  border-bottom-color: rgba(246, 196, 0, 0.25);
  border-radius: 16px 16px 0 0;
  color: var(--accent);
}

/*
  Ícone ▶ como círculo verde sólido com play branco.
  Técnica: zerar o font-size oculta o textContent original; ::before
  renderiza o círculo e ::after reexibe o título com a cor certa.
*/
.fluxo__no--inicio .fluxo__no-titulo {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0;
}
.fluxo__no--inicio .fluxo__no-titulo::before {
  content: '▶';
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--sobre-cor);
  font-size: 9px;
  flex-shrink: 0;
}
.fluxo__no--inicio .fluxo__no-titulo::after {
  content: 'Início / Gatilho';
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
}

/* ── Corpo do bloco início ───────────────────────────────────────── */

.fluxo__inicio {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Caixa descritiva cinza */
.fluxo__inicio-desc {
  background: var(--panel-bg-hover);
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 12.5px;
  color: var(--text-muted);
  line-height: 1.5;
}

/* Faixa do toggle webhook */
.fluxo__inicio-linha {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--accent-soft);
  border-radius: 10px;
  padding: 9px 12px;
  cursor: pointer;
  user-select: none;
}

/* Switch pill — esconde o checkbox nativo, estiliza via ::after */
/* Precisa casar a especificidade de `.fluxo__no-corpo input` (linha ~219),
   que impõe width:100% + padding e esmagaria o switch. */
.fluxo__no-corpo input.fluxo__inicio-switch {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  width: 38px;
  min-width: 38px;
  padding: 0;
  height: 22px;
  border: none;
  border-radius: 11px;
  background: var(--border-strong);
  cursor: pointer;
  transition: background 0.2s ease;
  flex-shrink: 0;
  margin: 0;
}
.fluxo__inicio-switch::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--sobre-cor);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
  transition: transform 0.2s ease;
}
/* Mesma especificidade da regra base acima, senão o "ligado" não pinta. */
.fluxo__no-corpo input.fluxo__inicio-switch:checked {
  background: var(--accent);
}
.fluxo__no-corpo input.fluxo__inicio-switch:checked::after {
  transform: translateX(16px);
}

/* Texto ao lado do toggle */
.fluxo__inicio-label {
  flex: 1;
  /* min-width:0 é obrigatório: sem ele o item flex não encolhe abaixo do
     conteúdo e o texto vaza para fora da faixa no nó de 210px. */
  min-width: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
}

/* Botão Instagram */
.fluxo__inicio-btn {
  display: block;
  width: 100%;
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  background: var(--panel-bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 9px 12px;
  cursor: pointer;
  text-align: center;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.fluxo__inicio-btn:hover {
  border-color: var(--border-strong);
  background: var(--panel-bg-hover);
}
.fluxo__inicio-btn.is-ativo {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent);
}

/* Falha ao carregar a lista de fluxos: a tela precisa distinguir "deu erro" de
   "você não tem fluxo nenhum" — vazio silencioso mente sobre o que existe. */
.fluxo__workspace-erro { color: var(--accent); }

.fluxo__retentar {
  align-self: flex-start;
  margin-top: 6px;
  padding: 5px 9px;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
  background: rgba(246, 196, 0, 0.12);
  border: none;
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: background-color 0.15s ease;
}
.fluxo__retentar:hover { background: rgba(246, 196, 0, 0.2); }
.fluxo__retentar:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ── Bloco "Enviar template": prévia e categoria ─────────────────────
   A prévia existe para a escolha não ser feita só pelo nome técnico do
   template, que é o que a Meta usa mas não diz nada a quem monta o fluxo. */
.fluxo__tpl-previa {
  margin: 6px 0 4px;
  padding: 6px 8px;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--text-muted);
  background: var(--panel-bg-hover);
  border-radius: var(--r-sm);
}

/* A categoria decide a entrega: MARKETING para quem nunca falou com o negócio
   costuma ser filtrado pela Meta antes de chegar. Por isso fica visível. */
.fluxo__tpl-cat {
  display: inline-block;
  padding: 2px 7px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  border-radius: 999px;
}
.fluxo__tpl-cat--marketing { color: var(--aviso); background: rgba(245, 158, 11, 0.16); }
.fluxo__tpl-cat--servico   { color: var(--sucesso); background: rgba(16, 185, 129, 0.16); }

/* ── Avisos de diagnóstico do fluxo ──────────────────────────────────
   O Salvar aceitava calado um fluxo que não podia rodar. Continua salvando —
   fluxo pela metade é legítimo enquanto se monta — mas agora diz o que falta. */
.fluxo__avisos {
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--r-sm);
  background: var(--panel-bg);
}
.fluxo__avisos-titulo {
  display: block;
  font-size: 13px;
  margin-bottom: 6px;
  color: var(--text);
}
.fluxo__avisos-lista { margin: 0; padding-left: 18px; }
.fluxo__aviso {
  font-size: 12.5px;
  line-height: 1.5;
  margin-bottom: 3px;
}
.fluxo__aviso--erro    { color: var(--accent); }
.fluxo__aviso--atencao { color: var(--aviso); }
/* Clicável leva ao bloco culpado: num fluxo grande, saber o quê sem saber onde
   não resolve. */
.fluxo__aviso--clicavel { cursor: pointer; text-decoration: underline dotted; }
.fluxo__aviso--clicavel:hover { opacity: 0.75; }

/* Erro ao carregar a galeria de fluxos: distinguir "deu erro" de "você não tem
   fluxo" — vazio silencioso mente sobre o que existe (item 12 do backlog). */
.fluxo-gallery__erro { color: var(--accent); }

/* source: css/fluxo-blocos.css */
/* Shell de modal dos editores de bloco do fluxo (ver public/js/fluxo-blocos.js).
   Os estilos internos de cada editor moram no CSS do próprio bloco. */

.fmodal__overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.fmodal {
  width: 100%;
  max-width: 440px;
  max-height: calc(100vh - 48px);
  display: flex;
  flex-direction: column;
  background: var(--panel-bg);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
  overflow: hidden;
}

.fmodal__cabecalho {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 18px 20px 14px;
  border-bottom: 1px solid var(--border);
}

.fmodal__titulo {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
}

.fmodal__subtitulo {
  margin: 2px 0 0;
  font-size: 12.5px;
  color: var(--text-muted);
}

.fmodal__fechar {
  margin-left: auto;
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  font-size: 20px;
  line-height: 1;
  background: none;
  border: none;
  border-radius: 8px;
  color: var(--text-muted);
  cursor: pointer;
}
.fmodal__fechar:hover { background: var(--panel-bg-hover); color: var(--text); }

/* Só o corpo rola — cabeçalho e Salvar ficam sempre visíveis. */
.fmodal__corpo {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 18px 20px;
}

.fmodal__rodape {
  padding: 14px 20px 18px;
  border-top: 1px solid var(--border);
}

.fmodal__salvar {
  width: 100%;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--sobre-cor);
  background: var(--accent);
  border: none;
  border-radius: 10px;
  padding: 11px 16px;
  cursor: pointer;
}
.fmodal__salvar:hover { filter: brightness(1.06); }

/* ── Helpers pedirTexto / confirmar / avisar ──────────────────────── */

.fmodal-campo {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.fmodal-rotulo {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
}

.fmodal-input {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  font: inherit;
  font-size: 14px;
  background: var(--panel-bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text);
  outline: none;
  transition: border-color 0.15s;
}
.fmodal-input:focus { border-color: var(--accent); }

.fmodal-mensagem {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--text);
}
.fmodal-mensagem--erro { color: var(--perigo); }

/* Rodapé com dois botões lado a lado */
.fmodal-rodape-duplo {
  display: flex;
  gap: 10px;
}

.fmodal-btn {
  flex: 1;
  padding: 10px 16px;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  transition: filter 0.12s, opacity 0.12s;
}

.fmodal-btn--primario {
  background: var(--accent);
  color: var(--sobre-cor);
}
.fmodal-btn--primario:hover:not(:disabled) { filter: brightness(1.08); }
.fmodal-btn--primario:disabled { opacity: 0.4; cursor: default; }

.fmodal-btn--secundario {
  background: var(--panel-bg-hover);
  color: var(--text);
}
.fmodal-btn--secundario:hover { filter: brightness(0.95); }

.fmodal-btn--perigo {
  background: var(--perigo);
  color: var(--sobre-cor);
}
.fmodal-btn--perigo:hover { filter: brightness(1.08); }

/* Botão único que ocupa toda a largura do rodapé */
.fmodal-btn--largo {
  flex: none;
  width: 100%;
}

/* ── Paleta: cards dos blocos do registry ─────────────────────────── */
.fluxo__paleta-card {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  text-align: left;
  border-left: 4px solid var(--border-strong);
  padding: 10px 12px;
}

.fluxo__paleta-card-icone {
  flex-shrink: 0;
  font-size: 15px;
  line-height: 1.3;
}

.fluxo__paleta-card-txt {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.fluxo__paleta-card-txt strong { font-size: 13px; font-weight: 600; }
.fluxo__paleta-card-txt small { font-size: 11.5px; color: var(--text-muted); }

/* ── Card no canvas: corpo clicável abre o modal ──────────────────── */
.fluxo__no-corpo--clicavel { cursor: pointer; }
.fluxo__no-corpo--clicavel:hover { background: var(--panel-bg-hover); }

/* ── Saídas nomeadas (um porto por botão) ─────────────────────────── */
.fluxo__saidas-trilho {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 0 12px 12px;
}

.fluxo__saida-linha {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 30px;
  padding: 6px 22px 6px 10px;
  background: var(--panel-bg-hover);
  border-radius: 8px;
}

.fluxo__saida-rotulo {
  font-size: 12px;
  /* min-width:0 + ellipsis: rótulo longo não pode empurrar a porta pra fora. */
  min-width: 0;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* A porta de saída da linha ancora à direita dela, não no rodapé do card. */
.fluxo__saida-linha .fluxo__porta--saida {
  position: absolute;
  right: -7px;
  top: 50%;
  transform: translateY(-50%);
  bottom: auto;
  left: auto;
}
/* Treinamento compartilhado por todos os editores do registry. */
.fluxo__editor-com-treino {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.fluxo__treinar-agente {
  width: 100%;
  padding: 11px 16px;
  font: inherit;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--sobre-cor);
  background: linear-gradient(135deg, #ec4899, #ef4444);
  border: none;
  border-radius: 10px;
  cursor: pointer;
  letter-spacing: 0.01em;
}
.fluxo__treinar-agente:hover { filter: brightness(1.08); }
.fluxo__treinar-agente--inline {
  margin-bottom: 9px;
  padding: 7px 10px;
  font-size: 11px;
}

/* source: css/fluxo-tags.css */
/* Seletor de etiquetas compartilhado pelos blocos do fluxo (ver
   public/js/fluxo-tags.js). Usado pelo bloco Ação e pelo bloco Automação — o
   input fica com a classe de cada bloco, para não perder a identidade dele; só
   a lista abaixo é comum.

   A cor de destaque vem de --fbloco-tags-cor, que o bloco define ao montar o
   campo (verde na Ação, roxo na Automação). */

.fbloco-tags {
  --fbloco-tags-cor: var(--sucesso);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.fbloco-tags-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  /* Workspace com muitas etiquetas não pode empurrar o botão Salvar para fora
     da tela: a partir de ~4 linhas a área rola sozinha. */
  max-height: 122px;
  overflow-y: auto;
  padding: 1px;
}

.fbloco-tags-chip {
  max-width: 100%;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
  padding: 4px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--panel-bg);
  color: var(--text-muted);
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease;
}
.fbloco-tags-chip:hover {
  border-color: var(--fbloco-tags-cor);
  color: var(--text);
}
.fbloco-tags-chip:focus-visible {
  outline: 2px solid var(--fbloco-tags-cor);
  outline-offset: 1px;
}

/* A escolhida precisa se distinguir do resto: o input mostra o texto, mas com a
   lista aberta o olho procura qual chip está valendo. */
.fbloco-tags-chip--ativa {
  border-color: var(--fbloco-tags-cor);
  background: color-mix(in srgb, var(--fbloco-tags-cor) 16%, transparent);
  color: var(--fbloco-tags-cor);
}

.fbloco-tags-dica {
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--text-muted);
}
/* "Vai criar uma etiqueta nova" é informação, não erro. */
.fbloco-tags-dica--nova { color: var(--fbloco-tags-cor); }
/* Já "a etiqueta não existe" numa condição ou numa remoção não dá erro nenhum:
   o caminho simplesmente nunca é tomado. Precisa saltar aos olhos. */
.fbloco-tags-dica--alerta { color: var(--accent); }

/* Recuperação de erro — discreta, não é a ação principal do campo. */
.fbloco-tags-retentar {
  align-self: flex-start;
  padding: 5px 9px;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
  background: rgba(246, 196, 0, 0.12);
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.15s ease;
}
.fbloco-tags-retentar:hover { background: rgba(246, 196, 0, 0.2); }
.fbloco-tags-retentar:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* source: css/blocos/conversas.css */
/* ── Bloco Conversas — modal body ─────────────────────────────── */

.fbloco-conversas-modal {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Linha informativa */
.fbloco-conversas-info {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: var(--perigo-soft);
  border-radius: 8px;
  font-size: 13px;
  color: var(--perigo);
  border: 1px solid var(--perigo-linha);
}

/* Botão Treine o Agente */
.fbloco-conversas-btn-treinar {
  width: 100%;
  padding: 10px 16px;
  background: var(--perigo);
  color: var(--sobre-cor);
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s;
}

.fbloco-conversas-btn-treinar:hover {
  background: var(--perigo);
}

/* Grade 3×3 de tipos de conteúdo */
.fbloco-conversas-grade {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.fbloco-conversas-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 12px 8px;
  background: var(--panel-bg-hover);
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  transition: border-color .15s, background .15s;
  user-select: none;
}

.fbloco-conversas-cell:hover {
  background: var(--perigo-soft);
  border-color: var(--perigo);
}

.fbloco-conversas-cell:active {
  background: var(--perigo-soft);
}

/* Destaque quando o tipo já está nos itens */
.fbloco-conversas-cell--ativo {
  background: var(--perigo-soft);
  border-color: var(--perigo);
  box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.18);
}

.fbloco-conversas-cell--ativo .fbloco-conversas-cell-label {
  color: var(--perigo);
  font-weight: 600;
}

.fbloco-conversas-cell-ico {
  font-size: 22px;
  line-height: 1;
}

.fbloco-conversas-cell-label {
  font-size: 11px;
  color: var(--text);
  text-align: center;
  line-height: 1.2;
}

/* Lista de itens adicionados */
.fbloco-conversas-lista {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.fbloco-conversas-item {
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}

.fbloco-conversas-item-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 10px;
  background: var(--elevado);
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  border-bottom: 1px solid var(--border);
}

.fbloco-conversas-item-remover {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-fraco);
  font-size: 18px;
  line-height: 1;
  padding: 0 2px;
  transition: color .12s;
}

.fbloco-conversas-item-remover:hover {
  color: var(--perigo);
}

.fbloco-conversas-item-input {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 8px 10px;
  border: none;
  font-size: 13px;
  font-family: inherit;
  resize: vertical;
  outline: none;
  background: var(--elevado);
  color: var(--text);
}

.fbloco-conversas-item-input:focus {
  background: var(--panel-bg-hover);
}

/* ── Upload de mídia ────────────────────────────────────────────── */

.fbloco-conversas-upload {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px 10px;
}

.fbloco-conversas-upload-btn {
  align-self: flex-start;
  padding: 6px 12px;
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  background: var(--elevado);
  border: 1px solid var(--border-strong);
  border-radius: 7px;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
}
.fbloco-conversas-upload-btn:hover:not(:disabled) {
  background: var(--border);
  border-color: var(--text-fraco);
}
.fbloco-conversas-upload-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.fbloco-conversas-upload-status {
  font-size: 12px;
  color: var(--text-muted);
  min-height: 16px;
}
.fbloco-conversas-upload-enviando { color: var(--info); font-style: italic; }
.fbloco-conversas-upload-ok       { color: var(--sucesso); }
.fbloco-conversas-upload-erro     { color: var(--perigo); }

/* Link "ou colar URL" */
.fbloco-conversas-url-toggle {
  align-self: flex-start;
  padding: 0;
  font: inherit;
  font-size: 12px;
  color: var(--text-fraco);
  background: none;
  border: none;
  cursor: pointer;
  text-decoration: underline;
}
.fbloco-conversas-url-toggle:hover { color: var(--text-muted); }

.fbloco-conversas-url-wrap {
  /* exibido/ocultado via JS */
}

/* Dark mode para upload */

/* Resumo no canvas */
.fbloco-conversas-resumo-linha {
  font-size: 12px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 2px;
}

/* Dark mode */

/* source: css/blocos/acao.css */
/* ── Bloco Ação — estilos internos do editor (modal body) ────────── */
/* Prefixo obrigatório: .fbloco-acao- */

.fbloco-acao-wrapper {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Botão "Treine o Agente" */
.fbloco-acao-btn-treinar {
  width: 100%;
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--sobre-cor);
  background: var(--perigo);
  border: none;
  border-radius: 10px;
  padding: 11px 16px;
  cursor: pointer;
  text-align: center;
  transition: filter 0.15s ease;
}
.fbloco-acao-btn-treinar:hover { filter: brightness(1.08); }

/* Linha do select "Selecione a ação" */
.fbloco-acao-sel-row {
  display: flex;
  gap: 8px;
}

/* Select (usado tanto no "Selecione a ação" quanto nos campos internos) */
.fbloco-acao-select {
  flex: 1;
  font: inherit;
  font-size: 13.5px;
  font-weight: 500;
  padding: 9px 32px 9px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background-color: var(--panel-bg);
  color: var(--text);
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236d6d73' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 14px;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.fbloco-acao-select:hover {
  border-color: var(--border-strong);
  background-color: var(--panel-bg-hover);
}
.fbloco-acao-select:focus {
  outline: none;
  border-color: var(--sucesso);
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.25);
}

/* Lista de cartões empilhados */
.fbloco-acao-lista {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Cartão de ação */
.fbloco-acao-card {
  background: var(--panel-bg-hover);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}

/* Cabeçalho do cartão */
.fbloco-acao-card__cab {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  border-bottom: 1px solid var(--border);
  background: rgba(16, 185, 129, 0.08);
}

.fbloco-acao-card__titulo {
  flex: 1;
  font-size: 13px;
  font-weight: 700;
  color: var(--sucesso);
}

.fbloco-acao-card__lixo {
  border: none;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 15px;
  line-height: 1;
  padding: 2px 4px;
  border-radius: 6px;
  transition: color 0.15s ease, background 0.15s ease;
}
.fbloco-acao-card__lixo:hover {
  color: var(--perigo);
  background: rgba(239, 68, 68, 0.1);
}

/* Área de campos */
.fbloco-acao-card__campos {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 12px;
}

/* Rótulo de campo */
.fbloco-acao-label {
  font-size: 11.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  margin-bottom: 1px;
}

/* Input de texto */
.fbloco-acao-input {
  width: 100%;
  font: inherit;
  font-size: 13.5px;
  padding: 8px 11px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--panel-bg);
  color: var(--text);
  box-sizing: border-box;
  transition: border-color 0.15s ease;
}
.fbloco-acao-input:focus {
  outline: none;
  border-color: var(--sucesso);
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2);
}
.fbloco-acao-input::placeholder { color: var(--text-muted); opacity: 0.7; }

/* O campo de etiqueta (ações "Adicionar tag" / "Remover tag") é o seletor
   compartilhado: estilos em css/fluxo-tags.css, prefixo .fbloco-tags-. Só o
   input usa a classe daqui, para manter o visual do bloco. */

/* Texto informativo (ação "humano") */
.fbloco-acao-info {
  font-size: 12.5px;
  color: var(--text-muted);
  font-style: italic;
}

/* Aviso quando não há etapas de funil cadastradas */

/* ── Prévia no canvas (resumo) ───────────────────────────────────── */
.fbloco-acao-resumo-linha {
  font-size: 12px;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.6;
}

/* ── Estados de carga dos campos de setor/atendente ──────────────────
   Select inerte enquanto carrega ou depois de falhar: precisa PARECER
   inerte, senão o usuário clica esperando abrir uma lista que não existe. */
.fbloco-acao-select:disabled {
  cursor: default;
  opacity: 0.65;
  background-color: var(--panel-bg-hover);
}

/* Recuperação de erro — discreta, não é ação primária do bloco. */
.fbloco-acao-retentar {
  align-self: flex-start;
  margin-top: 6px;
  padding: 5px 9px;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
  background: rgba(246, 196, 0, 0.12);
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.15s ease;
}
.fbloco-acao-retentar:hover { background: rgba(246, 196, 0, 0.2); }
.fbloco-acao-retentar:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Lista vazia mas válida: não é erro, é falta de cadastro — diz onde resolver. */
.fbloco-acao-dica {
  margin-top: 4px;
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--text-muted);
}

/* source: css/blocos/botoes.css */
/* Bloco Botões — editor e resumo no canvas */
/* Prefixo obrigatório: .fbloco-botoes- */

/* ── Editor (corpo do modal) ──────────────────────────── */

.fbloco-botoes-editor {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Botão "Treine o Agente" */
.fbloco-botoes-treinar {
  width: 100%;
  padding: 11px 16px;
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--sobre-cor);
  background: var(--perigo);
  border: none;
  border-radius: 10px;
  cursor: not-allowed;
  opacity: 0.85;
  letter-spacing: 0.01em;
}
.fbloco-botoes-treinar:hover { opacity: 1; }

/* ── Campos Título / Subtítulo ────────────────────────── */

.fbloco-botoes-campo {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.fbloco-botoes-campo-rotulo {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  text-transform: uppercase;
}

/* Barra de formatação */
.fbloco-botoes-barra {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 5px 8px;
  background: var(--panel-bg-hover);
  border: 1px solid var(--border);
  border-bottom: none;
  border-radius: 8px 8px 0 0;
}

.fbloco-botoes-barra-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 26px;
  padding: 0 5px;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted);
  background: none;
  border: 1px solid transparent;
  border-radius: 5px;
  cursor: pointer;
  line-height: 1;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.fbloco-botoes-barra-btn:hover {
  background: var(--border);
  color: var(--text);
  border-color: var(--border-strong);
}

/* Estilo visual de cada botão de formato */
.fbloco-botoes-barra-negrito { font-weight: 900; }
.fbloco-botoes-barra-italico { font-style: italic; }
.fbloco-botoes-barra-riscado { text-decoration: line-through; }
.fbloco-botoes-barra-mono    { font-family: monospace; letter-spacing: -0.02em; }

/* Select de variáveis */
.fbloco-botoes-vars {
  margin-left: auto;
  height: 26px;
  padding: 0 6px;
  font: inherit;
  font-size: 11.5px;
  color: var(--text-muted);
  background: var(--panel-bg);
  border: 1px solid var(--border);
  border-radius: 5px;
  cursor: pointer;
}
.fbloco-botoes-vars:hover { border-color: var(--border-strong); color: var(--text); }

/* Textarea */
.fbloco-botoes-textarea {
  width: 100%;
  padding: 9px 10px;
  font: inherit;
  font-size: 13.5px;
  color: var(--text);
  background: var(--panel-bg);
  border: 1px solid var(--border);
  border-top: none;
  border-radius: 0 0 8px 8px;
  resize: vertical;
  min-height: 72px;
  line-height: 1.5;
  outline: none;
  transition: border-color 0.15s;
}
.fbloco-botoes-textarea:focus {
  border-color: var(--no-tag);
  box-shadow: 0 0 0 2px rgba(236, 72, 153, 0.18);
}

/* ── Lista de botões ──────────────────────────────────── */

.fbloco-botoes-lista-sec {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.fbloco-botoes-lista {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.fbloco-botoes-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: var(--panel-bg-hover);
  border: 1px solid var(--border);
  border-radius: 9px;
}

.fbloco-botoes-item-campos {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.fbloco-botoes-item-gatilhos {
  width: 100%;
  padding: 8px 12px;
  color: var(--text);
  background: var(--panel-bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  font: inherit;
  font-size: 12px;
  box-sizing: border-box;
}
.fbloco-botoes-item-gatilhos:focus { outline: none; border-color: #ec4899; }

.fbloco-botoes-item-num {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  white-space: nowrap;
  min-width: 46px;
}

.fbloco-botoes-item-inp {
  flex: 1;
  width: 100%;
  box-sizing: border-box;
  min-width: 0;
  padding: 5px 8px;
  font: inherit;
  font-size: 13px;
  color: var(--text);
  background: var(--panel-bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  outline: none;
  transition: border-color 0.15s;
}
.fbloco-botoes-item-inp:focus {
  border-color: var(--no-tag);
  box-shadow: 0 0 0 2px rgba(236, 72, 153, 0.15);
}
.fbloco-botoes-item-inp::placeholder { color: var(--text-muted); opacity: 0.7; }

.fbloco-botoes-item-lixo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  background: none;
  border: 1px solid transparent;
  border-radius: 6px;
  color: var(--text-muted);
  cursor: pointer;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.fbloco-botoes-item-lixo:hover {
  background: rgba(239, 68, 68, 0.12);
  border-color: rgba(239, 68, 68, 0.25);
  color: var(--perigo);
}

/* Link "Adicionar novo botão" */
.fbloco-botoes-adicionar {
  align-self: flex-start;
  padding: 0;
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  color: var(--no-tag);
  background: none;
  border: none;
  cursor: pointer;
  opacity: 0.85;
  transition: opacity 0.12s;
}
.fbloco-botoes-adicionar:hover { opacity: 1; text-decoration: underline; }

/* ── Bloco "Sem interação" ────────────────────────────── */

.fbloco-botoes-sem-int {
  padding: 12px 14px;
  background: var(--panel-bg-hover);
  border: 1px solid var(--border);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.fbloco-botoes-sem-int-cab {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: space-between;
}

.fbloco-botoes-sem-int-chk {
  width: 15px;
  height: 15px;
  accent-color: var(--no-tag);
  cursor: pointer;
  flex-shrink: 0;
}

.fbloco-botoes-sem-int-label {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  user-select: none;
}

.fbloco-botoes-sem-int-seta {
  font-size: 20px;
  color: var(--text-muted);
  line-height: 1;
  flex-shrink: 0;
}

.fbloco-botoes-sem-int-seta {
  appearance: none;
  padding: 2px 6px;
  color: inherit;
  background: transparent;
  border: 0;
  cursor: pointer;
  transition: transform 0.18s ease;
}
.fbloco-botoes-sem-int-seta.is-aberta { transform: rotate(90deg); }

.fbloco-botoes-sem-int-config {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}
.fbloco-botoes-sem-int-config[hidden] { display: none; }
.fbloco-botoes-sem-int-tempo-label {
  display: block;
  margin-bottom: 7px;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 600;
}
.fbloco-botoes-sem-int-tempo-campos { display: flex; gap: 8px; }
.fbloco-botoes-sem-int-valor,
.fbloco-botoes-sem-int-unidade {
  padding: 9px 11px;
  color: var(--text);
  background: var(--panel-bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  font: inherit;
}
.fbloco-botoes-sem-int-valor { width: 90px; }
.fbloco-botoes-sem-int-unidade { flex: 1; }

.fbloco-botoes-sem-int-desc {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.5;
}

/* ── Resumo no canvas ─────────────────────────────────── */

.fbloco-botoes-resumo-titulo {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fbloco-botoes-resumo-linha {
  font-size: 11.5px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 1px 0;
}

.fbloco-botoes-resumo-vazio {
  font-size: 12px;
  color: var(--text-muted);
  font-style: italic;
}

/* source: css/blocos/treinar.css */
/* ── Treinador de respostas (TreinarAgente.abrir) ────────────────── */
/* Prefixo: .ftreinar- */

.ftreinar-wrapper {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Descrição */
.ftreinar-desc {
  margin: 0;
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.5;
  padding: 10px 12px;
  background: var(--panel-bg-hover);
  border-radius: 8px;
}

/* Lista de pares */
.ftreinar-lista {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Cartão de par */
.ftreinar-par {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  background: var(--panel-bg-hover);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px;
}

/* Coluna com os dois campos e a seta */
.ftreinar-par__campos {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

/* Rótulo */
.ftreinar-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
}

/* Textarea */
.ftreinar-textarea {
  width: 100%;
  font: inherit;
  font-size: 13px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--panel-bg);
  color: var(--text);
  resize: vertical;
  box-sizing: border-box;
  transition: border-color 0.15s ease;
}
.ftreinar-textarea:focus {
  outline: none;
  border-color: var(--sucesso);
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2);
}
.ftreinar-textarea::placeholder { color: var(--text-muted); opacity: 0.65; }

/* Seta entre as duas textareas */
.ftreinar-seta {
  text-align: center;
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1;
  padding: 2px 0;
}

/* Botão lixeira */
.ftreinar-lixo {
  flex-shrink: 0;
  border: none;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 15px;
  line-height: 1;
  padding: 2px 4px;
  border-radius: 6px;
  margin-top: 2px;
  transition: color 0.15s ease, background 0.15s ease;
}
.ftreinar-lixo:hover {
  color: var(--perigo);
  background: rgba(239, 68, 68, 0.1);
}

/* Link "⊕ Adicionar exemplo" */
.ftreinar-add {
  align-self: flex-start;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--sucesso);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-decoration: none;
  transition: opacity 0.15s ease;
}
.ftreinar-add:hover { opacity: 0.75; }

/* source: css/blocos/temporizador.css */
/* Bloco Temporizador — ver public/js/blocos/temporizador.js */

.fbloco-temporizador-ajuda {
  margin: 0 0 14px;
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.5;
}

.fbloco-temporizador-linha {
  display: flex;
  gap: 10px;
  align-items: center;
}

.fbloco-temporizador-num {
  width: 100px;
  flex-shrink: 0;
  font: inherit;
  font-size: 14px;
  color: var(--text);
  background: var(--panel-bg-hover);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
}

.fbloco-temporizador-unidade {
  flex: 1;
  min-width: 0;
  font: inherit;
  font-size: 14px;
  color: var(--text);
  background: var(--panel-bg-hover);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  cursor: pointer;
}

.fbloco-temporizador-num:focus,
.fbloco-temporizador-unidade:focus {
  outline: none;
  border-color: var(--accent);
}

.fbloco-temporizador-previa {
  margin: 10px 0 0;
  font-size: 12px;
  color: var(--text-muted);
}

/* Prévia no card do canvas */
.fbloco-temporizador-resumo {
  font-size: 12.5px;
  color: var(--text-muted);
}

/* source: css/blocos/automacao.css */
.fautomacao { display: flex; flex-direction: column; gap: 14px; }
.fautomacao__explicacao {
  margin: 0; color: var(--text-muted); font-size: 13px; line-height: 1.5;
}
.fautomacao__lista { display: flex; flex-direction: column; gap: 10px; }
.fautomacao__prazo {
  display: flex; flex-direction: column; gap: 8px; padding: 12px;
  border: 1px solid rgba(139,92,246,.32); border-radius: 12px;
  background: rgba(139,92,246,.07);
}
.fautomacao__prazo-titulo { color: var(--text-primary); font-size: 12.5px; }
.fautomacao__como-usar {
  margin: 0; padding: 9px 10px; color: var(--text-muted); font-size: 11.5px;
  line-height: 1.45; border-radius: 9px; background: rgba(255,255,255,.025);
}
.fautomacao__regra {
  display: flex; flex-direction: column; gap: 9px; padding: 12px;
  border: 1px solid var(--border); border-left: 3px solid #8b5cf6;
  border-radius: 10px; background: var(--panel-bg-hover);
}
.fautomacao__regra-cab { display: flex; align-items: center; gap: 7px; }
.fautomacao__se { color: #a78bfa; font-size: 12px; letter-spacing: .08em; }
.fautomacao__numero {
  display: inline-grid; place-items: center; width: 20px; height: 20px;
  border-radius: 999px; background: rgba(139,92,246,.16); color: #a78bfa; font-size: 11px;
}
.fautomacao__excluir {
  margin-left: auto; border: 0; background: transparent; color: var(--text-muted);
  font: inherit; font-size: 20px; line-height: 1; cursor: pointer;
}
.fautomacao__excluir:hover { color: var(--perigo); }
.fautomacao__select, .fautomacao__input {
  box-sizing: border-box; width: 100%; padding: 9px 10px; color: var(--text);
  background: var(--panel-bg); border: 1px solid var(--border); border-radius: 8px;
  font: inherit; font-size: 13px; outline: none;
}
.fautomacao__select:focus, .fautomacao__input:focus { border-color: #8b5cf6; }
.fautomacao__tempo { display: grid; grid-template-columns: 90px 1fr; gap: 8px; }
.fautomacao__destino { color: var(--text-muted); font-size: 11.5px; }
.fautomacao__adicionar {
  width: 100%; padding: 10px; color: #a78bfa; background: rgba(139,92,246,.08);
  border: 1px dashed rgba(139,92,246,.65); border-radius: 9px; font: inherit;
  font-size: 13px; font-weight: 600; cursor: pointer;
}
.fautomacao__adicionar:hover { background: rgba(139,92,246,.14); }
.fautomacao__resumo { font-size: 12px; line-height: 1.45; }
.fautomacao__resumo--prazo { color: #c4b5fd; font-weight: 600; margin-bottom: 3px; }
.fautomacao__vazio { color: var(--text-muted); font-size: 12px; }

/* source: css/funil.css */
/* ── Tela Funil: quadro Kanban ──────────────────────────────────── */
.funil {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 80px);
  gap: 16px;
}

.funil__topo {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
.funil__sub {
  color: var(--text-muted);
  font-size: 14px;
  margin-top: 4px;
}

/* Board: colunas lado a lado, rolagem horizontal se faltar espaço */
.funil__board {
  display: flex;
  gap: 14px;
  flex: 1;
  min-height: 0;
  overflow-x: auto;
  padding-bottom: 6px;
}

.funil__coluna {
  display: flex;
  flex-direction: column;
  width: 250px;
  flex-shrink: 0;
  background: var(--sidebar-bg-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  max-height: 100%;
}

.funil__coluna-cabecalho {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  font-weight: 600;
  font-size: 14px;
  border-bottom: 1px solid var(--border);
}
.funil__coluna-check {
  width: 15px; height: 15px;
  flex-shrink: 0;
  cursor: pointer;
  accent-color: var(--accent);
}
.funil__coluna-check:disabled { cursor: default; opacity: 0.4; }
.funil__coluna-ponto {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
}
.funil__coluna-contagem {
  margin-left: auto;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  background: var(--panel-bg);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 1px 8px;
}

.funil__cards {
  flex: 1;
  overflow-y: auto;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Zona de drop destacada */
.funil__coluna--alvo {
  border-color: var(--accent);
}
.funil__coluna--alvo .funil__cards {
  background: var(--accent-soft);
  border-radius: 0 0 var(--r-md) var(--r-md);
}

/* ── Card de lead ───────────────────────────────────────────────── */
.funil__card {
  background: var(--panel-bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
  cursor: grab;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  transition: box-shadow 0.15s ease, border-color 0.15s ease;
}
.funil__card:hover {
  border-color: var(--border-strong);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}
.funil__card:active { cursor: grabbing; }
.funil__card--arrastando { opacity: 0.4; }

.funil__card-topo {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-right: 24px; /* Espaço para o checkbox no canto superior direito */
}

.funil__card-nome {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.funil__card-btn-editar {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  padding: 0;
  border: none;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 4px;
  cursor: pointer;
  color: var(--text-muted);
  opacity: 0.7;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.funil__card:hover .funil__card-btn-editar {
  opacity: 1;
}
.funil__card-btn-editar:hover {
  background: var(--panel-bg-hover);
  color: var(--accent);
}

.funil__card-numero {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 2px;
}

.funil__vazio {
  color: var(--text-muted);
  font-size: 13px;
  text-align: center;
  padding: 16px 8px;
}

/* Botão "Ver mais" no rodapé de cada coluna (paginação do funil) */
.funil__vermais {
  margin: 6px 8px 8px;
  padding: 7px 10px;
  border: 1px dashed var(--border-strong);
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--text-muted);
  font: inherit;
  font-size: 12.5px;
  cursor: pointer;
  flex-shrink: 0;
}
.funil__vermais:hover { background: var(--panel-bg); color: var(--text); }
.funil__vermais[disabled] { opacity: .5; cursor: default; }

/* Onde o lead está no fluxo (badge no card do funil) */
.funil__card-fluxo {
  margin-top: 6px;
  font-size: 11px;
  color: var(--accent-strong);
  background: var(--accent-soft);
  border-radius: 6px;
  padding: 2px 6px;
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Rodapé do card: ação principal "Ver" (abre a conversa). Discreto, mas
   visível — fica no canto inferior e usa o accent do projeto pra não virar
   um botão branco perdido no cartão. */
.funil__card-acoes {
  margin-top: 8px;
  display: flex;
  justify-content: flex-end;
  gap: 6px;
}
.funil__card-ver-btn,
.funil__card-fechar-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 6px;
  border: 1px solid rgba(59, 130, 246, 0.4);
  background: rgba(59, 130, 246, 0.12);
  color: #3b82f6;
  font: inherit;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.funil__card-ver-btn:hover,
.funil__card-fechar-btn:hover {
  background: rgba(59, 130, 246, 0.22);
  border-color: #3b82f6;
}
.funil__card-ver-btn:focus-visible,
.funil__card-fechar-btn:focus-visible {
  outline: 2px solid #3b82f6;
  outline-offset: 2px;
}
.funil__card-ver-btn svg,
.funil__card-fechar-btn svg {
  flex: 0 0 auto;
}

/* Botão "Fechar": registrar venda fechada. Verde (sucesso) para não brigar
   com o "Ver" azul e comunicar a ação de conclusão. */
.funil__card-fechar-btn {
  border-color: rgba(25, 158, 112, 0.45);
  background: rgba(25, 158, 112, 0.14);
  color: #22b787;
}
.funil__card-fechar-btn:hover {
  background: rgba(25, 158, 112, 0.26);
  border-color: #199e70;
}

/* Selo "Cliente": o lead já tem venda fechada (venda_fechada_em). Mostra o
   estado terminal no lugar do botão — registrar de novo duplicaria o valor. */
.funil__card-fechado {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 6px;
  border: 1px solid rgba(25, 158, 112, 0.4);
  background: rgba(25, 158, 112, 0.1);
  color: #22b787;
  font-size: 11px;
  font-weight: 600;
  user-select: none;
}

/* ── Topo: wrapper que agrupa os botões de ação ──────────────────── */
.funil__topo-btns {
  display: flex;
  gap: 8px;
  align-items: center;
}

/* ── Botão "+ Nova etapa" ────────────────────────────────────────── */
.funil__btn-nova-etapa {
  padding: 7px 14px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  background: var(--panel-bg-hover);
  color: var(--text);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.funil__btn-nova-etapa:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.funil__btn-nova-etapa:disabled { opacity: 0.5; cursor: default; }

/* ── Título editável da coluna ───────────────────────────────────── */
.funil__coluna-titulo {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Botões de ação na coluna (✏ renomear e × apagar) ───────────── */
.funil__coluna-btn {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  padding: 0;
  border: none;
  background: transparent;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
  line-height: 20px;
  text-align: center;
  color: var(--text-muted);
  /* Sempre visível (item 6): antes era opacity:0 e só aparecia no hover, então a
     pessoa não sabia que dava para renomear/excluir a etapa. Discreto por padrão,
     total no hover. */
  opacity: 0.5;
  transition: opacity 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.funil__coluna-cabecalho:hover .funil__coluna-btn { opacity: 1; }
.funil__coluna-btn--ren:hover { background: var(--panel-bg); color: var(--text); }
.funil__coluna-btn--del:hover { background: rgba(239, 68, 68, 0.12); color: var(--perigo); }

.funil__editor-cor {
  display: flex;
  align-items: center;
  gap: 12px;
}
.funil__editor-cor-input {
  width: 72px;
  height: 44px;
  padding: 3px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--panel-bg);
  cursor: pointer;
}
.funil__editor-cor-valor {
  color: var(--text-muted);
  font: 600 13px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* ── Cabeçalho: cursor grab indica que pode reordenar arrastando ─── */
.funil__coluna-cabecalho { cursor: grab; }
.funil__coluna-cabecalho:active { cursor: grabbing; }

/* ── Coluna sendo arrastada (reordenação de colunas) ────────────── */
.funil__coluna--arrastando { opacity: 0.4; }

/* ── Coluna alvo de reordenação (distinto de --alvo usado no LEAD) ─ */
.funil__coluna--alvo-col {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 2px var(--accent-soft);
}

/* ── Topo do Funil: busca + painel de resumo (item 6) ─────────────── */
.funil__topo-dir { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.funil__busca { width: 260px; max-width: 100%; }

.funil__resumo {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin: 4px 0 16px;
}
.funil__resumo-card {
  display: flex;
  flex-direction: column;
  min-width: 120px;
  padding: 10px 14px;
  background: var(--panel-bg);
  border: 1px solid var(--border);
  border-left: 3px solid var(--border-strong);
  border-radius: var(--r-sm);
}
.funil__resumo-card strong { font-size: 1.3rem; font-weight: 700; color: var(--text); }
.funil__resumo-card span { font-size: 0.72rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; }
.funil__resumo-card.is-enviado { border-left-color: var(--sucesso); }
.funil__resumo-card.is-novo    { border-left-color: var(--info); }
.funil__resumo-card.is-erro    { border-left-color: var(--accent); }
.funil__resumo-erro { color: var(--accent); font-size: 0.85rem; }

/* ── Seleção em massa de leads (item 6) ───────────────────────────── */
.funil__card { position: relative; }
.funil__card-check {
  position: absolute;
  top: 8px; right: 8px;
  width: 16px; height: 16px;
  accent-color: var(--accent);
  cursor: pointer;
}
.funil__card.is-selecionado { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }

.funil__selecao {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 10px 14px;
  margin-bottom: 12px;
  background: var(--accent-soft);
  border: 1px solid var(--accent);
  border-radius: var(--r-sm);
}
/* Sem isto o `display:flex` vence o atributo hidden e a barra aparece vazia
   (o "negócio vermelho" na tela do Funil). Só mostra quando há seleção. */
.funil__selecao[hidden] { display: none; }
.funil__selecao-info { font-weight: 700; font-size: 0.9rem; color: var(--text); }
.funil__selecao-etapa { max-width: 200px; }
.funil__selecao-del { color: var(--accent); }

/* ── Popover de mover etapa (1 clique no nome) ─────────────────── */
.funil__popover-etapas {
  position: absolute;
  z-index: 200;
  min-width: 160px;
  background: var(--panel-bg);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
  overflow: hidden;
  padding: 4px 0;
}
.funil__popover-item {
  display: block;
  width: 100%;
  padding: 8px 14px;
  border: none;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 13.5px;
  text-align: left;
  cursor: pointer;
  transition: background 0.1s;
}
.funil__popover-item:hover {
  background: var(--accent-soft);
  color: var(--accent-strong);
}
.funil__popover-item--acao {
  color: var(--accent);
  font-weight: 600;
  display: flex;
  align-items: center;
}
.funil__popover-item--acao:hover {
  background: var(--accent-soft);
  color: var(--accent-strong);
}
.funil__popover-separador {
  height: 1px;
  background: var(--border);
  margin: 4px 0;
}
.funil__popover-cabecalho {
  padding: 6px 14px 2px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.funil__popover-item--vazio {
  color: var(--text-muted);
  cursor: default;
  font-style: italic;
}

/* ── Arrastar o quadro para o lado ─────────────────────────────────────────
   Com 13 etapas as últimas ficavam inalcançáveis: só dava para rolar mirando
   na barra fina ou com roda horizontal, que a maioria dos mouses não tem. */
.funil__board { cursor: grab; scroll-behavior: auto; }
.funil__board--arrastando {
  cursor: grabbing;
  /* Enquanto arrasta, o navegador tentaria selecionar o texto das colunas e a
     tela ficava toda azul de seleção. */
  user-select: none;
}
/* O cursor de "agarrar" é do FUNDO do quadro. Sobre um card o gesto é outro —
   arrastar o lead — e o cursor precisa dizer isso. */
.funil__board .funil__card { cursor: grab; }
.funil__board--arrastando .funil__card { cursor: grabbing; }

/* Barra de rolagem clara e visível.
   A barra padrão do tema escuro é quase invisível sobre o fundo preto, e por
   isso ninguém descobria que dava para rolar o quadro. */
.funil__board {
  scrollbar-color: #ffffff rgba(255, 255, 255, .08);
  scrollbar-width: thin;
}
.funil__board::-webkit-scrollbar { height: 12px; }
.funil__board::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, .06);
  border-radius: var(--r-pill);
}
.funil__board::-webkit-scrollbar-thumb {
  background: #ffffff;
  border-radius: var(--r-pill);
  /* A borda cria um respiro entre o puxador e a trilha sem precisar de outro
     elemento — o fundo aparece através dela. */
  border: 3px solid transparent;
  background-clip: content-box;
}
.funil__board::-webkit-scrollbar-thumb:hover { background: #ffffff; background-clip: content-box; }

/* ── Alvo de cancelar o arraste ────────────────────────────────────────────
   Aparece só enquanto um lead está sendo arrastado. Antes, desistir no meio do
   caminho exigia acertar de volta a coluna de origem — soltar em qualquer
   outro lugar já movia o lead. */
.funil__cancelar {
  position: absolute;
  top: 8px; right: 12px;
  z-index: 40;
  display: none;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: var(--r-pill);
  border: 2px dashed var(--accent);
  background: var(--accent-soft);
  color: var(--accent-texto);
  font-size: 13px;
  font-weight: 600;
  /* backdrop-filter porque ele flutua sobre as colunas: sem isso o texto das
     colunas por baixo atravessa e o rótulo fica ilegível. */
  backdrop-filter: blur(6px);
  pointer-events: auto;
}
.funil__cancelar--visivel { display: flex; }
.funil__cancelar svg { width: 18px; height: 18px; flex: none; }
/* Enquanto o cursor está por cima, o alvo fica sólido: é o retorno visual de
   que soltar ALI é que cancela. */
.funil__cancelar--sobre {
  background: var(--accent);
  border-style: solid;
  color: #fff;
  transform: scale(1.04);
}
/* Os filhos não podem receber os eventos de arraste, senão o dragleave dispara
   ao passar do ícone para o texto e o alvo pisca. */
.funil__cancelar svg, .funil__cancelar span { pointer-events: none; }

/* ── Popover de etapas no nome do card ─────────────────────────────── */
.funil__popover-etapas {
  position: absolute;
  z-index: 1000;
  min-width: 160px;
  max-width: 260px;
  background: var(--elevado);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  box-shadow: 0 8px 24px rgba(0,0,0,0.35), 0 2px 8px rgba(0,0,0,0.2);
  padding: 5px 0;
  animation: funilPopoverIn 0.15s ease;
}

@keyframes funilPopoverIn {
  from { opacity: 0; transform: translateY(-4px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.funil__popover-item {
  display: block;
  width: 100%;
  padding: 9px 14px;
  background: transparent;
  border: none;
  text-align: left;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--text);
  cursor: pointer;
  transition: background 0.1s, color 0.1s;
}
.funil__popover-item:hover {
  background: var(--accent-soft);
  color: var(--accent-texto);
}
.funil__popover-item:active { background: var(--accent); color: #fff; }
.funil__popover-item--vazio {
  color: var(--text-muted);
  font-size: 12.5px;
  font-style: italic;
  cursor: default;
}
.funil__popover-item--vazio:hover { background: transparent; color: var(--text-muted); }

/* Nome do card com cursor de mão para indicar que é clicável */
.funil__card-nome { cursor: pointer; }
.funil__card-nome:hover { text-decoration: underline; text-decoration-color: var(--accent); }

/* source: css/inbox.css */
/* ── Tela Conversas: Live Chat ──────────────────────────────────── */
.inbox {
  display: flex;
  height: calc(100vh - 80px);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  background: var(--panel-bg);
}

/* ── Lista de conversas ─────────────────────────────────────────── */
.inbox__lista {
  width: 300px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--border);
  background: var(--panel-bg-hover);
}
.inbox__lista-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
}
.inbox__lista-titulo { font-size: 16px; font-weight: 600; }
.inbox__simular { font-size: 12px; padding: 5px 9px; }

.inbox__canal-atual {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 5px;
  padding: 4px 8px;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text-muted);
  background: transparent;
  font: inherit;
  font-size: 11px;
  cursor: pointer;
}
.inbox__canal-atual:hover { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }

.inbox__sms-segmentos {
  align-self: center;
  min-width: 88px;
  color: var(--text-muted);
  font-size: 10px;
  line-height: 1.25;
  text-align: right;
}
.inbox__sms-segmentos.is-alerta { color: #f59e0b; }
.inbox__sms-segmentos.is-erro { color: #ef4444; font-weight: 700; }

.inbox-canal-modal { width: min(620px, calc(100vw - 28px)); }
.inbox-canal-modal__form { width: 100%; max-width: none; }
.inbox-canal-modal__cabecalho {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}
.inbox-canal-modal__sub {
  margin: 6px 0 0;
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.45;
}
.inbox-canal-modal__fechar {
  position: relative;
  z-index: 1;
  flex: 0 0 36px;
  display: grid;
  width: 36px;
  height: 36px;
  padding: 0;
  place-items: center;
  border: 1px solid transparent;
  border-radius: 9px;
  background: transparent;
  color: var(--text-muted);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}
.inbox-canal-modal__fechar:hover {
  border-color: var(--border);
  background: var(--panel-bg-hover);
  color: var(--text);
}
.inbox-canal-modal__fechar:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.inbox-canal-opcoes { display: grid; gap: 10px; margin-top: 20px; }
.inbox-canal-grupo__titulo {
  margin: 7px 0 6px;
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.inbox-canal-conta {
  display: grid;
  grid-template-columns: 42px 1fr auto;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 13px 14px;
  border: 1px solid var(--border);
  border-radius: 14px;
  color: var(--text);
  background: var(--panel-bg);
  text-align: left;
  cursor: pointer;
  transition: transform .15s ease, border-color .15s ease, background .15s ease;
}
.inbox-canal-conta:hover,
.inbox-canal-conta.is-ativa { transform: translateY(-1px); border-color: var(--accent); background: var(--accent-soft); }
.inbox-canal-conta__icone {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  color: var(--accent);
  background: var(--accent-soft);
  font-weight: 800;
}
.inbox-canal-conta__dados strong,
.inbox-canal-conta__dados small { display: block; }
.inbox-canal-conta__dados small { margin-top: 3px; color: var(--text-muted); }
.inbox-canal-conta__status { color: #25d366; font-size: 11px; font-weight: 700; }
.inbox-canal-vazio { display: grid; justify-items: start; gap: 8px; margin-top: 20px; padding: 18px; border: 1px dashed var(--border); border-radius: 14px; color: var(--text-muted); }
.inbox-canal-vazio strong { color: var(--text); }

.inbox__conversas { flex: 1; overflow-y: auto; }

.inbox__conversa {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 12px 16px;
  cursor: pointer;
  border-bottom: 1px solid var(--border);
  transition: background 0.12s ease;
}
.inbox__conversa:hover { background: var(--panel-bg-hover); }
.inbox__conversa--ativa { background: var(--accent-soft); box-shadow: inset 3px 0 0 var(--accent); }

.inbox__avatar {
  width: 42px; height: 42px; min-width: 42px;
  border-radius: 13px;
  background: linear-gradient(140deg, var(--accent-soft), rgba(19,192,138,0.16));
  border: 1px solid rgba(19,192,138,0.16);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; color: var(--accent-strong);
  position: relative;
  overflow: hidden;
}
.inbox__avatar-inicial {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}
.inbox__avatar-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: var(--panel-bg);
}
.inbox__conversa-info { flex: 1; min-width: 0; }
.inbox__conversa-linha1 {
  display: flex; justify-content: space-between; gap: 8px; align-items: baseline;
}
.inbox__conversa-nome {
  font-size: 14px; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.inbox__conversa-hora { font-size: 11px; color: var(--text-muted); flex-shrink: 0; }
.inbox__conversa-previa {
  display: flex; justify-content: space-between; gap: 8px; align-items: center; margin-top: 2px;
}
.inbox__conversa-texto {
  font-size: 13px; color: var(--text-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.inbox__badge {
  background: var(--accent); color: var(--sobre-cor);
  font-size: 11px; font-weight: 700;
  min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}

/* ── Tags (etapa + canal) no card da conversa ───────────────────── */
.inbox__conversa-tags {
  display: flex; flex-wrap: wrap; gap: 4px;
  margin-top: 4px;
}

/* Selo de setor: ainda emitido pela lista do modal Equipe (gerência) */
.inbox__setor {
  display: inline-flex; align-items: center;
  font-size: 10px; font-weight: 600;
  color: var(--sobre-cor);
  padding: 2px 7px;
  border-radius: 999px;
  white-space: nowrap;
  letter-spacing: 0.01em;
}

/* ── Contagem de conversas no topo ──────────────────────────────── */
.inbox__contagem {
  font-size: 11px; font-weight: 600;
  color: var(--text-muted);
  background: var(--bg);
  border: 1px solid var(--border);
  padding: 2px 8px; border-radius: 999px;
  white-space: nowrap; flex-shrink: 0;
}

/* ── Filtros do painel esquerdo: busca + conta + etapa + lidas ───── */
.inbox__filtros {
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 8px;
  background: var(--panel-bg-hover);
}
.inbox__busca {
  width: 100%;
  font: inherit; font-size: 13px;
  padding: 7px 10px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  background: var(--panel-bg);
  color: var(--text);
}
.inbox__busca:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); }

.inbox__filtros-linha { display: flex; gap: 8px; }
.inbox__filtro-sel {
  flex: 1; min-width: 0;
  font: inherit; font-size: 12px;
  padding: 5px 8px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  background: var(--panel-bg);
  color: var(--text);
  cursor: pointer;
}
.inbox__filtro-sel:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); }

.inbox__chips { display: flex; gap: 6px; }
.inbox__chip {
  font: inherit; font-size: 12px; font-weight: 600;
  padding: 4px 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--panel-bg);
  color: var(--text-muted);
  cursor: pointer;
  transition: background 0.14s ease, color 0.14s ease, border-color 0.14s ease;
}
.inbox__chip:hover { border-color: var(--border-strong); }
.inbox__chip.is-ativo { background: var(--accent-soft); color: var(--accent-strong); border-color: var(--accent); }

/* Selo da etapa do funil no card da conversa */
.inbox__etapa-selo {
  display: inline-flex; align-items: center;
  font-size: 10px; font-weight: 600;
  color: color-mix(in srgb, var(--etapa-cor, var(--accent)) 72%, white);
  background: color-mix(in srgb, var(--etapa-cor, var(--accent)) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--etapa-cor, var(--accent)) 34%, transparent);
  padding: 2px 7px; border-radius: 999px;
  white-space: nowrap;
}
.inbox__janela-selo {
  display: inline-flex;
  align-items: center;
  font-size: 10px;
  font-weight: 700;
  color: var(--aviso);
  background: rgba(217,119,6,0.14);
  border: 1px solid rgba(217,119,6,0.32);
  padding: 2px 7px;
  border-radius: 999px;
  white-space: nowrap;
}

/* ── Botão equipe ───────────────────────────────────────────────── */
#inbox-equipe {
  font-size: 12px; padding: 5px 9px; flex-shrink: 0;
}

/* ── Painel de chat ─────────────────────────────────────────────── */
.inbox__chat { position: relative; flex: 1; display: flex; flex-direction: column; min-width: 0; background: var(--panel-bg); }
.inbox__vazio-chat {
  flex: 1; display: flex; align-items: center; justify-content: center;
  color: var(--text-muted); font-size: 14px;
}
.inbox__vazio-chat[hidden] { display: none; }
.inbox__ativa[hidden] { display: none; }
.inbox__ativa { flex: 1; display: flex; flex-direction: column; min-height: 0; }

  .inbox__chat-topo {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--border);
}
.inbox__chat-nome-wrap {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.inbox__chat-nome { font-size: 15px; font-weight: 600; cursor: pointer; }
.inbox__chat-btn-editar {
  background: rgba(255, 255, 255, 0.05);
  border: none;
  width: 22px;
  height: 22px;
  border-radius: 4px;
  color: var(--text-muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 0.7;
  transition: opacity 0.15s ease, color 0.15s ease, background 0.15s ease;
}
.inbox__chat-btn-editar:hover {
  opacity: 1;
  color: var(--accent);
  background: var(--panel-bg-hover);
}
.inbox__chat-numero { font-size: 12px; color: var(--text-muted); }

/* Linha de contexto do lead no topo do chat: etapa, conta, tags, variáveis */
.inbox__chat-meta {
  display: flex; flex-wrap: wrap; gap: 5px;
  margin-top: 5px;
}
.inbox__chat-meta:empty { display: none; }
.inbox__chat-meta > span {
  font-size: 10.5px; font-weight: 600;
  padding: 2px 7px; border-radius: 999px;
  white-space: nowrap;
}
  .inbox__meta-etapa {
    background: color-mix(in srgb, var(--etapa-cor, var(--accent)) 16%, transparent);
    color: color-mix(in srgb, var(--etapa-cor, var(--accent)) 72%, white);
    border: 1px solid color-mix(in srgb, var(--etapa-cor, var(--accent)) 32%, transparent);
  }
.inbox__meta-conta { background: rgba(37,99,235,0.14); color: var(--info); }
.inbox__meta-tag   { background: var(--bg); border: 1px solid var(--border); color: var(--text-muted); }
.inbox__meta-var   { background: rgba(217,119,6,0.12); color: var(--aviso); font-weight: 500; }

/* Chip da etapa do funil no cabeçalho da conversa.
   Mostra em qual coluna o lead está alocado, e abre um popover pra trocar. */
.inbox__chat-funil { position: relative; display: inline-flex; margin-top: 6px; }
.inbox__chat-funil[hidden] { display: none; }

.inbox__funil-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px 4px 8px;
  border-radius: 999px;
    background: color-mix(in srgb, var(--etapa-cor, var(--accent)) 18%, transparent);
    border: 1px solid color-mix(in srgb, var(--etapa-cor, var(--accent)) 42%, transparent);
    color: color-mix(in srgb, var(--etapa-cor, var(--accent)) 72%, white);
  font: inherit; font-size: 11.5px; font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, transform 0.05s;
}
  .inbox__funil-chip:hover {
    background: color-mix(in srgb, var(--etapa-cor, var(--accent)) 26%, transparent);
    border-color: var(--etapa-cor, var(--accent));
  }
  .inbox__chat-contato {
    position: relative;
    min-height: 42px;
    padding-left: 52px;
  }
  .inbox__chat-avatar {
    position: absolute;
    left: 0;
    top: 0;
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 13px;
    border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
    background: linear-gradient(140deg, var(--accent-soft), rgba(19,192,138,0.16));
    color: var(--accent-strong);
    font-weight: 700;
  }
.inbox__funil-chip:active { transform: scale(0.97); }
.inbox__funil-chip[aria-expanded="true"] {
    background: var(--etapa-cor, var(--accent));
    border-color: var(--etapa-cor, var(--accent));
  color: #fff;
}
.inbox__funil-chip[aria-expanded="true"] .inbox__funil-chip-seta { color: #fff; }

/* Botão registrar fechamento no header da conversa */
.inbox__fechar-cliente-btn {
  display: inline-flex; align-items: center; gap: 5px;
  margin-left: 8px; margin-top: 6px;
  padding: 4px 12px;
  border-radius: 6px;
  background: rgba(25, 158, 112, 0.15);
  border: 1px solid rgba(25, 158, 112, 0.4);
  color: var(--serie-verde, #199e70);
  font: inherit; font-size: 11.5px; font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.inbox__fechar-cliente-btn:hover {
  background: rgba(25, 158, 112, 0.25);
  border-color: var(--serie-verde, #199e70);
}
.inbox__fechar-cliente-btn[hidden] { display: none; }

.inbox__colocar-fluxo-btn {
  display: inline-flex; align-items: center; gap: 5px;
  margin-left: 8px; margin-top: 6px;
  padding: 4px 12px;
  border-radius: 6px;
  background: rgba(245, 196, 48, 0.14);
  border: 1px solid rgba(245, 196, 48, 0.42);
  color: var(--accent, #f5c430);
  font: inherit; font-size: 11.5px; font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.inbox__colocar-fluxo-btn:hover {
  background: rgba(245, 196, 48, 0.24);
  border-color: var(--accent, #f5c430);
}
.inbox__colocar-fluxo-btn[hidden] { display: none; }

#modal-colocar-fluxo {
  box-sizing: border-box;
  width: min(520px, calc(100vw - 32px));
}
.inbox__colocar-fluxo-modal {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}
.inbox__colocar-fluxo-modal .campo,
.inbox__colocar-fluxo-modal .campo__input { min-width: 0; max-width: 100%; }
.inbox__colocar-fluxo-modal .modal__acoes { flex-wrap: wrap; }
.inbox__colocar-fluxo-aviso {
  margin: -4px 0 14px;
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.5;
}
.inbox__colocar-fluxo-erro {
  margin: 4px 0 0;
  padding: 9px 11px;
  border: 1px solid rgba(239, 68, 68, 0.4);
  border-radius: 8px;
  background: rgba(239, 68, 68, 0.12);
  color: #f87171;
  font-size: 12px;
}

/* Botão assumir atendimento no header da conversa */
.inbox__assumir-atendimento-btn {
  display: inline-flex; align-items: center; gap: 5px;
  margin-left: 8px; margin-top: 6px;
  padding: 4px 12px;
  border-radius: 6px;
  background: rgba(59, 130, 246, 0.15);
  border: 1px solid rgba(59, 130, 246, 0.4);
  color: #3b82f6;
  font: inherit; font-size: 11.5px; font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.inbox__assumir-atendimento-btn:hover {
  background: rgba(59, 130, 246, 0.25);
  border-color: #3b82f6;
}
.inbox__assumir-atendimento-btn[hidden] { display: none; }

.inbox__funil-chip-icone { width: 13px; height: 13px; flex-shrink: 0; }
.inbox__funil-chip-seta { width: 11px; height: 11px; flex-shrink: 0; opacity: 0.7; transition: transform 0.15s; }
.inbox__funil-chip[aria-expanded="true"] .inbox__funil-chip-seta { transform: rotate(180deg); opacity: 1; }

.inbox__funil-popover {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 60;
  min-width: 200px; max-width: 280px;
  background: var(--elevado);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  box-shadow: 0 12px 32px rgba(0,0,0,0.45), 0 2px 8px rgba(0,0,0,0.25);
  overflow: hidden;
  animation: inboxFunilPopoverIn 0.14s ease;
}
@keyframes inboxFunilPopoverIn {
  from { opacity: 0; transform: translateY(-4px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.inbox__funil-popover[hidden] { display: none; }

.inbox__funil-popover-titulo {
  font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--text-muted);
  padding: 8px 12px 4px;
}
.inbox__funil-popover-lista {
  list-style: none; margin: 0; padding: 4px 0 6px;
  max-height: 260px; overflow-y: auto;
}
.inbox__funil-popover-item {
    display: flex; align-items: center; justify-content: flex-start; gap: 9px;
  width: 100%; padding: 7px 12px;
  background: transparent; border: none; text-align: left;
  font: inherit; font-size: 13px; color: var(--text);
  cursor: pointer; transition: background 0.1s;
}
  .inbox__funil-popover-item:hover {
    background: color-mix(in srgb, var(--etapa-cor, var(--accent)) 14%, transparent);
    color: color-mix(in srgb, var(--etapa-cor, var(--accent)) 72%, white);
  }
  .inbox__funil-popover-item.is-atual {
    background: color-mix(in srgb, var(--etapa-cor, var(--accent)) 18%, transparent);
    color: color-mix(in srgb, var(--etapa-cor, var(--accent)) 72%, white);
  font-weight: 600;
  cursor: default;
}
  .inbox__funil-popover-item.is-atual:hover {
    background: color-mix(in srgb, var(--etapa-cor, var(--accent)) 18%, transparent);
  }
  .inbox__funil-popover-cor {
    width: 9px; height: 9px; flex: none;
    border-radius: 50%;
    background: var(--etapa-cor, var(--accent));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--etapa-cor, var(--accent)) 18%, transparent);
  }
.inbox__funil-popover-item-vazio {
  padding: 10px 12px; font-size: 12px; color: var(--text-muted); font-style: italic;
  text-align: center;
}

.inbox__chat-acoes { display: flex; align-items: center; gap: 10px; }

/* Toggle da IA */
.inbox__ia-toggle { display: inline-flex; cursor: pointer; user-select: none; }
.inbox__ia-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.inbox__ia-pill {
  font-size: 12px; font-weight: 600;
  padding: 4px 10px; border-radius: 999px;
  border: 1px solid var(--border-strong);
  background: var(--panel-bg); color: var(--text-muted);
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.inbox__ia-toggle input:checked + .inbox__ia-pill {
  background: rgba(19,192,138,0.14); color: var(--sucesso); border-color: var(--sucesso-linha);
}
.inbox__ia-toggle input:focus-visible + .inbox__ia-pill { outline: 2px solid var(--accent); outline-offset: 2px; }

.inbox__janela {
  font-size: 12px; font-weight: 600;
  padding: 4px 10px; border-radius: 999px;
  white-space: nowrap;
}
.inbox__janela--aberta { background: rgba(19,192,138,0.16); color: var(--sucesso); }
.inbox__janela--fechada { background: rgba(217,119,6,0.16); color: var(--aviso); }
.inbox__aviso-janela {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 8px 16px 0;
  padding: 11px 13px;
  border: 1px solid rgba(217,119,6,.38);
  border-radius: 10px;
  background: rgba(217,119,6,.10);
  color: var(--text);
  font-size: 12px;
  line-height: 1.4;
}
.inbox__aviso-janela[hidden] { display: none; }
.inbox__aviso-janela-icone { color: var(--aviso); font-size: 18px; line-height: 1; }
.inbox__aviso-janela > div { display: flex; flex-direction: column; gap: 3px; }
.inbox__aviso-janela strong { color: var(--aviso); font-size: 12.5px; }
.inbox__aviso-janela-regra { font-weight: 700; }

/* Mensagens */
.inbox__mensagens {
  flex: 1; overflow-y: auto;
  padding: 18px;
  display: flex; flex-direction: column; gap: 8px;
  background: var(--panel-bg-hover);
}
.inbox__msg {
  max-width: 72%;
  padding: 8px 12px;
  border-radius: 12px;
  font-size: 14px;
  line-height: 1.4;
  word-wrap: break-word;
  white-space: pre-wrap;
}
.inbox__msg-hora { font-size: 10px; color: var(--text-muted); margin-top: 3px; text-align: right; }
.inbox__data-separador {
  align-self: center;
  position: sticky;
  top: 4px;
  z-index: 1;
  padding: 4px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--panel-bg);
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 700;
}
/* Balões: recebida clara e neutra, enviada num verde CLARO.
   O verde escuro anterior (#123a2c) recebia o texto padrão quase preto por
   herança — preto sobre verde escuro é ilegível. Aqui o fundo é claro e o texto
   continua escuro, o que dá contraste alto sem inventar uma cor de texto nova.
   O vermelho fica reservado para falha, que é o significado dele no resto do painel. */
.inbox__msg--entrada {
  align-self: flex-start;
  background: var(--msg-entrada-bg);
  border: 1px solid var(--msg-entrada-borda);
  box-shadow: 0 1px 1px rgba(15, 23, 32, 0.05);
  border-bottom-left-radius: 4px;
}
.inbox__msg--saida {
  align-self: flex-end;
  background: var(--msg-saida-bg);
  border: 1px solid var(--msg-saida-borda);
  border-bottom-right-radius: 4px;
}
/* A mensagem enviada agora é rosada, então a falha precisa se distinguir por
   mais do que a cor: barra vermelha sólida à esquerda e fundo mais saturado. */
.inbox__msg--falhou {
  background: var(--perigo-soft);
  border-color: var(--perigo-linha);
  border-left: 3px solid var(--perigo);
}
.inbox__msg--falhou .inbox__msg-hora { color: var(--perigo); }
.inbox__alerta-entrega {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border-top: 1px solid var(--perigo-linha);
  border-bottom: 1px solid var(--perigo-linha);
  background: var(--perigo-soft);
  color: var(--perigo);
  font-size: 12px;
}
.inbox__alerta-entrega[hidden] { display: none; }
.inbox__alerta-entrega strong { flex: 0 0 auto; }
.inbox__alerta-entrega span { color: var(--text); }
/* Mesmo desenho do botão da tarja de sincronismo, na cor de perigo: as duas
   tarjas são a mesma peça de interface e não deveriam parecer botões diferentes. */
.inbox__alerta-entrega-acao {
  flex: 0 0 auto;
  margin-left: auto;
  border: 1px solid var(--perigo-linha);
  border-radius: 7px;
  padding: 5px 9px;
  background: transparent;
  color: var(--perigo);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.inbox__alerta-entrega-acao:hover { background: rgba(220, 38, 38, .12); }
.inbox__alerta-sync {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 16px;
  border-top: 1px solid rgba(217,119,6,.35);
  border-bottom: 1px solid rgba(217,119,6,.35);
  background: rgba(217,119,6,.10);
  color: var(--text);
  font-size: 12px;
}
.inbox__alerta-sync[hidden] { display: none; }
.inbox__alerta-sync strong { color: var(--aviso); }
.inbox__alerta-sync button {
  flex: 0 0 auto;
  border: 1px solid rgba(217,119,6,.55);
  border-radius: 7px;
  padding: 5px 9px;
  background: transparent;
  color: var(--aviso);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.inbox__alerta-sync button:hover { background: rgba(217,119,6,.12); }
.inbox__falha-explicada {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 8px;
  padding: 8px 9px;
  border-radius: 8px;
  background: rgba(220, 38, 38, .08);
  font-size: 12px;
  line-height: 1.35;
}
.inbox__falha-explicada strong { color: var(--perigo); }
.inbox__falha-acao { font-weight: 700; }

/* Mídia recebida/enviada dentro do balão: foto, vídeo, áudio, documento */
.inbox__msg-midia {
  display: block;
  max-width: 240px; max-height: 320px;
  width: auto; height: auto;
  border-radius: 10px;
  margin-bottom: 4px;
  background: var(--bg);
}
.inbox__msg audio { display: block; max-width: 240px; margin-bottom: 4px; }
.inbox__msg-doc {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 600;
  color: var(--accent-strong); text-decoration: none;
  padding: 6px 4px;
}
.inbox__msg-doc:hover { text-decoration: underline; }
.inbox__msg-texto { white-space: pre-wrap; word-wrap: break-word; }

/* Confirmação de entrega por mensagem. "aguardando" (aceito, sem confirmação)
   é neutro/âmbar — NÃO é sucesso; só entregue/lido ficam verdes. */
.inbox__msg-status { font-weight: 600; cursor: help; }
.inbox__msg-status--enviado,
.inbox__msg-status--pendente  { color: var(--aviso); }
/* Entregue estava usando o vermelho do tema, que lê como erro — e contradizia o
   comentário acima. Verde para entregue, azul para lido. */
.inbox__msg-status--entregue  { color: var(--sucesso); }
.inbox__msg-status--lido      { color: var(--info); }
.inbox__msg-status--falhou    { color: var(--perigo); }

/* Composer */
.inbox__composer {
  display: flex; gap: 10px; align-items: flex-end;
  padding: 12px 16px;
  border-top: 1px solid var(--border);
}
.inbox__texto {
  flex: 1;
  font: inherit; font-size: 14px;
  padding: 11px 14px;
  border: 1px solid var(--border-strong);
  border-radius: 22px;
  background: var(--bg);
  resize: none;
  max-height: 120px;
}
.inbox__texto:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); background: var(--panel-bg); }
.inbox__texto:disabled { cursor: not-allowed; opacity: .68; }
.inbox__respostas-rapidas.is-bloqueado .inbox__resposta-chip {
  pointer-events: none;
  opacity: .45;
}

/* Respostas rápidas no rodapé da conversa. */
.inbox__respostas-rapidas {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 16px 10px;
  border-bottom: 1px solid var(--border);
  background: var(--panel-bg);
  min-width: 0;
}
.inbox__resposta-chips {
  display: flex;
  gap: 7px;
  overflow-x: auto;
  scrollbar-width: thin;
  padding: 2px 0;
}
.inbox__resposta-config,
.inbox__resposta-chip {
  flex: 0 0 auto;
  padding: 7px 11px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg);
  color: var(--text);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}
.inbox__resposta-config { color: var(--accent-strong); font-weight: 700; }
.inbox__resposta-chip:hover,
.inbox__resposta-config:hover { border-color: var(--accent); background: var(--accent-soft); }
.inbox__resposta-sugestoes {
  position: absolute;
  z-index: 30;
  left: 72px;
  right: 90px;
  bottom: 104px;
  max-height: 280px;
  overflow-y: auto;
  padding: 6px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--panel-bg);
  box-shadow: 0 14px 40px rgba(15, 23, 42, .18);
}
.inbox__resposta-sugestoes[hidden] { display: none; }
.inbox__resposta-sugestao {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 9px 11px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text);
  text-align: left;
  cursor: pointer;
}
.inbox__resposta-sugestao:hover { background: var(--accent-soft); }
.inbox__resposta-sugestao strong { color: var(--accent-strong); }
.inbox__resposta-sugestao span {
  color: var(--text-muted);
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#modal-respostas-rapidas {
  width: min(680px, calc(100vw - 32px));
  max-width: calc(100vw - 32px);
  max-height: calc(100vh - 32px);
  box-sizing: border-box;
  overflow: hidden;
}
.inbox__resposta-modal {
  width: 100%;
  min-width: 0;
  max-height: calc(100vh - 84px);
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 4px;
  box-sizing: border-box;
}
.inbox__resposta-form { display: grid; gap: 12px; margin-top: 16px; }
.inbox__atalho-campo { display: flex; align-items: center; gap: 6px; min-width: 0; }
.inbox__atalho-campo > span { font-size: 18px; font-weight: 700; color: var(--accent-strong); }
.inbox__atalho-campo .campo__input { flex: 1; min-width: 0; box-sizing: border-box; }
.inbox__resposta-mensagem { resize: vertical; min-height: 110px; }
.inbox__resposta-audio-campo { gap: 8px; }
.inbox__resposta-audio-campo small,
.inbox__resposta-audio-nome { color: var(--text-muted); font-size: 12px; }
.inbox__resposta-audio-campo audio { width: 100%; }
.inbox__resposta-form-acoes { display: flex; justify-content: flex-end; gap: 8px; }
.inbox__resposta-lista { margin-top: 18px; max-height: 280px; overflow-y: auto; }
.inbox__resposta-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-top: 1px solid var(--border);
}
.inbox__resposta-item > div:first-child { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.inbox__resposta-item strong { color: var(--accent-strong); font-size: 13px; }
.inbox__resposta-item span { color: var(--text-muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inbox__resposta-item > div:last-child { display: flex; gap: 6px; }
.inbox__resposta-vazio { color: var(--text-muted); font-size: 13px; text-align: center; padding: 16px; }

@media (max-width: 720px) {
  .inbox__resposta-config { padding-inline: 9px; }
  .inbox__resposta-sugestoes { left: 12px; right: 12px; }
  #modal-respostas-rapidas { padding: 18px; }
  .inbox__resposta-item { align-items: flex-start; flex-direction: column; }
  .inbox__resposta-item > div:last-child { width: 100%; justify-content: flex-end; }
}

.inbox__simular-aviso { font-size: 12px; color: var(--text-muted); margin-bottom: 4px; }

/* ── Modal Equipe ───────────────────────────────────────────────── */
.equipe__secao {
  margin-bottom: 24px;
}
.equipe__secao-titulo {
  font-size: 14px; font-weight: 600;
  margin: 0 0 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}

.equipe__item {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 7px 0;
  border-bottom: 1px solid var(--border);
}
.equipe__item:last-child { border-bottom: none; }

.equipe__nome {
  font-size: 13px; color: var(--text);
}

.equipe__vazio {
  font-size: 13px; color: var(--text-muted);
  margin: 8px 0;
}

#lista-setores,
#lista-atendentes {
  margin-bottom: 16px;
}

/* Passo do fluxo em andamento, no cabeçalho do chat */
.inbox__chat-fluxo {
  display: inline-block;
  margin-left: 8px;
  font-size: 11.5px;
  color: var(--accent-strong);
  background: var(--accent-soft);
  border-radius: 6px;
  padding: 2px 8px;
  vertical-align: middle;
}
.inbox__chat-fluxo[hidden] { display: none; }

/* Variação "atendimento manual": conversa tirada do fluxo pelo atendente.
   Verde-água para passar a ideia de "controle humano", para contrastar com
   fluxo/campanha (accent-roxo). Borda mais marcada porque o estado é firme:
   bot não vai mandar nada até alguém religar a IA. */
.inbox__chat-fluxo--manual {
  background: rgba(25, 158, 112, 0.18);
  color: #199e70;
  border: 1px solid rgba(25, 158, 112, 0.45);
  font-weight: 600;
}

/* Selo de canal (API vs QR) na lista de conversas */
.inbox__canal-selo {
  display: inline-block; font-size: 10.5px; font-weight: 600;
  border-radius: 5px; padding: 1px 6px;
}
.inbox__canal-selo--api { background: rgba(19,192,138,0.16); color: var(--accent-strong); }
.inbox__canal-selo--web { background: rgba(217,119,6,0.16); color: var(--aviso); }

/* Filtros de mensagem no chat: Todas / Enviadas / Recebidas (item 2/10). */
.inbox__msg-filtros {
  display: flex;
  gap: 6px;
  padding: 8px 16px 0;
}
.inbox__msg-filtro {
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  padding: 4px 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--panel-bg);
  color: var(--text-muted);
  cursor: pointer;
  transition: background 0.14s ease, color 0.14s ease, border-color 0.14s ease;
}
.inbox__msg-filtro:hover { border-color: var(--border-strong); }
.inbox__msg-filtro.is-ativo { background: var(--accent-soft); color: var(--accent-strong); border-color: var(--accent); }
.inbox__msg-vazio { color: var(--text-muted); text-align: center; padding: 24px 16px; font-size: 13px; }

/* ── Anexos no compositor ──────────────────────────────────────────── */

.inbox__envio-status {
  padding: 6px 16px 10px;
  font-size: 12.5px; color: var(--text-fraco);
}
.inbox__envio-status--erro { color: var(--perigo); }

/* Foto na conversa: clicável, com dica visual de que abre. */
.inbox__msg-midia { cursor: zoom-in; }

/* ── Visualizador de imagem em tela cheia ──────────────────────────── */
.lightbox {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0, 0, 0, .88);
  padding: 56px 16px 16px;
}
.lightbox[hidden] { display: none; }
.lightbox__img {
  max-width: 100%; max-height: 100%;
  object-fit: contain;
  border-radius: 6px;
}
.lightbox__barra {
  position: absolute; top: 0; left: 0; right: 0;
  display: flex; justify-content: flex-end; gap: 8px;
  padding: 12px 16px;
}
.lightbox__acao {
  font: inherit; font-size: 13px; text-decoration: none;
  padding: 8px 14px; border-radius: 8px;
  background: rgba(255, 255, 255, .12); color: var(--sobre-cor);
  border: 1px solid rgba(255, 255, 255, .25);
  cursor: pointer;
}
.lightbox__acao:hover { background: rgba(255, 255, 255, .22); }

/* ── Gravação de áudio ─────────────────────────────────────────────── */


.inbox__gravacao {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 16px 12px;
  border-top: 1px solid var(--border);
}
.inbox__gravacao[hidden] { display: none; }
.inbox__gravacao-ponto {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--perigo);
  animation: pulsoGravacao 1s ease-in-out infinite;
}
@keyframes pulsoGravacao { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
.inbox__gravacao-tempo {
  font-variant-numeric: tabular-nums;
  font-size: 15px; font-weight: 600; color: var(--text);
  min-width: 44px;
}
.inbox__gravacao-dica { flex: 1; font-size: 13px; color: var(--text-fraco); }

@media (prefers-reduced-motion: reduce) {
  .inbox__gravacao-ponto { animation: none; }
}

/* ── Compositor no estilo WhatsApp ─────────────────────────────────── */
/* Ícones em traço, sem caixa: a caixa fica só na área de texto, e os botões
   flutuam ao lado — é o que dá o acabamento leve do WhatsApp Web. */
.inbox__icone {
  flex: none;
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  background: none; border: none; border-radius: 50%;
  color: var(--text-fraco);
  cursor: pointer;
  transition: background .15s, color .15s;
}
.inbox__icone svg {
  width: 22px; height: 22px;
  fill: none; stroke: currentColor;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.inbox__icone:hover { background: var(--border); color: var(--text); }
.inbox__icone:disabled { opacity: .4; cursor: default; }
.inbox__icone.is-gravando { background: var(--perigo); color: var(--sobre-cor); }

/* A área de texto vira a "pílula" central. */
.inbox__composer .inbox__texto {
  border-radius: 22px;
  padding: 11px 18px;
}

/* ── Prévia antes de enviar ────────────────────────────────────────── */
.previa {
  border-top: 1px solid var(--border);
  padding: 14px 16px 12px;
  background: var(--bg);
}
.previa[hidden] { display: none; }

.previa {
  display: flex; align-items: center; gap: 12px;
}
.previa__corpo {
  flex: 1;
  display: flex; align-items: center; gap: 12px;
  min-width: 0;
}
.previa__acoes { display: flex; gap: 2px; flex: none; }
.previa__img {
  max-width: 96px; max-height: 96px; cursor: zoom-in;
  border-radius: 10px; object-fit: contain;
  background: var(--border);
}
.previa__corpo audio { width: 100%; max-width: 420px; }
.previa__arquivo {
  display: flex; align-items: center; gap: 10px;
  font-size: 13.5px; color: var(--text);
}
.previa__arquivo-icone { font-size: 24px; }
.previa__arquivo-nome { font-weight: 600; word-break: break-all; }
.previa__arquivo-tam { color: var(--text-fraco); font-size: 12.5px; }


/* No modo cheio a altura vem do pai, não de um cálculo fixo. */
body.modo-cheio .inbox { height: auto; flex: 1; min-height: 0; }

/* Ponto parado quando a gravação está em pausa — sem piscar, para não sugerir
   que ainda está capturando som. */
.inbox__gravacao-ponto.is-pausado { animation: none; background: var(--text-muted); }

/* `hidden` é do estilo padrão do navegador e perde para qualquer regra de autor
   com `display`. Sem isto, `.inbox__icone[hidden]` continuava visível — foi assim
   que a lupa "ver imagem" aparecia também na prévia de áudio. */
.inbox__icone[hidden] { display: none; }

/* ── Detalhe da entrega ────────────────────────────────────────────── */
.inbox__msg-status { text-decoration: underline dotted; text-underline-offset: 2px; }

.inbox__entrega {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px dashed rgba(17, 17, 17, 0.18);
  font-size: 11.5px;
  text-align: left;
  color: var(--text);
}
.inbox__entrega[hidden] { display: none; }
.inbox__entrega-linha {
  display: flex; align-items: baseline; gap: 6px;
  padding: 1px 0;
}
/* Largura suficiente para "✓✓" sem quebrar linha — com 15px o segundo tique
   caía para a linha de baixo. */
.inbox__entrega-marca { width: 24px; flex: none; text-align: left; white-space: nowrap; letter-spacing: -1px; }
.inbox__entrega-nome { flex: 1; }
.inbox__entrega-hora { font-variant-numeric: tabular-nums; }
.inbox__entrega-gap { color: var(--text-muted); }
.inbox__entrega-pendente { color: var(--text-muted); }
.inbox__entrega-motivo {
  margin-top: 4px;
  padding: 5px 7px;
  border-radius: 6px;
  background: rgba(200, 30, 43, 0.10);
  color: var(--perigo);
  line-height: 1.35;
}
.inbox__entrega-codigo { color: var(--text-muted); margin-top: 2px; }

/* source: css/envio.css */
/* Painel Envio — importação e busca de contatos */

.envio { display: flex; flex-direction: column; gap: 20px; height: 100%; }

.envio__header h1 { font-family: var(--font-display); font-size: 26px; margin: 0; }
.envio__header p { color: var(--text-muted); margin: 4px 0 0; max-width: 640px; }

/* Abas */
.envio__tabs { display: flex; gap: 6px; border-bottom: 1px solid var(--border); }
/* A tira original dá lugar à do centro de gestão, montada a partir das etapas
   reais do funil. Os botões continuam no DOM (para não deixar ids órfãos), e
   por isso o `hidden` precisa vencer o `display: flex` acima — sem esta regra
   o atributo não esconde nada e as duas tiras aparecem empilhadas. */
.envio__tabs[hidden] { display: none; }
.envio__tab {
  appearance: none; background: none; border: none; cursor: pointer;
  padding: 10px 14px; font: inherit; color: var(--text-muted);
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  display: inline-flex; align-items: center; gap: 8px;
}
.envio__tab:hover { color: var(--text); }
.envio__tab.is-active { color: var(--accent-strong); border-bottom-color: var(--accent); font-weight: 600; }
.envio__badge {
  background: var(--panel-bg-hover); color: var(--text-muted);
  border-radius: 999px; padding: 1px 8px; font-size: 12px; font-weight: 600;
}

.envio__aba { display: flex; flex-direction: column; gap: 16px; min-height: 0; }
.envio__aba[hidden] { display: none; }

/* Área de colar */
.envio__colar { display: flex; flex-direction: column; gap: 10px; }
.envio__tag-row { margin-bottom: 4px; }
.envio__tag-row .campo__input { border-color: var(--accent); background: rgba(246,196,0,0.05); font-weight: 500; }
.envio__tag-row .campo__label { color: var(--accent); font-weight: 600; }
.envio__textarea { resize: vertical; font-family: ui-monospace, "Cascadia Code", monospace; font-size: 12.5px; line-height: 1.5; }
.envio__contador { font-size: 13.5px; color: var(--text-muted); margin-top: -2px; }
.envio__contador strong { color: var(--accent-strong); font-size: 15px; font-family: var(--font-display); }

.envio__acoes-topo { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.envio__dica { color: var(--text-muted); font-size: 13px; }
.envio__arquivo-nome { color: var(--text-muted); font-size: 12.5px; vertical-align: middle; }

/* Estado de arrastar arquivo sobre a caixa de colar */
.envio__textarea { transition: border-color .15s, box-shadow .15s, background .15s; }
.envio__textarea.is-dragover {
  border: 2px dashed var(--accent);
  background: var(--accent-soft);
  box-shadow: 0 0 0 4px var(--accent-ring);
  outline: none;
}

/* Resumo (cards de contagem) */
.envio__resumo { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; }
.envio__card {
  background: var(--panel-bg); border: 1px solid var(--border); border-radius: var(--r-md);
  padding: 12px 14px; box-shadow: var(--shadow-sm);
}
.envio__card strong { display: block; font-size: 22px; font-family: var(--font-display); line-height: 1.1; }
.envio__card span { color: var(--text-muted); font-size: 12.5px; }
.envio__card--novo strong { color: var(--accent-strong); }
.envio__card--duplicado strong { color: var(--aviso); }
.envio__card--repetido strong { color: var(--text-muted); }
.envio__card--invalido strong { color: var(--perigo); }

.envio__preview-topo { display: flex; gap: 10px; align-items: center; }
.envio__filtro { flex: 1; }

/* Tabela */
.envio__tabela-wrap {
  overflow: auto; border: 1px solid var(--border); border-radius: var(--r-md);
  background: var(--panel-bg); max-height: 52vh;
}
.envio__tabela { width: 100%; border-collapse: collapse; font-size: 13px; }
.envio__tabela th {
  position: sticky; top: 0; background: var(--panel-bg-hover); z-index: 1;
  text-align: left; padding: 9px 12px; font-weight: 600; color: var(--text-muted);
  white-space: nowrap; border-bottom: 1px solid var(--border);
}
.envio__tabela td { padding: 8px 12px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.envio__tabela tr:last-child td { border-bottom: none; }
.envio__tabela tbody tr:hover { background: var(--panel-bg-hover); }
.envio__num { font-family: ui-monospace, monospace; }
.envio__vazio { text-align: center; color: var(--text-muted); padding: 24px; }

/* Selos de situação */
.envio__selo {
  display: inline-block; padding: 2px 9px; border-radius: 999px;
  font-size: 11.5px; font-weight: 600; white-space: nowrap;
}
.envio__selo--novo { background: var(--accent-soft); color: var(--accent-strong); }
.envio__selo--duplicado { background: rgba(217,119,6,0.16); color: var(--aviso); }
.envio__selo--repetido { background: var(--panel-bg-hover); color: var(--text-muted); }
.envio__selo--invalido { background: rgba(220,38,38,0.15); color: var(--perigo); }

.envio__nota { color: var(--text-muted); font-size: 12.5px; margin: 0; }

/* Busca no banco */
.envio__busca { display: flex; gap: 10px; }
.envio__busca .campo__input { flex: 1; }

.envio__paginacao { display: flex; align-items: center; gap: 14px; justify-content: center; }
.envio__paginacao span { color: var(--text-muted); font-size: 13px; }
.envio__paginacao .btn[disabled] { opacity: .45; cursor: default; }

.envio__extras { color: var(--text-muted); font-size: 12px; }
.envio__site a { color: var(--accent-strong); text-decoration: none; }
.envio__site a:hover { text-decoration: underline; }

/* Selo de status de envio na lista de contatos (item 3) — a pessoa vê quem já
   foi contactado sem precisar abrir cada um. */
.envio__filtro-envio { max-width: 190px; }
.envio__selo-envio {
  display: inline-block;
  padding: 2px 9px;
  font-size: 11px;
  font-weight: 700;
  border-radius: 999px;
  white-space: nowrap;
}
.envio__selo-envio--enviado { color: var(--sucesso); background: rgba(16,185,129,0.15); }
.envio__selo-envio--erro    { color: var(--perigo); background: rgba(246,196,0,0.12); }
.envio__selo-envio--nunca   { color: var(--text-muted); background: var(--panel-bg-hover); }

/* source: css/campanhas.css */
/* campanhas.css — seção Campanhas dentro da view Disparo */

/* ── Seção principal ─────────────────────────────────────────── */
.campanhas-sec {
  margin-top: 20px;
  min-width: 0;
  max-width: 100%;
}

.campanhas-sec__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 18px;
  min-width: 0;
}

.campanhas-sec__head h2 {
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text);
  margin-bottom: 3px;
}

.campanhas-sec__head p {
  font-size: 0.875rem;
  color: var(--text-muted);
  margin: 0;
}

/* ── Lista de campanhas ──────────────────────────────────────── */
.campanhas {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.campanhas__vazio {
  color: var(--text-muted);
  font-size: 0.875rem;
  padding: 8px 0;
}

/* ── Cartão de campanha ──────────────────────────────────────── */
.campanha {
  background: var(--panel-bg);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 16px 18px;
  box-shadow: var(--shadow-sm);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px 16px;
  align-items: start;
  transition: box-shadow 0.16s ease, border-color 0.16s ease;
}

.campanha:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--border-strong);
}

.campanha__info {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.campanha__nome {
  font-weight: 700;
  font-size: 0.9375rem;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.campanha__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 0.78rem;
  color: var(--text-muted);
}

/* ── Selos (status + modo) ───────────────────────────────────── */
.campanha__status,
.campanha__modo {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  white-space: nowrap;
}

.campanha__status::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

.campanha__status--rodando {
  color: var(--aviso);
  background: rgba(217,119,6,0.16);
}
.campanha__status--rodando::before {
  background: var(--aviso);
  animation: pulsar 1.4s ease-in-out infinite;
}

.campanha__status--concluida {
  color: var(--sucesso);
  background: rgba(19,192,138,0.14);
}
.campanha__status--concluida::before { background: var(--sucesso); }

.campanha__status--pausada,
.campanha__status--rascunho {
  color: var(--text-muted);
  background: var(--panel-bg-hover);
}
.campanha__status--pausada::before,
.campanha__status--rascunho::before { background: var(--text-fraco); }

.campanha__status--falhou {
  color: var(--perigo);
  background: rgba(220,38,38,0.15);
}
.campanha__status--falhou::before { background: var(--perigo); }

@keyframes pulsar {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.4; }
}

.campanha__modo {
  background: var(--accent-soft);
  color: var(--accent-strong);
}

/* ── Barra de progresso ──────────────────────────────────────── */
.campanha__progresso {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
}

.campanha__barra {
  flex: 1;
  height: 5px;
  background: var(--border);
  border-radius: 999px;
  overflow: hidden;
}

.campanha__barra-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--accent-strong));
  border-radius: 999px;
  transition: width 0.4s ease;
}

.campanha__progresso-texto {
  font-size: 0.72rem;
  color: var(--text-muted);
  white-space: nowrap;
  flex-shrink: 0;
}

/* ── Ações do cartão ─────────────────────────────────────────── */
.campanha__acoes {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}

.campanha__btn {
  font: inherit;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: var(--r-sm);
  border: 1px solid var(--border-strong);
  background: var(--panel-bg);
  color: var(--text);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.14s ease, border-color 0.14s ease;
}
.campanha__btn:hover {
  background: var(--panel-bg-hover);
  border-color: var(--accent);
  color: var(--accent-strong);
}

/* ── Modal de nova campanha ──────────────────────────────────── */
#modal-campanha {
  width: 480px;
}

.camp-agendar-toggle {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 14px;
  padding: 13px 14px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--panel-bg);
  cursor: pointer;
}
.camp-agendar-toggle input { margin-top: 3px; accent-color: var(--accent); }
.camp-agendar-toggle span { display: grid; gap: 3px; }
.camp-agendar-toggle strong { color: var(--text); font-size: .875rem; }
.camp-agendar-toggle small,
.camp-agendamento__fuso { color: var(--text-muted); line-height: 1.35; }
.camp-agendamento {
  margin-top: 10px;
  padding: 14px;
  border: 1px solid var(--accent);
  border-radius: var(--r-md);
  background: var(--accent-soft);
}
.camp-agendamento[hidden] { display: none !important; }
.camp-agendamento__resumo {
  margin: 8px 0 4px;
  color: var(--text);
  font-size: .8125rem;
  font-weight: 600;
}

/* Erro do modal */
.modal__erro {
  font-size: 0.8125rem;
  color: var(--perigo);
  font-weight: 500;
  display: none;
}

.modal__erro:not(:empty) {
  display: block;
}

/* Garante que os campos alternados (texto x template) escondam de fato:
   .campo tem display:flex no styles.css, que venceria o atributo [hidden]. */
#camp-campo-texto[hidden],
#camp-campo-template[hidden] {
  display: none !important;
}


/* ═══════════════════════════════════════════════════════════════
   NOVO CONTRATO — tabela empresarial de campanhas
   ═══════════════════════════════════════════════════════════════ */

/* ── Container da tabela criado pelo JS (#disp-tabela-slot) ─── */
/* O JS não usa .tabela-campanhas-wrap — coloca a tabela diretamente no #disp-tabela-slot. */
#disp-tabela-slot {
  overflow-x: auto;
  max-width: 100%;
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--panel-bg);
}

/* ── Wrapper com scroll horizontal (reservado para HTML futuro) ─ */
.tabela-campanhas-wrap {
  overflow-x: auto;
  max-width: 100%;
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--panel-bg);
}

/* ── Tabela principal ────────────────────────────────────────── */
.tabela-campanhas {
  width: 100%;
  min-width: 760px;
  border-collapse: collapse;
  font-size: 0.8125rem;
}

/* ── Cabeçalho ───────────────────────────────────────────────── */
.tabela-campanhas thead tr {
  border-bottom: 1px solid var(--border);
}

.tabela-campanhas thead th {
  padding: 8px 16px;
  font-size: 0.68rem;
  font-weight: 700;
  position: sticky;
  top: 0;
  z-index: 2;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  text-align: left;
  white-space: nowrap;
  background: var(--bg);
  user-select: none;
}

.tabela-campanhas thead th:last-child,
.tabela-campanhas thead th.col-acoes {
  text-align: right;
}

.tabela-campanhas thead th.col-num {
  text-align: right;
}

/* ── Afordância de ordenação ─────────────────────────────────── */
th.is-ordenavel {
  cursor: pointer;
  position: relative;
  padding-right: 24px;
}
th.is-ordenavel:hover { color: var(--text); }
th.is-ordenavel:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
  box-shadow: inset 0 0 0 3px var(--accent-ring);
}

th.is-ordenavel::after {
  content: "↕";
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.62rem;
  opacity: 0.35;
}
th.is-ordenado-asc::after  { content: "↑"; opacity: 0.85; color: var(--accent); }
th.is-ordenado-desc::after { content: "↓"; opacity: 0.85; color: var(--accent); }

/* ── Linhas ──────────────────────────────────────────────────── */
.campanha-linha {
  border-bottom: 1px solid var(--border);
  transition: background 0.11s ease;
}
.campanha-linha:last-child { border-bottom: none; }
.campanha-linha:hover { background: var(--panel-bg-hover); }

.campanha-linha.is-selecionada {
  background: var(--accent-soft);
}
.campanha-linha.is-selecionada:hover {
  background: rgba(246,196,0,0.1);
}

.tabela-campanhas td {
  padding: 0 16px;
  height: 44px;
  vertical-align: middle;
  color: var(--text);
}

/* ── Colunas de conteúdo ─────────────────────────────────────── */
.campanha-nome {
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--text);
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.campanha-conta,
.campanha-tipo {
  font-size: 0.78rem;
  color: var(--text-muted);
  white-space: nowrap;
}

/* ── Coluna numérica ─────────────────────────────────────────── */
.metrica-num {
  font-variant-numeric: tabular-nums;
  text-align: right;
  font-size: 0.8125rem;
  color: var(--text);
  white-space: nowrap;
}
.metrica-num--muted { color: var(--text-muted); }
.metrica-num--verde { color: var(--sucesso); }
.metrica-num--azul  { color: var(--info); }
.metrica-num--falha { color: var(--accent); }

/* ── Ações por linha ─────────────────────────────────────────── */
.campanha-acoes {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
}

.campanha-linha:hover .campanha-acao-btn,
.campanha-linha:focus-within .campanha-acao-btn { opacity: 1; }

.campanha-acao-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  /* Largura pelo conteúdo, não fixa: os botões recebem TEXTO ("Detalhe",
     "Duplicar", "Excluir"), e a largura fixa de 28px (feita para ícone) fazia o
     texto transbordar e sobrepor o botão vizinho — o "um em cima do outro". */
  padding: 0 9px;
  height: 28px;
  white-space: nowrap;
  border: none;
  background: transparent;
  color: var(--text-muted);
  border-radius: var(--r-sm);
  cursor: pointer;
  font-size: 0.8rem;
  transition: background 0.11s ease, color 0.11s ease, opacity 0.14s ease;
}
.campanha-acao-btn:hover { background: var(--panel-bg-hover); color: var(--text); }
.campanha-acao-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  box-shadow: 0 0 0 3px var(--accent-ring);
}
.campanha-acao-btn--detalhe:hover { color: var(--info); }
.campanha-acao-btn--pausar:hover  { color: var(--aviso); }
.campanha-acao-btn--excluir:hover { color: var(--accent); }

/* ── Status chip ─────────────────────────────────────────────── */
.status-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 700;
  white-space: nowrap;
  letter-spacing: 0.02em;
}
.status-chip::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  flex-shrink: 0;
}

.status-chip.is-rascunho {
  color: var(--text-muted);
  background: var(--panel-bg-hover);
}
.status-chip.is-rascunho::before { background: var(--text-muted); }

.status-chip.is-agendada {
  color: #2563eb;
  background: rgba(37, 99, 235, 0.1);
}
.status-chip.is-agendada::before { background: #3b82f6; }
.campanha-agendada-hora {
  display: block;
  margin-top: 4px;
  color: var(--text-muted);
  font-size: .68rem;
  white-space: nowrap;
}

.status-chip.is-rodando {
  color: var(--aviso);
  background: rgba(183,121,31,0.12);
}
.status-chip.is-rodando::before {
  background: var(--aviso);
  animation: pulsar-chip 1.4s ease-in-out infinite;
}

.status-chip.is-pausada {
  color: var(--text-muted);
  background: var(--panel-bg-hover);
}
.status-chip.is-pausada::before { background: var(--text-muted); }

.status-chip.is-concluida {
  color: var(--sucesso);
  background: rgba(15,122,77,0.12);
}
.status-chip.is-concluida::before { background: var(--sucesso); }

.status-chip.is-falhou {
  color: var(--accent);
  background: rgba(246,196,0,0.10);
}
.status-chip.is-falhou::before { background: var(--accent); }

/* ── Barra de progresso segmentada ──────────────────────────── */
.progresso-barra {
  display: flex;
  align-items: center;
  height: 6px;
  border-radius: var(--r-pill);
  overflow: hidden;
  background: var(--border);
  min-width: 80px;
  gap: 1px;
}

.progresso-seg {
  height: 100%;
  min-width: 2px;
  flex-shrink: 0;
  transition: width 0.35s ease;
}

/* Primeiro e último segmentos preservam arredondamento da barra */
.progresso-seg:first-child { border-radius: var(--r-pill) 0 0 var(--r-pill); }
.progresso-seg:last-child  { border-radius: 0 var(--r-pill) var(--r-pill) 0; }
.progresso-seg:only-child  { border-radius: var(--r-pill); }

.progresso-seg.is-lido     { background: var(--info); }
.progresso-seg.is-entregue { background: var(--sucesso); }
.progresso-seg.is-enviado  { background: var(--info); }
.progresso-seg.is-falhou   { background: var(--accent); }
.progresso-seg.is-pendente { background: rgba(17,17,17,.06); }

/* Largura fixa alinha barras de progresso entre todas as linhas. */
.tabela-campanhas td.col-progresso { width: 140px; }

/* ── Wrapper da barra + percentual ──────────────────────────── */
.progresso-wrapper {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.progresso-wrapper .progresso-barra { flex: 1; min-width: 40px; }

/* Percentual com largura fixa evita que a coluna dance entre atualizações. */
.progresso-pct {
  font-size: 0.75rem;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  width: 30px;
  text-align: right;
  flex-shrink: 0;
  white-space: nowrap;
}

/* ── Erro principal da linha (discreto, âmbar) ───────────────── */
.campanha-erro-principal {
  display: block;
  font-size: 0.7rem;
  color: var(--aviso);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
  margin-top: 2px;
}

/* ── Motivo do cancelamento (recusa deliberada, não falha) ───── */
/* Cinza, não âmbar: o sistema não errou, ele decidiu não enviar. Pintar de
   alerta faria "fluxo já recebido" parecer defeito a corrigir. */
.campanha-motivo-cancelamento {
  display: block;
  font-size: 0.7rem;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
  margin-top: 2px;
}

/* No drawer há largura para a frase inteira — cortar a orientação com
   reticências deixaria só o rótulo, que é justamente a parte que a pessoa já
   leu na tabela. */
.campanha-motivo-cancelamento--completo {
  white-space: normal;
  overflow: visible;
  max-width: none;
  line-height: 1.4;
}

/* ── Subtítulo contextual ────────────────────────────────────── */
#campanhas-subtitulo,
.campanhas-subtitulo {
  font-size: 0.875rem;
  color: var(--text-muted);
  margin: 2px 0 0;
}

/* ── Barra de ações em massa ─────────────────────────────────── */
/* Flutua sobre a tabela, sem empurrar o layout. */
.campanha-bulk-bar {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 18px;
  background: var(--panel-bg);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-pill);
  box-shadow: var(--shadow-md);
  z-index: 110;
  white-space: nowrap;
}
.campanha-bulk-bar[hidden] { display: none; }

.campanha-bulk-info {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text);
}

.campanha-bulk-acoes {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* ── Checkbox de seleção ─────────────────────────────────────── */
.tabela-campanhas__check {
  width: 44px;
  padding: 0 10px;
  text-align: center;
}

.campanha-select,
.tabela-campanhas__check input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--accent);
  cursor: pointer;
  vertical-align: middle;
}
.campanha-select:focus-visible,
.tabela-campanhas__check input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ── Botão de ação desabilitado legível ──────────────────────── */
.campanha-acao-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.campanha-linha:hover .campanha-acao-btn:disabled {
  opacity: 0.35;
}

/* ── Responsivo: tabela → lista em telas estreitas ───────────── */
@media (max-width: 640px) {
  .tabela-campanhas-wrap {
    border: none;
    background: transparent;
  }

  .tabela-campanhas,
  .tabela-campanhas tbody,
  .tabela-campanhas tr,
  .tabela-campanhas td {
    display: block;
  }

  .tabela-campanhas thead {
    display: none;
  }

  .campanha-linha {
    background: var(--panel-bg);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    padding: 12px 14px;
    margin-bottom: 8px;
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto auto;
    gap: 6px 8px;
    align-items: start;
  }
  .campanha-linha:last-child { border-bottom: 1px solid var(--border); }
  .campanha-linha:hover { background: var(--panel-bg-hover); }

  /* cada td vira display:block mas dentro do grid do tr */
  .campanha-linha td { padding: 0; height: auto; }

  /* primeira coluna: nome ocupa toda a largura */
  .campanha-linha td:has(.campanha-nome),
  .campanha-linha td:first-child {
    grid-column: 1;
    grid-row: 1;
  }

  /* chip de status: canto superior direito */
  .campanha-linha td:has(.status-chip) {
    grid-column: 2;
    grid-row: 1;
    text-align: right;
  }

  /* barra de progresso: segunda linha, largura total */
  .campanha-linha td:has(.progresso-barra) {
    grid-column: 1 / -1;
    grid-row: 2;
  }
  .progresso-barra { min-width: 100%; }

  /* métricas + conta: terceira linha */
  .campanha-linha td:has(.metrica-num),
  .campanha-linha td:has(.campanha-conta),
  .campanha-linha td:has(.campanha-tipo) {
    grid-row: 3;
  }
  .campanha-linha td:has(.metrica-num) { text-align: left; }

  /* ações: ficam no canto inferior direito */
  .campanha-linha td:has(.campanha-acoes) {
    grid-column: 2;
    grid-row: 3;
  }

  /* esconder colunas secundárias em mobile */
  .campanha-linha td.col-ocultar-mobile { display: none; }
}

/* Contagem do filtro de envio no modal de nova campanha (item 8). */
.camp-filtro-info { display: block; margin-top: 4px; font-size: 12px; color: var(--text-muted); }

/* Verificador de envio no drawer da campanha */
.campanha-verificador { border-top: 1px dashed var(--border); padding-top: 12px; margin-top: 4px; }
.campanha-verificador__corpo { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.verificador-linha {
  display: flex; justify-content: space-between; align-items: center;
  padding: 7px 10px; border-radius: 8px; font-size: 13px;
  background: var(--bg); border: 1px solid var(--border);
}
.verificador-linha strong { font-size: 15px; }
.verificador-linha--ok        { border-color: var(--sucesso-linha); }
.verificador-linha--ok strong { color: var(--accent-strong); }
.verificador-linha--aguardando        { border-color: var(--aviso-linha); }
.verificador-linha--aguardando strong { color: var(--aviso); }
.verificador-linha--falha        { border-color: var(--perigo-linha); }
.verificador-linha--falha strong { color: var(--perigo); }
.verificador-aviso {
  margin-top: 8px; padding: 10px 12px;
  background: rgba(217,119,6,0.10); border: 1px solid var(--aviso-linha); border-radius: 8px;
  font-size: 12.5px; line-height: 1.45; color: var(--text);
}
.verificador-reprocessar { margin-top: 10px; width: 100%; }

/* Checklist "não usar a lista" + campo de números avulsos */
.camp-sem-lista {
  display: flex; align-items: flex-start; gap: 9px;
  margin: 4px 0 2px;
  font-size: 13px; color: var(--text);
  cursor: pointer; user-select: none;
}
.camp-sem-lista input[type="checkbox"] { margin-top: 2px; flex-shrink: 0; }
#camp-avulso-bloco[hidden] { display: none; }
#camp-avulso-numeros { resize: vertical; min-height: 60px; font-family: inherit; }

/* ── Montador de público (item 9) ──────────────────────────────────────────
   O modal cresceu de "nome + conta + fluxo" para um montador de público. Ele
   fica largo e rola por dentro: em tela de notebook o formulário passa da altura
   da janela, e sem rolagem própria os botões Criar/Cancelar somem embaixo. */
#modal-campanha.modal--largo { width: min(640px, 94vw); }
#modal-campanha .modal__form { max-height: 88vh; overflow-y: auto; }

/* ── Fluxo: lista aberta em vez de select ─────────────────────────────────
   São poucos fluxos por workspace. Ver os nomes lado a lado deixa escolher sem
   abrir um menu e sem precisar lembrar qual é qual. */
.camp-fluxos { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; }
.camp-fluxos__vazio,
.camp-contatos__vazio {
  font-size: 12.5px; color: var(--text-muted); font-style: italic; margin: 6px 0;
}

.camp-fluxo {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 11px; border: 1px solid var(--border); border-radius: var(--r-sm);
  cursor: pointer; transition: background .12s, border-color .12s;
}
.camp-fluxo:hover { border-color: var(--accent); background: var(--panel-bg-hover); }
.camp-fluxo.is-ativo { border-color: var(--accent); background: var(--accent-soft); }
.camp-fluxo__radio { accent-color: var(--accent); flex-shrink: 0; }
.camp-fluxo__nome { font-size: 13.5px; color: var(--text); }

/* ── Contatos: marcar quem recebe ─────────────────────────────────────────
   A lista rola dentro de si mesma. Sem isso, uma base de duzentos contatos
   empurra os botões de Criar e Cancelar para fora da tela — e a pessoa fica com
   um modal sem saída aparente. */
.camp-filtro-linha { display: flex; gap: 8px; margin-bottom: 8px; }
.camp-filtro-linha .camp-busca { flex: 1 1 auto; min-width: 0; }
.camp-filtro-envio { flex: 0 0 auto; width: auto; min-width: 165px; }

/* "Marcar todos" é o cabeçalho da lista, e por isso divide com ela a borda e o
   recuo: a caixa dele tem que cair na mesma coluna das caixas de baixo, senão a
   coluna de marcação fica torta e a lista perde o alinhamento que a torna
   varrível de cima a baixo. */
.camp-todos {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 11px; font-size: 12.5px; color: var(--text-muted);
  border: 1px solid var(--border);
  border-radius: var(--r-sm) var(--r-sm) 0 0;
  background: var(--panel-bg);
  cursor: pointer;
}
.camp-todos input { accent-color: var(--accent); flex-shrink: 0; }

.camp-contatos {
  max-height: 260px; overflow-y: auto;
  border: 1px solid var(--border); border-top: none;
  border-radius: 0 0 var(--r-sm) var(--r-sm);
}

.camp-contato {
  display: grid; grid-template-columns: auto 1fr auto auto; align-items: center;
  gap: 10px; padding: 8px 11px; cursor: pointer;
  border-bottom: 1px solid var(--border);
}
.camp-contato:last-child { border-bottom: none; }
.camp-contato:hover { background: var(--panel-bg-hover); }
.camp-contato.is-marcado { background: var(--accent-soft); }
.camp-contato__check { accent-color: var(--accent); flex-shrink: 0; }
.camp-contato__nome { font-size: 13.5px; color: var(--text); }
.camp-contato__numero {
  font-size: 12.5px; color: var(--text-muted);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}

/* O selo responde à única pergunta que importa aqui: já falei com essa pessoa?
   Discreto de propósito — quem lê a lista está procurando nome e número, e o
   selo só precisa ser encontrado quando a dúvida aparece. */
.camp-contato__selo {
  font-size: 11px; font-weight: 600; white-space: nowrap;
  padding: 2px 8px; border-radius: 999px; border: 1px solid transparent;
}
.camp-contato__selo--novo {
  color: var(--text-muted); border-color: var(--border);
}
.camp-contato__selo--contactado {
  color: var(--accent-strong); border-color: rgba(246, 196, 0, 0.35);
  background: var(--accent-soft);
}
.camp-contato__selo--erro {
  color: var(--perigo); border-color: var(--perigo-linha);
}

/* O corte da lista é dito, não escondido: uma lista truncada em silêncio faz a
   pessoa concluir que marcou todo mundo quando marcou os primeiros. */
/* Controles de paginação do modal de campanha */
.camp-paginacao {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 11px;
  background: var(--panel-bg); border-top: 1px solid var(--border);
  font-size: 12.5px; color: var(--text-muted);
}
.camp-pagina-info { flex: 1; }
.camp-pagina-tam { width: auto; padding: 3px 6px; font-size: 12px; }
.camp-pagina-btn { padding: 3px 8px !important; min-width: 28px; }
.camp-pagina-num { font-variant-numeric: tabular-nums; min-width: 48px; text-align: center; }

.camp-contador {
  margin: 10px 0 0; font-size: 13px; color: var(--text); font-weight: 600;
}

/* Chips de etiqueta nos cards do modal de campanha */
.camp-contato__tags { display: flex; gap: 3px; align-items: center; flex-wrap: wrap; }
.camp-contato__tag {
  font-size: 10.5px; font-weight: 600; white-space: nowrap;
  background: var(--accent-soft); color: var(--accent-strong);
  padding: 1px 5px; border-radius: 10px;
}
.camp-contato__tag--mais {
  background: var(--border); color: var(--text-muted);
}

/* Barra de ações de TAG na bulk do modal de campanha */
.camp-tag-bar {
  display: flex; gap: 6px; margin: 6px 0;
}
.camp-tag-bar .btn { font-size: 12.5px; padding: 3px 10px; }

/* Ar antes da última linha do bloco: ela é uma decisão de outra natureza
   (abandonar a lista e digitar números), e colar nela o contador faz as duas
   parecerem a mesma coisa. */
#camp-bloco-publico .camp-sem-lista { margin-top: 14px; }

/* ── Responsivo: modal e barra bulk em telas estreitas ───────────────────── */
@media (max-width: 640px) {
  /* O modal padrão tem width:480px que vaza em 375px;
     a variante .modal--largo já usa min(640px,94vw) — padroniza o base. */
  #modal-campanha { width: min(480px, 94vw); }

  /* A barra de ações em massa é position:fixed centrada com white-space:nowrap;
     sem max-width ela sai da viewport em telas pequenas. */
  .campanha-bulk-bar {
    max-width: calc(100vw - 32px);
    flex-wrap: wrap;
  }
}

/* source: css/campanhas-wizard.css */
/* ── Wizard de 3 etapas ──────────────────────────────────────────────────── */

#modal-campanha {
  width: min(680px, 96vw);
}
#modal-campanha .modal__form {
  max-height: 90vh;
  overflow-y: auto;
  overflow-x: hidden;
  padding-bottom: 4px;
}

/* Scrollbar refinada */
#modal-campanha .modal__form::-webkit-scrollbar { width: 5px; }
#modal-campanha .modal__form::-webkit-scrollbar-track { background: transparent; }
#modal-campanha .modal__form::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); border-radius: 3px; }

/* ── Stepper ─────────────────────────────────────────────────────────── */
.camp-wizard__stepper {
  display: flex;
  align-items: center;
  margin-bottom: 28px;
  padding: 0 4px;
}

.camp-step {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-shrink: 0;
}

.camp-step__circulo {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 2px solid var(--border-strong);
  background: var(--panel-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
  flex-shrink: 0;
}

.camp-step__num {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  color: var(--text-muted);
  transition: color 0.2s;
  line-height: 1;
}

.camp-step__check { display: none; }

/* Etapa ativa */
.camp-step.is-active .camp-step__circulo {
  border-color: var(--accent);
  background: var(--accent-soft);
  box-shadow: 0 0 0 4px rgba(246, 196, 0, 0.15);
}
.camp-step.is-active .camp-step__num { color: var(--accent-texto); }

/* Etapa concluida */
.camp-step.is-done .camp-step__circulo {
  border-color: var(--sucesso);
  background: rgba(61, 220, 132, 0.12);
}
.camp-step.is-done .camp-step__num { display: none; }
.camp-step.is-done .camp-step__check { display: block; color: var(--sucesso); width: 16px; height: 16px; }

.camp-step__label {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-muted);
  white-space: nowrap;
  transition: color 0.2s;
}
.camp-step.is-active .camp-step__label { color: var(--text); }
.camp-step.is-done .camp-step__label { color: var(--sucesso); }

.camp-step__linha {
  flex: 1;
  height: 2px;
  background: var(--border-strong);
  margin: 0 10px;
  border-radius: 1px;
  transition: background 0.3s;
}
.camp-step__linha.is-done { background: var(--sucesso); }

/* ── Paineis ─────────────────────────────────────────────────────────── */
.camp-wizard__painel {
  animation: campFadeIn 0.22s ease;
}
.camp-wizard__painel[hidden] { display: none; }

@keyframes campFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Cabecalho de etapa */
.camp-wizard__cab {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 20px;
  padding: 14px 16px;
  background: var(--elevado);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}

.camp-wizard__cab-icone {
  width: 40px;
  height: 40px;
  border-radius: var(--r-sm);
  background: var(--accent-soft);
  border: 1px solid rgba(246,196,0,0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.camp-wizard__cab-icone svg { width: 20px; height: 20px; color: var(--accent-texto); }
.camp-wizard__cab-icone--fluxo { background: rgba(90,169,255,0.12); border-color: rgba(90,169,255,0.25); }
.camp-wizard__cab-icone--fluxo svg { color: var(--info); }
.camp-wizard__cab-icone--pub { background: rgba(168,85,247,0.12); border-color: rgba(168,85,247,0.25); }
.camp-wizard__cab-icone--pub svg { color: #c084fc; }

.camp-wizard__cab-titulo {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 2px;
}
.camp-wizard__cab-sub {
  font-size: 12.5px;
  color: var(--text-muted);
  margin: 0;
}

/* ── Etapa 1: campos ─────────────────────────────────────────────────── */
.camp-wizard__campos {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.camp-campo-duplo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
@media (max-width: 500px) {
  .camp-campo-duplo { grid-template-columns: 1fr; }
}

.campo__obrigatorio { color: var(--accent-texto); margin-left: 2px; }
.campo__hint { display: block; margin-top: 4px; font-size: 11.5px; color: var(--text-fraco); }

/* Toggle de agendamento com track */
.camp-agendar-card {
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
}

.camp-agendar-toggle {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  cursor: pointer;
  user-select: none;
}
.camp-agendar-toggle input { display: none; }

.camp-agendar-toggle__track {
  width: 40px;
  height: 22px;
  border-radius: 11px;
  background: var(--panel-bg-hover);
  border: 1px solid var(--border-strong);
  position: relative;
  flex-shrink: 0;
  transition: background 0.2s, border-color 0.2s;
}
.camp-agendar-toggle input:checked + .camp-agendar-toggle__track {
  background: var(--accent-soft);
  border-color: var(--accent);
}
.camp-agendar-toggle__thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--text-muted);
  transition: transform 0.2s, background 0.2s;
}
.camp-agendar-toggle input:checked + .camp-agendar-toggle__track .camp-agendar-toggle__thumb {
  transform: translateX(18px);
  background: var(--accent-texto);
}

.camp-agendar-toggle__texto {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.camp-agendar-toggle__texto strong { font-size: 13.5px; color: var(--text); }
.camp-agendar-toggle__texto small { font-size: 12px; color: var(--text-muted); }

/* Expansao do agendamento */
.camp-agendamento {
  border-top: 1px solid var(--border);
  animation: campFadeIn 0.2s ease;
}
.camp-agendamento[hidden] { display: none; }
.camp-agendamento__inner {
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.camp-agendamento__resumo {
  font-size: 12.5px;
  color: var(--aviso);
  font-weight: 600;
  margin: 0;
}
.camp-agendamento__fuso {
  font-size: 11.5px;
  color: var(--text-fraco);
}

/* ── Etapa 2: cards de fluxo ────────────────────────────────────────── */
.camp-fluxos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 10px;
  margin-top: 4px;
}

.camp-fluxo {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 13px 14px;
  border: 2px solid var(--border);
  border-radius: var(--r-md);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
  background: var(--panel-bg);
  position: relative;
  overflow: hidden;
}
.camp-fluxo::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.15s;
  background: linear-gradient(135deg, rgba(90,169,255,0.08) 0%, transparent 60%);
}
.camp-fluxo:hover { border-color: var(--info); background: var(--elevado); }
.camp-fluxo:hover::before { opacity: 1; }
.camp-fluxo.is-ativo {
  border-color: var(--info);
  background: rgba(90,169,255,0.08);
  box-shadow: 0 0 0 3px rgba(90,169,255,0.15), inset 0 0 0 1px rgba(90,169,255,0.2);
}
.camp-fluxo.is-ativo::before { opacity: 1; }

.camp-fluxo__radio {
  accent-color: var(--info);
  margin-top: 2px;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}
.camp-fluxo__info { flex: 1; min-width: 0; position: relative; z-index: 1; }
.camp-fluxo__nome {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.3;
}
.camp-fluxo__passos {
  font-size: 11.5px;
  color: var(--text-muted);
  margin-top: 3px;
}
.camp-fluxo__badge {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--info);
  opacity: 0;
  transition: opacity 0.15s;
}
.camp-fluxo.is-ativo .camp-fluxo__badge { opacity: 1; }

.camp-fluxos__vazio {
  grid-column: 1 / -1;
  font-size: 13px;
  color: var(--text-muted);
  font-style: italic;
  padding: 20px 0;
  text-align: center;
}

/* ── Etapa 3: publico ───────────────────────────────────────────────── */
.camp-pub-filtros {
  margin-bottom: 12px;
}
.camp-pub-filtros__linha1 {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.camp-pub-filtros__linha1 .camp-busca { flex: 1 1 200px; min-width: 0; }
.camp-pub-filtros__linha1 .camp-filtro-envio { flex: 0 0 auto; min-width: 130px; }
.camp-pub-filtros__linha1 .camp-filtro-tag { flex: 0 0 auto; min-width: 140px; }

.camp-pub-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}
.camp-pub-meta__info {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
}

/* ── Contador + tag bar ─────────────────────────────────────────────── */
.camp-pub-selecao {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 10px 0 8px;
  flex-wrap: wrap;
}

.camp-pub-selecao__contador {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 600;
  color: var(--accent-texto);
}
.camp-pub-selecao__contador svg {
  width: 18px;
  height: 18px;
  color: var(--accent-texto);
}

/* Tag bar visivel e destacada */
.camp-tag-bar {
  display: flex;
  gap: 8px;
}
.camp-tag-bar[hidden] { display: none; }
.camp-tag-bar .btn {
  font-size: 12.5px;
  padding: 5px 12px;
  gap: 5px;
  border-radius: var(--r-sm);
}
.camp-tag-bar .btn svg { width: 13px; height: 13px; }

/* Botoes de tag com outline estilo */
.btn--outline {
  background: transparent;
  border: 1.5px solid var(--border-strong);
  color: var(--text);
}
.btn--outline:hover {
  border-color: var(--accent);
  color: var(--accent-texto);
  background: var(--accent-soft);
}
.btn--tag-add { border-color: rgba(61,220,132,0.4); color: var(--sucesso); }
.btn--tag-add:hover { background: rgba(61,220,132,0.1); border-color: var(--sucesso); }
.btn--tag-rm { border-color: rgba(255,90,90,0.4); color: var(--perigo); }
.btn--tag-rm:hover { background: rgba(255,90,90,0.1); border-color: var(--perigo); }
.btn--perigo {
  background: transparent;
  border: 1.5px solid var(--perigo);
  color: var(--perigo);
}
.btn--perigo:hover {
  background: rgba(255,90,90,0.15);
  border-color: var(--perigo);
  color: var(--perigo);
}

/* ── Contatos cards ─────────────────────────────────────────────────── */
.camp-todos {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--text-muted);
  cursor: pointer;
  user-select: none;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--panel-bg);
  transition: border-color 0.12s;
}
.camp-todos:hover { border-color: var(--accent); color: var(--text); }
.camp-todos input { accent-color: var(--accent); }

.camp-contatos {
  max-height: 280px;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}
.camp-contatos::-webkit-scrollbar { width: 4px; }
.camp-contatos::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 2px; }

.camp-contato {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background 0.1s;
}
.camp-contato:last-child { border-bottom: none; }
.camp-contato:hover { background: var(--panel-bg-hover); }
.camp-contato.is-marcado { background: var(--accent-soft); }

.camp-contato__check { accent-color: var(--accent); flex-shrink: 0; cursor: pointer; }
.camp-contato__nome { font-size: 13.5px; color: var(--text); font-weight: 500; }
.camp-contato__numero {
  font-size: 12px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.camp-contato__selo {
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid transparent;
}
.camp-contato__selo--novo { color: var(--text-fraco); border-color: var(--border); }
.camp-contato__selo--contactado { color: var(--info); border-color: rgba(90,169,255,0.4); background: rgba(90,169,255,0.08); }
.camp-contato__selo--erro { color: var(--perigo); border-color: rgba(255,90,90,0.4); }

/* ── Tag autocomplete popover ─────────────────────────────────────── */
.camp-tag-popover {
  position: absolute;
  z-index: 500;
  top: calc(100% + 6px);
  left: 0;
  width: 260px;
  background: var(--elevado);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  box-shadow: 0 8px 24px rgba(0,0,0,0.4), 0 2px 8px rgba(0,0,0,0.2);
  overflow: hidden;
  animation: campTagPopoverIn 0.15s ease;
}
@keyframes campTagPopoverIn {
  from { opacity: 0; transform: translateY(-4px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.camp-tag-popover__input-wrap {
  display: flex;
  align-items: center;
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  gap: 6px;
}
.camp-tag-popover__input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: var(--text);
  font: inherit;
  font-size: 13.5px;
  caret-color: var(--accent);
}
.camp-tag-popover__input::placeholder { color: var(--text-muted); }
.camp-tag-popover__icon { color: var(--text-muted); flex-shrink: 0; }
.camp-tag-popover__list {
  max-height: 180px;
  overflow-y: auto;
  padding: 4px 0;
}
.camp-tag-popover__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 7px 12px;
  background: transparent;
  border: none;
  text-align: left;
  font: inherit;
  font-size: 13px;
  color: var(--text);
  cursor: pointer;
  gap: 8px;
  transition: background 0.1s;
}
.camp-tag-popover__item:hover { background: var(--accent-soft); }
.camp-tag-popover__item span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.camp-tag-popover__badge {
  font-size: 11px;
  color: var(--text-muted);
  background: var(--panel-bg);
  border-radius: 4px;
  padding: 1px 5px;
  flex-shrink: 0;
}
.camp-tag-popover__vazio {
  padding: 10px 12px;
  font-size: 12.5px;
  color: var(--text-muted);
  font-style: italic;
  text-align: center;
}
.camp-tag-popover__footer {
  display: flex;
  gap: 6px;
  padding: 8px 10px;
  border-top: 1px solid var(--border);
  justify-content: flex-end;
}
.camp-tag-popover__footer .btn { font-size: 12.5px; padding: 5px 14px; }
.camp-tag-popover__modo {
  font-size: 10.5px;
  color: var(--text-muted);
  padding: 4px 12px 0;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.camp-tag-popover__modo--add { color: var(--sucesso); }
.camp-tag-popover__modo--rm  { color: var(--perigo); }

/* Tag chips in contact card */
.camp-contato__tags { display: flex; gap: 3px; flex-wrap: wrap; align-items: center; }
.camp-contato__tag {
  font-size: 10.5px;
  font-weight: 600;
  background: var(--accent-soft);
  color: var(--accent-texto);
  padding: 1px 6px;
  border-radius: 10px;
  border: 1px solid rgba(246,196,0,0.25);
  max-width: 70px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.camp-contato__tag--mais {
  background: var(--elevado);
  color: var(--text-muted);
  border-color: var(--border);
}

/* ── Navegacao do wizard ────────────────────────────────────────────── */
.camp-wizard__nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
  gap: 10px;
}
.camp-wizard__nav-right {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

.camp-wizard__nav .btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  font-size: 13.5px;
  border-radius: var(--r-sm);
  font-weight: 600;
}
.camp-wizard__nav .btn svg { width: 14px; height: 14px; }

/* Botao primario "Proximo" */
#camp-proximo {
  background: var(--accent);
  border: none;
  color: #fff;
  box-shadow: 0 2px 12px rgba(246,196,0,0.35);
  transition: background 0.15s, box-shadow 0.15s, transform 0.1s;
}
#camp-proximo:hover {
  background: #d9aa00;
  box-shadow: 0 4px 16px rgba(246,196,0,0.5);
  transform: translateY(-1px);
}
#camp-proximo:active { transform: translateY(0); }

/* Botao fire "Criar e disparar" */
.btn--fire {
  background: linear-gradient(135deg, #f6c400 0%, #d9aa00 100%);
  border: none;
  color: #fff;
  box-shadow: 0 4px 18px rgba(246,196,0,0.5), 0 0 0 1px rgba(255,255,255,0.08) inset;
  animation: campFirePulse 2s ease-in-out infinite;
}
@keyframes campFirePulse {
  0%, 100% { box-shadow: 0 4px 18px rgba(246,196,0,0.5), 0 0 0 1px rgba(255,255,255,0.08) inset; }
  50% { box-shadow: 0 4px 24px rgba(246,196,0,0.7), 0 0 0 1px rgba(255,255,255,0.12) inset; }
}
.btn--fire:hover {
  background: linear-gradient(135deg, #d9aa00 0%, #a81424 100%);
  animation: none;
  box-shadow: 0 6px 22px rgba(246,196,0,0.6), 0 0 0 1px rgba(255,255,255,0.12) inset;
  transform: translateY(-1px);
}
.btn--fire:active { transform: translateY(0); }

#camp-voltar { border: 1.5px solid var(--border-strong); }

/* ── Responsivo ─────────────────────────────────────────────────────── */
@media (max-width: 540px) {
  #modal-campanha { width: min(100vw, 98vw); }
  .camp-wizard__stepper { margin-bottom: 20px; }
  .camp-step__label { display: none; }
  .camp-step__linha { margin: 0 6px; }
  .camp-fluxos { grid-template-columns: 1fr; }
  .camp-pub-filtros__linha1 .camp-filtro-tag { flex: 1 1 100%; }
  .camp-wizard__nav { flex-wrap: wrap; }
  .camp-wizard__nav-right { flex-wrap: wrap; width: 100%; justify-content: flex-end; }
  .camp-pub-selecao { flex-direction: column; align-items: flex-start; }
}

/* Responsivo: modal e barra bulk em telas estreitas */
@media (max-width: 640px) {
  #modal-campanha { width: min(480px, 94vw); }
  .campanha-bulk-bar { max-width: calc(100vw - 32px); flex-wrap: wrap; }
}

/* source: css/dashboard.css */
/* ── Dashboard — public/css/dashboard.css ──────────────────────────
   Owner: Painel C  |  Contrato: CONTRATO-DASHBOARD.md §2-§3
   Hexadecimais permitidos fora dos tokens: somente a paleta de dados
   do contrato §3: var(--info) · var(--sucesso) · var(--info) · var(--aviso) · var(--accent) · var(--text-muted)
   ─────────────────────────────────────────────────────────────────── */

/* ══ Paleta de séries — validada pelo dataviz skill ═════════════════
   Superfície: #17171c (--panel-bg). Modo: dark.
   Resultado: PASS em todos os 5 checks (lightness band, chroma floor,
   CVD separation deutan ΔE 19.6, normal-vision ΔE 20.9, contrast ≥3:1).
   Mapeamento: mesmos hues dos tokens do sistema, L escalonada para a
   banda escura 0.48–0.67. Definidas em :root para ficarem acessíveis
   via getComputedStyle(documentElement) no JS de inicialização.

   --serie-azul : #3987e5  (hue de --info,    L stepped 0.72→0.58)
   --serie-verde: #199e70  (hue de --sucesso,  L stepped 0.79→0.62)
   --serie-roxo : var(--no-condicao) #8b5cf6   (já na banda, L 0.56)
   --serie-ambar: #c98500  (hue de --aviso,    L stepped 0.78→0.62)

   Os tokens de STATUS (--accent, --sucesso, --aviso, --perigo) continuam
   usados onde a cor carrega significado de estado (erro, ok, atenção).
   ══════════════════════════════════════════════════════════════════════ */
:root {
  --serie-azul:  #3987e5;
  --serie-verde: #199e70;
  --serie-roxo:  var(--no-condicao);
  --serie-ambar: #c98500;
}

/* ══ Raiz ═══════════════════════════════════════════════════════════ */

.dash {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* ══ Topo ════════════════════════════════════════════════════════════ */

.dash__topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.dash__titulo {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 700;
  color: var(--text);
  margin: 0;
  line-height: 1.15;
}

/* ── Seletor de período ──────────────────────────────────────────── */

.dash__periodo {
  display: flex;
  gap: 3px;
  align-items: center;
  background: var(--panel-bg-hover);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  padding: 4px;
}

.dash__periodo-btn {
  padding: 5px 14px;
  border: none;
  background: transparent;
  border-radius: var(--r-pill);
  color: var(--text-muted);
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.dash__periodo-btn:hover {
  color: var(--text);
}

.dash__periodo-btn.is-ativo {
  background: var(--panel-bg);
  color: var(--text);
  font-weight: 600;
  box-shadow: var(--shadow-sm);
}

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

.dash__atualizado {
  font-size: 12px;
  color: var(--text-muted);
  white-space: nowrap;
}

/* ══ KPIs ════════════════════════════════════════════════════════════
   grid-auto-rows: 1fr nivela todos os cards da grade sem height fixa.
   Em grade auto-height, 1fr resolve para a maior linha, igualando todas. */

.dash__kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  grid-auto-rows: 1fr;
  gap: 12px;
}

/* Stat card estilo Redrive/Apple: chip do ícone colorido, número grande,
   rótulo discreto e tendência em pílula. */
.dash__kpi {
  background: var(--panel-bg);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 16px 18px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 1px 3px rgba(16, 24, 40, 0.06);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.dash__kpi-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.dash__kpi-icone {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px;
  border-radius: 11px;
  font-size: 18px;
  line-height: 1;
}
/* tom por métrica — fundo e ícone derivados das variáveis de série do tema.
   As cores de chip (--serie-*) estão definidas abaixo e foram validadas pelo
   dataviz skill (6 checks) contra a superfície #17171c em modo escuro.
   --accent-soft / --no-condicao já são tokens do sistema e reutilizados aqui. */
.dash__kpi--azul     .dash__kpi-icone { background: rgba(57, 135, 229, 0.14); color: var(--serie-azul); }
.dash__kpi--verde    .dash__kpi-icone { background: rgba(25, 158, 112, 0.14); color: var(--serie-verde); }
.dash__kpi--roxo     .dash__kpi-icone { background: rgba(139, 92, 246, 0.14); color: var(--no-condicao); }
.dash__kpi--ambar    .dash__kpi-icone { background: rgba(201, 133, 0, 0.14);  color: var(--serie-ambar); }
.dash__kpi--laranja  .dash__kpi-icone { background: var(--aviso-soft);         color: var(--aviso); }
.dash__kpi--vermelho .dash__kpi-icone { background: var(--accent-soft);        color: var(--accent-texto); }

.dash__kpi-valor {
  display: block;
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 700;
  line-height: 1.05;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

.dash__kpi-rotulo {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-muted);
}

.dash__kpi-var {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 12px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 999px;
  font-variant-numeric: tabular-nums;
}
.dash__kpi-var.is-alta   { color: var(--sucesso); background: rgba(15, 122, 77, 0.12); }
.dash__kpi-var.is-baixa  { color: var(--accent); background: rgba(246, 196, 0, 0.10); }
.dash__kpi-var.is-neutra { color: var(--text-muted); background: var(--bg); }

/* Sparkline: margin-top auto âncora ao rodapé do card nivelado */
.dash__kpi-spark {
  display: block;
  /* Largura cheia e colada na base do cartão: assim ela lê como o "chão" do
     número, e não como um rabisco solto ao lado dele. A margem negativa cancela
     o padding do cartão para a área encostar nas bordas. */
  /* -18px/-16px cancelam exatamente o padding de .dash__kpi (16px 18px), e o
     raio acompanha o do cartão (16px) — se não bater, sobra um canto quadrado
     escapando por baixo da borda arredondada. */
  width: calc(100% + 36px);
  margin: auto -18px -16px;
  height: 34px;
  border-bottom-left-radius: 15px;
  border-bottom-right-radius: 15px;
  overflow: hidden;
}

/* ══ Grid de cards ═══════════════════════════════════════════════════ */

.dash__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 16px;
}

.dash__card {
  background: var(--panel-bg);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 1px 3px rgba(16, 24, 40, 0.06);
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.dash__card--largo {
  grid-column: 1 / -1;
}

.dash__card-cabecalho {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px 0;
}

.dash__card-titulo {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  margin: 0;
}

.dash__card-acao {
  font: inherit;
  font-size: 12.5px;
  color: var(--text-muted);
  background: none;
  border: none;
  padding: 4px 8px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
  white-space: nowrap;
  flex-shrink: 0;
}

.dash__card-acao:hover {
  background: var(--panel-bg-hover);
  color: var(--text);
}

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

.dash__card-corpo {
  padding: 14px 18px 18px;
  flex: 1;
  min-height: 0;
  overflow-x: auto;
}

/* ══ Gráfico de linha / área ══════════════════════════════════════════
   JS não define width/height no <svg>, apenas viewBox="0 0 560 160".
   aspect-ratio: 7/2 espelha essa proporção: o SVG preenche o container
   exatamente sem precisar de preserveAspectRatio="none" no markup.    */

.dash__chart {
  display: block;
  width: 100%;
  /* Menor (item 7): viewBox achatado para 560x120 no JS; o aspect-ratio
     acompanha, então o gráfico ocupa menos altura sem distorcer. */
  aspect-ratio: 14 / 3;
  overflow: visible;
}

.dash__chart text {
  font-family: var(--font-body);
}

/* ══ Barras ══════════════════════════════════════════════════════════ */

.dash__barras {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.dash__barra {
  display: grid;
  grid-template-columns: 100px 1fr 52px;
  align-items: center;
  gap: 10px;
}

.dash__barra-rotulo {
  font-size: 13px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dash__barra-trilho {
  background: rgba(7, 24, 39, .62);
  border: 1px solid rgba(166, 193, 211, .08);
  border-radius: 999px;
  height: 8px;
  overflow: hidden;
}

.dash__barra-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 999px;
  min-width: 2px;
  box-shadow: 0 0 14px -7px rgba(246, 196, 0, .8);
  transition: width 0.35s ease;
}

.dash__barra-valor {
  font-size: 13px;
  font-weight: 600;
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}

/* ══ Donut SVG (placeholder — Panel B ainda não gerou) ═══════════════ */

.dash__donut {
  display: block;
  width: 100%;
  height: 180px;
  overflow: visible;
}

/* ══ Tabela div-based (top campanhas / contas) ════════════════════════
   Estrutura gerada pelo B:
   div.dash__tabela
     div.dash__tabela-linha.dash__tabela-linha--cabecalho
       span.dash__tabela-celula
     div.dash__tabela-linha
       span.dash__tabela-celula.dash__tabela-celula--nome
       span.dash__tabela-celula …                                       */

.dash__tabela {
  width: 100%;
  font-size: 13px;
}

.dash__tabela-linha {
  display: flex;
  gap: 8px;
  align-items: baseline;
  padding: 9px 0;
  border-bottom: 1px solid var(--border);
}

.dash__tabela-linha:last-child {
  border-bottom: none;
}

.dash__tabela-linha--cabecalho {
  padding-bottom: 7px;
}

.dash__tabela-linha--cabecalho .dash__tabela-celula {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.dash__tabela-linha:not(.dash__tabela-linha--cabecalho):hover {
  background: var(--panel-bg-hover);
  border-radius: 6px;
  margin: 0 -6px;
  padding-left: 6px;
  padding-right: 6px;
}

/* Foco para linhas tornadasa clicáveis via tabindex/role no B */
.dash__tabela-linha:focus-visible {
  outline: 2px solid var(--accent-ring);
  outline-offset: -2px;
  border-radius: 6px;
}

.dash__tabela-celula {
  flex: 1;
  min-width: 0;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dash__tabela-celula--nome {
  flex: 2;
}

/* ══ Feed de atividade ════════════════════════════════════════════════ */

.dash__feed {
  display: flex;
  flex-direction: column;
}

.dash__feed-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 0 10px 14px;
  border-left: 3px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.dash__feed-item:last-child {
  border-bottom: none;
}

/* Paleta de dados §3 — única fonte de hex permitida */
.dash__feed-item.is-ok     { border-left-color: var(--sucesso); }
.dash__feed-item.is-alerta { border-left-color: var(--aviso); }
.dash__feed-item.is-erro   { border-left-color: var(--accent); }

.dash__feed-titulo {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}

.dash__feed-detalhe {
  font-size: 12px;
  color: var(--text-muted);
}

.dash__feed-quando {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 1px;
}

/* ══ Estados: carregando / vazio / erro ══════════════════════════════
   Diferenciação visual dos três estados:
   • is-carregando → skeleton animado (zero texto na tela)
   • is-vazio      → símbolo "—" via ::before + mensagem em --text-muted
   • is-erro       → mensagem em --accent (vermelho) + botão retry      */

.dash__estado {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 200px;
  padding: 32px 24px;
  text-align: center;
}

/* ── Carregando: skeleton pulsado, sem texto ────────────────────── */

@keyframes dash-skeleton-pulse {
  0%, 100% { opacity: 1;    }
  50%       { opacity: 0.45; }
}

.dash__skeleton {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}

/* Panel B gera exatamente 6 blocos; nth-child define formas variadas */
.dash__skeleton-bloco {
  display: block;
  background: var(--panel-bg-hover);
  border-radius: 8px;
  height: 20px;
  animation: dash-skeleton-pulse 1.4s ease-in-out infinite;
}

.dash__skeleton-bloco:first-child  { width: 40%; height: 14px; }
.dash__skeleton-bloco:nth-child(2) { width: 100%; height: 32px; }
.dash__skeleton-bloco:nth-child(3) { width: 80%; }
.dash__skeleton-bloco:nth-child(4) { width: 60%; }
.dash__skeleton-bloco:nth-child(5) { width: 90%; }
.dash__skeleton-bloco:nth-child(6) { width: 70%; }

/* Variantes auxiliares (B não gera ainda; mantidas para uso futuro) */
.dash__skeleton--titulo { height: 18px; width: 130px; }
.dash__skeleton--valor  { height: 32px; width: 70px;  }
.dash__skeleton--barra  { height: 8px;  width: 100%;  }
.dash__skeleton--linha  { height: 14px; width: 65%;   }

/* ── Mensagem de texto (vazio e erro) ──────────────────────────── */

.dash__estado-msg {
  font-size: 14px;
  line-height: 1.5;
  margin: 0;
  max-width: 280px;
}

/* Vazio: ícone tipográfico suave + texto muted */
.dash__estado.is-vazio::before {
  content: "—";
  display: block;
  font-size: 28px;
  font-weight: 300;
  line-height: 1;
  color: var(--border-strong);
}

.dash__estado.is-vazio .dash__estado-msg {
  color: var(--text-muted);
}

/* Erro: texto vermelho (--accent) + botão */
.dash__estado.is-erro .dash__estado-msg {
  color: var(--accent);
}

/* ── Botão "tentar de novo" ─────────────────────────────────────── */

.dash__btn-retry {
  padding: 8px 20px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  background: var(--panel-bg);
  color: var(--text);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.dash__btn-retry:hover {
  background: var(--panel-bg-hover);
  border-color: var(--accent);
}

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

/* ══ Redução de movimento ════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  .dash__skeleton-bloco            { animation: none; }
  .dash__barra-fill,
  .dash__periodo-btn,
  .dash__card-acao,
  .dash__btn-retry                 { transition: none; }
}

/* ══ Compatibilidade — classes do JS anterior ════════════════════════
   Remover após o Painel B migrar o render para os nomes do contrato.  */

.dash__secao {
  background: var(--panel-bg);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 16px 18px;
  box-shadow: var(--shadow-sm);
}

.dash__secao-titulo {
  font-size: 14px;
  font-weight: 700;
  margin: 0 0 14px;
  color: var(--text);
}

.dash__carregando { color: var(--text-muted); font-size: 13px; }

.dash__vazio {
  color: var(--text-muted);
  font-size: 13px;
  text-align: center;
  padding: 24px 0;
}

/* Usuário novo: mantém o dashboard visível e explicitamente zerado. */
.dash__inicio-vazio {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 4px 0 18px;
  padding: 16px 18px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--panel-bg);
}

.dash__inicio-zero {
  display: grid;
  place-items: center;
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  color: var(--text-muted);
  font-size: 20px;
  font-weight: 700;
}

.dash__inicio-texto {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.dash__inicio-titulo {
  color: var(--text);
  font-size: 14px;
}

.dash__inicio-descricao {
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.45;
}

.dash--sem-dados .dash__kpi {
  box-shadow: none;
}

.dash--sem-dados .dash__kpi-valor {
  color: var(--text);
}

@media (max-width: 640px) {
  .dash__inicio-vazio {
    align-items: flex-start;
  }
}

/* ══ Polish profissional + animações (inspirado no Redrive) ═══════════
   Easing estilo Apple, entrada em fade+slide-up (só na 1ª carga via
   .dash--entrada), e hover com leve elevação. */
:root { --ease-suave: cubic-bezier(.4, 0, .2, 1); }

@keyframes dashEntrar {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* KPIs: elevação suave no hover (o chip colorido já dá o destaque) */
.dash__kpi {
  transition: transform .22s var(--ease-suave), box-shadow .22s var(--ease-suave), border-color .22s var(--ease-suave);
}
.dash__kpi:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(16, 24, 40, 0.10);
  border-color: var(--border-strong);
}

/* Cards do grid: mesma elevação suave no hover */
.dash__card {
  transition: transform .22s var(--ease-suave), box-shadow .22s var(--ease-suave), border-color .22s var(--ease-suave);
}
.dash__card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--border-strong);
}

/* Entrada escalonada — só quando .dash--entrada está no container */
.dash--entrada .dash__kpi,
.dash--entrada .dash__card { animation: dashEntrar .5s var(--ease-suave) both; }
.dash--entrada .dash__kpi:nth-child(1)  { animation-delay: .02s; }
.dash--entrada .dash__kpi:nth-child(2)  { animation-delay: .05s; }
.dash--entrada .dash__kpi:nth-child(3)  { animation-delay: .08s; }
.dash--entrada .dash__kpi:nth-child(4)  { animation-delay: .11s; }
.dash--entrada .dash__kpi:nth-child(5)  { animation-delay: .14s; }
.dash--entrada .dash__kpi:nth-child(6)  { animation-delay: .17s; }
.dash--entrada .dash__kpi:nth-child(n+7) { animation-delay: .20s; }
.dash--entrada .dash__card:nth-child(1) { animation-delay: .18s; }
.dash--entrada .dash__card:nth-child(2) { animation-delay: .24s; }
.dash--entrada .dash__card:nth-child(n+3) { animation-delay: .30s; }

@media (prefers-reduced-motion: reduce) {
  .dash--entrada .dash__kpi,
  .dash--entrada .dash__card { animation: none; }
  .dash__kpi, .dash__card { transition: none; }
}

/* ══ Cabeçalho de seção (Redrive: "Métricas do dia", etc.) ═══════════ */
.dash__secao {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 700;
  color: var(--text);
  margin: 26px 0 2px;
  letter-spacing: -0.01em;
}

/* ══ Monitor de disparo ao vivo ═════════════════════════════════════ */
.dash__monitor {
  background: var(--panel-bg);
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: 0 1px 3px rgba(16, 24, 40, 0.06), 0 6px 20px rgba(16, 24, 40, 0.05);
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  animation: dashEntrar .5s var(--ease-suave) both;
}
.dash__monitor.is-rodando { border-top: 3px solid var(--sucesso); }

.dash__monitor-topo { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.dash__monitor-info { display: flex; align-items: center; gap: 12px; min-width: 0; }
.dash__monitor-icone {
  width: 44px; height: 44px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 13px; font-size: 20px;
  background: rgba(15, 122, 77, 0.12);
}
.dash__monitor-nome { display: block; font-size: 16px; font-weight: 700; color: var(--text); }
.dash__monitor-sub { font-size: 12.5px; color: var(--text-muted); }
.dash__anel { flex-shrink: 0; color: var(--text); }

.dash__monitor-boxes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 10px;
}
.dash__monitor-box {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 14px 8px;
  border-radius: 13px;
  background: var(--bg);
  border: 1px solid var(--border);
}
.dash__monitor-box-ic { font-size: 15px; font-weight: 700; }
.dash__monitor-box-val { font-family: var(--font-display); font-size: 24px; font-weight: 700; font-variant-numeric: tabular-nums; }
.dash__monitor-box-rot { font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em; color: var(--text-muted); }
.dash__monitor-box--verde    .dash__monitor-box-ic, .dash__monitor-box--verde    .dash__monitor-box-val { color: var(--sucesso); }
.dash__monitor-box--vermelho .dash__monitor-box-ic, .dash__monitor-box--vermelho .dash__monitor-box-val { color: var(--accent); }
.dash__monitor-box--azul     .dash__monitor-box-ic, .dash__monitor-box--azul     .dash__monitor-box-val { color: var(--info); }
.dash__monitor-box--ambar    .dash__monitor-box-ic, .dash__monitor-box--ambar    .dash__monitor-box-val { color: var(--aviso); }
.dash__monitor-acoes { display: flex; justify-content: flex-end; }

/* ══ Ações rápidas ═════════════════════════════════════════════════ */
.dash__acoes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
}
.dash__acao {
  display: flex; align-items: center; gap: 14px;
  text-align: left;
  padding: 18px;
  border-radius: 16px;
  background: var(--panel-bg);
  border: 1px solid var(--border);
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
  cursor: pointer;
  font: inherit;
  transition: transform .2s var(--ease-suave), box-shadow .2s var(--ease-suave), border-color .2s var(--ease-suave);
}
.dash__acao:hover { transform: translateY(-3px); box-shadow: 0 10px 26px rgba(16, 24, 40, 0.10); border-color: var(--border-strong); }
.dash__acao-ic {
  width: 46px; height: 46px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 13px; font-size: 22px;
  background: var(--accent-soft);
}
.dash__acao-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dash__acao-tit { font-size: 14.5px; font-weight: 700; color: var(--text); }
.dash__acao-sub { font-size: 12.5px; color: var(--text-muted); }
/* card em destaque: vermelho de marca, como o "Gerar Contatos" do Redrive */
.dash__acao--destaque {
  background: linear-gradient(135deg, var(--accent), var(--accent-strong));
  border-color: transparent;
}
.dash__acao--destaque .dash__acao-tit,
.dash__acao--destaque .dash__acao-sub { color: var(--sobre-cor); }
.dash__acao--destaque .dash__acao-sub { opacity: 0.9; }
.dash__acao--destaque .dash__acao-ic { background: rgba(255, 255, 255, 0.2); }

/* ── Barra de progresso da entrega ─────────────────────────────────── */
/* Especificação de marca da skill dataviz: respiro de 2px entre segmentos
   (a cor do fundo separando, não uma borda), pontas arredondadas em 4px e
   grade/eixos recessivos. */
.dash__pipe-barra {
  display: flex;
  height: 30px;
  padding: 3px;
  box-sizing: border-box;
  border: 1px solid rgba(166, 193, 211, .09);
  border-radius: 10px;
  overflow: hidden;
  background: rgba(7, 24, 39, .58);
  gap: 3px;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, .22);
}
.dash__pipe-seg {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  min-width: 3px;
  border-radius: 7px;
  transition: filter .15s, transform .15s;
}
.dash__pipe-seg:hover { filter: brightness(1.08); transform: translateY(-1px); }
.dash__pipe-seg-num {
  padding: 1px 6px;
  border-radius: 999px;
  background: rgba(7, 24, 39, .72);
  color: #f8f4e8;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.45;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .35);
}
.dash__pipe-vazia { flex: 1; }

.dash__pipe-legenda {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 4px 14px;
  margin-top: 12px;
}
.dash__pipe-leg-item { display: flex; align-items: center; gap: 7px; font-size: 12.5px; }
.dash__pipe-leg-item.is-zero { opacity: .45; }
.dash__pipe-leg-cor {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex: none;
  box-shadow: 0 0 0 2px rgba(246, 196, 0, .05);
}
.dash__pipe-leg-rot { flex: 1; color: var(--text-muted); }
.dash__pipe-leg-val { font-weight: 700; font-variant-numeric: tabular-nums; }

/* Falha fica FORA da barra: não é etapa da progressão, é saída dela. */
.dash__pipe-falha {
  display: flex; align-items: center; gap: 8px;
  margin-top: 12px; padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid rgba(208, 59, 59, 0.30);
  background: rgba(208, 59, 59, 0.07);
  font-size: 12.5px;
}
.dash__pipe-falha.is-zero { opacity: .5; border-color: var(--border); background: transparent; }
.dash__pipe-falha-icone { color: var(--perigo); font-weight: 700; }
.dash__pipe-falha-rot { flex: 1; color: var(--text-muted); }
.dash__pipe-falha-val { font-weight: 700; font-variant-numeric: tabular-nums; }
.dash__pipe-falha-pct { color: var(--text-muted); font-size: 11.5px; }

/* Etapa do funil sem ninguém recua, para o olho achar onde os leads estão. */
.dash__barra.is-zero { opacity: .4; }

/* ── Hierarquia dos indicadores ────────────────────────────────────── */
/* Quatro números respondem "a operação está funcionando?" e ficam grandes;
   os outros sete viram apoio compacto. Onze cartões idênticos não davam
   hierarquia nenhuma. */
.dash__kpis--apoio {
  /* 128px é o menor cartão que ainda cabe o número: com 150px sobrava um órfão
     sozinho na segunda linha em telas de ~1180px úteis. */
  grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
  gap: 8px;
  margin-top: 8px;
}
.dash__kpi--destaque .dash__kpi-valor { font-size: 34px; line-height: 1.05; }

.dash__kpi--apoio {
  padding: 9px 12px;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "rotulo rotulo" "valor variacao";
  align-items: center;
  gap: 2px 8px;
}
.dash__kpi--apoio .dash__kpi-topo { display: contents; }
/* Sem ícone no cartão de apoio: com ele, o rótulo era cortado em "Taxa d…" e
   "Camp…", e um ícone ao lado de um rótulo legível não acrescenta nada. */
.dash__kpi--apoio .dash__kpi-icone { display: none; }
.dash__kpi--apoio .dash__kpi-rotulo {
  grid-area: rotulo; font-size: 11.5px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dash__kpi--apoio .dash__kpi-valor { grid-area: valor; font-size: 20px; line-height: 1.15; }
.dash__kpi--apoio [class*="dash__kpi-var"] { grid-area: variacao; justify-self: end; }

/* ── Ícones em SVG (sem emoji) ─────────────────────────────────────── */
.dash__kpi-icone svg { width: 18px; height: 18px; display: block; }
.dash__kpi--destaque .dash__kpi-icone svg { width: 19px; height: 19px; }

/* ── Por que as mensagens falharam ─────────────────────────────────── */
.dash__motivos { display: flex; flex-direction: column; gap: 12px; }
.dash__motivo-topo {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  margin-bottom: 5px;
}
.dash__motivo-texto { font-size: 12.5px; line-height: 1.35; color: var(--text); }
.dash__motivo-valor { font-weight: 700; font-variant-numeric: tabular-nums; flex: none; }
.dash__motivo-trilho {
  height: 6px; border-radius: 3px;
  background: var(--panel-bg-hover);
  overflow: hidden;
}
.dash__motivo-fill { height: 100%; border-radius: 3px; background: var(--perigo); }
.dash__motivo-codigo {
  display: inline-block; margin-top: 4px;
  font-size: 11px; color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

/* Respeita quem pediu menos movimento no sistema. */
@media (prefers-reduced-motion: reduce) {
  .dash__pipe-seg, .dash__kpi { transition: none; }
}

/* ── Histórico de campanhas ────────────────────────────────────────── */
.dash__hist { display: flex; flex-direction: column; gap: 10px; }
.dash__hist-item {
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-left: 3px solid var(--border-strong);
  border-radius: 10px;
  background: var(--panel-bg);
}
.dash__hist-item--concluida { border-left-color: var(--sucesso); }
.dash__hist-item--rodando   { border-left-color: var(--info); }
.dash__hist-item--pausada   { border-left-color: var(--aviso); }
.dash__hist-item--falhou    { border-left-color: var(--perigo); }

.dash__hist-topo {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-bottom: 2px;
}
.dash__hist-nome { font-weight: 700; font-size: 14px; }
.dash__hist-status {
  font-size: 11px; font-weight: 700;
  padding: 2px 8px; border-radius: 999px;
  background: var(--panel-bg-hover); color: var(--text-muted);
}
.dash__hist-status--concluida { background: rgba(21,128,61,.10);  color: var(--sucesso); }
.dash__hist-status--rodando   { background: rgba(42,120,214,.12); color: var(--info); }
.dash__hist-status--pausada   { background: rgba(217,119,6,.12);  color: var(--aviso); }
.dash__hist-status--falhou    { background: rgba(208,59,59,.12);  color: var(--perigo); }

.dash__hist-conta {
  font-size: 12px; color: var(--text-muted);
  margin-bottom: 9px;
}
.dash__hist-grade {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(104px, 1fr));
  gap: 8px 14px;
}
.dash__hist-dado { display: flex; flex-direction: column; gap: 1px; }
.dash__hist-dado-rot { font-size: 10.5px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .3px; }
.dash__hist-dado-val { font-size: 13.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
.dash__hist-dado.is-ok    .dash__hist-dado-val { color: var(--sucesso); }
.dash__hist-dado.is-erro  .dash__hist-dado-val { color: var(--perigo); }
.dash__hist-dado.is-espera .dash__hist-dado-val { color: var(--aviso); }

/* source: css/relatorios.css */
.relatorios {
  width: min(1440px, 100%);
  margin: 0 auto;
  padding-bottom: 40px;
}

.relatorios__topo {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 22px;
}

.relatorios__sobretitulo {
  display: block;
  margin-bottom: 5px;
  color: var(--accent-texto);
  font: 700 11px/1 var(--font-display);
  letter-spacing: .12em;
  text-transform: uppercase;
}

.relatorios__topo h1 {
  margin: 0;
}

.relatorios__topo p {
  max-width: 680px;
  margin: 6px 0 0;
  color: var(--text-muted);
  font-size: 14px;
  line-height: 1.55;
}

.relatorios__acoes {
  display: flex;
  gap: 9px;
  flex: none;
}

.relatorios__filtro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(420px, 600px);
  align-items: center;
  gap: 24px;
  margin-bottom: 18px;
  padding: 18px 20px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background:
    linear-gradient(115deg, rgba(246, 196, 0, .075), transparent 46%),
    var(--panel-bg);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .025);
}

.relatorios__filtros-tags {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.relatorios__filtro h2 {
  margin: 0 0 4px;
  color: var(--text);
  font: 700 15px/1.3 var(--font-display);
}

.relatorios__filtro p {
  margin: 0;
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.5;
}

.relatorios__campo {
  display: grid;
  gap: 7px;
}

.relatorios__campo > span {
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.relatorios__campo select {
  width: 100%;
  min-height: 42px;
  padding: 0 38px 0 12px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  background: var(--bg);
  color: var(--text);
  font: 600 14px/1 var(--font-body);
  cursor: pointer;
}

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

.relatorios__campo select:disabled {
  color: var(--text-fraco);
  cursor: not-allowed;
}

.relatorios__estado {
  display: grid;
  min-height: 210px;
  place-items: center;
  padding: 24px;
  border: 1px dashed var(--border-strong);
  border-radius: var(--r-md);
  color: var(--text-muted);
  text-align: center;
}

.relatorios__estado.is-erro {
  min-height: auto;
  border-color: var(--perigo-linha);
  background: var(--perigo-soft);
  color: var(--perigo);
}

.relatorios__cards {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}

.relatorios__card {
  --rel-card-cor: var(--info);
  position: relative;
  min-height: 170px;
  overflow: hidden;
  padding: 20px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--panel-bg);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .025);
}

.relatorios__card::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--rel-card-cor);
}

.relatorios__card::after {
  content: '';
  position: absolute;
  top: -44px;
  right: -44px;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--rel-card-cor) 12%, transparent);
  pointer-events: none;
}

.relatorios__card--total { --rel-card-cor: var(--accent); }
.relatorios__card--resposta { --rel-card-cor: var(--sucesso); }
.relatorios__card--sem-resposta { --rel-card-cor: var(--aviso); }
.relatorios__card--tag-1 { --rel-card-cor: var(--info); }
.relatorios__card--tag-2 { --rel-card-cor: var(--no-condicao); }

.relatorios__card-rotulo {
  position: relative;
  z-index: 1;
  display: block;
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.relatorios__card strong {
  position: relative;
  z-index: 1;
  display: block;
  margin: 15px 0 10px;
  color: var(--text);
  font: 800 38px/1 var(--font-display);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.04em;
}

.relatorios__card small {
  position: relative;
  z-index: 1;
  display: block;
  color: var(--text-fraco);
  font-size: 12px;
  line-height: 1.45;
}

.relatorios__leitura {
  margin-top: 14px;
  padding: 20px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--panel-bg);
}

.relatorios__leitura-cabecalho {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 9px;
}

.relatorios__leitura-cabecalho--tag {
  margin-top: 22px;
}

.relatorios__leitura-cabecalho div {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.relatorios__leitura-cabecalho span {
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 600;
}

.relatorios__leitura-cabecalho strong {
  color: var(--text);
  font: 700 18px/1 var(--font-display);
  font-variant-numeric: tabular-nums;
}

.relatorios__leitura-cabecalho small {
  color: var(--text-fraco);
  font-size: 12px;
}

.relatorios__barra {
  height: 9px;
  overflow: hidden;
  border-radius: var(--r-pill);
  background: var(--bg);
  box-shadow: inset 0 0 0 1px var(--border);
}

.relatorios__barra-preenchimento {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  transition: width .42s ease;
}

.relatorios__barra-preenchimento--resposta {
  background: linear-gradient(90deg, color-mix(in srgb, var(--sucesso) 65%, var(--bg)), var(--sucesso));
}

.relatorios__barra-preenchimento--tag-1 {
  background: linear-gradient(90deg, color-mix(in srgb, var(--info) 65%, var(--bg)), var(--info));
}

.relatorios__barra-preenchimento--tag-2 {
  background: linear-gradient(90deg, color-mix(in srgb, var(--no-condicao) 65%, var(--bg)), var(--no-condicao));
}

.relatorios__rodape {
  margin: 12px 2px 0;
  color: var(--text-fraco);
  font-size: 11.5px;
  text-align: right;
}

@media (max-width: 1180px) {
  .relatorios__cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 820px) {
  .relatorios__topo { align-items: flex-start; }
  .relatorios__filtro { grid-template-columns: 1fr; gap: 16px; }
  .relatorios__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
  .relatorios__topo { flex-direction: column; }
  .relatorios__acoes { width: 100%; }
  .relatorios__acoes .btn { flex: 1; }
  .relatorios__filtros-tags { grid-template-columns: 1fr; }
  .relatorios__cards { grid-template-columns: 1fr; }
  .relatorios__card { min-height: 145px; }
  .relatorios__leitura-cabecalho { align-items: flex-start; flex-direction: column; gap: 5px; }
  .relatorios__leitura-cabecalho div { width: 100%; justify-content: space-between; }
}

/* source: css/delivery.css */
.delivery { width: 100%; }
.delivery__resumo { display: flex; gap: 12px; margin: 0 0 18px; }
.delivery__resumo > div { min-width: 180px; padding: 12px 16px; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--panel-bg); }
.delivery__resumo strong, .delivery__resumo span { display: block; }
.delivery__resumo strong { color: var(--text); font: 700 20px/1.2 var(--font-display); }
.delivery__resumo span { margin-top: 4px; color: var(--text-muted); font-size: 11px; text-transform: uppercase; }
.delivery__coluna { min-width: 300px; }
.delivery__cards { min-height: 160px; }
.delivery__info-btn { width: 100%; margin-top: 10px; padding: 7px 9px; border: 1px solid var(--border); border-radius: 6px; background: var(--panel-bg); color: var(--text-muted); text-align: left; cursor: pointer; }
.delivery__info-btn:hover { border-color: var(--accent); color: var(--text); }
.delivery__checklist { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border); }
.delivery__checklist-topo { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; color: var(--text-muted); font-size: 10px; font-weight: 700; text-transform: uppercase; }
.delivery__checklist-topo button { border: 0; background: transparent; color: var(--accent-texto); cursor: pointer; font-weight: 700; }
.delivery__check-item { display: grid; grid-template-columns: auto 1fr auto; align-items: start; gap: 7px; padding: 5px 0; color: var(--text); font-size: 11px; line-height: 1.35; cursor: pointer; }
.delivery__check-item input { margin: 1px 0 0; accent-color: var(--sucesso); }
.delivery__check-item button { border: 0; background: transparent; color: var(--text-fraco); cursor: pointer; }
.delivery__check-item.is-concluido span { color: var(--text-fraco); text-decoration: line-through; }
.delivery__info-texto { min-height: 180px; resize: vertical; }
@media (max-width: 560px) { .delivery__resumo { flex-direction: column; } .delivery__resumo > div { min-width: 0; } }

/* source: css/times.css */
.times { width: min(1180px, 100%); margin: 0 auto; }
.times__topo { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 22px; }
.times__topo h1 { margin: 0; }
.times__topo p { margin: 6px 0 0; color: var(--text-muted); }
.times__aviso { margin-bottom: 14px; padding: 10px 12px; border: 1px solid rgba(61,220,132,.35); border-radius: 8px; background: rgba(61,220,132,.08); color: var(--sucesso); }
.times__aviso.is-erro { border-color: var(--perigo-linha); background: var(--perigo-soft); color: var(--perigo); }
.times__lista .usr__item { padding: 16px; }
@media (max-width: 640px) { .times__topo { align-items: flex-start; flex-direction: column; } .times__topo .btn { width: 100%; } }

/* source: css/configuracoes.css */
.config-meta {
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 700px;
}

.config-meta__topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.config-meta__status {
  display: inline-flex;
  align-items: center;
  font-size: 12.5px;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 999px;
  white-space: nowrap;
}

.config-meta__status--ok {
  background: rgba(246, 196, 0, 0.14);
  color: var(--accent-strong);
  border: 1px solid rgba(246, 196, 0, 0.30);
}

.config-meta__status--pendente {
  background: rgba(217, 119, 6, 0.14);
  color: var(--aviso);
  border: 1px solid rgba(217, 119, 6, 0.3);
}

.config-meta__guia {
  background: var(--panel-bg);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 18px 20px;
  box-shadow: var(--shadow-sm);
}

.config-meta__guia-titulo {
  font-weight: 700;
  font-size: 14px;
  color: var(--text);
  margin-bottom: 12px;
}

.config-meta__guia-passo {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 0;
  border-top: 1px solid var(--border);
}

.config-meta__guia-num {
  width: 24px;
  height: 24px;
  min-width: 24px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent-strong);
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.config-meta__guia-texto {
  font-size: 13.5px;
  color: var(--text-muted);
  line-height: 1.5;
  padding-top: 2px;
}

.config-meta__webhook-url {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--accent-soft);
  border: 1px solid rgba(246, 196, 0, 0.25);
  border-radius: var(--r-sm);
  padding: 12px 14px;
  flex-wrap: wrap;
}

.config-meta__webhook-label {
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent);
  white-space: nowrap;
}

.config-meta__webhook-valor {
  flex: 1;
  font-family: ui-monospace, "Cascadia Code", monospace;
  font-size: 13px;
  color: var(--accent-strong);
  word-break: break-all;
  min-width: 0;
}

.config-meta__form {
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: var(--panel-bg);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 20px;
  box-shadow: var(--shadow-sm);
}

.config-meta__field {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.config-meta__resultado {
  font-size: 13.5px;
  padding: 10px 14px;
  border-radius: var(--r-sm);
  border: 1px solid transparent;
}

.config-meta__resultado--ok {
  background: rgba(246, 196, 0, 0.10);
  border-color: rgba(246, 196, 0, 0.25);
  color: var(--accent-strong);
}

.config-meta__resultado--erro {
  background: rgba(220, 38, 38, 0.1);
  border-color: rgba(220, 38, 38, 0.25);
  color: var(--perigo);
}

.config-meta__acoes {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 4px;
}

/* Variante do resultado que suporta múltiplas linhas (para o teste de conexão). */
.config-meta__resultado--detalhe {
  white-space: pre-line;
  line-height: 1.65;
}

/* ── Ver conta conectada — painel de identidade ──────────────────── */
.config-meta__identidade {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.config-meta__id-bloco {
  padding: 14px 16px;
  border-radius: var(--r-sm);
  border: 1px solid transparent;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.config-meta__id-bloco--ok {
  background: rgba(246, 196, 0, 0.07);
  border-color: rgba(246, 196, 0, 0.22);
}

.config-meta__id-bloco--erro {
  background: rgba(220, 38, 38, 0.07);
  border-color: rgba(220, 38, 38, 0.22);
}

.config-meta__id-titulo {
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-muted);
  margin-bottom: 2px;
}

.config-meta__id-linha {
  display: flex;
  gap: 8px;
  font-size: 13.5px;
  flex-wrap: wrap;
  align-items: baseline;
}

.config-meta__id-chave {
  color: var(--text-muted);
  min-width: 140px;
  flex-shrink: 0;
  font-size: 13px;
}

.config-meta__id-valor {
  color: var(--text);
  word-break: break-word;
}

.config-meta__id-erro {
  font-size: 13.5px;
  color: var(--perigo);
}

.config-meta__id-aviso {
  font-size: 13px;
  font-weight: 600;
  color: var(--aviso);
  background: rgba(217, 119, 6, 0.1);
  border: 1px solid rgba(217, 119, 6, 0.25);
  border-radius: var(--r-sm);
  padding: 8px 12px;
}

/* ── Configurações v2: oito abas ───────────────────────────────────── */
.cfg { max-width: 1000px; }
.cfg__topo { margin-bottom: 22px; }
.cfg__titulo { font-family: var(--font-display); font-size: 26px; margin-bottom: 2px; }
.cfg__sub { color: var(--text-muted); font-size: 13.5px; }

.cfg__corpo { display: grid; grid-template-columns: 200px 1fr; gap: 26px; align-items: start; }

/* Abas na vertical: oito abas horizontais quebram em tela média. */
.cfg__abas { display: flex; flex-direction: column; gap: 2px; }
.cfg__aba {
  text-align: left; font: inherit; font-size: 13.5px; font-weight: 500;
  padding: 9px 12px; border-radius: 8px;
  background: none; border: none; color: var(--text-muted);
  cursor: pointer; transition: background .15s, color .15s;
}
.cfg__aba:hover { background: var(--panel-bg-hover); color: var(--text); }
.cfg__aba.is-ativa { background: var(--accent-soft); color: var(--accent-texto); font-weight: 600; }
.cfg__aba:focus-visible { outline: 2px solid var(--accent-ring); outline-offset: 1px; }

.cfg__painel { min-width: 0; }
.cfg__carregando, .cfg__vazio { color: var(--text-muted); font-size: 13.5px; }

.cfg__secao {
  padding: 18px 20px; margin-bottom: 16px;
  background: var(--panel-bg);
  border: 1px solid var(--border); border-radius: var(--r-md);
}
.cfg__secao-titulo { font-family: var(--font-display); font-size: 16px; margin-bottom: 3px; }
.cfg__secao-sub { color: var(--text-muted); font-size: 12.5px; line-height: 1.5; margin-bottom: 14px; }

.cfg__linha {
  display: flex; justify-content: space-between; gap: 16px;
  padding: 9px 0; border-top: 1px solid var(--border);
  font-size: 13.5px;
}
.cfg__linha:first-of-type { border-top: none; }
.cfg__linha-rot { color: var(--text-muted); }
.cfg__linha-val { font-weight: 600; text-align: right; word-break: break-all; }

.cfg__form { display: flex; flex-direction: column; gap: 12px; max-width: 380px; }

/* ── Meu perfil ───────────────────────────────────────────────────── */
.cfg-perfil {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: 28px;
  align-items: start;
}
.cfg-perfil__foto-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.cfg-perfil__avatar {
  width: 112px;
  height: 112px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(246, 196, 0, .28);
  border-radius: 32px;
  background:
    radial-gradient(circle at 30% 20%, rgba(246, 196, 0, .13), transparent 58%),
    #0d263b;
  color: var(--accent-texto);
  font-family: var(--font-display);
  font-size: 36px;
  font-weight: 800;
  box-shadow: 0 18px 34px -24px rgba(246, 196, 0, .8);
}
.cfg-perfil__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cfg-perfil__foto-acoes {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
}
.cfg-perfil__escolher { cursor: pointer; text-align: center; }
.cfg-perfil__remover {
  border: 0;
  background: transparent;
  color: var(--text-muted);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}
.cfg-perfil__remover:hover { color: var(--perigo); }
.cfg-perfil__foto-col small {
  color: var(--text-fraco);
  font-size: 11px;
  line-height: 1.45;
  text-align: center;
}
.cfg-perfil__campos {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 430px;
}
.cfg-perfil__campos .campo__input[readonly] {
  opacity: .72;
  cursor: not-allowed;
}
.cfg-perfil__papel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--text-muted);
  font-size: 12.5px;
}
.cfg-perfil__papel strong {
  color: var(--accent-texto);
  font-size: 12px;
}
.cfg-perfil__salvar { align-self: flex-start; min-width: 150px; }

@media (max-width: 680px) {
  .cfg-perfil { grid-template-columns: 1fr; gap: 20px; }
  .cfg-perfil__foto-col { align-items: flex-start; }
  .cfg-perfil__foto-acoes { align-items: flex-start; }
  .cfg-perfil__salvar { width: 100%; }
}

.cfg__aviso {
  padding: 10px 12px; border-radius: 8px; font-size: 12.5px; line-height: 1.5;
  background: var(--panel-bg-hover); color: var(--text-muted);
  border: 1px solid var(--border);
}
.cfg__aviso--ok { background: var(--sucesso-soft); border-color: var(--sucesso-linha); color: var(--sucesso); }
.cfg__aviso--erro { background: var(--perigo-soft); border-color: var(--perigo-linha); color: var(--perigo); }
.cfg__aviso--pendente { background: var(--aviso-soft); border-color: var(--aviso-linha); color: var(--aviso); }

/* Exclusão do próprio usuário: duas etapas visuais e confirmação no servidor. */
.cfg__secao--perigo {
  border-color: color-mix(in srgb, var(--perigo) 36%, var(--border));
}
.cfg-excluir {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  max-width: 520px;
}
.cfg-excluir__texto,
.cfg-excluir__confirmacao > p {
  margin: 0;
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.55;
}
.cfg-excluir__confirmacao {
  display: grid;
  gap: 12px;
  width: min(100%, 420px);
  padding: 16px;
  border: 1px solid var(--perigo-linha);
  border-radius: var(--r-md);
  background: var(--perigo-soft);
}
.cfg-excluir__confirmacao[hidden] { display: none; }
.cfg-excluir__confirmacao > strong { color: var(--perigo); }
.cfg-excluir__acoes {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
.btn--perigo {
  border: 1px solid var(--perigo);
  background: var(--perigo);
  color: #fff;
}
.btn--perigo:hover:not(:disabled) { filter: brightness(1.08); }
.btn--perigo:disabled { opacity: .45; cursor: not-allowed; }

.cfg__ws, .cfg__usuario, .cfg__conta, .cfg__log {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 11px 0; border-top: 1px solid var(--border);
}
.cfg__ws { flex-direction: column; align-items: flex-start; gap: 2px; }
.cfg__ws-meta, .cfg__usuario-email, .cfg__conta-num { font-size: 12px; color: var(--text-fraco); }
.cfg__usuario-info, .cfg__conta-info { display: flex; flex-direction: column; gap: 1px; }

.cfg__grupo { margin-bottom: 20px; }
.cfg__grupo-titulo { font-size: 14px; font-weight: 700; margin-bottom: 2px; }
.cfg__grupo-sub { font-size: 12.5px; color: var(--text-muted); line-height: 1.5; margin-bottom: 8px; }

.cfg__selo {
  font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px;
  background: var(--panel-bg-hover); color: var(--text-muted); flex: none;
}
.cfg__selo--conectado, .cfg__selo--admin_org { background: var(--sucesso-soft); color: var(--sucesso); }
.cfg__selo--desconectado, .cfg__selo--inativo { background: var(--perigo-soft); color: var(--perigo); }
.cfg__conta-tier { font-size: 11.5px; color: var(--text-fraco); font-variant-numeric: tabular-nums; }

.cfg-canal__lista {
  display: grid;
  gap: 12px;
  margin-top: 14px;
}
.cfg-canal__conta {
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--panel-bg-hover);
}
.cfg-canal__topo {
  display: flex;
  align-items: center;
  gap: 11px;
}
.cfg-canal__avatar {
  width: 42px;
  height: 42px;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  border: 1px solid rgba(246, 196, 0, .24);
  background: var(--accent-soft);
  color: var(--accent-texto);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .04em;
}
.cfg-canal__info {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.cfg-canal__nome {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cfg-canal__numero { color: var(--text-muted); font-size: 12px; }
.cfg-canal__detalhes {
  margin: 13px 0 0 53px;
  padding-top: 9px;
  border-top: 1px solid var(--border);
}
.cfg-canal__detalhes .cfg__linha { padding: 5px 0; }
.cfg-canal__acoes {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 13px;
}
.cfg-canal__vazio {
  padding: 24px 16px;
  border: 1px dashed var(--border-strong);
  border-radius: var(--r-md);
  color: var(--text-muted);
  text-align: center;
}
.cfg-canal__conectar { justify-self: start; margin-top: 2px; }
.cfg-canal__manual { justify-self: start; }
.btn--perigo-ghost {
  border: 1px solid color-mix(in srgb, var(--perigo) 55%, transparent);
  background: transparent;
  color: var(--perigo);
}
.btn--perigo-ghost:hover:not(:disabled) { background: var(--perigo-soft); }
.cfg__selo--conectando { background: var(--aviso-soft); color: var(--aviso); }

.cfg__log { flex-direction: column; align-items: flex-start; gap: 2px; }
.cfg__log-quando { font-size: 11.5px; color: var(--text-fraco); font-variant-numeric: tabular-nums; }
.cfg__log-texto { font-size: 12.5px; }
.cfg__log-filtros { display: flex; gap: 8px; margin-bottom: 8px; }
.cfg__log-filtro { width: auto; min-width: 190px; }
.cfg__log-topo {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%;
}
.cfg__log-usuario { font-size: 13px; }
.cfg__log-paginacao {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding-top: 14px;
}
.cfg__log-pagina { color: var(--text-muted); font-size: 12px; text-align: center; }

@media (max-width: 860px) {
  .cfg__corpo { grid-template-columns: 1fr; }
  .cfg__abas { flex-direction: row; overflow-x: auto; padding-bottom: 4px; }
  .cfg__aba { white-space: nowrap; }
  .cfg-canal__detalhes { margin-left: 0; }
  .cfg-canal__acoes { justify-content: stretch; }
  .cfg-canal__acoes .btn { flex: 1; }
}

/* Botão voltar das Configurações.
   Elas saíram do menu lateral na versão 2.0, então nenhum item fica marcado
   enquanto estão abertas — sem este botão, a única saída era adivinhar em que
   tela a pessoa estava antes. */
.cfg__topo {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}
.cfg__voltar {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex: none;
  margin-top: 4px;
  padding: 8px 14px;
  border-radius: var(--r-sm);
  border: 1px solid var(--border);
  background: var(--elevado);
  color: var(--text);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background .18s, border-color .18s;
}
.cfg__voltar svg { width: 15px; height: 15px; }
.cfg__voltar:hover { background: var(--panel-bg-hover); border-color: var(--border-strong); }
.cfg__voltar:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* source: css/confirmar.css */
/* Diálogo de confirmação — ver js/confirmar.js.
   Escuro como o resto do painel, com o vermelho reservado para o que destrói. */

.confirmar {
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--panel-bg);
  color: var(--text);
  padding: 24px;
  width: min(440px, calc(100vw - 32px));
  box-shadow: var(--shadow-lg);
  /* <dialog> modal centraliza sozinho por margin:auto do navegador. O reset
     do projeto zera margens, então a centralização precisa voltar aqui —
     sem isto o diálogo cola no canto superior esquerdo. */
  margin: auto;
}
.confirmar::backdrop { background: rgba(0, 0, 0, .66); }

.confirmar__cabecalho { margin-bottom: 12px; }

/* "Etapa 1 de 2" — a pessoa precisa saber que ainda há uma pergunta pela
   frente, senão a segunda parece um erro do sistema. */
.confirmar__passo {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 8px;
}

.confirmar__titulo {
  margin: 0;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.3;
}

.confirmar__texto {
  margin: 0 0 4px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-muted);
}

/* O que se perde junto. Fundo próprio para não passar batido como texto. */
.confirmar__perdas {
  margin: 14px 0 4px;
  padding: 12px 16px 12px 30px;
  border-radius: var(--r-md);
  background: var(--elevado);
  border-left: 3px solid var(--accent);
  font-size: 13px;
  line-height: 1.8;
  color: var(--text-muted);
}

.confirmar__rotulo {
  display: block;
  margin: 18px 0 6px;
  font-size: 13px;
  color: var(--text-muted);
}
.confirmar__rotulo strong { color: var(--text); font-family: 'IBM Plex Mono', monospace; }

.confirmar__campo {
  width: 100%;
  padding: 10px 12px;
  border-radius: var(--r-sm);
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  font: inherit;
  font-size: 14px;
}
.confirmar__campo:focus { outline: none; border-color: var(--accent); }

.confirmar__acoes {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 22px;
}

.confirmar__btn {
  padding: 9px 16px;
  border-radius: var(--r-sm);
  border: 1px solid var(--border);
  background: var(--elevado);
  color: var(--text);
  font: inherit;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  transition: background .18s, border-color .18s, opacity .18s;
}
.confirmar__btn:hover { background: var(--panel-bg-hover); }
.confirmar__btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.confirmar__btn--perigo {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.confirmar__btn--perigo:hover { filter: brightness(1.1); }

/* Desabilitado enquanto o nome não confere. Some o cursor de clique junto —
   botão que parece clicável e não responde passa impressão de travamento. */
.confirmar__btn:disabled { opacity: .45; cursor: not-allowed; }
.confirmar__btn:disabled:hover { background: var(--elevado); }

@media (prefers-reduced-motion: reduce) {
  .confirmar__btn { transition: none; }
}

/* source: css/usuarios.css */
/* Usuários, papéis e permissões — aba "usuarios" de Configurações.
 *
 * Prefixo usr__ próprio em vez de estender cfg__: esta aba é a única com lista
 * editável, painel aninhado e três estados por linha. Enfiar isso no cfg__, que
 * é vocabulário de tela de leitura, faria uma mudança aqui vazar para as outras
 * sete abas. Cores e botões continuam vindo de styles.css.
 *
 * ATENÇÃO ao mexer nas cores daqui: este arquivo nasceu usando `--fundo-cartao`,
 * `--fundo-suave`, `--texto-fraco` e `--borda`, que NÃO EXISTEM neste projeto.
 * Variável inexistente não quebra nada — o CSS cai no valor de reserva, e os
 * valores de reserva eram de tema claro. O resultado foi um cartão branco no
 * meio de um painel preto, com o nome do usuário ilegível, sem um único erro no
 * console para denunciar.
 *
 * Os tokens de verdade estão no `:root` de styles.css: `--panel-bg`, `--elevado`,
 * `--border`, `--text`, `--text-muted`, `--text-fraco`, `--accent` e os de
 * estado (`--sucesso`, `--aviso`, `--perigo`, `--info`). Se um nome não estiver
 * lá, ele não existe. */

.usr {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* ── Um usuário da lista ─────────────────────────────────────────────────── */

.usr__item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--panel-bg);
}

/* Inativo fica visivelmente apagado, e não só com um selo: numa lista longa, um
 * selo pequeno passa batido e alguém cobra acesso de quem já foi desativado. */
.usr__item--inativo {
  opacity: 0.62;
  background: var(--elevado);
}

.usr__info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1 1 220px;
  min-width: 0;
}

.usr__nome {
  font-size: 15px;
}

.usr__email,
.usr__acesso {
  font-size: 12.5px;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.usr__acoes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.usr__papel {
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--elevado);
  color: var(--text);
  font: inherit;
  font-size: 13px;
}

.usr__voce {
  font-size: 12px;
  color: var(--text-muted);
  font-style: italic;
}

/* ── Selos ───────────────────────────────────────────────────────────────── */

.usr__selo {
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  background: var(--elevado);
  color: var(--text-muted);
  white-space: nowrap;
}

/* Cada papel ganha a cor que o painel já usa para aquele significado, e não uma
 * paleta pastel própria: administrador puxa o vermelho da marca porque é o nível
 * que pode tudo, e inativo puxa o vermelho de perigo. As duas famílias de
 * vermelho se distinguem pelo fundo — uma é a cor da casa, a outra é alarme. */
.usr__selo--admin,
.usr__selo--admin_geral { background: var(--accent-soft); color: var(--accent-strong); }
.usr__selo--funcionario { background: rgba(61, 220, 132, 0.14); color: var(--sucesso); }
.usr__selo--atendente   { background: rgba(245, 165, 36, 0.14); color: var(--aviso); }
.usr__selo--visualizador{ background: rgba(90, 169, 255, 0.14); color: var(--info); }
.usr__selo--inativo     { background: rgba(255, 90, 90, 0.14); color: var(--perigo); }

/* ── Painel de permissões ────────────────────────────────────────────────── */

.usr__perm {
  flex-basis: 100%;
  margin-top: 10px;
  padding: 12px 14px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.usr__perm-sub {
  margin: 0;
  font-size: 13px;
  color: var(--text-muted);
}

.usr__perm-grupo {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.usr__perm-modulo {
  margin: 6px 0 2px;
  font-size: 11.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-fraco);
}

.usr__perm-linha {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 8px;
  border-radius: 8px;
  /* A borda esquerda existe transparente desde já para que marcar exceção não
   * empurre a linha 3px para o lado. */
  border-left: 3px solid transparent;
}

.usr__perm-rot {
  display: flex;
  flex-direction: column;
  font-size: 13.5px;
  min-width: 0;
}

.usr__perm-padrao {
  font-size: 11.5px;
  color: var(--text-fraco);
}

/* O que difere do papel precisa saltar aos olhos: é justamente a informação que
 * some quando alguém revisa acessos meses depois. */
.usr__perm-linha.is-excecao {
  background: rgba(245, 165, 36, 0.10);
  border-left-color: var(--aviso);
}

.usr__perm-sel {
  padding: 5px 8px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--elevado);
  color: var(--text);
  font: inherit;
  font-size: 12.5px;
  flex: 0 0 auto;
}

.usr__perm-sel:disabled {
  background: var(--elevado);
  color: var(--text-fraco);
}

/* ── Redefinir senha e convite ───────────────────────────────────────────── */

.usr__senha {
  flex-basis: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}

.usr__senha-rot {
  font-size: 13px;
  color: var(--text-muted);
}

.usr__senha .campo__input {
  flex: 1 1 200px;
}

.usr__convite {
  margin-top: 6px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
}

.usr__form {
  width: 100%;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--elevado);
}

@media (max-width: 640px) {
  .usr__item { align-items: flex-start; }
  .usr__acoes { width: 100%; }
  .usr__perm-linha { align-items: flex-start; flex-direction: column; }
  /* Select de permissão ocupa a largura total quando a linha vira coluna */
  .usr__perm-sel { width: 100%; }
}

/* source: css/contatos.css */
/* ═══════════════════════════════════════════════════════════════════════════
   CONTATOS — centro de gestão

   Tema escuro do painel: fundo preto, vermelho nos detalhes, linhas claras.
   Só tokens que existem em styles.css — variável inventada vira transparente,
   e o bug some no meio da tela escura sem ninguém perceber.

   A tabela é o coração da tela e por isso ganha o tratamento mais cuidadoso:
   cabeçalho que gruda ao rolar, linha que responde ao mouse, e hierarquia de
   peso entre o nome (o que se procura) e o resto (o que se confere).
   ═══════════════════════════════════════════════════════════════════════════ */

.crm { display: flex; flex-direction: column; gap: 18px; min-height: 0; }

.crm__titulo {
  font-family: var(--font-display); font-size: 19px; margin: 0;
  letter-spacing: -0.01em;
}
.crm__titulo-mini {
  font-family: var(--font-display); font-size: 13px; margin: 0 0 10px;
  text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-muted);
}
.crm__ajuda { color: var(--text-muted); font-size: 13px; margin: 0; line-height: 1.55; }
.crm__vazio { color: var(--text-fraco); }

/* ── Cards de métrica ─────────────────────────────────────────────────────
   Grade que se adapta sozinha: os cards não são um número fixo — uma métrica
   que o workspace não sabe responder simplesmente não é publicada. */
.crm__metricas {
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
}
.crm__metrica {
  background: var(--panel-bg); border: 1px solid var(--border);
  border-radius: var(--r-md); padding: 14px 16px;
  display: flex; flex-direction: column; gap: 2px;
  position: relative; overflow: hidden;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.crm__metrica::before {
  content: ''; position: absolute; inset: 0 auto 0 0; width: 3px;
  background: var(--border-strong);
}
.crm__metrica:hover { border-color: var(--border-strong); transform: translateY(-1px); }
.crm__metrica-n {
  font-family: var(--font-display); font-size: 26px; font-weight: 700;
  line-height: 1.1; letter-spacing: -0.02em;
}
.crm__metrica-nome {
  font-size: 12px; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 0.05em;
}
/* O acento vermelho marca o que exige ação; verde e cinza contam o resto. */
.crm__metrica--total::before { background: var(--accent); }
.crm__metrica--respondendo::before { background: var(--sucesso); }
.crm__metrica--respondendo .crm__metrica-n { color: var(--sucesso); }
.crm__metrica--disponiveis::before { background: var(--info); }
.crm__metrica--convertidos::before { background: var(--sucesso); }
.crm__metrica--leads_frios::before { background: var(--info); }
.crm__metrica--bloqueados::before { background: var(--perigo); }
.crm__metrica--importados_hoje::before { background: var(--aviso); }

/* ── Abas ─────────────────────────────────────────────────────────────────
   Rolagem horizontal: o funil do cliente pode ter doze etapas, e quebrar em
   duas linhas empurraria a tabela para fora da primeira dobra. */
.crm__abas {
  display: flex; gap: 4px; overflow-x: auto; padding-bottom: 2px;
  border-bottom: 1px solid var(--border); scrollbar-width: thin;
}
.crm__aba {
  appearance: none; background: none; border: none; cursor: pointer;
  font: inherit; color: var(--text-muted); white-space: nowrap;
  padding: 9px 13px; border-radius: var(--r-sm) var(--r-sm) 0 0;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  display: inline-flex; align-items: center; gap: 7px;
  transition: color 0.15s ease, background 0.15s ease;
}
.crm__aba:hover { color: var(--text); background: var(--panel-bg); }
.crm__aba.is-active {
  color: var(--accent-texto); border-bottom-color: var(--accent);
  font-weight: 600; background: var(--accent-soft);
}
.crm__aba-n {
  background: var(--elevado); color: var(--text-muted);
  border-radius: var(--r-pill); padding: 1px 8px;
  font-size: 11.5px; font-weight: 600; font-variant-numeric: tabular-nums;
}
.crm__aba.is-active .crm__aba-n { background: var(--accent); color: #fff; }

/* ── Barra de ferramentas ────────────────────────────────────────────────── */
.crm__barra { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.crm__busca { flex: 1 1 260px; min-width: 200px; }
.crm__ordem { width: auto; min-width: 150px; }
.crm__btn-filtros.is-ligado {
  border-color: var(--accent-ring); color: var(--accent-texto);
  background: var(--accent-soft);
}
.crm__btn-filtros.is-active { background: var(--panel-bg-hover); }

/* ── Painel de filtros avançados ─────────────────────────────────────────── */
.crm__filtros {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  background: var(--panel-bg); border: 1px solid var(--border);
  border-radius: var(--r-md); padding: 16px;
}
.crm__filtros[hidden] { display: none; }
.crm__filtro { display: flex; flex-direction: column; gap: 5px; }
.crm__filtro-rotulo {
  font-size: 11.5px; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 0.05em;
}
.crm__filtro-campo { width: 100%; }
.crm__filtros-acoes {
  grid-column: 1 / -1; display: flex; gap: 8px; justify-content: flex-end;
  border-top: 1px solid var(--border); padding-top: 12px;
}

/* ── Barra de ações em massa ──────────────────────────────────────────────
   Fica grudada no topo ao rolar: a seleção é feita percorrendo a lista, e uma
   barra que sobe junto com o conteúdo obrigaria a voltar ao topo para agir. */
.crm__selecao {
  position: sticky; top: 0; z-index: 5;
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  background: var(--accent-soft); border: 1px solid var(--accent-ring);
  border-radius: var(--r-md); padding: 10px 14px;
  box-shadow: var(--shadow-md);
}
.crm__selecao[hidden] { display: none; }
.crm__selecao-n {
  font-family: var(--font-display); color: var(--accent-texto);
  font-size: 14px; margin-right: 4px;
}
.crm__selecao select { width: auto; min-width: 168px; }
.crm__limpar-sel { margin-left: auto; }

.btn--perigo {
  background: var(--perigo-soft); border: 1px solid var(--perigo-linha);
  color: var(--perigo);
}
.btn--perigo:hover { background: var(--perigo); color: #fff; }

/* ── Tabela ───────────────────────────────────────────────────────────────── */
.crm__tabela-wrap { overflow: auto; max-height: 62vh; border-radius: var(--r-md); }
.crm__th {
  position: sticky; top: 0; z-index: 2;
  background: var(--elevado); color: var(--text-muted);
  font-size: 11.5px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.05em; text-align: left; white-space: nowrap;
  padding: 10px 12px; border-bottom: 1px solid var(--border-strong);
}
.crm__th--sel { width: 36px; padding-left: 14px; }
.crm__td-sel { width: 36px; padding-left: 14px; }
.crm__check { accent-color: var(--accent); cursor: pointer; width: 15px; height: 15px; }

.crm__linha { transition: background 0.12s ease; }
.crm__linha:hover { background: var(--panel-bg-hover); }
.crm__linha.is-marcada { background: var(--accent-soft); }
.crm__linha td { padding: 9px 12px; border-bottom: 1px solid var(--border); vertical-align: middle; }

.crm__contato { display: flex; align-items: center; gap: 10px; }
.crm__contato-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.crm__avatar {
  flex: none; width: 32px; height: 32px; border-radius: var(--r-pill);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 700; font-size: 14px;
}
.crm__nome {
  appearance: none; background: none; border: none; padding: 0; cursor: pointer;
  font: inherit; font-weight: 600; color: var(--text); text-align: left;
  max-width: 210px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.crm__nome:hover { color: var(--accent-texto); text-decoration: underline; }
.crm__num { font-family: var(--font-mono); font-size: 11.5px; color: var(--text-muted); }

.crm__tag {
  display: inline-block; background: var(--elevado); color: var(--text-muted);
  border: 1px solid var(--border); border-radius: var(--r-pill);
  padding: 1px 8px; font-size: 11px; margin: 1px 3px 1px 0;
}
.crm__tag--mais { color: var(--text-fraco); }
.crm__etapa {
  display: inline-block; background: var(--panel-bg-hover);
  border: 1px solid var(--border-strong); border-radius: var(--r-sm);
  padding: 2px 9px; font-size: 12px; white-space: nowrap;
}
.crm__fluxo {
  display: inline-block; background: var(--info-soft); color: var(--info);
  border: 1px solid var(--info-linha); border-radius: var(--r-sm);
  padding: 2px 8px; font-size: 11.5px; white-space: nowrap;
}
.crm__quando { color: var(--text-muted); font-size: 12.5px; white-space: nowrap; }

/* "respondendo" ganha destaque: é a única linha da tabela que pede ação agora. */
.crm__pulso {
  display: block; color: var(--sucesso); font-size: 10.5px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.05em;
}
.crm__situacao {
  display: inline-block; border-radius: var(--r-pill); padding: 2px 9px;
  font-size: 11.5px; font-weight: 600; white-space: nowrap;
  background: var(--elevado); color: var(--text-muted);
}
.crm__situacao--ativo {
  background: var(--sucesso-soft); color: var(--sucesso);
  border: 1px solid var(--sucesso-linha);
}
.crm__situacao--bloqueado {
  background: var(--perigo-soft); color: var(--perigo);
  border: 1px solid var(--perigo-linha);
}

.crm__rodape {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  color: var(--text-muted); font-size: 13px;
}

/* ── Aviso de resultado de ação ───────────────────────────────────────────── */
.crm__aviso {
  position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%);
  background: var(--elevado); border: 1px solid var(--border-strong);
  border-radius: var(--r-pill); padding: 10px 20px;
  box-shadow: var(--shadow-lg); z-index: 60; font-size: 13.5px;
}
.crm__aviso[hidden] { display: none; }
.crm__aviso--erro { border-color: var(--perigo-linha); color: var(--perigo); }

/* ── Duplicados ───────────────────────────────────────────────────────────── */
.crm__duplicados { display: flex; flex-direction: column; gap: 12px; }
.crm__duplicados[hidden] { display: none; }
.crm__dup-topo {
  background: var(--panel-bg); border: 1px solid var(--border);
  border-radius: var(--r-md); padding: 16px;
}
.crm__dup-grupo {
  background: var(--panel-bg); border: 1px solid var(--border);
  border-left: 3px solid var(--aviso);
  border-radius: var(--r-md); padding: 14px 16px;
}
.crm__dup-chave {
  font-family: var(--font-display); font-size: 13px; margin: 0 0 10px;
  color: var(--aviso);
}
.crm__dup-linha {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 0; border-top: 1px solid var(--border);
}
.crm__dup-linha .crm__contato-txt { flex: 1; }
.crm__dup-excluir { margin-left: auto; }

/* ── Mapeamento das colunas da planilha ───────────────────────────────────── */
.crm__mapeamento {
  background: var(--panel-bg); border: 1px solid var(--border);
  border-radius: var(--r-md); padding: 14px 16px; margin-bottom: 4px;
}
.crm__mapeamento[hidden] { display: none; }
.crm__campos { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.crm__campo {
  display: flex; flex-direction: column; gap: 1px;
  background: var(--elevado); border: 1px solid var(--border);
  border-radius: var(--r-sm); padding: 7px 12px; min-width: 118px;
}
.crm__campo-nome { font-size: 12.5px; font-weight: 600; }
.crm__campo-n { font-size: 11px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.crm__campo--extra { border-style: dashed; }
/* Campo reconhecido mas sem nenhum valor é o sintoma do erro caro da
   importação: a coluna existe na planilha e não chegou em ninguém. */
.crm__campo--vazio { border-color: var(--aviso-linha); }
.crm__campo--vazio .crm__campo-n { color: var(--aviso); }

/* ── Gráficos ─────────────────────────────────────────────────────────────── */
.crm__graficos { display: flex; flex-direction: column; gap: 14px; }
.crm__gr-grade {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
.crm__gr {
  background: var(--panel-bg); border: 1px solid var(--border);
  border-radius: var(--r-md); padding: 16px;
}
.crm__gr--serie { grid-column: 1 / -1; }
.crm__gr-linha {
  display: grid; grid-template-columns: 118px 1fr 62px;
  align-items: center; gap: 10px; padding: 3px 0;
}
.crm__gr-rotulo {
  font-size: 12.5px; color: var(--text-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.crm__gr-trilho {
  background: var(--elevado); border-radius: var(--r-pill); height: 8px; overflow: hidden;
}
.crm__gr-barra {
  height: 100%; border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--accent), var(--accent-strong));
}
.crm__gr-valor {
  font-size: 12.5px; text-align: right; font-variant-numeric: tabular-nums;
  font-family: var(--font-mono);
}
.crm__gr-legenda {
  display: flex; justify-content: space-between; margin-top: 8px;
  font-size: 12px; color: var(--text-muted);
}
.crm__svg { width: 100%; height: 120px; display: block; }
.crm__svg-linha { fill: none; stroke: var(--accent-strong); stroke-width: 2; vector-effect: non-scaling-stroke; }
.crm__svg-area { fill: var(--accent-soft); stroke: none; }

/* ═══════════════════════════════════════════════════════════════════════════
   FICHA DO CONTATO — painel lateral com a linha do tempo

   Painel lateral e não página nova: quem abre a ficha está conferindo um
   contato no meio de uma lista filtrada, e navegar para fora perderia o lugar
   onde a pessoa estava.
   ═══════════════════════════════════════════════════════════════════════════ */

.ficha__fundo {
  position: fixed; inset: 0; background: rgba(0, 0, 0, 0.62);
  z-index: 80; backdrop-filter: blur(2px);
}
.ficha__fundo[hidden] { display: none; }

.ficha {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(560px, 94vw);
  background: var(--panel-bg); border-left: 1px solid var(--border-strong);
  box-shadow: var(--shadow-lg); z-index: 81;
  overflow-y: auto; padding: 22px; display: flex; flex-direction: column; gap: 18px;
}
.ficha[hidden] { display: none; }

.ficha__topo {
  display: flex; align-items: center; gap: 12px;
  padding-bottom: 16px; border-bottom: 1px solid var(--border);
}
.ficha__topo .crm__avatar { width: 44px; height: 44px; font-size: 19px; }
.ficha__ident { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ficha__nome { font-family: var(--font-display); font-size: 20px; margin: 0; }
.ficha__fechar { margin-left: auto; }

.ficha__dados { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; }
.ficha__dado { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.ficha__dado-rotulo {
  font-size: 11px; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 0.05em;
}
.ficha__dado-valor {
  font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ficha__tags { display: flex; flex-wrap: wrap; gap: 4px; }

.ficha__anotacoes { display: flex; flex-direction: column; gap: 8px; }
.ficha__texto { resize: vertical; font-size: 13.5px; }
.ficha__anotacoes .btn { align-self: flex-start; }

.ficha__campanhas { display: flex; flex-direction: column; gap: 6px; }
.ficha__campanha {
  display: flex; align-items: center; gap: 10px;
  background: var(--elevado); border: 1px solid var(--border);
  border-radius: var(--r-sm); padding: 8px 12px;
}
.ficha__campanha-nome { flex: 1; font-size: 13px; }

/* A linha do tempo é uma trilha vertical: a régua contínua à esquerda é o que
   faz três fontes diferentes (edição, disparo, mensagem) lerem-se como uma
   história só, e não como três listas empilhadas. */
.ficha__timeline { display: flex; flex-direction: column; }
.ficha__evento {
  display: flex; gap: 12px; padding: 10px 0 10px 4px;
  position: relative; margin-left: 10px;
  border-left: 1px solid var(--border);
}
.ficha__evento:last-child { border-left-color: transparent; }
.ficha__evento-icone {
  flex: none; width: 24px; height: 24px; margin-left: -12.5px;
  border-radius: var(--r-pill); background: var(--elevado);
  border: 1px solid var(--border-strong);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11.5px; color: var(--text-muted);
}
.ficha__evento-corpo { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ficha__evento-txt { font-size: 13.5px; line-height: 1.45; word-break: break-word; }
.ficha__evento-quando { font-size: 11.5px; color: var(--text-fraco); }
.ficha__evento-erro {
  font-size: 11.5px; color: var(--perigo);
  background: var(--perigo-soft); border-radius: var(--r-sm);
  padding: 3px 8px; margin-top: 3px;
}
/* Cada fonte tem a sua cor no marcador — dá para ler a coluna da esquerda de
   relance e ver se o que aconteceu foi conversa, disparo ou alguém agindo. */
.ficha__evento--mensagem .ficha__evento-icone { color: var(--info); border-color: var(--info-linha); }
.ficha__evento--envio .ficha__evento-icone { color: var(--accent-texto); border-color: var(--accent-ring); }
.ficha__evento--evento .ficha__evento-icone { color: var(--sucesso); border-color: var(--sucesso-linha); }

/* ── Telas estreitas ──────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .crm__filtros { grid-template-columns: 1fr 1fr; }
  .ficha__dados { grid-template-columns: 1fr; }
  .crm__tabela-wrap { max-height: none; }
  .crm__selecao { position: static; }
}

/* source: css/campanhas-v2.css */
/* campanhas-v2 — estilos do módulo. Criado vazio para poder ser ligado no HTML. */

/* source: css/extrair-leads.css */
/* ============================================
   Extrair Leads - Design System coerente
   ============================================ */

/* ─── Submenu Accordion na Sidebar ─── */

.gd-paineis {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin: -0.25rem 0 1.25rem;
  padding: 0.4rem;
  width: fit-content;
  max-width: 100%;
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--panel-bg);
}

.gd-paineis[hidden] { display: none; }

.gd-paineis__item {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.6rem 0.9rem;
  border: 0;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--text-muted);
  font: inherit;
  font-size: 0.8rem;
  font-weight: 650;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.gd-paineis__item:hover:not(:disabled) { background: var(--elevado); color: var(--text); }
.gd-paineis__item.is-ativo { background: var(--accent-soft); color: var(--accent-texto); }
.gd-paineis__item:disabled { opacity: 0.4; cursor: not-allowed; }

.gd-paineis__item span {
  display: inline-grid;
  min-width: 1.35rem;
  height: 1.35rem;
  padding: 0 0.3rem;
  place-items: center;
  border-radius: var(--r-pill);
  background: var(--accent);
  color: var(--sobre-cor);
  font-size: 0.68rem;
  line-height: 1;
}

/* Estado ativo com contraste real: o fundo claro anterior deixava o texto
   branco praticamente invisível. Mantemos a identidade vermelha do produto e
   uma transição suave para hover/foco. */
.gd-paineis__item.is-ativo,
.gd-paineis__item.is-ativo:hover,
.gd-paineis__item.is-ativo:focus-visible {
  background: #d5281f;
  color: #fff;
  box-shadow: 0 5px 12px rgba(213, 40, 31, .18);
}
.gd-paineis__item.is-ativo span { background: rgba(255,255,255,.22); color: #fff; }
.gd-paineis__item:focus-visible { outline: 0; box-shadow: 0 0 0 3px rgba(213,40,31,.16); }

.panel__submenu {
  padding-left: 0;
  margin-left: 0;
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height 0.25s cubic-bezier(0.4, 0, 0.2, 1),
              opacity 0.2s ease;
}

.panel__submenu:not([hidden]) {
  max-height: none;
  overflow: visible;
  opacity: 1;
  margin-bottom: 4px;
}

.panel__submenu[hidden] {
  display: none;
}

/* Sub-abas seguem EXATAMENTE o padrão das outras abas */
.panel--sub {
  position: relative;
  padding: 9px 12px 9px 36px;
  border: none;
  background: transparent;
  width: 100%;
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: var(--sidebar-muted);
  border-radius: 12px;
  margin-bottom: 2px;
  display: flex;
  align-items: center;
  gap: 10px;
  transition: background 0.16s ease, color 0.16s ease;
}

.panel--sub::before {
  content: "";
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.4;
  transition: all 0.16s ease;
}

.panel--sub:hover {
  background: rgba(17, 17, 17, 0.045);
  color: var(--sidebar-fg);
}

.panel--sub:hover::before {
  opacity: 0.8;
  transform: translateY(-50%) scale(1.2);
}

/* Listra vermelha igual aos outros itens */
.panel--sub.is-active {
  background: transparent;
  color: var(--sidebar-fg);
}

.panel--sub.is-active::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 22px;
  border-radius: 0 3px 3px 0;
  background: var(--accent);
  opacity: 1;
}

.panel--sub.is-active::after {
  content: "";
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  opacity: 1;
}

/* Chevron do accordion */
.panel__chevron {
  width: 14px;
  height: 14px;
  margin-left: auto;
  opacity: 0.5;
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.15s ease;
}

.panel--group {
  position: relative;
}

.panel--group[aria-expanded="true"] {
  background: rgba(17, 17, 17, 0.045);
}

.panel--group[aria-expanded="true"] .panel__chevron {
  transform: rotate(180deg);
  opacity: 1;
}

/* Painel de ação destacado (Transferir) */
.panel--acao {
  margin-top: 8px;
  border: 1px solid var(--accent) !important;
  background: rgba(246, 196, 0, 0.08) !important;
  color: var(--accent-texto) !important;
}

.panel--acao:hover {
  background: rgba(246, 196, 0, 0.16) !important;
  color: var(--accent-texto) !important;
}

.panel--acao .panel__icon {
  color: var(--accent-texto) !important;
}

/* ─── Views (Área Principal) ─── */

.extrair-leads {
  padding: 2rem 2.5rem;
  max-width: 1100px;
  animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Header da view */
.extrair-leads__header {
  margin-bottom: 2rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--border);
}

.extrair-leads__header h1 {
  font-family: var(--font-display);
  font-size: 1.625rem;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 0.375rem 0;
  letter-spacing: -0.02em;
}

.extrair-leads__header p {
  font-size: 0.875rem;
  color: var(--text-muted);
  margin: 0;
}

/* ─── Cards de Grupo (estilo sofisticado) ─── */

.extrair-leads__grupo-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  background: var(--panel-bg);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  margin-bottom: 0.75rem;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
  overflow: hidden;
}

.extrair-leads__grupo-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--accent-soft) 0%, transparent 60%);
  opacity: 0;
  transition: opacity 0.2s ease;
}

.extrair-leads__grupo-card:hover {
  border-color: var(--accent);
  transform: translateX(4px);
  box-shadow: -4px 0 0 var(--accent);
}

.extrair-leads__grupo-card:hover::before {
  opacity: 1;
}

.extrair-leads__grupo-info {
  display: flex;
  align-items: center;
  gap: 1rem;
  position: relative;
  z-index: 1;
}

.extrair-leads__grupo-icone {
  width: 3rem;
  height: 3rem;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-texto) 100%);
  color: var(--sobre-cor);
  border-radius: var(--r-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px var(--accent-ring);
  flex-shrink: 0;
}

.extrair-leads__grupo-icone svg {
  width: 18px;
  height: 18px;
}

.extrair-leads__grupo-texto {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.extrair-leads__grupo-nome {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--text);
}

.extrair-leads__grupo-membros {
  font-size: 0.75rem;
  color: var(--text-fraco);
}

/* Badge de membros */
.extrair-leads__grupo-badge {
  background: var(--elevado);
  border: 1px solid var(--border-strong);
  color: var(--text-muted);
  font-size: 0.6875rem;
  font-weight: 600;
  padding: 0.25rem 0.625rem;
  border-radius: var(--r-pill);
  position: relative;
  z-index: 1;
}

/* ─── Empty State sofisticada ─── */

.extrair-leads__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 4rem 2rem;
  text-align: center;
}

.extrair-leads__empty-icon {
  width: 80px;
  height: 80px;
  background: var(--panel-bg);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.5rem;
  position: relative;
}

.extrair-leads__empty-icon::after {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: var(--r-lg);
  background: linear-gradient(135deg, var(--accent-soft), transparent);
  z-index: -1;
}

.extrair-leads__empty-icon svg {
  width: 36px;
  height: 36px;
  color: var(--text-fraco);
}

.extrair-leads__empty h3 {
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 0.5rem;
}

.extrair-leads__empty p {
  font-size: 0.875rem;
  color: var(--text-muted);
  max-width: 320px;
  line-height: 1.5;
}

/* ─── Seção/Cards genéricos ─── */

.extrair-leads__card {
  background: var(--panel-bg);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 1.5rem;
  margin-bottom: 1rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.extrair-leads__card:hover {
  border-color: var(--border-strong);
}

.extrair-leads__card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border);
}

.extrair-leads__card-title {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
}

/* ─── Stats/Metricas ─── */

.extrair-leads__stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1rem;
  margin-bottom: 2rem;
}

.extrair-leads__stat {
  background: var(--panel-bg);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 1.25rem;
  position: relative;
  overflow: hidden;
}

.extrair-leads__stat::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--accent), var(--accent-soft));
}

.extrair-leads__stat-value {
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1;
  margin-bottom: 0.25rem;
}

.extrair-leads__stat-label {
  font-size: 0.75rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* ─── Botoes de acao ─── */

.extrair-leads__actions {
  display: flex;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}

/* ─── Tabela estilo sistema ─── */

.extrair-leads__table {
  width: 100%;
  border-collapse: collapse;
}

.extrair-leads__table th {
  text-align: left;
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--text-fraco);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--border);
}

.extrair-leads__table td {
  padding: 0.875rem 1rem;
  border-bottom: 1px solid var(--border);
  font-size: 0.875rem;
  color: var(--text-muted);
}

.extrair-leads__table tr:hover td {
  background: var(--panel-bg-hover);
  color: var(--text);
}

/* ─── Status badges ─── */

.extrair-leads__status {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.75rem;
  font-weight: 500;
  padding: 0.25rem 0.625rem;
  border-radius: var(--r-pill);
}

.extrair-leads__status--success {
  background: var(--sucesso-soft);
  color: var(--sucesso);
}

.extrair-leads__status--warning {
  background: var(--aviso-soft);
  color: var(--aviso);
}

.extrair-leads__status--error {
  background: var(--perigo-soft);
  color: var(--perigo);
}

.extrair-leads__status--info {
  background: var(--info-soft);
  color: var(--info);
}

.extrair-leads__status::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

/* ─── Google Drive (busca Places) ─── */

.gd-form {
  display: flex;
  flex-direction: column;
  gap: 1.125rem;
}

.gd-campo {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.gd-campo__label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.gd-campo__obrigatorio {
  color: var(--accent);
  margin-left: 2px;
}

.gd-campo__input {
  width: 100%;
  padding: 0.75rem 0.875rem;
  background: var(--elevado);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 0.875rem;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.gd-campo__input:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--panel-bg-hover);
}

.gd-campo__input::placeholder {
  color: var(--text-fraco);
}

.gd-campo__dica {
  font-size: 0.75rem;
  color: var(--text-fraco);
  line-height: 1.4;
}

.gd-raio__controle {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 76px;
  align-items: center;
  gap: 12px;
}

.gd-raio__controle input[type="range"] {
  width: 100%;
  accent-color: var(--accent);
  cursor: pointer;
}

.gd-raio__controle output {
  padding: 8px 10px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  background: var(--elevado);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 700;
  text-align: center;
}

.gd-raio__atalhos {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.gd-raio__atalhos button {
  padding: 5px 10px;
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--text-muted);
  font: inherit;
  font-size: 0.75rem;
  cursor: pointer;
}

.gd-raio__atalhos button:hover,
.gd-raio__atalhos button.is-ativo {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent-strong);
}

.gd-form__acoes {
  display: flex;
  gap: 0.625rem;
  margin-top: 0.5rem;
}

.gd-busca__acoes-topo {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.gd-busca__andamento {
  margin: -0.25rem 0 1rem;
  padding: 0.75rem 0.875rem;
  border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--border));
  border-radius: var(--r-sm);
  background: var(--accent-soft);
  color: var(--text);
  font-size: 0.8125rem;
  line-height: 1.45;
}

.gd-campo__label--com-acao {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.gd-link-acao {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--accent-texto, var(--accent));
  font: inherit;
  font-size: 0.72rem;
  font-weight: 700;
  cursor: pointer;
  text-transform: none;
  letter-spacing: 0;
}

.gd-link-acao:hover { text-decoration: underline; }

.gd-campo__com-botao {
  display: flex;
  align-items: stretch;
  gap: 0.5rem;
}

.gd-campo__com-botao .gd-campo__input { flex: 1; min-width: 0; }
.gd-btn--catalogo { width: 44px; padding: 0; font-size: 1.15rem; }

#gd-limite-personalizado { margin-top: 0.5rem; }
#gd-limite-personalizado[hidden] { display: none; }

.gd-filtros {
  margin: 0;
  padding: 1rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--elevado) 80%, transparent);
}

.gd-filtros legend {
  padding: 0 0.4rem;
  color: var(--text);
  font-size: 0.82rem;
  font-weight: 800;
}

.gd-filtros__intro {
  margin: 0 0 0.9rem;
  color: var(--text-muted);
  font-size: 0.76rem;
  line-height: 1.45;
}

.gd-filtros__grade {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}

.gd-filtros__opcao {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  margin-top: 0.9rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--border);
  cursor: pointer;
}

.gd-filtros__opcao input { margin-top: 0.15rem; accent-color: var(--accent); }
.gd-filtros__opcao strong,
.gd-filtros__opcao small { display: block; }
.gd-filtros__opcao strong { color: var(--text); font-size: 0.8rem; }
.gd-filtros__opcao small { margin-top: 0.2rem; color: var(--text-muted); font-size: 0.72rem; line-height: 1.4; }

.gd-nichos-modal {
  width: min(860px, calc(100vw - 32px));
  max-height: min(780px, calc(100vh - 32px));
  margin: auto;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-lg);
  background: var(--panel-bg);
  color: var(--text);
  box-shadow: 0 28px 100px rgba(0, 0, 0, 0.72);
}

.gd-nichos-modal::backdrop { background: rgba(0, 0, 0, 0.76); backdrop-filter: blur(3px); }

.gd-nichos-modal__cabecalho,
.gd-nichos-modal__rodape {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.15rem 1.25rem;
  border-bottom: 1px solid var(--border);
}

.gd-nichos-modal__cabecalho h2 { margin: 0; font-size: 1.15rem; }
.gd-nichos-modal__cabecalho p { margin: 0.25rem 0 0; color: var(--text-muted); font-size: 0.78rem; }
.gd-nichos-modal__fechar { width: 38px; height: 38px; border: 0; border-radius: 50%; background: var(--elevado); color: var(--text); font-size: 1.5rem; cursor: pointer; }

.gd-nichos-modal__busca {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin: 1rem 1.25rem 0.5rem;
  padding: 0 0.9rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  background: var(--bg);
}

.gd-nichos-modal__busca input { width: 100%; padding: 0.8rem 0; border: 0; outline: 0; background: transparent; color: var(--text); font: inherit; }
.gd-nichos-modal__resumo { padding: 0.25rem 1.25rem 0.75rem; color: var(--text-muted); font-size: 0.75rem; }
.gd-nichos-modal__lista { max-height: min(520px, calc(100vh - 270px)); overflow-y: auto; padding: 0 1.25rem 1.25rem; }
.gd-nichos-grupo + .gd-nichos-grupo { margin-top: 1rem; }
.gd-nichos-grupo h3 { margin: 0 0 0.55rem; color: var(--text-muted); font-size: 0.72rem; letter-spacing: 0.07em; text-transform: uppercase; }
.gd-nichos-grade { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.45rem; }
.gd-nicho-item { padding: 0.65rem 0.7rem; overflow: hidden; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--elevado); color: var(--text); font: inherit; font-size: 0.78rem; text-align: left; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
.gd-nicho-item:hover,
.gd-nicho-item:focus-visible { border-color: var(--accent); background: var(--accent-soft); outline: none; }
.gd-nichos-vazio { padding: 2.5rem 1rem; color: var(--text-muted); text-align: center; }
.gd-nichos-modal__rodape { border-top: 1px solid var(--border); border-bottom: 0; color: var(--text-muted); font-size: 0.74rem; }

@media (max-width: 560px) {
  .extrair-leads__card-header {
    align-items: flex-start;
  }

  .gd-busca__acoes-topo {
    width: 100%;
  }

  .gd-busca__acoes-topo .gd-btn--primario {
    flex: 1;
  }

  .gd-filtros__grade,
  .gd-nichos-grade { grid-template-columns: 1fr; }

  .gd-nichos-modal__rodape span { display: none; }
}

.gd-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.625rem 1.125rem;
  border-radius: var(--r-sm);
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
  transition: all 0.15s ease;
}

.gd-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.gd-btn--primario {
  background: var(--accent);
  color: var(--sobre-cor);
}

.gd-btn--primario:hover:not(:disabled) {
  background: var(--accent-strong);
}

.gd-btn--ghost {
  background: transparent;
  color: var(--text-muted);
  border-color: var(--border-strong);
}

.gd-btn--ghost:hover:not(:disabled) {
  background: var(--elevado);
  color: var(--text);
}

/* Tags sugeridas */
.gd-tags-sugeridas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  margin-top: 0.375rem;
}

.gd-tag-sugerida {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.625rem;
  background: var(--elevado);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  color: var(--text-muted);
  font-size: 0.75rem;
  cursor: pointer;
  transition: all 0.15s ease;
}

.gd-tag-sugerida span {
  color: var(--text-fraco);
  font-size: 0.6875rem;
}

.gd-tag-sugerida:hover {
  background: var(--accent-soft);
  color: var(--accent-strong);
  border-color: var(--accent);
}

/* Resultados */
.gd-resultados__acoes {
  display: flex;
  align-items: center;
  gap: 0.875rem;
}

.gd-todos {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.8125rem;
  color: var(--text-muted);
  cursor: pointer;
}

.gd-resultados__filtro {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
}

.gd-resultados__filtro .gd-campo__input {
  flex: 1;
}

.gd-resultados__contador {
  font-size: 0.75rem;
  color: var(--text-muted);
  font-family: var(--font-mono);
  white-space: nowrap;
}

.gd-resultados__tabela-wrap {
  overflow-x: auto;
  border-radius: var(--r-sm);
  border: 1px solid var(--border);
}

.gd-tabela {
  width: 100%;
}

#gd-resultados-card .gd-tabela { min-width: 1050px; }

.gd-tabela th,
.gd-tabela td {
  padding: 0.85rem 0.75rem;
  line-height: 1.45;
  vertical-align: middle;
}

#gd-resultados-card .gd-tabela th:nth-child(2) { width: 23%; }
#gd-resultados-card .gd-tabela th:nth-child(3) { width: 16%; }
#gd-resultados-card .gd-tabela th:nth-child(4) { width: 30%; }
#gd-resultados-card .gd-tabela th:nth-child(5) { width: 14%; }
#gd-resultados-card .gd-tabela th:nth-child(6) { width: 9%; }
#gd-resultados-card .gd-tabela th:nth-child(7) { width: 8%; }

#historico-lista-card {
  overflow-x: auto;
}

#historico-lista-card .gd-tabela {
  min-width: 760px;
  table-layout: auto;
}

.gd-tabela thead th {
  background: var(--elevado);
  color: var(--text-fraco);
}

.gd-row {
  cursor: pointer;
  transition: background 0.12s ease;
}

.gd-row--selecionada td {
  background: rgba(246, 196, 0, 0.06);
}

.gd-row:hover td {
  background: var(--panel-bg-hover);
}

.gd-row--selecionada:hover td {
  background: rgba(246, 196, 0, 0.10);
}

.gd-nome {
  font-weight: 500;
  color: var(--text);
}

.gd-endereco {
  color: var(--text-muted);
  font-size: 0.8125rem;
  max-width: 280px;
}

.gd-tel {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  color: var(--text);
}

.gd-tel--vazio {
  color: var(--text-fraco);
  font-style: italic;
}

.gd-cat {
  font-size: 0.75rem;
  color: var(--text-muted);
  background: var(--elevado);
  padding: 0.125rem 0.5rem;
  border-radius: var(--r-pill);
}

.gd-site {
  font-size: 0.8125rem;
  color: var(--accent-texto);
  text-decoration: none;
}

.gd-site:hover {
  text-decoration: underline;
}

.gd-tag-mini {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  background: var(--accent-soft);
  color: var(--accent-strong);
  padding: 0.125rem 0.5rem;
  border-radius: var(--r-pill);
}

/* Paginação */
.gd-resultados__paginacao {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding-top: 1rem;
  margin-top: 1rem;
  border-top: 1px solid var(--border);
}

.gd-resultados__paginacao #gd-pagina-info {
  font-size: 0.8125rem;
  color: var(--text-muted);
  font-family: var(--font-mono);
}

/* Erros e sucessos */
.gd-erro {
  background: var(--perigo-soft);
  border: 1px solid var(--perigo-linha);
  color: var(--perigo);
  padding: 0.75rem 1rem;
  border-radius: var(--r-sm);
  font-size: 0.875rem;
  margin-top: 1rem;
}

.gd-sucesso {
  background: var(--sucesso-soft);
  border: 1px solid var(--sucesso-linha);
  color: var(--sucesso);
  padding: 0.75rem 1rem;
  border-radius: var(--r-sm);
  font-size: 0.875rem;
  margin-top: 1rem;
}

/* Configurações */
.cfg-feedback {
  padding: 0.75rem 1rem;
  border-radius: var(--r-sm);
  font-size: 0.875rem;
  margin-top: 1rem;
}

.cfg-info {
  color: var(--text-muted);
  font-size: 0.875rem;
  line-height: 1.5;
  margin-bottom: 1.25rem;
}

.cfg-origens {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.cfg-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.cfg-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  background: var(--elevado);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
}

.cfg-tag__nome {
  font-weight: 600;
  color: var(--text);
  font-size: 0.8125rem;
}

.cfg-tag__origem {
  font-size: 0.6875rem;
  color: var(--text-fraco);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.cfg-tag__contador {
  font-size: 0.6875rem;
  color: var(--accent-strong);
  background: var(--accent-soft);
  padding: 0.125rem 0.5rem;
  border-radius: var(--r-pill);
  font-family: var(--font-mono);
  font-weight: 600;
}

.cfg-vazio {
  color: var(--text-fraco);
  font-size: 0.875rem;
  margin: 0;
}

/* ─── Layout Google Drive: form à esquerda, mapa à direita ─── */

.gd-layout {
  display: grid;
  grid-template-columns: minmax(0, 520px) 1fr;
  gap: 1.5rem;
  height: calc(100vh - 110px);
  padding: 1.5rem;
}

/* Depois da extração, a lista passa a ser a tarefa principal. Este modo usa
   toda a largura e deixa mapa/filtros a um clique de distância. */
.gd-layout.is-lista-ampliada {
  grid-template-columns: minmax(0, 1fr);
}

.gd-layout.is-lista-ampliada .gd-coluna-mapa,
.gd-layout.is-lista-ampliada .gd-coluna-form > .extrair-leads__header,
.gd-layout.is-lista-ampliada .gd-coluna-form > .gd-busca-cidade-wrap,
.gd-layout.is-lista-ampliada #gd-busca-card,
.gd-layout.is-lista-ampliada #gd-empty {
  display: none;
}

.gd-layout.is-lista-ampliada .gd-coluna-form {
  width: 100%;
  padding-right: 0;
}

.gd-layout.is-lista-ampliada #gd-resultados-card {
  min-height: calc(100vh - 160px);
  margin: 0;
}

.gd-layout.is-lista-ampliada #gd-resultados-card .extrair-leads__card-header {
  position: sticky;
  top: 0;
  z-index: 5;
  padding: 0.25rem 0 1rem;
  background: var(--panel-bg);
}

.gd-layout.is-lista-ampliada .gd-resultados__tabela-wrap {
  overflow: auto;
}

.gd-layout.is-lista-ampliada .gd-endereco {
  max-width: none;
}

@media (max-width: 1024px) {
  .gd-layout {
    grid-template-columns: 1fr;
    height: auto;
  }
}

.gd-coluna-form {
  overflow-y: auto;
  padding-right: 0.5rem;
  scrollbar-width: thin;
  scrollbar-color: var(--border-strong) transparent;
}

.gd-coluna-form::-webkit-scrollbar {
  width: 6px;
}

.gd-coluna-form::-webkit-scrollbar-track {
  background: transparent;
}

.gd-coluna-form::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border-radius: 3px;
}

.gd-coluna-form .extrair-leads__header {
  margin-bottom: 1.25rem;
  padding-bottom: 1rem;
}

.gd-coluna-mapa {
  position: sticky;
  top: 1.5rem;
  height: calc(100vh - 110px - 3rem);
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--border-strong);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  background: var(--panel-bg);
}

@media (max-width: 1024px) {
  .gd-coluna-mapa {
    position: relative;
    top: 0;
    height: 60vh;
    margin-top: 1.5rem;
  }
}

.gd-mapa {
  width: 100%;
  height: 100%;
  background: var(--bg);
}

.gd-mapa-popup {
  min-width: 190px;
  color: #16161a;
  line-height: 1.35;
}

.gd-mapa-popup strong,
.gd-mapa-popup span { display: block; }

.gd-mapa-popup span { margin-top: 3px; font-size: 12px; color: #555; }

/* ─── Lupa animada da busca de cidade ─── */

.gd-busca-cidade-wrap {
  position: relative;
  margin-bottom: 1.25rem;
}

.gd-lupa-animada {
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  color: var(--text-fraco);
  pointer-events: none;
  transition: color 0.2s ease;
}

.gd-lupa-animada svg {
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 2;
}

/* Mini globo que fica DENTRO da lupa e gira quando há atividade */
.gd-lupa-animada__globo {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 9px;
  height: 9px;
  margin-left: -4.5px;
  margin-top: -4.5px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 35%, #5aa9ff 0%, #2563eb 35%, #0a4a9a 70%, #061f3f 100%);
  box-shadow:
    inset -1.5px -1.5px 2px rgba(0, 0, 0, 0.5),
    0 0 4px rgba(90, 169, 255, 0.3);
  z-index: 1;
  opacity: 0;
  transform: scale(0.3);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

/* Quando ativa: globo aparece, gira, e a lupa fica accent */
.gd-lupa-ativa {
  color: var(--accent);
}

.gd-lupa-ativa .gd-lupa-animada__globo {
  opacity: 1;
  transform: scale(0.7);
  animation: gd-globo-girar 2.5s linear infinite;
}

.gd-lupa-ativa svg {
  color: var(--accent-texto);
  transform: scale(1.1);
  transition: transform 0.3s ease;
}

@keyframes gd-globo-girar {
  0% {
    background:
      radial-gradient(circle at 35% 35%, #5aa9ff 0%, #2563eb 35%, #0a4a9a 70%, #061f3f 100%);
    box-shadow:
      inset -1.5px -1.5px 2px rgba(0, 0, 0, 0.5),
      0 0 4px rgba(90, 169, 255, 0.3);
  }
  25% {
    background:
      radial-gradient(circle at 65% 35%, #5aa9ff 0%, #2563eb 35%, #0a4a9a 70%, #061f3f 100%);
  }
  50% {
    background:
      radial-gradient(circle at 65% 65%, #5aa9ff 0%, #2563eb 35%, #0a4a9a 70%, #061f3f 100%);
    box-shadow:
      inset -1.5px -1.5px 2px rgba(0, 0, 0, 0.5),
      0 0 6px rgba(90, 169, 255, 0.5);
  }
  75% {
    background:
      radial-gradient(circle at 35% 65%, #5aa9ff 0%, #2563eb 35%, #0a4a9a 70%, #061f3f 100%);
  }
  100% {
    background:
      radial-gradient(circle at 35% 35%, #5aa9ff 0%, #2563eb 35%, #0a4a9a 70%, #061f3f 100%);
  }
}

.gd-busca-cidade {
  width: 100%;
  padding: 0.875rem 2.75rem 0.875rem 2.75rem;
  background: var(--panel-bg);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 500;
  transition: all 0.2s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.gd-busca-cidade::placeholder {
  color: var(--text-fraco);
  font-weight: 400;
}

.gd-busca-cidade:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow:
    0 0 0 3px var(--accent-ring),
    0 4px 16px rgba(246, 196, 0, 0.15);
}

.gd-busca-cidade-limpar {
  position: absolute;
  right: 0.625rem;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: none;
  background: var(--elevado);
  color: var(--text-muted);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
}

.gd-busca-cidade-limpar:hover {
  background: var(--accent);
  color: var(--sobre-cor);
}

/* Sugestões da cidade (autocomplete via geocode) */
.gd-cidade-sugestoes {
  position: absolute;
  top: calc(100% + 0.375rem);
  left: 0;
  right: 0;
  background: var(--panel-bg);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
  z-index: 10;
  max-height: 240px;
  overflow-y: auto;
}

.gd-cidade-sugestoes[hidden] {
  display: none !important;
}

.gd-cidade-sugestao {
  padding: 0.625rem 1rem;
  cursor: pointer;
  font-size: 0.875rem;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 0.625rem;
  transition: background 0.12s ease;
  border-bottom: 1px solid var(--border);
}

.gd-cidade-sugestao:last-child {
  border-bottom: none;
}

.gd-cidade-sugestao:hover {
  background: var(--accent-soft);
  color: var(--accent-strong);
}

.gd-cidade-sugestao__principal {
  font-weight: 500;
}

.gd-cidade-sugestao__secundario {
  font-size: 0.75rem;
  color: var(--text-fraco);
  margin-left: auto;
}

/* Overlay de coordenadas no canto do mapa */
.gd-mapa-overlay {
  position: absolute;
  bottom: 1rem;
  left: 1rem;
  z-index: 5;
  pointer-events: none;
}

.gd-mapa-coordenadas {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  background: rgba(10, 10, 12, 0.85);
  backdrop-filter: blur(8px);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
}

.gd-mapa-coord-label {
  color: var(--text-fraco);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.gd-mapa-coord-val {
  color: var(--text);
  font-weight: 600;
}

/* Estado de mapa sem API */
.gd-mapa-sem-api {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  text-align: center;
  background: var(--panel-bg);
  color: var(--text-muted);
  z-index: 10;
}

.gd-mapa-sem-api[hidden] {
  display: none !important;
}

.gd-mapa-sem-api__icone {
  font-size: 4rem;
  margin-bottom: 1rem;
  opacity: 0.5;
}

.gd-mapa-sem-api h3 {
  font-family: var(--font-display);
  color: var(--text);
  margin-bottom: 0.5rem;
}

.gd-mapa-sem-api code {
  background: var(--elevado);
  padding: 0.125rem 0.375rem;
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  color: var(--accent-texto);
}

/* ─── Leaflet — tema escuro que combina com o sistema ─── */

/* Container do mapa */
#gd-mapa {
  position: relative;
  background: #0a0a0c;
}

/* Tiles do CARTO dark: o tema escuro já vem do tile layer, mas forçamos
   o fundo pra não aparecer flash branco no carregamento */
.leaflet-tile-pane {
  background: #0a0a0c;
}

/* Controles de zoom escuros */
.leaflet-control-zoom {
  border: 1px solid var(--border-strong) !important;
  border-radius: var(--r-sm) !important;
  overflow: hidden;
  box-shadow: none !important;
}

.leaflet-control-zoom a {
  background: rgba(10, 10, 12, 0.9) !important;
  color: var(--text) !important;
  border-bottom: 1px solid var(--border-strong) !important;
  width: 32px !important;
  height: 32px !important;
  line-height: 32px !important;
  font-size: 16px !important;
  transition: background 0.15s ease;
}

.leaflet-control-zoom a:last-child {
  border-bottom: none !important;
}

.leaflet-control-zoom a:hover {
  background: var(--elevado) !important;
  color: var(--accent-texto) !important;
}

.leaflet-control-zoom-in {
  border-radius: var(--r-sm) var(--r-sm) 0 0 !important;
}

.leaflet-control-zoom-out {
  border-radius: 0 0 var(--r-sm) var(--r-sm) !important;
}

/* Popup do marcador */
.leaflet-popup-content-wrapper {
  background: var(--panel-bg);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
  color: var(--text);
  font-family: var(--font-body);
}

.leaflet-popup-tip {
  background: var(--panel-bg);
}

.leaflet-popup-close-button {
  color: var(--text-muted) !important;
}

.leaflet-popup-close-button:hover {
  color: var(--text) !important;
}

/* Atribuição discreta */
.leaflet-control-attribution {
  background: rgba(10, 10, 12, 0.75) !important;
  color: var(--text-fraco) !important;
  font-size: 0.625rem !important;
  border-radius: var(--r-sm) 0 0 0 !important;
}

.leaflet-control-attribution a {
  color: var(--text-muted) !important;
}

/* ─── Globo 3D CSS — overlay que aparece sobre o mapa durante a animação ─── */

.gd-globo-3d {
  position: absolute;
  inset: 0;
  z-index: 10;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.gd-globo-3d--girando {
  opacity: 1;
}

.gd-globo-3d__esfera {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 320px;
  height: 320px;
  margin-left: -160px;
  margin-top: -160px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 30%,
      #2563eb 0%,
      #1d4ed8 20%,
      #1e3a8a 45%,
      #0f1f4a 70%,
      #060d1f 100%
    );
  box-shadow:
    inset -30px -20px 60px rgba(0, 0, 0, 0.7),
    inset 10px 10px 30px rgba(90, 169, 255, 0.2),
    0 0 80px rgba(37, 99, 235, 0.4),
    0 0 160px rgba(37, 99, 235, 0.15);
  animation: gd-globo-rotacao 1.8s ease-in-out forwards;
  transform-origin: center center;
}

/* Grade de paralelos para dar efeito esférico */
.gd-globo-3d__esfera::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    repeating-linear-gradient(
      0deg,
      transparent 0px,
      transparent 18px,
      rgba(90, 169, 255, 0.12) 18px,
      rgba(90, 169, 255, 0.12) 20px
    ),
    repeating-linear-gradient(
      90deg,
      transparent 0px,
      transparent 18px,
      rgba(90, 169, 255, 0.12) 18px,
      rgba(90, 169, 255, 0.12) 20px
    );
}

/* Meridiano principal */
.gd-globo-3d__esfera::after {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  width: 2px;
  height: 100%;
  margin-left: -1px;
  background: rgba(90, 169, 255, 0.15);
  border-radius: 50%;
}

@keyframes gd-globo-rotacao {
  0% {
    transform: scale(0.05) rotateY(0deg) rotateX(10deg);
    opacity: 0;
  }
  15% {
    opacity: 1;
  }
  85% {
    opacity: 1;
  }
  100% {
    transform: scale(1.6) rotateY(360deg) rotateX(0deg);
    opacity: 0;
  }
}
.ig-leads__form { min-width:0; margin-bottom:0; }
.ig-extraction-layout { display:grid; grid-template-columns:minmax(560px,1.65fr) minmax(350px,.85fr); align-items:start; gap:1rem; width:100%; max-width:none; margin-bottom:1rem; }
.ig-console { display:grid; grid-template-columns:minmax(440px,1.45fr) minmax(250px,.7fr) minmax(260px,.74fr); gap:1rem; width:100%; max-width:none; margin-bottom:1rem; }
.ig-apify { min-width:0; }
.ig-hub-alerts{display:grid;gap:.55rem;margin:.75rem 1.25rem 0;padding:0!important}
.ig-hub-alerts[hidden]{display:none}
.ig-hub-alert{display:flex;align-items:flex-start;gap:.7rem;padding:.75rem .85rem;border:1px solid #fed7aa;border-radius:12px;background:#fff7ed;color:#9a3412}
.ig-hub-alert>span{display:grid;place-items:center;flex:0 0 22px;height:22px;border-radius:50%;background:#f97316;color:#fff;font-weight:800}
.ig-hub-alert div{display:grid;gap:.15rem}.ig-hub-alert strong{font-size:.78rem}.ig-hub-alert small{font-size:.71rem;line-height:1.4;color:#9a3412}
.ig-hub-alert.is-limite_actor,.ig-hub-alert.is-sem_creditos,.ig-hub-alert.is-conta_invalida{border-color:#fecaca;background:#fef2f2;color:#991b1b}
.ig-hub-alert.is-limite_actor small,.ig-hub-alert.is-sem_creditos small,.ig-hub-alert.is-conta_invalida small{color:#991b1b}
.ig-apify > div:not(.extrair-leads__card-header) { padding:1rem 1.25rem; }
.ig-apify p { margin:0 0 .8rem; color:var(--texto-secundario); font-size:.8rem; }
.ig-apify__connect-row { display:flex; gap:.7rem; margin-bottom:.7rem; }
.ig-apify__connect-row input { flex:1; min-height:42px; padding:0 .8rem; border:1px solid var(--borda); border-radius:var(--r-md); }
.ig-apify__connect-row #ig-apify-token {
  border:1px solid #c9251c !important;
}
#ig-apify-account { align-items:center; justify-content:space-between; gap:1rem; }
#ig-apify-account > div { display:grid; gap:.25rem; }
#ig-apify-account span { color:var(--texto-secundario); font-size:.76rem; }
.ig-apify__credits { grid-template-columns:repeat(2,auto) !important; gap:1.5rem !important; }
.ig-apify__credits strong { display:block; color:var(--texto); margin-top:.2rem; }
.ig-eyebrow { display:block; margin-bottom:.3rem; color:var(--accent,#c9251c); font-size:.62rem; font-weight:700; letter-spacing:.12em; }
.ig-status { padding:.3rem .6rem; border-radius:99px; background:#f1f3f5; color:var(--texto-secundario); font-size:.68rem; font-weight:600; }
.ig-status.is-connected { background:#e8f7ef; color:#16804d; }
.ig-token-label { display:grid; gap:.4rem; color:var(--texto-secundario); font-size:.7rem; font-weight:600; }
.ig-account-identity { display:flex !important; grid-template-columns:none !important; align-items:center; gap:.7rem !important; }
.ig-account-avatar { display:grid; place-items:center; width:38px; height:38px; border-radius:10px; background:#161b26; color:#fff !important; font-weight:700; }
.ig-hub-accounts { display:grid; gap:.6rem; padding-top:0!important; }
.ig-hub-account { display:grid; grid-template-columns:auto minmax(180px,1fr) auto auto auto; align-items:center; gap:.8rem; padding:.8rem; border:1px solid var(--borda); border-radius:11px; background:var(--fundo,#f8f9fb); }
.ig-hub-account__identity,.ig-hub-account__quota { display:grid; gap:.2rem; }
.ig-hub-account__identity strong,.ig-hub-account__quota strong { color:var(--texto); font-size:.75rem; }
.ig-hub-account__identity span,.ig-hub-account__quota span { color:var(--texto-secundario); font-size:.64rem; }
.ig-hub-account__quota { text-align:right; }
.ig-hub-account__status { padding:.28rem .5rem; border-radius:99px; background:#e8f7ef; color:#16804d!important; font-size:.6rem!important; font-weight:700; text-transform:capitalize; }
.ig-hub-account__status:not(.is-disponivel) { background:#fbe9e8; color:#bd2b24!important; }
#ig-apify-alias { min-height:40px; margin-bottom:.7rem; padding:0 .8rem; border-radius:9px; background:var(--superficie); }
.ig-usage-grid { display:grid !important; grid-template-columns:repeat(4,1fr); gap:.7rem; padding-top:0 !important; }
.ig-usage-grid article { padding:.85rem; border:1px solid var(--borda); border-radius:10px; background:var(--fundo,#f8f9fb); }
.ig-usage-grid span,.ig-usage-grid small { display:block; color:var(--texto-secundario); font-size:.66rem; }
.ig-usage-grid strong { display:block; margin:.35rem 0 .15rem; color:var(--texto); font-size:1.15rem; }
.ig-tutorial { padding:1.25rem; }
.ig-tutorial h2 { margin:.15rem 0 1rem; font-size:1rem; }
.ig-tutorial ol { display:grid; gap:.85rem; margin:0; padding:0; list-style:none; }
.ig-tutorial li { display:flex; gap:.7rem; }
.ig-tutorial li i { display:grid; place-items:center; width:25px; height:25px; flex:0 0 25px; border-radius:8px; background:#f9e8e6; color:#c9251c; font-size:.68rem; font-style:normal; font-weight:700; }
.ig-tutorial li div { display:grid; gap:.15rem; }
.ig-tutorial li strong { font-size:.76rem; }
.ig-tutorial li span,.ig-tutorial > p { color:var(--texto-secundario); font-size:.68rem; line-height:1.45; }
.ig-tutorial-link { display:flex; justify-content:space-between; margin:1rem 0 .7rem; padding:.7rem .8rem; border-radius:9px; background:#1b202c; color:#fff; font-size:.72rem; font-weight:600; text-decoration:none; }
.ig-learn-accounts { display:grid; align-content:start; gap:.85rem; padding:1.25rem; min-width:0; }
.ig-learn-accounts__brand { display:flex; align-items:flex-start; gap:.75rem; }
.ig-learn-accounts__brand>span { display:grid; place-items:center; flex:0 0 42px; width:42px; height:42px; border-radius:13px; background:linear-gradient(145deg,#f59e0b,#ea580c); color:#fff; font-size:.68rem; font-weight:800; box-shadow:0 8px 20px rgba(234,88,12,.2); }
.ig-learn-accounts h2 { margin:0 0 .3rem; font-size:.92rem; }
.ig-learn-accounts p,.ig-learn-accounts small { margin:0; color:var(--texto-secundario); font-size:.66rem; line-height:1.5; }
.ig-learn-accounts__steps { display:grid; gap:.45rem; padding:.7rem; border:1px solid var(--borda); border-radius:12px; background:var(--fundo,#f8f9fb); }
.ig-learn-accounts__steps span { display:flex; align-items:center; gap:.5rem; color:var(--texto); font-size:.67rem; }
.ig-learn-accounts__steps i { display:grid; place-items:center; width:20px; height:20px; border-radius:7px; background:#fff; color:#c9251c; font-size:.6rem; font-style:normal; font-weight:800; }
.ig-learn-video,.ig-duck-download { display:flex!important; align-items:center; justify-content:space-between; min-height:40px; text-decoration:none; }
.ig-duck-download { border-color:#d97706!important; color:#b45309!important; }
@media(max-width:1250px){.ig-extraction-layout{grid-template-columns:1fr}.ig-console{grid-template-columns:1fr 1fr}.ig-console #ig-apify-card{grid-column:1/-1}}
.ig-recent { width:100%; max-width:none; margin-top:1rem; }
.ig-recent-list { display:grid; }
.ig-recent-item { display:grid; grid-template-columns:minmax(170px,1fr) 110px 100px 110px minmax(90px,1fr) auto; align-items:center; gap:1rem; min-height:58px; padding:.65rem 1.25rem; border-bottom:1px solid var(--borda); font-size:.72rem; }
.ig-recent-item:last-child { border-bottom:0; }
.ig-recent-item strong,.ig-recent-item span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ig-recent-item small { display:block; margin-top:.15rem; color:var(--texto-secundario); }
.ig-recent-status { justify-self:start; padding:.28rem .5rem; border-radius:99px; background:#e8f7ef; color:#16804d; font-size:.64rem; font-weight:600; }
.ig-recent-status.is-error { background:#fbe9e8; color:#bd2b24; }
.ig-empty { padding:2rem; color:var(--texto-secundario); font-size:.75rem; text-align:center; }
.ig-leads__fields { display:grid; grid-template-columns:minmax(220px,1.7fr) minmax(130px,.8fr) minmax(120px,.7fr) minmax(260px,1.5fr); align-items:start; gap:1rem; padding:1.25rem; }
.ig-leads__fields label { display:grid; gap:.45rem; color:var(--texto-secundario); font-size:.75rem; font-weight:600; }
.ig-leads__fields input,.ig-leads__fields select { min-height:42px; padding:0 .8rem; border:1px solid var(--borda); border-radius:var(--r-md); background:var(--superficie); color:var(--texto); }
.ig-limit-field { position:relative; }
.ig-limit-field #ig-limit-help,.ig-contact-filter-field>small { min-height:2.5em; color:var(--texto-secundario); font-size:.6rem; font-weight:500; line-height:1.3; }
.ig-leads__fields #ig-username {
  border:1px solid #c9251c !important;
}
.ig-tag-picker { display:grid; gap:1.1rem; padding:1.25rem; min-width:0; background:var(--superficie); box-shadow:0 8px 24px rgba(20,25,35,.045); }
.gd-tag-picker { width:100%; margin-top:.25rem; border-color:var(--borda); }
.ig-extraction-layout .ig-leads__fields { grid-template-columns:minmax(200px,1.35fr) minmax(125px,.65fr); }
.ig-extraction-layout .ig-limit-field,.ig-extraction-layout .ig-contact-filter-field { min-width:0; }
.ig-tag-picker__header { display:flex; align-items:flex-start; gap:.65rem; }
.ig-tag-picker__header > div { display:grid; gap:.25rem; }
.ig-tag-picker__header strong { color:var(--texto); font-size:.95rem; }
.ig-tag-picker__header small { color:var(--texto-secundario); font-size:.7rem; }
.ig-tag-picker__icon { color:#c9251c; font-size:1.15rem; }
.ig-tag-group { display:grid; gap:.65rem; }
.ig-tag-group > strong { color:var(--texto); font-size:.72rem; }
.ig-tag-picker__auto,.ig-tag-picker__list,.ig-tag-picker__selected { display:flex; flex-wrap:wrap; gap:.45rem; }
.ig-tag-chip { min-height:28px; padding:.3rem .65rem; border:1px solid var(--tag-solid,transparent); border-radius:999px; background:var(--tag-bg,#f2f3f5); color:var(--tag-fg,#525866); font-size:.68rem; cursor:pointer; transition:.15s ease; }
.ig-tag-chip:hover { border-color:var(--tag-solid,#c9251c); color:var(--tag-fg,#c9251c); transform:translateY(-1px); }
.ig-tag-chip.is-selected,.ig-tag-chip--auto { border-color:var(--tag-solid,#8b3fc2); background:var(--tag-solid,#8b3fc2); color:#fff; }
.ig-tag-chip--auto { cursor:default; }
.ig-tag-chip--danger { background:#e5163d; color:#fff; }
.ig-tag-chip--dark { background:#191b20; color:#fff; }
.ig-tag-chip__remove { margin-left:.35rem; opacity:.65; }
.ig-tags-empty { color:var(--texto-secundario); font-size:.68rem; }
.ig-my-tags { overflow:hidden; border:1px solid var(--borda); border-radius:12px; }
.ig-my-tags__toggle { display:flex; align-items:center; gap:.55rem; width:100%; padding:.85rem 1rem; border:0; border-bottom:1px solid var(--borda); background:var(--superficie); color:var(--texto); text-align:left; cursor:pointer; }
.ig-my-tags__toggle > span { display:inline-block; transform:rotate(180deg); transform-origin:center; transition:transform .2s ease; }
.ig-my-tags.is-collapsed .ig-my-tags__toggle > span { transform:rotate(0deg); }
.ig-my-tags__toggle small { margin-left:auto; color:var(--texto-secundario); }
.ig-my-tags__body { display:grid; gap:.85rem; padding:1rem; }
.ig-my-tags.is-collapsed .ig-my-tags__body { display:none; }
.ig-my-tags.is-collapsed .ig-my-tags__toggle { border-bottom:0; }
.ig-tags-search { display:flex!important; align-items:center; gap:.5rem!important; padding:0 .75rem; border-radius:10px; background:#f1f2f6; }
.ig-tags-search input,.ig-tags-search input:focus,.ig-tags-search input:focus-visible { flex:1; min-height:40px!important; padding:0!important; border:0!important; outline:0!important; box-shadow:none!important; background:transparent!important; }
.ig-add-tag { display:flex; gap:.6rem; }
.ig-add-tag input { flex:1; min-height:40px; padding:0 .75rem; border-radius:9px; background:var(--superficie); }
.ig-leads__feedback { margin:.25rem 1.25rem 1.25rem; color:var(--texto-secundario); font-size:.78rem; }
.ig-leads__feedback.is-error { color:var(--perigo,#dc2626); }
.ig-results-toolbar { display:grid; grid-template-columns:minmax(240px,1fr) 230px auto; gap:1rem; align-items:end; padding:1rem 1.25rem; border-bottom:1px solid var(--borda); background:var(--fundo,#f8f9fb); }
.ig-results-toolbar label { display:grid; gap:.4rem; color:var(--texto-secundario); font-size:.68rem; font-weight:600; }
.ig-results-toolbar input,.ig-results-toolbar select { min-height:40px; padding:0 .75rem; border:1px solid var(--borda); border-radius:9px; background:var(--superficie); color:var(--texto); }
.ig-results-selection { display:grid; justify-items:end; gap:.2rem; padding-bottom:.35rem; font-size:.7rem; }
.ig-results-selection span { color:var(--texto-secundario); }
.ig-leads__table th:first-child,.ig-leads__table td:first-child { width:42px; text-align:center; }
.ig-result-exported { display:inline-flex; padding:.25rem .45rem; border-radius:99px; background:#e8f7ef; color:#16804d; font-size:.62rem; font-weight:700; }
.ig-result-pending { color:var(--texto-secundario); font-size:.66rem; }
.ig-leads__table { width:100%; border-collapse:collapse; }
.ig-leads__table th,.ig-leads__table td { padding:.8rem 1rem; border-bottom:1px solid var(--borda); text-align:left; font-size:.78rem; }
.ig-leads__table td small { display:block; margin-top:.2rem; }
.ig-select-all-row { display:flex; align-items:center; gap:.55rem; padding:1rem 1.25rem 0; color:var(--texto-secundario); font-size:.72rem; }
.ig-profile-grid { display:grid; grid-template-columns:1fr; gap:.75rem; padding:1rem 1.25rem 1.25rem; }
.ig-profile-card { display:grid; grid-template-columns:auto 54px minmax(145px,1fr) minmax(150px,1fr) minmax(180px,1.35fr) auto auto auto; align-items:center; gap:.85rem; min-width:0; padding:.8rem 1rem; border:1px solid var(--borda); border-radius:999px; background:var(--superficie); box-shadow:0 6px 18px rgba(15,23,42,.045); transition:border-color .18s ease,transform .18s ease,box-shadow .18s ease; animation:ig-bubble-in .32s ease both; }
.ig-profile-card:hover { transform:translateY(-1px); border-color:#c7d2fe; box-shadow:0 10px 26px rgba(15,23,42,.08); }
.ig-profile-card__top { display:grid; grid-template-columns:auto 52px minmax(0,1fr) auto; align-items:center; gap:.7rem; }
.ig-profile-avatar,.ig-detail-avatar { position:relative; display:grid; place-items:center; overflow:hidden; border-radius:50%; background:linear-gradient(135deg,#e9d5ff,#dbeafe); color:#4f46e5; font-weight:800; }
.ig-profile-avatar { width:52px; height:52px; }
.ig-profile-avatar img,.ig-detail-avatar img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.ig-profile-identity { display:grid; min-width:0; gap:.15rem; }
.ig-profile-identity strong,.ig-profile-identity a,.ig-profile-identity small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ig-profile-identity a { color:#4f46e5; font-size:.72rem; }
.ig-profile-identity small { color:var(--texto-secundario); font-size:.64rem; }
.ig-contact-tags{display:flex;align-items:center;flex-wrap:wrap;gap:.22rem;min-width:0;margin-top:.12rem}
.ig-contact-tag{display:inline-flex;align-items:center;max-width:110px;padding:.12rem .38rem;border:1px solid var(--tag-solid,#94a3b8);border-radius:999px;background:var(--tag-bg,#f1f5f9);color:var(--tag-fg,#475569);font-size:.52rem;font-weight:700;line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ig-contact-tags--detail{gap:.4rem}.ig-contact-tags--detail .ig-contact-tag{max-width:none;padding:.3rem .6rem;font-size:.64rem}
.ig-profile-cell { display:grid; min-width:0; gap:.2rem; }.ig-profile-cell small { color:var(--texto-secundario); font-size:.6rem; }.ig-profile-cell strong,.ig-profile-cell a { overflow:hidden; color:var(--texto); font-size:.68rem; text-overflow:ellipsis; white-space:nowrap; }.ig-profile-site a { color:#4f46e5; text-decoration:underline; }
.ig-profile-site .ig-more-sites { overflow:hidden; color:var(--texto-secundario); font-size:.61rem; font-weight:600; text-overflow:ellipsis; white-space:nowrap; }
.ig-profile-mini-stats { display:grid; gap:.18rem; min-width:90px; }.ig-profile-mini-stats span { color:var(--texto-secundario); font-size:.58rem; white-space:nowrap; }.ig-profile-mini-stats strong { color:var(--texto); font-size:.66rem; }
.ig-verified { display:inline-grid; place-items:center; width:16px; height:16px; border-radius:50%; background:#3b82f6; color:#fff!important; font-size:10px; vertical-align:middle; }
.ig-profile-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:.5rem; padding:.7rem; border-radius:13px; background:var(--fundo,#f8f9fb); text-align:center; }
.ig-profile-stats span { display:grid; gap:.12rem; color:var(--texto-secundario); font-size:.6rem; }
.ig-profile-stats strong { color:var(--texto); font-size:.78rem; }
.ig-profile-bio { display:-webkit-box; overflow:hidden; min-height:2.8em; margin:0; color:var(--texto-secundario); font-size:.7rem; line-height:1.4; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.ig-profile-contact { display:grid; gap:.35rem; min-width:0; font-size:.66rem; }
.ig-profile-contact span,.ig-profile-contact a { overflow:hidden; color:var(--texto-secundario); text-overflow:ellipsis; white-space:nowrap; }
.ig-profile-contact a { color:#4f46e5; text-decoration:underline; }
.ig-open-profile { white-space:nowrap; }
.ig-profile-modal[hidden] { display:none; }
.ig-profile-modal { position:fixed; z-index:10000; isolation:isolate; inset:0; display:grid; place-items:center; padding:1rem; background:rgba(15,23,42,.62); backdrop-filter:blur(4px); }
.ig-profile-modal__backdrop { position:absolute; z-index:0; inset:0; width:100%; border:0; background:transparent; }
.ig-profile-detail { position:relative; z-index:2; overflow:auto; width:min(620px,100%); max-height:min(88vh,760px); padding:1.5rem; border:1px solid var(--borda); border-radius:22px; background:var(--superficie,#fff); color:var(--texto,#111827); opacity:1; filter:none; box-shadow:0 24px 80px rgba(0,0,0,.28); }
.ig-profile-detail__close { position:absolute; top:.8rem; right:.8rem; display:grid; place-items:center; width:36px; height:36px; border:0; border-radius:50%; background:var(--fundo,#f1f5f9); color:var(--texto); font-size:1.3rem; cursor:pointer; }
.ig-detail-header { display:flex; align-items:center; gap:1rem; padding-right:2.5rem; }
.ig-detail-avatar { flex:0 0 86px; width:86px; height:86px; font-size:1.35rem; }
.ig-detail-header h2 { margin:0 0 .2rem; font-size:1.35rem; }
.ig-detail-header a { color:#4f46e5; }
.ig-detail-header p { margin:.35rem 0 0; color:var(--texto-secundario); font-size:.72rem; }
.ig-detail-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:.7rem; margin:1.25rem 0; }
.ig-detail-stats div { display:grid; gap:.2rem; padding:.9rem; border-radius:14px; background:var(--fundo,#f8f9fb); text-align:center; }
.ig-detail-stats strong { font-size:1.05rem; }.ig-detail-stats span { color:var(--texto-secundario); font-size:.66rem; }
.ig-detail-section { padding:1rem 0; border-top:1px solid var(--borda); }.ig-detail-section h3 { margin:0 0 .65rem; font-size:.82rem; }.ig-detail-section p { margin:0; color:var(--texto-secundario); line-height:1.55; white-space:pre-wrap; }
.ig-detail-fields { display:grid; grid-template-columns:1fr 1fr; gap:.65rem; }.ig-detail-fields div { display:grid; min-width:0; gap:.22rem; padding:.75rem; border:1px solid var(--borda); border-radius:12px; }.ig-detail-fields .is-wide { grid-column:1/-1; }.ig-detail-fields span { color:var(--texto-secundario); font-size:.62rem; }.ig-detail-fields strong,.ig-detail-fields a { overflow-wrap:anywhere; font-size:.72rem; }.ig-detail-fields a { color:#4f46e5; }
.ig-detail-badges { display:flex; flex-wrap:wrap; gap:.45rem; }.ig-detail-badges span { padding:.35rem .6rem; border-radius:99px; background:var(--fundo,#f1f5f9); color:var(--texto-secundario); font-size:.64rem; }
.ig-detail-instagram { display:flex!important; justify-content:center; margin-top:1.2rem; }.ig-modal-open { overflow:hidden; }
.ig-detail-legacy { margin:.2rem 0 1rem; padding:.75rem; border-radius:10px; background:#fff7ed; color:#9a3412; font-size:.68rem; line-height:1.4; }
.ig-extraction-actions { grid-column:1/-1; display:flex; align-items:center; flex-wrap:wrap; gap:.65rem; padding-top:.15rem; }
.ig-new-only { display:inline-flex!important; align-items:center; gap:.5rem!important; min-height:42px; padding:.4rem .65rem; border:1px solid var(--borda); border-radius:10px; background:var(--fundo,#f8f9fb); }.ig-new-only input{width:14px!important;height:14px!important;min-height:0!important;margin:0}.ig-new-only span{display:grid;gap:.08rem}.ig-new-only strong{font-size:.68rem}.ig-new-only small{color:var(--texto-secundario);font-size:.56rem}
.ig-complete-filter { min-height:42px; border-color:#c9251c!important; color:#c9251c!important; }.ig-complete-filter span{display:inline-grid;place-items:center;width:18px;height:18px;margin-right:.25rem;border:1px solid currentColor;border-radius:50%;font-size:.65rem}.ig-complete-filter.is-active{background:#fff1f0!important;box-shadow:0 0 0 2px rgba(201,37,28,.1)}
.ig-extraction-actions #ig-search { min-width:210px; min-height:42px; margin-left:auto; }
.ig-extraction-layout .ig-extraction-actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); align-items:stretch; gap:.75rem; width:100%; }
.ig-extraction-layout .ig-new-only,.ig-extraction-layout .ig-complete-filter { width:100%; min-height:58px; margin:0; padding:.65rem .85rem; border:1px solid var(--borda)!important; border-radius:14px; background:var(--superficie)!important; color:var(--texto)!important; box-shadow:0 4px 14px rgba(15,23,42,.035); transition:border-color .18s ease,background-color .18s ease,transform .18s ease,box-shadow .18s ease; }
.ig-extraction-layout .ig-new-only:hover,.ig-extraction-layout .ig-complete-filter:hover { transform:translateY(-1px); border-color:#ef9a95!important; box-shadow:0 8px 20px rgba(15,23,42,.07); }
.ig-extraction-layout .ig-complete-filter.is-active { border-color:#c9251c!important; background:#fff7f6!important; box-shadow:0 0 0 3px rgba(201,37,28,.07); }
.ig-extraction-layout .ig-new-only input { appearance:none; display:grid; place-items:center; flex:0 0 24px; width:24px!important; height:24px!important; border:1px solid #cbd5e1!important; border-radius:8px!important; background:#f8fafc!important; }
.ig-extraction-layout .ig-new-only input:checked { border-color:#c9251c!important; background:#c9251c!important; }
.ig-extraction-layout .ig-new-only input:checked:after { content:none; }
.ig-extraction-layout .ig-new-only strong,.ig-extraction-layout .ig-complete-filter { font-size:.72rem; font-weight:700; }
.ig-extraction-layout .ig-new-only small { margin-top:.12rem; font-size:.59rem; font-weight:500; }
.ig-extraction-layout .ig-complete-filter { display:flex; align-items:center; justify-content:flex-start; text-align:left; }
.ig-extraction-layout .ig-complete-filter>span { flex:0 0 24px; width:24px; height:24px; margin-right:.6rem; border-color:#cbd5e1; color:#64748b; }
.ig-extraction-layout .ig-complete-filter.is-active>span { border-color:#c9251c; background:#c9251c; color:#fff; }
.ig-extraction-layout .ig-extraction-actions #ig-search { grid-column:1/-1; justify-self:end; min-width:210px; margin:0; }
@media(max-width:620px){.ig-extraction-layout .ig-extraction-actions{grid-template-columns:1fr}.ig-extraction-layout .ig-extraction-actions #ig-search{grid-column:1;width:100%}}
.ig-enrichment-warning[hidden]{display:none}.ig-enrichment-warning{grid-column:1/-1;display:flex;align-items:flex-start;gap:.75rem;padding:.85rem 1rem;border:1px solid #fdba74;border-radius:14px;background:linear-gradient(135deg,#fff7ed,#fffbeb);box-shadow:0 8px 22px rgba(194,65,12,.08);animation:ig-warning-in .25s ease}.ig-enrichment-warning>span{display:grid;place-items:center;flex:0 0 28px;width:28px;height:28px;border-radius:50%;background:#f97316;color:#fff;font-weight:800}.ig-enrichment-warning div{display:grid;gap:.2rem}.ig-enrichment-warning strong{color:#9a3412;font-size:.75rem}.ig-enrichment-warning p{margin:0;color:#7c2d12;font-size:.68rem;line-height:1.4}.ig-enrichment-warning small{color:#9a3412;font-size:.61rem;line-height:1.4}.ig-usage-grid #ig-actor-quota.is-blocked{color:#dc2626}@keyframes ig-warning-in{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:none}}
.ig-live-job { padding:0 1.25rem 1.25rem; }.ig-live-job__heading{display:flex;align-items:center;justify-content:space-between;margin:.2rem .5rem .6rem}.ig-live-job__heading small{color:var(--texto-secundario);font-size:.65rem}.ig-live-job__status{display:inline-flex;align-items:center;gap:.4rem;color:var(--texto-secundario);font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em}.ig-live-job__status i{width:8px;height:8px;border-radius:50%;background:#f59e0b;box-shadow:0 0 0 0 rgba(245,158,11,.5);animation:ig-status-pulse 1.4s infinite}.ig-live-job__status.is-extraindo i{background:#3b82f6;box-shadow:0 0 0 0 rgba(59,130,246,.5)}.ig-live-job__status.is-concluida i{background:#16a34a;animation:none}.ig-live-job__status.is-falhou i{background:#dc2626;animation:none}
.ig-live-bubble{position:relative;display:grid;grid-template-columns:58px minmax(150px,1fr) minmax(90px,.55fr) minmax(90px,.5fr) minmax(140px,.8fr) 34px;align-items:center;gap:1rem;overflow:hidden;padding:.9rem 1.15rem 1.3rem;border:1px solid #dbe2ea;border-radius:999px;background:var(--superficie);box-shadow:0 10px 32px rgba(15,23,42,.08);transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;animation:ig-live-enter .4s cubic-bezier(.2,.8,.2,1)}.ig-live-bubble:hover{transform:translateY(-3px);border-color:#cbd5e1;box-shadow:0 18px 42px rgba(15,23,42,.13)}.ig-live-bubble:before{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.62) 50%,transparent 65%);transform:translateX(-110%);pointer-events:none}.ig-live-bubble:hover:before{animation:ig-shimmer .8s ease}.ig-live-avatar{display:grid;place-items:center;overflow:hidden;width:58px;height:58px;border-radius:50%;background:linear-gradient(135deg,#ede9fe,#dbeafe);color:#4f46e5;font-weight:800;animation:ig-avatar-breathe 2s ease-in-out infinite}.ig-live-avatar img{width:100%;height:100%;object-fit:cover}.ig-live-identity,.ig-live-metric{display:grid;gap:.18rem;min-width:0}.ig-live-identity strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.82rem}.ig-live-identity span,.ig-live-metric small{color:var(--texto-secundario);font-size:.6rem}.ig-live-metric strong{font-size:.74rem}.ig-live-loader{width:28px;height:28px;border:3px solid #e2e8f0;border-top-color:#c9251c;border-radius:50%;animation:ig-spin .8s linear infinite}.ig-live-progress{position:absolute;right:1.25rem;bottom:8px;left:1.25rem;overflow:hidden;height:4px;border-radius:99px;background:#edf1f5;box-shadow:inset 0 0 0 1px rgba(148,163,184,.08)}.ig-live-progress span{display:block;max-width:100%;height:100%;border-radius:inherit;background:linear-gradient(90deg,#c9251c,#f97316,#c9251c);background-size:200% 100%;transition:width .55s cubic-bezier(.2,.8,.2,1);animation:ig-progress-glow 1.4s linear infinite}.ig-live-bubble.is-complete{border-color:#dbe2ea;box-shadow:0 10px 32px rgba(15,23,42,.08)}.ig-live-bubble.is-complete:hover{border-color:#cbd5e1;box-shadow:0 18px 42px rgba(15,23,42,.13)}.ig-live-bubble.is-complete .ig-live-loader{display:none}.ig-live-bubble.is-complete .ig-live-avatar{animation:none}.ig-live-bubble.is-failed{border-color:#fecaca}.ig-live-bubble.is-failed:before,.ig-live-bubble.is-failed .ig-live-loader{display:none}.ig-live-error{margin:.55rem .8rem 0;color:#dc2626;font-size:.68rem}
@keyframes ig-status-pulse{70%{box-shadow:0 0 0 7px transparent}}@keyframes ig-spin{to{transform:rotate(360deg)}}@keyframes ig-live-enter{from{opacity:0;transform:translateY(12px) scale(.985)}to{opacity:1;transform:none}}@keyframes ig-avatar-breathe{50%{transform:scale(1.045);box-shadow:0 0 0 7px rgba(99,102,241,.08)}}@keyframes ig-shimmer{to{transform:translateX(100%)}}@keyframes ig-progress-glow{to{background-position:-200% 0}}
@media(max-width:760px){.ig-live-bubble{grid-template-columns:50px 1fr 34px;border-radius:24px}.ig-live-avatar{width:50px;height:50px}.ig-live-metric{grid-column:2}.ig-live-loader{grid-column:3;grid-row:1}.ig-live-job__heading{align-items:flex-start;gap:.5rem;flex-direction:column}}
@media(prefers-reduced-motion:reduce){.ig-live-bubble,.ig-live-bubble:before,.ig-live-avatar,.ig-live-progress span,.ig-live-job__status i{animation:none!important}}
.ig-live-loader { position:relative; width:22px; height:22px; justify-self:center; border:0; scale:var(--loader-scale,1); transition:scale .45s ease; animation:ig-spin .85s linear infinite; }
.ig-live-loader span { position:absolute; top:1px; left:9.5px; width:3px; height:3px; border-radius:50%; background:#c9251c; transform-origin:1.5px 10px; }
.ig-live-loader span:nth-child(1){transform:rotate(0deg);opacity:1}.ig-live-loader span:nth-child(2){transform:rotate(45deg);opacity:.86}.ig-live-loader span:nth-child(3){transform:rotate(90deg);opacity:.72}.ig-live-loader span:nth-child(4){transform:rotate(135deg);opacity:.58}.ig-live-loader span:nth-child(5){transform:rotate(180deg);opacity:.44}.ig-live-loader span:nth-child(6){transform:rotate(225deg);opacity:.32}.ig-live-loader span:nth-child(7){transform:rotate(270deg);opacity:.22}.ig-live-loader span:nth-child(8){transform:rotate(315deg);opacity:.14}
.ig-live-job__tools{display:flex;align-items:center;gap:.7rem}.ig-live-job__tools button{padding:.3rem .62rem;border:1px solid #fecaca;border-radius:8px;background:#fff;color:#c9251c;font-size:.62rem;font-weight:700;cursor:pointer}.ig-live-job__tools button:hover{background:#fff1f0}.ig-live-job__tools button:disabled{opacity:.6;cursor:wait}
.ig-live-bubble{grid-template-columns:44px minmax(140px,1fr) minmax(78px,.5fr) minmax(72px,.42fr) minmax(82px,.45fr) minmax(125px,.72fr) 28px;padding:.62rem 1rem 1rem;border-radius:30px}.ig-live-avatar{width:44px;height:44px}.ig-live-progress{right:1rem;bottom:6px;left:1rem;height:3px}.ig-live-loader{width:20px;height:20px}.ig-live-loader span{left:8.5px;width:3px;height:3px;transform-origin:1.5px 9px}
.ig-recent-pagination{grid-column:1/-1;display:grid;grid-template-columns:auto 1fr auto auto;align-items:center;gap:1rem;padding:.9rem .4rem .15rem}.ig-recent-pagination>div{display:flex;justify-content:center;align-items:center;gap:.35rem}.ig-recent-pagination button{min-width:34px;height:34px;padding:0 .7rem;border:1px solid var(--borda);border-radius:9px;background:var(--superficie);color:var(--texto-secundario);font-size:.68rem;cursor:pointer}.ig-recent-pagination button:hover:not(:disabled),.ig-recent-pagination button.is-active{border-color:#c9251c;background:#fff1f0;color:#c9251c}.ig-recent-pagination button:disabled{opacity:.4;cursor:not-allowed}.ig-recent-pagination small{color:var(--texto-secundario);font-size:.66rem}.ig-recent-pagination span{color:var(--texto-secundario)}
@media(max-width:760px){.ig-live-bubble{grid-template-columns:42px 1fr 24px}.ig-live-avatar{width:42px;height:42px}.ig-recent-pagination{grid-template-columns:1fr auto}.ig-recent-pagination>div{order:3;grid-column:1/-1}.ig-recent-pagination small{display:none}}
.ig-live-bubble{grid-template-columns:58px minmax(150px,1fr) minmax(82px,.5fr) minmax(78px,.45fr) minmax(82px,.45fr) minmax(130px,.75fr) 34px}
@media(max-width:760px){.ig-live-bubble{grid-template-columns:50px 1fr 34px}}
.ig-profile-site,.ig-detail-sites { gap:.28rem!important; }.ig-profile-site a,.ig-detail-sites a { display:block; }
.ig-recent-list { display:grid; gap:.75rem; padding:1rem 1.25rem 1.25rem; }
.ig-recent-item { grid-template-columns:54px minmax(220px,1.45fr) minmax(100px,.55fr) minmax(90px,.45fr) minmax(180px,.85fr) auto auto!important; gap:1.15rem!important; min-height:0!important; margin:0; padding:.8rem 1rem!important; border:1px solid var(--borda)!important; border-radius:999px!important; background:var(--superficie); box-shadow:0 6px 18px rgba(15,23,42,.045); transition:border-color .18s ease,transform .18s ease,box-shadow .18s ease,background-color .18s ease; animation:ig-bubble-in .32s ease both; }
.ig-recent-item:hover { transform:translateY(-2px); border-color:#c7d2fe!important; box-shadow:0 10px 26px rgba(15,23,42,.08); }
.ig-recent-item:focus-within { border-color:#818cf8!important; box-shadow:0 0 0 3px rgba(99,102,241,.13),0 10px 26px rgba(15,23,42,.08); }
.ig-recent-item:nth-child(2){animation-delay:.035s}.ig-recent-item:nth-child(3){animation-delay:.07s}.ig-recent-item:nth-child(4){animation-delay:.105s}.ig-recent-item:nth-child(5){animation-delay:.14s}.ig-recent-item:nth-child(6){animation-delay:.175s}
.ig-recent-avatar{position:relative;display:grid;place-items:center;overflow:hidden;width:54px;height:54px;border-radius:50%;background:linear-gradient(135deg,#e9d5ff,#dbeafe);color:#4f46e5;font-weight:800;box-shadow:inset 0 0 0 1px rgba(99,102,241,.08);transition:transform .18s ease}.ig-recent-item:hover .ig-recent-avatar{transform:scale(1.04)}.ig-recent-avatar img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.ig-recent-identity{display:grid;gap:.15rem;min-width:0}.ig-recent-identity strong{color:var(--texto);font-size:.78rem}.ig-recent-identity small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ig-recent-item .gd-btn{transition:transform .16s ease,background-color .16s ease,border-color .16s ease}.ig-recent-item .gd-btn:hover{transform:translateY(-1px)}
@keyframes ig-bubble-in { from { opacity:0; transform:translateY(8px) scale(.992); } to { opacity:1; transform:translateY(0) scale(1); } }
@media(prefers-reduced-motion:reduce){.ig-recent-item,.ig-recent-avatar,.ig-recent-item .gd-btn{animation:none!important;transition:none!important}}
@media(max-width:900px){.ig-console,.ig-extraction-layout{grid-template-columns:1fr}.ig-leads__fields,.ig-extraction-layout .ig-leads__fields{grid-template-columns:1fr}.ig-results-toolbar{grid-template-columns:1fr}.ig-results-selection{justify-items:start}.ig-leads__table{min-width:850px}.ig-recent-item{grid-template-columns:1fr 90px 80px auto}.ig-recent-item>*:nth-child(4),.ig-recent-item>*:nth-child(5){display:none}}
@media(max-width:560px){.ig-apify__connect-row{flex-direction:column}.ig-usage-grid{grid-template-columns:1fr!important}.ig-recent-item{grid-template-columns:1fr auto}}
@media(max-width:760px){.ig-hub-account{grid-template-columns:auto 1fr}.ig-hub-account__quota{text-align:left}.ig-hub-account__status,.ig-hub-account .ig-remove-account{justify-self:start}}
@media(max-width:1100px){.ig-profile-card{grid-template-columns:auto 52px minmax(140px,1fr) minmax(150px,1fr) minmax(170px,1.2fr) auto}.ig-profile-mini-stats,.ig-profile-card>.ig-result-exported{display:none}}
@media(max-width:760px){.ig-profile-grid{padding:.75rem}.ig-profile-card{grid-template-columns:auto 48px minmax(0,1fr) auto;border-radius:22px}.ig-profile-avatar{width:48px;height:48px}.ig-profile-cell{grid-column:3/-1}.ig-profile-mini-stats,.ig-profile-card>.ig-result-exported{display:none}.ig-open-profile{grid-column:3/-1;width:100%}.ig-profile-detail{padding:1.1rem}.ig-detail-header{align-items:flex-start}.ig-detail-avatar{flex-basis:64px;width:64px;height:64px}.ig-detail-fields{grid-template-columns:1fr}.ig-detail-fields .is-wide{grid-column:auto}}
@media(max-width:900px){.ig-recent-item{grid-template-columns:46px minmax(0,1fr) auto auto!important}.ig-recent-item>*:nth-child(3),.ig-recent-item>*:nth-child(5),.ig-recent-item>*:nth-child(6){display:none}}
.ig-capture-status { display:flex; align-items:center; gap:20px; padding:18px 20px; margin-bottom:16px; border:1px solid var(--border); border-radius:18px; background:linear-gradient(135deg,var(--panel-bg),color-mix(in srgb,var(--accent) 4%,var(--panel-bg))); }
.ig-capture-status > div:first-child { flex:1; }.ig-capture-status h2 { margin:3px 0; font-size:18px; }.ig-capture-status p { margin:0; color:var(--text-muted); font-size:13px; }
.ig-capture-status__metrics { display:flex; gap:8px; }.ig-capture-status__metrics article { min-width:120px; padding:10px 12px; border:1px solid var(--border); border-radius:12px; background:var(--panel-bg); display:grid; gap:3px; }
.ig-capture-status__metrics span { color:var(--text-muted); font-size:11px; }.ig-capture-status__metrics strong { font-size:14px; }
@media(max-width:900px){.ig-capture-status{align-items:stretch;flex-direction:column}.ig-capture-status__metrics{flex-wrap:wrap}.ig-capture-status__metrics article{flex:1}}

/* Painel de tags — identidade W2G Church. */
.ig-tag-picker {
  --superficie: var(--panel-bg);
  --fundo: var(--bg);
  --borda: var(--border);
  --texto: var(--text);
  --texto-secundario: var(--text-muted);
  border: 1px solid var(--border) !important;
  border-radius: var(--r-lg);
  background: linear-gradient(145deg, var(--panel-bg), #0d2436) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035), var(--shadow-sm) !important;
}
.ig-tag-picker__icon { color: var(--accent-texto) !important; }
.ig-tag-picker__header strong,
.ig-tag-group > strong { color: var(--text) !important; }
.ig-tag-picker__header small,
.ig-tags-empty { color: var(--text-muted) !important; }
.ig-my-tags { border-color: var(--border) !important; background: rgba(7,24,39,.38); }
.ig-my-tags__toggle {
  border-color: var(--border) !important;
  background: var(--sidebar-bg-2) !important;
  color: var(--text) !important;
}
.ig-my-tags__toggle > span,
.ig-my-tags__toggle small { color: var(--accent-texto) !important; }
.ig-tags-search,
.ig-add-tag input {
  border: 1px solid var(--border-strong) !important;
  background: var(--bg) !important;
  color: var(--text) !important;
}
.ig-tags-search input { color: var(--text) !important; }
.ig-tags-search input::placeholder,
.ig-add-tag input::placeholder { color: var(--text-fraco) !important; }
.ig-tag-chip {
  --tag-bg: rgba(246,196,0,.10) !important;
  --tag-fg: #ffe36b !important;
  --tag-solid: rgba(246,196,0,.42) !important;
  font-weight: 650;
}
.ig-tag-picker__list .ig-tag-chip:nth-child(3n+2),
.ig-tag-picker__selected .ig-tag-chip:nth-child(3n+2) {
  --tag-bg: rgba(90,169,255,.10) !important;
  --tag-fg: #8fc2ff !important;
  --tag-solid: rgba(90,169,255,.42) !important;
}
.ig-tag-picker__list .ig-tag-chip:nth-child(3n),
.ig-tag-picker__selected .ig-tag-chip:nth-child(3n) {
  --tag-bg: rgba(61,220,132,.09) !important;
  --tag-fg: #72e9a7 !important;
  --tag-solid: rgba(61,220,132,.38) !important;
}
.ig-tag-chip:hover { filter: brightness(1.16); }
.ig-tag-chip.is-selected,
.ig-tag-chip--auto {
  border-color: var(--accent) !important;
  background: var(--accent) !important;
  color: #081a2a !important;
  box-shadow: 0 4px 12px rgba(246,196,0,.14);
}

/* source: css/cadastro-nacional.css */
.cne { max-width: 1500px; margin: 0 auto; }
.cne__header { display:flex; align-items:flex-start; justify-content:space-between; gap:1.25rem; padding-bottom:1.25rem; margin-bottom:1.25rem; border-bottom:1px solid var(--border); }
.cne__header h1 { margin:0; font-family:var(--font-display); font-size:1.75rem; }
.cne__header p { margin:.35rem 0 0; color:var(--text-muted); font-size:.9rem; line-height:1.5; }
.cne__api { display:flex; align-items:center; gap:.7rem; flex:none; }
.cne__api-status { padding:.4rem .7rem; border-radius:var(--r-pill); background:var(--elevado); color:var(--text-muted); font-size:.75rem; }
.cne__api-status.is-ok { background:rgba(34,197,94,.12); color:#4ade80; }
.cne__api-status.is-erro { background:rgba(239,68,68,.12); color:#f87171; }
.cne__card { margin-bottom:1.25rem; padding:1.25rem; border:1px solid var(--border); border-radius:var(--r-lg); background:var(--panel-bg); }
.cne__card-titulo { color:var(--text); font-size:.95rem; font-weight:750; }
.cne__consulta-layout { display:grid; grid-template-columns:minmax(560px,1.65fr) minmax(350px,.85fr); gap:1rem; align-items:start; }
.cne__consulta-principal { min-width:0; }
.cne__filtros { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.8rem; margin-top:1rem; }
.cne__filtros-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1rem; margin-top:1rem; }
.cne__campo { display:flex; flex-direction:column; gap:.4rem; min-width:0; }
.cne__campo--largo { grid-column:span 2; }
.cne__campo--tag { grid-column:span 2; }
.cne__campo > span, .cne__campo label { color:var(--text-muted); font-size:.72rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; }
.cne__campo input,.cne__campo select { width:100%; min-width:0; padding:.7rem .8rem; border:1px solid var(--border-strong); border-radius:var(--r-sm); outline:0; background:var(--bg); color:var(--text); font:inherit; font-size:.84rem; }
.cne__campo input[type="number"] { -moz-appearance:textfield; }
.cne__campo input[type="number"]::-webkit-inner-spin-button,.cne__campo input[type="number"]::-webkit-outer-spin-button { -webkit-appearance:none; }
.cne__campo input:focus,.cne__campo select:focus { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
.cne__campo small { color:var(--text-fraco); font-size:.7rem; }
.cne__opcoes { display:flex; flex-wrap:wrap; gap:1.25rem; margin-top:1rem; color:var(--text-muted); font-size:.82rem; }
.cne__opcoes label { display:flex; align-items:center; gap:.45rem; cursor:pointer; }
.cne__opcoes input { accent-color:var(--accent); }
.cne__checkbox-label { display:flex; align-items:center; gap:.45rem; cursor:pointer; font-size:.82rem; color:var(--text-muted); }
.cne__checkbox-label input { accent-color:var(--accent); }
.cne__acoes { display:flex; align-items:center; flex-wrap:wrap; gap:.6rem; margin-top:1rem; }
.cne__feedback { margin-top:1rem; padding:.75rem .9rem; border:1px solid var(--border); border-radius:var(--r-sm); background:var(--elevado); color:var(--text-muted); font-size:.8rem; }
.cne__feedback.is-erro { border-color:rgba(239,68,68,.4); color:#f87171; background:rgba(239,68,68,.08); }
.cne__feedback.is-sucesso { border-color:rgba(34,197,94,.4); color:#4ade80; background:rgba(34,197,94,.08); }
.cne__feedback.is-info { border-color:rgba(59,130,246,.4); color:#60a5fa; background:rgba(59,130,246,.08); }
.cne__tag-picker { min-width:0; }
.cne__resultados-topo { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:1rem; }
.cne__total { display:block; margin-top:.2rem; color:var(--text-muted); font-size:.76rem; }
.cne__acoes--resultado { margin-top:0; }
.cne__acoes--resultado > span { color:var(--text-muted); font-size:.76rem; }
.cne__lista-controles { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:.85rem; padding:.72rem .9rem; border:1px solid var(--border); border-radius:12px; background:var(--elevado); }
.cne__lista-controles label { display:flex; align-items:center; gap:.5rem; color:var(--text-muted); font-size:.76rem; font-weight:700; cursor:pointer; }
.cne__lista-controles input { width:16px; height:16px; accent-color:var(--accent); cursor:pointer; }
.cne__lista-controles small { color:var(--text-fraco); font-size:.7rem; }
.cne__empresas-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); align-items:stretch; gap:.85rem; }
.cne__empresa-card { --empresa-cor:var(--accent); position:relative; display:flex; flex-direction:column; min-width:0; min-height:220px; overflow:hidden; padding:12px; border:1px solid var(--border); border-left:4px solid var(--empresa-cor); border-radius:12px; background:var(--panel-bg); box-shadow:0 2px 6px rgba(25,35,55,.055); transition:transform .2s ease,box-shadow .2s ease; will-change:transform; }
.cne__empresa-card::before { content:""; position:absolute; z-index:2; bottom:0; left:0; width:0; height:3px; border-radius:0 0 0 12px; background:var(--empresa-cor); transition:width 500ms ease; will-change:width; }
.cne__empresa-card:hover { z-index:1; transform:translateY(-2px); box-shadow:0 10px 24px rgba(24,34,55,.11); }
.cne__empresa-card:hover::before,.cne__empresa-card:focus-within::before { width:100%; }
.cne__empresa-card.is-selecionada { border-color:color-mix(in srgb,var(--empresa-cor) 64%,var(--border)); box-shadow:0 0 0 2px color-mix(in srgb,var(--empresa-cor) 16%,transparent),0 6px 16px rgba(15,23,42,.1); }
.cne__empresa-card.is-importada { border-color:color-mix(in srgb,#22a866 48%,var(--border)); border-left-color:#22a866; background:color-mix(in srgb,#22a866 13%,var(--panel-bg)); box-shadow:0 3px 10px rgba(34,168,102,.14); }
.cne__empresa-card.is-importada:hover { box-shadow:0 10px 24px rgba(34,168,102,.18); }
.cne__empresa-check { position:absolute; z-index:3; top:1rem; right:1rem; width:17px; height:17px; accent-color:var(--empresa-cor); cursor:pointer; }
.cne__empresa-check:disabled { cursor:not-allowed; opacity:.45; }
.cne__empresa-perfil { display:flex; align-items:center; gap:.75rem; min-width:0; padding-right:2rem; }
.cne__empresa-avatar { display:grid; place-items:center; flex:none; width:46px; height:46px; border:2px solid color-mix(in srgb,var(--empresa-cor) 72%,white); border-radius:50%; background:var(--empresa-cor); color:#fff; box-shadow:0 4px 10px color-mix(in srgb,var(--empresa-cor) 28%,transparent); font-size:.82rem; font-weight:800; letter-spacing:.02em; }
.cne__empresa-identidade { display:flex; flex-direction:column; min-width:0; }
.cne__empresa-identidade strong,.cne__empresa-identidade span,.cne__empresa-identidade small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cne__empresa-identidade strong { color:var(--text); font-size:.84rem; }
.cne__empresa-identidade span { margin-top:.14rem; color:var(--text-muted); font-size:.7rem; }
.cne__empresa-identidade small { margin-top:.2rem; color:var(--text-fraco); font-family:var(--font-mono); font-size:.65rem; }
.cne__card-importacao { display:flex; align-items:center; gap:.35rem; min-width:0; min-height:27px; margin-top:.75rem; white-space:nowrap; }
.cne__card-importacao .cne__importada-badge { display:inline-flex; flex:none; width:max-content; margin:0; padding:.18rem .42rem; border-radius:var(--r-pill); background:rgba(34,197,94,.13); color:#22a866; font-size:.6rem; font-weight:750; }
.cne__empresa-nova { display:inline-flex; width:max-content; padding:.2rem .48rem; border-radius:var(--r-pill); background:color-mix(in srgb,var(--empresa-cor) 10%,transparent); color:var(--empresa-cor); font-size:.62rem; font-weight:750; }
.cne__importada-tags { display:flex; align-items:center; gap:.2rem; min-width:0; overflow:hidden; }
.cne__card-importacao .cne__importada-tags .ig-contact-tag { display:inline-flex; flex:none; max-width:5.2rem; margin:0; padding:.13rem .35rem; font-size:.55rem; }
.cne__card-importacao .cne__importada-mais { display:inline-flex; flex:none; margin:0; padding:.12rem .38rem; border:1px solid var(--border); border-radius:var(--r-pill); background:var(--elevado); color:var(--accent); font:inherit; font-size:.55rem; font-weight:750; cursor:pointer; transition:transform .15s ease,border-color .15s ease,background-color .15s ease; }
.cne__card-importacao .cne__importada-mais:hover { transform:translateY(-1px); border-color:var(--accent); background:var(--accent-soft); }
.cne__empresa-dados { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.7rem 1.1rem; margin-top:auto; padding-top:1rem; }
.cne__empresa-dados > div { display:flex; flex-direction:column; justify-content:center; min-width:0; min-height:38px; padding:0; background:transparent; }
.cne__empresa-dados span { margin-bottom:.18rem; color:var(--text-fraco); font-size:.56rem; font-weight:800; letter-spacing:.05em; text-transform:uppercase; }
.cne__empresa-dados strong { overflow:hidden; color:var(--text-muted); font-size:.68rem; font-weight:650; line-height:1.3; text-overflow:ellipsis; white-space:nowrap; }
.cne__empresa-dados .cne__empresa-email { grid-column:span 2; }
.cne__empresa-dados a { overflow:hidden; color:var(--accent); text-decoration:none; text-overflow:ellipsis; white-space:nowrap; }
.cne__empresa-dados a:hover { text-decoration:underline; }
.cne__tags-modal { position:fixed; z-index:10020; inset:0; display:grid; place-items:center; padding:1rem; }
.cne__tags-modal-fundo { position:absolute; inset:0; width:100%; border:0; background:rgba(15,23,42,.58); backdrop-filter:blur(3px); cursor:pointer; }
.cne__tags-modal-painel { position:relative; z-index:1; width:min(520px,100%); max-height:min(78vh,620px); overflow:auto; border:1px solid var(--border); border-radius:20px; background:var(--panel-bg); box-shadow:0 24px 70px rgba(0,0,0,.3); animation:cne-tags-entrar .2s ease both; }
.cne__tags-modal-painel header { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; padding:1.15rem 1.25rem; border-bottom:1px solid var(--border); }
.cne__tags-modal-painel header div { display:grid; gap:.2rem; min-width:0; }
.cne__tags-modal-painel header span { color:var(--accent); font-size:.62rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; }
.cne__tags-modal-painel header strong { overflow:hidden; color:var(--text); font-size:1rem; text-overflow:ellipsis; white-space:nowrap; }
.cne__tags-modal-painel header small { color:var(--text-muted); font-size:.68rem; }
.cne__tags-modal-painel header > button { display:grid; place-items:center; flex:none; width:34px; height:34px; border:0; border-radius:50%; background:var(--elevado); color:var(--text); font-size:1.2rem; cursor:pointer; }
.cne__tags-modal-lista { display:flex; flex-wrap:wrap; gap:.55rem; padding:1.25rem; }
.cne__tags-modal-lista .ig-tag-chip { cursor:default; }
.cne__tags-modal-lista .ig-tag-chip:hover { transform:none; }
@keyframes cne-tags-entrar { from { opacity:0; transform:translateY(8px) scale(.98); } to { opacity:1; transform:none; } }
.cne__telefone { color:var(--text); font-family:var(--font-mono); white-space:nowrap; }
.cne__nao-encontrado { color:var(--text-fraco); font-style:italic; font-size:.85rem; }
.cne__email { max-width:190px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cne__email a { color:var(--accent); text-decoration:none; }
.cne__email a:hover { text-decoration:underline; }
.cne__porte { display:inline-block; padding:.2rem .45rem; border-radius:var(--r-pill); background:var(--elevado); color:var(--text-muted); font-size:.67rem; white-space:nowrap; }
.cne__paginacao { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-top:1rem; padding:.85rem 1rem; color:var(--text-muted); font-size:.78rem; flex-wrap:wrap; }
.cne__paginacao-acoes { display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; }
.cne__ir-pagina { display:flex; align-items:center; gap:.5rem; color:var(--text-muted); white-space:nowrap; padding:.35rem .55rem; border:1px dashed var(--border); border-radius:var(--r-sm); background:var(--elevado); }
.cne__ir-pagina input { width:4.5rem; min-height:2rem; padding:.35rem .45rem; border:1px solid var(--border); border-radius:var(--r-sm); background:var(--surface); color:var(--text); text-align:center; font-size:.8rem; }
.cne__vazio { display:flex; flex-direction:column; align-items:center; gap:.35rem; padding:3rem 1rem; color:var(--text-muted); text-align:center; }
.cne__vazio--grid { grid-column:1/-1; }
.cne__vazio strong { color:var(--text); }
.cne__vazio span { font-size:.85rem; }
.cne__vazio svg { width:48px; height:48px; margin-bottom:.5rem; color:var(--text-fraco); }

@media (max-width:1250px) {
  .cne__consulta-layout { grid-template-columns:1fr; }
  .cne__tag-picker { max-width:none; }
}
@media (max-width:1100px) {
  .cne__filtros, .cne__filtros-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .cne__empresas-grid { grid-template-columns:1fr; }
}
@media (max-width:700px) {
  .cne__header,.cne__resultados-topo { flex-direction:column; align-items:stretch; }
  .cne__api { justify-content:space-between; }
  .cne__filtros, .cne__filtros-grid { grid-template-columns:1fr; }
  .cne__campo--largo,.cne__campo--tag { grid-column:span 1; }
  .cne__acoes--resultado { align-items:stretch; }
  .cne__paginacao { flex-direction:column; align-items:stretch; }
  .cne__paginacao-acoes { justify-content:space-between; }
  .cne__ir-pagina { order:3; width:100%; justify-content:center; }
  .cne__lista-controles { align-items:flex-start; flex-direction:column; }
  .cne__empresa-card { min-height:0; }
  .cne__empresa-dados { grid-template-columns:repeat(2,minmax(0,1fr)); margin-top:.85rem; }
  .cne__empresa-dados .cne__empresa-email { grid-column:span 2; }
}
@media (max-width:430px) {
  .cne__empresa-dados { grid-template-columns:1fr; }
  .cne__empresa-dados .cne__empresa-email { grid-column:span 1; }
}

/* source: css/profissionais-web.css */
.profweb { padding: 24px; max-width: 1500px; margin: 0 auto; }
.profweb__header { display: flex; justify-content: space-between; gap: 20px; align-items: flex-start; }
.profweb__badge { color: #087f5b; background: #dff8ec; border: 1px solid #b7ecd5; border-radius: 999px; padding: 7px 12px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.profweb__grid { display: grid; grid-template-columns: minmax(0, .95fr) minmax(420px, 1.05fr); gap: 16px; align-items: stretch; }
.profweb__form-card, .profweb__tags-card { min-width: 0; }
.profweb__form { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 20px; }
.profweb__wide, .profweb__submit { grid-column: 1 / -1; }
.profweb__submit { display: flex; justify-content: flex-end; border-top: 1px solid var(--cor-borda, #e4e7ec); padding-top: 18px; }
.profweb__submit .gd-btn { min-width: 190px; }
.profweb__tags-card > .ig-tag-picker { margin-top: 18px; box-shadow: none; }
#pweb-tags-filter,
#pweb-tags-filter:hover,
#pweb-tags-filter:focus,
#pweb-tags-filter:focus-visible {
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}
.profweb__tags-card .ig-tags-search { border: 0 !important; box-shadow: none !important; }
.profweb__job, .profweb__results { margin-top: 16px; }
.profweb__job-top, .profweb__job-top > div, .profweb__progress-label { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.profweb__job-top > div { align-items: flex-start; flex-direction: column; gap: 3px; }
.profweb__job-top small, #pweb-results-summary { color: var(--cor-texto-suave, #667085); }
.profweb__progress { height: 9px; overflow: hidden; border-radius: 99px; background: #f0f2f5; margin-top: 18px; }
.profweb__progress span { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #b61d22, #e24b50); transition: width .3s ease; }
.profweb__progress-label { margin-top: 7px; color: #667085; font-size: 12px; }
.profweb__table-wrap { overflow: auto; max-height: 560px; border: 1px solid #e4e7ec; border-radius: 10px; }
.profweb__table { min-width: 920px; }
.profweb__table td { vertical-align: middle; }
.profweb__person { display: flex; flex-direction: column; min-width: 220px; gap: 3px; }
.profweb__person strong { color: #252833; }
.profweb__person small, .profweb__location { color: #777b86; }
.profweb__phone { white-space: nowrap; font-weight: 600; color: #31343c; }
.profweb__wa { display: inline-flex; margin-top: 5px; padding: 3px 7px; border-radius: 99px; background: #dcfce7; color: #137a3d; font-size: 11px; font-weight: 700; }
.profweb__score { display: inline-flex; min-width: 44px; justify-content: center; padding: 5px 8px; border-radius: 99px; color: #8d171b; background: #fce8e9; font-size: 12px; font-weight: 800; }
.profweb__source { color: #a61d22; font-weight: 650; text-decoration: none; }
.profweb__source:hover { text-decoration: underline; }
.profweb__select-all { display: flex; align-items: center; gap: 7px; font-size: 13px; }
.profweb__import { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 16px; }
.profweb__import > div { display: flex; align-items: center; gap: 14px; white-space: nowrap; }
.profweb__empty { text-align: center; padding: 42px 16px !important; color: #777b86; }
.panel--profissionais .panel__icon { color: #2563eb; background: #e8f0ff; }

@media (max-width: 1050px) {
  .profweb__grid { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .profweb { padding: 16px; }
  .profweb__header, .profweb__import { align-items: stretch; flex-direction: column; }
  .profweb__form { grid-template-columns: 1fr; }
  .profweb__form > * { grid-column: 1; }
  .profweb__import > div { justify-content: space-between; }
}

/* source: css/whatsapp-grupos.css */
.whatsapp-contas { display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:1rem; width:100%; margin-bottom:1rem; }
.whatsapp-contas__vazio { grid-column:1/-1; display:grid; min-height:180px; place-content:center; gap:.35rem; padding:2rem; border:1px dashed var(--border-strong); border-radius:var(--r-md); color:var(--text-muted); text-align:center; }
.whatsapp-conta-card { position:relative; display:flex; flex-direction:column; align-items:stretch; gap:.75rem; width:100%; min-width:0; overflow:hidden; padding:1.25rem; border:1px solid var(--border); border-radius:var(--r-lg); background:var(--panel-bg); box-shadow:var(--shadow-sm); }
.whatsapp-conta-card::before { content:""; position:absolute; top:0; right:0; left:0; height:3px; background:linear-gradient(90deg,#25d366,var(--accent)); }
.whatsapp-conta-card__avatar { display:grid; place-items:center; align-self:center; overflow:hidden; width:58px; height:58px; flex:0 0 58px; border-radius:50%; background:linear-gradient(135deg,#25d366,#0f766e); color:#fff; font-size:20px; font-weight:800; box-shadow:0 5px 16px rgba(37,211,102,.18); }
.whatsapp-conta-card__avatar img { display:block; width:100% !important; height:100% !important; max-width:100% !important; max-height:100% !important; object-fit:cover; object-position:center; }
.whatsapp-conta-card__info { min-width:0; text-align:center; }
.whatsapp-conta-card__info h4 { overflow:hidden; margin:0; color:var(--text); font-size:.9rem; text-overflow:ellipsis; white-space:nowrap; }
.whatsapp-conta-card__info p { overflow:hidden; margin:.2rem 0 0; color:var(--text-muted); font-size:.72rem; text-overflow:ellipsis; white-space:nowrap; }
.whatsapp-conta-card__status { align-self:center; width:max-content; padding:.25rem .55rem; border-radius:var(--r-pill); font-size:.62rem; font-weight:750; text-transform:uppercase; letter-spacing:.04em; }
.whatsapp-conta-card__status--conectado { background:rgba(61,220,132,.13); color:#72e9a7; }
.whatsapp-conta-card__status--conectando { background:rgba(245,165,36,.13); color:#ffd166; }
.whatsapp-conta-card__status--desconectado,.whatsapp-conta-card__status--desconhecido { background:rgba(255,90,90,.12); color:#ff8585; }
.whatsapp-conta-card__acoes { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.5rem; margin-top:auto; }
.whatsapp-conta-card__acoes:has(> :only-child) { grid-template-columns:1fr; }
.whatsapp-conta-card__btn { width:100%; min-height:38px; margin:0; }
.whatsapp-conta-card__check { position:absolute; top:.75rem; left:.75rem; z-index:2; display:grid; place-items:center; width:28px; height:28px; cursor:pointer; }
.whatsapp-conta-card__check input { position:absolute; width:0; height:0; opacity:0; pointer-events:none; }
.whatsapp-conta-card__check-icone { display:grid; place-items:center; width:20px; height:20px; border:2px solid var(--border-strong); border-radius:6px; background:var(--bg); color:#081a2a; }
.whatsapp-conta-card__check-icone svg { width:13px; height:13px; opacity:0; }
.whatsapp-conta-card--selecionada .whatsapp-conta-card__check-icone { border-color:var(--accent); background:var(--accent); }
.whatsapp-conta-card--selecionada .whatsapp-conta-card__check-icone svg { opacity:1; }

.wagrupos { max-width:1400px; margin:0 auto; }
.wagrupos__header { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; padding-bottom:1.25rem; margin-bottom:1.25rem; border-bottom:1px solid var(--border); }
.wagrupos__header h1 { margin:0; font-family:var(--font-display); font-size:1.75rem; }
.wagrupos__header p { margin:.35rem 0 0; max-width:760px; color:var(--text-muted); line-height:1.5; }
.wagrupos__badge { padding:.45rem .75rem; border-radius:var(--r-pill); background:rgba(34,197,94,.12); color:#4ade80; font-size:.76rem; font-weight:750; white-space:nowrap; }
.wagrupos__card { margin-bottom:1rem; padding:1.2rem; border:1px solid var(--border); border-radius:var(--r-lg); background:var(--panel-bg); }
.wagrupos__passo { display:flex; align-items:center; gap:.75rem; margin-bottom:1rem; }
.wagrupos__passo > span { display:grid; place-items:center; width:2rem; height:2rem; flex:none; border-radius:50%; background:var(--accent); color:#fff; font-weight:800; }
.wagrupos__passo div { display:flex; flex-direction:column; gap:.12rem; }
.wagrupos__passo small { color:var(--text-muted); }
.wagrupos__conexao { display:flex; align-items:flex-end; gap:.65rem; flex-wrap:wrap; }
.wagrupos__conexao label,.wagrupos__importacao > label:first-child { display:flex; flex:1 1 300px; flex-direction:column; gap:.35rem; color:var(--text-muted); font-size:.75rem; font-weight:700; }
.wagrupos__contas-topo { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:1rem; }
.wagrupos__contas-topo > div:first-child { display:grid; gap:.2rem; }
.wagrupos__contas-topo > div:first-child strong { color:var(--text); font-size:.88rem; }
.wagrupos__contas-topo > div:first-child small { color:var(--text-muted); font-size:.72rem; }
.wagrupos__contas-topo > div:last-child { display:flex; gap:.55rem; flex-wrap:wrap; }
.wagrupos__contas { grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:.85rem; margin:0; }
.wagrupos__conta-card { gap:.7rem; min-height:220px; padding:1.2rem; border-color:var(--border); background:var(--panel-bg); cursor:default; }
.wagrupos__conta-card .whatsapp-conta-card__avatar { width:58px; height:58px; }
.wagrupos__conta-card .whatsapp-conta-card__acoes { grid-template-columns:repeat(2,minmax(0,1fr)); }
.wagrupos__conta-card.whatsapp-conta-card--selecionada { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
.wagrupos__conta-card.whatsapp-conta-card--selecionada::before { background:var(--accent); }
.wagrupos__conta-card button:disabled { cursor:not-allowed; opacity:.5; }
.wagrupos__contas-barra { position:static; margin:1rem 0 0; padding:.8rem 1rem; border:1px solid var(--border); border-radius:var(--r-sm); }
.wagrupos__extracao-topo { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:1rem; padding:.85rem 1rem; border:1px solid var(--border); border-radius:var(--r-lg); background:var(--panel-bg); }
.wagrupos__conta-ativa { display:flex; align-items:center; gap:.7rem; min-width:0; }
.wagrupos__conta-ativa-avatar { display:grid; place-items:center; overflow:hidden; flex:0 0 42px; width:42px; height:42px; border-radius:50%; background:linear-gradient(135deg,var(--accent),#25d366); color:#fff; font-weight:800; }
.wagrupos__conta-ativa-avatar img { width:100%; height:100%; object-fit:cover; }
.wagrupos__conta-ativa > span:last-child { display:grid; gap:.15rem; min-width:0; }
.wagrupos__conta-ativa strong,.wagrupos__conta-ativa small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.wagrupos__conta-ativa strong { color:var(--text); font-size:.82rem; }
.wagrupos__conta-ativa small { color:var(--text-muted); font-size:.68rem; }
.wagrupos__config-grid { display:grid; grid-template-columns:minmax(0,.9fr) minmax(380px,1.1fr); align-items:start; gap:1rem; }
.wagrupos__config-grid > .wagrupos__card { height:100%; min-height:560px; }
.wagrupos__grupos-card .wagrupos__grupos { grid-template-columns:repeat(2,minmax(0,1fr)); max-height:365px; }
.wagrupos select,.wagrupos input[type="search"],.wagrupos__importacao input[type="text"],#wag-tag { min-height:2.6rem; padding:.65rem .75rem; border:1px solid var(--border-strong); border-radius:var(--r-sm); outline:0; background:var(--bg); color:var(--text); font:inherit; }
.wagrupos select:focus,.wagrupos input:focus { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
.wagrupos__status { margin-top:.8rem; color:var(--text-muted); font-size:.8rem; }
.wagrupos > .wagrupos__status { margin:-.35rem 0 1rem; }
.wagrupos__qr { display:flex; align-items:center; gap:1rem; margin-top:1rem; padding:1rem; border:1px solid var(--border); border-radius:var(--r-sm); background:#fff; color:#161616; }
.wagrupos__qr img { width:210px; height:210px; object-fit:contain; }
.wagrupos__qr div { display:flex; flex-direction:column; gap:.4rem; }
.wagrupos__qr span { max-width:420px; color:#555; line-height:1.5; }
.wagrupos__ferramentas { display:flex; gap:.55rem; flex-wrap:wrap; margin-bottom:.85rem; }
.wagrupos__ferramentas input { flex:1 1 280px; }
.wagrupos__grupos { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.6rem; max-height:420px; overflow:auto; }
.wagrupos__grupo { display:flex; align-items:center; gap:.65rem; padding:.75rem; border:1px solid var(--border); border-radius:var(--r-sm); cursor:pointer; background:var(--elevado); }
.wagrupos__grupo:hover { border-color:var(--border-strong); }
.wagrupos__grupo div { min-width:0; }
.wagrupos__grupo strong,.wagrupos__grupo small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.wagrupos__grupo small { margin-top:.2rem; color:var(--text-muted); }
.wagrupos__rodape-grupos,.wagrupos__importar,.wagrupos__resumo { display:flex; align-items:center; justify-content:space-between; gap:.75rem; margin-top:1rem; color:var(--text-muted); font-size:.8rem; flex-wrap:wrap; }
.wagrupos__importacao { display:flex; align-items:flex-end; gap:1rem; flex-wrap:wrap; margin-bottom:1rem; }
.wagrupos__tags-card .wag-tag-picker { width:100%; border-color:var(--border); background:var(--panel-bg); box-shadow:none; }
.wagrupos__tags-card .wag-tag-picker .ig-add-tag input { color:var(--text); border:1px solid var(--border-strong); background:var(--bg); font:inherit; }
.wagrupos__autorizacao { display:flex; align-items:flex-start; gap:.5rem; flex:2 1 440px; color:var(--text-muted); font-size:.78rem; line-height:1.45; }
.wagrupos__importacao small { color:var(--text-fraco); font-size:.68rem; font-weight:400; }
.wagrupos__tags { display:flex; flex-wrap:wrap; gap:.35rem; margin-top:.15rem; }
.wagrupos__tag { padding:.25rem .5rem; border:1px solid var(--border); border-radius:var(--r-pill); background:transparent; color:var(--text-muted); font:inherit; font-size:.68rem; cursor:pointer; }
.wagrupos__tag:hover,.wagrupos__tag.is-ativa { border-color:var(--accent); color:var(--accent-texto); background:var(--accent-soft); }
.wagrupos__resumo input[type="search"] { min-width:260px; margin-left:auto; }
.wagrupos__tabela-wrap { max-height:480px; overflow:auto; border:1px solid var(--border); border-radius:var(--r-sm); }
.wagrupos__tabela { width:100%; border-collapse:collapse; font-size:.8rem; }
.wagrupos__tabela th { position:sticky; top:0; z-index:2; padding:.7rem; background:var(--elevado); color:var(--text-muted); text-align:left; }
.wagrupos__tabela td { padding:.7rem; border-top:1px solid var(--border); color:var(--text-muted); }
.wagrupos__contato { display:flex; align-items:center; gap:.6rem; min-width:190px; }
.wagrupos__contato > span:last-child { display:grid; gap:.12rem; min-width:0; }
.wagrupos__contato strong,.wagrupos__contato small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.wagrupos__contato strong { max-width:180px; color:var(--text); font-size:.76rem; }
.wagrupos__contato small { color:var(--text-fraco); font-size:.62rem; }
.wagrupos__participante-avatar { position:relative; display:grid; place-items:center; overflow:hidden; flex:0 0 38px; width:38px; height:38px; border-radius:50%; background:linear-gradient(135deg,#dbeafe,#dcfce7); color:#166534; font-size:.74rem; }
.wagrupos__participante-avatar img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.wagrupos__numero { color:var(--text); font-family:var(--font-mono); white-space:nowrap; }
.wagrupos__admin { padding:.2rem .4rem; border-radius:var(--r-pill); background:rgba(245,158,11,.12); color:#fbbf24; font-size:.68rem; }
.wagrupos__feedback { position:sticky; bottom:1rem; z-index:8; margin-top:1rem; padding:.8rem 1rem; border:1px solid var(--border); border-radius:var(--r-sm); background:var(--elevado); color:var(--text); box-shadow:var(--shadow-lg); }
.wagrupos__feedback.is-erro { border-color:rgba(239,68,68,.45); color:#f87171; }
.wacontatos__agenda-card .wagrupos__tabela-wrap { max-height:430px; }
.wacontatos__agenda-card .wagrupos__resumo { margin:.2rem 0 .8rem; }
.wacontatos__importar { display:grid; gap:.8rem; }
.wacontatos__importar .wagrupos__importar { margin-top:0; }
.wacontatos .ig-tags-search input,
.wacontatos .ig-tags-search input:hover,
.wacontatos .ig-tags-search input:focus,
.wacontatos .ig-tags-search input:focus-visible {
  border:0 !important;
  outline:0 !important;
  box-shadow:none !important;
}
.wacontatos .ig-add-tag input,
.wacontatos .ig-add-tag input:hover,
.wacontatos .ig-add-tag input:focus,
.wacontatos .ig-add-tag input:focus-visible {
  border:1px solid var(--border-strong) !important;
  outline:0 !important;
  box-shadow:none !important;
}
.waconversas__situacao { display:inline-flex; padding:.25rem .5rem; border-radius:var(--r-pill); background:rgba(34,197,94,.12); color:#15803d; font-size:.68rem; font-weight:700; }
.waconversas__situacao.is-arquivada { background:rgba(100,116,139,.14); color:#64748b; }
.waconversas #wcv-filtro { min-width:145px; }
.waconversas__historico-aviso { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin:.75rem 0; padding:.85rem; border:1px solid rgba(245,158,11,.42); border-radius:var(--r-sm); background:rgba(245,158,11,.08); }
.waconversas__historico-aviso > div { display:grid; gap:.2rem; }
.waconversas__historico-aviso strong { color:var(--text); font-size:.78rem; }
.waconversas__historico-aviso span { color:var(--text-muted); font-size:.7rem; line-height:1.4; }
@media (max-width:1150px) { .wagrupos__config-grid { grid-template-columns:1fr; }.wagrupos__config-grid > .wagrupos__card { min-height:0; } }
@media (max-width:1000px) { .wagrupos__grupos,.wagrupos__grupos-card .wagrupos__grupos { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:680px) {
  .wagrupos__header { flex-direction:column; }
  .wagrupos__contas-topo { align-items:stretch; flex-direction:column; }
  .wagrupos__contas-topo > div:last-child { display:grid; grid-template-columns:1fr; }
  .wagrupos__extracao-topo { align-items:stretch; flex-direction:column; }
  .wagrupos__grupos,.wagrupos__grupos-card .wagrupos__grupos { grid-template-columns:1fr; }
  .wagrupos__qr { flex-direction:column; text-align:center; }
  .wagrupos__qr img { width:180px; height:180px; }
  .wagrupos__resumo input[type="search"] { width:100%; min-width:0; }
}

/* source: css/transferencia.css */
/* ── Modal de Transferência entre Workspaces ──────────────────────────────── */

#modal-transferir {
  width: min(760px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
  padding: 0;
  overflow: hidden;
  box-sizing: border-box;
}

#modal-transferir .modal__form {
  max-height: calc(100dvh - 34px);
  overflow-y: auto;
  overflow-x: hidden;
  padding: 24px;
  box-sizing: border-box;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

#modal-transferir .modal__form::-webkit-scrollbar { width: 5px; }
#modal-transferir .modal__form::-webkit-scrollbar-track { background: transparent; }
#modal-transferir .modal__form::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); border-radius: 3px; }

/* ── Tabs ───────────────────────────────────────────────────────────── */
.transf-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 20px;
  padding: 4px;
  background: var(--panel-bg);
  border-radius: 12px;
  border: 1px solid var(--border);
}

.transf-tab {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 16px;
  background: transparent;
  border: none;
  border-radius: 8px;
  color: var(--text-muted);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.18s, color 0.18s, box-shadow 0.18s;
}

.transf-tab:hover {
  background: rgba(255,255,255,0.05);
  color: var(--text);
}

.transf-tab.is-ativo {
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 1px 3px rgba(0,0,0,0.25);
}

.transf-tab__qtd {
  background: var(--accent-soft);
  color: var(--accent-texto);
  font-size: 11px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 10px;
  min-width: 20px;
  text-align: center;
}

.transf-tab svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}

/* ── Paineis ─────────────────────────────────────────────────────────── */
.transf-painel {
  animation: transfFadeIn 0.22s ease;
  min-height: 280px;
}
.transf-painel[hidden] { display: none !important; }

@keyframes transfFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Barra de busca / filtros ────────────────────────────────────────── */
.transf-busca {
  display: flex;
  gap: 10px;
  margin-bottom: 14px;
  align-items: center;
  flex-wrap: wrap;
}

.transf-busca .campo__input {
  flex: 1;
  min-width: 160px;
}

.transf-todos {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--text-muted);
  cursor: pointer;
  white-space: nowrap;
  margin-left: auto;
}

.transf-todos input[type="checkbox"] {
  accent-color: var(--accent);
  width: 15px;
  height: 15px;
}

/* ── Lista de itens ─────────────────────────────────────────────────── */
.transf-lista {
  max-height: clamp(220px, 32vh, 320px);
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--panel-bg);
}

.transf-lista::-webkit-scrollbar { width: 4px; }
.transf-lista::-webkit-scrollbar-track { background: transparent; }
.transf-lista::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 2px; }

.transf-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background 0.15s;
}

.transf-item:last-child { border-bottom: none; }
.transf-item:hover { background: rgba(255,255,255,0.03); }
.transf-item.is-marcado { background: rgba(246, 196, 0, 0.08); }

.transf-item input[type="checkbox"] {
  accent-color: var(--accent);
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  cursor: pointer;
}

.transf-item__info {
  flex: 1;
  min-width: 0;
}

.transf-item__nome {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.transf-item__meta {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 2px;
}

.transf-item__selo {
  font-size: 11px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 6px;
  flex-shrink: 0;
}

.transf-item__selo--novo {
  background: rgba(59, 130, 246, 0.15);
  color: #60a5fa;
}

.transf-item__selo--ativo {
  background: rgba(61, 220, 132, 0.15);
  color: #34d399;
}

/* Vazio */
.transf-vazio {
  text-align: center;
  padding: 48px 24px;
  color: var(--text-muted);
  font-size: 13.5px;
}

.transf-vazio svg {
  width: 40px;
  height: 40px;
  margin: 0 auto 12px;
  opacity: 0.35;
}

/* ── Paginação ────────────────────────────────────────────────────────── */
.transf-paginacao {
  display: grid;
  grid-template-columns: 36px auto auto 36px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 14px;
  min-height: 36px;
}

.transf-paginacao button {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 34px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  font-size: 20px;
  line-height: 1;
  padding: 0;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

.transf-paginacao button:hover:not(:disabled) {
  background: var(--hover);
  border-color: var(--accent);
}

.transf-paginacao button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.transf-pagina-info {
  font-size: 12.5px;
  color: var(--text-muted);
  white-space: nowrap;
}

#transf-pagina-num {
  min-width: 52px;
  font-size: 12.5px;
  color: var(--text);
  text-align: center;
  white-space: nowrap;
}

/* ── Funil ────────────────────────────────────────────────────────────── */
.transf-funil-info {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 16px;
  margin-bottom: 14px;
  font-size: 13.5px;
  color: var(--text);
}

.transf-funil-info strong { color: var(--accent); }

.transf-lista-etapas {
  max-height: 260px;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--panel-bg);
}

.transf-etapa {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
}

.transf-etapa:last-child { border-bottom: none; }

.transf-etapa__icon {
  width: 32px;
  height: 32px;
  background: var(--accent-soft);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent-texto);
  flex-shrink: 0;
}

.transf-etapa__icon svg { width: 16px; height: 16px; }

.transf-etapa__info { flex: 1; }
.transf-etapa__nome { font-size: 13.5px; font-weight: 600; color: var(--text); }
.transf-etapa__chave { font-size: 11.5px; color: var(--text-muted); font-family: var(--font-mono); }

.transf-etapa__status {
  font-size: 11.5px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 6px;
}

.transf-etapa__status--nova {
  background: rgba(59, 130, 246, 0.15);
  color: #60a5fa;
}

.transf-etapa__status--existente {
  background: rgba(61, 220, 132, 0.15);
  color: #34d399;
}

/* ── Destino ─────────────────────────────────────────────────────────── */
.transf-destino {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}

.transf-destino .campo__label {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.transf-destino .campo__input {
  width: 100%;
}

/* ── Prévia ─────────────────────────────────────────────────────────── */
.transf-previa {
  margin-top: 18px;
  padding: 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  animation: transfFadeIn 0.22s ease;
}

.transf-previa[hidden] { display: none; }

.transf-previa__titulo {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.transf-previa__titulo svg {
  width: 16px;
  height: 16px;
  color: var(--accent);
}

.transf-previa__resumo {
  list-style: none;
  padding: 0;
  margin: 0;
}

.transf-previa__resumo li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text);
  padding: 5px 0;
}

.transf-previa__resumo li svg {
  width: 14px;
  height: 14px;
  color: var(--sucesso);
  flex-shrink: 0;
}

.transf-previa__conflitos {
  margin-top: 14px;
  padding: 14px;
  background: rgba(251, 191, 36, 0.08);
  border: 1px solid rgba(251, 191, 36, 0.3);
  border-radius: 8px;
}

.transf-previa__conflitos[hidden] { display: none; }

.transf-previa__conflitos strong {
  color: #fbbf24;
  font-size: 13px;
  display: block;
  margin-bottom: 8px;
}

.transf-previa__conflitos ul {
  list-style: disc;
  padding-left: 20px;
  margin: 0;
}

.transf-previa__conflitos ul li {
  font-size: 12.5px;
  color: #f59e0b;
  padding: 3px 0;
}

/* ── Erro ───────────────────────────────────────────────────────────── */
.transf-erro {
  margin-top: 12px;
  padding: 12px 14px;
  background: rgba(239, 68, 68, 0.12);
  border: 1px solid rgba(239, 68, 68, 0.3);
  border-radius: 8px;
  color: #f87171;
  font-size: 13px;
}

.transf-erro[hidden] { display: none; }

/* ── Ações ───────────────────────────────────────────────────────────── */
#modal-transferir .modal__acoes {
  position: sticky;
  z-index: 4;
  bottom: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 20px;
  margin-right: -24px;
  margin-bottom: -24px;
  margin-left: -24px;
  padding: 16px 24px 20px;
  border-top: 1px solid var(--border);
  background: color-mix(in srgb, var(--panel-bg) 96%, transparent);
  backdrop-filter: blur(12px);
  box-shadow: 0 -12px 24px -22px rgba(0, 0, 0, .9);
}

#modal-transferir .modal__acoes .btn {
  min-height: 40px;
  padding-inline: 16px;
  white-space: nowrap;
}

#transf-cancelar {
  background: transparent;
  border-color: var(--border-strong);
  color: var(--text-muted);
}

#transf-cancelar:hover {
  background: var(--panel-bg-hover);
  color: var(--text);
}

#transf-previa-btn {
  background: var(--accent-soft);
  border-color: rgba(246, 196, 0, .42);
  color: var(--accent-texto);
}

#transf-previa-btn:hover {
  background: rgba(246, 196, 0, .18);
  border-color: rgba(246, 196, 0, .68);
}

#transf-confirmar { display: none; }
#transf-confirmar.is-visible { display: inline-flex; }

#transf-previa-btn:disabled,
#transf-confirmar:disabled {
  opacity: .55;
  cursor: wait;
  transform: none;
}

/* ── Botão no header (legacy) ──────────────────────────────────────── */
.header__transferir-btn {
  display: none;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  background: rgba(246, 196, 0, 0.12);
  border: 1px solid rgba(246, 196, 0, 0.35);
  border-radius: 8px;
  color: var(--accent-texto);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.18s, border-color 0.18s;
}

.header__transferir-btn:hover {
  background: rgba(246, 196, 0, 0.22);
  border-color: rgba(246, 196, 0, 0.6);
}

.header__transferir-btn svg {
  width: 14px;
  height: 14px;
}

.header__transferir-btn.is-visible { display: flex; }

/* ── Ações do usuário: transferência junto do perfil ─────────────── */
.topbar__usuario-acoes {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-width: 0;
}

.topbar__transferir {
  display: none;
  align-items: center;
  justify-content: center;
  height: 36px;
  gap: 7px;
  padding: 0 13px 0 10px;
  background: rgba(16, 40, 59, 0.88);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  color: var(--text-muted);
  font: inherit;
  font-size: 12.5px;
  font-weight: 650;
  letter-spacing: .01em;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.18s, border-color 0.18s, color 0.18s, box-shadow 0.18s, transform 0.12s;
  flex-shrink: 0;
}

.topbar__transferir:hover {
  background: var(--panel-bg-hover);
  border-color: rgba(246, 196, 0, 0.38);
  color: var(--text);
  box-shadow: 0 7px 20px -12px rgba(246, 196, 0, 0.75);
  transform: translateY(-1px);
}

.topbar__transferir:active { transform: translateY(0); }
.topbar__transferir:focus-visible {
  outline: 2px solid var(--accent-ring);
  outline-offset: 2px;
}

.topbar__transferir svg {
  width: 16px;
  height: 16px;
  color: var(--accent-texto);
  flex: none;
}

.topbar__transferir.is-visible { display: flex; }

@media (max-width: 900px) {
  .topbar__usuario-acoes { margin-left: auto; }

  .topbar__transferir {
    width: 36px;
    padding: 0;
  }
  .topbar__transferir-texto { display: none; }
}

@media (max-width: 520px) {
  .topbar__ws-wrap { gap: 5px; min-width: 0; }
  .topbar__ws { min-width: 0; }
  .topbar__ws-nome { max-width: 112px; }

  #modal-transferir {
    width: calc(100vw - 16px);
    max-height: calc(100dvh - 16px);
  }

  #modal-transferir .modal__form {
    max-height: calc(100dvh - 18px);
    padding: 16px;
  }

  .transf-tabs { gap: 2px; }
  .transf-tab { gap: 5px; padding-inline: 8px; }

  .transf-paginacao {
    grid-template-columns: 34px auto auto 34px;
    gap: 6px;
  }

  #modal-transferir .modal__acoes {
    margin-right: -16px;
    margin-bottom: -16px;
    margin-left: -16px;
    padding: 12px 16px 16px;
  }

  #modal-transferir .modal__acoes .btn {
    flex: 1 1 auto;
    padding-inline: 12px;
  }
}

/* ── Opções de transferência ─────────────────────────────────────── */
.transf-opcoes {
  background: var(--panel-bg);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 14px 16px;
  margin: 12px 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.transf-opcoes__bloco {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.transf-opcoes__row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.transf-opcoes__label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--text);
  cursor: pointer;
  white-space: nowrap;
}

.transf-opcoes__label input[type="checkbox"],
.transf-opcoes__label input[type="radio"] {
  accent-color: var(--accent);
  width: 15px;
  height: 15px;
}

.transf-opcoes__hint {
  font-size: 12px;
  color: var(--text-fraco);
}

.transf-opcoes__bloco[hidden] {
  display: none;
}

/* ── Seletores W2G: checkboxes e radios ───────────────────────────── */
#modal-transferir input[type="checkbox"],
#modal-transferir input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  display: inline-grid;
  place-content: center;
  width: 18px;
  height: 18px;
  margin: 0;
  flex: 0 0 18px;
  border: 1px solid rgba(166, 193, 211, .42);
  background: rgba(7, 25, 40, .72);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .25);
  cursor: pointer;
  transition:
    background-color .16s ease,
    border-color .16s ease,
    box-shadow .16s ease,
    transform .12s ease;
}

#modal-transferir input[type="checkbox"] { border-radius: 7px; }
#modal-transferir input[type="radio"] { border-radius: 50%; }

#modal-transferir input[type="checkbox"]::before,
#modal-transferir input[type="radio"]::before {
  content: "";
  display: block;
  transform: scale(0);
  opacity: 0;
  transition: transform .16s cubic-bezier(.2, .8, .2, 1), opacity .12s ease;
}

#modal-transferir input[type="checkbox"]::before {
  width: 10px;
  height: 10px;
  background: #071a2a;
  clip-path: polygon(13% 45%, 0 59%, 39% 96%, 100% 20%, 84% 7%, 38% 68%);
}

#modal-transferir input[type="radio"]::before {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #071a2a;
}

#modal-transferir input[type="checkbox"]:hover,
#modal-transferir input[type="radio"]:hover {
  border-color: rgba(246, 196, 0, .72);
  background: rgba(246, 196, 0, .07);
}

#modal-transferir input[type="checkbox"]:active,
#modal-transferir input[type="radio"]:active {
  transform: scale(.92);
}

#modal-transferir input[type="checkbox"]:checked,
#modal-transferir input[type="radio"]:checked,
#modal-transferir input[type="checkbox"]:indeterminate {
  border-color: var(--accent);
  background: linear-gradient(145deg, #ffd21a, var(--accent-strong));
  box-shadow: 0 0 0 1px rgba(246, 196, 0, .08), 0 4px 12px -7px rgba(246, 196, 0, .9);
}

#modal-transferir input[type="checkbox"]:checked::before,
#modal-transferir input[type="radio"]:checked::before {
  transform: scale(1);
  opacity: 1;
}

#modal-transferir input[type="checkbox"]:indeterminate::before {
  width: 9px;
  height: 2px;
  border-radius: 2px;
  background: #071a2a;
  clip-path: none;
  transform: scale(1);
  opacity: 1;
}

#modal-transferir input[type="checkbox"]:focus-visible,
#modal-transferir input[type="radio"]:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-ring);
}

#modal-transferir input[type="checkbox"]:disabled,
#modal-transferir input[type="radio"]:disabled {
  opacity: .45;
  cursor: not-allowed;
}

@media (prefers-reduced-motion: reduce) {
  #modal-transferir input[type="checkbox"],
  #modal-transferir input[type="radio"],
  #modal-transferir input[type="checkbox"]::before,
  #modal-transferir input[type="radio"]::before {
    transition: none;
  }
}

/* ── Loading ────────────────────────────────────────────────────────── */
.transf-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 40px;
  color: var(--text-muted);
  font-size: 13.5px;
}

.transf-spinner {
  width: 20px;
  height: 20px;
  border: 2px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: transfSpin 0.7s linear infinite;
}

@keyframes transfSpin { to { transform: rotate(360deg); } }

/* source: css/clientes-fechados.css */
/* ── Card de fechamentos de clientes ─────────────────────────────── */
.dash__fechamentos-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.dash__fechamentos-titulo {
  font: 600 14px/1.2 var(--font-display, inherit);
  margin: 0;
  color: var(--text);
}

.dash__fechamentos-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.dash__fechamentos-acoes {
  display: flex;
  align-items: center;
  gap: 8px;
}

.dash__fechamentos-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}

.dash__fechamento-card {
  background: var(--elevado, rgba(255, 255, 255, 0.04));
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.dash__fechamento-card--qtd {
  border-left: 3px solid var(--serie-azul);
}
.dash__fechamento-card--valor {
  border-left: 3px solid var(--serie-verde);
}
.dash__fechamento-card--ticket {
  border-left: 3px solid var(--serie-ambar);
}
.dash__fechamento-card--mrr {
  border-left: 3px solid #8b5cf6;
}
.dash__fechamento-card--arr {
  border-left: 3px solid #22d3ee;
}

.dash__fechamento-label {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-fraco, #888);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.dash__fechamento-valor {
  font: 700 22px/1 var(--font-display, inherit);
  color: var(--text);
}

.dash__fechamento-ajuda {
  color: var(--text-fraco, #888);
  font-size: 10.5px;
  line-height: 1.3;
}

.dash__fechamento-var {
  font-size: 12px;
  font-weight: 600;
  margin-top: 2px;
}

.dash__fechamento-var.is-positiva {
  color: var(--serie-verde, #199e70);
}

.dash__fechamento-var.is-negativa {
  color: var(--accent, #f6c400);
}

.dash__fechamento-grafico {
  min-height: 90px;
}

/* ── Gráfico de barras dos fechamentos por dia ─────────────────── */
.clf-grafico {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 110px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}

.clf-grafico__col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 0;
}

.clf-grafico__barra {
  width: 100%;
  background: linear-gradient(180deg, var(--serie-verde, #199e70), rgba(25, 158, 112, 0.4));
  border-radius: 4px 4px 0 0;
  min-height: 4px;
}

.clf-grafico__qtd {
  font: 600 11px/1 var(--font-display, inherit);
  color: var(--text);
}

.clf-grafico__dia {
  font-size: 9.5px;
  color: var(--text-fraco, #888);
}

/* ── Modal de fechamento ────────────────────────────────────────── */
.clf-valores {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.clf-contato-selecionado {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 6px;
  padding: 6px 10px;
  background: rgba(57, 135, 229, 0.1);
  border: 1px solid rgba(57, 135, 229, 0.3);
  border-radius: 6px;
  color: var(--text);
  font-size: 13px;
}

.clf-contato-selecionado[hidden] {
  display: none;
}

.clf-contato-selecionado span {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.clf-contato-selecionado small {
  color: var(--text-fraco, #888);
  font-size: 11.5px;
}

.clf-contato-limpar {
  background: transparent;
  border: 0;
  color: var(--text-fraco, #888);
  font-size: 18px;
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
}

.clf-contato-limpar:hover {
  color: var(--accent);
}

.clf-contato-resultados {
  max-height: 200px;
  overflow-y: auto;
  background: var(--panel-bg, #1c1c22);
  border: 1px solid var(--border);
  border-radius: 6px;
  margin-top: 4px;
}

.clf-contato-resultados[hidden] {
  display: none;
}

.clf-contato-vazio {
  padding: 12px;
  color: var(--text-fraco, #888);
  font-size: 12.5px;
  text-align: center;
}

.clf-contato-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  padding: 8px 12px;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  gap: 2px;
}

.clf-contato-item:hover {
  background: rgba(57, 135, 229, 0.1);
}

.clf-contato-item__nome {
  font-size: 13.5px;
  font-weight: 500;
}

.clf-contato-item__numero {
  font-size: 11.5px;
  color: var(--text-fraco, #888);
}

.clf-contato-item__etapa {
  margin-top: 2px;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(57, 135, 229, 0.12);
  color: var(--serie-azul, #3987e5);
  font-size: 10.5px;
  font-weight: 600;
}

@media (max-width: 620px) {
  .clf-valores {
    grid-template-columns: 1fr;
  }

  .dash__fechamentos-head {
    align-items: flex-start;
    gap: 12px;
  }

  .dash__fechamentos-acoes {
    align-items: stretch;
    flex-direction: column-reverse;
  }
}

/* ── Lista para consulta e correção de fechamentos ─────────────── */
#modal-clientes-fechados-lista {
  width: min(980px, calc(100vw - 32px));
}

.clf-lista-modal {
  width: 100%;
  max-width: 100%;
}

.clf-lista-cabecalho {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.clf-lista-subtitulo {
  margin: 5px 0 0;
  color: var(--text-fraco, #888);
  font-size: 13px;
}

.clf-lista-fechar {
  border: 0;
  background: transparent;
  color: var(--text-fraco, #888);
  cursor: pointer;
  font-size: 28px;
  line-height: 1;
}

.clf-lista-status {
  padding: 26px;
  color: var(--text-fraco, #888);
  text-align: center;
}

.clf-lista-status[hidden] {
  display: none;
}

.clf-lista {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: min(62vh, 560px);
  overflow-y: auto;
  overflow-x: hidden;
}

.clf-lista-item {
  display: grid;
  grid-template-columns: minmax(160px, 1.35fr) repeat(2, minmax(115px, .75fr)) minmax(110px, .65fr) auto;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--elevado, rgba(255, 255, 255, .04));
}

.clf-lista-item__cliente,
.clf-lista-item__valor {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.clf-lista-item__cliente strong {
  overflow: hidden;
  color: var(--text);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.clf-lista-item small,
.clf-lista-item__rotulo {
  color: var(--text-fraco, #888);
  font-size: 11px;
}

.clf-lista-item__valor strong {
  color: var(--text);
  font-size: 13px;
}

.clf-lista-item__acoes {
  display: flex;
  gap: 6px;
}

.clf-lista-editar,
.clf-lista-excluir {
  border: 1px solid var(--border);
  border-radius: 7px;
  padding: 7px 10px;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  font: 600 12px/1 inherit;
}

.clf-lista-editar:hover {
  border-color: var(--serie-azul, #3987e5);
  color: var(--serie-azul, #3987e5);
}

.clf-lista-excluir:hover {
  border-color: #ef4444;
  color: #ef4444;
}

@media (max-width: 900px) {
  .clf-lista-item {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .clf-lista-item__cliente,
  .clf-lista-item__acoes {
    grid-column: 1 / -1;
  }

  .clf-lista-item__acoes {
    justify-content: flex-end;
  }
}

/* ── Variação dos KPIs ────────────────────────────────────────── */
.dash-card__variacao {
  font-size: 11.5px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 10px;
  display: inline-block;
}

.dash-card__variacao.is-positiva {
  color: var(--serie-verde, #199e70);
  background: rgba(25, 158, 112, 0.12);
}

.dash-card__variacao.is-negativa {
  color: var(--accent, #f6c400);
  background: rgba(246, 196, 0, 0.12);
}

.dash-card__variacao[hidden] {
  display: none;
}