/* ═══════════════════════════════════════════════════════════════════════════
   nucleo/ui — a pele comum dos sistemas BUK/NH
   ═══════════════════════════════════════════════════════════════════════════

   ESTE ARQUIVO É A ÚNICA CÓPIA. Ele mora na biblioteca `nh-nucleo` e é servido
   pelos apps em /nucleo-ui/ui.css. Um produto novo declara seus MODULOS e ganha
   a mesma barra, a mesma marca e o mesmo comportamento de celular de graça.

   O que ele NÃO faz, de propósito: não estiliza o miolo das telas. Cada produto
   continua dono do seu conteúdo — aqui está a moldura (topo, marca, módulos,
   abas, gaveta de celular, tabela→card) e o vocabulário de cores. Invadir o
   miolo faria com que mexer na barra quebrasse um relatório em outro produto.

   ── ÍNDICE ────────────────────────────────────────────────────────────────
    1. Vocabulário (cores, sombras, medidas)
    2. Base do documento e a BARRA DE ROLAGEM SEMPRE PRESENTE
    3. Barra 1 — identidade: marca, sistema, empresa, ambiente, pessoa
    4. Barra 2 — módulos do sistema atual
    4b. Trilha — o caminho até a página atual, abaixo da Barra 2
    5. Abas internas (a terceira camada, dentro da página)
    5b. Grade — o menu de módulo, em azulejos
    6. Gaveta de celular
    7. Peças compartilhadas (selo, pílula, botão de ícone, cartão)
    8. Tabela → card (o padrão tabela-título-conteúdo, agora do núcleo)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. VOCABULÁRIO ─────────────────────────────────────────────────────────
   Os nomes repetem os que o Controle e o Portal já usavam, para que adotar o
   núcleo não obrigue a reescrever o CSS de cada produto. Onde os dois divergiam
   (--linha/--line, --suave/--muted), ambos os nomes existem e apontam para a
   mesma cor: um alias custa uma linha, uma migração custa um dia. */
:root {
    --nu-teal: #0B4C5F;
    --nu-teal-2: #0f6277;
    --nu-teal-3: #14788f;
    --nu-teal-claro: #7fb3c1;
    --nu-teal-fundo: #eaf1f4;

    /* ── O TEAL COMO TINTA, SEPARADO DO TEAL COMO FUNDO (21/08/2026) ──────────
       Eram a mesma variável, e no claro isso nunca incomodou: #0B4C5F lê-se bem
       sobre papel branco e serve de fundo com texto branco por cima. No papel
       ESCURO os dois papéis se separam — medido na Base ao ligar o tema: título,
       nome de azulejo e ficha de filtro saíam com contraste 1,4:1, ou seja,
       invisíveis. O fundo continua sendo a cor da marca; a TINTA clareia.
       `-f` é a variante de ênfase (hover, item ativo). */
    --nu-teal-tinta: var(--nu-teal);
    --nu-teal-tinta-f: var(--nu-teal-2);
    --nu-laranja: #f39c12;
    --nu-laranja-2: #e08e0b;
    --nu-laranja-fraco: #fdf3e0;

    --nu-fundo: #eef2f4;
    --nu-branco: #ffffff;
    --nu-tinta: #1f2d33;
    --nu-suave: #7c8b91;
    --nu-linha: #e3e9ec;

    --nu-pos: #12805c;
    --nu-neg: #c0392b;
    --nu-aviso: #8a5108;

    --nu-sombra: 0 1px 3px rgba(11, 76, 95, .10), 0 6px 18px rgba(11, 76, 95, .06);
    --nu-sombra-alta: 0 8px 28px rgba(11, 76, 95, .18), 0 2px 6px rgba(11, 76, 95, .10);
    --nu-raio: 9px;
    --nu-raio-p: 6px;

    /* ── A FONTE DA CASA, NUMA VARIÁVEL (21/08/2026) ─────────────────────────
       Cada produto declara o próprio `body { font-family }` — é o contrato desta
       folha, e é o que permite ao produto sobrescrever a moldura sem
       `!important`. Só que isso fazia a troca de tipografia perder para CINCO
       arquivos ao mesmo tempo: medido no dia, o `portal.css` (carregado DEPOIS
       do núcleo, de propósito) devolvia o corpo à pilha do sistema e a Plex só
       pegava na barra.
       A saída não é vencer por especificidade — seria uma regra escondida
       brigando com outra. É a pilha morar num lugar só e cada produto
       REFERENCIAR: `font-family: var(--nu-fonte, <a pilha antiga>)`. Quem quiser
       divergir continua podendo, e agora tem de dizer isso explicitamente. */
    --nu-fonte: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    --nu-fonte-num: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

    --nu-barra1-h: 54px;
    --nu-barra2-h: 42px;

    /* A pilha de camadas escrita em um lugar só. Barra 2 abaixo da Barra 1 (ela
       rola para fora e a de cima permanece), gaveta acima das duas, e o véu da
       gaveta logo abaixo dela. Números soltos em cada arquivo foi como o menu
       do celular passou a abrir ATRÁS do conteúdo em telas com tabela sticky. */
    --nu-z-barra2: 30;
    --nu-z-barra1: 40;
    --nu-z-veu: 50;
    --nu-z-gaveta: 60;
}

/* ── 2. BASE E BARRA DE ROLAGEM ─────────────────────────────────────────────

   ⚠ `overflow-y: scroll` no <html> é DELIBERADO e pedido: a barra de rolagem
   vertical fica sempre presente, mesmo em página curta. Sem isso, navegar entre
   uma tela alta e uma tela baixa faz o conteúdo inteiro saltar ~15px de lado no
   instante em que a barra aparece ou some — o layout "pula" a cada clique de
   menu. Reservar o espaço custa uma faixa cinza e elimina o salto.

   `scrollbar-gutter: stable` faz o mesmo pela via moderna e vale para os painéis
   internos que rolam sozinhos; os dois convivem sem conflito. */
html {
    overflow-y: scroll;
    scrollbar-gutter: stable;
    -webkit-text-size-adjust: 100%;
}

