/* O VISUAL NOVO — Contas, Gestão financeira, Administração, Conexões, Console, Perfil, Manual e FAQ — agente 6.
 * Tudo atrás de html[data-visual="novo"]; a régua (tokens --vn-*) mora no visual-novo.css.
 * Ver docs/design/PLANO-DOS-AGENTES-VISUAL.md e docs/design/propostas/LEIA-ME.md. */

/* Tokens que a régua não tem (prefixo --vn-ge-): os tons de TEXTO sobre os fundos suaves. */
html[data-visual="novo"] {
  --vn-ge-verde-t: #06647a;
  --vn-ge-amarelo-t: #b07f00;
  --vn-ge-rosa-t: #b01a59;
}

/* ============================================================ 1. Abas = controle segmentado */
html[data-visual="novo"] .cs-abas,
html[data-visual="novo"] .fin-abas ~ .cs-abas.ff-abas {
  display: flex;
  flex-wrap: nowrap;
  gap: 2px;
  width: fit-content;
  max-width: 100%;
  margin: 0 0 16px;
  padding: 4px;
  overflow-x: auto;
  scrollbar-width: none;
  border: 0;
  border-radius: 12px;
  background: var(--vn-suave);
}
html[data-visual="novo"] .cs-abas::-webkit-scrollbar { display: none; }
html[data-visual="novo"] .cs-aba,
html[data-visual="novo"] .fin-abas ~ .cs-abas.ff-abas .cs-aba {
  flex: none;
  min-height: 32px;
  padding: 0 14px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--vn-cinza);
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
}
html[data-visual="novo"] .cs-aba:hover { color: var(--vn-tinta); }
html[data-visual="novo"] .cs-aba.cs-ativa,
html[data-visual="novo"] .cs-aba[aria-current="page"],
html[data-visual="novo"] .fin-abas ~ .cs-abas.ff-abas .cs-aba.cs-ativa {
  background: var(--vn-placa);
  color: var(--vn-tinta);
  font-weight: 600;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .08);
}
html[data-visual="novo"] .cs-aba-selo { background: var(--vn-rosa-s); color: var(--vn-ge-rosa-t); font-weight: 600; }

/* ============================================================ 2. Cartões de número em cor cheia */
/* Pela classe: verde = verde, âmbar = laranja, vermelho = vermelho, roxo = azul, cinza = roxo.
 * O Console troca a ordem (Pagando azul, Em teste laranja, Congeladas rosa, Por mês verde). */
html[data-visual="novo"] .cs-cor-verde { --vn-cartao: var(--vn-verde); --cs-cor: var(--vn-verde); --cs-claro: var(--vn-verde-s); }
html[data-visual="novo"] .cs-cor-ambar { --vn-cartao: var(--vn-laranja); --cs-cor: var(--vn-laranja); --cs-claro: var(--vn-laranja-s); }
html[data-visual="novo"] .cs-cor-vermelho { --vn-cartao: var(--vn-vermelho); --cs-cor: var(--vn-vermelho); --cs-claro: var(--vn-vermelho-s); }
html[data-visual="novo"] .cs-cor-roxo { --vn-cartao: var(--vn-azul); --cs-cor: var(--vn-azul); --cs-claro: var(--vn-azul-s); }
html[data-visual="novo"] .cs-cor-cinza { --vn-cartao: var(--vn-roxo); --cs-cor: var(--vn-roxo); --cs-claro: var(--vn-roxo-s); }
html[data-visual="novo"] .cs-abas:has([data-aba-da-mesa]) ~ .cs-cartoes .cs-cor-verde { --vn-cartao: var(--vn-azul); }
html[data-visual="novo"] .cs-abas:has([data-aba-da-mesa]) ~ .cs-cartoes .cs-cor-vermelho { --vn-cartao: var(--vn-rosa); }
html[data-visual="novo"] .cs-abas:has([data-aba-da-mesa]) ~ .cs-cartoes .cs-cor-roxo { --vn-cartao: var(--vn-verde); }

html[data-visual="novo"] .cs-cartoes { gap: 12px; margin-bottom: 18px; }
html[data-visual="novo"] .cs-cartao[class*="cs-cor-"] {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 112px;
  padding: 18px 96px 18px 20px;
  background: var(--vn-cartao);
  border: 0;
  border-radius: var(--vn-raio-cartao);
  box-shadow: none;
  color: #fff;
  overflow: hidden;
}
html[data-visual="novo"] .cs-cartao[class*="cs-cor-"]::before { display: none; }
html[data-visual="novo"] button.cs-cartao[class*="cs-cor-"]:hover,
html[data-visual="novo"] button.cs-cartao[class*="cs-cor-"]:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, .12);
  border-color: transparent;
}
html[data-visual="novo"] .cs-cartao[class*="cs-cor-"] strong {
  order: 1;
  margin: 0;
  font-size: 34px;
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1;
  color: #fff;
}
html[data-visual="novo"] .cs-cartao[class*="cs-cor-"] .cs-cartao-cabeca {
  order: 2;
  gap: 0;
  margin-top: 6px;
  color: rgba(255, 255, 255, .95);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
}
html[data-visual="novo"] .cs-cartao[class*="cs-cor-"] small {
  order: 3;
  margin-top: 8px;
  color: rgba(255, 255, 255, .85);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}
html[data-visual="novo"] .cs-cartao[class*="cs-cor-"] small b { color: #fff; font-weight: 700; }
html[data-visual="novo"] .cs-cartao[class*="cs-cor-"] .cs-selo {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 60px;
  height: 60px;
  flex: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, .22);
  color: #fff;
}
html[data-visual="novo"] .cs-cartao[class*="cs-cor-"] .cs-selo svg { width: 26px; height: 26px; }
html[data-visual="novo"] .cs-cartao.cs-numero-texto strong { font-size: 24px; }

