/* /Diagnostics/LogViewport.razor.rz.scp.css */ /* O bloco rola DENTRO de si: sem isto uma linha longa empurra a página inteira para o lado. */ .log-pre[b-is4jdp8ga6] { max-height: 60vh; overflow: auto; margin-bottom: 0; /* Veio do `
` que este componente substituiu — num `div` a fonte precisa ser declarada. */
    font-family: var(--bs-font-monospace);
    font-size: .875em;
}

/* Superfície escura fixa nos dois temas: é a aparência de terminal do conteúdo mostrado aqui, e o
   contraste foi medido contra ela. */
.log-pre-dark[b-is4jdp8ga6] {
    background: #1e1e1e;
    color: #e8e8e8;
}

/* Cada linha é um bloco que preserva o próprio espaço em branco. É o que permite o container ser um
   `div` em vez de um `
`. */
.log-linha[b-is4jdp8ga6] {
    display: block;
    white-space: pre-wrap;
    word-break: break-word;
}

/* Níveis por cor. A cor NÃO é o único sinal — o nível segue escrito na própria linha, e quem não
   distingue as duas ainda lê qual é. Tons medidos contra a superfície escura. */
.log-linha-aviso[b-is4jdp8ga6] {
    color: var(--at-warn);
}

.log-linha-erro[b-is4jdp8ga6] {
    color: var(--at-fail);
}

/* ⚠️ No bloco de terminal a superfície é #1e1e1e SEMPRE, tema claro incluído — então ali valem as
   cores do par ESCURO, e não as do tema. Medido: o par claro dá 3,39:1 no aviso e 2,58:1 no erro
   sobre esse fundo, os dois reprovados. Com o par escuro, 9,99:1 e 6,03:1. */
.log-pre-dark .log-linha-aviso[b-is4jdp8ga6] {
    color: var(--at-warn-escuro);
}

.log-pre-dark .log-linha-erro[b-is4jdp8ga6] {
    color: var(--at-fail-escuro);
}
/* /Layout/AppFooter.razor.rz.scp.css */
/* Assinatura discreta: é referência, não conteúdo — não deve competir com a página. */
.app-footer[b-xvxz0xm4i1] {
    /* Altura vinda do token compartilhado com o rodapé da coluna lateral (--at-footer-h): é o que
       mantém os dois filetes na mesma linha. Centrar por flex, e não por padding, porque a
       safe-area do iPhone entra como padding e desalinharia o texto se ele dependesse dela. */
    display: flex;
    align-items: center;
    justify-content: center;
    height: calc(var(--at-footer-h) + env(safe-area-inset-bottom, 0px));
    padding: 0 1.5rem env(safe-area-inset-bottom, 0px);
    font-size: .72rem;
    /* Um passo além do --at-text-muted, misturando com o fundo. Feito por color-mix e NÃO por
       `opacity`: opacidade multiplica contra o que estiver atrás, então o mesmo valor daria tons
       diferentes conforme a superfície — aqui a cor é a mesma em qualquer fundo do tema. */
    /* A mistura é POR TEMA, e não um valor só, porque o --at-text-muted de cada um parte de um lugar
       diferente: no claro (#5c6b7a) ele já nasce perto do piso — mede 5,05:1 puro —, então quase não
       há margem para apagar; no escuro (#98a5b3) sobra folga. Um valor único ou reprovaria no claro
       ou seria tímido demais no escuro.

       Padrão = claro. Medido: 4,56:1. */
    color: color-mix(in srgb, var(--at-text-muted) 95%, var(--at-surface-sunken));
    border-top: 1px solid var(--at-border);
}

/* No escuro há folga para apagar mais: 75% mede 4,65:1 e ainda passa o AA. */
[data-bs-theme="dark"] .app-footer[b-xvxz0xm4i1] {
    color: color-mix(in srgb, var(--at-text-muted) 75%, var(--at-surface-sunken));
}
/* /Layout/EmptyLayout.razor.rz.scp.css */
/* A casca é quem tem a altura da tela; o conteúdo cresce para preencher o que sobra acima do rodapé.
   Antes era a própria página de login que declarava `min-height: 100vh` — com o rodapé depois dela,
   isso o empurraria para fora da tela, e só se chegaria nele rolando uma página que não rola. */
