/* ═══════════════════════════════════════════════════════════════════════
   Barra inferior do celular (até 768px) + folha "Mais" + rolagem.
   Montada por components/layout.js. No computador nada disso aparece:
   a barra lateral continua como sempre foi.
   Proposta aprovada em docs/design/barra-inferior-apresentacao.html
   ═══════════════════════════════════════════════════════════════════════ */

:root {
    --bn-h:        calc(64px + env(safe-area-inset-bottom, 0px));
    --bn-ativo:    #2D5F4F;
    --bn-pil:      rgba(45,95,79,.13);
    --bn-pil-fill: rgba(45,95,79,.10);
}
[data-theme="dark"] {
    --bn-ativo:    #8FD3B5;
    --bn-pil:      rgba(143,211,181,.17);
    --bn-pil-fill: rgba(143,211,181,.12);
}

/* Fora do celular a barra, a folha e o logo do topo não existem. */
#bottom-nav, .bn-overlay, .bn-sheet, .bn-logo { display: none; }

/* Barra lateral recolhida (computador): só o símbolo; aberta: logotipo completo com a escrita nova. */
@media (min-width: 769px) {
    #wrapper.toggled .sb-logo-full { display: none !important; }
    #wrapper.toggled .sb-logo-mini { display: block !important; }
}

/* Estilo comum dos logos (a versão certa aparece conforme o tema). */
[data-theme="dark"] .lg-claro { display: none !important; }
:root:not([data-theme="dark"]) .lg-escuro { display: none !important; }

