/* Hub Agência EvoluWill — estilo base */

:root{
  --navy-900:#0A142E;
  --navy-800:#101F42;
  --navy-700:#16264F;
  --navy-600:#1D3160;
  --linha:#24365F;
  --azul:#2A4DD0;
  --azul-claro:#4161D4;
  --azul-suave:#8FA5EE;
  --branco:#FFFFFF;
  --texto:#E7ECF7;
  --texto-suave:#94A3C4;
  --verde:#22C55E;
  --amarelo:#F5B21B;
  --vermelho:#EF4444;
  --verde-txt:#4ADE80;
  --vermelho-txt:#F87171;
  --amarelo-txt:#F5B21B;
  --roxo-txt:#C4B5FD;
  --azulads-txt:#93C5FD;
  --laranja-txt:#FDBA74;
  --azul-txt:#A7B6EA;
  --fundo-verde:rgba(34,197,94,.16);
  --fundo-vermelho:rgba(239,68,68,.16);
  --fundo-amarelo:rgba(245,178,27,.16);
  --fundo-azul:rgba(65,97,212,.20);
  --fundo-roxo:rgba(139,92,246,.18);
  --fundo-azulads:rgba(59,130,246,.18);
  --sobreposicao:rgba(10,20,46,.86);
  --sombra:none;
  --raio:12px;
  --largura-menu:264px;
  --altura-topo:64px;
  --fonte:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* Quadro de tarefas */
.quadro-tarefas{display:flex;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:#0A142E}
.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:flex;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(65,97,212,.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:#F3F6FC;   /* fundo da página */
  --navy-800:#FFFFFF;   /* cartões, topo e menu */
  --navy-700:#F0F4FC;   /* superfície de apoio */
  --navy-600:#E3EAF7;   /* preenchimentos */
  --linha:#DBE3F2;
  --texto:#152341;
  --texto-suave:#5F6E8E;
  --branco:#152341;
  --verde-txt:#15803D;
  --vermelho-txt:#DC2626;
  --amarelo-txt:#B45309;
  --roxo-txt:#6D28D9;
  --azulads-txt:#1D4ED8;
  --laranja-txt:#C2410C;
  --azul-txt:#2A4DD0;
  --fundo-verde:rgba(34,197,94,.14);
  --fundo-vermelho:rgba(239,68,68,.12);
  --fundo-amarelo:rgba(245,178,27,.18);
  --fundo-azul:rgba(42,77,208,.10);
  --fundo-roxo:rgba(139,92,246,.14);
  --fundo-azulads:rgba(59,130,246,.14);
  --sobreposicao:rgba(255,255,255,.92);
  --sombra:0 1px 2px rgba(21,35,65,.05);
}
body.claro .cartao,
body.claro .cartao-cliente,
body.claro .ads-cartao,
body.claro .col-onb,
body.claro .col-tarefa,
body.claro .col-crm,
body.claro .sw-peca,
body.claro .item-oraculo{box-shadow:var(--sombra)}
body.claro .topo{box-shadow:0 1px 3px rgba(21,35,65,.06)}
body.claro .item.ativo,
body.claro .botao:not(.vazio),
body.claro .filtro.ativo,
body.claro .subabas button.ativo{color:#fff}
body.claro .botao.vazio{color:var(--texto)}
body.claro .grafico .col .haste.clara{background:#C9D5EE}
body.claro .card-tarefa,
body.claro .card-onb,
body.claro .card-lead,
body.claro .ficha{background:#F7F9FE}
body.claro .mini-avatar{border-color:#F7F9FE}
body.claro .sw-capa{background:linear-gradient(135deg,#E3EAF7,#F0F4FC)}
body.claro .cc-chave.desligado i{background:#C9D5EE}
body.claro .avatar,
body.claro .item.ativo .selo{color:#fff}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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