/* Visual no mesmo estilo do painel DingDong: tons slate, cartões brancos com
   borda fina, botão principal escuro e modo escuro pelo botão do canto. */
:root {
  --fundo: #f8fafc;          /* slate-50 */
  --superficie: #ffffff;
  --superficie-2: #f8fafc;   /* cabeçalho de tabela */
  --texto: #0f172a;          /* slate-900 */
  --suave: #64748b;          /* slate-500 */
  --rotulo: #334155;         /* slate-700 */
  --borda: #e2e8f0;          /* slate-200 */
  --borda-campo: #cbd5e1;    /* slate-300 */
  --hover: #f1f5f9;          /* slate-100 */
  --primario: #0f172a;
  --primario-texto: #ffffff;
  --perigo: #dc2626;
  --perigo-fundo: #fef2f2;
  --aviso-fundo: #fffbeb;
  --aviso-texto: #92400e;
  --ok-fundo: #ecfdf5;
  --ok-texto: #047857;
  --zap: #25d366;
  --raio: 8px;
}
html.dark {
  --fundo: #020617;          /* slate-950 */
  --superficie: #0f172a;     /* slate-900 */
  --superficie-2: #1e293b99;
  --texto: #f1f5f9;
  --suave: #94a3b8;
  --rotulo: #cbd5e1;
  --borda: #1e293b;          /* slate-800 */
  --borda-campo: #334155;
  --hover: #1e293b;
  --primario: #ffffff;
  --primario-texto: #0f172a;
  --perigo: #f87171;
  --perigo-fundo: #450a0a66;
  --aviso-fundo: #451a0366;
  --aviso-texto: #fcd34d;
  --ok-fundo: #064e3b66;
  --ok-texto: #6ee7b7;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background: var(--fundo);
  color: var(--texto);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
h1, h2, h3 { margin: 0 0 12px; line-height: 1.25; letter-spacing: -0.01em; }
h1 { font-size: 24px; font-weight: 600; }
h2 { font-size: 17px; font-weight: 500; }
code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; }
[hidden] { display: none !important; }