.empty-shell[b-wai7ihab68] {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background-color: var(--at-surface-sunken);
}
/* /Layout/InstallTip.razor.rz.scp.css */
/* O texto do banner ocupa toda a linha e, sendo o alerta um flex, o botão de fechar era espremido —
   medido, sobrava 30 px de largura mesmo com a largura declarada. */
.btn-close[b-a52pm07fpq] {
    flex: 0 0 auto;
}

/* O .btn-close do Bootstrap tem 1em: medido, dava 16x24 px de alvo — pequeno demais para o dedo,
   e este banner só aparece justamente em celular. Mesmo tratamento das outras ações da barra
   (app.css): cresce só onde o apontador é impreciso, sem inchar o layout no desktop. */
@media (pointer: coarse) {
    .btn-close[b-a52pm07fpq] {
        width: 2.75rem;
        height: 2.75rem;
        padding: 0;
        background-position: center;
    }
}
/* /Layout/MainLayout.razor.rz.scp.css */
.page[b-cjlcl2usvb] {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

main[b-cjlcl2usvb] {
    flex: 1;
    min-width: 0; /* deixa o conteúdo largo rolar em si, sem esticar o layout */
    background-color: var(--at-surface-sunken);
    /* Coluna com o conteúdo crescendo: sem isto, numa página curta o rodapé encostaria logo abaixo
       do último elemento, deixando um vazio embaixo dele. */
    display: flex;
    flex-direction: column;
}

.sidebar[b-cjlcl2usvb] {
    background-color: var(--at-rail);
    /* O padding da safe-area do iOS NÃO fica aqui: ele mora no .top-row do NavMenu. Aquele bloco
       pinta um rgba(0,0,0,.25) por cima do --at-rail, então a faixa da barra de status precisa ser
       do MESMO elemento — senão sobra um degrau entre um --at-rail puro em cima e o escurecido logo
       abaixo, que foi exatamente o que apareceu no iPhone. */
}

.top-row[b-cjlcl2usvb] {
    background-color: var(--at-surface);
    border-bottom: 1px solid var(--at-border);
    height: 3.5rem;
    display: flex;
    align-items: center;
    gap: .75rem;
}

/* ⚠️ O `:not(.top-brand)` NÃO é preciosismo — é o que faz a marca ter a própria cor.
   O `::deep` compila para `.top-row[b-x] a`, que soma um seletor de ELEMENTO e por isso vence
   `.top-brand[b-x]`: (0,3,1) contra (0,3,0). Sem a exclusão, a marca herdava a cor de AÇÃO da barra
   nos dois estados — cinza no normal e o accent no hover.

   ⛔ Foi por isso que fixar a cor nos estados da marca, em 2026-08-27, não resolveu: a regra estava
   certa e simplesmente perdia. O relato voltou em 2026-09-07 ("a logo acende ao tocar, e fica"), e no
   celular o `:hover` gruda até se tocar noutro lugar — daí parecer aceso, e não um piscar.

   Medido no navegador, no elemento real e em `:hover`: com a exclusão a cor vai de rgb(30,144,255)
   para o branco que a regra da marca manda. A marca é assinatura; esta regra é para as ações. */
.top-row[b-cjlcl2usvb]  a:not(.top-brand),
.top-row[b-cjlcl2usvb]  .btn-link {
    white-space: nowrap;
    text-decoration: none;
    color: var(--at-text-muted);
}

.top-row[b-cjlcl2usvb]  a:hover:not(.top-brand),
.top-row[b-cjlcl2usvb]  .btn-link:hover {
    color: var(--at-accent);
}

article.content[b-cjlcl2usvb] {
    padding-top: 1.5rem;
    padding-bottom: 2.5rem;
    flex: 1;   /* empurra o rodapé para o fim da tela nas páginas curtas */
    /* A safe-area do iPhone saiu daqui para o .app-footer: com o rodapé abaixo do conteúdo, é ELE o
       último elemento, e é dele que o indicador de início precisa se afastar. */
}

/* O hambúrguer e a marca da barra só existem no celular: em tela larga a navegação é a coluna
   lateral, que já carrega a marca no alto. */
.nav-toggle[b-cjlcl2usvb],
.top-brand[b-cjlcl2usvb],
/* Também some no desktop: girar o aparelho com o menu aberto deixaria um véu sobre um menu que ali
   é coluna fixa. */
.nav-backdrop[b-cjlcl2usvb] {
    display: none;
}

/* Empurra as ações para a direita, com ou sem a marca antes delas. */
.top-actions[b-cjlcl2usvb] {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: .75rem;
}

@media (max-width: 640.98px) {
    /* A barra ÚNICA: hambúrguer, página e ações na mesma linha. Assume a cor da navegação (era a
       clara do conteúdo) porque agora é ela que encosta na barra de status do iOS — o mesmo tom já
       usado pela marca no desktop, para as duas faixas não divergirem. */
    .top-row[b-cjlcl2usvb] {
        background-color: var(--at-rail);
        border-bottom-color: rgba(255, 255, 255, .07);
        /* No app instalado no iPhone a barra de status é opaca desde 2026-09-21 (index.html), e este
           inset vale 0 em pé. Fica assim mesmo: quem instalou antes e não reinstalou continua com a
           barra translúcida, e sem o padding o conteúdo passaria por baixo do relógio. */
        height: calc(3.5rem + env(safe-area-inset-top, 0px));
        padding-top: env(safe-area-inset-top, 0px);
        position: sticky;
        top: 0;
        z-index: 30;
    }

    .nav-toggle[b-cjlcl2usvb] {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 2.75rem;
        height: 2.75rem;
        flex: 0 0 auto;
        margin-left: -.75rem;
        padding: 0;
        background: none;
        border: 0;
        color: var(--at-rail-text-strong);
    }

    .nav-toggle svg[b-cjlcl2usvb] {
        width: 1.5rem;
        height: 1.5rem;
        fill: none;
        stroke: currentColor;
        stroke-width: 2;
        stroke-linecap: round;
    }

    /* A marca trunca em vez de empurrar as ações. Com a forma curta isso só aconteceria abaixo de
       360 px de tela (ela ocupa 100 px e o cromo fixo, 260) — rede de segurança, não o caso comum. */
    .top-brand[b-cjlcl2usvb] {
        display: block;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 1.05rem;
        font-weight: 600;
        letter-spacing: .01em;
        /* Virou  para levar à Início: sem estas duas, herdaria o azul e o sublinhado de link e
           deixaria de parecer a marca. O alvo de toque continua o do texto, que é o que se toca. */
        color: var(--at-rail-text-strong);
        text-decoration: none;
    }

    /* ⚠️ `:active` e `:visited` entram aqui, e não por simetria: no iPhone, TOCAR a marca a pintava de
       azul e ela FICAVA assim até se tocar em outro lugar da tela. O `:hover` e o `:focus` já estavam
       cobertos — o estado que faltava era justamente o do toque. Relatado pelo dono em 2026-08-27.

       O `-webkit-tap-highlight-color` é a outra metade: sem ele o iOS acende um retângulo cinza-azulado
       sobre a marca a cada toque. Nenhum dos dois aparece no desktop, então nenhum aparece num print. */
    .top-brand:hover[b-cjlcl2usvb],
    .top-brand:focus[b-cjlcl2usvb],
    .top-brand:focus-visible[b-cjlcl2usvb],
    .top-brand:active[b-cjlcl2usvb],
    .top-brand:visited[b-cjlcl2usvb] {
        color: var(--at-rail-text-strong);
        text-decoration: none;
    }

    .top-brand[b-cjlcl2usvb] {
        -webkit-tap-highlight-color: transparent;
    }

    /* Véu do menu aberto: escurece o conteúdo e recebe o toque que fecha. Começa ABAIXO da barra,
       para o hambúrguer continuar alcançável (tocar nele de novo também fecha). */
    .nav-backdrop[b-cjlcl2usvb] {
        display: block;
        position: fixed;
        top: calc(3.5rem + env(safe-area-inset-top, 0px));
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 15;
        background-color: rgba(0, 0, 0, .45);
    }

    /* O alternador de tema não aparece aqui. Duas razões, e a segunda decide: no piso da escada ele
   custa a marca (medido a 320 px, ela trunca), e há um só lugar para ele na interface — dois pontos
   de entrada para o mesmo controle é o que faz ninguém achar nenhum. Medidas em docs/UI-WEB.md. */
    .top-row[b-cjlcl2usvb]  .theme-toggle {
        display: none;
    }

    /* Os ícones da barra herdavam a cor do conteúdo; sobre a faixa escura eles sumiriam. */
    .top-row[b-cjlcl2usvb]  .icon-button {
        color: var(--at-rail-text);
    }

    .top-row[b-cjlcl2usvb]  .icon-button:hover {
        color: var(--at-rail-text-strong);
    }
}

@media (min-width: 641px) {
    .page[b-cjlcl2usvb] {
        flex-direction: row;
    }

    .sidebar[b-cjlcl2usvb] {
        width: 250px;
        height: 100vh;
        position: sticky;
        top: 0;
        flex-shrink: 0;
    }

    .top-row[b-cjlcl2usvb] {
        position: sticky;
        top: 0;
        z-index: 1;
    }

    .top-row[b-cjlcl2usvb] {
        padding-left: 2rem !important;
        padding-right: 1.5rem !important;
    }

    /* O TETO da coluna de conteúdo (--at-w-page). Sem ele nada tinha limite: numa tela de 1920 o
   conteúdo ganhava 1670 px, com tabelas de 1614 px para 153 px de dados.
   ENCOSTADA NA ESQUERDA, e não centrada: a coluna acompanha a barra lateral. Ver docs/UI-WEB.md §1. */
    article[b-cjlcl2usvb] {
        width: 100%;
        max-width: var(--at-w-page);
        margin-inline: 0 auto;
        padding-left: 2rem !important;
        padding-right: 2rem !important;
    }
}

/* --- Canto dos flutuantes ------------------------------------------------ */
/* Dono único do canto inferior direito: o toast de ação (§9) e o aviso de versão empilham aqui, em
   vez de cada um se fixar por conta própria e um cobrir o outro.

   `pointer-events: none` na coluna e `auto` em cada cartão: sem isso a faixa vazia da coluna ficaria
   por cima da página e engoliria cliques num canto que quase sempre está vazio. */
.canto-avisos[b-cjlcl2usvb] {
    position: fixed;
    /* Canto superior direito (decisão do dono, 2026-08-20). Abaixo da `.top-row`, que é sticky e tem
       3,5rem — cobri-la esconderia o sino e o "atualizar" justo quando um aviso aparece. A safe-area
       entra na conta porque no iPhone instalado a barra empurra a `.top-row` para baixo. */
    top: calc(3.5rem + env(safe-area-inset-top, 0px) + .5rem);
    right: 1rem;
    z-index: 1060;   /* acima do painel flutuante (1050), o mais alto da interface */
    display: flex;
    flex-direction: column;
    align-items: flex-end;   /* cartão mais estreito que o canto encosta na direita, não na esquerda */
    gap: .5rem;
    max-width: calc(100vw - 2rem);
    pointer-events: none;
}

/* No celular o canto atravessa a tela e os cartões ocupam a largura: com 375px, 24rem de cartão
   ancorado à direita deixaria uma margem esquerda de 1px — na prática, largura cheia com sobra. */
@media (max-width: 640.98px) {
    .canto-avisos[b-cjlcl2usvb] {
        left: .5rem;
        right: .5rem;
        max-width: none;
        align-items: stretch;
    }
}
/* /Layout/NavMenu.razor.rz.scp.css */
/* A marca é o cabeçalho da coluna lateral, e só existe em tela larga: no celular a barra superior
   mostra a PÁGINA, e a assinatura por extenso volta no conteúdo da Home. */
.navbar-brand[b-rdbx9rzqar] {
    display: none;
}

@media (min-width: 641px) {
    .navbar-brand[b-rdbx9rzqar] {
        display: flex;
        align-items: center;
        min-height: 3.5rem;
        padding-left: 1rem;
        background-color: rgba(0, 0, 0, .25);
        border-bottom: 1px solid rgba(255, 255, 255, .07);
    }
}

.navbar-brand[b-rdbx9rzqar] {
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: .01em;
    color: var(--at-rail-text-strong);
    -webkit-tap-highlight-color: transparent;
}

/* A mesma cor em TODOS os estados: a marca é assinatura, não uma ação que responde ao toque. A barra
   do celular tem o par disto no MainLayout.razor.css, com o relato que motivou os dois. */
.navbar-brand:hover[b-rdbx9rzqar],
.navbar-brand:focus[b-rdbx9rzqar],
.navbar-brand:focus-visible[b-rdbx9rzqar],
.navbar-brand:active[b-rdbx9rzqar],
.navbar-brand:visited[b-rdbx9rzqar] {
    color: var(--at-rail-text-strong);
    text-decoration: none;
}

/* A cor do sufixo da assinatura mora no app.css (.brand-version): ela aparece em três telas, e uma
   cópia por componente já havia começado a divergir. */

.bi[b-rdbx9rzqar] {
    display: inline-block;
    position: relative;
    width: 1.1rem;
    height: 1.1rem;
    margin-right: .7rem;
    top: -1px;
    flex-shrink: 0;
    background-size: cover;
    opacity: .85;
}

.bi-house-door-fill-nav-menu[b-rdbx9rzqar] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5Z'/%3E%3C/svg%3E");
}

