/* O VISUAL NOVO — as peças comuns (botão, abas, gaveta, janela, campo, selo, aviso, filtros, tabela, vazio, cartões) — agente 2.
 * Tudo atrás de html[data-visual="novo"]; a régua (tokens --vn-*) mora no visual-novo.css e NÃO é editada aqui.
 * Ver docs/design/PLANO-DOS-AGENTES-VISUAL.md e docs/design/propostas/LEIA-ME.md.
 *
 * ÍNDICE
 *   0 Tokens --vn-pc-  1 Botão  2 Abas  3 Gaveta  4 Janela  5 Campos  6 Selos  7 Avisos
 *   8 Barra de controles e busca  9 Tabela  10 Estado vazio  11 Cartões reutilizáveis (.vn-*)
 *
 * COMO USAR OS CARTÕES (peças novas para os outros agentes — marcação, não JS):
 *
 *   Grade de quatro (gap 14; vira 2 colunas em tela média e 1 no celular):
 *     <div class="vn-cartoes"> …cartões… </div>
 *
 *   Cartão de cor cheia — data-cor = azul | rosa | laranja | verde | roxo | teal
 *     <div class="vn-cartao-cor" data-cor="azul">
 *       <strong class="vn-numero">128</strong>
 *       <span class="vn-legenda">Conversas abertas</span>
 *       <small class="vn-apoio">53 estão sem atendente</small>
 *       <i class="vn-icone" aria-hidden="true"><svg …/></i>
 *     </div>
 *     (serve também <a> ou <button> no lugar do <div>: ganha o "levantar" no hover)
 *
 *   Cartão branco com número colorido (a 2ª fileira da Proposta G)
 *     <div class="vn-cartao-branco" data-cor="verde">
 *       <strong class="vn-numero">R$ 12.480</strong>
 *       <span class="vn-legenda">Recebido no mês</span>
 *       <i class="vn-icone" aria-hidden="true"><svg …/></i>
 *     </div>
 *     (sem data-cor, o número fica na tinta)
 *
 *   Painel branco com cabeça
 *     <section class="vn-painel">
 *       <header class="vn-painel-cabeca">
 *         <i class="vn-icone-cor" data-cor="roxo"><svg …/></i>   <!-- opcional -->
 *         <h3>Próximos compromissos</h3>
 *         <a href="#agenda">Ver tudo</a>                          <!-- opcional, vai para a direita -->
 *       </header>
 *       <div class="vn-painel-corpo"> … </div>                    <!-- opcional: dá o recheio de 20 px -->
 *     </section>
 */

/* =================================================================== 0. Tokens que faltavam */

html[data-visual="novo"] {
  /* o "texto forte" de cada família de cor: a régua só tem o fundo vivo e o suave, e o selo
   * precisa de um tom fechado para ler em cima do suave (contraste ≥ 4,5:1). */
  --vn-pc-azul-t: #2e47d4;
  --vn-pc-rosa-t: #b01a59;
  --vn-pc-laranja-t: #b53f08;
  --vn-pc-verde-t: #06647a;
  --vn-pc-roxo-t: #6d28d9;
  --vn-pc-teal-t: #11808e;
  --vn-pc-amarelo-t: #9a6a00;
  --vn-pc-vermelho-t: #b02a2e;
  --vn-pc-verde-sombra: 0 2px 8px rgba(4, 122, 142, .32);
  --vn-pc-botao-sombra: 0 0 0 1px var(--vn-fio), 0 1px 2px rgba(0, 0, 0, .04);
  --vn-pc-anel: 0 0 0 3px rgba(4, 122, 142, .20);
  --vn-pc-cortina: rgba(28, 36, 64, .30);
  --vn-pc-sombra-alta: 0 24px 60px rgba(28, 36, 64, .18);
}

/* uma cor por cartão/ícone: `--vn-cartao` (cheia), `--vn-cartao-s` (suave), `--vn-cartao-t` (forte) */
html[data-visual="novo"] :is(.vn-cartao-cor, .vn-cartao-branco, .vn-icone-cor)[data-cor="azul"]    { --vn-cartao: var(--vn-azul);    --vn-cartao-s: var(--vn-azul-s);    --vn-cartao-t: var(--vn-pc-azul-t); }
html[data-visual="novo"] :is(.vn-cartao-cor, .vn-cartao-branco, .vn-icone-cor)[data-cor="rosa"]    { --vn-cartao: var(--vn-rosa);    --vn-cartao-s: var(--vn-rosa-s);    --vn-cartao-t: var(--vn-pc-rosa-t); }
html[data-visual="novo"] :is(.vn-cartao-cor, .vn-cartao-branco, .vn-icone-cor)[data-cor="laranja"] { --vn-cartao: var(--vn-laranja); --vn-cartao-s: var(--vn-laranja-s); --vn-cartao-t: var(--vn-pc-laranja-t); }
html[data-visual="novo"] :is(.vn-cartao-cor, .vn-cartao-branco, .vn-icone-cor)[data-cor="verde"]   { --vn-cartao: var(--vn-verde);   --vn-cartao-s: var(--vn-verde-s);   --vn-cartao-t: var(--vn-pc-verde-t); }
html[data-visual="novo"] :is(.vn-cartao-cor, .vn-cartao-branco, .vn-icone-cor)[data-cor="roxo"]    { --vn-cartao: var(--vn-roxo);    --vn-cartao-s: var(--vn-roxo-s);    --vn-cartao-t: var(--vn-pc-roxo-t); }
html[data-visual="novo"] :is(.vn-cartao-cor, .vn-cartao-branco, .vn-icone-cor)[data-cor="teal"]    { --vn-cartao: var(--vn-teal);    --vn-cartao-s: var(--vn-teal-s);    --vn-cartao-t: var(--vn-pc-teal-t); }