/* Cartões secundários BRANCOS com número colorido: o saldo de cada conta (Fluxo de caixa). */
html[data-visual="novo"] .fx-painel:has(.fx-contas) { background: transparent; box-shadow: none; }
html[data-visual="novo"] .fx-painel:has(.fx-contas) .vg-painel-cabeca { padding-left: 2px; }
html[data-visual="novo"] .fx-contas { gap: 12px; }
html[data-visual="novo"] .fx-conta {
  padding: 14px 16px;
  border: 0;
  border-radius: var(--vn-raio-cartao);
  background: var(--vn-placa);
  box-shadow: var(--vn-sombra);
}
html[data-visual="novo"] .fx-conta b { color: var(--vn-cinza); font-size: 13px; font-weight: 500; }
html[data-visual="novo"] .fx-conta strong { font-size: 20px; font-weight: 600; color: var(--vn-azul); }
html[data-visual="novo"] .fx-conta:nth-child(5n+2) strong { color: var(--vn-rosa); }
html[data-visual="novo"] .fx-conta:nth-child(5n+3) strong { color: var(--vn-laranja); }
html[data-visual="novo"] .fx-conta:nth-child(5n+4) strong { color: var(--vn-ge-verde-t); }
html[data-visual="novo"] .fx-conta:nth-child(5n+5) strong { color: var(--vn-roxo); }

/* WhatsApp: os 3 atalhos de baixo (A fila, Lista de teste, Regras do ritmo) = brancos, número colorido, seta. */
html[data-visual="novo"] .nw-atalhos .nw-atalho {
  --cs-cor: var(--vn-azul);
  --cs-claro: var(--vn-azul-s);
  border: 0;
  background: var(--vn-placa);
  color: var(--vn-tinta);
  box-shadow: var(--vn-sombra);
  padding: 16px 18px;
  min-height: 0;
}
html[data-visual="novo"] .nw-atalhos .nw-atalho:nth-child(2) { --cs-cor: var(--vn-teal); --cs-claro: var(--vn-teal-s); }
html[data-visual="novo"] .nw-atalhos .nw-atalho:nth-child(3) { --cs-cor: var(--vn-laranja); --cs-claro: var(--vn-laranja-s); }
html[data-visual="novo"] .nw-atalhos .nw-atalho.cs-cor-vermelho { --cs-cor: var(--vn-vermelho); --cs-claro: var(--vn-vermelho-s); }
html[data-visual="novo"] .nw-atalhos .nw-atalho:hover { box-shadow: 0 8px 22px rgba(0, 0, 0, .09); transform: translateY(-1px); }
html[data-visual="novo"] .nw-atalhos .nw-atalho .cs-cartao-cabeca { color: var(--vn-tinta); font-size: 14px; font-weight: 600; }
html[data-visual="novo"] .nw-atalhos .nw-atalho .cs-selo { border-radius: 50%; width: 36px; height: 36px; }
html[data-visual="novo"] .nw-atalhos .nw-atalho strong { color: var(--cs-cor); font-size: 20px; font-weight: 600; }
html[data-visual="novo"] .nw-atalhos .nw-atalho small { color: var(--vn-cinza); font-size: 12px; }
html[data-visual="novo"] .nw-atalho-seta { color: var(--cs-cor); font-size: 20px; }
html[data-visual="novo"] .nw-atalhos .nw-atalho:focus-visible { outline-color: var(--cs-cor); }

/* ============================================================ 3. Painéis brancos */
html[data-visual="novo"] .gg-ambiente > .bloco.gg-peca,
html[data-visual="novo"] .cfg-miolo .bloco.gg-peca,
html[data-visual="novo"] .ff-lista,
html[data-visual="novo"] .ff-aba,
html[data-visual="novo"] .perfil-topo,
html[data-visual="novo"] .perfil-cartao,
html[data-visual="novo"] .nw-cartao,
html[data-visual="novo"] .ig-servico,
html[data-visual="novo"] .manual-indice,
html[data-visual="novo"] .manual-hero,
html[data-visual="novo"] .manual-leitura .manual-artigo,
html[data-visual="novo"] .gg-ambiente > .vazio {
  background: var(--vn-placa);
  backdrop-filter: none;
  border: 0;
  border-radius: var(--vn-raio-painel);
  box-shadow: var(--vn-sombra);
}
html[data-visual="novo"] .gg-ambiente > .bloco.gg-peca { padding: 18px 20px; }
html[data-visual="novo"] .gg-cabeca { margin-bottom: 12px; gap: 12px; }
html[data-visual="novo"] .gg-cabeca h3,
html[data-visual="novo"] .ff-lista header h3,
html[data-visual="novo"] .ff-aba-titulo h3 { font-size: 15px; font-weight: 600; letter-spacing: -.01em; color: var(--vn-tinta); }
html[data-visual="novo"] .gg-cabeca p,
html[data-visual="novo"] .ff-lista header p { font-size: 13px; color: var(--vn-cinza); }
html[data-visual="novo"] .gg-cabeca .gg-sobre { display: none; }
/* o ícone do título: círculo suave colorido */
html[data-visual="novo"] .gg-cabeca > .selo:first-child {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--vn-azul-s);
  color: var(--vn-azul);
}
html[data-visual="novo"] .gg-cabeca > .selo.agua:first-child { background: var(--vn-verde-s); color: var(--vn-ge-verde-t); }
html[data-visual="novo"] .cfg-tom-verde .gg-cabeca > .selo:first-child { background: var(--vn-verde-s); color: var(--vn-ge-verde-t); }
html[data-visual="novo"] .cfg-tom-roxo .gg-cabeca > .selo:first-child { background: var(--vn-roxo-s); color: var(--vn-roxo); }
html[data-visual="novo"] .cfg-tom-azul .gg-cabeca > .selo:first-child { background: var(--vn-azul-s); color: var(--vn-azul); }
html[data-visual="novo"] .cfg-tom-ambar .gg-cabeca > .selo:first-child { background: var(--vn-laranja-s); color: var(--vn-laranja); }
html[data-visual="novo"] .cfg-tom-rosa .gg-cabeca > .selo:first-child { background: var(--vn-rosa-s); color: var(--vn-rosa); }
html[data-visual="novo"] .cfg-tom-cinza .gg-cabeca > .selo:first-child { background: var(--vn-suave); color: var(--vn-cinza); }
html[data-visual="novo"] .ig-bloco .gg-cabeca > .selo:first-child { background: var(--vn-teal-s); color: var(--vn-teal); }
html[data-visual="novo"] .ff-lista header { padding: 16px 20px 6px; }
html[data-visual="novo"] .ff-aba-titulo { padding-top: 6px; }
html[data-visual="novo"] .fx-miolo { padding: 4px 20px 16px; }
html[data-visual="novo"] .gg-ambiente > .bloco + .bloco,
html[data-visual="novo"] .gg-ambiente > .eq-cartao + .eq-cartao { margin-top: 14px; }

