/* ============================================================================
   Navegação principal — header + barra de fixados + launcher + paleta.
   Feature 016. Substitui o menu lateral (`_aside.php`).

   Porte das regras `.nv-*` do protótipo de design
   (`docs/design/menu-launcher/navigation-prototype.css`), com três correções
   deliberadas em relação a ele:

   1. Os tokens são `--nv-*`, não `--sm-*`. O protótipo escopava os dele em
      `.syspesca-mock`, que não existe aqui; jogá-los em `:root` colidiria com o
      `:root` de `syspesca/reap.css`, carregado só nas telas de REAP — o mesmo
      seletor com conjuntos de variáveis diferentes por tela é fonte garantida de
      "a cor muda quando entro no REAP".

   2. Os cinzas usam os valores REAIS do tema. O protótipo define
      `--sm-dark-25: #B5B5C3`, mas #B5B5C3 é o `.text-muted` do Metronic; o
      `.text-dark-25` de verdade é #D1D3E0.

   3. As abas de tela (`.nv-barra-abas`) usam `nav nav-tabs nav-bold nav-tabs-line` do
      Metronic por dentro. DESIGN.md §25 proíbe classe própria que substitua
      `nav nav-tabs`, e não há motivo para abrir exceção: o tema já entrega o
      componente.

   O teal (#0BB7AF/#00837C) aparece SÓ em estado ativo — chip fixado ativo, aba
   ativa, item ativo da trilha do launcher. DESIGN.md §21 limita esse accent a
   1–2 aplicações por tela; aqui ele marca "onde eu estou", que é uma só.

   Carregado em `templates/layout/default.php`, DEPOIS de `style.bundle.css` —
   as sobrescritas de `.wrapper` dependem dessa ordem.
   ========================================================================== */

:root {
    --nv-primary: #3699FF;
    --nv-primary-light: #E1F0FF;
    --nv-success: #1BC5BD;
    --nv-success-light: #C9F7F5;
    --nv-warning: #FFA800;
    --nv-warning-light: #FFF4DE;
    --nv-danger: #F64E60;
    --nv-danger-light: #FFE2E5;
    --nv-info: #8950FC;
    --nv-info-light: #EEE5FF;
    --nv-dark: #181C32;
    --nv-dark-75: #3F4254;
    --nv-dark-50: #7E8299;
    --nv-dark-25: #D1D3E0;
    --nv-muted: #B5B5C3;
    --nv-bg: #F3F6F9;
    --nv-border: #EBEDF3;
    --nv-border-strong: #E4E6EF;
    --nv-secondary-light: #F3F6F9;
    --nv-secondary: #7E8299;

    /* accent de "onde eu estou" */
    --nv-accent: #0BB7AF;
    --nv-accent-light: #C9F7F5;
    --nv-accent-deep: #00837C;

    /* chrome claro — o header voltou a ser branco (2026-08-15). O protótipo de
       design propunha #1E1E2D, mas o tema inteiro é claro: um header escuro
       ficava como um bloco estranho em cima de 400 telas brancas, e obrigava a
       um segundo jogo de cores só para ele. */
    --nv-shell: #FFFFFF;
    --nv-shell-text: var(--nv-dark-75);
    --nv-shell-muted: var(--nv-dark-50);
    --nv-shell-hover: #F3F6F9;
    --nv-shell-campo: #F5F8FA;

    --nv-h-header: 58px;
    --nv-h-pinbar: 46px;
    --nv-h-chrome: 104px; /* header + barra de fixados; use este nas telas */
    --nv-h-faixa: 0px;    /* faixa "em período de testes", quando existir */
}

/* Entidade em período de teste: a faixa azul do topo é `position: fixed` com
   z-index 9999 e cobriria os 20px superiores do header. Ela passa a fazer parte
   do chrome — o header desce e o conteúdo desce junto. */
body.nv-tem-faixa { --nv-h-faixa: 20px; }

/* ── Ícones herdam a cor do pai ──────────────────────────────────────────── */
/* `style.bundle.css` traz uma regra GLOBAL DE ELEMENTO — `i { color: #B5B5C3 }`.
   Seletor de elemento dá cor PRÓPRIA ao `<i>`, e cor própria não herda: todo
   ícone Font Awesome dentro da navegação saía cinza mesmo dentro de um tile
   tingido, e os pontinhos do ícone 3×3 (que são `<i>` com
   `background: currentColor`) ficavam presos nesse cinza em vez de seguir a cor
   do botão. Devolver a herança aqui é o que faz a cor de contexto funcionar —
   as regras específicas mais abaixo (.nv-ic, .nv-star, .nv-lc-search i…)
   continuam vencendo por especificidade. */