/* =================================================================== 1. Botão */

/* `.btn` (38) · `.btn.p` (32) · `.btn.g` (48): as alturas continuam as do catálogo (--alto-*). */
html[data-visual="novo"] .btn {
  height: var(--alto-m);
  padding: 0 14px;
  border: 1px solid transparent;
  border-radius: 9px;
  background: var(--vn-placa);
  color: var(--vn-tinta);
  font-size: 13px;
  font-weight: 500;
  box-shadow: var(--vn-pc-botao-sombra);
  transition: background .13s ease, box-shadow .13s ease, color .13s ease;
}
html[data-visual="novo"] .btn.p { height: var(--alto-p); padding: 0 12px; font-size: 13px; }
html[data-visual="novo"] .btn.g { height: var(--alto-g); padding: 0 20px; font-size: 14px; }
html[data-visual="novo"] .btn.largo { width: 100%; justify-content: center; }
/* hover sem "pular": nada sobe, só o fundo e o fio mudam */
html[data-visual="novo"] .btn:hover:not(:disabled) {
  background: var(--vn-suave);
  transform: none;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .09), 0 1px 2px rgba(0, 0, 0, .04);
}
html[data-visual="novo"] .btn:active:not(:disabled) { transform: none; background: #eceef2; }
html[data-visual="novo"] .btn:focus-visible { outline: 2px solid rgba(4, 122, 142, .55); outline-offset: 2px; }
html[data-visual="novo"] .btn:disabled { opacity: .5; box-shadow: var(--vn-pc-botao-sombra); }
html[data-visual="novo"] .btn svg { color: currentColor; }

/* principal: o verde da casa, com sombra verde leve */
html[data-visual="novo"] .btn.principal {
  background: var(--sag-green);
  border-color: transparent;
  color: #fff;
  box-shadow: var(--vn-pc-verde-sombra);
}
html[data-visual="novo"] .btn.principal:hover:not(:disabled) {
  background: var(--sag-green-dark);
  box-shadow: 0 3px 10px rgba(4, 122, 142, .38);
}
html[data-visual="novo"] .btn.principal:active:not(:disabled) { background: var(--sag-green-dark); }
html[data-visual="novo"] .btn.principal:disabled { box-shadow: var(--vn-pc-verde-sombra); }

/* perigo: vermelho da paleta */
html[data-visual="novo"] .btn.perigo {
  background: var(--vn-vermelho);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 2px 8px rgba(229, 72, 77, .28);
}
html[data-visual="novo"] .btn.perigo:hover:not(:disabled) {
  background: #d23a3f;
  border-color: transparent;
  color: #fff;
  filter: none;
  box-shadow: 0 3px 10px rgba(229, 72, 77, .36);
}

/* sutil: sem fio até o hover */
html[data-visual="novo"] .btn.btn-sutil {
  background: transparent;
  border-color: transparent;
  color: var(--vn-cinza);
  box-shadow: none;
}
html[data-visual="novo"] .btn.btn-sutil:hover:not(:disabled) { background: var(--vn-suave); color: var(--vn-tinta); box-shadow: none; }

/* as exceções com nome (launivo.css): mesma pele, a medida continua a do catálogo */
html[data-visual="novo"] .btn.aba { height: var(--alto-aba); font-size: 13px; border-radius: 9px; }
html[data-visual="novo"] .btn.pastilha { height: var(--alto-pastilha); width: var(--alto-pastilha); padding: 0; border-radius: 9px; }
html[data-visual="novo"] .btn.dia { height: var(--alto-pastilha); padding: 0 12px; font-size: 13px; border-radius: 999px; }
/* `.aba` e `.dia` escolhidos: no lugar do roxo velho, o verde suave da casa */
html[data-visual="novo"] .btn.aba[aria-pressed="true"],
html[data-visual="novo"] .btn.dia[aria-pressed="true"],
html[data-visual="novo"] .btn.dia.ligado,
html[data-visual="novo"] .btn.aba.ligado {
  background: var(--sag-green-soft);
  color: var(--sag-green-dark);
  box-shadow: 0 0 0 1px rgba(4, 122, 142, .35);
}

/* =================================================================== 2. Abas dentro da página */

/* O controle segmentado da amostra: barra cinza-clara, pílulas, a ativa branca com sombra.
 * Cobre os três desenhos que existiam:
 *   .gg-secoes ................ launivo-vidro.css (fileira do projeto, abas de rede)
 *   .grupo-de-opcoes .opcoes .. launivo-financeiro-e-manual.css (rotulo({...}) do telas.js)
 *   .cs-abas .cs-aba .......... as abas que launivo.js desenha (Financeiro, Cadastros, Configurações, Console)
 * A altura da pílula é --alto-mini (26) + 3 px de cada lado = 32 = --alto-p, para casar com a barra de controles. */
html[data-visual="novo"] .gg-secoes,
html[data-visual="novo"] .grupo-de-opcoes .opcoes,
html[data-visual="novo"] .cs-abas {
  display: flex;
  flex-wrap: wrap;
  width: fit-content;
  max-width: 100%;
  gap: 2px;
  padding: 3px;
  margin: 0 0 var(--f4);
  background: var(--vn-suave);
  border: 0;
  border-radius: 9px;
  box-shadow: inset 0 0 0 1px var(--vn-fio);
}
html[data-visual="novo"] .grupo-de-opcoes .opcoes { margin-bottom: 0; }
html[data-visual="novo"] .grupo-de-opcoes .rotulo { color: var(--vn-cinza); font-size: 13px; font-weight: 500; }

html[data-visual="novo"] .gg-secoes button,
html[data-visual="novo"] .grupo-de-opcoes .opcoes button,
html[data-visual="novo"] .cs-abas .cs-aba {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: var(--alto-mini);
  padding: 0 12px;
  border: 0;
  border-bottom: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--vn-cinza);
  font-size: 13px;
  font-weight: 500;
  box-shadow: none;
  transition: background .13s ease, color .13s ease;
}
html[data-visual="novo"] .gg-secoes button:hover:not(:disabled),
html[data-visual="novo"] .grupo-de-opcoes .opcoes button:hover:not(:disabled),
html[data-visual="novo"] .cs-abas .cs-aba:hover {
  background: rgba(255, 255, 255, .6);
  color: var(--vn-tinta);
}
html[data-visual="novo"] .gg-secoes button[aria-current="true"],
html[data-visual="novo"] .grupo-de-opcoes .opcoes button[aria-current="true"],
html[data-visual="novo"] .cs-abas .cs-aba.cs-ativa,
html[data-visual="novo"] .cs-abas .cs-aba[aria-current="page"] {
  background: var(--vn-placa);
  border: 0;
  color: var(--vn-tinta);
  font-weight: 500;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .08);
}
html[data-visual="novo"] .gg-secoes button:focus-visible,
html[data-visual="novo"] .grupo-de-opcoes .opcoes button:focus-visible,
html[data-visual="novo"] .cs-abas .cs-aba:focus-visible { outline: 2px solid rgba(4, 122, 142, .55); outline-offset: 1px; }
html[data-visual="novo"] .gg-secoes button:disabled { opacity: .5; cursor: not-allowed; }
html[data-visual="novo"] a.cs-aba:hover { color: var(--vn-tinta); }
/* as abas de DENTRO dos Cadastros (antes pílulas com contorno) seguem o mesmo controle */
html[data-visual="novo"] .fin-abas ~ .cs-abas.ff-abas { border: 0; gap: 2px; }
html[data-visual="novo"] .fin-abas ~ .cs-abas.ff-abas .cs-aba { padding: 0 12px; border: 0; border-radius: 9px; background: transparent; }
html[data-visual="novo"] .fin-abas ~ .cs-abas.ff-abas .cs-aba.cs-ativa { border: 0; background: var(--vn-placa); color: var(--vn-tinta); }
/* o contador vermelho dentro da aba */
html[data-visual="novo"] .cs-aba-selo {
  height: 18px;
  min-width: 18px;
  padding: 0 5px;
  background: var(--vn-vermelho-s);
  color: var(--vn-pc-vermelho-t);
  font-size: 11px;
  font-weight: 600;
}
/* barra de controles: as abas dentro dela ficam do tamanho da barra */
html[data-visual="novo"] .barra-de-controles .gg-secoes button,
html[data-visual="novo"] .barra-de-controles .grupo-de-opcoes .opcoes button { height: var(--alto-mini); }
html[data-visual="novo"] .barra-de-controles .gg-secoes,
html[data-visual="novo"] .barra-de-controles .grupo-de-opcoes .opcoes { margin: 0; }