/* barras de filtro */
html[data-visual="novo"] .fx-barra-no-cartao {
  border: 0;
  border-radius: 12px;
  background: var(--vn-placa);
  box-shadow: var(--vn-sombra);
}
html[data-visual="novo"] .filtros-das-contas .cs-busca,
html[data-visual="novo"] .eq-filtros .cs-busca {
  border: 1px solid var(--vn-fio);
  border-radius: 999px;
  background: var(--vn-placa);
}
html[data-visual="novo"] .filtros-das-contas .cs-busca:focus-within { border-color: var(--sag-green); }
html[data-visual="novo"] .filtros-das-contas select,
html[data-visual="novo"] .eq-filtros select {
  border: 1px solid var(--vn-fio);
  border-radius: 9px;
  background-color: var(--vn-placa);
}
html[data-visual="novo"] .cs-mostrando { color: var(--vn-cinza); font-weight: 500; }
html[data-visual="novo"] .fx-mes { border-radius: 9px; }

/* tabelas: cabeçalho miúdo cinza, fio fino entre as linhas */
html[data-visual="novo"] .gg-ambiente .linha { border-top: 1px solid var(--vn-fio); }
html[data-visual="novo"] .gg-ambiente .linha:first-child { border-top: 0; }
html[data-visual="novo"] .gg-ambiente .linha.cabecalho {
  border-bottom: 1px solid var(--vn-fio);
  color: var(--vn-cinza);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}
html[data-visual="novo"] .gg-ambiente .tabela .linha:not(.cabecalho):hover { background: var(--vn-folha); }
html[data-visual="novo"] .fx-total { border-top: 1px solid var(--vn-fio); font-weight: 600; }
html[data-visual="novo"] .fx-sobe { color: var(--vn-ge-verde-t); font-weight: 600; }
html[data-visual="novo"] .fx-desce { color: var(--vn-vermelho); font-weight: 600; }
html[data-visual="novo"] .gg-ambiente .sobe { color: var(--vn-ge-verde-t); font-weight: 600; }
html[data-visual="novo"] .gg-ambiente .desce { color: var(--vn-vermelho); font-weight: 600; }
html[data-visual="novo"] .eq-seta { color: var(--vn-cinza2); }
html[data-visual="novo"] .fx-link,
html[data-visual="novo"] .ff-link { color: var(--vn-azul); font-weight: 600; }
html[data-visual="novo"] .fx-clipe { border-color: var(--vn-fio); color: var(--vn-ge-verde-t); font-weight: 600; }

/* selos em pílula */
html[data-visual="novo"] .gg-ambiente .selo:not(.gg-cabeca > .selo),
html[data-visual="novo"] .manual-artigo .selo {
  padding: 3px 10px;
  border: 0;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  background: var(--vn-suave);
  color: var(--vn-cinza);
}
html[data-visual="novo"] .gg-ambiente .selo.ok { background: var(--vn-verde-s); color: var(--vn-ge-verde-t); }
html[data-visual="novo"] .gg-ambiente .selo.aviso { background: var(--vn-amarelo-s); color: var(--vn-ge-amarelo-t); }
html[data-visual="novo"] .gg-ambiente .selo.ruim { background: var(--vn-vermelho-s); color: var(--vn-vermelho); }
html[data-visual="novo"] .gg-ambiente .selo.neutro { background: var(--vn-suave); color: var(--vn-cinza); }
html[data-visual="novo"] .cs-selo-situacao,
html[data-visual="novo"] .ig-selo,
html[data-visual="novo"] .fx-etiquetas em,
html[data-visual="novo"] .ff-chip,
html[data-visual="novo"] .perfil-selo { font-size: 12px; font-weight: 600; }
html[data-visual="novo"] .cs-selo-ativa { --cs-selo-fundo: var(--vn-verde-s); --cs-selo-texto: var(--vn-ge-verde-t); --cs-selo-bolinha: var(--vn-verde); }
html[data-visual="novo"] .cs-selo-teste { --cs-selo-fundo: var(--vn-amarelo-s); --cs-selo-texto: var(--vn-ge-amarelo-t); --cs-selo-bolinha: var(--vn-amarelo); }
html[data-visual="novo"] .cs-selo-congelada { --cs-selo-fundo: var(--vn-vermelho-s); --cs-selo-texto: var(--vn-vermelho); --cs-selo-bolinha: var(--vn-vermelho); }
html[data-visual="novo"] .cs-selo-neutro { --cs-selo-fundo: var(--vn-suave); --cs-selo-texto: var(--vn-cinza); --cs-selo-bolinha: var(--vn-cinza2); }
html[data-visual="novo"] .ig-selo-verde { background: var(--vn-verde-s); color: var(--vn-ge-verde-t); }
html[data-visual="novo"] .ig-selo-verde i { background: var(--vn-verde); }
html[data-visual="novo"] .ig-selo-ambar { background: var(--vn-amarelo-s); color: var(--vn-ge-amarelo-t); }
html[data-visual="novo"] .ig-selo-ambar i { background: var(--vn-amarelo); }
html[data-visual="novo"] .ig-selo-vermelho { background: var(--vn-vermelho-s); color: var(--vn-vermelho); }
html[data-visual="novo"] .ig-selo-vermelho i { background: var(--vn-vermelho); }
html[data-visual="novo"] .ig-selo-cinza { background: var(--vn-suave); color: var(--vn-cinza); }
html[data-visual="novo"] .ig-selo-cinza i { background: var(--vn-cinza2); }