/* A barra ganha a paleta da casa em vez do cinza do sistema. Firefox usa as duas
   linhas `scrollbar-*`; os demais usam os pseudo-elementos ::-webkit-*. */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--nu-teal-claro) var(--nu-teal-fundo);
}

::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--nu-teal-fundo); }
::-webkit-scrollbar-thumb {
    background: var(--nu-teal-claro);
    border-radius: 7px;
    /* A borda da mesma cor do trilho é o que "afina" o polegar sem torná-lo
       difícil de agarrar: a área clicável continua com os 12px inteiros. */
    border: 3px solid var(--nu-teal-fundo);
}
::-webkit-scrollbar-thumb:hover { background: var(--nu-teal-2); }
::-webkit-scrollbar-corner { background: var(--nu-teal-fundo); }

/* ── A TIPOGRAFIA (21/08/2026) ──────────────────────────────────────────────
   Aprovada pelo usuário na prancheta de reformulação, e aplicada AQUI de
   propósito: esta folha é a única cópia da moldura do ecossistema, então uma
   troca neste arquivo alcança Licita, Controle, Emissor, Previdência, RDO e
   Portal ao mesmo tempo. Fazer produto a produto daria seis datas diferentes.

   IBM Plex Sans no lugar da pilha do sistema operacional. Ela foi desenhada
   para interface densa de dado, tem diacríticos sólidos em português e uma
   família mono irmã — que é o que resolve o outro metade do problema, abaixo.

   ⚠ A PILHA DO SISTEMA FICA COMO ALTERNATIVA, e não é formalidade: a fonte vem
   do Google Fonts, e o Google Fonts é o ÚNICO host externo que o CSP dos
   ambientes do ecossistema admite. Numa rede que o bloqueie, a tela cai na
   pilha de antes em vez de cair num serifado do navegador. */