/* =================================================================== 3. Gaveta */

html[data-visual="novo"] .cortina { background: var(--vn-pc-cortina); }
html[data-visual="novo"] .gaveta {
  background: var(--vn-placa);
  border-left: 0;
  border-radius: 16px 0 0 16px;
  box-shadow: -16px 0 48px rgba(28, 36, 64, .14);
  overflow: hidden;
}
/* as exceções do inventário seguem com a largura delas (640 larga, 560 da agenda e dos negócios,
 * e as gavetas de duas colunas dos contatos/administração/etapas) */
html[data-visual="novo"] .gaveta:not(.gaveta-larga):not(.ag-gaveta):not(.ng-gaveta):not(:has(.co-perfil, .co-janela-novo, .ng-editor-etapas, .nw-gaveta)) {
  width: min(560px, 100vw);
}
html[data-visual="novo"] .gv-topo {
  padding: 18px 24px 16px;
  border-bottom: 1px solid var(--vn-fio);
  background: var(--vn-placa);
}
html[data-visual="novo"] .gv-topo b { font-size: 15px; font-weight: 600; letter-spacing: -.01em; color: var(--vn-tinta); }
html[data-visual="novo"] .gv-topo .x {
  display: grid;
  place-items: center;
  width: var(--alto-pastilha);
  height: var(--alto-pastilha);
  padding: 0;
  border-radius: 50%;
  background: var(--vn-suave);
  color: var(--vn-cinza);
  font-size: 16px;
  line-height: 1;
  transition: background .13s ease, color .13s ease;
}
html[data-visual="novo"] .gv-topo .x:hover { background: #e8eaef; color: var(--vn-tinta); }
html[data-visual="novo"] .gv-corpo { padding: 20px 24px; }
html[data-visual="novo"] .gv-pe {
  padding: 14px 24px;
  border-top: 1px solid var(--vn-fio);
  background: var(--vn-placa);
  gap: 8px;
}
html[data-visual="novo"] .gv-pe .rotulo { color: var(--vn-cinza2); font-size: 12px; }

/* título de seção dentro da gaveta: sem caixa alta espaçada, sem traço roxo */
html[data-visual="novo"] .gaveta .secao {
  margin: 24px 0 12px;
  padding-left: 0;
  border-left: 0;
  color: var(--vn-tinta);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}
html[data-visual="novo"] .gaveta .secao:first-child { margin-top: 0; }
html[data-visual="novo"] .gaveta .faixa-erro {
  background: var(--vn-vermelho-s);
  border: 0;
  border-radius: 9px;
  color: var(--vn-pc-vermelho-t);
  font-weight: 500;
}
/* a gaveta de leitura (abrirAjuda): subtítulos legíveis, sem caixa alta */
html[data-visual="novo"] .gaveta.ajuda h4 {
  margin: 20px 0 6px;
  color: var(--vn-tinta);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}
html[data-visual="novo"] .gaveta.ajuda .rotulo { color: var(--vn-cinza2); }

/* =================================================================== 4. Janela de confirmação */

html[data-visual="novo"] .dialogo {
  background: var(--vn-placa);
  border-radius: 16px;
  padding: 24px;
  box-shadow: var(--vn-pc-sombra-alta), 0 0 0 1px var(--vn-fio);
}
html[data-visual="novo"] .dialogo h2 { margin: 0 0 8px; color: var(--vn-tinta); font-size: 16px; font-weight: 600; letter-spacing: -.01em; }
html[data-visual="novo"] .dialogo p { margin: 0 0 20px; color: var(--vn-cinza); font-size: 13px; line-height: 1.5; }
html[data-visual="novo"] .dialogo .acoes { gap: 8px; }

/* =================================================================== 5. Campos */

/* Escopo de propósito: só os campos "de formulário" (campo, gaveta, janela, barra de controles,
 * cartão de configuração). O campo escondido dentro de uma pílula de busca ou de um compositor
 * de tela (Atendimento) é problema da tela dele e fica de fora. */
html[data-visual="novo"] :is(.campo, .gv-corpo, .dialogo, .barra-de-controles, .filtros-das-contas, .gg-peca)
  :is(input:not([type]), input[type="text"], input[type="email"], input[type="password"], input[type="search"],
      input[type="url"], input[type="tel"], input[type="time"], input[type="date"], input[type="datetime-local"],
      input[type="number"], input[type="month"], textarea, select) {
  border: 1px solid transparent;
  border-radius: 9px;
  background-color: var(--vn-suave);
  box-shadow: none;
  color: var(--vn-tinta);
  font-size: 14px;
  font-weight: 400;
  transition: background-color .13s ease, border-color .13s ease, box-shadow .13s ease;
}
html[data-visual="novo"] :is(.campo, .gv-corpo, .dialogo, .barra-de-controles, .filtros-das-contas, .gg-peca)
  :is(input, textarea, select):hover:not(:focus):not(:disabled) { border-color: rgba(0, 0, 0, .10); }
html[data-visual="novo"] :is(.campo, .gv-corpo, .dialogo, .barra-de-controles, .filtros-das-contas, .gg-peca)
  :is(input, textarea, select):focus {
  outline: none;
  background-color: var(--vn-placa);
  border-color: var(--sag-green);
  box-shadow: var(--vn-pc-anel);
}
html[data-visual="novo"] :is(.campo, .gv-corpo, .gg-peca) :is(input, textarea, select):disabled { opacity: .6; cursor: not-allowed; }
html[data-visual="novo"] :is(input, textarea)::placeholder { color: var(--vn-cinza2); }
/* erro: aparece onde dói, em vermelho da paleta */
html[data-visual="novo"] .campo.errado :is(input, select, textarea) {
  background-color: var(--vn-placa);
  border-color: var(--vn-vermelho);
  box-shadow: 0 0 0 3px rgba(229, 72, 77, .14);
}
/* rótulo 12.5/500 cinza, dica e erro miúdos */
html[data-visual="novo"] .campo > label,
html[data-visual="novo"] label.campo {
  color: var(--vn-cinza);
  font-size: 13px;
  font-weight: 500;
}
html[data-visual="novo"] .campo .opcional,
html[data-visual="novo"] .gaveta .opcional { color: var(--vn-cinza2); font-weight: 400; }
html[data-visual="novo"] .campo .dica,
html[data-visual="novo"] .gaveta .dica { color: var(--vn-cinza2); font-size: 12px; }
html[data-visual="novo"] .campo .erro-do-campo { color: var(--vn-pc-vermelho-t); font-weight: 500; }
html[data-visual="novo"] .campo.marca span { color: var(--vn-tinta); font-weight: 500; }
html[data-visual="novo"] .campo.marca input[type="checkbox"] { accent-color: var(--sag-green); }
/* o contador do código e a figura do QR com a paleta nova */
html[data-visual="novo"] .campo.relogio .conta { color: var(--sag-green-dark); font-weight: 600; }
html[data-visual="novo"] .campo.relogio .trilho-do-tempo { background: var(--vn-suave); }
html[data-visual="novo"] .campo.relogio .trilho-do-tempo i { background: var(--sag-green); }
html[data-visual="novo"] .campo.relogio.apertado .conta { color: var(--vn-vermelho); }
html[data-visual="novo"] .campo.relogio.apertado .trilho-do-tempo i { background: var(--vn-vermelho); }
html[data-visual="novo"] .campo.figura img { border-radius: 12px; border-color: var(--vn-fio); }

/* =================================================================== 6. Selos */

/* pílula 999, 11px/600, fundo suave + texto forte da mesma família. Padrão = cinza. */
html[data-visual="novo"] .selo {
  padding: 3px 10px;
  border: 0;
  border-radius: 999px;
  background: var(--vn-suave);
  color: var(--vn-cinza);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0;
}
html[data-visual="novo"] .selo.ok      { background: var(--vn-verde-s);    color: var(--vn-pc-verde-t); }
html[data-visual="novo"] .selo.aviso   { background: var(--vn-amarelo-s);  color: var(--vn-pc-amarelo-t); }
html[data-visual="novo"] .selo.ruim    { background: var(--vn-vermelho-s); color: var(--vn-pc-vermelho-t); }
html[data-visual="novo"] .selo.neutro  { background: var(--vn-suave);      color: var(--vn-cinza); border: 0; }
/* famílias extras, para quem precisar de azul/rosa/roxo/laranja/teal (ex.: etapas, canais) */
html[data-visual="novo"] .selo.azul    { background: var(--vn-azul-s);     color: var(--vn-pc-azul-t); }
html[data-visual="novo"] .selo.rosa    { background: var(--vn-rosa-s);     color: var(--vn-pc-rosa-t); }
html[data-visual="novo"] .selo.roxo    { background: var(--vn-roxo-s);     color: var(--vn-pc-roxo-t); }
html[data-visual="novo"] .selo.laranja { background: var(--vn-laranja-s);  color: var(--vn-pc-laranja-t); }
html[data-visual="novo"] .selo.teal    { background: var(--vn-teal-s);     color: var(--vn-pc-teal-t); }
/* o selo que se clica (sem uso no JS hoje) mantém o desenho */
html[data-visual="novo"] .selo.selo-botao:hover { filter: none; box-shadow: 0 0 0 1px currentColor; }
html[data-visual="novo"] .selo.selo-botao:focus-visible { outline: 2px solid rgba(4, 122, 142, .55); }
/* o ícone-símbolo de cartão (.gg-cabeca > .selo) NÃO é pílula de texto: fica de fora desta regra */
html[data-visual="novo"] .gg-cabeca > .selo:first-child { padding: 0; font-size: 16px; border-radius: 12px; background: var(--vn-verde-s); color: var(--vn-pc-verde-t); }

/* =================================================================== 7. Avisos */

/* Todos: fundo branco, canto 12, sombra, barra fina da cor à esquerda (box-shadow inset, que
 * acompanha o canto). A cor entra por `--vn-pc-aviso`. */
html[data-visual="novo"] .aviso-flutuante {
  --vn-pc-aviso: var(--vn-azul);
  padding: 12px 20px 12px 22px;
  border-radius: 12px;
  background: var(--vn-placa);
  box-shadow: inset 4px 0 0 var(--vn-pc-aviso), 0 0 0 1px var(--vn-fio), 0 12px 34px rgba(28, 36, 64, .16);
  color: var(--vn-tinta);
  font-size: 14px;
  font-weight: 500;
  text-align: left;
}
/* NO MEIO DA TELA continua (decisão dele, 15/09/2026): posição, z-index e prazos são os de antes. */
html[data-visual="novo"] .aviso-flutuante.certo { --vn-pc-aviso: var(--vn-verde); background: var(--vn-placa); }
html[data-visual="novo"] .aviso-flutuante.erro { --vn-pc-aviso: var(--vn-vermelho); background: var(--vn-placa); }
html[data-visual="novo"] .aviso-flutuante.neutro { --vn-pc-aviso: var(--vn-azul); background: var(--vn-placa); }

html[data-visual="novo"] .aviso-no-canto {
  --vn-pc-aviso: var(--vn-amarelo);
  padding: 14px 12px 14px 18px;
  border: 0;
  border-radius: 12px;
  background: var(--vn-placa);
  box-shadow: inset 4px 0 0 var(--vn-pc-aviso), 0 0 0 1px var(--vn-fio), 0 12px 34px rgba(28, 36, 64, .14);
}
html[data-visual="novo"] .aviso-no-canto.aviso-no-canto-ruim { --vn-pc-aviso: var(--vn-vermelho); }
html[data-visual="novo"] .aviso-no-canto .aviso-no-canto-sinal {
  background: var(--vn-amarelo-s);
  color: var(--vn-pc-amarelo-t);
  font-size: 14px;
  font-weight: 700;
}
html[data-visual="novo"] .aviso-no-canto-atencao .aviso-no-canto-sinal { background: var(--vn-amarelo-s); color: var(--vn-pc-amarelo-t); }
html[data-visual="novo"] .aviso-no-canto-ruim .aviso-no-canto-sinal { background: var(--vn-vermelho-s); color: var(--vn-pc-vermelho-t); }
html[data-visual="novo"] .aviso-no-canto .aviso-no-canto-titulo { color: var(--vn-tinta); font-size: 14px; font-weight: 600; }
html[data-visual="novo"] .aviso-no-canto .aviso-no-canto-frase { color: var(--vn-cinza); font-size: 12px; }
html[data-visual="novo"] .aviso-no-canto .aviso-no-canto-botao {
  color: var(--vn-azul);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
}
html[data-visual="novo"] .aviso-no-canto .aviso-no-canto-botao:hover { text-decoration: underline; text-underline-offset: 3px; }
html[data-visual="novo"] .aviso-no-canto-ruim .aviso-no-canto-botao { color: var(--vn-pc-vermelho-t); }
html[data-visual="novo"] .aviso-no-canto .aviso-no-canto-fechar { border-radius: 50%; color: var(--vn-cinza2); }
html[data-visual="novo"] .aviso-no-canto .aviso-no-canto-fechar:hover { background: var(--vn-suave); color: var(--vn-tinta); }

/* recado (faixa dentro da página/gaveta) e nota */
html[data-visual="novo"] .recado {
  --vn-pc-aviso: var(--vn-cinza2);
  padding: 11px 16px 11px 18px;
  border: 0;
  border-radius: 12px;
  background: var(--vn-placa);
  box-shadow: inset 4px 0 0 var(--vn-pc-aviso), 0 0 0 1px var(--vn-fio), var(--vn-sombra);
  color: var(--vn-tinta);
  font-size: 13px;
  line-height: 1.5;
}
html[data-visual="novo"] .recado.ruim   { --vn-pc-aviso: var(--vn-vermelho); background: var(--vn-placa); color: var(--vn-tinta); }
html[data-visual="novo"] .recado.aviso  { --vn-pc-aviso: var(--vn-amarelo);  background: var(--vn-placa); color: var(--vn-tinta); }
html[data-visual="novo"] .recado.ok     { --vn-pc-aviso: var(--vn-verde);    background: var(--vn-placa); color: var(--vn-tinta); }
html[data-visual="novo"] .recado.neutro { --vn-pc-aviso: var(--vn-azul);     background: var(--vn-placa); color: var(--vn-tinta); }
html[data-visual="novo"] .gg-recado { border-radius: 12px; }
html[data-visual="novo"] .nota,
html[data-visual="novo"] .gg-nota { color: var(--vn-cinza); font-size: 12px; line-height: 1.55; }

/* =================================================================== 8. Barra de controles e busca */

/* Chips em pílula, 32 px (--alto-p = --alto-barra). A busca tem lupa (o ⌕ que o JS já escreve). */
html[data-visual="novo"] .barra-de-controles { gap: 8px; }
html[data-visual="novo"] .barra-de-controles .btn,
html[data-visual="novo"] .filtros-da-caixa .btn {
  height: var(--alto-barra);
  padding: 0 14px;
  border-radius: 999px;
  font-size: 13px;
}
html[data-visual="novo"] .filtros-da-caixa .btn { height: var(--alto-p); }
html[data-visual="novo"] .barra-de-controles select {
  border-radius: 999px;
  padding: 0 14px;
  font-size: 13px;
}
html[data-visual="novo"] .barra-de-controles input:not([type="checkbox"]):not([type="radio"]) {
  border-radius: 999px;
  padding: 0 14px;
  font-size: 13px;
}
html[data-visual="novo"] .pilula-de-busca {
  display: flex;
  align-items: center;
  gap: 8px;
  height: var(--alto-barra);
  padding: 0 14px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: var(--vn-suave);
  color: var(--vn-cinza2);
  transition: background .13s ease, border-color .13s ease, box-shadow .13s ease;
}
html[data-visual="novo"] .pilula-de-busca > span { color: var(--vn-cinza2); font-size: 14px; line-height: 1; }
html[data-visual="novo"] .pilula-de-busca:focus-within {
  background: var(--vn-placa);
  border-color: var(--sag-green);
  box-shadow: var(--vn-pc-anel);
}
/* o campo DENTRO da pílula é invisível: quem tem borda é a pílula (vence a regra de campo, §5) */
html[data-visual="novo"] .pilula-de-busca input,
html[data-visual="novo"] .barra-de-controles .pilula-de-busca input:not([type="checkbox"]) {
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--vn-tinta);
  font-size: 13px;
}
html[data-visual="novo"] .pilula-de-busca input:focus { background: transparent; border: 0; box-shadow: none; }
html[data-visual="novo"] .barra-de-quem-saiu .pilula-de-busca { border-radius: 999px; border-color: transparent; }
html[data-visual="novo"] .filtros-das-contas input[type="search"] { border-radius: 999px; border-color: transparent; background: var(--vn-suave); }

