/* Hub ION Marketing & Performance — estilo base */

/* ============================================================
   A paleta da marca
   ============================================================
   As três cores vêm do Manual de Marca da ION, e são só três:

     verde   #B7CD00   a cor da marca. É COR DE DETALHE: estado, ação e foco.
     branco  #FFFFFF
     preto   #000000

   O resto da tela é preto e branco. O verde não pinta área grande nem fundo de
   tela: ele acende o que está ativo, o que precisa de clique e o que está em foco,
   e é justamente por aparecer pouco que ele aparece.

   Os nomes das variáveis (--navy-900 a --navy-600) são degraus de SUPERFÍCIE, e
   estão espalhados por todo o CSS. Eles ficaram como estão de propósito: o que muda
   de marca para marca é o valor de cada degrau, não o papel dele.

   O escuro é o tema de origem da marca (o manual é preto). O claro é o mesmo
   sistema virado do avesso, com o verde escurecido onde ele vira texto: #B7CD00
   sobre branco não se lê. */
:root{
  --navy-900:#0A0A0A;      /* fundo da página */
  --navy-800:#121212;      /* cartões, topo e menu */
  --navy-700:#1A1A1A;      /* superfície de apoio */
  --navy-600:#242424;      /* preenchimentos */
  --linha:#2B2B2B;
  --azul:#B7CD00;          /* o verde da ION: a cor das ações */
  --azul-claro:#C7DE12;    /* o mesmo verde um passo acima, para hover */
  --azul-suave:#8C8C8C;    /* apoio no topo: cinza neutro, nunca verde */
  --branco:#FFFFFF;
  --texto:#F2F2F2;
  --texto-suave:#8C8C8C;
  --verde:#B7CD00;
  --amarelo:#E6B800;
  --ouro:#B7CD00;          /* a faísca da casa é o verde da marca */
  --ouro-ic:currentColor;  /* detalhe do ícone: apagado em repouso, verde no ativo */
  --vermelho:#E5484D;
  --verde-txt:#B7CD00;
  --vermelho-txt:#FF6369;
  --amarelo-txt:#E6B800;
  --roxo-txt:#C7A6FF;
  --azulads-txt:#CFE33F;
  --laranja-txt:#F5A05A;
  --azul-txt:#C7DE12;      /* o verde como texto de link */
  --fundo-verde:rgba(183,205,0,.16);
  --fundo-vermelho:rgba(229,72,77,.16);
  --fundo-amarelo:rgba(230,184,0,.16);
  --fundo-azul:rgba(183,205,0,.16);
  --fundo-roxo:rgba(167,139,250,.18);
  --fundo-azulads:rgba(183,205,0,.12);
  --sobreposicao:rgba(0,0,0,.86);
  --sobre-acao:#0A0A0A;   /* o texto que fica em cima do verde: preto, nunca branco */
  --sombra:none;
  --raio:12px;
  --largura-menu:264px;
  --altura-topo:54px;
  /* Space Grotesk é a tipografia auxiliar WEB do manual: subtítulo e textos. É ela que
     carrega a tela inteira aqui, porque a principal (Gotham) é licenciada e não pode ser
     servida por um sistema. O logotipo, que é onde o Gotham é obrigatório, entra como
     imagem do próprio arquivo da marca. */
  --fonte:"Space Grotesk",-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}
/* O wordmark da ION no topo. Sem caixa e sem canto arredondado: a marca não tem
   fundo próprio, ela vive sobre o fundo da tela. */
.topo .marca img{height:22px;display:block}
.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:34px;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:7px;color:var(--texto-suave);font-size:15px}

.topo .direita{margin-left:auto;display:flex;align-items:center;gap:12px}
.botao-topo{
  height:34px;padding:0 13px;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:34px;height:34px;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:34px;height:34px;border-radius:50%;
  background:var(--azul);color:var(--sobre-acao);font-weight:700;font-size:13px;
  display:flex;align-items:center;justify-content:center;
}

/* ---------- Menu lateral ---------- */
/* O menu é uma coluna de cima a baixo, e o rodapé mora no PÉ dela, não logo abaixo do
   último item. Quem tem cinco módulos via o nome flutuando no meio da tela, e quem tem
   quinze via ele sumir na rolagem: o nome de quem está usando o hub não pode depender de
   quantos módulos a pessoa abre. */
.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;
  display:flex;flex-direction:column;
}
.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:var(--sobre-acao);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(0,0,0,.16);color:var(--sobre-acao)}
.item .selo.alerta{background:var(--vermelho);color:#fff}

.menu-rodape{
  margin-top:auto;padding:14px 12px 2px;border-top:1px solid var(--linha);
  font-size:12px;color:var(--texto-suave);flex:0 0 auto;
}
.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:14px 24px 36px;min-height:calc(100vh - var(--altura-topo));
}
.cabecalho{display:flex;align-items:flex-end;gap:16px;flex-wrap:nowrap;margin-bottom:12px}
.cabecalho > div:first-child{min-width:0}
.cabecalho h1,.cabecalho p{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cabecalho h1{font-size:19px;font-weight:700;letter-spacing:-.3px}
.cabecalho p{color:var(--texto-suave);font-size:12.5px;margin-top:2px}
.cabecalho .acoes{margin-left:auto;display:flex;gap:10px;flex-wrap:nowrap;min-width:0}

.botao{
  height:33px;padding:0 14px;border-radius:10px;background:var(--azul);
  color:var(--sobre-acao);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:22px;border-bottom:1px solid var(--linha);margin-bottom:14px}
.aba{padding:8px 2px 9px;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:11px 14px;
}
.cartao h3{font-size:14.5px;font-weight:600;margin-bottom:10px;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:10px}
.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:10.5px;color:var(--texto-suave);font-weight:700;text-transform:uppercase;letter-spacing:.5px}
.indicador .valor{font-size:19px;font-weight:700;margin:3px 0 1px;letter-spacing:-.5px}
.indicador .variacao{font-size:11.5px;font-weight:600;display:flex;align-items:center;gap:5px;line-height:1.35}
.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:var(--sobre-acao);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:31px;padding:0 12px;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:var(--sobre-acao)}
.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:var(--sobre-acao)}
.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;
}

/* ============================================================
   As telas de cliente, onboarding e tráfego
   ============================================================ */

/* Menu: sub-itens (Tráfego → Google Ads, Meta Ads) */
.item.sub{display:none;padding-left:44px;font-size:14px;color:var(--texto-suave)}
.item[data-chave="trafego"].aberto ~ .item.sub[data-pai="trafego"]{display:flex}
.item.sub.ativo{color:var(--sobre-acao)}
.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:2px;gap:2px}
.subabas button{padding:5px 12px;border-radius:8px;font-size:12.5px;font-weight:600;color:var(--texto-suave)}
.subabas button.ativo{background:var(--azul);color:var(--sobre-acao)}

.barra-ferramentas{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:12px}
.campo-busca{height:31px;padding:0 11px;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, na Lista de Clientes */
.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, 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, no Tráfego */
.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:12px 15px;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:9px;margin-bottom:10px;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:10px}
@media (max-width:1180px){.ads-pares{grid-template-columns:repeat(2,1fr)}}
.ads-bloco-rotulo{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;color:var(--texto-suave);margin-bottom:5px}
.ads-bloco-linha{display:flex;align-items:center;gap:8px;font-size:12.5px;margin-bottom:2px}
.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:10px 0}
.ads-metricas{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:12px}
.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}
/* A etiqueta de cliente usa o royal da marca. As outras etiquetas continuam com a cor que
   vem do banco, porque ali a cor foi escolhida por alguém e quer dizer alguma coisa. */
