/* =====================================================================
   NexusERP - Tema base (claro/escuro)
   Paleta: azul primario + neutros slate + verde/vermelho de estado
   Todas as cores vem de variaveis para permitir identidade por empresa.
   ===================================================================== */

:root {
    /* Cor primaria - sobrescrita por empresa via <style> inline no layout */
    --nx-primary: #2563eb;
    --nx-primary-dark: #1d4ed8;
    --nx-primary-soft: rgba(37, 99, 235, .12);
    --nx-primary-contraste: #ffffff;

    /* Estados */
    --nx-success: #16a34a;
    --nx-danger: #dc2626;
    --nx-danger-soft: rgba(220, 38, 38, .10);
    --nx-warning: #d97706;
    --nx-info: #0891b2;

    /* Neutros - tema claro */
    --nx-bg: #f1f5f9;
    --nx-surface: #ffffff;
    --nx-surface-2: #f8fafc;
    --nx-surface-3: #eef2f7;
    --nx-border: #e2e8f0;
    --nx-border-forte: #cbd5e1;
    --nx-text: #0f172a;
    --nx-text-muted: #64748b;
    --nx-text-suave: #94a3b8;

    /* Sidebar */
    --nx-side-bg: #0f172a;
    --nx-side-text: #cbd5e1;
    --nx-side-text-ativo: #ffffff;
    --nx-side-hover: rgba(255, 255, 255, .07);
    --nx-side-largura: 268px;
    --nx-side-largura-min: 72px;

    --nx-topo-altura: 58px;
    --nx-abas-altura: 40px;

    /* Tipografia - trocavel por empresa (Tema::css) */
    --nx-fonte: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --nx-fonte-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Consolas, monospace;

    /* Cor de apoio da marca (tema_secundaria). Nao e o hover da primaria. */
    --nx-accent: #16a34a;
    --nx-accent-contraste: #ffffff;

    --nx-radius: .625rem;
    --nx-radius-sm: .375rem;
    --nx-sombra: 0 1px 2px rgba(15, 23, 42, .06), 0 1px 3px rgba(15, 23, 42, .08);
    --nx-sombra-md: 0 4px 6px -1px rgba(15, 23, 42, .08), 0 2px 4px -2px rgba(15, 23, 42, .06);
    --nx-sombra-lg: 0 12px 24px -8px rgba(15, 23, 42, .18);
    --nx-transicao: 160ms ease;
}

[data-tema="escuro"] {
    --nx-bg: #0b1120;
    --nx-surface: #131c2e;
    --nx-surface-2: #18233a;
    --nx-surface-3: #1f2c47;
    --nx-border: #263248;
    --nx-border-forte: #33415c;
    --nx-text: #e8eef8;
    --nx-text-muted: #94a3b8;
    --nx-text-suave: #64748b;

    --nx-side-bg: #080d18;
    --nx-side-text: #94a3b8;
    --nx-side-hover: rgba(255, 255, 255, .05);

    --nx-primary-soft: rgba(37, 99, 235, .2);
    /* No escuro o vermelho precisa de mais presenca para aparecer sobre a aba */
    --nx-danger-soft: rgba(248, 113, 113, .18);
    --nx-sombra: 0 1px 2px rgba(0, 0, 0, .4);
    --nx-sombra-md: 0 4px 8px rgba(0, 0, 0, .45);
    --nx-sombra-lg: 0 16px 32px -8px rgba(0, 0, 0, .6);
}

/* =====================================================================
   Base
   ===================================================================== */
* { scrollbar-color: var(--nx-border-forte) transparent; }

body {
    background: var(--nx-bg);
    color: var(--nx-text);
    font-family: var(--nx-fonte);
    font-size: .875rem;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 { font-weight: 650; letter-spacing: -.01em; color: var(--nx-text); }

a { color: var(--nx-primary); text-decoration: none; }
a:hover { color: var(--nx-primary-dark); }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--nx-border-forte); border-radius: 99px; border: 2px solid transparent; background-clip: content-box; }

:focus-visible { outline: 2px solid var(--nx-primary); outline-offset: 2px; }

.nx-mono { font-family: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Consolas, monospace; }

/* =====================================================================
   Layout shell
   ===================================================================== */
.nx-shell { display: flex; min-height: 100vh; }

.nx-sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    width: var(--nx-side-largura);
    background: var(--nx-side-bg);
    color: var(--nx-side-text);
    display: flex;
    flex-direction: column;
    z-index: 1040;
    transition: width var(--nx-transicao), transform var(--nx-transicao);
    border-right: 1px solid rgba(255, 255, 255, .06);
}

.nx-conteudo {
    flex: 1 1 auto;
    min-width: 0;
    margin-left: var(--nx-side-largura);
    display: flex;
    flex-direction: column;
    transition: margin-left var(--nx-transicao);
}

/* Sidebar recolhida (desktop) */
body.nx-side-min .nx-sidebar { width: var(--nx-side-largura-min); }
body.nx-side-min .nx-conteudo { margin-left: var(--nx-side-largura-min); }
body.nx-side-min .nx-side-rotulo,
body.nx-side-min .nx-side-secao,
body.nx-side-min .nx-side-seta,
body.nx-side-min .nx-side-badge,
body.nx-side-min .nx-marca-texto,
body.nx-side-min .nx-side-busca { display: none !important; }
body.nx-side-min .nx-side-link { justify-content: center; padding-inline: 0; }
body.nx-side-min .nx-side-sub { display: none !important; }

/* =====================================================================
   Marca
   ===================================================================== */
.nx-marca {
    height: var(--nx-topo-altura);
    display: flex;
    align-items: center;
    gap: .625rem;
    padding: 0 1rem;
    flex: 0 0 auto;
    border-bottom: 1px solid rgba(255, 255, 255, .06);
}
.nx-marca-icone {
    width: 32px; height: 32px;
    flex: 0 0 32px;
    border-radius: 9px;
    background: var(--nx-primary);
    color: var(--nx-primary-contraste);
    display: grid; place-items: center;
    font-weight: 700; font-size: .875rem;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .08);
    overflow: hidden;
}
/* contain, nao cover: logo de cliente costuma ser retangular e 'cover'
   recortaria as laterais da marca. */
.nx-marca-icone img { width: 100%; height: 100%; object-fit: contain; }
.nx-marca-texto { min-width: 0; }
.nx-marca-texto strong { display: block; color: #fff; font-size: .9375rem; line-height: 1.1; }
.nx-marca-texto small { color: var(--nx-side-text); font-size: .6875rem; }

/* =====================================================================
   Navegacao (arvore de modulos)
   ===================================================================== */
.nx-side-busca { padding: .75rem .75rem .25rem; }
.nx-side-busca input {
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .08);
    color: #fff;
    font-size: .8125rem;
    border-radius: var(--nx-radius-sm);
}
.nx-side-busca input::placeholder { color: #64748b; }
.nx-side-busca input:focus {
    background: rgba(255, 255, 255, .09);
    border-color: var(--nx-primary);
    box-shadow: none; color: #fff;
}

.nx-side-nav { flex: 1 1 auto; overflow-y: auto; overflow-x: hidden; padding: .5rem .5rem 1.5rem; }
.nx-side-nav::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .14); }

.nx-side-secao {
    padding: 1rem .625rem .375rem;
    font-size: .6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #526176;
}

.nx-side-lista { list-style: none; margin: 0; padding: 0; }
.nx-side-item { position: relative; }

