/* ==========================================================================
   Nexus DS v8 (lp.nexusgrowth.com.br) para ferramentas internas
   ds-nexus-v8 1.3.1 · 12/10/2026
   Fonte canônica: /root/design/nexus-design-systems/internal/nexus/v8/
   Cópias em projetos são vendorizadas: NÃO editar a cópia; mudar aqui, subir a
   versão (SemVer, aprovação do Daniel) e redistribuir com scripts/vendor.sh.

   Fonte da verdade: o HTML publicado em https://lp.nexusgrowth.com.br
   (public/index.html do repo lp-nexusgrowth, "DS v8-final"). Conferido por curl
   em 08/10/2026: o publicado e o arquivo do repo só diferem na tag canonical.
   O src/styles/base.css do mesmo repo (papel creme #fbf6ee, Alexandria) NÃO é
   o que está no ar e não entra aqui.

   Ponto de partida: /root/projects/workload/prototype/ds/nexus-v8.css (copiado,
   não editado). O que este arquivo acrescenta: escala tipográfica medida no
   navegador, espaçamento, raios, sombras e movimento da home, os componentes
   de marca (beam-btn, ghost-btn, frente, sintoma, faixa de prova, FAQ) e os
   componentes de app (tabela, badges de estado, inputs, abas, alerta, gráfico).

   Três camadas:
     1. Tokens primitivos (valores da home, verbatim quando existem)
     2. Tokens semânticos por tema (claro = home; escuro = derivado da .sec-dark)
     3. Componentes (prefixo nx-)

   Regra de cor que governa tudo: cinza para o que está normal, Vermilion para
   o que pede ação e, nos gráficos, para o destaque (último período fechado e
   pico; decisão de 12/10/2026). O DS não tem verde, amarelo nem azul de status.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. TOKENS PRIMITIVOS
   -------------------------------------------------------------------------- */
:root {
  /* Neutros da home (verbatim do :root publicado) */
  --nx-white: #FFFFFF;          /* --bg-body */
  --nx-gray-50: #F9F9F9;        /* --bg-surface */
  --nx-gray-100: #F0F0F0;       /* --bg-highlight */
  --nx-gray-200: #E5E5E5;       /* --border-light */
  --nx-gray-400: #A3A3A3;       /* --text-light */
  --nx-gray-500: #737373;       /* --text-muted */
  --nx-gray-700: #404040;       /* neutral-700 do Tailwind, usado em texto secundário de app */
  --nx-ink: #0A0A0A;            /* --text-main */

  /* Vermilion (verbatim) */
  --nx-vermilion-300: #FF6B2E;  /* --accent-hover */
  --nx-vermilion-400: #F94B0C;  /* --accent-primary */
  --nx-vermilion-500: #D93F09;  /* --accent-active */
  --nx-vermilion-600: #A63208;  /* --accent-text-safe: único laranja como texto sobre claro */

  /* Contorno de controle com 3:1 (WCAG 1.4.11). Não existe na home: o
     #E5E5E5 da home dá 1,26:1 como borda de campo. Valor herdado do gerador
     da home do blog (nexusgrowth.com.br/blog), que já corrigiu isso. */
  --nx-gray-control: #8F8D8A;

  /* Tipografia */
  --nx-font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --nx-font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Escala de marca (medida no Chromium a 1440px em 08/10/2026) */
  --nx-fs-display: 4.6rem;      /* 73,6px · H1 do hero · 700 · tracking -0,05em · lh 1,08 */
  --nx-fs-h1: 3rem;             /* 48px · H2 de seção · 600 · tracking -0,025em */
  --nx-fs-h2: 2.25rem;          /* 36px · frase de fecho de seção (md:text-4xl) */
  --nx-fs-h3: 1.875rem;         /* 30px · H2 no celular (text-3xl) */
  --nx-fs-h4: 1.25rem;          /* 20px · título de cartão (.frente h3) */
  --nx-fs-lead: 1.25rem;        /* 20px · lead do hero · 300 · lh 1,4 */
  --nx-fs-body: 1rem;           /* 16px */
  --nx-fs-sm: 0.875rem;         /* 14px · corpo de cartão */
  --nx-fs-xs: 0.75rem;          /* 12px · piso absoluto de texto (regra da home) */
  --nx-fs-numeral: 3rem;        /* 48px · numeral mono do cartão (.frente-num) */

  /* Escala de app (densidade de ferramenta interna) */
  --nx-fs-app-title: 1.75rem;   /* 28px · título de página */
  --nx-fs-app-h2: 1.125rem;     /* 18px · título de painel */
  --nx-fs-app-body: 0.875rem;   /* 14px */
  --nx-fs-app-table: 0.8125rem; /* 13px */
  --nx-fs-app-kpi: 2.25rem;     /* 36px · número de KPI */

  --nx-fw-light: 300;
  --nx-fw-regular: 400;
  --nx-fw-medium: 500;
  --nx-fw-semibold: 600;
  --nx-fw-bold: 700;

  --nx-tracking-tighter: -0.05em;
  --nx-tracking-tight: -0.025em;
  --nx-tracking-label: 0.18em;  /* rótulo mono: a home declara 0.3em e corrige para 0.18em */
  --nx-tracking-badge: 0.12em;
  --nx-tracking-button: 0.05em;

  --nx-lh-tight: 1.08;
  --nx-lh-heading: 1.15;
  --nx-lh-snug: 1.375;
  --nx-lh-body: 1.625;          /* leading-relaxed */

  /* Espaçamento: unidade de 8px (--space-unit da home) com meio passo de 4px */
  --nx-space-unit: 8px;
  --nx-space-0-5: 4px;
  --nx-space-1: 8px;
  --nx-space-1-5: 12px;
  --nx-space-2: 16px;
  --nx-space-2-5: 20px;
  --nx-space-3: 24px;
  --nx-space-4: 32px;
  --nx-space-5: 40px;
  --nx-space-6: 48px;
  --nx-space-8: 64px;
  --nx-space-12: 96px;          /* py-24: respiro de seção */
  --nx-space-14: 112px;         /* md:py-28 */
  --nx-gutter: 48px;            /* md:px-12 */
  --nx-max-width: 1440px;

  /* Raios (todos presentes na home) */
  --nx-r-xs: 6px;               /* foco de logo */
  --nx-r-ctl: 8px;              /* campo (rounded-lg) */
  --nx-r-sm: 12px;              /* caixa do case (rounded-xl) */
  --nx-r-md: 14px;              /* .sintoma */
  --nx-r-lg: 16px;              /* cartão do formulário (rounded-2xl) */
  --nx-r-card: 18px;            /* .frente: o cartão-padrão */
  --nx-r-pill: 999px;           /* botões, selos, faixa de prova */

  /* Movimento */
  --nx-ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --nx-ease-in-out-circ: cubic-bezier(0.85, 0, 0.15, 1);
  --nx-dur-fast: 200ms;
  --nx-dur-base: 300ms;
  --nx-dur-slow: 400ms;
  --nx-dur-reveal: 800ms;
  --nx-dur-hero: 1200ms;

  /* Camadas */
  --nx-z-base: 1;
  --nx-z-sticky: 40;
  --nx-z-header: 50;
  --nx-z-overlay: 80;
  --nx-z-toast: 90;
}


/* --------------------------------------------------------------------------
   2. TOKENS SEMÂNTICOS · TEMA CLARO (a home publicada)
   -------------------------------------------------------------------------- */
