/* Cópia gerada por espelho/build.mjs a partir de src/. Não edite aqui. */
/* ==========================================================================
   NexTags UI 2.0 — Tokens
   --------------------------------------------------------------------------
   Base: cinzas NEUTROS (sem tom azulado) + painel branco + o azul da NexTags,
   mais vivo, nos botões e destaques. Sem degradê, sem vidro, sem fundos
   azul-claros grandes. Cartões com sombra leve (profundidade estilo Walkers OS).
   Tema escuro: classe .dark no <html>/<body> (a mesma do tema nativo), em
   cinzas suaves (não preto).
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,400..700&display=swap');

:root {
  color-scheme: light;

  /* ---- Fonte ---- */
  --nx-fonte: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --nx-fonte-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* ---- Neutros (R=G=B: nada azulado) ---- */
  --nx-fundo: #f4f4f4;          /* fundo do app, menu lateral e faixa superior */
  --nx-painel: #ffffff;         /* painel principal */
  --nx-cartao: #ffffff;         /* cartões dentro do painel */
  --nx-elevado: #ffffff;        /* popover, menu, modal */
  --nx-afundado: #f7f7f7;       /* caixa aninhada, aviso neutro */
  --nx-hover: #f7f7f7;          /* hover de linha */
  --nx-cinza-100: #f0f0f0;      /* botão suave, chip, skeleton */
  --nx-cinza-150: #eaeaea;      /* selo neutro, faixa do período */
  --nx-cinza-200: #e3e3e3;      /* pressionado */
  --nx-borda: #e7e7e7;          /* cartão, divisória */
  --nx-borda-forte: #d6d6d6;    /* botão secundário, cartão em hover */
  --nx-borda-controle: #cfcfcf; /* campo, checkbox */
  --nx-divisoria: #efefef;      /* linhas de tabela */
  --nx-texto: #1a1a1a;          /* 17:1 */
  --nx-texto-2: #555555;        /* 7,5:1 */
  --nx-texto-3: #6e6e6e;        /* 5,1:1 */
  --nx-texto-desab: #adadad;
  --nx-texto-inverso: #ffffff;
  --nx-hover-menu: rgba(0, 0, 0, 0.045);

  /* ---- Cartões: borda fina + sombra leve (profundidade) ---- */
  --nx-cartao-sombra: 0 0 0 1px rgba(0, 0, 0, 0.055), 0 1px 2px rgba(0, 0, 0, 0.04), 0 4px 12px -4px rgba(0, 0, 0, 0.06);
  --nx-cartao-sombra-hover: 0 0 0 1px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.04), 0 10px 24px -8px rgba(0, 0, 0, 0.12);
  --nx-painel-sombra: 0 0 0 1px rgba(0, 0, 0, 0.05), 0 1px 3px rgba(0, 0, 0, 0.04);

  /* ---- Marca: azul NexTags mais vivo (botões, item ativo, foco, seleção) ---- */
  --nx-marca: #2e5bff;          /* branco por cima: 5,2:1 */
  --nx-marca-hover: #1f4af0;
  --nx-marca-ativo: #183dd6;
  --nx-marca-texto: #2349e6;    /* texto azul sobre branco: 6,1:1 */
  --nx-marca-suave: #edf2ff;    /* só em detalhes pequenos (selo, tile) */
  --nx-marca-borda: #d3defe;
  --nx-anel: rgba(46, 91, 255, 0.26);

  /* ---- Ação principal = azul da marca ---- */
  --nx-acao: var(--nx-marca);
  --nx-acao-hover: var(--nx-marca-hover);
  --nx-acao-texto: #ffffff;
  --nx-selecao: #222222;        /* dica (tooltip), interruptor ligado */
  --nx-selecao-texto: #ffffff;

  /* ---- Status (o suave é o padrão) ---- */
  --nx-sucesso: #0b8a55;
  --nx-sucesso-suave: #e6f6ee;
  --nx-sucesso-texto: #036b40;
  --nx-aviso: #b26a0a;
  --nx-aviso-suave: #fef5e1;
  --nx-aviso-texto: #7a4a04;
  --nx-erro: #e5484d;
  --nx-erro-suave: #fdeeee;
  --nx-erro-texto: #b42b2f;
  --nx-info: #1f6fc8;
  --nx-info-suave: #ebf4fe;
  --nx-info-texto: #17589f;

  /* ---- Apoio (tiles de ícone dos KPIs) ---- */
  --nx-azul-suave: #edf2ff;     --nx-azul-forte: #2349e6;
  --nx-menta-suave: #e3f6f1;    --nx-menta-forte: #0d7c68;
  --nx-pessego-suave: #fff0e5;  --nx-pessego-forte: #a4501a;
  --nx-ceu-suave: #e5f4fb;      --nx-ceu-forte: #176c94;
  --nx-rosa-suave: #fdecf2;     --nx-rosa-forte: #a0345a;
  --nx-sol-suave: #fdf4da;      --nx-sol-forte: #7a5a12;
  --nx-lavanda-suave: #f1edfd;  --nx-lavanda-forte: #5f439c;

  /* ---- Gráficos: tons do azul NexTags (marca, pervinca, marinho, ciano) em
     ordem FIXA; do 5º item em diante, dois cinzas alternados ("Outros").
     Validadas (skill dataviz, validate_palette.js) sobre o cartão #fff:
     daltonismo e visão normal entre vizinhas e no fechamento da rosca.
     Não trocar a ordem sem validar de novo. ---- */
  --nx-g1: #2e5bff;  /* azul da marca */
  --nx-g2: #90aafa;  /* pervinca */
  --nx-g3: #1c3082;  /* azul-marinho */
  --nx-g4: #4ab6c7;  /* ciano */
  --nx-g-outros: #cfcfcf;
  --nx-g-outros-2: #9a9a9a;
  --nx-g-grade: #efefef;
  --nx-g-rotulo: #7a7a7a;

  /* ---- Raios ---- */
  --nx-r-xs: 6px;
  --nx-r-sm: 8px;
  --nx-r-md: 10px;   /* botões e campos */
  --nx-r-lg: 14px;   /* menus, popovers */
  --nx-r-xl: 16px;   /* cartões */
  --nx-r-2xl: 20px;  /* painel, modal */
  --nx-r-pilula: 999px;

  /* ---- Sombras de flutuantes ---- */
  --nx-sombra-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
  --nx-sombra-sm: 0 1px 2px rgba(0, 0, 0, 0.04), 0 2px 8px -2px rgba(0, 0, 0, 0.07);
  --nx-sombra-md: 0 2px 4px -1px rgba(0, 0, 0, 0.05), 0 10px 24px -6px rgba(0, 0, 0, 0.13);
  --nx-sombra-lg: 0 4px 8px -2px rgba(0, 0, 0, 0.06), 0 18px 36px -10px rgba(0, 0, 0, 0.18);
  --nx-sombra-foco: 0 0 0 3px var(--nx-anel);
  --nx-sombra-botao: 0 1px 2px rgba(0, 0, 0, 0.08), 0 4px 12px -4px rgba(46, 91, 255, 0.45);

  /* ---- Casca e alturas ---- */
  --nx-topo-h: 48px;           /* altura da faixa superior (a nativa é 48: não mudar) */
  --nx-menu-w: 248px;
  --nx-menu-trilho-w: 68px;
  --nx-moldura: 12px;          /* vão entre o painel branco e a borda da janela */
  --nx-controle-h: 36px;
  --nx-controle-h-sm: 32px;
  --nx-item-menu-h: 36px;

  /* ---- Movimento ---- */
  --nx-rapido: 120ms;
  --nx-normal: 200ms;
  --nx-ease: cubic-bezier(0.16, 1, 0.3, 1);

  /* Cores do admin do white label: o JS nativo grava estas variáveis inline
     no <html> a partir do painel. Forçamos a paleta nova para os elementos
     nativos (.text-primary, .bg-primary, interruptores) acompanharem. */
  --primary-color: var(--nx-marca) !important;
  --accent-color: var(--nx-marca) !important;
  --link-color: var(--nx-marca-texto) !important;
  --primary-rgb: 46, 91, 255 !important;
  --accent-rgb: 46, 91, 255 !important;
  --link-rgb: 35, 73, 230 !important;
}