body {
    margin: 0;
    background: var(--nu-fundo);
    color: var(--nu-tinta);
    font-family: var(--nu-fonte);
    /* A DENSIDADE, por variável — ver a seção 9. A reserva é o valor de sempre,
       e `confortavel` (o padrão) vale exatamente estes dois números. */
    font-size: var(--nu-fs, 14px);
    line-height: var(--nu-lh, 1.5);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ── NÚMERO É TABULAR, SEMPRE ────────────────────────────────────────────────
   Numeral de largura variável é o motivo de um balancete parecer torto sem que
   ninguém saiba dizer por quê: a coluna de valores desalinha dígito a dígito, e
   o olho perde a régua na vertical.

   `.nu_num` já existia para a célula numérica da tabela; o que muda é o alcance.
   Todo lugar onde a plataforma escreve DINHEIRO, DATA, CNPJ, CHAVE DE ACESSO ou
   CONTA CONTÁBIL entra aqui — e `font-variant-numeric` sozinho não basta, porque
   ele alinha os dígitos mas não os separa do texto ao redor. A mono irmã da Plex
   faz as duas coisas. */
.nu_num, .nu_mono, .mono,
input[inputmode="numeric"], input[type="date"] {
    font-family: var(--nu-fonte-num);
    font-variant-numeric: tabular-nums;
}

/* Um fio de teal→laranja no alto de tudo. É o único ornamento puramente
   decorativo do arquivo, e existe porque a marca da casa são essas duas cores
   juntas — a barra sozinha mostra só uma delas. */
.nu_fio {
    height: 3px;
    background: linear-gradient(90deg, var(--nu-teal) 0%, var(--nu-teal-3) 45%, var(--nu-laranja) 100%);
}

/* ── 3. BARRA 1 — QUEM É VOCÊ, ONDE ESTÁ, EM QUE EMPRESA ────────────────────
   Ela não muda de sistema para sistema: marca, seletor de sistema, seletor de
   empresa, selo de ambiente, pessoa. É a barra que responde "onde eu estou", e
   por isso é a que nunca some. */
.nu_barra1 {
    position: sticky;
    top: 0;
    z-index: var(--nu-z-barra1);
    display: flex;
    align-items: center;
    gap: 14px;
    height: var(--nu-barra1-h);
    padding: 0 18px;
    background: linear-gradient(180deg, var(--nu-teal-2) 0%, var(--nu-teal) 100%);
    color: #fff;
    box-shadow: var(--nu-sombra);
}

.nu_barra1 a { color: #fff; text-decoration: none; }

.nu_marca_link {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
    padding: 4px 2px;
    border-radius: var(--nu-raio-p);
}
.nu_marca_link:hover { opacity: .88; }
.nu_marca { display: block; }
.nu_sigla { display: block; }

/* O nome do sistema encostado na marca, separado por um fio vertical. Ele é
   informação de contexto, não parte da marca — daí o peso menor e o fio. */
.nu_produto {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .3px;
    padding-left: 11px;
    border-left: 1px solid rgba(255, 255, 255, .28);
    white-space: nowrap;
}

.nu_espaco { flex: 1 1 auto; }

/* Seletor de sistema e de empresa: dois controles com a mesma cara, porque
   respondem à mesma pergunta ("em que contexto estou trabalhando"). */
.nu_seletor {
    position: relative;
    flex: 0 1 auto;
    min-width: 0;
}
.nu_seletor_btn {
    display: flex;
    align-items: center;
    gap: 8px;
    /* Uma regra só para toda largura de tela, em vez de um valor fixo no
       desktop e uma fração de viewport no celular — as duas versões
       divergiam e no celular a fração podia crescer mais do que a marca
       (sigla) e o ☰ deixavam sobrar. `100vw - 190px` reserva o espaço fixo
       da barra (sigla + ☰ + preenchimento + vãos) e nunca cresce além
       disso; `260px` só entra em jogo quando sobra espaço de verdade. */
    max-width: min(260px, calc(100vw - 190px));
    padding: 6px 10px;
    font: inherit;
    font-size: 13px;
    color: #fff;
    background: rgba(255, 255, 255, .10);
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: var(--nu-raio-p);
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
}
.nu_seletor_btn:hover { background: rgba(255, 255, 255, .18); }
.nu_seletor_btn .nu_rot {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .6px;
    opacity: .72;
}
.nu_seletor_btn .nu_val {
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 600;
}
.nu_seletor_btn .nu_seta { opacity: .7; font-size: 10px; }

.nu_menu {
    position: absolute;
    top: calc(100% + 7px);
    right: 0;
    min-width: 250px;
    max-height: 70vh;
    overflow-y: auto;
    padding: 6px;
    background: var(--nu-branco);
    color: var(--nu-tinta);
    border: 1px solid var(--nu-linha);
    border-radius: var(--nu-raio);
    box-shadow: var(--nu-sombra-alta);
    /* `[hidden]` sozinho perde para o `display:flex`/`grid` de qualquer regra
       posterior — foi assim que um painel "escondido" apareceu no Estabilidade.
       A regra explícita abaixo fecha esse buraco. */
    display: block;
}
.nu_menu[hidden] { display: none; }
.nu_menu_titulo {
    padding: 7px 10px 4px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .7px;
    text-transform: uppercase;
    color: var(--nu-suave);
}
.nu_menu a, .nu_menu button {
    display: flex;
    align-items: baseline;
    gap: 8px;
    width: 100%;
    padding: 8px 10px;
    font: inherit;
    font-size: 13.5px;
    color: var(--nu-tinta);
    text-align: left;
    text-decoration: none;
    background: none;
    border: 0;
    border-radius: var(--nu-raio-p);
    cursor: pointer;
}
.nu_menu a:hover, .nu_menu button:hover { background: var(--nu-teal-fundo); }
.nu_menu a.nu_atual { background: var(--nu-teal-fundo); font-weight: 600; }
.nu_menu .nu_sub { color: var(--nu-suave); font-size: 11.5px; }
.nu_menu form { margin: 0; }
.nu_menu hr { margin: 5px 8px; border: 0; border-top: 1px solid var(--nu-linha); }

/* Contador vivo dentro do menu de sistemas — o mesmo número que o Hub mostra no
   cartão. Zero não vira pílula: pílula com "0" é ruído que ensina a ignorar. */
.nu_conta {
    margin-left: auto;
    min-width: 20px;
    padding: 1px 7px;
    font-size: 11px;
    font-weight: 700;
    text-align: center;
    color: #fff;
    background: var(--nu-laranja);
    border-radius: 10px;
}
.nu_conta.nu_calmo { background: var(--nu-teal-claro); }

/* Selo de ambiente. ⚠ Homologação é FAIXA, não etiqueta: emitir na série errada
   custa um número de nota que só a inutilização resolve, e um <span> discreto no
   canto já provou não ser suficiente para impedir isso. */
/* ⚠ `.nu_ambiente` (a pílula da Barra 1) SAIU — o ambiente deixou de morar na
   barra e passou a ser desenhado pela página que age contra o Fisco ou o banco.
   Ver `.nu_amb`, mais abaixo, e a nota em `faixaAmbiente()`, no index.js. */

/* ── O AMBIENTE, DENTRO DA PÁGINA ───────────────────────────────────────────
   Era uma faixa colada na Barra 1, em toda tela (`.nu_faixa_homolog`). Agora
   quem desenha é a página que AGE contra o Fisco ou o banco, e por isso ela
   mora no fluxo do conteúdo: cantos arredondados e margem embaixo, como
   qualquer bloco do miolo. A de homologação continua listrada e larga — o
   custo de confundir os ambientes não é simétrico. A de produção é sóbria:
   afirma, não alarma. */
.nu_amb {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
    padding: 9px 14px;
    margin: 0 0 16px;
    border-radius: 10px;
    font-size: 12.5px;
    line-height: 1.45;
}
.nu_amb b { text-transform: uppercase; letter-spacing: .5px; flex: 0 0 auto; }
.nu_amb_homolog {
    font-weight: 600;
    color: #4a2f00;
    background: repeating-linear-gradient(135deg,
        var(--nu-laranja) 0 14px, var(--nu-laranja-2) 14px 28px);
}
.nu_amb_producao {
    color: var(--nu-teal-tinta);
    background: var(--nu-teal-fundo);
    border: 1px solid var(--nu-linha);
}
.nu_amb_producao b { color: var(--nu-teal-tinta-f); }

.nu_pessoa {
    display: flex;
    align-items: center;
    gap: 9px;
    flex: 0 0 auto;
    font-size: 12.5px;
}
/* A versão anda com o nome do sistema: mesmo bloco, peso menor. */
.nu_produto .nu_ver {
    font-style: normal;
    font-weight: 400;
    font-size: 11px;
    opacity: .6;
    letter-spacing: 0;
}
/* ⚠ `.nu_base` (o botão de casa da Barra 1) SAIU — a trilha já leva à Base no
   primeiro degrau, e dois botões para o mesmo destino, em cantos opostos, é uma
   escolha que não existe. Ver a nota em `topo()`, no index.js. */
.nu_pessoa form { margin: 0; }
.nu_sair {
    padding: 5px 12px;
    font: inherit;
    font-size: 12.5px;
    color: #fff;
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .3);
    border-radius: var(--nu-raio-p);
    cursor: pointer;
    text-decoration: none;
}
.nu_sair:hover { background: rgba(255, 255, 255, .22); }

/* O BOTÃO DE OPÇÕES — as três linhas que abrem ZAP TI e Sair. Mesma caixa do
   botão de casa (34×34) porque são vizinhos: dois quadrados de alturas
   diferentes na mesma barra leem como desalinho, não como hierarquia. */
.nu_opcoes { flex: 0 0 auto; }
.nu_opc_btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    color: #fff;
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .3);
    border-radius: var(--nu-raio-p);
    cursor: pointer;
}
.nu_opc_btn:hover { background: rgba(255, 255, 255, .22); }
/* O menu é estreito: são dois itens curtos, e os 250px do seletor de empresa
   deixariam metade da caixa vazia. */
#nu_menu_opc { min-width: 170px; }