/* Controles deslizantes, e não outra engrenagem: o item logo acima (apesar do nome da classe) já é
   uma, e duas iguais no mesmo menu não se distinguem de relance. */
.bi-sliders-nav-menu[b-rdbx9rzqar] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M11.5 2a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3M9.05 3a2.5 2.5 0 0 1 4.9 0H16v1h-2.05a2.5 2.5 0 0 1-4.9 0H0V3zM4.5 7a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3M2.05 8a2.5 2.5 0 0 1 4.9 0H16v1H6.95a2.5 2.5 0 0 1-4.9 0H0V8zm9.45 4a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3m-2.45 1a2.5 2.5 0 0 1 4.9 0H16v1h-2.05a2.5 2.5 0 0 1-4.9 0H0v-1z'/%3E%3C/svg%3E");
}

.bi-plus-square-fill-nav-menu[b-rdbx9rzqar] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M9.405 1.05c-.413-1.4-2.397-1.4-2.81 0l-.1.34a1.464 1.464 0 0 1-2.105.872l-.31-.17c-1.283-.698-2.686.705-1.987 1.987l.169.311c.446.82.023 1.841-.872 2.105l-.34.1c-1.4.413-1.4 2.397 0 2.81l.34.1a1.464 1.464 0 0 1 .872 2.105l-.17.31c-.698 1.283.705 2.686 1.987 1.987l.311-.169a1.464 1.464 0 0 1 2.105.872l.1.34c.413 1.4 2.397 1.4 2.81 0l.1-.34a1.464 1.464 0 0 1 2.105-.872l.31.17c1.283.698 2.686-.705 1.987-1.987l-.169-.311a1.464 1.464 0 0 1 .872-2.105l.34-.1c1.4-.413 1.4-2.397 0-2.81l-.34-.1a1.464 1.464 0 0 1-.872-2.105l.17-.31c.698-1.283-.705-2.686-1.987-1.987l-.311.169a1.464 1.464 0 0 1-2.105-.872l-.1-.34zM8 10.93a2.929 2.929 0 1 1 0-5.86 2.929 2.929 0 0 1 0 5.858z'/%3E%3C/svg%3E");
}