.nv-topbar i,
.nv-pinbar i,
.nv-barra i,
.nv-launcher i,
.nv-palette i { color: inherit; }

/* ── Geometria: o chrome fixo substitui o header de 65px do tema ─────────── */

.nv-topbar {
    position: fixed;
    top: var(--nv-h-faixa);
    right: 0;
    left: 0;
    /* 97 = mesmo patamar do `.header` do tema, para o offcanvas de perfil e o
       painel de notificações (z-index 1001) continuarem cobrindo o topo, como
       cobriam o header antigo. Só enquanto o launcher está aberto o chrome sobe
       acima do véu (regra abaixo). */
    z-index: 97;
}

/* Com o launcher aberto, o header precisa ficar ACIMA do véu — o botão
   "Serviços" segue clicável e destacado, como no protótipo. */
body.nv-launcher-aberto .nv-topbar { z-index: 1015; }

@media (min-width: 992px) {
    /* Sobrescreve `.header-fixed .wrapper { padding-top: 65px }`. Mesma
       especificidade, mesma media query — vence por vir depois no cascade. */
    .header-fixed .wrapper {
        padding-top: calc(var(--nv-h-chrome) + var(--nv-h-faixa));
    }
}

@media (max-width: 991.98px) {
    /* Sobrescreve `.header-mobile-fixed .wrapper { padding-top: 55px }`. */
    .header-mobile-fixed .wrapper {
        padding-top: calc(var(--nv-h-chrome) + var(--nv-h-faixa));
    }
}

/* ── Header ──────────────────────────────────────────────────────────────── */

.nv-header {
    height: var(--nv-h-header);
    background: var(--nv-shell);
    border-bottom: 1px solid var(--nv-border);
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 0 16px;
    flex-shrink: 0;
}

.nv-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-right: 6px;
    min-width: 0;
    text-decoration: none;
}

.nv-brand:hover { text-decoration: none; }