.etiqueta-mini.cliente{background:var(--azul);color:var(--sobre-acao)}
.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(43,91,227,.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:#F1F1EF;   /* fundo da página: o branco da marca, um passo abaixo do papel */
  --navy-800:#FFFFFF;   /* cartões, topo e menu: papel */
  --navy-700:#F7F7F5;   /* superfície de apoio */
  --navy-600:#E8E8E4;   /* preenchimentos */
  --linha:#DEDED9;
  --texto:#000000;      /* o preto da marca */
  --texto-suave:#5C5C57;
  --azul-suave:#5C5C57;
  --branco:#000000;
  --azul:#A7BC00;       /* o verde um degrau abaixo: sobre branco ele precisa de peso */
  --azul-claro:#93A600;
  --verde:#A7BC00;
  --ouro:#A7BC00;
  --verde-txt:#5F6B00;  /* o verde não se lê sobre branco; este é ele escurecido */
  --vermelho-txt:#C6282D;
  --amarelo-txt:#8A6A00;
  --roxo-txt:#6D28D9;
  --azulads-txt:#5F6B00;
  --laranja-txt:#C2410C;
  --azul-txt:#5F6B00;
  --fundo-verde:rgba(167,188,0,.18);
  --fundo-vermelho:rgba(229,72,77,.12);
  --fundo-amarelo:rgba(230,184,0,.18);
  --fundo-azul:rgba(167,188,0,.16);
  --fundo-roxo:rgba(139,92,246,.14);
  --fundo-azulads:rgba(167,188,0,.14);
  --sobreposicao:rgba(255,255,255,.92);
  --sombra:0 1px 2px rgba(0,0,0,.06);
}

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(0,0,0,.07)}
body.claro .item.ativo,
body.claro .botao:not(.vazio),
body.claro .filtro.ativo,
body.claro .subabas button.ativo{color:var(--sobre-acao)}
body.claro .botao.vazio{color:var(--texto)}
body.claro .grafico .col .haste.clara{background:#D6D6D0}
body.claro .card-tarefa,
body.claro .card-onb,
body.claro .card-lead,
body.claro .ficha{background:#FAFAF8}
/* 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:#FAFAF8}
body.claro .sw-capa{background:linear-gradient(135deg,#E8E8E4,#F4F4F1)}
body.claro .cc-chave.desligado i{background:#D6D6D0}
body.claro .avatar{color:var(--sobre-acao)}
body.claro .item.ativo .selo{color:var(--sobre-acao)}

/* ============================================================
   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:var(--sobre-acao);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)}
/* O motivo pelo qual um cliente entrou na lista de atenção do Painel Estratégico. */
.chip-situacao.ruim{background:var(--fundo-vermelho);color:var(--vermelho-txt)}
.chip-situacao.atencao{background:var(--fundo-amarelo);color:var(--amarelo-txt)}
/* Número de atraso dentro de tabela: ele é o que a pessoa procura na linha. */
td.ag-atrasado{color:var(--vermelho-txt);font-weight:700}
.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: a agenda do dia ---------- */
.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:#FAFAF8}

/* ---------- Dashboard do cliente, dentro do Tráfego ---------- */
.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:var(--sobre-acao);
  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 */
.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}

/* A chave do Modo dev, ao lado do papel de quem entrou.
   `.menu-conta button` deixa todo botão do menu em flex de largura cheia, e a chave não é
   item de menu: ela é um interruptor pequeno na mesma linha do papel. Por isso ela desfaz
   aqui a largura e o preenchimento herdados, e por isso o `hidden` precisa ser dito de
   novo: display de regra vence display de atributo. */
.menu-conta button[hidden]{display:none}
.menu-conta-papel{display:flex;align-items:center;justify-content:space-between;gap:8px}
.menu-conta .chave-dev{
  width:auto;padding:2px;gap:6px;border-radius:999px;background:transparent;
  font-size:10px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;
  color:var(--texto-suave);
}
.menu-conta .chave-dev:hover{background:transparent;color:var(--texto)}
.chave-trilho{
  position:relative;flex:0 0 auto;width:26px;height:15px;border-radius:999px;
  background:var(--linha);transition:background .15s;
}
.chave-pino{
  position:absolute;top:2px;left:2px;width:11px;height:11px;border-radius:50%;
  background:var(--texto-suave);transition:transform .15s,background .15s;
}
.menu-conta .chave-dev[aria-checked="true"]{color:var(--ouro)}
.chave-dev[aria-checked="true"] .chave-trilho{background:var(--ouro)}
.chave-dev[aria-checked="true"] .chave-pino{transform:translateX(11px);background:var(--navy-900)}

/* ============================================================
   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:10px}
.g5 .cartao{min-width:0;padding:11px 13px}
.g5 .indicador .rotulo{font-size:10.5px;letter-spacing:.4px}
.g5 .indicador .valor{font-size:19px}
.g5 .indicador .variacao{font-size:11px;line-height:1.35}
@media (max-width:1380px){
  .g5{gap:8px}
  .g5 .cartao{padding:10px 11px}
  .g5 .indicador .rotulo{font-size:10px}
  .g5 .indicador .valor{font-size:17.5px;margin:3px 0 1px}
  .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:var(--sobre-acao)}

.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:var(--sobreposicao);
  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(0,0,0,.45);
}
.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}

/* ============================================================
   Barra de filtros dos Logs
   ============================================================
   São sete controles numa linha só, e o .campo-modal nasceu para formulário, onde ele
   ocupa a largura toda da célula (width:100%). Numa barra horizontal isso vira briga: cada
   campo puxa todo o espaço, o max-width escrito na mão segura cada um num tamanho fixo, e
   o resultado é tudo colado, com a busca cortando o próprio texto e o nome da opção
   encostando na seta do select.

   Aqui cada campo diz de quanto precisa: a busca cresce e encolhe com a tela, os seletores
   pedem o tamanho do conteúdo dentro de um teto, e os campos de data têm a largura que
   "dd/mm/aaaa" mais o calendário exigem.

   O respiro em volta é da barra, e não do vizinho. A .grade não guarda espaço nenhum
   embaixo dela, e a barra dos Logs cai logo depois dos dois cartões do resumo: sem esta
   margem o vão ali em cima é zero, os campos encostam na borda dos cartões e a linha
   inteira lê como se fosse parte deles. É a mesma falta que a .ficha-grade e a
   .conta-grade já tinham remendado cada uma por sua conta. Os dois lados levam a mesma
   medida de propósito: a barra fica entre dois blocos de cartão, e vão diferente em cima e
   embaixo faz ela parecer colada no de cima.

   POR QUE AS DUAS CLASSES EM TODO SELETOR. Mais abaixo neste arquivo, em "Os filtros ficam
   todos numa linha só", a .barra-ferramentas manda toda barra não quebrar e rolar na
   horizontal. Aquele seletor pesa igual a .barra-logs sozinha e vem depois, então quem
   escrevesse só .barra-logs perdia por ordem, sem aviso nenhum: era o que acontecia com o
   flex-wrap, com o overflow-x e com o min-width da busca, que ficava em zero e deixava o
   campo encolher até cortar o próprio texto. Nomear as duas classes decide por peso, e não
   por posição. É isso que deixa este bloco morar inteiro num lugar só, com a regra de tela
   pequena logo abaixo, em vez de espalhado pelo arquivo.

   E ESTA BARRA QUEBRA, em vez de rolar. A regra de não quebrar foi escrita para a barra do
   CRM, antes de os Logs existirem. Sete controles não cabem numa linha em tela de
   notebook, e rolar na horizontal esconde justamente o "Baixar planilha", que fica na
   ponta: some da tela o botão que a pessoa veio buscar. Uma segunda linha mostra tudo de
   uma vez. Abaixo de 900px cada campo passa a ocupar meia largura, para a barra não virar
   sete linhas empilhadas. */
.barra-ferramentas.barra-logs{
  gap:10px;margin-top:16px;margin-bottom:16px;flex-wrap:wrap;overflow-x:visible;
}
.barra-ferramentas.barra-logs .campo-busca{flex:1 1 260px;min-width:200px}
.barra-ferramentas.barra-logs .campo-modal{width:auto;height:31px;flex:0 1 auto;max-width:210px}
.barra-ferramentas.barra-logs select.campo-modal{min-width:152px;padding-right:28px}
.barra-ferramentas.barra-logs input[type="date"].campo-modal{min-width:158px;padding-right:8px}
.barra-ferramentas.barra-logs .filtro{flex:0 0 auto}

@media (max-width:900px){
  .barra-ferramentas.barra-logs .campo-busca{flex:1 1 100%;max-width:none}
  .barra-ferramentas.barra-logs .campo-modal{flex:1 1 calc(50% - 5px);max-width:none}
}

/* ============================================================
   Caixa de melhorias
   ============================================================
   Os dois lados da mesma caixa: o cartão de Configurações, onde a pessoa escreve e vê a
   resposta, e a aba do Administrador, onde a resposta é escrita. As duas listas usam as
   mesmas classes de propósito. É a mesma sugestão vista de dois lugares, e no dia em que
   alguém mudar a aparência de um lado o outro acompanha sozinho, em vez de os dois irem
   divergindo até parecerem coisas diferentes. */
/* O contador ao lado do nome da subaba.
   A regra de cima, `.aba .contador`, é da barra de abas GRANDE, e não vale aqui: subaba é
   `.subabas button`, outra árvore. Sem esta linha o número encosta na palavra e a aba lê
   "Melhorias2", que é o tipo de coisa que ninguém consegue mais desver depois de notar. */
.subabas .contador{
  background:var(--navy-600);border-radius:20px;padding:1px 7px;
  font-size:11px;margin-left:6px;font-weight:700;
}
.subabas button.ativo .contador{background:rgba(0,0,0,.22)}

.melhorias-minhas{margin-top:16px;display:flex;flex-direction:column;gap:10px}
.melhoria-minha,.melhoria-linha{
  border:1px solid var(--linha);border-radius:var(--raio);padding:10px 12px;background:var(--navy-900);
}
.melhoria-linha + .melhoria-linha{margin-top:10px}
.melhoria-linha.aberta{border-color:var(--azul)}
.melhoria-topo{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:6px}
.melhoria-autor{font-size:13px;color:var(--texto)}
.melhoria-onde{
  font-size:11.5px;color:var(--texto-suave);border:1px solid var(--linha);
  border-radius:20px;padding:1px 8px;
}
/* A hora empurrada para a direita: o olho corre a coluna de datas sem tropeçar nos nomes,
   que têm cada um o seu tamanho. */
.melhoria-quando{margin-left:auto;font-size:12px;color:var(--texto-suave);white-space:nowrap}
/* O título, quando a pessoa escreveu um. Ele é opcional, então a linha existe às vezes: por
   isso a margem fica NELE, e não no texto que vem depois, senão a sugestão sem título nasce
   com um buraco em cima. */
.melhoria-titulo{margin:0 0 4px;font-size:14px;font-weight:700;color:var(--texto)}
.melhoria-texto{margin:0;font-size:13.5px;line-height:1.55;color:var(--texto);white-space:pre-wrap}
.melhoria-resposta{
  margin-top:8px;padding:8px 10px;border-radius:8px;background:var(--navy-800);
  border-left:3px solid var(--verde);font-size:13px;line-height:1.5;color:var(--texto-suave);
}
.melhoria-resposta strong{color:var(--texto)}
.melhoria-editor{margin-top:10px}
.melhoria-botoes{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}

/* ============================================================
   Campo de senha com o olho
   ============================================================
   Senha digitada às cegas é errada às cegas: a pessoa erra uma letra, o sistema responde
   "a senha está errada", e ela não tem como saber se errou a senha ou a digitação.

   O botão fica DENTRO do campo, e o campo ganha um recuo à direita do tamanho dele, para o
   texto da senha nunca passar por baixo do ícone. */
.campo-com-olho{position:relative;display:block;width:100%}
.campo-com-olho input{width:100%;padding-right:40px}
.olho{
  position:absolute;right:6px;top:50%;transform:translateY(-50%);
  width:30px;height:30px;display:inline-flex;align-items:center;justify-content:center;
  background:none;border:none;border-radius:8px;cursor:pointer;
  color:var(--texto-suave);padding:0;
}
.olho:hover{color:var(--texto);background:var(--navy-600)}
.olho:focus-visible{outline:2px solid var(--azul-claro);outline-offset:1px}
.olho svg{display:block}
/* Na tela de entrada o campo é mais alto, e o olho acompanha. */
.entrada-caixa .olho{width:32px;height:32px}
.entrada-caixa .campo-com-olho input{padding-right:44px}

/* O "Não consigo acessar minha conta", abaixo do botão Entrar. Ele é um caminho de saída,
   e não uma ação: por isso texto, e não botão cheio. */
.entrada-ajuda{
  width:100%;margin-top:14px;background:none;border:none;cursor:pointer;
  color:var(--texto-suave);font-size:12.5px;font-family:inherit;text-align:center;
  padding:6px;border-radius:8px;
}
.entrada-ajuda:hover{color:var(--texto);text-decoration:underline}
.entrada-ajuda:focus-visible{outline:2px solid var(--azul-claro);outline-offset:1px}

/* ============================================================
   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 ---------- */
/* A caixa larga é o cartão de tarefa: três faixas, e só a do meio rola. Com a caixa
   inteira rolando, o rodapé (Apagar, Fechar, Editar) escorregava por cima do campo de
   comentário e escondia o botão de comentar. */
.modal-caixa.larga{
  width:660px;max-height:88vh;
  display:flex;flex-direction:column;overflow:hidden;
}
.modal-caixa.larga > .modal-cabecalho,
.modal-caixa.larga > .modal-texto,
.modal-caixa.larga > .modal-rodape{flex:0 0 auto}
.modal-caixa.larga > .cartao-corpo,
.modal-caixa.larga > .form-grade{flex:1 1 auto;min-height:0;overflow-y:auto}
.modal-caixa.larga > .modal-rodape{
  border-top:1px solid var(--linha);padding-top:14px;margin-top:14px;
}
.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(0,0,0,.45);
}
.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. */
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
   as pessoas moram no banco daqui, então ele não depende de nada de fora 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:52px;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:var(--sobre-acao);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:var(--sobre-acao);
  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}}

/* O botão em si, que faltava. Esta seção nasceu no primeiro commit, com o estilo do
   formulário e do "pronto", e sem a regra do botão que abre os dois: o CSS inteiro ficou
   órfão, sem nada no hub que o usasse, até hoje.

   Ele tem a altura do botão de tema, ao lado, e a borda azul de quem chama para a ação sem
   ser a ação principal da tela. Fica ANTES do tema e do avatar de propósito: no canto,
   junto do que é do hub e não do trabalho de hoje. */
.botao-melhoria{
  height:38px;padding:0 13px;border-radius:10px;
  background:var(--navy-700);border:1px solid var(--azul);color:var(--azul-txt);
  display:inline-flex;align-items:center;gap:7px;
  font-size:13px;font-weight:600;white-space:nowrap;cursor:pointer;
}
.botao-melhoria:hover{background:var(--navy-600);border-color:var(--azul-claro)}
.botao-melhoria .ic{display:block}

/* A caixa é mais larga do que a padrão de 460px. Ela carrega um formulário, e não uma
   pergunta de sim ou não: com 460 o campo de título corta o próprio texto de exemplo e o
   recado do rodapé quebra em três linhas de quatro palavras. */
.melhoria-caixa{width:620px}

/* O formulário. O título e a tela cabem lado a lado, e empilham quando não cabem: são dois
   campos curtos, e um embaixo do outro faria a caixa crescer sem motivo.

   A margem do .campo é zerada aqui: dentro de uma grade quem separa é o gap, e os dois
   juntos davam 28px onde deviam dar 12. */
.melhoria-form{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:4px}
.melhoria-form .campo{margin:0}
.melhoria-form .campo-largo{grid-column:1 / -1}
@media (max-width:640px){.melhoria-form{grid-template-columns:1fr}}

.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}

/* As quatro portas da Caixa. Botão grande e por linha inteira de propósito: a escolha do
   caminho é a primeira decisão do pedido, e ela precisa caber num olhar, não numa lista. */
.caixa-portas{display:flex;flex-direction:column;gap:9px;margin-top:14px}
.caixa-porta{
  display:flex;align-items:center;gap:13px;width:100%;text-align:left;
  background:var(--navy-700);border:1px solid var(--linha);border-radius:11px;
  padding:13px 15px;cursor:pointer;transition:border-color .15s,background .15s;
}
/* O ouro da marca marca onde a pessoa está: em repouso o detalhe do desenho é da mesma cor
   do texto, e acende no hover, do mesmo jeito que no menu. */
