/* Hub Triano — estilo na paleta Triano */

/* ============================================================
   A paleta da marca
   ============================================================
   Paleta base Triano:

     navy       #1B3A6B   azul principal
     navy fundo #0D1520   fundo escuro
     royal      #1B3A6B   ações
     cobalto    #2E5C9E   hover/acento secundário
     papel      #FFFFFF   ink #0A0C12
     cinza      #A7AEB8   cinza de apoio
     ouro       #F5C518   destaque */
:root{
  --navy-900:#0D1520;
  --navy-800:#16243A;
  --navy-700:#1E3050;
  --navy-600:#2C4467;
  --linha:#2C4467;
  --azul:#1B3A6B;
  --azul-claro:#2E5C9E;
  --azul-suave:#A7AEB8;
  --branco:#FFFFFF;
  --texto:#E9EDF5;
  --texto-suave:#9AA3B2;
  --verde:#22C55E;
  --amarelo:#F5C518;
  --ouro:#F5C518;
  --ouro-ic:currentColor;  /* detalhe do ícone: apagado em repouso, ouro no ativo e no hover */
  --vermelho:#EF4444;
  --verde-txt:#4ADE80;
  --vermelho-txt:#F87171;
  --amarelo-txt:#F5C518;
  --roxo-txt:#C4B5FD;
  --azulads-txt:#93C5FD;
  --laranja-txt:#FDBA74;
  --azul-txt:#A8C7F0;
  --fundo-verde:rgba(34,197,94,.16);
  --fundo-vermelho:rgba(239,68,68,.16);
  --fundo-amarelo:rgba(244,192,32,.16);
  --fundo-azul:rgba(46,92,158,.22);
  --fundo-roxo:rgba(139,92,246,.18);
  --fundo-azulads:rgba(59,130,246,.18);
  --sobreposicao:rgba(13,21,32,.86);
  --sombra:none;
  --raio:12px;
  --largura-menu:264px;
  --altura-topo:64px;
  --fonte:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
}

/* O tema do hub também é o tema dos desenhos do navegador: barra de rolagem, seta de
   select e campo preenchido por ele. Sem isto, o Chrome desenha tudo isso no claro e a
   barra branca aparece rasgando a tela escura. O :has cuida da barra da janela, que é do
   elemento raiz e não do body. */
:root{color-scheme:dark}
html:has(body.claro){color-scheme:light}
body.claro{color-scheme:light}

*{box-sizing:border-box;margin:0;padding:0}

body{
  font-family:var(--fonte);
  background:var(--navy-900);
  color:var(--texto);
  font-size:15px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}

button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
input,select{font-family:inherit}

/* ---------- Topo ---------- */
.topo{
  position:fixed;top:0;left:0;right:0;height:var(--altura-topo);
  background:var(--navy-800);
  border-bottom:1px solid var(--linha);
  display:flex;align-items:center;gap:18px;
  padding:0 22px;z-index:50;
}
.topo .marca{display:flex;align-items:center;gap:14px}
.topo .marca img{height:34px;display:block;border-radius:0}
.topo .marca .titulo{font-size:15px;font-weight:600;letter-spacing:.2px;white-space:nowrap}
.topo .marca .titulo span{color:var(--azul-suave);font-weight:500}

.busca{
  flex:1;max-width:420px;margin-left:10px;position:relative;
}
.busca input{
  width:100%;height:38px;border-radius:10px;
  background:var(--navy-700);border:1px solid var(--linha);
  color:var(--texto);padding:0 14px 0 38px;font-size:14px;outline:none;
}
.busca input::placeholder{color:var(--texto-suave)}
.busca input:focus{border-color:var(--azul-claro)}
.busca .lupa{position:absolute;left:13px;top:9px;color:var(--texto-suave);font-size:15px}

.topo .direita{margin-left:auto;display:flex;align-items:center;gap:12px}
.botao-topo{
  height:38px;padding:0 14px;border-radius:10px;
  background:var(--navy-700);border:1px solid var(--linha);
  font-size:13px;font-weight:600;color:var(--texto);
  display:flex;align-items:center;gap:8px;
}
.botao-topo:hover{border-color:var(--azul-claro)}
.sino{position:relative;width:38px;height:38px;border-radius:10px;background:var(--navy-700);border:1px solid var(--linha);display:flex;align-items:center;justify-content:center;font-size:16px}
.sino .ponto{position:absolute;top:6px;right:7px;width:8px;height:8px;border-radius:50%;background:var(--vermelho)}
.avatar{
  width:38px;height:38px;border-radius:50%;
  background:var(--azul);color:#fff;font-weight:700;font-size:13px;
  display:flex;align-items:center;justify-content:center;
}

/* ---------- Menu lateral ---------- */
.menu{
  position:fixed;top:var(--altura-topo);bottom:0;left:0;width:var(--largura-menu);
  background:var(--navy-800);border-right:1px solid var(--linha);
  padding:16px 12px 20px;overflow-y:auto;z-index:40;
  transition:width .18s ease;
}
.menu::-webkit-scrollbar{width:6px}
.menu::-webkit-scrollbar-thumb{background:var(--navy-600);border-radius:3px}

