/* ============================================================
   APP SHELL — bottom navigation persistente para las superficies de
   producto (Hoy/La Mesa/Mi Universo/Explorar) en mobile. P0 (blueprint
   §6): puramente aditivo — no sustituye el header actual (nav.html),
   convive con él (regla 14 del brief: no romper el header público
   todavía). Solo se muestra:
     - en viewport móvil (max-width: 767px, ver --bp-sm en tokens.css)
     - con sesión iniciada (gated por js/core/app-shell.js vía
       window.Veloris.auth.onChange — mismo mecanismo que nav.js)
   Empieza oculta por CSS (display:none) para evitar CLS: el JS solo
   añade .is-visible cuando ya confirmó auth + viewport, nunca al revés.
   ============================================================ */
#app-bottom-nav{
  display:none;
}
@media (max-width:767px){
  #app-bottom-nav.is-visible{
    display:flex;
    position:fixed;
    left:0;right:0;bottom:0;
    z-index:500; /* por debajo de #auth-modal/guardado-modal (900+ típico), por encima del contenido */
    height:calc(var(--bottom-nav-h) + var(--safe-bottom));
    padding-bottom:var(--safe-bottom);
    background:var(--nav-bg-solid);
    border-top:1px solid var(--border);
    backdrop-filter:var(--blur-panel);
    -webkit-backdrop-filter:var(--blur-panel);
  }
}
.app-bottom-nav-item{
  flex:1 1 0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:4px;
  min-height:var(--bottom-nav-h);
  color:var(--muted);
  text-decoration:none;
  font-family:'Space Grotesk',sans-serif;
  font-size:11px;letter-spacing:0.2px;
  -webkit-tap-highlight-color:transparent;
  transition:color var(--motion-normal) var(--ease-response);
}
.app-bottom-nav-item svg{
  width:22px;height:22px;
  stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;
  transition:transform var(--motion-normal) var(--ease-response);
}
.app-bottom-nav-item.is-active{color:var(--ink);}
.app-bottom-nav-item.is-active svg{transform:translateY(-1px);}
.app-bottom-nav-item:focus-visible{outline:2px solid var(--s3, rgba(237,237,235,0.4));outline-offset:-2px;border-radius:var(--radius-control);}

@media (prefers-reduced-motion: reduce){
  .app-bottom-nav-item, .app-bottom-nav-item svg{transition:none;}
}

/* Reserva de espacio en el contenido de producto para que el bottom nav
   nunca tape lo último de la pantalla — solo aplica cuando el nav está
   realmente visible (misma clase que activa el propio nav). */
@media (max-width:767px){
  html.has-app-bottom-nav body{padding-bottom:var(--bottom-nav-total-h);}
  /* El footer editorial no necesita el hueco (vive muy por debajo del
     fold en páginas de producto) — pero si una página de producto no
     tiene footer visible aquí, este padding en body es suficiente y no
     requiere tocar cada página individualmente. */
}

/* P2 (2026-09-12), prioridad #3 del brief: con el bottom nav visible ya
   hay una navegación de producto propia — el header heredado del sitio
   público (nav.html) pesa de más encima de ella y refuerza la sensación
   de "página web" en vez de "app". Se compacta solo el alto/padding del
   header (menos aire, wordmark más pequeño), nunca se oculta ningún
   icono/destino: la estrella-menú y nav-theme-btn son funcionalidad real
   sin duplicado en el bottom nav ni en Configuración. */
@media (max-width:767px){
  html.has-app-bottom-nav .nav-inner{padding:8px 16px;min-height:44px;}
  html.has-app-bottom-nav #nav.nav-scrolled .nav-inner{padding:6px 14px;min-height:40px;}
  html.has-app-bottom-nav .nav-wordmark-svg{height:14px;}
}