.nx-side-vazio,
.nx-side-sem-resultado { padding: .75rem .875rem; color: #64748b; margin: 0; }

.nx-side-busca .nx-side-busca-icone {
    position: absolute; left: .625rem; top: 50%; transform: translateY(-50%);
    color: #64748b; font-size: .75rem; pointer-events: none;
}
.nx-side-busca input { padding-left: 1.875rem; }

.nx-side-fechar {
    margin-left: auto;
    width: 30px; height: 30px;
    display: grid; place-items: center;
    border: 0; border-radius: var(--nx-radius-sm);
    background: rgba(255, 255, 255, .06);
    color: var(--nx-side-text);
    font-size: .75rem;
}
.nx-side-fechar:hover { background: rgba(255, 255, 255, .12); color: #fff; }

.nx-side-link {
    width: 100%;
    border: 0;
    background: transparent;
    text-align: left;
    display: flex;
    align-items: center;
    gap: .625rem;
    padding: .5rem .625rem;
    border-radius: var(--nx-radius-sm);
    color: var(--nx-side-text);
    font-size: .8438rem;
    font-weight: 500;
    white-space: nowrap;
    transition: background var(--nx-transicao), color var(--nx-transicao);
    cursor: pointer;
}
.nx-side-link:hover { background: var(--nx-side-hover); color: var(--nx-side-text-ativo); }
.nx-side-link.ativo { background: var(--nx-primary); color: var(--nx-primary-contraste); }
.nx-side-link.ativo:hover { background: var(--nx-primary-dark); }
.nx-side-link.aberto { color: var(--nx-side-text-ativo); }

.nx-side-icone { width: 18px; flex: 0 0 18px; text-align: center; font-size: .9375rem; opacity: .9; }
.nx-side-rotulo { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; }
.nx-side-seta { font-size: .625rem; opacity: .6; transition: transform var(--nx-transicao); }
.nx-side-link.aberto .nx-side-seta { transform: rotate(90deg); }
.nx-side-badge {
    font-size: .625rem; font-weight: 700;
    padding: .0625rem .375rem; border-radius: 99px;
    background: var(--nx-primary); color: #fff;
}

/* Submenus - profundidade infinita */
.nx-side-sub { display: none; margin: .125rem 0 .25rem; padding-left: .8125rem; border-left: 1px solid rgba(255, 255, 255, .08); }
.nx-side-sub.aberto { display: block; }

/* =====================================================================
   "Voce esta aqui"
   O item exato usa .ativo (fundo solido, acima). O GRUPO que contem a tela
   aberta usa .ramo: marca discreta, para nao competir com o item exato.
   Sem o .ramo o usuario perde a referencia em dois casos reais - grupo
   recolhido e sidebar minimizada (nos dois o item ativo fica invisivel).
   O segundo "background/border-color" e um upgrade progressivo: navegador
   sem color-mix fica no token fixo, os outros seguem a cor da empresa.
   ===================================================================== */
.nx-side-link.ramo {
    color: var(--nx-side-text-ativo);
    background: var(--nx-primary-soft);
    background: color-mix(in srgb, var(--nx-primary) 14%, transparent);
}
.nx-side-link.ramo:hover { background: var(--nx-side-hover); }
.nx-side-link.ramo .nx-side-icone { color: var(--nx-primary); opacity: 1; }

.nx-side-ponto {
    width: 6px; height: 6px;
    flex: 0 0 6px;
    border-radius: 50%;
    background: var(--nx-primary);
}

/* Traco da subarvore que leva ate a tela aberta */
.nx-side-sub.ramo {
    border-left-color: rgba(37, 99, 235, .5);
    border-left-color: color-mix(in srgb, var(--nx-primary) 50%, transparent);
}

/* Recolhida: sobra so o icone, entao o ponto vira marca de canto */
body.nx-side-min .nx-side-ponto {
    position: absolute;
    top: .25rem; right: .375rem;
    box-shadow: 0 0 0 2px var(--nx-side-bg);
}

/* Sidebar mobile */
.nx-side-overlay {
    position: fixed; inset: 0;
    background: rgba(2, 6, 23, .6);
    backdrop-filter: blur(2px);
    z-index: 1035; display: none;
}
.nx-side-overlay.ativo { display: block; }

@media (max-width: 991.98px) {
    .nx-sidebar { transform: translateX(-100%); box-shadow: var(--nx-sombra-lg); }
    body.nx-side-aberta .nx-sidebar { transform: translateX(0); }
    .nx-conteudo { margin-left: 0 !important; }
    body.nx-side-min .nx-sidebar { width: var(--nx-side-largura); }
    body.nx-side-min .nx-side-rotulo,
    body.nx-side-min .nx-side-secao,
    body.nx-side-min .nx-side-seta,
    body.nx-side-min .nx-marca-texto,
    body.nx-side-min .nx-side-busca { display: revert !important; }
    body.nx-side-min .nx-side-link { justify-content: flex-start; padding-inline: .625rem; }
}

/* =====================================================================
   Topbar
   ===================================================================== */
.nx-topo {
    height: var(--nx-topo-altura);
    flex: 0 0 auto;
    background: var(--nx-surface);
    border-bottom: 1px solid var(--nx-border);
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: 0 .75rem;
    position: sticky; top: 0; z-index: 1030;
}

.nx-icone-btn {
    width: 34px; height: 34px;
    display: grid; place-items: center;
    border: 1px solid transparent;
    border-radius: var(--nx-radius-sm);
    background: transparent;
    color: var(--nx-text-muted);
    transition: var(--nx-transicao);
    position: relative;
}
.nx-icone-btn:hover { background: var(--nx-surface-3); color: var(--nx-text); }

.nx-ponto {
    position: absolute; top: 6px; right: 7px;
    width: 7px; height: 7px; border-radius: 99px;
    background: var(--nx-danger);
    border: 2px solid var(--nx-surface);
}

.nx-btn-avatar { width: auto; padding: 0 .25rem; }
.nx-menu-usuario { min-width: 250px; }

.nx-busca-global { position: relative; max-width: 380px; flex: 1 1 240px; }
.nx-busca-global .bi-search { position: absolute; left: .625rem; top: 50%; transform: translateY(-50%); color: var(--nx-text-suave); font-size: .8125rem; }
.nx-busca-global input {
    padding-left: 2rem;
    background: var(--nx-surface-2);
    border-color: var(--nx-border);
    color: var(--nx-text);
    font-size: .8125rem;
    height: 34px;
}
.nx-busca-global kbd {
    position: absolute; right: .375rem; top: 50%; transform: translateY(-50%);
    font-size: .625rem; background: var(--nx-surface-3); color: var(--nx-text-muted);
    border: 1px solid var(--nx-border); border-radius: 4px; padding: .0625rem .25rem;
}
@media (max-width: 767.98px) { .nx-busca-global { display: none; } }

/* Dropdown de resultados da busca global */
.nx-busca-painel {
    position: absolute;
    top: calc(100% + .375rem);
    left: 0; right: 0;
    max-height: min(420px, 70vh);
    overflow-y: auto;
    background: var(--nx-surface);
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius);
    box-shadow: var(--nx-sombra-lg);
    z-index: 1040;
    padding: .25rem;
}
.nx-busca-secao + .nx-busca-secao {
    border-top: 1px solid var(--nx-border);
    margin-top: .25rem; padding-top: .25rem;
}
.nx-busca-secao-titulo {
    display: flex; align-items: center; gap: .375rem;
    padding: .375rem .5rem .25rem;
    font-size: .6875rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .04em; color: var(--nx-text-muted);
}
.nx-busca-item {
    display: flex; align-items: center; gap: .5rem;
    padding: .375rem .5rem;
    border-radius: var(--nx-radius-sm);
    color: var(--nx-text);
    text-decoration: none;
    font-size: .8125rem;
}
.nx-busca-item > .bi {
    width: 26px; height: 26px; flex: 0 0 26px;
    display: grid; place-items: center;
    border-radius: var(--nx-radius-sm);
    background: var(--nx-primary-soft); color: var(--nx-primary);
    font-size: .8125rem;
}
.nx-busca-item small { color: var(--nx-text-muted); font-size: .6875rem; }
.nx-busca-item:hover,
.nx-busca-item.ativo { background: var(--nx-surface-3); color: var(--nx-text); }
.nx-busca-item.ativo { outline: 1px solid var(--nx-primary); outline-offset: -1px; }
.nx-busca-vazio {
    padding: .875rem .625rem; text-align: center;
    font-size: .8125rem; color: var(--nx-text-muted);
}

/* Cabecalho de grupo na pagina /busca */
.nx-busca-grupo {
    display: flex; align-items: center; gap: .5rem;
    font-size: .75rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .04em; color: var(--nx-text-muted);
    margin-bottom: .625rem;
}

.nx-empresa-atual {
    display: flex; align-items: center; gap: .5rem;
    padding: .25rem .5rem; border-radius: var(--nx-radius-sm);
    border: 1px solid var(--nx-border);
    background: var(--nx-surface-2);
    font-size: .8125rem; color: var(--nx-text);
    max-width: 220px;
}
.nx-empresa-atual span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.nx-avatar {
    width: 30px; height: 30px; border-radius: 99px;
    background: var(--nx-primary-soft); color: var(--nx-primary);
    display: grid; place-items: center;
    font-size: .75rem; font-weight: 700; flex: 0 0 30px;
    overflow: hidden;
}
.nx-avatar img { width: 100%; height: 100%; object-fit: cover; }
.nx-avatar-lg { width: 44px; height: 44px; flex-basis: 44px; font-size: .9375rem; }

/* =====================================================================
   Abas de navegacao
   ===================================================================== */
.nx-abas {
    height: var(--nx-abas-altura);
    flex: 0 0 auto;
    background: var(--nx-surface-2);
    border-bottom: 1px solid var(--nx-border);
    display: flex; align-items: stretch;
    overflow-x: auto; overflow-y: hidden;
    scrollbar-width: none;
    position: sticky; top: var(--nx-topo-altura); z-index: 1020;
}
.nx-abas::-webkit-scrollbar { display: none; }
/* O display:flex acima vence o [hidden] do navegador; forcamos aqui */
.nx-abas[hidden] { display: none; }

.nx-aba {
    display: inline-flex; align-items: center; gap: .5rem;
    padding: 0 .5rem 0 .75rem;
    border-right: 1px solid var(--nx-border);
    color: var(--nx-text-muted);
    font-size: .8125rem; white-space: nowrap;
    /* 220px -> 170px: o titulo agora chega abreviado em 18 caracteres pelo
       Nexus.abas.abreviar(), entao a folga extra so roubava espaco da barra e
       cabem mais abas antes de aparecer rolagem. O ellipsis do .nx-aba-titulo
       continua como rede de seguranca. */
    max-width: 170px; flex: 0 0 auto;
    transition: var(--nx-transicao);
}
.nx-aba:hover { background: var(--nx-surface-3); color: var(--nx-text); }
.nx-aba.ativa {
    background: var(--nx-surface); color: var(--nx-text); font-weight: 600;
    box-shadow: inset 0 -2px 0 var(--nx-primary);
}
.nx-aba-titulo {
    overflow: hidden; text-overflow: ellipsis;
    padding: .375rem 0; /* area de clique confortavel em toda a altura */
}
.nx-aba-fechar {
    /* Alvo circular: o quadrado de canto arredondado com fundo cinza forte
       parecia uma "caixinha" colada no titulo. Circulo + tom de perigo e o
       padrao atual (VS Code, Chrome) e comunica a acao destrutiva. */
    width: 20px; height: 20px; border: 0; border-radius: 50%;
    background: transparent; color: inherit; opacity: .5;
    display: grid; place-items: center; font-size: .625rem; flex: 0 0 20px;
    padding: 0; line-height: 1;
    transition: var(--nx-transicao);
    /* Padrao Sankhya: o X aparece na aba ativa ou sob o cursor, evitando
       uma fileira de "x" competindo com os titulos. */
    visibility: hidden;
}
.nx-aba.ativa .nx-aba-fechar,
.nx-aba:hover .nx-aba-fechar,
.nx-aba-fechar:focus-visible { visibility: visible; }
.nx-aba-fechar:hover {
    opacity: 1;
    background: var(--nx-danger-soft);
    color: var(--nx-danger);
}
.nx-aba-fechar:active { transform: scale(.9); }
/* Foco visivel proprio: o outline padrao vazava do circulo */
.nx-aba-fechar:focus-visible {
    outline: 2px solid var(--nx-primary);
    outline-offset: 1px;
}

/* =====================================================================
   Area principal
   ===================================================================== */
.nx-main { flex: 1 1 auto; padding: 1.25rem; min-width: 0; }
@media (max-width: 575.98px) { .nx-main { padding: .875rem; } }

.nx-pagina-cabecalho {
    display: flex; flex-wrap: wrap; align-items: flex-start;
    justify-content: space-between; gap: .75rem; margin-bottom: 1.25rem;
}
.nx-pagina-cabecalho h1 { font-size: 1.375rem; margin: 0; }
.nx-pagina-cabecalho p { margin: .1875rem 0 0; color: var(--nx-text-muted); font-size: .8125rem; }

.breadcrumb { --bs-breadcrumb-divider-color: var(--nx-text-suave); font-size: .75rem; margin: 0 0 .375rem; }
.breadcrumb-item + .breadcrumb-item::before { color: var(--nx-text-suave); }
.breadcrumb-item a { color: var(--nx-text-muted); }
.breadcrumb-item.active { color: var(--nx-text-suave); }

/* =====================================================================
   Cards / superficies
   ===================================================================== */
.nx-card {
    background: var(--nx-surface);
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius);
    box-shadow: var(--nx-sombra);
}
.nx-card-cabecalho {
    padding: .875rem 1.125rem;
    border-bottom: 1px solid var(--nx-border);
    display: flex; align-items: center; justify-content: space-between; gap: .75rem;
    flex-wrap: wrap;
}
.nx-card-cabecalho h2, .nx-card-cabecalho h3 { font-size: .9375rem; margin: 0; }
.nx-card-corpo { padding: 1.125rem; }
.nx-card-rodape { padding: .875rem 1.125rem; border-top: 1px solid var(--nx-border); background: var(--nx-surface-2); border-radius: 0 0 var(--nx-radius) var(--nx-radius); }