.bi-list-nested-nav-menu[b-rdbx9rzqar] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M2 2a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V2zm4.5 10a.5.5 0 0 0 0 1h3a.5.5 0 0 0 0-1h-3z'/%3E%3C/svg%3E");
}

.bi-arrow-bar-left-nav-menu[b-rdbx9rzqar] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M12.5 15a.5.5 0 0 1-.5-.5v-13a.5.5 0 0 1 1 0v13a.5.5 0 0 1-.5.5zM10 8a.5.5 0 0 1-.5.5H3.707l2.147 2.146a.5.5 0 0 1-.708.708l-3-3a.5.5 0 0 1 0-.708l3-3a.5.5 0 1 1 .708.708L3.707 7.5H9.5a.5.5 0 0 1 .5.5z'/%3E%3C/svg%3E");
}

.bi-arrow-bar-right-nav-menu[b-rdbx9rzqar] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M6 8a.5.5 0 0 0 .5.5h5.793l-2.147 2.146a.5.5 0 0 0 .708.708l3-3a.5.5 0 0 0 0-.708l-3-3a.5.5 0 0 0-.708.708L12.293 7.5H6.5A.5.5 0 0 0 6 8zm-2.5 7a.5.5 0 0 1-.5-.5v-13a.5.5 0 0 1 1 0v13a.5.5 0 0 1-.5.5z'/%3E%3C/svg%3E");
}