/* avisos em faixa */
html[data-visual="novo"] .gg-ambiente .recado { border-radius: 12px; border-width: 0; }
html[data-visual="novo"] .gg-ambiente .recado.ok { background: var(--vn-verde-s); color: var(--vn-ge-verde-t); }
html[data-visual="novo"] .gg-ambiente .recado.aviso { background: var(--vn-amarelo-s); color: var(--vn-ge-amarelo-t); }
html[data-visual="novo"] .gg-ambiente .recado.ruim { background: var(--vn-vermelho-s); color: var(--vn-vermelho); }
html[data-visual="novo"] .cs-faixa-da-trava { background: var(--vn-amarelo-s); border-top: 1px solid var(--vn-fio); }

/* ============================================================ 4. Botões: brancos pequenos, um verde por tela */
html[data-visual="novo"] :is(.cs-acoes-da-linha, .cs-menu-mais, .ig-servico, .nw-topo, .nw-cartao, .perfil-cartao, .perfil-topo,
  .eq-cartao, .cfg-miolo, .ff-trava, .fx-painel, .ff-lista, .ff-aba, .ff-painel, .ff-vazio-do-acerto, .nw-gaveta, .manual-ir,
  .manual-setas, .falar-com-a-gente, .vazio, .cs-pede-acao, .ig-bloco, .gg-ambiente > .bloco.gg-peca) .btn {
  min-height: 32px;
  height: 32px;
  padding: 0 12px;
  border: 0;
  border-radius: 9px;
  background: var(--vn-placa);
  color: var(--vn-tinta);
  font-size: 13px;
  font-weight: 600;
  box-shadow: 0 0 0 1px var(--vn-fio), 0 1px 2px rgba(0, 0, 0, .04);
}
html[data-visual="novo"] :is(.cs-acoes-da-linha, .cs-menu-mais, .ig-servico, .nw-topo, .nw-cartao, .perfil-cartao, .perfil-topo,
  .eq-cartao, .cfg-miolo, .ff-trava, .fx-painel, .ff-lista, .ff-aba, .ff-painel, .ff-vazio-do-acerto, .nw-gaveta, .manual-ir,
  .manual-setas, .falar-com-a-gente, .vazio, .cs-pede-acao, .ig-bloco, .gg-ambiente > .bloco.gg-peca) .btn:hover {
  background: var(--vn-folha);
}
html[data-visual="novo"] :is(.nw-topo, .nw-cartao, .perfil-topo, .eq-cartao, .cfg-miolo, .ff-trava, .ff-vazio-do-acerto,
  .nw-gaveta, .manual-ir, .falar-com-a-gente, .vazio, .ig-bloco, .gg-ambiente > .bloco.gg-peca) .btn.principal {
  background: var(--sag-green);
  color: #fff;
  box-shadow: 0 2px 8px rgba(4, 122, 142, .35);
}
html[data-visual="novo"] .ig-servico > .btn.principal {
  background: var(--vn-placa);
  color: var(--vn-tinta);
  box-shadow: 0 0 0 1px var(--vn-fio), 0 1px 2px rgba(0, 0, 0, .04);
}
html[data-visual="novo"] :is(.nw-topo, .nw-gaveta, .eq-cartao, .ff-trava, .cfg-miolo, .perfil-cartao, .cs-acoes-da-linha) .btn.perigo {
  background: var(--vn-placa);
  color: var(--vn-vermelho);
  box-shadow: 0 0 0 1px var(--vn-fio), 0 1px 2px rgba(0, 0, 0, .04);
}
html[data-visual="novo"] .cfg-miolo .btn.btn-sutil { background: transparent; box-shadow: none; color: var(--vn-cinza); }
html[data-visual="novo"] .cfg-miolo .btn.btn-sutil.perigo { color: var(--vn-vermelho); }
html[data-visual="novo"] .cs-mais { min-width: 32px; padding: 0 8px; letter-spacing: 0; }
html[data-visual="novo"] .cs-menu-lista {
  border: 0;
  border-radius: 12px;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .12);
}
html[data-visual="novo"] .cs-menu-lista a:hover,
html[data-visual="novo"] .cs-menu-lista button:hover { background: var(--vn-suave); }
html[data-visual="novo"] .cs-menu-lista .cs-perigo { color: var(--vn-vermelho); }
html[data-visual="novo"] .cs-menu-lista .cs-perigo:hover { background: var(--vn-vermelho-s); }
html[data-visual="novo"] .ff-depositar { border-radius: 9px; background: var(--sag-green); }