.card, .modal-content, .dropdown-menu, .offcanvas, .list-group-item, .accordion-item {
    background-color: var(--nx-surface);
    border-color: var(--nx-border);
    color: var(--nx-text);
}
/* O Bootstrap pinta .accordion-button expandido com azul claro + texto escuro
   (--bs-accordion-active-*). No tema escuro isso virava uma faixa clara fora
   da paleta, com o titulo do grupo quase ilegivel. Aqui o botao segue os
   tokens do projeto nos dois estados, e a seta usa currentColor via mask para
   nao depender do SVG embutido do Bootstrap (que e preto fixo). */
.accordion-button {
    background-color: var(--nx-surface-2);
    color: var(--nx-text);
    font-weight: 600;
    box-shadow: none;
}
.accordion-button:not(.collapsed) {
    background-color: var(--nx-surface-3);
    color: var(--nx-text);
    box-shadow: inset 0 -1px 0 var(--nx-border);
}
.accordion-button:focus-visible {
    outline: 2px solid var(--nx-primary);
    outline-offset: -2px;
    box-shadow: none;
}
.accordion-button::after {
    background-image: none;
    background-color: currentColor;
    -webkit-mask: var(--bs-accordion-btn-icon) center / contain no-repeat;
    mask: var(--bs-accordion-btn-icon) center / contain no-repeat;
}

.dropdown-menu { box-shadow: var(--nx-sombra-lg); border-radius: var(--nx-radius); padding: .3125rem; font-size: .8438rem; }
.dropdown-item { border-radius: var(--nx-radius-sm); color: var(--nx-text); padding: .4375rem .625rem; }
.dropdown-item:hover, .dropdown-item:focus { background: var(--nx-surface-3); color: var(--nx-text); }
/* Icones do menu na mesma coluna e com o mesmo peso visual: sem largura fixa
   eles dancavam alguns pixels conforme o desenho de cada glifo. flex mantem o
   item ocupando a largura toda (flex e block-level). */
.dropdown-item { display: flex; align-items: center; }
.dropdown-item > .bi {
    flex: 0 0 1rem; width: 1rem;
    font-size: .875rem; line-height: 1; text-align: center;
}
/* Nao pintar icone que ja traz cor propria via utilitario (text-primary no
   check da empresa ativa, text-danger no "Sair"): a regra abaixo tem
   especificidade maior que .text-* e apagaria essas cores. */
.dropdown-item > .bi:not([class*="text-"]) { color: var(--nx-text-muted); }
.dropdown-item:hover > .bi:not([class*="text-"]) { color: var(--nx-primary); }
.dropdown-header { color: var(--nx-text-suave); font-size: .6875rem; text-transform: uppercase; letter-spacing: .05em; font-weight: 700; }
.dropdown-divider { border-color: var(--nx-border); }

/* KPI */
.nx-kpi { display: flex; align-items: flex-start; gap: .875rem; padding: 1.125rem; }
.nx-kpi-icone {
    width: 42px; height: 42px; flex: 0 0 42px;
    border-radius: 11px; display: grid; place-items: center;
    background: var(--nx-primary-soft); color: var(--nx-primary); font-size: 1.125rem;
}
.nx-kpi-valor { font-size: 1.5rem; font-weight: 700; line-height: 1.15; letter-spacing: -.02em; }
.nx-kpi-rotulo { font-size: .75rem; color: var(--nx-text-muted); text-transform: uppercase; letter-spacing: .04em; font-weight: 600; }
.nx-kpi-var { font-size: .75rem; font-weight: 600; display: inline-flex; align-items: center; gap: .1875rem; }
.nx-kpi-var.sobe { color: var(--nx-success); }
.nx-kpi-var.desce { color: var(--nx-danger); }

.nx-tom-info { background: rgba(14, 165, 233, .12); color: #0ea5e9; }
.nx-tom-sucesso { background: rgba(22, 163, 74, .12); color: var(--nx-success); }
.nx-tom-alerta { background: rgba(217, 119, 6, .14); color: var(--nx-warning); }

.nx-card-link { transition: transform var(--nx-transicao); }
.nx-card-link:hover .nx-card { border-color: var(--nx-primary); }
.nx-card-link:hover { transform: translateY(-1px); }

/* Atalhos (cards de acesso rapido) */
.nx-atalho {
    display: flex; align-items: center; gap: .75rem;
    padding: .75rem;
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius);
    background: var(--nx-surface-2);
    color: var(--nx-text);
    text-decoration: none;
    height: 100%;
    transition: var(--nx-transicao);
}
.nx-atalho:hover { border-color: var(--nx-primary); background: var(--nx-surface-3); color: var(--nx-text); }
.nx-atalho-icone {
    width: 36px; height: 36px; flex: 0 0 36px;
    border-radius: 10px; display: grid; place-items: center;
    background: var(--nx-primary-soft); color: var(--nx-primary); font-size: 1rem;
}

/* Lista de notificacoes */
.nx-notificacao {
    display: flex; align-items: flex-start; gap: .75rem;
    padding: .875rem 1.125rem;
    border-bottom: 1px solid var(--nx-border);
}
.nx-notificacao:last-child { border-bottom: 0; }
.nx-notificacao.nao-lida { background: var(--nx-primary-soft); }
.nx-notificacao-icone {
    width: 32px; height: 32px; flex: 0 0 32px;
    border-radius: 9px; display: grid; place-items: center;
    font-size: .875rem;
}
.nx-notificacao-ponto {
    width: 8px; height: 8px; border-radius: 99px; flex: 0 0 8px;
    background: var(--nx-primary); margin-top: .375rem;
}

/* Medidor de forca de senha */
.nx-forca { height: 4px; background: var(--nx-surface-3); }
.nx-forca .progress-bar { width: 0; transition: width var(--nx-transicao); }