/* ---------- estrutura: menu lateral + conteúdo ---------- */
.app { display: flex; min-height: 100vh; }
.lateral {
  width: 256px; flex-shrink: 0; display: flex; flex-direction: column;
  background: var(--superficie); border-right: 1px solid var(--borda);
  position: sticky; top: 0; height: 100vh; height: 100dvh;
}
.lateral .marca { padding: 24px 20px; font-size: 18px; font-weight: 600; letter-spacing: -0.02em; }
.lateral .marca small { display: block; font-size: 12px; font-weight: 500; color: var(--suave); letter-spacing: 0; }
.lateral nav { flex: 1; overflow-y: auto; padding: 0 12px; display: flex; flex-direction: column; gap: 2px; }
.lateral .rodape-menu { padding: 12px; display: flex; flex-direction: column; gap: 2px; }
.item-menu {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 8px 12px; border-radius: 6px; font-size: 14px; font-weight: 500;
  color: var(--suave); text-decoration: none; background: none; border: 0; width: 100%; text-align: left; cursor: pointer;
}
.item-menu:hover { background: var(--hover); color: var(--texto); }
.item-menu.ativo { background: var(--primario); color: var(--primario-texto); }
.titulo-grupo {
  margin: 20px 0 4px; padding: 0 12px; font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .06em; color: var(--suave); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.versao { margin: 8px 0 0; padding: 0 12px; font-size: 12px; color: var(--suave); }
.usuario-menu { padding: 0 12px 4px; font-size: 12px; color: var(--suave); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
main { flex: 1; min-width: 0; padding: 32px; }
.conteudo { max-width: 1100px; }

.botoes-canto { position: fixed; top: 16px; right: 16px; z-index: 50; display: flex; gap: 8px; }
.botao-redondo {
  width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; padding: 0;
  border: 1px solid var(--borda); background: var(--superficie); color: var(--suave); cursor: pointer;
  box-shadow: 0 1px 2px rgba(0,0,0,.05);
}
.botao-redondo:hover { background: var(--hover); }
.botao-redondo svg { width: 16px; height: 16px; }
#abrir-menu { position: fixed; top: 16px; left: 16px; z-index: 50; display: none; }
.cortina { position: fixed; inset: 0; background: rgba(0,0,0,.3); z-index: 30; display: none; }

@media (max-width: 768px) {
  .lateral { position: fixed; inset: 0 auto 0 0; z-index: 40; transform: translateX(-100%); transition: transform .2s ease; }
  body.menu-aberto .lateral { transform: none; }
  body.menu-aberto .cortina { display: block; }
  #abrir-menu { display: grid; }
  body.menu-aberto #abrir-menu { display: none; }
  main { padding: 64px 16px 48px; }
  .esconde-mobile { display: none; }
}

/* ---------- blocos ---------- */
.cabecalho { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 20px; padding-right: 44px; } /* espaço para o botão de tema */
.cabecalho h1 { margin: 0; }
.descricao { color: var(--suave); margin: -12px 0 20px; }
.card {
  background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio);
  padding: 20px; margin-bottom: 16px;
}
.grade-resumo { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; margin-bottom: 24px; }
.grade-resumo .card { margin: 0; }
.numero { font-size: 24px; font-weight: 600; letter-spacing: -0.02em; margin-top: 4px; }
.rotulo { color: var(--suave); font-size: 13px; }

/* checklist de configuração da empresa */
.checklist { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.checklist li { display: flex; gap: 10px; align-items: flex-start; }
.checklist .bola {
  width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0; display: grid; place-items: center;
  font-size: 12px; font-weight: 700; border: 1px solid var(--borda-campo); color: var(--suave);
}
.checklist .feito .bola { background: var(--ok-texto); border-color: var(--ok-texto); color: var(--superficie); }
.checklist a { font-weight: 500; }

/* ---------- tabelas ---------- */
.tabela-wrap { overflow-x: auto; padding: 0; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { text-align: left; padding: 10px 16px; vertical-align: top; }
thead th { background: var(--superficie-2); color: var(--suave); font-weight: 500; }
tbody tr { border-top: 1px solid var(--borda); }
tr.clicavel { cursor: pointer; }
tr.clicavel:hover td { background: var(--hover); }
.vazio { color: var(--suave); text-align: center; padding: 28px 10px; }

/* ---------- formulários e botões ---------- */
button, .botao {
  font: inherit; font-size: 14px; font-weight: 500; border: 1px solid var(--borda-campo); background: var(--superficie); color: var(--texto);
  padding: 8px 14px; border-radius: 6px; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; line-height: 1.3;
}
button:hover, .botao:hover { background: var(--hover); }
button.primario, .botao.primario { background: var(--primario); border-color: var(--primario); color: var(--primario-texto); font-weight: 600; }
button.primario:hover, .botao.primario:hover { opacity: .9; background: var(--primario); }
button.perigo { color: var(--perigo); border-color: var(--perigo); background: transparent; }
button:disabled { opacity: .5; cursor: default; }
button.pequeno, .botao.pequeno { padding: 5px 10px; font-size: 12.5px; }

.campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.campo { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.campo.largo { grid-column: 1 / -1; }
.campo label { font-weight: 500; font-size: 14px; color: var(--rotulo); }
.campo small { color: var(--suave); font-size: 12.5px; }
input, select, textarea {
  font: inherit; font-size: 14px; color: var(--texto); background: var(--superficie); border: 1px solid var(--borda-campo);
  border-radius: 6px; padding: 8px 12px; width: 100%; outline: none;
}
input[type=color] { padding: 2px; height: 38px; }
input[type=checkbox] { width: 16px; height: 16px; accent-color: var(--primario); }
textarea { resize: vertical; min-height: 80px; }
textarea.grande { min-height: 260px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; }
input:focus, select:focus, textarea:focus { border-color: var(--suave); }
.linha-check { display: block; position: relative; padding-left: 26px; font-weight: 400 !important; line-height: 1.45; }
.linha-check > input[type=checkbox]:first-child { position: absolute; left: 0; top: 0.15em; margin: 0; }
.acoes { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; }
.secao { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--borda); }

.etiqueta { display: inline-block; font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: var(--hover); color: var(--suave); }
.etiqueta.ok { background: var(--ok-fundo); color: var(--ok-texto); }
.etiqueta.off { background: var(--perigo-fundo); color: var(--perigo); }

.alerta { background: var(--aviso-fundo); color: var(--aviso-texto); border-radius: 6px; padding: 12px 16px; margin: 0 0 16px; font-size: 14px; }
.alerta a { font-weight: 600; }
.erro-caixa { background: var(--perigo-fundo); color: var(--perigo); border-radius: 6px; padding: 8px 12px; font-size: 14px; }
.codigo {
  background: #0f172a; color: #e2e8f0; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px;
  padding: 12px 14px; border-radius: 6px; overflow-x: auto; white-space: pre-wrap; word-break: break-all;
}
html.dark .codigo { background: #020617; border: 1px solid var(--borda); }
details summary { cursor: pointer; }

/* ---------- editor de assistente + chat de teste (verde WhatsApp) ---------- */
.editor { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 16px; align-items: start; }
@media (max-width: 1000px) { .editor { grid-template-columns: 1fr; } }
.teste { position: sticky; top: 16px; padding: 0; overflow: hidden; }
.teste .cab { padding: 12px 14px; color: #fff; background: #008069; font-weight: 600; display: flex; justify-content: space-between; align-items: center; }
.teste .cab button { background: rgba(255,255,255,.2); color: #fff; border: 0; }
.chat { height: 440px; overflow-y: auto; padding: 12px 10px; background: #efeae2; display: flex; flex-direction: column; gap: 5px; }
.chat .msg { max-width: 85%; padding: 6px 9px; border-radius: 8px; font-size: 14px; color: #111b21; white-space: pre-wrap; box-shadow: 0 1px .5px rgba(0,0,0,.13); }
.chat .msg.bot { align-self: flex-start; background: #fff; }
.chat .msg.eu { align-self: flex-end; background: #d9fdd3; }
.chat .msg.erro { align-self: center; background: #ffe1e1; }
.chat .cta { align-self: flex-start; background: var(--zap); color: #fff; padding: 6px 12px; border-radius: 16px; font-size: 13px; font-weight: 600; text-decoration: none; }
.teste form { display: flex; gap: 6px; padding: 8px; background: var(--superficie); border-top: 1px solid var(--borda); }

/* ---------- conversa ---------- */
.conversa { display: flex; flex-direction: column; gap: 6px; background: #efeae2; padding: 14px; border-radius: var(--raio); }
.conversa .msg { max-width: 80%; padding: 7px 10px; border-radius: 8px; color: #111b21; white-space: pre-wrap; }
.conversa .msg.bot { align-self: flex-start; background: #fff; }
.conversa .msg.eu { align-self: flex-end; background: #d9fdd3; }
.conversa .msg small { display: block; color: #667781; font-size: 11px; margin-top: 3px; text-align: right; }

/* ---------- modal e avisos ---------- */
.fundo-modal { position: fixed; inset: 0; background: rgba(15,23,42,.5); display: grid; place-items: center; padding: 16px; z-index: 60; }
.modal { background: var(--superficie); border: 1px solid var(--borda); border-radius: 12px; padding: 24px; width: 100%; max-width: 560px; max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); overflow-y: auto; overscroll-behavior: contain; }
/* celular: a barra do navegador não esconde os botões do fim da janela */
@media (max-width: 600px) { .fundo-modal { padding: 10px; } .modal { padding: 18px 16px; max-height: calc(100dvh - 20px); } }
.toast {
  position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); background: var(--primario); color: var(--primario-texto);
  padding: 10px 18px; border-radius: 6px; z-index: 100; font-size: 14px; max-width: calc(100vw - 32px); box-shadow: 0 4px 12px rgba(0,0,0,.15);
}
.toast.erro { background: var(--perigo); color: #fff; }

/* ---------- login ---------- */
.pagina-login { min-height: 100vh; display: grid; place-items: center; padding: 16px; }
.pagina-login form { width: 100%; max-width: 384px; padding: 32px; border-radius: 12px; box-shadow: 0 1px 2px rgba(0,0,0,.05); }
/* login com várias telas (entrar, criar conta, código, esqueci a senha) dentro de um cartão só */
.pagina-login { align-content: center; gap: 12px; }
.pagina-login .login-card { width: 100%; max-width: 400px; padding: 32px; border-radius: 12px; box-shadow: 0 1px 2px rgba(0,0,0,.05); }
.pagina-login .login-card form { max-width: none; padding: 0; box-shadow: none; border-radius: 0; }
.login-vista { display: flex; flex-direction: column; gap: 14px; }
.login-vista[hidden] { display: none; }
.login-vista h2 { margin: 0; font-size: 17px; }
.login-vista p { margin: 0; }
.login-vista .campo small { display: block; margin-top: 4px; }
.pagina-login .login-vista button.primario { margin-top: 6px; }
.login-link-dir { text-align: right; margin-top: -6px !important; font-size: 13.5px; }
.login-troca { text-align: center; font-size: 14px; color: var(--suave); }
.login-aceite { align-items: flex-start; font-size: 13.5px; line-height: 1.45; }
.login-aceite input { margin-top: 2px; }
.login-codigo { font-size: 24px; letter-spacing: 8px; text-align: center; font-variant-numeric: tabular-nums; }
.ok-caixa { background: color-mix(in srgb, #22c55e 14%, transparent); color: #15803d; border-radius: 6px; padding: 8px 12px; font-size: 14px; }
html.dark .ok-caixa { color: #86efac; }
.login-rodape { text-align: center; font-size: 13px; color: var(--suave); margin: 0; }
.login-rodape a { color: inherit; }
@media (max-width: 480px) { .pagina-login .login-card { padding: 24px 18px; } }
.pagina-login h1 { text-align: center; font-size: 20px; margin: 0; }
.pagina-login .sub { text-align: center; color: var(--suave); margin: 4px 0 24px; }
.pagina-login button.primario { width: 100%; justify-content: center; margin-top: 24px; }

/* ---------- funil (painel da empresa) ---------- */
.funil { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; }
.funil-etapa { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border: 1px solid var(--borda); border-radius: 6px; text-decoration: none; }
.funil-etapa:hover { background: var(--hover); }
.funil-etapa strong { font-size: 20px; }

/* ---------- quadro de leads (kanban) ---------- */
.quadro { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 12px; align-items: flex-start; }
.coluna { flex: 0 0 260px; background: var(--hover); border: 1px solid var(--borda); border-radius: var(--raio); padding: 8px; display: flex; flex-direction: column; gap: 8px; max-height: calc(100vh - 220px); overflow-y: auto; }
.coluna header { display: flex; justify-content: space-between; align-items: center; font-weight: 600; padding: 4px 4px 0; position: sticky; top: 0; background: var(--hover); }
.vazio-coluna { text-align: center; margin: 8px 0; }
.cartao-lead { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; background: var(--superficie); border: 1px solid var(--borda); border-radius: 6px; text-decoration: none; }
.cartao-lead:hover { border-color: var(--suave); }
.cartao-texto { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cartao-rodape { display: flex; gap: 4px; flex-wrap: wrap; align-items: center; }

/* ---------- detalhe do lead ---------- */
.lead-grade { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; align-items: start; }
@media (max-width: 1000px) { .lead-grade { grid-template-columns: 1fr; } }
#linha-tempo { max-height: 65vh; overflow-y: auto; }
.conversa .msg.equipe { align-self: flex-end; background: #dbeafe; }
.msg-origem { display: block; font-size: 11px; color: #667781; margin-bottom: 2px; }
.chat .msg.acao-ia { align-self: center; background: #fff7d6; font-size: 12.5px; }

/* =====================================================================
   Painel "profissional": balões de ajuda, interruptores, canais, disparos
   ===================================================================== */
.sub { margin: 4px 0 0; color: var(--suave); font-size: 14px; }
.cabecalho > div > h1 { margin: 0; }
.carregando { display: flex; align-items: center; gap: 10px; color: var(--suave); padding: 24px 0; }

/* ícones do menu */
.item-menu { justify-content: flex-start; }
.icone-menu { width: 18px; height: 18px; flex-shrink: 0; display: grid; place-items: center; }
.icone-menu svg { width: 18px; height: 18px; }
.rotulo-menu { flex: 1; }
.ponto { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.ponto.on { background: #22c55e; }
.ponto.off { background: var(--borda-campo); }

/* balão de dica */
.balao {
  position: relative; display: flex; gap: 12px; align-items: flex-start;
  background: #eff6ff; color: #1e3a8a; border: 1px solid #bfdbfe;
  border-radius: 12px; padding: 12px 16px; margin: 0 0 16px; font-size: 14px;
}
.balao::before { /* "rabinho" do balão */
  content: ''; position: absolute; top: -7px; left: 22px; width: 12px; height: 12px;
  background: inherit; border-left: 1px solid; border-top: 1px solid; border-color: inherit; transform: rotate(45deg);
}
.balao-icone { font-size: 18px; line-height: 1.2; }
.balao-texto { margin-top: 2px; color: inherit; opacity: .92; }
.balao a { color: inherit; font-weight: 600; }
.balao-aviso { background: var(--aviso-fundo); color: var(--aviso-texto); border-color: #fde68a; }
.balao-ok { background: var(--ok-fundo); color: var(--ok-texto); border-color: #a7f3d0; }
html.dark .balao { background: #172554aa; color: #bfdbfe; border-color: #1e3a8a; }
html.dark .balao-aviso { background: var(--aviso-fundo); color: var(--aviso-texto); border-color: #78350f; }
html.dark .balao-ok { background: var(--ok-fundo); color: var(--ok-texto); border-color: #065f46; }

/* "?" com balão ao passar o mouse / tocar */
.ajuda {
  position: relative; display: inline-grid; place-items: center; width: 16px; height: 16px; margin-left: 4px;
  border-radius: 50%; background: var(--hover); color: var(--suave); border: 1px solid var(--borda-campo);
  font-size: 11px; font-weight: 700; cursor: help; vertical-align: middle;
}
.ajuda-balao {
  display: none; position: absolute; z-index: 20; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%);
  width: max-content; max-width: 260px; padding: 8px 12px; border-radius: 8px; background: #0f172a; color: #f8fafc;
  font-size: 12.5px; font-weight: 400; line-height: 1.45; text-align: left; box-shadow: 0 6px 20px rgba(0,0,0,.2); white-space: normal;
}
.ajuda-balao::after { content: ''; position: absolute; top: 100%; left: 50%; margin-left: -6px; border: 6px solid transparent; border-top-color: #0f172a; }
.ajuda:hover .ajuda-balao, .ajuda:focus .ajuda-balao, .ajuda.aberta .ajuda-balao { display: block; }
html.dark .ajuda-balao { background: #f1f5f9; color: #0f172a; }
html.dark .ajuda-balao::after { border-top-color: #f1f5f9; }

/* passo a passo */
.passos { list-style: none; margin: 0 0 16px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.passos li { display: flex; gap: 10px; align-items: flex-start; }
.passo-num {
  width: 24px; height: 24px; border-radius: 50%; flex-shrink: 0; display: inline-grid; place-items: center;
  background: var(--primario); color: var(--primario-texto); font-size: 12px; font-weight: 700;
}
h2 .passo-num { margin-right: 6px; vertical-align: 1px; }

/* interruptor liga/desliga */
.interruptor { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-weight: 600; user-select: none; }
.interruptor input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.interruptor .trilho { width: 44px; height: 24px; border-radius: 999px; background: var(--borda-campo); position: relative; transition: background .15s; flex-shrink: 0; }
.interruptor .bolinha { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .15s; }
.interruptor input:checked + .trilho { background: #22c55e; }
.interruptor input:checked + .trilho .bolinha { transform: translateX(20px); }
.interruptor input:focus-visible + .trilho { outline: 2px solid #3b82f6; outline-offset: 2px; }

/* cartões dos canais (IA do site / IA do WhatsApp) */
.canais { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; margin-bottom: 8px; }
.canal { display: flex; flex-direction: column; gap: 12px; margin: 0; border-width: 1px; }
.canal.ligado { border-color: #86efac; }
html.dark .canal.ligado { border-color: #166534; }
.canal-topo { display: flex; align-items: center; gap: 12px; }
.canal-icone { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; flex-shrink: 0; }
.canal-icone svg { width: 22px; height: 22px; }
.canal-icone.site { background: #dbeafe; color: #1d4ed8; }
.canal-icone.whatsapp { background: #dcfce7; color: #15803d; }
.canal-titulo { flex: 1; display: flex; flex-direction: column; }
.canal-titulo strong { font-size: 16px; }
.canal-detalhe { display: flex; align-items: center; gap: 8px; color: var(--suave); min-height: 28px; }
.canal .botao { align-self: flex-start; }
.mini-foto { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; }

/* primeiros passos */
.primeiros-passos { border-color: #bfdbfe; }
html.dark .primeiros-passos { border-color: #1e3a8a; }
.pp-topo { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.pp-topo .progresso { width: 180px; }
.checklist a { display: flex; flex-direction: column; text-decoration: none; }
.checklist a:hover strong { text-decoration: underline; }
.checklist .bola { width: 24px; height: 24px; }
.checklist .feito strong { color: var(--suave); text-decoration: line-through; font-weight: 500; }

.progresso { height: 8px; border-radius: 999px; background: var(--hover); overflow: hidden; border: 1px solid var(--borda); }
.progresso span { display: block; height: 100%; background: #22c55e; border-radius: 999px; transition: width .3s; }

.numero-card.destaque { border-color: #fca5a5; }
.numero-card.destaque .numero { color: var(--perigo); }

/* botões extras */
button.perigo-cheio { background: var(--perigo); border-color: var(--perigo); color: #fff; font-weight: 600; }
button.perigo-cheio:hover { opacity: .9; background: var(--perigo); }
.girando { width: 14px; height: 14px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; display: inline-block; animation: girar .7s linear infinite; }
@keyframes girar { to { transform: rotate(360deg); } }
.grande-botao { width: 100%; justify-content: center; padding: 12px; font-size: 15px; margin-top: 4px; }
.texto-modal p { margin: 0 0 10px; }
.texto-modal code { word-break: break-all; }
.etiqueta.aviso { background: var(--aviso-fundo); color: var(--aviso-texto); }

/* seletor tipo "abas" */
.seletor-canal, .alternar-modo { display: inline-flex; border: 1px solid var(--borda-campo); border-radius: 8px; overflow: hidden; margin-bottom: 12px; }
.alternar-modo { margin: 0; }
.seletor-canal button, .alternar-modo button { border: 0; border-radius: 0; background: var(--superficie); color: var(--suave); padding: 7px 14px; }
.seletor-canal button + button, .alternar-modo button + button { border-left: 1px solid var(--borda-campo); }
.seletor-canal button.ativo, .alternar-modo button.ativo { background: var(--primario); color: var(--primario-texto); }

/* chat de teste */
.teste.whatsapp .cab { background: #075e54; }
.nota-teste { margin: 0; padding: 0 12px 10px; font-size: 12px; }
.chat .msg.digitando { display: flex; gap: 4px; padding: 10px 12px; }
.chat .msg.digitando span { width: 6px; height: 6px; border-radius: 50%; background: #8696a0; animation: pular 1s infinite; }
.chat .msg.digitando span:nth-child(2) { animation-delay: .15s; }
.chat .msg.digitando span:nth-child(3) { animation-delay: .3s; }
@keyframes pular { 0%, 60%, 100% { opacity: .3; transform: none; } 30% { opacity: 1; transform: translateY(-3px); } }
.previa-disparo .chat { height: 360px; }
.midia-previa-msg img { max-width: 220px; border-radius: 6px; display: block; }

/* WhatsApp conectado */
.perfil-zap { display: flex; align-items: center; gap: 14px; }
.foto-zap { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.foto-zap.vazia { display: grid; place-items: center; background: #dcfce7; color: #15803d; }
.foto-zap.vazia svg { width: 28px; height: 28px; }
.qr { width: 260px; max-width: 100%; background: #fff; padding: 8px; border-radius: 8px; border: 1px solid var(--borda); }
#zap-resultado:not(:empty) { margin-top: 14px; }
.o-que-ela-faz { background: var(--hover); border-radius: 8px; padding: 12px 16px; margin-top: 16px; }
.o-que-ela-faz ul { margin: 0; padding-left: 4px; list-style: none; display: flex; flex-direction: column; gap: 4px; }
.secao-avancada summary { font-weight: 500; color: var(--suave); }
.secao-avancada[open] summary { margin-bottom: 8px; }
details.secao-avancada { margin-top: 16px; }
.lista-plataformas { padding-left: 20px; margin: 10px 0 0; display: flex; flex-direction: column; gap: 6px; }
.linha-form { display: flex; gap: 8px; }
.linha-form input { flex: 1; min-width: 0; }

/* mídias */
.soltar {
  display: block; border: 2px dashed var(--borda-campo); border-radius: 10px; padding: 24px; text-align: center; cursor: pointer; position: relative;
}
.soltar:hover, .soltar.arrastando { border-color: #22c55e; background: var(--ok-fundo); }
.soltar input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.grade-midias { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.grade-midias .card { margin: 0; }
.midia { display: flex; flex-direction: column; gap: 4px; }
.midia-previa { height: 130px; border-radius: 6px; background: var(--hover); display: grid; place-items: center; overflow: hidden; font-size: 40px; text-decoration: none; margin-bottom: 6px; }
.midia-previa img { width: 100%; height: 100%; object-fit: cover; }

/* etiquetas */
.chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.chip {
  display: inline-flex; align-items: center; font-size: 11.5px; font-weight: 600; padding: 1px 8px; border-radius: 999px;
  color: var(--cor); background: color-mix(in srgb, var(--cor) 14%, transparent); border: 1px solid color-mix(in srgb, var(--cor) 35%, transparent);
}
.chip-filtro {
  --cor: var(--suave);
  padding: 4px 10px; border-radius: 999px; font-size: 13px; gap: 6px;
}
.chip-filtro.ativo { border-color: var(--cor); background: color-mix(in srgb, var(--cor) 14%, transparent); color: var(--texto); font-weight: 600; }
.chip-filtro[data-etiqueta=""].ativo, .chip-filtro:not([style]).ativo { background: var(--primario); color: var(--primario-texto); border-color: var(--primario); }
.bolinha-cor { width: 9px; height: 9px; border-radius: 50%; background: var(--cor); display: inline-block; }
.chip-check { --cor: var(--suave); display: inline-flex; cursor: pointer; }
.chip-check input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chip-check span { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; border: 1px solid var(--borda-campo); font-size: 13px; }
.chip-check input:checked + span { border-color: var(--primario); background: var(--primario); color: var(--primario-texto); font-weight: 600; }
.chip-check input:focus-visible + span { outline: 2px solid #3b82f6; }
.duas-colunas { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; align-items: start; }
.duas-colunas .card { margin: 0 0 16px; }
.lista-editavel { display: flex; flex-direction: column; gap: 8px; }
.linha-editavel { display: flex; align-items: center; gap: 8px; }
.linha-editavel input:not([type=color]) { flex: 1; min-width: 0; }
.linha-editavel input[type=color] { width: 42px; flex-shrink: 0; }

/* leads */
.barra { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.filtros { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.filtros .linha-form { flex: 1; min-width: 240px; max-width: 420px; }
.dica-arrastar { margin: 0 0 8px; }
.coluna.alvo { outline: 2px dashed #22c55e; outline-offset: -2px; }
.cartao-lead.arrastando { opacity: .4; }
.cartao-lead[draggable=true] { cursor: grab; }
.cartao-topo { display: flex; justify-content: space-between; gap: 6px; align-items: flex-start; }
.barra-lote {
  position: sticky; top: 8px; z-index: 5; display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
  background: var(--primario); color: var(--primario-texto); padding: 10px 14px; border-radius: 10px; margin-bottom: 12px;
}
.barra-lote select { width: auto; padding: 5px 8px; }
.historico { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; }

/* disparos */
.contagem { margin-top: 16px; padding: 12px 14px; border-radius: 8px; background: var(--hover); display: flex; flex-direction: column; gap: 2px; }
.contagem strong { font-size: 15px; }
.botoes-variavel { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 6px; }

@media (max-width: 768px) {
  .canal-topo .interruptor span:not(.trilho):not(.bolinha) { display: none; }
  .filtros .linha-form { max-width: none; }
}
@media (max-width: 768px) {
  .grade-resumo { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .grade-resumo .numero { font-size: clamp(18px, 6vw, 26px); overflow-wrap: anywhere; }
  .grade-resumo .card { padding: 14px; }
}

/* modo escuro no menu */
.linha-tema { justify-content: space-between; cursor: pointer; }
.linha-tema .trilho { width: 36px; height: 20px; }
.linha-tema .bolinha { width: 14px; height: 14px; }
.linha-tema input:checked + .trilho .bolinha { transform: translateX(16px); }

/* QR code do WhatsApp */
.qr-area:not(:empty) { margin-top: 16px; }
.qr-caixa { display: flex; gap: 20px; align-items: flex-start; flex-wrap: wrap; }
.qr-lado { flex: 1; min-width: 220px; }
.qr-vazio { width: 260px; height: 260px; display: grid; place-items: center; }
.codigo-pareamento { font-family: ui-monospace, Menlo, monospace; font-size: 28px; font-weight: 700; letter-spacing: .2em; margin: 12px 0; }
.qr-lado .girando { width: 12px; height: 12px; vertical-align: -1px; }

/* modo escuro: ajustes dos blocos novos */
html.dark .canal-icone.site { background: #1e3a8a66; color: #93c5fd; }
html.dark .canal-icone.whatsapp, html.dark .foto-zap.vazia { background: #14532d66; color: #86efac; }
html.dark .chat, html.dark .conversa { background: #0b141a; }
html.dark .chat .msg.bot, html.dark .conversa .msg.bot { background: #202c33; color: #e9edef; }
html.dark .chat .msg.eu, html.dark .conversa .msg.eu { background: #005c4b; color: #e9edef; }
html.dark .conversa .msg.equipe { background: #1e3a8a; color: #e9edef; }
html.dark .chat .msg.acao-ia { background: #3b2f0b; color: #fde68a; }
html.dark .conversa .msg small, html.dark .msg-origem { color: #8696a0; }
html.dark .primeiros-passos { border-color: #1e3a8a; }
html.dark .numero-card.destaque { border-color: #7f1d1d; }
html.dark .chip { color: color-mix(in srgb, var(--cor) 70%, white); }
html.dark input[type=color] { background: var(--superficie); }
html.dark .qr { border-color: #fff; }
.lateral nav > *, .lateral .rodape-menu > * { flex-shrink: 0; }

/* ---------- contador de não lidas no menu ---------- */
.contador { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: #22c55e; color: #fff; font-size: 11px; font-weight: 700; display: inline-grid; place-items: center; }
.link-botao { border: 0; background: none; padding: 0; color: inherit; text-decoration: underline; font-size: inherit; cursor: pointer; }

/* ---------- anexos nas mensagens ---------- */
.msg-texto { display: block; white-space: pre-wrap; word-break: break-word; }
.msg-nota { display: block; color: #0a7a3a; }
.anexo-img { display: block; max-width: 260px; max-height: 260px; border-radius: 6px; margin: 2px 0 4px; object-fit: cover; }
.anexo-audio { display: block; width: 260px; max-width: 100%; margin: 2px 0 4px; }
.anexo-nota { display: block; font-size: 12.5px; color: #54656f; font-style: italic; margin-bottom: 4px; white-space: pre-wrap; }
.anexo-doc { display: inline-block; padding: 6px 10px; border-radius: 6px; background: rgba(0,0,0,.05); text-decoration: none; margin-bottom: 4px; }
html.dark .anexo-nota { color: #aebac1; }

/* ---------- conversas (estilo WhatsApp Web) ---------- */
.cab-conversas { margin-bottom: 12px; }
.inbox {
  display: grid; grid-template-columns: 340px minmax(0, 1fr); height: calc(100vh - 150px); min-height: 480px;
  border: 1px solid var(--borda); border-radius: var(--raio); overflow: hidden; background: var(--superficie);
}
.inbox-lista { display: flex; flex-direction: column; border-right: 1px solid var(--borda); min-height: 0; min-width: 0; }
.inbox-busca { padding: 10px; border-bottom: 1px solid var(--borda); }
.inbox-filtros { display: flex; gap: 6px; padding: 8px 10px; border-bottom: 1px solid var(--borda); flex-wrap: wrap; }
.inbox-filtros .chip-filtro.ativo { background: var(--primario); color: var(--primario-texto); border-color: var(--primario); }
.lista-conversas { overflow-y: auto; flex: 1; }
.item-conversa {
  display: flex; gap: 10px; width: 100%; padding: 10px 12px; border: 0; border-bottom: 1px solid var(--borda);
  border-radius: 0; background: none; text-align: left; align-items: flex-start;
}
.item-conversa:hover { background: var(--hover); }
/* lixeirinha em cada conversa: aparece ao passar o mouse (sempre visível no celular) */
.item-conversa-caixa { position: relative; }
.apagar-conversa { position: absolute; right: 8px; bottom: 8px; z-index: 2; border: 1px solid var(--borda); background: var(--superficie); border-radius: 8px; padding: 3px 7px; font-size: 13px; line-height: 1; cursor: pointer; opacity: 0; transition: opacity .15s; }
.item-conversa-caixa:hover .apagar-conversa, .apagar-conversa:focus-visible { opacity: 1; }
.apagar-conversa:hover { border-color: #ef4444; background: #fef2f2; }
@media (hover: none) { .apagar-conversa { opacity: .7; } }
.item-conversa.ativo { background: var(--hover); box-shadow: inset 3px 0 0 #22c55e; }
.avatar { width: 40px; height: 40px; border-radius: 50%; background: #d1d7db; color: #fff; display: grid; place-items: center; font-weight: 700; flex-shrink: 0; background: linear-gradient(135deg, #25d366, #128c7e); }
.item-meio { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.item-linha { display: flex; justify-content: space-between; gap: 6px; align-items: center; min-width: 0; }
.item-linha strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.item-hora { font-size: 11.5px; flex-shrink: 0; }
.item-previa { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.item-tags { justify-content: flex-start; flex-wrap: wrap; }
.item-tags:empty { display: none; }
.bolha-nao-lida { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: #25d366; color: #fff; font-size: 11px; font-weight: 700; display: grid; place-items: center; flex-shrink: 0; }
.inbox-chat { display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.inbox-vazio { flex: 1; display: grid; place-items: center; text-align: center; color: var(--suave); background: var(--hover); }
.inbox-vazio svg { width: 48px; height: 48px; opacity: .5; }
.chat-topo { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--borda); flex-wrap: wrap; }
.chat-topo select { width: auto; max-width: 190px; padding: 5px 8px; }
.chat-quem { flex: 1; min-width: 120px; display: flex; flex-direction: column; }
.chat-quem .rotulo { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-local { font-size: 12px; color: #1e40af; }
html.dark .chat-local { color: #93c5fd; }
.chat-acoes { display: flex; gap: 6px; flex-shrink: 0; }
.chat-nome { color: inherit; text-decoration: none; }
.chat-nome:hover { text-decoration: underline; }
.voltar-lista { display: none; }
.chat-aviso { padding: 8px 14px; background: var(--aviso-fundo); color: var(--aviso-texto); font-size: 13.5px; }
.chat-mensagens { flex: 1; overflow-y: auto; border-radius: 0; }
.chat-agendadas { padding: 6px 14px; background: var(--hover); font-size: 13px; display: flex; flex-direction: column; gap: 2px; border-top: 1px solid var(--borda); }
.chat-envio { border-top: 1px solid var(--borda); padding: 8px 10px; position: relative; background: var(--superficie); }
.chat-ferramentas { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 6px; }
.chat-ferramentas .botao { cursor: pointer; }
.chat-linha { display: flex; gap: 8px; align-items: flex-end; }
.chat-linha textarea { min-height: 42px; max-height: 160px; resize: none; }
.manter-ia { margin-top: 6px; font-size: 12.5px; }
.sugestoes-rapidas { position: absolute; bottom: 100%; left: 10px; right: 10px; background: var(--superficie); border: 1px solid var(--borda); border-radius: 8px; box-shadow: 0 6px 20px rgba(0,0,0,.12); overflow: hidden; }
.sugestoes-rapidas button { display: block; width: 100%; text-align: left; border: 0; border-radius: 0; border-bottom: 1px solid var(--borda); }
@media (max-width: 900px) {
  .inbox { grid-template-columns: minmax(0, 1fr); height: calc(100dvh - 120px); }
  .cab-conversas .sub { display: none; }
  .inbox.com-chat .inbox-lista { display: none; }
  .inbox:not(.com-chat) .inbox-chat { display: none; }
  .voltar-lista { display: inline-flex; }
  /* conversa aberta no celular: tela cheia, como no WhatsApp (a caixa de escrever fica sempre à vista) */
  .inbox.com-chat { position: fixed; inset: 0; z-index: 45; height: 100dvh; min-height: 0; border: 0; border-radius: 0; }
  body:has(.inbox.com-chat) { overflow: hidden; }
  body:has(.inbox.com-chat) .botoes-canto, body:has(.inbox.com-chat) #abrir-menu { display: none; }
  .chat-topo { padding: 8px 10px; gap: 8px; }
  /* botões do topo e da caixa de envio: uma linha só, rolando para o lado */
  .chat-acoes, .chat-ferramentas { flex-basis: 100%; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .chat-acoes::-webkit-scrollbar, .chat-ferramentas::-webkit-scrollbar { display: none; }
  .chat-acoes > *, .chat-ferramentas > * { flex-shrink: 0; white-space: nowrap; }
  .inbox-filtros { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .inbox-filtros > * { flex-shrink: 0; }
}
/* celular: o ⌄ do balão fica sempre à vista; abre espaço para ele não cobrir o texto */
@media (hover: none) { .conversa .msg:has(> .msg-menu) { padding-right: 30px; } }

/* biblioteca e respostas prontas */
.grade-escolha { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; max-height: 60vh; overflow-y: auto; }
.escolha { flex-direction: column; align-items: flex-start; padding: 8px; gap: 4px; text-align: left; }
.escolha img, .escolha video { width: 100%; height: 90px; object-fit: cover; border-radius: 4px; pointer-events: none; }
.escolha video { background: #000; }
.grade-escolha [hidden] { display: none !important; }
.escolha-icone { font-size: 32px; }
.rapida { border: 1px solid var(--borda); border-radius: 8px; padding: 8px; display: flex; flex-direction: column; gap: 6px; }
.rapida textarea { min-height: 60px; }

/* ---------- máquina de vendas ---------- */
.canal-icone.maquina { background: #fef3c7; color: #b45309; }
html.dark .canal-icone.maquina { background: #78350f66; color: #fcd34d; }
.maquina-card { border-color: #fcd34d; }
html.dark .maquina-card { border-color: #78350f; }
.maquina-topo { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.maquina-topo > div { flex: 1; min-width: 200px; }
.automacao-numeros { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 12px; color: var(--suave); font-size: 13.5px; }
.automacao-numeros b { color: var(--texto); font-size: 16px; }
.lista-automacoes { display: flex; flex-direction: column; gap: 12px; margin-bottom: 24px; }
.lista-automacoes .card { margin: 0; }
.automacao.ligada { border-color: #86efac; }
html.dark .automacao.ligada { border-color: #166534; }
.automacao-topo { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.grade-receitas { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.grade-receitas .card { margin: 0; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.receita p { margin: 0 0 6px; flex: 1; }
#f-regra textarea { margin-top: 6px; }

/* ---------- mídias: Drive e links ---------- */
.lista-pastas { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.pasta { display: flex; gap: 12px; align-items: center; padding: 10px; border: 1px solid var(--borda); border-radius: 8px; flex-wrap: wrap; }
.pasta-fotos { display: grid; grid-template-columns: repeat(2, 36px); gap: 3px; flex-shrink: 0; }
.pasta-fotos img, .pasta-fotos span { width: 36px; height: 36px; object-fit: cover; border-radius: 4px; display: grid; place-items: center; background: var(--hover); font-size: 18px; }
.pasta-info { flex: 1; min-width: 180px; display: flex; flex-direction: column; }
.linha-link { display: grid; grid-template-columns: 1fr 1.4fr 1.6fr auto; gap: 8px; align-items: center; }
@media (max-width: 768px) { .linha-link { grid-template-columns: 1fr; padding-bottom: 8px; border-bottom: 1px solid var(--borda); } }

/* ---------- logo / avatar da empresa ---------- */
/* foto de perfil do cliente (WhatsApp); a inicial fica por baixo se a foto não carregar */
.avatar { position: relative; overflow: hidden; }
.avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
.avatar.grande { width: 64px; height: 64px; font-size: 26px; }
.avatar.mini { width: 24px; height: 24px; font-size: 11px; }
a > .avatar { display: grid; }
.chip-local { background: #eef6ff; color: #1e40af; border-color: #bfdbfe; }
html.dark .chip-local { background: #172554; color: #bfdbfe; border-color: #1e3a8a; }
.lead-quem { display: flex; align-items: center; gap: 14px; }
.lead-quem h1 { margin: 0; }
.celula-lead { display: flex; align-items: center; gap: 10px; }
.celula-lead .avatar.mini { width: 32px; height: 32px; font-size: 13px; }
.cartao-quem { display: flex; align-items: center; gap: 8px; min-width: 0; }
.avatar-empresa { width: 28px; height: 28px; border-radius: 8px; object-fit: cover; flex-shrink: 0; display: inline-grid; place-items: center; color: #fff; font-weight: 700; font-size: 12px; background: var(--hover); }
.avatar-empresa.grande { width: 56px; height: 56px; border-radius: 14px; font-size: 20px; }
.empresa-menu { display: flex; align-items: center; gap: 10px; margin: 18px 0 6px; padding: 8px 12px; border-radius: 8px; text-decoration: none; font-weight: 600; background: var(--hover); flex-shrink: 0; }
.empresa-menu span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.titulo-empresa { display: flex; align-items: center; gap: 14px; }
.logo-botao { position: relative; padding: 0; border: 0; background: none; border-radius: 14px; }
.logo-lapis { position: absolute; right: -4px; bottom: -4px; width: 22px; height: 22px; border-radius: 50%; background: var(--superficie); border: 1px solid var(--borda); font-size: 12px; display: grid; place-items: center; }
.logo-editar { display: flex; gap: 14px; align-items: center; padding: 12px; border: 1px solid var(--borda); border-radius: 10px; margin-bottom: 16px; }

/* ---------- cartões das empresas ---------- */
.grade-empresas { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; margin-bottom: 24px; }
.cartao-empresa {
  display: flex; flex-direction: column; gap: 16px; padding: 20px; border: 1px solid var(--borda); border-radius: 14px;
  background: var(--superficie); text-decoration: none; transition: border-color .15s, box-shadow .15s, transform .15s; min-height: 200px;
}
.cartao-empresa:hover { border-color: var(--suave); box-shadow: 0 6px 20px rgba(15,23,42,.08); transform: translateY(-1px); }
.cartao-empresa.pausada { opacity: .65; }
.cartao-empresa-topo { display: flex; gap: 14px; align-items: center; }
.cartao-empresa-nome { display: flex; flex-direction: column; min-width: 0; }
.cartao-empresa-nome strong { font-size: 18px; letter-spacing: -0.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cartao-empresa-numeros { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 12px 0; border-top: 1px solid var(--borda); border-bottom: 1px solid var(--borda); }
.cartao-empresa-numeros div { display: flex; flex-direction: column; gap: 2px; }
.cartao-empresa-numeros .rotulo { font-size: 11.5px; }
.cartao-empresa-numeros b { font-size: 16px; }
.cartao-empresa-rodape { display: flex; gap: 6px; flex-wrap: wrap; margin-top: auto; }
.nova-empresa { align-items: center; justify-content: center; text-align: center; border-style: dashed; border-width: 2px; cursor: pointer; font: inherit; color: inherit; }
.nova-empresa .mais { width: 48px; height: 48px; border-radius: 50%; background: var(--hover); display: grid; place-items: center; font-size: 26px; }

/* ---------- faturamento ---------- */
.variacao { margin-top: 4px; }
tr.cancelada td { opacity: .55; }
tr.cancelada td b { text-decoration: line-through; }
.grafico { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; height: 240px; }
.grafico-eixo { display: flex; flex-direction: column; justify-content: space-between; text-align: right; font-size: 11.5px; color: var(--suave); padding-bottom: 20px; margin-top: -7px; }
.grafico-area { position: relative; }
.grafico-grade { position: absolute; inset: 0 0 20px 0; display: flex; flex-direction: column; justify-content: space-between; pointer-events: none; }
.grafico-grade span { border-top: 1px solid var(--borda); }
.grafico-barras { position: absolute; inset: 0; display: flex; gap: 2px; }
.coluna-grafico { flex: 1; position: relative; display: flex; flex-direction: column; justify-content: flex-end; padding-bottom: 20px; cursor: pointer; border-radius: 4px; outline: none; }
.coluna-grafico:hover, .coluna-grafico:focus-visible { background: var(--hover); }
.barra-grafico { display: block; width: min(18px, 75%); margin: 0 auto; background: #16a34a; border-radius: 4px 4px 0 0; }
.dia-grafico { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); font-size: 11px; color: var(--suave); white-space: nowrap; }
.valor-topo { position: absolute; left: 50%; transform: translateX(-50%); font-size: 11.5px; font-weight: 600; color: var(--texto); white-space: nowrap; }
.dica-grafico { position: absolute; top: -8px; padding: 6px 10px; border-radius: 6px; background: #0f172a; color: #f8fafc; font-size: 12.5px; white-space: nowrap; pointer-events: none; box-shadow: 0 4px 14px rgba(0,0,0,.2); z-index: 2; }
html.dark .dica-grafico { background: #f1f5f9; color: #0f172a; }
@media (max-width: 768px) {
  .grafico { height: 200px; }
  .cartao-empresa-numeros { grid-template-columns: 1fr 1fr 1fr; }
}

.valor-topo.fim { left: auto; right: 0; transform: none; }
.valor-topo.inicio { left: 0; transform: none; }

/* respostas rápidas com mídia e aprendizados */
.rapida-pendente { font-size: 13px; padding: 6px 10px; margin-bottom: 6px; border-radius: 6px; background: var(--ok-fundo); color: var(--ok-texto); }
.rapida select { width: 100%; }
.varredura-andamento { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; border-color: #93c5fd; }
.varredura-andamento .rotulo { flex-basis: 100%; }

/* modo teste */
.modo-teste.ligado { border-color: #fcd34d; }
html.dark .modo-teste.ligado { border-color: #78350f; }
.faixa-teste { margin: -4px 0 12px; padding: 8px 12px; border-radius: 8px; background: var(--aviso-fundo); color: var(--aviso-texto); font-size: 13.5px; }
.faixa-teste a { font-weight: 600; }

/* ---------- balões iguais ao WhatsApp ---------- */
.conversa { gap: 2px; padding: 14px 6%; background-color: #efeae2;
  background-image: radial-gradient(rgba(0,0,0,.035) 1px, transparent 1px); background-size: 18px 18px; }
.conversa .msg { position: relative; max-width: min(65%, 520px); padding: 6px 7px 8px 9px; border-radius: 7.5px;
  font-size: 14.2px; line-height: 19px; color: #111b21; white-space: normal; word-break: break-word;
  box-shadow: 0 1px .5px rgba(11,20,26,.13); }
.conversa .msg.entrada { align-self: flex-start; background: #fff; }
.conversa .msg.saida { align-self: flex-end; background: #d9fdd3; }
.conversa .msg.cauda { margin-top: 8px; }
.conversa .msg.entrada.cauda { border-top-left-radius: 0; }
.conversa .msg.saida.cauda { border-top-right-radius: 0; }
.conversa .msg.cauda::before { content: ''; position: absolute; top: 0; width: 8px; height: 13px; }
.conversa .msg.entrada.cauda::before { left: -8px; background: #fff; clip-path: polygon(0 0, 100% 0, 100% 100%); }
.conversa .msg.saida.cauda::before { right: -8px; background: #d9fdd3; clip-path: polygon(0 0, 100% 0, 0 100%); }
.conversa .msg .msg-texto { display: inline; white-space: pre-wrap; }
.msg-rodape { float: right; margin: 6px 0 -4px 10px; font-size: 11px; line-height: 15px; color: #667781; white-space: nowrap; }
.msg-rodape .checks { color: var(--suave); letter-spacing: -3px; margin-left: 2px; }
.msg-rodape .checks.lida { color: #53bdeb; }
.msg-rodape .entrega-erro { color: #e5534b; font-size: 11px; margin-left: 4px; }
.conversa .msg .msg-origem { font-size: 12px; font-weight: 600; color: #1f7aec; margin-bottom: 1px; }
.conversa .msg.saida .msg-origem { color: #0a7a3a; }
.wa-dia { align-self: center; margin: 10px 0 4px; padding: 5px 12px; border-radius: 7.5px; background: #fff;
  color: #54656f; font-size: 12.5px; box-shadow: 0 1px .5px rgba(11,20,26,.13); text-transform: uppercase; }
.chat-ia-status { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 14px; font-size: 13.5px;
  background: var(--aviso-fundo); color: var(--aviso-texto); border-top: 1px solid var(--borda); }
.chat-ia-status.erro { background: #fde2e1; color: #9f1d1d; }
.chat-ia-status .botao { margin-left: auto; }
ul.diagnostico { list-style: none; padding: 0; margin: 10px 0; display: flex; flex-direction: column; gap: 8px; }
ul.diagnostico li { display: flex; gap: 10px; align-items: flex-start; }
ul.diagnostico li > span { flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
  font-weight: 700; font-size: 13px; background: #dcfce7; color: #15803d; }
ul.diagnostico li.ruim > span { background: #fee2e2; color: #b91c1c; }
html.dark .conversa { background-color: #0b141a; background-image: radial-gradient(rgba(255,255,255,.03) 1px, transparent 1px); }
html.dark .conversa .msg.entrada, html.dark .conversa .msg.entrada.cauda::before { background: #202c33; }
html.dark .conversa .msg.saida, html.dark .conversa .msg.saida.cauda::before { background: #005c4b; }
html.dark .conversa .msg { color: #e9edef; }
html.dark .msg-rodape { color: rgba(233,237,239,.6); }
html.dark .wa-dia { background: #182229; color: #8696a0; }
html.dark .conversa .msg .msg-origem { color: #53bdeb; }
html.dark .conversa .msg.saida .msg-origem { color: #7ee2a8; }
html.dark .chat-ia-status.erro { background: #3f1515; color: #fecaca; }
html.dark ul.diagnostico li > span { background: #14532d; color: #bbf7d0; }
html.dark ul.diagnostico li.ruim > span { background: #450a0a; color: #fecaca; }
@media (max-width: 600px) { .conversa { padding: 10px 12px; } .conversa .msg { max-width: 85%; } }
.faixa-pausada { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 16px; margin-bottom: 16px;
  border-radius: var(--raio); background: #fde2e1; color: #7f1d1d; border: 1px solid #fca5a5; font-size: 14px; }
.faixa-pausada > div { flex: 1; min-width: 220px; }
.faixa-pausada .botao, .faixa-pausada button { margin-left: auto; }
html.dark .faixa-pausada { background: #3f1515; color: #fecaca; border-color: #7f1d1d; }

/* ---------- de onde o cliente veio ---------- */
.chat-origem { padding: 6px 14px; font-size: 13px; color: var(--suave); background: var(--hover); border-bottom: 1px solid var(--borda); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-origem b { color: var(--texto); font-weight: 600; }
.chat-origem a { color: inherit; }
.origem-card { margin-top: 12px; }
.origem-fonte { font-size: 15px; }
.origem-lista { display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; margin: 12px 0 0; font-size: 13.5px; }
.origem-lista dt { color: var(--suave); }
.origem-lista dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.fontes { display: flex; flex-direction: column; gap: 8px; }
.fonte-linha { display: grid; grid-template-columns: minmax(110px, 190px) 1fr 36px; gap: 10px; align-items: center; font-size: 14px; }
.fonte-nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fonte-barra { height: 10px; border-radius: 999px; background: var(--hover); overflow: hidden; }
.fonte-barra span { display: block; height: 100%; border-radius: 999px; background: #16a34a; }
.fonte-linha b { text-align: right; font-variant-numeric: tabular-nums; }
.atalhos-secao { margin: 0 0 16px; }
.anuncio-item { border: 1px solid var(--borda); border-radius: var(--raio); padding: 12px; margin-top: 12px; display: flex; flex-direction: column; gap: 10px; }
.anuncio-topo { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.anuncio-topo input { flex: 1; min-width: 180px; font-weight: 600; }
.detectados { display: flex; flex-direction: column; gap: 8px; }
.detectado { display: flex; gap: 12px; align-items: center; justify-content: space-between; padding: 10px 12px; border-radius: 8px; background: var(--hover); }
.detectado > div { min-width: 0; }

/* ---------- avisos na conversa: venda concluída / agendado ---------- */
.wa-ticket { align-self: center; display: flex; gap: 12px; align-items: center; width: min(92%, 420px); margin: 10px 0; padding: 10px 14px;
  border-radius: 10px; background: #fff; border: 1px solid #bbf7d0; border-left: 5px solid #16a34a; box-shadow: 0 1px .5px rgba(11,20,26,.13); color: #111b21; }
.wa-ticket.agendamento { border-color: #bfdbfe; border-left-color: #2563eb; }
.wa-ticket.conferir { border-left-style: dashed; }
.wa-ticket.cancelado { opacity: .65; border-left-color: #94a3b8; border-color: var(--borda); }
.wa-ticket.cancelado .ticket-info { text-decoration: line-through; }
.ticket-icone { font-size: 24px; line-height: 1; flex-shrink: 0; }
.ticket-corpo { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.ticket-corpo b { font-size: 13px; letter-spacing: .06em; color: #15803d; }
.wa-ticket.agendamento .ticket-corpo b { color: #1d4ed8; }
.wa-ticket.cancelado .ticket-corpo b { color: #64748b; }
.ticket-info { font-size: 14.5px; font-weight: 600; overflow-wrap: anywhere; }
.ticket-corpo small { font-size: 12px; color: #667781; }
.ticket-corpo .link-botao { font-size: 12px; }
.ticket-conferir { color: #b45309; font-weight: 600; }
.ticket-chip.venda { background: #dcfce7; color: #166534; }
.ticket-chip.ag { background: #dbeafe; color: #1e40af; }
html.dark .wa-ticket { background: #1f2c33; color: #e9edef; border-color: #14532d; }
html.dark .wa-ticket.agendamento { border-color: #1e3a8a; border-left-color: #3b82f6; }
html.dark .ticket-corpo b { color: #4ade80; }
html.dark .wa-ticket.agendamento .ticket-corpo b { color: #93c5fd; }
html.dark .ticket-corpo small { color: #8696a0; }
html.dark .ticket-conferir { color: #fbbf24; }
html.dark .ticket-chip.venda { background: #14532d; color: #bbf7d0; }
html.dark .ticket-chip.ag { background: #1e3a8a; color: #bfdbfe; }

/* ---------- IAs e chaves: 3 posições ---------- */
.motor { border: 1px solid var(--borda); border-radius: var(--raio); padding: 12px; margin-top: 10px; }
.motor:first-child { border-left: 4px solid #16a34a; }
.motor-topo { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.chave-posicao { margin-top: 8px; font-size: 13.5px; }
.chave-posicao input { margin-top: 4px; }

/* ---------- biblioteca de mídias ---------- */
.abas-midia { margin: 14px 0 10px; }
.abas-midia .chip-filtro b { margin-left: 4px; font-variant-numeric: tabular-nums; }
.barra-selecao { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 10px 12px; margin-bottom: 10px; border-radius: 8px; background: var(--hover); position: sticky; top: 0; z-index: 2; }
.barra-selecao select { width: auto; padding: 5px 8px; }
.card.midia { position: relative; }
.card.midia.selecionada { outline: 2px solid #16a34a; }
.card.midia.a-configurar { border-color: #f59e0b; }
.midia-check { position: absolute; top: 8px; left: 8px; z-index: 1; background: var(--superficie); border-radius: 6px; padding: 2px 4px; box-shadow: 0 1px 3px rgba(0,0,0,.15); }
.midia-previa video { width: 100%; height: 100%; object-fit: cover; }
.midia-previa { position: relative; }
.video-convertendo { display: grid; justify-items: center; gap: 6px; font-size: 30px; opacity: .85; }
.video-convertendo small { font-size: 12px; }
.girando-emoji { display: inline-block; animation: girar 1.6s linear infinite; }
/* apagar mensagem: botão ⌄ aparece ao passar o mouse (sempre visível no celular) */
.msg { position: relative; }
.msg-menu { position: absolute; top: 2px; right: 4px; border: 0; background: inherit; color: var(--texto-suave, #667781); font-size: 16px; line-height: 1; padding: 2px 6px; border-radius: 6px; cursor: pointer; opacity: 0; transition: opacity .15s; z-index: 2; }
.msg:hover .msg-menu, .msg-menu:focus-visible { opacity: 1; }
@media (hover: none) { .msg-menu { opacity: .6; } }
.msg.apagada { opacity: .75; }
.erro-envio { color: #b91c1c; }
html.dark .erro-envio { color: #fca5a5; }
.msg.apagada .msg-texto { color: var(--texto-suave, #667781); }
.lista-clone { display: grid; gap: 8px; max-height: 60vh; overflow: auto; margin: 10px 0; }
.exemplo-clone { border: 1px solid var(--borda); border-radius: 8px; padding: 8px 10px; display: grid; gap: 4px; }
.exemplo-clone button { justify-self: start; }
.opcoes-apagar { display: grid; gap: 8px; margin: 12px 0; }
.opcoes-apagar button { display: grid; text-align: left; gap: 2px; padding: 10px 14px; }
.opcoes-apagar small { font-weight: 400; opacity: .8; font-size: 12px; }
.selo-video { position: absolute; inset: 0; display: grid; place-items: center; font-size: 28px; color: #fff; text-shadow: 0 1px 6px rgba(0,0,0,.6); pointer-events: none; }
.grande-previa { max-height: 220px; margin-bottom: 12px; border-radius: 8px; overflow: hidden; }
.grande-previa img, .grande-previa video { width: 100%; max-height: 220px; object-fit: contain; background: #000; }
.codigo-chip { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; padding: 2px 7px; border-radius: 6px; border: 1px dashed #16a34a; background: #f0fdf4; color: #166534; cursor: pointer; }
html.dark .codigo-chip { background: #052e16; color: #86efac; }
.aviso-texto { color: #b45309; font-weight: 600; }
html.dark .aviso-texto { color: #fbbf24; }
.envio-item { display: grid; grid-template-columns: minmax(0, 1fr) 160px 110px; gap: 10px; align-items: center; font-size: 13.5px; padding: 6px 0; border-bottom: 1px solid var(--borda); }
.envio-item > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.barra-envio { height: 8px; border-radius: 999px; background: var(--hover); overflow: hidden; }
.barra-envio span { display: block; height: 100%; background: #16a34a; transition: width .2s; }
.envio-item.erro [data-st] { color: #b91c1c; }
.envio-item.ok [data-st] { color: #15803d; }
@media (max-width: 600px) { .envio-item { grid-template-columns: 1fr 80px; } .envio-item [data-st] { grid-column: span 2; } }
.opcoes-ritmo { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; }
.opcao-ritmo { display: flex; gap: 10px; align-items: flex-start; padding: 12px; border: 1px solid var(--borda); border-radius: var(--raio); cursor: pointer; }
.opcao-ritmo:has(input:checked) { border-color: #16a34a; box-shadow: inset 0 0 0 1px #16a34a; }
.opcao-ritmo input { width: auto; margin-top: 3px; }
.opcao-ritmo span { display: flex; flex-direction: column; gap: 2px; }
.opcao-ritmo small { color: var(--suave); }
.linha-antigos { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 10px; font-size: 13.5px; }
.linha-antigos select { width: auto; padding: 4px 8px; }
.chat-pedidos { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 8px 14px; font-size: 13.5px; background: #f0fdf4; color: #14532d; border-bottom: 1px solid #bbf7d0; }
#linha-tempo + *, .chat-pedidos + .conversa { margin-top: 0; }
.lead-grade .chat-pedidos { border-radius: var(--raio) var(--raio) 0 0; border: 1px solid #bbf7d0; }
html.dark .chat-pedidos { background: #052e16; color: #bbf7d0; border-color: #14532d; }

/* ---------- leitura do site e UTMs ---------- */
.status-leitura { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; margin: 0 0 12px; border-radius: 8px; background: var(--hover); font-size: 14px; }
.status-leitura.bom { background: #dcfce7; color: #14532d; }
.status-leitura.ruim { background: #fef3c7; color: #78350f; }
html.dark .status-leitura.bom { background: #052e16; color: #bbf7d0; }
html.dark .status-leitura.ruim { background: #3b2f0b; color: #fde68a; }
.utm-card { margin: 12px 0; padding: 10px 12px; border: 1px solid var(--borda); border-radius: var(--raio); }
.utm-card summary { cursor: pointer; font-weight: 600; }
.utm-card h4 { margin: 14px 0 6px; font-size: 14px; }
.utm-linha { margin: 6px 0 10px; }
.utm-onde { font-size: 13.5px; margin-bottom: 4px; }
.utm-valor { display: flex; gap: 8px; align-items: center; }
.utm-valor code { flex: 1; min-width: 0; overflow-x: auto; white-space: nowrap; padding: 6px 8px; border-radius: 6px; background: var(--hover); font-size: 12.5px; }

/* ---------- menu limpo, sininho e dicas ---------- */
.empresa-menu-nome { display: flex; flex-direction: column; min-width: 0; }
.empresa-menu-nome > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tokens-hoje { font-size: 11.5px; font-weight: 500; color: var(--suave); }
.grupo-config { display: flex; align-items: center; gap: 6px; width: 100%; background: none; border: 0; cursor: pointer; text-align: left; padding-left: 12px; padding-right: 12px; }
.grupo-config .seta { margin-left: auto; }
.marca-ok, .marca-atencao, .marca-off { margin-left: auto; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; display: inline-grid; place-items: center; font-size: 11px; font-weight: 700; flex-shrink: 0; }
.grupo-config .marca-ok, .grupo-config .marca-atencao { margin-left: 4px; }
.marca-ok { background: #dcfce7; color: #15803d; }
.marca-atencao { background: #fef3c7; color: #b45309; }
.marca-off { color: var(--suave); }
html.dark .marca-ok { background: #14532d; color: #bbf7d0; }
html.dark .marca-atencao { background: #3b2f0b; color: #fbbf24; }
.sino { position: relative; font-size: 15px; }
.sino .contador-sino:not(:empty) { position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: #dc2626; color: #fff; font-size: 11px; font-weight: 700; display: grid; place-items: center; }
.lista-alertas { display: flex; flex-direction: column; gap: 10px; max-height: 60vh; overflow-y: auto; }
.alerta-item { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border: 1px solid var(--borda); border-radius: 8px; font-size: 14px; }
.alerta-item.novo { border-left: 4px solid #dc2626; }
.alerta-topo { display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.lista-dicas { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.lista-dicas li { display: flex; gap: 8px; align-items: center; font-size: 14px; }
.lista-dicas li span { flex: 1; }
.lista-dicas li.erro span { font-weight: 600; }

/* ---------- excluir empresa e tokens por empresa ---------- */
.cartao-empresa-caixa { position: relative; display: flex; }
.cartao-empresa-caixa > .cartao-empresa { flex: 1; }
.cartao-excluir { position: absolute; top: 10px; right: 10px; z-index: 1; width: 32px; height: 32px; padding: 0; border-radius: 8px; display: grid; place-items: center; font-size: 14px; opacity: .55; background: var(--superficie); }
.cartao-excluir:hover, .cartao-excluir:focus-visible { opacity: 1; border-color: #dc2626; background: #fee2e2; }
html.dark .cartao-excluir:hover { background: #450a0a; }
.tokens-tabela { margin-top: 20px; padding: 16px 20px; }
.tokens-tabela .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tokens-tabela tfoot td { border-top: 2px solid var(--borda); }

/* ---------- cronômetro dos próximos envios ---------- */
.proximos-envios { display: flex; flex-direction: column; gap: 2px; padding: 6px 14px; background: #eff6ff; border-bottom: 1px solid #bfdbfe; font-size: 13.5px; }
.lead-grade .proximos-envios { border: 1px solid #bfdbfe; border-radius: var(--raio); margin-bottom: 10px; }
.proximo { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 3px 0; }
.proximo .contagem { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-variant-numeric: tabular-nums; font-size: 14px; color: #1d4ed8; min-width: 72px; }
.proximo.por-ia .contagem { color: #7c3aed; }
.proximo-texto { flex: 1; min-width: 180px; }
.contagem-chip { background: #dbeafe; color: #1e40af; font-variant-numeric: tabular-nums; }
html.dark .proximos-envios { background: #0c1a33; border-color: #1e3a8a; }
html.dark .proximo .contagem { color: #93c5fd; }
html.dark .proximo.por-ia .contagem { color: #c4b5fd; }
html.dark .contagem-chip { background: #1e3a8a; color: #bfdbfe; }

/* assuntos das mídias e follow-up */
.assuntos-midia { margin: 10px 0 6px; }
.assuntos-linha { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.inline-form { display: inline-flex; gap: 6px; align-items: center; }
.inline-form input { width: 200px; max-width: 52vw; padding: 5px 8px; }
.etiqueta.assunto { background: #f3e8ff; color: #6b21a8; }
html.dark .etiqueta.assunto { background: #3b0764; color: #e9d5ff; }
.etiqueta.fup { background: #e0f2fe; color: #075985; }
html.dark .etiqueta.fup { background: #0c4a6e; color: #bae6fd; }
.x-chip { border: 0; background: none; padding: 0 0 0 4px; font-size: 11px; cursor: pointer; color: inherit; opacity: .7; }
.x-chip:hover { opacity: 1; }
.filtro-assunto { margin-top: 6px; }
.filtro-assunto:empty { display: none; }
.pequeno-chip { font-size: 12px; padding: 3px 9px; }
.passo-fup { border: 1px solid var(--borda); border-radius: 12px; padding: 14px; margin-bottom: 12px; background: var(--fundo-card, transparent); }
.passo-fup-topo { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; justify-content: space-between; margin-bottom: 8px; }
.passo-fup-topo .num { font-weight: 700; }
.passo-fup .tempo { display: inline-flex; gap: 6px; align-items: center; white-space: nowrap; flex-wrap: wrap; }
.passo-fup .tempo input { width: 80px; }
.midias-fup { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.fila-fup li { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--borda); }
.fila-fup { list-style: none; padding: 0; margin: 0; }

/* etiquetas na conversa, filtro por etiqueta, lista negra */
.chat-etiquetas { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 6px 14px; border-bottom: 1px solid var(--borda); font-size: 13px; }
.chip-etq { --cor: var(--suave); display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--cor) 45%, transparent); background: color-mix(in srgb, var(--cor) 12%, transparent); font-size: 12px; font-weight: 600; }
.pequeno-select { padding: 2px 6px; font-size: 12px; width: auto; }
.filtro-etiquetas { padding-top: 0; max-height: 96px; overflow-y: auto; }
.filtro-etiquetas .chip-filtro { white-space: nowrap; flex: none; }
.perigo-aviso { background: var(--perigo-fundo); color: var(--perigo); }
.lista-negra-tabela td { vertical-align: middle; }
.passo-fup .tempo select { width: auto; }

/* clone */
.clone-card.ligado { border-color: color-mix(in srgb, var(--primario) 40%, var(--borda)); }
.clone-progresso { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 14px; }
.barra-clone { flex: 1 1 180px; max-width: 320px; height: 10px; border-radius: 999px; background: var(--hover); overflow: hidden; }
.barra-clone span { display: block; height: 100%; background: var(--primario); border-radius: 999px; transition: width .3s; }

/* =====================================================================
   VISUAL 2 — estilo SaaS: tipografia Inter, superfícies brancas sobre
   fundo neutro, sombra suave, um acento (índigo) e hierarquia clara.
   (fica por cima do resto: mexer aqui muda o painel todo)
   ===================================================================== */
:root {
  --fundo: #f6f7f9;
  --superficie: #ffffff;
  --superficie-2: #f9fafb;
  --texto: #0b1220;
  --suave: #667085;
  --rotulo: #344054;
  --borda: #e7e9ee;
  --borda-campo: #d0d5dd;
  --hover: #f2f4f7;
  --primario: #111827;
  --primario-texto: #ffffff;
  --acento: #4f46e5;
  --acento-suave: #eef2ff;
  --acento-texto: #3730a3;
  --raio: 12px;
  --sombra: 0 1px 2px rgba(16, 24, 40, .04), 0 1px 3px rgba(16, 24, 40, .05);
  --sombra-alta: 0 12px 32px -8px rgba(16, 24, 40, .14), 0 4px 8px -4px rgba(16, 24, 40, .06);
}
html.dark {
  --fundo: #0b0d12;
  --superficie: #12151c;
  --superficie-2: #161a22;
  --texto: #eef0f4;
  --suave: #98a2b3;
  --rotulo: #d0d5dd;
  --borda: #232834;
  --borda-campo: #343b4a;
  --hover: #1b202a;
  --primario: #f5f6f8;
  --primario-texto: #0b0d12;
  --acento: #818cf8;
  --acento-suave: #1e1b4b;
  --acento-texto: #c7d2fe;
  --sombra: 0 1px 2px rgba(0, 0, 0, .3);
  --sombra-alta: 0 16px 40px -8px rgba(0, 0, 0, .6);
}
body {
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 14px; letter-spacing: -0.006em; font-feature-settings: "cv11", "ss01";
}
h1 { font-size: 22px; font-weight: 650; letter-spacing: -0.022em; }
h2 { font-size: 15px; font-weight: 600; letter-spacing: -0.012em; }
h3 { font-size: 14px; font-weight: 600; }
.sub, .cabecalho .sub { color: var(--suave); font-size: 13.5px; margin: 4px 0 0; }
.rotulo { color: var(--suave); }
a { color: var(--acento-texto); text-decoration-color: color-mix(in srgb, var(--acento) 35%, transparent); text-underline-offset: 2px; }
html.dark a { color: var(--acento-texto); }

/* ---------- menu lateral ---------- */
.lateral { background: var(--superficie-2); border-right: 1px solid var(--borda); }
html.dark .lateral { background: #0e1117; }
.lateral .marca { padding: 22px 20px 18px; font-size: 16px; font-weight: 700; letter-spacing: -0.03em; }
.lateral .marca small { font-weight: 500; margin-top: 2px; }
.item-menu { padding: 7px 10px; border-radius: 8px; font-size: 13.5px; font-weight: 500; color: var(--rotulo); position: relative; }
.item-menu:hover { background: var(--hover); color: var(--texto); }
.item-menu.ativo { background: var(--superficie); color: var(--texto); box-shadow: var(--sombra); font-weight: 600; }
.item-menu.ativo::before { content: ""; position: absolute; left: -12px; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: var(--acento); }
html.dark .item-menu.ativo { background: var(--hover); }
.item-menu .icone-menu { opacity: .75; }
.item-menu.ativo .icone-menu { opacity: 1; color: var(--acento); }
.titulo-grupo { margin: 22px 0 6px; font-size: 10.5px; letter-spacing: .08em; color: color-mix(in srgb, var(--suave) 85%, transparent); }
.empresa-menu { border-radius: 10px; background: var(--superficie); box-shadow: var(--sombra); border: 1px solid var(--borda); }
html.dark .empresa-menu { background: var(--hover); }

/* ---------- conteúdo ---------- */
main { padding: 36px 40px; }
.conteudo { max-width: 1120px; }
.cabecalho { margin-bottom: 24px; }
.card { border: 1px solid var(--borda); border-radius: var(--raio); box-shadow: var(--sombra); padding: 22px 24px; margin-bottom: 16px; }
.card h2:first-child, .card > .cabecalho h2 { margin-bottom: 4px; }
.card .rotulo { line-height: 1.55; }

/* ---------- botões ---------- */
button, .botao {
  border-radius: 8px; font-weight: 600; font-size: 13.5px; letter-spacing: -0.006em;
  border: 1px solid var(--borda-campo); background: var(--superficie); color: var(--texto);
  box-shadow: 0 1px 2px rgba(16, 24, 40, .05); transition: background .12s, border-color .12s, box-shadow .12s, transform .05s;
}
button:hover, .botao:hover { background: var(--hover); }
button:active, .botao:active { transform: translateY(.5px); }
button.primario, .botao.primario { background: var(--primario); border-color: var(--primario); color: var(--primario-texto); }
button.primario:hover, .botao.primario:hover { background: color-mix(in srgb, var(--primario) 88%, var(--acento)); }
button.pequeno, .botao.pequeno { font-size: 12.5px; border-radius: 7px; }
button:focus-visible, .botao:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, a:focus-visible {
  outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--acento) 28%, transparent); border-color: var(--acento);
}
.link-botao { color: var(--acento-texto); }

/* ---------- campos ---------- */
input, select, textarea { border-radius: 8px; border-color: var(--borda-campo); font-family: inherit; }
input:focus, select:focus, textarea:focus { border-color: var(--acento); box-shadow: 0 0 0 3px color-mix(in srgb, var(--acento) 18%, transparent); outline: none; }
label { font-weight: 500; }

/* ---------- etiquetas, chips e interruptor ---------- */
.etiqueta { font-weight: 600; font-size: 11.5px; padding: 2px 8px; }
.chip-filtro { border-radius: 999px; font-weight: 500; box-shadow: none; }
.chip-filtro:not([style]).ativo, .chip-filtro[data-etiqueta=""].ativo { background: var(--primario); border-color: var(--primario); color: var(--primario-texto); }
.interruptor input:checked + .trilho { background: var(--acento) !important; }

/* ---------- números (KPIs) ---------- */
.grade-resumo { gap: 14px; }
.numero-card { padding: 18px 20px; }
.numero-card .rotulo { font-size: 12.5px; font-weight: 500; }
.numero-card .numero { font-size: 28px; font-weight: 700; letter-spacing: -0.03em; margin-top: 6px; font-variant-numeric: tabular-nums; }

/* ---------- tabelas ---------- */
table th { font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--suave); }
table tbody tr { transition: background .1s; }
tr.clicavel:hover td { background: var(--hover); }

/* ---------- balões de explicação: discretos ---------- */
.balao { border-radius: 10px; }
details.balao-dica { display: block; background: transparent; border: 0; padding: 0; margin: -10px 0 18px; }
details.balao-dica > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; color: var(--suave); padding: 4px 10px 4px 8px; border-radius: 999px; border: 1px solid var(--borda); background: var(--superficie); }
details.balao-dica > summary::-webkit-details-marker { display: none; }
details.balao-dica > summary:hover { color: var(--texto); background: var(--hover); }
details.balao-dica > summary .i { width: 16px; height: 16px; border-radius: 50%; display: inline-grid; place-items: center; font-size: 11px; font-weight: 700; background: var(--acento-suave); color: var(--acento-texto); }
details.balao-dica[open] > summary { margin-bottom: 8px; }
details.balao-dica .balao-corpo { background: var(--superficie); border: 1px solid var(--borda); border-radius: 10px; padding: 14px 16px; font-size: 13.5px; color: var(--rotulo); box-shadow: var(--sombra); }
.card details.balao-dica { margin: 4px 0 12px; }

/* ---------- seção já configurada: recolhida e esmaecida ---------- */
.card.cfg-pronto > .cfg-barra { display: flex; }
.cfg-barra {
  display: none; width: 100%; align-items: center; gap: 10px; text-align: left;
  border: 0; box-shadow: none; background: none; padding: 0; margin: 0 0 14px; cursor: pointer; font-weight: 500;
}
.cfg-barra:hover { background: none; }
.cfg-barra .cfg-ok { width: 20px; height: 20px; border-radius: 50%; display: inline-grid; place-items: center; flex: none; font-size: 11px; font-weight: 700; background: var(--ok-fundo); color: var(--ok-texto); }
.cfg-barra .cfg-ok.off { background: var(--hover); color: var(--suave); }
.cfg-barra .cfg-titulo { font-weight: 600; color: var(--texto); font-size: 14px; flex: none; }
.cfg-barra .cfg-resumo { color: var(--suave); font-size: 13px; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cfg-barra .cfg-abrir { font-size: 12.5px; font-weight: 600; color: var(--acento-texto); flex: none; }
.card.cfg-pronto.recolhido { padding: 14px 20px; background: color-mix(in srgb, var(--superficie) 70%, var(--fundo)); box-shadow: none; }
.card.cfg-pronto.recolhido > :not(.cfg-barra):not(.cfg-rapido) { display: none !important; }
/* atalho que fica visível com o cartão fechado (ex.: tempo da 1ª mensagem) */
.cfg-rapido { display: none; align-items: center; gap: 8px; flex-wrap: wrap; margin: 10px 0 0 30px; font-size: 13.5px; }
.card.cfg-pronto.recolhido > .cfg-rapido { display: flex; }
.cfg-rapido select { width: auto; min-width: 180px; }
.card.cfg-pronto.recolhido > .cfg-barra { margin: 0; opacity: .9; }
.card.cfg-pronto.recolhido:hover { background: var(--superficie); box-shadow: var(--sombra); }
.card.cfg-pronto.recolhido:hover > .cfg-barra { opacity: 1; }
@media (max-width: 768px) {
  .cfg-barra { flex-wrap: wrap; }
  .cfg-barra .cfg-resumo { flex-basis: 100%; order: 3; padding-left: 30px; white-space: normal; }
  main { padding: 64px 16px 48px; }
  .card { padding: 18px; }
}

/* ---------- empresas: destaque ---------- */
.cartao-empresa { border-radius: 14px; box-shadow: var(--sombra); transition: box-shadow .15s, transform .15s, border-color .15s; }
.cartao-empresa:hover { box-shadow: var(--sombra-alta); transform: translateY(-2px); border-color: color-mix(in srgb, var(--acento) 30%, var(--borda)); }

/* ---------- janelas ---------- */
.modal { border-radius: 14px; box-shadow: var(--sombra-alta); }
.fundo-modal { backdrop-filter: blur(2px); background: rgba(15, 18, 28, .38); }

/* ---------- cartões de empresa: o faturamento em destaque ---------- */
.secao-titulo { font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--suave); margin: 28px 0 12px; }
.grade-resumo.compacta .numero-card { padding: 14px 16px; }
.grade-resumo.compacta .numero { font-size: 22px; }
.numero small { font-size: 14px; font-weight: 500; color: var(--suave); margin-left: 2px; }
.grade-empresas { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 20px; }
.cartao-empresa { padding: 20px; gap: 16px; }
.cartao-empresa-topo { padding-right: 36px; }
.cartao-empresa-nome strong { font-size: 16.5px; font-weight: 650; }
.cartao-empresa-hero { display: flex; flex-direction: column; gap: 2px; }
.cartao-empresa-hero .rotulo { font-size: 12px; font-weight: 500; }
.cartao-empresa-hero b { font-size: 30px; font-weight: 700; letter-spacing: -0.025em; line-height: 1.15; font-variant-numeric: tabular-nums; }
.cartao-empresa-numeros { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; padding: 0; border: 1px solid var(--borda); border-radius: 10px; background: color-mix(in srgb, var(--borda) 18%, transparent); }
.cartao-empresa-numeros div { padding: 10px 12px; gap: 0; }
.cartao-empresa-numeros div + div { border-left: 1px solid var(--borda); }
.cartao-empresa-numeros b { font-size: 17px; font-weight: 650; font-variant-numeric: tabular-nums; }
.cartao-empresa-numeros .rotulo { font-size: 11.5px; }
.cartao-empresa-numeros .pede b { color: var(--acento); }
.cartao-empresa-rodape { align-items: center; gap: 14px; font-size: 12.5px; color: var(--suave); }
.ponto-canal { display: inline-flex; align-items: center; gap: 6px; }
.ponto-canal::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #cbd5e1; }
.ponto-canal.ok { color: var(--texto); }
.ponto-canal.ok::before { background: #16a34a; box-shadow: 0 0 0 3px rgba(22,163,74,.15); }
.ponto-canal.falta::before { background: #f59e0b; }
.rodape-fim { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; }
.abrir-seta { color: var(--suave); transition: transform .15s, color .15s; }
.cartao-empresa:hover .abrir-seta { color: var(--acento); transform: translateX(3px); }
.cartao-excluir { opacity: 0; border-color: transparent; background: transparent; }
.cartao-empresa-caixa:hover .cartao-excluir, .cartao-excluir:focus-visible { opacity: .7; }
.cartao-empresa.nova-empresa { border-style: dashed; box-shadow: none; background: transparent; min-height: 220px; }
@media (hover: none) { .cartao-excluir { opacity: .5; } }
@media (max-width: 768px) {
  .cartao-empresa-numeros { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cartao-empresa-hero b { font-size: 26px; }
}
.cartao-empresa, .cartao-empresa:hover { color: var(--texto); text-decoration: none; }
.cartao-empresa-numeros b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cartao-empresa-numeros .pede b { color: var(--acento); }
/* configurações prontas lado a lado viram uma lista só, discreta */
.card.cfg-pronto.recolhido { padding: 12px 20px; margin-bottom: 0; border-radius: 0; }
.card.cfg-pronto.recolhido + .card.cfg-pronto.recolhido { border-top-color: transparent; box-shadow: inset 0 1px 0 var(--borda); }
.card.cfg-pronto.recolhido:not(.recolhido + .recolhido) { border-top-left-radius: var(--raio, 12px); border-top-right-radius: var(--raio, 12px); }
.card.cfg-pronto.recolhido:not(:has(+ .card.cfg-pronto.recolhido)) { border-bottom-left-radius: var(--raio, 12px); border-bottom-right-radius: var(--raio, 12px); margin-bottom: 16px; }
.cartao-empresa-numeros div { padding: 10px; min-width: 0; }
.cartao-empresa-numeros b { font-size: 15.5px; overflow: visible; text-overflow: clip; }
/* follow-up: a edição fica recolhida numa linha de resumo */
details.fup-editar { margin-top: 10px; border: 1px solid var(--borda); border-radius: 10px; }
details.fup-editar > summary { list-style: none; display: flex; align-items: center; gap: 10px; padding: 12px 14px; cursor: pointer; }
details.fup-editar > summary::-webkit-details-marker { display: none; }
details.fup-editar > summary .rotulo { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
details.fup-editar > summary .fup-editar-titulo { font-weight: 600; font-size: 14px; flex: none; }
details.fup-editar > summary .cfg-abrir { font-size: 12.5px; font-weight: 600; color: var(--acento-texto); flex: none; }
details.fup-editar[open] > summary { border-bottom: 1px solid var(--borda); }
details.fup-editar[open] > summary .cfg-abrir { font-size: 0; }
details.fup-editar[open] > summary .cfg-abrir::after { content: 'Recolher'; font-size: 12.5px; }
details.fup-editar > :not(summary) { margin-left: 14px; margin-right: 14px; }
details.fup-editar > .acoes { margin-bottom: 14px; }
@media (max-width: 768px) { details.fup-editar > summary { flex-wrap: wrap; } details.fup-editar > summary .rotulo { flex-basis: 100%; order: 3; white-space: normal; } }
@media (max-width: 768px) {
  .cfg-barra .cfg-titulo { flex: 1 1 0; min-width: 0; }
  .card.cfg-pronto.recolhido { padding: 12px 14px; }
}
/* funil: as 5 etapas padrão cabem na tela sem rolar para o lado */
.coluna { flex: 1 1 0; min-width: 180px; }
#f-busca { flex: 0 1 380px; min-width: 0; }
.filtros { flex-wrap: wrap; }
/* barra lateral: rodapé compacto e sombra quando o menu tem mais itens para baixo */
.lateral .rodape-menu { padding: 8px 12px 10px; border-top: 1px solid var(--borda); }
.lateral .rodape-menu .item-menu { padding-top: 6px; padding-bottom: 6px; }
.lateral .versao { margin: 4px 8px 0; font-size: 11px; }
.lateral nav { mask-image: linear-gradient(to bottom, #000 calc(100% - 28px), transparent); -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 28px), transparent); padding-bottom: 24px; }
.etq-no-zap { flex: none; font-size: 12px; font-weight: 600; color: var(--ok-texto, #15803d); background: var(--ok-fundo, #dcfce7); border-radius: 999px; padding: 3px 8px; white-space: nowrap; }
.numero-card.numero-texto .numero { font-size: 17px; line-height: 1.3; padding-top: 6px; }
/* resultado do "Atualizar e conferir" das instruções */
.conferir-resultado:empty { display: none; }
.conferir-resultado { margin-top: 14px; }
.conferir-caixa { border: 1px solid var(--borda); border-left: 4px solid #16a34a; border-radius: 10px; padding: 14px 16px; background: var(--superficie); }
.conferir-caixa.atencao { border-left-color: #f59e0b; }
.cf-topo { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.cf-regras { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.cf-regras li { display: flex; gap: 10px; align-items: flex-start; }
.cf-regras li > div { display: flex; flex-direction: column; gap: 2px; font-size: 14px; }
.cf-regras li span[class^="cf-"] { flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700; }
.cf-ok { background: var(--ok-fundo, #dcfce7); color: var(--ok-texto, #15803d); }
.cf-nao { background: #fee2e2; color: #b91c1c; }
.cf-nt { background: var(--hover); color: var(--suave); }
html.dark .cf-nao { background: #450a0a; color: #fca5a5; }
.cf-sugestao { margin: 10px 0 0; padding: 10px 12px; border-radius: 8px; background: color-mix(in srgb, #f59e0b 12%, transparent); font-size: 14px; }
.cf-conversa { border-top: 1px solid var(--borda); padding: 8px 0; font-size: 14px; }
.cf-conversa p { margin: 2px 0; }
/* painel ao lado das instruções da IA */
.painel-instr { margin: -4px 0 14px; border: 1px solid var(--borda); border-radius: 10px; padding: 12px 14px; background: color-mix(in srgb, var(--borda) 15%, var(--superficie)); font-size: 13.5px; }
.pi-linhas { display: flex; flex-direction: column; gap: 7px; }
.pi-linha { display: grid; grid-template-columns: 150px 1fr; gap: 10px; align-items: baseline; }
.pi-rot { color: var(--suave); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.pi-tag { display: inline-block; font-size: 12.5px; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: var(--hover); color: var(--suave); }
.pi-tag.ok { background: var(--ok-fundo, #dcfce7); color: var(--ok-texto, #15803d); }
.pi-tag.aviso { background: color-mix(in srgb, #f59e0b 18%, transparent); color: #b45309; }
html.dark .pi-tag.aviso { color: #fbbf24; }
.pi-regra { display: inline-block; margin: 0 6px 4px 0; font-size: 12.5px; padding: 2px 8px; border: 1px solid var(--borda); border-radius: 999px; background: var(--superficie); }
.pi-hist { margin-top: 10px; }
.pi-hist summary { cursor: pointer; font-weight: 600; font-size: 13px; }
.pi-versao { border-top: 1px solid var(--borda); padding: 8px 0; }
.pi-versao pre { white-space: pre-wrap; font-family: inherit; font-size: 13px; margin: 4px 0 6px; max-height: 140px; overflow: auto; }
@media (max-width: 768px) { .pi-linha { grid-template-columns: 1fr; gap: 2px; } }
.campos > .painel-instr { grid-column: 1 / -1; }
.pi-linha > span:last-child { min-width: 0; }
/* ---------- serviços e preços (catálogo) ---------- */
.acoes-topo { display: flex; gap: 8px; flex-wrap: wrap; }
.cat-resumo { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; padding: 0; }
.cat-resumo > div { padding: 14px 18px; display: flex; flex-direction: column; gap: 2px; }
.cat-resumo > div + div { border-left: 1px solid var(--borda); }
.cat-resumo b { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; }
.cat-resumo b.cat-data { font-size: 15px; font-weight: 600; padding-top: 5px; }
.cat-filtros { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin: 6px 0 14px; }
.cat-filtros input { flex: 0 1 320px; min-width: 0; }
.cat-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.cat-item { display: flex; flex-direction: column; padding: 0; overflow: hidden; margin: 0; }
.cat-item.desligado { opacity: .6; }
.cat-midias { display: flex; gap: 4px; padding: 10px 12px 0; min-height: 58px; align-items: center; }
.cat-sem-midia { font-size: 12px; color: var(--suave); border: 1px dashed var(--borda); border-radius: 8px; padding: 14px 10px; width: 100%; text-align: center; }
.mini-midia { position: relative; width: 48px; height: 48px; border-radius: 8px; overflow: hidden; background: var(--hover); display: inline-grid; place-items: center; font-size: 20px; flex: none; border: 1px solid var(--borda); }
.mini-midia img { width: 100%; height: 100%; object-fit: cover; }
.mini-midia i { position: absolute; right: 3px; bottom: 2px; font-style: normal; font-size: 10px; font-weight: 700; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.6); }
.mini-midia.mais { font-size: 13px; font-weight: 700; color: var(--suave); }
.cat-corpo { padding: 10px 16px 12px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.cat-linha1 { display: flex; gap: 8px; align-items: center; }
.cat-nome { font-size: 16px; font-weight: 650; letter-spacing: -0.01em; }
.cat-preco { font-size: 20px; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.cat-margem { font-size: 13px; }
.margem-ok { color: var(--ok-texto); }
.margem-ruim { color: var(--perigo); }
#cat-margem-viva { display: block; margin-top: 4px; font-size: 13px; }
.periodo-vendas > div > .rotulo + b + .rotulo { display: block; font-size: 11px; }
.cat-desc { margin: 4px 0 0; font-size: 13px; color: var(--suave); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cat-rodape { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 10px 16px; border-top: 1px solid var(--borda); background: color-mix(in srgb, var(--borda) 15%, transparent); }
.cat-acoes { display: inline-flex; gap: 6px; }
.vazio-grande { text-align: center; padding: 40px 20px; }
.vazio-icone { font-size: 40px; margin-bottom: 6px; }
.segmentado { display: inline-flex; border: 1px solid var(--borda); border-radius: 10px; overflow: hidden; margin-bottom: 14px; }
.segmentado label { cursor: pointer; }
.segmentado input { display: none; }
.segmentado span { display: block; padding: 8px 18px; font-weight: 600; font-size: 14px; }
.segmentado input:checked + span { background: var(--acento); color: #fff; }
.seletor-midias { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; max-height: 260px; overflow: auto; padding: 2px; }
.opcao-midia { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px; border: 2px solid var(--borda); border-radius: 10px; background: var(--superficie); text-align: center; font-weight: 500; }
.opcao-midia .mini-midia { width: 72px; height: 72px; }
.opcao-nome { font-size: 11.5px; line-height: 1.25; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.opcao-check { position: absolute; top: 4px; right: 4px; width: 20px; height: 20px; border-radius: 50%; background: var(--acento); color: #fff; font-size: 12px; display: none; place-items: center; }
.opcao-midia.marcada { border-color: var(--acento); background: color-mix(in srgb, var(--acento) 8%, var(--superficie)); }
.opcao-midia.marcada .opcao-check { display: grid; }
.lista-importar { display: flex; flex-direction: column; gap: 6px; max-height: 50vh; overflow: auto; margin: 10px 0; }
.linha-importar { display: flex; gap: 10px; align-items: flex-start; padding: 8px 10px; border: 1px solid var(--borda); border-radius: 8px; }
@media (max-width: 768px) {
  .cat-resumo { grid-template-columns: 1fr 1fr 1fr; }
  .cat-resumo > div { padding: 10px; }
  .cat-resumo b { font-size: 18px; }
}
/* ---------- ✅ venda concluída ---------- */
.linha-pedido { display: flex; flex-direction: column; gap: 6px; padding: 10px 0; border-top: 1px solid var(--borda); }
.ops-pedido { display: flex; flex-wrap: wrap; gap: 6px; }
.op-pedido { cursor: pointer; }
.op-pedido input { position: absolute; opacity: 0; pointer-events: none; }
.op-pedido span { display: inline-block; padding: 6px 12px; border: 1px solid var(--borda); border-radius: 999px; font-size: 13px; font-weight: 600; background: var(--superficie); }
.op-pedido input:checked + span { background: var(--acento); border-color: var(--acento); color: #fff; }
.op-pedido input:focus-visible + span { outline: 2px solid var(--acento); outline-offset: 2px; }
.op-pedido.desabilitada { cursor: not-allowed; opacity: .5; }
.caixa-ok { padding: 10px 12px; border-radius: 8px; background: var(--ok-fundo, #dcfce7); color: var(--ok-texto, #15803d); }
.ticket-trecho { display: block; font-size: 12.5px; font-style: italic; color: var(--suave); margin-top: 2px; }
/* ---------- agendamentos (agenda simples) ---------- */
.ag-abas { margin: 6px 0 14px; }
.ag-lista { padding: 0; overflow: hidden; }
.ag-dia { padding: 10px 18px; font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--suave); background: color-mix(in srgb, var(--borda) 25%, transparent); border-top: 1px solid var(--borda); }
.ag-dia:first-child { border-top: 0; }
.ag-dia.hoje { color: var(--acento); }
.ag-linha { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto auto; gap: 14px; align-items: center; padding: 12px 18px; border-top: 1px solid var(--borda); }
.ag-dia + .ag-linha { border-top: 0; }
.ag-hora { font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.ag-quem { display: flex; gap: 10px; align-items: center; min-width: 0; }
.ag-quem > div { display: flex; flex-direction: column; min-width: 0; }
.ag-quem strong, .ag-quem .rotulo { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ag-tags { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.ag-acoes { display: flex; gap: 6px; }
.ag-linha.passados .ag-hora, .ag-linha.cancelados .ag-hora { color: var(--suave); }
.ag-linha.cancelados .ag-quem strong { text-decoration: line-through; color: var(--suave); }
.contador-agenda { background: var(--acento) !important; }
@media (max-width: 768px) {
  .ag-linha { grid-template-columns: 52px minmax(0, 1fr) auto; }
  .ag-tags { grid-column: 2 / -1; justify-content: flex-start; }
  .ag-hora { font-size: 15px; }
}
.aviso-desligado { margin: 0 0 10px; padding: 10px 12px; border-radius: 8px; background: color-mix(in srgb, #f59e0b 14%, transparent); font-size: 14px; }
/* ---------- funil desenhado (Leads) ---------- */
.leads-layout { display: grid; grid-template-columns: minmax(0, 1fr) 264px; gap: 16px; align-items: start; }
.leads-layout > * { min-width: 0; }
.leads-layout .coluna { min-width: 165px; }
.funil-lateral { position: sticky; top: 16px; display: flex; flex-direction: column; gap: 12px; }
.funil-card { margin: 0; padding: 16px; }
.funil-svg { width: 100%; height: auto; display: block; overflow: visible; }
.camada-funil { cursor: pointer; outline: none; }
.camada-funil path { fill: var(--acento); transition: filter .15s, transform .15s; transform-origin: center; transform-box: fill-box; }
.camada-funil:hover path, .camada-funil:focus-visible path { filter: brightness(1.12) saturate(1.1); transform: scale(1.02); }
.funil-num { fill: #fff; font-size: 19px; font-weight: 800; text-anchor: middle; font-variant-numeric: tabular-nums; pointer-events: none; }
.funil-nome { fill: rgba(255,255,255,.92); font-size: 10.5px; font-weight: 600; text-anchor: middle; pointer-events: none; }
.funil-conv { margin: 12px 0 0; text-align: center; }
.funil-perda { margin: 0; display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; width: 100%; border-style: dashed; color: #b91c1c; background: color-mix(in srgb, #ef4444 6%, var(--superficie)); font-weight: 600; text-align: left; }
.funil-perda b { font-size: 20px; }
html.dark .funil-perda { color: #fca5a5; }
.coluna.piscar { animation: piscar-coluna 1.2s ease; }
@keyframes piscar-coluna { 0%, 100% { box-shadow: none; } 30% { box-shadow: 0 0 0 3px var(--acento); } }
@media (max-width: 1100px) {
  .leads-layout { grid-template-columns: minmax(0, 1fr); }
  .funil-lateral { position: static; order: -1; flex-direction: row; flex-wrap: wrap; }
  .funil-card { flex: 1 1 260px; }
  .funil-perda { flex: 0 0 auto; width: auto; align-self: flex-start; gap: 14px; }
}
.funil-perda span { display: flex; flex-direction: column; gap: 2px; }
.funil-perda small { font-weight: 500; font-size: 11.5px; color: var(--suave); }
.funil-perda.alvo { outline: 2px dashed #ef4444; outline-offset: 2px; }
.lista-perdidos { display: flex; flex-direction: column; gap: 4px; max-height: 60vh; overflow: auto; margin: 6px 0; }
.linha-perdido { display: flex; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 8px; color: var(--texto); text-decoration: none; }
.linha-perdido:hover { background: var(--hover); }
.linha-perdido > span { display: flex; flex-direction: column; min-width: 0; }

/* 📸 sugestão de mídia na conversa */

/* 🔁 follow-up: lista simples, editor com prévia do WhatsApp */
.lista-seq-fup { display: grid; gap: 8px; margin-top: 10px; }
.seq-fup-linha { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--borda); border-radius: 10px; background: var(--superficie); flex-wrap: wrap; }
.seq-fup-linha.desligada { opacity: .7; }
.seq-fup-info { flex: 1; min-width: 200px; display: flex; flex-direction: column; gap: 2px; }
.seq-fup-midias { display: flex; gap: 4px; }
.seq-fup-midias img, .seq-fup-midias .mini-icone { width: 34px; height: 34px; border-radius: 6px; object-fit: cover; }
.mini-icone { display: inline-grid; place-items: center; background: var(--hover); font-size: 18px; border-radius: 6px; }
.fup-editor-colunas { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 18px; align-items: start; }
.fup-editor-dir { position: sticky; top: 12px; }
@media (max-width: 960px) { .fup-editor-colunas { grid-template-columns: minmax(0, 1fr); } .fup-editor-dir { position: static; } }
.msg-fup { border: 1px solid var(--borda); border-radius: 10px; padding: 10px; margin-bottom: 8px; background: var(--superficie); }
.msg-fup-topo { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 6px; }
.msg-fup-topo > b { width: 24px; height: 24px; border-radius: 50%; display: inline-grid; place-items: center; background: var(--acento); color: #fff; font-size: 13px; }
.msg-fup-topo input[type=number] { width: 64px; flex: none; }
.msg-fup-topo select { width: auto; flex: none; }
.msg-fup-acoes { margin-left: auto; display: flex; gap: 2px; }
.icone-botao { border: 0; background: transparent; cursor: pointer; padding: 4px 6px; border-radius: 6px; font-size: 14px; color: var(--texto); }
.icone-botao:hover { background: var(--hover); }
.icone-botao.perigo:hover { background: #fee2e2; }
.var-fup { display: grid; grid-template-columns: 1fr auto; gap: 2px 4px; margin-bottom: 6px; }
.var-fup-rotulo { grid-column: 1 / -1; font-size: 11px; color: var(--suave); }
.var-fup textarea { width: 100%; }
.msg-fup-midias { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.mini-escolhida { position: relative; }
.mini-escolhida img, .mini-escolhida .mini-icone { width: 52px; height: 52px; border-radius: 8px; object-fit: cover; display: block; }
.mini-escolhida button { position: absolute; top: -6px; right: -6px; width: 20px; height: 20px; border-radius: 50%; border: 0; background: #111827; color: #fff; font-size: 11px; cursor: pointer; }
.mini-add { width: 52px; height: 52px; border-radius: 8px; border: 1px dashed var(--borda-campo); background: transparent; cursor: pointer; font-size: 12px; color: var(--suave); }
.grade-escolha-midia { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; max-height: 55vh; overflow: auto; }
.item-escolha-midia { position: relative; border: 2px solid transparent; border-radius: 10px; padding: 4px; background: var(--hover); cursor: pointer; display: flex; flex-direction: column; gap: 4px; text-align: left; min-width: 0; align-items: stretch; justify-content: flex-start; }
.item-escolha-midia img, .item-escolha-midia .mini-icone { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 8px; font-size: 30px; }
.item-escolha-midia.marcada { border-color: var(--acento); }
.nome-mini { font-size: 12px; line-height: 1.3; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.cod-mini { display: block; font-size: 11px; color: var(--suave); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.midia-fup-info .rotulo { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.lista-midias-fup { list-style: none; margin: 8px 0 6px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.midia-fup-item { display: flex; align-items: center; gap: 8px; padding: 6px; border: 1px solid var(--borda-campo); border-radius: 10px; }
.midia-fup-item img, .midia-fup-item .mini-icone { width: 44px; height: 44px; flex: none; border-radius: 8px; object-fit: cover; }
.midia-fup-ordem { flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--acento); color: #fff; display: grid; place-items: center; font-size: 12px; font-weight: 600; }
.midia-fup-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.midia-fup-nome { font-size: 13px; line-height: 1.3; overflow-wrap: anywhere; }
.midia-fup-acoes { flex: none; display: flex; gap: 2px; }
.check-mini { position: absolute; top: 8px; right: 8px; background: var(--acento); color: #fff; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; }
/* prévia estilo WhatsApp (cores do app) */
.wa-celular-fup { border: 1px solid var(--borda); border-radius: 16px; overflow: hidden; background: #efeae2; }
.wa-topo-fup { display: flex; align-items: center; gap: 8px; padding: 8px 10px; background: #008069; color: #fff; }
.wa-topo-fup small { display: block; opacity: .85; font-size: 11px; }
.wa-corpo-fup { padding: 10px; min-height: 300px; max-height: 62vh; overflow: auto; display: flex; flex-direction: column; gap: 4px; color: #111b21; }
.wa-sep-fup { align-self: center; background: #fff; color: #54656f; font-size: 11px; padding: 2px 8px; border-radius: 6px; margin: 8px 0 2px; box-shadow: 0 1px .5px rgba(0,0,0,.13); }
.wa-var-fup { align-self: flex-end; display: flex; gap: 4px; }
.wa-var-fup button { border: 0; font-size: 10px; padding: 1px 6px; border-radius: 8px; background: rgba(255,255,255,.7); color: #54656f; cursor: pointer; }
.wa-var-fup button.ativo { background: #008069; color: #fff; }
.wa-bolha-fup { align-self: flex-end; max-width: 85%; background: #d9fdd3; border-radius: 8px 0 8px 8px; padding: 6px 8px 14px; position: relative; font-size: 14px; line-height: 1.35; box-shadow: 0 1px .5px rgba(0,0,0,.13); word-wrap: break-word; }
.wa-bolha-fup.midia { padding: 3px; }
.wa-bolha-fup.midia img { display: block; max-width: 220px; max-height: 220px; border-radius: 6px; }
.wa-arquivo-fup { padding: 10px; font-size: 13px; }
.wa-hora-fup { position: absolute; right: 6px; bottom: 2px; font-size: 10px; color: #667781; }
.wa-rodape-fup { background: #f0f2f5; padding: 6px 10px; font-size: 12px; color: #54656f; }
.wa-rodape-fup input { width: 120px; margin-left: 4px; padding: 2px 6px; font-size: 12px; }

/* menu: busca e grupos (tudo à vista) */
.busca-menu { padding: 6px 10px 2px; }
.busca-menu input { width: 100%; padding: 7px 10px; border-radius: 9px; border: 1px solid var(--borda-campo); background: var(--superficie); color: var(--texto); font-size: 13px; }
.grupo-menu[hidden], #menu a[hidden] { display: none !important; }

/* gastos (Faturamento) */
.grupo-gastos { display:flex; gap:10px; align-items:center; justify-content:space-between; flex-wrap:wrap; padding:10px 12px; border-radius:10px; background:var(--fundo-suave, rgba(127,127,127,.08)); margin-bottom:12px; font-size:14px; }
.grupo-gastos.ligado { border-left:3px solid #25d366; }
.gastos-numeros .numero-card.gasto .numero { color:#d9534f; }
.gastos-numeros .numero-card.lucro .numero { color:#1e9e57; }
.gastos-numeros .numero-card.prejuizo .numero { color:#d9534f; }
.gastos-categorias { display:flex; flex-direction:column; gap:6px; }
.cat-gasto { display:grid; grid-template-columns:minmax(90px,170px) 1fr auto 42px; gap:10px; align-items:center; font-size:14px; }
.cat-gasto .cat-nome { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cat-barra { height:10px; border-radius:6px; background:rgba(127,127,127,.15); overflow:hidden; }
.cat-barra span { display:block; height:100%; background:#e8833a; border-radius:6px; }
.gastos-lista summary { cursor:pointer; font-weight:600; }
.gastos-lista table { margin-top:8px; }
.lista-grupos { max-height:300px; overflow:auto; display:flex; flex-direction:column; gap:4px; }
.item-grupo { display:flex; gap:10px; align-items:center; padding:8px 10px; border-radius:8px; cursor:pointer; }
.item-grupo:hover { background:rgba(127,127,127,.08); }
.item-grupo small { opacity:.7; margin-left:6px; }
@media (max-width:600px) { .cat-gasto { grid-template-columns:90px 1fr auto; } .cat-gasto .rotulo { display:none; } }

/* mídias conectadas ao prompt: modo teste, log, eventos */
.detalhes-ia { display:flex; flex-direction:column; gap:6px; font-size:13px; margin-top:6px; }
.msg.detalhes { background:transparent; border:1px dashed rgba(127,127,127,.35); max-width:100%; align-self:stretch; }
.cod-det { display:inline-block; font-family:ui-monospace,Menlo,monospace; font-size:12px; padding:1px 6px; border-radius:6px; background:rgba(127,127,127,.14); }
.cod-det.midia { background:rgba(37,211,102,.16); }
.cod-det.controle { background:rgba(80,120,255,.16); }
.cod-det.desconhecido { background:rgba(217,83,79,.18); }
.midias-det { display:flex; flex-direction:column; gap:6px; }
.midia-det { display:flex; gap:8px; align-items:center; padding:6px 8px; border-radius:8px; background:rgba(127,127,127,.07); }
.midia-det img { width:44px; height:44px; object-fit:cover; border-radius:6px; flex-shrink:0; }
.midia-det .ic { width:44px; text-align:center; font-size:22px; flex-shrink:0; }
.midia-det.erro { background:rgba(217,83,79,.12); border-left:3px solid #d9534f; }
.midia-det.aviso { background:rgba(240,173,78,.14); border-left:3px solid #f0ad4e; }
.midia-det.ok { border-left:3px solid #25d366; }
.det-erro { padding:8px 10px; border-radius:8px; background:rgba(217,83,79,.12); color:inherit; border-left:3px solid #d9534f; }
.det-erro.forte { font-weight:500; margin:8px 0; }
.det-erro ul { margin:6px 0; padding-left:18px; font-weight:400; }
.det-aviso { padding:8px 10px; border-radius:8px; background:rgba(240,173,78,.14); border-left:3px solid #f0ad4e; margin:4px 0; }
.bruto-ia { white-space:pre-wrap; word-break:break-word; font-size:12px; background:rgba(127,127,127,.08); padding:8px; border-radius:6px; max-height:260px; overflow:auto; margin:6px 0 0; }
.eventos-teste { display:flex; flex-wrap:wrap; gap:6px; align-items:center; padding:6px 10px; }
.modal.modal-largo { max-width:720px; width:calc(100% - 32px); }
.modal-teste .card.teste { margin:0; box-shadow:none; }
.lista-eventos-ia { display:flex; flex-direction:column; gap:10px; }
.evento-ia { display:grid; grid-template-columns:1fr auto; gap:2px 12px; align-items:center; padding:8px 10px; border-radius:8px; background:rgba(127,127,127,.06); }
.evento-ia small { grid-column:1 / -1; }
.tempo-evento input { width:80px; display:inline-block; }
.lista-log-ia { display:flex; flex-direction:column; gap:6px; max-height:560px; overflow:auto; }
.log-ia { padding:8px 10px; border-radius:8px; background:rgba(127,127,127,.06); }
.log-ia summary { cursor:pointer; font-size:14px; }
.log-ia.com-erro { border-left:3px solid #d9534f; background:rgba(217,83,79,.08); }
.log-ia.com-aviso { border-left:3px solid #f0ad4e; }
.log-texto { margin:4px 0; max-width:100%; white-space:pre-wrap; }
@media (max-width:600px) { .evento-ia { grid-template-columns:1fr; } }

/* mídias citadas no prompt */
.lista-pend { display:flex; flex-direction:column; gap:12px; max-height:62vh; overflow:auto; }
.pend-prompt { padding:12px; border-radius:10px; background:rgba(127,127,127,.06); border-left:3px solid #f0ad4e; }
.pend-prompt.resolvida { border-left-color:#25d366; opacity:.85; }
.pend-tipo { font-weight:600; }
.pend-tipo.inexistente { color:#d9534f; }
.pend-trecho { margin:8px 0 0; padding:8px 10px; border-left:3px solid rgba(127,127,127,.35); background:rgba(127,127,127,.06); border-radius:6px; font-style:italic; }
.pend-trecho mark { background:rgba(240,173,78,.45); color:inherit; padding:0 2px; border-radius:3px; font-style:normal; }
.sug-pend { display:flex; flex-direction:column; gap:6px; margin-bottom:8px; }
.sug-pend-item { display:flex; gap:8px; align-items:center; padding:6px 8px; border-radius:8px; background:rgba(127,127,127,.06); cursor:pointer; }
.sug-pend-item img { width:40px; height:40px; object-fit:cover; border-radius:6px; }
.sug-pend-item .ic { width:40px; text-align:center; font-size:20px; }
.linha-pend { display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.linha-pend select { flex:1 1 220px; min-width:0; }
.pend-res { margin-top:6px; font-size:14px; }
.pend-resumo { display:flex; flex-wrap:wrap; gap:8px; align-items:center; justify-content:space-between; }

/* horários que a IA pode agendar */
.hia-form { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 10px; }
.hia-form .campo { flex: 1; min-width: 160px; margin: 0; }
.hia-dia { margin-top: 8px; }
.hia-dia > b { display: block; font-size: 13px; text-transform: capitalize; margin-bottom: 4px; }
.hia-vaga { display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px; border-radius: 999px; font-size: 13px; border: 1px solid var(--borda, #ddd); }
.hia-vaga.livre { background: #e7f7ee; border-color: #8fd3ab; color: #14532d; }
.hia-vaga.ocupado { background: #fdecec; border-color: #f2a5a5; color: #7f1d1d; }
.hia-vaga.passou { opacity: .5; }
html.dark .hia-vaga.livre { background: #12301f; color: #a7f3c4; }
html.dark .hia-vaga.ocupado { background: #3a1616; color: #fecaca; }

/* agendamentos em cards */
.ag-grupo { margin-bottom: 22px; }
.ag-grupo-titulo { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--suave); }
.ag-grupo-titulo span { font-size: 11px; padding: 1px 8px; border-radius: 999px; background: var(--hover); color: var(--rotulo); }
.ag-grupo-titulo.hoje { color: var(--acento); }
.ag-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 14px; }
.ag-card { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 16px 16px 14px 18px; background: var(--superficie); border: 1px solid var(--borda); border-radius: 14px; box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 4px 14px rgba(15,23,42,.05); transition: box-shadow .15s, transform .15s; overflow: hidden; }
.ag-card::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--borda-campo); }
.ag-card.st-agendado::before { background: #6366f1; }
.ag-card.st-hoje::before { background: #f59e0b; }
.ag-card.st-ok::before { background: #10b981; }
.ag-card.st-off::before { background: #ef4444; }
.ag-card:hover { box-shadow: 0 2px 4px rgba(15,23,42,.06), 0 10px 24px rgba(15,23,42,.08); transform: translateY(-1px); }
.ag-card-topo { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.ag-card-hora { display: flex; flex-direction: column; }
.ag-card-hora b { font-size: 26px; line-height: 1; font-weight: 800; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.ag-card-hora span { margin-top: 4px; font-size: 12.5px; color: var(--suave); }
.ag-status { flex: none; font-size: 11.5px; font-weight: 700; padding: 4px 10px; border-radius: 999px; background: var(--hover); color: var(--rotulo); white-space: nowrap; }
.ag-status.agendado { background: #eef2ff; color: #4338ca; }
.ag-status.hoje { background: #fef3c7; color: #92400e; }
.ag-status.ok { background: var(--ok-fundo); color: var(--ok-texto); }
.ag-status.off { background: var(--perigo-fundo); color: var(--perigo); }
html.dark .ag-status.agendado { background: #1e1b4b; color: #c7d2fe; }
html.dark .ag-status.hoje { background: #422006; color: #fde68a; }
.ag-card-cliente { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ag-card-cliente > div { display: flex; flex-direction: column; min-width: 0; }
.ag-card-cliente strong { font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ag-card-cliente span { font-size: 12.5px; color: var(--suave); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ag-card-servico { margin: 0; padding: 10px 12px; border-radius: 10px; background: var(--superficie-2); border: 1px solid var(--borda); font-size: 13.5px; line-height: 1.4; color: var(--rotulo); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.ag-card-info { display: flex; flex-wrap: wrap; gap: 6px 12px; font-size: 12px; color: var(--suave); }
.ag-card-info .ok { color: var(--ok-texto); }
.ag-card-info .erro { color: var(--perigo); }
.ag-card-acoes { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; margin-top: auto; padding-top: 12px; border-top: 1px dashed var(--borda); }
.ag-card-acoes > a, .ag-card-acoes > button { white-space: nowrap; }
.ag-card-acoes .ag-btn-fotos { grid-column: 1 / -1; }
.ag-card-acoes > a { display: inline-flex; justify-content: center; align-items: center; gap: 4px; }
.ag-btn-fotos { display: inline-flex; min-height: 38px; align-items: center; justify-content: center; gap: 6px; font-weight: 600; background: var(--primario); color: var(--primario-texto); border-color: var(--primario); }
.ag-btn-fotos em { font-style: normal; font-size: 11px; padding: 0 7px; border-radius: 999px; background: color-mix(in srgb, currentColor 22%, transparent); }
.ag-btn-fotos:disabled { background: var(--hover); color: var(--suave); border-color: var(--borda); cursor: not-allowed; }
.ag-card.cancelados .ag-card-cliente strong { text-decoration: line-through; color: var(--suave); }
.ag-card.cancelados, .ag-card.passados { opacity: .9; }
/* galeria de fotos */
.modal.modal-galeria { max-width: 760px; width: calc(100vw - 32px); padding: 18px; }
.galeria-topo { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.galeria-topo h2 { margin: 0; font-size: 17px; }
.galeria-fechar { border: 0; background: var(--hover); width: 34px; height: 34px; border-radius: 50%; padding: 0; }
.galeria-palco { position: relative; display: flex; align-items: center; justify-content: center; background: #0b1120; border-radius: 12px; min-height: 260px; overflow: hidden; }
.galeria-palco img { display: block; max-width: 100%; max-height: 62vh; object-fit: contain; }
.galeria-seta { position: absolute; top: 50%; transform: translateY(-50%); width: 42px; height: 42px; border-radius: 50%; border: 0; padding: 0; font-size: 26px; line-height: 1; background: rgba(255,255,255,.88); color: #0f172a; box-shadow: 0 2px 8px rgba(0,0,0,.25); }
.galeria-seta[data-ir="-1"] { left: 10px; }
.galeria-seta[data-ir="1"] { right: 10px; }
.galeria-legenda { display: flex; flex-direction: column; gap: 4px; margin: 10px 2px 0; font-size: 12.5px; color: var(--suave); }
.galeria-desc { color: var(--rotulo); }
.galeria-miniaturas { display: flex; gap: 8px; margin-top: 12px; overflow-x: auto; padding-bottom: 4px; }
.galeria-miniaturas button { flex: none; padding: 0; width: 64px; height: 64px; border-radius: 8px; overflow: hidden; border: 2px solid transparent; opacity: .65; background: none; }
.galeria-miniaturas button.ativa { border-color: var(--acento, #6366f1); opacity: 1; }
.galeria-miniaturas img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 520px) { .ag-grade { grid-template-columns: 1fr; } .ag-card-hora b { font-size: 22px; } }

/* configuração rápida da mídia "a configurar" */
.config-rapida { display: grid; gap: 8px; margin-top: 10px; padding: 10px; border-radius: 10px; background: var(--aviso-fundo); border: 1px solid color-mix(in srgb, var(--aviso-texto) 25%, transparent); }
.config-rapida label { display: grid; gap: 4px; font-size: 12px; font-weight: 600; color: var(--rotulo); }
.config-rapida input { font-size: 13px; }
html.dark .config-rapida { background: #2a1d05; }
.inserir-midia { display: inline-flex; margin: 2px 0 6px; }
#lista-midia-prompt .escolha .rotulo { word-break: break-all; font-family: ui-monospace, monospace; font-size: 11.5px; }

/* mídia simples: número grande, uso pela IA e descrição na hora */
.codigo-num { align-self: flex-start; display: inline-flex; align-items: baseline; gap: 8px; margin: 8px 0 2px; padding: 4px 10px; border-radius: 8px; border: 1px dashed var(--acento); background: var(--acento-suave); color: var(--acento); font: 700 15px ui-monospace, SFMono-Regular, Menlo, monospace; cursor: pointer; }
.codigo-num span { font: 600 11px system-ui, sans-serif; opacity: .8; }
html.dark .codigo-num { background: #1e1b4b; color: #c7d2fe; }
.codigo-num-txt { font-family: ui-monospace, monospace; }
.midia-uso { font-size: 12.5px; line-height: 1.35; }
.midia-uso.ok { color: var(--ok-texto); }
.midia-uso.off { color: var(--aviso-texto); }
.midia-uso.fup { color: var(--suave); }
.midia-desc { display: flex; gap: 6px; margin-top: 6px; }
.midia-desc input { flex: 1; min-width: 0; font-size: 12.5px; padding: 6px 8px; }

/* previsão de faturamento (aba Agendamentos e Painel) */
.ag-previsao .ag-prev-topo { display: flex; flex-wrap: wrap; gap: 16px 32px; align-items: flex-end; justify-content: space-between; }
.ag-previsao .ag-prev-topo > div { display: flex; flex-direction: column; gap: 2px; }
.ag-prev-valor { font-size: 30px; line-height: 1.15; letter-spacing: -0.02em; }
.ag-prev-feito b { font-size: 18px; }
.aviso-texto { color: var(--aviso-texto); }
.ag-valor { display: flex; align-items: center; gap: 6px; width: 100%; text-align: left; padding: 7px 10px; border-radius: 10px; border: 1px dashed var(--borda); background: transparent; font-size: 13px; cursor: pointer; color: inherit; }
.ag-valor b { font-size: 14px; }
.ag-valor small { color: var(--suave); }
.ag-valor > span { margin-left: auto; color: var(--suave); }
.ag-valor:hover { border-style: solid; }
.ag-valor.vazio small { color: var(--aviso-texto); }
.ag-valor.incerto { border-color: var(--aviso-texto); }
.painel-prev b { font-size: 22px; }
@media (max-width: 640px) { .cat-resumo.painel-prev { grid-template-columns: 1fr; } .cat-resumo.painel-prev > div + div { border-left: 0; border-top: 1px solid var(--borda); } }

/* tokens: respostas × reconhecimento do CRM */
.rxc { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.rxc-lado { border: 1px solid var(--borda); border-radius: 12px; padding: 14px; background: var(--superficie-2); min-width: 0; }
.rxc-topo { display: flex; gap: 10px; align-items: flex-start; }
.rxc-topo > div { display: flex; flex-direction: column; gap: 2px; }
.rxc-icone { font-size: 22px; line-height: 1; }
.rxc-num { display: flex; flex-direction: column; margin-top: 10px; }
.rxc-num b { font-size: 26px; letter-spacing: -0.02em; }
.rxc-barra { height: 6px; border-radius: 99px; background: var(--borda); overflow: hidden; margin-top: 8px; }
.rxc-barra span { display: block; height: 100%; background: var(--primario); border-radius: 99px; }
.rxc-lista { list-style: none; margin: 10px 0 0; padding: 0; font-size: 13px; }
.rxc-lista li { display: flex; justify-content: space-between; gap: 10px; padding: 4px 0; border-top: 1px dashed var(--borda); }
.rxc-lista li span:last-child { color: var(--suave); white-space: nowrap; }
@media (max-width: 720px) { .rxc { grid-template-columns: 1fr; } }

/* horário dos envios / da IA */
.horario-linha { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 8px; padding-left: 26px; }
.horario-linha input[type=time] { width: auto; min-width: 110px; }

/* Meta Ads: conferência e guia */
.meta-conferencia { border: 1px solid var(--borda); border-radius: 10px; padding: 10px 12px; margin: 0 0 12px; }
.meta-conferencia ul { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 8px; }
.meta-conferencia li { display: flex; gap: 8px; align-items: flex-start; }
.meta-conferencia li > span { flex: none; line-height: 1.3; }
.meta-guia summary { cursor: pointer; padding: 4px 0; }
.meta-guia ul { padding-left: 18px; display: grid; gap: 6px; }
.meta-guia code { word-break: break-all; }
.texto-erro { color: var(--perigo); }

/* Faturamento: resumo do período escolhido */
.periodo-vendas { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 12px 0 4px; }
.periodo-vendas > div { display: flex; flex-direction: column; }
.periodo-vendas b { font-size: 1.15rem; }
.titulo-bloco { font-size: 14px; margin: 16px 0 6px; }
.meta-status { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-radius: 10px; background: var(--hover); }
.meta-status b { font-size: 16px; }
.meta-status.ok { background: var(--ok-fundo); color: var(--ok-texto); }
.meta-status.erro { background: #fde8e8; color: #9b1c1c; }
.meta-status.aviso { background: #fef3c7; color: #92400e; }
html.dark .meta-status.erro { background: #3b1a1a; color: #fca5a5; }
html.dark .meta-status.aviso { background: #3a2e12; color: #fcd34d; }
.meta-ligar b { font-size: 15px; }
.meta-ajuda { border: 1px solid var(--borda); border-radius: 8px; padding: 8px 12px; margin-top: 8px; }
.meta-ajuda > summary { cursor: pointer; font-weight: 600; }
.meta-ajuda ol { margin: 8px 0 0 18px; padding: 0; }
.mini-video { position: relative; display: block; width: 100%; height: 90px; border-radius: 4px; background: #111; overflow: hidden; pointer-events: none; }
.mini-video img { width: 100%; height: 100%; object-fit: cover; }
.mini-play { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-size: 26px; text-shadow: 0 1px 4px rgba(0,0,0,.6); }
.msg-start { float: right; margin: 4px 0 -4px 8px; border: 1px solid var(--borda); background: var(--superficie); color: var(--acento-texto, #4f46e5); font-size: 11px; font-weight: 700; line-height: 16px; padding: 1px 7px; border-radius: 10px; cursor: pointer; }
.msg-start:hover { background: var(--hover); }
.chat-meta { margin: 0 12px 6px; padding: 6px 10px; border-radius: 8px; background: #eef2ff; color: #3730a3; font-size: 12.5px; }
html.dark .chat-meta { background: #1e1b4b; color: #c7d2fe; }
.chat-meta code { font-size: 11.5px; }
.card-interno { border: 1px solid var(--borda, #ddd); border-radius: 10px; padding: 12px 14px; }
.lista-checagem li { margin: 3px 0; font-size: 13.5px; }
.chat-meta > div + div { margin-top: 2px; }
.chat-meta-dados { opacity: .9; }
.crit span { display: inline-block; margin: 1px 6px 1px 0; white-space: nowrap; font-size: 12.5px; }
.crit-ok { color: #15803d; }
.crit-falta { color: #b91c1c; font-weight: 600; }
html.dark .crit-ok { color: #4ade80; }
html.dark .crit-falta { color: #f87171; }
.etiqueta-status { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.etiqueta-status.ok { background: #dcfce7; color: #166534; }
.etiqueta-status.aviso { background: #fef9c3; color: #854d0e; }
.etiqueta-status.erro { background: #fee2e2; color: #991b1b; }
.etiqueta-status.off { background: #f1f5f9; color: #475569; }
html.dark .etiqueta-status.ok { background: #14532d; color: #bbf7d0; }
html.dark .etiqueta-status.aviso { background: #713f12; color: #fef08a; }
html.dark .etiqueta-status.erro { background: #7f1d1d; color: #fecaca; }
html.dark .etiqueta-status.off { background: #334155; color: #e2e8f0; }
.clone-situacoes { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 8px; margin-bottom: 14px; }
.clone-situacao { border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; }
.clone-situacao.sim { background: #dcfce7; color: #166534; }
.clone-situacao.nao { background: #f1f5f9; color: #475569; }
html.dark .clone-situacao.sim { background: #14532d; color: #bbf7d0; }
html.dark .clone-situacao.nao { background: #334155; color: #e2e8f0; }
.clone-chave { border-top: 1px solid var(--borda); padding: 10px 0 4px; }
.clone-chave .rotulo { margin: 4px 0 0 52px; }
.clone-ajustes { border-top: 1px solid var(--borda); padding-top: 10px; }
.clone-ajustes summary { cursor: pointer; font-weight: 600; }
@media (max-width: 600px) { .clone-chave .rotulo { margin-left: 0; } }
/* celular: cada coluna do funil ocupa quase a tela e encaixa ao rolar para o lado */
@media (max-width: 600px) {
  .leads-layout .coluna { flex: 0 0 82%; min-width: 0; scroll-snap-align: start; }
  .quadro { scroll-snap-type: x mandatory; }
}

/* Termos de Uso e Política de Privacidade */
.pagina-legal { max-width: 720px; margin: 0 auto; padding: 32px 16px 64px; line-height: 1.65; font-size: 15.5px; }
.pagina-legal h1 { font-size: 26px; margin: 8px 0 16px; }
.pagina-legal h2 { font-size: 17px; margin: 28px 0 8px; }
.pagina-legal ul { padding-left: 20px; }
.pagina-legal li { margin-bottom: 6px; }
.pendentes-aprovacao { border-color: color-mix(in srgb, #f59e0b 45%, var(--borda)); }
.linha-pendente { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px 0; border-top: 1px solid var(--borda); }
.acoes-pendente { display: flex; gap: 6px; }
.meta-legenda { font-size: 13px; line-height: 1.5; color: var(--suave); background: var(--hover); border-radius: 8px; padding: 10px 12px; margin: 0 0 10px; }
.meta-legenda b { color: var(--texto); }
.cartao-empresa-caixa { display: flex; flex-direction: column; }
.cartao-empresa-caixa > .cartao-empresa { flex: 1; }
.cartao-acesso { margin-top: 6px; align-self: flex-end; padding: 4px 10px; border-radius: 8px; font-size: 12.5px; font-weight: 600; background: transparent; border-color: transparent; color: var(--suave); }
.cartao-acesso:hover, .cartao-acesso:focus-visible { background: var(--superficie); border-color: #f59e0b; color: var(--texto); }
.cartao-acesso.reativar { opacity: 1; border-color: #22c55e; color: #15803d; }
html.dark .cartao-acesso.reativar { color: #86efac; }
.cartao-empresa-contas { margin: -4px 0 8px; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.meta-caminho { font-size: 13px; line-height: 1.5; border: 1px solid var(--borda); border-radius: 8px; padding: 10px 12px; margin: 0 0 10px; }
.utm-copiar { display: flex; gap: 8px; align-items: center; }
.utm-copiar code { flex: 1; min-width: 0; overflow-x: auto; white-space: nowrap; padding: 6px 8px; border-radius: 6px; background: var(--hover); font-size: 12px; }
.campanha-lead { margin-top: 8px; padding: 8px 10px; border-radius: 8px; background: var(--hover); font-size: 13.5px; line-height: 1.5; }
.campanha-venda { white-space: normal; max-width: 240px; margin-top: 2px; }
/* aba Meta Ads: abas no topo */
.abas-meta { display: flex; gap: 4px; margin: 0 0 16px; border-bottom: 1px solid var(--borda); overflow-x: auto; scrollbar-width: none; }
.abas-meta::-webkit-scrollbar { display: none; }
.aba-meta { flex-shrink: 0; border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: none; padding: 10px 14px; font-size: 14px; font-weight: 600; color: var(--suave); white-space: nowrap; margin-bottom: -1px; }
.aba-meta:hover { background: none; color: var(--texto); }
.aba-meta.ativa { color: var(--texto); border-bottom-color: var(--acento); }
.meta-numeros { margin: 12px 0 0; }
.meta-status.compacto span { display: none; }
details.meta-legenda > summary { cursor: pointer; list-style: revert; }
details.meta-legenda[open] > summary { margin-bottom: 6px; }
/* conversa: Meta Ads recolhido numa etiqueta */
details.chat-meta > summary { cursor: pointer; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; list-style: none; }
details.chat-meta > summary::-webkit-details-marker { display: none; }
.chat-meta-etiqueta { display: inline-flex; align-items: center; gap: 4px; padding: 2px 10px; border-radius: 999px; background: var(--acento-suave, #eef2ff); color: var(--acento-texto, #3730a3); font-weight: 600; font-size: 12.5px; }
details.chat-meta > summary::after { content: '▾'; color: var(--suave); font-size: 12px; }
details.chat-meta[open] > summary::after { content: '▴'; }
.chat-meta-corpo { margin-top: 6px; display: flex; flex-direction: column; gap: 3px; }
details.chat-meta:not([open]) { background: transparent; padding: 2px 0; }
html.dark details.chat-meta:not([open]) { background: transparent; }
.meta-numeros + .meta-caminho, #meta-resumo > .meta-caminho { margin-top: 12px; }
.midia-audio { width: 100%; height: 36px; margin: 4px 0; }
.midia-fala { display: flex; flex-direction: column; gap: 4px; margin-top: 4px; }
.midia-fala textarea { font-size: 13px; min-height: 64px; }
.acoes-fala { display: flex; gap: 6px; }
.ab-audio { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; padding: 8px; border-radius: 8px; border: 1px dashed var(--borda-campo); font-size: 12.5px; }
.ab-audio.ligado { border-style: solid; border-color: color-mix(in srgb, var(--acento) 45%, var(--borda)); }
.placar-ab { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 4px; }
.placar-ab > div { display: flex; flex-direction: column; padding: 6px 8px; border-radius: 8px; background: var(--hover); }
.placar-ab b { font-size: 18px; }
.placar-ab > .lider { outline: 2px solid #22c55e; }
.card.receita.ligada { border-color: color-mix(in srgb, #16a34a 45%, var(--borda)); }
.card.receita.pausada { opacity: .85; border-style: dashed; }
.receita-controle { margin-top: 8px; }

/* 🎤 Áudios: gravador do painel (feito para o polegar no celular) */
.gravador { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.gravador > p, .gravador > audio, .gravador > form, .gravador > .acoes, .gravador > .grav-status, .gravador > .grav-nivel { flex-basis: 100%; }
.gravador audio { width: 100%; }
.grav-grande { min-height: 52px; padding: 12px 22px; font-size: 16px; border-radius: 12px; }
.grav-acoes { margin-top: 4px; }
.grav-status { display: flex; align-items: center; gap: 8px; font-size: 16px; }
.gravador.gravando b { color: var(--perigo); }
.grav-tempo { margin-left: auto; font-size: 28px; font-weight: 700; font-variant-numeric: tabular-nums; }
.ponto-gravando { width: 14px; height: 14px; border-radius: 50%; background: var(--perigo); display: inline-block; animation: piscar-grav 1s infinite; }
@keyframes piscar-grav { 50% { opacity: 0.25; } }
.grav-nivel { height: 8px; border-radius: 99px; background: var(--borda); overflow: hidden; }
.grav-nivel span { display: block; height: 100%; width: 0; background: var(--perigo); border-radius: 99px; transition: width .08s linear; }
.botao-arquivo { display: inline-flex; align-items: center; justify-content: center; gap: 4px; cursor: pointer; border: 1px solid var(--borda); border-radius: 10px; padding: 10px 14px; font-weight: 600; font-size: 14px; min-height: 44px; }
.audio-card .audio-topo { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.audio-card .midia-fala textarea { width: 100%; }
@media (max-width: 768px) {
  .pagina-audios input, .pagina-audios textarea, .pagina-audios select { font-size: 16px; } /* iPhone não dá zoom ao tocar */
  .gravador .grav-grande, .gravador .botao-arquivo { width: 100%; }
  .gravador input, .gravador textarea { font-size: 16px; }
  .gravador .grav-acoes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .gravador .grav-acoes .grav-grande { grid-column: 1 / -1; }
  .gravador .grav-acoes button { min-height: 46px; margin: 0; }
  .pagina-audios .grade-midias { grid-template-columns: 1fr; }
  .pagina-audios .audio-card .acoes button, .pagina-audios .audio-card .acoes-fala button { min-height: 42px; }
  .pagina-audios .audio-card .midia-audio { height: 44px; }
}

/* 🔎 busca do painel: resultados e destaque da seção encontrada */
.busca-resultados { margin-top: 6px; display: flex; flex-direction: column; gap: 2px; max-height: 60vh; overflow-y: auto; }
.busca-item { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; text-align: left; width: 100%; border: 0; background: transparent; padding: 8px 10px; border-radius: 8px; cursor: pointer; color: var(--texto); font-size: 13px; }
.busca-item small { color: var(--suave); font-size: 11px; }
.busca-item:hover, .busca-item.ativo { background: var(--hover); }
.destaque-busca { outline: 3px solid var(--primario); outline-offset: 3px; transition: outline-color .4s; scroll-margin-top: 16px; }
@media (max-width: 768px) { .busca-item { padding: 11px 10px; font-size: 15px; } .busca-menu input { font-size: 16px; } }

/* 🔁 follow-up: cada sequência como cartão com interruptor e números */
.seq-fup-cartao { display: grid; gap: 6px; }
.seq-fup-topo { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.seq-fup-numeros { display: block; font-size: 13px; margin-top: 2px; }

/* 🔥 chance de venda (sem IA) */
.selo-temp { font-size: 11px; padding: 0 6px; border-radius: 99px; vertical-align: middle; cursor: help; }
.selo-temp.quente { background: #fee2e2; color: #b91c1c; }
.selo-temp.morno { background: #fef3c7; color: #92400e; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .selo-temp.quente { background: #4c1d1d; color: #fca5a5; } :root:not([data-theme="light"]) .selo-temp.morno { background: #45310b; color: #fcd34d; } }
:root[data-theme="dark"] .selo-temp.quente { background: #4c1d1d; color: #fca5a5; }
:root[data-theme="dark"] .selo-temp.morno { background: #45310b; color: #fcd34d; }
.chat-quem .selo-temp { align-self: flex-start; width: auto; display: inline-block; }

/* faturamento e gastos (cartão dentro do cartão): valor numa linha só no celular */
@media (max-width: 640px) {
  .gastos-numeros .numero-card .numero { font-size: clamp(16px, 4.8vw, 24px); white-space: nowrap; overflow-wrap: normal; }
  .gastos-numeros .numero-card { padding: 12px; min-width: 0; }
}

/* arrastar arquivos do computador para a conversa */
.inbox-chat { position: relative; }
.inbox-chat.soltando::after { content: attr(data-soltar); position: absolute; inset: 8px; z-index: 30; display: flex; align-items: center; justify-content: center; text-align: center; padding: 24px; border: 3px dashed var(--zap); border-radius: 14px; background: color-mix(in srgb, var(--superficie) 88%, transparent); color: var(--texto); font-size: 20px; font-weight: 700; pointer-events: none; }

/* Disparos em massa: menu do lado esquerdo (seções) + abas em cima */
.disp-casca { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 20px; align-items: start; }
.disp-menu { position: sticky; top: 12px; display: flex; flex-direction: column; gap: 4px; padding: 8px; background: var(--superficie); border: 1px solid var(--borda); border-radius: 12px; }
.disp-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 8px; color: var(--rotulo); text-decoration: none; font-weight: 600; font-size: 14px; }
.disp-item:hover { background: var(--hover); color: var(--texto); }
.disp-item.ativo { background: var(--primario); color: var(--primario-texto); }
.disp-ic { width: 22px; text-align: center; }
.disp-corpo { min-width: 0; }
.disp-abas { display: flex; gap: 4px; margin-bottom: 14px; border-bottom: 1px solid var(--borda); overflow-x: auto; scrollbar-width: none; }
.disp-abas::-webkit-scrollbar { display: none; }
.disp-aba { padding: 10px 14px; color: var(--suave); text-decoration: none; font-weight: 600; font-size: 14px; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.disp-aba:hover { color: var(--texto); }
.disp-aba.ativo { color: var(--texto); border-bottom-color: var(--primario); }
.disp-aba .rotulo { font-weight: 500; }
.lista-simples { margin: 6px 0 0; padding-left: 4px; list-style: none; display: flex; flex-direction: column; gap: 6px; }
@media (max-width: 860px) {
  .disp-casca { grid-template-columns: 1fr; gap: 12px; }
  .disp-menu { position: static; flex-direction: row; overflow-x: auto; padding: 6px; scrollbar-width: none; }
  .disp-menu::-webkit-scrollbar { display: none; }
  .disp-item { white-space: nowrap; padding: 8px 12px; }
}

/* 📋 listas de contatos (aba Disparos): ficha de cada empresa */
.previa-resumo { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; margin: 12px 0; }
.previa-resumo > div { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; }
.previa-resumo strong { font-size: 22px; }
.previa-resumo .aviso-num { background: var(--aviso-fundo); border-color: transparent; color: var(--aviso-texto); }
.previa-resumo .aviso-num .rotulo { color: inherit; }
.contato-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; }
.contato-card { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); padding: 12px 14px; display: flex; flex-direction: column; gap: 5px; min-width: 0; font-size: 14px; }
.contato-topo { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.contato-topo strong { font-size: 15px; overflow-wrap: anywhere; }
.contato-nota { white-space: nowrap; font-weight: 600; }
.contato-linha { overflow-wrap: anywhere; }
.contato-links { display: flex; flex-wrap: wrap; gap: 12px; }
.contato-chips { margin-top: 4px; }
.contato-chips .etiqueta { white-space: normal; }

/* ritmo de envio (perfis prontos) e termômetro de risco */
.perfis-envio { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 8px; }
.perfil-envio { cursor: pointer; display: flex; }
.perfil-envio input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.perfil-envio > span { flex: 1; display: flex; flex-direction: column; gap: 4px; border: 1px solid var(--borda-campo); border-radius: var(--raio); padding: 10px 12px; }
.perfil-envio input:checked + span { border-color: var(--primario); box-shadow: 0 0 0 1px var(--primario) inset; background: color-mix(in srgb, var(--primario) 6%, transparent); }
.perfil-envio input:focus-visible + span { outline: 2px solid #3b82f6; }
.perfil-numeros { font-size: 12px; font-weight: 600; color: var(--texto); }
.risco-selo { display: inline-block; font-weight: 700; padding: 6px 12px; border-radius: 999px; margin-bottom: 8px; }
.risco-baixo { background: var(--ok-fundo); color: var(--ok-texto); }
.risco-medio { background: var(--aviso-fundo); color: var(--aviso-texto); }
.risco-alto { background: var(--perigo-fundo); color: var(--perigo); }
.risco-itens li { font-size: 13px; }
.filtros-empresa { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; }
.filtros-empresa select { width: auto; min-width: 0; flex: 1 1 150px; max-width: 220px; padding: 6px 8px; font-size: 13px; }
.risco-caixa { margin-top: 12px; border: 1px solid var(--borda); border-radius: var(--raio); padding: 10px 12px; }
.caixa-perso { margin-top: 12px; border: 1px dashed var(--borda); border-radius: var(--raio); padding: 10px 12px; }
.risco-topo { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 6px; }
.risco-topo .risco-selo { margin: 0; padding: 3px 10px; font-size: 13px; }
.risco-vazio { background: var(--hover); color: var(--suave); }

/* Novo disparo em passos */
.disp-passos { list-style: none; display: flex; gap: 6px; padding: 0; margin: 0 0 14px; counter-reset: none; flex-wrap: wrap; }
.disp-passos li { flex: 1 1 0; min-width: 0; }
.disp-passos button { width: 100%; display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: var(--raio); border: 1px solid var(--borda); background: var(--superficie); color: var(--suave); font-weight: 600; font-size: 13px; text-align: left; cursor: pointer; }
.disp-passos li.ativo button { border-color: var(--primario); color: var(--texto); box-shadow: 0 0 0 1px var(--primario) inset; }
.disp-passos li.feito button { color: var(--ok-texto); }
.disp-passos li.feito .passo-num { background: var(--ok-fundo); color: var(--ok-texto); }
.disp-passos button span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.disp-nav { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--borda); }
.disp-nav .grande-botao { width: auto; flex: 1; max-width: 360px; margin: 0; }
.revisao { display: grid; grid-template-columns: max-content 1fr; gap: 10px 14px; margin: 0; }
.revisao dt { font-weight: 600; white-space: nowrap; }
.revisao dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.revisao-msg { white-space: pre-wrap; background: var(--hover); border-radius: 8px; padding: 8px 10px; margin-bottom: 4px; font-size: 14px; }
@media (max-width: 640px) {
  .disp-passos button { flex-direction: column; gap: 2px; padding: 6px 4px; font-size: 11px; text-align: center; }
  .disp-passos button span:last-child { white-space: normal; }
  .revisao { grid-template-columns: 1fr; gap: 2px; }
  .revisao dd { margin-bottom: 8px; }
}
#f-disparo [data-passo][hidden] { display: none !important; }
.disp-nav .grande-botao { white-space: nowrap; padding-left: 14px; padding-right: 14px; }
.disp-nav button { white-space: nowrap; }

/* 💰 Disparo de cobrança */
.cob-topo { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.cob-form { margin-top: 12px; border: 1px solid var(--borda); border-radius: var(--raio); padding: 12px 14px; background: var(--hover); }
.contato-card .cob-form { margin: 0; border: 0; padding: 0; background: none; }
.cob-acoes { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.cob-pausado { opacity: .65; }
.chip-botao { border: 0; cursor: pointer; font: inherit; font-size: 12px; font-weight: 600; }
.editor-cob { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 16px; align-items: start; }
.cob-previa { margin: 0; }
.cob-previa .chat { height: auto; min-height: 220px; }
@media (max-width: 900px) { .editor-cob { grid-template-columns: 1fr; } }

/* 📊 raio-x da lista e 🎯 prioridade por objetivo */
.raio-x { border: 1px solid var(--borda); background: var(--superficie); border-radius: var(--raio); padding: 10px 12px; margin: 10px 0; }
.raio-x-itens { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 6px; font-size: 13px; }
.objetivo-empresa { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 10px 0 4px; }
.ordem-empresa { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; }
.ordem-empresa select { width: auto; padding: 5px 8px; font-size: 13px; }
.etiqueta.prio-alta { background: #fee2e2; color: #b91c1c; }
.etiqueta.prio-media { background: var(--aviso-fundo); color: var(--aviso-texto); }
.etiqueta.prio-baixa { background: var(--hover); color: var(--suave); }
html.dark .etiqueta.prio-alta { background: #450a0a; color: #fca5a5; }
@media (max-width: 640px) { .ordem-empresa { margin-left: 0; } }

/* ➕ Novo disparo: escolher o tipo */
.escolha-disparo { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
.escolha-tipo { display: flex; flex-direction: column; gap: 8px; text-decoration: none; color: inherit; transition: border-color .15s, transform .15s; }
.escolha-tipo:hover { border-color: var(--texto); transform: translateY(-1px); }
.escolha-tipo b { font-size: 17px; }
.escolha-tipo .botao { align-self: flex-start; margin-top: 6px; }
.escolha-ic { font-size: 30px; }

/* 🔁 versões da mensagem */
.versoes-msg { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 4px 0 8px; }
.pequeno-select { max-width: 100%; margin-bottom: 4px; }

/* 🏆 ranking de mensagens */
.ranking-msgs { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.ranking-msg { display: flex; gap: 10px; align-items: flex-start; border: 1px solid var(--borda); border-radius: var(--raio); padding: 10px 12px; }
.ranking-msg.lider { border-color: var(--ok-texto); box-shadow: 0 0 0 1px var(--ok-texto) inset; }
.ranking-corpo { flex: 1; min-width: 0; }
.ranking-topo { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-bottom: 4px; }
.ranking-texto { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 14px; max-height: 7.5em; overflow: hidden; margin-bottom: 6px; }
.ranking-barra { height: 8px; border-radius: 99px; background: var(--borda); overflow: hidden; margin-bottom: 4px; }
.ranking-barra span { display: block; height: 100%; background: var(--ok-texto); border-radius: 99px; }
.ranking-acoes { display: flex; gap: 4px; }
.editor-simples .campo { margin-bottom: 10px; }

/* 🎯 campanhas */
.campanhas { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.campanha { display: flex; flex-direction: column; gap: 10px; }
.campanha-topo { display: flex; justify-content: space-between; gap: 8px; align-items: flex-start; }
.campanha-nome { font-size: 16px; overflow-wrap: anywhere; }
.campanha-itens { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; font-size: 14px; }
.campanha-itens li { overflow-wrap: anywhere; }
.campanha-numeros { font-size: 14px; }
.campanha .acoes { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; }
.escolha-campanha { display: block; text-decoration: none; color: inherit; margin-bottom: 14px; }
.escolha-campanha:hover { border-color: var(--texto); }
.caixa-teste { margin: 12px 0; border: 1px dashed var(--borda); border-radius: var(--raio); padding: 10px 12px; }
.resumo-campanha { display: flex; justify-content: space-between; gap: 10px; align-items: center; flex-wrap: wrap; }
.resumo-campanha .acoes { display: flex; gap: 6px; }
.uso-campanhas { margin-top: 6px; display: flex; flex-wrap: wrap; gap: 4px; align-items: center; font-size: 13px; }
.uso-campanhas a.etiqueta { text-decoration: none; }