.nv-brand-mark {
    width: 30px;
    height: 30px;
    border-radius: 7px;
    background: rgba(11, 183, 175, .2);
    color: var(--nv-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    flex-shrink: 0;
    overflow: hidden;
}

.nv-brand-mark img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.nv-brand-text {
    color: var(--nv-dark);
    font-weight: 600;
    font-size: 14px;
    letter-spacing: .3px;
    line-height: 1;
    min-width: 0;
}

.nv-brand-text span {
    display: block;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nv-brand-text small {
    display: block;
    font-size: 9px;
    color: var(--nv-dark-50);
    font-weight: 500;
    letter-spacing: 1.1px;
    text-transform: uppercase;
    margin-top: 3px;
}

.nv-launcher-btn {
    display: flex;
    align-items: center;
    gap: 9px;
    height: 36px;
    padding: 0 12px 0 10px;
    border: 0;
    border-radius: 6px;
    background: var(--nv-shell-campo);
    color: var(--nv-shell-text);
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    flex-shrink: 0;
}

.nv-launcher-btn:hover,
.nv-launcher-btn.open { background: var(--nv-accent); color: #fff; }

.nv-grid9 {
    display: grid;
    grid-template-columns: repeat(3, 3px);
    grid-template-rows: repeat(3, 3px);
    gap: 2.5px;
}

.nv-grid9 i {
    width: 3px;
    height: 3px;
    /* `currentColor` = a cor do botão: escura em repouso, BRANCA quando o botão
       está em hover ou aberto (regra `.nv-launcher-btn.open`). Sem o
       `color: inherit`, a regra global `i { color: #B5B5C3 }` do tema deixava os
       nove pontos cinzas inclusive sobre o teal do estado aberto. */
    color: inherit;
    background: currentColor;
    border-radius: .5px;
    display: block;
}

.nv-search {
    flex: 1;
    max-width: 520px;
    display: flex;
    align-items: center;
    gap: 9px;
    height: 36px;
    padding: 0 12px;
    background: var(--nv-shell-campo);
    border: 1px solid var(--nv-border);
    border-radius: 6px;
    color: var(--nv-shell-muted);
    cursor: text;
    font-family: inherit;
    font-size: 12.5px;
    text-align: left;
    min-width: 0;
}

.nv-search:hover { background: var(--nv-shell-hover); border-color: var(--nv-border-strong); }
.nv-search .nv-search-label {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nv-kbd {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 10px;
    color: var(--nv-dark-50);
    border: 1px solid var(--nv-border-strong);
    border-radius: 4px;
    padding: 2px 5px;
    letter-spacing: .4px;
    flex-shrink: 0;
}

.nv-header-right {
    margin-left: auto;
    display: flex;
    align-items: center;
    /* 6px, e não 2px: o contador (`.nv-dot`) transborda 3px para fora do botão
       (ver a nota lá embaixo), e com 2px de respiro dois contadores vizinhos
       encostavam um no outro. */
    gap: 6px;
}

.nv-hicon {
    width: 40px;
    height: 40px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--nv-dark-50);
    /* 16px de glifo em 40px de botão. Era 14 em 36 — pequeno demais para
       conviver com o contador, que come o canto superior direito. */
    font-size: 16px;
    cursor: pointer;
    position: relative;
    background: none;
    border: 0;
}

.nv-hicon:hover { background: var(--nv-accent-light); color: var(--nv-accent-deep); }

/* Estado ativo dos ícones do header — hoje só a engrenagem tem destino que é um
   módulo do registry. Marca "onde eu estou" com o mesmo accent do chip fixado e
   da aba, para não haver duas linguagens de "atual" na mesma faixa. */
.nv-hicon.active { background: var(--nv-accent-light); color: var(--nv-accent-deep); }

/*
 * Contador de pendência dos ícones do header.
 *
 * Ele mora no CANTO, transbordando 3px para fora do botão — não sobre o glifo.
 * A posição antiga (`top: 7px; right: 8px`) deixava o contador exatamente em cima
 * do ícone: com um dígito já disputava espaço e com dois ("46") cobria o desenho
 * inteiro, e nem o ícone nem o número se liam. Como `.nv-hicon` é `position:
 * relative` e nada no header tem `overflow: hidden`, o transbordo é seguro; o
 * `gap` de `.nv-header-right` foi aberto para 6px justamente para acomodá-lo.
 *
 * O anel de 2px na cor do header é o que separa o vermelho do glifo. Não é
 * decoração: sem ele, o contador encosta no ícone e os dois voltam a se misturar.
 */
.nv-hicon .nv-dot {
    position: absolute;
    top: -3px;
    right: -3px;
    min-width: 18px;
    height: 18px;
    border-radius: 9px;
    background: var(--nv-danger);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--nv-shell);
    padding: 0 5px;
    line-height: 1;
}

.nv-user {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 4px 8px 4px 12px;
    border-radius: 6px;
    cursor: pointer;
    margin-left: 6px;
    border: 0;
    background: none;
    font-family: inherit;
}

.nv-user:hover { background: var(--nv-shell-hover); }
.nv-user .nv-user-txt { display: block; }
.nv-user .nv-nm { display: block; font-size: 12px; font-weight: 600; color: var(--nv-dark); line-height: 1.3; }
.nv-user .nv-role { display: block; font-size: 10px; color: var(--nv-dark-50); }
a.nv-hicon:hover { color: var(--nv-accent-deep); text-decoration: none; }

.nv-user .nv-av {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    background: rgba(11, 183, 175, .2);
    color: var(--nv-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 12px;
    flex-shrink: 0;
}

/* ── Barra de serviços fixados ───────────────────────────────────────────── */

.nv-pinbar {
    height: var(--nv-h-pinbar);
    /* Levemente recuada em relação ao header, que agora também é branco: sem
       isso as duas faixas viram um bloco único de 104px sem hierarquia. Os chips
       ficam brancos por cima e ganham destaque. */
    background: #FBFCFE;
    border-bottom: 1px solid var(--nv-border);
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 16px;
    flex-shrink: 0;
}

.nv-pinbar-label {
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--nv-muted);
    padding-right: 6px;
    flex-shrink: 0;
}

.nv-pins {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
    padding: 8px 0;
}

.nv-pins::-webkit-scrollbar { display: none; }

.nv-pin {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 30px;
    padding: 0 11px;
    border: 1px solid var(--nv-border-strong);
    border-radius: 6px;
    background: #fff;
    font-family: inherit;
    font-size: 12px;
    font-weight: 500;
    color: var(--nv-dark-75);
    cursor: pointer;
    white-space: nowrap;
    text-decoration: none;
}

.nv-pin:hover { border-color: #D6D9E4; background: #FBFCFE; color: var(--nv-dark-75); text-decoration: none; }
/* Seletor SEM elemento (`.nv-ic`, não `i.nv-ic`), e a classe fica NO PRÓPRIO
   `<i>`. É o que faz a regra vencer a regra nua `i { color: #B5B5C3 }` do tema:
   `.nv-ic` é (0,1,0) contra (0,0,1), e — mais importante — as duas são
   declaração DIRETA no elemento, então não há herança envolvida. Pintar o
   contêiner e esperar que o glifo herde é o erro clássico aqui: herança sempre
   perde para declaração direta, e o ícone sai cinza. Ver `.nv-topbar i` etc.
   logo acima, e a receita completa em `.claude/METRONIC_COMPONENTS.md` §2.

   (Um comentário anterior justificava este seletor dizendo que o Font Awesome
   deste app roda em modo SVG-with-JS e trocaria cada `<i>` por um `<svg>`. Isso
   é FALSO: o `plugins.bundle.css` traz o Font Awesome 5 em WEBFONT — tem
   `.fa-search:before` — e o `plugins.bundle.js` não tem uma linha de
   fontawesome. Os `<i>` continuam `<i>`, e é justamente por isso que a regra
   nua do tema alcança todos eles.) */
.nv-pin .nv-ic { font-size: 11px; color: var(--nv-dark-50); }
.nv-pin.active { background: var(--nv-accent-light); border-color: transparent; color: var(--nv-accent-deep); font-weight: 600; }
.nv-pin.active .nv-ic { color: var(--nv-accent-deep) !important; }
.nv-pin.dragging { opacity: .45; }
.nv-pin.drop-target { border-color: var(--nv-accent); }

.nv-pin .nv-bdg {
    background: var(--nv-danger);
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    border-radius: 9px;
    padding: 1px 5px;
    min-width: 16px;
    text-align: center;
}

.nv-pin .nv-unpin {
    opacity: 0;
    font-size: 9px;
    color: var(--nv-muted);
    margin-left: -2px;
    padding: 2px;
}

.nv-pin:hover .nv-unpin { opacity: 1; }
.nv-pin .nv-unpin:hover,
.nv-pin .nv-unpin:focus { color: var(--nv-danger); opacity: 1; }

/* Onde não há hover (celular/tablet) o x precisa existir visualmente, senão
   desafixar vira função inalcançável. */
@media (hover: none) {
    .nv-pin .nv-unpin { opacity: .55; }
}

.nv-pinadd {
    width: 30px;
    height: 30px;
    border-radius: 6px;
    border: 1px dashed var(--nv-border-strong);
    background: #fff;
    color: var(--nv-muted);
    cursor: pointer;
    font-size: 11px;
    flex-shrink: 0;
}

.nv-pinadd:hover { border-color: var(--nv-accent); color: var(--nv-accent); }

.nv-pinbar-right {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 14px;
    flex-shrink: 0;
    padding-left: 12px;
}

.nv-hint {
    font-size: 11px;
    color: var(--nv-muted);
    display: flex;
    align-items: center;
    gap: 6px;
}

.nv-hint a { color: var(--nv-dark-50); font-weight: 500; }
.nv-hint a:hover { color: var(--nv-accent-deep); }
.nv-pin-vazio { font-size: 12px; color: var(--nv-muted); }

/* ── Barra de contexto: título da tela + abas do módulo + ações ──────────── */
/* Faixa ÚNICA. Até 2026-08-17 eram duas coladas: esta (só as abas) e o
   subheader do Metronic copiado em 229 templates, com título, breadcrumb e
   botões. `templates/element/layout/_barra_contexto.php` explica por que o
   breadcrumb não sobreviveu à fusão.

   Fica no fluxo normal, ACIMA de `#kt_content` — não dentro dele: o respiro do
   content é do conteúdo, e a barra pertence ao chrome. */

.nv-barra {
    position: relative;
    z-index: 1;
    background: #fff;
    border-bottom: 1px solid var(--nv-border);
    padding: 0 24px;
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 46px;
    /* Quebra em duas linhas em vez de estourar a largura da página: a ficha do
       associado leva 8 botões na faixa e, em telas estreitas, eles não cabem ao
       lado das abas nem depois que a área de abas encolhe até zero. */
    flex-wrap: wrap;
}

/* O título é o nome da TELA, não um rótulo de seção: `text-dark`, não cinza.
   `min-width:0` + ellipsis para que "Ficha do associado — nome longo" encolha
   em vez de empurrar as ações para fora da faixa. */
.nv-barra-titulo {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 1 auto;
    min-width: 0;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--nv-dark);
    white-space: nowrap;
}

.nv-barra-titulo i { color: var(--nv-dark-50); font-size: 13px; }

.nv-barra-texto { overflow: hidden; text-overflow: ellipsis; }

/* Separador só existe quando há abas à direita para separar. */
.nv-barra-titulo-sep {
    padding-right: 14px;
    border-right: 1px solid var(--nv-border);
}

/* Só as abas rolam. A faixa inteira com `overflow-x:auto` levaria o botão
   Voltar para fora da tela em telas estreitas — e ação que some é ação que o
   funcionário não encontra. */
.nv-barra-abas {
    flex: 1 1 auto;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
}

.nv-barra-abas::-webkit-scrollbar { display: none; }

/* SEM `overflow` aqui, de propósito: o botão "Rendas extras" da ficha do
   associado é um split-button com `dropdown-menu` posicionado em absoluto, e
   qualquer ancestral com overflow recortaria o menu ao abrir. O subheader antigo
   tinha `overflow-auto` nessa mesma div e sofria exatamente disso. Quem absorve
   o aperto é a área de abas (`.nv-barra-abas`, que encolhe e rola); se ainda
   assim não couber, a faixa quebra em duas linhas. */
.nv-barra-acoes {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    padding: 6px 0;
}

/* Botão de ação não encolhe nem quebra: a ficha do associado põe 8 deles na
   faixa, e sem isto o flex espremia o primeiro ("Editar dados") em duas linhas,
   desalinhando a barra inteira. Quando não couberem, a área rola. */
.nv-barra-acoes > *,
.nv-barra-acoes .btn { flex-shrink: 0; white-space: nowrap; }

.nv-barra .nav.nav-tabs { border-bottom: 0; flex-wrap: nowrap; }
.nv-barra .nav.nav-tabs .nav-link { white-space: nowrap; }

/* O componente é o do tema; só o ESTADO ATIVO troca de cor, para a aba da tela
   atual falar a mesma língua do chip fixado ativo (ambos marcam "onde eu
   estou"). Se a aba ficasse azul-primary e o chip teal, o mesmo conceito teria
   duas cores na mesma dobra. */
.nv-barra .nav.nav-tabs .nav-link.active { color: var(--nv-accent-deep); }
.nv-barra .nav.nav-tabs.nav-tabs-line .nav-link.active { border-bottom-color: var(--nv-accent); }

/* ── Launcher ────────────────────────────────────────────────────────────── */

.nv-scrim {
    position: fixed;
    inset: 0;
    background: rgba(24, 28, 50, .35);
    opacity: 0;
    pointer-events: none;
    transition: opacity .16s;
    /* Acima do botão flutuante de ajuda (1000) e dos offcanvas do tema (1001);
       abaixo do modal do Bootstrap (1050). Com z-index baixo o véu não cobria
       o botão flutuante, que ficava clicável por cima do launcher. */
    z-index: 1010;
}

.nv-scrim.on { opacity: 1; pointer-events: auto; }

.nv-launcher {
    position: fixed;
    top: calc(var(--nv-h-header) + var(--nv-h-faixa) + 4px);
    left: 12px;
    width: min(940px, calc(100vw - 24px));
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 24px 60px rgba(24, 28, 50, .28);
    z-index: 1020;
    display: none;
    overflow: hidden;
}

.nv-launcher.on { display: flex; }

.nv-lc-rail {
    width: 236px;
    flex-shrink: 0;
    background: #FBFCFE;
    border-right: 1px solid var(--nv-border);
    padding: 10px 0;
    display: flex;
    flex-direction: column;
    max-height: 544px;
    overflow: auto;
}

.nv-rail-h {
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--nv-muted);
    padding: 12px 18px 6px;
}

.nv-rail-item {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 9px 18px;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--nv-dark-75);
    cursor: pointer;
    border-left: 3px solid transparent;
    background: none;
    border-top: 0;
    border-right: 0;
    border-bottom: 0;
    width: 100%;
    text-align: left;
    font-family: inherit;
}