/* ---- Tema escuro: cinzas neutros suaves, painel um degrau acima do fundo ---- */
html.dark,
body.dark {
  color-scheme: dark;

  --nx-fundo: #1c1c1c;
  --nx-painel: #232323;
  --nx-cartao: #2a2a2a;
  --nx-elevado: #2d2d2d;
  --nx-afundado: #262626;
  --nx-hover: #2f2f2f;
  --nx-cinza-100: #313131;
  --nx-cinza-150: #373737;
  --nx-cinza-200: #3e3e3e;
  --nx-borda: #343434;
  --nx-borda-forte: #424242;
  --nx-borda-controle: #4d4d4d;
  --nx-divisoria: #323232;
  --nx-texto: #ededed;
  --nx-texto-2: #b4b4b4;
  --nx-texto-3: #919191;
  --nx-texto-desab: #606060;
  --nx-texto-inverso: #1c1c1c;
  --nx-hover-menu: rgba(255, 255, 255, 0.06);

  --nx-cartao-sombra: 0 0 0 1px rgba(255, 255, 255, 0.05), 0 1px 2px rgba(0, 0, 0, 0.3), 0 6px 16px -6px rgba(0, 0, 0, 0.45);
  --nx-cartao-sombra-hover: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 2px 4px rgba(0, 0, 0, 0.3), 0 12px 28px -10px rgba(0, 0, 0, 0.55);
  --nx-painel-sombra: 0 0 0 1px rgba(255, 255, 255, 0.05);

  --nx-marca: #5281ff;
  --nx-marca-hover: #6a93ff;
  --nx-marca-ativo: #4572f5;
  --nx-marca-texto: #93b2ff;
  --nx-marca-suave: #26324f;
  --nx-marca-borda: #334878;
  --nx-anel: rgba(82, 129, 255, 0.42);

  --nx-acao: #3a66f5;          /* um pouco mais escuro que a marca: texto branco legível */
  --nx-acao-hover: #4b75ff;
  --nx-selecao: #e6e6e6;
  --nx-selecao-texto: #1c1c1c;

  --nx-sucesso: #34b87e;  --nx-sucesso-suave: #1f3329;  --nx-sucesso-texto: #8fdcb5;
  --nx-aviso: #d99a2b;    --nx-aviso-suave: #3a311d;    --nx-aviso-texto: #efcc83;
  --nx-erro: #ec6a6e;     --nx-erro-suave: #3e2627;     --nx-erro-texto: #f6aaa8;
  --nx-info: #4a96e6;     --nx-info-suave: #222d3a;     --nx-info-texto: #a3cffd;

  --nx-azul-suave: #283350;     --nx-azul-forte: #a5bdff;
  --nx-menta-suave: #203833;    --nx-menta-forte: #8be0cd;
  --nx-pessego-suave: #3d2d22;  --nx-pessego-forte: #f6c09d;
  --nx-ceu-suave: #203340;      --nx-ceu-forte: #9fd2f2;
  --nx-rosa-suave: #3d2530;     --nx-rosa-forte: #f3b3cf;
  --nx-sol-suave: #3a3321;      --nx-sol-forte: #f3d98f;
  --nx-lavanda-suave: #302a45;  --nx-lavanda-forte: #cbbcf6;

  /* mesmos 4 tons, em degraus validados sobre o cartão escuro #2a2a2a */
  --nx-g1: #5583fe;
  --nx-g2: #b2c5ff;
  --nx-g3: #304cb5;
  --nx-g4: #5fc9db;
  --nx-g-outros: #5e5e5e;
  --nx-g-outros-2: #9c9c9c;
  --nx-g-grade: #353535;
  --nx-g-rotulo: #919191;

  --nx-sombra-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
  --nx-sombra-sm: 0 1px 2px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(255, 255, 255, 0.03);
  --nx-sombra-md: 0 8px 24px -6px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.05);
  --nx-sombra-lg: 0 16px 40px -10px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.06);
  --nx-sombra-botao: 0 1px 2px rgba(0, 0, 0, 0.3);

  --primary-rgb: 82, 129, 255 !important;
  --accent-rgb: 82, 129, 255 !important;
}

/* O tema escuro NATIVO (main1-dark.css) usa tokens --dark-*. Apontando todos
   para a paleta nova, as telas que ainda não foram redesenhadas também ficam
   no mesmo cinza neutro no modo escuro. */
html.dark,
body.dark,
.dark {
  --dark-bg: var(--nx-fundo);
  --dark-bg-2: var(--nx-afundado);
  --dark-bg-3: var(--nx-cinza-100);
  --dark-bg-4: var(--nx-cinza-150);
  --dark-card: var(--nx-cartao);
  --dark-card-2: var(--nx-elevado);
  --dark-surface: var(--nx-painel);
  --dark-surface-2: var(--nx-elevado);
  --dark-surface-3: var(--nx-cinza-100);
  --dark-text: var(--nx-texto);
  --dark-text-2: var(--nx-texto-2);
  --dark-text-3: var(--nx-texto-3);
  --dark-border: var(--nx-borda-forte);
  --dark-border-soft: var(--nx-borda);
  --dark-hover: var(--nx-hover);
  --dark-input: var(--nx-afundado);
  --dark-scroll-track: transparent;
  --dark-scroll-thumb: var(--nx-borda-forte);
  --dark-shadow: var(--nx-sombra-md);
}