/* ==========================================================================
   NAVBAR DO PORTAL — Plano 53, PR 53.1
   Implementação da "Variação B v2" aprovada pelo responsável em 2026-09-22
   (protótipo `automacao-claude/prototipos/navbar-portal/
   navbar-portal-prototipo-v2.html` + `README-v2.md`), com a casca da
   **variante I — Integrada**, escolhida pela Gestão de Mídias em 2026-09-23
   sobre o protótipo v3 (`navbar-portal-prototipo-v3.html` + `README-v3.md`):
   barra encostada no topo e nas laterais, borda de 2px só embaixo e 16px de
   raio só nas duas quinas de baixo.

   ESCOPO. Tudo aqui está preso a `.navbar-portal`, a classe que só o `<nav>`
   de `templates/base.html` carrega. A barra do Facilita
   (`templates/chamados/base.html`, `.navbar-facilita`) não casa com nenhum
   seletor deste arquivo e continua exatamente como estava.

   ORDEM NA CASCATA. O `<link>` entra em `templates/base.html` DEPOIS de
   `base-site.css` e depois do `<style>` da base, e ANTES de
   `{% block base_css %}`/`{% block extra_css %}`. Isto é o que permite
   vencer, por ordem de origem, as regras genéricas de `.navbar` que o design
   system universal declara com `!important` e que continuam valendo para o
   Facilita — e é também o que mantém a tela (e a base do Facilita) mandando
   na própria página, como sempre mandaram.

   POR QUE TANTO `!important` E TANTO `.navbar.navbar-portal`. `base-site.css`
   escreve a navbar antiga com `!important` em quase toda declaração, e
   compartilha esses seletores com o Facilita — apagá-los quebraria a barra
   dele. Então o que sobrou foi empatar em especificidade (`.navbar` +
   `.navbar-portal` = duas classes, o mesmo peso de `.navbar` +
   `:not(.navbar-facilita)`) e vencer por vir depois.

   SEM `:root`. Nenhuma variável deste arquivo mora na raiz do documento, de
   propósito: `chamados/tests/test_paridade_tokens_portal.py` fotografa o
   `:root` de cada tela e um token novo ali mudaria a fotografia. As
   variáveis vivem no próprio `.navbar-portal`.

   SEM `translateX` E SEM `left: 50%`. Os menus suspensos usam o alinhamento
   à esquerda padrão do Bootstrap. É a decisão do briefing (pergunta 5 do
   README-v2) e é o que `portal/tests/test_navbar_portal_v2.py` e
   `portal/tests/test_navbar_estabilizacao_v2.py` guardam.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. MEDIDAS
   A barra tem três tamanhos (1400 / 820 / 390 do protótipo), mas só UM ponto
   de quebra: de 390 a 1400 as medidas são fluidas, escritas em `clamp()`.
   Cada `clamp()` é a reta que passa pelos dois pontos medidos no protótipo —
   por exemplo a logomarca vai de 46px em 390 a 58px em 820 (12px em 430px de
   largura = 2,79vw) e trava nos dois extremos.

   Isso não é preciosismo: cada `@media` novo entra na fotografia de paridade
   de CSS de todas as telas (`chamados/tests/data/paridade_css_*.json`), e o
   arquivo declara três condições — duas do ponto de expansão e a de
   movimento reduzido. Um quarto ponto de quebra só para separar tablet de
   celular custaria outra condição e não mudaria um pixel do resultado.

   A regra que manda em todas as larguras é a folga: pelo menos 10px entre a
   logomarca e cada borda da barra (94 = 74 + 10 + 10). A borda de 2px fica
   por fora desses 94: medida de fora a fora, a barra tem 96px no desktop.

   UMA ALTURA SÓ POR LARGURA. Navbar fixa grande, sem estado compacto
   (decisão do responsável, 2026-09-23): a barra não muda de tamanho ao
   rolar. Ela acompanha a rolagem (`sticky-top`) com exatamente o desenho do
   topo da página — mesma altura, mesma logomarca de 74px, mesma faixa de
   8px, mesmos cantos. O que varia é só a largura da janela, pelos dois
   blocos `@media` da seção 8; nada varia pela posição da página.
   -------------------------------------------------------------------------- */