:root,
[data-theme="light"] {
  --bg: var(--nx-white);
  --surface: var(--nx-gray-50);
  --highlight: var(--nx-gray-100);
  --card: var(--nx-white);
  --raised: var(--nx-white);

  --fg: var(--nx-ink);
  --fg-2: var(--nx-gray-700);
  --muted: var(--nx-gray-500);           /* 4,74:1 no branco; 4,16:1 no #F0F0F0 (só texto 18px+) */
  --faint: var(--nx-gray-400);           /* 2,52:1: só decoração, placeholder, desabilitado */

  --line: var(--nx-gray-200);            /* divisória sólida */
  --line-dash: rgba(10, 10, 10, 0.10);   /* tracejado de seção (border-black/10) */
  --line-grid: rgba(10, 10, 10, 0.05);   /* malha de fundo (border-black/5) */
  --line-control: var(--nx-gray-control);

  --accent: var(--nx-vermilion-400);
  --accent-hover: var(--nx-vermilion-300);
  --accent-active: var(--nx-vermilion-500);
  --accent-text: var(--nx-vermilion-600);
  --accent-ink: var(--nx-ink);           /* tinta sobre o Vermilion: preto 5,7:1, branco reprova */
  --accent-glow: rgba(249, 75, 12, 0.12);
  --accent-line: rgba(249, 75, 12, 0.35);
  --accent-wash: rgba(249, 75, 12, 0.05);

  --track: var(--nx-gray-100);
  --scrim: rgba(10, 10, 10, 0.32);
  --glass: rgba(255, 255, 255, 0.70);

  --shadow-sm: 0 10px 26px rgba(10, 10, 10, 0.05);
  --shadow-md: 0 18px 50px rgba(10, 10, 10, 0.06);
  --shadow-lg: 0 18px 44px rgba(10, 10, 10, 0.10);
  --shadow-lift: 0 10px 30px -10px rgba(0, 0, 0, 0.10);
  --shadow-accent: 0 10px 30px rgba(249, 75, 12, 0.12);
  --shadow-cta: 0 14px 34px rgba(249, 75, 12, 0.30);
  --shadow-cta-press: 0 8px 20px rgba(249, 75, 12, 0.24);

  /* Gráficos: série principal em tinta, comparação em cinza, Vermilion só
     para o ponto ou a série que pede ação. */
  --chart-1: var(--nx-ink);
  --chart-2: var(--nx-gray-400);
  --chart-3: #D4D4D4;
  --chart-alert: var(--nx-vermilion-400);
  --chart-grid: rgba(10, 10, 10, 0.08);
  --chart-gap: rgba(10, 10, 10, 0.06);
  --chart-ref: var(--nx-vermilion-400);        /* destaque: último período fechado e pico */
  --chart-ref-text: var(--nx-vermilion-600);   /* rótulo em cor: nunca o Vermilion puro como texto */
  --chart-ref-wash: rgba(249, 75, 12, 0.08);   /* faixa atrás do período de referência */

  color-scheme: light;
}


/* --------------------------------------------------------------------------
   3. TOKENS SEMÂNTICOS · TEMA ESCURO
   Derivado da faixa .sec-dark da home: fundo #0A0A0A, título branco, corpo a
   75%, divisória branca a 15%, caixa interna branca a 5% com borda a 10%.
   As superfícies #111/#1A1A1A são extrapolação: a home não tem modo escuro
   completo. Correção de acessibilidade: a home usa rótulo a 40% de branco
   (3,77:1, reprova em 12px); aqui o cinza de texto fica em 60% (7,3:1).
   -------------------------------------------------------------------------- */
[data-theme="dark"] {
  --bg: #0A0A0A;
  --surface: #111111;
  --highlight: #1A1A1A;
  --card: #111111;
  --raised: #161616;

  --fg: #FFFFFF;
  --fg-2: rgba(255, 255, 255, 0.75);
  --muted: rgba(255, 255, 255, 0.60);
  --faint: rgba(255, 255, 255, 0.40);

  --line: rgba(255, 255, 255, 0.10);
  --line-dash: rgba(255, 255, 255, 0.15);
  --line-grid: rgba(255, 255, 255, 0.05);
  --line-control: rgba(255, 255, 255, 0.40);

  --accent-text: var(--nx-vermilion-300);   /* #FF6B2E: 6,97:1 sobre #0A0A0A */
  --accent-ink: var(--nx-ink);
  --accent-glow: rgba(249, 75, 12, 0.16);
  --accent-line: rgba(249, 75, 12, 0.50);
  --accent-wash: rgba(249, 75, 12, 0.08);

  --track: #1F1F1F;
  --scrim: rgba(0, 0, 0, 0.60);
  --glass: rgba(10, 10, 10, 0.70);

  --shadow-sm: 0 10px 26px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 18px 50px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 18px 44px rgba(0, 0, 0, 0.50);
  --shadow-lift: 0 10px 30px -10px rgba(0, 0, 0, 0.60);

  --chart-1: #FFFFFF;
  --chart-2: rgba(255, 255, 255, 0.45);
  --chart-3: rgba(255, 255, 255, 0.20);
  --chart-grid: rgba(255, 255, 255, 0.10);
  --chart-gap: rgba(255, 255, 255, 0.07);
  --chart-ref: var(--nx-vermilion-400);
  --chart-ref-text: var(--nx-vermilion-300);
  --chart-ref-wash: rgba(255, 107, 46, 0.12);

  color-scheme: dark;
}


/* --------------------------------------------------------------------------
   4. BASE
   -------------------------------------------------------------------------- */
.nx-root {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--nx-font-sans);
  font-size: var(--nx-fs-app-body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  transition: background var(--nx-dur-base) var(--nx-ease-out-expo), color var(--nx-dur-base) var(--nx-ease-out-expo);
}
.nx-root *, .nx-root *::before, .nx-root *::after { box-sizing: border-box; }
.nx-root ::selection { background: var(--accent); color: var(--accent-ink); }
.nx-root :focus-visible { outline: 2px solid var(--accent-text); outline-offset: 2px; border-radius: 2px; }
.nx-root a { color: inherit; }

.nx-mono { font-family: var(--nx-font-mono); }
.nx-num { font-family: var(--nx-font-mono); font-variant-numeric: tabular-nums; }
.nx-muted { color: var(--muted); }
.nx-fg2 { color: var(--fg-2); }
.nx-accent-text { color: var(--accent-text); }
.nx-sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }


/* --------------------------------------------------------------------------
   5. TIPOGRAFIA
   -------------------------------------------------------------------------- */
.nx-display {
  font-size: var(--nx-fs-display); font-weight: var(--nx-fw-bold);
  letter-spacing: var(--nx-tracking-tighter); line-height: var(--nx-lh-tight); margin: 0;
}
.nx-h1 { font-size: var(--nx-fs-h1); font-weight: var(--nx-fw-semibold); letter-spacing: var(--nx-tracking-tight); line-height: 1.1; margin: 0; }
.nx-h2 { font-size: var(--nx-fs-h2); font-weight: var(--nx-fw-semibold); letter-spacing: var(--nx-tracking-tight); line-height: var(--nx-lh-heading); margin: 0; }
.nx-h3 { font-size: var(--nx-fs-h3); font-weight: var(--nx-fw-semibold); letter-spacing: var(--nx-tracking-tight); line-height: var(--nx-lh-heading); margin: 0; }
.nx-h4 { font-size: var(--nx-fs-h4); font-weight: var(--nx-fw-semibold); line-height: var(--nx-lh-snug); margin: 0; }
.nx-lead { font-size: var(--nx-fs-lead); font-weight: var(--nx-fw-light); line-height: 1.4; color: var(--muted); margin: 0; }
.nx-body { font-size: var(--nx-fs-body); line-height: var(--nx-lh-body); margin: 0; }
.nx-small { font-size: var(--nx-fs-sm); line-height: var(--nx-lh-body); color: var(--muted); margin: 0; }

