/* ==========================================================================
   Mobile tab bar — navegación primaria fija al fondo del viewport
   ==========================================================================
   - Solo aparece en mobile y solo cuando el usuario está logueado.
   - 5 destinos: Dashboard / Actividades / Planificador / Zapatillas / Pace.
   - Respeta safe-area-inset-bottom (home indicator de iPhones modernos).
   - El item activo se marca con clase .is-active (la setea Razor según
     el controller actual).
   - Al estar fixed bottom, el contenido principal necesita reservar
     padding-bottom equivalente. Lo hacemos con una variable CSS
     (--mobile-tabbar-height) consumida por <main>.
   ========================================================================== */

:root {
    --mobile-tabbar-height: 60px;
}

@media (max-width: 1223.98px) {

    .mobile-tabbar {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 1045;
        display: flex;
        align-items: stretch;
        justify-content: space-around;
        background-color: var(--navbar-bg);
        border-top: 1px solid rgba(255, 255, 255, 0.08);
        /* Safe area iOS */
        padding-bottom: env(safe-area-inset-bottom, 0);
        height: calc(var(--mobile-tabbar-height) + env(safe-area-inset-bottom, 0));
    }

    .mobile-tabbar__item {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0.2rem;
        padding: 0.4rem 0.25rem;
        color: rgba(255, 255, 255, 0.65);
        text-decoration: none;
        font-size: 0.7rem;
        line-height: 1;
        transition: color 180ms ease;
        position: relative;
        min-width: 0;
    }

    .mobile-tabbar__item:hover,
    .mobile-tabbar__item:focus-visible {
        color: #fff;
    }

    .mobile-tabbar__icon {
        font-size: 1.15rem;
        line-height: 1;
    }

    .mobile-tabbar__label {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
    }

    /* Item activo — accent color + barrita superior sutil */
    .mobile-tabbar__item.is-active {
        color: var(--primary-color);
    }

    .mobile-tabbar__item.is-active::before {
        content: "";
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 32px;
        height: 2px;
        background-color: var(--primary-color);
        border-radius: 0 0 2px 2px;
    }

    /* Reserva de espacio al fondo del contenido para que la última fila
       no quede tapada por el tab bar fijo. Usamos un valor generoso
       (tab bar + safe-area + 2.5rem) para que botones de submit, modales
       que abren desde abajo, etc, queden con respiro real.

       Doble selector para máxima compatibilidad: la clase explícita
       .has-mobile-tabbar (gateada por Razor) y el :has() para browsers
       modernos. !important para ganarle a las utility classes de
       Bootstrap (pb-3, etc) que vienen con !important built-in. */
    body.has-mobile-tabbar main,
    body:has(.mobile-tabbar) main {
        padding-bottom: calc(var(--mobile-tabbar-height) + env(safe-area-inset-bottom, 0) + 2.5rem) !important;
    }

    /* También reservamos scroll-padding-bottom para que cuando el browser
       hace scrollIntoView (autofocus en form, anchor, etc) no termine
       posicionado tras el tab bar. */
    body.has-mobile-tabbar,
    body:has(.mobile-tabbar) {
        scroll-padding-bottom: calc(var(--mobile-tabbar-height) + env(safe-area-inset-bottom, 0) + 1rem);
    }
}

/* En desktop el tab bar simplemente no se renderiza (.hide-on-desktop). */