/* ==========================================================================
   prospecting.ally — sistema visual "Protocolo v3"
   ==========================================================================

   Escuro por padrao. A referencia e o funil do pipefacil (decisao do Victor,
   01/09/2026): mesa quase preta com um fio de azul, cartoes um degrau acima,
   linhas de luz a 7-9%, e o dado em mono. O tema claro (Protocolo v2) ficou
   inteiro, como opcao por conta - bloco [data-tema="claro"] no fim desta
   secao.

   REGRA DA CASA: cor de componente NUNCA e escrita na mao; sai de um token
   daqui. E um token so pode aparecer em dois lugares - no :root (escuro) e no
   bloco claro. Fora disso, um hex fixo e um bug do tema oposto esperando o
   primeiro clique no toggle.

   Derivados de marca invertem entre temas de proposito: no claro, texto de
   marca ESCURECE a cor da conta (contraste sobre branco); no escuro, CLAREIA.
   Os "soft" viram mistura com transparente, para sentar em qualquer
   superficie sem carregar fundo claro embutido.

   Tipografia: Public Sans (unica) · JetBrains Mono (dado de registro).

   Contraste no escuro (WCAG AA sobre --card #12141d):
     ink #e8ebf2 14,9 · muted #9aa3b5 6,6 · selo #d9a425 7,6 · ok #57c99b 8,6
     err #ef8b83 6,8 · brand-texto (mix 30% branco sobre #14795c) >= 4,6
   ========================================================================== */

:root {
  /* ----- marca (a conta sobrescreve estas duas no base.html) ----- */
  --brand: #14795c;
  --escuro: #0a2b22;

  /* ----- derivados de marca: seguem a cor da conta, versao ESCURO ----- */
  --brand-forte: color-mix(in oklab, var(--brand), white 12%);
  --brand-texto: color-mix(in oklab, var(--brand), white 32%);
  --brand-claro: color-mix(in oklab, var(--brand) 55%, white);
  --brand-soft:  color-mix(in srgb, var(--brand) 16%, transparent);
  --brand-25:    color-mix(in srgb, var(--brand) 8%, transparent);
  --brand-linha: color-mix(in srgb, var(--brand) 38%, transparent);
  --brand-anel:  color-mix(in srgb, var(--brand) 40%, transparent);

  /* ----- selo de latao ----- */
  --selo: #d9a425;
  --selo-vivo: #d9a425;
  --selo-soft: rgba(217, 164, 37, .10);
  --selo-soft-2: rgba(217, 164, 37, .15);
  --selo-linha: rgba(217, 164, 37, .38);
  --selo-ink: #e9cd8a;

  /* ----- superficies e tinta ----- */
  --bg: #0b0d14;
  --canvas: #07080d;
  --rail: #0e1119;
  --card: #12141d;
  --ink: #e8ebf2;
  --ink-2: #c2c8d6;
  --muted: #9aa3b5;
  --muted-legenda: #8791a4;
  --muted-2: #6e7889;
  --muted-3: #545e70;
  --line: rgba(255, 255, 255, .09);
  --line-soft: rgba(255, 255, 255, .06);
  --line-2: rgba(255, 255, 255, .08);
  --hover: rgba(255, 255, 255, .035);
  --hover-2: rgba(255, 255, 255, .07);

  /* ----- o casco: lateral, modo foco, ao vivo ----- */
  /* No escuro o casco e neutro (a mesa inteira ja e escura; um casco verde da
     conta viraria mancha). No claro ele volta a ser a cor escura da conta. */
  --chrome: #0d1017;
  --escuro-texto: #97a2b8;
  --escuro-muted: #6e7a90;
  --escuro-forte: #d5dbe7;
  --escuro-linha: rgba(255, 255, 255, .08);
  --escuro-hover: rgba(255, 255, 255, .05);
  --escuro-ativo: rgba(255, 255, 255, .09);

  /* ----- estados ----- */
  --ok: #57c99b;        --ok-soft: rgba(46, 164, 110, .14);  --ok-linha: rgba(87, 201, 155, .35);
  --ok-vivo: #57c99b;   --ok-ink: #8fdcbb;
  --warn: #e6a23c;      --warn-soft: rgba(230, 162, 60, .13); --warn-linha: rgba(230, 162, 60, .35);
  --err: #ef8b83;       --err-soft: rgba(179, 38, 30, .16);   --err-linha: rgba(239, 139, 131, .35);
  --err-texto: #f0a9a3;

  /* ----- acentos do funil (borda das colunas, como no pipefacil) ----- */
  --acento-azul: #5c8dff;
  --acento-ambar: #e8a33d;
  --acento-ciano: #3ec6d8;
  --acento-roxo: #9a7bff;
  --acento-cinza: #5b667a;

  /* ----- forma ----- */
  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 16px;

  --sombra: 0 1px 2px rgba(0, 0, 0, .35);
  --sombra-2: 0 1px 2px rgba(0, 0, 0, .35), 0 8px 24px -12px rgba(0, 0, 0, .5);
  --sombra-3: 0 1px 3px rgba(0, 0, 0, .4), 0 18px 44px -20px rgba(0, 0, 0, .6);

  --f-display: "Public Sans", ui-sans-serif, system-ui, sans-serif;
  --f-corpo: "Public Sans", ui-sans-serif, -apple-system, "Segoe UI", Roboto, system-ui, sans-serif;
  --f-dados: "JetBrains Mono", ui-monospace, "Cascadia Code", Consolas, monospace;

  --lateral: 224px;
  --ease: cubic-bezier(.22, 1, .36, 1);

  color-scheme: dark;
}

/* --------------------------------------------------------------------------
   Tema claro — o Protocolo v2 inteiro, guardado como opcao por conta.
   Configuracoes -> Marca -> Tema grava marca_tema e o base.html poe o
   data-tema aqui. Os derivados de marca voltam a escurecer (contraste sobre
   branco); selo de texto volta ao latao escuro AA (#8f5f00).
   -------------------------------------------------------------------------- */
[data-tema="claro"] {
  --brand-forte: color-mix(in oklab, var(--brand), black 18%);
  --brand-texto: color-mix(in oklab, var(--brand), black 10%);
  --brand-claro: color-mix(in oklab, var(--brand) 42%, white);
  --brand-soft:  color-mix(in oklab, var(--brand) 9%, white);
  --brand-25:    color-mix(in oklab, var(--brand) 4.5%, white);
  --brand-linha: color-mix(in oklab, var(--brand) 24%, white);
  --brand-anel:  color-mix(in srgb, var(--brand) 28%, transparent);

  --selo: #8f5f00;
  --selo-soft: #fbf7ea;
  --selo-soft-2: #fbf3e0;
  --selo-linha: #e8d3a2;
  --selo-ink: #5c4e2a;

  --bg: #ffffff;
  --canvas: #eff1ef;
  --rail: #fafbfa;
  --card: #ffffff;
  --ink: #111a16;
  --ink-2: #3f4e47;
  --muted: #5f6e67;
  --muted-legenda: #6b7a73;
  --muted-2: #8a968f;
  --muted-3: #a5afa9;
  --line: #dde3df;
  --line-soft: #edf0ee;
  --line-2: #e7ebe8;
  --hover: #f7f9f8;
  --hover-2: #f1f4f1;

  --chrome: var(--escuro);
  --escuro-texto: #9fbcaf;
  --escuro-muted: #7fa294;
  --escuro-forte: #cfe0d8;
  --escuro-linha: rgba(255, 255, 255, .10);
  --escuro-hover: rgba(255, 255, 255, .09);
  --escuro-ativo: rgba(255, 255, 255, .11);

  --ok: #0f6a33;        --ok-soft: #e3f0ea;      --ok-linha: #bfe3cc;
  --ok-ink: #2f4a3f;
  --warn: #8a4200;      --warn-soft: #faf0e4;    --warn-linha: #ecd6b6;
  --err: #b3261e;       --err-soft: #fbedec;     --err-linha: #f3c9c5;
  --err-texto: #8a2a24;

  --acento-cinza: #b3bcc7;

  --sombra: 0 1px 2px rgba(15, 28, 26, .05);
  --sombra-2: 0 1px 2px rgba(15, 28, 26, .05), 0 8px 24px -12px rgba(15, 28, 26, .10);
  --sombra-3: 0 1px 3px rgba(15, 28, 26, .06), 0 18px 44px -20px rgba(15, 28, 26, .18);

  color-scheme: light;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--ink);
  font: 14.5px/1.6 var(--f-corpo);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: var(--brand-texto); text-underline-offset: 2px; }
a:hover { color: var(--ink); }

::selection { background: color-mix(in srgb, var(--brand) 30%, transparent); }

/* ==========================================================================
   Estrutura: lateral fixa + área de conteúdo
   ========================================================================== */

.app { display: grid; grid-template-columns: var(--lateral) minmax(0, 1fr); min-height: 100vh; }

/* ----- a mesa de comando (menu lateral) ----- */
/*
   Estrutura do pipefacil: Modo foco encaixotado no topo, tres grupos com
   titulo em caixa alta (Principal / Prospeccao / Ferramentas), o resto num
   "Mais" recolhido, e o chip do usuario com papel embaixo. A secao
   Prospeccao existe porque gerar lista e o que os concorrentes NAO tem -
   "Gerar lista" e o unico item do menu pintado com a cor da marca.
*/
.lateral {
  position: sticky; top: 0; align-self: start;
  height: 100vh; display: flex; flex-direction: column;
  padding: 18px 12px 14px;
  background: var(--chrome);
  border-right: 1px solid var(--line-soft);
  color: var(--escuro-forte);
  z-index: 20;
  overflow-y: auto;
}

.marca-lateral {
  display: flex; align-items: center; gap: 9px;
  padding: 0 8px 16px; text-decoration: none; flex: none;
}
.marca-lateral img { display: block; height: 20px; width: auto; }
.marca-lateral .glifo {
  width: 22px; height: 22px; flex: none;
  border-radius: 6px; background: var(--selo-vivo);
}
.marca-lateral .produto {
  font-size: 14px; font-weight: 600; color: var(--ink); letter-spacing: -.01em;
}

/* O modo, encaixotado. Neutro de proposito: e um botao de ferramenta, nao um
   alarme - o numero ao lado e que diz se ha trabalho. */
.modo-foco {
  display: flex; align-items: center; gap: 10px; flex: none;
  margin: 0 2px 14px; padding: 10px 12px; border-radius: 10px;
  background: var(--escuro-hover);
  border: 1px solid var(--escuro-linha);
  color: var(--escuro-forte); font-size: 13px; font-weight: 600;
  text-decoration: none;
  transition: background .16s var(--ease), border-color .16s var(--ease);
}
.modo-foco:hover, .modo-foco.ativa {
  background: var(--escuro-ativo); color: var(--ink);
  border-color: var(--line);
}
.modo-foco svg { width: 15px; height: 15px; flex: none; color: var(--selo-vivo); }
.modo-foco .conta {
  margin-left: auto;
  font-family: var(--f-dados); font-size: 11px; font-weight: 400;
  color: var(--selo-vivo);
}

.menu { display: flex; flex-direction: column; gap: 1px; }
.menu-titulo {
  font-size: 10px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .12em; color: var(--escuro-muted); padding: 16px 10px 6px;
}
.menu a {
  position: relative;
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: 8px;
  color: var(--escuro-texto); text-decoration: none;
  font-size: 13px; font-weight: 500;
  transition: background .16s var(--ease), color .16s var(--ease);
}
.menu a svg { width: 16px; height: 16px; flex: none; opacity: .8; }
.menu a:hover { background: var(--escuro-hover); color: var(--ink); }
.menu a.ativa { background: var(--escuro-ativo); color: var(--ink); font-weight: 600; }
.menu a.ativa svg { opacity: 1; color: var(--brand-texto); }
/* O risco: marcador do item ativo, na cor da marca. */
.menu a.ativa::before {
  content: ""; position: absolute; left: -12px; top: 50%;
  width: 3px; height: 18px; margin-top: -9px;
  background: var(--brand-texto); border-radius: 0 3px 3px 0;
}

.menu a .conta {
  margin-left: auto;
  font-family: var(--f-dados); font-size: 11px; font-weight: 400;
  color: var(--selo-vivo);
}
.menu a .conta.selo {
  color: var(--selo-vivo);
  border: 1px solid var(--selo-linha); border-radius: 20px; padding: 0 7px;
}
.menu a .ponto-vivo {
  margin-left: auto; width: 7px; height: 7px; flex: none;
  border-radius: 50%; background: var(--ok-vivo);
}

/* "Gerar lista": o unico item com a cor da casa. E o diferencial - merece o
   unico destaque permanente do menu. */
.menu a.menu-gerar {
  color: var(--brand-claro);
  background: var(--brand-25);
  border: 1px solid var(--brand-linha);
  font-weight: 600; margin: 2px 0;
}
.menu a.menu-gerar:hover { background: var(--brand-soft); color: var(--brand-claro); }
.menu a.menu-gerar svg { color: var(--brand-claro); opacity: 1; }

/* ----- pe da lateral ----- */
.lateral-pe {
  margin-top: auto; display: flex; flex-direction: column; gap: 12px;
  padding-top: 16px; flex: none;
}

.menu-mais { font-size: 13px; }
.menu-mais > summary {
  list-style: none; cursor: pointer;
  padding: 6px 10px; border-radius: 8px;
  color: var(--escuro-muted); font-size: 12px; font-weight: 500;
  transition: background .16s var(--ease), color .16s var(--ease);
}
.menu-mais > summary::-webkit-details-marker { display: none; }
.menu-mais > summary::after {
  content: "⌄"; float: right; line-height: 1; transform: translateY(-2px);
}
.menu-mais[open] > summary::after { content: "⌃"; transform: translateY(3px); }
.menu-mais > summary:hover { background: var(--escuro-hover); color: var(--escuro-forte); }
.menu-mais .menu { margin-top: 2px; }
.menu-mais .menu a { padding: 6px 10px; font-size: 12.5px; }

.cota { padding: 0 10px; }
.cota-linha {
  display: flex; align-items: baseline; justify-content: space-between;
  font-size: 11px; color: var(--escuro-muted); margin-bottom: 6px;
}
.cota-linha b { font-weight: 400; font-size: 11px; color: var(--escuro-forte); }
.cota-linha.creditos { margin: 10px 0 0; }
.cota-linha.creditos b { color: var(--selo-vivo); }
.cota-barra {
  height: 3px; border-radius: 2px; overflow: hidden;
  background: var(--escuro-ativo);
}
.cota-barra i {
  display: block; height: 100%; border-radius: 2px;
  background: var(--ok-vivo);
  transition: width .6s var(--ease);
}