/* Títulos de app */
.nx-page-title { font-size: var(--nx-fs-app-title); font-weight: var(--nx-fw-semibold); letter-spacing: var(--nx-tracking-tight); line-height: 1.15; margin: 0; }
.nx-panel-title { font-size: var(--nx-fs-app-h2); font-weight: var(--nx-fw-semibold); letter-spacing: -0.015em; line-height: 1.3; margin: 0; }

/* Destaque de palavra (.destaque da home): uma palavra por título.
   Sólido em telas sem hover; vazado com contorno que preenche no ponteiro fino. */
.nx-destaque { color: var(--accent-text); font-weight: var(--nx-fw-semibold); transition: color .5s var(--nx-ease-out-expo); }
@media (hover: hover) and (pointer: fine) {
  .nx-destaque--vazado { color: transparent; -webkit-text-stroke: 1px var(--accent); }
  .nx-destaque--vazado:hover { color: var(--accent); }
}
[data-theme="dark"] .nx-destaque, .nx-dark .nx-destaque { color: var(--nx-vermilion-400); -webkit-text-stroke: 0; }


/* --------------------------------------------------------------------------
   6. RÓTULO MONO  ·  "[ 01 ] · Seção" com ponto laranja
   -------------------------------------------------------------------------- */
.nx-eyebrow {
  display: inline-flex; align-items: center; gap: 16px;
  font-family: var(--nx-font-mono); font-size: var(--nx-fs-xs); font-weight: var(--nx-fw-medium);
  text-transform: uppercase; letter-spacing: var(--nx-tracking-label); color: var(--muted);
  line-height: 1.4;
}
.nx-eyebrow__rule { width: 48px; height: 1px; background: var(--line); }
.nx-dot { width: 8px; height: 8px; border-radius: var(--nx-r-pill); background: var(--accent); display: inline-block; flex-shrink: 0; }
.nx-dot--sm { width: 6px; height: 6px; }
.nx-dot--neutral { background: var(--faint); }
.nx-dot--ink { background: var(--fg); }
.nx-dot--hollow { background: transparent; box-shadow: inset 0 0 0 1.5px var(--muted); }

/* Ponto-radar (substitui o pulse do eyebrow do hero) */
.nx-radar { position: relative; display: inline-flex; width: 8px; height: 8px; align-items: center; justify-content: center; flex-shrink: 0; }
.nx-radar i { position: absolute; inset: 0; border-radius: var(--nx-r-pill); background: var(--accent); }
.nx-radar i::before, .nx-radar i::after {
  content: ''; position: absolute; inset: -3px; border: 1px solid var(--accent);
  border-radius: var(--nx-r-pill); opacity: 0; animation: nx-radar 2.4s ease-out infinite;
}
.nx-radar i::after { animation-delay: .8s; }

/* Numeração de lista mono ("01 /") usada no FAQ */
.nx-index { font-family: var(--nx-font-mono); font-size: var(--nx-fs-xs); color: var(--muted); flex-shrink: 0; }


/* --------------------------------------------------------------------------
   7. BOTÕES
   7a. Botões de marca (verbatim da home): beam-btn e ghost-btn.
       Markup obrigatório, sem os spans vazios o botão vira um retângulo:
       <a class="nx-beam"><span class="nx-beam__glow g2"></span><span class="nx-beam__glow g4"></span>
         <span class="nx-beam__ring"><i></i></span><span class="nx-beam__content">Texto</span></a>
   -------------------------------------------------------------------------- */
.nx-beam {
  position: relative; display: inline-flex; border-radius: var(--nx-r-pill); padding: 2px; border: none;
  cursor: pointer; isolation: isolate; text-decoration: none; font-family: var(--nx-font-sans);
  background: rgba(10, 10, 10, .07);
  transition: box-shadow var(--nx-dur-slow) var(--nx-ease-out-expo), translate var(--nx-dur-slow) var(--nx-ease-out-expo);
}
[data-theme="dark"] .nx-beam { background: rgba(255, 255, 255, .14); }
.nx-beam__ring { position: absolute; inset: 0; display: block; z-index: 1; border-radius: inherit; overflow: hidden; pointer-events: none; }
.nx-beam__ring i {
  position: absolute; inset: -300%; display: block;
  background: conic-gradient(from 90deg at 50% 50%, transparent 0%, transparent 90%, var(--nx-vermilion-400) 100%);
  animation: nx-spin 4s linear infinite;
}
.nx-beam__glow {
  position: absolute; inset: 0; display: block; z-index: 0; pointer-events: none; opacity: 0;
  transform: scaleX(.25); transform-origin: 50% 100%;
  transition: opacity 1200ms ease-in-out, transform 1200ms var(--nx-ease-out-expo);
}
.nx-beam__glow.g2 { filter: blur(18px); background: radial-gradient(60.6% 50% at 50% 100%, rgb(249,75,12) 0%, rgba(249,75,12,0) 100%); }
.nx-beam__glow.g4 { background: radial-gradient(60.1% 50% at 50% 100%, rgb(249,75,12) 0%, rgba(249,75,12,0) 100%); }
/* Miolo branco com tinta preta nos DOIS temas: é elemento de marca, não troca de cor com o tema. */
.nx-beam__content {
  display: block; width: 100%; text-align: center; position: relative; z-index: 2;
  background: #FFFFFF; color: var(--nx-ink); padding: 13px 32px; border-radius: var(--nx-r-pill);
  font-family: var(--nx-font-sans); font-weight: var(--nx-fw-medium); letter-spacing: var(--nx-tracking-button);
  text-transform: uppercase; font-size: .8rem; line-height: 1.4;
  transition: background var(--nx-dur-base) var(--nx-ease-out-expo), color var(--nx-dur-base) var(--nx-ease-out-expo);
}
.nx-beam:hover { background: var(--nx-vermilion-400); translate: 0 -3px; box-shadow: var(--shadow-cta); }
.nx-beam:hover .nx-beam__ring i { animation-duration: 1.6s; background: conic-gradient(from 90deg at 50% 50%, transparent 0%, transparent 90%, #fff 100%); }
.nx-beam:hover .nx-beam__glow { opacity: 1; transform: none; }
.nx-beam:hover .nx-beam__content { background: var(--nx-vermilion-400); color: var(--nx-ink); }
.nx-beam:active { translate: 0 -1px; box-shadow: var(--shadow-cta-press); }
.nx-beam:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 3px; }
.nx-beam:disabled, .nx-beam[aria-disabled="true"] { opacity: .6; pointer-events: none; }
.nx-beam--block { display: flex; width: 100%; }

/* Secundário de marca (ghost-btn): feixe gira sempre, só a opacidade muda no hover */
.nx-ghost {
  position: relative; display: inline-flex; border-radius: var(--nx-r-pill); padding: 2px; border: none;
  cursor: pointer; overflow: hidden; isolation: isolate; text-decoration: none; font-family: var(--nx-font-sans);
  background: rgba(10, 10, 10, .05); transition: box-shadow var(--nx-dur-slow) var(--nx-ease-out-expo);
}
.nx-ghost__beam {
  position: absolute; inset: -100%; display: block; z-index: 0; pointer-events: none; opacity: 0;
  background: conic-gradient(from 90deg at 50% 50%, transparent 0%, transparent 75%, var(--nx-vermilion-400) 100%);
  animation: nx-spin 3s linear infinite; transition: opacity .3s ease;
}
.nx-ghost__ring { position: absolute; inset: 0; display: block; z-index: 1; background: var(--line); border-radius: inherit; transition: opacity .3s ease; pointer-events: none; }
.nx-ghost__glow { position: absolute; inset: 0; display: block; z-index: 3; pointer-events: none; opacity: 0; transition: opacity .5s ease;
  background: radial-gradient(50% 50% at 50% 100%, rgba(249,75,12,.22) 0%, transparent 100%); }
.nx-ghost__content {
  position: relative; z-index: 2; display: block; background: var(--card); color: var(--fg);
  border-radius: var(--nx-r-pill); padding: 11px 22px; font-size: var(--nx-fs-sm); font-weight: var(--nx-fw-medium);
  transition: color .3s ease;
}
.nx-ghost:hover .nx-ghost__beam { opacity: 1; }
.nx-ghost:hover .nx-ghost__ring { opacity: 0; }
.nx-ghost:hover .nx-ghost__glow { opacity: 1; }
.nx-ghost:hover { box-shadow: 0 8px 22px rgba(249, 75, 12, .16); }
.nx-ghost:hover .nx-ghost__content { color: var(--accent-text); }
.nx-ghost:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 3px; }