/* =================================================================== 9. Tabela padrão */

/* Cabeçalho miúdo e cinza (sem caixa alta espaçada), linhas separadas por um fio, hover suave,
 * sem zebra. O respiro horizontal vale para cabeçalho e linhas juntos, para as colunas não
 * saírem de registro. */
html[data-visual="novo"] .tabela > .linha {
  padding: 11px 12px;
  border-top: 1px solid var(--vn-fio);
  border-radius: 0;
  color: var(--vn-tinta);
  font-size: 13px;
}
html[data-visual="novo"] .tabela > .linha:first-child { border-top: 0; }
html[data-visual="novo"] .tabela > .linha.cabecalho {
  padding-top: 4px;
  padding-bottom: 9px;
  border-top: 0;
  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"] .tabela > .linha:nth-child(even) { background: transparent; }
html[data-visual="novo"] .tabela > .linha:not(.cabecalho):hover { background: var(--vn-suave); }
html[data-visual="novo"] .tabela.clicavel .linha:not(.cabecalho):hover { background: var(--vn-suave); }
html[data-visual="novo"] .tabela.clicavel .linha:not(.cabecalho):hover .abre { color: var(--sag-green-dark); }
html[data-visual="novo"] .abre { color: var(--vn-cinza2); }
/* a linha da barra de controles (.linha.barra-de-controles) NÃO é linha de tabela */
html[data-visual="novo"] .tabela > .linha.barra-de-controles { padding: 8px 12px; }

/* =================================================================== 10. Estado vazio */

html[data-visual="novo"] .vazio { padding: 40px 16px; color: var(--vn-cinza); }
html[data-visual="novo"] .vazio .simbolo {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin: 0 auto 14px;
  border-radius: 50%;
  background: var(--vn-suave);
  color: var(--vn-cinza2);
  font-size: 20px;
  opacity: 1;
}
html[data-visual="novo"] .vazio .simbolo svg { width: 24px; height: 24px; }
html[data-visual="novo"] .vazio b { margin: 0 0 4px; color: var(--vn-tinta); font-size: 14px; font-weight: 600; }
html[data-visual="novo"] .vazio p { font-size: 13px; line-height: 1.5; }
html[data-visual="novo"] .vazio p:not(:last-child) { margin-bottom: 16px; }

/* =================================================================== 11. Cartões reutilizáveis */

/* 11.1 A grade de quatro */
html[data-visual="novo"] .vn-cartoes {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}

/* 11.2 Cartão de cor cheia (igual aos da Visão geral, visual-novo.css §3.1) */
html[data-visual="novo"] .vn-cartao-cor {
  --vn-cartao: var(--vn-azul);
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 112px;
  padding: 18px 96px 18px 20px;
  border: 0;
  border-radius: var(--vn-raio-cartao);
  background: var(--vn-cartao);
  box-shadow: none;
  color: #fff;
  text-align: left;
  text-decoration: none;
  font: inherit;
  transition: transform .15s ease, box-shadow .15s ease;
}
html[data-visual="novo"] :is(a, button).vn-cartao-cor { cursor: pointer; }
html[data-visual="novo"] :is(a, button).vn-cartao-cor:hover,
html[data-visual="novo"] :is(a, button).vn-cartao-cor:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, .12);
  outline: none;
}
html[data-visual="novo"] .vn-cartao-cor .vn-numero,
html[data-visual="novo"] .vn-cartao-cor > strong {
  order: 1;
  margin: 0;
  color: #fff;
  font-size: 34px;
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1;
}
html[data-visual="novo"] .vn-cartao-cor .vn-legenda {
  order: 2;
  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"] .vn-cartao-cor .vn-apoio {
  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"] .vn-cartao-cor .vn-icone {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .22);
  color: #fff;
  font-style: normal;
}
html[data-visual="novo"] .vn-cartao-cor .vn-icone svg { width: 26px; height: 26px; }