.lateral .usuario {
  display: flex; align-items: center; gap: 4px;
  border-top: 1px solid var(--escuro-linha); padding-top: 10px;
}
.lateral .usuario-chip {
  flex: 1; min-width: 0;
  display: flex; align-items: center; gap: 9px;
  padding: 7px 8px; border-radius: 9px; text-decoration: none;
  transition: background .16s var(--ease);
}
.lateral .usuario-chip:hover { background: var(--escuro-hover); }
.lateral .usuario-chip .avatar {
  width: 28px; height: 28px; flex: none; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--brand-soft);
  color: var(--brand-claro); font-size: 10.5px; font-weight: 600;
}
.lateral .usuario-texto { min-width: 0; display: flex; flex-direction: column; }
.lateral .usuario-nome {
  color: var(--ink); font-size: 12.5px; font-weight: 600; line-height: 1.25;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lateral .usuario-papel {
  color: var(--escuro-muted); font-size: 10.5px; line-height: 1.3;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lateral .usuario button.fantasma {
  color: var(--escuro-muted); border-color: transparent; background: transparent;
}
.lateral .usuario button.fantasma:hover { color: var(--ink); background: var(--escuro-hover); }

/* ----- área de conteúdo ----- */
.conteudo { min-width: 0; display: flex; flex-direction: column; }

.topbar {
  position: sticky; top: 0; z-index: 15;
  display: flex; align-items: center; gap: 16px;
  padding: 12px 32px;
  background: color-mix(in srgb, var(--bg) 78%, transparent);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  backdrop-filter: blur(12px) saturate(140%);
  border-bottom: 1px solid var(--line-soft);
}
.topbar .titulo { min-width: 0; }
.topbar .titulo h1 {
  font-family: var(--f-display);
  font-size: 17px; font-weight: 600; margin: 0; letter-spacing: -.01em;
}
.topbar .titulo p {
  margin: 0; font-size: 12.5px; color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.topbar .direita { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.topbar .direita .btn, .topbar .direita button { white-space: nowrap; flex: none; }

.pagina { padding: 26px 32px 88px; max-width: 1320px; }
/* As telas redesenhadas trazem o proprio titulo e usam a largura toda: o
   respiro de 44px do design so fecha se nada estiver segurando a coluna. */
.pagina-larga { padding: clamp(20px, 3.2vw, 44px) clamp(18px, 3.2vw, 44px) 48px; max-width: none; }
/* Telas de painel duplo gerenciam o proprio espacamento e precisam da altura
   inteira. Duas variantes, porque o comportamento de rolagem difere:

   .pagina-rail   a pagina inteira rola junto (Inicio, wizard, agente)
   .pagina-cheia  a moldura fica presa e cada painel rola por dentro
                  (Conversas) - senao a lista de conversas empurra a thread
                  para fora da tela ao inves de rolar sozinha. */
.pagina-rail { padding: 0; max-width: none; flex: 1; display: flex; min-height: 0; }
.pagina-cheia { padding: 0; max-width: none; flex: 1; display: flex; min-height: 0; overflow: hidden; }
.conteudo:has(> .pagina-cheia) { height: 100vh; overflow: hidden; }
.pagina-rail > *, .pagina-cheia > * { animation: none; }
@media (max-width: 1100px) {
  .pagina, .topbar { padding-left: 20px; padding-right: 20px; }
  .pagina-larga { padding-left: 24px; padding-right: 24px; }
}

/* Entrada da página: sobe e revela, escalonado. */
.pagina > * { animation: sobe .4s var(--ease) both; }
.pagina > *:nth-child(1) { animation-delay: .02s }
.pagina > *:nth-child(2) { animation-delay: .05s }
.pagina > *:nth-child(3) { animation-delay: .08s }
.pagina > *:nth-child(4) { animation-delay: .11s }
.pagina > *:nth-child(n+5) { animation-delay: .14s }
@keyframes sobe { from { opacity: 0; transform: translateY(7px) } }

/* O painel ao vivo se repinta a cada 1,2s — sem esta exceção, cada repinte
   refaria o fade e o operador leria número piscando. */
.pagina > #painel-envio { animation: none; }

/* ==========================================================================
   Tipografia
   ========================================================================== */

h1 {
  font-family: var(--f-display);
  font-size: 26px; font-weight: 600; margin: 0 0 7px;
  letter-spacing: -.015em; line-height: 1.2;
}
h2 {
  font-family: var(--f-display);
  font-size: 16px; font-weight: 600; margin: 0 0 14px; letter-spacing: -.008em;
}
h3 {
  font-size: 11px; font-weight: 600; margin: 0 0 10px; text-transform: uppercase;
  letter-spacing: .09em; color: var(--muted);
}
.sub { color: var(--muted); margin: 0 0 24px; font-size: 14px; max-width: 76ch; }
.gradiente { color: var(--brand-texto); }

.cabecalho {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: 20px;
}
.cabecalho .sub { margin-bottom: 0; }

/* Dado de registro: a assinatura tipográfica da plataforma. */
td.mono, .mono {
  font-family: var(--f-dados);
  font-size: 12.5px; font-variant-numeric: tabular-nums;
}
.num { font-family: var(--f-dados); font-size: .95em; font-variant-numeric: tabular-nums; }

/* ==========================================================================
   Cartões e grades
   ========================================================================== */

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 20px 22px; margin-bottom: 18px;
  box-shadow: var(--sombra);
  transition: box-shadow .24s var(--ease), transform .24s var(--ease),
              border-color .24s var(--ease);
}
.card.solido { background: var(--card); }
.card.compacto { padding: 14px 16px; }
.card > :last-child { margin-bottom: 0; }

a.card, .card.clicavel { display: block; text-decoration: none; color: inherit; }
a.card:hover, .card.clicavel:hover {
  box-shadow: var(--sombra-2); transform: translateY(-2px);
  border-color: color-mix(in oklab, var(--line), var(--brand) 24%);
}

.card-topo { display: flex; align-items: center; gap: 10px; margin-bottom: 15px; }
.card-topo h2 { margin: 0; }
.card-topo .direita { margin-left: auto; display: flex; gap: 8px; align-items: center; }

.grid { display: grid; gap: 18px; }
.grid.lado { grid-template-columns: 300px 1fr; align-items: start; }
.grid.duas { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }
@media (max-width: 980px) { .grid.lado { grid-template-columns: 1fr; } }

/* ==========================================================================
   Números — o carimbo
   ==========================================================================
   Número grande em mono de registro, rótulo pequeno em caixa alta. O traço
   à esquerda é o fio de tinta do carimbo; no destaque ele vira latão. */

.kpis {
  display: grid; gap: 12px; margin-bottom: 20px;
  grid-template-columns: repeat(auto-fit, minmax(152px, 1fr));
}
.kpi {
  position: relative;
  background: var(--card);
  border: 1px solid var(--line);
  border-left: 3px solid var(--brand-claro);
  border-radius: var(--radius-sm) var(--radius) var(--radius) var(--radius-sm);
  padding: 13px 15px 11px;
  box-shadow: var(--sombra);
}
.kpi b {
  display: block;
  font-family: var(--f-dados);
  font-size: 23px; font-weight: 600; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums; line-height: 1.2;
}
.kpi span {
  color: var(--muted); font-size: 10.5px; text-transform: uppercase;
  letter-spacing: .08em; font-weight: 600;
}
.kpi.destaque { border-left-color: var(--selo-vivo); background: var(--card); }
.kpi.destaque b { color: var(--selo); }
.kpi .kpi-icone {
  position: absolute; right: 12px; top: 12px;
  width: 15px; height: 15px; color: var(--brand); opacity: .45;
}

/* ==========================================================================
   Formulários
   ========================================================================== */

label { display: block; font-size: 12.5px; font-weight: 600; margin: 14px 0 5px;
        color: var(--ink-2); letter-spacing: -.005em; }
label:first-of-type { margin-top: 0; }
label.linha { display: flex; align-items: center; gap: 9px; font-weight: 400;
              margin: 9px 0; cursor: pointer; color: var(--ink); font-size: 13.5px; }
label.linha input { margin: 0; accent-color: var(--brand); width: 15px; height: 15px; }

input[type=text], input[type=number], input[type=email], input[type=search],
input[type=password], input[type=url], select, textarea {
  width: 100%; padding: 9px 12px;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  font: inherit; background: var(--card); color: var(--ink);
  transition: border-color .16s var(--ease), box-shadow .16s var(--ease);
}
textarea { resize: vertical; min-height: 130px; font-size: 13.5px; line-height: 1.65; }
input::placeholder, textarea::placeholder { color: var(--muted-3); }
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-anel);
}
select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%235d6c68' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 11px center;
  padding-right: 34px;
}

/* ==========================================================================
   Botões
   ========================================================================== */

/* O botao do design nao tem borda nem sombra: e um retangulo de tinta. A
   altura fixa (36 no cabecalho, 42/44 na acao grande) e o que alinha o botao
   com o titulo ao lado dele sem depender do line-height do texto. */
button, .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  height: 36px; padding: 0 16px; border-radius: var(--radius-sm);
  border: 1px solid transparent;
  background: var(--brand);
  color: #fff; font: inherit; font-size: 13.5px; font-weight: 600;
  letter-spacing: -.005em;
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background .16s var(--ease), box-shadow .2s var(--ease),
              transform .16s var(--ease), border-color .16s var(--ease),
              color .16s var(--ease);
}
.btn.grande, button.grande { height: 42px; padding: 0 22px; border-radius: 9px; font-size: 14px; }
.btn.enorme, button.enorme { height: 44px; padding: 0 22px; border-radius: 10px; font-size: 14px; }
.btn.enorme.sec, button.enorme.sec { padding: 0 16px; font-size: 13.5px; }
button svg, .btn svg { width: 15px; height: 15px; flex: none; }
button:hover, .btn:hover { background: var(--brand-forte); color: #fff; }
button:active, .btn:active { transform: translateY(1px); }
button:focus-visible, .btn:focus-visible {
  outline: none; box-shadow: 0 0 0 3px var(--brand-anel);
}
button[disabled], .btn[disabled] { opacity: .55; pointer-events: none; }

button.sec, .btn.sec {
  background: var(--card); color: var(--muted);
  border-color: var(--line); font-weight: 400;
}
button.sec:hover, .btn.sec:hover { background: var(--hover-2); color: var(--ink-2); }

/* Acao que gasta credito: o latao avisa antes do clique. */
button.selo, .btn.selo {
  height: 40px; padding: 0 16px; border-radius: 9px;
  background: var(--selo-soft); color: var(--selo);
  border-color: var(--selo-vivo); font-weight: 600;
}
button.selo:hover, .btn.selo:hover { background: var(--selo-soft-2); color: var(--selo); }
button.selo .custo, .btn.selo .custo {
  font-family: var(--f-dados); font-size: 11.5px; font-weight: 500; color: var(--selo);
}
button.fantasma, .btn.fantasma {
  background: transparent; border-color: transparent; color: var(--muted);
  box-shadow: none; font-weight: 500;
}
button.fantasma:hover, .btn.fantasma:hover {
  background: var(--hover); color: var(--ink); box-shadow: none;
}
button.perigo {
  background: var(--card); color: var(--err);
  border-color: var(--err-linha); box-shadow: var(--sombra);
}
button.perigo:hover { background: var(--err-soft); border-color: var(--err-linha); color: var(--err); }
button.mini, .btn.mini { height: 30px; padding: 0 11px; font-size: 12.5px; font-weight: 500; }
.acoes { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 18px; }

/* ==========================================================================
   Tabelas
   ========================================================================== */

table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
th {
  text-align: left; font-size: 10.5px; text-transform: uppercase;
  letter-spacing: .08em; color: var(--muted); font-weight: 600;
  padding: 8px 12px; border-bottom: 1px solid var(--line); white-space: nowrap;
}
td { padding: 10px 12px; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
tbody tr { transition: background .14s var(--ease); }
tbody tr:hover td { background: var(--brand-25); }
tr:last-child td { border-bottom: 0; }
.tabela-rolagem { overflow-x: auto; margin: 0 -22px -20px; padding: 0 22px 6px; }

/* ==========================================================================
   Etiquetas, avisos e miudezas
   ========================================================================== */

.tag {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 2px 9px; border-radius: 20px;
  font-size: 11.5px; font-weight: 600; border: 1px solid transparent;
  white-space: nowrap; letter-spacing: -.005em;
}
.tag.email, .tag.whatsapp { background: var(--line-soft); color: var(--ink-2); }
.tag.email::before, .tag.whatsapp::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--muted);
}
/* Verde do WhatsApp: marca DELES, não nossa — é o que identifica o canal. */
.tag.whatsapp::before { background: #25d366; }
.tag.ok { background: var(--ok-soft); color: var(--ok); border-color: var(--ok-linha); }
.tag.aviso { background: var(--warn-soft); color: var(--warn); border-color: var(--warn-linha); }
.tag.erro { background: var(--err-soft); color: var(--err); border-color: var(--err-linha); }
.tag.neutra { background: var(--line-soft); color: var(--muted); }
.tag.marca { background: var(--brand-soft); color: var(--brand-texto); border-color: var(--brand-linha); }
.tag.selo { background: var(--selo-soft); color: var(--selo); border-color: var(--selo-linha); }

.alerta {
  border-radius: var(--radius); padding: 13px 16px; margin: 14px 0;
  font-size: 13.5px; border: 1px solid; line-height: 1.6;
}
.alerta.ok { background: var(--ok-soft); border-color: var(--ok-linha); color: var(--ok); }
.alerta.aviso { background: var(--warn-soft); border-color: var(--warn-linha); color: var(--warn); }
.alerta.erro { background: var(--err-soft); border-color: var(--err-linha); color: var(--err-texto); }
.alerta.info { background: var(--brand-soft); border-color: var(--brand-linha); color: var(--brand-texto); }
.alerta p:last-child { margin-bottom: 0; }
.alerta p:first-child { margin-top: 0; }

.dica { color: var(--muted); font-size: 12.5px; margin-top: 8px; line-height: 1.55; }
.resumo-2 {
  margin: 2px 0 0; display: -webkit-box; -webkit-line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden;
}
.paginacao { display: flex; gap: 10px; align-items: center; justify-content: center;
             margin-top: 20px; color: var(--muted); font-size: 13.5px; }
.vazio { text-align: center; color: var(--muted); padding: 48px 20px; }
code {
  font-family: var(--f-dados); font-size: .88em;
  background: color-mix(in srgb, var(--ink) 6%, transparent);
  padding: 1.5px 5px; border-radius: 5px;
}

.chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 2px; }
.chip {
  font-family: var(--f-dados); font-size: 11.5px;
  background: var(--card); border: 1px solid var(--line);
  border-radius: 7px; padding: 3px 9px; cursor: pointer; color: var(--ink-2);
  transition: background .14s var(--ease), border-color .14s var(--ease),
              color .14s var(--ease);
}
.chip:hover {
  background: var(--brand-soft); border-color: var(--brand-linha);
  color: var(--brand-texto);
}

/* Explicador recolhido: o "como funciona" de uma tela nunca disputa espaço
   com o trabalho dela. Um resumo de uma linha; abre quem precisa. */
.como-funciona { margin-top: 20px; }
.como-funciona > summary {
  cursor: pointer; list-style: none;
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12.5px; color: var(--muted); font-weight: 550;
  padding: 6px 10px; border-radius: var(--radius-sm);
}
.como-funciona > summary::-webkit-details-marker { display: none; }
.como-funciona > summary::before { content: "?"; display: grid; place-items: center;
  width: 17px; height: 17px; border-radius: 50%; flex: none;
  border: 1px solid var(--line); font-size: 11px; font-weight: 600; }
.como-funciona > summary:hover { background: var(--hover); color: var(--ink-2); }
.como-funciona[open] > summary { color: var(--ink-2); }
.como-funciona .corpo-explica {
  margin-top: 10px; padding: 16px 18px;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); animation: sobe .3s var(--ease) both;
}

/* Barra de filtros: uma linha horizontal, campos lado a lado, sem card alto. */
.toolbar {
  display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 12px 14px; margin-bottom: 16px;
}
.toolbar > div { min-width: 140px; }
.toolbar > div.cresce { flex: 1; min-width: 220px; }
.toolbar label { margin: 0 0 4px; font-size: 11px; text-transform: uppercase;
                 letter-spacing: .07em; color: var(--muted); }
.toolbar select, .toolbar input { margin: 0; }
.toolbar label.linha { text-transform: none; letter-spacing: 0; font-size: 13px;
                       align-self: center; margin: 0; padding-bottom: 8px; }

/* ==========================================================================
   Passos da cadência
   ========================================================================== */

