/* ============================================================
   nav-movil.css
   Punto Neto
   Ruta: public/assets/css/nav-movil.css
   Creado: 2026-08-11
   Descripcion: Barra de navegacion inferior, fija, SOLO mobile
                (<768px, mismo breakpoint que header-buscador.css).
                Objetivo (feedback real de usuarios, sesion
                2026-08-11): un usuario nuevo en mobile no encontraba
                como llegar al menu — dependia de bajar hasta la
                seccion "Nuestro menu" del home o del footer. Este
                nav queda visible sin importar cuanto se scrollee,
                mismo criterio que apps de referencia (Burger King:
                Home / Pedir Aqui / Cuponeras / Restaurantes / Mas).

                Solo usa var(--color-*) / var(--sp-*) ya definidas
                por Tema::cssVars() y base.css — cero colores
                hardcoded, mismo criterio que tienda-estado.css.
   Depende de:   Tema::cssVars(), public/assets/css/base.css
   Requerido por: src/Views/layout.php
   ============================================================ */

.nav-movil {
  display: none; /* se activa solo <768px, ver media query abajo */
}

@media (max-width: 767px) {
  .nav-movil {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 900; /* debajo del modal-cerrado (1000) y del panel de carrito */
    background-color: var(--color-superficie);
    border-top: 1px solid var(--color-borde);
    box-shadow: var(--sombra-2);
    padding-bottom: env(safe-area-inset-bottom, 0); /* notch/home-bar iOS */
  }

  .nav-movil__item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: var(--sp-2) var(--sp-1);
    color: var(--color-texto-suave);
    font-size: 0.6875rem;
    font-weight: 600;
    -webkit-tap-highlight-color: transparent;
  }

  .nav-movil__item .icono {
    font-size: 22px;
  }

  .nav-movil__item[data-activo="true"] {
    color: var(--color-primario);
  }

  .nav-movil__item:active {
    transform: scale(0.95);
  }

  /* Espacio para que el contenido/footer no queden tapados detras
     de la barra fija — mismo criterio que carrito-panel usa para
     no superponerse al contenido. */
  body:not(.modo-kiosko) .contenido-principal,
  body:not(.modo-kiosko) .pie-pagina {
    padding-bottom: calc(56px + env(safe-area-inset-bottom, 0));
  }
}