/* ============================================================ 5. Estado vazio: painel centrado, ícone em círculo suave */
html[data-visual="novo"] .gg-ambiente > .vazio,
html[data-visual="novo"] .gg-ambiente > .bloco .vazio:only-child {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 56px 24px;
}
html[data-visual="novo"] .gg-ambiente > .vazio { min-height: 280px; justify-content: center; }
html[data-visual="novo"] .vazio .simbolo {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  margin: 0 auto 4px;
  border-radius: 50%;
  background: var(--vn-azul-s);
  color: var(--vn-azul);
  font-size: 20px;
  opacity: 1;
}
html[data-visual="novo"] .vazio .simbolo svg { width: 24px; height: 24px; }
html[data-visual="novo"] .vazio b { font-size: 15px; font-weight: 600; color: var(--vn-tinta); }
html[data-visual="novo"] .vazio p { font-size: 13px; color: var(--vn-cinza); max-width: 460px; margin-left: auto; margin-right: auto; }
html[data-visual="novo"] .ig-bloco .vazio .simbolo { color: var(--vn-teal); background: var(--vn-teal-s); }

/* ============================================================ 6. Equipe, Contas */
html[data-visual="novo"] .eq-filtros,
html[data-visual="novo"] .filtros-das-contas { align-items: center; margin-bottom: 14px; }
html[data-visual="novo"] .eq-cartao .gg-cabeca { flex-wrap: wrap; }
html[data-visual="novo"] .eq-cartao .gg-cabeca .cresce { flex: 1 1 200px; min-width: 0; }
html[data-visual="novo"] .eq-cartao .gg-cabeca h3 { overflow-wrap: normal; word-break: normal; }
html[data-visual="novo"] .ff-trava { border-top: 1px solid var(--vn-fio); }
html[data-visual="novo"] .ff-nota-interna { color: var(--vn-cinza); }