/* 7b. Botões de app: mesma pílula, sem o facho (em tela densa, dez fachos
   girando ao mesmo tempo viram ruído). Um primário por tela. */
.nx-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 40px; padding: 0 20px; border-radius: var(--nx-r-pill); cursor: pointer; white-space: nowrap;
  font-family: var(--nx-font-sans); font-size: 13px; font-weight: var(--nx-fw-medium); line-height: 1;
  color: var(--fg); background: transparent; border: 1px solid transparent; text-decoration: none;
  transition: background var(--nx-dur-base) var(--nx-ease-out-expo), border-color var(--nx-dur-base), color var(--nx-dur-base),
              box-shadow var(--nx-dur-slow) var(--nx-ease-out-expo), translate var(--nx-dur-slow) var(--nx-ease-out-expo);
}
.nx-btn svg { width: 16px; height: 16px; flex-shrink: 0; }
.nx-btn--sm { height: 32px; padding: 0 14px; font-size: 12px; }
.nx-btn--lg { height: 48px; padding: 0 28px; font-size: 14px; }
.nx-btn--primary { background: var(--accent); color: var(--accent-ink); text-transform: uppercase; letter-spacing: var(--nx-tracking-button); font-size: 12px; }
.nx-btn--primary:hover { background: var(--accent-hover); translate: 0 -2px; box-shadow: var(--shadow-cta); }
.nx-btn--primary:active { background: var(--accent-active); translate: 0 -1px; box-shadow: var(--shadow-cta-press); }
.nx-btn--secondary { background: var(--card); border-color: var(--line-control); }
.nx-btn--secondary:hover { border-color: var(--accent); color: var(--accent-text); }
.nx-btn--quiet { color: var(--fg-2); }
.nx-btn--quiet:hover { color: var(--fg); background: var(--highlight); }
.nx-btn--ink { background: var(--fg); color: var(--bg); }
.nx-btn--ink:hover { translate: 0 -2px; box-shadow: var(--shadow-lg); }
.nx-btn:disabled, .nx-btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; translate: none; box-shadow: none; }
.nx-btn--icon { width: 40px; padding: 0; }
.nx-btn--icon.nx-btn--sm { width: 32px; }

/* Estado de carregamento (spinner da home) */
.nx-spinner { width: 16px; height: 16px; animation: nx-spin 1.1s linear infinite; display: none; }
.nx-spinner .trilho { stroke: rgba(10, 10, 10, .18); }
[data-theme="dark"] .nx-spinner .trilho { stroke: rgba(255, 255, 255, .25); }
.nx-spinner .arco { stroke: var(--nx-vermilion-400); stroke-linecap: round; animation: nx-ring-dash 1.5s ease-in-out infinite; }
.is-loading .nx-spinner { display: inline-block; }
.nx-btn--primary .nx-spinner .arco { stroke: var(--nx-ink); }


/* --------------------------------------------------------------------------
   8. CARTÕES
   -------------------------------------------------------------------------- */
/* Cartão-base de app */
.nx-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--nx-r-card); }
.nx-card--pad { padding: 28px; }
.nx-card--raised { box-shadow: var(--shadow-md); }
.nx-card--surface { background: var(--surface); }
.nx-card--dashed { border-style: dashed; border-color: var(--line-dash); background: transparent; }
.nx-card__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 24px; border-bottom: 1px dashed var(--line-dash); }
.nx-card__body { padding: 20px 24px; }

/* .frente da home: filete superior de 3px e numeral mono com força variável */
.nx-frente {
  --forca: .30; position: relative; background: var(--card); border: 1px solid var(--line);
  border-radius: var(--nx-r-card); padding: 32px 28px 30px; overflow: hidden;
  transition: border-color var(--nx-dur-slow) ease, box-shadow var(--nx-dur-slow) ease, translate var(--nx-dur-slow) var(--nx-ease-out-expo);
}
.nx-frente::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: rgb(249 75 12 / var(--forca)); transition: background var(--nx-dur-slow) ease; }
.nx-frente:hover { border-color: rgba(249, 75, 12, .45); translate: 0 -6px; box-shadow: var(--shadow-lg); }
.nx-frente:hover::before { background: var(--accent); }
.nx-frente__num { font-family: var(--nx-font-mono); font-size: var(--nx-fs-numeral); font-weight: var(--nx-fw-medium); line-height: 1; color: rgb(249 75 12 / var(--forca)); display: block; margin-bottom: 18px; transition: color var(--nx-dur-slow) var(--nx-ease-out-expo); }
.nx-frente:hover .nx-frente__num { color: var(--accent); }
.nx-frente--base { --forca: 1; border-color: var(--accent); box-shadow: var(--shadow-accent); }
.nx-frente--f2 { --forca: .62; }
.nx-frente--f3 { --forca: .46; }
.nx-frente--f4 { --forca: .34; }

/* .sintoma: linha numerada em cartão */
.nx-sintoma {
  display: grid; grid-template-columns: auto 1fr; gap: 20px; align-items: start; padding: 22px 20px;
  border: 1px solid var(--line); border-radius: var(--nx-r-md); background: var(--card);
  transition: border-color .35s ease, translate .35s var(--nx-ease-out-expo), box-shadow .35s ease;
}
.nx-sintoma + .nx-sintoma { margin-top: 14px; }
.nx-sintoma:hover { border-color: rgba(249, 75, 12, .4); translate: 0 -2px; box-shadow: var(--shadow-sm); }
.nx-sintoma__num { font-family: var(--nx-font-mono); font-size: 1.05rem; color: var(--accent-text); line-height: 1.5; }

/* Cartão de vidro com brilho que segue o ponteiro (glow-card): --x/--y por JS */
.nx-glow { position: relative; overflow: hidden; background: var(--glass); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid var(--line); border-radius: var(--nx-r-card); }
.nx-glow::after { content: ''; position: absolute; width: 500px; height: 500px; top: var(--y, -250px); left: var(--x, -250px); transform: translate(-50%, -50%);
  background: radial-gradient(circle, var(--accent-glow) 0%, transparent 60%); pointer-events: none; opacity: 0; transition: opacity .3s; }