/* Timeline de atividades */
.nx-timeline { list-style: none; margin: 0; padding: .25rem 1.125rem 1.125rem; }
.nx-timeline-item {
    position: relative;
    padding: .625rem 0 .625rem 1rem;
    border-left: 1px solid var(--nx-border);
}
.nx-timeline-item:last-child { border-left-color: transparent; }
.nx-timeline-item::before {
    content: '';
    position: absolute; left: -4px; top: 1rem;
    width: 7px; height: 7px; border-radius: 99px;
    background: var(--nx-primary);
    box-shadow: 0 0 0 3px var(--nx-primary-soft);
}

/* =====================================================================
   Tabelas
   ===================================================================== */
.nx-tabela-wrap { overflow-x: auto; border-radius: var(--nx-radius); }

/* Bloco de codigo/JSON somente leitura (snapshot de auditoria, payload de API) */
.nx-code {
    display: block;
    max-height: 22rem;
    overflow: auto;
    margin: 0;
    padding: .75rem .875rem;
    background: var(--nx-surface-2);
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-sm);
    color: var(--nx-text);
    font-family: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Consolas, monospace;
    font-size: .75rem;
    line-height: 1.55;
    white-space: pre-wrap;
    word-break: break-word;
}
.table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--nx-text);
    color: var(--nx-text);
    margin: 0;
    font-size: .8438rem;
}
.table > thead th {
    background: var(--nx-surface-2);
    color: var(--nx-text-muted);
    font-size: .6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    border-bottom: 1px solid var(--nx-border);
    padding: .625rem .75rem;
    white-space: nowrap;
    position: sticky; top: 0; z-index: 2;
}
.table > tbody td { padding: .625rem .75rem; border-color: var(--nx-border); vertical-align: middle; }
.table > tbody tr:hover > td { background: var(--nx-surface-2); }
.table-borderless > tbody td { border: 0; }

.nx-ordenavel { cursor: pointer; user-select: none; }
.nx-ordenavel:hover { color: var(--nx-text); }
.nx-ordenavel .bi { font-size: .625rem; opacity: .5; }
.nx-ordenavel.asc .bi, .nx-ordenavel.desc .bi { opacity: 1; color: var(--nx-primary); }

.nx-acoes-linha { display: flex; gap: .25rem; justify-content: flex-end; }

/* Vazio */
.nx-vazio { padding: 3rem 1.25rem; text-align: center; color: var(--nx-text-muted); }
.nx-vazio .bi { font-size: 2.25rem; color: var(--nx-text-suave); display: block; margin-bottom: .625rem; }

/* =====================================================================
   Formularios
   ===================================================================== */
.form-label { font-size: .8125rem; font-weight: 600; margin-bottom: .3125rem; color: var(--nx-text); }
.form-text { font-size: .75rem; color: var(--nx-text-muted); }
.form-control, .form-select {
    background-color: var(--nx-surface);
    border-color: var(--nx-border-forte);
    color: var(--nx-text);
    font-size: .8438rem;
    border-radius: var(--nx-radius-sm);
    padding: .4375rem .625rem;
}
.form-control:focus, .form-select:focus {
    background-color: var(--nx-surface);
    border-color: var(--nx-primary);
    color: var(--nx-text);
    box-shadow: 0 0 0 3px var(--nx-primary-soft);
}
.form-control::placeholder { color: var(--nx-text-suave); }
.form-control:disabled, .form-control[readonly], .form-select:disabled {
    background-color: var(--nx-surface-3); color: var(--nx-text-muted); opacity: 1;
}
.form-check-input { background-color: var(--nx-surface); border-color: var(--nx-border-forte); }
.form-check-input:checked { background-color: var(--nx-primary); border-color: var(--nx-primary); }
.form-check-input:focus { box-shadow: 0 0 0 3px var(--nx-primary-soft); border-color: var(--nx-primary); }
.form-check-label { font-size: .8438rem; }
.input-group-text { background: var(--nx-surface-2); border-color: var(--nx-border-forte); color: var(--nx-text-muted); font-size: .8125rem; }
.invalid-feedback { font-size: .75rem; }
.was-validated .form-control:invalid, .form-control.is-invalid { border-color: var(--nx-danger); }

.nx-obrigatorio::after { content: ' *'; color: var(--nx-danger); font-weight: 700; }

/* =====================================================================
   Botoes
   ===================================================================== */
.btn { font-size: .8438rem; font-weight: 600; border-radius: var(--nx-radius-sm); padding: .4375rem .875rem; transition: var(--nx-transicao); }
.btn-sm { font-size: .7813rem; padding: .3125rem .625rem; }
.btn-primary { background: var(--nx-primary); border-color: var(--nx-primary); color: var(--nx-primary-contraste); }
.btn-primary:hover, .btn-primary:focus { background: var(--nx-primary-dark); border-color: var(--nx-primary-dark); color: var(--nx-primary-contraste); }
.btn-outline-primary { color: var(--nx-primary); border-color: var(--nx-primary); }
.btn-outline-primary:hover { background: var(--nx-primary); border-color: var(--nx-primary); color: var(--nx-primary-contraste); }
.btn-outline-secondary { color: var(--nx-text-muted); border-color: var(--nx-border-forte); }
.btn-outline-secondary:hover { background: var(--nx-surface-3); border-color: var(--nx-border-forte); color: var(--nx-text); }
.btn-light { background: var(--nx-surface-2); border-color: var(--nx-border); color: var(--nx-text); }
.btn-light:hover { background: var(--nx-surface-3); border-color: var(--nx-border-forte); color: var(--nx-text); }
.btn-success { background: var(--nx-success); border-color: var(--nx-success); }
.btn-danger { background: var(--nx-danger); border-color: var(--nx-danger); }
.btn:disabled { opacity: .55; }

/* =====================================================================
   Badges / pills
   ===================================================================== */
.nx-pill {
    display: inline-flex; align-items: center; gap: .25rem;
    font-size: .6875rem; font-weight: 700;
    padding: .1875rem .5rem; border-radius: 99px;
    text-transform: uppercase; letter-spacing: .03em;
    border: 1px solid transparent;
}
.nx-pill-neutro { background: var(--nx-surface-3); color: var(--nx-text-muted); border-color: var(--nx-border); }
.nx-pill-ativo { background: rgba(22, 163, 74, .12); color: var(--nx-success); border-color: rgba(22, 163, 74, .28); }
.nx-pill-inativo { background: rgba(220, 38, 38, .1); color: var(--nx-danger); border-color: rgba(220, 38, 38, .25); }
.nx-pill-alerta { background: rgba(217, 119, 6, .12); color: var(--nx-warning); border-color: rgba(217, 119, 6, .28); }
.nx-pill-info { background: var(--nx-primary-soft); color: var(--nx-primary); border-color: rgba(37, 99, 235, .28); }
.nx-pill-sucesso { background: rgba(22, 163, 74, .12); color: var(--nx-success); border-color: rgba(22, 163, 74, .28); }
.nx-pill-erro { background: rgba(220, 38, 38, .1); color: var(--nx-danger); border-color: rgba(220, 38, 38, .25); }

/* =====================================================================
   Toasts
   ===================================================================== */
.nx-toasts { position: fixed; top: 1rem; right: 1rem; z-index: 1090; display: flex; flex-direction: column; gap: .5rem; max-width: min(380px, calc(100vw - 2rem)); }
.nx-toast {
    display: flex; align-items: flex-start; gap: .625rem;
    background: var(--nx-surface); color: var(--nx-text);
    border: 1px solid var(--nx-border); border-left: 3px solid var(--nx-primary);
    border-radius: var(--nx-radius); box-shadow: var(--nx-sombra-lg);
    padding: .75rem .875rem; font-size: .8438rem;
    animation: nxEntra 200ms ease;
}
.nx-toast.sucesso { border-left-color: var(--nx-success); }
.nx-toast.erro { border-left-color: var(--nx-danger); }
.nx-toast.alerta { border-left-color: var(--nx-warning); }
.nx-toast .bi { font-size: 1rem; line-height: 1.3; }
.nx-toast.sucesso .bi { color: var(--nx-success); }
.nx-toast.erro .bi { color: var(--nx-danger); }
.nx-toast.alerta .bi { color: var(--nx-warning); }
.nx-toast.info .bi { color: var(--nx-primary); }
.nx-toast-saindo { animation: nxSai 180ms ease forwards; }

@keyframes nxEntra { from { opacity: 0; transform: translateX(1rem); } to { opacity: 1; transform: none; } }
@keyframes nxSai { to { opacity: 0; transform: translateX(1rem); } }

/* =====================================================================
   Login / paginas publicas
   ===================================================================== */
.nx-auth {
    min-height: 100vh; display: grid;
    grid-template-columns: 1fr;
    background: var(--nx-bg);
}
@media (min-width: 992px) { .nx-auth { grid-template-columns: 1.05fr .95fr; } }

.nx-auth-vitrine {
    display: none; position: relative; overflow: hidden;
    padding: 3rem; color: #fff;
    background: var(--nx-side-bg);
    flex-direction: column; justify-content: space-between;
}
@media (min-width: 992px) { .nx-auth-vitrine { display: flex; } }