/* Mini rodapé da navegação. Mais apagado que os itens: é referência, não destino. */
.nav-version[b-rdbx9rzqar] {
    display: flex;
    align-items: center;
    gap: .4rem;
    /* Mesma altura do rodapé do conteúdo (--at-footer-h), para os dois filetes caírem na mesma
       linha na base da tela. Antes cada um derivava a altura do próprio padding e dava 2px de
       diferença — invisível no código, visível na tela. */
    height: var(--at-footer-h);
    flex-shrink: 0;   /* com o menu longo, quem rola é a lista — a versão não pode ser espremida */
    /* 1,75rem alinha com o TEXTO dos itens: eles têm px-3 (1rem) no .nav-item mais .75rem no link. */
    padding: 0 1.75rem;
    font-size: .7rem;
    font-variant-numeric: tabular-nums;
    /* 62% é o piso: mede 4,61:1 sobre o rail e passa o AA. Com 55% ficava em 3,90 e reprovava. */
    color: color-mix(in srgb, var(--at-rail-text) 62%, var(--at-rail));
    border-top: 1px solid rgba(255, 255, 255, .07);
    /* Como virou link, precisa desarmar as duas regras globais de : a cor de link do Bootstrap e o
   sublinhado no hover. */
    text-decoration: none;
}