.nx-glow:hover::after { opacity: 1; }

/* Número grande (bloco de prova / KPI) */
.nx-stat { display: flex; flex-direction: column; gap: 6px; }
.nx-stat__value { font-size: var(--nx-fs-app-kpi); font-weight: var(--nx-fw-bold); letter-spacing: var(--nx-tracking-tighter); line-height: 1; font-variant-numeric: tabular-nums; }
.nx-stat__label { font-family: var(--nx-font-mono); font-size: var(--nx-fs-xs); font-weight: var(--nx-fw-medium); text-transform: uppercase; letter-spacing: var(--nx-tracking-badge); color: var(--muted); }
.nx-stat__note { font-size: var(--nx-fs-xs); color: var(--muted); line-height: 1.5; }
.nx-stat--hero .nx-stat__value { font-size: 3rem; }

/* Faixa de prova (pílula com números) */
.nx-proof { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 18px; padding: 20px 28px;
  border: 1px solid var(--line); border-radius: var(--nx-r-pill); background: var(--card); font-size: .92rem; color: var(--muted); line-height: 1.5; }
.nx-proof strong { color: var(--fg); font-weight: var(--nx-fw-bold); }
.nx-proof__sep { color: var(--line); }


/* --------------------------------------------------------------------------
   9. SELOS, BADGES E ESTADOS
   Estado se diz por forma e texto, não por cor: ponto cheio, ponto vazado,
   traço, hachura. Vermilion só no que pede ação.
   -------------------------------------------------------------------------- */
.nx-badge {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  font-family: var(--nx-font-mono); font-size: 12px; font-weight: var(--nx-fw-medium);
  text-transform: uppercase; letter-spacing: var(--nx-tracking-badge); line-height: 1;
  border-radius: var(--nx-r-pill); padding: 5px 10px; border: 1px solid var(--line); color: var(--fg-2); background: var(--card);
}
.nx-badge--acao { color: var(--accent-text); border-color: var(--accent-line); background: var(--accent-wash); }
.nx-badge--feito { color: var(--bg); background: var(--fg); border-color: var(--fg); }
.nx-badge--neutro { color: var(--muted); }
.nx-badge--bloqueado { color: var(--fg-2); border-style: dashed; border-color: var(--line-control); }
.nx-badge--sem-dado { color: var(--muted); background: repeating-linear-gradient(-45deg, var(--highlight) 0 4px, transparent 4px 8px); }
/* Selo de marca (frente-selo): rótulo em contorno laranja */
.nx-selo { display: inline-block; font-family: var(--nx-font-mono); font-size: var(--nx-fs-xs); font-weight: var(--nx-fw-medium); text-transform: uppercase;
  letter-spacing: var(--nx-tracking-badge); color: var(--accent-text); border: 1px solid var(--accent-line); border-radius: var(--nx-r-pill); padding: 5px 12px; }
/* Etiqueta de categoria (cluster) */
.nx-tag { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: var(--nx-r-xs); background: var(--highlight); color: var(--fg-2); font-size: 12px; font-family: var(--nx-font-mono); }
/* Delta numérico: sem verde e vermelho. Piora relevante ganha o Vermilion, melhora fica em tinta. */
.nx-delta { font-family: var(--nx-font-mono); font-size: 12px; font-variant-numeric: tabular-nums; color: var(--muted); white-space: nowrap; }
.nx-delta--up { color: var(--fg); }
.nx-delta--alert { color: var(--accent-text); }


/* --------------------------------------------------------------------------
   10. TABELA
   -------------------------------------------------------------------------- */
