/*
 * La barra inferior del movil (etapa E; brief seccion 11). Marcado: templates/partials/barra-inferior.php; comportamiento:
 * js/inline/barra-inferior.js. Solo debajo de 1024 px, el corte del menu movil: en escritorio no existe.
 *
 * ALTO RESERVADO. --bi-alto es el alto real de la barra con el margen del sistema (env(safe-area-inset-bottom), la
 * barra de gestos del iPhone). El cuerpo de la pagina deja ese espacio abajo, asi que el ultimo contenido nunca
 * queda debajo de la barra.
 *
 * LOS DEMAS ELEMENTOS FIJOS DE ABAJO se suben sobre la barra; con el relleno solo no basta:
 *   - el boton de WhatsApp (a.messenger, templates/footer.php);
 *   - la sugerencia de tienda (#osgo-market-banner, templates/header.php), que queda pegada encima de la barra.
 * Mientras la sugerencia esta a la vista, el boton de WhatsApp sube tambien su alto (--bi-sugerencia, lo mide el
 * script): antes la sugerencia lo tapaba a medias, tambien en escritorio, donde no hay barra.
 * No hay aviso de cookies ni barra de compra fija en el sitio; el panel de la ficha (aside) va en el flujo.
 */
:root { --bi-alto: 0px; --bi-sugerencia: 0px; }

.bi-barra { display: none; }

/* La sugerencia de tienda y WhatsApp, en todas las anchuras: el boton sube el alto de la sugerencia mientras se ve. */
a.messenger { bottom: calc(var(--bi-alto) + var(--bi-sugerencia) + 16px) !important; transition: bottom .2s ease; }
#osgo-market-banner { bottom: var(--bi-alto) !important; }

@media (max-width: 1023.98px) {
  /* Solo donde la barra existe (no en las pantallas de compra): :has, y la clase que pone el script para navegadores
     sin :has. */
  html:has(#barra-inferior), html.bi-con-barra { --bi-alto: calc(60px + env(safe-area-inset-bottom, 0px)); }

  .bi-barra { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; background: #fff;
    border-top: 1px solid #dfe3d8; padding-bottom: env(safe-area-inset-bottom, 0px);
    transition: transform .2s ease, visibility .2s; }
  /* Solo con barra: en las pantallas de compra la hoja tambien carga, y un 0 !important borraria su propio relleno. */
  html:has(#barra-inferior) body, html.bi-con-barra body { padding-bottom: var(--bi-alto) !important; }

  .bi-lista { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); list-style: none; margin: 0 auto; padding: 0;
    max-width: 640px; }
  /* 59 px + 1 px de borde = los 60 px de --bi-alto. */
  .bi-item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 59px;
    padding: 6px 2px; color: #3d4236; text-decoration: none; font-family: inherit; font-size: 12px; line-height: 1.2; }
  .bi-ico { width: 24px; height: 24px; flex: 0 0 auto; }
  .bi-texto { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .bi-item.bi-activo { color: #5e7f00; font-weight: 600; }
  .bi-item.bi-activo .bi-ico { stroke-width: 2; }
  .bi-item:focus-visible { outline: 2px solid #5e7f00; outline-offset: -4px; border-radius: 8px; }

  /* Detras de un panel o modal abierto, y con el teclado en pantalla: fuera de la vista e inerte (el script pone inert
     y aria-hidden). El espacio reservado se queda: liberarlo moveria la pagina debajo del panel. */
  html.bi-tapada .bi-barra { transform: translateY(100%); visibility: hidden; }

  /* Mientras la barra se ve, la sugerencia de tienda deja respirar sus botones sobre la barra. */
  #osgo-market-banner { box-shadow: 0 -1px 0 rgba(255, 255, 255, .12); }
}

@media (prefers-reduced-motion: reduce) {
  .bi-barra, a.messenger { transition: none; }
}