/* Como é clicável, precisa dizer isso ao passar o mouse — mas sem virar destaque: só clareia. */
.nav-version:hover[b-rdbx9rzqar],
.nav-version:focus-visible[b-rdbx9rzqar] {
    color: var(--at-rail-text);
    background-color: var(--at-rail-hover);
    text-decoration: none;
}

.nav-version svg[b-rdbx9rzqar] {
    width: .85rem;
    height: .85rem;
    flex-shrink: 0;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.nav-item[b-rdbx9rzqar] {
    font-size: .9rem;
    padding-bottom: .2rem;
}

.nav-item:first-of-type[b-rdbx9rzqar] { padding-top: .75rem; }
.nav-item:last-of-type[b-rdbx9rzqar] { padding-bottom: 1rem; }

.nav-item[b-rdbx9rzqar]  a,
.nav-item[b-rdbx9rzqar]  .btn-link {
    color: var(--at-rail-text);
    border-radius: var(--at-radius);
    height: 2.75rem;
    display: flex;
    align-items: center;
    line-height: 2.75rem;
    padding-inline: .75rem;
    width: 100%;
    text-decoration: none;
    transition: background-color .15s ease, color .15s ease;
}

.nav-item[b-rdbx9rzqar]  a:hover,
.nav-item[b-rdbx9rzqar]  .btn-link:hover {
    background-color: var(--at-rail-hover);
    color: var(--at-rail-text-strong);
    text-decoration: none;
}

/* Item ativo: barra do accent à esquerda em vez do realce branco do template. */
.nav-item[b-rdbx9rzqar]  a.active {
    background-color: var(--at-rail-hover);
    color: var(--at-rail-text-strong);
    box-shadow: inset 3px 0 0 var(--at-accent);
}

.nav-item[b-rdbx9rzqar]  a.active .bi { opacity: 1; }

/* Nome de quem está na sessão — rótulo, não item clicável. */
.nav-link-user[b-rdbx9rzqar] {
    display: block;
    padding: .35rem .75rem;
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--at-rail-text);
    opacity: .65;
    border-top: 1px solid rgba(255, 255, 255, .08);
    margin-top: .5rem;
    padding-top: .9rem;
}

