/* ═══════════════════════════════════════════════════════════════════
   BARRA-ABAJO.CSS — LA BARRA DE ABAJO DE LA TIENDA, EN EL TELÉFONO

   Lo pidió Juan el 25-10-2026, después de ver la del panel: en el
   teléfono, una barra fija abajo con Market, Eventos, Carrito y
   Mi pedido. Todo a la vista y donde está el pulgar.

   ANTES abajo había una «franja» con las dos ventanas plegadas —el
   carrito y el rastreo— de las que solo se veían las barras de título.
   Ocupaban lo mismo que esta barra y servían para dos cosas; ésta
   sirve para cuatro. Las dos ventanas siguen existiendo y siguen
   siendo las mismas: ahora se abren desde aquí, una cada vez, encima
   de la barra.

   El HTML de la barra lo pone `assets/barra.js` (una sola copia para
   las cuatro páginas: portada, producto, acerca y términos). Este
   archivo es solo su aspecto, y se carga en las cuatro.

   Lo de `html .col-lado` en vez de `.col-lado` a secas: la portada
   trae sus propias reglas de la franja en su <style>, que va DESPUÉS
   de este archivo y ganaría a igualdad de peso. El `html` delante le
   da el peso justo para ganar sin `!important`.
   ═══════════════════════════════════════════════════════════════════ */

.barra-tienda { display:none; }

@media (max-width: 899px) {
  :root { --hueco-abajo: calc(62px + env(safe-area-inset-bottom, 0px)); }

  /* El hueco para que la barra no tape el pie. En la portada lo pone
     su propia regla con `--franja-alto`, que mide la barra. */
  body { padding-bottom: var(--hueco-abajo); }

  /* `flex` con los botones a partes iguales, y no una rejilla de 4
     columnas fijas: cuando AJUSTES esconde una sección (Eventos, si no
     hay ninguno publicado) su botón se va, y con 4 columnas quedaba un
     hueco vacío a la derecha y la barra se veía corrida a un lado. Así
     los que quedan se reparten el ancho entero, sean 4 o 3. */
  .barra-tienda {
    display:flex;
    position:fixed; left:0; right:0; bottom:0; z-index:160;
    background:var(--bg-gray);
    border-top:2px solid var(--luz, #fff);
    box-shadow:0 -2px 0 var(--border-gray), 0 -3px 8px rgba(0,0,0,.25);
    padding-bottom:env(safe-area-inset-bottom, 0px);
  }
  .barra-tienda .bt {
    flex:1 1 0; min-width:0;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:3px; min-height:60px; padding:4px 2px;
    font-family:var(--letra-fuerte); font-weight:700; font-size:var(--fp-xs);
    color:var(--tinta-chrome, #000); text-decoration:none; text-align:center;
    border-left:1px solid var(--border-gray);
    -webkit-tap-highlight-color:transparent;
  }
  .barra-tienda .bt:first-child { border-left:0; }
  .barra-tienda .bt[hidden] { display:none; }
  /* El icono y el número del carrito ocupan lo mismo, para que las
     cuatro palabras queden a la misma altura. */
  .barra-tienda .bt i,
  .barra-tienda .bt .bt-n { height:24px; display:inline-flex; align-items:center; justify-content:center; }
  .barra-tienda .bt i { font-style:normal; font-size:20px; line-height:1; }
  .barra-tienda .bt:active { background:var(--border-gray); }
  .barra-tienda .bt:focus-visible { outline:3px solid var(--bm-morado); outline-offset:-3px; }

  /* La ventana abierta se marca con el verde del logo y la tinta fija
     —oscura en los tres modos—, igual que la sección marcada del panel. */
  .barra-tienda .bt.on { background:var(--bm-verde); color:var(--tinta-fija, #292667); }

  /* El número del carrito, en el rosado de los botones de la tienda
     (el que se elige en AJUSTES): es lo que lleva a pagar. */
  .barra-tienda .bt-n {
    min-width:24px; padding:0 5px; box-sizing:border-box;
    font-family:var(--letra); font-weight:700; font-size:var(--fs-sm); line-height:1.3;
    background:var(--boton-fondo, #BE2358); color:var(--boton-tinta, #fff);
    border:2px solid; border-color:var(--boton-luz, #fff) var(--boton-sombra, #7A1638) var(--boton-sombra, #7A1638) var(--boton-luz, #fff);
  }
  .barra-tienda .bt-n.cero { background:var(--papel, #fff); color:var(--text-dark); border-color:var(--border-gray) var(--luz, #fff) var(--luz, #fff) var(--border-gray); }

  /* Al agregar algo parpadea, como la barra de título del carrito. */
  .barra-tienda .bt.parpadea { background:var(--bm-amarillo, #EFE933); color:var(--tinta-fija, #292667); }

  /* ── EL CARRITO Y MI PEDIDO, ENCIMA DE LA BARRA ──────────────────
     Plegadas no se ven en absoluto —antes se veían sus títulos, que
     era la franja—; abierta, la que toque se apoya en la barra. */
  html .col-lado { bottom:var(--hueco-abajo); max-height:calc(100vh - var(--hueco-abajo) - 60px); }
  html .col-lado .win95-panel.collapsed { display:none; }
  /* Sin ninguna abierta, la columna entera fuera (si no, quedaría su
     sombra flotando encima de la barra). Con `:has()` y no con una
     clase que ponga el JavaScript: así se esconde en el mismo instante
     en que se pliega la ventana, la pliegue quien la pliegue. */
  html .col-lado:not(:has(.win95-panel:not(.collapsed))) { display:none; }
}