/* ============================================================
   BARRA INFERIOR — cápsula de vidrio (solo teléfono)
   ------------------------------------------------------------
   Traída del patrón que ya funciona en la tienda de CICLON4X4:
   cápsula flotante fija abajo, con vidrio esmerilado. Aquí el
   acento ámbar se cambia por el verde de la casa.

   Por qué abajo: en un teléfono el pulgar llega al borde inferior,
   no a la esquina superior. La navegación baja y el header se queda
   solo con lo que INFORMA (logo, saldo), no con lo que navega.

   Se muestra solo hasta 980px: en escritorio manda el header, que
   ahí sí tiene sitio de sobra.
   ============================================================ */
.bnav{
  position:fixed;left:0;right:0;bottom:0;z-index:60;
  padding:0 12px max(12px, env(safe-area-inset-bottom));
  display:none;                      /* se enciende en el media query */
  pointer-events:none;               /* solo la cápsula recibe toques */
}
.bnav-cap{
  pointer-events:auto;
  margin:0 auto;max-width:520px;
  display:flex;align-items:center;justify-content:space-around;
  gap:2px;padding:7px 6px;
  border-radius:999px;
  background:rgba(10,14,7,.72);
  border:1px solid rgba(143,255,61,.28);
  -webkit-backdrop-filter:blur(20px) saturate(150%);
  backdrop-filter:blur(20px) saturate(150%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07), 0 10px 30px rgba(0,0,0,.55);
}
.bnav-item{
  flex:1 1 0;min-width:0;
  display:flex;flex-direction:column;align-items:center;gap:4px;
  padding:7px 2px;border-radius:999px;
  color:#9aa98f;text-decoration:none;
  font-family:inherit;font-size:10.5px;font-weight:700;line-height:1;
  letter-spacing:.2px;
  transition:color .15s, background .15s;
}
.bnav-item svg{width:21px;height:21px;fill:none;stroke:currentColor;
  stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.bnav-item span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.bnav-item:hover{color:#cfe8bf}
/* Activo: el verde entra por el fondo y el texto, sin halo suelto. */
.bnav-item.on{color:#8fff3d;background:rgba(143,255,61,.12)}
.bnav-item.on svg{stroke-width:2.3}

@media(max-width:980px){
  .bnav{display:block}
  /* Hueco para que la cápsula no tape el final del contenido. */
  body{padding-bottom:86px}
  /* Los flotantes suben por encima de la cápsula. Aquí se decide la columna
     entera, y no en cada regla suelta de index.html, porque el orden depende de
     la altura de la cápsula: repartirlo entre archivos fue lo que hizo que el
     altavoz acabara montado sobre WhatsApp.

     Columna derecha, de abajo arriba: WhatsApp (60px de alto) a 100px, y el
     altavoz a 180px. Son 20px libres entre las dos cajas: con menos, los dos
     halos verdes (12px y 14px de radio) se funden y se leen como un solo bulto
     aunque las cajas no lleguen a tocarse.

     Mismo `right` para los dos: comparten borde derecho y forman una columna
     recta. Antes tenían 16px y 22px, y ese desajuste de 6px se notaba. */
  .wa-fab, .sug-fab{bottom:100px!important}
  .wa-fab{right:16px!important}
  .snd-fab{bottom:180px!important; right:16px!important}
  .sug-fab{left:16px!important}
  /* El panel de sugerencias sale del avatar de la izquierda, no de la columna
     derecha: le basta con despejar su propio botón. */
  .sug-panel{bottom:172px!important; left:16px!important}
  .mlb-slip{bottom:96px!important}
}