/* 11.3 Cartão branco com número colorido */
html[data-visual="novo"] .vn-cartao-branco {
  --vn-cartao: var(--vn-tinta);
  --vn-cartao-t: var(--vn-tinta);
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 88px;
  padding: 16px 84px 16px 20px;
  border: 0;
  border-radius: var(--vn-raio-cartao);
  background: var(--vn-placa);
  box-shadow: var(--vn-sombra);
  color: var(--vn-tinta);
  text-align: left;
  text-decoration: none;
  font: inherit;
}
html[data-visual="novo"] :is(a, button).vn-cartao-branco { cursor: pointer; transition: box-shadow .15s ease; }
html[data-visual="novo"] :is(a, button).vn-cartao-branco:hover { box-shadow: 0 0 0 1px var(--vn-fio), 0 8px 22px rgba(0, 0, 0, .08); }
html[data-visual="novo"] .vn-cartao-branco .vn-numero,
html[data-visual="novo"] .vn-cartao-branco > strong {
  order: 1;
  margin: 0;
  color: var(--vn-cartao-t);
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.1;
}
html[data-visual="novo"] .vn-cartao-branco .vn-legenda {
  order: 2;
  margin-top: 6px;
  color: var(--vn-cinza);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
}
html[data-visual="novo"] .vn-cartao-branco .vn-apoio {
  order: 3;
  margin-top: 6px;
  color: var(--vn-cinza2);
  font-size: 12px;
  font-weight: 500;
}
html[data-visual="novo"] .vn-cartao-branco .vn-icone {
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--vn-suave);
  color: var(--vn-cartao-t);
  font-style: normal;
}
html[data-visual="novo"] .vn-cartao-branco .vn-icone svg { width: 22px; height: 22px; }

