/* =====================================================================
   NV-UI — CAMADA VISUAL COMPARTILHADA DO ERP (10/10/2026)
   ---------------------------------------------------------------------
   Pedido do dono (09/10): "fazer o sistema conversar de forma única no que
   diz respeito ao padrão de cores, fontes — todos os módulos precisam
   conversar visualmente entre si; a listagem de cliente aparece com visual
   diferente entre os módulos".

   Este arquivo é a FONTE ÚNICA de:
     1. tokens de tipo, raio, sombra, mesa e MOVIMENTO (as cores de marca e de
        semântica continuam em style.css › "ERP — TEMA CLARO", :root --nv-*);
     2. componentes canônicos .nvu-* (cabeçalho de tela, abas, botões, cartão,
        estado vazio, seletor de cliente);
     3. o vocabulário de dado sk-* / .nvsku-t (pílulas, número julgado, tabela
        compacta) — que até hoje vivia DENTRO do <style> da Análise de Vendas;
     4. pontes: regras que puxam classes antigas dos módulos para o mesmo
        desenho, sem reescrever o markup de cada tela.

   Carregado em TODA página (inc/ui.php), depois de style.css e de
   nv-ux-components.css. Tudo aqui é preso a `body.nv-erp-mode` (o site
   institucional não é tocado). Os <style> inline dos templates vêm DEPOIS
   no documento: para a camada valer sobre eles a regra precisa de
   especificidade maior — por isso o prefixo `body.nv-erp-mode`.

   MOVIMENTO: toda transição/animação da camada usa os tokens --nv-dur-* /
   --nv-ease-*; mude ali e o sistema inteiro acompanha. Os pontos de hover
   e aba estão marcados com "MOTION:"; entrada de conteúdo, esqueleto,
   gráficos, drawer, dropdown e toast moram na seção 11, com o par JS em
   assets/js/nv-motion.js (window.NVMotion).
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. TOKENS
   --------------------------------------------------------------------- */