.navbar.navbar-portal {
    /* cores da identidade, repetidas aqui para o arquivo ser autocontido */
    --nbp-azul-escuro: #071D41;   /* borda, texto, sublinhado do ativo */
    --nbp-azul: #0D3272;          /* links, botão Facilita, anel de foco */
    --nbp-doe: #E4002B;
    --nbp-doe-hover: #B00020;
    --nbp-tinta: #EEF2FB;         /* fundo de hover e do item ativo */
    --nbp-branco: #ffffff;

    /* as cinco cores amostradas da estrela da logomarca */
    --nbp-faixa-verde: #7AB929;
    --nbp-faixa-azul: #2E8BC9;
    --nbp-faixa-roxo: #93278F;
    --nbp-faixa-vermelho: #D6283B;
    --nbp-faixa-laranja: #F5901F;

    /* faixa decorativa do topo: 8px por decisão do responsável de 2026-09-22
       (era 6px no protótipo v2) */
    --nbp-faixa: 8px;

    --nbp-logo: clamp(46px, 35.1px + 2.79vw, 58px);
    --nbp-altura: clamp(68px, 57.1px + 2.79vw, 80px);
    --nbp-pad: clamp(14px, 10.4px + 0.93vw, 18px);

    /* Variante I — Integrada (decisão da Gestão de Mídias, 2026-09-23):
       a barra encosta no topo e nas laterais, e a borda de baixo e o raio
       das duas quinas de baixo são os mesmos em todas as larguras. Por isso
       estes dois valores são fixos, e não `clamp()`: não há faixa em que
       eles mudem. A borda é de 2px, e não de 1,5px, porque em monitor comum
       (`devicePixelRatio: 1`) o navegador arredonda 1,5px para 1px de tela —
       medido no protótipo v3 —, e a decisão pediu uma borda que se veja. */
    --nbp-borda: 2px;
    --nbp-raio: 16px;

    --nbp-curva: cubic-bezier(0.16, 1, 0.3, 1);
}

/* --------------------------------------------------------------------------
   2. A CASCA — variante I, Integrada
   Decisão da Gestão de Mídias (2026-09-23), sobre o protótipo v3: a barra é a
   borda superior da página, não uma placa pousada sobre ela. Encosta no topo
   e nas laterais da janela, a faixa colorida fica colada logo acima, e o que
   a separa do conteúdo é uma borda só, embaixo, de 2px em `#071D41`, com as
   duas quinas de baixo arredondadas em 16px.

   Isto substitui a variante S (placa flutuante), que era a da v2: margem de
   24px nas laterais, 14px de folga sob a faixa, contorno fechado e 20px nos
   quatro cantos. O conteúdo de dentro não mudou — só a casca.

   Nada aqui mora em `@media`: a casca da I é a mesma em todas as larguras. É
   a regra da seção 8 aplicada ao contrário — o que vale nas duas faixas fica
   fora delas.
   -------------------------------------------------------------------------- */
.navbar.navbar-portal {
    display: block !important;
    padding: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
    transition: none !important;
    font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
}

/* Faixa decorativa das cinco cores da logomarca. É `aria-hidden` no HTML:
   não carrega informação nenhuma, é assinatura visual. Na variante I ela
   encosta na barra: não há folga entre as duas. */
.navbar.navbar-portal .navbar-portal-faixa {
    height: var(--nbp-faixa);
    background: linear-gradient(90deg,
        var(--nbp-faixa-verde) 0 20%,
        var(--nbp-faixa-azul) 20% 40%,
        var(--nbp-faixa-roxo) 40% 60%,
        var(--nbp-faixa-vermelho) 60% 80%,
        var(--nbp-faixa-laranja) 80% 100%);
}

/* A barra, igual em qualquer posição da página: branco sólido, largura da
   janela, borda de 2px só embaixo e 16px nas duas quinas de baixo. `margin:
   0` e `border: 0` antes da borda de baixo são declarados, não herdados,
   para a casca não depender de nenhuma outra folha.

   Navbar fixa grande, sem estado compacto (decisão do responsável,
   2026-09-23). Até esta revisão havia uma segunda versão desta regra, presa
   a uma classe que um script punha ao rolar: raio zero, fundo a 94% com
   desfoque e a faixa em 5px. Ela saiu, e o script junto. O fundo continua
   sólido também com a página rolada.

   A sombra baixa abaixo é a que separa a barra do conteúdo que passa por
   baixo dela, e ela é permanente — a mesma no topo e no meio da página. Uma
   sombra que só aparecesse ao rolar pediria de volta um script que vigia a
   rolagem, para ganhar um efeito que a sombra fixa já entrega. Decisão
   registrada no handoff. */