.menu-grupo{
  font-size:11px;letter-spacing:1.2px;text-transform:uppercase;
  color:var(--texto-suave);font-weight:700;
  padding:16px 12px 8px;
}
.item{
  width:100%;display:flex;align-items:center;gap:12px;
  padding:10px 12px;border-radius:10px;
  font-size:14.5px;font-weight:500;color:var(--texto);
  text-align:left;margin-bottom:2px;position:relative;
}
.item:hover{background:var(--navy-700)}
.item.ativo{background:var(--azul);color:#fff;font-weight:600}
.item .icone{width:20px;text-align:center;font-size:16px;flex:0 0 20px}
.item .selo{
  margin-left:auto;background:var(--navy-600);color:var(--texto);
  font-size:11px;font-weight:700;border-radius:20px;padding:1px 8px;
}
.item.ativo .selo{background:rgba(255,255,255,.22);color:#fff}
.item .selo.alerta{background:var(--vermelho);color:#fff}

.menu-rodape{
  margin-top:22px;padding:14px 12px;border-top:1px solid var(--linha);
  font-size:12px;color:var(--texto-suave);
}
.menu-rodape strong{display:block;color:var(--texto);font-size:13px;margin-bottom:2px}

/* ---------- Área de conteúdo ---------- */
.conteudo{
  margin-left:var(--largura-menu);margin-top:var(--altura-topo);
  padding:26px 30px 60px;min-height:calc(100vh - var(--altura-topo));
}
.cabecalho{display:flex;align-items:flex-end;gap:16px;flex-wrap:nowrap;margin-bottom:22px}
.cabecalho > div:first-child{min-width:0}
.cabecalho h1,.cabecalho p{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cabecalho h1{font-size:24px;font-weight:700;letter-spacing:-.3px}
.cabecalho p{color:var(--texto-suave);font-size:14px;margin-top:4px}
.cabecalho .acoes{margin-left:auto;display:flex;gap:10px;flex-wrap:nowrap;min-width:0}

.botao{
  height:38px;padding:0 16px;border-radius:10px;background:var(--azul);
  color:#fff;font-size:13.5px;font-weight:600;display:inline-flex;align-items:center;gap:8px;
}
.botao:hover{background:var(--azul-claro)}
.botao.vazio{background:transparent;border:1px solid var(--linha);color:var(--texto)}
.botao.vazio:hover{border-color:var(--azul-claro);background:var(--navy-700)}

/* Abas */
.abas{display:flex;gap:24px;border-bottom:1px solid var(--linha);margin-bottom:24px}
.aba{padding:10px 2px 12px;font-size:14px;font-weight:600;color:var(--texto-suave);border-bottom:2px solid transparent;margin-bottom:-1px}
.aba.ativa{color:var(--branco);border-bottom-color:var(--amarelo)}
.aba .contador{background:var(--navy-600);border-radius:20px;padding:1px 8px;font-size:11px;margin-left:6px}

/* Cartões */
.cartao{
  background:var(--navy-800);border:1px solid var(--linha);
  border-radius:var(--raio);padding:18px 20px;
}
.cartao h3{font-size:15px;font-weight:600;margin-bottom:14px;display:flex;align-items:center;gap:8px}
.cartao h3 .mais{margin-left:auto;font-size:12.5px;font-weight:500;color:var(--azul-txt)}

.grade{display:grid;gap:16px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.g-2-1{grid-template-columns:2fr 1fr}
@media (max-width:1180px){.g4{grid-template-columns:repeat(2,1fr)}.g3,.g-2-1{grid-template-columns:1fr}}

/* Indicadores */
.indicador .rotulo{font-size:12.5px;color:var(--texto-suave);font-weight:600;text-transform:uppercase;letter-spacing:.6px}
.indicador .valor{font-size:28px;font-weight:700;margin:8px 0 4px;letter-spacing:-.5px}
.indicador .variacao{font-size:12.5px;font-weight:600;display:flex;align-items:center;gap:6px}
.sobe{color:var(--verde-txt)}
.desce{color:var(--vermelho-txt)}
.neutro{color:var(--texto-suave)}

/* Tabela */
table{width:100%;border-collapse:collapse;font-size:14px}
th{
  text-align:left;font-size:11.5px;text-transform:uppercase;letter-spacing:.8px;
  color:var(--texto-suave);font-weight:700;padding:0 12px 10px;border-bottom:1px solid var(--linha);
}
td{padding:13px 12px;border-bottom:1px solid rgba(36,54,95,.55)}
tbody tr:hover{background:var(--navy-700)}
td .principal{font-weight:600}
td .apoio{font-size:12.5px;color:var(--texto-suave)}

/* Etiquetas */
.etiqueta{
  display:inline-flex;align-items:center;gap:6px;
  font-size:11.5px;font-weight:700;border-radius:20px;padding:3px 10px;
  background:var(--navy-600);color:var(--texto);
}
.etiqueta.verde{background:var(--fundo-verde);color:var(--verde-txt)}
.etiqueta.amarela{background:var(--fundo-amarelo);color:var(--amarelo-txt)}
.etiqueta.vermelha{background:var(--fundo-vermelho);color:var(--vermelho-txt)}
.etiqueta.azul{background:var(--fundo-azul);color:var(--azul-txt)}

/* Barra de progresso */
.barra{height:7px;border-radius:20px;background:var(--navy-600);overflow:hidden}
.barra i{display:block;height:100%;background:var(--azul-claro);border-radius:20px}
.barra i.verde{background:var(--verde)}
.barra i.amarela{background:var(--amarelo)}

/* Quadro estilo kanban */
.quadro{display:flex;gap:14px;overflow-x:auto;padding-bottom:12px}
.coluna{flex:0 0 268px;background:var(--navy-800);border:1px solid var(--linha);border-radius:var(--raio);padding:12px}
.coluna .topo-coluna{display:flex;align-items:center;gap:8px;margin-bottom:12px;font-size:13px;font-weight:700}
.coluna .topo-coluna .bolinha{width:8px;height:8px;border-radius:50%;background:var(--azul-claro)}
.coluna .topo-coluna .qtd{margin-left:auto;color:var(--texto-suave);font-size:12px}
.ficha{
  background:var(--navy-700);border:1px solid var(--linha);border-radius:10px;
  padding:12px;margin-bottom:10px;cursor:grab;
}
.ficha:hover{border-color:var(--azul-claro)}
.ficha .nome{font-weight:600;font-size:14px;margin-bottom:6px}
.ficha .linha{font-size:12.5px;color:var(--texto-suave);display:flex;align-items:center;gap:6px;margin-top:6px}
.ficha .valor{font-size:14px;font-weight:700;color:#4ADE80;margin-top:8px}
.ficha .pessoas{display:flex;gap:-6px;margin-top:10px}
.mini-avatar{width:24px;height:24px;border-radius:50%;background:var(--azul);color:#fff;font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center;border:2px solid var(--navy-700);margin-right:-8px}

/* Lista simples */
.lista{list-style:none}
.lista li{display:flex;align-items:flex-start;gap:12px;padding:12px 0;border-bottom:1px solid rgba(36,54,95,.55)}
.lista li:last-child{border-bottom:none}
.lista .marcador{width:9px;height:9px;border-radius:50%;margin-top:7px;flex:0 0 9px;background:var(--azul-claro)}
.lista .marcador.vermelho{background:var(--vermelho)}
.lista .marcador.amarelo{background:var(--amarelo)}
.lista .marcador.verde{background:var(--verde)}
.lista .texto{flex:1}
.lista .texto .t{font-size:14px;font-weight:500}
.lista .texto .s{font-size:12.5px;color:var(--texto-suave);margin-top:2px}
.lista .hora{font-size:12.5px;color:var(--texto-suave);white-space:nowrap}

/* Gráfico de barras */
.grafico{display:flex;align-items:flex-end;justify-content:center;gap:14px;height:180px;padding-top:10px}
.cartao.estica{display:flex;flex-direction:column}
.cartao.estica .grafico{flex:1;height:auto;min-height:180px}
.grafico .col{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:8px;height:100%}
.grafico .col .haste{width:100%;max-width:56px;background:var(--azul);border-radius:6px 6px 0 0}
.grafico .col .haste.clara{background:var(--navy-600)}
.grafico .col .rot{font-size:11.5px;color:var(--texto-suave)}

/* Galeria */
.galeria{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
@media (max-width:1180px){.galeria{grid-template-columns:repeat(2,1fr)}}
.pecas{background:var(--navy-800);border:1px solid var(--linha);border-radius:var(--raio);overflow:hidden}
.pecas .capa{height:150px;background:linear-gradient(135deg,var(--azul),var(--navy-700));display:flex;align-items:center;justify-content:center;font-size:34px}
.pecas .corpo{padding:12px 14px 14px}
.pecas .corpo .nome{font-size:14px;font-weight:600}
.pecas .corpo .apoio{font-size:12.5px;color:var(--texto-suave);margin-top:3px}
.pecas .corpo .marcas{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}

/* Filtros */
.filtros{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:20px}
.filtro{
  height:34px;padding:0 14px;border-radius:20px;border:1px solid var(--linha);
  background:var(--navy-800);font-size:13px;font-weight:600;color:var(--texto-suave);
  display:inline-flex;align-items:center;gap:7px;
}
.filtro.ativo{background:var(--azul);border-color:var(--azul);color:#fff}
.filtro:hover{border-color:var(--azul-claro)}

/* Linha do Oráculo */
.item-oraculo{
  background:var(--navy-800);border:1px solid var(--linha);border-radius:var(--raio);
  padding:14px 16px;margin-bottom:12px;
}
.item-oraculo .cabeca{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.item-oraculo .cabeca .t{font-size:14.5px;font-weight:600;flex:1;min-width:220px}
.item-oraculo .escolhas{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}
.escolha{
  height:32px;padding:0 14px;border-radius:8px;border:1px solid var(--linha);
  background:var(--navy-700);font-size:12.5px;font-weight:600;color:var(--texto);
}
.escolha:hover{border-color:var(--azul-claro)}
.escolha.marcada{background:var(--azul);border-color:var(--azul);color:#fff}
.escolha.marcada.recusa{background:var(--navy-600);border-color:var(--texto-suave);color:var(--texto-suave)}

/* Aviso de protótipo */
.aviso{
  background:var(--fundo-azul);border:1px solid var(--azul-claro);
  border-radius:var(--raio);padding:12px 16px;font-size:13.5px;
  color:var(--azul-txt);margin-bottom:22px;display:flex;align-items:center;gap:10px;
}

/* ============================================================
   Telas trazidas da Foxx (v2)
   ============================================================ */

/* Menu: sub-itens (Tráfego → Google Ads, Meta Ads) */
.item.sub{padding-left:44px;font-size:14px;color:var(--texto-suave)}
.item.sub.ativo{color:#fff}
.item .seta{margin-left:auto;font-size:11px;color:var(--texto-suave);transition:transform .15s}
.item.aberto .seta{transform:rotate(90deg)}
.item .selo.breve{background:transparent;border:1px solid var(--linha);color:var(--texto-suave);font-weight:600;font-size:10px}

/* Barra de sub-abas (Cards / Lista / Análise Semanal) */
.subabas{display:inline-flex;background:var(--navy-800);border:1px solid var(--linha);border-radius:10px;padding:3px;gap:3px}
.subabas button{padding:6px 14px;border-radius:8px;font-size:13px;font-weight:600;color:var(--texto-suave)}
.subabas button.ativo{background:var(--azul);color:#fff}

.barra-ferramentas{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:18px}
.campo-busca{height:36px;padding:0 12px;border-radius:10px;background:var(--navy-800);border:1px solid var(--linha);color:var(--texto);font-size:13.5px;outline:none;min-width:210px}
.campo-busca::placeholder{color:var(--texto-suave)}
.campo-busca:focus{border-color:var(--azul-claro)}
select.campo-busca{cursor:pointer}

/* Cartão de cliente (Lista de Clientes da Foxx) */
.lista-clientes{display:flex;flex-direction:column;gap:10px}
.cartao-cliente{background:var(--navy-800);border:1px solid var(--linha);border-radius:var(--raio);padding:14px 18px;cursor:pointer}
.cartao-cliente:hover{border-color:var(--azul-claro)}
.cc-topo{display:flex;align-items:flex-start;gap:12px}
.cc-nome{font-size:15.5px;font-weight:600}
.cc-empresa{font-size:12.5px;color:var(--texto-suave);margin-top:2px}
.cc-direita{margin-left:auto;display:flex;align-items:center;gap:10px}
.cc-pill{font-size:11.5px;font-weight:700;border-radius:20px;padding:4px 12px;background:var(--navy-600);color:var(--texto)}
.cc-pill.ativo{background:var(--fundo-verde);color:var(--verde-txt)}
.cc-pill.pausado{background:var(--fundo-amarelo);color:var(--amarelo-txt)}
.cc-botao-mini{height:28px;padding:0 10px;border-radius:8px;border:1px solid var(--linha);font-size:11.5px;font-weight:600;color:var(--texto-suave)}
.cc-botao-mini:hover{border-color:var(--azul-claro);color:var(--texto)}
.cc-chave{display:inline-flex;align-items:center;gap:7px;font-size:11px;font-weight:700;color:var(--texto-suave)}
.cc-chave i{width:34px;height:19px;border-radius:20px;background:var(--azul);position:relative;display:block}
.cc-chave i::after{content:"";position:absolute;top:2px;right:2px;width:15px;height:15px;border-radius:50%;background:#fff}
.cc-chave.desligado i{background:var(--navy-600)}
.cc-chave.desligado i::after{right:auto;left:2px}
.cc-progresso{display:flex;align-items:center;gap:10px;margin:12px 0 10px}
.cc-progresso .barra{flex:1}
.cc-progresso span{font-size:12px;color:var(--texto-suave);white-space:nowrap}
.cc-rodape{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--texto-suave);flex-wrap:wrap}
.cc-rodape .sep{opacity:.5}
.cc-rodape .atrasado{color:var(--vermelho-txt);font-weight:700}
.cc-pend{margin-left:auto;display:flex;gap:10px}
.pend-mini{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:700}
.pend-mini i{width:14px;height:14px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:9px;color:#0A0C12}
.pend-mini i.equipe{background:#EF4444;color:#fff}
.pend-mini i.cliente{background:#F5B21B;color:#3A2400}
.rodape-lista{margin-top:14px;font-size:12.5px;color:var(--texto-suave)}
.rodape-lista .pausados{color:var(--amarelo-txt);font-weight:600}

/* Quadro de onboarding (7 colunas) */
/* As sete fases do Onboarding, sempre lado a lado e cabendo na tela, como na Foxx. As
   colunas dividem o espaço em partes iguais em vez de terem largura fixa: assim as sete
   aparecem de uma vez, sem rolar, que é o ponto de um quadro de fases. Abaixo de 150px por
   coluna o nome do cliente fica ilegível, e aí sim o quadro rola. */
.quadro-onb{
  display:grid;grid-auto-flow:column;grid-auto-columns:minmax(150px,1fr);gap:10px;
  overflow-x:auto;padding-bottom:14px;
}
.quadro-onb > .col-onb{flex:1 1 0;min-width:150px;padding:10px 9px}
.quadro-onb .card-onb{padding:10px 9px}
.quadro-onb .card-onb-nome{font-size:12.5px}
.quadro-onb .card-onb-meta,.quadro-onb .card-onb-rodape{font-size:11px;flex-wrap:wrap;gap:4px}
.quadro-onb .card-onb-meta span:nth-child(2){opacity:.45}
.quadro-onb .col-onb-nome{font-size:11.5px;letter-spacing:.3px}
.col-onb{flex:0 0 208px;background:var(--navy-800);border:1px solid var(--linha);border-radius:var(--raio);padding:10px;display:flex;flex-direction:column}
.col-onb-topo{display:flex;align-items:center;gap:8px;padding:2px 4px 10px;border-bottom:1px solid var(--linha);margin-bottom:10px}
.col-onb-nome{font-size:12.5px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;color:var(--azul-txt)}
.col-onb-qtd{margin-left:auto;background:var(--navy-600);border-radius:20px;padding:1px 9px;font-size:11.5px;font-weight:700}
.card-onb{background:var(--navy-700);border:1px solid var(--linha);border-radius:10px;padding:11px;margin-bottom:9px;cursor:grab}
.card-onb:hover{border-color:var(--azul-claro)}
.card-onb-nome{font-size:13.5px;font-weight:600;line-height:1.3}
.card-onb-empresa{font-size:11.5px;color:var(--texto-suave);margin-top:2px}
.card-onb-prog{display:flex;align-items:center;gap:8px;margin:9px 0}
.card-onb-prog .barra{flex:1;height:5px}
.card-onb-prog span{font-size:11px;color:var(--texto-suave)}
.card-onb-meta{font-size:11.5px;color:var(--texto-suave);display:flex;gap:6px;flex-wrap:wrap}
.card-onb-rodape{display:flex;align-items:center;gap:8px;margin-top:9px;font-size:11.5px;color:var(--texto-suave)}
.col-onb-vazio{text-align:center;color:var(--texto-suave);font-size:12px;padding:16px 0}

/* Cartão de conta de anúncios (Plataformas da Foxx) */
.ads-lista{display:flex;flex-direction:column;gap:14px}
.ads-cartao{background:var(--navy-800);border:1px solid var(--linha);border-radius:var(--raio);padding:16px 18px;border-left:4px solid var(--azul)}
.ads-cartao.meta{border-left-color:#8B5CF6}
.ads-cartao.google{border-left-color:#3B82F6}
.ads-cartao-topo{display:flex;align-items:center;gap:10px;margin-bottom:14px;flex-wrap:wrap}
.ads-farol{width:12px;height:12px;border-radius:50%;flex:0 0 12px}
.ads-farol.verde{background:var(--verde)}
.ads-farol.amarelo{background:var(--amarelo)}
.ads-farol.vermelho{background:var(--vermelho)}
.ads-cliente{font-size:15.5px;font-weight:700}
.ads-plataforma{margin-left:auto;font-size:11.5px;font-weight:700;border-radius:20px;padding:3px 11px;background:var(--navy-600);color:var(--texto)}
.ads-plataforma.meta{background:var(--fundo-roxo);color:var(--roxo-txt)}
.ads-plataforma.google{background:var(--fundo-azulads);color:var(--azulads-txt)}
.ads-pares{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
@media (max-width:1180px){.ads-pares{grid-template-columns:repeat(2,1fr)}}
.ads-bloco-rotulo{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.7px;color:var(--texto-suave);margin-bottom:8px}
.ads-bloco-linha{display:flex;align-items:center;gap:8px;font-size:13px;margin-bottom:4px}
.ads-bloco-tag{font-size:11px;color:var(--texto-suave);min-width:82px}
.ads-bloco-valor{font-weight:600}
.ads-bloco-linha.vigente .ads-bloco-valor{color:var(--branco);font-weight:700}
.ads-estouro{color:var(--vermelho-txt)}
.ads-divisor{height:1px;background:var(--linha);margin:14px 0}
.ads-metricas{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:13px}
.ads-metricas .rot{color:var(--texto-suave);font-weight:600}
.ads-metricas .real{font-weight:700}
.ads-metricas .div{color:var(--texto-suave);opacity:.6}
.ads-metricas .sep-metrica{width:1px;height:16px;background:var(--linha);margin:0 4px}
.ads-proj{font-size:12px;font-weight:700;border-radius:20px;padding:2px 9px}
.ads-proj.sobe{background:var(--fundo-verde);color:var(--verde-txt)}
.ads-proj.desce{background:var(--fundo-vermelho);color:var(--vermelho-txt)}
.ads-saldo{font-size:13px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ads-sos{background:var(--vermelho);color:#fff;font-size:11px;font-weight:800;border-radius:6px;padding:2px 8px}
.ads-baixo{background:var(--fundo-amarelo);color:var(--amarelo-txt);font-size:11px;font-weight:800;border-radius:6px;padding:2px 8px}
.ads-auto{color:var(--verde-txt);font-weight:600}

/* Tabela combinada das plataformas */
.tabela-rolagem{overflow-x:auto;border-radius:10px}
th.grupo-meta{color:var(--roxo-txt);text-align:center}
th.grupo-google{color:var(--azulads-txt);text-align:center}
td.col-meta{background:rgba(139,92,246,.06)}
td.col-google{background:rgba(59,130,246,.06)}

/* Quadro de tarefas */
.quadro-tarefas{display:grid;grid-auto-flow:column;grid-auto-columns:268px;gap:12px;overflow-x:auto;padding-bottom:14px}
.col-tarefa{flex:0 0 268px;background:var(--navy-800);border:1px solid var(--linha);border-radius:var(--raio);padding:10px;display:flex;flex-direction:column}
.col-tarefa-topo{display:flex;align-items:center;gap:8px;padding:2px 4px 10px;font-size:12.5px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;color:var(--azul-txt)}
.col-tarefa-topo .qtd{margin-left:auto;background:var(--navy-600);border-radius:20px;padding:1px 9px;font-size:11.5px;color:var(--texto)}
.card-tarefa{background:var(--navy-700);border:1px solid var(--linha);border-radius:10px;padding:11px 12px;margin-bottom:9px;position:relative;cursor:pointer}
.card-tarefa:hover{border-color:var(--azul-claro)}
.card-tarefa.briefing{border-left:3px solid var(--amarelo)}
.card-tarefa.lp{border-left:3px solid #22D3EE}
.card-tarefa-check{position:absolute;top:9px;right:9px;width:22px;height:22px;border-radius:50%;border:1.5px solid var(--linha);color:var(--texto-suave);font-size:12px;display:flex;align-items:center;justify-content:center}
.card-tarefa-check:hover{border-color:var(--verde);color:var(--verde)}
.card-tarefa-etiquetas{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:8px;padding-right:26px}
.etiqueta-mini{font-size:10.5px;font-weight:700;border-radius:5px;padding:2px 7px;color:#0A0C12}
.card-tarefa-titulo{font-size:13.5px;font-weight:600;line-height:1.35;padding-right:26px}
.card-tarefa-meta{display:flex;align-items:center;gap:9px;margin-top:9px;font-size:11.5px;color:var(--texto-suave);flex-wrap:wrap}
.prazo{font-weight:700;border-radius:5px;padding:2px 7px}
.prazo.atrasado{background:var(--fundo-vermelho);color:var(--vermelho-txt)}
.prazo.hoje{background:var(--fundo-amarelo);color:var(--amarelo-txt)}
.prazo.futuro{background:var(--navy-600);color:var(--texto-suave)}

/* CRM (etapas coloridas) */
.quadro-crm{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(212px,1fr);gap:12px;overflow-x:auto;padding-bottom:14px}
.col-crm{flex:1;min-width:212px;background:var(--navy-800);border:1px solid var(--linha);border-radius:var(--raio);display:flex;flex-direction:column}
.col-crm-topo{padding:11px 14px;border-bottom:1px solid var(--linha);display:flex;align-items:center;gap:8px}
.col-crm-nome{font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.6px}
.col-crm-qtd{margin-left:auto;background:var(--navy-600);border-radius:20px;padding:1px 9px;font-size:11.5px;font-weight:700}
.col-crm-corpo{padding:9px;display:flex;flex-direction:column;gap:7px}
.card-lead{background:var(--navy-700);border:1px solid var(--linha);border-radius:9px;padding:10px 12px;cursor:pointer}
.card-lead:hover{border-color:var(--azul-claro)}
.card-lead-topo{display:flex;align-items:flex-start;gap:8px}
.card-lead-nome{font-size:13.5px;font-weight:600;flex:1}
.card-lead-valor{font-size:11px;font-weight:800;color:var(--verde-txt);background:var(--fundo-verde);border:1px solid rgba(34,197,94,.35);border-radius:5px;padding:2px 7px;white-space:nowrap}
.card-lead-linha{font-size:11.5px;color:var(--texto-suave);margin-top:5px;display:flex;align-items:center;gap:6px}
.card-lead-produto{color:var(--verde-txt);font-weight:600}
.card-lead-rodape{display:flex;justify-content:space-between;font-size:10.5px;color:var(--texto-suave);margin-top:8px}
.card-lead-tarefa{margin-top:8px;font-size:11px;font-weight:600;border-radius:5px;padding:4px 7px;border-left:2px solid var(--azul-claro);background:rgba(46,92,158,.12);display:flex;gap:6px;align-items:center}
.card-lead-aguardando{margin-top:8px;font-size:11px;font-weight:700;color:var(--amarelo-txt)}
.col-crm-vazio{text-align:center;color:var(--texto-suave);font-size:12px;padding:18px 0}

/* Swipe Files */
.sw-grade{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
@media (max-width:1180px){.sw-grade{grid-template-columns:repeat(2,1fr)}}
.sw-peca{background:var(--navy-800);border:1px solid var(--linha);border-radius:var(--raio);overflow:hidden;cursor:pointer}
.sw-peca:hover{border-color:var(--azul-claro)}
.sw-capa{height:158px;background:linear-gradient(135deg,var(--navy-600),var(--navy-700));display:flex;align-items:center;justify-content:center;font-size:34px;position:relative}
.sw-fogo{position:absolute;left:8px;bottom:8px;background:var(--sobreposicao);border:1px solid var(--linha);border-radius:20px;padding:3px 9px;font-size:11px;font-weight:700;color:var(--laranja-txt)}
.sw-play{position:absolute;right:10px;top:10px;background:var(--sobreposicao);border-radius:50%;width:28px;height:28px;display:flex;align-items:center;justify-content:center;font-size:12px}
.sw-corpo{padding:12px 14px 14px}
.sw-anunciante{font-size:13.5px;font-weight:600}
.sw-chips{display:flex;gap:6px;flex-wrap:wrap;margin:8px 0}
.sw-copy{font-size:12px;color:var(--texto-suave);line-height:1.45}
.sw-cta{display:inline-block;margin-top:9px;font-size:11px;font-weight:700;color:var(--azul-txt)}

/* Tela de Em breve */
.em-breve{background:var(--navy-800);border:1px dashed var(--linha);border-radius:var(--raio);padding:56px 30px;text-align:center;max-width:760px;margin:20px auto}
.em-breve .icone{font-size:44px;margin-bottom:14px}
.em-breve h2{font-size:21px;font-weight:700;margin-bottom:10px}
.em-breve p{font-size:14.5px;color:var(--texto-suave);line-height:1.6;max-width:520px;margin:0 auto}
.em-breve .selo-breve{display:inline-block;margin-bottom:18px;font-size:11.5px;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:var(--azul-txt);background:var(--fundo-azul);border-radius:20px;padding:5px 14px}


/* ============================================================
   Tema claro (padrão): azul e branco, o contrário do escuro
   ============================================================ */
body.claro{
  --navy-900:#F2F5FA;
  --navy-800:#FFFFFF;   /* cartões, topo e menu: papel */
  --navy-700:#E8EEF7;
  --navy-600:#D3DEED;
  --linha:#D3DEED;
  --texto:#0A0C12;      /* ink */
  --texto-suave:#5E6B7D;
  --azul-suave:#5E6B7D;
  --azul:#1B3A6B;
  --azul-claro:#2E5C9E;
  --ouro:#F5C518;
  --amarelo:#F5C518;
  --branco:#0A0C12;
  --verde-txt:#15803D;
  --vermelho-txt:#DC2626;
  --amarelo-txt:#6B4E00;
  --roxo-txt:#6D28D9;
  --azulads-txt:#1B3A6B;
  --laranja-txt:#C2410C;
  --azul-txt:#1B3A6B;
  --fundo-verde:rgba(34,197,94,.14);
  --fundo-vermelho:rgba(239,68,68,.12);
  --fundo-amarelo:rgba(245,178,27,.18);
  --fundo-azul:rgba(27,58,107,.10);
  --fundo-roxo:rgba(139,92,246,.14);
  --fundo-azulads:rgba(59,130,246,.14);
  --sobreposicao:rgba(255,255,255,.92);
  --sombra:0 1px 2px rgba(21,35,65,.05);
}
body.claro .cartao,
body.claro .cartao-cliente,
body.claro .ads-cartao,
body.claro .col-onb,
body.claro .col-tarefa,
body.claro .col-crm,
body.claro .sw-peca,
body.claro .item-oraculo{box-shadow:var(--sombra)}
body.claro .topo{box-shadow:0 1px 3px rgba(21,35,65,.06)}
body.claro .item.ativo,
body.claro .botao:not(.vazio),
body.claro .filtro.ativo,
body.claro .subabas button.ativo{color:#fff}
body.claro .botao.vazio{color:var(--texto)}
body.claro .grafico .col .haste.clara{background:#C9D5EE}
body.claro .card-tarefa,
body.claro .card-onb,
body.claro .card-lead,
body.claro .ficha{background:#F7F9FE}
/* Cartão sem ninguém marcado. Fica cinza de propósito: é uma fila que precisa de dono,
   e pintar de azul como os outros esconderia justamente isso. */
.mini-avatar.vazio{background:var(--navy-600);color:var(--texto-suave)}
.card-tarefa{cursor:pointer}

body.claro .mini-avatar{border-color:#F7F9FE}
body.claro .sw-capa{background:linear-gradient(135deg,#E3EAF7,#F0F4FC)}
body.claro .cc-chave.desligado i{background:#C9D5EE}
body.claro .avatar,
body.claro .item.ativo .selo{color:#fff}

/* ============================================================
   Menu que recolhe (hambúrguer) e botões do topo
   ============================================================ */
.hamburguer{
  width:38px;height:38px;border-radius:10px;flex:0 0 38px;
  background:var(--navy-700);border:1px solid var(--linha);
  display:flex;align-items:center;justify-content:center;font-size:16px;color:var(--texto);
}
.hamburguer:hover{border-color:var(--azul-claro)}

.menu{transition:transform .2s ease}
.conteudo{transition:margin-left .2s ease}
body.menu-recolhido .menu{transform:translateX(-100%)}
body.menu-recolhido .conteudo{margin-left:0}

.tema{
  width:38px;height:38px;border-radius:10px;
  background:var(--navy-700);border:1px solid var(--linha);
  display:flex;align-items:center;justify-content:center;font-size:15px;
}
.tema:hover{border-color:var(--azul-claro)}

@media (max-width:900px){
  .busca{display:none}
  .menu{width:min(84vw,264px)}
}

/* ---------- CRM: ordem por etapa, playbook e situação (29/08/2026) ---------- */
.col-crm-ordem{
  display:flex;align-items:center;gap:6px;
  padding:6px 10px;background:var(--navy-800);border-bottom:1px solid var(--linha);
}
.ordem-nome{
  flex:1;text-align:left;font-size:11.5px;font-weight:600;color:var(--texto-suave);
  background:transparent;border:none;padding:2px 0;cursor:pointer;
}
.ordem-nome:hover{color:var(--texto)}
.ordem-nome .setinha{font-size:9px}
.ordem-seta{
  width:22px;height:22px;border-radius:6px;background:var(--navy-700);
  border:1px solid var(--linha);color:var(--texto);font-size:12px;cursor:pointer;
}
.ordem-seta:hover{border-color:var(--azul-claro)}
.menu-ordem{
  position:fixed;z-index:80;min-width:190px;
  background:var(--navy-800);border:1px solid var(--linha);border-radius:10px;
  padding:6px;box-shadow:0 8px 24px rgba(0,0,0,.25);
  display:flex;flex-direction:column;gap:2px;
}
.menu-ordem button{
  text-align:left;font-size:13px;color:var(--texto);background:transparent;
  border:none;border-radius:7px;padding:8px 10px;cursor:pointer;
}
.menu-ordem button:hover{background:var(--navy-700)}
.menu-ordem button.ativo{background:var(--azul);color:#fff;font-weight:600}
.col-crm-playbook{
  font-size:11.5px;color:var(--texto-suave);
  padding:6px 10px;background:var(--navy-800);border-bottom:1px solid var(--linha);
}
.chip-situacao{
  display:inline-block;font-size:11px;font-weight:700;
  padding:2px 8px;border-radius:100px;
}
.chip-situacao.vendido{background:var(--fundo-verde);color:var(--verde-txt)}
.chip-situacao.pausado{background:var(--fundo-amarelo);color:var(--amarelo-txt)}
.card-lead-motivo{
  margin-top:8px;font-size:12px;font-weight:600;color:var(--vermelho-txt);
  background:var(--fundo-vermelho);border-left:3px solid var(--vermelho);
  border-radius:6px;padding:6px 8px;
}

/* ---------- Tarefas: agenda do dia (a tela inicial da Foxx) ---------- */
.quadro-agenda{
  display:grid;grid-template-columns:repeat(5,minmax(230px,1fr));gap:14px;
  overflow-x:auto;padding-bottom:8px;
}
.col-agenda{
  background:var(--navy-800);border:1px solid var(--linha);
  border-radius:var(--raio);padding:12px;min-width:230px;
}
.col-agenda-topo{
  display:flex;align-items:center;gap:8px;
  font-size:13px;font-weight:700;color:var(--texto);margin-bottom:10px;
}
.col-agenda-topo .qtd{
  margin-left:auto;background:var(--navy-600);color:var(--texto);
  border-radius:20px;padding:1px 8px;font-size:11px;font-weight:600;
}
.card-agenda{
  background:var(--navy-700);border:1px solid var(--linha);
  border-left:3px solid var(--azul);border-radius:10px;
  padding:10px 12px;margin-bottom:8px;
}
.card-agenda.verde{border-left-color:var(--verde)}
.card-agenda.amarelo{border-left-color:var(--amarelo)}
.card-agenda.vermelho{border-left-color:var(--vermelho)}
.card-agenda-titulo{font-size:13px;font-weight:600;color:var(--texto);line-height:1.35}
.card-agenda-sub{font-size:11.5px;color:var(--texto-suave);margin-top:3px}
.card-agenda-extra{font-size:11.5px;font-weight:600;color:var(--texto-suave);margin-top:6px}
.card-agenda.verde .card-agenda-extra{color:var(--verde-txt)}
.card-agenda.amarelo .card-agenda-extra{color:var(--amarelo-txt)}
.card-agenda.vermelho .card-agenda-extra{color:var(--vermelho-txt)}
body.claro .card-agenda{background:#F7F9FE}

/* ---------- Dashboard do cliente (cópia literal da Foxx) ---------- */
.dash-cab{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:14px}
.dash-cab-titulos{display:flex;flex-direction:column;gap:2px}
.dash-titulo{font-size:19px;font-weight:800;color:var(--texto)}
.dash-sub{font-size:13px;color:var(--texto-suave)}
.dash-proj{
  align-self:flex-start;margin-top:6px;font-size:12.5px;font-weight:600;
  color:var(--laranja-txt);background:rgba(242,107,29,.12);
  border:1px solid rgba(242,107,29,.35);border-radius:100px;padding:3px 12px;
}
.dash-cab-direita{margin-left:auto;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.dash-agente{
  height:34px;padding:0 14px;border-radius:100px;font-size:12.5px;font-weight:700;
  color:var(--laranja-txt);background:transparent;
  border:1px solid rgba(242,107,29,.45);cursor:pointer;
}
.dash-agente:hover{background:rgba(242,107,29,.10)}
.dash-cliente{display:flex;align-items:center;gap:10px;text-align:right}
.dash-cliente-nome{font-size:13px;font-weight:700;color:var(--texto);max-width:180px}
.dash-cliente-tipo{font-size:11.5px;color:var(--texto-suave)}
.dash-avatar{
  width:38px;height:38px;border-radius:50%;background:var(--azul);color:#fff;
  font-weight:700;font-size:13px;display:flex;align-items:center;justify-content:center;flex:none;
}
.dash-filtros{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:12px}
.dash-filtros label{
  display:block;font-size:12px;font-weight:600;color:var(--texto-suave);margin-bottom:6px;
}
.dash-filtros select{width:100%}
.dash-atualiza{
  display:flex;align-items:center;justify-content:flex-end;gap:12px;
  margin-bottom:14px;font-size:12.5px;color:var(--texto-suave);
}
.utm-card{
  background:var(--navy-800);border:1px solid var(--linha);
  border-radius:var(--raio);padding:16px 18px;box-shadow:var(--sombra);
}
.utm-card-titulo{font-size:13px;font-weight:600;color:var(--texto-suave);margin-bottom:8px}
.utm-card-titulo.verde{color:var(--verde-txt)}
.utm-card-valor{font-size:26px;font-weight:800;color:var(--texto)}
.utm-card-valor.verde{color:var(--verde-txt)}
.dash-duas{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px}
@media (max-width:1180px){.dash-duas{grid-template-columns:1fr}}
.dash-vazio{font-size:13px;color:var(--texto-suave)}

/* O funil: blocos empilhados no centro, iguais aos da Foxx */
.fc-vertical{padding:10px 0 4px}
.fc-etapa{text-align:center}
.fc-bloco{
  margin:0 auto;min-width:170px;border-radius:10px;padding:12px 10px;color:#fff;
}
.fc-label{font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase;opacity:.92}
.fc-valor{font-size:24px;font-weight:800;line-height:1.2}
.fc-pct{font-size:11px;opacity:.8}
.fc-seta{padding:7px 0}
.fc-seta span{
  font-size:11px;font-weight:600;color:var(--texto-suave);
  background:var(--navy-700);border:1px solid var(--linha);border-radius:100px;padding:2px 10px;
}

/* Donut de posicionamento */
.donut-wrap{display:flex;align-items:center;gap:26px;flex-wrap:wrap;padding-top:8px}
.donut-svg-area{position:relative;width:170px;height:170px;margin:0 auto}
.donut-svg-area svg{width:100%;height:100%}
.donut-centro{
  position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;
}
.donut-centro span{font-size:12px;color:var(--texto-suave)}
.donut-centro strong{font-size:24px;font-weight:800;color:var(--texto)}
.donut-legenda{
  flex:1;min-width:170px;display:grid;grid-template-columns:1fr 1fr;gap:10px;
  font-size:13px;color:var(--texto);
}
.donut-legenda i{
  display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:8px;
}
.parcela-lista{padding-top:6px}
.parcela-linha{
  display:flex;justify-content:space-between;gap:12px;font-size:13.5px;
  padding:9px 0;border-bottom:1px solid var(--linha);color:var(--texto);
}
.parcela-linha:last-child{border-bottom:none}
.parcela-linha strong{font-weight:800}

/* Leads por Horário */
.horas-grade{
  display:flex;align-items:flex-end;gap:6px;padding-top:26px;min-height:120px;
}
.horas-col{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;position:relative}
.horas-pct{font-size:10.5px;font-weight:700;color:var(--texto)}
.horas-bar{width:100%;max-width:26px;background:#5B8DEF;border-radius:4px 4px 2px 2px}
.horas-h{font-size:10px;color:var(--texto-suave)}

/* ---------- Menu da conta (avatar WM) ---------- */
button.avatar{border:none;cursor:pointer}
button.avatar:hover{outline:2px solid var(--azul-claro);outline-offset:2px}
.menu-conta{
  display:none;position:fixed;top:calc(var(--altura-topo) - 6px);right:16px;z-index:90;
  min-width:230px;background:var(--navy-800);border:1px solid var(--linha);
  border-radius:12px;padding:8px;box-shadow:0 12px 32px rgba(0,0,0,.28);
}
.menu-conta.aberto{display:block}
.menu-conta-topo{
  padding:8px 10px 10px;border-bottom:1px solid var(--linha);margin-bottom:6px;
}
.menu-conta-topo strong{display:block;font-size:13.5px;color:var(--texto)}
.menu-conta-topo span{font-size:11.5px;color:var(--texto-suave)}
.menu-conta button{
  display:flex;align-items:center;gap:10px;width:100%;text-align:left;
  font-size:13.5px;font-weight:500;color:var(--texto);background:transparent;
  border:none;border-radius:8px;padding:9px 10px;cursor:pointer;
}
.menu-conta button:hover{background:var(--navy-700)}
.menu-conta button .icone{width:20px;text-align:center}
.menu-conta button .selo{margin-left:auto}
.menu-conta-divisor{height:1px;background:var(--linha);margin:6px 4px}

/* ============================================================
   CRM: cinco indicadores, painel de período e menu de funil
   Trazido do CRM da Plan Vision em 31/08/2026, com a cor da casa.
   ============================================================ */

/* Os cinco indicadores ficam lado a lado sempre, em qualquer largura. `minmax(0,1fr)` é o
   que permite: sem ele, o conteúdo empurra a coluna e o grid estoura. Em tela apertada eles
   diminuem a fonte em vez de descer para outra linha. */
.g5{grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.g5 .cartao{min-width:0;padding:15px 16px}
.g5 .indicador .rotulo{font-size:11px;letter-spacing:.4px}
.g5 .indicador .valor{font-size:25px}
.g5 .indicador .variacao{font-size:11.5px;line-height:1.35}
@media (max-width:1380px){
  .g5{gap:10px}
  .g5 .cartao{padding:13px 13px}
  .g5 .indicador .rotulo{font-size:10px}
  .g5 .indicador .valor{font-size:22px;margin:6px 0 3px}
  .g5 .indicador .variacao{font-size:10.5px}
}

/* Painel que desce do botão de período. Fixo, porque a barra de filtros corta absoluto. */
.painel-flutuante{
  position:fixed;z-index:90;width:340px;max-width:calc(100vw - 24px);
  max-height:calc(100vh - 40px);overflow-y:auto;
  background:var(--navy-800);border:1px solid var(--linha);border-radius:12px;
  box-shadow:0 14px 40px rgba(10,20,46,.28);
  text-align:left;
}
.painel-titulo{
  padding:11px 16px;background:var(--navy-700);border-bottom:1px solid var(--linha);
  font-size:11px;font-weight:700;color:var(--texto-suave);
  text-transform:uppercase;letter-spacing:1px;border-radius:12px 12px 0 0;
}
.painel-atalhos{display:flex;flex-wrap:wrap;gap:6px;padding:14px 16px 6px}
.chip-atalho{
  padding:5px 11px;border-radius:20px;border:1px solid var(--linha);
  background:transparent;color:var(--texto);font-size:11.5px;font-weight:600;cursor:pointer;
}
.chip-atalho:hover{border-color:var(--azul-claro)}
.chip-atalho.ativo{background:var(--azul);border-color:var(--azul);color:#fff}

.painel-datas{display:flex;gap:10px;padding:12px 16px}
.painel-datas label{flex:1;display:block}
.painel-datas span{
  display:block;font-size:10px;color:var(--texto-suave);
  text-transform:uppercase;letter-spacing:1px;margin-bottom:5px;
}
.painel-datas input{
  width:100%;height:34px;padding:0 9px;border-radius:8px;
  background:var(--navy-700);border:1px solid var(--linha);
  color:var(--texto);font-size:12.5px;font-family:inherit;outline:none;
}
.painel-datas input:focus{border-color:var(--azul-claro)}

.painel-erro{
  margin:0 16px 10px;padding:8px 11px;border-radius:8px;
  background:var(--fundo-vermelho);color:var(--vermelho-txt);
  font-size:11.5px;font-weight:600;
}

.painel-secao{border-top:1px solid var(--linha);padding:13px 16px 6px}
.painel-pergunta{font-size:11.5px;font-weight:700;color:var(--texto);margin-bottom:9px}
.opcao-data{
  display:flex;align-items:flex-start;gap:9px;padding:7px 8px;margin-bottom:2px;
  border-radius:8px;cursor:pointer;
}
.opcao-data:hover{background:var(--navy-700)}
.opcao-data.ativa{background:var(--fundo-azul)}
.opcao-data input{margin-top:3px;accent-color:var(--azul);cursor:pointer;flex-shrink:0}
.opcao-data strong{display:block;font-size:12.5px;font-weight:600;color:var(--texto)}
.opcao-data.ativa strong{font-weight:700}
.opcao-data small{display:block;font-size:10.5px;color:var(--texto-suave);margin-top:1px}

.painel-rodape{
  display:flex;gap:9px;padding:12px 16px;border-top:1px solid var(--linha);
  background:var(--navy-700);border-radius:0 0 12px 12px;
}
.painel-rodape .filtro,.painel-rodape .botao{flex:1;justify-content:center;height:36px}
.painel-rodape .botao[disabled]{opacity:.45;cursor:not-allowed}

/* Menu de funil: aproveita o menu de ordem e ganha rótulo e contagem. */
.menu-rotulo{
  font-size:9.5px;color:var(--texto-suave);text-transform:uppercase;
  letter-spacing:1px;padding:5px 10px 3px;
}
.menu-ordem button .menu-qtd{
  font-size:10.5px;color:var(--texto-suave);font-weight:600;
}
.menu-ordem button.ativo .menu-qtd{color:rgba(255,255,255,.75)}
.menu-ordem button:has(.menu-qtd){display:flex;justify-content:space-between;align-items:center;gap:10px}

/* A faixa que avisa que os números são de um recorte de tempo. */
#crm-aviso .aviso{margin-bottom:18px}
#crm-aviso .filtro{background:transparent;flex-shrink:0}

/* ---------- Kanban: arrastar o cartão de uma etapa para outra ---------- */
.card-lead[draggable="true"]{cursor:grab}
.card-lead[draggable="true"]:active{cursor:grabbing}
.card-lead.arrastando{opacity:.45;transform:rotate(1.5deg)}
.col-crm.alvo{outline:2px dashed var(--azul);outline-offset:-4px;background:var(--fundo-azul)}
.col-crm.alvo .col-crm-corpo{min-height:70px}

/* ---------- Popup do motivo de perda ---------- */
/* Etapa de perda não anda sem justificativa: é o motivo que faz o relatório valer depois. */
.modal-fundo{
  position:fixed;inset:0;z-index:200;background:rgba(10,20,46,.62);
  display:flex;align-items:center;justify-content:center;padding:16px;
}
.modal-caixa{
  width:460px;max-width:100%;background:var(--navy-800);
  border:1px solid var(--linha);border-radius:14px;padding:22px;
  box-shadow:0 20px 60px rgba(10,20,46,.4);
}
.modal-titulo{font-size:15.5px;font-weight:700;color:var(--texto);margin-bottom:7px}
.modal-texto{font-size:12.5px;color:var(--texto-suave);line-height:1.55;margin:0 0 14px}
.modal-texto strong{color:var(--texto)}
.modal-chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:11px}
.modal-caixa textarea{
  width:100%;box-sizing:border-box;background:var(--navy-700);
  border:1px solid var(--linha);border-radius:9px;padding:9px 11px;
  color:var(--texto);font-size:13px;font-family:inherit;outline:none;resize:vertical;
}
.modal-caixa textarea:focus{border-color:var(--azul-claro)}
.modal-dica{font-size:11.5px;color:var(--amarelo-txt);font-weight:600;margin-top:6px;min-height:16px}
.modal-rodape{display:flex;justify-content:flex-end;gap:9px;margin-top:12px}
.botao.perigo{background:var(--vermelho);border-color:var(--vermelho)}
.botao.perigo:hover{background:#DC2626}
.botao.perigo[disabled]{opacity:.45;cursor:not-allowed}

/* Com o Período dentro da barra, a linha de filtros do CRM tem seis itens. A busca cede
   um pouco de largura para os seis caberem numa linha só no monitor da casa. */
.barra-ferramentas #busca-lead{min-width:170px;flex:1;max-width:260px}

/* ============================================================
   CRM: editor de etapas, cadastro e ficha do lead
   ============================================================ */

/* O telefone do cartão leva direto para a conversa no WhatsApp. */
.link-whats{color:var(--verde-txt);font-weight:600;text-decoration:none;display:inline-flex;gap:6px;align-items:center}
.link-whats:hover{text-decoration:underline}

/* ---------- Caixa de modal ---------- */
.modal-caixa.larga{width:620px;max-height:88vh;overflow-y:auto}
.modal-cabecalho{display:flex;align-items:center;gap:12px;margin-bottom:8px}
.modal-cabecalho .modal-titulo{flex:1;margin:0}
.modal-fechar{
  width:30px;height:30px;border-radius:8px;border:1px solid var(--linha);
  background:transparent;color:var(--texto-suave);font-size:18px;line-height:1;cursor:pointer;flex-shrink:0;
}
.modal-fechar:hover{border-color:var(--azul-claro);color:var(--texto)}
.rotulo-campo{
  display:block;font-size:10.5px;color:var(--texto-suave);
  text-transform:uppercase;letter-spacing:1px;margin-bottom:6px;font-weight:700;
}
.campo-modal{
  width:100%;box-sizing:border-box;height:38px;padding:0 11px;border-radius:9px;
  background:var(--navy-700);border:1px solid var(--linha);
  color:var(--texto);font-size:13.5px;font-family:inherit;outline:none;
}
textarea.campo-modal{height:auto;padding:9px 11px;resize:vertical;line-height:1.5}
.campo-modal:focus{border-color:var(--azul-claro)}
select.campo-modal{cursor:pointer}

/* ---------- Editor de etapas ---------- */
.lista-etapas{display:flex;flex-direction:column;gap:8px;margin:14px 0}
.linha-etapa{
  display:flex;align-items:center;gap:9px;
  background:var(--navy-700);border:1px solid var(--linha);
  border-radius:9px;padding:9px 11px;cursor:grab;
}
.linha-etapa.arrastando{opacity:.45}
.linha-etapa.alvo{outline:2px dashed var(--azul);outline-offset:-3px}
.setas-etapa{display:flex;flex-direction:column;gap:1px;flex-shrink:0}
.seta-etapa{
  background:none;border:none;color:var(--texto-suave);
  font-size:9px;line-height:1;padding:1px 2px;cursor:pointer;
}
.seta-etapa:hover:not([disabled]){color:var(--azul-txt)}
.seta-etapa[disabled]{opacity:.25;cursor:default}
.emoji-etapa{
  width:52px;flex-shrink:0;height:32px;text-align:center;font-size:15px;cursor:pointer;
  background:var(--navy-800);border:1px solid var(--linha);border-radius:7px;color:var(--texto);outline:none;
}
.nome-etapa{
  flex:1;min-width:90px;height:32px;padding:0 9px;border-radius:7px;
  background:var(--navy-800);border:1px solid var(--linha);
  color:var(--texto);font-size:13px;font-family:inherit;outline:none;
}
.nome-etapa:focus{border-color:var(--azul-claro)}
.cores-etapa{display:flex;gap:3px;flex-wrap:wrap;width:76px;flex-shrink:0}
.bolinha-cor{
  width:16px;height:16px;border-radius:4px;cursor:pointer;
  border:2px solid transparent;padding:0;
}
.bolinha-cor.ativa{border-color:var(--texto)}
.trofeu-etapa,.lixeira-etapa{
  background:none;border:none;font-size:15px;cursor:pointer;padding:0 2px;flex-shrink:0;
}
.trofeu-etapa{opacity:.28;filter:grayscale(1)}
.trofeu-etapa.ativo{opacity:1;filter:none}
.lixeira-etapa[disabled]{opacity:.25;cursor:default}

/* ---------- Menu de funil: renomear, criar e apagar ---------- */
.linha-funil{display:flex;align-items:center;gap:2px}
.linha-funil > button:first-child{flex:1;min-width:0}
.botao-lapis{
  background:none;border:none;cursor:pointer;font-size:12px;
  padding:6px;opacity:0;transition:opacity .15s;flex-shrink:0;
}
.linha-funil:hover .botao-lapis{opacity:.8}
.botao-lapis:hover{opacity:1}
.menu-criar,.menu-apagar{
  width:100%;text-align:left;border-radius:7px;padding:8px 10px;
  font-size:12.5px;font-weight:700;cursor:pointer;margin-top:4px;
}
.menu-criar{border:1px dashed var(--linha);background:transparent;color:var(--azul-txt)}
.menu-criar:hover{border-color:var(--azul-claro)}
.menu-apagar{border:none;background:transparent;color:var(--vermelho-txt);font-weight:600;font-size:11.5px}
.menu-apagar:hover{background:var(--fundo-vermelho)}

/* ---------- Formulário do lead ---------- */
.form-grade{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:14px 0 4px}
.form-grade label{display:block}
.form-grade label > span{
  display:block;font-size:10.5px;color:var(--texto-suave);
  text-transform:uppercase;letter-spacing:1px;margin-bottom:5px;font-weight:700;
}
.form-grade .campo-largo{grid-column:1 / -1}
.obrigatorio{color:var(--vermelho-txt)}
@media (max-width:640px){.form-grade{grid-template-columns:1fr}}

/* ---------- Ficha do lead ---------- */
.ficha-caixa{
  width:900px;max-width:100%;max-height:90vh;overflow-y:auto;
  background:var(--navy-800);border:1px solid var(--linha);
  border-radius:14px;padding:22px;box-shadow:0 20px 60px rgba(10,20,46,.4);
}
.ficha-topo{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.ficha-nome{font-size:21px;font-weight:700;color:var(--texto);margin:0;flex-shrink:0}
.ficha-topo .modal-fechar{margin-left:auto}
.chip-etapa{
  display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:700;
  padding:4px 12px;border-radius:20px;border:1px solid;
}
.chip-etapa.pequeno{font-size:11px;padding:3px 10px}

.ficha-etiquetas{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:14px;align-items:center}
.etiqueta-lead{
  display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:600;
  padding:4px 10px;border-radius:20px;background:var(--fundo-azul);
  border:1px solid var(--azul-claro);color:var(--azul-txt);
}
.etiqueta-lead button{background:none;border:none;color:inherit;cursor:pointer;font-size:13px;line-height:1;padding:0}
.etiqueta-nova{
  font-size:11.5px;font-weight:600;padding:4px 11px;border-radius:20px;
  border:1px dashed var(--linha);background:transparent;color:var(--texto-suave);cursor:pointer;
}
.etiqueta-nova:hover{border-color:var(--azul-claro);color:var(--azul-txt)}

/* A faixa da negociação: o que foi oferecido, por quanto tempo e por quanto. */
.ficha-negocio{
  display:grid;grid-template-columns:2fr 1fr 1fr;gap:14px;
  background:var(--navy-700);border:1px solid var(--linha);
  border-radius:11px;padding:14px 16px;margin-bottom:16px;
}
.ficha-negocio label > span{
  display:block;font-size:10px;color:var(--texto-suave);
  text-transform:uppercase;letter-spacing:1px;margin-bottom:6px;font-weight:700;
}
.ficha-negocio input{
  width:100%;box-sizing:border-box;height:36px;padding:0 10px;border-radius:8px;
  background:var(--navy-800);border:1px solid var(--linha);
  color:var(--texto);font-size:13.5px;font-family:inherit;outline:none;
}
.ficha-negocio input:focus{border-color:var(--azul-claro)}
@media (max-width:700px){.ficha-negocio{grid-template-columns:1fr}}

.ficha-bloco{
  background:var(--navy-700);border:1px solid var(--linha);
  border-radius:11px;padding:14px 16px;margin-bottom:16px;
}
.ficha-bloco-titulo{
  font-size:10.5px;font-weight:700;color:var(--texto-suave);
  text-transform:uppercase;letter-spacing:1px;margin-bottom:11px;
}
.ficha-historico{display:flex;flex-direction:column;gap:7px}
.linha-historico{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.historico-quando{font-size:11px;color:var(--texto-suave);font-variant-numeric:tabular-nums}
.historico-quanto{font-size:11px;color:var(--texto-suave)}
.historico-agora{font-size:11px;color:var(--verde-txt);font-weight:700}

.ficha-grade{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:16px}
.ficha-campo{
  background:var(--navy-700);border:1px solid var(--linha);
  border-radius:9px;padding:10px 13px;
}
.ficha-campo.campo-largo{grid-column:1 / -1}
.ficha-rotulo{
  font-size:10px;color:var(--texto-suave);text-transform:uppercase;
  letter-spacing:1px;font-weight:700;margin-bottom:4px;
}
.ficha-valor{font-size:13.5px;color:var(--texto);line-height:1.5;word-break:break-word}
.ficha-valor a{color:var(--azul-txt)}
.ficha-valor .vazio{color:var(--texto-suave);opacity:.7}
.dentro-da-meta{color:var(--verde-txt);font-weight:700}
.fora-da-meta{color:var(--vermelho-txt);font-weight:700}
@media (max-width:700px){.ficha-grade{grid-template-columns:1fr}}

.ficha-acoes{display:flex;gap:9px;margin-bottom:16px;flex-wrap:wrap}
.ficha-acoes .botao{flex:1;justify-content:center}
.ficha-acoes .perigo-vazio{flex:0 0 auto;color:var(--vermelho-txt);border-color:var(--linha)}
.ficha-acoes .perigo-vazio:hover{border-color:var(--vermelho);background:var(--fundo-vermelho)}

.ficha-botoes{display:flex;flex-wrap:wrap;gap:8px}
.botao-etapa{
  font-size:12.5px;font-weight:600;padding:7px 13px;border-radius:9px;
  border:1px solid var(--linha);background:var(--navy-800);cursor:pointer;
}
.botao-etapa:hover:not([disabled]){background:var(--navy-600)}
.botao-etapa.aqui{opacity:.4;cursor:default}
.botao-etapa.tracejado{border-style:dashed;color:var(--amarelo-txt)}
.ficha-nota{font-size:11.5px;color:var(--texto-suave);margin:10px 0 0;line-height:1.5}

/* Cliente arquivado: continua na tela de arquivados, mas se apaga um pouco para não
   competir com quem está ativo. */
.cartao-cliente.arquivado{opacity:.62}
.selo-arquivado{
  font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;
  padding:2px 8px;border-radius:20px;margin-left:8px;
  background:var(--navy-600);color:var(--texto-suave);
}
/* O botão de arquivar é a chavinha ON/OFF, igual à da Foxx. */
button.cc-chave{background:transparent;border:none;cursor:pointer;padding:0}

/* Selo de contagem ainda sem número não vira chip cinza vazio no menu. */
.selo.vazio{display:none}

/* ---------- Tela de entrada ---------- */
/* Fica por cima de tudo enquanto ninguém entrou. O hub tem gente e senha próprias desde que
   os usuários da Foxx foram copiados para cá, então ele não depende dela para deixar
   alguém entrar. */
body.entrando .topo,
body.entrando .menu,
body.entrando .conteudo{display:none}
.entrada{
  position:fixed;inset:0;z-index:300;
  background:var(--navy-900);
  display:flex;align-items:center;justify-content:center;padding:20px;
}
/* `display:flex` ganha do atributo `hidden`, então esconder a entrada só pelo atributo
   deixava ela na frente da tela mesmo depois de a pessoa entrar. */
.entrada[hidden]{display:none}
.entrada-caixa{
  width:380px;max-width:100%;background:var(--navy-800);
  border:1px solid var(--linha);border-radius:16px;padding:34px 30px;
  box-shadow:0 24px 60px rgba(10,20,46,.25);
}
.entrada-logo{height:44px;display:block;margin:0 auto 22px}
.entrada-caixa h1{font-size:20px;font-weight:700;text-align:center;color:var(--texto);margin-bottom:6px}
.entrada-caixa p{font-size:13px;color:var(--texto-suave);text-align:center;margin-bottom:22px;line-height:1.5}
.entrada-caixa label{
  display:block;font-size:11px;font-weight:700;color:var(--texto-suave);
  text-transform:uppercase;letter-spacing:1px;margin-bottom:14px;
}
.entrada-caixa input{
  display:block;width:100%;box-sizing:border-box;margin-top:6px;
  height:42px;padding:0 13px;border-radius:10px;
  background:var(--navy-700);border:1px solid var(--linha);
  color:var(--texto);font-size:14px;font-family:inherit;font-weight:400;
  text-transform:none;letter-spacing:normal;outline:none;
}
.entrada-caixa input:focus{border-color:var(--azul-claro)}
.entrada-erro{
  font-size:12.5px;color:var(--vermelho-txt);font-weight:600;
  min-height:18px;margin-bottom:10px;
}
.entrada-caixa .botao{width:100%;height:44px;justify-content:center;font-size:14px}

/* ============================================================
   Card do cliente: a ficha com o processo de onboarding
   ============================================================ */

.ficha-cliente{
  background:var(--navy-800);border:1px solid var(--linha);
  border-radius:var(--raio);padding:20px 22px;margin-bottom:18px;
}
.fc-topo{display:flex;align-items:flex-start;gap:16px;flex-wrap:wrap}
.fc-nome{font-size:22px;font-weight:700;color:var(--texto);margin:0}
.fc-contato{font-size:13.5px;color:var(--texto-suave);margin-top:3px}
.fc-plataformas{
  margin-left:auto;font-size:12.5px;font-weight:600;color:var(--texto-suave);
  background:var(--navy-700);border:1px solid var(--linha);
  border-radius:20px;padding:5px 14px;
}
.fc-prazo{display:flex;align-items:center;gap:14px;margin-top:16px;flex-wrap:wrap}
.fc-dia{
  font-size:14px;font-weight:700;color:var(--texto);
  background:var(--navy-700);border:1px solid var(--linha);
  border-radius:8px;padding:6px 13px;white-space:nowrap;
}
.fc-dia small{font-weight:500;color:var(--texto-suave)}
.fc-dia.estourou{color:var(--vermelho-txt);border-color:var(--vermelho)}
.fc-prazo .barra{flex:1;min-width:140px}
.barra i.vermelha{background:var(--vermelho)}
.fc-ate{font-size:12.5px;color:var(--texto-suave);white-space:nowrap}

/* As quatro colunas do processo dentro do card de um cliente. Nome próprio, para não
   brigar com o quadro do módulo Onboarding, que tem sete. */
.quadro-processo{
  display:grid;grid-template-columns:repeat(4,minmax(252px,1fr));
  gap:12px;align-items:start;overflow-x:auto;padding-bottom:10px;
}
.col-processo{
  background:var(--navy-800);border:1px solid var(--linha);
  border-radius:var(--raio);padding:14px;
}
.col-processo.atual{border-color:var(--azul);box-shadow:0 0 0 1px var(--azul)}
.col-proc-selo{
  display:inline-block;font-size:9.5px;font-weight:700;letter-spacing:1px;
  text-transform:uppercase;color:#fff;background:var(--azul);
  border-radius:20px;padding:3px 10px;margin-bottom:10px;
}
.col-proc-topo{display:flex;align-items:baseline;gap:8px;margin-bottom:10px}
.col-proc-nome{font-size:14.5px;font-weight:600;color:var(--texto);flex:1}
.col-proc-nome b{color:var(--texto-suave);font-weight:700;margin-right:2px}
.col-proc-qtd{font-size:11.5px;color:var(--texto-suave);white-space:nowrap}
.col-proc-resumo{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:12px}
.mini-status{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:700;color:var(--texto-suave)}
.mini-status i{width:9px;height:9px;border-radius:50%;background:var(--texto-suave);display:block}
.mini-status.st-resolvido i{background:var(--verde)}
.mini-status.st-cliente i{background:var(--amarelo)}
.mini-status.st-agencia i{background:var(--vermelho)}
.mini-status.st-na i{background:var(--navy-600)}
.col-processo .botao{width:100%;justify-content:center;margin-bottom:8px}
.col-processo .botao[disabled]{opacity:.45;cursor:not-allowed}
.col-proc-trava{
  font-size:11.5px;font-weight:600;color:var(--vermelho-txt);
  background:var(--fundo-vermelho);border:1px solid var(--vermelho);
  border-radius:8px;padding:8px 10px;margin-bottom:10px;line-height:1.45;
}
.col-proc-corpo{display:flex;flex-direction:column;gap:8px;max-height:62vh;overflow-y:auto}
.col-proc-vazio{font-size:12.5px;color:var(--texto-suave);text-align:center;padding:18px 0}
.bloco-onb{
  font-size:10px;font-weight:700;letter-spacing:1px;text-transform:uppercase;
  color:var(--texto-suave);margin:10px 0 2px;
}
.bloco-onb:first-child{margin-top:0}

/* A tarefa. A borda da esquerda diz o status sem precisar ler. */
.item-onb{
  background:var(--navy-700);border:1px solid var(--linha);
  border-left:3px solid var(--texto-suave);
  border-radius:9px;padding:10px 12px;
}
.item-onb.st-resolvido{border-left-color:var(--verde)}
.item-onb.st-cliente{border-left-color:var(--amarelo)}
.item-onb.st-agencia{border-left-color:var(--vermelho)}
.item-onb.st-na{border-left-color:var(--navy-600);opacity:.6}
.item-onb-topo{display:flex;align-items:flex-start;gap:8px}
.item-onb-titulo{flex:1;font-size:13px;color:var(--texto);line-height:1.42}
.item-onb-quem{
  font-size:9.5px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;
  color:var(--texto-suave);white-space:nowrap;flex-shrink:0;
}
.item-onb-nota{
  font-size:11.5px;color:var(--texto-suave);line-height:1.45;
  margin-top:7px;padding-left:9px;border-left:2px solid var(--linha);
}
.item-onb-rodape{display:flex;align-items:center;gap:8px;margin-top:9px}
.item-onb-status{
  flex:1;height:30px;padding:0 8px;border-radius:7px;
  background:var(--navy-800);border:1px solid var(--linha);
  color:var(--texto);font-size:12px;font-family:inherit;cursor:pointer;outline:none;
}
.item-onb-status:focus{border-color:var(--azul-claro)}
.item-onb-marca{
  font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;
  color:var(--texto-suave);background:var(--navy-600);border-radius:20px;padding:3px 8px;
}
.aviso.aviso-erro{
  background:var(--fundo-vermelho);border-color:var(--vermelho);color:var(--vermelho-txt);
}
/* Em tela menor as quatro colunas não cabem, então o quadro rola na horizontal em vez de
   espremer o texto das tarefas até ficar ilegível. */
@media (max-width:1180px){
  .quadro-processo{grid-template-columns:repeat(4,280px)}
}
.col-proc-nova{width:100%;justify-content:center;border-style:dashed;margin-bottom:10px}

/* ---------- Os filtros ficam todos numa linha só ---------- */
/* Antes a barra tinha `flex-wrap` e, em tela menor que 1500px, o último filtro caía para
   uma segunda linha. Agora ela não quebra: os campos de texto cedem largura, os botões
   guardam a deles (o rótulo não pode cortar) e, se um dia não couber mesmo, a barra rola
   na horizontal em vez de empilhar. */
.barra-ferramentas{flex-wrap:nowrap;overflow-x:auto;padding-bottom:2px}
.barra-ferramentas > *{flex-shrink:0}
.barra-ferramentas .campo-busca{min-width:0}
.barra-ferramentas #busca-lead{flex:2 1 140px;min-width:120px;max-width:280px}
.barra-ferramentas select.campo-busca{flex:1 1 160px;min-width:150px}
.barra-ferramentas .filtro{white-space:nowrap}

/* O mesmo vale para os botões do topo do módulo. */
#acoes-modulo{flex-wrap:nowrap;overflow-x:auto}
#acoes-modulo > *{flex-shrink:0}

/* Rótulo que só aparece em tela larga. Em monitor menor o botão fica no ícone e o title diz
   o que ele faz, para o botão principal do módulo nunca ser empurrado para fora da tela. */
@media (max-width:1500px){ .so-largo{display:none} }

/* Busca que fica no topo do módulo cede largura antes de empurrar os botões para fora. */
#acoes-modulo .busca-topo{flex:1 1 150px;min-width:130px;max-width:280px}

/* Em monitor apertado os botões do topo do módulo perdem folga, em vez de o último ser
   empurrado para fora da tela. O botão principal do módulo é o que menos pode sumir. */
@media (max-width:1320px){
  #acoes-modulo .botao,#acoes-modulo .botao-topo{height:34px;padding:0 11px;font-size:12.5px}
  #acoes-modulo .subabas button{padding:5px 11px;font-size:12.5px}
  #acoes-modulo{gap:7px}
}

/* ============================================================
   Minha conta
   ============================================================ */
/* Dois cartões lado a lado: os dados de um lado, a senha do outro. Em tela estreita eles
   empilham, que é o único jeito de um formulário caber no celular. */
.conta-grade{align-items:start;margin-bottom:16px}
.conta-grade .cartao{min-width:0}
.conta-cabeca{display:flex;align-items:center;gap:14px;margin-bottom:18px}
.conta-avatar{
  width:52px;height:52px;border-radius:50%;background:var(--azul);color:#fff;
  font-size:18px;font-weight:800;display:flex;align-items:center;justify-content:center;flex:0 0 52px;
}
.conta-nome-grande{font-size:17px;font-weight:700;color:var(--texto)}
.conta-apoio{font-size:12.5px;color:var(--texto-suave);margin-top:4px;display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.conta-nota{font-size:12.5px;color:var(--texto-suave);line-height:1.55;margin:14px 0 0}
.conta-nota strong{color:var(--texto);font-weight:600}
.conta-rodape{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:16px}
.conta-recado{font-size:12.5px;font-weight:600}
@media (max-width:900px){.conta-grade{grid-template-columns:1fr}}


/* ============================================================
   Barra de rolagem
   ============================================================ */
/* No escuro a barra padrão do Chrome é branca e rasga a tela, ainda mais nas colunas do
   card do cliente, onde há uma por coluna. Aqui ela vira um traço discreto na cor do tema.

   ⚠️ A regra base com width e height precisa existir: as pseudo-classes sozinhas não ligam
   a barra customizada, e o Chrome ignora tudo em silêncio, sem erro no console. */
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-track{background:transparent}
*::-webkit-scrollbar-thumb{
  background:var(--navy-600);
  border:2px solid transparent;
  background-clip:padding-box;
  border-radius:20px;
}
*::-webkit-scrollbar-thumb:hover{background:var(--linha)}
*::-webkit-scrollbar-corner{background:transparent}

/* O Firefox não lê os pseudos acima, e `scrollbar-width` no mesmo elemento faria o Chrome
   descartar todos eles. O @supports separa os dois navegadores. */
@supports not selector(::-webkit-scrollbar){
  *{scrollbar-width:thin;scrollbar-color:var(--navy-600) transparent}
}

/* ============================================================
   Kanban: o cabeçalho da coluna fica
   ============================================================ */
/* Rolando um quadro para baixo, o nome da etapa saía da tela e a pessoa perdia de vista em
   qual coluna estava lendo. Agora o cabeçalho de cada coluna gruda no topo do quadro.

   ⚠️ Isto só funciona porque o quadro é quem rola, e não a página: o `position:sticky` se
   prende sempre ao contêiner de rolagem mais próximo, e o quadro já é um por causa do
   `overflow-x`. Quem dá a altura ao quadro é a função ajustarQuadros() do index.html, porque
   o que fica acima dele muda de tela para tela. Tirar aquela altura faz o cabeçalho parar de
   grudar, sem erro nenhum aparecer.

   O fundo cheio e as margens negativas existem para o cabeçalho tapar o que passa por baixo:
   sem elas os cartões apareceriam através dele e pelo vão do padding da coluna. Cada margem
   negativa é do tamanho do padding daquela coluna. */
.col-crm-cabeca,
.col-tarefa-topo,
.col-onb-topo,
.col-agenda-topo,
.coluna .topo-coluna{
  position:sticky;top:0;z-index:3;
  background:var(--navy-800);
}

/* CRM: a coluna não tem padding, então o cabeçalho já encosta no topo. */
.col-crm-cabeca{border-radius:12px 12px 0 0}

/* Tarefas e Onboarding: colunas com padding de 10px. */
.col-tarefa-topo,
.col-onb-topo{margin:-10px -10px 10px;padding:12px 14px 10px}

/* Agenda e o quadro genérico: colunas com padding de 12px. */
.col-agenda-topo,
.coluna .topo-coluna{margin:-12px -12px 12px;padding:14px 16px 12px}

/* Quem rola é o quadro, nos dois eixos. A altura vem do JavaScript; aqui fica só o
   comportamento. */
.quadro-crm,
.quadro-tarefas,
.quadro-onb,
.quadro-agenda,
.quadro{overflow:auto}

/* No quadro de sete fases a coluna é mais estreita e tem padding lateral de 9px: a margem
   negativa do cabeçalho acompanha, senão ele sobra para fora da coluna. */
.quadro-onb .col-onb-topo{margin-left:-9px;margin-right:-9px;padding-left:13px;padding-right:13px}

/* Os quadros viraram grid para as colunas curtas acompanharem a altura da mais cheia. Quem
   define a largura passa a ser a trilha do grid, e o flex-basis das colunas não vale mais
   nada; ficam a largura mínima e a altura, que continuam sendo delas. */
.quadro-crm > .col-crm,
.quadro-tarefas > .col-tarefa,
.quadro-onb > .col-onb{min-width:0}

/* ---------- Botão Melhorias e o formulário dele ---------- */
/* O texto do botão só some em tela de verdade estreita. Ele NÃO usa a classe .so-largo, que
   some abaixo de 1500px: um botão novo que ninguém conhece ainda precisa do nome à vista no
   monitor da casa, senão vira de novo o ícone que ninguém sabe para que serve. */
@media (max-width:900px){.rotulo-topo{display:none}}
.melhoria-contagem{font-size:11.5px;font-weight:600;text-align:right;margin-top:-4px}
.melhoria-recado{font-size:12.5px;font-weight:600;flex:1;text-align:left;line-height:1.4}
.modal-rodape .botao[disabled]{opacity:.45;cursor:not-allowed}
.melhoria-pronto{text-align:center;padding:14px 6px 6px}
.melhoria-pronto-icone{font-size:40px;margin-bottom:10px}
.melhoria-pronto h3{font-size:18px;font-weight:700;margin-bottom:8px}
.melhoria-pronto p{font-size:13.5px;color:var(--texto-suave);line-height:1.55;max-width:420px;margin:0 auto 18px}

/* ---------- Caixa de Entrada ---------- */
.caixa-secao{margin-top:16px}
.pessoas-lista{display:flex;flex-wrap:wrap;gap:8px}
.pessoa-escolha{
  display:inline-flex;align-items:center;gap:7px;
  background:var(--navy-700);border:1px solid var(--linha);border-radius:20px;
  padding:6px 13px;font-size:12.5px;font-weight:600;cursor:pointer;
}
.pessoa-escolha:hover{border-color:var(--azul-claro)}
.pessoa-escolha input{accent-color:var(--azul);cursor:pointer}
.passo-linha{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.passo-tirar{
  width:30px;height:38px;flex-shrink:0;border-radius:9px;border:1px solid var(--linha);
  background:transparent;color:var(--texto-suave);font-size:17px;line-height:1;
}
.passo-tirar:hover{border-color:var(--vermelho);color:var(--vermelho-txt)}
#caixa-mais-passo{margin-top:2px}
.form-grade label > span i{font-style:normal;text-transform:none;letter-spacing:0;opacity:.75;font-weight:600}
.caixa-item{
  background:var(--navy-700);border:1px solid var(--linha);border-radius:10px;
  padding:12px 14px;margin-bottom:10px;
}
.caixa-item-topo{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.caixa-item-topo strong{font-size:14px;font-weight:600;flex:1;min-width:160px}
.caixa-item-topo .cc-botao-mini{margin-left:auto}
.caixa-item-texto{font-size:12.5px;color:var(--texto-suave);line-height:1.5;margin-top:7px}
.caixa-item-rodape{font-size:11.5px;color:var(--texto-suave);margin-top:9px;font-weight:600}

/* ---------- Sino: a caixa de avisos ---------- */
.sino .ponto{
  position:absolute;top:2px;right:1px;min-width:16px;height:16px;padding:0 4px;
  border-radius:20px;background:var(--vermelho);color:#fff;
  font-size:10px;font-weight:800;line-height:16px;text-align:center;
}
.sino .ponto:not(.com-numero){min-width:8px;width:8px;height:8px;padding:0;top:6px;right:7px}
.painel-sino{
  display:none;position:fixed;top:calc(var(--altura-topo) - 6px);right:16px;
  width:380px;max-width:92vw;
  background:var(--navy-800);border:1px solid var(--linha);border-radius:12px;
  box-shadow:0 18px 44px rgba(10,20,46,.42);z-index:120;overflow:hidden;
}
.painel-sino.aberto{display:block}
.sino-topo{
  display:flex;align-items:center;gap:8px;padding:12px 15px;
  border-bottom:1px solid var(--linha);font-size:13px;font-weight:700;
}
.sino-conta{
  margin-left:auto;background:var(--navy-600);border-radius:20px;
  padding:1px 9px;font-size:11.5px;font-weight:700;color:var(--texto-suave);
}
.sino-lista{max-height:min(70vh,460px);overflow-y:auto}
.sino-item{
  display:flex;gap:11px;width:100%;text-align:left;padding:12px 15px;
  border-bottom:1px solid var(--linha);cursor:pointer;
}
.sino-item:last-child{border-bottom:none}
.sino-item:hover:not([disabled]){background:var(--navy-700)}
.sino-item[disabled]{cursor:default}
/* O que ainda não foi visto ganha uma faixa azul na lateral, e não uma cor de fundo: fundo
   diferente em metade da lista deixa o painel remendado. */
.sino-item.novo{border-left:3px solid var(--azul);padding-left:12px}
.sino-icone{font-size:16px;flex:0 0 20px;line-height:1.3}
.sino-corpo{display:flex;flex-direction:column;gap:3px;min-width:0}
.sino-titulo{font-size:13px;font-weight:600;color:var(--texto);line-height:1.35}
.sino-texto{font-size:12px;color:var(--texto-suave);line-height:1.45}
.sino-quando{font-size:11px;color:var(--texto-suave);font-weight:600;opacity:.85}
.sino-vazio{padding:34px 20px;text-align:center;font-size:13px;color:var(--texto-suave)}
.sino-vazio-icone{font-size:30px;margin-bottom:10px}

/* ---------- Configurações: pessoas ---------- */
.pessoas-quadro{display:flex;flex-direction:column;gap:9px;margin-top:14px}
.pessoa-linha{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  background:var(--navy-700);border:1px solid var(--linha);border-radius:10px;padding:11px 13px;
}
.pessoa-linha.desativada{opacity:.55}
.pessoa-avatar{
  width:34px;height:34px;border-radius:50%;background:var(--azul);color:#fff;flex:0 0 34px;
  display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:800;
}
.pessoa-quem{flex:1;min-width:170px}
.pessoa-nome{font-size:14px;font-weight:600;display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.pessoa-apoio{font-size:11.5px;color:var(--texto-suave);margin-top:2px}
.pessoa-papel{width:auto;min-width:150px;height:34px;font-size:12.5px}
.pessoa-linha .cc-botao-mini{height:34px}
.pessoa-linha .cc-botao-mini.ligar{border-color:var(--verde);color:var(--verde-txt)}
.pessoa-linha .cc-botao-mini[disabled]{opacity:.4;cursor:not-allowed}

/* ---------- CRM: vista em lista ---------- */
/* A mesma carteira do quadro, vista de outro jeito: o quadro responde em que pé está cada
   lead, a lista responde quais leads eu tenho e o que há neles. */
.tabela-leads{width:100%;border-collapse:collapse;font-size:13px;background:var(--navy-800)}
.tabela-leads th{
  text-align:left;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;
  color:var(--texto-suave);padding:11px 14px;border-bottom:1px solid var(--linha);
  white-space:nowrap;cursor:pointer;user-select:none;position:sticky;top:0;background:var(--navy-800);
}
.tabela-leads th:hover{color:var(--texto)}
.tabela-leads th.ordenando{color:var(--azul-txt)}
.tabela-leads td{padding:11px 14px;border-bottom:1px solid var(--linha);vertical-align:top}
.tabela-leads tbody tr{cursor:pointer}
.tabela-leads tbody tr:hover{background:var(--navy-700)}
.tabela-leads tbody tr:last-child td{border-bottom:none}
.lista-nome{font-weight:600;font-size:13.5px}
.lista-apoio{font-size:11.5px;color:var(--texto-suave);margin-top:3px}
.lista-valor{font-weight:700;color:var(--verde-txt);white-space:nowrap}

/* ---------- Ícones da marca (assets/icones.js) ----------
   Todo ícone é SVG de traço, herda a cor do texto por currentColor e traz um detalhe
   pintado com --ouro-ic. Em repouso esse detalhe é da mesma cor do resto; no item ativo
   e no hover ele vira o ouro da marca. Ou seja: o ouro marca onde você está, em vez de
   virar dez pontinhos amarelos espalhados pelo menu. */
.ic{display:block;flex:0 0 auto}
.item .icone,.menu-conta button .icone{display:flex;align-items:center;justify-content:center}
.item.ativo,.item:hover,
.menu-conta button:hover,
.botao-topo:hover,.sino:hover,.tema:hover,.hamburguer:hover{--ouro-ic:var(--ouro)}
.item .seta{display:flex;align-items:center}
.hamburguer,.tema,.sino,.botao-topo{color:var(--texto)}
.busca .lupa{display:flex;align-items:center;justify-content:center;top:0;bottom:0;height:100%}
.em-breve .icone{display:flex;justify-content:center;color:var(--texto-suave);--ouro-ic:var(--ouro)}

/* ============================================================
   Modo noturno grafite
   ============================================================
   O hub tem dois modos noturnos, e eles servem a gostos diferentes:

   - NAVY, que é o :root: a marca inteira, do fundo ao cartão, no azul da Triano.
   - GRAFITE, aqui: cinzas escuros e neutros, com o menu lateral no navy da marca. É para
     quem passa o dia dentro do sistema e quer a tela quieta, sem a cor da marca em toda
     superfície. A faixa navy da esquerda é o que mantém o hub reconhecível.

   Só os degraus de superfície mudam. Azul de ação, ouro, verde e vermelho continuam os
   mesmos dos outros temas: eles não são decoração, são significado. */
body.grafite{
  --navy-900:#121417;   /* fundo da página */
  --navy-800:#191C21;   /* cartões e topo */
  --navy-700:#212630;   /* superfície de apoio */
  --navy-600:#2A303A;   /* preenchimentos */
  --linha:#333A45;
  --texto:#E9EDF5;
  --texto-suave:#9AA3B2;
  --azul-suave:#9AA3B2;
  --sobreposicao:rgba(10,12,18,.86);
}

/* O menu segue a mesma paleta cinza, um tom ACIMA do resto: mais claro que a página e que
   os cartões. É assim que ele se destaca sem sair da paleta, em vez de ser um bloco de outra
   cor colado na esquerda.
   Como o menu deixa de usar o fundo dos cartões, os degraus de dentro dele são redefinidos
   ali mesmo: sem isso o hover e o item ativo sumiriam contra o novo fundo. */
body.grafite .menu{
  --navy-700:#2E343D;   /* hover dos itens */
  --navy-600:#39404B;   /* preenchimentos, como o selo de contagem */
  --linha:#3A414C;
  background:#23272E;
  border-right-color:#3A414C;
}
body.grafite .menu-rodape{border-top-color:#3A414C}
body.grafite .menu-grupo{color:#9AA3B2}

/* ---------- Escolha de tema ---------- */
/* Com três temas o botão deixa de alternar e passa a abrir a escolha: alternar entre três
   obrigaria a pessoa a passar pelo tema que ela não quer para chegar no que quer. */
/* O menu nasce debaixo do próprio botão de tema, que é o primeiro item da direita do topo.
   Ancorado no canto da tela ele aparecia embaixo do avatar, longe de quem o abriu. */
.topo .direita{position:relative}
.menu-tema{
  display:none;position:absolute;top:calc(var(--altura-topo) - 16px);left:0;z-index:95;
  min-width:190px;background:var(--navy-800);border:1px solid var(--linha);
  border-radius:12px;padding:6px;box-shadow:0 12px 32px rgba(0,0,0,.28);
}
.menu-tema.aberto{display:block}
.menu-tema button{
  display:block;width:100%;text-align:left;padding:9px 12px;border-radius:8px;
  font-size:13px;font-weight:600;color:var(--texto);
}
.menu-tema button:hover{background:var(--navy-700)}
.menu-tema button.ativo{background:var(--azul);color:#fff}

/* A logo é SVG e tem duas versões, uma por fundo. A altura manda; a largura acompanha. */
.topo .marca img{height:26px;width:auto;border-radius:0}
.entrada-logo{height:44px;width:auto}

body.claro .topo .marca img,
body.claro .entrada-logo{
  background:var(--azul);
  border-radius:8px;
  padding:5px 8px;
  box-sizing:content-box;
}

/* Ícone dentro de texto corrido (botão, título de cartão, linha de cartão) precisa sentar na
   linha da escrita. Sem isto o desenho fica pendurado acima da base do texto. */
.botao .ic,.filtro .ic,.cc-botao-mini .ic,.cartao h3 .ic,.chip-situacao .ic,
.card-lead-linha .ic,.card-lead-tarefa .ic,.card-lead-motivo .ic,.card-lead-aguardando .ic,
.aviso .ic,.lista-apoio .ic,.sino-item .ic,.etiqueta-mini .ic,.caixa-item-rodape .ic,
.modal-titulo .ic,.form-grade label > span .ic,.ficha-bloco-titulo .ic,.col-crm-playbook .ic,
.col-agenda-topo .ic,.card-tarefa-meta .ic,.prazo .ic,.sw-chips .ic,.sw-fogo .ic,
.link-whats .ic,.dash-proj .ic,.dash-agente .ic,.col-crm-nome .ic,.etiqueta .ic{
  display:inline-block;vertical-align:-.15em;
}
/* Os ícones grandes de confirmação, que aparecem sozinhos no meio da caixa. */
.melhoria-pronto-icone .ic,.sino-vazio-icone .ic{display:inline-block;color:var(--azul-txt);--ouro-ic:var(--ouro)}
.sw-capa .ic{display:block;color:var(--texto-suave);--ouro-ic:var(--ouro)}
.card-tarefa-check .ic{display:block}
.ads-auto .ic,.ads-bloco-linha .ic{display:inline-block;vertical-align:-.15em}
/* O símbolo da etapa, ao lado do dropdown que o escolhe. */
.simbolo-etapa{
  width:34px;height:32px;flex-shrink:0;display:flex;align-items:center;justify-content:center;
  background:var(--navy-800);border:1px solid var(--linha);border-radius:7px;color:var(--texto);
  --ouro-ic:var(--ouro);
}
.emoji-etapa{width:120px}
.col-crm-nome .ic,.chip-etapa .ic{display:inline-block;vertical-align:-.15em}

/* ---------- Tráfego: a lista no formato da Foxx ---------- */
.ads-controles{display:flex;gap:18px;flex-wrap:wrap;margin-bottom:12px}
.ads-check{
  display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;
  color:var(--texto-suave);cursor:pointer;
}
.ads-check:hover{color:var(--texto)}
.ads-check input{accent-color:var(--azul);cursor:pointer}
/* O cabeçalho fica no lugar enquanto a lista rola, e ele tem DUAS linhas: a dos períodos e
   a de Leads/Cliques. As duas grudam, uma embaixo da outra. O `top` da segunda é medido no
   JavaScript, porque a altura da primeira muda com o tamanho da fonte de cada máquina; o
   valor aqui é só o ponto de partida. */
.tabela-ads thead tr:first-child th{position:sticky;top:0;z-index:5}
.tabela-ads .ads-subcabecalho th{position:sticky;top:34px;z-index:4}
/* Sem um fundo cheio, as linhas passariam por trás do cabeçalho e apareceriam através dele. */
.tabela-ads thead th{background:var(--navy-800)}
.tabela-ads th{white-space:nowrap}
.tabela-ads td{white-space:nowrap;font-size:12.5px}
.ads-col-grupo{text-align:center !important;border-left:1px solid var(--linha)}
.ads-subcabecalho th{font-size:10px;padding-top:0;padding-bottom:9px;cursor:default}
.ads-col-cliente{white-space:normal;min-width:200px;font-weight:600}
/* A linha inteira marcada quando há algo que não pode esperar: saldo no fim, verba
   estourada ou cartão com problema. */
.linha-risco{background:var(--fundo-vermelho)}
.linha-risco:hover{background:var(--fundo-vermelho) !important}
.ads-pgto-tag{
  font-size:10.5px;font-weight:800;border-radius:5px;padding:2px 7px;
  background:var(--navy-600);color:var(--texto-suave);
}
.ads-pgto-tag.cartao{background:var(--fundo-verde);color:var(--verde-txt)}
.ads-pgto-tag.pix{background:var(--fundo-azul);color:var(--azul-txt)}
.ads-pgto-tag.boleto{background:var(--fundo-amarelo);color:var(--amarelo-txt)}
.ads-pgto-tag.vazio{background:transparent}

/* ============================================================
   Papel e módulos (Configurações > Pessoas e acessos)

   A tela responde três perguntas na ordem em que elas aparecem na cabeça de quem administra:
   quem são os papéis (a legenda), quem é cada pessoa (o quadro), e o que aquela pessoa abre
   (as caixas de módulo, no modal). Antes disto o quadro era de cargos acumuláveis, com
   um painel de mais de quarenta permissões; o CSS daquele desenho saiu junto com ele, e está
   guardado na etiqueta modelo-cargos-acumulaveis.
   ============================================================ */
.tag-cargo{
  display:inline-flex;align-items:center;gap:5px;
  font-size:11px;font-weight:700;letter-spacing:.2px;
  border-radius:20px;padding:3px 10px;
  border:1px solid transparent;white-space:nowrap;
}
/* A bolinha na frente é o que faz a tag ser lida como papel e não como selo de contagem. */
.tag-cargo::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;flex:0 0 6px}

.tag-cargo.ouro{background:var(--fundo-amarelo);color:var(--amarelo-txt)}
.tag-cargo.navy{background:var(--fundo-azulads);color:var(--azulads-txt)}
.tag-cargo.azul{background:var(--fundo-azul);color:var(--azul-txt)}
.tag-cargo.verde{background:var(--fundo-verde);color:var(--verde-txt)}
.tag-cargo.roxo{background:var(--fundo-roxo);color:var(--roxo-txt)}
.tag-cargo.laranja{background:rgba(249,115,22,.16);color:var(--laranja-txt)}
.tag-cargo.ciano{background:rgba(6,182,212,.16);color:#67E8F9}
.tag-cargo.cinza{background:var(--navy-600);color:var(--texto-suave)}
.tag-cargo.grafite{background:var(--navy-600);color:var(--texto)}
body.claro .tag-cargo.ciano{color:#0E7490}

.pessoa-tags{display:flex;flex-wrap:wrap;align-items:center;gap:7px;margin-top:6px}
.pessoa-modulos{font-size:11.5px;color:var(--texto-suave);line-height:1.45}

/* A legenda dos papéis. Fica na tela, e não escondida num modal: escolher entre Head e
   Operador sem ler o que cada um entrega é adivinhar, e quem adivinha erra para o lado de
   dar demais. */
.papel-legenda{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:10px;
  margin:14px 0 4px;
}
.papel-item{border:1px solid var(--linha);border-radius:10px;padding:11px 12px;background:var(--navy-700)}
.papel-item-topo{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.papel-posicao{font-size:10.5px;font-weight:600;color:var(--texto-suave)}
.papel-gente{margin-left:auto;font-size:10.5px;font-weight:700;color:var(--texto-suave)}
.papel-desc{font-size:12px;color:var(--texto-suave);line-height:1.5;margin:6px 0 0}

/* A escolha do papel, no modal. Uma opção por linha, com o que ela entrega do lado: a decisão
   e a explicação dela têm que caber no mesmo olhar. */
.papel-escolha{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:7px;margin-top:10px}
.papel-opcao{
  display:flex;align-items:flex-start;gap:10px;cursor:pointer;
  padding:10px 12px;border:1px solid var(--linha);border-radius:10px;background:var(--navy-700);
}
.papel-opcao:hover{border-color:var(--azul-claro)}
.papel-opcao.ligada{border-color:var(--azul-claro);background:var(--fundo-azul)}
.papel-opcao.trancada{opacity:.45;cursor:not-allowed}
.papel-opcao input{margin-top:3px;flex:0 0 auto}
.papel-opcao-quem{display:flex;flex-direction:column;align-items:flex-start;gap:5px}
.papel-opcao-quem .papel-desc{margin:0}
.papel-trancado{font-size:11px;font-weight:600;color:var(--amarelo-txt)}

/* As caixas de módulo: a lista do que a pessoa abre. Cada uma leva a explicação do que ela é,
   porque quem marca precisa saber o que está entregando antes de marcar. */
.modulo-grade{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:8px;
  margin-top:10px;
}
.modulo-linha{
  display:flex;align-items:flex-start;gap:9px;cursor:pointer;
  padding:9px 11px;border:1px solid var(--linha);border-radius:10px;background:var(--navy-700);
}
.modulo-linha:hover{border-color:var(--azul-claro)}
.modulo-linha.ligada{border-color:var(--azul-claro);background:var(--fundo-azul)}
.modulo-linha input{margin-top:3px;flex:0 0 auto}
.modulo-quem{display:flex;flex-direction:column;gap:3px}
.modulo-nome{font-size:12.5px;font-weight:600}
.modulo-nota{font-size:11.5px;color:var(--texto-suave);line-height:1.5}

/* A prévia: o que a pessoa passa a enxergar com o papel e os módulos de agora. */
.previa{margin-top:14px;border:1px solid var(--linha);border-radius:10px;padding:10px 12px;background:var(--navy-700)}
.previa-titulo{
  font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.6px;
  color:var(--texto-suave);margin-bottom:6px;
}
.previa-linha{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:12.5px;padding:4px 0}
.previa-linha strong{font-weight:600;min-width:190px}
.previa-linha span{color:var(--texto-suave);font-size:11.5px}
.previa-linha .sensivel{color:var(--amarelo-txt);font-weight:700}
.previa-fora{font-size:11.5px;color:var(--texto-suave);margin-top:8px;line-height:1.5}

/* O modal de uma pessoa é o mais alto da casa: papel, doze módulos e a prévia. Nos outros a
   caixa inteira rola, e aqui isso levava o botão de salvar para o fim da rolagem, como se não
   houvesse onde confirmar. A classe `alta` prende cabeçalho e rodapé e deixa só o miolo rolar.
   Ela é só daqui: os modais dos outros módulos continuam como estavam. */
/* O botão largo do modal de módulos: o print que o Wylle mostrou tinha um botão que atravessa
   a janela, e ele é o único caminho ali. Botãozinho no canto faria procurar. */
.botao.largo{flex:1;justify-content:center;padding-top:11px;padding-bottom:11px}

/* A ficha de quem a pessoa é, no topo do Editar. */
.pessoa-ficha{display:flex;flex-wrap:wrap;gap:22px;margin-bottom:4px}
.pessoa-ficha span{
  display:block;font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.6px;
  color:var(--texto-suave);margin-bottom:3px;
}
.pessoa-ficha strong{font-size:13px;font-weight:600}

.modal-caixa.alta{
  display:flex;flex-direction:column;overflow:hidden;
  width:760px;max-height:88vh;
}
.modal-caixa.alta .modal-corpo{flex:1;overflow-y:auto;padding-right:6px;margin-right:-6px}
.modal-caixa.alta .modal-cabecalho,
.modal-caixa.alta .modal-rodape{flex:0 0 auto}
.modal-caixa.alta .modal-rodape{
  border-top:1px solid var(--linha);padding-top:12px;margin-top:14px;flex-wrap:wrap;
}

/* O título de cada metade do modal da pessoa: o papel em cima, os módulos embaixo. Sem eles,
   os radios e as caixas viram uma pilha só e ninguém sabe onde uma coisa acaba. */
.modal-secao{
  font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.6px;
  color:var(--texto-suave);margin:18px 0 0;
}

/* A linha da pessoa inteira é o botão: clicar nela abre o papel e os módulos, que é o que se
   vem fazer aqui. */
.pessoa-linha.clicavel{cursor:pointer}
.pessoa-linha.clicavel:hover{border-color:var(--azul-claro)}

.modal-caixa.larga{max-width:760px}
.botao.perigo{color:var(--vermelho-txt);border-color:var(--vermelho)}

/* Swipe Files: a busca ao vivo e as peças do acervo. */
.sw-andamento{margin-top:12px;border:1px solid var(--linha);border-radius:10px;overflow:hidden}
.sw-andamento.rodando{border-color:var(--azul-claro)}
.sw-andamento-topo{
  padding:8px 12px;background:var(--navy-700);font-size:12.5px;font-weight:600;
  display:flex;align-items:center;gap:7px;
}
.sw-log{
  margin:0;padding:10px 12px;background:var(--navy-900);border-top:1px solid var(--linha);
  font-size:11.5px;line-height:1.6;color:var(--texto-suave);white-space:pre-wrap;word-break:break-word;
  max-height:150px;overflow-y:auto;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
}
/* A capa agora é a imagem de verdade do anúncio, e não mais um ícone. */
.sw-capa img{width:100%;height:100%;object-fit:cover;display:block}
.sw-peca.marcada{border-color:var(--verde);box-shadow:0 0 0 1px var(--verde)}
.sw-marcar{
  position:absolute;right:8px;bottom:8px;background:var(--sobreposicao);border:1px solid var(--linha);
  border-radius:20px;padding:3px 10px;font-size:11px;font-weight:700;display:flex;align-items:center;gap:5px;
}
.sw-peca.marcada .sw-marcar{background:var(--fundo-verde);color:var(--verde-txt);border-color:var(--verde)}
.sw-tirar{margin-top:10px;display:block;width:100%}

/* Clarity, o Auditor de Páginas. */
.cl-numeros{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.cl-numero{
  flex:1 1 130px;background:var(--navy-700);border:1px solid var(--linha);border-radius:10px;
  padding:10px 12px;display:flex;flex-direction:column;gap:3px;
}
.cl-numero span{font-size:11px;color:var(--texto-suave);font-weight:600}
.cl-numero strong{font-size:17px;font-weight:700}
.cl-paginas{display:flex;flex-direction:column;gap:14px}
.cl-pagina-topo{display:flex;align-items:flex-start;gap:14px;justify-content:space-between;flex-wrap:wrap}
.cl-pagina-nome{font-size:15px;font-weight:600}
.cl-pagina-url{font-size:11.5px;color:var(--texto-suave);word-break:break-all;display:block;margin-top:2px}
.cl-pagina-url:hover{color:var(--azul-txt)}
.cl-pagina-sessoes{text-align:right;flex:0 0 auto}
.cl-pagina-sessoes strong{display:block;font-size:22px;font-weight:800;line-height:1.1}
.cl-pagina-sessoes span{font-size:11px;color:var(--texto-suave);font-weight:600}
.cl-achados{display:flex;flex-direction:column;gap:8px;margin-top:14px}
.cl-achado{display:flex;gap:10px;align-items:flex-start}
.cl-achado strong{font-size:13px;font-weight:600}
.cl-achado p{font-size:12px;color:var(--texto-suave);line-height:1.5;margin:3px 0 0}
.cl-conselho{margin-top:16px;border-top:1px solid var(--linha);padding-top:13px}
.cl-conselho h4{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.5px;
  color:var(--texto-suave);display:flex;align-items:center;gap:6px;margin:0 0 9px}
.cl-conselho-item{margin-bottom:9px}
.cl-conselho-item strong{font-size:13px;font-weight:600}
.cl-conselho-item p{font-size:12px;color:var(--texto-suave);line-height:1.5;margin:3px 0 0}
.cl-fonte{font-size:10.5px;color:var(--texto-suave);font-style:italic}
/* O aviso comum é azul, texto incluído. O vermelho troca a cor toda, senão fica um alerta
   grave escrito em azul de informação. E o alinhamento vai para o topo: estes avisos têm duas
   ou três linhas, e centralizar deixa o ícone flutuando no meio do texto. */
.aviso.vermelho{
  background:var(--fundo-vermelho);border-color:var(--vermelho);color:var(--vermelho-txt);
  align-items:flex-start;
}
.aviso.vermelho strong{color:var(--vermelho-txt)}
.aviso.vermelho .ic{margin-top:2px;flex:0 0 auto}
.cl-conselho-titulo{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.cl-afetadas{margin-left:auto;font-size:11px;color:var(--texto-suave);font-weight:600}
.cl-evidencia{font-size:12px;color:var(--texto);line-height:1.5;margin:5px 0 0}
.cl-conselho-item{margin-bottom:13px}
.cl-conselho-item .cl-fonte{display:block;margin-top:3px}
/* ---------- Central de Leads ---------- */
/* Toda cor daqui sai de variável do tema. Cor escrita na mão some em um dos três temas. */
.central-ponto{
  display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:5px;
  background:var(--verde);
}
.central-ponto.falta{background:var(--vermelho)}
.central-ponto.vazio{background:transparent;border:1px solid var(--linha)}
.central-zap{
  display:inline-flex;align-items:center;gap:5px;color:var(--verde-txt);font-weight:600;
}
.central-zap:hover{text-decoration:underline}
.central-detalhe td{background:var(--navy-700);padding:0 !important}
.central-detalhe-caixa{
  padding:14px 16px;font-size:12.5px;color:var(--texto-suave);line-height:1.7;
}
.central-detalhe-caixa strong{color:var(--texto)}
.central-ficha{
  display:grid;grid-template-columns:repeat(4,1fr);gap:12px 18px;margin-top:-4px;
}
.central-ficha > div{min-width:0}
.central-ficha span{
  display:block;font-size:10.5px;color:var(--texto-suave);text-transform:uppercase;
  letter-spacing:1px;font-weight:700;margin-bottom:3px;
}
.central-ficha strong{font-size:13px;font-weight:600;word-break:break-word}
@media (max-width:1100px){.central-ficha{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.central-ficha{grid-template-columns:1fr}}
.central-falta{
  margin-top:14px;font-size:12.5px;font-weight:600;color:var(--amarelo-txt);
  background:var(--fundo-amarelo);border-radius:10px;padding:9px 12px;
  display:flex;align-items:center;gap:7px;
}
.central-endereco{
  margin-top:12px;display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  background:var(--navy-700);border:1px solid var(--linha);border-radius:10px;padding:9px 12px;
}
.central-endereco span{
  font-size:10.5px;color:var(--texto-suave);text-transform:uppercase;letter-spacing:1px;font-weight:700;
}
.central-endereco code{
  font-size:12px;color:var(--azul-txt);word-break:break-all;flex:1;min-width:200px;
}
.central-legenda{
  display:block;font-size:9.5px;font-weight:600;letter-spacing:.3px;
  color:var(--texto-suave);text-transform:none;margin-top:3px;
}


/* O seletor de cliente do Clarity. Não é <select> nativo de propósito: o Chrome alinha a
   opção marcada com o campo, e quando ela está no fim da lista o menu abre PARA CIMA e some
   da vista. Num auditor de experiência isso não podia ficar. */
.cl-escolha{position:relative;min-width:280px}
.cl-escolha-botao{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;text-align:left}
.cl-seta{display:flex;transform:rotate(90deg);opacity:.6}
.cl-lista{
  position:absolute;top:calc(100% + 5px);left:0;right:0;z-index:40;
  background:var(--navy-800);border:1px solid var(--linha);border-radius:10px;
  box-shadow:0 10px 30px rgba(8,23,53,.25);max-height:340px;overflow-y:auto;padding:5px;
}
.cl-opcao{
  display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;
  padding:8px 10px;border-radius:8px;font-size:13px;text-align:left;
}
.cl-opcao:hover{background:var(--navy-700)}
.cl-opcao.ativa{background:var(--fundo-azul);color:var(--azul-txt);font-weight:600}
.cl-opcao-dia{font-size:11px;color:var(--texto-suave)}
.cl-opcao-alerta{font-size:11px;color:var(--vermelho-txt);font-weight:700}
.cl-botoes{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}

/* O mapa de calor */
.mapa-topo{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:16px}
.mapa-titulo strong{display:block;font-size:15px}
.mapa-titulo a{font-size:11.5px;color:var(--texto-suave);word-break:break-all}
.mapa-corpo{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:18px;align-items:start}
.mapa-quadro{min-width:0}
.mapa-tela{position:relative;border:1px solid var(--linha);border-radius:10px;overflow:hidden;background:var(--navy-800)}
.mapa-tela img{display:block;width:100%}
.mapa-tela canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.mapa-lado{display:flex;flex-direction:column;gap:14px}
.mapa-alvos{display:flex;flex-direction:column;gap:6px;margin-top:14px}
.mapa-alvo{display:flex;align-items:center;gap:10px;justify-content:space-between;font-size:12px}
.mapa-alvo span{color:var(--texto-suave);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mapa-alvo strong{font-weight:700;flex:0 0 auto}
.mapa-analise{font-size:12.5px;line-height:1.6;margin-top:12px;max-height:420px;overflow-y:auto}
@media (max-width:1100px){.mapa-corpo{grid-template-columns:1fr}}
.cl-com-mapa{display:flex;flex-direction:column;gap:6px;margin-top:12px}
.cl-com-mapa-item{
  display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;
  padding:9px 11px;border:1px solid var(--linha);border-radius:9px;background:var(--navy-700);
  font-size:12.5px;text-align:left;
}
.cl-com-mapa-item:hover{border-color:var(--azul-claro)}
.cl-com-mapa-item span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cl-com-mapa-n{flex:0 0 auto;font-size:11px;color:var(--texto-suave);font-weight:600}
/* A linha do seletor do Clarity. Ela existe justamente para NÃO ser a .barra-ferramentas:
   aquela rola na horizontal, e overflow corta qualquer coisa que saia da caixa, inclusive um
   menu que abre para baixo. */
.cl-topo{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:18px;position:relative;z-index:30}
.cl-topo .cl-dia{min-width:150px}
/* O mapa com os dois aparelhos lado a lado. A comparação é a pergunta: o que funciona na
   tela larga quase nunca funciona na estreita. */
.mapa-quadro.lado-a-lado{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:start}
.mapa-um{min-width:0}
.mapa-um-titulo{
  display:flex;align-items:center;gap:9px;margin-bottom:8px;font-size:13px;font-weight:600;
}
.mapa-um-titulo span{font-size:11.5px;color:var(--texto-suave);font-weight:500}
.mapa-um-titulo .cc-botao-mini{margin-left:auto}
.mapa-legenda{
  grid-column:1/-1;display:flex;align-items:center;gap:9px;margin-top:12px;
  font-size:11px;color:var(--texto-suave);font-weight:600;
}
.mapa-escala{
  flex:1;height:8px;border-radius:5px;max-width:220px;
  background:linear-gradient(90deg,rgba(30,80,200,.55),rgba(40,170,120,.8),rgba(235,200,40,.85),rgba(220,60,40,.9));
}
@media (max-width:1400px){.mapa-quadro.lado-a-lado{grid-template-columns:1fr}}
/* O .aviso é flex para o ícone ficar ao lado do texto. Quando o texto tem marcação dentro
   (um <strong> no meio da frase), cada pedaço virava uma coluna e a frase quebrava. O texto
   vai num <span>, e é esse span que estica. */
.aviso > span{flex:1;min-width:0}
.aviso > .ic{flex:0 0 auto}

/* Clarity: a variação ao lado de cada número, que é o que separa dado de diagnóstico. */
.cl-var{font-size:11px;font-weight:700;margin-top:3px;display:block}
.cl-var.sobe{color:var(--verde-txt)}
.cl-var.desce{color:var(--vermelho-txt)}
.cl-var.igual{color:var(--texto-suave);font-weight:600}

/* A carteira inteira. Tabela larga rola dentro da própria caixa: a página nunca rola de lado. */
.cl-tabela-rolo{overflow-x:auto;margin-top:14px}
.cl-tabela{width:100%;border-collapse:collapse;font-size:12.5px;min-width:760px}
.cl-tabela th{
  text-align:left;font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.5px;
  color:var(--texto-suave);padding:0 10px 8px;white-space:nowrap;
}
.cl-tabela td{padding:10px;border-top:1px solid var(--linha);vertical-align:top}
.cl-tabela tbody tr{cursor:pointer}
.cl-tabela tbody tr:hover{background:var(--navy-700)}
.cl-tabela td strong{font-weight:600}
.cl-sub{display:block;font-size:11px;color:var(--texto-suave);margin-top:2px}
.cl-vazio{color:var(--texto-suave)}
/* Vermelho é para o que passou do aceitável. Se tudo pisca, nada pisca. */
.cl-ruim{color:var(--vermelho-txt);font-weight:700}
.cl-tabela .cl-var{display:inline-block;margin-left:6px;margin-top:0}
/* As três leituras da página, que é a escolha maior da tela do Clarity. */
.subabas.grandes button{font-size:13px;padding:8px 16px}
.cl-tabela.faixas{min-width:520px;margin-top:14px}
.cl-tabela.faixas td{padding:8px 10px}
.cl-barra-celula{width:38%}
.cl-barra{display:block;height:9px;border-radius:5px;background:var(--azul);opacity:.75}