/* =========================================================================
   SHELL DE APLICATIVO — MOBILE
   -------------------------------------------------------------------------
   No celular o sistema deixa de parecer "site com menu hambúrguer" e passa a
   se comportar como app: barra de navegação fixa embaixo (as seções mais
   usadas + "Mais"), conteúdo rolando entre o header e essa barra, e respeito
   às áreas seguras do aparelho (notch do iPhone em cima, barra de gestos do
   iOS/Android embaixo).

   Consome as variáveis já definidas em sistema.css (--primary, --surface,
   --text-muted...) — não redefine paleta.

   Vale só até 992px, que é o mesmo corte onde a sidebar já vira gaveta.
   ========================================================================= */

:root {
    --app-nav-altura: 58px;
    /* env() devolve 0 em aparelho sem área segura, então a conta funciona
       igual no Android e no iPhone — não precisa de dois valores. */
    --app-nav-safe: env(safe-area-inset-bottom, 0px);
    --app-nav-total: calc(var(--app-nav-altura) + var(--app-nav-safe));
}

/* A barra só existe no mobile: no desktop a sidebar dá conta. */
.app-nav { display: none; }

@media (max-width: 992px) {

    /* ---------------------------------------------------------------
       1. ESPAÇO PRO CONTEÚDO NÃO FICAR EMBAIXO DA BARRA
       O padding vai no conteúdo (e não um margin no wrapper) pra a
       rolagem continuar indo até o fim da página.
       --------------------------------------------------------------- */
    body.has-app-nav .main-content {
        padding-bottom: calc(var(--app-nav-total) + 16px) !important;
    }
    body.has-app-nav .sys-footer {
        margin-bottom: var(--app-nav-total);
    }

    /* ---------------------------------------------------------------
       2. A BARRA
       --------------------------------------------------------------- */
    .app-nav {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 9990; /* abaixo da gaveta (10001), acima do conteúdo */
        display: flex;
        align-items: stretch;
        height: var(--app-nav-total);
        padding-bottom: var(--app-nav-safe);
        background: var(--surface, #fff);
        border-top: 1px solid var(--border-color, #e6e9ee);
        /* Sombra pra cima: separa a barra do conteúdo que passa por baixo. */
        box-shadow: 0 -2px 12px rgba(16, 24, 40, .06);
        /* Fundo translúcido onde o navegador suporta, como nos apps nativos. */
        backdrop-filter: saturate(140%) blur(12px);
    }
    @supports (backdrop-filter: blur(12px)) {
        .app-nav { background: color-mix(in srgb, var(--surface, #fff) 88%, transparent); }
    }

    /* Os módulos rolam pro lado quando não cabem; o "Mais" fica fora daqui,
       fixo à direita. Com poucos itens eles se esticam e ocupam a largura
       toda, como antes. */
    .app-nav-rolagem {
        flex: 1 1 auto;
        min-width: 0;
        display: flex;
        align-items: stretch;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
        scroll-snap-type: x proximity;
        scrollbar-width: none;
        /* Fade na borda direita: avisa que tem mais item escondido. */
        -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 18px), transparent);
                mask-image: linear-gradient(to right, #000 calc(100% - 18px), transparent);
    }
    .app-nav-rolagem::-webkit-scrollbar { display: none; }
    .app-nav-rolagem .app-nav-item {
        flex: 1 0 64px;
        scroll-snap-align: start;
    }
    /* Separa o "Mais" fixo da faixa que rola. */
    .app-nav > .app-nav-item {
        flex: 0 0 60px;
        border-left: 1px solid var(--border-color, #e6e9ee);
    }

    .app-nav-item {
        position: relative; /* âncora do tracinho de item ativo */
        flex: 1 1 0;
        min-width: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        padding: 6px 2px;
        border: none;
        background: none;
        font: inherit;
        text-decoration: none;
        color: var(--text-muted, #64748b);
        cursor: pointer;
        /* Sem highlight azul do toque no mobile. */
        -webkit-tap-highlight-color: transparent;
        transition: color .15s ease;
    }
    .app-nav-item:active { color: var(--primary, #3f502e); }

    .app-nav-item i {
        font-size: 1.05rem;
        line-height: 1;
    }
    .app-nav-item span {
        font-size: .64rem;
        font-weight: 600;
        line-height: 1.1;
        letter-spacing: .01em;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* Item da seção em que a pessoa está. O ponto acima do ícone é o que
       marca a posição sem depender só de cor (daltonismo). */
    .app-nav-item.is-ativo {
        color: var(--primary, #3f502e);
    }
    .app-nav-item.is-ativo::before {
        content: '';
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 26px;
        height: 3px;
        border-radius: 0 0 3px 3px;
        background: var(--primary, #3f502e);
    }

    /* ---------------------------------------------------------------
       3. AJUSTES DE APP NO RESTO DA CASCA
       --------------------------------------------------------------- */

    /* Header respeitando o notch. */
    body.has-app-nav .sys-topbar {
        padding-top: env(safe-area-inset-top, 0px);
    }

    /* 100vh no iOS conta a barra do Safari que some ao rolar, e corta o fim
       da gaveta. dvh acompanha a altura real; o vh fica de fallback. */
    body.has-app-nav .sidebar {
        height: 100vh;
        height: 100dvh;
        padding-top: calc(30px + env(safe-area-inset-top, 0px));
        padding-bottom: calc(30px + env(safe-area-inset-bottom, 0px));
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Alvos de toque de 44px, o mínimo confortável no celular. */
    body.has-app-nav .nav-link {
        min-height: 44px;
        display: flex;
        align-items: center;
    }

    /* Cards ocupam a largura toda: duas colunas espremidas numa tela de
       360px é o que fazia a lista de módulos ficar ruim. */
    body.has-app-nav .dash-modulos-acesso,
    body.has-app-nav .qa-modulos-grid {
        grid-template-columns: 1fr;
    }
}

/* Telas bem estreitas (iPhone SE e afins): 5 rótulos na mesma linha ficam
   apertados — reduz a fonte em vez de deixar o texto cortar no meio. */
@media (max-width: 360px) {
    .app-nav-item span { font-size: .58rem; }
    .app-nav-item i { font-size: 1rem; }
}