.caixa-porta:hover{border-color:var(--azul-claro);background:var(--fundo-azul);--ouro-ic:var(--ouro)}
.caixa-porta-ic{display:flex;align-items:center;flex-shrink:0;color:var(--azul-txt)}
.caixa-porta-txt{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.caixa-porta-txt b{font-size:14px;font-weight:700;color:var(--texto)}
.caixa-porta-txt small{font-size:11.5px;color:var(--texto-suave);font-weight:600}
.caixa-porta-chip{
  flex-shrink:0;font-size:10.5px;font-weight:700;letter-spacing:.02em;
  background:var(--fundo-azul);color:var(--azul-claro);
  border:1px solid var(--azul);border-radius:20px;padding:3px 10px;
}
/* Para onde o pedido vai. Fica no alto do formulário porque saber o destino muda o jeito de
   escrever o pedido: quem sabe que fala com o Cyrus escreve para uma pessoa, não para um campo. */
.caixa-rota-aviso{
  background:var(--fundo-azul);border:1px solid var(--azul);border-radius:9px;
  padding:9px 13px;margin-top:12px;font-size:12.5px;font-weight:600;color:var(--azul-claro);
}
.caixa-chamada{
  display:flex;flex-direction:column;gap:3px;margin-top:14px;
  border-left:3px solid var(--azul);padding-left:12px;
}
.caixa-chamada b{font-size:13.5px;color:var(--texto)}
.caixa-chamada span{font-size:12px;color:var(--texto-suave);font-weight:600}
.caixa-seg{display:flex;flex-wrap:wrap;gap:7px;margin-top:7px}
.caixa-dias .filtro{min-width:36px;text-align:center}
.caixa-dupla{display:flex;gap:22px;flex-wrap:wrap}
.caixa-hora,.caixa-numero{width:120px;flex-shrink:0}
.passo-linha .caixa-hora{width:106px}
.caixa-secao textarea.campo-modal{margin-top:7px}
.caixa-voltar{margin-right:10px}
/* O desenho do título é o único da tela, então nele o ouro fica aceso. No rodapé do livro
   são vários lado a lado, e ali o ouro viraria pontinho amarelo espalhado: fica apagado. */
.modal-titulo .ic{--ouro-ic:var(--ouro)}

/* A rotina na agenda do Painel de Controle. Ela divide a coluna com a tarefa, então precisa
   ser reconhecível sem ler: a faixa roxa na lateral diz "isto se repete", e o cursor de seta
   diz que não há cartão para abrir. */
.ag-card.ag-rotina{border-left:3px solid #7C3AED;cursor:default}
.ag-card.ag-rotina:hover{border-color:var(--linha);border-left-color:#7C3AED}
.ag-hora{font-weight:700;color:var(--texto)}

/* ---------- 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:var(--sobre-acao);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 ION.
   - 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:var(--sobre-acao)}

/* A logo tem duas versões, uma por fundo. A altura manda; a largura acompanha.
   No topo entra só o wordmark, e por isso ele pode ser baixo; na entrada entra a marca
   completa, com a assinatura, e ali ela precisa de altura para a assinatura se ler. */
.topo .marca img{height:22px;width:auto;border-radius:0}
.entrada-logo{height:52px;width:auto}

/* Í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 do sistema de origem ---------- */
.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}

/* ============================================================
   A agenda do Painel de Controle (leitura Operacional)
   ============================================================
   Três colunas da mesma altura, e cada uma rola por dentro. É de propósito: a coluna do
   atraso pode ter quarenta cartões e a do dia três, e sem o teto a página inteira ficaria
   do tamanho da pior coluna, com as outras duas boiando num vazio de dois palmos. */
.ag-grade{align-items:start}
.ag-col{display:flex;flex-direction:column;max-height:calc(100vh - 210px);min-height:320px}
.ag-col h3{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ag-quando{font-size:11.5px;font-weight:600;color:var(--texto-suave);text-transform:none;letter-spacing:0}
.ag-n{
  margin-left:auto;background:var(--navy-600);border-radius:20px;padding:1px 9px;
  font-size:11.5px;font-weight:700;color:var(--texto);
}
.ag-nav{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-bottom:10px}
.ag-nav .filtro{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;padding:4px 10px}
.ag-volta .ic{transform:rotate(180deg)}
.ag-data{
  background:var(--navy-700);border:1px solid var(--linha);border-radius:8px;
  color:var(--texto);font-family:var(--fonte);font-size:11.5px;padding:3px 7px;
}
.ag-lista,.ag-semana{overflow-y:auto;flex:1;padding-right:2px}
.ag-lista .card-tarefa:last-child{margin-bottom:0}

/* O cartão da agenda é o mesmo do quadro de Tarefas, sem a caixinha de concluir: aqui é
   leitura, e quem conclui é o sistema de origem. Por isso o título recupera a largura toda. */
.ag-card .card-tarefa-titulo,.ag-card .card-tarefa-etiquetas{padding-right:0}
.ag-card-mini{padding:8px 10px;margin-bottom:6px;background:var(--navy-800)}
.ag-card-mini .card-tarefa-titulo{font-size:12.5px;font-weight:600}
.ag-card-mini .card-tarefa-meta{margin-top:6px;font-size:11px;gap:7px}
.ag-feito .card-tarefa-titulo{color:var(--texto-suave);text-decoration:line-through}
.prazo.feito{background:var(--fundo-verde);color:var(--verde-txt)}
.ag-cliente{font-weight:600}
.ag-com{font-style:italic}

/* A semana repartida dia a dia. O dia é a unidade de leitura porque o que se procura aqui é
   ESPAÇO: é este recorte que vai dizer, mais para a frente, se cabe marcar mais uma coisa. */
.ag-dia{border-left:2px solid var(--linha);padding-left:10px;margin-bottom:12px}
.ag-dia:last-child{margin-bottom:0}
.ag-dia-topo{
  display:flex;align-items:baseline;gap:8px;width:100%;text-align:left;background:transparent;
  border:none;padding:2px 0 7px;cursor:pointer;color:var(--texto);
}
.ag-dia-nome{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.5px}
.ag-dia-conta{font-size:11px;color:var(--texto-suave);margin-left:auto}
.ag-dia-topo:hover .ag-dia-nome{color:var(--azul-claro)}
.ag-dia.hoje{border-left-color:var(--ouro)}
.ag-dia.hoje .ag-dia-nome{color:var(--ouro)}
.ag-dia.alvo{border-left-color:var(--azul-claro)}
.ag-dia.passado .ag-dia-nome{color:var(--texto-suave)}
.ag-dia.livre .ag-dia-conta{opacity:.75}

/* Empilhado, o teto de altura vira estorvo: seriam três caixas de uma tela cada, com rolagem
   dentro de rolagem. Aqui cada coluna cresce até o tamanho dela e quem rola é a página. */
@media (max-width:1180px){
  .ag-col{max-height:none}
  .ag-lista,.ag-semana{overflow-y:visible}
}

/* ============================================================
   O Administrador: Rotinas do Time e Missão da Semana
   ============================================================
   Duas colunas: a equipe à esquerda, fixa, e o painel da pessoa escolhida à direita. É o
   mesmo desenho do sistema de origem, e não por imitação: numa tela em que se distribui trabalho, a
   primeira pergunta é sempre "para quem", e a lista de gente precisa estar sempre à vista. */
.adm-grade{display:grid;grid-template-columns:200px minmax(0,1fr);gap:14px;align-items:start}
.adm-equipe{background:var(--navy-800);border:1px solid var(--linha);border-radius:var(--raio);padding:6px}
.adm-equipe-topo{
  font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;
  color:var(--texto-suave);padding:8px 9px 9px;
}
.adm-pessoa{
  display:flex;align-items:center;gap:8px;width:100%;text-align:left;background:transparent;
  border:none;border-radius:8px;padding:8px 9px;margin-bottom:2px;cursor:pointer;color:var(--texto);
}
.adm-pessoa:hover{background:var(--navy-700)}
.adm-pessoa.ativa{background:var(--navy-600)}
.adm-pessoa.ativa .adm-pessoa-nome{font-weight:700}
.adm-inicial{
  width:24px;height:24px;border-radius:50%;background:var(--azul);color:var(--sobre-acao);flex:0 0 auto;
  font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;
}
.adm-pessoa-nome{flex:1;font-size:13.5px;min-width:0}
.adm-pessoa-n{font-size:11px;color:var(--texto-suave)}

.adm-painel{padding:14px 16px}
.adm-cabeca{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.adm-cabeca h3{margin:0;display:flex;align-items:baseline;gap:9px}
.adm-cabeca .botao{margin-left:auto}
.adm-usuario{font-size:12px;font-weight:500;color:var(--texto-suave);text-transform:none;letter-spacing:0}

/* A linha de uma rotina. Tudo dela cabe numa linha só de propósito: prioridade, o que é,
   quando repete, se conta para a carreira e a próxima data. Empilhar em cartão faria vinte
   rotinas virarem uma tela de rolagem sem fim. */
.adm-item{border-bottom:1px solid var(--linha);padding:2px 0}
.adm-item:last-child{border-bottom:none}
.adm-item.aberta{background:var(--navy-700);border-radius:10px;padding:4px 8px;margin:4px -8px}
.adm-item-linha{display:flex;align-items:center;gap:9px;padding:9px 0}
.adm-item-meio{flex:1;min-width:0}
.adm-item-titulo{font-size:13.5px;font-weight:600;line-height:1.35}
.adm-item-apoio{font-size:12px;color:var(--texto-suave);margin-top:3px;white-space:pre-wrap;word-break:break-word}
.adm-urg{
  width:22px;height:22px;border-radius:50%;border:1px solid rgba(0,0,0,.3);flex:0 0 auto;
  font-size:11.5px;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;
}
.adm-selo{
  display:inline-flex;align-items:center;gap:5px;white-space:nowrap;flex:0 0 auto;cursor:pointer;
  background:transparent;border:1px solid var(--linha);border-radius:7px;padding:4px 9px;
  font-size:11.5px;font-weight:600;color:var(--azul-txt);
}
.adm-selo:hover{border-color:var(--azul-claro)}
.adm-mini{
  background:transparent;border:none;color:var(--texto-suave);cursor:pointer;flex:0 0 auto;
  font-size:16px;line-height:1;padding:2px 4px;border-radius:6px;
}
.adm-mini:hover{color:var(--texto);background:var(--navy-600)}
.adm-mini.on{color:var(--ouro);--ouro-ic:var(--ouro)}
.adm-carreira-selo{
  display:inline-block;background:var(--fundo-amarelo);border:1px solid var(--amarelo);
  color:var(--amarelo-txt);border-radius:6px;padding:1px 8px;font-size:10.5px;font-weight:700;
  text-transform:uppercase;letter-spacing:.4px;white-space:nowrap;
}
.adm-barra{height:6px;background:var(--navy-600);border-radius:4px;overflow:hidden;margin-top:7px;max-width:260px}
.adm-barra-tri{height:100%;transition:width .2s}
.adm-barra-conta{font-size:11px;color:var(--texto-suave);margin-top:4px}

.adm-in{
  background:var(--navy-700);border:1px solid var(--linha);border-radius:7px;color:var(--texto);
  font-family:var(--fonte);font-size:12.5px;padding:6px 9px;width:100%;box-sizing:border-box;
}
.adm-in:focus{outline:none;border-color:var(--azul-claro)}
.adm-in-curto{width:110px}
.adm-in-meta{width:64px;flex:0 0 auto}
.adm-in-data{width:140px;flex:0 0 auto}
.adm-in-hora{width:106px;flex:0 0 auto}
textarea.adm-in{resize:vertical}

/* As fases da rotina. Ficam recuadas e sempre à vista: são elas que a pessoa marca no dia,
   e esconder atrás de um clique repetiria o erro do "Definir repetição", que ninguém abria. */
.adm-subs{padding:0 0 8px 31px}
.adm-subs-vazio{opacity:.75}
.adm-subs-vazio:focus-within{opacity:1}
.adm-sub{display:flex;align-items:center;gap:8px;padding:3px 0}
.adm-sub-seta{color:var(--texto-suave);font-size:13px}
.adm-sub-texto{flex:1;font-size:12.5px;color:var(--texto-suave);min-width:0}
.adm-sub-alerta{font-size:10.5px;color:var(--amarelo-txt);white-space:nowrap}
.adm-sub-nova .adm-in{flex:1}

.adm-editor{
  background:var(--navy-800);border:1px solid var(--linha);border-radius:10px;
  padding:12px 14px;margin:2px 0 10px;display:flex;flex-direction:column;gap:10px;
}
.adm-campo{display:flex;flex-direction:column;gap:5px}
.adm-campo label{font-size:11px;font-weight:700;color:var(--texto-suave);letter-spacing:.3px}
.adm-linha{display:flex;gap:8px;align-items:center}
.adm-dias{display:flex;gap:6px;flex-wrap:wrap}
.adm-dia{
  min-width:42px;padding:6px 9px;border-radius:7px;cursor:pointer;font-size:12px;font-weight:500;
  border:1px solid var(--linha);background:transparent;color:var(--texto);
}
.adm-dia:hover{border-color:var(--azul-claro)}
.adm-dia.on{background:var(--azul);border-color:var(--azul);color:var(--sobre-acao);font-weight:700}
.adm-editor-pe{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.adm-editor-pe .conta-nota{margin:0;flex:1;min-width:180px}

.adm-nova{
  background:var(--navy-800);border:1px dashed var(--linha);border-radius:10px;
  padding:12px 14px;margin-bottom:14px;display:flex;flex-direction:column;gap:10px;
}
.adm-nova-topo{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--texto-suave)}
.adm-nova .adm-editor{background:transparent;border:none;padding:0;margin:0}

/* A missão é cartão, e não linha: ela tem descrição, barra de progresso, micro-tarefas e os
   dois martelos do fim. Numa linha só nada disso caberia. */
.adm-missao{background:var(--navy-700);border:1px solid var(--linha);border-radius:10px;padding:12px 14px;margin-bottom:10px}
.adm-missao-topo{display:flex;align-items:flex-start;gap:9px}
.adm-missao-conta{display:flex;justify-content:space-between;font-size:11px;color:var(--texto-suave);margin:10px 0 0}
.adm-missao .adm-barra{max-width:none;margin-top:4px}
.adm-micros{margin-top:10px;display:flex;flex-direction:column;gap:4px}
.adm-micro{display:flex;align-items:center;gap:8px}
.adm-micro-texto{flex:1;font-size:13px;min-width:0}
.adm-micro-texto.feito{color:var(--texto-suave);text-decoration:line-through}
.adm-micro-novo .adm-in{flex:1}
.adm-caixa{
  width:18px;height:18px;border-radius:5px;border:1.5px solid var(--linha);background:transparent;
  cursor:pointer;flex:0 0 auto;display:flex;align-items:center;justify-content:center;padding:0;color:var(--sobre-acao);
}
.adm-caixa.on{background:var(--verde);border-color:var(--verde)}
.adm-missao-pe{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}

@media (max-width:900px){
  .adm-grade{grid-template-columns:1fr}
  .adm-item-linha{flex-wrap:wrap}
  .adm-item-meio{flex:1 0 100%;order:-1}
}


/* ============================================================
   A MESA DE DESPACHO (Tarefas)
   ============================================================
   Duas metades: como o time está, e a fila esperando destino. A segunda só existe por causa
   da primeira, então elas ficam lado a lado e não em abas. */
.mesa-numeros{margin-bottom:16px}
.mesa-numero{
  text-align:left;cursor:pointer;font-family:var(--fonte);border:1px solid var(--linha);
}
.mesa-numero:hover{border-color:var(--azul-claro)}
.mesa-corpo{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:14px;align-items:start}
.mesa-corpo.so-time{grid-template-columns:minmax(0,1fr)}
.mesa-time h3,.mesa-fila h3{display:flex;align-items:center;gap:8px}
.mesa-apoio{font-size:11.5px;font-weight:500;color:var(--texto-suave);text-transform:none;letter-spacing:0}
.mesa-tabela{width:100%;border-collapse:collapse}
.mesa-tabela th{
  text-align:left;font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;
  color:var(--texto-suave);padding:6px 8px;border-bottom:1px solid var(--linha);
}
.mesa-tabela td{padding:8px;border-bottom:1px solid var(--linha);font-size:13px;vertical-align:middle}
.mesa-tabela tr:last-child td{border-bottom:none}
.mesa-cel{
  background:var(--navy-700);border:1px solid var(--linha);border-radius:7px;color:var(--texto);
  font-family:var(--fonte);font-size:13px;font-weight:700;padding:3px 11px;cursor:pointer;min-width:38px;
}
.mesa-cel:hover{border-color:var(--azul-claro);color:var(--azul-claro)}
.mesa-cel.ruim{color:var(--vermelho-txt);border-color:var(--vermelho)}

/* O quadradinho do dia. Ele responde, sem ler nada, a pergunta de quem vai despachar: este
   dia desta pessoa aguenta mais uma coisa? */
.mesa-semana{display:flex;gap:4px}
.mesa-dia{
  width:34px;padding:4px 0 5px;border-radius:6px;text-align:center;border:1px solid var(--linha);
  background:var(--navy-700);
}
.mesa-dia-curto{display:block;font-size:9px;font-weight:700;letter-spacing:.3px;color:var(--texto-suave);text-transform:uppercase}
.mesa-dia-n{display:block;font-size:13px;font-weight:700;line-height:1.2;min-height:16px}
.mesa-dia.livre{opacity:.6}
.mesa-dia.leve{background:var(--fundo-verde);border-color:rgba(34,197,94,.4)}
.mesa-dia.leve .mesa-dia-n{color:var(--verde-txt)}
.mesa-dia.cheio{background:var(--fundo-amarelo);border-color:rgba(244,192,32,.45)}
.mesa-dia.cheio .mesa-dia-n{color:var(--amarelo-txt)}
.mesa-dia.lotado{background:var(--fundo-vermelho);border-color:rgba(239,68,68,.5)}
.mesa-dia.lotado .mesa-dia-n{color:var(--vermelho-txt)}
.mesa-dia.hoje{box-shadow:inset 0 -2px 0 var(--ouro)}
.mesa-dia.fds{opacity:.5}
.mesa-dia.alvo{outline:2px solid var(--azul-claro);outline-offset:1px}

/* A fila: um cartão por pedido, e o despacho abre dentro dele. Abrir em janela separada
   tiraria da vista justamente a carga do time, que é o que decide para quem vai. */
.mesa-item{background:var(--navy-700);border:1px solid var(--linha);border-radius:10px;padding:12px 14px;margin-bottom:10px}
.mesa-item:last-child{margin-bottom:0}
.mesa-item.aberto{border-color:var(--azul-claro)}
.mesa-item-titulo{font-size:13.5px;font-weight:600;line-height:1.35}
.mesa-item-meta{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-top:7px;font-size:11.5px;color:var(--texto-suave)}
.mesa-item-desc{font-size:12.5px;color:var(--texto-suave);margin-top:8px;line-height:1.5}
.mesa-item-pe{margin-top:11px}
.mesa-despacho{
  margin-top:12px;padding-top:12px;border-top:1px solid var(--linha);
  display:flex;flex-direction:column;gap:10px;
}
.mesa-carga-linha{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.mesa-carga-nome{font-size:12px;font-weight:700;width:58px;flex:0 0 auto}
.mesa-linha-card{cursor:pointer}
.mesa-linha-card:hover td{background:var(--navy-700)}

@media (max-width:1180px){
  .mesa-corpo{grid-template-columns:1fr}
  .g5.mesa-numeros{grid-template-columns:repeat(2,1fr)}
}

/* O responsável dentro da gaveta. O número "sem responsável" é o que mais fala com quem
   despacha, e o conserto dele fica na mesma linha em que o problema aparece. */
.mesa-quem{
  background:var(--navy-700);border:1px solid var(--linha);border-radius:7px;color:var(--texto);
  font-family:var(--fonte);font-size:12.5px;padding:4px 10px;cursor:pointer;
}
.mesa-quem:hover{border-color:var(--azul-claro);color:var(--azul-claro)}
.mesa-quem.vazio{color:var(--amarelo-txt);border-color:var(--amarelo);border-style:dashed}
.mesa-linha-card.editando td{background:var(--navy-700)}
.mesa-linha-troca td{background:var(--navy-700);padding:10px 12px 14px}
.mesa-linha-troca .adm-editor-pe{margin-top:10px}

/* Os seis filtros do quadro. O divisor separa o que filtra o meu do que troca a pergunta
   para o time inteiro. */
.barra-divisor{width:1px;height:22px;background:var(--linha);margin:0 3px}
.col-mais{width:100%;margin-top:4px;font-size:12px}
/* Feito fica riscado, não feito fica normal. */
.card-tarefa.feito .card-tarefa-titulo{color:var(--texto-suave);text-decoration:line-through}
.card-tarefa.feito{opacity:.85}
/* Com o filtro do time, a coluna é a pessoa: elas cabem lado a lado e não rolam na horizontal. */
.quadro-tarefas.por-pessoa{grid-auto-flow:column;grid-auto-columns:minmax(190px,1fr);overflow-x:auto}
.quadro-tarefas.por-pessoa .col-tarefa{flex:1;min-width:190px}

/* Os números do quadro numa faixa fina. Na tela de VER OS CARTÕES, o número é contexto, e
   contexto não pode ocupar mais espaço do que a coisa. O número grande, com a lista atrás
   de cada um, é na Mesa. */
.quadro-resumo{
  display:flex;align-items:center;gap:22px;flex-wrap:wrap;
  padding:10px 14px;margin-bottom:14px;
  background:var(--navy-800);border:1px solid var(--linha);border-radius:10px;
  font-size:12.5px;color:var(--texto-suave);
}
.qr-item{display:inline-flex;align-items:baseline;gap:5px}
.qr-item b{font-size:17px;font-weight:700;color:var(--texto);line-height:1}
.qr-item i{font-style:normal;font-size:11.5px;opacity:.75;margin-left:3px}
.qr-item.ruim b{color:var(--vermelho-txt)}
.qr-item.bom b{color:var(--verde-txt)}

/* Os agentes na Mesa. Eles não entram na tabela do time porque não se distribui trabalho
   para robô do mesmo jeito: quem manda para eles é a Caixa, pelo formato do pedido. */
.mesa-agentes{margin-top:14px}
.mesa-agentes h3{display:flex;align-items:center;gap:8px}
.agentes-grade{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.agente{background:var(--navy-700);border:1px solid var(--linha);border-radius:10px;padding:12px 13px}
.agente-topo{display:flex;align-items:center;gap:8px}
.agente-nome{font-size:13.5px;font-weight:700;flex:1}
.agente-n{background:var(--navy-600);border-radius:20px;padding:1px 9px;font-size:11.5px;font-weight:700}
.agente-chapeu{font-size:11.5px;color:var(--texto-suave);margin-top:3px;line-height:1.4}
.agente-contas{display:flex;gap:6px;flex-wrap:wrap;margin-top:9px}
.agente-selo{font-size:10.5px;font-weight:700;border-radius:5px;padding:2px 8px}
.agente-selo.fila{background:var(--navy-600);color:var(--texto-suave)}
.agente-selo.gerando{background:var(--fundo-azul);color:var(--azul-txt)}
.agente-selo.gerado{background:var(--fundo-amarelo);color:var(--amarelo-txt)}
.agente-selo.ajuste{background:var(--fundo-vermelho);color:var(--vermelho-txt)}
.agente-itens{margin-top:10px;display:flex;flex-direction:column;gap:6px;max-height:230px;overflow-y:auto}
.agente-item{background:var(--navy-800);border:1px solid var(--linha);border-radius:8px;padding:8px 10px;cursor:pointer}
.agente-item:hover{border-color:var(--azul-claro)}
.agente-item.feito .agente-item-titulo{color:var(--texto-suave);text-decoration:line-through}
.agente-item-titulo{font-size:12.5px;font-weight:600;line-height:1.35}
.agente-item-meta{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-top:5px;font-size:11px;color:var(--texto-suave)}
.agente-fase{font-weight:700}
.agente-fase.gerando{color:var(--azul-txt)}
.agente-fase.gerado{color:var(--amarelo-txt)}
.agente-fase.ajuste{color:var(--vermelho-txt)}
.agente-fase.pronto{color:var(--verde-txt)}
@media (max-width:1180px){.agentes-grade{grid-template-columns:1fr}}

/* Cada coluna do quadro rola sozinha, como em qualquer kanban. Sem isto, a coluna de mil
   concluídas empurra a página inteira e a coluna A FAZER, que é a que importa, some do
   alcance da vista. O topo fica parado: ele é o que diz de quem é a coluna. */
.col-tarefa{max-height:calc(100vh - 250px)}
.col-tarefa-topo{flex:0 0 auto}
.col-tarefa-corpo{flex:1;overflow-y:auto;min-height:0;padding-right:2px}
@media (max-width:1180px){.col-tarefa{max-height:none}.col-tarefa-corpo{overflow-y:visible}}

/* Agente produz, gente entrega: a linha diz para quem a conta vai. */
.agente-responde{display:block;margin-top:4px;font-weight:700;color:var(--azul-txt)}
.mesa-responde{display:block;margin-top:3px;font-size:11px;color:var(--texto-suave)}

/* A bolinha de marcar, na agenda do Painel. Ela fica fora do que abre o cartão: marcar como
   feito é o clique mais repetido do dia, e não pode vir junto com abrir a janela. */
.ag-card-linha{display:flex;align-items:flex-start;gap:10px}
.ag-card-corpo{flex:1;min-width:0;cursor:pointer}
.ag-check{
  flex:0 0 auto;width:20px;height:20px;margin-top:1px;border-radius:50%;
  border:1.5px solid var(--linha);background:transparent;color:var(--sobre-acao);cursor:pointer;
  display:flex;align-items:center;justify-content:center;padding:0;transition:background .12s,border-color .12s;
}
.ag-check:hover{border-color:var(--verde)}
.ag-check.marcado{background:var(--verde);border-color:var(--verde)}
.ag-check.pequeno{width:17px;height:17px}
.ag-check:disabled{opacity:.6;cursor:default}
.ag-seta{
  flex:0 0 auto;background:transparent;border:none;color:var(--texto-suave);cursor:pointer;
  padding:2px;border-radius:6px;display:flex;align-items:center;transition:transform .15s;
}
.ag-seta:hover{color:var(--texto);background:var(--navy-600)}
.ag-seta.aberta{transform:rotate(90deg)}
/* As fases do dia, dentro do próprio cartão: são elas que a pessoa marca. */
.ag-fases{margin:8px 0 2px 30px;display:flex;flex-direction:column;gap:5px}
.ag-fases.dentro{margin-left:0;margin-top:8px}
.ag-fase{display:flex;align-items:center;gap:8px}
.ag-fase-texto{flex:1;font-size:12.5px;min-width:0}
.ag-fase-texto.feito{color:var(--texto-suave);text-decoration:line-through}
.ag-fase-hora{font-size:11px;color:var(--texto-suave);font-weight:700}
.ag-rotina.tem-fases .card-tarefa-meta{margin-top:6px}

/* ============================================================
   Administrador → Logs: o registro de atividade
   ============================================================
   A mesma tela que o sistema de origem tem em Administrador → Logs, com os tokens do hub: nada de cor
   escrita na mão, para nascer certa no tema claro e no escuro. A cor de ação (verde de
   criou, vermelho de excluiu) vem do JavaScript, porque ela é do significado da ação e é a
   mesma nos dois temas. */
.logs-resumo{background:var(--navy-800);border:1px solid var(--linha);border-radius:var(--raio);padding:14px 16px;margin-bottom:14px}
.logs-resumo-titulo{font-size:11px;color:var(--texto-suave);text-transform:uppercase;letter-spacing:.5px;margin-bottom:10px;font-weight:700}
.logs-resumo-grade{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.logs-resumo-sub{font-size:13px;font-weight:700;color:var(--texto);margin-bottom:8px}
.logs-resumo-linha{display:flex;justify-content:space-between;align-items:center;padding:4px 0;font-size:13px;border-bottom:1px dashed var(--linha)}
.logs-resumo-linha:last-child{border-bottom:none}
.logs-resumo-linha strong{color:var(--texto);font-weight:700}
.logs-resumo-papel{font-size:11px;color:var(--texto-suave);text-transform:uppercase}
.logs-resumo-vazio{color:var(--texto-suave);font-size:12px;font-style:italic;padding:6px 0}
@media (max-width:640px){.logs-resumo-grade{grid-template-columns:1fr;gap:16px}}

.logs-filtros{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:14px}
.logs-filtros select,.logs-filtros input{background:var(--navy-800);color:var(--texto);border:1px solid var(--linha);border-radius:8px;padding:7px 10px;font-size:13px;font-family:inherit}
.logs-filtros input[type="text"]{flex:1;min-width:190px}
.logs-filtros input[type="date"]{max-width:160px}

.logs-caixa-exportar{border:1px solid var(--azul);border-radius:var(--raio);padding:12px 14px;margin:0 0 14px;display:flex;flex-direction:column;gap:9px;background:var(--navy-800)}
.logs-exportar-titulo{font-weight:700;font-size:14px;color:var(--texto)}
.logs-exportar-linha{display:flex;align-items:center;gap:7px;flex-wrap:wrap;font-size:13px;color:var(--texto-suave)}
.logs-exportar-linha input[type="date"]{background:var(--navy-700);color:var(--texto);border:1px solid var(--linha);border-radius:8px;padding:6px 9px;font-family:inherit;font-size:13px}
.logs-exportar-gente{display:flex;flex-wrap:wrap;gap:5px 14px}
.logs-exportar-pessoa{display:inline-flex;align-items:center;gap:5px;font-size:13px;color:var(--texto);cursor:pointer}
.logs-caixa-exportar a.botao{text-decoration:none;display:inline-flex;align-items:center}

.logs-tabela{background:var(--navy-800);border:1px solid var(--linha);border-radius:var(--raio);overflow:hidden}
.logs-cabecalho,.logs-linha{display:grid;grid-template-columns:150px 130px 120px 1fr 62px;gap:8px;padding:10px 14px;font-size:12.5px}
.logs-cabecalho{background:var(--navy-700);color:var(--texto-suave);font-weight:700;font-size:11px;text-transform:uppercase;letter-spacing:.5px;border-bottom:1px solid var(--linha)}
.logs-linha{border-bottom:1px solid var(--linha);align-items:start}
.logs-linha:last-child{border-bottom:none}
.logs-linha:hover{background:var(--navy-700)}
.logs-linha.falha{background:var(--fundo-vermelho);border-left:3px solid var(--vermelho);padding-left:11px}
.logs-falhou{font-size:10.5px;color:var(--vermelho-txt);font-weight:700;margin-top:2px;letter-spacing:.3px}
.logs-quando{color:var(--texto-suave);font-family:ui-monospace,"SF Mono",Menlo,monospace;font-size:11.5px}
.logs-quem{color:var(--texto);font-weight:600}
.logs-papel{color:var(--texto-suave);font-size:11px;text-transform:uppercase}
.logs-acao{font-weight:600}
.logs-onde{color:var(--texto)}
.logs-item{font-size:12px;color:var(--texto);font-style:italic;margin:1px 0}
.logs-caminho{color:var(--texto-suave);font-size:11px;font-family:ui-monospace,"SF Mono",Menlo,monospace;margin-top:2px;word-break:break-all}
.logs-vazio{padding:30px;text-align:center;color:var(--texto-suave);font-style:italic}
.logs-vazio-cel{color:var(--texto-suave)}

.logs-paginacao{display:flex;justify-content:space-between;align-items:center;margin-top:12px;padding:8px 2px;font-size:12px;color:var(--texto-suave)}
.logs-paginacao>div{display:flex;gap:6px}
.logs-paginacao button[disabled]{opacity:.45;cursor:default}

.logs-detalhe-bloco{background:var(--navy-700);border:1px solid var(--linha);border-radius:10px;padding:10px 14px;font-size:13px;line-height:1.7;color:var(--texto)}
.logs-detalhe-bloco strong{color:var(--texto-suave);font-weight:600;min-width:96px;display:inline-block}
.logs-detalhe-bloco code{background:var(--navy-600);color:var(--texto);padding:1px 6px;border-radius:4px;font-size:12px}
.logs-detalhe-rotulo{margin:12px 0 6px;font-size:12px;font-weight:700;color:var(--texto-suave)}
.logs-detalhe-json{background:var(--navy-700);border:1px solid var(--linha);color:var(--texto);padding:12px;border-radius:10px;font-size:11.5px;line-height:1.5;max-height:300px;overflow:auto;font-family:ui-monospace,"SF Mono",Menlo,monospace;white-space:pre-wrap;word-break:break-word}

@media (max-width:760px){
  .logs-cabecalho,.logs-linha{grid-template-columns:1fr 1fr;gap:4px}
  .logs-cabecalho>div:not(:first-child),.logs-linha>div:not(:first-child){font-size:11.5px}
}

/* ============================================================
   Tráfego → Todos: os dois canais na mesma tela
   ============================================================
   A faixa por cliente é a do sistema de origem: acento na borda esquerda com a cor da plataforma,
   etiqueta em cima e, para quem investe nos dois, o par lado a lado (Google à esquerda,
   Meta à direita). O par vira uma coluna só embaixo de 1000px, senão os dois cartões
   ficariam estreitos demais para os quatro blocos de verba caberem. */
.ads-faixa{border-left:4px solid var(--verde);background:var(--fundo-verde);border-radius:var(--raio);padding:10px 12px}
.ads-faixa.meta{border-left-color:#8B5CF6;background:var(--fundo-roxo)}
.ads-faixa.google{border-left-color:#3B82F6;background:var(--fundo-azul)}
.ads-faixa-topo{display:flex;align-items:center;gap:9px;margin-bottom:8px}
.ads-faixa-cliente{font-size:13px;font-weight:700;color:var(--texto)}
.ads-tag-plataforma{font-size:11px;font-weight:700;padding:2px 9px;border-radius:6px;letter-spacing:.2px}
.ads-tag-plataforma.ambos{background:var(--fundo-verde);color:var(--verde-txt)}
.ads-tag-plataforma.meta{background:var(--fundo-roxo);color:var(--roxo-txt)}
.ads-tag-plataforma.google{background:var(--fundo-azul);color:var(--azul-txt)}
.ads-par{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:start}
@media (max-width:1000px){.ads-par{grid-template-columns:1fr}}

/* ============================================================
   A virada do mês
   ============================================================
   A faixa que segura o fechamento do mês que acabou nos primeiros dias do mês novo. Ela usa
   o ouro da marca porque é aviso de calendário, e não alarme: nada está errado, só o mês
   virou. Vermelho aqui faria o time achar que perdeu dinheiro. */
.virada{border:1px solid var(--ouro);border-left:4px solid var(--ouro);background:var(--fundo-amarelo);
  border-radius:var(--raio);padding:11px 14px;margin-bottom:12px}
.virada-topo{display:flex;align-items:center;gap:9px;margin-bottom:4px}
.virada-selo{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;
  color:var(--amarelo-txt);background:var(--fundo-amarelo);border:1px solid var(--ouro);border-radius:6px;padding:1px 8px}
.virada-titulo{font-size:14px;font-weight:700;color:var(--texto)}
.virada-fechar{margin-left:auto;font-size:11.5px;font-weight:600;color:var(--texto-suave);
  border:1px solid var(--linha);border-radius:20px;padding:3px 11px;background:var(--navy-800)}
.virada-fechar:hover{border-color:var(--ouro);color:var(--texto)}
.virada-frase{font-size:12px;color:var(--texto-suave);line-height:1.45;margin-bottom:9px;max-width:96ch}
.virada-numeros{display:flex;gap:8px;flex-wrap:wrap}
.virada-caixa{display:flex;flex-direction:column;gap:1px;background:var(--navy-800);border:1px solid var(--linha);
  border-radius:9px;padding:7px 12px;min-width:132px}
.virada-caixa.sem{opacity:.62}
.virada-caixa:first-child{border-color:var(--ouro)}
.virada-rot{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--texto-suave)}
.virada-valor{font-size:16px;font-weight:700;color:var(--texto)}
.virada-nota{font-size:11px;color:var(--texto-suave)}
.virada-detalhe{margin-top:9px;font-size:12px;font-weight:600;color:var(--azul-txt);background:none;padding:0}
.virada-detalhe:hover{text-decoration:underline}
.virada-vazio{margin-top:8px;font-size:12px;color:var(--texto-suave);font-style:italic}
.virada-tabela-wrap{margin-top:9px;overflow-x:auto}
.virada-tabela{width:100%;border-collapse:collapse;font-size:12.5px;background:var(--navy-800);
  border:1px solid var(--linha);border-radius:10px;overflow:hidden}
.virada-tabela th{text-align:left;font-size:10px;text-transform:uppercase;letter-spacing:.4px;
  color:var(--texto-suave);font-weight:700;padding:7px 10px;border-bottom:1px solid var(--linha);white-space:nowrap}
.virada-tabela td{padding:7px 10px;border-bottom:1px solid var(--linha);color:var(--texto);vertical-align:top;white-space:nowrap}
.virada-tabela tr:last-child td{border-bottom:none}
.virada-leads{font-size:10.5px;color:var(--texto-suave)}
.virada-sem{color:var(--texto-suave)}

/* ============================================================
   A planilha do mês (Tráfego → Lista)
   ============================================================
   A estrutura é a do sistema de origem, pedida pela Carol em 08/09/2026: colunas fixas à esquerda,
   congeladas, e um grupo por dia do mês à direita, com rolagem horizontal. As cores são as
   do hub, e nascem certas nos dois temas porque saem dos tokens.

   O congelamento é `position: sticky` com `left` acumulado: cada coluna fixa começa onde a
   anterior termina, então mexer numa largura obriga a mexer no `left` da seguinte. As
   larguras estão nas variáveis abaixo justamente para essa conta ficar num lugar só. */
.tabela-ads-mes{
  /* As dez colunas fixas. As larguras vivem aqui porque o congelamento é `left` acumulado:
     cada coluna começa onde a anterior termina, e uma conta só num lugar é o que permite
     arrastar a borda e tudo se reorganizar sozinho. O JavaScript escreve estas mesmas
     variáveis no estilo da tabela quando alguém redimensiona. */
  --w1:74px;    /* Pgto */
  --w2:96px;    /* Inv. diário */
  --w3:92px;    /* Média/dia */
  --w4:92px;    /* Saldo */
  --w5:250px;   /* Cliente */
  --w6:84px;    /* Projeção */
  --w7:92px;    /* CPL ant. */
  --w8:88px;    /* Leads mês */
  --w9:92px;    /* CPL atual */
  --w10:104px;  /* Gasto mês */
  border-collapse:separate;border-spacing:0;
}
/* A rolagem mora AQUI DENTRO, com altura de tela: assim a barra horizontal fica sempre no
   pé da planilha, à vista, em vez de exigir que a pessoa role a página inteira até o fim
   para encontrá-la. */
.ads-mes-rolagem{overflow:auto;max-height:calc(100vh - 240px);border:1px solid var(--linha);
  border-radius:10px;background:var(--navy-800)}
/* A barra de rolagem fica VISÍVEL e grossa, e não some como a do macOS. Nesta tela rolar de
   lado não é detalhe, é como se lê o mês: uma barra que só aparece depois que o dedo já
   está rolando não serve de convite para quem abriu a planilha pela primeira vez. */
.ads-mes-rolagem{scrollbar-color:var(--azul) var(--navy-700);scrollbar-width:auto}
.ads-mes-rolagem::-webkit-scrollbar{height:14px;width:12px}
.ads-mes-rolagem::-webkit-scrollbar-track{background:var(--navy-700)}
.ads-mes-rolagem::-webkit-scrollbar-thumb{background:var(--azul);border-radius:8px;border:3px solid var(--navy-700)}
.ads-mes-rolagem::-webkit-scrollbar-thumb:hover{background:var(--azul-claro)}
.ads-mes-rolagem::-webkit-scrollbar-corner{background:var(--navy-700)}

/* A GRADE. Planilha se lê pela linha vertical: sem ela o olho perde a coluna no meio de
   trinta dias. Todas as células ganham a divisória, e a do dia é mais forte. */
.tabela-ads-mes th,.tabela-ads-mes td{border-bottom:1px solid var(--linha);border-right:1px solid var(--linha)}
.tabela-ads-mes .ads-dia-ini{border-left:2px solid var(--linha)}

/* O cabeçalho tem DUAS linhas e elas precisam caber: apertado demais ninguém lê o nome da
   coluna, e o nome da coluna é o que diz o que o número quer dizer. */
.tabela-ads-mes thead th{padding:9px 10px;font-size:11px;letter-spacing:.4px;line-height:1.3;height:auto}
.tabela-ads-mes thead tr.ads-subcabecalho th{padding:7px 10px 8px;font-size:10.5px}
.tabela-ads-mes td{padding:8px 10px}

/* As dez colunas fixas, congeladas em cascata. */
.tabela-ads-mes .fx{position:sticky;background:var(--navy-800);z-index:3}
.tabela-ads-mes thead tr:first-child th.fx,
.tabela-ads-mes thead tr.ads-subcabecalho th.fx{z-index:8}
/* ⚠️ O `:first-child` da regra do cabeçalho grudado conta como classe na especificidade, e
   por isso um seletor com duas classes perdia dela sem avisar: o cabeçalho fixo ficava por
   baixo das colunas de dia e sumia ao rolar de lado. */
.tabela-ads-mes .fx1{left:0;width:var(--w1);min-width:var(--w1);max-width:var(--w1)}
.tabela-ads-mes .fx2{left:var(--w1);width:var(--w2);min-width:var(--w2);max-width:var(--w2)}
.tabela-ads-mes .fx3{left:calc(var(--w1) + var(--w2));width:var(--w3);min-width:var(--w3);max-width:var(--w3)}
.tabela-ads-mes .fx4{left:calc(var(--w1) + var(--w2) + var(--w3));width:var(--w4);min-width:var(--w4);max-width:var(--w4)}
.tabela-ads-mes .fx5{left:calc(var(--w1) + var(--w2) + var(--w3) + var(--w4));width:var(--w5);min-width:var(--w5);max-width:var(--w5)}
.tabela-ads-mes .fx6{left:calc(var(--w1) + var(--w2) + var(--w3) + var(--w4) + var(--w5));width:var(--w6);min-width:var(--w6);max-width:var(--w6)}
.tabela-ads-mes .fx7{left:calc(var(--w1) + var(--w2) + var(--w3) + var(--w4) + var(--w5) + var(--w6));width:var(--w7);min-width:var(--w7);max-width:var(--w7)}
.tabela-ads-mes .fx8{left:calc(var(--w1) + var(--w2) + var(--w3) + var(--w4) + var(--w5) + var(--w6) + var(--w7));width:var(--w8);min-width:var(--w8);max-width:var(--w8)}
.tabela-ads-mes .fx9{left:calc(var(--w1) + var(--w2) + var(--w3) + var(--w4) + var(--w5) + var(--w6) + var(--w7) + var(--w8));width:var(--w9);min-width:var(--w9);max-width:var(--w9)}
.tabela-ads-mes .fx10{left:calc(var(--w1) + var(--w2) + var(--w3) + var(--w4) + var(--w5) + var(--w6) + var(--w7) + var(--w8) + var(--w9));
  width:var(--w10);min-width:var(--w10);max-width:var(--w10);box-shadow:2px 0 0 var(--azul)}
.tabela-ads-mes .fx5{white-space:normal}
.tabela-ads-mes tbody tr:hover .fx{background:var(--navy-700)}
.tabela-ads-mes tbody tr.linha-risco .fx{background:color-mix(in srgb,var(--vermelho) 12%,var(--navy-800))}
.tabela-ads-mes tbody tr.linha-destacada .fx{background:color-mix(in srgb,var(--azul) 16%,var(--navy-800))}
.linha-destacada{background:var(--fundo-azul)}
.linha-destacada:hover{background:var(--fundo-azul) !important}

/* A alça de redimensionar, no canto direito de cada coluna fixa. Planilha se ajusta
   arrastando a borda, e é assim que ela se ajusta aqui. */
.col-rsz{position:absolute;top:0;right:-3px;width:7px;height:100%;cursor:col-resize;z-index:9}
.col-rsz:hover,.col-rsz.arrastando{background:var(--azul)}
.tabela-ads-mes thead th.fx{position:sticky}
.tabela-ads-mes thead tr:first-child th{position:sticky;top:0}
.tabela-ads-mes thead th{overflow:visible}
body.redimensionando{cursor:col-resize;user-select:none}

/* O nome do cliente é o que abre o funil; clicar em qualquer outro lugar da linha só a
   destaca, para não se perder ao rolar trinta colunas para a direita. */
.ads-nome-cliente{font:inherit;font-weight:600;color:var(--texto);text-align:left;padding:0;background:none;white-space:normal}
.ads-nome-cliente:hover{color:var(--azul-txt);text-decoration:underline}

.tabela-ads-mes .ads-dia-hoje{background:var(--fundo-azul)}
.tabela-ads-mes thead .ads-dia-hoje{background:color-mix(in srgb,var(--azul) 22%,var(--navy-800))}
/* Dia fechado com gasto zero: é o alarme que puxa o olho, porque verba parada custa o mês. */
.tabela-ads-mes .ads-gasto-zero{background:var(--vermelho);color:#fff;font-weight:700;text-align:center}
.ads-saldo-sos{color:var(--vermelho-txt);font-weight:700}
.ads-saldo-baixo{color:var(--amarelo-txt);font-weight:700}
.tabela-ads-mes .ordenavel{cursor:pointer;user-select:none}
.tabela-ads-mes .ordenavel:hover{color:var(--texto)}
.ads-seta{margin-left:4px;font-size:9px;color:var(--azul-txt)}

/* A linha de informação e o zoom, iguais aos de lá. */
.ads-mes-info{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:12px;color:var(--texto-suave);margin-bottom:8px}
.ads-mes-info strong{color:var(--texto)}
.ads-zoom{margin-left:auto;display:inline-flex;align-items:center;gap:5px}
.ads-zoom-btn{border:1px solid var(--linha);background:var(--navy-800);color:var(--texto);border-radius:7px;
  padding:1px 8px;font-size:12px;font-weight:600;line-height:1.6}
.ads-zoom-btn:hover{border-color:var(--azul-claro)}
.ads-zoom-pct{font-weight:700;color:var(--texto);min-width:38px;text-align:center}
.ads-mes-filtros{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:9px}
.ads-mes-rotulo{font-size:12px;font-weight:700;color:var(--texto-suave)}
.ads-mes-sep{width:1px;height:18px;background:var(--linha)}

/* A dica que segue o mouse. O `title` do navegador leva um segundo para aparecer e some
   sozinho; aqui a explicação do número aparece na hora, que é como funciona no sistema de origem. */
.hub-dica{position:fixed;z-index:9999;background:var(--navy-700);color:var(--texto);
  border:1px solid var(--linha);border-radius:8px;padding:6px 10px;font-size:12px;font-weight:600;
  pointer-events:none;display:none;white-space:nowrap;box-shadow:0 6px 20px rgba(0,0,0,.35)}
.tem-dica{cursor:help}

/* ---------- Análise de Desempenho (08/09/2026) ---------- */
/* O desenho é o do 📊 Desempenho do sistema de origem, a pedido da Carol: mesmo cabeçalho com o nome
   grande, mesmas pílulas de período, mesma fileira de números grandes com selo, mesma barra
   de termômetro em gradiente. O que muda é a conta por baixo, não o layout. */

/* O laranja de destaque é o do sistema de origem. O hub não tinha equivalente, e usar o ouro da marca
   deixaria a pílula ativa parecida demais com os selos de alerta. */
.bloco-desemp,.desemp-cabeca{--desemp-destaque:#E8611A}

.desemp-cabeca{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:18px;flex-wrap:wrap}
.desemp-sobrenome{font-size:12px;color:var(--texto-suave);letter-spacing:1px;text-transform:uppercase}
.desemp-nome{font-size:26px;font-weight:800;line-height:1.2}
.desemp-nome span{font-size:13px;color:var(--texto-suave);font-weight:400}
.desemp-nivel{text-align:right}
.desemp-nivel-rot{font-size:11px;color:var(--texto-suave);letter-spacing:.5px}
.desemp-nivel-val{font-size:18px;font-weight:800;text-transform:capitalize}
.desemp-nivel-pe{font-size:10.5px;color:var(--texto-suave);margin-top:1px}

.desemp-periodo{display:flex;align-items:center;gap:8px;margin-bottom:14px;flex-wrap:wrap}
.desemp-pilula{
  background:var(--navy-900);color:var(--texto-suave);border:1px solid var(--linha);
  border-radius:999px;padding:4px 14px;font-family:var(--fonte);font-size:12.5px;
  font-weight:600;cursor:pointer
}
.desemp-pilula:hover{color:var(--texto)}
.desemp-pilula.ativa{background:#E8611A;border-color:#E8611A;color:#fff}
.desemp-quando{margin-left:4px}
.desemp-periodo select{
  background:var(--navy-900);color:var(--texto);border:1px solid var(--linha);
  border-radius:8px;padding:5px 10px;font-family:var(--fonte);font-size:12.5px;
  cursor:pointer;margin-left:auto
}

/* Os cinco números grandes, um por coluna, como no sistema de origem. */
.desemp-numeros{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-bottom:14px}
.desemp-caixa{
  background:var(--navy-800);border:1px solid var(--linha);border-radius:var(--raio);padding:13px 14px
}
.desemp-caixa-rot{font-size:12px;color:var(--texto-suave);margin-bottom:6px;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
/* O selo diz QUAL número obedece ao filtro. Sem ele, trocar de janela e ver metade dos
   números parados vira "está bugado", e com razão. */
.desemp-selo{
  font-size:9.5px;font-weight:700;letter-spacing:.04em;padding:1px 6px;border-radius:999px;
  background:var(--navy-900);color:var(--texto-suave);text-transform:uppercase
}
.desemp-selo.do-periodo{background:rgba(232,97,26,.16);color:#E8611A}
.desemp-caixa-num{font-size:32px;font-weight:800;line-height:1}
.desemp-caixa-dica{font-size:10.5px;color:var(--texto-suave);margin-top:6px;line-height:1.35}

.bloco-desemp{
  background:var(--navy-800);border:1px solid var(--linha);border-radius:var(--raio);
  padding:14px 16px;margin-bottom:14px
}
.desemp-secao-titulo{font-weight:700;margin-bottom:12px;font-size:14px}
.desemp-topo{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  font-size:14px;margin-bottom:8px;flex-wrap:wrap
}
.desemp-fraco{color:var(--texto-suave);font-weight:400;font-size:12px;font-style:normal}

/* Os quadros internos das seções, no molde do "Entregas & consistência" do sistema de origem. */
.desemp-quadros{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.desemp-quadro{background:var(--navy-900);border-radius:10px;padding:12px 14px}
.desemp-quadro-rot{font-size:12px;color:var(--texto-suave);margin-bottom:6px}
.desemp-quadro-num{font-size:28px;font-weight:800;line-height:1}
.desemp-quadro-pe{font-size:11px;color:var(--texto-suave);margin-top:4px;line-height:1.4}

/* A barra do termômetro, igual à do sistema de origem: 12px, cantos redondos, gradiente de verde a
   vermelho preenchendo até o nível. */
.desemp-barra-fundo{height:12px;background:var(--navy-900);border-radius:6px;overflow:hidden}
.desemp-barra-cheia{
  height:100%;border-radius:6px;
  background:linear-gradient(90deg,#10B981,#3B82F6,#F59E0B,#EF4444)
}
.desemp-mini{font-size:11.5px;color:var(--texto-suave);line-height:1.55;margin-top:8px}

.tabela-desemp{width:100%;border-collapse:collapse;font-size:12.5px;min-width:780px}
.tabela-desemp th{
  text-align:left;padding:7px 10px;font-size:10.5px;letter-spacing:.7px;text-transform:uppercase;
  color:var(--texto-suave);font-weight:600;border-bottom:1px solid var(--linha);white-space:nowrap
}
.tabela-desemp td{padding:9px 10px;border-bottom:1px solid var(--linha);vertical-align:top}
/* A primeira coluna leva a data, o dia da semana e a setinha de abrir: sem o nowrap a
   setinha caía sozinha na linha de baixo. */
.tabela-desemp td:first-child{white-space:nowrap}
.desemp-linha.clicavel{cursor:pointer}
.desemp-linha.clicavel:hover td{background:var(--navy-900)}
.desemp-detalhe td{background:var(--navy-900)}
.desemp-total td{border-top:1px solid var(--linha);border-bottom:none;background:var(--navy-900)}
.desemp-recado{color:var(--texto-suave);font-size:11.5px;line-height:1.5;min-width:170px;white-space:normal}

.desemp-chips{display:flex;flex-wrap:wrap;gap:8px}
.desemp-chip{background:var(--navy-800);border:1px solid var(--linha);border-radius:8px;padding:5px 10px;font-size:12px}

/* Fora da janela ele não some, fica apagado dizendo quando volta. */
.desemp-form-fechado{opacity:.72;border-style:dashed}
.desemp-pergunta{margin-bottom:14px}
.desemp-pergunta label{display:block;font-size:13px;font-weight:600;margin-bottom:7px}
.desemp-pergunta textarea{
  width:100%;background:var(--navy-900);color:var(--texto);border:1px solid var(--linha);
  border-radius:8px;padding:9px 11px;font-family:var(--fonte);font-size:13px;resize:vertical
}
.desemp-ops{display:flex;flex-wrap:wrap;gap:7px}
.desemp-op{
  background:var(--navy-900);color:var(--texto-suave);border:1px solid var(--linha);
  border-radius:20px;padding:6px 13px;font-family:var(--fonte);font-size:12.5px;cursor:pointer
}
.desemp-op:hover{border-color:var(--azul-claro);color:var(--texto)}
.desemp-op.marcada{background:var(--fundo-azul);border-color:var(--azul);color:var(--azul-txt);font-weight:600}

@media (max-width:1000px){
  .desemp-numeros{grid-template-columns:repeat(3,1fr)}
  .desemp-quadros{grid-template-columns:1fr}
}
@media (max-width:660px){
  .desemp-numeros{grid-template-columns:repeat(2,1fr)}
  .desemp-nome{font-size:21px}
  .desemp-periodo select{margin-left:0;width:100%}
  .bloco-desemp{padding:12px}
}

/* ============================================================
   O quadro de Tarefas: criar coluna, criar cartão e o cartão aberto
   ============================================================
   Tudo aqui nasceu com o quadro do Hub ION, e nada disso é decoração: cada peça existe
   porque uma ação do quadro precisava de um lugar na tela. */

/* ---------- a coluna ---------- */
.col-tarefa-topo .col-nome{cursor:pointer;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.col-tarefa-topo .col-nome:hover{color:var(--texto)}
.col-tarefa-topo .col-apagar{
  width:20px;height:20px;border-radius:6px;font-size:15px;line-height:1;
  color:var(--texto-suave);flex:0 0 20px;opacity:0;transition:opacity .12s;
}
.col-tarefa:hover .col-apagar{opacity:1}
.col-tarefa-topo .col-apagar:hover{background:var(--fundo-vermelho);color:var(--vermelho-txt)}

/* O botão de somar cartão mora no PÉ da coluna, e não no topo: é para lá que o olho vai
   depois de ler o que já está na fila. */
.col-add{
  margin-top:6px;padding:8px 10px;border-radius:9px;width:100%;
  display:flex;align-items:center;gap:8px;
  font-size:13px;font-weight:600;color:var(--texto-suave);
  border:1px dashed var(--linha);background:transparent;
}
.col-add:hover{border-color:var(--azul);color:var(--azul-txt);border-style:solid}

/* A coluna que cria coluna. Ela fica no fim da fila, do tamanho de meia coluna, para nunca
   ser confundida com uma etapa do trabalho. */
.col-nova{flex:0 0 190px;display:flex;align-items:flex-start}
.col-nova button{
  width:100%;padding:14px 12px;border-radius:var(--raio);
  border:1px dashed var(--linha);background:transparent;
  display:flex;align-items:center;justify-content:center;gap:8px;
  font-size:13.5px;font-weight:600;color:var(--texto-suave);
}
.col-nova button:hover{border-color:var(--azul);color:var(--azul-txt);background:var(--navy-800)}

.col-tarefa.alvo{outline:2px dashed var(--azul);outline-offset:-4px;background:var(--fundo-azul)}
.card-tarefa[draggable="true"]{cursor:grab}
.card-tarefa[draggable="true"]:active{cursor:grabbing}
.card-tarefa.arrastando{opacity:.45;transform:rotate(1.5deg)}
.card-tarefa.feito .card-tarefa-titulo{text-decoration:line-through;opacity:.6}
.card-tarefa-check.marcado{background:var(--verde);border-color:var(--verde);color:var(--sobre-acao)}

/* O cartão em rascunho, dentro da própria coluna. */
.card-novo{
  background:var(--navy-700);border:1px solid var(--azul);border-radius:10px;
  padding:10px;margin-bottom:9px;
}
.card-novo-titulo{
  width:100%;border:none;background:transparent;color:var(--texto);
  font-family:inherit;font-size:13.5px;font-weight:600;line-height:1.35;resize:none;outline:none;
}
.card-novo-titulo::placeholder{color:var(--texto-suave);font-weight:500}
.card-novo-pe{display:flex;gap:7px;align-items:center;margin-top:8px;flex-wrap:wrap}
.card-novo-pe .botao{height:29px;padding:0 12px;font-size:12.5px}
.card-novo-pe .filtro{margin-left:auto}

/* O quadro sem coluna nenhuma. Ele é filho do quadro, que é uma fila horizontal, então
   precisa ocupar a fila inteira: sem isto ele nasce com a largura de uma coluna e o texto
   quebra em cinco linhas estreitas. */
.quadro-vazio{
  background:var(--navy-800);border:1px dashed var(--linha);border-radius:var(--raio);
  padding:48px 30px;text-align:center;max-width:620px;margin:20px auto;
}
.quadro-vazio h3{font-size:17px;font-weight:700;margin-bottom:10px}
.quadro-vazio p{font-size:14px;color:var(--texto-suave);line-height:1.6;margin-bottom:18px}

/* ---------- o cartão aberto ---------- */
.cartao-corpo{padding-right:8px;margin-top:6px}
.cartao-secao-titulo{
  display:flex;align-items:center;gap:8px;
  margin:18px 0 9px;font-size:12px;font-weight:700;
  text-transform:uppercase;letter-spacing:.8px;color:var(--texto-suave);
}
.cartao-secao-titulo .qtd-mini{
  margin-left:auto;background:var(--navy-600);border-radius:20px;
  padding:1px 9px;font-size:11px;letter-spacing:0;color:var(--texto);
}

.cartao-gente{display:flex;gap:7px;flex-wrap:wrap}
.chip-gente{
  display:flex;align-items:center;gap:7px;padding:4px 11px 4px 4px;
  border-radius:20px;border:1px solid var(--linha);background:var(--navy-700);
  font-size:12.5px;font-weight:600;color:var(--texto-suave);
}
.chip-gente:hover{border-color:var(--azul)}
.chip-gente.marcado{background:var(--azul);border-color:var(--azul);color:var(--sobre-acao)}
.chip-gente.marcado .mini-avatar{background:var(--navy-900);color:var(--texto)}
.chip-gente.travado{opacity:.4;cursor:not-allowed}
.chip-gente .mini-avatar{margin:0;border:none;width:22px;height:22px}

.cartao-etiquetas{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:9px}
.cartao-etiquetas .etiqueta-mini{display:inline-flex;align-items:center;gap:5px;padding-right:5px}
.cartao-etiquetas .etiqueta-mini button{
  font-size:14px;line-height:1;color:inherit;opacity:.6;padding:0 1px;
}
.cartao-etiquetas .etiqueta-mini button:hover{opacity:1}

.etiqueta-nova{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.etiqueta-nova input{
  height:31px;padding:0 11px;border-radius:9px;min-width:170px;flex:1;
  background:var(--navy-700);border:1px solid var(--linha);color:var(--texto);
  font-size:13px;outline:none;
}
.etiqueta-nova input:focus{border-color:var(--azul)}
.paleta{display:flex;gap:5px}
.paleta .cor{
  width:22px;height:22px;border-radius:6px;border:2px solid transparent;padding:0;
}
.paleta .cor.escolhida{border-color:var(--texto);box-shadow:0 0 0 2px var(--navy-800) inset}

/* ---------- o checklist ---------- */
.barra-check{height:5px;border-radius:3px;background:var(--navy-600);overflow:hidden;margin-bottom:10px}
.barra-check i{display:block;height:100%;background:var(--verde);transition:width .2s}
.lista-check{display:flex;flex-direction:column;gap:2px}
.item-check{display:flex;align-items:flex-start;gap:9px;padding:5px 2px;font-size:13.5px;line-height:1.45}
.item-check span{flex:1;min-width:0}
.item-check.feito span{opacity:.55;text-decoration:line-through}
.item-check .caixa{
  width:18px;height:18px;border-radius:5px;flex:0 0 18px;margin-top:2px;
  border:1.5px solid var(--linha);background:transparent;
  display:flex;align-items:center;justify-content:center;padding:0;color:var(--sobre-acao);
}
.item-check .caixa:hover{border-color:var(--verde)}
.item-check .caixa.on{background:var(--verde);border-color:var(--verde)}
.item-check .tirar{
  font-size:15px;line-height:1;color:var(--texto-suave);opacity:0;padding:0 3px;
}
.item-check:hover .tirar{opacity:1}
.item-check .tirar:hover{color:var(--vermelho-txt)}
.check-novo{display:flex;gap:8px;margin-top:9px}
.check-novo input{
  flex:1;height:31px;padding:0 11px;border-radius:9px;
  background:var(--navy-700);border:1px solid var(--linha);color:var(--texto);
  font-size:13px;outline:none;
}
.check-novo input:focus{border-color:var(--azul)}

/* ---------- a conversa ---------- */
.conversa{display:flex;flex-direction:column;gap:2px}
.fala{padding:9px 0;border-top:1px solid var(--linha)}
.fala:first-child{border-top:none}
.fala-topo{display:flex;align-items:center;gap:9px;font-size:11.5px;color:var(--texto-suave)}
.fala-topo strong{font-size:13px;color:var(--texto);font-weight:600}
.fala-topo button{margin-left:auto;font-size:15px;line-height:1;color:var(--texto-suave);opacity:0}
.fala:hover .fala-topo button{opacity:1}
.fala-topo button:hover{color:var(--vermelho-txt)}
.fala-texto{font-size:13.5px;line-height:1.55;margin-top:3px;white-space:pre-wrap}
.fala-nova{display:flex;gap:8px;margin-top:12px;align-items:flex-end}
.fala-nova textarea{
  flex:1;padding:9px 11px;border-radius:9px;resize:vertical;
  background:var(--navy-700);border:1px solid var(--linha);color:var(--texto);
  font-family:inherit;font-size:13.5px;line-height:1.5;outline:none;
}
.fala-nova textarea:focus{border-color:var(--azul)}

.botao.perigo,
body.claro .botao.perigo{background:var(--vermelho);color:#FFFFFF;margin-right:auto}
.botao.perigo:hover,
body.claro .botao.perigo:hover{background:#C6282D}

/* ============================================================
   Novo Cliente: o formulário de cadastro
   ============================================================
   Ele é longo porque o que se responde aqui decide o tamanho do onboarding que nasce junto.
   Por isso cada campo tem a linha de dica embaixo: formulário longo sem explicação é
   formulário preenchido no chute. */
.form-cadastro{max-width:720px}
.form-secao{
  background:var(--navy-800);border:1px solid var(--linha);border-radius:var(--raio);
  padding:20px 22px;margin-bottom:14px;box-shadow:var(--sombra);
}
.form-secao-titulo{
  font-size:11.5px;font-weight:800;letter-spacing:1.2px;text-transform:uppercase;
  color:var(--texto-suave);margin-bottom:16px;
}
.campo{margin-bottom:16px}
.campo:last-child{margin-bottom:0}
.campo label{display:block;font-size:13.5px;font-weight:500;margin-bottom:6px}
.campo input,
.campo select,
.campo textarea{
  width:100%;padding:0 13px;height:38px;border-radius:9px;
  background:var(--navy-700);border:1px solid var(--linha);color:var(--texto);
  font-family:inherit;font-size:14px;outline:none;
}
.campo textarea{height:auto;padding:10px 13px;line-height:1.5;resize:vertical}
.campo input:focus,
.campo select:focus,
.campo textarea:focus{border-color:var(--azul)}
.campo input::placeholder,
.campo textarea::placeholder{color:var(--texto-suave)}
.campo-dica{display:block;font-size:12px;line-height:1.45;color:var(--texto-suave);margin-top:6px}
.campo-dica.em-linha{display:inline;margin:0}
.form-2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.form-2 .campo{margin-bottom:16px}

.linha-check{display:flex;align-items:flex-start;gap:10px;padding:7px 0;font-size:14px;cursor:pointer}
.linha-check input{width:17px;height:17px;flex:0 0 17px;margin-top:1px;accent-color:var(--azul);cursor:pointer}
.linha-check span{line-height:1.45}

.form-pe{display:flex;gap:10px;align-items:center;margin-top:18px;flex-wrap:wrap}
.form-pe .botao{height:38px;padding:0 18px;font-size:14px}

@media (max-width:640px){
  .form-2{grid-template-columns:1fr;gap:0}
}

/* ============================================================
   No celular
   ============================================================
   O cabeçalho de módulo é "título à esquerda, ações à direita" numa linha só, e isso não
   cabe em 390 pixels: o botão da direita escorregava para fora da tela. Aqui ele desce
   para a linha de baixo e as ações passam a poder quebrar entre si. */
@media (max-width:720px){
  .cabecalho{flex-direction:column;align-items:stretch;gap:12px}
  .cabecalho .acoes{margin-left:0;flex-wrap:wrap}
  .cabecalho p{white-space:normal}
  .barra-ferramentas{overflow-x:auto;padding-bottom:4px}
  .campo-busca{min-width:150px}
  /* A grade do quadro passa a mostrar a coluna quase inteira, com um pedaço da próxima
     aparecendo: é o que diz que dá para arrastar de lado. */
  .quadro-tarefas{grid-auto-columns:min(84vw,268px)}
  .modal-caixa.larga{width:100%;max-height:92vh}
  .modal-rodape{flex-wrap:wrap}
  .botao.perigo{margin-right:0;order:3;width:100%;justify-content:center}
}

/* ============================================================
   As caixas do sistema: perguntar, confirmar e avisar
   ============================================================
   Elas substituem o prompt(), o confirm() e o alert() do navegador, que apareciam com o
   endereço do servidor no título e com os botões do sistema operacional. Ficam ACIMA de
   qualquer outra caixa do hub, porque quase sempre é de dentro de uma que se pergunta. */
.caixa-sistema{z-index:400}
.caixa-sistema .modal-caixa{width:420px}
.caixa-sistema .campo{margin:4px 0 0}
.caixa-sistema .campo input.erro{border-color:var(--vermelho)}
.caixa-sistema .modal-rodape{margin-top:18px}
/* Numa pergunta, o botão que apaga não vai para a ponta esquerda: aqui ele é a resposta,
   e não uma ação de rodapé. */
.caixa-sistema .botao.perigo{margin-right:0}

/* ============================================================
   O foco do teclado
   ============================================================
   O contorno padrão do navegador é um anel azul do sistema operacional, e ele aparecia em
   cima do verde da marca toda vez que alguém andava pela tela com Tab ou abria uma caixa.
   Aqui ele passa a ser da casa. Continua existindo, e tem de continuar: quem navega por
   teclado precisa enxergar onde está.

   `:focus-visible` e não `:focus`: o anel aparece para quem chegou pelo teclado, e não a
   cada clique de mouse, que é quando ele vira sujeira na tela. */
:where(button, a, input, select, textarea, [tabindex]):focus{outline:none}
:where(button, a, input, select, textarea, [tabindex]):focus-visible{
  outline:2px solid var(--azul);
  outline-offset:2px;
  border-radius:8px;
}
/* Em cima do próprio verde, o anel verde some. Ali ele vira o contorno do texto. */
.botao:not(.vazio):focus-visible,
.item.ativo:focus-visible,
.filtro.ativo:focus-visible,
.chip-gente.marcado:focus-visible{outline-color:var(--sobre-acao)}

/* O campo que aparece no lugar do nome, com dois cliques. Ele herda o tamanho e o peso do
   texto que substituiu, para a linha não pular quando entra e quando sai. */
.editar-no-lugar{
  width:100%;min-width:60px;
  font-family:inherit;font-size:inherit;font-weight:inherit;
  letter-spacing:inherit;text-transform:inherit;color:var(--texto);
  background:var(--navy-900);border:1px solid var(--azul);border-radius:6px;
  padding:1px 6px;outline:none;
}

/* ============================================================
   Administrador: logs, usuários e níveis
   ============================================================ */

/* As barras do resumo dos logs. Elas comparam entre si, e não com um total absoluto: a
   pergunta é "quem mexeu mais", e não "quanto é muito". */
.logs-barras{display:flex;flex-direction:column;gap:8px;margin-top:12px}
.logs-barra{display:grid;grid-template-columns:120px 1fr 44px;align-items:center;gap:10px;font-size:12.5px}
.logs-barra span{color:var(--texto-suave);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.logs-barra i{height:7px;border-radius:4px;background:var(--azul);display:block}
.logs-barra b{text-align:right;font-size:12.5px;font-weight:700}
.logs-barra.verde i{background:var(--verde)}
.logs-barra.vermelho i{background:var(--vermelho)}
.logs-barra.azul i{background:var(--azul)}
.logs-barra.roxo i{background:var(--roxo-txt)}
.logs-barra.amarelo i{background:var(--amarelo)}
.logs-barra.cinza i{background:var(--navy-600)}

.tabela-logs{width:100%;border-collapse:collapse;font-size:13px}
.tabela-logs th{
  text-align:left;padding:11px 14px;font-size:11px;font-weight:700;
  letter-spacing:.8px;text-transform:uppercase;color:var(--texto-suave);
  border-bottom:1px solid var(--linha);position:sticky;top:0;background:var(--navy-800);
}
.tabela-logs td{padding:10px 14px;border-bottom:1px solid var(--linha);vertical-align:middle}
.tabela-logs tr{cursor:pointer}
.tabela-logs tbody tr:hover{background:var(--navy-700)}
.tabela-logs tr.falhou td:first-child{box-shadow:inset 3px 0 0 var(--vermelho)}
.tabela-logs td:first-child{color:var(--texto-suave);white-space:nowrap}

.logs-paginas{display:flex;align-items:center;gap:10px;margin-top:12px;font-size:12.5px;color:var(--texto-suave)}
.logs-paginas span{margin-right:auto}

/* A lista de gente. Uma linha por pessoa, e nela cabe tudo o que se pergunta: quem é, o que
   ela carrega e quantas telas isso abre. */
.lista-pessoas{display:flex;flex-direction:column;gap:2px;margin-top:14px}
.pessoa-linha{
  display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:10px;
  border:1px solid transparent;
}
.pessoa-linha:hover{background:var(--navy-700);border-color:var(--linha)}
.pessoa-linha.fora{opacity:.5}
.avatar-mini{
  width:32px;height:32px;flex:0 0 32px;border-radius:50%;
  background:var(--azul);color:var(--sobre-acao);
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;
}
.pessoa-nome{flex:1;min-width:0}
.pessoa-nome strong{font-size:14px;font-weight:600}
.pessoa-nome div{font-size:12px;color:var(--texto-suave);margin-top:2px}
.pessoa-nome code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11.5px;
  background:var(--navy-600);border-radius:5px;padding:1px 5px;
}
.pessoa-modulos{font-size:12px;color:var(--texto-suave);white-space:nowrap}
.pessoa-botoes{display:flex;gap:6px;flex:0 0 auto}

/* Os cargos. Cada um é um cartão com os módulos em pastilhas: clicar numa marca e desmarca,
   e a marcação vale na hora para todo mundo que carrega o cargo. */
.lista-cargos{display:flex;flex-direction:column;gap:12px;margin-top:14px}
.cargo-cartao{
  background:var(--navy-700);border:1px solid var(--linha);border-radius:var(--raio);padding:14px 16px;
}
.cargo-topo{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.cargo-alcance{font-size:12px;color:var(--texto-suave)}
.cargo-gente{font-size:12px;color:var(--texto-suave);margin-left:auto}
.cargo-modulos{display:flex;gap:7px;flex-wrap:wrap;margin-top:10px}
.chip-modulo{
  display:inline-flex;align-items:center;gap:7px;padding:5px 12px;
  border-radius:20px;border:1px dashed var(--linha);background:transparent;
  font-size:12.5px;font-weight:600;color:var(--texto-suave);
}
.chip-modulo:hover:not([disabled]){border-color:var(--azul);border-style:solid;color:var(--texto)}
/* Marcado é contorno verde e fundo suave, e não um bloco de verde sólido: cinco módulos
   marcados num cargo virariam cinco tijolos da cor da marca lado a lado, e o verde deixaria
   de ser o detalhe que ele é no manual. */
.chip-modulo.marcado{
  background:var(--fundo-azul);border-color:var(--azul);border-style:solid;color:var(--texto);
}
.chip-modulo.marcado .icone{color:var(--azul-txt)}
.chip-modulo[disabled]{cursor:default;opacity:.6}
.chip-modulo .icone{display:flex}
.cargo-botoes{display:flex;gap:7px;margin-top:12px}

@media (max-width:720px){
  .pessoa-linha{flex-wrap:wrap}
  .pessoa-modulos{width:100%;order:5}
  .pessoa-botoes{width:100%;order:6}
  .logs-barra{grid-template-columns:90px 1fr 38px}
  .tabela-logs td:nth-child(4),
  .tabela-logs th:nth-child(4){display:none}
}

/* A permissão criada na mão. O tracejado que não vira contorno cheio ao marcar é o que
   lembra, de longe, que ela ainda não tranca nada: ela é uma porta sem tela do outro lado. */
.chip-modulo.criada{border-style:dotted}
.chip-modulo.criada.marcado{border-style:dashed;background:var(--fundo-amarelo);border-color:var(--amarelo)}
.chip-modulo.criada.marcado .icone{color:var(--amarelo-txt)}

.permissoes-criadas{margin-top:20px;padding-top:16px;border-top:1px solid var(--linha)}
.permissao-linha{display:flex;align-items:center;gap:12px;padding:7px 0;flex-wrap:wrap}
.permissao-linha .chip-modulo{cursor:default}

/* ---------- O respiro do topo de uma tela ----------
   Barra de subabas que abre a tela, como a do Administrador. Dentro de uma barra de
   ferramentas ela já herda o espaçamento da barra; solta no topo do conteúdo, ela nascia
   colada no subtítulo em cima e no cartão embaixo. */
#tela > .subabas{margin:6px 0 18px}

/* Dois cartões soltos, um atrás do outro no corpo da tela, nasciam encostados: a grade dá
   espaço entre os filhos dela, e cartão solto não está numa grade. */
#tela > .cartao + .cartao,
#tela > .cartao + .grade,
#tela > .grade + .cartao{margin-top:14px}

/* O botão que revoga acesso. Ele fica em vermelho para não ser clicado no lugar do vizinho:
   desativar é pausa, excluir não volta atrás. */
.filtro.perigo{color:var(--vermelho-txt);border-color:var(--linha)}
.filtro.perigo:hover{background:var(--fundo-vermelho);border-color:var(--vermelho)}

/* O valor que a caixa entrega para a pessoa ler e copiar: uma senha nova, um código. Fonte de
   largura fixa e tamanho grande, porque é ela que separa o l do 1 e o O do 0. */
.caixa-destaque{
  background:var(--navy-700);border:1px solid var(--linha);border-radius:10px;
  padding:14px 16px;margin:2px 0 14px;text-align:center;
}
.caixa-destaque code{
  font-family:ui-monospace,SFMono-Regular,Menlo,"Courier New",monospace;
  font-size:20px;font-weight:600;letter-spacing:2px;color:var(--texto);
  user-select:all;
}