/*
  Fundação mobile do Conecta PCSE — "cara de aplicativo".

  Carregada por último entre os CSS próprios (ver `templates/base.html`, logo antes
  do `{% block css %}`): vence `app.min.css`, `custom.css` e o `<style>` inline do
  base por ordem de cascata, sem precisar de `!important`, e ainda deixa o
  `{% block css %}` de cada página com a palavra final.

  O tema QUANTUM é desktop-first e seu SCSS não pode ser reconstruído aqui
  (`app/webpack/node_modules` não existe no repositório; um rebuild traria
  dependências com range `^` e poderia alterar as 225 telas em silêncio). Por isso
  tudo aqui é override.

  Breakpoint único: 767.98px — o mesmo `md` em que o tema já transforma a barra
  lateral em drawer, esconde a marca e mostra o botão de menu. Não usar 992.
*/

/* ══════════════════ TOKENS ══════════════════ */
:root {
    /* Recortes do dispositivo (notch, barra de gestos). Sem `viewport-fit=cover`
       no meta viewport, `env()` resolve sempre para 0 — os dois andam juntos. */
    --pcse-safe-top: env(safe-area-inset-top, 0px);
    --pcse-safe-bottom: env(safe-area-inset-bottom, 0px);
    --pcse-safe-left: env(safe-area-inset-left, 0px);
    --pcse-safe-right: env(safe-area-inset-right, 0px);

    /* Mesma altura da barra inferior: as duas molduras do app precisam ter o
       mesmo peso visual. */
    --pcse-appbar-h: 56px;
    /* Zero no desktop: os `calc()` que reservam espaço para a barra inferior
       valem em qualquer largura, mas só somam algo quando ela existe. */
    --pcse-bottomnav-h: 0px;
    --pcse-touch: 44px;
    /* Tamanho dos ícones das duas barras. */
    --pcse-icone-barra: 1.35rem;
}

@media (max-width: 767.98px) {
    :root {
        --pcse-bottomnav-h: 56px;
    }
}

/* ══════════════════ SHELL ══════════════════ */
/* Estas regras vinham do <style> inline do base.html e conflitavam com
   `app/webpack/src/scss/app/_app-footer.scss`. Governar o shell em um lugar só. */
.app {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    /* `dvh` acompanha a barra de URL que aparece e some no celular; a linha
       anterior fica como fallback para quem não suporta. */
    min-height: 100dvh;
}

.app-content {
    flex: 1;
}

.app-footer {
    margin-top: auto;
    padding: 1rem;
    font-size: 0.75rem;
    line-height: 1.5;
    text-align: center;
    word-break: break-word;
}

/* O tema desloca o rodapé pela largura da barra lateral
   (`margin-left: 14.0625rem`) e não prevê o caso sem barra. Nas telas que
   escondem a lateral — login, 404, 500 e falha de CSRF — isso jogava o texto e
   a linha divisória para a direita. */
.app.app-without-sidebar .app-footer {
    margin-right: 0.9375rem;
    margin-left: 0.9375rem;
}

html {
    -webkit-text-size-adjust: 100%;
}

html,
body {
    /* Impede o "puxar para atualizar" e o encadeamento de rolagem para o
       documento quando um contêiner interno chega ao fim. */
    overscroll-behavior-y: none;
}

body {
    /* `clip` e não `hidden`: `hidden` cria um contexto de rolagem e quebra
       `position: sticky` em descendentes (cabeçalho fixo do DataTables). */
    overflow-x: clip;
    -webkit-tap-highlight-color: transparent;
}

a,
button,
label,
[role='button'],
.btn {
    -webkit-tap-highlight-color: transparent;
}

@media (max-width: 575.98px) {
    .app-footer {
        padding: 0.6rem 0.75rem;
        font-size: 0.68rem;
    }
}