.nx-table-wrap { overflow-x: auto; }
.nx-table { width: 100%; border-collapse: collapse; font-size: var(--nx-fs-app-table); }
.nx-table thead th {
  text-align: left; padding: 12px 16px; white-space: nowrap;
  font-family: var(--nx-font-mono); font-size: 12px; font-weight: var(--nx-fw-medium);
  text-transform: uppercase; letter-spacing: var(--nx-tracking-badge); color: var(--muted);
  border-bottom: 1px dashed var(--line-dash);
}
.nx-table tbody td { padding: 14px 16px; border-bottom: 1px dashed var(--line-dash); vertical-align: top; }
.nx-table tbody tr { transition: background var(--nx-dur-fast); }
.nx-table tbody tr:hover { background: var(--surface); }
.nx-table .is-num { text-align: right; font-family: var(--nx-font-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.nx-table .is-tight { width: 1%; white-space: nowrap; }
.nx-table tr.is-acao td:first-child { box-shadow: inset 2px 0 0 var(--accent); }
.nx-table tr.is-bloqueado td { color: var(--muted); }
.nx-table__primary { font-weight: var(--nx-fw-medium); color: var(--fg); line-height: 1.4; }
.nx-table__secondary { display: block; margin-top: 4px; font-size: 12px; color: var(--muted); line-height: 1.45; }
.nx-table--compact tbody td { padding: 10px 16px; }


/* --------------------------------------------------------------------------
   11. CAMPOS
   -------------------------------------------------------------------------- */
.nx-field { display: flex; flex-direction: column; gap: 8px; }
.nx-label { font-size: var(--nx-fs-xs); color: var(--muted); font-weight: var(--nx-fw-regular); }
.nx-input, .nx-select, .nx-textarea {
  width: 100%; background: var(--card); color: var(--fg); font-family: var(--nx-font-sans); font-size: var(--nx-fs-sm);
  border: 1px solid var(--line-control); border-radius: var(--nx-r-ctl); padding: 12px 16px; outline: none;
  transition: border-color var(--nx-dur-base), box-shadow var(--nx-dur-base);
}
.nx-input::placeholder, .nx-textarea::placeholder { color: var(--faint); }
.nx-input:focus, .nx-select:focus, .nx-textarea:focus { border-color: var(--fg); box-shadow: 0 0 0 3px var(--highlight); }
.nx-select { appearance: none; -webkit-appearance: none; padding-right: 40px;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 20px) 52%, calc(100% - 15px) 52%; background-size: 5px 5px; background-repeat: no-repeat; }
.nx-textarea { min-height: 96px; resize: vertical; line-height: 1.5; }
.nx-field.is-error .nx-input, .nx-field.is-error .nx-select { border-color: var(--accent); }
.nx-help { font-size: var(--nx-fs-xs); color: var(--muted); }
.nx-error { font-size: var(--nx-fs-xs); color: var(--accent-text); }
.nx-input:disabled { background: var(--surface); color: var(--muted); cursor: not-allowed; }
.nx-check { display: flex; align-items: flex-start; gap: 12px; font-size: var(--nx-fs-xs); color: var(--muted); line-height: 1.5; }
.nx-check input { accent-color: var(--nx-vermilion-400); width: 16px; height: 16px; margin: 1px 0 0; }

/* Busca com ícone */
.nx-search { position: relative; }
.nx-search svg { position: absolute; left: 14px; top: 50%; translate: 0 -50%; width: 16px; height: 16px; color: var(--muted); }
.nx-search .nx-input { padding-left: 40px; border-radius: var(--nx-r-pill); height: 40px; padding-top: 0; padding-bottom: 0; }

/* Barra de progresso (wizard da home) e medidor */
.nx-progress { width: 100%; height: 4px; background: var(--line); border-radius: var(--nx-r-pill); overflow: hidden; }
.nx-progress > span { display: block; height: 100%; background: var(--accent); border-radius: inherit; transition: width .5s var(--nx-ease-out-expo); }
.nx-meter { width: 100%; height: 6px; background: var(--track); border-radius: var(--nx-r-pill); overflow: hidden; }
.nx-meter > span { display: block; height: 100%; background: var(--fg); border-radius: inherit; }
.nx-meter--acao > span { background: var(--accent); }


/* --------------------------------------------------------------------------
   12. NAVEGAÇÃO
   -------------------------------------------------------------------------- */
/* Cabeçalho em vidro (glass-panel da home, 80px) */
.nx-topbar {
  position: sticky; top: 0; z-index: var(--nx-z-header);
  background: var(--glass); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.nx-topbar__inner { max-width: var(--nx-max-width); margin: 0 auto; padding: 0 var(--nx-gutter); height: 80px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.nx-brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--fg); }
.nx-brand__mark { width: 22px; height: 22px; flex-shrink: 0; fill: var(--nx-vermilion-400); }
.nx-brand__name { font-size: 15px; font-weight: var(--nx-fw-semibold); letter-spacing: -0.03em; line-height: .95; }
.nx-brand__product { font-family: var(--nx-font-mono); font-size: 12px; text-transform: uppercase; letter-spacing: var(--nx-tracking-badge); color: var(--muted); padding-left: 14px; margin-left: 4px; border-left: 1px dashed var(--line-dash); }

/* Navegação principal em texto com filete laranja no ativo */
.nx-nav { display: flex; align-items: center; gap: 4px; }
.nx-nav__item { position: relative; display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; border-radius: var(--nx-r-pill);
  color: var(--muted); font-size: var(--nx-fs-sm); text-decoration: none; transition: color var(--nx-dur-fast), background var(--nx-dur-fast); }
.nx-nav__item:hover { color: var(--fg); background: var(--highlight); }
.nx-nav__item[aria-current="page"] { color: var(--fg); font-weight: var(--nx-fw-medium); }
.nx-nav__item[aria-current="page"]::after { content: ''; position: absolute; left: 14px; right: 14px; bottom: -20px; height: 2px; background: var(--accent); }
.nx-nav__count { font-family: var(--nx-font-mono); font-size: 12px; color: var(--muted); }

/* Abas segmentadas em pílula (7d · 28d · 90d) */
.nx-tabs { display: inline-flex; padding: 3px; gap: 2px; border: 1px solid var(--line); border-radius: var(--nx-r-pill); background: var(--surface); }
.nx-tabs__item { height: 30px; padding: 0 14px; border-radius: var(--nx-r-pill); border: none; background: transparent; cursor: pointer;
  font-family: var(--nx-font-mono); font-size: 12px; text-transform: uppercase; letter-spacing: var(--nx-tracking-badge); color: var(--muted); }
.nx-tabs__item:hover { color: var(--fg); }
.nx-tabs__item[aria-selected="true"] { background: var(--card); color: var(--fg); box-shadow: 0 1px 2px rgba(10,10,10,.08), 0 0 0 1px var(--line); }

/* Lateral (do protótipo do workload) */
.nx-side { width: 240px; background: var(--surface); border-right: 1px dashed var(--line-dash); display: flex; flex-direction: column; }
.nx-side__label { padding: 20px 24px 8px; font-family: var(--nx-font-mono); font-size: 12px; text-transform: uppercase; letter-spacing: var(--nx-tracking-label); color: var(--muted); }
.nx-side__item { position: relative; display: flex; align-items: center; gap: 12px; padding: 10px 24px; color: var(--muted); font-size: var(--nx-fs-sm); text-decoration: none; transition: color var(--nx-dur-fast), background var(--nx-dur-fast); }
.nx-side__item:hover { color: var(--fg); }
.nx-side__item[aria-current="page"] { color: var(--fg); font-weight: var(--nx-fw-medium); background: var(--card); }
.nx-side__item[aria-current="page"]::before { content: ''; position: absolute; left: 0; top: 8px; bottom: 8px; width: 2px; background: var(--accent); }

/* Migalha */
.nx-crumbs { display: flex; align-items: center; gap: 8px; font-family: var(--nx-font-mono); font-size: 12px; text-transform: uppercase; letter-spacing: var(--nx-tracking-badge); color: var(--muted); }
.nx-crumbs a { text-decoration: none; }
.nx-crumbs a:hover { color: var(--fg); }


/* --------------------------------------------------------------------------
   13. ALERTA, VAZIO, CARREGANDO, DICA
   -------------------------------------------------------------------------- */
.nx-alert { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: start; padding: 14px 18px;
  border: 1px solid var(--line); border-radius: var(--nx-r-md); background: var(--card); font-size: var(--nx-fs-sm); line-height: 1.5; }
.nx-alert__icon { width: 18px; height: 18px; margin-top: 1px; color: var(--muted); }
.nx-alert--acao { border-color: var(--accent-line); background: var(--accent-wash); }
.nx-alert--acao .nx-alert__icon { color: var(--accent-text); }
.nx-alert strong { font-weight: var(--nx-fw-semibold); }

.nx-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center;
  padding: 48px 24px; border: 1px dashed var(--line-dash); border-radius: var(--nx-r-card); color: var(--muted); font-size: var(--nx-fs-sm); }
.nx-empty strong { color: var(--fg); font-weight: var(--nx-fw-semibold); font-size: var(--nx-fs-body); }

.nx-skeleton { display: block; border-radius: var(--nx-r-xs); background: linear-gradient(90deg, var(--highlight) 0%, var(--surface) 50%, var(--highlight) 100%);
  background-size: 200% 100%; animation: nx-shimmer 1.4s ease-in-out infinite; }

.nx-tip { position: relative; display: inline-flex; }
.nx-tip__body { position: absolute; bottom: calc(100% + 8px); left: 50%; translate: -50% 4px; z-index: var(--nx-z-overlay); width: max-content; max-width: 260px;
  padding: 8px 12px; border-radius: var(--nx-r-ctl); background: var(--nx-ink); color: #fff; font-size: 12px; line-height: 1.45; opacity: 0; pointer-events: none;
  transition: opacity var(--nx-dur-fast), translate var(--nx-dur-fast); }