.navbar.navbar-portal .navbar-portal-barra {
    margin: 0;
    border: 0;
    border-bottom: var(--nbp-borda) solid var(--nbp-azul-escuro);
    border-radius: 0 0 var(--nbp-raio) var(--nbp-raio);
    background: var(--nbp-branco);
    box-shadow: 0 6px 18px rgba(7, 29, 65, 0.10);
    color: var(--nbp-azul-escuro);
}

/* A fileira. `.navbar > .container-fluid` do Bootstrap não alcança este
   container (ele está dentro da barra branca), então o flex é declarado aqui. */
.navbar.navbar-portal .container-fluid {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding: 0 var(--nbp-pad);
    min-height: var(--nbp-altura);
}

/* --------------------------------------------------------------------------
   3. LOGOMARCA
   O lockup horizontal com o nome em azul-escuro que a Mídias entregou, sem
   selo atrás e sem recorte por CSS: é um `<img>` comum em duas densidades.
   A altura manda; a largura sai da proporção do arquivo (256 × 74, 3,46:1).

   O arquivo é recortado rente à arte: a imagem de 74px tem 74px de lockup.
   (Na primeira versão desta PR o recorte levou junto um halo de pixels
   quase invisíveis — alpha de 1 a 3 — e a arte ocupava só 46 dos 74px. A
   catraca `test_a_arte_ocupa_a_altura_inteira_da_imagem` impede a volta.)
   -------------------------------------------------------------------------- */
.navbar.navbar-portal .navbar-brand {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    padding: 0;
    margin: 0;
    border-radius: 10px;
}

/* `!important` na altura e na largura porque o que se vence aqui é o
   `.navbar-brand img { height: 67.5px !important; width: auto !important }`
   do design system universal, que fica para o Facilita.

   `max-width` é a folga dos celulares estreitos. Com a arte a 46px, o lockup
   mede 159px, e logomarca + "Doe Agora" + hambúrguer + respiros somam 372px
   — cabem em 375 e em 390, mas não em 360, onde o hambúrguer cairia para uma
   segunda linha. O teto só morde abaixo de ~375px; ali a imagem encolhe na
   largura e o `object-fit: contain` a reduz inteira, sem deformar. Acima
   disso ele é maior que a própria logomarca e não faz nada. */
.navbar.navbar-portal .navbar-brand img {
    height: var(--nbp-logo) !important;
    width: auto !important;
    max-width: calc(100vw - 216px);
    max-height: none !important;
    object-fit: contain;
    object-position: left center;
    display: block;
    transition: transform 0.25s var(--nbp-curva);
}

.navbar.navbar-portal .navbar-brand:hover img {
    transform: scale(1.04);
}

