/* ==========================================================================
   NERO 2.0 — três propostas de visual pra escolher  (Briefing 13, 07/08/2026)
   --------------------------------------------------------------------------
   O Mauro pediu "uma mudança mais drástica, com mais versões, seguindo os
   detalhes da Shopee/UpSeller". Cada versão abaixo é uma PROPOSTA COMPLETA,
   não um ajuste: muda cor, moldura, hierarquia e até a posição dos blocos.

     nv-v1  🏬 Seller Centre   — fiel à Shopee: chão cinza, cards brancos de
                                 borda fina, tabela densa, laranja só em ação.
     nv-v2  📈 Painel executivo — número grande manda; menos moldura, mais ar,
                                 listas secundárias em tipografia menor.
     nv-v3  🧭 Fluxo de trabalho — a etapa do dia VIRA a navegação: trilha
                                 horizontal numerada + cards em faixa.

   GRAMÁTICA COMUM ÀS TRÊS (não quebre isto ao editar):
     · marca = VERDE sobre branco. Azul está fora (é a cara da UpSeller).
     · laranja Shopee = selecionado / ação principal / alerta leve. NUNCA
       decoração.
     · título do card negrito e quase-preto · apoio cinza médio sem negrito ·
       número que importa grande · status em cor.
     · separação por linha fina. Sem sombra pesada, sem gradiente.
     · contraste AA medido no branco (valores nos comentários dos tokens).

   COMO LIGAR: 🎨 Aparência → "Versão do visual", ou `?tema=v1|v2|v3` na URL.
   Guardado em `localStorage.nero_versao`. Sem escolha = "Atual" = nada muda.

   COMO A CAMADA FUNCIONA: este arquivo é carregado DEPOIS do nero-theme.css
   e depois do <style> da própria página, então empate de especificidade cai
   pro nosso lado; e todo seletor daqui carrega o `body[class*="nv-"]` /
   `body.nv-vN` na frente, o que já ganha do `.classe` solta da página. Tela
   que usa .wrap/.panel/.toolbar/.kpis/table entra nas 3 versões de graça —
   tela que inventa nome próprio pra tudo fica de fora.
   ========================================================================== */

/* -------------------------------------------------------------- TOKENS ---
   Uma paleta só, compartilhada pelas três versões. O que muda de versão pra
   versão é a MOLDURA (chão, borda, raio, respiro), não a cor da marca.

   Contraste medido sobre BRANCO:
     #00875A 4,6:1 (AA texto)   · #00694A 6,7:1 (link/texto pequeno)
     #EE4D2D 3,7:1 (só borda/ícone — passa o mínimo 3:1 de componente)
     #D23F21 4,7:1 com texto BRANCO em cima (botão de ação)
     #C13515 5,5:1 (texto laranja)
     #C4491A 4,9:1 (atenção)    · #D0342C 5,0:1 (perda)                     */
body[class*="nv-"]{
  --nv-verde:#00875A; --nv-verde-700:#00694A; --nv-verde-50:#E7F3EE;
  --nv-acao:#EE4D2D; --nv-acao-forte:#D23F21; --nv-acao-txt:#C13515; --nv-acao-50:#FFF3EF;
  --nv-tinta:#0F1419; --nv-apoio:#5F6B76; --nv-linha:#E3E7EA; --nv-linha-fraca:#EFF2F4;

  /* os tokens que o resto do app já lê */
  --accent:var(--nv-verde); --accent2:var(--nv-verde-700);
  --text:var(--nv-tinta); --muted:var(--nv-apoio); --border:var(--nv-linha);
  --c-ok:#00875A; --c-warn:#C4491A; --c-bad:#D0342C;
  --panel:#ffffff; --panel2:#F7F9FA; --chip:#F5F7F8; --glow:none;
  /* moldura BRANCA (a atual é preta): "branco inteiro", como o Seller Centre */
  --sidebar:#ffffff; --sidebar-text:#4A5560; --sidebar-strong:#0F1419;
  --sidebar-muted:#7A858F; --sidebar-head:#8A949E; --sidebar-border:#E7EBEE;
  background-color:var(--bg); color:var(--text);
}