.passo {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius); margin-bottom: 10px; overflow: hidden;
  box-shadow: var(--sombra);
}
.passo > summary {
  padding: 13px 16px; cursor: pointer; display: flex; align-items: center;
  gap: 12px; list-style: none; font-weight: 550;
  transition: background .14s var(--ease);
}
.passo > summary::-webkit-details-marker { display: none; }
.passo > summary:hover { background: var(--brand-25); }
.passo[open] > summary { border-bottom: 1px solid var(--line-soft); }
.passo[open] .corpo { animation: sobe .3s var(--ease) both; }
.passo .corpo { padding: 16px; }
.dia {
  font-family: var(--f-dados);
  background: var(--ink); color: #fff; border-radius: 6px; font-size: 10.5px;
  font-weight: 600; padding: 3px 9px; white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.passo.ramo .dia { background: var(--warn); }
.passo.acompanhamento {
  margin-left: 26px; border-left: 2px solid var(--brand-linha);
  border-top-left-radius: 4px; border-bottom-left-radius: 4px;
}
.passo.acompanhamento .dia { background: #25d366; color: #06340f; }
.resumo-copy { color: var(--muted); font-weight: 400; overflow: hidden;
               text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.trilho { position: relative; padding-left: 4px; }

.previa {
  background: var(--brand-25);
  border: 1px solid var(--line-soft); border-radius: var(--radius-sm);
  padding: 16px; white-space: pre-wrap; font-size: 13.5px; line-height: 1.68;
}
.previa .cab { border-bottom: 1px solid var(--line-soft); padding-bottom: 10px;
               margin-bottom: 12px; white-space: normal; }

/* ==========================================================================
   Carregamento — esqueleto, giro, pontinho, barra
   ========================================================================== */

@keyframes brilho { from { background-position: -180% 0 } to { background-position: 180% 0 } }
@keyframes gira { to { transform: rotate(360deg) } }
@keyframes pulsa { 0%, 100% { opacity: 1 } 50% { opacity: .35 } }
@keyframes pulso-anel {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--selo-vivo) 55%, transparent) }
  70% { box-shadow: 0 0 0 8px transparent }
  100% { box-shadow: 0 0 0 0 transparent }
}
@keyframes esteira { to { background-position: 26px 0 } }

.esqueleto {
  border-radius: 7px;
  background: linear-gradient(90deg, var(--line-soft) 25%, var(--hover-2) 50%, var(--line-soft) 75%);
  background-size: 220% 100%;
  animation: brilho 1.4s ease-in-out infinite;
}
.esqueleto.linha { height: 13px; margin: 9px 0; }
.esqueleto.linha.curta { width: 42% }
.esqueleto.linha.media { width: 68% }
.esqueleto.titulo { height: 22px; width: 34%; margin-bottom: 18px; }
.esqueleto-kpi { height: 64px; border-radius: var(--radius); }

.giro {
  display: inline-block; width: 15px; height: 15px; flex: none;
  border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--ink) 14%, transparent);
  border-top-color: var(--brand);
  animation: gira .7s linear infinite;
}
.giro.claro { border-color: rgba(255, 255, 255, .3); border-top-color: #fff; }
.giro.grande { width: 26px; height: 26px; border-width: 2.5px; }

.pontinho {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: var(--brand); flex: none;
}
.pontinho.vivo { background: var(--selo-vivo); animation: pulso-anel 1.6s ease-out infinite; }
.pontinho.cinza { background: var(--muted); }
.pontinho.erro { background: var(--err); }
.pontinho.aviso { background: var(--warn); }

.barra {
  position: relative; height: 9px; border-radius: 6px; overflow: hidden;
  background: color-mix(in srgb, var(--ink) 8%, transparent);
}
.barra > i {
  display: block; height: 100%; border-radius: 6px;
  background: var(--brand);
  transition: width .7s var(--ease);
}
.barra.correndo > i::after {
  content: ""; position: absolute; inset: 0;
  background-image: linear-gradient(115deg, rgba(255, 255, 255, .30) 25%,
    transparent 25%, transparent 50%, rgba(255, 255, 255, .30) 50%,
    rgba(255, 255, 255, .30) 75%, transparent 75%);
  background-size: 26px 26px;
  animation: esteira .85s linear infinite;
}
.barra.fina { height: 5px; }

.htmx-request .some-quando-carrega,
.some-quando-carrega.htmx-request { opacity: .4; transition: opacity .18s var(--ease); }
.indicador { display: none; align-items: center; gap: 8px; color: var(--muted); font-size: 13px; }
.htmx-request .indicador, .indicador.htmx-request { display: inline-flex; }
.htmx-request.esconde-no-carregar, .htmx-request .esconde-no-carregar { display: none; }

#carregando {
  position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 100;
  background: linear-gradient(90deg, var(--brand), var(--selo-vivo));
  transform: scaleX(0); transform-origin: 0 50%; opacity: 0;
  transition: transform .3s var(--ease), opacity .3s var(--ease);
}
#carregando.ativo { transform: scaleX(.75); opacity: 1; }
#carregando.fim { transform: scaleX(1); opacity: 0; }

/* ==========================================================================
   Monitor de envio ao vivo
   ========================================================================== */

.monitor-topo {
  display: flex; align-items: center; gap: 13px; flex-wrap: wrap; margin-bottom: 18px;
}
.estado-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 13px 5px 10px; border-radius: 22px;
  font-size: 12.5px; font-weight: 600; letter-spacing: -.005em;
  text-decoration: none;
  border: 1px solid var(--selo-linha); background: var(--selo-soft);
  color: var(--selo);
}
.estado-pill.pronto { background: var(--ok-soft); border-color: var(--ok-linha); color: var(--ok); }
.estado-pill.ruim { background: var(--err-soft); border-color: var(--err-linha); color: var(--err); }
.estado-pill.simulacao { background: var(--line-soft); border-color: var(--line); color: var(--ink-2); }

.progresso-numero { display: flex; align-items: baseline; gap: 10px; margin-bottom: 12px; }
.progresso-numero b {
  font-family: var(--f-dados);
  font-size: 42px; font-weight: 600; letter-spacing: -.03em; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.progresso-numero span { color: var(--muted); font-size: 13.5px; }
.progresso-legenda {
  display: flex; justify-content: space-between; gap: 12px;
  margin-top: 10px; font-size: 12.5px; color: var(--muted);
}
.progresso-legenda b { color: var(--ink); font-family: var(--f-dados); font-size: 12px; }

.feed { max-height: 520px; overflow-y: auto; margin: 0 -22px -20px; padding: 0 8px 8px; }
.feed-linha {
  display: grid; grid-template-columns: 12px 1fr auto; gap: 12px;
  align-items: center; padding: 9px 15px; border-radius: var(--radius-sm);
}
.feed > .feed-linha:first-child { animation: entra-feed .34s var(--ease) both; }
.feed-linha:hover { background: var(--brand-25); }
@keyframes entra-feed { from { opacity: 0; transform: translateY(-7px) } }
.feed-linha .quem { min-width: 0; }
.feed-linha .quem b {
  font-size: 13.5px; font-weight: 550; letter-spacing: -.005em;
  display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.feed-linha .quem .detalhe {
  font-size: 12px; color: var(--muted); overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap;
}
.feed-linha .quando {
  font-family: var(--f-dados); font-size: 11px; color: var(--muted);
  font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap;
}
.feed-vazio { padding: 40px 20px; text-align: center; color: var(--muted); font-size: 13.5px; }

.medidor {
  display: grid; grid-template-columns: auto 1fr auto; gap: 12px;
  align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line-soft);
  font-size: 13px;
}
.medidor > .barra { width: 100%; }
.medidor:last-child { border-bottom: 0; }
.medidor .rotulo { font-weight: 550; }
.medidor .valor { min-width: 44px; text-align: right;
                  font-family: var(--f-dados); font-size: 12.5px; font-weight: 600; }

.espera-ritmo {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12.5px; color: var(--muted);
}
.espera-ritmo b { font-family: var(--f-dados); font-size: 12px; }

/* ==========================================================================
   Página pública (descadastro) e login
   ========================================================================== */

.publico {
  min-height: 100vh; display: flex; flex-direction: column;
  align-items: center; justify-content: center; padding: 40px 24px;
}
.publico .marca { padding: 0 0 30px; justify-content: center; display: flex; align-items: center; gap: 10px; }
.publico .marca img { height: 28px; }
.publico .marca .produto {
  font-family: var(--f-display); font-size: 20px; font-weight: 600;
}
.publico .marca .glifo-publico {
  width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center;
  background: var(--escuro); color: var(--selo-vivo);
}

.card.login { max-width: 380px; margin: 0 auto; text-align: left; }
.card.login h1 { font-size: 21px; margin: 0 0 18px; }
.card.login label { display: block; margin-top: 14px; }
.card.login input { width: 100%; }
.card.login button { width: 100%; margin-top: 20px; justify-content: center; }
.card.login .alerta { margin-bottom: 14px; }

.comando {
  font-family: var(--f-dados); font-size: 12.5px;
  background: var(--escuro); color: #d9e6e1;
  border-radius: var(--radius-sm); padding: 11px 14px;
  overflow-x: auto; white-space: pre;
}

.usuario { display: flex; align-items: center; gap: 4px; flex: none; }
.usuario-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 4px 10px 4px 4px; border-radius: 22px;
  text-decoration: none; color: var(--ink-2); font-size: 13px; font-weight: 550;
  transition: background .16s var(--ease);
}
.usuario-chip:hover { background: var(--hover); color: var(--ink); }
.avatar {
  width: 26px; height: 26px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  background: var(--escuro); color: #fff;
  font-size: 10.5px; font-weight: 600; letter-spacing: .02em;
}

/* ==========================================================================
   Ligações — a fila de cards
   ========================================================================== */