/* ══════════════════ MOBILE ══════════════════ */
@media (max-width: 767.98px) {
    /* ══════════ SHELL DE APLICATIVO ══════════
       O app ocupa exatamente a tela do aparelho e não rola como documento:
       quem rola é apenas o conteúdo, por dentro. Assim o cabeçalho e a barra
       inferior são parte do quadro — nenhuma tela consegue empurrá-los para
       fora da área visível, e a barra de endereço do navegador (que muda o
       viewport ao aparecer e sumir) deixa de deslocar as âncoras. */
    html,
    body {
        height: 100%;
        overflow: hidden;
    }

    .app {
        /*
          O Safari pode deslocar a visual viewport inteira ao abrir o teclado.
          Fixar a moldura completa mantém cabeçalho, conteúdo e barra inferior
          no mesmo sistema de coordenadas; sem isto, o conteúdo pode ser
          empurrado por trás da top bar enquanto ela permanece fixa.
        */
        position: fixed;
        inset: 0;
        width: 100%;
        height: 100dvh;
        max-height: 100dvh;
        overflow: hidden;
        /* `box-sizing: border-box` (padrão do Bootstrap) faz estes paddings
           descontarem da altura, sobrando exatamente a faixa do conteúdo. */
        padding-top: calc(var(--pcse-appbar-h) + var(--pcse-safe-top));
        padding-bottom: calc(var(--pcse-bottomnav-h) + var(--pcse-safe-bottom));
    }

    /* O único elemento rolável da tela.

       Sem `-webkit-overflow-scrolling: touch` de propósito: no iOS essa
       propriedade transforma o elemento em bloco de contenção, e todo
       `position: fixed` descendente passa a ser recortado pelo scroller. Os
       modais das telas de avisos são renderizados dentro do `.app-content`, e o
       resultado era o fundo escurecido aparecer sem nenhum modal. Desde o iOS 13
       a rolagem com inércia já é o padrão e a propriedade não faz falta. */
    .app-content {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        overflow-x: hidden;
        overscroll-behavior: contain;
    }

    /* Telas sem moldura (login, 404, 500, falha de CSRF) setam `appHeaderHide`
       e `appSidebarHide`: sem zerar o padding, o app reservaria a faixa do
       cabeçalho e da barra inferior que não existem ali. */
    .app.app-without-header {
        padding-top: 0;
    }

    .app.app-without-sidebar {
        padding-bottom: 0;
    }

    /* O rodapé institucional sairia do quadro e roubaria altura útil em toda
       tela. A informação passa para o rodapé da gaveta de menu. */
    .app-footer {
        display: none;
    }

    /* O botão "voltar ao topo" do tema rola a janela — que não rola mais. */
    .btn-scroll-top {
        display: none !important;
    }

    .app-header {
        height: calc(var(--pcse-appbar-h) + var(--pcse-safe-top));
        padding-top: var(--pcse-safe-top);
    }

    .app-sidebar {
        padding-top: var(--pcse-safe-top);
    }

    /* O fim do menu lateral precisa passar por cima da barra inferior. */
    .app-sidebar .menu {
        padding-bottom: calc(var(--pcse-bottomnav-h) + var(--pcse-safe-bottom) + 1rem);
    }

    .app-content {
        padding-right: calc(0.625rem + var(--pcse-safe-right));
        padding-bottom: 0.75rem;
        padding-left: calc(0.625rem + var(--pcse-safe-left));
    }

    /* ---------- Alvos de toque ---------- */
    .app-content .btn:not(.btn-sm):not(.btn-close):not(.card-header-btn .btn),
    .app-content .form-control,
    .app-content .form-select {
        min-height: var(--pcse-touch);
    }

    .app-content .btn-sm {
        min-height: 36px;
    }

    .dropdown-item,
    .page-link {
        display: flex;
        align-items: center;
        min-height: var(--pcse-touch);
    }

    /* Cabeçalho de card do tema: os botões ficam apertados demais no toque. */
    .card .card-header.with-btn {
        flex-wrap: wrap;
        gap: 0.35rem;
    }

    .card .card-header.with-btn .card-header-btn .btn {
        width: 2.25rem;
        height: 2.25rem;
    }

    /* No celular a tela já é o "tela cheia": o botão de expandir só ocupa um
       alvo minúsculo e some em 398 ocorrências de uma vez. */
    [data-toggle='card-expand'] {
        display: none !important;
    }

    /* ---------- Formulários ---------- */
    /* Abaixo de 16px o iOS dá zoom automático ao focar o campo e desalinha a
       tela inteira. O `!important` é intencional: o bloco CSS de cada página é
       carregado depois desta folha e costuma usar seletores mais específicos.
       Esta é uma garantia de comportamento mobile, não um token visual. */
    .form-control,
    .form-control-sm,
    .form-select,
    .form-select-sm,
    .input-group-text,
    textarea,
    select,
    input:not([type='checkbox']):not([type='radio']) {
        font-size: 16px !important;
    }

    .input-group > .form-control,
    .input-group > .form-select,
    .input-group > .btn {
        min-height: var(--pcse-touch);
    }

    /* `padding-block` e nunca `min-height`: altura mínima esparrama listas de
       checkbox densas (filtros laterais, seleção de destinatários). */
    .form-check {
        padding-block: 0.4rem;
    }

    .form-check-input {
        width: 1.25rem;
        height: 1.25rem;
    }

    /* Escopado em `.app-content` para não afetar o <canvas> do ApexCharts. */
    .app-content img {
        max-width: 100%;
        height: auto;
    }
}