/* Halo unico atras do conteudo: da profundidade sem virar enfeite.
   Fica no ::before para nao exigir marcacao extra na view. */
.nx-auth-vitrine::before {
    content: ''; position: absolute; z-index: 0;
    top: -18%; left: -12%; width: 34rem; height: 34rem;
    background: radial-gradient(circle,
        color-mix(in srgb, var(--nx-primary) 26%, transparent) 0%,
        transparent 68%);
    pointer-events: none;
}
/* Malha discreta para dar textura ao painel escuro */
.nx-auth-vitrine::after {
    content: ''; position: absolute; inset: 0; z-index: 0;
    background-image:
        linear-gradient(to right, rgba(255, 255, 255, .04) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255, 255, 255, .04) 1px, transparent 1px);
    background-size: 3.5rem 3.5rem;
    mask-image: radial-gradient(ellipse at 30% 40%, #000 20%, transparent 75%);
    pointer-events: none;
}
/* Conteudo acima das camadas decorativas */
.nx-auth-vitrine > * { position: relative; z-index: 1; }

.nx-auth-vitrine h2 {
    color: #fff; font-size: 1.875rem; max-width: 26ch;
    letter-spacing: -.02em; line-height: 1.2;
}
.nx-auth-vitrine p { color: #94a3b8; max-width: 44ch; line-height: 1.6; }
.nx-auth-lista { list-style: none; padding: 0; margin: 2rem 0 0; display: grid; gap: .875rem; }
.nx-auth-lista li {
    display: flex; gap: .75rem; align-items: flex-start;
    color: #cbd5e1; font-size: .875rem; line-height: 1.5;
}
/* Icone em pastilha: separa o item do texto e alinha a lista */
.nx-auth-lista .bi {
    color: var(--nx-primary); margin-top: 0;
    display: grid; place-items: center;
    width: 1.75rem; height: 1.75rem; flex: 0 0 1.75rem;
    border-radius: .5rem;
    background: color-mix(in srgb, var(--nx-primary) 14%, transparent);
    font-size: .875rem;
}

.nx-auth-form { display: flex; flex-direction: column; justify-content: center; padding: 2rem 1.25rem; }
.nx-auth-box { width: 100%; max-width: 400px; margin: 0 auto; }
/* Foco mais legivel nos campos do login */
.nx-auth-box .form-control:focus,
.nx-auth-box .form-check-input:focus {
    border-color: var(--nx-primary);
    box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--nx-primary) 20%, transparent);
}
/* Icone do input acompanha o campo em foco */
.nx-auth-box .input-group:focus-within .input-group-text { color: var(--nx-primary); }
.nx-auth-box .btn-primary { font-weight: 600; letter-spacing: .01em; }

/* Cartoes de selecao de empresa */
.nx-empresa-opcao {
    background: var(--nx-surface);
    border: 1px solid var(--nx-border) !important;
    border-radius: var(--nx-radius);
    color: inherit;
    transition: border-color var(--nx-transicao), background var(--nx-transicao), transform var(--nx-transicao);
}
.nx-empresa-opcao:hover { border-color: var(--nx-primary) !important; background: var(--nx-surface-2); }
.nx-empresa-opcao:focus-visible { outline: 2px solid var(--nx-primary); outline-offset: 2px; }
.nx-empresa-opcao.ativa { border-color: var(--nx-primary) !important; background: var(--nx-primary-soft); }

/* Utilitario: permite text-truncate dentro de flex */
.nx-min0 { min-width: 0; }

/* =====================================================================
   Builder (construtor de telas / SQL / dashboards)
   ===================================================================== */
.nx-builder { display: grid; gap: 1rem; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 1200px) { .nx-builder { grid-template-columns: 300px minmax(0, 1fr) 320px; } }

.nx-paleta-item {
    display: flex; align-items: center; gap: .5rem;
    padding: .5rem .625rem; margin-bottom: .375rem;
    border: 1px dashed var(--nx-border-forte);
    border-radius: var(--nx-radius-sm);
    background: var(--nx-surface-2);
    font-size: .8125rem; cursor: grab;
}
.nx-paleta-item:hover { border-color: var(--nx-primary); color: var(--nx-primary); }
.nx-paleta-item:active { cursor: grabbing; }

.nx-drop {
    min-height: 140px;
    border: 2px dashed var(--nx-border-forte);
    border-radius: var(--nx-radius);
    padding: .75rem;
    background: var(--nx-surface-2);
}
.nx-drop.sobre { border-color: var(--nx-primary); background: var(--nx-primary-soft); }

.nx-campo-item {
    display: flex; align-items: center; gap: .625rem;
    padding: .5rem .625rem; margin-bottom: .375rem;
    background: var(--nx-surface); border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-sm); font-size: .8125rem;
}
.nx-campo-item.selecionado { border-color: var(--nx-primary); box-shadow: 0 0 0 3px var(--nx-primary-soft); }
.nx-arrasta { cursor: grab; color: var(--nx-text-suave); }
.nx-arrasta:active { cursor: grabbing; }
.nx-arrastando { opacity: .45; }

.nx-editor-codigo {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: .8125rem; line-height: 1.65;
    background: var(--nx-surface-2); color: var(--nx-text);
    border: 1px solid var(--nx-border-forte); border-radius: var(--nx-radius-sm);
    padding: .75rem; tab-size: 2;
    min-height: 320px; width: 100%; resize: vertical;
    white-space: pre; overflow-wrap: normal; overflow-x: auto;
}
.nx-editor-codigo:focus { border-color: var(--nx-primary); box-shadow: 0 0 0 3px var(--nx-primary-soft); outline: none; }

.nx-tags-ajuda { display: flex; flex-wrap: wrap; gap: .3125rem; }
.nx-tag-ajuda {
    font-family: 'JetBrains Mono', monospace; font-size: .6875rem;
    background: var(--nx-surface-3); border: 1px solid var(--nx-border);
    color: var(--nx-primary); padding: .125rem .375rem; border-radius: 4px; cursor: pointer;
}
.nx-tag-ajuda:hover { background: var(--nx-primary-soft); border-color: var(--nx-primary); }

.nav-tabs { border-bottom-color: var(--nx-border); gap: .125rem; }
.nav-tabs .nav-link {
    border: 0; border-bottom: 2px solid transparent;
    color: var(--nx-text-muted); font-size: .8438rem; font-weight: 600;
    padding: .5rem .875rem; border-radius: 0;
}
.nav-tabs .nav-link:hover { color: var(--nx-text); border-bottom-color: var(--nx-border-forte); background: transparent; }
.nav-tabs .nav-link.active { color: var(--nx-primary); border-bottom-color: var(--nx-primary); background: transparent; }

.nav-pills .nav-link { color: var(--nx-text-muted); font-size: .8125rem; font-weight: 600; border-radius: var(--nx-radius-sm); padding: .375rem .75rem; }
.nav-pills .nav-link.active { background: var(--nx-primary); color: var(--nx-primary-contraste); }

/* Arvore de modulos (gerenciador) */
.nx-nivel { padding-left: calc(var(--nx-nivel, 0) * 1.5rem); }

.nx-arrastar { cursor: grab; user-select: none; }
.nx-arrastar:active { cursor: grabbing; }
tr.nx-arrastando { opacity: .4; }
tr[draggable="true"] { transition: background var(--nx-transicao); }

/* Sem cor propria: fundo suave + icone na cor primaria.
   Com cor propria (--nx-mod-cor): fundo solido + icone branco. */
.nx-mod-icone {
    flex: 0 0 auto;
    display: inline-flex; align-items: center; justify-content: center;
    width: 2rem; height: 2rem; border-radius: var(--nx-radius-sm);
    background: var(--nx-primary-soft);
    color: var(--nx-primary);
    font-size: .875rem;
}
.nx-mod-icone[style*="--nx-mod-cor"] {
    background: var(--nx-mod-cor);
    color: #fff;
}

.nx-pill-botao { border: 0; cursor: pointer; font: inherit; }
.nx-pill-botao:hover { filter: brightness(.94); }

/* Runtime: barra de filtros da lista generica */
.nx-filtros { padding: .875rem 1.125rem; }
.nx-filtros .form-label {
    font-size: .75rem; font-weight: 500;
    color: var(--nx-text-muted); margin-bottom: .25rem;
}

/* Cabecalho de coluna ordenavel */
.nx-ordenar {
    display: inline-flex; align-items: center; gap: .25rem;
    color: inherit; text-decoration: none;
}
.nx-ordenar:hover { color: var(--nx-primary); }
.nx-ordenar i { font-size: .625rem; opacity: .55; }
th[aria-sort] .nx-ordenar { color: var(--nx-primary); }
th[aria-sort] .nx-ordenar i { opacity: 1; }

/* Amostra de cor em celula de tabela */
.nx-amostra-cor {
    display: inline-block; width: .875rem; height: .875rem;
    margin-right: .375rem; vertical-align: -2px;
    border: 1px solid var(--nx-border-forte);
    border-radius: 3px;
    background: var(--nx-cor, transparent);
}

/* Utilitario de texto suave (o token existia, faltava a classe) */
.nx-text-suave { color: var(--nx-text-suave); }
/* Usada em varias views do construtor; a variavel ja existia, faltava a classe */
.nx-text-muted { color: var(--nx-text-muted); }

