/* ============================================================================
   DBF NEXUS — folha única do módulo                                 [FERR-S1]
   /var/www/html/css/nexus/nexus.css

   Por que UM arquivo e não os três do §6.1: o alvo é LCP < 1,8 s em 4G, e o
   shell do NEXUS não carrega nada do e-commerce. Três <link> para ~20 KB de
   CSS é render-blocking desnecessário. As seções abaixo fazem o papel dos três
   arquivos, com busca por comentário.

   ZERO COR DA MARCA AQUI. Todo laranja/azul/verde-de-marca entra por
   --nx-accent*, injetado pelo NexusTheme a partir do banco. Foi o hardcode de
   variante de marca que fez um tenant azul receber hover laranja (§5.22).
   Cada var() tem fallback para a página nunca ficar sem cor se o <style>
   inline falhar.

   SEÇÕES
     1. Tokens
     2. Reset e base
     3. Shell (topo, sidebar, rodapé)
     4. Paleta de comandos (Ctrl+K)
     5. Cartões e grid do hub
     6. Formulário gerado do manifesto
     7. Resultado: KPI, tabela, memória, parecer
     8. Conteúdo SEO
     9. Estados: skeleton, vazio, erro
    10. Responsivo
    11. Impressão
   ============================================================================ */

/* ─────────────────────────── 1. TOKENS ─────────────────────────── */
:root {
  /* superfícies — tema escuro é o padrão (§6.3) */
  --nx-bg:        #0B0F14;
  --nx-surface:   #111820;
  --nx-surface-2: #18212B;
  --nx-surface-3: #1F2A36;
  --nx-border:    #243040;
  --nx-border-2:  #2E3D4E;
  --nx-text:      #E6EDF3;
  --nx-text-dim:  #93A2B4;   /* 5,4:1 sobre --nx-bg */
  --nx-text-mute: #6E7F92;

  /* sinais semânticos — independentes da marca, porque significam coisa */
  --nx-pos:  #2BD9A0;
  --nx-neg:  #FF6B6B;
  --nx-warn: #FFB020;
  --nx-info: #38D3F0;

  /* marca (sobrescrito pelo NexusTheme) */
  --nx-accent:       #ff5500;
  --nx-accent-dark:  #e04c00;
  --nx-accent-light: #fff3ed;
  --nx-accent-text:  #c74300;
  --nx-accent-ink:   #b03c00;
  --nx-accent-ink2:  #963400;
  --nx-accent-linha: #ffd9c7;

  --nx-radius:   10px;
  --nx-radius-s: 6px;
  --nx-gap:      16px;
  --nx-topo-h:   56px;

  --nx-font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  /* Números em monoespaçada com largura tabular: dígito que dança enquanto o
     usuário digita destrói a credibilidade de uma ferramenta de decisão. */
  --nx-font-num: ui-monospace, "SF Mono", "JetBrains Mono", "Cascadia Mono", Menlo, Consolas, monospace;

  --nx-sombra: 0 1px 2px rgba(0,0,0,.30), 0 8px 24px rgba(0,0,0,.18);
  color-scheme: dark;
}

:root[data-tema="light"] {
  --nx-bg:        #F6F8FA;
  --nx-surface:   #FFFFFF;
  --nx-surface-2: #F0F3F6;
  --nx-surface-3: #E7ECF1;
  --nx-border:    #D8E0E8;
  --nx-border-2:  #C3CEDA;
  --nx-text:      #10171E;
  --nx-text-dim:  #566575;   /* 6,1:1 sobre --nx-bg */
  --nx-text-mute: #78889A;
  --nx-pos:  #067A55;
  --nx-neg:  #C0342F;
  --nx-warn: #97650A;
  --nx-info: #0B6D82;
  --nx-sombra: 0 1px 2px rgba(16,23,30,.06), 0 8px 24px rgba(16,23,30,.08);
  color-scheme: light;
}