/* ══════════════════ CABEÇALHO EM MODO APP ══════════════════ */
@media (max-width: 767.98px) {
    /* O tema usa `margin-right: auto` no toggler; sem zerar, ele empurra a
       marca para a direita e a barra fica desalinhada. */
    .app-header .mobile-toggler {
        margin-right: 0;
    }

    /* O tema esconde a marca abaixo de 768 e o cabeçalho fica vazio no celular.
       Aqui ela volta, reduzida para caber ao lado do botão e dos ícones.

       `align-self: center` porque o `.app-header` não define `align-items`
       (fica em `normal`, que se comporta como `stretch`): sem isso o conteúdo
       encosta no topo da caixa esticada. */
    .app-header .brand {
        display: flex;
        flex: 1 1 auto;
        align-self: center;
        align-items: center;
        width: auto;
        min-width: 0;
        margin: 0;
        padding: 0 0.5rem;
    }

    .app-header .brand .brand-logo {
        display: flex;
        align-items: center;
        min-width: 0;
    }

    .app-header .brand .brand-logo img {
        width: 26px;
        height: 26px;
        margin-right: 0.45rem;
        /* O template define `max-width: 11%` inline, calculado para o desktop. */
        max-width: none !important;
    }

    .app-header .brand .brand-text {
        overflow: hidden;
        font-size: 0.88rem !important;
        letter-spacing: 0.01em;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* A marca é quem cede espaço; os ícones da direita não encolhem. */
    .app-header > .menu {
        flex-shrink: 0;
    }

    /* Ícones do topo no mesmo tamanho dos da barra inferior, com alvo de toque
       equivalente — sem isto o cabeçalho fica visivelmente mais fraco. */
    .app-header > .menu > .menu-item > .menu-link {
        min-width: var(--pcse-touch);
        min-height: var(--pcse-touch);
        padding: 0 0.35rem;
    }

    .app-header > .menu .menu-link .menu-icon {
        font-size: var(--pcse-icone-barra);
    }

    .app-header .menu-img,
    .app-header .menu-img img {
        width: 30px;
        height: 30px;
    }

    .pcse-appbar__back {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: var(--pcse-touch);
        color: var(--bs-heading-color);
        font-size: 1.35rem;
    }
}

/* ══════════════════ MODAIS COMO FOLHAS ══════════════════ */
/*
  São 74 modais `modal-lg`/`modal-xl` no sistema. Em vez de editar cada template,
  o comportamento é trocado por CSS: os grandes viram tela cheia (as mesmas regras
  que o tema já usa em `.modal-fullscreen-sm-down`) e os demais sobem do rodapé
  como bottom sheet.

  Escape hatch: `class="modal-dialog pcse-modal-plain"` mantém o modal como está.
*/
@media (max-width: 767.98px) {
    .modal-dialog.modal-lg:not(.pcse-modal-plain),
    .modal-dialog.modal-xl:not(.pcse-modal-plain) {
        width: 100vw;
        max-width: none;
        height: 100%;
        margin: 0;
    }

    .modal-dialog.modal-lg:not(.pcse-modal-plain) > .modal-content,
    .modal-dialog.modal-xl:not(.pcse-modal-plain) > .modal-content {
        height: 100%;
        border: 0;
        border-radius: 0;
    }

    /* Modais pequenos: folha ancorada no rodapé, mais fácil de alcançar com o
       polegar do que um diálogo centralizado. */
    .modal-dialog:not(.modal-lg):not(.modal-xl):not(.modal-fullscreen):not(.pcse-modal-plain) {
        position: fixed;
        top: auto;
        right: 0;
        bottom: 0;
        left: 0;
        width: 100%;
        max-width: 100%;
        margin: 0;
    }

    .modal-dialog:not(.modal-lg):not(.modal-xl):not(.modal-fullscreen):not(.pcse-modal-plain) > .modal-content {
        max-height: 92dvh;
        border-radius: 1rem 1rem 0 0;
    }

    /* O tema centraliza com `min-height: calc(100% - margem)`; na folha isso
       empurraria o conteúdo para fora da tela. */
    .modal-dialog-centered:not(.pcse-modal-plain) {
        min-height: 0;
    }

    .modal-body {
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    /* Cabeçalho e rodapé fixos: em formulário longo o botão de salvar
       precisa continuar alcançável. */
    .modal-content > .modal-header,
    .modal-content > .modal-footer {
        position: sticky;
        z-index: 1;
        background: var(--bs-modal-bg);
    }

    .modal-content > .modal-header {
        top: 0;
    }

    .modal-content > .modal-footer {
        bottom: 0;
        padding-bottom: calc(0.75rem + var(--pcse-safe-bottom));
    }

    .modal-footer .btn {
        min-height: var(--pcse-touch);
    }
}

/*
  NÃO reintroduzir animação de subida via `transform` no `.modal-dialog`.

  A tentativa era `.modal.fade .modal-dialog { transform: translateY(100%) }` com
  `.modal.show .modal-dialog { transform: none }`. Apesar de a regra `.show` vir
  depois e ter a mesma especificidade, o diálogo ficava preso em
  `translateY(100%)` — ou seja, uma tela inteira abaixo do campo de visão: o
  usuário via só o fundo escurecido e nenhum modal.

  O Bootstrap já anima a entrada com o seu próprio fade; o ganho visual não
  compensa o risco de deixar todo modal do sistema invisível no celular.
*/

/* ══════════════════ GAVETA DE MENU (MOBILE) ══════════════════ */
/*
  O tema simplesmente desliza a barra lateral do desktop: 210px de largura, itens
  de 24px de altura e fonte de 10px — denso demais para o toque e com cara de web.
  Aqui ela vira uma gaveta de aplicativo: mais larga, com identidade do usuário no
  topo, alvos confortáveis e ações de conta no rodapé.
*/
.pcse-drawer__topo,
.pcse-drawer__acoes {
    display: none;
}

@media (max-width: 767.98px) {
    /* Menu de tela cheia: com cerca de 50 destinos em 5 grupos, uma grade de
       cartões é muito mais rápida de varrer que uma lista vertical estreita. */
    .app-sidebar {
        display: flex;
        flex-direction: column;
        width: 100%;
        left: -100%;
        /* Deixa a barra inferior por cima (z-index 1035), para o item MENU
           continuar visível e servir de fechamento. */
        padding-bottom: calc(var(--pcse-bottomnav-h) + var(--pcse-safe-bottom));
        /* Vidro: a tela por baixo continua insinuada em vez de um preto chapado. */
        background: rgba(var(--bs-body-bg-rgb), 0.62);
        -webkit-backdrop-filter: blur(24px) saturate(150%);
        backdrop-filter: blur(24px) saturate(150%);
    }

    /* O contêiner interno não pode pintar por cima do vidro. */
    .app-sidebar .app-sidebar-content {
        background: transparent;
    }

    .app-sidebar-mobile-toggled .app-sidebar {
        left: 0;
    }

    /* Em tela cheia o fundo escuro atrás não tem função e só custa pintura. */
    .app-sidebar-mobile-backdrop {
        display: none !important;
    }

    /* Com o menu ocupando a tela toda, o botão de pânico ficaria sobre a grade
       e poderia ser tocado por engano. O acionamento continua a um toque de
       distância: fechar o menu o traz de volta.
       O FAB vive em `#pcse-panico-root`, irmão do `#app` — daí o combinador. */
    #app.app-sidebar-mobile-toggled ~ #pcse-panico-root #pcse-panico-fab {
        display: none !important;
    }

    /* ---------- Topo: identidade ---------- */
    .pcse-drawer__topo {
        display: flex;
        flex-shrink: 0;
        align-items: center;
        gap: 0.5rem;
        padding: calc(0.85rem + var(--pcse-safe-top)) 0.85rem 0.85rem;
        border-bottom: 1px solid rgba(var(--bs-white-rgb), 0.1);
        /* Translúcido para o vidro da gaveta continuar aparecendo. */
        background: linear-gradient(
            135deg,
            rgba(var(--bs-theme-rgb), 0.14),
            rgba(var(--bs-white-rgb), 0.03) 62%
        );
    }

    .pcse-drawer__usuario {
        display: flex;
        flex: 1 1 auto;
        align-items: center;
        gap: 0.65rem;
        min-width: 0;
        text-decoration: none;
    }

    .pcse-drawer__avatar {
        flex-shrink: 0;
        width: 42px;
        height: 42px;
        object-fit: cover;
        border: 1px solid rgba(var(--bs-theme-rgb), 0.4);
        border-radius: 50%;
    }

    .pcse-drawer__identidade {
        display: flex;
        flex-direction: column;
        min-width: 0;
    }

    .pcse-drawer__nome {
        overflow: hidden;
        color: var(--bs-heading-color);
        font-size: 0.88rem;
        font-weight: 700;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .pcse-drawer__acao {
        color: var(--bs-theme);
        font-size: 0.68rem;
        font-weight: 600;
        letter-spacing: 0.06em;
        text-transform: uppercase;
    }

    .pcse-drawer__seta {
        flex-shrink: 0;
        color: rgba(var(--bs-white-rgb), 0.35);
        font-size: 0.9rem;
    }

    .pcse-drawer__fechar {
        display: inline-flex;
        flex-shrink: 0;
        align-items: center;
        justify-content: center;
        width: 38px;
        height: 38px;
        padding: 0;
        color: rgba(var(--bs-white-rgb), 0.6);
        font-size: 1.1rem;
        border: 1px solid rgba(var(--bs-white-rgb), 0.12);
        border-radius: 50%;
        background: rgba(var(--bs-white-rgb), 0.04);
    }

    /* ---------- Corpo: itens de menu ---------- */
    /* Mesma razão do `.app-content`: `-webkit-overflow-scrolling` quebraria
       `position: fixed` de descendentes no iOS. */
    .app-sidebar .app-sidebar-content {
        display: flex;
        flex: 1 1 auto;
        flex-direction: column;
        min-height: 0;
        overscroll-behavior: contain;
    }

    /* ---------- Grade de cartões ---------- */
    /*
      Os seletores repetem o caminho completo do tema
      (`.app-sidebar .app-sidebar-content .menu .menu-item .menu-link`, 0,5,0)
      porque abaixo dessa especificidade as regras do QUANTUM vencem — foi o que
      manteve `justify-content: flex-end` e o ícone preso em 1.5rem.
    */
    .app-sidebar .app-sidebar-content .menu {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        /* Cada linha do tamanho do seu conteúdo. Com `1fr` as linhas repartiam
           a altura do contêiner e os cartões esticavam até o fim da tela. */
        grid-auto-rows: min-content;
        gap: 0.5rem;
        padding: 0.75rem;
    }

    .app-sidebar .app-sidebar-content .menu .menu-header {
        grid-column: 1 / -1;
        padding: 0.9rem 0.25rem 0.1rem;
        color: rgba(var(--bs-white-rgb), 0.4);
        font-size: 0.62rem;
        font-weight: 700;
        letter-spacing: 0.14em;
    }

    .app-sidebar .app-sidebar-content .menu .menu-divider {
        grid-column: 1 / -1;
        margin: 0.2rem 0.25rem;
    }

    /* Cartão: ícone em cima, rótulo embaixo, tudo centralizado. */
    .app-sidebar .app-sidebar-content .menu .menu-item > .menu-link {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        height: 100%;
        min-height: 96px;
        padding: 0.85rem 0.45rem;
        color: rgba(var(--bs-white-rgb), 0.82);
        font-size: 0.63rem;
        font-weight: 600;
        line-height: 1.25;
        text-align: center;
        border: 1px solid rgba(var(--bs-white-rgb), 0.12);
        border-radius: 16px;
        background: rgba(var(--bs-white-rgb), 0.06);
    }

    .app-sidebar .app-sidebar-content .menu .menu-item > .menu-link .menu-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        /* O tema fixa 1.5rem e uma margem negativa pensada para a lista. */
        width: 44px;
        height: 44px;
        margin: 0;
        color: var(--bs-theme);
        font-size: 1.5rem;
        border-radius: 13px;
        background: rgba(var(--bs-theme-rgb), 0.12);
    }

    .app-sidebar .app-sidebar-content .menu .menu-item > .menu-link .menu-text {
        display: -webkit-box;
        overflow: hidden;
        letter-spacing: 0.02em;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        line-clamp: 2;
    }

    .app-sidebar .app-sidebar-content .menu .menu-item.active > .menu-link {
        color: var(--bs-theme);
        border-color: rgba(var(--bs-theme-rgb), 0.5);
        background: rgba(var(--bs-theme-rgb), 0.12);
    }

    .app-sidebar .app-sidebar-content .menu .menu-item.active > .menu-link .menu-icon {
        background: rgba(var(--bs-theme-rgb), 0.2);
    }

    /* ---------- Itens com submenu ---------- */
    /* Ocupam a linha inteira: o cartão vira cabeçalho do grupo e os filhos
       aparecem numa grade aninhada logo abaixo. */
    .app-sidebar .app-sidebar-content .menu .menu-item.has-sub {
        grid-column: 1 / -1;
        align-self: start;
        min-width: 0;
    }

    .app-sidebar .app-sidebar-content .menu .menu-item.has-sub > .menu-link {
        flex-direction: row;
        justify-content: flex-start;
        gap: 0.7rem;
        height: auto;
        min-height: 60px;
        padding: 0.6rem 0.85rem;
        font-size: 0.72rem;
        text-align: left;
    }

    .app-sidebar .app-sidebar-content .menu .menu-item.has-sub > .menu-link .menu-icon {
        width: 38px;
        height: 38px;
        font-size: 1.25rem;
    }

    .app-sidebar .app-sidebar-content .menu .menu-item.has-sub > .menu-link .menu-text {
        flex: 1 1 auto;
        text-align: left;
        -webkit-line-clamp: 1;
        line-clamp: 1;
    }

    .app-sidebar .app-sidebar-content .menu .menu-item.has-sub > .menu-link .menu-caret {
        flex-shrink: 0;
        font-size: 1rem;
    }

    .app-sidebar .app-sidebar-content .menu .menu-item.has-sub > .menu-submenu {
        display: none !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.4rem;
        position: static;
        width: 100%;
        margin: 0;
        padding: 0.5rem 0 0;
        background: transparent;
    }

    /*
      O script do tema alterna um `display: block` inline. No mobile, o estado
      `.expand` é a fonte de verdade e preserva a grade de filhos sem fazer o
      cartão-pai crescer sobre os itens seguintes.
    */
    .app-sidebar .app-sidebar-content .menu .menu-item.has-sub.expand > .menu-submenu {
        display: grid !important;
    }

    .app-sidebar .app-sidebar-content .menu .menu-submenu > .menu-item {
        position: static;
        min-width: 0;
        margin: 0;
    }

    .app-sidebar .app-sidebar-content .menu .menu-submenu .menu-item > .menu-link {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: auto;
        min-height: 46px;
        padding: 0.5rem 0.6rem;
        color: rgba(var(--bs-white-rgb), 0.75);
        font-size: 0.66rem;
        font-weight: 600;
        text-align: center;
        border: 1px solid rgba(var(--bs-white-rgb), 0.1);
        border-radius: 12px;
        background: rgba(var(--bs-white-rgb), 0.05);
    }

    .app-sidebar .app-sidebar-content .menu .menu-submenu .menu-item.active > .menu-link {
        color: var(--bs-theme);
        border-color: rgba(var(--bs-theme-rgb), 0.4);
    }

    /* ---------- Rodapé: ações de conta ---------- */
    .pcse-drawer__acoes {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0.5rem;
        margin-top: auto;
        padding: 0.75rem;
        border-top: 1px solid rgba(var(--bs-white-rgb), 0.09);
    }

    .pcse-drawer__acao-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0.35rem;
        min-height: 62px;
        padding: 0.5rem 0.3rem;
        color: rgba(var(--bs-white-rgb), 0.75);
        font-size: 0.62rem;
        font-weight: 600;
        line-height: 1.2;
        text-align: center;
        text-decoration: none;
        border: 1px solid rgba(var(--bs-white-rgb), 0.1);
        border-radius: 14px;
        background: rgba(var(--bs-white-rgb), 0.05);
    }

    .pcse-drawer__acao-item iconify-icon {
        font-size: 1.25rem;
        color: rgba(var(--bs-white-rgb), 0.5);
    }

    .pcse-drawer__acao-item--sair {
        color: rgba(var(--bs-danger-rgb), 0.9);
    }

    .pcse-drawer__acao-item--sair iconify-icon {
        color: rgba(var(--bs-danger-rgb), 0.9);
    }

    /* A gaveta já tem o próprio rodapé; o badge de versão fica discreto. */
    .app-sidebar .app-sidebar-content > .p-3.px-4 {
        margin-top: 0;
        padding: 0.6rem 1.1rem calc(0.6rem + var(--pcse-safe-bottom)) !important;
    }

    .app-sidebar .app-sidebar-content > .p-3.px-4 .btn {
        font-size: 0.7rem;
        opacity: 0.6;
    }

    .pcse-drawer__credito {
        margin-top: 0.6rem;
        color: rgba(var(--bs-white-rgb), 0.32);
        font-size: 0.62rem;
        line-height: 1.5;
        text-align: center;
    }

    /* Backdrop mais presente, como em app. */
    .app-sidebar-mobile-backdrop {
        background: rgba(0, 0, 0, 0.6);
        backdrop-filter: blur(2px);
    }
}