/* Indicador de etapas (fluxos de importacao em duas fases) */
.nx-passos {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    list-style: none;
    margin: 0;
    padding: 0;
}
.nx-passo {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem .875rem;
    border: 1px solid var(--nx-border);
    border-radius: 999px;
    background: var(--nx-surface);
    color: var(--nx-text-suave);
    font-size: .8125rem;
}
.nx-passo > span {
    display: grid;
    place-items: center;
    width: 1.375rem;
    height: 1.375rem;
    border-radius: 99px;
    background: var(--nx-surface-3);
    color: var(--nx-text-muted);
    font-size: .6875rem;
    font-weight: 700;
}
.nx-passo.ativo {
    border-color: var(--nx-primary);
    color: var(--nx-text);
}
.nx-passo.ativo > span {
    background: var(--nx-primary);
    color: var(--nx-primary-contraste);
}

/* Preserva quebras de linha de textarea sem permitir HTML */
.nx-quebra-linha { white-space: pre-wrap; word-break: break-word; }

/* Runtime: lista de definicoes do detalhe (label acima do valor) */
.nx-definicoes {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
    gap: .875rem 1.5rem;
    margin: 0;
}
.nx-definicao { min-width: 0; }
.nx-definicao dt {
    font-size: .6875rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .05em;
    color: var(--nx-text-suave);
    margin-bottom: .125rem;
}
.nx-definicao dd {
    margin: 0;
    color: var(--nx-text);
    word-break: break-word;
}

/* Titulo de agrupamento dentro de um card */
.nx-grupo-titulo {
    font-size: .8125rem;
    margin: 0;
    padding: .75rem 1.125rem .5rem;
    color: var(--nx-text-muted);
    display: flex; align-items: center; flex-wrap: wrap; gap: .25rem;
    border-bottom: 1px solid var(--nx-border);
    background: var(--nx-surface-2);
}

/* Barra de acoes fixa no rodape dos formularios longos */
.nx-acoes-fixas {
    position: sticky; bottom: 0; z-index: 10;
    display: flex; justify-content: flex-end; gap: .5rem;
    margin-top: 1rem;
    padding: .75rem 1.125rem;
    background: var(--nx-surface);
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius);
    box-shadow: var(--nx-sombra-md);
}

/* Linha de campo do construtor (lista ordenavel) */
.nx-campo-item {
    display: flex; align-items: center; gap: .75rem;
    padding: .625rem .875rem;
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-sm);
    background: var(--nx-surface-2);
    margin-bottom: .5rem;
    transition: border-color var(--nx-transicao), background var(--nx-transicao);
}
.nx-campo-item:hover { border-color: var(--nx-border-forte); }
.nx-campo-item.nx-arrastando { opacity: .45; }
.nx-campo-item.ativo { border-color: var(--nx-primary); background: var(--nx-primary-soft); }
.nx-campo-item[hidden] { display: none; }

.nx-campo-tipo {
    font-family: 'JetBrains Mono', ui-monospace, Consolas, monospace;
    font-size: .6875rem;
    color: var(--nx-text-muted);
}

/* Documentacao de tags ao lado do editor de HTML */
.nx-doc-tags { max-height: 26rem; overflow-y: auto; }
.nx-doc-tags h3 {
    font-size: .6875rem; text-transform: uppercase; letter-spacing: .05em;
    color: var(--nx-text-suave); margin: .875rem 0 .375rem;
}
.nx-doc-tags h3:first-child { margin-top: 0; }
.nx-doc-tag {
    display: block; width: 100%; text-align: left;
    border: 1px solid var(--nx-border); border-radius: var(--nx-radius-sm);
    background: var(--nx-surface-2); color: var(--nx-text);
    padding: .375rem .5rem; margin-bottom: .25rem; cursor: pointer;
}
.nx-doc-tag:hover { border-color: var(--nx-primary); background: var(--nx-primary-soft); }
.nx-doc-tag code {
    display: block; font-size: .6875rem; color: var(--nx-primary);
    white-space: pre-wrap; word-break: break-word;
}
.nx-doc-tag small { color: var(--nx-text-muted); font-size: .6875rem; }

/* Area de preview do HTML renderizado */
.nx-preview-area {
    border: 1px dashed var(--nx-border-forte);
    border-radius: var(--nx-radius-sm);
    padding: 1rem;
    background: var(--nx-surface-2);
    min-height: 8rem;
}

.nx-busca-inline { position: relative; }
.nx-busca-inline i {
    position: absolute; left: .625rem; top: 50%; transform: translateY(-50%);
    color: var(--nx-text-suave); font-size: .8125rem; pointer-events: none;
}
.nx-busca-inline .form-control { padding-left: 2rem; min-width: 13rem; }

/* Matriz de permissoes */
.nx-matriz { font-size: .8125rem; }
.nx-matriz th, .nx-matriz td { text-align: center; padding: .375rem .5rem !important; }
.nx-matriz th:first-child, .nx-matriz td:first-child { text-align: left; position: sticky; left: 0; background: var(--nx-surface); z-index: 3; min-width: 220px; }
.nx-matriz thead th { font-size: .625rem; }
.nx-matriz tbody tr:hover td:first-child { background: var(--nx-surface-2); }
.nx-matriz-grupo td { background: var(--nx-surface-3) !important; font-weight: 700; text-transform: uppercase; font-size: .6875rem; letter-spacing: .04em; }

/* Diff de auditoria */
.nx-diff { font-family: 'JetBrains Mono', monospace; font-size: .75rem; }
.nx-diff-de { background: rgba(220, 38, 38, .1); color: var(--nx-danger); padding: .0625rem .25rem; border-radius: 3px; }
.nx-diff-para { background: rgba(22, 163, 74, .1); color: var(--nx-success); padding: .0625rem .25rem; border-radius: 3px; }

/* Grid de dashboard */
.nx-grid-dash { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 1rem; }
.nx-widget { grid-column: span 12; min-width: 0; }
@media (min-width: 768px) {
    .nx-w-3 { grid-column: span 6; }
    .nx-w-4 { grid-column: span 6; }
    .nx-w-6 { grid-column: span 12; }
}
@media (min-width: 1200px) {
    .nx-w-2 { grid-column: span 2; }
    .nx-w-3 { grid-column: span 3; }
    .nx-w-4 { grid-column: span 4; }
    .nx-w-6 { grid-column: span 6; }
    .nx-w-8 { grid-column: span 8; }
    .nx-w-12 { grid-column: span 12; }
}

/* Corpo do widget: altura fixa vem inline (posicao.h) para o canvas do Chart.js
   ter um contexto de altura definido, senao o grafico cresce indefinidamente. */
.nx-widget-corpo { position: relative; min-width: 0; overflow: auto; }
.nx-widget-corpo > canvas,
.nx-widget-conteudo > canvas { max-width: 100%; }
.nx-widget-erro { display: flex; align-items: center; height: 100%; }

/* Utilitarios */
.nx-separador { height: 1px; background: var(--nx-border); border: 0; margin: 1rem 0; }
.nx-truncar { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nx-clicavel { cursor: pointer; }
.text-muted { color: var(--nx-text-muted) !important; }
.nx-carregando { position: relative; pointer-events: none; opacity: .6; }
.nx-skeleton {
    background: linear-gradient(90deg, var(--nx-surface-2) 25%, var(--nx-surface-3) 50%, var(--nx-surface-2) 75%);
    background-size: 200% 100%; border-radius: var(--nx-radius-sm);
    animation: nxSkeleton 1.3s infinite; height: 1rem;
}
@keyframes nxSkeleton { from { background-position: 200% 0; } to { background-position: -200% 0; } }

.modal-header, .modal-footer { border-color: var(--nx-border); }
.modal-header { padding: .875rem 1.125rem; }
.modal-title { font-size: .9375rem; }
.offcanvas-header { border-bottom: 1px solid var(--nx-border); }
.pagination { --bs-pagination-font-size: .8125rem; }
.page-link { background: var(--nx-surface); border-color: var(--nx-border); color: var(--nx-text); }
.page-link:hover { background: var(--nx-surface-3); border-color: var(--nx-border-forte); color: var(--nx-text); }
.page-item.active .page-link { background: var(--nx-primary); border-color: var(--nx-primary); color: var(--nx-primary-contraste); }
.page-item.disabled .page-link { background: var(--nx-surface-2); color: var(--nx-text-suave); border-color: var(--nx-border); }
.alert { border-radius: var(--nx-radius); font-size: .8438rem; border-width: 1px; }
.progress { background: var(--nx-surface-3); height: .5rem; border-radius: 99px; }
.progress-bar { background: var(--nx-primary); }

/* =====================================================================
   Central de Ajuda (documentacao interna)
   Indice fixo a esquerda + conteudo rolavel. Tudo com os tokens do tema,
   para acompanhar o modo claro/escuro sem regra extra.
   ===================================================================== */
.nx-ajuda {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
}
.nx-ajuda-indice {
    position: sticky;
    /* topo + abas + respiro, para nao passar por baixo da barra fixa */
    top: calc(var(--nx-topo-altura) + var(--nx-abas-altura) + 1rem);
    max-height: calc(100vh - var(--nx-topo-altura) - var(--nx-abas-altura) - 2rem);
    overflow-y: auto;
    background: var(--nx-surface);
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius);
    padding: .75rem;
}
.nx-ajuda-busca { margin-bottom: .5rem; }
.nx-ajuda-lista { list-style: none; margin: 0 0 .25rem; padding: 0; display: grid; gap: 2px; }
.nx-ajuda-link {
    display: flex; align-items: center; gap: .5rem;
    padding: .4375rem .5rem; border-radius: var(--nx-radius-sm);
    color: var(--nx-text-muted); text-decoration: none;
    font-size: .8125rem; line-height: 1.3;
    transition: var(--nx-transicao);
}
.nx-ajuda-link:hover { background: var(--nx-surface-3); color: var(--nx-text); }
.nx-ajuda-link.ativo {
    background: var(--nx-primary-soft); color: var(--nx-primary-dark); font-weight: 600;
}
.nx-ajuda-link i { flex: 0 0 auto; font-size: .875rem; }