/* ── 4. BARRA 2 — OS MÓDULOS DO SISTEMA ATUAL ───────────────────────────────
   Nunca mais que 6 itens. Se um produto precisar do sétimo, o certo é rever a
   divisão dos módulos, não alargar a barra: a barra plana de quinze links é
   justamente o que esta camada existe para não repetir. */
.nu_barra2 {
    position: sticky;
    top: var(--nu-barra1-h);
    z-index: var(--nu-z-barra2);
    display: flex;
    align-items: stretch;
    gap: 2px;
    height: var(--nu-barra2-h);
    padding: 0 12px;
    background: var(--nu-branco);
    border-bottom: 1px solid var(--nu-linha);
    box-shadow: 0 1px 2px rgba(11, 76, 95, .05);
    overflow-x: auto;
    /* A barra rola de lado no aperto, mas nunca mostra rolagem horizontal: uma
       barra de menu com scrollbar visível parece defeito. */
    scrollbar-width: none;
}
.nu_barra2::-webkit-scrollbar { display: none; }

.nu_mod {
    display: flex;
    align-items: center;
    padding: 0 14px;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--nu-suave);
    text-decoration: none;
    white-space: nowrap;
    border-bottom: 3px solid transparent;
    /* A transição é só da cor e da borda. Animar `padding` ou `font-weight` faz
       os vizinhos deslizarem quando o mouse passa, e a barra inteira "respira". */
    transition: color .12s ease, border-color .12s ease, background .12s ease;
}

/* ── O ITEM ATIVO NÃO MEXE NA FONTE (26/08/2026, decisão do usuário) ────────
   Ele era `font-weight: 700` sobre um inativo de 500. Negrito é MAIS LARGO, e
   por isso clicar num item aumentava a largura dele e empurrava os vizinhos
   alguns pixels para o lado: a barra andava a cada clique.

   A regra passou a ser a dos submenus, que é onde ela já funcionava: **o estado
   ativo se diz por COR e pelo SUBLINHADO da célula, e por mais nada**. Fonte,
   peso, tamanho, espaçamento e caixa ficam exatamente iguais nos dois estados —
   então não há o que reposicionar, e não é preciso reservar largura nenhuma
   (a versão anterior deste conserto pendurava um rótulo fantasma em 700 em cada
   item só para guardar o espaço do negrito; sem negrito, o fantasma some junto).

   ⚠ QUEM MEXER AQUI: qualquer propriedade que altere a MÉTRICA do texto ou da
   célula no estado ativo — `font-weight`, `font-size`, `letter-spacing`,
   `padding`, `border-width` — devolve o defeito. A borda de baixo já existe em
   `transparent` no estado normal justamente por isso: o que muda é a COR dela,
   nunca a espessura. */
.nu_mod:hover { color: var(--nu-teal-tinta); background: var(--nu-teal-fundo); }
.nu_mod.nu_ativo {
    color: var(--nu-teal-tinta);
    border-bottom-color: var(--nu-laranja);
}
.nu_barra2_fim { margin-left: auto; display: flex; align-items: stretch; gap: 2px; }
.nu_barra2_fim .nu_mod { font-size: 12.5px; }

/* ── 4b. TRILHA — O CAMINHO ATÉ AQUI ────────────────────────────────────────
   Uma linha fina abaixo da Barra 2: casa › módulo › página. Só existe dentro
   de um módulo — Painel, ZAP TI e Configuração não têm trilha, e por isso ela
   nunca aparece sozinha com um degrau só. O 2º degrau (módulo) é o caminho de
   volta para a grade; o último degrau nunca é link, porque não faz sentido
   apontar para onde já se está. */
.nu_trilha {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 18px;
    font-size: 12.5px;
    background: var(--nu-teal-fundo);
    border-bottom: 1px solid var(--nu-linha);
    overflow-x: auto;
    scrollbar-width: none;
}
.nu_trilha::-webkit-scrollbar { display: none; }
.nu_trilha_casa {
    display: inline-flex;
    align-items: center;
    color: var(--nu-teal-tinta);
    flex: 0 0 auto;
}
.nu_trilha_casa svg { width: 15px; height: 15px; }
.nu_trilha_sep { color: var(--nu-suave); flex: 0 0 auto; }
.nu_trilha_item {
    color: var(--nu-teal-tinta);
    text-decoration: none;
    white-space: nowrap;
}
.nu_trilha_item:hover { text-decoration: underline; }
.nu_trilha_atual {
    color: var(--nu-tinta);
    font-weight: 600;
    white-space: nowrap;
}

/* ── 5. ABAS INTERNAS ───────────────────────────────────────────────────────
   A terceira camada: as páginas de um módulo, dentro da própria página. Duas
   barras + abas dão três níveis, e nenhum item fica a mais de dois cliques. */
.nu_abas {
    display: flex;
    gap: 4px;
    margin: 0 0 16px;
    padding-bottom: 1px;
    border-bottom: 1px solid var(--nu-linha);
    overflow-x: auto;
    scrollbar-width: none;
}
.nu_abas::-webkit-scrollbar { display: none; }
.nu_aba {
    padding: 8px 14px;
    font-size: 13.5px;
    color: var(--nu-suave);
    text-decoration: none;
    white-space: nowrap;
    border: 1px solid transparent;
    border-bottom: 0;
    border-radius: var(--nu-raio-p) var(--nu-raio-p) 0 0;
    background: none;
    cursor: pointer;
    font-family: inherit;
}
.nu_aba:hover { color: var(--nu-teal-tinta); background: var(--nu-teal-fundo); }
.nu_aba.nu_ativa {
    color: var(--nu-teal-tinta);
    font-weight: 600;
    background: var(--nu-branco);
    border-color: var(--nu-linha);
    /* O 1px negativo cobre a linha do contêiner: é o que faz a aba ativa parecer
       colada na página em vez de flutuando acima dela. */
    margin-bottom: -1px;
    padding-bottom: 9px;
}