[data-theme="dark"] .nx-tip__body { background: #FFFFFF; color: var(--nx-ink); }
.nx-tip:hover .nx-tip__body, .nx-tip:focus-within .nx-tip__body { opacity: 1; translate: -50% 0; }

.nx-toast { position: fixed; right: 24px; bottom: 24px; z-index: var(--nx-z-toast); display: flex; gap: 12px; align-items: center;
  padding: 14px 18px; border-radius: var(--nx-r-md); background: var(--nx-ink); color: #fff; box-shadow: var(--shadow-lg); font-size: var(--nx-fs-sm); }
[data-theme="dark"] .nx-toast { background: #FFFFFF; color: var(--nx-ink); }

/* FAQ / acordeão (details da home) */
.nx-faq { border-bottom: 1px dashed var(--line-dash); padding: 24px 0; }
.nx-faq summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; cursor: pointer; list-style: none; font-weight: var(--nx-fw-medium); }
.nx-faq summary::-webkit-details-marker { display: none; }
.nx-faq summary .nx-chevron { width: 20px; height: 20px; color: var(--muted); transition: transform var(--nx-dur-base) var(--nx-ease-out-expo); }
.nx-faq[open] summary .nx-chevron { transform: rotate(180deg); }
.nx-faq p { padding: 16px 0 0 40px; margin: 0; font-size: var(--nx-fs-sm); color: var(--muted); line-height: var(--nx-lh-body); }


/* --------------------------------------------------------------------------
   14. GRÁFICOS (SVG inline) · nexus-dataviz 1.3.1
   Contrato: README.md, seção "Gráficos e dashboards". Desenho de referência:
   nexus-dataviz.mjs. Este bloco é extraído para nexus-dataviz.css (painéis de
   cliente) por scripts/build-dataviz-css.mjs; os var() têm fallback para
   funcionar sem os tokens do v8. Piso de texto: 12px.
   -------------------------------------------------------------------------- */
.nx-chart { width: 100%; height: auto; display: block; overflow: visible; outline: none; color: var(--fg, #0A0A0A); }
.nx-chart .grid line { stroke: var(--chart-grid, rgba(10,10,10,.08)); stroke-width: 1; shape-rendering: crispEdges; }
.nx-chart .baseline { stroke: var(--line, #E5E5E5); stroke-width: 1; shape-rendering: crispEdges; }
.nx-chart .axis text { font-family: var(--nx-font-mono, ui-monospace, monospace); font-size: 12px; fill: var(--muted, #666); font-variant-numeric: tabular-nums; }
.nx-chart .axis .axis__end { text-anchor: end; }
.nx-chart .panel-title { font-family: var(--nx-font-sans, system-ui, sans-serif); font-size: 13px; font-weight: 600; fill: var(--fg, #0A0A0A); }
.nx-chart .panel-unit { font-family: var(--nx-font-mono, ui-monospace, monospace); font-size: 12px; fill: var(--muted, #666); text-transform: uppercase; letter-spacing: .06em; }
.nx-chart .bar { fill: var(--chart-1, #0A0A0A); }
.nx-chart .bar--muted { fill: var(--chart-2, #A3A3A3); }
.nx-chart .bar--ref { fill: var(--chart-ref, #F94B0C); }
.nx-chart .bar--alert { fill: var(--chart-alert, #F94B0C); }
/* Período aberto (semana, dia ou mês corrente): hachura com contorno tracejado, nunca cheio. */
.nx-chart .bar--partial { stroke: var(--chart-2, #A3A3A3); stroke-width: 1; stroke-dasharray: 3 2; }
.nx-chart .band { fill: var(--chart-ref-wash, rgba(249,75,12,.08)); }
.nx-chart .line { fill: none; stroke: var(--chart-1, #0A0A0A); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.nx-chart .line--muted { stroke: var(--chart-2, #A3A3A3); stroke-dasharray: 4 4; stroke-width: 1.5; }
.nx-chart .line--partial { stroke-dasharray: 3 4; opacity: .55; }
.nx-chart .area { fill: var(--chart-1, #0A0A0A); opacity: .06; }
.nx-chart .point { fill: var(--chart-1, #0A0A0A); stroke: var(--card, #fff); stroke-width: 2; }
.nx-chart .point--ref { fill: var(--chart-ref, #F94B0C); }
.nx-chart .point--hollow { fill: var(--card, #fff); stroke: var(--chart-1, #0A0A0A); stroke-width: 1.5; }
.nx-chart .point--alert { fill: var(--chart-alert, #F94B0C); }
.nx-chart .gap { opacity: 1; }
.nx-chart .gap-label { font-family: var(--nx-font-mono, ui-monospace, monospace); font-size: 12px; fill: var(--muted, #666); text-transform: uppercase; letter-spacing: .08em; }
/* Rótulo direto: último período fechado e pico. Texto em tinta ou no tom escuro do destaque, nunca na cor da série. */
.nx-chart .label { font-family: var(--nx-font-mono, ui-monospace, monospace); font-size: 12px; fill: var(--fg-2, #404040); font-variant-numeric: tabular-nums; }
.nx-chart .label--strong { fill: var(--fg, #0A0A0A); font-weight: 600; }
.nx-chart .label--ref { fill: var(--chart-ref-text, #A63208); font-weight: 600; }
.nx-chart .label--note { fill: var(--muted, #666); text-transform: uppercase; letter-spacing: .06em; }
.nx-chart .hit { fill: transparent; cursor: crosshair; }
.nx-chart .cursor { stroke: var(--chart-2, #A3A3A3); stroke-width: 1; shape-rendering: crispEdges; pointer-events: none; }

.nx-chart-wrap { position: relative; }
.nx-chart-tip { position: absolute; top: 0; z-index: var(--nx-z-overlay, 80); min-width: 180px; max-width: 260px; padding: 10px 12px; border-radius: var(--nx-r-ctl, 10px);
  background: var(--chart-tip-bg, #0A0A0A); color: var(--chart-tip-fg, #fff); font-size: 12px; line-height: 1.5; pointer-events: none; box-shadow: 0 10px 30px -10px rgba(0,0,0,.5); }
[data-theme="dark"] .nx-chart-tip { background: #FFFFFF; color: #0A0A0A; }
.nx-chart-tip[hidden] { display: none; }
.nx-chart-tip__head { font-family: var(--nx-font-mono, ui-monospace, monospace); font-size: 12px; opacity: .7; margin-bottom: 6px; }
.nx-chart-tip__row { display: flex; justify-content: space-between; gap: 16px; }
.nx-chart-tip__row strong { font-family: var(--nx-font-mono, ui-monospace, monospace); font-variant-numeric: tabular-nums; font-weight: 600; }
.nx-chart-tip__note { margin-top: 6px; font-size: 12px; opacity: .75; }

/* Alternativa exata acessível: o mesmo dado em tabela, fechada por padrão. */
.nx-chart-table { margin-top: 16px; font-size: 13px; color: var(--muted, #666); }
.nx-chart-table > summary { cursor: pointer; font-family: var(--nx-font-mono, ui-monospace, monospace); text-transform: uppercase; letter-spacing: .08em; font-size: 12px; }
.nx-chart-table > summary:hover { color: var(--fg, #0A0A0A); }
.nx-chart-table table { width: 100%; border-collapse: collapse; margin-top: 12px; }
.nx-chart-table th, .nx-chart-table td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--line, #E5E5E5); }

/* Barras horizontais ordenadas (no lugar de pizza e rosca). */
.nx-hbars { display: grid; gap: 14px; padding: 6px 0; }
.nx-hbars__row { display: grid; grid-template-columns: minmax(96px, 22%) 1fr auto; gap: 14px; align-items: center; font-size: 14px; }
.nx-hbars__label { color: var(--fg, #0A0A0A); }
.nx-hbars__track { height: 20px; position: relative; }
.nx-hbars__track i { position: absolute; inset: 0 auto 0 0; border-radius: 0 4px 4px 0; min-width: 3px; background: var(--chart-1, #0A0A0A); }
.nx-hbars__value { font-family: var(--nx-font-mono, ui-monospace, monospace); font-size: 13px; color: var(--muted, #666); text-align: right; white-space: nowrap; }
.nx-hbars__value strong { color: var(--fg, #0A0A0A); font-weight: 600; margin-right: 6px; }
.nx-hbars__note { font-size: 12px; color: var(--muted, #666); margin: 14px 0 0; }

/* Estados (1.3): vazio e erro explicam o que houve; frescor e dado provisório ficam escritos. */
.nx-chart-state { display: grid; gap: 4px; place-content: center; text-align: center; min-height: 180px; padding: 24px; border: 1px dashed var(--line, #E5E5E5); border-radius: var(--nx-r-ctl, 10px); color: var(--muted, #666); font-size: 13px; }
.nx-chart-state strong { color: var(--fg, #0A0A0A); font-size: 14px; }
.nx-chart-state--error strong { color: var(--chart-ref-text, #A63208); }
.nx-chart-note { margin: 10px 0 0; font-size: 12px; color: var(--muted, #666); }
@media print {
  .nx-chart-tip, .nx-chart .cursor, .nx-chart .hit { display: none !important; }
  .nx-chart-table > summary { display: none; }
  .nx-chart-wrap, .nx-chart-table { break-inside: avoid; }
}

/* Cartão de gráfico no estilo de destaque (decisão de 12/10/2026): filete de 3px no topo, título sem sublinhado. */
.nx-card--chart { border-top: 3px solid var(--chart-ref, #F94B0C); }

.nx-legend { display: flex; flex-wrap: wrap; gap: 16px; font-size: 12px; color: var(--muted, #666); }
.nx-legend__key { display: inline-flex; align-items: center; gap: 8px; }
.nx-legend__swatch { width: 10px; height: 10px; border-radius: 2px; background: var(--chart-1, #0A0A0A); }
.nx-legend__swatch--muted { background: var(--chart-2, #A3A3A3); }
.nx-legend__swatch--gap { background: repeating-linear-gradient(-45deg, var(--chart-2, #A3A3A3) 0 2px, transparent 2px 5px); border: 1px solid var(--line, #E5E5E5); }
.nx-legend__swatch--partial { background: repeating-linear-gradient(-45deg, var(--chart-2, #A3A3A3) 0 2px, transparent 2px 5px); border: 1px dashed var(--chart-2, #A3A3A3); }
.nx-legend__swatch--alert { background: var(--chart-alert, #F94B0C); }

/* Sparkline */
.nx-spark { width: 96px; height: 28px; display: block; }
.nx-spark path { fill: none; stroke: var(--chart-2); stroke-width: 1.5; }
.nx-spark circle { fill: var(--chart-1); }


/* --------------------------------------------------------------------------
   15. LAYOUT
   -------------------------------------------------------------------------- */
.nx-container { max-width: var(--nx-max-width); margin: 0 auto; padding: 0 var(--nx-gutter); }
.nx-section { padding: var(--nx-space-12) 0; border-bottom: 1px dashed var(--line-dash); }
.nx-section--surface { background: var(--surface); }
.nx-section--highlight { background: var(--highlight); }
.nx-grid-12 { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; }
.nx-stack { display: flex; flex-direction: column; }
.nx-row { display: flex; align-items: center; }
.nx-divider { border: 0; border-top: 1px dashed var(--line-dash); margin: 0; }

/* Malha fixa de fundo (verbatim do doador): bordas tracejadas a 5% */
.nx-grid-overlay { position: fixed; inset: 0; pointer-events: none; z-index: 0; display: flex; justify-content: center; padding: 0 var(--nx-gutter); }
.nx-grid-overlay > div { width: 100%; max-width: var(--nx-max-width); height: 100%; border-left: 1px dashed var(--line-grid); border-right: 1px dashed var(--line-grid);
  display: grid; grid-template-columns: 3fr 6fr 3fr; }
.nx-grid-overlay > div > span:nth-child(-n+2) { border-right: 1px dashed var(--line-grid); }
.nx-bg-grid { background-size: 40px 40px; background-image: linear-gradient(to right, var(--line-grid) 1px, transparent 1px), linear-gradient(to bottom, var(--line-grid) 1px, transparent 1px); }

/* Faixa escura dentro do tema claro (.sec-dark da home) */
.nx-dark { background: var(--nx-ink); color: #FFFFFF; --fg: #FFFFFF; --fg-2: rgba(255,255,255,.75); --muted: rgba(255,255,255,.60);
  --line: rgba(255,255,255,.10); --line-dash: rgba(255,255,255,.15); --card: rgba(255,255,255,.05); --accent-text: var(--nx-vermilion-300); }

/* Atmosfera do hero (aurora em CSS puro) */
.nx-aurora { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 68%, transparent 100%); mask-image: linear-gradient(180deg, #000 0%, #000 68%, transparent 100%); }
.nx-aurora span { position: absolute; border-radius: 50%; display: block; }
.nx-aurora .a1 { width: 54vw; height: 54vw; max-width: 780px; max-height: 780px; left: -10vw; top: -18vw; filter: blur(70px);
  background: radial-gradient(circle, rgba(249,75,12,.15), transparent 68%); animation: nx-aurora-a 28s ease-in-out infinite alternate; }
.nx-aurora .a2 { width: 46vw; height: 46vw; max-width: 660px; max-height: 660px; right: -12vw; top: 4vw; filter: blur(80px);
  background: radial-gradient(circle, rgba(255,107,46,.13), transparent 68%); animation: nx-aurora-b 34s ease-in-out infinite alternate; }


/* --------------------------------------------------------------------------
   16. MOVIMENTO
   -------------------------------------------------------------------------- */
@keyframes nx-spin { to { transform: rotate(360deg); } }
@keyframes nx-radar { 0% { transform: scale(.5); opacity: 1; border-width: 2px; } 100% { transform: scale(2.6); opacity: 0; border-width: 0; } }
@keyframes nx-ring-dash { 0% { stroke-dasharray: 1, 200; stroke-dashoffset: 0; } 50% { stroke-dasharray: 90, 200; stroke-dashoffset: -35px; } 100% { stroke-dasharray: 90, 200; stroke-dashoffset: -124px; } }
@keyframes nx-in { 0% { opacity: 0; transform: translateY(20px); filter: blur(10px); } 100% { opacity: 1; transform: none; filter: blur(0); } }
@keyframes nx-in-soft { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes nx-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
@keyframes nx-aurora-a { to { transform: translate3d(6%, 4%, 0) scale(1.12); } }
@keyframes nx-aurora-b { to { transform: translate3d(-7%, 6%, 0) scale(1.08); } }

/* Entrada de bloco: na marca usa nx-in (0,8s com blur); em app usa nx-in-soft (0,4s, sem blur). */
.nx-enter { animation: nx-in var(--nx-dur-reveal) var(--nx-ease-out-expo) both; }
.nx-enter-soft { animation: nx-in-soft var(--nx-dur-slow) var(--nx-ease-out-expo) both; }
.nx-delay-1 { animation-delay: .1s; }
.nx-delay-2 { animation-delay: .2s; }
.nx-delay-3 { animation-delay: .3s; }
.nx-lift { transition: transform var(--nx-dur-slow) var(--nx-ease-out-expo), box-shadow var(--nx-dur-slow) var(--nx-ease-out-expo); }
.nx-lift:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }

/* Movimento reduzido: o facho dos botões continua (pedido do Daniel, é
   micro-movimento local); somem aurora, radar, entradas e deslocamentos.
   Bloco que nasce invisível precisa voltar ao estado final, senão a tela fica em branco. */
@media (prefers-reduced-motion: reduce) {
  .nx-aurora span, .nx-radar i::before, .nx-radar i::after, .nx-spinner, .nx-spinner .arco, .nx-skeleton { animation: none; }
  .nx-radar i::before, .nx-radar i::after { opacity: .35; }
  .nx-enter, .nx-enter-soft { animation: none; opacity: 1; transform: none; filter: none; }
  .nx-frente:hover, .nx-sintoma:hover, .nx-lift:hover, .nx-btn--primary:hover, .nx-beam:hover { translate: none; transform: none; }
}