/* ------------------------------------------------------- MOLDURA/CHROME ---
   O menu e o topo eram pretos em todos os temas. Nas versões 2.0 são brancos:
   item ativo = faixa verde + fundo verde-claro (a Shopee acende assim). */
body[class*="nv-"] .nero-sidebar,
body[class*="nv-"] .nero-head,
body[class*="nv-"] .nero-topnav{background:var(--sidebar);backdrop-filter:none;-webkit-backdrop-filter:none}
body[class*="nv-"] .nero-sidebar{border-right:1px solid var(--sidebar-border)}
body[class*="nv-"] .nero-head,body[class*="nv-"] .nero-topnav{border-bottom:1px solid var(--sidebar-border)}
body[class*="nv-"] .nero-nav{font-family:var(--font);font-weight:500;letter-spacing:0;border-radius:0;margin-right:0;text-shadow:none;background:none;color:var(--sidebar-text)}
body[class*="nv-"] .nero-nav:hover{background:var(--nv-verde-50);color:var(--nv-verde-700);transform:none;border-left-color:transparent}
body[class*="nv-"] .nero-nav.active{background:var(--nv-verde-50);color:var(--nv-verde-700);
  border-left:2px solid var(--nv-verde);font-weight:700;text-shadow:none}
body[class*="nv-"] .nero-gh{color:var(--sidebar-head);letter-spacing:.1em}
body[class*="nv-"] .nero-gh::before{display:none}
body[class*="nv-"] .nero-brand{border-bottom:1px solid var(--sidebar-border)}
body[class*="nv-"] .nero-badge{background:var(--nv-verde);box-shadow:none}
/* botões da barra de cima: eram pílulas claras sobre preto — no branco viram
   pílulas brancas de borda fina (o padrão Seller Centre). */