body.nv-erp-mode {
    /* FAMÍLIA — uma só. IBM Plex Sans (functions.php › nexum-fonts). */
    --nv-font: var(--font-body, 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
    --nv-font-mono: var(--font-mono, 'IBM Plex Mono', Menlo, monospace);

    /* ESCALA DE TAMANHO — oito degraus e nada entre eles (px a 16 de base).
       2xs 11 · xs 12 · sm 13 · base 14 · md 16 · lg 18 · xl 21 · hero 24  */
    --nv-fs-2xs: .6875rem;   /* selo, pílula, contador */
    --nv-fs-xs: .75rem;      /* rótulo, legenda, 2ª linha de célula */
    --nv-fs-sm: .8125rem;    /* corpo de tabela, botão, controle de formulário */
    --nv-fs-base: .875rem;   /* texto corrido */
    --nv-fs-md: 1rem;        /* título de cartão */
    --nv-fs-lg: 1.125rem;    /* título de seção */
    --nv-fs-xl: 1.3rem;      /* título da tela (cabeçalho) */
    --nv-fs-hero: 1.5rem;    /* o número que o grupo de KPI responde */
    /* PESOS — 600 corpo/controle · 700 ênfase · 800 só título de tela e número que lidera */

    /* RAIO, SOMBRA, MESA */
    --nv-r-xs: 6px;
    --nv-r-sm: 8px;
    --nv-r-md: 12px;
    --nv-r-lg: 16px;
    --nv-r-pill: 999px;
    --nv-sh-1: 0 1px 2px rgba(28, 25, 23, .05);
    --nv-sh-2: 0 1px 2px rgba(28, 25, 23, .05), 0 10px 26px -16px rgba(28, 25, 23, .32);
    --nv-sh-3: 0 2px 4px rgba(28, 25, 23, .06), 0 18px 36px -18px rgba(28, 25, 23, .36);
    --nv-ring: 0 0 0 3px rgba(227, 114, 32, .22);
    --nv-desk: #f5f3f0;      /* "mesa" do módulo (fundo atrás dos cartões) */
    --nv-hover-row: #fdfcfa;

    /* SEMÂNTICA EM TINTA (pílula/aviso) — i = texto, b = borda, s = fundo */
    --nv-ok-i: #2f7a5e;   --nv-ok-b: #cfe3d8;   --nv-ok-s: #eff6f2;
    --nv-warn-i: #8a5216; --nv-warn-b: #f3ddbd; --nv-warn-s: #fff8ee;
    --nv-bad-i: #983026;  --nv-bad-b: #f1cdc7;  --nv-bad-s: #fcf1ef;
    --nv-mut-i: #6b6560;  --nv-mut-b: #e4ded7;  --nv-mut-s: #f7f5f2;

    /* MOVIMENTO — o próximo passo (motion design) mexe só aqui.
       fast = hover/foco · base = troca de estado · slow = entrar/sair de painel */
    --nv-dur-fast: 120ms;
    --nv-dur-base: 200ms;
    --nv-dur-slow: 320ms;
    --nv-ease-out: cubic-bezier(.2, .7, .2, 1);
    --nv-ease-in-out: cubic-bezier(.4, 0, .2, 1);
    --nv-lift: -1px;         /* quanto um cartão clicável sobe no hover */
    --nv-dur-enter: 220ms;   /* conteúdo que chega (troca o esqueleto)      */
    --nv-dur-chart: 480ms;   /* entrada de gráfico (SVG e Chart.js)         */
    --nv-shift: 6px;         /* deslocamento da entrada — teto do brief: 8px */
    --nv-step: 30ms;         /* escalonamento entre cartões (8 × 30 = 240ms) */
    --nv-skel: #ece7e1;      /* tinta do esqueleto                           */

    /* Vocabulário sk-* (Análise de Vendas, Monitoramento, Full, Pacote ML):
       os nomes antigos continuam valendo, agora declarados num lugar só. */
    --sk-hero: 1.22rem; --sk-tit: .88rem; --sk-corpo: .78rem; --sk-meta: .7rem; --sk-selo: .655rem;
    --sk-ok-i: var(--nv-ok-i);   --sk-ok-b: var(--nv-ok-b);   --sk-ok-s: var(--nv-ok-s);
    --sk-war-i: var(--nv-warn-i); --sk-war-b: var(--nv-warn-b); --sk-war-s: var(--nv-warn-s);
    --sk-bad-i: var(--nv-bad-i); --sk-bad-b: var(--nv-bad-b); --sk-bad-s: var(--nv-bad-s);
    --sk-mut-i: var(--nv-mut-i); --sk-mut-b: var(--nv-mut-b); --sk-mut-s: var(--nv-mut-s);
}
@media (prefers-reduced-motion: reduce) {
    body.nv-erp-mode { --nv-dur-fast: 0ms; --nv-dur-base: 0ms; --nv-dur-slow: 0ms; --nv-lift: 0px;
        --nv-dur-enter: 0ms; --nv-dur-chart: 0ms; --nv-shift: 0px; --nv-step: 0ms; }
}

/* ---------------------------------------------------------------------
   2. BASE — uma família, inclusive nos controles de formulário
   O navegador NÃO herda a fonte em input/select/textarea/button: cada tela
   que não declarava `font-family:inherit` mostrava os controles em Arial
   ao lado do texto em Plex (PromoManager, Custos por SKU, De/Para...).
   --------------------------------------------------------------------- */
body.nv-erp-mode .nv-erp-layout__main,
body.nv-erp-mode .nv-inicio-full,
body.nv-erp-mode .nv-ini { font-family: var(--nv-font); }
body.nv-erp-mode .nv-erp-layout__main :is(input, select, textarea, button),
body.nv-erp-mode .nv-ini :is(input, select, textarea, button) { font-family: inherit; }
body.nv-erp-mode .nv-erp-layout__main :is(code, kbd, samp, pre) { font-family: var(--nv-font-mono); }

/* ---------------------------------------------------------------------
   3. CABEÇALHO DE TELA (.nvu-head) — o desenho da Análise de Vendas,
   escrito uma vez: faixa branca→pêssego, fio laranja de 3 px no topo,
   ladrilho de ícone, título 1.3rem/800, cliente separado por fio,
   ações à direita. Hierarquia por peso e cor, nunca por caixa-alta.
   Markup: nv_ui_head() em inc/ui.php.
   --------------------------------------------------------------------- */
body.nv-erp-mode .nvu-head {
    background: var(--nv-head-bg);
    border: 1px solid var(--nv-line);
    border-top: 3px solid var(--nv-primary);
    border-radius: var(--nv-r-md);
    box-shadow: var(--nv-sh-1);
    padding: 14px 20px;
    margin: 0 0 18px;
    color: var(--nv-ink-soft);
    display: flex; align-items: center; gap: 12px 16px; flex-wrap: wrap;
}
body.nv-erp-mode .nvu-head__ic {
    width: 36px; height: 36px; border-radius: 10px; flex: 0 0 auto;
    display: grid; place-items: center;
    background: var(--nv-primary-soft); color: var(--nv-primary);
    box-shadow: inset 0 0 0 1px var(--nv-primary-line);
    font-size: 1.1rem; line-height: 1;
}
body.nv-erp-mode .nvu-head__ic :is(svg, img) { width: 19px; height: 19px; }
body.nv-erp-mode .nvu-head__tt { flex: 1 1 320px; min-width: 0; }
body.nv-erp-mode .nvu-head__tt h1,
body.nv-erp-mode .nvu-head h1.nvu-head__h {
    margin: 0; font-family: var(--nv-font); font-size: var(--nv-fs-xl); font-weight: 800;
    letter-spacing: -.02em; line-height: 1.2; color: var(--nv-ink);
}
body.nv-erp-mode .nvu-head__cli {
    font-size: .92rem; font-weight: 700; color: var(--nv-muted);
    margin-left: 10px; padding-left: 11px; border-left: 1px solid var(--nv-line); white-space: nowrap;
}
body.nv-erp-mode .nvu-head__lead { margin: 4px 0 0; font-size: var(--nv-fs-sm); color: var(--nv-muted); line-height: 1.5; max-width: 80ch; }
body.nv-erp-mode .nvu-head__acoes { margin-left: auto; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* ---------------------------------------------------------------------
   4. ABAS (.nvu-tabs) — texto muted; ativa = tinta + sublinhado laranja 3 px.
   MOTION: a cor e o sublinhado trocam em --nv-dur-fast.
   --------------------------------------------------------------------- */
body.nv-erp-mode .nvu-tabs { display: flex; gap: 2px; flex-wrap: wrap; border-bottom: 1px solid var(--nv-line); margin: 0 0 14px; }
body.nv-erp-mode .nvu-tab {
    display: inline-flex; align-items: center; gap: 7px; padding: 10px 14px 9px; margin-bottom: -1px;
    border: 0; border-bottom: 3px solid transparent; background: transparent; cursor: pointer;
    font: 700 var(--nv-fs-base)/1.2 var(--nv-font); color: var(--nv-muted); text-decoration: none; white-space: nowrap;
    transition: color var(--nv-dur-fast) var(--nv-ease-out), border-color var(--nv-dur-fast) var(--nv-ease-out);
}
body.nv-erp-mode .nvu-tab:hover { color: var(--nv-ink); }
body.nv-erp-mode .nvu-tab:is(.is-on, .on, [aria-current="page"], [aria-selected="true"]) { color: var(--nv-ink); border-bottom-color: var(--nv-primary); }
body.nv-erp-mode .nvu-tab .n { font-size: var(--nv-fs-2xs); font-weight: 700; background: var(--nv-line-soft); color: var(--nv-ink-soft); border-radius: var(--nv-r-xs); padding: 1px 6px; font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------------
   5. BOTÕES (.nvu-btn) — o secundário é branco com borda; hover tinta
   pêssego + texto laranja-escuro. O primário é laranja.
   (Cor do texto do primário: o sistema usa BRANCO na maioria das telas e
   grafite nas repaginadas — decisão de marca pendente, ver RELATORIO.)
   --------------------------------------------------------------------- */
body.nv-erp-mode .nvu-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    min-height: 34px; padding: 7px 13px; border-radius: var(--nv-r-sm);
    border: 1px solid var(--nv-line); background: #fff; color: var(--nv-ink-soft);
    font: 600 var(--nv-fs-sm)/1.2 var(--nv-font); text-decoration: none; cursor: pointer; white-space: nowrap;
    transition: background-color var(--nv-dur-fast) var(--nv-ease-out), border-color var(--nv-dur-fast) var(--nv-ease-out), color var(--nv-dur-fast) var(--nv-ease-out);
}
body.nv-erp-mode .nvu-btn:hover { background: var(--nv-primary-soft); border-color: var(--nv-primary-line); color: var(--nv-primary-ink-2); }
body.nv-erp-mode .nvu-btn:focus-visible { outline: 2px solid var(--nv-primary); outline-offset: 2px; }
body.nv-erp-mode .nvu-btn :is(svg) { width: 15px; height: 15px; flex: 0 0 auto; }
body.nv-erp-mode .nvu-btn--primary { background: var(--nv-primary); border-color: var(--nv-primary); color: #fff; }
body.nv-erp-mode .nvu-btn--primary:hover { background: #cf6416; border-color: #cf6416; color: #fff; }
body.nv-erp-mode .nvu-btn--ghost { background: transparent; border-color: transparent; color: var(--nv-muted); }
body.nv-erp-mode .nvu-btn--ghost:hover { background: var(--nv-primary-soft); border-color: transparent; color: var(--nv-primary-ink-2); }
body.nv-erp-mode .nvu-btn--sm { min-height: 28px; padding: 4px 10px; font-size: var(--nv-fs-xs); }
body.nv-erp-mode .nvu-btn[disabled], body.nv-erp-mode .nvu-btn.is-off { opacity: .5; cursor: not-allowed; }
/* "← Trocar cliente" e afins: link de volta discreto, o mesmo em toda tela */
body.nv-erp-mode .nvu-volta { font-size: var(--nv-fs-sm); font-weight: 700; color: var(--nv-primary-ink); text-decoration: none; white-space: nowrap; }
body.nv-erp-mode .nvu-volta:hover { text-decoration: underline; }

/* ---------------------------------------------------------------------
   6. CARTÃO, KPI e ESTADO VAZIO
   --------------------------------------------------------------------- */
body.nv-erp-mode .nvu-card { background: #fff; border: 1px solid var(--nv-line); border-radius: var(--nv-r-md); box-shadow: var(--nv-sh-1); padding: 14px 16px; }
body.nv-erp-mode .nvu-card__tt { margin: 0 0 8px; font-size: var(--nv-fs-md); font-weight: 800; color: var(--nv-ink); }
body.nv-erp-mode .nvu-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
body.nv-erp-mode .nvu-kpi { background: #fff; border: 1px solid var(--nv-line); border-radius: var(--nv-r-md); padding: 11px 14px; min-width: 0; }
body.nv-erp-mode .nvu-kpi__l { display: block; font-size: var(--nv-fs-xs); font-weight: 600; color: var(--nv-muted); }
body.nv-erp-mode .nvu-kpi__v { display: block; font-size: var(--nv-fs-hero); font-weight: 800; color: var(--nv-ink); letter-spacing: -.02em; line-height: 1.2; font-variant-numeric: tabular-nums; }
body.nv-erp-mode .nvu-kpi__d { display: block; font-size: var(--nv-fs-xs); color: var(--nv-muted); }
body.nv-erp-mode .nvu-vazio {
    text-align: center; padding: 34px 20px; color: var(--nv-muted); font-size: var(--nv-fs-base);
    background: #fff; border: 1px dashed var(--nv-line); border-radius: var(--nv-r-md);
}
body.nv-erp-mode .nvu-vazio b, body.nv-erp-mode .nvu-vazio strong { display: block; color: var(--nv-ink); font-size: var(--nv-fs-md); margin-bottom: 4px; }

/* ---------------------------------------------------------------------
   7. SELETOR DE CLIENTE (.nvcp) — inc/cliente-picker.php
   Um só desenho em todo módulo: cabeçalho .nvu-head + grade de cartões
   com monograma (ou avatar). Antes: fonte do sistema, tinta azulada
   (#161a25/#64748b/#8a92a4), foco VERDE, e cada módulo embrulhava o
   seletor num cabeçalho diferente (título solto, masthead, nada).
   MOTION: cartão sobe --nv-lift e ganha --nv-sh-2 no hover.
   --------------------------------------------------------------------- */
body.nv-erp-mode .nvcp { font-family: var(--nv-font); color: var(--nv-ink); }
body.nv-erp-mode .nvcp * { box-sizing: border-box; }
body.nv-erp-mode .nvcp-lead { color: var(--nv-muted); font-size: var(--nv-fs-base); margin: 2px 0 14px; }
body.nv-erp-mode .nvcp-vazio { color: var(--nv-muted); font-size: var(--nv-fs-base); text-align: center; padding: 34px 0; background: #fff; border: 1px dashed var(--nv-line); border-radius: var(--nv-r-md); }
body.nv-erp-mode .nvcp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
body.nv-erp-mode .nvcp-card {
    display: flex; flex-direction: column; gap: 10px; padding: 12px 14px; min-width: 0;
    background: #fff; border: 1px solid var(--nv-line); border-radius: var(--nv-r-md); box-shadow: var(--nv-sh-1);
    text-decoration: none; color: var(--nv-ink); font-weight: 700;
    transition: transform var(--nv-dur-fast) var(--nv-ease-out), border-color var(--nv-dur-fast) var(--nv-ease-out);
}
body.nv-erp-mode .nvcp-card:hover { transform: translateY(var(--nv-lift)); border-color: var(--nv-primary-line); box-shadow: var(--nv-sh-2); }
body.nv-erp-mode .nvcp-card:focus-visible { outline: 2px solid var(--nv-primary); outline-offset: 2px; }
body.nv-erp-mode .nvcp-top { display: flex; align-items: center; gap: 11px; min-width: 0; }
body.nv-erp-mode .nvcp-mono {
    width: 34px; height: 34px; border-radius: 10px; flex: 0 0 auto; display: grid; place-items: center;
    background: var(--nv-primary-soft); color: var(--nv-primary-ink-2); box-shadow: inset 0 0 0 1px var(--nv-primary-line);
    font-size: .9rem; font-weight: 800; letter-spacing: -.02em;
    transition: background-color var(--nv-dur-fast) var(--nv-ease-out), color var(--nv-dur-fast) var(--nv-ease-out);
}
body.nv-erp-mode .nvcp-card:hover .nvcp-mono { background: var(--nv-primary); color: #fff; box-shadow: none; }
body.nv-erp-mode .nvcp-av { flex: none; display: inline-flex; }
body.nv-erp-mode .nvcp-av .nvcp-av-img { border-radius: 10px; display: block; width: 34px; height: 34px; object-fit: contain; background: #fff; box-shadow: inset 0 0 0 1px var(--nv-line); }
body.nv-erp-mode .nvcp-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
body.nv-erp-mode .nvcp-nm { font-size: var(--nv-fs-base); font-weight: 700; color: var(--nv-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.nv-erp-mode .nvcp-sub { font-size: var(--nv-fs-xs); font-weight: 600; color: var(--nv-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.nv-erp-mode .nvcp-kpis { display: flex; gap: 14px; border-top: 1px solid var(--nv-line-soft); padding-top: 9px; }
body.nv-erp-mode .nvcp-kpi { display: flex; flex-direction: column; min-width: 0; }
body.nv-erp-mode .nvcp-kpi b { font-size: var(--nv-fs-md); font-weight: 800; line-height: 1.15; color: var(--nv-ink); font-variant-numeric: tabular-nums; }
body.nv-erp-mode .nvcp-kpi i { font-size: var(--nv-fs-2xs); font-style: normal; font-weight: 600; color: var(--nv-muted); }
body.nv-erp-mode .nvcp-kpi.is-warn b { color: var(--nv-warn); }
body.nv-erp-mode .nvcp-card--off { opacity: .62; }
@media (max-width: 520px) { body.nv-erp-mode .nvcp-grid { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------------
   8. VOCABULÁRIO DE DADO sk-* e TABELA COMPACTA .nvsku-t
   Movido de page-analise-vendas.php (era o único lugar; telas novas que
   usavam as classes nasciam sem estilo — ver memória nv-sk-design-inline).
   As variáveis --line/--muted/--ink-2/--accent* são as da tela que hospeda
   (Análise de Vendas e Monitoramento declaram); fora delas cai no token
   global.

   GRAMÁTICA DAS PÍLULAS — três tipos, e só três:
     1. ESTADO (.sk-st)  — ciclo de vida DA LINHA; ponto + texto; a cor é o veredito.
     2. SELO  (.sk-tag)  — atributo durável do item; contorno, sem fundo.
     3. AVISO (.sk-warn) — alerta sobre o DADO; âmbar com barra.
   Número julgado não é pílula: .sk-num (tabular + ponto da cor do veredito).
   --------------------------------------------------------------------- */
body.nv-erp-mode .nvsku-t { width: 100%; border-collapse: collapse; font-size: var(--sk-corpo); }
body.nv-erp-mode .nvsku-t th { text-align: left; font-size: .67rem; font-weight: 700; color: var(--muted, var(--nv-muted)); text-transform: none;
    padding: 7px 9px; border-bottom: 1px solid var(--line, var(--nv-line)); white-space: nowrap; }
/* vertical-align:middle — `top` abria um vão sob a célula de canal quando a vizinha era mais alta */
body.nv-erp-mode .nvsku-t td { padding: 7px 9px; border-bottom: 1px solid var(--line-2, var(--nv-line-soft)); color: var(--ink-2, var(--nv-ink-soft)); vertical-align: middle; }
body.nv-erp-mode .nvsku-t tbody tr:last-child td { border-bottom: 0; }
body.nv-erp-mode .nvsku-t tbody tr:hover td { background: var(--nv-hover-row); }
body.nv-erp-mode .nvsku-t .n { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
body.nv-erp-mode .nvsku-t .mono { font-variant-numeric: tabular-nums; }
body.nv-erp-mode .nvsku-t .ds { max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.nv-erp-mode .nvsku-t .ds.tit { max-width: 280px; }
body.nv-erp-mode .nvsku-t td.selos { min-width: 200px; line-height: 1.9; }
body.nv-erp-mode .nvsku-t td.selos .sk-tag { margin: 0 3px 0 0; }
body.nv-erp-mode .nvsku-t a, body.nv-erp-mode .nvsku-fatos a { color: var(--accent-ink, var(--nv-primary-ink-2)); font-weight: 700; text-decoration: none; }
body.nv-erp-mode .nvsku-t a:hover { text-decoration: underline; }
/* LINHA-CABEÇALHO DE GRUPO — o valor constante da coluna sobe para cá */
body.nv-erp-mode .nvsku-t tr.ghd > td { background: #faf8f6; border-top: 1px solid var(--line, var(--nv-line)); border-bottom: 1px solid var(--line-2, var(--nv-line-soft));
    padding: 6px 9px; font-size: .73rem; color: var(--ink, var(--nv-ink)); font-weight: 700; }
body.nv-erp-mode .nvsku-t tbody tr.ghd:first-child > td { border-top: 0; }
body.nv-erp-mode .nvsku-t tr.ghd:hover > td { background: #faf8f6; }
body.nv-erp-mode .nvsku-t tr.ghd .gh { display: inline-flex; align-items: center; gap: 7px; vertical-align: middle; }
body.nv-erp-mode .nvsku-t tr.ghd .gh img { width: 15px; height: 15px; border-radius: 50%; object-fit: contain; flex: 0 0 auto; }
body.nv-erp-mode .nvsku-t tr.ghd .gc { color: var(--muted, var(--nv-muted)); font-weight: 600; font-size: var(--sk-meta); }
body.nv-erp-mode .nvsku-t tr.ghd .gr { float: right; color: var(--muted, var(--nv-muted)); font-weight: 600; font-size: var(--sk-meta); font-variant-numeric: tabular-nums; }
/* CORTE — tabela longa guarda o resto atrás de um botão (linhas já no DOM) */
body.nv-erp-mode .nvsku-t tr.sk-extra[hidden] { display: none; }   /* ver [[nv-hidden-display]] */
body.nv-erp-mode .sk-mais { font-family: inherit; font-size: .73rem; font-weight: 700; color: var(--accent-ink, var(--nv-primary-ink-2)); background: #fff;
    border: 1px solid var(--line, var(--nv-line)); border-radius: var(--nv-r-pill); padding: 5px 14px; cursor: pointer; margin: 9px 0 0;
    transition: background-color var(--nv-dur-fast) var(--nv-ease-out), border-color var(--nv-dur-fast) var(--nv-ease-out); }
body.nv-erp-mode .sk-mais:hover { background: var(--accent-soft, var(--nv-primary-soft)); border-color: var(--accent-line, var(--nv-primary-line)); }
body.nv-erp-mode .sk-mais:focus-visible { outline: 2px solid var(--accent, var(--nv-primary)); outline-offset: 2px; }

body.nv-erp-mode .sk-st { display: inline-flex; align-items: center; gap: 5px; font-size: var(--sk-selo); font-weight: 700;
    padding: 2px 8px 2px 7px; border-radius: var(--nv-r-pill); border: 1px solid var(--sk-mut-b); background: var(--sk-mut-s);
    color: var(--sk-mut-i); white-space: nowrap; line-height: 1.45; }
body.nv-erp-mode .sk-st::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; flex: 0 0 auto; }
body.nv-erp-mode .sk-st.ok { border-color: var(--sk-ok-b); background: var(--sk-ok-s); color: var(--sk-ok-i); }
body.nv-erp-mode .sk-st.war { border-color: var(--sk-war-b); background: var(--sk-war-s); color: var(--sk-war-i); }
body.nv-erp-mode .sk-st.bad { border-color: var(--sk-bad-b); background: var(--sk-bad-s); color: var(--sk-bad-i); }
body.nv-erp-mode .sk-tag { display: inline-block; font-size: var(--sk-selo); font-weight: 700; padding: 1px 7px; border-radius: 5px;
    border: 1px solid var(--line, var(--nv-line)); background: transparent; color: var(--muted, var(--nv-muted)); white-space: nowrap;
    line-height: 1.5; font-variant-numeric: tabular-nums; }
/* Dois selos saem do cinza: catálogo muda o REGIME de venda, Ads custa todo dia */
body.nv-erp-mode .sk-tag.cat { border-color: #d8d2ea; color: #51457e; }
body.nv-erp-mode .sk-tag.ads { border-color: var(--sk-war-b); color: var(--sk-war-i); }
body.nv-erp-mode .sk-warn { display: inline-block; font-size: var(--sk-selo); font-weight: 700; padding: 1px 7px 1px 6px;
    border-radius: 4px; border: 1px solid var(--sk-war-b); border-left-width: 3px; background: var(--sk-war-s);
    color: var(--sk-war-i); white-space: nowrap; line-height: 1.5; }
body.nv-erp-mode .sk-num { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--ink-2, var(--nv-ink-soft));
    display: inline-flex; align-items: center; gap: 5px; }
body.nv-erp-mode .sk-num::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--sk-mut-i); flex: 0 0 auto; }
body.nv-erp-mode .sk-num.ok::before { background: var(--sk-ok-i); }  body.nv-erp-mode .sk-num.ok { color: var(--sk-ok-i); }
body.nv-erp-mode .sk-num.war::before { background: var(--sk-war-i); } body.nv-erp-mode .sk-num.war { color: var(--sk-war-i); }
body.nv-erp-mode .sk-num.bad::before { background: var(--sk-bad-i); } body.nv-erp-mode .sk-num.bad { color: var(--sk-bad-i); }
body.nv-erp-mode .nvsku-t .n .sk-num { justify-content: flex-end; }
/* Semáforo de reputação */
body.nv-erp-mode .sk-rep { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-left: 5px; vertical-align: middle; flex: 0 0 auto; }

/* LINHA DO TEMPO (.sk-tl) — cada linha é uma DECISÃO, e decisão tem texto */
body.nv-erp-mode .sk-tl { position: relative; margin: 4px 0 0; padding-left: 21px; }
body.nv-erp-mode .sk-tl::before { content: ""; position: absolute; left: 6px; top: 7px; bottom: 7px; width: 2px;
    background: linear-gradient(to bottom, var(--line, var(--nv-line)), var(--line-2, var(--nv-line-soft))); border-radius: 2px; }
body.nv-erp-mode .sk-tl-it { position: relative; padding: 9px 0 11px; border-bottom: 1px solid var(--line-2, var(--nv-line-soft)); }
body.nv-erp-mode .sk-tl-it:last-child { border-bottom: 0; padding-bottom: 2px; }
body.nv-erp-mode .sk-tl-it::before { content: ""; position: absolute; left: -18px; top: 14px; width: 9px; height: 9px; border-radius: 50%;
    background: var(--accent, var(--nv-primary)); border: 2px solid #fff; box-shadow: 0 0 0 1.5px var(--accent, var(--nv-primary)); }
body.nv-erp-mode .sk-tl-it.det::before { background: #fff; box-shadow: 0 0 0 1.5px var(--muted2, #78716c); }
body.nv-erp-mode .sk-tl-it.nota::before { background: var(--muted2, #78716c); box-shadow: 0 0 0 1.5px var(--muted2, #78716c); }
body.nv-erp-mode .sk-tl-it.ign { opacity: .55; }
body.nv-erp-mode .sk-tl-it.ign::before { background: #fff; box-shadow: 0 0 0 1.5px var(--line, var(--nv-line)); }
body.nv-erp-mode .sk-tl-tp { display: flex; align-items: center; gap: 5px 9px; flex-wrap: wrap; }
body.nv-erp-mode .sk-tl-dt { font-size: var(--sk-corpo); font-weight: 800; color: var(--ink, var(--nv-ink)); font-variant-numeric: tabular-nums; }
body.nv-erp-mode .sk-tl-pr { font-size: var(--sk-corpo); font-weight: 700; color: var(--ink-2, var(--nv-ink-soft)); font-variant-numeric: tabular-nums; white-space: nowrap; }
body.nv-erp-mode .sk-tl-pr i { font-style: normal; color: var(--muted2, #78716c); margin: 0 3px; }
body.nv-erp-mode .sk-tl-var { font-size: var(--sk-selo); font-weight: 800; font-variant-numeric: tabular-nums; }
body.nv-erp-mode .sk-tl-var.up { color: #276b52; } body.nv-erp-mode .sk-tl-var.down { color: #983026; }
body.nv-erp-mode .sk-tl-tx { font-size: var(--sk-corpo); color: var(--ink-2, var(--nv-ink-soft)); line-height: 1.55; margin-top: 5px; white-space: pre-wrap; }

/* ---------------------------------------------------------------------
   9. PONTES — classes antigas puxadas para o desenho canônico.
   Cada bloco diz de qual tela vem. Mexer aqui muda o módulo inteiro.
   --------------------------------------------------------------------- */

/* 9.1 Cabeçalho legado .nv-crm-header (≈110 telas: Precificação, ML,
   Shopee, Controle Financeiro › lista, Tráfego...). Mesmo título que o
   .nvu-head: 1.3rem/800 (antes 1.35 com !important em style.css). */
body.nv-erp-mode .nv-erp-page .nv-crm-header h1 { font-size: var(--nv-fs-xl) !important; letter-spacing: -.02em; }

/* 9.2 Seletor de cliente dentro do contêiner .nv-tp-wrap (Precificação,
   Controle Financeiro): o mesmo respiro de topo das telas que o embrulham
   em .nvv2/.nvc (18 px), para o cabeçalho cair no mesmo lugar em todas. */
body.nv-erp-mode .nvu-picker-wrap { padding-top: 18px !important; }

/* 9.3 Botão legado .nv-tp-btn (≈140 telas) no desenho do .nvu-btn.
   Antes: cinza-azulado no fantasma (#475569/#e2e8f0/#f8fafc), primário em
   degradê laranja→âmbar (#d97706, fora da paleta) que pulava 2 px no hover.
   Agora: borda quente, hover pêssego, primário laranja chapado e parado.
   A cor do TEXTO do primário (branco) não mudou: decisão de marca pendente. */
body.nv-erp-mode .nv-tp-btn {
    border-color: var(--nv-line); color: var(--nv-ink-soft); border-radius: var(--nv-r-sm);
    transition: background-color var(--nv-dur-fast) var(--nv-ease-out), border-color var(--nv-dur-fast) var(--nv-ease-out), color var(--nv-dur-fast) var(--nv-ease-out);
}
body.nv-erp-mode .nv-tp-btn:hover { background: var(--nv-primary-soft); border-color: var(--nv-primary-line); color: var(--nv-primary-ink-2); }
body.nv-erp-mode .nv-tp-btn:focus-visible { outline: 2px solid var(--nv-primary); outline-offset: 2px; }
body.nv-erp-mode .nv-tp-btn--primary,
body.nv-erp-mode .nv-tp-btn--primary:focus { background: var(--nv-primary) !important; border: 1px solid var(--nv-primary) !important; color: #fff; box-shadow: none; }
body.nv-erp-mode .nv-tp-btn--primary:hover { background: #cf6416 !important; border-color: #cf6416 !important; color: #fff; transform: none; box-shadow: none; }
body.nv-erp-mode .nv-tp-btn--ghost { background: #fff !important; color: var(--nv-muted) !important; border: 1px solid var(--nv-line) !important; }
body.nv-erp-mode .nv-tp-btn--ghost:hover { background: var(--nv-primary-soft) !important; border-color: var(--nv-primary-line) !important; color: var(--nv-primary-ink-2) !important; }
body.nv-erp-mode .nv-tp-btn--sm { min-height: 30px; }

/* 9.4 Filtros da Central de Promoções ML (Por anúncio, PromoManager):
   busca, seleção e botão na MESMA altura (eram 32/32/27 px). */
body.nv-erp-mode .nvpa-filtros :is(input[type=search], select) { min-height: 34px; font-size: var(--nv-fs-sm); border-color: var(--nv-line); border-radius: var(--nv-r-sm); }
body.nv-erp-mode .nvpa-filtros .nv-tp-btn { min-height: 34px; }
body.nv-erp-mode .nvpa-filtros :is(input, select):focus { outline: none; border-color: var(--nv-primary); box-shadow: var(--nv-ring); }

/* ---------------------------------------------------------------------
   10. MÓDULOS LIBERADOS (.nvu-mods) — Área do Cliente (/area-cliente/).
   Os itens vêm de nv_ui_modulos_cliente() (inc/ui.php), que lê o menu.
   MOTION: cartão sobe --nv-lift; o ladrilho do ícone acende no hover.
   --------------------------------------------------------------------- */
body.nv-erp-mode .nvu-mods-wrap { padding-top: 8px; }
body.nv-erp-mode .nvu-sec-tt { margin: 26px 0 12px; }
body.nv-erp-mode .nvu-sec-tt h2 { margin: 0; font-size: var(--nv-fs-lg); font-weight: 800; color: var(--nv-ink); letter-spacing: -.01em; }
body.nv-erp-mode .nvu-sec-tt h3 { margin: 0; font-size: var(--nv-fs-base); font-weight: 700; color: var(--nv-muted); }
body.nv-erp-mode .nvu-sec-tt p { margin: 3px 0 0; font-size: var(--nv-fs-sm); color: var(--nv-muted); }
body.nv-erp-mode .nvu-sec-tt--sub { margin-top: 22px; }
body.nv-erp-mode .nvu-mods { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; }
body.nv-erp-mode .nvu-mod {
    display: flex; align-items: center; gap: 12px; padding: 14px 16px; min-width: 0;
    background: #fff; border: 1px solid var(--nv-line); border-radius: var(--nv-r-md); box-shadow: var(--nv-sh-1);
    text-decoration: none; color: var(--nv-ink);
    transition: transform var(--nv-dur-fast) var(--nv-ease-out), border-color var(--nv-dur-fast) var(--nv-ease-out);
}
body.nv-erp-mode .nvu-mod:hover { transform: translateY(var(--nv-lift)); border-color: var(--nv-primary-line); box-shadow: var(--nv-sh-2); }
body.nv-erp-mode .nvu-mod:focus-visible { outline: 2px solid var(--nv-primary); outline-offset: 2px; }
body.nv-erp-mode .nvu-mod__ic {
    width: 40px; height: 40px; border-radius: 11px; flex: 0 0 auto; display: grid; place-items: center;
    background: var(--nv-primary-soft); color: var(--nv-primary); box-shadow: inset 0 0 0 1px var(--nv-primary-line);
    transition: background-color var(--nv-dur-fast) var(--nv-ease-out), color var(--nv-dur-fast) var(--nv-ease-out);
}
body.nv-erp-mode .nvu-mod__ic :is(svg, img) { width: 22px; height: 22px; }
body.nv-erp-mode .nvu-mod:hover .nvu-mod__ic { background: var(--nv-primary); color: #fff; box-shadow: none; }
body.nv-erp-mode .nvu-mod__tx { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
body.nv-erp-mode .nvu-mod__tx b { font-size: var(--nv-fs-base); font-weight: 700; color: var(--nv-ink); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
body.nv-erp-mode .nvu-mod__tx small { font-size: var(--nv-fs-xs); color: var(--nv-muted); line-height: 1.4; }
/* Não contratado: presente, mas sem disputar com o que funciona */
body.nv-erp-mode .nvu-mod--off { background: var(--nv-surface-warm); box-shadow: none; border-style: dashed; }
body.nv-erp-mode .nvu-mod--off .nvu-mod__ic { background: #fff; color: var(--nv-muted); box-shadow: inset 0 0 0 1px var(--nv-line); }
body.nv-erp-mode .nvu-mod--off .nvu-mod__tx b { color: var(--nv-ink-soft); }
body.nv-erp-mode .nvu-mod__cta { margin-top: 2px; font-size: var(--nv-fs-xs); font-weight: 700; color: var(--nv-primary-ink); }

/* 9.5 Área do Cliente (/area-cliente/): rótulos em caixa-alta espaçada viram
   texto normal; números sem o verde/cinza decorativo (verde só é semântica). */
body.nv-erp-mode .cliente-section-title__eyebrow,
body.nv-erp-mode .cliente-stat__lbl,
body.nv-erp-mode .cliente-area__greet { text-transform: none !important; letter-spacing: 0 !important; }
body.nv-erp-mode .cliente-stat .cliente-stat__num { color: var(--nv-ink) !important; }

/* 9.6 Nome do cliente no cabeçalho de cada módulo — um desenho só (o do
   .nvu-head__cli: texto muted separado do título por um fio). Antes: pílula
   pêssego na Conciliação e em Relatórios, texto solto nas outras. */
body.nv-erp-mode .nv-erp-layout__main :is(.nvc-mast-cli, .nvcc-mast-cli, .nvdv-mast-cli, .nvfull-mast-cli, .nvrel-cli) {
    display: inline-block; background: transparent !important; box-shadow: none !important; border: 0 !important;
    border-left: 1px solid var(--nv-line) !important; border-radius: 0 !important;
    margin-left: 10px; padding: 0 0 0 11px !important;
    font-size: .92rem !important; font-weight: 700 !important; color: var(--nv-muted) !important;
    letter-spacing: 0 !important; text-transform: none !important; vertical-align: baseline; white-space: nowrap;
}

/* =====================================================================
   11. MOVIMENTO — carregamento de tela, gráficos e microinterações
   (10/10/2026; pedido do dono: "motion design … com cuidado para não
   deixar o sistema lento")
   ---------------------------------------------------------------------
   Regras que valem para tudo abaixo (e para quem acrescentar):
   - só se anima transform e opacity (nada de width/height/top/left/
     margin/box-shadow/background-position: isso repinta ou refaz layout
     a cada quadro);
   - nada espera a animação: o dado entra no DOM na hora e a animação só
     o acompanha; nada bloqueia clique (sem pointer-events:none);
   - não há animação infinita: o pulso do esqueleto para sozinho em ~40 s
     (30 ciclos) se o dado nunca chegar, e some quando ele chega; as corridas
     de progresso só existem enquanto a tela marca "carregando";
   - prefers-reduced-motion: os tokens vão a zero (seção 1) e o bloco 11.9
     desliga as animações de vez — o conteúdo aparece direto.
   O JS (assets/js/nv-motion.js) decide QUANDO aplicar .nvm-in / .nvm-chart /
   .nvm-bar (só na primeira carga de cada bloco, nunca em atualização por
   filtro) e tira as classes no animationend.
   --------------------------------------------------------------------- */

/* 11.1 Curvas — uma família só (sem bounce, sem brilho). */
@keyframes nvm-in    { from { opacity: .35; transform: translate3d(0, var(--nv-shift, 6px), 0); } }
@keyframes nvm-fade  { from { opacity: 0; } }
@keyframes nvm-pop   { from { opacity: 0; transform: translate3d(0, -4px, 0); } }
@keyframes nvm-pulse { 50% { opacity: .5; } }
@keyframes nvm-grow-y { from { transform: scaleY(0); } }
@keyframes nvm-grow-x { from { transform: scaleX(0); } }
@keyframes nvm-run   { from { transform: translateX(-100%); } to { transform: translateX(320%); } }
@keyframes nvm-slide-l { from { transform: translate3d(100%, 0, 0); } }

/* 11.2 Entrada de conteúdo (classes aplicadas pelo NVMotion).
   --nvm-i = posição no escalonamento (o JS só numera os 8 primeiros). */
body.nv-erp-mode .nvm-in {
    animation: nvm-in var(--nv-dur-enter) var(--nv-ease-out) backwards;
    animation-delay: calc(var(--nvm-i, 0) * var(--nv-step));
}
body.nv-erp-mode .nvm-fade { animation: nvm-fade var(--nv-dur-enter) var(--nv-ease-out) backwards; }


/* 11.3 Esqueleto — a forma do que vai chegar, pulsando só em opacidade.
   .nvm-skel é a peça; .nvm-skel-bloco empilha linhas (drawer, painel). */
body.nv-erp-mode .nvm-skel {
    display: block; height: 12px; border-radius: var(--nv-r-xs); background: var(--nv-skel);
    animation: nvm-pulse 1.4s ease-in-out 30;
}
body.nv-erp-mode .nvm-skel-bloco { display: flex; flex-direction: column; gap: 12px; padding: 18px 2px; }
body.nv-erp-mode .nvm-skel-bloco > .nvm-skel:nth-child(3n+2) { width: 82%; }
body.nv-erp-mode .nvm-skel-bloco > .nvm-skel:nth-child(3n) { width: 64%; }

/* Pontes de esqueleto (classes dos módulos):
   - Análise de Vendas: o brilho corria por background-position (repinta a
     cada quadro) → vira o mesmo pulso de opacidade, tinta lisa;
   - gráfico da Evolução e Mix por canal ficavam em BRANCO até o dado chegar:
     vazios, ganham o esqueleto no espaço que já estava reservado. */
body.nv-erp-mode :is(.nvv2-esq i, .nvv2-esqln, .nvv2-manch.is-esq i, .nvv2-prio-l > .nvv2-esql) {
    background: var(--nv-skel); animation: nvm-pulse 1.4s ease-in-out 30;
}
body.nv-erp-mode .nvcc-fcard.esq {   /* Conciliação: o mesmo brilho por background-position */
    background: var(--nv-skel); animation: nvm-pulse 1.4s ease-in-out 30;
}
body.nv-erp-mode :is(#nvvLinha, #nvvCanalBars):empty {
    border-radius: var(--nv-r-sm); background: var(--nv-skel); opacity: .55;
    animation: nvm-pulse 1.4s ease-in-out 30;
}
body.nv-erp-mode #nvvCanalBars:empty { min-height: 184px; }
/*   - Margem (Controle Financeiro): os 8 KPIs e os dois gráficos (Chart.js)
     ficavam em branco e os KPIs, ao chegar, empurravam a tela 105px.
     KPIs: a fileira vazia guarda 104px com 8 ladrilhos. Gráfico: enquanto o
     <canvas> não tem style (o Chart.js grava style ao montar), um bloco. */
body.nv-erp-mode .nvfin-ck #nvfinMcKpis:empty { min-height: 104px; }
body.nv-erp-mode .nvfin-ck #nvfinMcKpis:empty::before {
    content: ""; grid-column: 1 / -1; border-radius: var(--nv-r-md);
    background: repeating-linear-gradient(to right, var(--nv-skel) 0 calc(12.5% - 8px), transparent calc(12.5% - 8px) 12.5%);
    animation: nvm-pulse 1.4s ease-in-out 30;
}
body.nv-erp-mode .nvfin-ck .nvfin-chart:has(> canvas:not([style]))::before {
    content: ""; position: absolute; inset: 8px 2px 2px; border-radius: var(--nv-r-sm);
    background: var(--nv-skel); opacity: .6; animation: nvm-pulse 1.4s ease-in-out 30;
}
body.nv-erp-mode .nvfin-ck .nvfin-chart--rosca:has(> canvas:not([style]))::before {
    inset: 50% auto auto 50%; width: 164px; height: 164px; margin: -82px 0 0 -82px; border-radius: 50%;
}
/* "Vendas de hoje" no cabeçalho da Vendas: o esqueleto cabia na 1ª linha e o
   dado (mais longo) quebrava para a 2ª — o cabeçalho crescia 21px e a tela
   inteira pulava (o maior layout shift medido na tela, 0,197). Linha própria
   desde o esqueleto: mesma altura antes e depois. */
body.nv-erp-mode #nvvHoje { flex-basis: 100%; }

/*   - Controle Financeiro: "Carregando…" em célula de tabela (≈45 tabelas)
     vira 4 linhas de esqueleto com altura de tabela (132px), em vez de
     uma linha de texto que depois "explode" na tabela. O texto continua
     lá (transparente) para leitor de tela. Erro (.nvap-err) fica de fora. */
body.nv-erp-mode :is(td.nvap-loading:not(.nvap-err), td.nvdre-loading, td.nvpc-loading) {
    position: relative; height: 132px; color: transparent !important;
}
body.nv-erp-mode :is(td.nvap-loading:not(.nvap-err), td.nvdre-loading, td.nvpc-loading)::before {
    content: ""; position: absolute; inset: 16px 18px;
    background: repeating-linear-gradient(to bottom, var(--nv-skel) 0 12px, transparent 12px 28px);
    border-radius: var(--nv-r-xs); animation: nvm-pulse 1.4s ease-in-out 30;
}

/* 11.4 Barras de progresso indeterminadas: corriam por left/margin-left
   (layout a cada quadro) → mesma corrida por transform. */
body.nv-erp-mode .nvv2-bar-prog::before { left: 0; animation: nvm-run 1.1s var(--nv-ease-in-out) infinite; }
body.nv-erp-mode :is(.nvfin-src__fill, .cdd-base__fill).is-run { margin-left: 0; animation: nvm-run 1.1s var(--nv-ease-in-out) infinite; }

/* 11.5 Gráficos SVG próprios. O SVG inteiro sobe 6px e aparece; as barras
   (rect marcados pelo JS, até 160 por gráfico) crescem da base. Linha e
   área não "desenham" (stroke-dashoffset repinta): entram com o SVG. */
body.nv-erp-mode .nvm-chart { animation: nvm-in var(--nv-dur-chart) var(--nv-ease-out) backwards; }
body.nv-erp-mode svg .nvm-bar {
    transform-box: fill-box; transform-origin: 50% 100%;
    animation: nvm-grow-y var(--nv-dur-chart) var(--nv-ease-out) backwards;
    animation-delay: calc(var(--nvm-i, 0) * 12ms);
}
body.nv-erp-mode svg .nvm-bar--h { transform-origin: 0 50%; animation-name: nvm-grow-x; }

/* 11.6 Troca de aba/destino — os módulos já tinham fade próprio com tempos
   soltos (.18s, .2s, .22s, ease); agora usam o token e a curva da casa. */
body.nv-erp-mode :is(.nvv2-panel.on, .nvv2-dest.on, .nvv2-rkview.on, .nvfin-ck .ck-panel) {
    animation: nvm-in var(--nv-dur-base) var(--nv-ease-out);
}
body.nv-erp-mode .nvfin-pg.on { animation: nvm-fade var(--nv-dur-base) var(--nv-ease-out); }

/* 11.7 Dropdowns, drawer e toast — mesma curva.
   Drawer global: o painel nascia de display:none, e transição a partir de
   display:none não roda — ele aparecia seco. Keyframe roda. */
body.nv-erp-mode :is(.nvdp-panel.open, .nvv2-dp-panel.open, .nvv2-ms.open .nvv2-ms-panel) {
    animation: nvm-pop var(--nv-dur-fast) var(--nv-ease-out);
}
body.nv-erp-mode .nv-detail-drawer.is-open .nv-detail-drawer__overlay { animation: nvm-fade var(--nv-dur-base) var(--nv-ease-out); }
body.nv-erp-mode .nv-detail-drawer.is-open .nv-detail-drawer__panel { animation: nvm-slide-l var(--nv-dur-slow) var(--nv-ease-out); }
body.nv-erp-mode .nvpa-drawer:not([hidden]) .nvpa-drawer__fundo { animation: nvm-fade var(--nv-dur-base) var(--nv-ease-out); }
body.nv-erp-mode .nvpa-drawer:not([hidden]) .nvpa-drawer__box { animation: nvm-slide-l var(--nv-dur-slow) var(--nv-ease-out); }
body.nv-erp-mode .nv-sync-toast { animation: nvm-in var(--nv-dur-slow) var(--nv-ease-out); }

/* 11.8 Contagem de KPI (opcional, NVMotion.contar): algarismo de largura
   fixa para o número não "tremer" enquanto conta. */
body.nv-erp-mode .nvm-conta { font-variant-numeric: tabular-nums; }

/* 11.9 Movimento reduzido: tudo desligado, inclusive o pulso do esqueleto
   (fica a tinta parada) e as corridas de progresso. */
@media (prefers-reduced-motion: reduce) {
    body.nv-erp-mode :is(.nvm-in, .nvm-fade, .nvm-chart, .nvm-skel, .nv-erp-layout__main > .site-main,
        .nvv2-esq i, .nvv2-esqln, .nvv2-manch.is-esq i, .nvv2-prio-l > .nvv2-esql, #nvvLinha, #nvvCanalBars, .nvcc-fcard.esq,
        .nvv2-panel.on, .nvv2-dest.on, .nvv2-rkview.on, .ck-panel, .nvfin-pg.on,
        .nvdp-panel, .nvv2-dp-panel, .nvv2-ms-panel, .nv-detail-drawer__overlay, .nv-detail-drawer__panel,
        .nvpa-drawer__fundo, .nvpa-drawer__box, .nv-sync-toast),
    body.nv-erp-mode svg .nvm-bar,
    body.nv-erp-mode :is(td.nvap-loading, td.nvdre-loading, td.nvpc-loading, #nvfinMcKpis, .nvfin-chart)::before { animation: none !important; }
}