/* No celular o menu é SOBREPOSIÇÃO, ancorada abaixo da barra. Antes ele empurrava o conteúdo, o que
   agora seria impossível: a barra pertence ao 
, que vem DEPOIS deste bloco no DOM — em fluxo, o
   menu aberto apareceria ACIMA da barra. Sobrepondo, ele cai onde se espera e não desloca a página. */
@media (max-width: 640.98px) {
    .nav-scrollable[b-rdbx9rzqar] {
        /* FIXED, não absolute: era `absolute` dentro de `.page { position: relative }`, ou seja
           ancorado ao topo do DOCUMENTO. A barra que o abre é `sticky` e acompanha a viewport, então
           com a página rolada o menu abria lá em cima, fora da tela — e era preciso rolar para achá-lo.
           Fixo, ele cai logo abaixo da barra em qualquer posição de rolagem, igual ao véu (que já era
           fixo, e por isso escurecia a tela certa enquanto o menu abria na errada). */
        position: fixed;
        top: calc(3.5rem + env(safe-area-inset-top, 0px));
        left: 0;
        right: 0;
        z-index: 20;
        max-height: calc(100vh - 3.5rem - env(safe-area-inset-top, 0px));
        overflow-y: auto;
        background-color: var(--at-rail);
        border-bottom: 1px solid rgba(255, 255, 255, .07);
    }
}

@media (min-width: 641px) {
    .collapse[b-rdbx9rzqar] {
        /* Nunca colapsa a sidebar em tela larga */
        display: block;
    }

    /* Coluna com o menu crescendo: é o que empurra a versão para o PÉ da barra lateral. No celular
       não é preciso — lá o menu é sobreposição do tamanho do conteúdo, e a versão já cai por último. */
    .nav-scrollable[b-rdbx9rzqar] {
        height: calc(100vh - 3.5rem);
        overflow-y: auto;
        display: flex;
        flex-direction: column;
    }

    .nav-scrollable > nav[b-rdbx9rzqar] {
        flex: 1;
    }
}
/* /Layout/NotificationBell.razor.rz.scp.css */
/* SEM `position: relative`, de propósito. Com ele, o painel se ancorava no SINO e o `top: 100%` caía
   logo abaixo do botão — dentro da barra, cobrindo o filete que a fecha. Sem ele, o ancestral
   posicionado mais próximo passa a ser a própria `.top-row` (que é `sticky`, e portanto posicionada),
   e `top: 100%` vira exatamente a linha divisória do cabeçalho.

   O selo de não-lidas não depende disto: ele se ancora no