/* ══════════════════ NAVEGAÇÃO INFERIOR ══════════════════ */
.pcse-bottomnav {
    display: none;
}

@media (max-width: 767.98px) {
    .pcse-bottomnav {
        position: fixed;
        right: 0;
        bottom: 0;
        left: 0;
        /* Acima do drawer (1030) para o item MENU continuar clicável e servir de
           fechamento; abaixo dos modais do Bootstrap (1050/1055). */
        z-index: 1035;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        height: calc(var(--pcse-bottomnav-h) + var(--pcse-safe-bottom));
        padding-bottom: var(--pcse-safe-bottom);
        border-top: 1px solid rgba(var(--bs-white-rgb), 0.09);
        /* Base opaca a partir do fundo do tema, com um véu claro por cima para
           destacar a barra do conteúdo. Não usar `--bs-app-header-bg`: o tema a
           declara vazia, e `var()` com valor vazio ignora o fallback e zera a
           propriedade — a barra ficava transparente. */
        background:
            linear-gradient(180deg, rgba(var(--bs-white-rgb), 0.05), rgba(var(--bs-white-rgb), 0.02)),
            rgb(var(--bs-body-bg-rgb));
        box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.45);
    }

    .pcse-bottomnav__item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
        min-height: var(--pcse-touch);
        padding: 0;
        color: rgba(var(--bs-white-rgb), 0.55);
        font-size: 0.58rem;
        font-weight: 700;
        letter-spacing: 0.03em;
        text-decoration: none;
        border: 0;
        background: none;
    }

    .pcse-bottomnav__icon {
        font-size: var(--pcse-icone-barra);
        line-height: 1;
    }

    .pcse-bottomnav__item:hover,
    .pcse-bottomnav__item:focus-visible {
        color: rgba(var(--bs-white-rgb), 0.8);
    }

    .pcse-bottomnav__item.is-active {
        color: var(--bs-theme);
    }

    .pcse-bottomnav__item.is-active .pcse-bottomnav__icon {
        filter: drop-shadow(0 0 6px rgba(var(--bs-theme-rgb), 0.45));
    }

    /* Enquanto o drawer está aberto, o item MENU indica que ele fecha. */
    #app.app-sidebar-mobile-toggled ~ .pcse-bottomnav .pcse-bottomnav__menu {
        color: var(--bs-theme);
    }

    /* ---------- Botões flutuantes acima da barra ---------- */
    .btn-scroll-top {
        right: calc(0.625rem + var(--pcse-safe-right));
        bottom: calc(var(--pcse-bottomnav-h) + var(--pcse-safe-bottom) + 0.75rem);
        z-index: 1034;
        width: 40px;
        height: 40px;
    }
}

@media (max-width: 767.98px) and (prefers-reduced-motion: no-preference) {
    .pcse-bottomnav__item {
        transition: color 0.15s ease;
    }
}