.nx-ajuda-conteudo { padding: 0; overflow: hidden; }
.nx-ajuda-topico-cabecalho {
    display: flex; align-items: center; gap: .875rem;
    padding: 1.125rem 1.25rem;
    border-bottom: 1px solid var(--nx-border);
    background: var(--nx-surface-2);
}
.nx-ajuda-corpo { padding: 1.25rem; }
.nx-ajuda-corpo > :last-child { margin-bottom: 0; }
.nx-ajuda-lead { font-size: .9375rem; color: var(--nx-text-muted); line-height: 1.6; }
.nx-ajuda-corpo h3 {
    font-size: 1rem; font-weight: 650; margin: 1.75rem 0 .625rem;
    padding-top: 1rem; border-top: 1px solid var(--nx-border);
}
.nx-ajuda-corpo h3:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.nx-ajuda-corpo h4 { font-size: .875rem; font-weight: 650; margin: 1.125rem 0 .5rem; }
.nx-ajuda-corpo p,
.nx-ajuda-corpo li { font-size: .8438rem; line-height: 1.6; }

/* Passos numerados */
.nx-ajuda-passos { list-style: none; counter-reset: nxp; margin: 0 0 1rem; padding: 0; display: grid; gap: .75rem; }
.nx-ajuda-passos > li {
    counter-increment: nxp; position: relative;
    padding: .75rem .875rem .75rem 2.75rem;
    background: var(--nx-surface-2);
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-sm);
}
.nx-ajuda-passos > li::before {
    content: counter(nxp);
    position: absolute; left: .75rem; top: .75rem;
    width: 1.375rem; height: 1.375rem; border-radius: 50%;
    background: var(--nx-primary); color: var(--nx-primary-contraste);
    display: grid; place-items: center;
    font-size: .6875rem; font-weight: 700;
}

/* Bloco de codigo / caminho de menu */
.nx-codigo,
.nx-ajuda-codigo {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .8125rem;
}
.nx-codigo {
    background: var(--nx-surface-3); color: var(--nx-text);
    padding: .0625rem .375rem; border-radius: 4px;
    border: 1px solid var(--nx-border);
    white-space: nowrap;
}
.nx-ajuda-codigo {
    display: block; margin: 0 0 1rem;
    background: var(--nx-surface-3); color: var(--nx-text);
    border: 1px solid var(--nx-border); border-left: 3px solid var(--nx-primary);
    border-radius: var(--nx-radius-sm);
    padding: .75rem .875rem;
    overflow-x: auto; white-space: pre;
    line-height: 1.5; tab-size: 2;
}

/* Tabela de referencia */
.nx-ajuda-tabela { width: 100%; margin-bottom: 1rem; font-size: .8125rem; border-collapse: collapse; }
.nx-ajuda-tabela th,
.nx-ajuda-tabela td { padding: .5rem .625rem; border-bottom: 1px solid var(--nx-border); text-align: left; vertical-align: top; }
.nx-ajuda-tabela thead th {
    background: var(--nx-surface-2); color: var(--nx-text-muted);
    font-size: .6875rem; text-transform: uppercase; letter-spacing: .04em; font-weight: 650;
}
.nx-ajuda-tabela tbody tr:hover { background: var(--nx-surface-2); }
.nx-ajuda-tabela code { font-size: .75rem; color: var(--nx-primary-dark); }

/* Lista de conceitos (termo + definicao) */
.nx-ajuda-dl { margin: 0 0 1rem; display: grid; gap: .625rem; }
.nx-ajuda-dl dt { font-size: .8438rem; font-weight: 650; color: var(--nx-text); }
.nx-ajuda-dl dd { margin: .125rem 0 0; font-size: .8125rem; color: var(--nx-text-muted); line-height: 1.55; }

.nx-ajuda-conceito {
    display: grid; gap: .75rem; margin-bottom: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.nx-ajuda-conceito > div {
    background: var(--nx-surface-2); border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-sm); padding: .75rem .875rem;
}

/* Avisos / alertas de conteudo */
.nx-ajuda-aviso,
.nx-alerta-info, .nx-alerta-aviso, .nx-alerta-sucesso {
    display: flex; gap: .625rem; align-items: flex-start;
    padding: .75rem .875rem; margin-bottom: 1rem;
    border-radius: var(--nx-radius-sm);
    border: 1px solid var(--nx-border);
    border-left-width: 3px;
    background: var(--nx-surface-2);
    font-size: .8125rem; line-height: 1.55;
}
.nx-ajuda-aviso > i,
.nx-alerta-info > i, .nx-alerta-aviso > i, .nx-alerta-sucesso > i { flex: 0 0 auto; margin-top: .0625rem; }
.nx-ajuda-aviso p:last-child,
.nx-alerta-info p:last-child, .nx-alerta-aviso p:last-child, .nx-alerta-sucesso p:last-child { margin-bottom: 0; }

.nx-alerta-info  { border-left-color: var(--nx-info); }
.nx-alerta-info > i { color: var(--nx-info); }
.nx-ajuda-aviso, .nx-alerta-aviso { border-left-color: var(--nx-warning); }
.nx-ajuda-aviso > i, .nx-alerta-aviso > i { color: var(--nx-warning); }
.nx-alerta-sucesso { border-left-color: var(--nx-success); }
.nx-alerta-sucesso > i { color: var(--nx-success); }
.nx-ajuda-aviso--perigo { border-left-color: var(--nx-danger); }
.nx-ajuda-aviso--perigo > i { color: var(--nx-danger); }

.nx-ajuda-navegacao {
    display: flex; align-items: center; justify-content: space-between; gap: .75rem;
    padding: .875rem 1.25rem;
    border-top: 1px solid var(--nx-border);
    background: var(--nx-surface-2);
}
.nx-ajuda-navegacao .btn { font-size: .8125rem; max-width: 48%; }
.nx-ajuda-navegacao .btn span,
.nx-ajuda-navegacao .btn { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Empilha o indice acima do conteudo no mobile */
@media (max-width: 991.98px) {
    .nx-ajuda { grid-template-columns: minmax(0, 1fr); }
    .nx-ajuda-indice { position: static; max-height: none; }
}

/* =====================================================================
   Kanban (runtime das telas tipo="kanban")
   Colunas em faixa horizontal rolavel; cada cartao e um registro.
   ===================================================================== */
.nx-kanban {
    display: flex;
    gap: .875rem;
    /* stretch: colunas com a mesma altura independente do numero de cartoes,
       para o quadro nao ficar em "escadinha" */
    align-items: stretch;
    overflow-x: auto;
    padding-bottom: .75rem;
    scroll-snap-type: x proximity;
}

.nx-kanban-coluna {
    display: flex;
    flex-direction: column;
    gap: .625rem;
    flex: 0 0 clamp(15rem, 78vw, 19rem);
    max-height: calc(100vh - 15rem);
    padding: .75rem;
    background: var(--nx-surface-2);
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius);
    scroll-snap-align: start;
}

.nx-kanban-cabecalho {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
}
.nx-kanban-titulo {
    margin: 0;
    font-size: .8125rem;
    font-weight: 600;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--nx-text-muted);
}
.nx-kanban-soma {
    margin: 0;
    font-size: .75rem;
    color: var(--nx-text-muted);
}

.nx-kanban-lista {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    margin: 0;
    padding: 0;
    list-style: none;
    overflow-y: auto;
    /* Ocupa a sobra da coluna: a area de soltar cobre o espaco vazio todo */
    flex: 1 1 auto;
    min-height: 3.5rem;
    border-radius: var(--nx-radius-sm);
    outline: 2px dashed transparent;
    outline-offset: 2px;
    transition: background var(--nx-transicao), outline-color var(--nx-transicao);
}
/* Coluna sob o cursor durante o arraste */
.nx-kanban-lista.nx-kanban-alvo {
    background: var(--nx-primary-soft);
    outline-color: var(--nx-primary);
}