/* 11.4 Painel branco com cabeça */
html[data-visual="novo"] .vn-painel {
  border: 0;
  border-radius: var(--vn-raio-painel);
  background: var(--vn-placa);
  box-shadow: var(--vn-sombra);
  color: var(--vn-tinta);
}
html[data-visual="novo"] .vn-painel-cabeca {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 16px 20px 8px;
  border-bottom: 0;
}
html[data-visual="novo"] .vn-painel-cabeca h3 {
  margin: 0;
  min-width: 0;
  color: var(--vn-tinta);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -.01em;
}
html[data-visual="novo"] .vn-painel-cabeca p { margin: 0; color: var(--vn-cinza); font-size: 13px; }
html[data-visual="novo"] .vn-painel-cabeca > a,
html[data-visual="novo"] .vn-painel-cabeca > button.vn-link {
  margin-left: auto;
  padding: 0;
  border: 0;
  background: none;
  color: var(--vn-azul);
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
}
html[data-visual="novo"] .vn-painel-cabeca > a:hover,
html[data-visual="novo"] .vn-painel-cabeca > button.vn-link:hover { text-decoration: underline; text-underline-offset: 3px; }
html[data-visual="novo"] .vn-painel-corpo { padding: 8px 20px 18px; }
/* o ícone colorido opcional na cabeça do painel */
html[data-visual="novo"] .vn-icone-cor {
  --vn-cartao-s: var(--vn-suave);
  --vn-cartao-t: var(--vn-cinza);
  display: grid;
  place-items: center;
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: var(--vn-cartao-s);
  color: var(--vn-cartao-t);
  font-style: normal;
}
html[data-visual="novo"] .vn-icone-cor svg { width: 16px; height: 16px; }

/* 11.5 Responsivo: 4 → 2 → 1; no celular o cartão encolhe e o ícone sai do caminho */
@media (max-width: 1100px) {
  html[data-visual="novo"] .vn-cartoes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 650px) {
  html[data-visual="novo"] .vn-cartoes { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  html[data-visual="novo"] .vn-cartao-cor { min-height: 96px; padding: 14px 76px 14px 16px; }
  html[data-visual="novo"] .vn-cartao-cor .vn-numero,
  html[data-visual="novo"] .vn-cartao-cor > strong { font-size: 28px; }
  html[data-visual="novo"] .vn-cartao-cor .vn-icone { width: 46px; height: 46px; right: 12px; }
  html[data-visual="novo"] .vn-cartao-branco { padding-right: 70px; }
  html[data-visual="novo"] .gaveta { width: 100vw; border-radius: 0; }
  html[data-visual="novo"] .dialogo { padding: 20px; }
}