:root{
  --altura-topo:61px;
  --fundo:#0a0c0e; --painel:#12161a; --painel2:#171c22; --borda:#242b33;
  --texto:#e6edf7; --fraco:#8b95a3; --neon:#b8ff3a; --neon-d:#5f7a1f;
  --verde:#7ee787; --amarelo:#f0c674; --laranja:#f0883e; --vermelho:#ff9a9a; --azul:#6cb6ff;
}
*{box-sizing:border-box}
body{margin:0;background:var(--fundo);color:var(--texto);
  font:14px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif}
button{font:inherit;cursor:pointer}
.topo{display:flex;align-items:center;gap:14px;padding:12px 18px;
  border-bottom:1px solid var(--borda);background:var(--painel);position:sticky;top:0;z-index:36}
.marca{font-weight:700;letter-spacing:.3px}
.marca span{color:var(--neon)}
.abas{display:flex;gap:6px;margin-left:10px}
.aba{background:transparent;border:1px solid var(--borda);color:var(--fraco);
  padding:7px 14px;border-radius:8px}
.aba.on{color:var(--neon);border-color:var(--neon-d);background:#1a2210}
.espaco{flex:1}
.eu{color:var(--fraco);font-size:12.5px}
.btn{background:transparent;border:1px solid var(--borda);color:var(--texto);
  padding:7px 12px;border-radius:8px}
.btn.primaria{background:var(--neon);border-color:var(--neon);color:#0a0c0e;font-weight:600}

.board{display:flex;gap:12px;padding:16px;overflow-x:auto;align-items:flex-start}
.coluna{background:var(--painel);border:1px solid var(--borda);border-radius:12px;
  min-width:268px;max-width:268px;padding:10px}
.coluna h3{margin:0 0 4px;font-size:12.5px;text-transform:uppercase;letter-spacing:.6px;color:var(--fraco)}
.coluna .conta{font-size:11.5px;color:var(--fraco);margin-bottom:8px}
.card{background:var(--painel2);border:1px solid var(--borda);border-radius:10px;
  padding:10px;margin-bottom:8px;cursor:pointer}
.card:hover{border-color:var(--neon-d)}
.card .nome{font-weight:600;margin-bottom:2px}
.card .linha{font-size:12px;color:var(--fraco);display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.card .prox{font-size:12px;color:var(--azul);margin-top:6px;line-height:1.3}
.tag{font-size:10.5px;padding:2px 7px;border-radius:99px;border:1px solid var(--borda);color:var(--fraco)}
.tag.anuncio{color:var(--neon);border-color:var(--neon-d)}
.tag.landing{color:var(--azul);border-color:#255}
.tag.ia{color:var(--amarelo);border-color:#5a4a1a}
/* Robô: cinza de propósito. Não é conquista nem alerta, é só o aviso de que
   alguém automático já falou ali, para ninguém mandar "oi" por cima. */
.tag.robo{color:var(--fraco);border-color:var(--borda);border-style:dashed}
.valor{color:var(--verde);font-weight:600}

/* Busca do board. Estreita quando vazia para não roubar espaço da barra, e
   abre ao focar, porque número de WhatsApp tem 13 dígitos e cortar o que a
   pessoa digitou é o jeito rápido de ela achar que a busca não funciona. */
.busca{background:var(--fundo);color:var(--texto);border:1px solid var(--borda);
  border-radius:8px;padding:6px 10px;font-size:13px;width:190px;transition:width .15s}
.busca:focus{outline:none;border-color:var(--neon-d);width:280px}
.busca::placeholder{color:var(--fraco)}
/* Quantos casaram, e o aviso de nenhum. */
.busca-conta{font-size:12px;color:var(--fraco);padding:2px 0 8px}
.busca-conta.vazio{color:var(--laranja)}
.frio{color:var(--laranja)}
.gelado{color:var(--vermelho)}

.gaveta{position:fixed;inset:0 0 0 auto;width:min(560px,100%);background:var(--painel);
  border-left:1px solid var(--borda);display:none;flex-direction:column;z-index:40}
.gaveta.aberta{display:flex}
.gaveta .cab{padding:14px 16px;border-bottom:1px solid var(--borda);display:flex;gap:10px;align-items:center}
.gaveta .cab .nome{font-weight:700;font-size:16px}
.aviso{background:#231a10;border-bottom:1px solid #4a3a1a;color:var(--amarelo);
  padding:7px 16px;font-size:12px;text-align:center}
.chat{flex:1;overflow-y:auto;padding:14px;background:#0d1116}
.bolha{max-width:76%;padding:8px 11px;border-radius:12px;margin-bottom:8px;
  font-size:13.5px;white-space:pre-wrap;word-break:break-word}
.bolha.deles{background:var(--painel2);border:1px solid var(--borda);border-bottom-left-radius:4px}
.bolha.nossa{background:#1c2e14;border:1px solid #2f4a20;margin-left:auto;border-bottom-right-radius:4px}
.bolha .hora{display:block;font-size:10.5px;color:var(--fraco);margin-top:4px}
.ficha{padding:12px 16px;border-top:1px solid var(--borda);background:var(--painel);
  display:grid;grid-template-columns:1fr 1fr;gap:8px 14px;font-size:12.5px}
.ficha b{color:var(--fraco);font-weight:500;display:block;font-size:11px}
.vazio{color:var(--fraco);padding:30px;text-align:center}

.login{max-width:340px;margin:14vh auto;background:var(--painel);border:1px solid var(--borda);
  border-radius:14px;padding:26px}
.login h1{font-size:19px;margin:0 0 18px}
.login input{width:100%;padding:10px 12px;margin-bottom:10px;background:var(--painel2);
  border:1px solid var(--borda);border-radius:8px;color:var(--texto);font:inherit}
.erro{color:var(--vermelho);font-size:12.5px;min-height:18px}

.painel{padding:16px 18px 40px;max-width:1280px;margin:0 auto;display:flex;flex-direction:column;gap:14px}
.bloco{background:var(--painel);border:1px solid var(--borda);border-radius:12px;padding:14px}
.bloco h3{margin:0 0 10px;font-size:12.5px;text-transform:uppercase;letter-spacing:.6px;color:var(--fraco)}
table{width:100%;border-collapse:collapse;font-size:13px}
th,td{text-align:left;padding:6px 4px;border-bottom:1px solid var(--borda)}
th{color:var(--fraco);font-weight:500;font-size:11.5px;text-transform:uppercase}

/* ── painel ─────────────────────────────────────────────────────────────── */
.p-topo{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap}
.p-topo h2{margin:0;font-size:20px;letter-spacing:.2px}
.p-topo .sub{margin:4px 0 0;color:var(--fraco);font-size:12.5px;max-width:62ch;line-height:1.5}
.p-topo .sub b{color:var(--texto);font-weight:600}
.pills{display:flex;gap:6px}
.pill{background:transparent;border:1px solid var(--borda);color:var(--fraco);
  padding:6px 13px;border-radius:99px;font-size:12.5px}
.pill.on{color:var(--neon);border-color:var(--neon-d);background:#1a2210}

.secao{margin:8px 0 -4px;font-size:11.5px;text-transform:uppercase;letter-spacing:1px;color:var(--fraco)}

.kpis{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(212px,1fr))}
.kpi{background:var(--painel);border:1px solid var(--borda);border-radius:12px;padding:14px 15px;
  position:relative;overflow:hidden}
.kpi::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--borda)}
.kpi.bom::before{background:var(--neon)}
.kpi.atencao::before{background:var(--amarelo)}
.kpi.ruim::before{background:var(--vermelho)}
.kpi-rot{font-size:11.5px;text-transform:uppercase;letter-spacing:.7px;color:var(--fraco)}
.kpi-val{font-size:27px;font-weight:650;line-height:1.25;margin:3px 0 2px;
  font-variant-numeric:tabular-nums}
.kpi-val.alerta{color:var(--vermelho)}
.kpi-pe{font-size:12px;color:var(--fraco);line-height:1.4}
.var{font-weight:600}
.var.sobe{color:var(--verde)} .var.desce{color:var(--vermelho)} .var.neutra{color:var(--fraco);font-weight:400}
.fraco{color:var(--fraco)}
.alerta{color:var(--vermelho)}
.vazio{color:var(--fraco);font-size:12px;margin:6px 0 0;line-height:1.5}

.dois{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(330px,1fr));align-items:start}

/* gráfico de barras, sem biblioteca: a CSP não deixa carregar script de fora */
.graf{display:flex;align-items:flex-end;gap:2px;height:210px;padding:4px 0 0}
.gcol{flex:1;height:100%;display:flex;align-items:flex-end;min-width:2px}
.gbar{width:100%;background:var(--neon);border-radius:2px 2px 0 0;opacity:.85;transition:opacity .12s}
.gbar:hover{opacity:1}
.gbar.zero{background:var(--borda)}
.graf-pe{display:flex;justify-content:space-between;color:var(--fraco);font-size:11.5px;margin-top:6px}

.fase{display:grid;grid-template-columns:118px 1fr 46px 46px 84px;align-items:center;gap:10px;margin-bottom:7px}
.fase-cab{margin-bottom:4px}
.fase-cab .fase-pass,.fase-cab .fase-tot{font-size:10px;line-height:1.15;opacity:.65}
.fase-nome{font-size:12.5px;color:var(--fraco)}
.fase-barra{position:relative;background:var(--painel2);border-radius:5px;height:22px;display:flex;align-items:center}
.fase-barra i{position:absolute;left:0;top:0;bottom:0;background:linear-gradient(90deg,var(--neon-d),var(--neon));
  border-radius:5px;opacity:.55}
.fase-barra b{position:relative;padding-left:8px;font-size:12.5px;font-variant-numeric:tabular-nums}
.fase-pass{font-size:12px;color:var(--fraco);text-align:right;font-variant-numeric:tabular-nums}
/* Porcentagem sobre o total de leads. Fica em cor forte porque e a leitura
   que o dono do negocio faz primeiro: quanto sobrou do que entrou. */
.fase-tot{font-size:12px;color:var(--texto);text-align:right;font-variant-numeric:tabular-nums}
.fase-val{font-size:12.5px;color:var(--verde);text-align:right;font-variant-numeric:tabular-nums}

.tres{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;text-align:center;margin-bottom:4px}
/* Quatro números só cabem lado a lado em tela grande; no celular viram 2x2, que
   é melhor que quatro colunas espremidas com o número quebrando em duas linhas. */
.quatro{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;text-align:center;margin-bottom:4px}
@media(max-width:700px){.quatro{grid-template-columns:repeat(2,1fr)}}
.tres .kpi-val{font-size:22px}

.faixa{display:grid;grid-template-columns:96px 1fr 26px;align-items:center;gap:9px;margin-top:6px;font-size:12px;color:var(--fraco)}
.faixa i{height:8px;background:var(--azul);border-radius:99px;opacity:.6;min-width:2px}
.faixa b{text-align:right;color:var(--texto);font-variant-numeric:tabular-nums}

td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}
.bloco a{color:var(--azul);text-decoration:none}
.bloco a:hover{text-decoration:underline}

/* Fundo da gaveta: clicar fora fecha. Sem ele o unico jeito era o botao '<' ou
   a tecla Esc, e ninguem descobre tecla sozinho.
   z-index: 36 na barra de cima (acima deste fundo, abaixo da gaveta) para as
   abas continuarem clicaveis com a conversa aberta. Sem isso o primeiro clique
   em "Painel" so fechava a gaveta e era preciso clicar de novo. */
.fundo-gaveta{position:fixed;inset:0;background:#00000088;z-index:35;display:none}
.fundo-gaveta.on{display:block}

/* Linha de investimento atras da barra de leads, na mesma coluna do grafico. */
.gcol{position:relative}
.ggasto{position:absolute;left:50%;right:auto;transform:translateX(-50%);bottom:0;
  background:var(--azul);opacity:.28;border-radius:2px 2px 0 0}
.gbar{position:relative}
.leg-g{display:inline-block;width:9px;height:9px;background:var(--azul);opacity:.5;border-radius:2px;
  vertical-align:middle;margin:0 3px 1px 6px}

.aviso-linha{margin:0 0 2px;padding:9px 13px;border-radius:9px;background:#1a1710;
  border:1px solid #3a3018;color:var(--amarelo);font-size:12.5px;line-height:1.5}
.aviso-linha b{color:#ffd98a}

/* Numero em cima da barra e dica de mouse instantanea. O title nativo do
   navegador demora quase um segundo para aparecer, e quem olha painel passa
   o mouse rapido: na pratica ninguem ve. */
.graf{padding-top:18px;overflow:visible}
.gnum{position:absolute;bottom:100%;left:50%;transform:translateX(-50%);
  font-size:11px;color:var(--texto);margin-bottom:3px;font-variant-numeric:tabular-nums}
.gdica{position:absolute;bottom:100%;left:50%;transform:translateX(-50%);margin-bottom:8px;
  background:#0b0f13;border:1px solid var(--borda);border-radius:8px;padding:7px 10px;
  font-size:11.5px;white-space:nowrap;color:var(--fraco);opacity:0;pointer-events:none;
  transition:opacity .08s;z-index:6}
.gdica b{color:var(--neon)}
.gcol:hover .gdica{opacity:1}
.gcol:hover .gbar{opacity:1}
.gcol:hover .gnum{opacity:0}

.dois-col{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.prova{background:var(--painel2);border:1px solid var(--borda);border-radius:10px;padding:12px 14px}
.prova.ok{border-color:var(--neon-d)}
.prova.zero{border-color:#4a2a2a}
.prova .kpi-val{font-size:24px}
.prova .kpi-val small{font-size:12px;color:var(--fraco);font-weight:400}
.veredito{margin:12px 0 0;font-size:13.5px;line-height:1.55}
.veredito b{color:var(--neon)}

/* Andamento do botao Atualizar */
.andamento{display:none}
.andamento.on{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;
  padding:10px 18px;background:var(--painel);border-bottom:1px solid var(--borda);font-size:12.5px}
.andamento .passos{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:center;color:var(--fraco)}
.andamento .passo.ok::before{content:"·";margin-right:6px;color:var(--neon)}
.andamento .passo.ruim{color:var(--vermelho)}
.andamento .fim{margin-left:auto;color:var(--texto)}
.andamento .fim b{color:var(--neon)}
.andamento .fim b.ruim{color:var(--vermelho)}
.girando{display:inline-block;width:11px;height:11px;border:2px solid var(--borda);
  border-top-color:var(--neon);border-radius:50%;animation:gira .7s linear infinite}
@keyframes gira{to{transform:rotate(360deg)}}

/* Funil de midia. Barra verde = Meta contando evento, azul = CRM contando gente. */
.funil-midia{margin-bottom:0}
.p-nota{margin:0 0 12px;color:var(--fraco);font-size:12.5px;line-height:1.55;max-width:96ch}
.p-nota b{color:var(--texto)}
.deg-cab,.deg{display:grid;grid-template-columns:190px 1fr 58px 84px;align-items:center;gap:12px}
.deg-cab{margin-bottom:6px;font-size:10.5px;text-transform:uppercase;letter-spacing:.7px;color:var(--fraco)}
.deg{margin-bottom:7px}
.deg-nome{font-size:12.5px;color:var(--texto);line-height:1.3}
.deg-obs{display:block;font-style:normal;font-size:11px;color:var(--fraco)}
.deg-barra{position:relative;background:var(--painel2);border-radius:6px;height:26px;
  display:flex;align-items:center;gap:8px;padding-left:9px}
.deg-barra i{position:absolute;left:0;top:0;bottom:0;border-radius:6px;opacity:.5}
.deg-barra.meta i{background:linear-gradient(90deg,var(--neon-d),var(--neon))}
.deg-barra.crm i{background:linear-gradient(90deg,#1f4a6b,var(--azul))}
.deg-barra b{position:relative;font-size:13px;font-variant-numeric:tabular-nums}
.deg-barra em{position:relative;font-style:normal;font-size:11px;color:var(--fraco);
  border:1px solid var(--borda);border-radius:99px;padding:1px 8px}
.deg-pass,.deg-custo{font-size:12px;color:var(--fraco);text-align:right;font-variant-numeric:tabular-nums}
.troca-fonte{display:flex;align-items:center;gap:10px;margin:10px 0 12px;color:var(--fraco);font-size:11.5px}
.troca-fonte::before,.troca-fonte::after{content:"";flex:1;height:1px;background:var(--borda)}
.verde{color:var(--verde)}

/* Conversa lado a lado, na aba Conversas.
   A gaveta nasceu para o Pipeline, onde ela cobre o board de propósito. Na aba
   Conversas isso deixava a conversa numa faixa de 560px no canto e um vazio
   enorme no meio da tela, justamente onde a conversa deveria estar. Só a partir
   de 1100px: abaixo disso ela volta a ser gaveta, porque não cabem as duas. */
@media (min-width: 1100px) {
  .gaveta.encaixada{
    /* começa embaixo da barra do topo, não atrás dela. Com z-index abaixo da
       barra (36) e top:0, o cabeçalho da conversa, com o nome e o seletor de
       etapa, ficava escondido e parecia que a conversa tinha perdido o topo. */
    top:var(--altura-topo); left:592px; width:auto; z-index:20;
    box-shadow:none; border-left:1px solid var(--borda);
  }
}

/* KPI que explica quem está por trás do número */
.kpi.clicavel{cursor:pointer;position:relative;transition:border-color .15s,transform .1s}
.kpi.clicavel:hover{border-color:var(--verde)}
.kpi.clicavel:active{transform:scale(.995)}
.kpi-lupa{
  position:absolute;top:10px;right:12px;font-size:10.5px;color:var(--fraco);
  opacity:0;transition:opacity .15s
}
.kpi.clicavel:hover .kpi-lupa{opacity:1}

.explica{position:fixed;inset:0;background:#000000aa;z-index:60;display:none;
  align-items:flex-start;justify-content:center;padding:6vh 16px}
.explica.on{display:flex}
.explica-caixa{background:var(--painel);border:1px solid var(--borda);border-radius:14px;
  width:min(680px,100%);max-height:82vh;display:flex;flex-direction:column;overflow:hidden}
.explica-cab{padding:16px 18px;border-bottom:1px solid var(--borda);
  display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.explica-titulo{font-weight:700;font-size:16px}
.explica-sub{font-size:12.5px;color:var(--fraco);margin-top:3px}
.explica-cab .x{background:none;border:none;color:var(--fraco);font-size:16px;cursor:pointer;padding:2px 6px}
.explica-cab .x:hover{color:var(--texto)}
.explica-lista{overflow-y:auto;padding:12px 14px}

/* Recorte e conversa na tela ao mesmo tempo. Ver o comentário em abrirLead().
   O recorte para onde a gaveta começa (`right`), então os dois não se cobrem e
   o z-index maior dele deixa de ser problema. O fundo fica mais claro porque
   ele não é mais um modal: é a lista de onde a pessoa veio, e ela precisa ler. */
.explica.com-gaveta{right:min(560px,100%);background:#00000055;padding:6vh 16px}
.explica.com-gaveta .explica-caixa{width:min(560px,100%)}
/* Onde eu estava. Sem isto a lista continua na tela mas some a resposta para
   "qual destes 24 eu já abri", que é metade do motivo de tê-la deixado aberta. */
.explica-lista .card.aqui{border-color:var(--neon);box-shadow:inset 3px 0 0 var(--neon)}

@media (max-width:1100px){
  /* Não cabem os dois. A conversa ganha, e o recorte fica atrás dela até fechar. */
  .explica.com-gaveta{right:0}
}

/* ── diálogo de fechar card ─────────────────────────────────────────────── */
.dialogo-pe{display:flex;gap:8px;justify-content:flex-end;margin-top:14px}
.campo{margin-bottom:12px}
.campo label{display:block;font-size:12.5px;color:var(--fraco);margin-bottom:5px}
.campo input,.campo select,.campo textarea{width:100%;padding:10px 12px;background:var(--painel2);
  border:1px solid var(--borda);border-radius:8px;color:var(--texto);font:inherit}
.campo textarea{resize:vertical;min-height:64px}
.campo .dica{font-size:11.5px;color:var(--fraco);margin-top:5px;line-height:1.4}

/* O botão de perder, dentro da lista do painel. Fica discreto até o mouse
   chegar: é ação destrutiva num lugar de leitura, não pode competir com o nome
   do lead nem convidar ao clique de passagem. */
.card .acoes{margin-top:8px;display:flex;gap:6px;flex-wrap:wrap}
.bt-perder,.bt-ganhar{background:transparent;border:1px solid var(--borda);color:var(--fraco);
  border-radius:7px;padding:4px 9px;font-size:11.5px}
.bt-perder:hover{color:var(--vermelho);border-color:var(--vermelho)}
/* O de ganho acende em verde, e é o único dos dois que muda de cor para melhor.
   Os dois nascem iguais e discretos de propósito: em lista de leitura, botão
   colorido em repouso convida ao clique de passagem, e aqui o clique de
   passagem escreve receita no painel e evento de compra no Meta. */
.bt-ganhar:hover{color:var(--verde);border-color:var(--verde)}

/* data de entrada, no card e na lista da explicação */
.entrou{font-size:11px;color:var(--fraco);margin-top:5px}

/* Coluna de quem não é lead. Fica no fim do board, apagada de propósito: é
   arquivo, não etapa. O contorno tracejado diz que ela não faz parte da
   esteira, e os cards ficam com menos peso visual que os do funil. */
.coluna.fora{opacity:.62;border-style:dashed}
.coluna.fora:hover{opacity:1}
.coluna.fora h3{color:var(--fraco)}
.kpi.neutro .valor{color:var(--fraco)}

/* Carimbo da hora dos dados. Existe para responder, sem clicar em nada, a
   pergunta "isso aqui é de agora?". Antes de existir, a tela ficava congelada
   no instante em que foi aberta e ninguém tinha como saber. */
.carimbo{font-size:11px;color:var(--fraco);white-space:nowrap;margin-right:4px;
  font-variant-numeric:tabular-nums}
@media (max-width:760px){.carimbo{display:none}}

/* ── mensalidade do sistema ────────────────────────────────────────────────
   Faixa discreta quando é só aviso, e tela cheia quando o acesso caiu. Aviso
   de cobrança dentro do board competiria com o trabalho do dia. */
.cobranca { display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  padding:10px 18px; font-size:13px; border-bottom:1px solid var(--linha, #1e2429); }
.cobranca.vence    { background:#2a2410; color:#e8d48a; }
.cobranca.atrasado { background:#2e1616; color:#f0a6a6; }
.cobranca a { color:inherit; text-decoration:underline; font-weight:600; }

/* A rotina falhou de verdade: faixa no topo do painel. Só erro pinta; aviso
   de configuração não, senão vira paisagem. */
.p-rotina-erro { background:#2e1616; color:#f0a6a6; border:1px solid #5a2626;
  border-radius:10px; padding:10px 14px; font-size:13px; margin-bottom:14px;
  line-height:1.5; }

/* ── estado do WhatsApp ────────────────────────────────────────────────────
   Bolinha no topo, visível nas três abas. Verde não pede atenção; vermelho
   pisca, porque WhatsApp fora significa que o CRM parou de receber e a tela
   inteira está mostrando um retrato de ontem sem avisar. */
.zap { display:inline-flex; align-items:center; gap:6px; cursor:pointer;
  background:transparent; border:1px solid var(--linha, #1e2429); border-radius:999px;
  padding:4px 10px; font-size:11px; color:var(--fraco, #8b98a5); white-space:nowrap;
  font-family:inherit; }
.zap:hover { border-color:#2f3a44; }
.zap::before { content:''; width:8px; height:8px; border-radius:50%; background:#8b98a5;
  flex:0 0 auto; }
.zap.on::before   { background:#2ecc71; }
.zap.off::before  { background:#ff5c5c; animation:zap-pisca 1.4s ease-in-out infinite; }
.zap.off  { color:#f0a6a6; border-color:#5a2626; }
.zap.morno::before { background:#e8b34a; }
.zap.morno { color:#e8d48a; border-color:#4a3d16; }
@keyframes zap-pisca { 50% { opacity:.25; } }
@media (max-width:760px){ .zap span { display:none } }
.bloqueio { max-width:460px; margin:16vh auto; padding:32px; text-align:center;
  background:var(--caixa, #12171b); border-radius:14px; }
.bloqueio h1 { font-size:20px; margin:0 0 12px; }
.bloqueio p { color:var(--fraco, #8b98a5); line-height:1.5; margin:0 0 20px; }
.bloqueio .btn { display:inline-block; }
.bloqueio .bloqueio_pe { font-size:12px; margin:20px 0 0; }

/* Linha de total no fim da tabela: separa da leitura linha a linha. */
tr.soma td{border-top:1px solid var(--borda);border-bottom:none;font-weight:600;color:var(--texto)}

/* ── Tela de escolher o cliente ────────────────────────────────────────────
   Existe porque quem é da DD atende vários clientes e o menu suspenso não
   mostrava nada antes de clicar: nem volume, nem se o robô daquele cliente
   está falando. Cartão grande resolve os dois. */
.hub { max-width: 1100px; margin: 0 auto; padding: 0 20px 60px; }
.hub-topo { display: flex; align-items: center; gap: 12px; padding: 14px 0; }
.hub-sub { opacity: .55; font-weight: 400; }
.hub-titulo { font-size: 22px; font-weight: 600; margin: 26px 0 18px; }
.hub-grade { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); }

.hub-card {
  display: block; width: 100%; text-align: left; cursor: pointer;
  background: var(--card, #14181c); border: 1px solid var(--borda, #232a31);
  border-radius: 12px; padding: 18px; color: inherit; font: inherit;
  transition: border-color .12s, transform .12s;
}
.hub-card:hover { border-color: var(--acento, #b8ff3a); transform: translateY(-2px); }
.hub-card:focus-visible { outline: 2px solid var(--acento, #b8ff3a); outline-offset: 2px; }
/* Atalho: cliente cuja operação roda em outro CRM. Tracejado e sem número, de propósito,
   pra ninguém ler como se fosse cliente deste CRM com zero lead. */
.hub-card.atalho { cursor: default; border-style: dashed; }
.hub-card.atalho:hover { transform: none; border-color: var(--borda, #232a31); }
.hub-nota { font-size: 12px; opacity: .6; margin: -6px 0 14px; line-height: 1.4; }
.hub-links { display: flex; gap: 8px; margin-bottom: 14px; }
.hub-links a.btn { text-decoration: none; }

.hub-nome { font-size: 17px; font-weight: 600; margin-bottom: 3px; }
.hub-ramo { font-size: 12px; opacity: .5; margin-bottom: 14px; }
.hub-numeros { display: flex; gap: 20px; margin-bottom: 14px; }
.hub-num { font-size: 21px; font-weight: 600; line-height: 1.15; }
.hub-num small { display: block; font-size: 11px; font-weight: 400; opacity: .55; }
.hub-num.alerta { color: #ffb020; }

.hub-selos { display: flex; flex-wrap: wrap; gap: 6px; }
/* Quadrado de pontas arredondadas, não pílula (pedido do Bruno em 04/09/2026).
   São quatro selos agora e a pílula alongava demais a linha. */
.selo {
  font-size: 11px; padding: 3px 8px; border-radius: 6px;
  border: 1px solid var(--borda, #232a31); opacity: .8;
}
.selo.on     { border-color: #2f7d3a; color: #7fd68d; }
.selo.off    { border-color: #6a4a12; color: #ffb020; }
/* Vermelho é só para falha de verdade: a IA parou com mensagem chegando.
   Desligado de propósito é âmbar, não vermelho, senão o hub vira um painel
   que alarma o tempo todo e ninguém mais olha. */
.selo.alerta { border-color: #7d2f2f; color: #ff8b8b; }
.selo.neutro { border-color: var(--borda, #232a31); opacity: .5; }

/* Carimbo de versão da tela. Discreto, mas presente: é o que responde
   "recarreguei mesmo?" sem abrir o inspetor. */
.versao { font-size: 10px; font-weight: 400; opacity: .35; margin-left: 8px; letter-spacing: .3px; }

/* De onde o lead veio e o que ele respondeu no formulário da landing. */
.origem-caixa { margin: 12px 16px; padding: 12px 14px; border: 1px solid var(--borda, #232a31);
                border-radius: 10px; background: var(--card, #14181c); }
.origem-tit { font-size: 11px; text-transform: uppercase; letter-spacing: .5px;
              opacity: .45; margin-bottom: 10px; }
.origem-linha { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; margin-bottom: 8px; }
.origem-linha b { font-size: 11px; font-weight: 500; opacity: .55; min-width: 84px; }
.pilula { font-size: 11px; padding: 2px 8px; border-radius: 999px;
          border: 1px solid var(--borda, #232a31); opacity: .9; }
.origem-form { display: grid; gap: 8px 18px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.origem-form b { display: block; font-size: 11px; font-weight: 500; opacity: .5; }

/* Investimento por produto. Só aparece para cliente com mais de um. */
.produtos { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); margin-bottom: 8px; }
.produto { border: 1px solid var(--borda, #232a31); border-radius: 10px; padding: 14px; background: var(--card, #14181c); }
.produto.indef { border-style: dashed; opacity: .8; }
.produto-nome { font-size: 12px; opacity: .6; margin-bottom: 6px; }
.produto-valor { font-size: 20px; font-weight: 600; line-height: 1.2; }
.produto-valor small { display: block; font-size: 11px; font-weight: 400; opacity: .5; }
.produto-barra { height: 4px; border-radius: 2px; background: var(--borda, #232a31); margin: 10px 0 8px; overflow: hidden; }
.produto-barra i { display: block; height: 100%; background: var(--acento, #b8ff3a); }
.produto.indef .produto-barra i { background: #ffb020; }
.produto-pe { font-size: 11px; opacity: .55; }

/* ── Origem do lead: uma cor por origem, a mesma em todo o painel ──────────
   O neon é a cor da casa e fica com ANÚNCIO, porque é o que o Bruno procura
   primeiro. "Sem rastreio" fica cinza de propósito: não é uma origem, é a
   ausência de uma, e cor forte ali daria a ela um peso que ela não tem. */
.or-anuncio      { --cor-or: var(--neon); }
.or-bio          { --cor-or: var(--azul); }
.or-landing      { --cor-or: var(--verde); }
.or-formulario   { --cor-or: var(--amarelo); }
.or-desconhecida { --cor-or: #55606e; }
i.or{display:inline-block;width:9px;height:9px;border-radius:2px;background:var(--cor-or,#55606e);
  vertical-align:middle;margin:0 5px 1px 0}
.graf-pe i.or{margin-left:8px}

/* Quebra por origem dentro do KPI. Fica ENTRE o número e o rodapé: quem só quer
   o total lê o número grande e ignora; quem quer a proporção não precisa clicar. */
.kpi-quebra{margin:6px 0 4px;display:flex;flex-direction:column;gap:2px}
.kpi-quebra div{display:flex;align-items:center;gap:4px;font-size:11.5px;color:var(--fraco)}
.kpi-quebra span{flex:1}
.kpi-quebra b{color:var(--texto);font-variant-numeric:tabular-nums;font-weight:600}

/* Barra do dia, empilhada. As fatias são absolutas e empilham de baixo para
   cima, para a altura total continuar sendo a do dia. */
.gbar{display:flex;flex-direction:column-reverse}
.gfatia{display:block;width:100%;background:var(--cor-or,#55606e);flex:none}
.gbar > .gfatia:first-of-type{border-radius:0 0 2px 2px}
.gbar > .gfatia:last-of-type{border-radius:2px 2px 0 0}

/* Mesma divisão dentro da barra do funil. */
.fase-barra i{display:flex}
.fase-barra u{display:block;height:100%;background:var(--cor-or,#55606e);text-decoration:none;opacity:.9}

/* Etiqueta da etapa dentro de uma coluna que junta etapas ("Venda ganha" traz
   pago e entregue). Discreta de propósito: a notícia é a venda, o estado da
   entrega é o detalhe. */
.selo-etapa{font-size:10.5px;padding:1px 6px;border-radius:999px;
  border:1px solid var(--neon-d);color:var(--neon);background:#1a2210;white-space:nowrap}

/* Barra do funil DIVIDIDA por origem: o degradê neon de baixo tem que sair.
   Sem isto a fatia cinza fica sobre verde e o funil é lido como "quase tudo
   veio de anúncio" quando o anúncio é 8% dele — o oposto do que o gráfico
   existe para dizer. */
.fase-barra i.dividida{background:none;opacity:1}

/* Apontamento da auditoria dentro do card, no recorte "A conferir".
   A citação fica em <q> e em itálico de propósito: é texto de OUTRA pessoa
   dentro do card, e sem essa separação visual ela se lê como se fosse resumo
   escrito pelo sistema. */
.confere{margin-top:6px;padding:7px 9px;border-radius:8px;
  border:1px solid #5a4a1a;background:rgba(240,198,116,.06);font-size:12px;line-height:1.45}
.confere b{color:var(--amarelo);display:block;margin-bottom:2px}
.confere span{color:var(--fraco);display:block}
.confere q{color:var(--texto);display:block;margin-top:4px;font-style:italic;opacity:.85}

/* A faixa de VENDAS por dia, logo abaixo da de leads.
   Faixa própria, e não uma linha por cima das barras: as duas medidas têm a
   mesma unidade mas ordens de grandeza muito diferentes (55 leads contra 8
   vendas no pico), e sobrepostas a série de baixo vira borda do empilhamento.
   Mesmas colunas, mesma ordem, então os dias continuam alinhados a olho.
   Laranja porque é a única cor da paleta que se separa das três origens
   (verde-neon, azul e cinza) também para quem não distingue cor: o pior par
   adjacente fica em ΔE 22 no teste de daltonismo. */
.graf-rot{color:var(--fraco);font-size:11.5px;margin:10px 0 4px}
.graf-v{height:96px;padding-top:16px;overflow:visible}
.gbarv{position:relative;width:100%;background:var(--laranja);
  border-radius:2px 2px 0 0;opacity:.85}
.gbarv.zero{background:var(--borda);opacity:1}
.gcol:hover .gbarv{opacity:1}
.leg-v{display:inline-block;width:9px;height:9px;background:var(--laranja);
  border-radius:2px;vertical-align:middle;margin:0 5px 1px 0}
/* Na legenda do pé do gráfico ele ganha respiro à esquerda, como os das
   origens. Dentro da DICA do mouse, não: lá as linhas começam todas na mesma
   coluna, e o 8px de recuo deixava só a linha de vendas fora de prumo. */
.graf-pe .leg-v{margin-left:8px}

/* A barra volta a ocupar a coluna inteira, decisão do Bruno em 28/08: estreitar
   deixou o gráfico ralo. O que ficou da mudança foi a ALTURA — 210px no de
   leads e 96px no de vendas, contra 120px e 46px de antes. */

/* A dica do mouse do gráfico, em dois blocos.
   Cada bloco tem um título e a SUA quebra por origem, indentada debaixo dele.
   Em lista corrida os números dos leads e os das vendas ficavam no mesmo nível
   e liam-se como um grupo só — e a quebra visível era só a dos leads, o que
   fazia "11 já compraram · Anúncio 14" parecer contradição. */
.gdica{text-align:left;line-height:1.5}
.d-topo{color:var(--fraco);margin-bottom:5px}
.d-bloco{margin-top:5px}
.d-bloco b{display:block;color:var(--texto)}
.d-bloco:last-child b{color:var(--laranja)}
.gdica .d-bloco:first-of-type b{color:var(--neon)}
.d-item{display:block;padding-left:2px;color:var(--fraco)}

/* "já comprou": cliente que volta. Verde do ganho, mas discreto, porque ele
   convive com o selo de origem e com o valor na mesma linha do card. */
.tag.comprou{background:rgba(122,193,66,.16);color:var(--verde);border:1px solid rgba(122,193,66,.35)}

/* ── Funil clicável, com o MESMO balão do gráfico de leads por dia ──────────
   O `title` do navegador que estava aqui some no celular, demora um segundo
   para aparecer e não deixa marcar a bolinha de cada origem: o número saía sem
   dizer qual bolinha era qual. Agora é o `.gdica`, o mesmo componente, e a
   linha inteira abre a lista de quem está naquela etapa.                     */
.fase.clicavel{cursor:pointer;border-radius:7px;transition:background .1s}
.fase.clicavel:hover{background:rgba(255,255,255,.035)}
/* O balão precisa escapar da barra, que tem 22px de altura e corta o conteúdo. */
.fase-barra{overflow:visible}
/* No funil as origens ficam numa LINHA só, e não empilhadas como no gráfico de
   leads por dia. Lá as barras são altas e sobra espaço; aqui as linhas ficam a
   22px uma da outra, e um balão de 117px de altura escondia as QUATRO etapas de
   cima, que é justamente a comparação que o funil existe para mostrar. */
.fase-barra .gdica{white-space:nowrap;bottom:100%;margin-bottom:6px}
.fase-barra .d-item{display:inline;margin-right:9px}
.fase-barra .d-bloco{margin-top:4px}
.fase.clicavel:hover .gdica{opacity:1}
/* A primeira linha do funil encosta no topo do bloco: ali o balão desce. */
.fase:first-of-type .gdica,.fase-cab + .fase .gdica{bottom:auto;top:100%;margin:6px 0 0}
.d-clique{margin-top:6px;opacity:.75;font-size:10.5px}

/* ── Quem mais compra ───────────────────────────────────────────────────────
   Lista, não tabela: cada linha tem um nome grande (o que a vendedora procura),
   o número embaixo em fonte menor (o que identifica de verdade) e os números
   alinhados à direita. Tabela com 5 colunas comprimiria o nome, que é o campo
   mais largo e o mais lido.                                                  */
.rank{display:flex;flex-direction:column;gap:1px}
.rank-l{display:grid;grid-template-columns:24px 1fr 62px 78px 52px;align-items:center;gap:8px;
  padding:6px 6px;border-radius:6px}
.rank-l.clicavel{cursor:pointer;transition:background .1s}
.rank-l.clicavel:hover{background:rgba(255,255,255,.04)}
.rank-n{font-size:12px;color:var(--fraco);text-align:right;font-variant-numeric:tabular-nums}
.rank-nome{font-size:13px;color:var(--texto);overflow:hidden}
.rank-nome i{display:block;font-style:normal;font-size:11px;color:var(--fraco);
  font-variant-numeric:tabular-nums}
/* O aviso de nome repetido é âmbar e não vermelho: não é erro, é uma dúvida que
   só a loja resolve. Ver `ranking()` em servicos/painel.js. */
.rank-homo{display:inline-block;margin-left:6px;font-size:9.5px;font-weight:600;
  text-transform:uppercase;letter-spacing:.03em;color:var(--amarelo);
  background:rgba(240,198,116,.12);border:1px solid rgba(240,198,116,.3);
  border-radius:4px;padding:1px 5px;vertical-align:1px}
.rank-c{font-size:12px;color:var(--fraco);text-align:right;font-variant-numeric:tabular-nums}
.rank-c small{display:block;font-size:10px;opacity:.75}
.rank-v{font-size:13px;color:var(--verde);text-align:right;font-weight:600;
  font-variant-numeric:tabular-nums}
.rank-d{font-size:11px;color:var(--fraco);text-align:right;font-variant-numeric:tabular-nums}
@media (max-width:900px){
  .rank-l{grid-template-columns:20px 1fr 70px}
  .rank-c,.rank-d{display:none}
}
/* A nota do ranking é explicação de lista, alinhada à esquerda com ela. Herdava
   `.vazio`, que é centralizado e existe para "nada aqui ainda": no meio de um
   bloco cheio ela abria um buraco entre o título e a primeira linha. */
.rank-nota{margin:0 0 9px;padding:0 6px;font-size:11.5px;line-height:1.45;
  color:var(--fraco);text-align:left}