.nx-kanban-cartao {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    /* Cada cartao ocupa so a sua altura de conteudo */
    flex: 0 0 auto;
    padding: .6875rem .75rem;
    background: var(--nx-surface);
    border: 1px solid var(--nx-border);
    border-left: 3px solid var(--nx-primary);
    border-radius: var(--nx-radius-sm);
    box-shadow: var(--nx-sombra);
}
.nx-kanban-cartao[draggable="true"] { cursor: grab; }
.nx-kanban-cartao.nx-kanban-arrastando { opacity: .45; cursor: grabbing; }
/* Enquanto o servidor confirma a troca de etapa */
.nx-kanban-cartao.nx-kanban-salvando { opacity: .6; pointer-events: none; }

.nx-kanban-cartao-titulo {
    font-weight: 600;
    font-size: .875rem;
    line-height: 1.4;
    color: var(--nx-text);
    text-decoration: none;
    overflow-wrap: anywhere;
}
.nx-kanban-cartao-titulo:hover,
.nx-kanban-cartao-titulo:focus-visible { color: var(--nx-primary); text-decoration: underline; }

.nx-kanban-meta {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: .125rem .5rem;
    margin: 0;
    font-size: .75rem;
    line-height: 1.5;
}
.nx-kanban-meta dt { color: var(--nx-text-suave); font-weight: 500; }
.nx-kanban-meta dd { margin: 0; color: var(--nx-text-muted); overflow-wrap: anywhere; }

.nx-kanban-cartao-rodape {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    padding-top: .375rem;
    border-top: 1px solid var(--nx-border);
    font-size: .75rem;
}
.nx-kanban-valor { font-weight: 600; color: var(--nx-success); }
.nx-kanban-seletor { max-width: 9.5rem; font-size: .75rem; }

.nx-kanban-vazio {
    margin: 0;
    padding: .5rem .25rem;
    font-size: .75rem;
    color: var(--nx-text-suave);
}

/* =====================================================================
   Identidade visual - previa da marca em tempo real
   ===================================================================== */

/* A previa acompanha a rolagem enquanto os campos sao ajustados ao lado */
.nx-preview-sticky { position: sticky; top: 1rem; }

/* Escopo da amostra. As 4 variaveis vem inline no elemento:
   --nx-p / --nx-s   = cores da marca (primaria e secundaria)
   --nx-pc / --nx-sc = cor de TEXTO sobre cada uma, calculada por contraste.
   Sem as de contraste, uma marca amarela recebia texto branco e a amostra
   ficava ilegivel - o mesmo defeito do preview antigo, que usava #fff fixo.
   Os fallbacks cobrem o instante anterior ao JS assumir. */
.nx-preview-tema {
    --nx-preview-sombra: 0 1px 2px rgba(15, 23, 42, .08);
    --nx-preview-radius: .375rem;
}

/* Sombra e arredondamento ao vivo: o JS apenas troca data-sombra/data-radius
   no elemento e o CSS resolve o resto. Assim a amostra nao depende de o JS
   conhecer os valores exatos - eles ficam em um lugar so, aqui. */
.nx-preview-tema[data-sombra="nenhuma"]   { --nx-preview-sombra: none; }
.nx-preview-tema[data-sombra="discreta"]  { --nx-preview-sombra: 0 1px 2px rgba(15, 23, 42, .08); }
.nx-preview-tema[data-sombra="media"]     { --nx-preview-sombra: 0 6px 12px -2px rgba(15, 23, 42, .12); }
.nx-preview-tema[data-sombra="destacada"] { --nx-preview-sombra: 0 10px 20px -4px rgba(15, 23, 42, .18); }

.nx-preview-tema[data-radius="reto"]    { --nx-preview-radius: 0; }
.nx-preview-tema[data-radius="suave"]   { --nx-preview-radius: .25rem; }
.nx-preview-tema[data-radius="medio"]   { --nx-preview-radius: .375rem; }
.nx-preview-tema[data-radius="redondo"] { --nx-preview-radius: .625rem; }
.nx-preview-tema[data-radius="pilula"]  { --nx-preview-radius: .875rem; }

.nx-preview-card {
    padding: .875rem;
    background: var(--nx-surface);
    border: 1px solid var(--nx-border);
    /* Herdam do escopo acima: e assim que os seletores de sombra e de
       arredondamento mudam a amostra sem recarregar a pagina. */
    border-radius: var(--nx-preview-radius);
    box-shadow: var(--nx-preview-sombra);
}

/* Quadrado com as iniciais (ou o logo) usando a cor da marca */
.nx-preview-marca {
    display: grid; place-items: center;
    width: 2rem; height: 2rem; flex: 0 0 2rem;
    border-radius: var(--nx-radius-sm); overflow: hidden;
    background: var(--nx-p, #2563eb);
    color: var(--nx-pc, #ffffff);
    font-size: .6875rem; font-weight: 700; line-height: 1;
}

/* Botoes da amostra sobrescrevem o .btn do Bootstrap de proposito, para
   refletirem a marca em vez do azul padrao. */
.nx-preview-btn,
.nx-preview-btn:hover,
.nx-preview-btn:focus {
    background: var(--nx-p, #2563eb);
    color: var(--nx-pc, #ffffff);
    border: 0;
    border-radius: var(--nx-preview-radius);
    font-weight: 600;
}
/* A cor SECUNDARIA aparece aqui. Antes ela era aplicada como hover da
   primaria, o que deixava um botao azul com hover verde. */
.nx-preview-btn-suave,
.nx-preview-btn-suave:hover,
.nx-preview-btn-suave:focus {
    background: var(--nx-s, #16a34a);
    color: var(--nx-sc, #ffffff);
    border: 0;
    border-radius: var(--nx-preview-radius);
    font-weight: 600;
}
.nx-preview-pill {
    display: inline-flex; align-items: center;
    padding: .1875rem .625rem;
    border-radius: 999px;
    background: var(--nx-s, #16a34a);
    color: var(--nx-sc, #ffffff);
    font-size: .6875rem; font-weight: 600;
}
/* Preenchimento da barra de progresso do Bootstrap (.progress > .progress-bar) */
.nx-preview-barra { background-color: var(--nx-p, #2563eb); }

.nx-preview-tabela th { color: var(--nx-p, #2563eb); }

/* Fundo claro atras de logo/favicon enviados: a maioria e PNG transparente
   com traco escuro, que desaparece no painel escuro. */
.nx-thumb-clara { background: #f1f5f9; padding: .25rem; }
/* Amostra da imagem de fundo: recorta sem distorcer */
.nx-thumb-cover { width: 100%; height: 5rem; object-fit: cover; }

@media (prefers-reduced-motion: reduce) {
    .nx-kanban-lista { transition: none; }
}

/* ==========================================================================
   Trilha de etapas (construtor de modulos)
   Mostra Cadastro -> Campos -> Quem acessa -> Pronto e onde voce esta.
   ========================================================================== */
.nx-trilha ol { list-style: none; }

.nx-trilha-item {
    flex: 1 1 10rem;
    min-width: 0; /* deixa o texto truncar em vez de esticar o item */
}

.nx-trilha-alvo {
    display: flex;
    align-items: center;
    gap: .625rem;
    height: 100%;
    padding: .625rem .75rem;
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius);
    background: var(--nx-surface);
    color: var(--nx-text-muted);
    text-decoration: none;
    transition: border-color var(--nx-transicao), background var(--nx-transicao);
}

a.nx-trilha-alvo:hover {
    border-color: var(--nx-border-forte);
    background: var(--nx-surface-2);
    color: var(--nx-text);
}

.nx-trilha-num {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 1.625rem;
    height: 1.625rem;
    border-radius: 50%;
    background: var(--nx-surface-3);
    color: var(--nx-text-muted);
    font-size: .8125rem;
    font-weight: 600;
    line-height: 1;
}

/* Etapa atual: destaque com a cor primaria */
.nx-trilha-atual > .nx-trilha-alvo {
    border-color: var(--nx-primary);
    background: var(--nx-primary-soft);
    color: var(--nx-text);
}
.nx-trilha-atual .nx-trilha-num {
    background: var(--nx-primary);
    color: var(--nx-primary-contraste);
}

/* Etapa concluida: verde discreto, sem competir com a atual */
.nx-trilha-feita .nx-trilha-num {
    background: var(--nx-success);
    color: #fff;
}

@media (max-width: 575.98px) {
    /* No celular a trilha viraria uma pilha alta demais: mantem so os numeros */
    .nx-trilha-item { flex: 0 0 auto; }
    .nx-trilha-alvo .nx-min0 { display: none; }
}

@media print {
    .nx-sidebar, .nx-topo, .nx-abas, .nx-toasts, .btn, .nx-acoes-linha { display: none !important; }
    /* Kanban: empilha as colunas para caber no papel */
    .nx-kanban { display: block !important; overflow: visible !important; }
    .nx-kanban-coluna { max-height: none !important; page-break-inside: avoid; margin-bottom: 1rem; }
    .nx-kanban-lista { overflow: visible !important; }
    .nx-kanban-seletor { display: none !important; }
    .nx-conteudo { margin-left: 0 !important; }
    body { background: #fff; color: #000; }
    /* Ajuda: imprime so o conteudo, sem o indice lateral */
    .nx-ajuda-indice, .nx-ajuda-navegacao { display: none !important; }
    .nx-ajuda { grid-template-columns: 1fr !important; }
}