.filtro-ligacoes { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.filtro-ligacoes .abas { display: flex; gap: 4px; flex-wrap: wrap; }
.filtro-ligacoes .abas a {
  padding: 6px 13px; border-radius: 999px; font-size: 13px; font-weight: 550;
  color: var(--muted); text-decoration: none; border: 1px solid transparent;
  transition: background .18s var(--ease), color .18s var(--ease);
}
.filtro-ligacoes .abas a:hover { background: var(--hover); color: var(--ink-2); }
.filtro-ligacoes .abas a.ativa {
  background: var(--brand-soft); border-color: var(--brand-linha); color: var(--brand-texto);
}
.filtro-ligacoes .busca { margin-left: auto; min-width: 240px; flex: 1; max-width: 380px; }
.filtro-ligacoes .busca input { margin: 0; }

.cards-ligacao {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
}

.card-ligacao {
  background: var(--card);
  border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--sombra);
  padding: 16px 17px; display: flex; flex-direction: column;
  transition: box-shadow .2s var(--ease), transform .2s var(--ease);
}
.card-ligacao:hover { box-shadow: var(--sombra-2); transform: translateY(-1px); }
.card-ligacao.atrasada { border-left: 3px solid var(--err); }
.card-ligacao header { display: flex; gap: 10px; align-items: flex-start; }
.card-ligacao .quem { min-width: 0; flex: 1; }
.card-ligacao .quem b {
  display: block; font-size: 14.5px; letter-spacing: -.01em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.card-ligacao .empresa {
  font-size: 12.5px; color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.card-ligacao .empresa.sem-nome { font-style: italic; opacity: .8; }
.card-ligacao header .tag { flex: none; }
/* O telefone é o dado principal de quem está com o aparelho na mão. */
.card-ligacao .fone {
  font-family: var(--f-dados); font-size: 16.5px; font-weight: 500;
  letter-spacing: .01em; color: var(--ink); text-decoration: none;
  margin: 10px 0 2px; display: inline-block;
}
.card-ligacao .fone:hover { color: var(--brand-texto); }
.card-ligacao .ficha { margin: 8px 0 0; display: grid; grid-template-columns: auto 1fr; gap: 3px 10px; }
.card-ligacao .ficha dt { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.card-ligacao .ficha dd { margin: 0; font-size: 12.5px; color: var(--ink-2); }
.card-ligacao .nota-ligacao {
  margin: 10px 0 0; font-size: 12.5px; color: var(--ink-2);
  background: var(--selo-soft); border: 1px dashed var(--selo-linha);
  border-radius: var(--radius-sm); padding: 8px 11px;
}
.card-ligacao footer { margin-top: auto; padding-top: 14px; }
.card-ligacao footer > .btn { width: 100%; justify-content: center; }
.card-ligacao .nota { margin: 10px 0 0; font-size: 13px; }
.card-ligacao .botoes { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.card-ligacao .botoes button { padding: 6px 12px; font-size: 12.5px; }

/* ==========================================================================
   Funil (kanban) — a tela do print do pipefacil
   ==========================================================================
   Coluna com fio de acento no topo, cabecalho com contagem + soma em R$, e
   o card denso: avatar, nome, valor, linhas de dado concreto com icone, e o
   rodape com "ha quanto" + etiqueta de origem. O comportamento (arrastar,
   mover por select, gaveta) e o mesmo de antes - so a pele mudou.
   ========================================================================== */

.quadro {
  display: grid; grid-auto-flow: column; grid-auto-columns: 280px;
  gap: 12px; overflow-x: auto; padding-bottom: 14px;
  align-items: start;
}
.coluna {
  background: color-mix(in srgb, var(--card) 55%, var(--bg));
  border: 1px solid var(--line-soft); border-radius: var(--radius);
  border-top: 3px solid var(--acento-cinza);
  padding: 10px; max-height: calc(100vh - 210px);
  display: flex; flex-direction: column;
  transition: border-color .16s var(--ease), background .16s var(--ease);
}
/* O acento por etapa. As cores nao carregam significado de estado (verde !=
   bom): sao so a assinatura visual de cada coluna, como no print. */
.coluna.acento-enviado             { border-top-color: var(--acento-azul); }
.coluna.acento-conexao             { border-top-color: var(--ok-vivo); }
.coluna.acento-reuniao_agendada    { border-top-color: var(--acento-ambar); }
.coluna.acento-reuniao_remarcada   { border-top-color: var(--acento-ambar); }
.coluna.acento-reuniao_acontecida  { border-top-color: var(--acento-ciano); }
.coluna.acento-venda               { border-top-color: var(--acento-roxo); }
.coluna.alvo { border-color: var(--brand); background: var(--brand-25); }

.coluna > header { padding: 4px 6px 10px; }
.coluna-titulo { display: flex; align-items: center; gap: 8px; }
.coluna-titulo b {
  font-size: 11.5px; font-weight: 600; letter-spacing: .05em;
  text-transform: uppercase;
}
.conta-coluna {
  margin-left: auto; font-family: var(--f-dados); font-size: 11px;
  color: var(--muted); background: var(--hover-2);
  padding: 0 7px; border-radius: 20px;
}
.coluna-valor {
  display: block; margin-top: 4px;
  font-size: 12px; color: var(--muted-2);
}

.coluna .pilha { display: flex; flex-direction: column; gap: 8px; overflow-y: auto; }
.coluna-vazia {
  border: 1px dashed var(--line); border-radius: var(--radius-sm);
  color: var(--muted-3); font-size: 12px; text-align: center; padding: 18px 8px;
}
.coluna .mais {
  margin-top: 8px; text-align: center; font-size: 12px; color: var(--muted-2);
}

/* ----- o card ----- */
.card-lead {
  background: var(--card); border: 1px solid var(--line);
  border-radius: 10px; padding: 12px;
  cursor: grab; position: relative;
  transition: border-color .18s var(--ease), transform .18s var(--ease);
}
.card-lead:hover { border-color: color-mix(in srgb, var(--line), var(--ink) 20%); }
.card-lead:active { cursor: grabbing; }
.card-lead.arrastando { opacity: .45; }

.lead-topo { display: flex; align-items: center; gap: 9px; min-width: 0; }
.lead-avatar {
  width: 28px; height: 28px; flex: none; border-radius: 8px;
  display: grid; place-items: center;
  background: var(--brand-soft); color: var(--brand-claro);
  font-size: 10.5px; font-weight: 600; text-transform: uppercase;
}
.lead-nome {
  all: unset; cursor: pointer; min-width: 0; flex: 1;
  font-size: 13.5px; font-weight: 600; letter-spacing: -.008em; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lead-nome:hover { color: var(--brand-texto); }
.lead-valor { flex: none; font-size: 12px; font-weight: 500; color: var(--ink); }

.lead-dados { display: flex; flex-direction: column; gap: 5px; margin-top: 10px; }
.lead-dados .dado {
  display: flex; align-items: center; gap: 7px;
  font-size: 12px; color: var(--muted); min-width: 0;
}
.lead-dados .dado svg { width: 12px; height: 12px; flex: none; opacity: .65; }
.lead-dados .dado .mono { font-size: 11.5px; }

.card-lead .nota-card {
  margin: 9px 0 0; font-size: 12px; color: var(--ink-2);
  border-left: 2px solid var(--selo-linha); padding-left: 8px;
}

.lead-rodape {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  margin-top: 10px; padding-top: 9px; border-top: 1px solid var(--line-soft);
}
.lead-rodape .quando { font-size: 11px; color: var(--muted-3); margin-right: auto; }
.etiqueta-origem {
  font-size: 9.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--acento-azul);
  background: color-mix(in srgb, var(--acento-azul) 13%, transparent);
  border-radius: 5px; padding: 2px 7px; white-space: nowrap;
}
.etiqueta-origem.aviso { color: var(--selo); background: var(--selo-soft-2); }
.etiqueta-origem.erro { color: var(--err); background: var(--err-soft); }

.card-lead .mover {
  position: absolute; right: 8px; top: 8px; opacity: 0; width: 24px;
  transition: opacity .16s var(--ease);
}
.card-lead:hover .mover, .card-lead:focus-within .mover { opacity: 1; width: auto; }
@media (hover: none) { .card-lead .mover { opacity: 1; width: auto; } }

/* ----- toolbar do funil ----- */
.funil-toolbar {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  margin-bottom: 16px;
}
.funil-toolbar .busca { flex: 1; min-width: 200px; max-width: 340px; margin: 0; }
.funil-toolbar select {
  margin: 0; width: auto; min-width: 0; font-size: 12.5px;
  height: 36px; padding: 0 26px 0 10px;
}
.funil-toolbar .alternador {
  display: flex; align-items: center; gap: 6px; margin: 0;
  font-size: 12px; color: var(--muted); white-space: nowrap; cursor: pointer;
}
.funil-toolbar .alternador input { margin: 0; }

/* ----- negociacao na gaveta (valor + responsavel) ----- */
.negociacao-campos { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
.negociacao-campos > div { flex: 1; min-width: 120px; }
.negociacao-campos label {
  display: block; font-size: 11px; color: var(--muted); margin-bottom: 4px;
}
.negociacao-campos input, .negociacao-campos select { margin: 0; width: 100%; }

/* ==========================================================================
   Ficha do lead — a gaveta
   ========================================================================== */

.gaveta-fundo {
  position: fixed; inset: 0; z-index: 60;
  background: color-mix(in srgb, var(--escuro) 40%, transparent);
  animation: aparece .2s var(--ease);
}
@keyframes aparece { from { opacity: 0 } }
.gaveta {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 61;
  width: min(430px, 94vw); overflow-y: auto;
  background: var(--card); border-left: 1px solid var(--line);
  box-shadow: -24px 0 60px -30px rgba(15, 28, 26, .35);
  padding: 22px 24px;
  animation: desliza .26s var(--ease);
}
@keyframes desliza { from { transform: translateX(40px); opacity: 0 } }
.gaveta-topo { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 20px; }
.gaveta-topo .quem { min-width: 0; flex: 1; }
.gaveta-topo .quem b {
  font-family: var(--f-display); font-size: 17px; font-weight: 600;
  letter-spacing: -.01em; display: block; line-height: 1.3;
}
.gaveta-topo .quem span { display: block; font-size: 13px; color: var(--muted); margin-top: 3px; }
.gaveta-topo .quem .sem-nome { font-style: italic; }
.gaveta-topo button { padding: 5px 11px; font-size: 15px; line-height: 1; }

.gaveta .bloco { margin-bottom: 22px; }
.gaveta .bloco h3 { margin-bottom: 8px; }

.contato-linha {
  display: flex; align-items: center; gap: 8px; padding: 7px 0;
  border-bottom: 1px solid var(--line-soft); font-size: 13px; min-width: 0;
}
.contato-linha:last-child { border-bottom: 0; }
.contato-linha .rotulo { color: var(--muted); font-size: 11px; text-transform: uppercase;
                         letter-spacing: .05em; width: 52px; flex: none; }
.contato-linha > a {
  font-family: var(--f-dados); font-size: 12.5px;
  color: var(--ink); text-decoration: none; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.contato-linha > a:hover { color: var(--brand-texto); }
.contato-linha.invalido > a { color: var(--muted); text-decoration: line-through; }
.contato-linha .marcas { display: flex; gap: 4px; flex: none; }
.contato-linha .marcas .tag { font-size: 10px; padding: 1px 7px; }
.contato-linha .copiar { margin-left: auto; flex: none; }

.ficha-dados { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 0; }
.ficha-dados .largo { grid-column: 1 / -1; }
.ficha-dados dt { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.ficha-dados dd { margin: 3px 0 0; font-size: 13px; color: var(--ink-2); }

.unidade {
  display: flex; align-items: baseline; gap: 8px; padding: 6px 0;
  font-size: 13px;
}
.unidade b { font-family: var(--f-dados); font-size: 12.5px; }
.unidade span { color: var(--muted); }

.inscricao-linha {
  display: flex; align-items: center; gap: 8px; padding: 8px 0;
  border-bottom: 1px solid var(--line-soft); font-size: 13px;
}
.mover-ficha { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 10px; }
.mover-ficha select { flex: 1; min-width: 170px; margin: 0; }
.mover-ficha input { flex: 1; min-width: 130px; margin: 0; }
.mover-ficha button { padding: 8px 14px; }

.momento { border-bottom: 1px solid var(--line-soft); }
.momento > summary {
  display: flex; gap: 10px; align-items: baseline; padding: 9px 2px;
  cursor: pointer; list-style: none;
}
.momento > summary::-webkit-details-marker { display: none; }
.momento .titulo-momento { font-size: 13px; font-weight: 550; }
.momento .quando-momento {
  margin-left: auto; font-family: var(--f-dados); font-size: 11px;
  color: var(--muted); white-space: nowrap;
}
.momento.agendado > summary { opacity: .6; }
.momento .previa { font-size: 12.5px; max-height: 220px; overflow-y: auto; }

/* ==========================================================================
   Configurações
   ========================================================================== */

/* Duas colunas: um índice fixo à esquerda diz onde você está no formulário
   longo; salvar mora numa barra fixa no rodapé — nunca some da tela. */
.config-layout { display: grid; grid-template-columns: 190px 1fr; gap: 22px; align-items: start; }
.config-nav { position: sticky; top: 76px; display: flex; flex-direction: column; gap: 2px; }
.config-nav a {
  padding: 7px 11px; border-radius: var(--radius-sm); text-decoration: none;
  font-size: 13px; color: var(--muted); font-weight: 500;
  border-left: 2px solid transparent;
}
.config-nav a:hover { background: var(--hover); color: var(--ink); }
.config-nav a .pende { color: var(--warn); font-size: 11px; }
@media (max-width: 980px) { .config-layout { grid-template-columns: 1fr; } .config-nav { display: none; } }

.config-cabeca { display: flex; align-items: center; gap: 10px; margin-bottom: 2px; }
.config-cabeca h2 { margin: 0; }
.config-grade {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px 18px; margin-top: 14px;
}
.config-campo { display: flex; flex-direction: column; }
.config-campo input { width: 100%; }
.config-campo input[type="color"] { height: 38px; padding: 3px; cursor: pointer; }
.config-campo .dica { margin-top: 6px; font-size: 12px; }
.config-campo .dica.herdado { color: var(--warn); font-style: italic; }
.config-campo:has(textarea) { grid-column: 1 / -1; }
.config-campo textarea { font-family: var(--f-dados); font-size: 12.5px; }

.config-teste {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 16px;
  padding-top: 14px; border-top: 1px dashed var(--line);
}
.config-teste .dica { margin-top: 0; }
.config-teste > div { flex-basis: 100%; }
.alerta.teste { margin: 0; font-size: 13px; line-height: 1.55; word-break: break-word; }

.config-salvar {
  position: sticky; bottom: 14px; z-index: 30;
  display: flex; align-items: center; gap: 14px;
  box-shadow: var(--sombra-3);
}
.config-salvar .dica { margin-top: 0; }

/* ==========================================================================
   Atendimentos (inbox de conversas)
   ========================================================================== */

.atd {
  display: grid; grid-template-columns: 330px minmax(0, 1fr);
  gap: 14px; height: calc(100vh - 128px); min-height: 480px;
}
.atd-lateral { display: flex; flex-direction: column; padding: 0; overflow: hidden; margin-bottom: 0; }
.atd-busca {
  display: flex; gap: 8px; align-items: center; padding: 11px 12px;
  border-bottom: 1px solid var(--line-soft);
}
.atd-busca input[type="search"] { flex: 1; min-width: 0; }
.atd-toggle { display: inline-flex; gap: 5px; align-items: center; font-size: 12px;
              color: var(--muted); white-space: nowrap; cursor: pointer; }
#atd-lista { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.atd-filas {
  display: flex; gap: 4px; padding: 9px 12px;
  border-bottom: 1px solid var(--line-soft);
}
.atd-filas a {
  padding: 4px 11px; border-radius: 999px; font-size: 12.5px; font-weight: 550;
  color: var(--muted); text-decoration: none; border: 1px solid transparent;
}
.atd-filas a:hover { background: var(--hover); color: var(--ink-2); }
.atd-filas a.ativa { background: var(--brand-soft); color: var(--brand-texto);
                     border-color: var(--brand-linha); font-weight: 600; }
.atd-filas a .conta { margin-left: 3px; font-family: var(--f-dados); font-size: 10.5px;
                      background: var(--err); color: #fff; border-radius: 999px; padding: 1px 6px; }
.atd-itens { flex: 1; overflow-y: auto; min-height: 0; }
.atd-item {
  display: flex; gap: 10px; align-items: center; padding: 10px 12px;
  cursor: pointer; border-bottom: 1px solid var(--line-soft);
  text-decoration: none; color: inherit;
}
.atd-item:hover { background: var(--hover); }
.atd-item.ativa { background: var(--brand-25); box-shadow: inset 3px 0 0 var(--brand); }
.atd-avatar {
  width: 34px; height: 34px; border-radius: 10px; flex: none;
  display: grid; place-items: center; font-size: 11.5px; font-weight: 600;
  text-transform: uppercase;
  background: var(--brand-soft); color: var(--brand-claro);
}
.atd-avatar.grande { width: 44px; height: 44px; font-size: 17px; }
.atd-meio { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.atd-meio b { font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.atd-meio small { color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.atd-tags { display: flex; gap: 4px; }
.atd-tags .tag { font-size: 10px; padding: 0 6px; }
.atd-fim { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex: none; }
.atd-fim .dono { color: var(--muted); font-size: 11px; }
.atd-fim time, .atd-fim small { font-family: var(--f-dados); font-size: 10.5px; color: var(--muted); }
.atd-badge {
  min-width: 18px; height: 18px; border-radius: 999px; padding: 0 5px;
  display: grid; place-items: center;
  background: var(--brand); color: #fff;
  font-family: var(--f-dados); font-size: 10.5px; font-weight: 600;
}
.atd-nova {
  display: flex; gap: 8px; align-items: center; padding: 10px 12px;
  border-top: 1px solid var(--line-soft);
}
.atd-ddi { color: var(--muted); font-family: var(--f-dados); font-size: 12.5px; }
.atd-nova input { flex: 1; min-width: 0; }

.atd-conversa { display: flex; flex-direction: column; padding: 0; overflow: hidden; margin-bottom: 0; }
.atd-vazio {
  flex: 1; display: flex; flex-direction: column; gap: 12px;
  align-items: center; justify-content: center; color: var(--muted);
}
.atd-cabeca {
  display: flex; gap: 10px; align-items: center; padding: 11px 14px;
  border-bottom: 1px solid var(--line-soft);
}
.atd-cabeca-meio { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.atd-cabeca-meio small { color: var(--muted); font-family: var(--f-dados); font-size: 11.5px; }
.atd-acoes { display: flex; gap: 8px; align-items: center; }
.atd-menu { position: relative; }
.atd-menu summary {
  list-style: none; cursor: pointer; padding: 6px 11px; border-radius: var(--radius-sm);
  border: 1px solid var(--line); font-size: 13px; background: var(--card);
}
.atd-menu summary::-webkit-details-marker { display: none; }
.atd-menu[open] summary { border-color: var(--brand-linha); background: var(--brand-25); }
.atd-menu-corpo {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 40;
  width: 280px; background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--sombra-3); padding: 14px;
}
.atd-menu-corpo label { font-size: 13px; display: flex; gap: 6px; align-items: center; }

.atd-corpo { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) 230px; min-height: 0; }
#atd-mensagens {
  overflow-y: auto; display: flex; flex-direction: column; gap: 7px;
  padding: 16px 18px;
  background: color-mix(in srgb, var(--ink) 2.5%, var(--bg));
}
.atd-dia { text-align: center; margin: 8px 0 2px; }
.atd-dia span {
  font-family: var(--f-dados); font-size: 10.5px; color: var(--muted);
  background: var(--card); border: 1px solid var(--line-soft);
  padding: 2px 10px; border-radius: 20px;
}
.atd-msg {
  max-width: 74%; padding: 8px 12px; border-radius: 12px;
  font-size: 13.5px; line-height: 1.55;
}
.atd-msg p { margin: 0; white-space: pre-wrap; word-break: break-word; }
.atd-msg time { display: block; text-align: right; font-family: var(--f-dados);
                font-size: 10px; color: var(--muted); margin-top: 2px; }
.atd-msg.deles { align-self: flex-start; background: var(--card);
                 border: 1px solid var(--line-soft); border-bottom-left-radius: 4px; }
.atd-msg.nossa { align-self: flex-end; background: var(--brand-soft);
                 border: 1px solid var(--brand-linha); border-bottom-right-radius: 4px; }
.atd-msg.nota { align-self: center; max-width: 86%; background: var(--selo-soft);
                border: 1px dashed var(--selo-linha); }
.atd-msg-rotulo { display: block; font-size: 10px; color: var(--muted);
                  margin-bottom: 2px; text-transform: uppercase; letter-spacing: .05em; }

.atd-ficha { border-left: 1px solid var(--line-soft); padding: 14px; overflow-y: auto; }
.atd-ficha h3 { font-size: 11px; margin: 14px 0 6px; }
.atd-ficha h3:first-child { margin-top: 0; }
.atd-ficha p { margin: 0 0 6px; font-size: 13px; }
.atd-etiquetas { display: flex; gap: 6px; }
.atd-etiquetas input { flex: 1; min-width: 0; }

.atd-composer {
  display: flex; gap: 8px; align-items: flex-end; padding: 11px 14px;
  border-top: 1px solid var(--line-soft);
}
.atd-composer textarea { flex: 1; resize: none; min-height: 42px; }

/* ==========================================================================
   Graficos (.viz) — usados por Relatorios e pelo Painel
   ========================================================================== */

/* Paleta de dados derivada da COR DA CONTA (--brand), não de nenhum logo:
   rampa ordinal de um tom só para o funil (etapas são ordenadas) e série
   única na própria cor da marca. Trocar a cor em Configurações re-tinge os
   gráficos junto com o resto do painel.

   O estouro de teto usa o âmbar escuro da interface (--warn), que separa da
   série por luminância além do matiz — e nunca depende só da cor: ele é o
   que cruza a linha de teto rotulada, e a tabela gêmea traz a coluna "passa
   do teto" escrita. */
.viz {
  --g-serie:  var(--brand);
  --g-alerta: var(--warn);
  --g-vazio:  var(--line-soft);
  --g-grade:  var(--line);
  --g-eixo:   var(--muted-3);
  --g-tinta:  var(--ink-2);
  --g-fraca:  var(--muted);
  --f1: color-mix(in srgb, var(--brand) 30%, var(--card));
  --f2: color-mix(in srgb, var(--brand) 60%, var(--card));
  --f3: var(--brand);
  --f4: color-mix(in oklab, var(--brand), black 22%);
  --f5: color-mix(in oklab, var(--brand), black 44%);
}
.viz .g { display:block; overflow:visible }
.viz .g-rot  { font-size:11px; fill:var(--g-tinta) }
.viz .g-val  { font-size:11px; fill:var(--g-tinta); font-variant-numeric:tabular-nums }
.viz .g-nota { font-size:11px; fill:var(--g-fraca) }
.viz .g-eixo { stroke:var(--g-eixo); stroke-width:1 }
.viz .g-teto { stroke:var(--g-tinta); stroke-width:1 }
.viz .g path:hover { filter:brightness(1.12) }
.viz .g-tabela { margin-top:12px }
.viz .g-tabela summary { cursor:pointer; font-size:13px; color:var(--muted) }
.viz .g-tabela table { margin-top:8px }
.viz .grade2 { display:grid; align-items:start; grid-template-columns:repeat(auto-fit,minmax(460px,1fr)); gap:16px }
.viz .heroi { font-size:52px; font-weight:650; line-height:1.05; letter-spacing:-1px }
.viz td, .viz th { font-variant-numeric:tabular-nums }

/* ==========================================================================
   Paineis (CRM de cards)
   ========================================================================== */

.abas-visao { display: flex; gap: 4px; align-self: center; }
.abas-visao a {
  padding: 6px 14px; border-radius: 999px; font-size: 13px; font-weight: 550;
  color: var(--muted); text-decoration: none; border: 1px solid transparent;
}
.abas-visao a:hover { background: var(--hover); color: var(--ink-2); }
.abas-visao a.ativa {
  background: var(--brand-soft); border-color: var(--brand-linha);
  color: var(--brand-texto); font-weight: 600;
}
.coluna .novo-item { margin-top: 8px; }
.coluna .novo-item input {
  background: transparent; border: 1px dashed var(--line);
  font-size: 12.5px; padding: 7px 10px;
}
.coluna .novo-item input:focus { background: var(--card); border-style: solid; }
.comentario { border-bottom: 1px solid var(--line-soft); padding: 7px 0; }
.comentario p { margin: 2px 0 0; font-size: 13px; white-space: pre-wrap; }

/* ==========================================================================
   Agentes IA
   ========================================================================== */

.agentes-grade {
  display: grid; gap: 14px; margin-bottom: 18px;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}
.agente-card { display: flex; flex-direction: column; gap: 8px; }
.agente-topo { display: flex; align-items: center; gap: 9px; }
.agente-topo b { font-size: 15px; letter-spacing: -.01em; }
.agente-glifo {
  width: 28px; height: 28px; border-radius: 8px; flex: none;
  display: grid; place-items: center; font-size: 13px;
  background: var(--selo-soft); color: var(--selo);
  border: 1px solid var(--selo-linha);
}
.chips-linha { display: flex; gap: 5px; flex-wrap: wrap; }
.agente-card .dica { margin-top: 0; }

/* Controle segmentado: radio escondido, opcao vira pill. */
.pills { display: flex; gap: 6px; flex-wrap: wrap; margin: 4px 0 8px; }
.pill { position: relative; margin: 0; }
.pill input { position: absolute; opacity: 0; pointer-events: none; }
.pill span {
  display: inline-block; padding: 6px 13px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--card);
  font-size: 13px; font-weight: 500; color: var(--ink-2); cursor: pointer;
  transition: background .14s var(--ease), border-color .14s var(--ease),
              color .14s var(--ease);
}
.pill span:hover { background: var(--hover); }
.pill input:checked + span {
  background: var(--brand-soft); border-color: var(--brand);
  color: var(--brand-texto); font-weight: 600;
}
.pill input:focus-visible + span { box-shadow: 0 0 0 3px var(--brand-anel); }

.estagio-linha {
  display: flex; gap: 6px; align-items: center; margin-bottom: 6px;
}
.estagio-linha input { flex: 1; }
.estagio-num {
  width: 24px; height: 24px; border-radius: 7px; flex: none;
  display: grid; place-items: center; font-size: 11px;
  background: var(--line-soft); color: var(--muted);
}

.teste-historico {
  display: flex; flex-direction: column; gap: 7px;
  max-height: 320px; overflow-y: auto; margin-bottom: 12px;
}
.teste-historico:empty { display: none; }
.teste-msg {
  max-width: 78%; padding: 8px 12px; border-radius: 12px;
  font-size: 13.5px; line-height: 1.55; white-space: pre-wrap;
}
.teste-msg.eu { align-self: flex-end; background: var(--brand-soft);
                border: 1px solid var(--brand-linha); border-bottom-right-radius: 4px; }
.teste-msg.dele { align-self: flex-start; background: var(--card);
                  border: 1px solid var(--line); border-bottom-left-radius: 4px; }

/* ==========================================================================
   Editor de fluxo (canvas de nodes)
   ========================================================================== */

.fluxo-nova { display: flex; gap: 10px; flex-wrap: wrap; }
.fluxo-nova input { flex: 2; min-width: 220px; }
.fluxo-nova select { flex: 2; min-width: 260px; }

.fe-barra {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 10px 14px; margin-bottom: 12px;
}
.fe-barra-esq { display: flex; gap: 14px; align-items: center; }
.fe-barra-dir { display: flex; gap: 8px; align-items: center; }

#fe-canvas-wrap { position: relative; padding: 0; overflow: hidden; height: calc(100vh - 250px); min-height: 460px; }
#fe-canvas {
  position: absolute; inset: 0; overflow: hidden; cursor: grab;
  /* Arestas em latão: a linha do protocolo ligando os passos. */
  --fe-aresta: #b8935a;
  background:
    radial-gradient(circle, var(--line) 1px, transparent 1px) 0 0 / 22px 22px,
    var(--bg);
}
#fe-canvas.conectando { cursor: crosshair; }
#fe-mundo, #fe-arestas { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
#fe-arestas { width: 8000px; height: 6000px; overflow: visible; pointer-events: none; }
#fe-arestas path.fe-aresta {
  fill: none; stroke: var(--fe-aresta); stroke-width: 1.6;
  stroke-dasharray: 6 5;
}
#fe-arestas path.fe-aresta-alvo {
  fill: none; stroke: transparent; stroke-width: 14; pointer-events: stroke; cursor: pointer;
}
#fe-arestas path.fe-aresta-alvo:hover { stroke: rgba(179, 38, 30, .12); }

.fe-grupo {
  position: absolute; width: 264px; background: var(--card);
  border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 8px 24px rgba(15, 28, 26, .08);
  user-select: none;
}
#fe-canvas.conectando .fe-grupo header { outline: 2px dashed var(--brand-linha); outline-offset: 2px; cursor: crosshair; }
.fe-grupo header {
  display: flex; align-items: center; gap: 6px;
  padding: 9px 12px; border-bottom: 1px solid var(--line-soft);
  cursor: move; border-radius: 12px 12px 0 0; background: var(--brand-25);
}
.fe-grupo header b { flex: 1; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fe-inicio { color: var(--selo); font-size: 11.5px; }
.fe-grupo-acoes { display: none; gap: 2px; }
.fe-grupo header:hover .fe-grupo-acoes { display: inline-flex; }
.fe-grupo-acoes button {
  border: 0; background: none; padding: 2px 5px; font-size: 12px;
  color: var(--muted); cursor: pointer; border-radius: 6px; box-shadow: none;
}
.fe-grupo-acoes button:hover { background: var(--hover); color: var(--ink); }

.fe-passos { display: flex; flex-direction: column; }
.fe-passo {
  display: flex; align-items: center; gap: 8px; padding: 7px 10px;
  border-bottom: 1px solid var(--line-soft); cursor: pointer; position: relative;
}
.fe-passo:hover { background: var(--hover); }
.fe-passo.ativa { background: var(--brand-25); box-shadow: inset 3px 0 0 var(--brand); }
.fe-ic { width: 22px; height: 22px; border-radius: 7px; background: var(--brand-soft);
  color: var(--brand-texto); display: grid; place-items: center; font-size: 12px; flex: none; }
.fe-passo-texto { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.fe-passo-texto b { font-size: 12px; }
.fe-passo-texto small { font-size: 11px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.fe-porta {
  border: 0; background: none; color: var(--line); cursor: pointer;
  font-size: 13px; padding: 2px; line-height: 1; box-shadow: none;
}
.fe-porta:hover { color: var(--brand); background: none; }
.fe-porta.ligada { color: var(--fe-aresta, #b8935a); }
.fe-porta.conectando { color: var(--brand); animation: fe-pulsar 1s infinite; }
@keyframes fe-pulsar { 50% { opacity: .35; } }

.fe-grupo footer {
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 10px;
}
.fe-mais {
  border: 0; background: none; color: var(--brand-texto); cursor: pointer;
  font-size: 12.5px; font-weight: 600; padding: 3px 6px; border-radius: 7px;
  box-shadow: none;
}
.fe-mais:hover { background: var(--brand-soft); color: var(--brand-texto); }
.fe-porta.fim { font-size: 11.5px; color: var(--muted); display: flex; gap: 4px; align-items: center; }
.fe-porta.fim.ligada { color: var(--fe-aresta, #b8935a); }

.fe-zoom {
  position: absolute; left: 14px; bottom: 14px; display: flex; flex-direction: column; gap: 6px;
}
.fe-zoom button {
  width: 34px; height: 34px; border-radius: 9px; border: 1px solid var(--line);
  background: var(--card); color: var(--ink); cursor: pointer; font-size: 15px;
  justify-content: center; padding: 0;
}
.fe-zoom button:hover { background: var(--hover); color: var(--ink); }

#fe-painel {
  position: absolute; right: 14px; top: 14px; bottom: 14px; width: 300px;
  background: var(--card); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: var(--sombra-3);
  padding: 14px; overflow-y: auto; z-index: 40;
  display: flex; flex-direction: column; gap: 10px;
}
#fe-painel header { display: flex; align-items: center; justify-content: space-between; }
#fe-painel footer { display: flex; gap: 6px; margin-top: auto; padding-top: 10px; }
.fe-x { border: 0; background: none; font-size: 18px; cursor: pointer; color: var(--muted); box-shadow: none; }
.fe-x:hover { background: none; color: var(--ink); }
.fe-campo { display: flex; flex-direction: column; gap: 4px; }
.fe-campo label { font-size: 12px; color: var(--muted); font-weight: 600; }
.fe-campo textarea { font-size: 13px; }
.fe-linha { display: flex; gap: 6px; }
.fe-linha input { width: 90px; }
.fe-dica { font-size: 12px; color: var(--muted); margin: 0; }
.fe-paleta-grupo {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .07em;
  color: var(--muted); margin-top: 6px;
}
.fe-paleta-item {
  display: flex; gap: 8px; align-items: center; text-align: left;
  border: 1px solid var(--line-soft); background: var(--card); color: var(--ink);
  padding: 8px 10px; border-radius: 9px; cursor: pointer; font-size: 13px;
  font-weight: 500; box-shadow: none;
}
.fe-paleta-item:hover { border-color: var(--brand-linha); background: var(--brand-25); color: var(--ink); }
.fe-paleta-item span {
  width: 22px; height: 22px; border-radius: 7px; background: var(--brand-soft);
  color: var(--brand-texto); display: grid; place-items: center; font-size: 12px;
}

/* ==========================================================================
   Responsivo e preferência de movimento
   ========================================================================== */

@media (max-width: 860px) {
  .app { grid-template-columns: 1fr; }
  .lateral {
    position: static; height: auto; flex-direction: row; align-items: center;
    gap: 14px; padding: 10px 16px; overflow-x: auto;
  }
  .marca-lateral { padding: 0 8px 0 0; }
  .menu { flex-direction: row; gap: 4px; overflow-y: visible; }
  .menu-titulo, .lateral-pe { display: none; }
  .menu a.ativa::before { display: none; }
  .menu a .conta { display: none; }
  .topbar { padding: 10px 18px; }
  .pagina { padding: 18px 18px 60px; }
  .kpi b { font-size: 20px; }
  .atd { grid-template-columns: 1fr; height: auto; }
  .atd-corpo { grid-template-columns: 1fr; }
  .atd-ficha { display: none; }
  .config-salvar { position: static; }
}
@media (max-width: 720px) { .usuario-nome { display: none; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important;
  }
}

/* Conexoes: caixa do QR */
.qr-caixa {
  margin-top: 16px; padding: 18px;
  border: 1px dashed var(--line); border-radius: var(--radius);
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  text-align: center;
}
.qr-caixa img { border-radius: 8px; background: #fff; }

/* ==========================================================================
   prospecting.ally v2 — as telas do dia
   ==========================================================================
   Componentes das sete telas do design: Inicio, Prospeccao, Conversas, CRM,
   Modo foco, Nova campanha e Agente. Tudo aqui e superficie branca, linha de
   1px e mono no dado — nenhuma sombra alem da elevacao do no selecionado.
   ========================================================================== */

/* ----- cabecalho de tela: titulo, contexto e a acao, na mesma linha ----- */
.tela-topo {
  display: flex; align-items: baseline; gap: 12px;
  margin-bottom: 30px; flex-wrap: wrap;
}
.tela-topo h1 {
  margin: 0; font-size: 26px; font-weight: 600; letter-spacing: -.025em;
  line-height: 1.2;
}
.tela-topo .contexto { font-size: 13px; color: var(--muted-2); }
.tela-topo .acoes { margin-left: auto; display: flex; align-items: center; gap: 10px; }

.rotulo-secao {
  font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted-2); font-weight: 600; margin-bottom: 18px;
}
.rotulo-secao.brand { color: var(--brand-texto); }

/* Numero que ainda nao e verdade. O tracejado por baixo e a unica marca de
   "vitrine" no produto — some no dia em que a carteira de creditos existir. */
.placeholder {
  text-decoration: underline dotted color-mix(in srgb, var(--selo-vivo) 70%, transparent);
  text-underline-offset: 3px; cursor: help;
}

/* ==========================================================================
   Inicio — o cartao "Agora", a fila e o funil
   ========================================================================== */

.inicio { display: flex; align-items: stretch; min-height: 100%; }
.inicio-principal { flex: 1; min-width: 0; padding: clamp(20px, 3.2vw, 44px) clamp(18px, 3.2vw, 44px) 48px; }
.inicio-lado {
  width: 320px; flex: 0 0 320px;
  border-left: 1px solid var(--line-soft); background: var(--rail);
  padding: 44px 28px;
}

/* A unica coisa que o operador precisa ler ao abrir o produto. */
.agora {
  border: 1px solid var(--line); border-radius: 14px;
  padding: 28px 30px 26px; margin-bottom: 14px;
}
.agora .eyebrow {
  font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--brand-texto); font-weight: 600; margin-bottom: 14px;
}
.agora h2 {
  font-size: 26px; font-weight: 600; letter-spacing: -.025em; line-height: 1.25;
  margin: 0 0 10px; max-width: 520px; text-wrap: pretty;
}
.agora p {
  font-size: 14px; color: var(--muted); line-height: 1.5;
  max-width: 520px; margin: 0 0 22px;
}
.agora .linha-acao { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.agora .nota { font-size: 13px; color: var(--muted-2); }

/* Fila do dia: uma linha por pendencia, o verbo sempre a direita. */
.fila { display: flex; flex-direction: column; }
.fila a, .fila .item {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 8px; border-bottom: 1px solid var(--line-soft);
  text-decoration: none; color: inherit;
  transition: background .16s var(--ease);
}
.fila a:hover { background: var(--hover); color: inherit; }
.fila .ponto { width: 7px; height: 7px; flex: 0 0 7px; border-radius: 50%; }
.fila .titulo { font-size: 14px; font-weight: 500; }
.fila .nota { font-size: 13px; color: var(--muted-2); }
.fila .cta { margin-left: auto; font-size: 13px; font-weight: 600; color: var(--brand-texto); }

/* Funil dos 30 dias: valor em mono, etapa, taxa. Vermelho quando a etapa
   esta abaixo do que o canal aguenta. */
.funil { display: flex; flex-direction: column; }
.funil .etapa {
  display: flex; align-items: center; gap: 14px;
  padding: 13px 0; border-bottom: 1px solid var(--line-soft);
}
.funil .valor {
  font-family: var(--f-dados); font-size: 17px; font-weight: 500;
  width: 64px; flex: none; font-variant-numeric: tabular-nums;
}
.funil .nome { font-size: 13px; color: var(--ink-2); }
.funil .taxa {
  margin-left: auto; font-family: var(--f-dados); font-size: 12px;
  color: var(--muted-3); font-variant-numeric: tabular-nums;
}
.funil .etapa.ruim .valor, .funil .etapa.ruim .taxa { color: var(--err); }
.lado-nota { margin-top: 26px; font-size: 12.5px; color: var(--muted-2); line-height: 1.5; }

/* ==========================================================================
   Prospeccao — a jornada de 8 passos e a lista de campanhas
   ========================================================================== */

.jornada-card {
  border: 1px solid var(--line); border-radius: 14px;
  padding: 26px 28px; margin-bottom: 26px;
}
.jornada-topo { display: flex; align-items: baseline; gap: 10px; margin-bottom: 22px; flex-wrap: wrap; }
.jornada-topo .nome { font-size: 16px; font-weight: 600; letter-spacing: -.015em; }
.jornada-topo .acoes { margin-left: auto; }
.jornada { display: grid; grid-template-columns: repeat(8, 1fr); gap: 8px; }
.jornada .passo { text-decoration: none; color: inherit; display: block; }
.jornada .barra { height: 4px; border-radius: 2px; background: var(--line-2); margin-bottom: 10px; }
.jornada .passo.feito .barra { background: var(--brand); }
.jornada .passo.atual .barra { background: var(--selo-vivo); }
.jornada .n {
  font-family: var(--f-dados); font-size: 10.5px;
  color: var(--muted-3); margin-bottom: 4px;
}
.jornada .rotulo { font-size: 12.5px; font-weight: 500; color: var(--muted-3); line-height: 1.35; }
.jornada .passo.feito .rotulo, .jornada .passo.atual .rotulo { color: var(--ink); }
.jornada .passo.atual .rotulo { font-weight: 600; }
@media (max-width: 1180px) { .jornada { grid-template-columns: repeat(4, 1fr); row-gap: 16px; } }

.tabela-campanhas { display: flex; flex-direction: column; }
.tabela-campanhas .cabeca, .tabela-campanhas .linha {
  display: grid; grid-template-columns: 2.6fr 1fr 1fr 1fr 1fr; gap: 16px;
}
.tabela-campanhas .cabeca {
  padding: 0 8px 12px; border-bottom: 1px solid var(--line-soft);
  font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted-2); font-weight: 600;
}
.tabela-campanhas .linha {
  padding: 18px 8px; border-bottom: 1px solid var(--line-soft);
  align-items: center; text-decoration: none; color: inherit;
  transition: background .16s var(--ease);
}
.tabela-campanhas .linha:hover { background: var(--hover); color: inherit; }
.tabela-campanhas .campanha { display: flex; align-items: center; gap: 11px; min-width: 0; }
.tabela-campanhas .ponto { width: 7px; height: 7px; flex: 0 0 7px; border-radius: 50%; }
.tabela-campanhas .nome {
  font-size: 14px; font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tabela-campanhas .sub { font-size: 12px; color: var(--muted-2); margin: 3px 0 0; }
.tabela-campanhas .dado {
  font-family: var(--f-dados); font-size: 14px; font-variant-numeric: tabular-nums;
}
.tabela-campanhas .dado.vazio { color: var(--muted-3); }
.tabela-campanhas .dado.ruim { color: var(--err); }

/* ==========================================================================
   Conversas — lista, thread e o compositor
   ========================================================================== */

.conversas { display: flex; flex: 1; min-width: 0; }
.conversas-lista {
  width: 360px; flex: 0 0 360px;
  border-right: 1px solid var(--line-soft);
  display: flex; flex-direction: column; overflow-y: auto;
}
.conversas-lista .topo { padding: 36px 24px 18px; }
.conversas-lista .topo h1 {
  margin: 0 0 16px; font-size: 22px; font-weight: 600; letter-spacing: -.02em;
}
.filtros { display: flex; gap: 6px; flex-wrap: wrap; }
.filtros a {
  font-size: 12.5px; padding: 5px 11px; border-radius: 7px;
  background: var(--hover-2); color: var(--ink-2); text-decoration: none;
  transition: background .16s var(--ease);
}
.filtros a:hover { background: var(--line-2); color: var(--ink-2); }
.filtros a.ativa { background: var(--brand); color: #fff; }

.conversa-item {
  padding: 15px 24px; border-top: 1px solid var(--line-soft);
  text-decoration: none; color: inherit; display: block;
  transition: background .16s var(--ease);
}
.conversa-item:hover { background: var(--hover); color: inherit; }
.conversa-item.ativa { background: var(--hover-2); }
.conversa-item .cabeca { display: flex; align-items: center; gap: 9px; margin-bottom: 5px; }
.conversa-item .ponto { width: 6px; height: 6px; flex: none; border-radius: 50%; }
.conversa-item .nome { font-size: 13.5px; font-weight: 600; }
.conversa-item .tempo {
  margin-left: auto; font-family: var(--f-dados); font-size: 11px; color: var(--muted-3);
}
.conversa-item .trecho {
  font-size: 12.5px; color: var(--muted-legenda); line-height: 1.45; margin: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.conversa-painel { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.conversa-cabeca {
  padding: 26px 32px 20px; border-bottom: 1px solid var(--line-soft);
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.conversa-cabeca .nome { font-size: 16px; font-weight: 600; letter-spacing: -.015em; }
.conversa-cabeca .sub { font-size: 12.5px; color: var(--muted-2); margin: 3px 0 0; }
.conversa-cabeca .acoes { margin-left: auto; display: flex; gap: 10px; }

.thread {
  flex: 1; padding: 28px 32px; background: var(--rail);
  display: flex; flex-direction: column; gap: 16px; overflow-y: auto;
}
.balao {
  align-self: flex-start; max-width: 440px;
  background: var(--card); color: var(--ink); border: 1px solid var(--line);
  border-radius: 12px; padding: 13px 16px; font-size: 13.5px; line-height: 1.55;
}
.balao.meu { align-self: flex-end; background: var(--brand); color: #fff; border-color: var(--brand); }
.balao .autor { font-size: 11px; color: var(--muted-3); margin: 5px 0 0; }
.balao.meu .autor { text-align: right; }
.thread .marco { align-self: center; font-size: 12px; color: var(--muted-3); }
.thread .vazio { margin: auto; color: var(--muted-3); font-size: 13px; }

.compositor {
  padding: 18px 32px 26px; border-top: 1px solid var(--line-soft);
  display: flex; align-items: center; gap: 12px;
}
.compositor input[type=text] {
  flex: 1; height: 44px; padding: 0 14px; font-size: 13.5px;
  border: 1px solid var(--line); border-radius: 10px; font-family: inherit;
  background: var(--card); color: var(--ink);
}
.compositor input[type=text]:hover { border-color: var(--muted-3); }
.compositor input[type=text]:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-anel); }

/* ==========================================================================
   CRM — cinco colunas de oportunidade
   ========================================================================== */

/* O design desenhou cinco colunas; o funil real tem sete etapas, com regra de
   negocio em cada transicao. O auto-fill mantem a proporcao do desenho (~5 na
   largura de trabalho) sem inventar um pipeline que o produto nao tem. */
.crm-colunas {
  display: grid; gap: 14px; align-items: start;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
}
.crm-coluna .cabeca { display: flex; align-items: baseline; gap: 8px; padding: 0 4px 12px; }
.crm-coluna .cabeca .titulo { font-size: 12.5px; font-weight: 600; }
.crm-coluna .cabeca .n { font-family: var(--f-dados); font-size: 11.5px; color: var(--muted-3); }
.crm-coluna .cards { display: flex; flex-direction: column; gap: 8px; min-height: 24px; }
.crm-card {
  border: 1px solid var(--line); border-radius: 11px; padding: 13px 14px;
  background: var(--card); text-decoration: none; color: inherit; display: block;
  transition: border-color .16s var(--ease);
}
.crm-card:hover { border-color: var(--brand); color: inherit; }
.crm-card .nome { font-size: 13px; font-weight: 500; margin-bottom: 6px; }
.crm-card .rodape { display: flex; align-items: center; gap: 8px; }
.crm-card .valor { font-family: var(--f-dados); font-size: 12px; color: var(--ink-2); }
.crm-card .dono { margin-left: auto; font-size: 11.5px; color: var(--muted-3); }
.crm-vazio {
  border: 1px dashed var(--line); border-radius: 11px; padding: 16px;
  font-size: 12.5px; color: var(--muted-3); text-align: center;
}

/* ==========================================================================
   Modo foco — casco escuro, um lead por vez
   ==========================================================================
   Fundo escuro porque o modo e um lugar diferente, nao uma tela a mais: quem
   entra sabe pela cor que saiu do app e entrou na fila.
*/
.foco { min-height: 100vh; background: var(--chrome); display: flex; flex-direction: column; }
.foco-barra {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 20px 32px; border-bottom: 1px solid var(--escuro-linha);
}
.foco-barra .selo { color: #f2d89a; font-size: 13px; font-weight: 600; letter-spacing: .02em; }
.foco-barra .contador { font-family: var(--f-dados); font-size: 12.5px; color: var(--escuro-muted); }
.foco-barra .trilho {
  flex: 1; max-width: 280px; height: 3px; border-radius: 2px;
  background: rgba(255, 255, 255, .13); overflow: hidden;
}
.foco-barra .trilho i { display: block; height: 100%; background: var(--selo-vivo); transition: width .4s var(--ease); }
.foco-barra .restante { font-size: 12.5px; color: var(--escuro-muted); }
.foco-barra .sair {
  margin-left: auto; font-size: 13px; color: var(--escuro-texto);
  text-decoration: none; transition: color .16s var(--ease);
}
.foco-barra .sair:hover { color: #fff; }

.foco-palco {
  flex: 1; display: flex; align-items: flex-start; justify-content: center;
  padding: 44px 32px 56px;
}
.foco-coluna { width: 720px; max-width: 100%; }
.foco-cartao { background: var(--card); border-radius: 16px; overflow: hidden; }

.foco-lead { padding: 26px 30px 24px; display: flex; gap: 16px; align-items: flex-start; }
.foco-lead .avatar {
  width: 44px; height: 44px; flex: 0 0 44px; border-radius: 50%;
  background: var(--brand-soft); color: var(--brand-texto);
  font-size: 14px; font-weight: 600; display: grid; place-items: center;
}
.foco-lead .quem { flex: 1; min-width: 0; }
.foco-lead .nome-linha { display: flex; align-items: center; gap: 10px; margin-bottom: 5px; flex-wrap: wrap; }
.foco-lead .nome { font-size: 19px; font-weight: 600; letter-spacing: -.015em; }
.foco-lead .contexto { font-size: 13.5px; color: var(--muted-legenda); }
.foco-lead .espera { text-align: right; }
.foco-lead .espera .quanto { font-family: var(--f-dados); font-size: 13px; color: var(--err); }
.foco-lead .espera .label { font-size: 12px; color: var(--muted-3); margin-top: 3px; }

.etiqueta {
  font-size: 11.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  border-radius: 6px; padding: 3px 8px;
  color: var(--brand-forte); background: var(--ok-soft);
}
.etiqueta.urgente { color: var(--err); background: var(--err-soft); }

.foco-dados { padding: 0 30px 24px; display: flex; gap: 26px; flex-wrap: wrap; }
.foco-dados .rotulo { font-size: 11.5px; color: var(--muted-3); margin-bottom: 4px; }
.foco-dados .valor { font-size: 13.5px; font-weight: 500; }

.resumo-ia {
  margin: 0 30px; padding: 16px 18px; background: var(--selo-soft);
  border-radius: 11px; display: flex; gap: 12px; align-items: flex-start;
}
.resumo-ia .ponto {
  width: 7px; height: 7px; flex: none; border-radius: 50%;
  background: var(--selo-vivo); margin-top: 6px;
}
.resumo-ia p { font-size: 13px; color: var(--selo-ink); line-height: 1.5; margin: 0; }

.foco-thread {
  margin-top: 22px; padding: 22px 30px 24px;
  border-top: 1px solid var(--line-soft);
  display: flex; flex-direction: column; gap: 12px;
  max-height: 320px; overflow-y: auto;
}
.foco-rascunho { padding: 0 30px 22px; }
.foco-rascunho textarea {
  width: 100%; border: 1px solid var(--line); border-radius: 12px;
  padding: 14px 16px; min-height: 76px; font-size: 13.5px; line-height: 1.55;
  color: var(--ink-2); font-family: inherit; resize: vertical; background: var(--card);
}
.foco-rascunho textarea:hover { border-color: var(--muted-3); }
.foco-rascunho textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-anel); }
.sugestoes { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.sugestoes button {
  font-size: 12.5px; color: var(--ink-2); background: var(--card);
  border: 1px solid var(--line); border-radius: 20px; padding: 6px 13px;
  cursor: pointer; font-family: inherit;
  transition: border-color .16s var(--ease), color .16s var(--ease);
}
.sugestoes button:hover { border-color: var(--brand); color: var(--brand-texto); }

.foco-abrir {
  margin: 20px 30px 0; padding: 16px 0; border-top: 1px solid var(--line-soft);
  display: flex; align-items: center; gap: 10px; cursor: pointer;
  color: var(--brand-texto); font-size: 13.5px; font-weight: 600;
  background: none; border-left: 0; border-right: 0; border-bottom: 0;
  width: calc(100% - 60px); font-family: inherit; text-align: left;
}
.foco-abrir .previa { font-size: 12.5px; font-weight: 400; color: var(--muted-3); }

.foco-acoes {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 18px 30px 22px; background: var(--rail);
  border-top: 1px solid var(--line-soft);
}
.foco-acoes .pular { margin-left: auto; }

.foco-atalhos {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  margin-top: 20px; padding: 0 4px; font-size: 12px; color: #6e8f80;
}
.foco-atalhos .atalho { display: flex; align-items: center; gap: 7px; }
.foco-atalhos kbd {
  font-family: var(--f-dados); font-size: 11px; color: var(--escuro-forte);
  border: 1px solid rgba(255, 255, 255, .18); border-radius: 5px; padding: 2px 6px;
}
.foco-atalhos .proximo { margin-left: auto; color: #4f7264; }

.foco-vazio {
  width: 520px; max-width: 100%; margin: 0 auto; text-align: center;
  color: var(--escuro-forte); padding-top: 40px;
}
.foco-vazio h2 { font-size: 22px; font-weight: 600; color: #fff; margin: 0 0 10px; }
.foco-vazio p { font-size: 14px; color: var(--escuro-muted); line-height: 1.55; margin: 0 0 24px; }

/* ==========================================================================
   Nova campanha — o wizard de quatro passos
   ========================================================================== */

.wizard { flex: 1; display: flex; flex-direction: column; min-height: 100vh; }
.wizard-topo {
  display: flex; align-items: center; gap: 26px; flex-wrap: wrap;
  padding: 18px 32px; border-bottom: 1px solid var(--line-soft);
}
.wizard-topo .sair { font-size: 13.5px; color: var(--muted-2); text-decoration: none; }
.wizard-topo .sair:hover { color: var(--ink); }
.wizard-passos { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.wizard-passos a, .wizard-passos span.passo { display: flex; align-items: center; gap: 9px; text-decoration: none; }
.wizard-passos .marca {
  width: 20px; height: 20px; border-radius: 50%; flex: none;
  font-family: var(--f-dados); font-size: 11px;
  display: grid; place-items: center;
  background: var(--card); color: var(--muted-3); border: 1px solid var(--line);
}
.wizard-passos .rotulo { font-size: 13.5px; font-weight: 500; color: var(--muted-3); }
.wizard-passos .feito .marca { background: var(--brand); color: #fff; border-color: transparent; }
.wizard-passos .feito .rotulo { color: var(--ink-2); }
.wizard-passos .atual .marca { background: var(--ink); color: var(--bg); border-color: transparent; }
.wizard-passos .atual .rotulo { color: var(--ink); font-weight: 600; }
.wizard-saldo { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.wizard-saldo .label { font-size: 12.5px; color: var(--muted-2); }
.wizard-saldo .valor {
  font-family: var(--f-dados); font-size: 13px; color: var(--selo);
  background: var(--selo-soft-2); border-radius: 7px; padding: 5px 10px;
}

.wizard-corpo { flex: 1; display: flex; align-items: stretch; }
.wizard-principal { flex: 1; min-width: 0; padding: clamp(20px, 3vw, 40px) clamp(18px, 3.2vw, 44px); }
.wizard-principal > h1 {
  margin: 0 0 6px; font-size: 24px; font-weight: 600; letter-spacing: -.025em;
}
.wizard-principal > .intro { margin: 0 0 28px; font-size: 14px; color: var(--muted); }
.wizard-lado {
  width: 340px; flex: 0 0 340px;
  border-left: 1px solid var(--line-soft); background: var(--rail); padding: 40px 28px;
}
.wizard-lado .numerao {
  font-family: var(--f-dados); font-size: 34px; font-weight: 500;
  letter-spacing: -.03em; margin-bottom: 6px;
}
.wizard-lado .legenda { font-size: 13.5px; color: var(--muted); margin: 0 0 24px; }
.wizard-lado .linhas { display: flex; flex-direction: column; gap: 12px; font-size: 13px; color: var(--ink-2); }
.wizard-lado .linhas div { display: flex; justify-content: space-between; gap: 12px; }
.wizard-lado .linhas .fraco { color: var(--muted-3); }
.wizard-lado .rodape-nota {
  margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--line-2);
  font-size: 12.5px; color: var(--muted-legenda); line-height: 1.5;
}

.wizard-rodape {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 16px 32px; border-top: 1px solid var(--line-soft); background: var(--card);
  position: sticky; bottom: 0; z-index: 5;
}
.wizard-rodape .auto { font-size: 12.5px; color: var(--muted-2); }
.wizard-rodape .custo {
  margin-left: auto; font-family: var(--f-dados); font-size: 12.5px; color: var(--selo);
}

/* ----- passo 1: fontes e filtros ----- */
.fontes { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 32px; }
@media (max-width: 900px) { .fontes { grid-template-columns: 1fr; } }
.fonte {
  position: relative;
  border: 1px solid var(--line); background: var(--card); border-radius: 12px;
  padding: 16px 18px; cursor: pointer; display: flex; gap: 12px; align-items: flex-start;
  transition: border-color .16s var(--ease), background .16s var(--ease);
}
.fonte:hover { border-color: var(--brand); }
.fonte input { position: absolute; opacity: 0; pointer-events: none; }
.fonte .marca {
  width: 18px; height: 18px; border-radius: 5px; flex: 0 0 18px; margin-top: 1px;
  display: grid; place-items: center; font-size: 11px; color: #fff;
  background: var(--card); border: 1px solid var(--line);
}
.fonte .titulo { font-size: 14px; font-weight: 600; margin-bottom: 4px; }
.fonte .desc { font-size: 12.5px; color: var(--muted-legenda); line-height: 1.45; margin: 0; }
.fonte:has(input:checked) { border-color: var(--brand); background: var(--brand-25); }
.fonte:has(input:checked) .marca { background: var(--brand); border-color: var(--brand); }
.fonte:has(input:focus-visible) { box-shadow: 0 0 0 3px var(--brand-anel); }

.filtros-grade { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; margin-bottom: 14px; }
@media (max-width: 900px) { .filtros-grade { grid-template-columns: 1fr; } }
.filtros-grade .rotulo { font-size: 12.5px; color: var(--muted); margin-bottom: 6px; }
.filtros-grade select, .filtros-grade input[type=text] {
  width: 100%; height: 42px; border: 1px solid var(--line); border-radius: 9px;
  padding: 0 13px; font-size: 13.5px; font-family: inherit;
  background: var(--card); color: var(--ink);
}
.filtros-grade select:focus, .filtros-grade input:focus {
  outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-anel);
}
.pilulas { display: flex; gap: 8px; flex-wrap: wrap; }
.pilula {
  font-size: 12.5px; color: var(--ink-2); background: var(--hover-2);
  border-radius: 20px; padding: 6px 12px;
}
.pilula.acao {
  color: var(--brand-texto); background: transparent;
  border: 1px dashed var(--muted-3); cursor: pointer; font-family: inherit;
}
.pilula.acao:hover { border-color: var(--brand); }

/* ----- passo 2: enriquecimento ----- */
.enriquecimentos { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.enriquecimento {
  position: relative;
  display: flex; align-items: center; gap: 16px; padding: 16px 18px;
  border-bottom: 1px solid var(--line-soft); cursor: pointer;
  transition: background .16s var(--ease);
}
.enriquecimento:last-child { border-bottom: 0; }
.enriquecimento:hover { background: var(--rail); }
.enriquecimento input { position: absolute; opacity: 0; pointer-events: none; }
.chave {
  width: 36px; height: 20px; border-radius: 12px; flex: 0 0 36px;
  background: var(--line); padding: 2px;
  display: flex; align-items: center; justify-content: flex-start;
  transition: background .18s var(--ease);
}
.chave span {
  width: 16px; height: 16px; border-radius: 50%; background: #fff;
  transition: transform .18s var(--ease);
}
.enriquecimento:has(input:checked) .chave { background: var(--brand); }
.enriquecimento:has(input:checked) .chave span { transform: translateX(16px); }
.enriquecimento:has(input:focus-visible) .chave { box-shadow: 0 0 0 3px var(--brand-anel); }
.enriquecimento .texto { flex: 1; }
.enriquecimento .titulo { font-size: 14px; font-weight: 500; margin-bottom: 3px; }
.enriquecimento .desc { font-size: 12.5px; color: var(--muted-legenda); margin: 0; }
.enriquecimento .custo { font-family: var(--f-dados); font-size: 12.5px; color: var(--muted-3); }
.enriquecimento:has(input:checked) .custo { color: var(--ink-2); }

/* ----- passo 3: a cadencia como grafo vertical ----- */
.cadencia-tela { flex: 1; display: flex; align-items: stretch; min-width: 0; }
.cadencia-palco {
  flex: 1; min-width: 0; padding: 34px 44px 44px; background: var(--rail);
  background-image: radial-gradient(var(--line-2) 1px, transparent 1px);
  background-size: 22px 22px;
}
.cadencia-topo { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; flex-wrap: wrap; }
.cadencia-topo h1 { margin: 0; font-size: 20px; font-weight: 600; letter-spacing: -.02em; }
.cadencia-topo .contexto { font-size: 13px; color: var(--muted-2); }
.cadencia-topo .acoes { margin-left: auto; }
.grafo { display: flex; flex-direction: column; align-items: center; }
.grafo .trecho { display: flex; flex-direction: column; align-items: center; width: 100%; }
.no {
  width: 380px; max-width: 100%; background: var(--card);
  border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px;
  text-decoration: none; color: inherit; display: block;
  transition: border-color .16s var(--ease), box-shadow .16s var(--ease);
}
.no:hover { border-color: var(--brand); color: inherit; }
.no.ativo { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-anel); }
.no .canal { display: flex; align-items: center; gap: 9px; margin-bottom: 7px; }
.no .canal .ponto { width: 7px; height: 7px; border-radius: 50%; background: var(--brand); }
.no.regra .canal .ponto { background: var(--selo-vivo); }
.no.saida .canal .ponto { background: var(--muted-3); }
.no .canal .tipo {
  font-size: 11px; letter-spacing: .07em; text-transform: uppercase;
  color: var(--muted-2); font-weight: 600;
}
.no .titulo { font-size: 14px; font-weight: 600; margin-bottom: 4px; }
.no .sub { font-size: 12.5px; color: var(--muted-legenda); line-height: 1.45; margin: 0; }
.fio { width: 1px; height: 34px; background: var(--line); }
.espera { display: flex; flex-direction: column; align-items: center; }
.espera .fio { height: 14px; }
.espera .rotulo {
  font-size: 12px; color: var(--muted-legenda); background: var(--card);
  border: 1px solid var(--line); border-radius: 20px; padding: 4px 12px;
}
.grafo-add {
  margin-top: 16px; font-size: 13px; color: var(--brand-texto);
  border: 1px dashed var(--muted-3); border-radius: 10px; padding: 10px 18px;
  cursor: pointer; background: var(--card); font-family: inherit;
  text-decoration: none; display: inline-block;
}
.grafo-add:hover { border-color: var(--brand); }

.editor-passo {
  width: 400px; flex: 0 0 400px; border-left: 1px solid var(--line-soft);
  padding: 28px 28px 24px; display: flex; flex-direction: column;
  background: var(--card); overflow-y: auto;
}
.editor-passo .cabeca { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; flex-wrap: wrap; }
.editor-passo .cabeca .titulo { font-size: 15px; font-weight: 600; }
.editor-passo .cabeca .canal {
  font-size: 12px; color: var(--ink-2); background: var(--hover-2);
  border-radius: 6px; padding: 3px 9px;
}
.editor-passo .campo { margin-bottom: 14px; }
.editor-passo .campo > .rotulo { font-size: 12.5px; color: var(--muted); margin-bottom: 6px; }
.editor-passo input[type=text], .editor-passo textarea {
  width: 100%; border: 1px solid var(--line); border-radius: 9px;
  padding: 11px 13px; font-size: 13.5px; line-height: 1.5;
  font-family: inherit; color: var(--ink); background: var(--card);
}
.editor-passo textarea { min-height: 150px; line-height: 1.6; resize: vertical; }
.editor-passo input:focus, .editor-passo textarea:focus {
  outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-anel);
}
.variaveis { display: flex; gap: 7px; flex-wrap: wrap; }
.variaveis button {
  font-family: var(--f-dados); font-size: 11.5px; color: var(--ink-2);
  background: var(--hover-2); border: 0; border-radius: 6px; padding: 4px 9px;
  cursor: pointer;
}
.variaveis button:hover { background: var(--ok-soft); color: var(--brand-texto); }
.editor-rodape {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line-soft);
}
.editor-rodape .nota { font-size: 12.5px; color: var(--muted-2); }
.caixa-regra {
  font-size: 13.5px; color: var(--ink-2); line-height: 1.6;
  border: 1px solid var(--line); border-radius: 11px; padding: 16px;
}

/* ----- passo 4: revisao ----- */
.revisao { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.revisao .linha {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 16px 18px; border-bottom: 1px solid var(--line-soft);
}
.revisao .linha:last-child { border-bottom: 0; }
.revisao .rotulo { width: 130px; flex: none; font-size: 12.5px; color: var(--muted-2); }
.revisao .valor { font-size: 13.5px; }
.revisao .editar { margin-left: auto; font-size: 13px; color: var(--brand-texto); text-decoration: none; }
.revisao .editar:hover { color: var(--brand-forte); }

/* Recado do latao: o aviso que nao e erro, so consequencia de uma escolha. */
.recado {
  margin-top: 16px; display: flex; gap: 12px; align-items: flex-start;
  padding: 14px 16px; background: var(--selo-soft); border-radius: 11px;
}
.recado .ponto {
  width: 7px; height: 7px; flex: none; border-radius: 50%;
  background: var(--selo-vivo); margin-top: 6px;
}
.recado p { font-size: 13px; color: var(--selo-ink); line-height: 1.5; margin: 0; }
.recado.brand { background: var(--ok-soft); }
.recado.brand p { color: var(--ok-ink); }

/* ==========================================================================
   Agente — identidade, conhecimento, qualificacao, regras e o teste ao vivo
   ========================================================================== */

.agente-tela { flex: 1; display: flex; align-items: stretch; min-width: 0; }
.agente-principal { flex: 1; min-width: 0; padding: clamp(20px, 3vw, 40px) clamp(18px, 3.2vw, 44px) 48px; }
.agente-cabeca { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; flex-wrap: wrap; }
.agente-cabeca h1 { margin: 0; font-size: 24px; font-weight: 600; letter-spacing: -.025em; }
.agente-principal > .intro { margin: 0 0 26px; font-size: 14px; color: var(--muted); }
.selo-ativo {
  font-size: 12px; font-weight: 600; color: var(--brand-forte);
  background: var(--ok-soft); border-radius: 6px; padding: 4px 9px;
}
.selo-ativo.pausado { color: var(--warn); background: var(--warn-soft); }

.abas { display: flex; gap: 24px; border-bottom: 1px solid var(--line-soft); margin-bottom: 28px; flex-wrap: wrap; }
.abas a {
  padding: 0 0 12px; font-size: 13.5px; font-weight: 500; color: var(--muted-2);
  border-bottom: 2px solid transparent; margin-bottom: -1px; text-decoration: none;
  transition: color .16s var(--ease);
}
.abas a:hover { color: var(--ink); }
.abas a.ativa { color: var(--ink); font-weight: 600; border-bottom-color: var(--brand); }

.forma { max-width: 640px; display: flex; flex-direction: column; gap: 22px; }
.forma .campo > .rotulo { font-size: 12.5px; color: var(--muted); margin-bottom: 6px; }
.forma input[type=text], .forma textarea, .forma select {
  width: 100%; border: 1px solid var(--line); border-radius: 9px;
  padding: 11px 13px; font-size: 13.5px; font-family: inherit;
  color: var(--ink); background: var(--card);
}
.forma input[type=text], .forma select { height: 42px; padding: 0 13px; }
.forma textarea { min-height: 88px; line-height: 1.6; resize: vertical; }
.forma input:focus, .forma textarea:focus, .forma select:focus {
  outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-anel);
}
.forma .dupla { display: flex; gap: 16px; flex-wrap: wrap; }
.forma .dupla > * { flex: 1; min-width: 200px; }

/* Escolha por pilula: mesma semantica de radio, sem a bolinha. */
.escolhas { display: flex; gap: 8px; flex-wrap: wrap; }
.escolhas label {
  position: relative;
  font-size: 13px; color: var(--ink-2); background: var(--hover-2);
  border-radius: 20px; padding: 8px 15px; cursor: pointer;
  transition: background .16s var(--ease);
}
.escolhas label:hover { background: var(--line-2); }
.escolhas input { position: absolute; opacity: 0; pointer-events: none; }
.escolhas label:has(input:checked) { background: var(--brand); color: #fff; }
.escolhas label:has(input:focus-visible) { box-shadow: 0 0 0 3px var(--brand-anel); }

.lista-arquivos { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; margin-bottom: 16px; }
.lista-arquivos .item {
  display: flex; align-items: center; gap: 14px; padding: 15px 18px;
  border-bottom: 1px solid var(--line-soft);
}
.lista-arquivos .item:last-child { border-bottom: 0; }
.lista-arquivos .nome { font-size: 13.5px; font-weight: 500; }
.lista-arquivos .meta { font-size: 12px; color: var(--muted-2); margin: 3px 0 0; }
.lista-arquivos .acao { margin-left: auto; font-size: 12.5px; color: var(--muted-2); background: none; border: 0; cursor: pointer; font-family: inherit; }
.lista-arquivos .acao:hover { color: var(--err); }
.lista-arquivos .acao.brand { color: var(--brand-texto); }

.solta {
  border: 1px dashed var(--muted-3); border-radius: 12px; padding: 26px;
  text-align: center; cursor: pointer; display: block;
  transition: border-color .16s var(--ease);
}
.solta:hover { border-color: var(--brand); }
.solta .principal { font-size: 13.5px; color: var(--ink-2); margin-bottom: 4px; }
.solta .apoio { font-size: 12.5px; color: var(--muted-2); }

.criterios { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; margin-bottom: 20px; }
.criterios .item {
  display: flex; align-items: center; gap: 14px; padding: 15px 18px;
  border-bottom: 1px solid var(--line-soft);
}
.criterios .item:last-child { border-bottom: 0; }
.criterios .n { font-family: var(--f-dados); font-size: 12px; color: var(--muted-3); }
.criterios .texto { font-size: 13.5px; }
.criterios .peso { margin-left: auto; font-size: 12px; color: var(--muted-2); }

.regras { display: flex; flex-direction: column; gap: 8px; }
.regras .regra { border: 1px solid var(--line); border-radius: 9px; padding: 12px 14px; font-size: 13.5px; }
.link-add { font-size: 12.5px; color: var(--brand-texto); background: none; border: 0; padding: 2px; cursor: pointer; font-family: inherit; text-align: left; }
.link-add:hover { color: var(--brand-forte); }
.pilula.veto { color: var(--err-texto); background: var(--err-soft); padding: 7px 13px; }

.consumo {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  border: 1px solid var(--line); border-radius: 11px; padding: 15px 18px;
}
.consumo .texto { flex: 1; }
.consumo .titulo { font-size: 13.5px; font-weight: 500; margin-bottom: 3px; }
.consumo .desc { font-size: 12.5px; color: var(--muted-legenda); margin: 0; }
.consumo .total { font-family: var(--f-dados); font-size: 13px; color: var(--selo); }

.agente-teste {
  width: 380px; flex: 0 0 380px; border-left: 1px solid var(--line-soft);
  background: var(--rail); display: flex; flex-direction: column;
}
.agente-teste .cabeca { padding: 26px 24px 16px; border-bottom: 1px solid var(--line-soft); }
.agente-teste .cabeca .titulo { font-size: 14px; font-weight: 600; margin-bottom: 3px; }
.agente-teste .cabeca .sub { font-size: 12.5px; color: var(--muted-2); margin: 0; }
.agente-teste .thread { padding: 22px 24px; gap: 12px; background: transparent; }
.agente-teste .balao { max-width: 290px; font-size: 13px; }
.agente-teste .regra-acionada {
  align-self: center; font-size: 11.5px; color: var(--selo);
  background: var(--selo-soft); border-radius: 8px; padding: 7px 11px;
  text-align: center; line-height: 1.5;
}
.agente-teste .rodape {
  padding: 16px 24px 24px; border-top: 1px solid var(--line-soft);
  display: flex; gap: 10px; align-items: center;
}
.agente-teste .rodape input {
  flex: 1; height: 42px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--card); padding: 0 13px; font-size: 13px; font-family: inherit;
}
.agente-teste .rodape input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-anel); }
.agente-teste .rodape .custo { font-family: var(--f-dados); font-size: 11.5px; color: var(--selo); }

/* ----- responsivo: os paineis laterais viram blocos empilhados ----- */
@media (max-width: 1280px) {
  .inicio { flex-direction: column; }
  .inicio-lado {
    width: auto; flex: none; border-left: 0;
    border-top: 1px solid var(--line-soft);
  }
}
@media (max-width: 1080px) {
  .wizard-corpo, .cadencia-tela, .agente-tela, .conversas { flex-direction: column; }
  .wizard-lado, .editor-passo, .agente-teste, .conversas-lista {
    width: auto; flex: none; border-left: 0; border-right: 0;
    border-top: 1px solid var(--line-soft);
  }
  .conversas-lista { border-top: 0; border-bottom: 1px solid var(--line-soft); max-height: 320px; }
}

/* ==========================================================================
   Ao vivo — a campanha disparando
   ==========================================================================
   Feita para ser gravada de celular. Tudo cabe numa coluna de 560px centrada,
   entao um corte 9:16 nao perde nada; o fundo e o casco escuro para o video
   nao sair lavado; e a hierarquia e brutal de proposito — um numero enorme,
   uma barra, e a cascata. Qualquer elemento a mais competiria com o unico
   que faz a tela valer a gravacao: o nome de uma empresa real entrando.
   ========================================================================== */

.vivo {
  min-height: 100vh; background: var(--chrome);
  display: flex; flex-direction: column; color: var(--escuro-forte);
}

.vivo-topo {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 20px 32px; border-bottom: 1px solid var(--escuro-linha);
}
.vivo-selo {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: #f2d89a;
}
.vivo-selo .pulso {
  width: 8px; height: 8px; border-radius: 50%; background: var(--selo-vivo);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--selo-vivo) 70%, transparent);
  animation: pulso 1.6s var(--ease) infinite;
}
.vivo-selo.parado { color: var(--escuro-muted); }
.vivo-selo.parado .pulso { background: var(--escuro-muted); animation: none; box-shadow: none; }
@keyframes pulso {
  70% { box-shadow: 0 0 0 9px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}
.vivo-campanha { font-size: 13.5px; color: var(--escuro-forte); }
.vivo-simulacao {
  font-size: 11.5px; color: var(--escuro-muted);
  border: 1px solid var(--escuro-linha); border-radius: 20px; padding: 3px 10px;
}
.vivo-sair {
  margin-left: auto; font-size: 13px; color: var(--escuro-texto); text-decoration: none;
}
.vivo-sair:hover { color: #fff; }

.vivo-palco { flex: 1; display: flex; justify-content: center; padding: 40px 24px 32px; }
.vivo-coluna { width: 560px; max-width: 100%; }

/* O numero. Tudo nesta tela existe para ele ser lido de longe, num video
   vertical, sem legenda. */
.vivo-numero { text-align: center; margin-bottom: 26px; }
.vivo-numero b {
  display: block;
  font-family: var(--f-dados); font-size: 88px; font-weight: 500;
  line-height: 1; letter-spacing: -.04em; color: #fff;
  font-variant-numeric: tabular-nums;
}
.vivo-numero .de {
  display: block; margin-top: 10px;
  font-size: 14px; color: var(--escuro-muted);
}

.vivo-barra {
  height: 4px; border-radius: 3px; overflow: hidden;
  background: rgba(255, 255, 255, .12); margin-bottom: 12px;
}
.vivo-barra i {
  display: block; height: 100%; border-radius: 3px; background: var(--selo-vivo);
  transition: width .9s var(--ease);
}
.vivo-linha {
  display: flex; align-items: baseline; gap: 12px;
  font-size: 12.5px; color: var(--escuro-muted); margin-bottom: 30px;
}
.vivo-linha .pct { color: var(--escuro-forte); font-size: 13px; }
.vivo-linha .eta { margin-left: auto; }
.vivo-linha .ruim { color: #f0a9a3; }

/* ----- a cascata ----- */
/*
   O feed cresce por cima: o cartao novo entra no topo e empurra os outros
   para baixo. Poderia ser o contrario, mas o olho de quem grava fica no
   numero, que esta acima — o movimento tem que nascer perto dele.

   A mascara apaga a base em vez de cortar com overflow: um corte reto vira
   uma linha dura no video e denuncia a borda da lista.
*/
.cascata {
  display: flex; flex-direction: column; gap: 6px;
  mask-image: linear-gradient(180deg, #000 62%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, #000 62%, transparent 100%);
}
.gota {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 16px; border-radius: 11px;
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .07);
}
.gota.nova { animation: cai .45s var(--ease) both; }
@keyframes cai {
  from { opacity: 0; transform: translateY(-14px) scale(.985); }
}
.gota .marca {
  width: 7px; height: 7px; flex: none; border-radius: 50%;
  background: var(--ok-vivo);
}
.gota.falhou .marca { background: #e0736a; }
.gota .empresa {
  font-size: 14px; font-weight: 500; color: #fff;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.gota .onde { font-size: 12.5px; color: var(--escuro-muted); white-space: nowrap; }
.gota .canal {
  margin-left: auto; font-size: 11.5px; color: var(--escuro-texto);
  border: 1px solid var(--escuro-linha); border-radius: 20px; padding: 3px 9px;
  white-space: nowrap;
}
.gota .hora {
  font-family: var(--f-dados); font-size: 11px; color: #4f7264; white-space: nowrap;
}

.vivo-rodape {
  display: flex; align-items: center; justify-content: center; gap: 40px;
  flex-wrap: wrap; padding: 22px 32px 30px;
  border-top: 1px solid var(--escuro-linha);
}
.vivo-metrica { text-align: center; }
.vivo-metrica b {
  display: block; font-family: var(--f-dados); font-size: 22px; font-weight: 500;
  color: #fff; line-height: 1.2;
}
.vivo-metrica span { font-size: 11.5px; color: var(--escuro-muted); }
.vivo-metrica.ruim b { color: #e0736a; }

.vivo-vazio {
  margin: auto; text-align: center; width: 460px; max-width: 100%; padding: 40px 24px;
}
.vivo-vazio h2 { font-size: 22px; font-weight: 600; color: #fff; margin: 0 0 10px; }
.vivo-vazio p { font-size: 14px; color: var(--escuro-muted); line-height: 1.55; margin: 0 0 24px; }
.vivo-acoes { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

/* Num celular o numero e a cascata continuam sendo a tela inteira. */
@media (max-width: 620px) {
  .vivo-numero b { font-size: 64px; }
  .vivo-palco { padding: 28px 16px 24px; }
  .gota .onde { display: none; }
  .vivo-rodape { gap: 24px; }
}

/* Quem pediu menos movimento nao vai receber uma tela pulsando na cara. */
@media (prefers-reduced-motion: reduce) {
  .gota.nova { animation: none; }
  .vivo-selo .pulso { animation: none; }
  .vivo-barra i { transition: none; }
}

/* ==========================================================================
   Dashboard — a linha de BI e o funil com barra
   ========================================================================== */

.bi-linha {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
  margin-bottom: 18px;
}
@media (max-width: 1240px) { .bi-linha { grid-template-columns: repeat(2, 1fr); } }
.bi-card {
  background: var(--card); border: 1px solid var(--line);
  border-radius: 12px; padding: 14px 16px;
  display: flex; flex-direction: column; gap: 2px; min-width: 0;
}
.bi-rotulo {
  font-size: 10.5px; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted-2);
}
.bi-valor { font-size: 20px; font-weight: 500; letter-spacing: -.02em; margin-top: 4px; }
.bi-valor.ok { color: var(--ok); }
.bi-sub { font-size: 11.5px; color: var(--muted-2); }
.bi-dono {
  display: flex; align-items: center; gap: 7px; margin-top: 6px;
  font-size: 12px; min-width: 0;
}
.bi-dono-avatar {
  width: 20px; height: 20px; flex: none; border-radius: 6px;
  display: grid; place-items: center;
  background: var(--brand-soft); color: var(--brand-claro);
  font-size: 9px; font-weight: 600; text-transform: uppercase;
}
.bi-dono-nome {
  color: var(--muted); overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap;
}
.bi-dono .num { margin-left: auto; font-size: 11.5px; color: var(--ink-2); }

/* O funil da lateral ganhou a barra de conversao (largura relativa ao topo). */
.funil .etapa { display: block; }
.funil .etapa-linha { display: flex; align-items: center; gap: 14px; }
.funil .etapa-barra {
  height: 4px; border-radius: 2px; background: var(--hover-2);
  overflow: hidden; margin-top: 8px;
}
.funil .etapa-barra i {
  display: block; height: 100%; border-radius: 2px;
  background: var(--brand-texto);
  transition: width .6s var(--ease);
}
.funil .etapa.ruim .etapa-barra i { background: var(--err); }

/* ==========================================================================
   Wizard passo 1 — a caixa do ICP (Agente de Listas)
   ========================================================================== */

.icp-caixa {
  border: 1px solid var(--brand-linha); border-radius: 12px;
  background: var(--brand-25); padding: 16px 18px;
}
.icp-rotulo {
  display: block; font-size: 12.5px; font-weight: 600;
  color: var(--brand-claro); margin-bottom: 8px;
}
.icp-linha { display: flex; gap: 10px; align-items: stretch; flex-wrap: wrap; }
.icp-linha textarea {
  flex: 1; min-width: 240px; border: 1px solid var(--line);
  border-radius: 9px; padding: 10px 13px; font-size: 13.5px; line-height: 1.5;
  font-family: inherit; color: var(--ink); background: var(--card); resize: vertical;
}
.icp-linha textarea:focus {
  outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-anel);
}
.icp-linha button { align-self: flex-end; }

/* ==========================================================================
   Wizard v3.1 — nome, upload, escolha a dedo, ritmo
   ========================================================================== */

.campo-nome { margin-bottom: 22px; max-width: 560px; }
.campo-nome label {
  display: block; font-size: 12.5px; color: var(--muted); margin-bottom: 6px;
}
.campo-nome input {
  width: 100%; height: 46px; padding: 0 14px;
  font-size: 15px; font-weight: 600; letter-spacing: -.01em;
  border: 1px solid var(--line); border-radius: 10px;
  background: var(--card); color: var(--ink); font-family: inherit;
}
.campo-nome input:focus {
  outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-anel);
}

.fonte-upload { cursor: default; }
.upload-linha { display: flex; gap: 8px; align-items: center; margin-top: 10px; flex-wrap: wrap; }
.upload-linha input[type=file] {
  flex: 1; min-width: 160px; font-size: 12px; color: var(--muted);
  border: 0; padding: 0; background: transparent;
}

.lado-acoes {
  display: flex; flex-direction: column; gap: 8px; align-items: flex-start;
  margin: 20px 0 4px;
}

.copiar-linha { display: flex; gap: 8px; align-items: center; }
.copiar-linha select {
  margin: 0; width: auto; height: 34px; font-size: 12.5px; padding: 0 26px 0 10px;
}

.grafo-adds { display: flex; gap: 10px; margin-top: 16px; }

/* ----- escolher a dedo ----- */
.leads-grade {
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}
.lead-escolha {
  position: relative; display: block; cursor: pointer;
  border: 1px solid var(--line); border-radius: 11px;
  background: var(--card); padding: 13px 14px;
  transition: border-color .16s var(--ease), background .16s var(--ease);
}
.lead-escolha:hover { border-color: var(--brand); }
.lead-escolha.marcado { border-color: var(--brand); background: var(--brand-25); }
.lead-escolha input {
  position: absolute; top: 12px; right: 12px; margin: 0; accent-color: var(--brand);
}
.lead-escolha .lead-topo { padding-right: 26px; }
.lead-escolha .titulo {
  font-size: 13px; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lead-escolha .desc { font-size: 11.5px; color: var(--muted-2); margin: 2px 0 0; }
.lead-marcas { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 9px; }
.lead-marcas .pilula { font-size: 10px; padding: 2px 8px; }
.lead-marcas .mono { font-size: 9.5px; }

/* ----- configuracao de disparo enxuta ----- */
.disparo-campos {
  display: flex; flex-direction: column; gap: 18px; max-width: 560px;
}
.disparo-campos .campo label:not(.alternador),
.disparo-campos .rotulo-fixo {
  display: block; font-size: 12.5px; color: var(--muted); margin-bottom: 6px;
}
.disparo-campos input[type=number] { width: 130px; margin: 0; }
.disparo-campos .plano-fixo { font-size: 15px; }
.disparo-campos .dica { margin-top: 5px; }
.disparo-campos .alternadores { display: flex; flex-direction: column; gap: 10px; }
.disparo-campos .alternador {
  display: flex; align-items: center; gap: 8px;
  font-size: 13.5px; color: var(--ink-2); cursor: pointer;
}
.disparo-campos .alternador input { margin: 0; accent-color: var(--brand); }