/* ═══════════════════════════════════════════════════════════════
   FLASHCARD QUIZ — BARRA DE NAVEGAÇÃO MOBILE INFERIOR
   Estilo integrado ao Design System oficial da plataforma.
   Ativo estritamente em dispositivos móveis (largura ≤ 768px).
   Todos os 3 botões são perfeitamente alinhados na mesma linha.
   ═══════════════════════════════════════════════════════════════ */

:root {
    --nav-blue: #2F7DD1;
    --nav-blue-dark: #1E60A8;
    --nav-blue-light: #EAF3FC;
    --nav-blue-mid: #BFE0FF;
    --nav-slate: #64748B;
    --nav-slate-dark: #1E293B;
    --nav-shadow: 0 -4px 20px rgba(47, 125, 209, 0.08);
    /*
     * --fq-screen-w: variável injetada via JavaScript na index.html
     * no primeiro carregamento (tela principal), capturando o
     * window.innerWidth real do dispositivo e persistindo no
     * sessionStorage. Todas as telas mobile lêem esse valor e
     * aplicam via setProperty para garantir largura consistente.
     * Fallback: 100vw (cobertura para acesso direto à página).
     */
    --fq-screen-w: 100vw;
}

/* Oculto no Desktop */
.mob-nav {
    display: none;
}

/* ═══════════════════════════════════════════════════════════════
   EXIBIÇÃO EXCLUSIVA EM TELAS MOBILE (≤768px)
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

    /* ─── FIXAÇÃO DO ROOT SCROLLER ─────────────────────────────────
       Problema identificado: ao navegar para perfil_device.html, a
       navbar (position:fixed) "estourava" horizontalmente para fora
       da tela. A causa raiz era que o elemento <html> não tinha
       overflow-x controlado — quando algum conteúdo interno causava
       overflow, o root scroller ampliava seu scrollWidth, e o
       position:fixed acompanhava esse tamanho maior em vez de ancorar
       ao viewport real.

       Solução: overflow-x: hidden no <html> sela o root scroller,
       impedindo que o viewport percebido seja maior que a tela física.
       Com o root scroller travado, position:fixed ancora corretamente.
    ──────────────────────────────────────────────────────────────── */
    html {
        overflow-x: hidden;
        max-width: 100%;
    }

    /* Folga inferior no body para evitar sobreposição + overflow travado */
    body {
        padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px)) !important;
        overflow-x: hidden;
        max-width: 100%;
    }

    .container,
    .profile-container {
        padding-bottom: 20px;
    }

    /* ─── CONTAINER DA BARRA FIXA ───────────────────────────────────
       Mecanismo de largura em camadas (ordem de prioridade):
       1. left:0 + right:0  — âncora nos dois extremos do viewport fixo
       2. width: var(--fq-screen-w) — usa a largura capturada e salva
          pela index.html via JS/sessionStorage para consistência total
       3. max-width: 100vw  — fallback final, nunca ultrapassa o viewport

       A combinação dos 3 mecanismos garante que a barra não extrapole
       o eixo X em nenhum cenário de navegação mobile.
    ──────────────────────────────────────────────────────────────── */
    .mob-nav {
        display: flex;
        align-items: center;
        justify-content: space-around;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        width: var(--fq-screen-w);
        max-width: 100vw;
        height: 62px;
        background: rgba(255, 255, 255, 0.94);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        border-top: 1.5px solid var(--nav-blue-mid);
        box-shadow: var(--nav-shadow);
        z-index: 9999;
        padding: 0 16px;
        padding-bottom: env(safe-area-inset-bottom, 0px);
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
        box-sizing: border-box;
    }

    /* Botão base — idêntico e alinhado para os 3 botões */
    .mob-nav-btn {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 4px;
        flex: 1;
        height: 100%;
        background: none;
        border: none;
        cursor: pointer;
        padding: 6px 4px;
        text-decoration: none;
        color: var(--nav-slate);
        transition: color 0.18s ease, transform 0.15s ease, background-color 0.18s ease;
        -webkit-tap-highlight-color: transparent;
        border-radius: 12px;
        min-width: 0;
        box-sizing: border-box;
    }

    .mob-nav-btn:active {
        transform: scale(0.92);
        background-color: var(--nav-blue-light);
    }

    /* Ícone SVG */
    .mob-nav-svg {
        width: 22px;
        height: 22px;
        flex-shrink: 0;
        stroke: var(--nav-slate);
        transition: stroke 0.18s ease, transform 0.18s ease;
    }

    /* Rótulo de texto */
    .mob-nav-lbl {
        font-size: 11px;
        font-weight: 600;
        letter-spacing: -0.01em;
        line-height: 1;
        color: var(--nav-slate);
        transition: color 0.18s ease;
    }

    /* Estado ativo (aba selecionada) */
    .mob-nav-btn.mob-nav-active {
        color: var(--nav-blue);
    }

    .mob-nav-btn.mob-nav-active .mob-nav-svg {
        stroke: var(--nav-blue);
        transform: translateY(-1px);
    }

    .mob-nav-btn.mob-nav-active .mob-nav-lbl {
        font-weight: 700;
        color: var(--nav-blue);
    }
}