body[class*="nv-"] .nero-topbtn{background:#fff;color:var(--nv-tinta);border-color:var(--nv-linha)}
body[class*="nv-"] .nero-topbtn:hover{border-color:var(--nv-verde);color:var(--nv-verde-700)}
@keyframes nvPulse{0%,100%{box-shadow:0 0 0 0 rgba(0,135,90,.45)}50%{box-shadow:0 0 0 8px rgba(0,135,90,0)}}
body[class*="nv-"] .nero-livedot{background:var(--nv-verde);animation:nvPulse 2.4s ease-in-out infinite}
body[class*="nv-"] .nero-seg button.on{background:var(--nv-verde);color:#fff}

/* -------------------------------------------------------- TIPOGRAFIA ------
   Hierarquia única nas três: título forte quase-preto · apoio cinza sem
   negrito · número tabular. Some a fonte "techy" (Orbitron/JetBrains) — a
   referência agora é painel de vendedor, não painel de nave. */
body[class*="nv-"] .h1,body[class*="nv-"] h1{color:var(--nv-tinta);font-weight:800;letter-spacing:-.01em}
body[class*="nv-"] h2,body[class*="nv-"] h3{color:var(--nv-tinta);font-weight:700}
body[class*="nv-"] .sub,body[class*="nv-"] .mini,body[class*="nv-"] .muted,
body[class*="nv-"] .kick,body[class*="nv-"] .lbl,body[class*="nv-"] label{color:var(--nv-apoio);font-weight:400}
body[class*="nv-"] .sub{max-width:96ch}
body[class*="nv-"] .kick,body[class*="nv-"] .fc-l,body[class*="nv-"] .kpi .big,
body[class*="nv-"] .fc-n,body[class*="nv-"] .valor{font-family:var(--font)}
body[class*="nv-"] .kick,body[class*="nv-"] .fc-l{letter-spacing:.04em;font-weight:600}
body[class*="nv-"] .kpi .big,body[class*="nv-"] .fc-n,body[class*="nv-"] .valor,
body[class*="nv-"] .tnum,body[class*="nv-"] table td{font-variant-numeric:tabular-nums}
body[class*="nv-"] .nero-content a,body[class*="nv-"] a{color:var(--nv-verde-700)}

/* ------------------------------------------------- SELECIONADO = LARANJA --
   A regra que mais dá cara de Shopee: o que está escolhido fica laranja
   (borda + fundo suave), nunca a marca. Vale pros nomes que as telas já usam. */
body[class*="nv-"] .chip.on,body[class*="nv-"] .tab.on,body[class*="nv-"] .btn.sel,
body[class*="nv-"] .subaba.on,body[class*="nv-"] .fcard.on{
  background:var(--nv-acao-50);border-color:var(--nv-acao);color:var(--nv-acao-txt);
  font-weight:700;box-shadow:none}
body[class*="nv-"] .subaba.on .c,body[class*="nv-"] .fcard.on .fc-n{color:var(--nv-acao-txt)}
body[class*="nv-"] .lojacard.on,body[class*="nv-"] .card.on,body[class*="nv-"] .panel.on{
  border-color:var(--nv-acao);background:var(--nv-acao-50)}
body[class*="nv-"] tr.on>td,body[class*="nv-"] tr.sel>td{background:var(--nv-acao-50)}

/* ------------------------------------------------------------- BOTÕES -----
   Ação principal = laranja cheio (texto branco, 4,7:1). Secundário = branco
   com borda fina. Verde continua sendo marca/positivo, não botão de rotina. */
body[class*="nv-"] .btn{background:#fff;color:var(--nv-tinta);border:1px solid var(--nv-linha);
  border-radius:4px;font-weight:600;box-shadow:none}
body[class*="nv-"] .btn:hover{border-color:var(--nv-verde);color:var(--nv-verde-700)}
body[class*="nv-"] .btn.ghost{background:#fff;color:var(--nv-tinta)}
body[class*="nv-"] .btn.go,body[class*="nv-"] .btn.acao,body[class*="nv-"] .btn.primario{
  background:var(--nv-acao-forte);border-color:var(--nv-acao-forte);color:#fff;font-weight:700}
body[class*="nv-"] .btn.go:hover,body[class*="nv-"] .btn.acao:hover{
  background:var(--nv-acao-txt);border-color:var(--nv-acao-txt);color:#fff}
/* UMA ação laranja por linha. Confirmação de estado fica verde (é "deu certo",
   não "faça isto"); as secundárias viram contorno. */
body[class*="nv-"] .btn.acao.nf{background:var(--nv-acao-forte);border-color:var(--nv-acao-forte);color:#fff}
body[class*="nv-"] .btn.acao.ok{background:var(--nv-verde);border-color:var(--nv-verde);color:#fff}
body[class*="nv-"] .btn.acao.ok:hover{background:var(--nv-verde-700);border-color:var(--nv-verde-700)}
body[class*="nv-"] .btn.acao.envio{background:#fff;border-color:var(--nv-verde);color:var(--nv-verde-700)}
body[class*="nv-"] .btn.acao.dtf{background:#fff;border-color:#7c3aed;color:#5b21b6}
body[class*="nv-"] input,body[class*="nv-"] select,body[class*="nv-"] textarea{
  background:#fff;border:1px solid var(--nv-linha);border-radius:4px;color:var(--nv-tinta)}
body[class*="nv-"] input:focus,body[class*="nv-"] select:focus,body[class*="nv-"] textarea:focus{
  outline:none;border-color:var(--nv-verde);box-shadow:0 0 0 2px var(--nv-verde-50)}
body[class*="nv-"] .selbox,body[class*="nv-"] input[type=checkbox],
body[class*="nv-"] input[type=radio]{accent-color:var(--nv-verde)}

/* -------------------------------------------------------- STATUS/BADGES ---
   Status em cor, e só ele. Fundo pálido + texto na cor escura (AA). */
body[class*="nv-"] .tag,body[class*="nv-"] .good,body[class*="nv-"] .badge{border-radius:3px;font-weight:700}
body[class*="nv-"] .tag.hoje,body[class*="nv-"] .good,body[class*="nv-"] .badge.nf-ok,
body[class*="nv-"] .badge.e-despachado{background:var(--nv-verde-50);color:var(--nv-verde-700);border-color:transparent}
body[class*="nv-"] .tag.em_breve,body[class*="nv-"] .badge.e-separado{background:#EEF1F3;color:var(--nv-apoio);border-color:transparent}
body[class*="nv-"] .tag.encerrada,body[class*="nv-"] .badge.e-concluido{background:#F2F4F5;color:#77828C;border-color:transparent}
body[class*="nv-"] .warn,body[class*="nv-"] .badge.nf-warn,body[class*="nv-"] .badge.e-a_despachar{
  background:var(--nv-acao-50);color:var(--nv-acao-txt);border-color:transparent}
body[class*="nv-"] .badge.st{background:var(--nv-verde-50);color:var(--nv-verde-700);border-color:transparent}
body[class*="nv-"] .prazo.urg,body[class*="nv-"] .expira.urg{color:var(--c-bad)}
body[class*="nv-"] .expira{color:var(--nv-verde-700)}

/* ============================== V1 · 🏬 SELLER CENTRE =====================
   Fiel à Shopee: chão CINZA-CLARO, cartão branco de borda fina e canto quase
   reto, tabela densa com cabeçalho pálido, e o laranja aparecendo só onde há
   escolha ou ação. É a versão que menos "inventa" — a que menos custa pra
   quem já passa o dia no Seller Centre.                                     */
body.nv-v1{--bg:#F5F5F5;--panel2:#FAFAFA;--chip:#fff;--radius:4px}
body.nv-v1 .wrap{padding:14px 16px;max-width:none}
body.nv-v1 .panel,body.nv-v1 .card,body.nv-v1 .box,body.nv-v1 .bulkbar,body.nv-v1 .ped{
  background:#fff;border:1px solid var(--nv-linha);border-radius:4px;box-shadow:none}
body.nv-v1 .panel{padding:12px 14px;margin-bottom:8px}
body.nv-v1 .h1{font-size:19px}
body.nv-v1 .sub{font-size:12.5px;margin-bottom:10px}
/* faixa de KPI colada, dividida por linha fina — o "resumo" do Seller Centre */
body.nv-v1 .kpis{gap:0;border:1px solid var(--nv-linha);border-radius:4px;background:#fff;margin-bottom:10px}
body.nv-v1 .kpis>.kpi,body.nv-v1 .kpis>.panel{border:0;border-right:1px solid var(--nv-linha-fraca);
  border-radius:0;margin:0;padding:11px 14px;box-shadow:none}
body.nv-v1 .kpis>*:last-child{border-right:0}
body.nv-v1 .kpi .kick{font-size:11px;text-transform:none}
body.nv-v1 .kpi .big{font-size:22px;font-weight:800;color:var(--nv-tinta);margin-top:4px}
/* barra de ferramentas = faixa branca colada no topo do conteúdo */
body.nv-v1 .toolbar{background:#fff;border:1px solid var(--nv-linha);border-radius:4px;
  padding:8px 10px;margin-bottom:8px;gap:7px}
body.nv-v1 .chip,body.nv-v1 .tab,body.nv-v1 .subaba{border-radius:3px;background:#fff;
  border:1px solid var(--nv-linha);color:var(--nv-apoio);font-weight:600}
/* tabela densa: cabeçalho pálido, só linha horizontal, hover na linha */
body.nv-v1 table{border-collapse:collapse;width:100%}
body.nv-v1 table th{background:#FAFAFA;color:var(--nv-apoio);font-weight:700;
  text-transform:uppercase;letter-spacing:.04em;border-bottom:1px solid var(--nv-linha);text-align:left}
body.nv-v1 table td{border-bottom:1px solid var(--nv-linha-fraca)}
body.nv-v1 table tbody tr:hover>td{background:#FAFAFA}
body.nv-v1 .lista-head{background:#FAFAFA;border:1px solid var(--nv-linha);border-radius:4px 4px 0 0;
  border-bottom-width:1px;margin:0 0 6px;color:var(--nv-apoio)}
/* funil: cartão branco de borda fina; o número é preto, a cor fica pro escolhido */
body.nv-v1 .fcard{background:#fff;border:1px solid var(--nv-linha);border-radius:4px}
body.nv-v1 .fcard .fc-n{color:var(--nv-tinta);font-size:21px}
body.nv-v1 .fcard:hover{border-color:var(--nv-verde)}
body.nv-v1 .out{background:#FAFAFA;border-radius:4px}

/* ============================== V2 · 📈 PAINEL EXECUTIVO ==================
   O número manda. Branco total, quase nenhuma moldura: os blocos se separam
   por RESPIRO e por uma linha fina de seção. O que é detalhe encolhe e fica
   cinza; o que decide o dia fica grande. Pensada pra bater o olho e saber o
   estado do negócio antes de mergulhar na lista.                            */
body.nv-v2{--bg:#ffffff;--panel2:#FAFBFC;--chip:#F5F7F8;--radius:10px}
body.nv-v2 .wrap{padding:18px 26px;max-width:none}
body.nv-v2 .h1{font-size:24px;margin-bottom:2px}
body.nv-v2 .sub{font-size:13px;margin-bottom:18px;color:var(--nv-apoio)}
/* cartão sem caixa: separação por linha de seção + muito ar */
body.nv-v2 .panel,body.nv-v2 .card,body.nv-v2 .box{
  background:#fff;border:0;border-top:1px solid var(--nv-linha);border-radius:0;
  box-shadow:none;padding:16px 0 18px;margin-bottom:0}
body.nv-v2 .panel>h2,body.nv-v2 .panel>h3{font-size:15px;margin-bottom:8px}
body.nv-v2 .bulkbar,body.nv-v2 .toolbar{background:#fff;border:0;border-bottom:1px solid var(--nv-linha);
  border-radius:0;padding:10px 0;margin-bottom:12px}
/* NÚMEROS GRANDES no topo: régua de indicadores, sem caixa, com um traço
   verde curto embaixo do rótulo (a única decoração da versão). */
body.nv-v2 .kpis{gap:0;border:0;border-bottom:1px solid var(--nv-linha);
  background:transparent;margin-bottom:16px;padding-bottom:4px}
body.nv-v2 .kpis>.kpi,body.nv-v2 .kpis>.panel{background:transparent;border:0;border-radius:0;
  box-shadow:none;padding:6px 26px 14px 0;margin:0}
/* o traço verde é do RÓTULO (o primeiro .kick); linha de apoio embaixo do
   número continua texto solto, sem sublinhado */
body.nv-v2 .kpi .kick:first-child{font-size:11.5px;font-weight:700;text-transform:none;color:var(--nv-apoio);
  display:inline-block;padding-bottom:5px;border-bottom:2px solid var(--nv-verde)}
body.nv-v2 .kpi .kick{text-transform:none;letter-spacing:.01em}
body.nv-v2 .kpi .big{font-size:38px;font-weight:800;line-height:1;color:var(--nv-tinta);margin-top:11px}
body.nv-v2 .kpi select{margin-top:11px}
/* listas secundárias: tipografia menor e cinza — detalhe não compete com número */
body.nv-v2 table{border-collapse:collapse;width:100%;font-size:12.5px}
body.nv-v2 table th{background:transparent;color:var(--nv-apoio);font-weight:600;
  border-bottom:1px solid var(--nv-linha);text-transform:none;letter-spacing:0;text-align:left}
body.nv-v2 table td{border-bottom:1px solid var(--nv-linha-fraca);color:var(--nv-apoio)}
body.nv-v2 table td:first-child{color:var(--nv-tinta);font-weight:600}
body.nv-v2 .lista-head{background:transparent;border:0;border-bottom:1px solid var(--nv-linha);
  color:var(--nv-apoio);font-weight:600;text-transform:none;letter-spacing:0;margin:0 0 4px}
body.nv-v2 .ped{border:0;border-bottom:1px solid var(--nv-linha-fraca);border-radius:0;
  background:#fff;margin-bottom:0}
body.nv-v2 .ped .top{background:transparent;border-bottom:0;padding-bottom:0}
body.nv-v2 .mini,body.nv-v2 .kv,body.nv-v2 .item .m{font-size:11.5px}
/* funil sem moldura: só número grande + rótulo; o escolhido ganha o laranja */
body.nv-v2 .fcard{background:transparent;border:0;border-bottom:2px solid transparent;
  border-radius:0;padding:8px 14px 8px 0}
body.nv-v2 .fcard .fc-n{font-size:27px;color:var(--nv-tinta)}
body.nv-v2 .fcard .fc-l{font-size:10.5px}
body.nv-v2 .fcard:hover{border-bottom-color:var(--nv-linha)}
body.nv-v2 .fcard.on{background:transparent;border-bottom-color:var(--nv-acao);border-radius:0}
body.nv-v2 .chip,body.nv-v2 .tab,body.nv-v2 .subaba{background:transparent;border:0;
  border-bottom:2px solid transparent;border-radius:0;color:var(--nv-apoio);font-weight:600;padding-left:2px;padding-right:2px;margin-right:12px}
body.nv-v2 .chip.on,body.nv-v2 .tab.on,body.nv-v2 .subaba.on{background:transparent;
  border-bottom-color:var(--nv-acao);color:var(--nv-acao-txt)}

/* ============================== V3 · 🧭 FLUXO DE TRABALHO =================
   A etapa do dia vira a própria navegação: uma TRILHA horizontal numerada no
   topo (o funil do Nero), e cada bloco de conteúdo em faixa larga com selo de
   etapa na esquerda. Serve pra quem chega de manhã e pergunta "e agora?" —
   a tela responde na ordem em que o trabalho acontece.                       */
body.nv-v3{--bg:#ffffff;--panel2:#F7F9FA;--chip:#F5F7F8;--radius:8px}
body.nv-v3 .wrap{padding:14px 20px;max-width:none}
body.nv-v3 .h1{font-size:20px}
body.nv-v3 .sub{font-size:12.5px;margin-bottom:12px}
/* --- a trilha: qualquer contêiner marcado com .fluxo vira etapa numerada --- */
body.nv-v3 .fluxo{display:flex!important;gap:0;align-items:stretch;flex-wrap:nowrap;
  overflow-x:auto;counter-reset:nvpasso;border:1px solid var(--nv-linha);border-radius:8px;
  background:#fff;margin-bottom:12px;padding:0}
body.nv-v3 .fluxo>*{flex:1 1 0;min-width:104px;position:relative;counter-increment:nvpasso;
  background:transparent;border:0;border-right:1px solid var(--nv-linha-fraca);border-radius:0;
  padding:9px 8px 9px 25px;text-align:left;box-shadow:none;min-height:54px}
body.nv-v3 .fluxo>*:last-child{border-right:0}
/* selo redondo com o número da etapa (contador CSS — nada de marcação nova) */
body.nv-v3 .fluxo>*::before{content:counter(nvpasso);position:absolute;left:7px;top:10px;
  width:15px;height:15px;border-radius:50%;background:var(--nv-verde-50);color:var(--nv-verde-700);
  font-size:9px;font-weight:800;display:grid;place-items:center}
body.nv-v3 .fluxo>*:hover{background:var(--nv-verde-50)}
body.nv-v3 .fluxo>.on,body.nv-v3 .fluxo>.sel{background:var(--nv-acao-50);
  box-shadow:inset 0 -3px 0 var(--nv-acao)}
body.nv-v3 .fluxo>.on::before,body.nv-v3 .fluxo>.sel::before{background:var(--nv-acao);color:#fff}
body.nv-v3 .fluxo>.on .fc-n,body.nv-v3 .fluxo>.on .fc-l{color:var(--nv-acao-txt)}
body.nv-v3 .fluxo .fc-n{font-size:22px;color:var(--nv-tinta)}
body.nv-v3 .fluxo .fc-l{font-size:9.5px}
/* espaçador e botão sem rótulo de etapa (ex.: o 🔄 no fim da trilha) */
body.nv-v3 .fluxo>span,body.nv-v3 .fluxo>.sem-passo{flex:0 0 auto;min-width:0;counter-increment:none;padding:0}
body.nv-v3 .fluxo>span::before,body.nv-v3 .fluxo>.sem-passo::before{display:none}
/* --- conteúdo em faixa: cartão largo com fita verde e ar interno --- */
body.nv-v3 .panel,body.nv-v3 .card,body.nv-v3 .box{background:#fff;border:1px solid var(--nv-linha);
  border-left:3px solid var(--nv-verde);border-radius:0 8px 8px 0;box-shadow:none;
  padding:13px 16px;margin-bottom:10px}
body.nv-v3 .panel.on,body.nv-v3 .card.on{border-left-color:var(--nv-acao)}
body.nv-v3 .toolbar{background:#F7F9FA;border:1px solid var(--nv-linha);border-radius:8px;
  padding:8px 12px;margin-bottom:10px;gap:8px}
body.nv-v3 .bulkbar{background:#fff;border:1px solid var(--nv-linha);border-left:3px solid var(--nv-acao);
  border-radius:0 8px 8px 0}
/* régua de indicadores em fila, com seta entre um e outro (a leitura é sequência) */
body.nv-v3 .kpis{display:flex;flex-wrap:wrap;gap:0;align-items:stretch;margin-bottom:12px}
body.nv-v3 .kpis>.kpi,body.nv-v3 .kpis>.panel{border:1px solid var(--nv-linha);border-left:0;
  border-radius:0;box-shadow:none;padding:10px 16px;margin:0;position:relative;min-width:150px}
body.nv-v3 .kpis>*:first-child{border-left:1px solid var(--nv-linha);border-radius:8px 0 0 8px}
body.nv-v3 .kpis>*:last-child{border-radius:0 8px 8px 0}
body.nv-v3 .kpi .kick{font-size:11px;text-transform:none;font-weight:700}
body.nv-v3 .kpi .big{font-size:24px;color:var(--nv-tinta);margin-top:5px}
body.nv-v3 table{border-collapse:collapse;width:100%}
body.nv-v3 table th{background:#F7F9FA;color:var(--nv-apoio);font-weight:700;
  border-bottom:1px solid var(--nv-linha);text-align:left}
body.nv-v3 table td{border-bottom:1px solid var(--nv-linha-fraca)}
body.nv-v3 table tbody tr:hover>td{background:#F7F9FA}
body.nv-v3 .ped{background:#fff;border:1px solid var(--nv-linha);border-left:3px solid var(--nv-verde);
  border-radius:0 8px 8px 0}
body.nv-v3 .lista-head{background:#F7F9FA;border:1px solid var(--nv-linha);border-radius:8px;
  color:var(--nv-apoio);margin:0 0 6px}
body.nv-v3 .chip,body.nv-v3 .tab,body.nv-v3 .subaba{border-radius:999px;background:#fff;
  border:1px solid var(--nv-linha);color:var(--nv-apoio);font-weight:600}
/* dentro da TRILHA o botão não é pílula: é a célula da etapa. Precisa vir
   depois da regra de pílula acima (mesma especificidade, último vence). */
body.nv-v3 .fluxo>.tab,body.nv-v3 .fluxo>.chip,body.nv-v3 .fluxo>.fcard{
  border-radius:0;border:0;border-right:1px solid var(--nv-linha-fraca);background:transparent}
body.nv-v3 .fluxo>.tab:last-child,body.nv-v3 .fluxo>.chip:last-child,
body.nv-v3 .fluxo>.fcard:last-child{border-right:0}
body.nv-v3 .fluxo>.on,body.nv-v3 .fluxo>.sel{border-color:transparent;
  border-right:1px solid var(--nv-linha-fraca);background:var(--nv-acao-50)}
body.nv-v3 .fluxo .fc-l{white-space:normal;line-height:1.2;font-size:9px;letter-spacing:0;
  overflow:visible;text-overflow:clip}
/* o 🔄 do fim da trilha não é etapa: fica estreito, centrado e sem número */
body.nv-v3 .fluxo>.sem-passo{flex:0 0 auto;min-width:44px;padding:0 10px;
  display:flex;align-items:center;justify-content:center;counter-increment:none}
body.nv-v3 .fluxo>.sem-passo::before{display:none}

/* -------------------------------------------------- LEGIBILIDADE FINAL ----
   Sobras de fundo escuro que ficariam ilegíveis no branco (as telas antigas
   trazem alguns hexes fixos no HTML/inline). Aqui não dá pra trocar o inline,
   então a camada normaliza o que é estrutural. */
body[class*="nv-"] .out,body[class*="nv-"] pre{background:var(--panel2);border:1px solid var(--nv-linha);color:var(--nv-tinta)}
body[class*="nv-"] .mais-menu,body[class*="nv-"] .obs-tip .obs-bubble{box-shadow:0 8px 24px rgba(16,24,40,.12)}
body[class*="nv-"] .badge.canal-shopee{color:var(--nv-acao-txt);border-color:var(--nv-acao);background:var(--nv-acao-50)}
body[class*="nv-"] .badge.canal-ml{color:#7A5B00;border-color:#E4C86B;background:#FDF6E3}
/* impressão continua branca e sem moldura, como já era */
@media print{body[class*="nv-"] .panel,body[class*="nv-"] .ped{border-color:#ccc}}