/* ──────────────────── 2. RESET E BASE ──────────────────── */
.nx * { box-sizing: border-box; }
.nx {
  margin: 0;
  background: var(--nx-bg);
  color: var(--nx-text);
  font-family: var(--nx-font);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
.nx img, .nx svg { max-width: 100%; height: auto; }
.nx a { color: var(--nx-info); text-decoration: none; }
.nx a:hover { text-decoration: underline; }

/* Foco visível sempre: público corporativo navega por Tab (§6.3). */
.nx :focus-visible {
  outline: 2px solid var(--nx-info);
  outline-offset: 2px;
  border-radius: var(--nx-radius-s);
}

/* css/style.css declara color:#111 direto em h1..h6 e regra no elemento vence
   herança — por isso a cor vai declarada aqui, não herdada (§5.22). */
.nx h1, .nx h2, .nx h3, .nx h4 { color: var(--nx-text); margin: 0 0 .4em; line-height: 1.25; }
.nx h1 { font-size: 1.6rem; letter-spacing: -.01em; }
.nx h2 { font-size: 1.2rem; }
.nx h3 { font-size: 1.02rem; }
.nx p  { margin: 0 0 .8em; }

.nx-num { font-family: var(--nx-font-num); font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }
.nx-pos { color: var(--nx-pos); }
.nx-neg { color: var(--nx-neg); }
.nx-dim { color: var(--nx-text-dim); }
.nx-wrap { max-width: 1280px; margin: 0 auto; padding: 0 16px; }
.nx-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ──────────────────── 3. SHELL ──────────────────── */
.nx-topo {
  position: sticky; top: 0; z-index: 40;
  height: var(--nx-topo-h);
  display: flex; align-items: center; gap: 14px;
  padding: 0 16px;
  background: color-mix(in srgb, var(--nx-surface) 92%, transparent);
  backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid var(--nx-border);
}
@supports not (backdrop-filter: blur(1px)) { .nx-topo { background: var(--nx-surface); } }

/* [FERR-S3-MOBILE] a marca é o próprio link; min-width:0 + ellipsis no texto
   impedem o transbordo por baixo da busca que o print de 09/08 mostrou. */
.nx-marca {
  display: flex; align-items: center; gap: 9px;
  font-weight: 650; letter-spacing: -.01em;
  color: var(--nx-text); text-decoration: none;
  min-width: 0; flex: 0 1 auto;
}
.nx-marca:hover { text-decoration: none; color: var(--nx-text); }
.nx-marca img { height: 24px; width: auto; flex: 0 0 auto; }
.nx-marca .nx-ponto { width: 9px; height: 9px; border-radius: 50%; background: var(--nx-accent, #ff5500); flex: 0 0 auto; }
.nx-marca-txt { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.nx-topo-busca {
  flex: 1 1 auto; max-width: 420px;
  display: flex; align-items: center; gap: 8px;
  padding: 6px 10px;
  background: var(--nx-surface-2);
  border: 1px solid var(--nx-border);
  border-radius: 999px;
  color: var(--nx-text-dim);
  font-size: .88rem;
  cursor: pointer;
}
.nx-topo-busca:hover { border-color: var(--nx-border-2); }
.nx-kbd {
  font-family: var(--nx-font-num); font-size: .72rem;
  padding: 2px 6px; border-radius: 5px;
  background: var(--nx-surface-3); border: 1px solid var(--nx-border);
  color: var(--nx-text-dim); margin-left: auto; white-space: nowrap;
}

.nx-topo-acoes { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.nx-btn-icone {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: var(--nx-radius-s);
  background: transparent; border: 1px solid var(--nx-border);
  color: var(--nx-text-dim); cursor: pointer; font-size: 1rem; line-height: 1;
}
.nx-btn-icone:hover { color: var(--nx-text); border-color: var(--nx-border-2); background: var(--nx-surface-2); }

.nx-link-loja {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: var(--nx-radius-s);
  border: 1px solid var(--nx-border); color: var(--nx-text-dim);
  font-size: .86rem; white-space: nowrap;
}
.nx-link-loja:hover { color: var(--nx-text); border-color: var(--nx-border-2); text-decoration: none; }

.nx-corpo { display: grid; grid-template-columns: 232px minmax(0, 1fr); gap: 24px; padding: 24px 16px 56px; max-width: 1280px; margin: 0 auto; }
.nx-lateral { align-self: start; position: sticky; top: calc(var(--nx-topo-h) + 16px); }
.nx-lateral h3 { font-size: .72rem; text-transform: uppercase; letter-spacing: .09em; color: var(--nx-text-mute); margin: 0 0 8px 10px; }
.nx-nav { display: flex; flex-direction: column; gap: 1px; }
.nx-nav a {
  display: flex; align-items: center; gap: 9px;
  padding: 8px 10px; border-radius: var(--nx-radius-s);
  color: var(--nx-text-dim); font-size: .9rem;
}
.nx-nav a:hover { background: var(--nx-surface-2); color: var(--nx-text); text-decoration: none; }
.nx-nav a[aria-current="page"] {
  background: var(--nx-surface-2); color: var(--nx-text); font-weight: 600;
  box-shadow: inset 2px 0 0 var(--nx-accent, #ff5500);
}
.nx-nav .nx-cont { margin-left: auto; font-family: var(--nx-font-num); font-size: .74rem; color: var(--nx-text-mute); }

.nx-rodape {
  border-top: 1px solid var(--nx-border);
  padding: 22px 16px 34px;
  color: var(--nx-text-mute); font-size: .82rem;
}
.nx-rodape a { color: var(--nx-text-dim); }
.nx-rodape .nx-rodape-linhas { max-width: 1280px; margin: 0 auto; display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: center; }

.nx-migalha { font-size: .8rem; color: var(--nx-text-mute); margin-bottom: 10px; }
.nx-migalha a { color: var(--nx-text-dim); }
.nx-migalha span { margin: 0 6px; opacity: .5; }

/* ──────────────────── 4. PALETA DE COMANDOS ──────────────────── */
.nx-paleta { position: fixed; inset: 0; z-index: 90; display: none; }
.nx-paleta[data-aberta="1"] { display: block; }
.nx-paleta-fundo { position: absolute; inset: 0; background: rgba(0,0,0,.55); }
.nx-paleta-caixa {
  position: relative; margin: 9vh auto 0; width: min(620px, calc(100% - 28px));
  background: var(--nx-surface); border: 1px solid var(--nx-border-2);
  border-radius: 14px; box-shadow: var(--nx-sombra); overflow: hidden;
}
.nx-paleta input {
  width: 100%; padding: 15px 18px; font-size: 1rem;
  background: transparent; border: 0; border-bottom: 1px solid var(--nx-border);
  color: var(--nx-text); font-family: var(--nx-font);
}
.nx-paleta input:focus { outline: none; }
.nx-paleta ul { list-style: none; margin: 0; padding: 6px; max-height: 52vh; overflow-y: auto; }
.nx-paleta li a {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; border-radius: var(--nx-radius-s); color: var(--nx-text); font-size: .92rem;
}
.nx-paleta li a:hover, .nx-paleta li[data-sel="1"] a { background: var(--nx-surface-2); text-decoration: none; }
.nx-paleta li .nx-cat { margin-left: auto; font-size: .74rem; color: var(--nx-text-mute); }
.nx-paleta-vazio { padding: 22px; text-align: center; color: var(--nx-text-mute); font-size: .9rem; }

/* ──────────────────── 5. HUB ──────────────────── */
.nx-hero { padding: 6px 0 22px; }
.nx-hero h1 { font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.1rem); }
/* text-wrap: pretty evita a palavra órfã na última linha (o "só" solto do
   subtítulo do FrigoPulse); navegador sem suporte simplesmente ignora. */
.nx-hero p { color: var(--nx-text-dim); max-width: 62ch; font-size: 1rem;
  text-wrap: pretty; }
.nx-hero h1 { text-wrap: balance; }

.nx-grid { display: grid; gap: var(--nx-gap); grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); }

.nx-card {
  display: flex; flex-direction: column; gap: 7px;
  padding: 15px; background: var(--nx-surface);
  border: 1px solid var(--nx-border); border-radius: var(--nx-radius);
  color: var(--nx-text);
}
.nx-card:hover { border-color: var(--nx-border-2); background: var(--nx-surface-2); text-decoration: none; }
.nx-card .nx-card-topo { display: flex; align-items: center; gap: 8px; }
.nx-card h3 { margin: 0; font-size: .98rem; }
.nx-card p { margin: 0; color: var(--nx-text-dim); font-size: .86rem; }
.nx-card .nx-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: 8px; }

.nx-tag {
  display: inline-block; padding: 2px 8px; border-radius: 999px;
  font-size: .72rem; border: 1px solid var(--nx-border);
  color: var(--nx-text-dim); background: var(--nx-surface-2);
}
.nx-tag-destaque {
  border-color: var(--nx-accent-linha, var(--nx-border));
  color: var(--nx-accent-text, var(--nx-text));
  background: var(--nx-accent-light, var(--nx-surface-2));
  font-weight: 600;
}
:root:not([data-tema="light"]) .nx-tag-destaque {
  /* No escuro, o par light/text da marca inverte a legibilidade: usa o ink. */
  background: var(--nx-accent-ink2, var(--nx-surface-2));
  color: #fff; border-color: transparent;
}

.nx-secao { margin: 30px 0 0; }
.nx-secao > h2 { display: flex; align-items: baseline; gap: 10px; }
.nx-secao > h2 .nx-cont { font-family: var(--nx-font-num); font-size: .8rem; color: var(--nx-text-mute); font-weight: 400; }

/* ──────────────────── 6. FORMULÁRIO (gerado do manifesto) ──────────────────── */
.nx-ferramenta { display: grid; grid-template-columns: minmax(0, 400px) minmax(0, 1fr); gap: 24px; align-items: start; }
.nx-painel {
  background: var(--nx-surface); border: 1px solid var(--nx-border);
  border-radius: var(--nx-radius); padding: 16px;
}
.nx-painel-form { position: sticky; top: calc(var(--nx-topo-h) + 16px); }

/* min-width:0 NÃO é decorativo: <fieldset> tem largura mínima intrínseca igual
   ao conteúdo (regra do próprio navegador) e ignora a largura do pai. Uma opção
   de <select> comprida esticava o grupo para 488px dentro de um formulário de
   400px — e o excesso passava POR CIMA da coluna do resultado, ao lado. */
.nx-grupo { border: 0; margin: 0 0 18px; padding: 0; min-width: 0; }
.nx-campo, .nx-entrada { min-width: 0; }
.nx .nx-entrada select { width: 100%; max-width: 100%; }
.nx-grupo:last-child { margin-bottom: 0; }
.nx-grupo > legend {
  padding: 0; margin: 0 0 9px;
  font-size: .72rem; text-transform: uppercase; letter-spacing: .085em;
  color: var(--nx-text-mute); font-weight: 700;
}

.nx-campo { margin-bottom: 11px; }
.nx-campo[hidden] { display: none; }
.nx-campo > label { display: flex; align-items: center; gap: 6px; font-size: .84rem; color: var(--nx-text-dim); margin-bottom: 4px; }
.nx-req { color: var(--nx-neg); }

.nx-ajuda-btn {
  width: 15px; height: 15px; flex: 0 0 auto; border-radius: 50%;
  border: 1px solid var(--nx-border-2); background: transparent;
  color: var(--nx-text-mute); font-size: .64rem; line-height: 1;
  cursor: help; padding: 0;
}
.nx-ajuda-txt {
  display: none; margin: 5px 0 0; padding: 8px 10px;
  background: var(--nx-surface-2); border-left: 2px solid var(--nx-info);
  border-radius: 0 var(--nx-radius-s) var(--nx-radius-s) 0;
  font-size: .8rem; color: var(--nx-text-dim);
}
.nx-campo[data-ajuda="1"] .nx-ajuda-txt { display: block; }

.nx-entrada { display: flex; align-items: stretch; }
.nx-entrada .nx-un {
  display: inline-flex; align-items: center; padding: 0 9px;
  background: var(--nx-surface-3); border: 1px solid var(--nx-border);
  color: var(--nx-text-dim); font-size: .82rem; white-space: nowrap;
}
.nx-entrada .nx-un:first-child { border-radius: var(--nx-radius-s) 0 0 var(--nx-radius-s); border-right: 0; }
.nx-entrada .nx-un:last-child  { border-radius: 0 var(--nx-radius-s) var(--nx-radius-s) 0; border-left: 0; }

/* !important + data-no-niceselect: o js/main.js do e-commerce faz
   $("select").niceSelect() com seletor GLOBAL sem escopo. O shell do NEXUS não
   carrega main.js, então o problema não ocorre — isto é cinto de segurança para
   o caso de alguém incluir a folha numa página que carregue. */
.nx .nx-entrada input,
.nx .nx-entrada select,
.nx .nx-entrada textarea {
  flex: 1 1 auto; min-width: 0;
  padding: 8px 10px;
  background: var(--nx-surface-2) !important;
  border: 1px solid var(--nx-border) !important;
  border-radius: var(--nx-radius-s);
  color: var(--nx-text) !important;
  font-family: var(--nx-font-num);
  font-variant-numeric: tabular-nums;
  font-size: .95rem;
  height: auto !important;
  line-height: 1.4 !important;
  appearance: auto;
}
.nx .nx-entrada select { font-family: var(--nx-font); }
.nx .nx-entrada input:focus, .nx .nx-entrada select:focus { border-color: var(--nx-info) !important; }
.nx .nx-entrada .nx-un + input, .nx .nx-entrada .nx-un + select { border-radius: 0 var(--nx-radius-s) var(--nx-radius-s) 0; }
.nx .nx-entrada input + .nx-un { border-radius: 0 var(--nx-radius-s) var(--nx-radius-s) 0; }
.nx .nx-entrada .nx-un:first-child ~ input { border-radius: 0 var(--nx-radius-s) var(--nx-radius-s) 0; }
.nx-campo[data-erro="1"] .nx-entrada input,
.nx-campo[data-erro="1"] .nx-entrada select { border-color: var(--nx-neg) !important; }
.nx-erro { display: none; margin-top: 4px; font-size: .78rem; color: var(--nx-neg); }
.nx-campo[data-erro="1"] .nx-erro { display: block; }

.nx-toggle { display: flex; align-items: center; gap: 9px; cursor: pointer; }
.nx-toggle input { width: 17px; height: 17px; accent-color: var(--nx-accent, #ff5500); flex: 0 0 auto; }

/* ─── tipo 'lista': linhas dinâmicas (volumes, parcelas, fornecedores…) ─── */
.nx-lista { display: flex; flex-direction: column; gap: 8px; }
.nx-lista-linha {
  display: flex; flex-wrap: wrap; gap: 6px; align-items: flex-end;
  padding: 8px; background: var(--nx-surface-2);
  border: 1px solid var(--nx-border); border-radius: var(--nx-radius-s);
}
.nx-lista-cel { flex: 1 1 90px; min-width: 72px; display: flex; flex-direction: column; gap: 2px; }
.nx-lista-cel > span { font-size: .72rem; color: var(--nx-text-mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nx .nx-lista-cel input {
  width: 100%; padding: 6px 8px;
  background: var(--nx-surface) !important;
  border: 1px solid var(--nx-border) !important;
  border-radius: var(--nx-radius-s);
  color: var(--nx-text) !important;
  font-family: var(--nx-font-num); font-variant-numeric: tabular-nums; font-size: .88rem;
  height: auto !important;
}
.nx .nx-lista-cel input:focus { border-color: var(--nx-info) !important; }
.nx-lista-rm {
  flex: 0 0 auto; width: 30px; height: 30px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--nx-border); border-radius: var(--nx-radius-s);
  background: transparent; color: var(--nx-text-mute); cursor: pointer; font-size: 1rem;
}
.nx-lista-rm:hover { color: var(--nx-neg); border-color: var(--nx-neg); }
.nx-lista-add { align-self: flex-start; font-size: .84rem; padding: 6px 12px; }

.nx-acoes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.nx-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 9px 15px; border-radius: var(--nx-radius-s);
  border: 1px solid var(--nx-border-2); background: var(--nx-surface-2);
  color: var(--nx-text); font-size: .89rem; font-weight: 550;
  cursor: pointer; font-family: var(--nx-font);
}
.nx-btn:hover { background: var(--nx-surface-3); text-decoration: none; }
.nx-btn-1 {
  background: var(--nx-accent, #ff5500); border-color: transparent; color: #fff;
}
.nx-btn-1:hover { background: var(--nx-accent-dark, #e04c00); }
.nx-btn:disabled { opacity: .5; cursor: not-allowed; }

/* ──────────────────── 7. RESULTADO ──────────────────── */
.nx-kpis { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); margin-bottom: 16px; }
.nx-kpi {
  padding: 13px 15px; background: var(--nx-surface);
  border: 1px solid var(--nx-border); border-radius: var(--nx-radius);
}
.nx-kpi-1 { border-color: var(--nx-accent-linha, var(--nx-border-2)); box-shadow: inset 0 2px 0 var(--nx-accent, #ff5500); }
.nx-kpi .nx-kpi-rot { font-size: .76rem; color: var(--nx-text-dim); display: flex; align-items: center; gap: 5px; }
.nx-kpi .nx-kpi-val { font-family: var(--nx-font-num); font-variant-numeric: tabular-nums; font-size: 1.45rem; font-weight: 650; letter-spacing: -.02em; margin-top: 3px; }
.nx-kpi-1 .nx-kpi-val { font-size: 1.75rem; }
.nx-kpi .nx-kpi-un { font-size: .8rem; color: var(--nx-text-mute); font-weight: 400; }
/* [FERR-KPI-TXT] KPI cujo valor é FRASE, não número: a fonte tabular de 1.75rem
   foi desenhada para "10,00" e transforma uma classificação de 80 caracteres em
   cinco linhas dentro de um card estreito. Texto usa a fonte do corpo, e frase
   longa ocupa a faixa inteira em vez de espremer numa coluna de card. */
.nx-kpi .nx-kpi-val[data-tipo="texto"],
.nx-kpi-1 .nx-kpi-val[data-tipo="texto"] {
  font-family: inherit; font-variant-numeric: normal; letter-spacing: 0;
  font-size: 1rem; font-weight: 620; line-height: 1.35;
}
.nx-kpi.nx-kpi-frase { grid-column: 1 / -1; }

.nx-tabela-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 -15px; padding: 0 15px; }
table.nx-tabela { width: 100%; border-collapse: collapse; font-size: .87rem; }
table.nx-tabela th, table.nx-tabela td { padding: 7px 10px; text-align: right; border-bottom: 1px solid var(--nx-border); white-space: nowrap; }
table.nx-tabela th:first-child, table.nx-tabela td:first-child { text-align: left; white-space: normal; }
table.nx-tabela thead th { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--nx-text-mute); border-bottom-color: var(--nx-border-2); }
table.nx-tabela td.nx-num { font-family: var(--nx-font-num); font-variant-numeric: tabular-nums; }
table.nx-tabela tr.nx-total td { font-weight: 700; border-top: 1px solid var(--nx-border-2); }
table.nx-tabela tbody tr:hover { background: var(--nx-surface-2); }

.nx-memoria { list-style: none; margin: 0; padding: 0; counter-reset: nxm; }
.nx-memoria li { position: relative; padding: 9px 0 9px 30px; border-bottom: 1px dashed var(--nx-border); counter-increment: nxm; }
.nx-memoria li:last-child { border-bottom: 0; }
.nx-memoria li::before {
  content: counter(nxm); position: absolute; left: 0; top: 9px;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--nx-surface-3); color: var(--nx-text-dim);
  font-family: var(--nx-font-num); font-size: .7rem;
  display: flex; align-items: center; justify-content: center;
}
.nx-memoria .nx-m-passo { font-weight: 600; font-size: .89rem; }
.nx-memoria .nx-m-formula { font-family: var(--nx-font-num); font-size: .8rem; color: var(--nx-info); }
.nx-memoria .nx-m-valor { font-family: var(--nx-font-num); font-variant-numeric: tabular-nums; font-weight: 650; }
.nx-memoria .nx-m-obs { font-size: .81rem; color: var(--nx-text-dim); }

.nx-parecer { display: flex; flex-direction: column; gap: 9px; }
.nx-p {
  padding: 10px 13px; border-radius: var(--nx-radius-s);
  border-left: 3px solid var(--nx-border-2);
  background: var(--nx-surface-2); font-size: .88rem;
}
.nx-p-positivo { border-left-color: var(--nx-pos); }
.nx-p-atencao  { border-left-color: var(--nx-warn); }
.nx-p-negativo { border-left-color: var(--nx-neg); }
.nx-p-info     { border-left-color: var(--nx-info); }

.nx-abas { display: flex; gap: 2px; border-bottom: 1px solid var(--nx-border); margin-bottom: 14px; overflow-x: auto; }
.nx-aba {
  padding: 8px 13px; border: 0; background: transparent;
  color: var(--nx-text-dim); font-size: .88rem; cursor: pointer;
  border-bottom: 2px solid transparent; white-space: nowrap;
  font-family: var(--nx-font);
}
.nx-aba[aria-selected="true"] { color: var(--nx-text); border-bottom-color: var(--nx-accent, #ff5500); font-weight: 600; }
.nx-aba-painel[hidden] { display: none; }

/* ──────────────────── 8. CONTEÚDO SEO ──────────────────── */
.nx-conteudo { margin-top: 34px; padding-top: 26px; border-top: 1px solid var(--nx-border); max-width: 76ch; }
.nx-conteudo h2 { margin-top: 26px; }
.nx-conteudo .nx-formula {
  font-family: var(--nx-font-num); font-size: .93rem;
  padding: 12px 14px; background: var(--nx-surface); border: 1px solid var(--nx-border);
  border-left: 3px solid var(--nx-info); border-radius: 0 var(--nx-radius-s) var(--nx-radius-s) 0;
  overflow-x: auto; white-space: pre-wrap; word-break: break-word;
}
.nx-conteudo ol, .nx-conteudo ul { padding-left: 20px; color: var(--nx-text-dim); }
.nx-conteudo li { margin-bottom: 5px; }
.nx-conteudo dl { margin: 0; }
.nx-conteudo dt { font-weight: 650; margin-top: 11px; }
.nx-conteudo dd { margin: 2px 0 0; color: var(--nx-text-dim); }
.nx-faq details {
  border: 1px solid var(--nx-border); border-radius: var(--nx-radius-s);
  padding: 10px 13px; margin-bottom: 8px; background: var(--nx-surface);
}
.nx-faq summary { cursor: pointer; font-weight: 600; font-size: .93rem; }
.nx-faq details[open] summary { margin-bottom: 7px; }
.nx-faq p { margin: 0; color: var(--nx-text-dim); font-size: .89rem; }
.nx-disclaimer {
  margin-top: 22px; padding: 11px 13px; font-size: .81rem;
  color: var(--nx-text-dim); background: var(--nx-surface-2);
  border-left: 3px solid var(--nx-warn); border-radius: 0 var(--nx-radius-s) var(--nx-radius-s) 0;
}

/* ──────────────────── 9. ESTADOS ──────────────────── */
.nx-vazio { padding: 44px 20px; text-align: center; color: var(--nx-text-dim); }
.nx-vazio h2 { color: var(--nx-text); }
.nx-vazio p { max-width: 46ch; margin: 0 auto .8em; }

.nx-skel { background: linear-gradient(90deg, var(--nx-surface-2) 25%, var(--nx-surface-3) 37%, var(--nx-surface-2) 63%); background-size: 400% 100%; animation: nx-sk 1.3s ease-in-out infinite; border-radius: var(--nx-radius-s); color: transparent !important; }
@keyframes nx-sk { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
@media (prefers-reduced-motion: reduce) { .nx-skel { animation: none; } }

.nx-alerta {
  padding: 11px 14px; border-radius: var(--nx-radius-s);
  background: var(--nx-surface-2); border-left: 3px solid var(--nx-warn);
  font-size: .88rem; margin-bottom: 14px;
}
.nx-alerta-neg { border-left-color: var(--nx-neg); }

/* ──────────────────── 10. RESPONSIVO ──────────────────── */
@media (max-width: 1080px) {
  /* minmax(0, 1fr) e não `1fr`: o mínimo automático de um item de grid é o
     min-content dele, e o min-content de um <select> é a opção mais LONGA. Com
     `1fr` puro, uma opção comprida esticava o formulário para 516px numa tela
     de 415 e a página inteira ganhava rolagem lateral. */
  .nx-ferramenta { grid-template-columns: minmax(0, 1fr); }
  .nx-ferramenta > * { min-width: 0; }
  .nx-painel-form { position: static; }
}
@media (max-width: 900px) {
  /* [FERR-RESP] minmax(0,1fr) + min-width:0: SEM isso, os chips nowrap da
     .nx-nav esticam o track do grid (min-width:auto) e a PÁGINA INTEIRA rola
     na horizontal no celular — medido: 1040px de conteúdo em viewport de 390.
     Com o min-width zerado, quem rola é a régua de chips, não a página. */
  .nx-corpo { grid-template-columns: minmax(0, 1fr); gap: 18px; padding: 18px 14px 48px; }
  .nx-corpo > * { min-width: 0; }
  .nx-lateral { position: static; }
  .nx-nav { flex-direction: row; overflow-x: auto; gap: 6px; padding-bottom: 4px; }
  .nx-nav a { white-space: nowrap; border: 1px solid var(--nx-border); }
  .nx-nav a[aria-current="page"] { box-shadow: none; border-color: var(--nx-accent, #ff5500); }
  .nx-lateral h3 { display: none; }
}
@media (max-width: 640px) {
  .nx { font-size: 14.5px; }
  .nx-topo { gap: 9px; padding: 0 11px; }
  /* [FERR-S3-MOBILE] no celular fica só o ícone da marca (clicável) — o mesmo
     padrão da loja, que esconde o .logo-txt em tela estreita. Sem isso o texto
     disputava espaço com a busca e um dos dois transbordava. */
  .nx-marca-txt { display: none; }
  .nx-topo-busca { max-width: none; }
  .nx-topo-busca .nx-kbd { display: none; }
  .nx-link-loja span { display: none; }
  .nx-grid { grid-template-columns: 1fr; }
  .nx-kpis { grid-template-columns: repeat(auto-fit, minmax(142px, 1fr)); gap: 9px; }
  .nx-kpi { padding: 10px 12px; }
  .nx-kpi .nx-kpi-val { font-size: 1.22rem; }
  .nx-kpi-1 .nx-kpi-val { font-size: 1.42rem; }
  .nx-painel { padding: 13px; }
  /* Especificidade IGUAL à da regra base, senão a base vence (§5.16). */
  table.nx-tabela { font-size: .81rem; }
  table.nx-tabela th, table.nx-tabela td { padding: 6px 7px; }
  .nx-paleta-caixa { margin-top: 4vh; }
}
@media (max-width: 380px) {
  .nx-kpis { grid-template-columns: 1fr 1fr; }
  .nx-acoes .nx-btn { flex: 1 1 auto; }
}

/* ──────────────────── 11. IMPRESSÃO ──────────────────── */
@media print {
  :root { --nx-bg: #fff; --nx-surface: #fff; --nx-surface-2: #fff; --nx-surface-3: #fff;
          --nx-text: #000; --nx-text-dim: #333; --nx-text-mute: #555; --nx-border: #bbb; --nx-border-2: #999; }
  .nx-topo, .nx-lateral, .nx-paleta, .nx-acoes, .nx-rodape, .nx-abas { display: none !important; }
  .nx-corpo, .nx-ferramenta { display: block; }
  .nx-aba-painel[hidden] { display: block !important; }
  .nx-painel { border: 1px solid #bbb; break-inside: avoid; margin-bottom: 12px; }
  .nx-faq details { break-inside: avoid; }
  .nx-faq details:not([open]) > *:not(summary) { display: block; }
  a[href]::after { content: ""; }
}

/* ──────────────────── 12. FERRAMENTAS DE PDF [FERR-PDF-UX] ────────────────────
   Pré-visualização com miniaturas reais, reordenação por arraste, seleção
   visual de páginas, barra de progresso e painel de resultado. Tudo sobre os
   tokens do tema — nada de cor fixa (§multi-tenant). */

/* dropzone */
.pdfx-drop2 { border: 2px dashed var(--nx-border-2); border-radius: var(--nx-radius);
  padding: 28px 18px; text-align: center; cursor: pointer; background: var(--nx-surface);
  transition: border-color .18s ease, background .18s ease, transform .18s ease; }
.pdfx-drop2:hover { border-color: var(--nx-accent); }
.pdfx-drop2.is-drag { border-color: var(--nx-accent); background: var(--nx-surface-2);
  transform: scale(1.01); box-shadow: 0 0 0 4px color-mix(in srgb, var(--nx-accent) 18%, transparent); }
.pdfx-drop2 .pdfx-ico { width: 42px; height: 42px; margin: 0 auto 8px; display: block;
  color: var(--nx-accent); }

/* cartões de arquivo (juntar/hub) */
.pdfx-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 12px; margin-top: 14px; }
.pdfx-card { background: var(--nx-surface-2); border: 1px solid var(--nx-border);
  border-radius: var(--nx-radius); padding: 10px; display: flex; gap: 10px;
  align-items: flex-start; cursor: grab; position: relative;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease, opacity .15s ease; }
.pdfx-card:hover { transform: translateY(-2px); box-shadow: var(--nx-sombra); }
.pdfx-card.is-ghost { opacity: .35; cursor: grabbing; }
.pdfx-card.is-over { border-color: var(--nx-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--nx-accent) 25%, transparent); }
.pdfx-card-thumb { flex: 0 0 64px; width: 64px; height: 84px; border-radius: var(--nx-radius-s);
  overflow: hidden; background: var(--nx-surface-3); position: relative; }
.pdfx-card-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pdfx-card-info { flex: 1; min-width: 0; }
.pdfx-card-nome { font-weight: 600; font-size: .86rem; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.pdfx-card-meta { color: var(--nx-text-dim); font-size: .76rem; margin-top: 2px; }
.pdfx-card-ordem { position: absolute; top: -8px; left: -8px; min-width: 22px; height: 22px;
  border-radius: 11px; background: var(--nx-accent); color: #fff; font-size: .74rem;
  font-weight: 700; display: flex; align-items: center; justify-content: center;
  padding: 0 5px; box-shadow: var(--nx-sombra); }
.pdfx-card-acoes { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.pdfx-card-acoes .nx-btn { padding: 4px 9px; font-size: .76rem; }
.pdfx-card input[type="text"] { width: 100%; margin-top: 8px; padding: 6px 8px;
  border: 1px solid var(--nx-border); border-radius: var(--nx-radius-s);
  background: var(--nx-surface); color: var(--nx-text); font-size: .8rem; }

/* grade de miniaturas de páginas (operações de arquivo único) */
.pdfx-thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  gap: 10px; margin-top: 14px; }
.pdfx-th { position: relative; border: 2px solid var(--nx-border); border-radius: var(--nx-radius-s);
  overflow: hidden; background: var(--nx-surface-2); cursor: pointer; aspect-ratio: 3 / 4;
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease; }
.pdfx-th:hover { transform: translateY(-2px); border-color: var(--nx-border-2); }
.pdfx-th img { width: 100%; height: 100%; object-fit: contain; display: block;
  background: #fff; transition: transform .25s ease; }
.pdfx-th.is-sel { border-color: var(--nx-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--nx-accent) 28%, transparent); }
.pdfx-th.is-sel::after { content: "✓"; position: absolute; top: 5px; right: 5px; width: 20px;
  height: 20px; border-radius: 50%; background: var(--nx-accent); color: #fff; font-size: .72rem;
  font-weight: 700; display: flex; align-items: center; justify-content: center; }
.pdfx-th-pg { position: absolute; bottom: 4px; left: 4px; background: rgba(0,0,0,.62);
  color: #fff; font-size: .68rem; padding: 1px 7px; border-radius: 9px; pointer-events: none; }
/* overlay da marca d'água ao vivo */
.pdfx-th-marca { position: absolute; inset: 0; display: flex; align-items: center;
  justify-content: center; pointer-events: none; overflow: hidden; }
.pdfx-th-marca span { color: #555; font-weight: 800; white-space: nowrap;
  text-transform: none; letter-spacing: .02em; }
/* badge do número de página ao vivo (numerar) */
.pdfx-th-num { position: absolute; pointer-events: none; color: #333; font-size: .62rem;
  background: rgba(255,255,255,.75); padding: 0 4px; border-radius: 3px; }
.pdfx-th-num.p-rc { bottom: 3px; left: 50%; transform: translateX(-50%); }
.pdfx-th-num.p-rd { bottom: 3px; right: 4px; }
.pdfx-th-num.p-re { bottom: 3px; left: 4px; }
.pdfx-th-num.p-tc { top: 3px; left: 50%; transform: translateX(-50%); }
.pdfx-th-num.p-td { top: 3px; right: 4px; }

/* skeleton enquanto a miniatura renderiza */
.pdfx-skel { position: absolute; inset: 0;
  background: linear-gradient(100deg, var(--nx-surface-2) 40%, var(--nx-surface-3) 50%, var(--nx-surface-2) 60%);
  background-size: 200% 100%; animation: pdfx-shimmer 1.1s linear infinite; }
@keyframes pdfx-shimmer { to { background-position: -200% 0; } }

/* barra de progresso */
.pdfx-prog { margin-top: 14px; }
.pdfx-prog-rot { display: flex; justify-content: space-between; font-size: .8rem;
  color: var(--nx-text-dim); margin-bottom: 5px; }
.pdfx-prog-t { height: 8px; border-radius: 4px; background: var(--nx-surface-3); overflow: hidden; }
.pdfx-prog-b { height: 100%; width: 0; border-radius: 4px;
  background: linear-gradient(90deg, var(--nx-accent), var(--nx-accent-dark));
  transition: width .2s ease; }

/* painel de resultado */
.pdfx-res { margin-top: 14px; border: 1px solid var(--nx-border); border-left: 4px solid var(--nx-pos);
  border-radius: var(--nx-radius); background: var(--nx-surface-2); padding: 14px 16px;
  display: flex; gap: 12px; align-items: center; flex-wrap: wrap;
  animation: pdfx-entra .25s ease; }
.pdfx-res.is-erro { border-left-color: var(--nx-neg); }
.pdfx-res-ico { width: 34px; height: 34px; border-radius: 50%; background: var(--nx-pos);
  color: #06281c; display: flex; align-items: center; justify-content: center;
  font-size: 1.05rem; font-weight: 800; flex: 0 0 34px; }
.pdfx-res.is-erro .pdfx-res-ico { background: var(--nx-neg); color: #fff; }
.pdfx-res-info { flex: 1 1 220px; min-width: 0; }
.pdfx-res-nome { font-family: var(--nx-font-num); font-size: .82rem; word-break: break-all; }
.pdfx-res-det { color: var(--nx-text-dim); font-size: .78rem; margin-top: 2px; }
@keyframes pdfx-entra { from { opacity: 0; transform: translateY(6px); } }

/* selecionar/limpar seleção de páginas */
.pdfx-sel-acoes { display: flex; gap: 8px; align-items: center; margin-top: 10px;
  font-size: .8rem; color: var(--nx-text-dim); flex-wrap: wrap; }

@media (max-width: 560px) {
  .pdfx-cards { grid-template-columns: 1fr 1fr; }
  .pdfx-thumbs { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); }
  .pdfx-card { flex-direction: column; }
  .pdfx-card-thumb { width: 100%; height: 110px; flex-basis: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .pdfx-drop2, .pdfx-card, .pdfx-th, .pdfx-th img, .pdfx-prog-b { transition: none; }
  .pdfx-skel { animation: none; }
  .pdfx-res { animation: none; }
}

/* crédito do desenvolvedor no rodapé — destacado, pedido do Denis [FERR-PDF-UX] */
.nx-dev { text-align: center; margin-top: 12px; padding: 9px 14px; font-size: .84rem;
  color: var(--nx-text-dim); border-top: 1px solid var(--nx-border); }
.nx-dev a { color: var(--nx-accent-text); font-weight: 700; text-decoration: none;
  border-bottom: 1px solid var(--nx-accent); padding-bottom: 1px;
  transition: color .15s ease, border-color .15s ease; }
.nx-dev a:hover { color: var(--nx-accent); border-bottom-width: 2px; }
:root:not([data-tema="light"]) .nx-dev a { color: var(--nx-accent); }

/* ──────────────── 13. VISUALIZADOR (zoom) + COMPARTILHAR [FERR-ZOOM/SHARE] ──
   Lightbox de páginas/anexos com zoom e navegação; botão de compartilhar com
   popover de fallback. Tokens do tema — nada de cor fixa. */

/* lupa sobre miniatura/cartão */
.pdfx-lupa { position: absolute; top: 5px; left: 5px; width: 26px; height: 26px;
  border: none; border-radius: 50%; background: rgba(10, 14, 20, .62); color: #fff;
  font-size: .82rem; line-height: 1; cursor: zoom-in; display: flex; align-items: center;
  justify-content: center; opacity: 0; transition: opacity .15s ease, transform .15s ease;
  z-index: 2; }
.pdfx-th:hover .pdfx-lupa, .pdfx-card:hover .pdfx-lupa,
.pdfx-lupa:focus-visible { opacity: 1; }
.pdfx-lupa:hover { transform: scale(1.12); background: var(--nx-accent); }
@media (hover: none) { .pdfx-lupa { opacity: .85; } }   /* toque: sempre visível */

/* lightbox */
.pdfx-lb { position: fixed; inset: 0; z-index: 3000; display: flex; flex-direction: column;
  background: rgba(6, 10, 15, .90); backdrop-filter: blur(6px);
  animation: pdfx-lb-entra .18s ease; }
@keyframes pdfx-lb-entra { from { opacity: 0; } }
.pdfx-lb-top { display: flex; gap: 10px; align-items: center; padding: 10px 14px;
  color: #fff; font-size: .88rem; flex-wrap: wrap; }
.pdfx-lb-rotulo { flex: 1 1 200px; min-width: 0; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; }
.pdfx-lb-btn { width: 38px; height: 38px; border-radius: 50%; border: 1px solid
  rgba(255,255,255,.25); background: rgba(255,255,255,.08); color: #fff; font-size: 1rem;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: background .15s ease, transform .15s ease; flex: 0 0 38px; }
.pdfx-lb-btn:hover { background: var(--nx-accent); transform: scale(1.06); }
.pdfx-lb-corpo { flex: 1; position: relative; overflow: hidden; display: flex;
  align-items: center; justify-content: center; cursor: grab; touch-action: none; }
.pdfx-lb-corpo.is-pan { cursor: grabbing; }
.pdfx-lb-corpo img { background: #fff; box-shadow: 0 14px 60px rgba(0,0,0,.55);
  transform-origin: 0 0; user-select: none; -webkit-user-drag: none; max-width: none;
  border-radius: 3px; }
.pdfx-lb-nav { position: absolute; top: 50%; transform: translateY(-50%);
  width: 46px; height: 46px; border-radius: 50%; border: none; cursor: pointer;
  background: rgba(255,255,255,.10); color: #fff; font-size: 1.3rem;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s ease; z-index: 2; }
.pdfx-lb-nav:hover { background: var(--nx-accent); }
.pdfx-lb-nav[disabled] { opacity: .25; cursor: default; }
.pdfx-lb-ant { left: 12px; } .pdfx-lb-prox { right: 12px; }
.pdfx-lb-pag { position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%);
  background: rgba(10,14,20,.72); color: #fff; padding: 5px 14px; border-radius: 16px;
  font-size: .8rem; pointer-events: none; }
.pdfx-lb-carrega { position: absolute; inset: 0; display: flex; align-items: center;
  justify-content: center; color: #fff; font-size: .9rem; pointer-events: none; }

/* entrada com stagger das miniaturas/cartões */
.pdfx-th, .pdfx-card { animation: pdfx-entra .28s ease backwards; }
.pdfx-th:nth-child(2), .pdfx-card:nth-child(2) { animation-delay: .04s; }
.pdfx-th:nth-child(3), .pdfx-card:nth-child(3) { animation-delay: .08s; }
.pdfx-th:nth-child(4), .pdfx-card:nth-child(4) { animation-delay: .12s; }
.pdfx-th:nth-child(5), .pdfx-card:nth-child(5) { animation-delay: .16s; }
.pdfx-th:nth-child(n+6), .pdfx-card:nth-child(n+6) { animation-delay: .2s; }

/* botão e popover de compartilhar */
.nx-share-linha { margin-top: 10px; display: flex; gap: 8px; flex-wrap: wrap; }
.nx-share-btn { display: inline-flex; align-items: center; gap: 7px; }
.nx-share-btn svg { width: 15px; height: 15px; }
.nx-share-pop { position: absolute; z-index: 2900; background: var(--nx-surface-2);
  border: 1px solid var(--nx-border-2); border-radius: var(--nx-radius);
  box-shadow: var(--nx-sombra); padding: 8px; display: grid; gap: 4px; min-width: 210px;
  animation: pdfx-entra .16s ease; }
.nx-share-pop button, .nx-share-pop a { display: flex; align-items: center; gap: 9px;
  width: 100%; padding: 9px 10px; border: none; border-radius: var(--nx-radius-s);
  background: transparent; color: var(--nx-text); font: inherit; font-size: .88rem;
  text-align: left; cursor: pointer; text-decoration: none;
  transition: background .12s ease; }
.nx-share-pop button:hover, .nx-share-pop a:hover { background: var(--nx-surface-3); }
.nx-share-ok { color: var(--nx-pos); font-size: .82rem; padding: 4px 10px; }

@media (prefers-reduced-motion: reduce) {
  .pdfx-lb, .nx-share-pop, .pdfx-th, .pdfx-card { animation: none; }
  .pdfx-lupa, .pdfx-lb-btn, .pdfx-lb-nav { transition: none; }
}

/* ──────────────── 14. CONTADORES DE USO [FERR-STATS] ────────────────
   Prova social viva: acessos e ações executadas, com número que SOBE
   (count-up no nexus-core). Tokens do tema. */
.nx-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px; margin: 14px 0 4px; }
.nx-stat { background: var(--nx-surface-2); border: 1px solid var(--nx-border);
  border-radius: var(--nx-radius); padding: 12px 16px; position: relative; overflow: hidden;
  transition: transform .15s ease, border-color .15s ease; }
.nx-stat:hover { transform: translateY(-2px); border-color: var(--nx-accent); }
.nx-stat::after { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: linear-gradient(90deg, var(--nx-accent), var(--nx-accent-dark)); }
.nx-stat-num { font-family: var(--nx-font-num); font-size: 1.55rem; font-weight: 700;
  color: var(--nx-accent); line-height: 1.15; }
.nx-stat-rot { color: var(--nx-text-dim); font-size: .78rem; margin-top: 2px; }
.nx-uso-badge { display: inline-flex; align-items: center; gap: 4px;
  background: var(--nx-accent-light); color: var(--nx-accent-text);
  border-radius: 12px; padding: 2px 9px; font-size: .74rem; font-weight: 700; }
:root:not([data-tema="light"]) .nx-uso-badge {
  background: color-mix(in srgb, var(--nx-accent) 18%, transparent); color: var(--nx-accent); }
@media (max-width: 640px) {
  .nx-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
  .nx-stat { padding: 9px 10px; }
  .nx-stat-num { font-size: 1.18rem; }
  .nx-stat-rot { font-size: .68rem; }
}
@media (prefers-reduced-motion: reduce) { .nx-stat { transition: none; } }

/* [FERR-FIX-HIDDEN] regra autoral de display (ex.: .pdfx-res{display:flex})
   VENCE o display:none que o navegador dá ao atributo [hidden] — foi assim
   que o painel de resultado apareceu VAZIO (✓ sem nome) nos prints do Denis.
   Esta folha só carrega no shell do NEXUS: o global aqui é seguro e devolve
   ao [hidden] a semântica que a spec promete. */
[hidden] { display: none !important; }

/* barra de progresso com percentual do motor CAD [FERR-CAD-PROG] */
.cadx-prog-mini { font-variant-numeric: tabular-nums; }

/* ──────────── 15. PAINEL DE INDICADORES [FERR-IND] ────────────
   Chrome do gráfico sai dos tokens do tema; a COR DA SÉRIE vem do JS (paleta
   validada). Texto nunca usa a cor da série — só a marquinha ao lado dele. */

.nx-ind-filtro { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 16px; }
.nx-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 13px;
  border: 1px solid var(--nx-border); border-radius: 999px; background: var(--nx-surface-2);
  color: var(--nx-text-dim); font-size: .86rem; text-decoration: none;
  transition: border-color .15s ease, color .15s ease, background .15s ease; }
.nx-chip:hover { color: var(--nx-text); border-color: var(--nx-border-2); text-decoration: none; }
.nx-chip.is-on { background: var(--nx-surface-3); color: var(--nx-text);
  border-color: var(--chip-cor, var(--nx-accent)); font-weight: 600; }
.nx-chip-bola { width: 9px; height: 9px; border-radius: 50%;
  background: var(--chip-cor, var(--nx-accent)); flex: 0 0 auto; }

/* KPIs */
.nx-ind-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(196px, 1fr));
  gap: 11px; margin-bottom: 20px; }
.nx-ind-kpi { background: var(--nx-surface-2); border: 1px solid var(--nx-border);
  border-radius: var(--nx-radius); padding: 13px 15px; position: relative; overflow: hidden; }
.nx-ind-kpi::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px;
  background: var(--kpi-cor, var(--nx-accent)); }
.nx-ind-kpi-rot { color: var(--nx-text-dim); font-size: .78rem; }
.nx-ind-kpi-val { font-family: var(--nx-font-num); font-size: 1.5rem; font-weight: 700;
  color: var(--nx-text); line-height: 1.2; margin-top: 3px; }
.nx-ind-kpi-var { font-size: .8rem; margin-top: 3px; font-weight: 600; }
.nx-ind-kpi-var.is-sobe  { color: var(--nx-pos); }
.nx-ind-kpi-var.is-desce { color: var(--nx-neg); }
.nx-ind-kpi-var .nx-dim { font-weight: 400; font-size: .74rem; }
.nx-ind-kpi-nota { color: var(--nx-text-dim); font-size: .78rem; margin-top: 3px; }

/* gráficos */
.nx-ind-graf { margin: 0 0 22px; }
.nx-ind-graf h3 { font-size: .98rem; margin: 0 0 8px; }
.nx-ind-canvas { position: relative; background: var(--nx-surface);
  border: 1px solid var(--nx-border); border-radius: var(--nx-radius); padding: 10px 6px 4px; }
.nx-ind-canvas svg { display: block; width: 100%; height: auto; overflow: visible; }

.nx-ind-leg { display: flex; flex-wrap: wrap; gap: 14px; padding: 8px 10px 4px;
  font-size: .82rem; color: var(--nx-text-dim); }
.nx-ind-leg i { display: inline-block; width: 10px; height: 10px; border-radius: 2px;
  margin-right: 6px; vertical-align: -1px; }

.nx-ind-tip { position: absolute; z-index: 5; background: var(--nx-surface-3);
  border: 1px solid var(--nx-border-2); border-radius: 8px; padding: 8px 10px;
  font-size: .8rem; color: var(--nx-text); pointer-events: none; min-width: 150px;
  box-shadow: var(--nx-sombra); }
.nx-ind-tip-l { display: block; margin-top: 3px; white-space: nowrap; }
.nx-ind-tip-l i { display: inline-block; width: 8px; height: 8px; border-radius: 2px;
  margin-right: 6px; }

/* barras horizontais (ranking / componentes) */
.nx-ind-barras { display: grid; gap: 7px; padding: 4px 6px 8px; }
.nx-ind-barra { display: grid; grid-template-columns: minmax(90px, 30%) 1fr auto;
  gap: 10px; align-items: center; }
.nx-ind-barra-rot { font-size: .84rem; color: var(--nx-text); overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.nx-ind-barra-trilho { height: 12px; border-radius: 4px; background: var(--nx-surface-3);
  overflow: hidden; }
.nx-ind-barra-fill { height: 100%; border-radius: 4px; transition: width .5s ease; }
.nx-ind-barra-val { font-family: var(--nx-font-num); font-size: .82rem;
  color: var(--nx-text-dim); white-space: nowrap; }

.nx-ind-leitura { margin: 10px 12px 4px; font-size: .9rem; color: var(--nx-text); }

/* tabela de dados (acessibilidade + copiar para proposta) */
.nx-ind-tab { margin: 4px 0 18px; }
.nx-ind-tab > summary { cursor: pointer; font-weight: 600; font-size: .9rem;
  padding: 9px 12px; background: var(--nx-surface-2); border: 1px solid var(--nx-border);
  border-radius: var(--nx-radius); }
.nx-ind-tab[open] > summary { border-radius: var(--nx-radius) var(--nx-radius) 0 0; }
.nx-ind-tab .nx-tabela-wrap { border: 1px solid var(--nx-border); border-top: 0;
  border-radius: 0 0 var(--nx-radius) var(--nx-radius); max-height: 420px; overflow: auto; }

/* procedência */
.nx-ind-fontes { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--nx-border); }
.nx-ind-fontes h3 { font-size: .92rem; margin: 0 0 10px; }
.nx-ind-fonte { padding: 9px 0; border-bottom: 1px dashed var(--nx-border); font-size: .88rem; }
.nx-ind-fonte:last-of-type { border-bottom: 0; }
.nx-ind-sigla { display: inline-block; background: var(--nx-accent-light);
  color: var(--nx-accent-text); border-radius: 5px; padding: 1px 7px; font-size: .74rem;
  font-weight: 700; margin-right: 7px; }
:root:not([data-tema="light"]) .nx-ind-sigla {
  background: color-mix(in srgb, var(--nx-accent) 20%, transparent); color: var(--nx-accent); }

@media (max-width: 640px) {
  .nx-ind-kpis { grid-template-columns: 1fr 1fr; gap: 8px; }
  .nx-ind-kpi { padding: 10px 11px; }
  .nx-ind-kpi-val { font-size: 1.18rem; }
  .nx-ind-barra { grid-template-columns: minmax(74px, 38%) 1fr; }
  .nx-ind-barra-val { grid-column: 2; text-align: right; font-size: .76rem; }
  .nx-ind-canvas { padding: 8px 2px 2px; }
}
@media (prefers-reduced-motion: reduce) {
  .nx-chip, .nx-ind-barra-fill { transition: none; }
}

/* small multiples: escalas incomparáveis ganham um quadro cada [FERR-IND] */
.nx-ind-mult { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 10px; }
.nx-ind-mult-cel { border: 1px solid var(--nx-border); border-radius: var(--nx-radius-s);
  padding: 6px 4px 2px; background: var(--nx-surface); }
.nx-ind-mult-tit { font-size: .82rem; font-weight: 600; color: var(--nx-text);
  padding: 2px 8px 4px; }
.nx-ind-mult-tit i { display: inline-block; width: 9px; height: 9px; border-radius: 2px;
  margin-right: 6px; vertical-align: -1px; }
.nx-ind-mult-graf { position: relative; }

/* nota de leitura embaixo de um gráfico: explica como o número foi montado sem
   ocupar o título (que precisa dizer O QUE é, não COMO se calcula) */
.nx-ind-graf-nota { margin: 6px 2px 0; font-size: .8rem; line-height: 1.45;
  color: var(--nx-text-dim); }

/* conversor de moeda [FERR-IND3]: fica ACIMA dos gráficos porque é a ação que
   a pessoa veio fazer — o histórico é contexto, a conversão é a tarefa */
.nx-ind-conv { border: 1px solid var(--nx-border); border-radius: var(--nx-radius-s);
  padding: 12px 14px; margin: 0 0 16px; background: var(--nx-surface); }
.nx-ind-conv h3 { font-size: .95rem; }
.nx-ind-conv-linha { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.nx-ind-conv-linha input, .nx-ind-conv-linha select {
  padding: 8px 10px; border: 1px solid var(--nx-border); border-radius: 6px;
  background: var(--nx-bg); color: var(--nx-text); font-size: .95rem; }
.nx-ind-conv-linha input { width: 9.5rem; font-variant-numeric: tabular-nums; }
.nx-ind-conv-linha select { min-width: 13rem; max-width: 100%; }
.nx-ind-conv-linha .nx-rot { margin: 0 2px 0 0; font-size: .8rem; }
.nx-ind-conv-saida { margin: 10px 0 0; font-size: 1.15rem; font-weight: 700;
  color: var(--nx-text); font-variant-numeric: tabular-nums; }
.nx-ind-conv-saida.is-vazio { font-size: .9rem; font-weight: 400; color: var(--nx-text-dim); }
@media (max-width: 560px) {
  .nx-ind-conv-linha input, .nx-ind-conv-linha select { flex: 1 1 100%; width: auto; }
  .nx-ind-conv-saida { font-size: 1.05rem; }
}

/* habilitações suspensas [FERR-IND2]: lista, não gráfico — cada item é um fato
   com data. A borda de aviso usa o token de status, nunca a cor de série. */
.nx-ind-susp { display: grid; gap: 8px; margin-top: 8px; }
.nx-ind-susp-item { border: 1px solid var(--nx-border); border-left: 3px solid #d9822b;
  border-radius: var(--nx-radius-s); padding: 8px 10px; background: var(--nx-surface); }
.nx-ind-susp-item strong { font-size: .9rem; }
.nx-ind-susp-data { font-size: .78rem; font-weight: 600; color: #d9822b; margin-top: 3px; }
@media (max-width: 560px) {
  .nx-ind-susp-item { padding: 7px 8px; }
  .nx-ind-susp-item strong { font-size: .85rem; }
}

/* ── RADAR DE COMPRAS [FERR-IND4] ──────────────────────────────────────────
   Cartão de alerta: a cor da borda diz a direção, mas NUNCA sozinha — a seta e
   a palavra ("em 3 meses", "alta") carregam a mesma informação, porque cor
   isolada exclui quem não a distingue e não sobrevive a impressão em preto. */
.nx-ind-radar { display: grid; gap: 10px; margin: 0 0 6px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.nx-alerta { border: 1px solid var(--nx-border); border-left: 4px solid var(--nx-border);
  border-radius: var(--nx-radius-s); padding: 11px 13px; background: var(--nx-surface); }
.nx-alerta.is-alta   { border-left-color: #d9822b; }
.nx-alerta.is-queda  { border-left-color: #1baf7a; }
.nx-alerta.is-estavel{ border-left-color: var(--nx-border); }
.nx-alerta.is-extra  { box-shadow: 0 0 0 1px var(--nx-border) inset; background: var(--nx-bg); }
.nx-alerta header { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-bottom: 6px; }
.nx-alerta header strong { font-size: .95rem; }
.nx-alerta-tag { font-size: .68rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; padding: 2px 6px; border-radius: 4px;
  background: #d9822b; color: #fff; }
.nx-alerta-num { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.nx-alerta-valor { font-size: 1.18rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.nx-alerta-var { font-size: .88rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.is-alta  .nx-alerta-var { color: #b8690f; }
.is-queda .nx-alerta-var { color: #12805a; }
.nx-alerta-txt { margin: 7px 0 0; font-size: .86rem; line-height: 1.5; color: var(--nx-text); }
.nx-alerta-pe { margin-top: 7px; font-size: .76rem; color: var(--nx-text-dim);
  font-variant-numeric: tabular-nums; }
@media (max-width: 560px) {
  .nx-ind-radar { grid-template-columns: 1fr; }
  .nx-alerta-valor { font-size: 1.08rem; }
}

/* PÁGINA VIVA [FERR-IND6]: chips de período, tabela ordenável e ações da tabela */
.nx-ind-perio { display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  margin: 0 2px 10px; }
.nx-ind-perio .nx-dim { font-size: .8rem; margin-right: 2px; }
.nx-chip-mini { font-size: .78rem; padding: 4px 10px; border-radius: 999px;
  border: 1px solid var(--nx-border); background: var(--nx-surface);
  color: var(--nx-text); cursor: pointer; transition: background .15s, border-color .15s; }
.nx-chip-mini:hover { border-color: var(--nx-primary, #ff5500); }
.nx-chip-mini.is-on { border-color: var(--nx-primary, #ff5500);
  background: color-mix(in srgb, var(--nx-primary, #ff5500) 12%, transparent);
  font-weight: 600; }
.nx-ind-tab th.is-ordenavel { cursor: pointer; user-select: none; position: relative; }
.nx-ind-tab th.is-ordenavel:hover { color: var(--nx-text); }
.nx-ind-tab th.is-ordenavel::after { content: '⇅'; opacity: .28; margin-left: 5px;
  font-size: .82em; }
.nx-ind-tab th[data-ord="desc"]::after { content: '▼'; opacity: .85; }
.nx-ind-tab th[data-ord="asc"]::after  { content: '▲'; opacity: .85; }
.nx-ind-tab-bts { display: flex; gap: 8px; flex-wrap: wrap; padding: 8px 2px 2px; }
@media (max-width: 560px) {
  .nx-ind-perio { gap: 5px; }
  .nx-chip-mini { font-size: .74rem; padding: 4px 9px; }
  .nx-ind-tab-bts .nx-btn { flex: 1 1 auto; }
}

/* SELO DE ATUALIZAÇÃO [FERR-IND8]: quando o dado foi coletado, antes do número.
   O ponto pulsa devagar — sinal de "vivo", não de alarme. A cor sozinha não
   carrega o estado: o texto diz "atualizados há X" e, quando atrasa, aparece a
   etiqueta escrita. */
.nx-ind-selo { display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  padding: 8px 12px; margin: 0 0 14px; border: 1px solid var(--nx-border);
  border-left: 3px solid #1baf7a; border-radius: var(--nx-radius-s);
  background: var(--nx-surface); font-size: .85rem; }
.nx-ind-selo strong { font-weight: 600; }
.nx-ind-selo .nx-dim { font-size: .8rem; }
.nx-ind-selo-pt { width: 8px; height: 8px; border-radius: 50%; background: #1baf7a;
  flex: 0 0 auto; animation: nxPulso 2.4s ease-in-out infinite; }
.nx-ind-selo-per { margin-left: auto; }
.nx-ind-selo.is-velho { border-left-color: #d9822b; }
.nx-ind-selo.is-velho .nx-ind-selo-pt { background: #d9822b; animation: none; }
.nx-ind-selo-tag { font-size: .68rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; padding: 2px 6px; border-radius: 4px;
  background: #d9822b; color: #fff; }
@keyframes nxPulso {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .45; transform: scale(.82); }
}
@media (prefers-reduced-motion: reduce) { .nx-ind-selo-pt { animation: none; } }
@media (max-width: 560px) {
  .nx-ind-selo { font-size: .8rem; padding: 7px 10px; }
  .nx-ind-selo-per { margin-left: 0; flex-basis: 100%; }
}