.navbar.navbar-portal .navbar-brand:focus-visible {
    outline: 3px solid var(--nbp-azul);
    outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   4. LINKS
   O sublinhado do item ativo é azul-escuro (decisão v2, item 1: o vermelho
   passou a ser exclusividade do "Doe Agora"). Ele é desenhado com
   `background-image`, e não com um `::after` posicionado — assim a navbar do
   portal não precisa de `position: absolute` em lugar nenhum.
   -------------------------------------------------------------------------- */
.navbar.navbar-portal .navbar-nav {
    align-items: center;
    gap: 0;
    margin: 0 auto;
    padding: 0;
}

.navbar.navbar-portal .nav-link {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    font-family: 'Inter', sans-serif !important;
    font-size: 0.9rem !important;
    font-weight: 600 !important;
    color: var(--nbp-azul) !important;
    opacity: 1 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 10px !important;
    margin: 0 !important;
    padding: 10px 11px !important;
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.navbar.navbar-portal .nav-link:hover,
.navbar.navbar-portal .nav-link:focus,
.navbar.navbar-portal .nav-link.show {
    color: var(--nbp-azul-escuro) !important;
    background-color: var(--nbp-tinta) !important;
    border-color: transparent !important;
    transform: translateY(-1px);
}

.navbar.navbar-portal .nav-link.active {
    color: var(--nbp-azul-escuro) !important;
    font-weight: 700 !important;
    background-color: var(--nbp-tinta) !important;
    background-image: linear-gradient(var(--nbp-azul-escuro), var(--nbp-azul-escuro)) !important;
    background-size: calc(100% - 22px) 3px !important;
    background-position: center bottom 5px !important;
    background-repeat: no-repeat !important;
    border-radius: 10px !important;
    box-shadow: none !important;
    border: 0 !important;
    padding: 10px 11px !important;
}

.navbar.navbar-portal .nav-link:focus-visible {
    outline: 3px solid var(--nbp-azul);
    outline-offset: 2px;
}

.navbar.navbar-portal .dropdown-toggle::after {
    margin-left: 0.25rem;
    border-top-color: currentColor;
}

/* --------------------------------------------------------------------------
   5. MENUS SUSPENSOS
   Alinhados à esquerda, como o Bootstrap entrega. Nada de `left: 50%` nem de
   `translateX(-50%)`.
   -------------------------------------------------------------------------- */
.navbar.navbar-portal .dropdown-menu {
    min-width: 250px;
    padding: 8px !important;
    margin-top: 10px;
    background-color: var(--nbp-branco) !important;
    border: 1px solid rgba(7, 29, 65, 0.10) !important;
    border-top: 3px solid var(--nbp-azul-escuro) !important;
    border-radius: 14px !important;
    box-shadow: 0 18px 42px rgba(7, 29, 65, 0.22) !important;
}

.navbar.navbar-portal .dropdown-menu .dropdown-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 44px;
    font-family: 'Inter', sans-serif !important;
    font-size: 0.9rem !important;
    font-weight: 600 !important;
    color: var(--nbp-azul) !important;
    background: transparent !important;
    border-radius: 9px !important;
    padding: 11px 12px !important;
    transition: background-color 0.16s ease, padding-left 0.16s ease;
}

.navbar.navbar-portal .dropdown-menu .dropdown-item:hover,
.navbar.navbar-portal .dropdown-menu .dropdown-item:focus {
    background-color: var(--nbp-tinta) !important;
    color: var(--nbp-azul-escuro) !important;
    padding-left: 16px !important;
}

.navbar.navbar-portal .dropdown-menu .dropdown-item.active,
.navbar.navbar-portal .dropdown-menu .dropdown-item:active {
    background: var(--nbp-tinta) !important;
    color: var(--nbp-azul-escuro) !important;
    font-weight: 700 !important;
    border-radius: 9px !important;
}

.navbar.navbar-portal .dropdown-menu .dropdown-item.active span,
.navbar.navbar-portal .dropdown-menu .dropdown-item:active span {
    color: var(--nbp-azul-escuro) !important;
}

.navbar.navbar-portal .dropdown-menu .dropdown-item.active i,
.navbar.navbar-portal .dropdown-menu .dropdown-item:active i {
    color: var(--nbp-azul) !important;
}

.navbar.navbar-portal .dropdown-menu .dropdown-item:focus-visible {
    outline: 3px solid var(--nbp-azul);
    outline-offset: -2px;
}

.navbar.navbar-portal .dropdown-submenu > a.active {
    background: var(--nbp-tinta) !important;
    color: var(--nbp-azul-escuro) !important;
}

/* --------------------------------------------------------------------------
   6. BOTÕES
   Nenhum deles usa a classe `.btn`: o design system universal pinta
   `.navbar .btn` com `!important` para o Facilita, e a barra do portal não
   tem mais nada a ver com aquele desenho.
   -------------------------------------------------------------------------- */
/* `.navbar-actions` não declara nada fora de `@media`, de propósito. Ela
   tinha aqui um `flex: 0 0 auto !important` e um `width: auto !important`
   para vencer os 445px fixos que `base-site.css` reservava — regra que esta
   PR removeu de lá. Com a fonte da disputa apagada, o `!important` deixou de
   ter função e virou risco: ele venceria o `width: 100%` do painel, que é uma
   declaração comum. A largura das ações é decidida uma vez em cada bloco
   `@media` da seção 8, e em lugar nenhum além deles. */

.navbar.navbar-portal .navbar-portal-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    font-size: 0.88rem;
    font-weight: 600;
    line-height: 1;
    min-height: 44px;
    padding: 0 15px;
    border-radius: 11px;
    border: 1.5px solid transparent;
    transition: background-color 0.2s ease, color 0.2s ease,
                border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.navbar.navbar-portal .navbar-portal-btn:hover {
    transform: translateY(-2px);
}

.navbar.navbar-portal .navbar-portal-btn:focus-visible {
    outline: 3px solid var(--nbp-azul);
    outline-offset: 3px;
}

.navbar.navbar-portal .navbar-portal-icone {
    width: 17px;
    height: 17px;
    flex: 0 0 auto;
}

/* Ícone do Facilita — candidato C, "estrela de pessoas", escolhido pelo
   responsável. Um pouco maior que os 17px do protótipo (decisão final:
   ~19–20px), porque as cinco figuras precisam de área para se distinguirem. */
.navbar.navbar-portal .navbar-portal-icone--facilita {
    width: 19.5px;
    height: 19.5px;
}

.navbar.navbar-portal .navbar-portal-btn--facilita {
    background: var(--nbp-azul);
    color: var(--nbp-branco);
    box-shadow: 0 5px 14px rgba(13, 50, 114, 0.24);
}

.navbar.navbar-portal .navbar-portal-btn--facilita:hover,
.navbar.navbar-portal .navbar-portal-btn--facilita:focus {
    background: var(--nbp-azul-escuro);
    color: var(--nbp-branco);
}

/* "Minha Conta" (logado) e "Entrar" (visitante): fundo branco, texto e borda
   azul-escuros — decisão v2, item 2. */
.navbar.navbar-portal .navbar-portal-btn--conta {
    background: var(--nbp-branco);
    color: var(--nbp-azul-escuro);
    border-color: var(--nbp-azul-escuro);
}

.navbar.navbar-portal .navbar-portal-btn--conta:hover,
.navbar.navbar-portal .navbar-portal-btn--conta:focus {
    background: var(--nbp-tinta);
    color: var(--nbp-azul-escuro);
    border-color: var(--nbp-azul-escuro);
}

.navbar.navbar-portal .navbar-portal-btn--conta.dropdown-toggle::after {
    margin-left: 0.15rem;
}

.navbar.navbar-portal .navbar-portal-conta {
    display: inline-flex;
}

.navbar.navbar-portal .navbar-portal-conta .dropdown-menu {
    min-width: 210px;
}

.navbar.navbar-portal .navbar-portal-conta .dropdown-item {
    justify-content: flex-start;
}

.navbar.navbar-portal .navbar-portal-conta .dropdown-item svg {
    width: 17px;
    height: 17px;
    flex: 0 0 auto;
    opacity: 0.8;
}

/* O formulário de saída (POST, como no Facilita) não pode alterar o desenho
   do item do menu. O botão preenche a linha por `flex`, e não por
   `width: 100%`: esta regra vale nas duas faixas de largura, e
   `portal/tests/test_navbar_portal_v2.py` reserva `width: 100%` para o bloco
   do painel — ver a revisão do SM anotada na seção 7. */
.navbar.navbar-portal .navbar-portal-sair {
    display: flex;
    margin: 0;
}

.navbar.navbar-portal .navbar-portal-sair button {
    flex: 1 1 auto;
    background: transparent;
    border: 0;
    text-align: left;
    font: inherit;
}

/* "Doe Agora" fica SEMPRE na barra, fora do painel do celular — decisão do
   responsável. É um elemento só: no desktop ele fecha a fileira de ações; no
   celular fica à direita da logomarca, ao lado do hambúrguer. */
.navbar.navbar-portal .navbar-portal-doe {
    margin-left: auto;
    background: var(--nbp-doe);
    color: var(--nbp-branco);
    box-shadow: 0 6px 18px rgba(228, 0, 43, 0.32),
                inset 0 0 0 1px rgba(255, 255, 255, 0.22);
    padding: 0 clamp(11px, 7.4px + 0.93vw, 15px);
    font-size: clamp(0.82rem, 0.766rem + 0.14vw, 0.88rem);
}

.navbar.navbar-portal .navbar-portal-doe:hover,
.navbar.navbar-portal .navbar-portal-doe:focus {
    background: var(--nbp-doe-hover);
    color: var(--nbp-branco);
    box-shadow: 0 9px 22px rgba(176, 0, 32, 0.4),
                inset 0 0 0 1px rgba(255, 255, 255, 0.28);
}

.navbar.navbar-portal .navbar-portal-doe .navbar-portal-icone {
    width: 18px;
    height: 18px;
}

/* --------------------------------------------------------------------------
   7. HAMBÚRGUER
   Só a aparência do botão, que é a mesma nas duas faixas de largura. O que
   ele faz — aparecer ou sumir — está nos dois blocos `@media` da seção 8.
   -------------------------------------------------------------------------- */
.navbar.navbar-portal .navbar-toggler {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    flex: 0 0 auto;
    padding: 0;
    border-radius: 12px !important;
    background: var(--nbp-branco);
    border: 1.5px solid var(--nbp-azul-escuro) !important;
    color: var(--nbp-azul-escuro);
    box-shadow: none;
}

.navbar.navbar-portal .navbar-toggler:hover {
    background: var(--nbp-tinta);
}

.navbar.navbar-portal .navbar-toggler:focus,
.navbar.navbar-portal .navbar-toggler:focus-visible {
    outline: 3px solid var(--nbp-azul);
    outline-offset: 3px;
    box-shadow: none;
}

/* O ícone do Bootstrap herda a cor do tema `navbar-dark`, que esta barra não
   usa mais. Desenhado aqui em azul-escuro para não depender daquela classe. */
.navbar.navbar-portal .navbar-toggler-icon {
    width: 24px;
    height: 24px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23071D41' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M4 7h16M4 12h16M4 17h16'/%3E%3C/svg%3E");
}

/* ==========================================================================
   8. AS DUAS FAIXAS DE LARGURA

   REVISÃO DO SM (2026-09-22): as regras do painel vazavam para o desktop.
   Elas moravam FORA de `@media`, com quatro classes
   (`.navbar.navbar-portal .navbar-collapse .navbar-actions`), e o bloco de
   desktop as contradizia com três (`.navbar.navbar-portal .navbar-actions`).
   Quatro classes vencem três: a 1400px o grupo de ações continuava em coluna
   e com `width: 100% !important`, o botão "Facilita" esticava por 1073px,
   "Minha Conta" caía para a segunda linha e a barra media 131px em vez de 94
   (152 em vez de 72 no estado compacto, que depois saiu — seção 1). Os
   links, espremidos, colavam na logomarca.

   A correção é estrutural, não um `!important` a mais: **toda regra que vale
   para uma faixa só mora dentro do `@media` daquela faixa**, e fora de
   `@media` fica apenas o que vale nas duas. Assim as duas versões nunca
   disputam especificidade — elas nem chegam a existir ao mesmo tempo.

   `portal/tests/test_navbar_portal_v2.py::
   test_as_regras_do_painel_nao_vazam_para_o_desktop` é a catraca: ele lê o
   arquivo, isola o bloco `@media (max-width: 1399.98px)` contando chaves e
   exige que `flex-direction: column` e `width: 100%` só apareçam lá dentro —
   e sem `!important`.
   ========================================================================== */

/* --------------------------------------------------------------------------
   8.1 DESKTOP — a partir de 1400px

   Era 1536px. Com "Painel de Gestão" fora da barra do portal, o conjunto
   (logomarca + seis itens de menu + dois botões + Doe Agora) cabe folgado a
   partir de 1400px. A classe `navbar-expand-iac` continua no `<nav>` e é aqui
   que ela passa a significar alguma coisa.
   -------------------------------------------------------------------------- */
@media (min-width: 1400px) {
    .navbar.navbar-portal {
        --nbp-logo: 74px;
        --nbp-altura: 94px;
        --nbp-pad: 22px;
    }

    .navbar.navbar-portal .container-fluid {
        flex-wrap: nowrap;
        gap: 14px;
    }

    /* A ordem visual do desktop: logomarca, menu + ações, "Doe Agora" fechando
       a fileira. Na marcação o "Doe Agora" vem antes do painel, porque é assim
       que ele fica ao lado do hambúrguer no celular sem precisar existir duas
       vezes. */
    .navbar.navbar-portal .navbar-brand { order: 0; }
    .navbar.navbar-portal .navbar-collapse { order: 1; }
    .navbar.navbar-portal .navbar-portal-doe { order: 2; }

    /* `!important` no `display` porque o que se vence aqui é o
       `.collapse:not(.show) { display: none }` do próprio Bootstrap, que só
       sai de cena com ele. É a mesma declaração que `base-site.css` fazia
       para `.navbar-expand-iac .navbar-collapse` antes desta PR. */
    .navbar.navbar-portal .navbar-collapse {
        display: flex !important;
        flex: 1 1 auto;
        min-width: 0;
        align-items: center;
        gap: 14px;
        padding: 0;
    }

    .navbar.navbar-portal .navbar-toggler {
        display: none;
    }

    /* O menu centrado entre a logomarca e as ações: as margens automáticas
       comem a sobra dos dois lados. (A marcação traz `mx-auto`, do Bootstrap,
       que faz o mesmo com `!important`; a regra abaixo é o que mantém o
       comportamento caso a utilitária saia do template um dia.) */
    .navbar.navbar-portal .navbar-nav {
        flex-direction: row;
        flex-wrap: nowrap;
        margin-left: auto;
        margin-right: auto;
    }

    .navbar.navbar-portal .navbar-nav .nav-link {
        justify-content: center;
        min-height: 0;
        padding: 10px 11px !important;
        border-radius: 10px !important;
        font-size: 0.9rem !important;
    }

    /* Os menus voltam a flutuar sobre a página, abrindo no ponteiro ou pela
       classe `.show` que o Bootstrap aplica no clique e no teclado. */
    .navbar.navbar-portal .navbar-nav .dropdown-menu {
        position: absolute;
        min-width: 250px;
        margin: 10px 0 0;
    }

    .navbar.navbar-portal .nav-item.dropdown > .dropdown-menu {
        display: block;
        opacity: 0;
        visibility: hidden;
        transform: translateY(10px);
        transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease;
    }

    .navbar.navbar-portal .nav-item.dropdown:hover > .dropdown-menu,
    .navbar.navbar-portal .nav-item.dropdown > .dropdown-menu.show {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

    /* Submenu "Projetos & Programas": entre 1400 e 1536 o `<style>` da base
       ainda o empilha (aquele bloco é do hotfix portal 4 e continua intocado).
       Aqui ele volta a ser um menu lateral em toda a faixa de desktop. */
    .navbar.navbar-portal .dropdown-submenu > .dropdown-menu {
        position: absolute;
        top: 0;
        left: 100%;
        margin-top: -0.25rem;
        margin-left: 0.1rem;
        min-width: 228px;
        background: var(--nbp-branco) !important;
        box-shadow: 0 18px 42px rgba(7, 29, 65, 0.22) !important;
        border-left: 1px solid rgba(7, 29, 65, 0.10) !important;
    }

    /* As ações são uma fileira que não quebra e que ocupa só o que os botões
       pedem — o resto da largura é do menu, que se centra nele.

       Revisão do SM (2ª): o bloco declara também a ausência de enfeite
       vertical (`margin`, `padding`, `border`) e o próprio alinhamento
       (`align-self`), em vez de contar com o fato de ninguém mais os
       declarar. São as cinco propriedades que, somadas, decidem se os três
       botões ficam no mesmo eixo: um `padding-top` de 16px e um `border-top`
       de 1px aqui empurram Facilita e Minha Conta 17px para baixo de "Doe
       Agora", que é filho do `.container-fluid` e não passa por esta caixa.
       Com o bloco afirmando os cinco, a fileira não depende de omissão
       alheia — e a caixa mede exatamente a altura dos botões, 44px. */
    .navbar.navbar-portal .navbar-actions {
        flex: 0 0 auto;
        flex-direction: row;
        flex-wrap: nowrap;
        width: auto;
        align-self: center;
        margin: 0;
        padding: 0;
        border: 0;
    }

    /* `.navbar-collapse` no seletor não é enfeite: "Doe Agora" vive FORA do
       painel, e é o par desta regra no bloco 8.2 que não pode alcançá-lo. */
    .navbar.navbar-portal .navbar-collapse .navbar-portal-btn {
        width: auto;
        min-height: 44px;
        font-size: 0.88rem;
    }
}

/* --------------------------------------------------------------------------
   8.2 PAINEL — até 1399,98px

   Tudo o que só vale com o hambúrguer na tela. Nenhuma destas regras existe
   acima de 1400px, e por isso nenhuma precisa de `!important` para ceder a
   vez: o bloco inteiro simplesmente não casa.

   Os poucos `!important` que sobraram aqui não disputam com o bloco de
   desktop — eles vencem o `.dropdown-menu` do design system universal
   (`base-site.css`, uma classe, `!important`) e a versão genérica da seção 5
   deste arquivo (três classes, `!important`). Entre dois `!important`, quem
   decide é a especificidade, e por isso a regra do painel também o carrega.
   -------------------------------------------------------------------------- */
@media (max-width: 1399.98px) {
    /* Logomarca, "Doe Agora", hambúrguer — e o painel embaixo, ocupando a
       linha inteira quando aberto. */
    .navbar.navbar-portal .navbar-brand { order: 0; }
    .navbar.navbar-portal .navbar-portal-doe { order: 1; }
    .navbar.navbar-portal .navbar-toggler { order: 2; }
    .navbar.navbar-portal .navbar-collapse { order: 3; }

    /* O painel fica no fluxo, dentro da própria barra branca: nada de
       `position: absolute`, nada de sobrepor a página por conta própria. */
    .navbar.navbar-portal .navbar-collapse {
        flex-basis: 100%;
    }

    .navbar.navbar-portal .navbar-collapse.show,
    .navbar.navbar-portal .navbar-collapse.collapsing {
        padding: 4px 0 14px;
    }

    .navbar.navbar-portal .navbar-nav {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        margin: 0;
    }

    .navbar.navbar-portal .navbar-nav .nav-item {
        width: 100%;
    }

    .navbar.navbar-portal .navbar-nav .nav-link {
        width: 100%;
        justify-content: space-between;
        min-height: 50px;
        padding: 12px 14px !important;
        border-radius: 11px !important;
        font-size: 1rem !important;
    }

    /* No painel o item ativo ganha a barra à esquerda; o sublinhado sobraria. */
    .navbar.navbar-portal .navbar-nav .nav-link.active {
        background-image: none !important;
        box-shadow: inset 3px 0 0 var(--nbp-azul-escuro) !important;
    }

    .navbar.navbar-portal .navbar-nav .dropdown-menu {
        width: 100%;
        min-width: 0;
        margin: 2px 0 6px 12px;
        padding: 2px 0 2px 10px !important;
        background: transparent !important;
        border: 0 !important;
        border-left: 2px solid rgba(7, 29, 65, 0.18) !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }

    /* Os botões empilhados, em largura total. `align-items` fica com o
       `align-items-center` do template: com cada botão a 100% da largura,
       centralizar não move nada. */
    .navbar.navbar-portal .navbar-actions {
        width: 100%;
        flex-direction: column;
        margin-top: 12px;
        padding-top: 12px;
        border-top: 1px solid rgba(7, 29, 65, 0.12);
    }

    /* `.navbar-collapse` é o que separa os botões do painel do "Doe Agora",
       que fica sempre na barra, fora do painel, e continua com a largura do
       próprio conteúdo. Sem esse degrau no seletor, o "Doe Agora" esticaria
       pela barra inteira no celular. */
    .navbar.navbar-portal .navbar-collapse .navbar-portal-btn {
        width: 100%;
        min-height: 50px;
        font-size: 1rem;
    }

    .navbar.navbar-portal .navbar-collapse .navbar-portal-conta {
        display: flex;
        flex-direction: column;
        width: 100%;
    }

    /* No painel, "Minha Conta" some: é só o gatilho do menu e leva ao mesmo
       destino que "Meu perfil". Ficam os destinos reais — Meu perfil e Sair —,
       já em forma de botão. */
    .navbar.navbar-portal .navbar-collapse .navbar-portal-conta > .navbar-portal-btn {
        display: none;
    }

    .navbar.navbar-portal .navbar-collapse .navbar-portal-conta .dropdown-menu {
        display: flex;
        flex-direction: column;
        gap: 10px;
        /* Fora do `.navbar-nav`, o `.dropdown-menu` do Bootstrap nasce
           `position: absolute`. No painel ele é conteúdo, não camada. */
        position: static;
        width: 100%;
        margin: 0;
        padding: 0 !important;
        border: 0 !important;
        box-shadow: none !important;
    }

    .navbar.navbar-portal .navbar-collapse .navbar-portal-conta .dropdown-item {
        justify-content: center;
        min-height: 50px;
        border: 1.5px solid rgba(7, 29, 65, 0.38) !important;
        border-radius: 11px !important;
        color: var(--nbp-azul-escuro) !important;
        font-size: 1rem !important;
    }
}

/* --------------------------------------------------------------------------
   9. MOVIMENTO REDUZIDO
   Sem estado compacto, a barra não se move ao rolar. O que sobra de
   movimento é pequeno — o botão que sobe 2px no ponteiro, a logomarca que
   cresce 4%, o menu suspenso que desliza 10px ao abrir — e quem pediu ao
   sistema para reduzir animações recebe tudo isso parado.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .navbar.navbar-portal,
    .navbar.navbar-portal *,
    .navbar.navbar-portal *::before,
    .navbar.navbar-portal *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }

    .navbar.navbar-portal .navbar-brand:hover img,
    .navbar.navbar-portal .navbar-portal-btn:hover,
    .navbar.navbar-portal .nav-link:hover {
        transform: none;
    }
}