@media (max-width: 768px) {

    /* ── Barra ───────────────────────────────────────────────────────── */
    #bottom-nav {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        position: fixed; left: 0; right: 0; bottom: 0;
        z-index: 1030;                       /* acima do conteúdo, abaixo de modais (1055) e da cifra em tela cheia (9999) */
        padding: 8px 6px calc(6px + env(safe-area-inset-bottom, 0px));
        background: var(--bg-sidebar);
        background: color-mix(in srgb, var(--bg-sidebar) 88%, transparent);
        -webkit-backdrop-filter: saturate(1.5) blur(16px);
        backdrop-filter: saturate(1.5) blur(16px);
        border-top: 1px solid var(--border-color);
        transition: transform .26s cubic-bezier(.2,.8,.2,1);
    }
    /* Teclado aberto: a barra sai da frente para não roubar espaço do campo. */
    body.bn-teclado #bottom-nav { transform: translateY(105%); }

    #bottom-nav .bn-item {
        display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
        gap: 4px; min-height: 56px; padding: 2px 2px 4px;
        background: none; border: 0; cursor: pointer; text-decoration: none;
        color: var(--text-secondary);
        font: 600 .72rem/1.15 var(--font-body, 'Inter', sans-serif);
        white-space: nowrap; text-align: center;
        -webkit-tap-highlight-color: transparent;
    }
    #bottom-nav .bn-item:focus-visible { outline: 3px solid rgba(216,149,109,.8); outline-offset: -2px; border-radius: 12px; }
    #bottom-nav .bn-pil {
        position: relative; width: 60px; height: 32px; border-radius: 16px;
        display: grid; place-items: center;
        transition: background-color .22s ease, transform .12s ease;
    }
    #bottom-nav .bn-item:active .bn-pil { transform: scale(.92); }
    #bottom-nav .bn-pil svg {
        width: 24px; height: 24px; fill: none; stroke: currentColor;
        stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
        transition: stroke-width .2s ease, fill .2s ease;
    }
    #bottom-nav .bn-item[aria-current="page"] { color: var(--bn-ativo); font-weight: 800; }
    #bottom-nav .bn-item[aria-current="page"] .bn-pil { background: var(--bn-pil); }
    #bottom-nav .bn-item[aria-current="page"] .bn-pil svg { stroke-width: 2.1; fill: var(--bn-pil-fill); }

    /* Avisos: número no Início, bolinha em Escalas (confirmação pendente). */
    #bottom-nav .bn-count {
        position: absolute; top: -3px; right: 5px;
        min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
        display: grid; place-items: center;
        background: #C4603A; color: #fff;
        font: 800 .64rem/1 var(--font-body, 'Inter', sans-serif);
        box-shadow: 0 0 0 2px var(--bg-sidebar);
    }
    #bottom-nav .bn-ponto {
        position: absolute; top: 1px; right: 12px;
        width: 10px; height: 10px; border-radius: 50%;
        background: #C4603A; box-shadow: 0 0 0 2px var(--bg-sidebar);
    }
    #bottom-nav [hidden] { display: none !important; }

    /* ── Topo: sem o ☰ (o Mais abre o menu), com o logotipo ─────────── */
    #wrapper.has-bottom-nav #menu-toggle { display: none; }
    #wrapper.has-bottom-nav .bn-logo { display: inline-flex; align-items: center; flex-shrink: 0; }
    .bn-logo img { height: 34px; width: auto; display: block; }

    /* O fim da página ganha folga para o último item nunca ficar escondido. */
    #wrapper.has-bottom-nav #page-content-wrapper { padding-bottom: calc(var(--bn-h) + 12px); }

    /* O que fica solto no rodapé sobe para não esconder atrás da barra. */
    body:has(#bottom-nav) .pa-banner { bottom: calc(var(--bn-h) + 12px); }
    body:has(#bottom-nav) [style*="position:fixed"][style*="bottom:24px"] { bottom: calc(var(--bn-h) + 12px) !important; }

    /* ── Folha "Mais" ───────────────────────────────────────────────── */
    .bn-overlay {
        display: block; position: fixed; inset: 0; z-index: 1040;
        background: var(--overlay-bg, rgba(20,17,15,.5));
        opacity: 0; visibility: hidden;
        transition: opacity .2s ease, visibility 0s linear .2s;
    }
    .bn-overlay.on { opacity: 1; visibility: visible; transition-delay: 0s; }
    .bn-sheet {
        display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 1041;
        max-height: 86vh; max-height: 86dvh;
        background: var(--bg-card); color: var(--text-main);
        border-radius: 24px 24px 0 0; border: 1px solid var(--border-color); border-bottom: 0;
        padding: 10px 14px calc(18px + env(safe-area-inset-bottom, 0px));
        overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
        scrollbar-width: thin; scrollbar-color: var(--border-color) transparent;
        transform: translateY(105%); visibility: hidden;
        transition: transform .26s cubic-bezier(.2,.8,.2,1), visibility 0s linear .26s;
    }
    .bn-sheet.on { transform: none; visibility: visible; transition-delay: 0s; }
    .bn-alca { width: 44px; height: 5px; border-radius: 3px; background: var(--border-color); margin: 2px auto 10px; }
    .bn-grp {
        margin: 12px 6px 4px;
        font: 700 .66rem/1.3 'IBM Plex Mono', ui-monospace, monospace;
        letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted-dim);
    }
    .bn-sheet .bn-link {
        display: flex; align-items: center; gap: 12px; width: 100%;
        min-height: 48px; padding: 8px 10px; border: 0; border-radius: 12px;
        background: none; color: var(--text-main); text-align: left; text-decoration: none; cursor: pointer;
        font: 600 .92rem/1.3 var(--font-body, 'Inter', sans-serif);
    }
    .bn-sheet .bn-link:hover, .bn-sheet .bn-link:focus-visible { background: var(--bg-secondary); outline: 0; }
    .bn-sheet .bn-link > i:first-child { font-size: 1.2rem; width: 24px; text-align: center; flex: 0 0 auto; color: var(--text-secondary); }
    .bn-sheet .bn-link > span { margin: 0; min-width: 0; }
    .bn-sheet .bn-link .sidebar-lock { margin-left: auto; color: var(--primary); font-size: .85rem; }
    .bn-sheet .bn-link[aria-current="page"] { background: var(--bn-pil); color: var(--bn-ativo); font-weight: 800; }
    .bn-sheet .bn-link[aria-current="page"] > i:first-child { color: var(--bn-ativo); }
    .bn-sheet .sidebar-link-locked { opacity: .6; }
    .bn-sheet .bn-sair { color: var(--danger-fg); }
    .bn-sheet .bn-sair > i:first-child { color: var(--danger-fg); }
}

/* ── Rolagem melhor (vale em toda a tela) ─────────────────────────────── */
/* Listas internas não "vazam" a rolagem para a página de fundo. */
.modal-body, .table-responsive, #notif-list, .custom-scrollbar, .overflow-auto, .overflow-y-auto {
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}
html { overscroll-behavior-y: contain; }

/* Topo ganha sombra suave só depois que a página rola. */
.onchor-navbar { transition: box-shadow .2s ease; }
.onchor-navbar.rolou { box-shadow: 0 10px 18px -16px rgba(45,95,79,.45); }

@media (max-width: 768px) {
    html { scrollbar-width: thin; scrollbar-color: var(--border-color) transparent; }
}

@media (prefers-reduced-motion: reduce) {
    #bottom-nav, .bn-overlay, .bn-sheet, #bottom-nav .bn-pil, #bottom-nav .bn-pil svg { transition: none !important; }
}