/* ── 5b. GRADE — O MENU DE MÓDULO, EM AZULEJOS ──────────────────────────────
   A tela que um módulo mostra ao ser aberto pela Barra 2: um azulejo por
   página, desenho + nome e nada mais — mesma linguagem visual da grade de
   rotinas da Base (`portal/public/css/base.css`), reimplementada aqui com o
   prefixo `nu_` para o núcleo não depender do CSS de um produto específico. */
.nu_grade {
    display: grid;
    gap: var(--nu-gap, 14px);
    grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
}
.nu_grade_vazia { color: var(--nu-suave); }
.nu_azulejo {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    min-height: 128px;
    padding: 18px 10px 15px;
    text-align: center;
    text-decoration: none;
    color: var(--nu-tinta);
    background: var(--nu-branco);
    border: 1px solid var(--nu-linha);
    border-radius: var(--nu-raio);
    box-shadow: 0 1px 2px rgba(11, 76, 95, .05);
    transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.nu_azulejo:hover, .nu_azulejo:focus-visible {
    transform: translateY(-2px);
    border-color: var(--nu-teal-claro);
    box-shadow: var(--nu-sombra-alta);
    outline: none;
}
.nu_azulejo:focus-visible { outline: 2px solid var(--nu-teal-claro); outline-offset: 2px; }
.nu_azulejo:active { transform: translateY(0); }
.nu_azulejo_selo {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: var(--nu-teal-fundo);
    color: var(--nu-teal-tinta);
    transition: background .12s ease, color .12s ease;
}
.nu_azulejo:hover .nu_azulejo_selo { background: var(--nu-teal); color: #fff; }
.nu_azulejo_selo .nu_conta {
    position: absolute;
    top: -6px;
    right: -10px;
    margin-left: 0;
}
.nu_azulejo_nome { font-size: 13px; font-weight: 600; line-height: 1.25; color: var(--nu-teal-tinta); }
.nu_azulejo:hover .nu_azulejo_nome { color: var(--nu-teal-tinta-f); }

@media (max-width: 700px) {
    .nu_grade { grid-template-columns: repeat(auto-fill, minmax(108px, 1fr)); gap: 10px; }
    .nu_azulejo { min-height: 114px; padding: 14px 8px 12px; }
    .nu_azulejo_selo { width: 46px; height: 46px; }
}

/* ── 6. GAVETA DE CELULAR ───────────────────────────────────────────────────
   Regra do celular: a Barra 1 continua inteira (marca + empresa + ☰) e a Barra 2
   vira lista dentro da gaveta, agrupada por módulo. Alvo de toque de 44px — o
   mínimo utilizável, e o que a barra de 13px de altura do desktop não atende. */
.nu_ham {
    display: none;
    flex: 0 0 auto;
    width: 40px;
    height: 34px;
    font-size: 19px;
    line-height: 1;
    color: #fff;
    background: rgba(255, 255, 255, .10);
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: var(--nu-raio-p);
    cursor: pointer;
}

.nu_veu {
    position: fixed;
    inset: 0;
    z-index: var(--nu-z-veu);
    background: rgba(11, 76, 95, .45);
    border: 0;
    padding: 0;
}
.nu_veu[hidden] { display: none; }

.nu_gaveta {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: var(--nu-z-gaveta);
    width: min(310px, 86vw);
    padding: 14px 0 26px;
    overflow-y: auto;
    background: var(--nu-branco);
    box-shadow: var(--nu-sombra-alta);
    transform: translateX(100%);
    transition: transform .18s ease-out;
}
.nu_gaveta.nu_aberta { transform: translateX(0); }
.nu_gaveta_grupo {
    padding: 12px 18px 5px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .8px;
    text-transform: uppercase;
    color: var(--nu-suave);
}
.nu_gaveta a, .nu_gaveta button.nu_item {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 44px;
    padding: 0 18px;
    font: inherit;
    font-size: 14.5px;
    color: var(--nu-tinta);
    text-align: left;
    text-decoration: none;
    background: none;
    border: 0;
    border-left: 3px solid transparent;
    cursor: pointer;
}
.nu_gaveta a:hover, .nu_gaveta button.nu_item:hover { background: var(--nu-teal-fundo); }
.nu_gaveta a.nu_ativo {
    color: var(--nu-teal-tinta);
    font-weight: 600;
    border-left-color: var(--nu-laranja);
    background: var(--nu-teal-fundo);
}
.nu_gaveta form { margin: 0; }

@media (max-width: 860px) {
    .nu_barra1 { gap: 10px; padding: 0 12px; }
    /* 40×40: o hambúrguer é o único caminho para os módulos no celular, e 34px
       de altura é abaixo do alvo de toque que o resto da gaveta já respeita. */
    .nu_ham { display: block; height: 40px; }
    .nu_barra2 { display: none; }
    .nu_produto { display: none; }
    /* A sigla é a mesma geometria da marca, recortada nos três glifos — é ela
       que fica na barra em qualquer largura. */
    .nu_marca { display: none; }
    .nu_sigla { display: block; }
    /* No celular o Sair vai para a gaveta. O caminho de volta à Base também: é
       o item "◂ Base" do fim dela, já que a barra não tem mais o botão de casa. */
    .nu_pessoa .nu_sair { display: none; }
    /* ... e o menu de opções também: no celular o hambúrguer da gaveta já é o
       botão de três linhas da barra, e ele leva a ZAP TI e Sair no fim da
       lista. Dois hambúrgueres lado a lado seriam dois menus para adivinhar.
       ⚠ SÓ DENTRO DA BARRA 1. A Base tem faixa própria (`.bs_capa`) e NÃO tem
       gaveta — esconder o menu lá tiraria o Sair do celular inteiro. */
    .nu_barra1 .nu_opcoes { display: none; }
    /* O nome da empresa fica com a largura que sobrar, e o resto é do dedo.
       A largura em si é a regra única de `.nu_seletor_btn` — não precisa de
       outro valor aqui. */
}
@media (min-width: 861px) {
    .nu_gaveta, .nu_veu { display: none; }
}

/* ── 7. PEÇAS COMPARTILHADAS ───────────────────────────────────────────────── */

.nu_conteudo { padding: var(--nu-conteudo-p, 20px 22px 60px); max-width: 1500px; margin: 0 auto; }
.nu_conteudo > h1 { margin: 0 0 16px; font-size: 21px; color: var(--nu-teal-tinta); }

.nu_cartao {
    background: var(--nu-branco);
    border: 1px solid var(--nu-linha);
    border-radius: var(--nu-raio);
    box-shadow: var(--nu-sombra);
    padding: var(--nu-cartao-p, 15px 17px);
}

.nu_pilula {
    display: inline-block;
    padding: 1px 8px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .4px;
    border-radius: 3px;
    border: 1px solid var(--nu-linha);
    color: var(--nu-suave);
    vertical-align: middle;
}
.nu_pilula.nu_alerta { color: var(--nu-aviso); border-color: var(--nu-laranja); background: var(--nu-laranja-fraco); }
.nu_pilula.nu_ok { color: var(--nu-pos); border-color: #b7e2d1; background: #eefaf5; }

/* Caixinha 38×38 branca com ícone de linha em teal — o padrão de ícone de ação
   do ecossistema, aqui para que produto novo não reinvente (nem volte ao emoji). */
.nu_ico_btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
    color: var(--nu-teal-tinta);
    background: var(--nu-branco);
    border: 1px solid var(--nu-linha);
    border-radius: var(--nu-raio-p);
    cursor: pointer;
}
.nu_ico_btn:hover { background: var(--nu-teal-fundo); border-color: var(--nu-teal-claro); }
.nu_ico_btn svg { width: 19px; height: 19px; stroke: currentColor; fill: none; stroke-width: 2; }
.nu_ico_btn[disabled] { color: var(--nu-suave); cursor: default; opacity: .55; }

/* ── 8. TABELA → CARD ───────────────────────────────────────────────────────
   O padrão tabela-título-conteúdo, que existia só no Licita e agora é do núcleo:
   em tela grande é <table>; em tela pequena o <thead> some e cada <tr> vira um
   card com o título da coluna embutido na célula. Exige `data-label` em cada
   <td> — sem ele o card perde os rótulos e vira uma pilha de números soltos. */
.nu_tabela { width: 100%; border-collapse: collapse; background: var(--nu-branco); }
.nu_tabela th, .nu_tabela td {
    padding: var(--nu-cel-py, 9px) var(--nu-cel-px, 11px);
    text-align: left;
    border-bottom: 1px solid var(--nu-linha);
}
.nu_tabela th {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: var(--nu-suave);
    background: var(--nu-teal-fundo);
    position: sticky;
    top: calc(var(--nu-barra1-h) + var(--nu-barra2-h));
    z-index: 1;
}
/* ── A TABELA FINANCEIRA (21/08/2026) ────────────────────────────────────────
   Da prancheta de reformulação. É a tela em que o contador passa mais horas
   seguidas, e cada regra aqui é sobre LEITURA, não sobre enfeite. */

/* Zebra de DOIS em dois, e não linha sim linha não: numa tabela de 180 linhas o
   par ajuda o olho a andar na horizontal; a alternância simples vira listrado e
   cansa. Tom baixíssimo — ela guia, não decora. */
.nu_tabela tbody tr:nth-child(4n+1) td,
.nu_tabela tbody tr:nth-child(4n+2) td { background: rgba(11, 76, 95, .018); }
.nu_tabela tbody tr:hover td { background: var(--nu-teal-fundo); }

.nu_tabela .nu_num { text-align: right; }

/* Zero é AUSÊNCIA, e lê-lo com o mesmo peso de um saldo faz o olho parar à toa
   em cada linha vazia. Escreva "—" na célula e marque com `.nu_zero`. */
.nu_tabela .nu_zero { color: var(--nu-suave); opacity: .5; }

/* Negativo em vermelho E entre parênteses — a convenção contábil. Os parênteses
   não são redundância do vermelho: são o que sobrevive à impressão em preto e
   branco e a quem não distingue as duas cores. Cor nunca é o único canal. */
.nu_tabela .nu_neg { color: var(--nu-neg); }

/* A linha de TOTAL fica presa no rodapé da caixa que rola. Num balancete, o
   número que se procura primeiro é o fechamento — e ele estava depois de 180
   linhas, a uma rolagem de ida e outra de volta da pergunta "bate?". */
.nu_tabela tfoot td {
    position: sticky;
    bottom: 0;
    z-index: 1;
    font-weight: 700;
    background: var(--nu-branco);
    border-top: 2px solid var(--nu-teal);
    box-shadow: 0 -3px 10px rgba(11, 76, 95, .07);
}

/* Conteúdo largo rola dentro da própria caixa; a página nunca rola de lado. */
.nu_rolagem_x { overflow-x: auto; }

@media (max-width: 700px) {
    .nu_tabela thead { display: none; }
    .nu_tabela, .nu_tabela tbody, .nu_tabela tr, .nu_tabela td { display: block; width: auto; }
    .nu_tabela tr {
        margin: 0 0 10px;
        border: 1px solid var(--nu-linha);
        border-radius: var(--nu-raio-p);
        box-shadow: var(--nu-sombra);
        overflow: hidden;
    }
    .nu_tabela td { border-bottom: 1px solid var(--nu-linha); padding: 7px 11px; }
    .nu_tabela tr td:last-child { border-bottom: 0; }
    .nu_tabela td[data-label]::before {
        content: attr(data-label);
        display: block;
        font-size: 10.5px;
        font-weight: 700;
        letter-spacing: .5px;
        text-transform: uppercase;
        color: var(--nu-suave);
    }
    .nu_tabela .nu_num { text-align: left; }
    .nu_conteudo { padding: 14px 12px 50px; }
}

/* Impressão: a moldura inteira sai. Quem imprime quer o relatório, não o menu. */
@media print {
    .nu_barra1, .nu_barra2, .nu_trilha, .nu_gaveta, .nu_veu, .nu_fio { display: none !important; }
    body { background: #fff; }
    .nu_conteudo { padding: 0; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   9. APARÊNCIA — TEMA E DENSIDADE (21/08/2026)
   ═══════════════════════════════════════════════════════════════════════════

   Os dois pedaços da reformulação que ficaram de fora no dia em que ela entrou,
   e ficaram por um motivo só: os dois são ESCOLHA DE QUEM USA, e não havia onde
   guardar a escolha. Agora há — `nuc_pessoas.prefs`, com o cookie `nu_pref`
   como portador do instante de desenhar (ver `nucleo/lib/ui/prefs.js`).

   ── COMO A ESCOLHA CHEGA AQUI ────────────────────────────────────────────────

   Dois atributos no <html>, postos pelo script que `cabeca()` escreve no <head>:

       <html data-nu-tema="escuro" data-nu-densidade="compacta">

   ⚠ `data-nu-tema` guarda o tema JÁ RESOLVIDO — só `claro` ou `escuro`. Quem
   escolheu "do sistema" tem a escolha em `data-nu-tema-escolha` e o resultado
   aqui, resolvido no navegador contra `prefers-color-scheme`. É o que permite a
   esta folha ter UMA cópia da paleta escura em vez de duas (a do atributo e a do
   media query), que é o arranjo em que uma das duas envelhece sozinha.

   ⚠ E O PRODUTO PRECISA PEDIR (`cabeca({ aparencia: true })`). Sem o pedido, os
   atributos não são escritos e a tela fica exatamente como sempre esteve. Isto
   não é cerimônia: esta folha é só a MOLDURA, e o miolo de cada tela é CSS do
   produto. Ligar o escuro num produto cujo miolo ainda tem branco cravado
   entregaria barra escura com relatório branco — pior do que não ter escuro.
   Hoje quem pede é o Portal (a Base e as telas do cliente).
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── DENSIDADE — a lente do dia inteiro ─────────────────────────────────────
   Quem passa oito horas aqui escolhe uma vez e nunca mais mexe. Os três níveis
   mudam corpo do texto, entrelinha e respiro JUNTOS: mexer só no `padding` é
   como nasce o "modo compacto" que fica apertado E ilegível ao mesmo tempo.

   ⚠ `confortavel` REPRODUZ AS MEDIDAS QUE JÁ ESTAVAM NO AR, número por número,
   e é o padrão. Quem não abrir o menu de opções não vê diferença nenhuma —
   estrear denso mudaria a tela de sete pessoas sem ninguém ter pedido. */
:root {
    --nu-fs: 14px;
    --nu-lh: 1.5;
    --nu-cel-py: 9px;
    --nu-cel-px: 11px;
    --nu-cartao-p: 15px 17px;
    --nu-gap: 14px;
    --nu-conteudo-p: 20px 22px 60px;
}
html[data-nu-densidade="compacta"] {
    --nu-fs: 13.5px;
    --nu-lh: 1.42;
    --nu-cel-py: 6px;
    --nu-cel-px: 10px;
    --nu-cartao-p: 12px 14px;
    --nu-gap: 11px;
    --nu-conteudo-p: 16px 18px 50px;
}
html[data-nu-densidade="condensada"] {
    --nu-fs: 13px;
    --nu-lh: 1.32;
    --nu-cel-py: 4px;
    --nu-cel-px: 9px;
    --nu-cartao-p: 10px 12px;
    --nu-gap: 9px;
    --nu-conteudo-p: 12px 14px 44px;
}

/* ⚠ AS PEÇAS QUE RESPONDEM À LENTE FORAM ALTERADAS NO LUGAR ONDE JÁ MORAM, e
   não repetidas aqui embaixo. A primeira versão desta seção acrescentava um
   `.nu_conteudo { padding: var(--nu-conteudo-p) }` no FIM do arquivo — mesma
   especificidade da regra original e mais abaixo, portanto vencedora. Só que
   entre as duas havia o `@media (max-width: 700px)` do celular e o `@media
   print`: a regra nova passava por cima dos dois, e a densidade "confortável"
   (que não deveria mudar NADA) devolvia ao celular o respiro de desktop e à
   impressão a margem que ela tinha acabado de zerar.

   Quem responde: o corpo do texto (`body`), o miolo (`.nu_conteudo`), o cartão,
   o vão da grade e a célula da tabela. Quem NÃO responde: a barra, a trilha e
   as abas — são pontos de referência, e encolher o lugar de onde se olha não
   faz caber mais trabalho, só tira o prumo.

   ⚠ E NO CELULAR A LENTE PÁRA NO TEXTO, de propósito: os `@media` continuam
   mandando no respiro da tabela-card e do miolo. Ali o que aperta não é o
   espaço, é o dedo — e alvo de toque não é lugar de economizar pixel. */

/* ── TEMA ESCURO — ergonomia de jornada longa, não enfeite ──────────────────
   Os MESMOS tokens com os papéis trocados; nenhum nome novo. O teal continua
   sendo a cor da casa — passa a ser o fundo profundo em vez de só a barra —, e
   a Barra 1 permanece o gradiente de sempre: ela é a identidade, e identidade
   que muda de cor conforme a hora do dia deixa de identificar.

   ⚠ `color-scheme: dark` NÃO É DETALHE. É ele que faz o navegador desenhar
   escuros os controles que a folha não alcança: a lista aberta de um <select>
   (desenhada pelo sistema operacional, fora do CSS da página), o cursor de
   texto, o preenchimento automático e a barra de rolagem de quem não usa
   `::-webkit-scrollbar`. Sem essa linha, escolher "escuro" entrega uma tela
   escura que abre menus brancos ofuscantes — que é o instante exato em que a
   pessoa desiste do tema. */
html[data-nu-tema="escuro"] {
    color-scheme: dark;

    --nu-fundo: #0e1b21;
    --nu-branco: #16262e;        /* o "papel" — o nome ficou, o papel mudou */
    --nu-tinta: #e4eef1;
    --nu-suave: #8ba1aa;
    --nu-linha: #243a44;

    --nu-teal-fundo: #1b323c;
    --nu-teal-claro: #4f8ea3;
    /* A tinta clareia bem mais que o `--nu-teal-claro`, e por um motivo que não
       é estético: `--nu-teal-claro` também é FUNDO de botão cheio com texto
       branco por cima, e clareá-lo apagaria esse texto. Duas variáveis porque
       são dois trabalhos. */
    --nu-teal-tinta: #7fb3c1;
    --nu-teal-tinta-f: #a8d3e0;

    /* Verde e vermelho do claro têm contraste bom sobre branco e ruim sobre o
       papel escuro. Sobem de luminosidade o suficiente para se lerem sobre
       #16262e — e o vermelho continua acompanhado de parênteses na tabela,
       porque cor nunca é o único canal. */
    --nu-pos: #4cc79b;
    --nu-neg: #ff8f80;
    --nu-aviso: #f3c07a;
    --nu-laranja-fraco: rgba(51, 38, 18, .55);

    /* Sombra no escuro é preta, não teal: teal translúcido sobre fundo escuro
       não escurece nada, e o cartão fica sem separação do fundo. */
    --nu-sombra: 0 1px 2px rgba(0, 0, 0, .40), 0 8px 24px rgba(0, 0, 0, .28);
    --nu-sombra-alta: 0 10px 34px rgba(0, 0, 0, .50);
}

/* ── O que não se resolve por token ─────────────────────────────────────────
   As cores cravadas da folha. Cada uma foi cravada no claro pelo mesmo motivo:
   era um valor que só existia ali. No escuro cada uma precisa do par. */

/* A zebra de dois em dois é um véu de teal sobre branco; sobre papel escuro um
   véu escuro não aparece. Vira véu de LUZ, e mais fraco ainda — no escuro o
   olho enxerga alternância com muito menos contraste. */
html[data-nu-tema="escuro"] .nu_tabela tbody tr:nth-child(4n+1) td,
html[data-nu-tema="escuro"] .nu_tabela tbody tr:nth-child(4n+2) td {
    background: rgba(255, 255, 255, .022);
}

/* A pílula "ok" tinha o par verde-claro cravado (#b7e2d1 sobre #eefaf5). */
html[data-nu-tema="escuro"] .nu_pilula.nu_ok {
    border-color: rgba(76, 199, 155, .45);
    background: rgba(76, 199, 155, .14);
}
html[data-nu-tema="escuro"] .nu_pilula.nu_alerta {
    border-color: rgba(243, 156, 18, .45);
}

/* A sombra que prende a linha de total à borda da caixa que rola. */
html[data-nu-tema="escuro"] .nu_tabela tfoot td {
    border-top-color: var(--nu-teal-claro);
    box-shadow: 0 -3px 10px rgba(0, 0, 0, .45);
}

/* O véu da gaveta de celular já é preto translúcido — no escuro precisa ser
   mais opaco, senão a tela de trás continua legível atrás do menu. */
html[data-nu-tema="escuro"] .nu_veu { background: rgba(0, 0, 0, .62); }

/* Impressão sai SEMPRE clara. Papel não tem tema, e imprimir o escuro gasta a
   folha inteira de tinta para entregar um relatório ilegível. */
@media print {
    html[data-nu-tema="escuro"] {
        color-scheme: light;
        --nu-fundo: #ffffff;
        --nu-branco: #ffffff;
        --nu-tinta: #1f2d33;
        --nu-suave: #7c8b91;
        --nu-linha: #e3e9ec;
        --nu-pos: #12805c;
        --nu-neg: #c0392b;
    }
}

/* ── O MENU DE APARÊNCIA, dentro do menu de opções ──────────────────────────
   Dois grupos de fichas. Não é `<select>`: são seis valores no total, todos
   visíveis de uma vez, e a escolha tem retorno IMEDIATO na tela por trás do
   menu — abrir uma lista nativa para isso esconderia justamente o que se está
   tentando ver mudar. */
.nu_apar { padding: 6px 10px 8px; }
.nu_apar_t {
    display: block;
    margin: 4px 0 5px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .6px;
    text-transform: uppercase;
    color: var(--nu-suave);
}
.nu_apar_fichas { display: flex; gap: 5px; flex-wrap: wrap; }

/* ⚠ TODA REGRA DE FICHA VEM PREFIXADA POR `.nu_apar`, e isso não é capricho de
   organização: `.nu_menu button` (0,1,1) VENCE `.nu_ficha` (0,1,0), e é ele
   quem manda `width: 100%` e `display: flex` em todo botão do menu. Sem o
   prefixo, as seis fichas saem empilhadas de ponta a ponta, como se fossem seis
   itens de menu — que é exatamente o que elas não são. */
.nu_apar .nu_ficha {
    /* Coluna pelo mesmo motivo da Barra 2: a ficha escolhida é 700 e a não
       escolhida é herdada — sem o fantasma, escolher "Escuro" empurrava
       "Do sistema" para o lado, dentro de um menu aberto. */
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: auto;
    padding: 4px 9px;
    font: inherit;
    font-size: 12px;
    line-height: 1.2;
    color: var(--nu-tinta);
    background: var(--nu-branco);
    border: 1px solid var(--nu-linha);
    border-radius: 999px;
    cursor: pointer;
    white-space: nowrap;
}
.nu_apar .nu_ficha:hover { background: var(--nu-teal-fundo); border-color: var(--nu-teal-claro); }
/* O escolhido é dito por PESO E BORDA, além do fundo: no tema escuro o
   contraste entre "escolhido" e "não escolhido" cai, e um estado que só a cor
   conta some para quem não distingue as duas. `aria-pressed` diz o mesmo a quem
   ouve a tela. */
.nu_apar .nu_ficha[aria-pressed="true"] {
    font-weight: 700;
    color: var(--nu-teal-tinta);
    background: var(--nu-teal-fundo);
    border-color: var(--nu-teal-3);
}
.nu_apar .nu_ficha::after {
    content: attr(data-nu-rot);
    display: block;
    height: 0;
    overflow: hidden;
    visibility: hidden;
    font-weight: 700;
    pointer-events: none;
}
.nu_apar .nu_ficha:focus-visible { outline: 2px solid var(--nu-teal-claro); outline-offset: 1px; }