.nv-rail-item .nv-ic { width: 15px; font-size: 12px; color: var(--nv-muted); text-align: center; }
.nv-rail-item .nv-ct { margin-left: auto; font-size: 10px; color: var(--nv-muted); font-weight: 600; }
.nv-rail-item:hover { background: #F3F6F9; }
.nv-rail-item.active { background: #fff; border-left-color: var(--nv-accent); color: var(--nv-dark); font-weight: 600; }
.nv-rail-item.active .nv-ic { color: var(--nv-accent-deep) !important; }

.nv-lc-main { flex: 1; min-width: 0; display: flex; flex-direction: column; max-height: 544px; }

.nv-lc-search {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 20px;
    border-bottom: 1px solid var(--nv-border);
    flex-shrink: 0;
}

.nv-lc-search i { color: var(--nv-muted); font-size: 13px; }

.nv-lc-search input {
    flex: 1;
    border: 0;
    outline: 0;
    font-family: inherit;
    font-size: 14px;
    color: var(--nv-dark);
}

.nv-lc-search input::placeholder { color: var(--nv-muted); }
.nv-lc-list { flex: 1; overflow: auto; padding: 6px 12px 16px; }

.nv-grp-title {
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--nv-muted);
    padding: 14px 8px 6px;
}

.nv-mod {
    border-radius: 8px;
    padding: 10px 10px 10px 12px;
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 0 12px;
    align-items: start;
}

.nv-mod:hover { background: #F8FAFC; }

.nv-mod .nv-mi {
    width: 32px;
    height: 32px;
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    grid-row: span 2;
}

.nv-mod .nv-nmrow { display: flex; align-items: center; gap: 8px; }
.nv-mod .nv-nm { font-size: 13px; font-weight: 600; color: var(--nv-dark); }
.nv-mod a.nv-nm:hover { color: var(--nv-accent-deep); }
.nv-mod .nv-desc { font-size: 11.5px; color: var(--nv-dark-50); margin-top: 1px; }

.nv-star {
    background: none;
    border: 0;
    cursor: pointer;
    color: var(--nv-border-strong);
    font-size: 13px;
    padding: 4px 2px;
    grid-row: span 2;
}

.nv-star:hover { color: var(--nv-warning); }
.nv-star.on { color: var(--nv-warning); }

.nv-screens { grid-column: 2; display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; }

.nv-screens a {
    font-size: 11.5px;
    color: var(--nv-dark-50);
    background: var(--nv-bg);
    border-radius: 5px;
    padding: 3px 9px;
    font-weight: 500;
}

.nv-screens a:hover { background: var(--nv-accent-light); color: var(--nv-accent-deep); }

.nv-lc-foot {
    border-top: 1px solid var(--nv-border);
    padding: 10px 20px;
    display: flex;
    align-items: center;
    gap: 18px;
    font-size: 11px;
    color: var(--nv-dark-50);
    flex-shrink: 0;
}

.nv-empty { padding: 44px 20px; text-align: center; color: var(--nv-muted); font-size: 12.5px; }
.nv-buscando { padding: 10px 20px; color: var(--nv-dark-50); font-size: 12.5px; }

/* ── Paleta de comando (Ctrl+K) ──────────────────────────────────────────── */

.nv-palette {
    position: fixed;
    /* Centralizada nos dois eixos no desktop. O protótipo a ancorava a 88px do
       topo; centralizar deixa o alvo do olho no meio da tela, que é onde ele já
       está quando o atalho é acionado.
       Consequência aceita: a paleta cresce e encolhe conforme o número de
       resultados, e centralizada ela cresce para os dois lados — o campo de busca
       sobe alguns pixels quando a lista enche. Ancorar no topo evitaria isso, mas
       era justamente o que se pediu para mudar. */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(680px, calc(100vw - 32px));
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 24px 60px rgba(24, 28, 50, .3);
    z-index: 1030;
    display: none;
    overflow: hidden;
}

.nv-palette.on { display: block; }

.nv-pl-input {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--nv-border);
}

.nv-pl-input i { color: var(--nv-muted); font-size: 15px; }

.nv-pl-input input {
    flex: 1;
    border: 0;
    outline: 0;
    font-family: inherit;
    font-size: 16px;
    color: var(--nv-dark);
}

.nv-pl-results { max-height: 398px; overflow: auto; padding: 8px 8px 12px; }

.nv-res {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 12px;
    border-radius: 7px;
    cursor: pointer;
    text-decoration: none;
}

.nv-res .nv-ri {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    flex-shrink: 0;
}

/* Foto do associado preenchendo o quadradinho do resultado. `object-fit: cover`
   porque as fotos vêm em proporções variadas (carteirinha, selfie, digitalização)
   e esticar deforma o rosto. */
.nv-res .nv-ri .nv-retrato {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 6px;
    display: block;
}

.nv-res .nv-ri { overflow: hidden; }

.nv-res .nv-rt {
    font-size: 13px;
    font-weight: 500;
    color: var(--nv-dark);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nv-res .nv-rp { font-size: 11px; color: var(--nv-muted); margin-left: auto; white-space: nowrap; }

/* Atalhos por registro — abrem a ficha já na parte certa (alterar dados,
   emissão de documentos, financeiro, anexos). */
.nv-res-acoes {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-left: 10px;
    flex-shrink: 0;
}

.nv-res .nv-rp + .nv-res-acoes { margin-left: 10px; }
.nv-res-acoes:first-of-type { margin-left: auto; }

.nv-res-acao {
    width: 26px;
    height: 26px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    cursor: pointer;
    opacity: .85;
    transition: opacity .12s, transform .12s;
}

.nv-res-acao:hover { opacity: 1; transform: translateY(-1px); }

/* Na linha selecionada o fundo é `--nv-accent-light` (#C9F7F5) — exatamente o
   mesmo tom do botão "Financeiro" (success). Sem o anel branco ele desaparece
   dentro da linha destacada, e some justo a ação que o funcionário mais usa. */
.nv-res.sel .nv-res-acao { box-shadow: 0 0 0 1.5px #fff; opacity: 1; }
.nv-res-acao:focus { outline: 2px solid var(--nv-accent); outline-offset: 1px; }

/* Em tela estreita o CPF/matrícula cede o lugar: o atalho é o que o funcionário
   veio buscar, o metadado ele já leu no nome.
   A classe vem do JS em vez de `:has()`: Firefox <121 e Safari <15.4 descartam
   a regra INTEIRA ao encontrar uma pseudo-classe que não conhecem. */
@media (max-width: 575.98px) {
    .nv-res--com-acoes .nv-rp { display: none; }
}
.nv-res.sel { background: var(--nv-accent-light); text-decoration: none; }
.nv-res.sel .nv-rt { color: var(--nv-accent-deep); font-weight: 600; }

/* A pílula `.nv-toast` saiu daqui: a notificação de "fixado/desafixado" e a de
   falha ao salvar passaram a usar o `SysToast` (`syspesca/geral/toast.js`), o
   mesmo toast do resto do app. */

/* ── Mobile ──────────────────────────────────────────────────────────────── */

@media (max-width: 991.98px) {
    .nv-header { gap: 8px; padding: 0 10px; }

    /*
     * Os 40px do desktop NÃO cabem aqui. Em 360px o header já vive no limite:
     * 5 ícones + chip do usuário ocupam a faixa inteira, e subir para 40px com
     * `gap: 6px` acrescenta 36px — medido, dá `scrollWidth 392` contra
     * `clientWidth 356`, ou seja, arrasto horizontal na página toda (a armadilha
     * recorrente desta base). Aqui volta a geometria exata de antes.
     *
     * O que NÃO volta é o que de fato conserta a legibilidade: o contador segue no
     * CANTO, fora do glifo, e o glifo segue em 16px. O ganho é do reposicionamento,
     * não do tamanho do botão.
     */
    .nv-header-right { gap: 2px; }
    .nv-hicon { width: 36px; height: 36px; }

    .nv-brand-text { display: none; }
    .nv-launcher-btn span:not(.nv-grid9) { display: none; }
    .nv-launcher-btn { padding: 0 10px; }
    .nv-search .nv-search-label,
    .nv-search .nv-kbd { display: none; }
    .nv-search { flex: 0 0 40px; max-width: 40px; justify-content: center; padding: 0; }
    .nv-user .nv-user-txt { display: none; }
    .nv-user { padding: 4px; }
    .nv-pinbar { padding: 0 10px; }
    .nv-pinbar-label,
    .nv-pinbar-right { display: none; }

    /* Launcher em tela cheia: a trilha de contextos vira uma faixa rolável no
       topo, e a lista ocupa o resto — um nível por vez, sem duas colunas. */
    .nv-launcher {
        /* `bottom: 0` em vez de `height: 100vh`: o 100vh ignorava a faixa de
           "período de testes" (o rodapé do painel caía fora da tela) e, no iOS,
           não desconta a barra de endereço. Como o elemento já é `fixed` com
           `top` definido, esticar até o rodapé resolve os dois de uma vez, sem
           depender de `dvh`. */
        top: calc(var(--nv-h-header) + var(--nv-h-faixa));
        left: 0;
        right: 0;
        bottom: 0;
        width: auto;
        border-radius: 0;
        flex-direction: column;
    }

    .nv-lc-rail {
        width: 100%;
        max-height: none;
        flex-direction: row;
        overflow-x: auto;
        border-right: 0;
        border-bottom: 1px solid var(--nv-border);
        padding: 8px 10px;
        gap: 6px;
    }

    .nv-lc-rail .nv-rail-h { display: none; }

    .nv-rail-item {
        width: auto;
        white-space: nowrap;
        border-left: 0;
        border-radius: 6px;
        padding: 7px 12px;
        border: 1px solid var(--nv-border-strong);
    }

    .nv-rail-item.active { border-color: var(--nv-accent); color: var(--nv-accent-deep); }
    .nv-rail-item .nv-ct { display: none; }
    .nv-lc-main { max-height: none; flex: 1; min-height: 0; }
    /* No celular a paleta NÃO é centralizada: o teclado virtual come metade da
       tela e a deixaria escondida atrás dele. Fica ancorada no topo, e o
       `transform` volta a ser só horizontal. */
    .nv-palette {
        top: 12px;
        transform: translateX(-50%);
    }
    .nv-barra { padding: 0 12px; }

    /* As ações quebram em várias linhas no celular.
       O `flex-wrap: wrap` da faixa resolve quando o GRUPO cabe na largura, mas
       a ficha do associado leva 8 botões que somam ~518px — mais do que os
       384px de um celular. Sem quebrar dentro do grupo, ele estourava a
       página e o dedo arrastava a tela inteira de lado (146px de rolagem
       horizontal medidos em 384px de viewport).
       Continua SEM `overflow` (ver `.nv-barra-acoes`): o split-button "Rendas
       extras" tem `dropdown-menu` absoluto, e recortar aqui o esconderia. */
    .nv-barra-acoes {
        /* `flex: 1 1 100%` é o que faz a quebra acontecer de fato: como item
           flex do `.nv-barra`, o grupo herda `flex-shrink: 0` e a largura de
           max-content (518px), então nunca ficava apertado o bastante para o
           próprio `flex-wrap` agir. Com base 100% ele ganha a linha inteira e
           passa a caber na largura da tela — aí os botões quebram dentro. */
        flex: 1 1 100%;
        min-width: 0;
        flex-wrap: wrap;
        margin-left: 0;
        row-gap: 6px;
    }
}

/* ── Impressão ───────────────────────────────────────────────────────────── */
/* O tema esconde `.aside/.header/.subheader/.offcanvas` sob `.print-content-only`
   (style.bundle.css, @media print). Os seletores novos precisam entrar na mesma
   lista, senão a navegação passa a sair impressa. Sobreposições (launcher,
   paleta, scrim) somem sempre — imprimir um menu aberto não faz sentido em
   cenário nenhum. */

@media print {
    /* Sem escopo em `.print-content-only`: essa classe é do tema e NÃO é aplicada
       em lugar nenhum deste app (grep em templates/ = zero). Escopar por ela
       deixaria o bloco inerte e a navegação sairia impressa em todo relatório de
       tela. Chrome e sobreposições somem sempre — ninguém imprime menu. */
    .nv-topbar,
    .nv-barra,
    .nv-scrim,
    .nv-launcher,
    .nv-palette { display: none !important; }

    .wrapper { padding-top: 0 !important; }
}