/* ============================================================ 7. Integrações */
html[data-visual="novo"] .ig-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
html[data-visual="novo"] .ig-grade > .ig-servico:last-child:nth-child(odd) { grid-column: 1 / -1; }
@media (min-width: 1280px) {
  html[data-visual="novo"] .ig-grade { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  html[data-visual="novo"] .ig-grade > .ig-servico:last-child:nth-child(odd) { grid-column: auto; }
}
html[data-visual="novo"] .ig-servico { padding: 18px; gap: 12px; }
html[data-visual="novo"] .ig-icone { width: 40px; height: 40px; border-radius: 12px; background: var(--vn-teal-s); color: var(--vn-teal); }
html[data-visual="novo"] .ig-servico:nth-child(4n+2) .ig-icone { background: var(--vn-rosa-s); color: var(--vn-rosa); }
html[data-visual="novo"] .ig-servico:nth-child(4n+3) .ig-icone { background: var(--vn-laranja-s); color: var(--vn-laranja); }
html[data-visual="novo"] .ig-servico:nth-child(4n+4) .ig-icone { background: var(--vn-azul-s); color: var(--vn-azul); }
html[data-visual="novo"] .ig-servico-nome strong { font-size: 14.5px; font-weight: 600; color: var(--vn-tinta); }
html[data-visual="novo"] .ig-maos { grid-template-columns: 1fr; gap: 8px; }
html[data-visual="novo"] .ig-rotulo { color: var(--vn-cinza2); font-weight: 600; }
html[data-visual="novo"] .ig-lista li,
html[data-visual="novo"] .ig-endereco code { color: var(--vn-tinta); }
html[data-visual="novo"] .ig-nada { color: var(--vn-cinza2); }

/* ============================================================ 8. WhatsApp (números) */
html[data-visual="novo"] .nw-tela { gap: 16px; }
html[data-visual="novo"] .nw-topo h3 { font-size: 15px; font-weight: 600; }
html[data-visual="novo"] .nw-topo p { color: var(--vn-cinza); font-size: 13px; }
html[data-visual="novo"] .nw-topo .acoes { gap: 8px; align-items: center; }
html[data-visual="novo"] .nw-resumo { gap: 12px; }
html[data-visual="novo"] .nw-resumo .nw-resumo-cartao { padding: 18px 96px 18px 20px; min-height: 112px; }
html[data-visual="novo"] .nw-resumo .cs-cartao strong { font-size: 34px; margin-top: 0; }
/* Cor dos tres cartoes da fila por POSICAO, nao pela cor de situacao (cs-cor-*, que trocava para verde/roxo
 * conforme o numero): Esperando azul, Sairam hoje laranja, Falharam vermelho (mesmo com 0). */
html[data-visual="novo"] .nw-resumo > .nw-resumo-cartao:nth-child(1) { --vn-cartao: var(--vn-azul); }
html[data-visual="novo"] .nw-resumo > .nw-resumo-cartao:nth-child(2) { --vn-cartao: var(--vn-laranja); }
html[data-visual="novo"] .nw-resumo > .nw-resumo-cartao:nth-child(3) { --vn-cartao: var(--vn-vermelho); }
html[data-visual="novo"] .nw-resumo-linha b { color: #fff; font-weight: 700; }
html[data-visual="novo"] .nw-cartao { gap: 12px; padding: 18px; }
html[data-visual="novo"] .nw-cartao.nw-sit-pausada,
html[data-visual="novo"] .nw-cartao.nw-sit-banida { box-shadow: 0 0 0 1.5px var(--vn-vermelho), var(--vn-sombra); }
html[data-visual="novo"] .nw-cartao-icone { border-radius: 50%; background: var(--vn-verde-s); color: var(--vn-ge-verde-t); }
html[data-visual="novo"] .nw-nome { font-size: 14.5px; font-weight: 600; }
html[data-visual="novo"] .nw-grupo-titulo { font-size: 15px; font-weight: 600; }
html[data-visual="novo"] .nw-grupo-icone { color: var(--vn-ge-verde-t); }
html[data-visual="novo"] .nw-trocar { color: var(--vn-azul); font-weight: 600; }
html[data-visual="novo"] .nw-segmentos { border-radius: 9px; background: var(--vn-suave); padding: 2px; border: 0; }
html[data-visual="novo"] .nw-segmentos .nw-segmento { border: 0; border-radius: 9px; background: transparent; color: var(--vn-cinza); font-weight: 500; }
html[data-visual="novo"] .nw-segmentos .nw-segmento.ligado { background: var(--vn-placa); color: var(--vn-tinta); font-weight: 600; box-shadow: 0 1px 3px rgba(0, 0, 0, .08); }
html[data-visual="novo"] .rt-barra { height: 6px; background: var(--vn-suave); }
html[data-visual="novo"] .rt-ok { --rt-cor: var(--vn-verde); }
html[data-visual="novo"] .rt-aviso { --rt-cor: var(--vn-laranja); }
html[data-visual="novo"] .rt-ruim { --rt-cor: var(--vn-vermelho); }
html[data-visual="novo"] .rt-neutro { --rt-cor: var(--vn-cinza2); }
/* as gavetas A fila e Regras do ritmo: pílulas no padrão */
html[data-visual="novo"] .nw-filtros .nw-segmento { border: 0; border-radius: 999px; background: var(--vn-suave); color: var(--vn-cinza); font-weight: 500; }
html[data-visual="novo"] .nw-filtros .nw-segmento.ligado { background: var(--vn-verde-s); color: var(--vn-ge-verde-t); font-weight: 600; }
html[data-visual="novo"] .nw-conta { border-radius: 999px; background: var(--vn-placa); color: var(--vn-cinza); }
html[data-visual="novo"] .nw-filtros .nw-segmento.ligado .nw-conta { background: var(--vn-ge-verde-t); color: #fff; }

/* ============================================================ 9. Console */
html[data-visual="novo"] .cs-resumo-das-contas { color: var(--vn-cinza); }
html[data-visual="novo"] .cs-rodape-da-tabela { color: var(--vn-cinza2); }
html[data-visual="novo"] .cs-oferta-sempre { background: var(--vn-suave); color: var(--vn-cinza); border-radius: 12px; }

/* ============================================================ 10. Configurações */
html[data-visual="novo"] .cfg-sub {
  margin: 8px 2px 0;
  color: var(--vn-tinta);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}
html[data-visual="novo"] .cfg-miolo input:not([type="color"]):not([type="file"]):not([type="checkbox"]):not([type="radio"]),
html[data-visual="novo"] .cfg-miolo select,
html[data-visual="novo"] .cfg-miolo textarea {
  border: 1px solid var(--vn-fio);
  border-radius: 9px;
  background-color: var(--vn-placa);
}
html[data-visual="novo"] .cfg-miolo input:focus,
html[data-visual="novo"] .cfg-miolo select:focus,
html[data-visual="novo"] .cfg-miolo textarea:focus { outline: 0; border-color: var(--sag-green); box-shadow: 0 0 0 3px rgba(4, 122, 142, .15); }
html[data-visual="novo"] .cfg-miolo .gg-dias { gap: 8px; flex-wrap: wrap; }
html[data-visual="novo"] .cfg-miolo .gg-dias button {
  height: 30px;
  padding: 0 12px;
  border: 0;
  border-radius: 999px;
  background: var(--vn-suave);
  color: var(--vn-cinza);
  font-size: 13px;
  font-weight: 500;
}
html[data-visual="novo"] .cfg-miolo .gg-dias button[aria-pressed="true"] {
  background: var(--vn-verde-s);
  color: var(--vn-ge-verde-t);
  font-weight: 600;
  box-shadow: none;
}
html[data-visual="novo"] .cfg-miolo .gg-dia { height: 10px; border-radius: 999px; background: var(--vn-suave); }
html[data-visual="novo"] .cfg-miolo .gg-dia .janela { border-radius: 999px; background: linear-gradient(90deg, var(--vn-azul), var(--vn-verde)); }
html[data-visual="novo"] .cfg-miolo .gg-horas { font-size: 28px; font-weight: 600; }
html[data-visual="novo"] .cfg-miolo .gg-numero { font-size: 30px; font-weight: 600; color: var(--vn-azul); }
html[data-visual="novo"] .cfg-agora-vivo { color: var(--vn-ge-verde-t); }
html[data-visual="novo"] .cfg-agora-parado { color: var(--vn-laranja); }
html[data-visual="novo"] .gg-chave[aria-pressed="true"] { background: var(--vn-verde); }
html[data-visual="novo"] .cfg-miolo .gg-escolha[aria-pressed="true"] { box-shadow: inset 0 0 0 2px var(--sag-green), var(--vn-sombra); }
html[data-visual="novo"] .cfg-miolo #cfg-baixar { background: var(--vn-placa); color: var(--vn-tinta); }

/* ============================================================ 11. Perfil */
html[data-visual="novo"] .perfil-topo { padding: 18px 20px; }
html[data-visual="novo"] .perfil-topo-nome { font-size: 16px; font-weight: 600; }
html[data-visual="novo"] .perfil-selo { background: var(--vn-suave); color: var(--vn-cinza); }
html[data-visual="novo"] .perfil-selo-verde { background: var(--vn-verde-s); color: var(--vn-ge-verde-t); }
html[data-visual="novo"] .perfil-selo-ambar { background: var(--vn-amarelo-s); color: var(--vn-ge-amarelo-t); }
html[data-visual="novo"] .perfil-cartoes { gap: 12px; }
html[data-visual="novo"] .perfil-cartao { padding: 18px; }
html[data-visual="novo"] .perfil-icone { width: 36px; height: 36px; border-radius: 50%; }
html[data-visual="novo"] .perfil-cartao-cabeca .perfil-linha-rotulo { font-size: 14px; font-weight: 600; }
html[data-visual="novo"] .perfil-linha-valor { color: var(--vn-cinza); font-size: 13px; }
html[data-visual="novo"] .perfil-tom-verde { --perfil-cor: var(--vn-ge-verde-t); --perfil-claro: var(--vn-verde-s); }
html[data-visual="novo"] .perfil-tom-roxo { --perfil-cor: var(--vn-roxo); --perfil-claro: var(--vn-roxo-s); }
html[data-visual="novo"] .perfil-tom-azul { --perfil-cor: var(--vn-azul); --perfil-claro: var(--vn-azul-s); }
html[data-visual="novo"] .perfil-tom-ambar { --perfil-cor: var(--vn-laranja); --perfil-claro: var(--vn-laranja-s); }
html[data-visual="novo"] .perfil-tom-rosa { --perfil-cor: var(--vn-rosa); --perfil-claro: var(--vn-rosa-s); }
html[data-visual="novo"] .perfil-tom-cinza { --perfil-cor: var(--vn-cinza); --perfil-claro: var(--vn-suave); }

/* ============================================================ 12. Manual e FAQ */
html[data-visual="novo"] .manual-hero { padding: 20px 24px; background: var(--vn-placa); }
html[data-visual="novo"] .manual-hero > b { color: var(--vn-tinta); font-size: 20px; font-weight: 700; letter-spacing: -.01em; }
html[data-visual="novo"] .manual-hero .manual-busca input,
html[data-visual="novo"] .busca-do-faq input {
  height: 42px;
  border: 1px solid var(--vn-fio);
  border-radius: 999px;
  padding: 0 18px;
  background: var(--vn-suave);
  color: var(--vn-tinta);
  font-size: 14px;
}
html[data-visual="novo"] .manual-hero .manual-busca input:focus,
html[data-visual="novo"] .busca-do-faq input:focus { outline: 0; border-color: var(--sag-green); background: var(--vn-placa); }
html[data-visual="novo"] .manual-indice { padding: 12px; }
html[data-visual="novo"] .manual-indice .manual-area-titulo {
  padding: 6px 10px 4px;
  color: var(--vn-cinza2);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}
html[data-visual="novo"] .manual-indice .manual-item { padding: 8px 10px; border-radius: 9px; color: var(--vn-cinza); font-size: 14px; font-weight: 500; }
html[data-visual="novo"] .manual-indice .manual-item:hover { background: var(--vn-suave); color: var(--vn-tinta); }
html[data-visual="novo"] .manual-indice .manual-item[aria-current="true"] { background: var(--vn-verde-s); color: var(--vn-ge-verde-t); font-weight: 600; }
html[data-visual="novo"] .manual-item[aria-current="true"] .manual-item-icone { color: var(--vn-ge-verde-t); }
html[data-visual="novo"] .manual-artigo .manual-titulo { font-size: 26px; font-weight: 700; letter-spacing: -.02em; }
html[data-visual="novo"] .manual-artigo .manual-subtitulo { font-size: 15px; font-weight: 600; }
html[data-visual="novo"] .manual-artigo .manual-atalho { border: 0; background: var(--vn-suave); color: var(--vn-cinza); font-weight: 500; }
html[data-visual="novo"] .manual-artigo .manual-atalho:hover { background: var(--vn-verde-s); color: var(--vn-ge-verde-t); }
html[data-visual="novo"] .manual-artigo .manual-numero { background: var(--vn-verde-s); color: var(--vn-ge-verde-t); font-weight: 600; }
html[data-visual="novo"] .manual-artigo .manual-aba,
html[data-visual="novo"] .manual-artigo .manual-pe { border-top: 1px solid var(--vn-fio); }
html[data-visual="novo"] .manual-artigo .manual-bom-saber { border: 0; border-radius: 12px; background: var(--vn-amarelo-s); }
html[data-visual="novo"] .manual-artigo .manual-bom-saber b { color: var(--vn-ge-amarelo-t); font-weight: 600; }
html[data-visual="novo"] .manual-artigo .manual-pe a { color: var(--vn-azul); font-weight: 600; }
html[data-visual="novo"] .manual-artigo .manual-seta { border: 0; border-radius: 9px; background: var(--vn-suave); color: var(--vn-tinta); font-weight: 500; }
html[data-visual="novo"] .manual-artigo .manual-seta:hover { background: var(--vn-folha); }

/* "Não achou aqui?": os três botões do mesmo tamanho */
html[data-visual="novo"] .falar-com-a-gente {
  padding: 18px 20px;
  border: 0;
  border-radius: var(--vn-raio-painel);
  background: var(--vn-placa);
  box-shadow: var(--vn-sombra);
}
html[data-visual="novo"] .falar-com-a-gente .falar-quem strong { font-size: 15px; font-weight: 600; }
html[data-visual="novo"] .falar-com-a-gente .falar-quem span { color: var(--vn-cinza); font-size: 13px; }
html[data-visual="novo"] .falar-canais { display: flex; flex-wrap: wrap; gap: 8px; }
html[data-visual="novo"] .falar-com-a-gente .falar-canais .btn {
  flex: 1 1 200px;
  justify-content: center;
  height: auto;
  min-height: 36px;
  padding: 8px 14px;
  text-align: center;
  white-space: normal;
  line-height: 1.25;
}

/* ============================================================ 13. Celular */
@media (max-width: 650px) {
  html[data-visual="novo"] .cs-cartao[class*="cs-cor-"],
  html[data-visual="novo"] .nw-resumo .nw-resumo-cartao { min-height: 96px; padding: 14px 76px 14px 16px; }
  html[data-visual="novo"] .cs-cartao[class*="cs-cor-"] strong,
  html[data-visual="novo"] .nw-resumo .cs-cartao strong { font-size: 28px; }
  html[data-visual="novo"] .cs-cartao[class*="cs-cor-"] .cs-selo { width: 46px; height: 46px; right: 12px; }
  html[data-visual="novo"] .cs-cartao[class*="cs-cor-"] .cs-selo svg { width: 22px; height: 22px; }
  html[data-visual="novo"] .ig-grade { grid-template-columns: 1fr; }
  html[data-visual="novo"] .nw-topo .acoes .btn { flex: 0 0 auto; width: auto; }
  html[data-visual="novo"] .gg-ambiente > .bloco.gg-peca { padding: 16px; }
  html[data-visual="novo"] .manual-hero { padding: 16px; }
  html[data-visual="novo"] .falar-com-a-gente .falar-canais .btn { flex: 1 1 100%; }
  html[data-visual="novo"] .gg-ambiente > .vazio { padding: 40px 16px; min-height: 220px; }
}

/* OS COMANDOS DA CONTA NO CONSOLE: só o ícone, e o nome abre quando o mouse chega nele (Henrique, 06/11/2026). */
html[data-visual="novo"] #conteudo .cs-acoes-da-linha { position: relative; display: flex; align-items: center; justify-content: flex-end; gap: 4px; }
html[data-visual="novo"] .cs-vaga-do-icone { flex: none; width: 32px; height: 32px; }
html[data-visual="novo"] #conteudo .cs-acoes-da-linha .btn.cs-mais { flex: none; width: 32px; min-width: 32px; padding: 0; justify-content: center; }
html[data-visual="novo"] #conteudo .cs-acoes-da-linha .btn.cs-icone-que-abre {
  position: relative;
  z-index: 1;
  display: inline-flex;
  flex: none; /* não encolhe: o nome aberto cresce para a esquerda, sobre a coluna ao lado */
  align-items: center;
  gap: 0;
  width: auto;
  min-width: 32px;
  padding: 0 8px;
  overflow: hidden;
  white-space: nowrap;
  text-decoration: none;
  transition: background .13s ease;
}
html[data-visual="novo"] .cs-icone-que-abre svg {
  flex: none;
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
html[data-visual="novo"] .cs-icone-que-abre span { max-width: 0; overflow: hidden; transition: max-width .16s ease; }
html[data-visual="novo"] #conteudo .cs-acoes-da-linha .btn.cs-icone-que-abre:is(:hover, :focus-visible) { gap: 8px; padding-right: 12px; }
html[data-visual="novo"] .cs-icone-que-abre:is(:hover, :focus-visible) span { max-width: 280px; }
@media (prefers-reduced-motion: reduce) {
  html[data-visual="novo"] .cs-icone-que-abre span { transition: none; }
}

html[data-visual="novo"] #conteudo #ordem-das-contas { flex: none; width: 218px; max-width: none; }

/* O CARTÃO DO NÚMERO, PELO TIPO (Henrique, 06/11/2026). */
html[data-visual="novo"] #conteudo .nw-cartao { overflow: hidden; }
html[data-visual="novo"] #conteudo .nw-cartao-cabeca { align-items: center; gap: 12px; }
html[data-visual="novo"] .nw-cartao-logo { flex: none; display: inline-flex; align-items: center; justify-content: center; }
html[data-visual="novo"] .nw-cartao-logo svg { display: block; }
html[data-visual="novo"] .nw-tipo { display: block; font-size: 12px; color: var(--vn-cinza); }
html[data-visual="novo"] .nw-business .nw-cartao-logo { width: 44px; height: 44px; border-radius: 12px; background: #25d366; color: #fff; }
html[data-visual="novo"] .nw-business .nw-cartao-logo svg { width: 27px; height: 27px; }
html[data-visual="novo"] #conteudo .nw-api .nw-cartao-cabeca { margin: -18px -18px 0; padding: 14px 18px; background: #128c4b; color: #fff; }
html[data-visual="novo"] .nw-api .nw-cartao-logo { color: #fff; }
html[data-visual="novo"] .nw-api .nw-cartao-logo svg { width: 32px; height: 32px; }
html[data-visual="novo"] .nw-api :is(.nw-tipo, .nw-nome, .nw-sub, .nw-tel) { color: #fff; }
html[data-visual="novo"] #conteudo .nw-cartao-acoes { justify-content: stretch; gap: 8px; margin: auto -18px -18px; padding: 12px 18px; border-top: 1px solid var(--vn-fio); }
html[data-visual="novo"] #conteudo .nw-cartao-acoes .btn { display: inline-flex; flex: 1; align-items: center; justify-content: center; text-align: center; }
html[data-visual="novo"] #conteudo .nw-cartao-acoes .btn.perigo { color: var(--vn-vermelho); }