/* ══════════════════════════════════════════════════════════════════════
   BARRA DE NAVEGACIÓN INFERIOR · solo teléfono

   POR QUÉ ESTE ARCHIVO EXISTE Y NO SE USA `movil.css`

   La barra vivía dentro de `movil.css`, y `movil.css` solo estaba enlazada
   en tres páginas: index, calculadora y cuenta. En las demás —academia,
   curso, presencial, consulta, blog, formación— no había barra. Desde el
   teléfono, entrar a cualquiera de esas páginas era entrar a un callejón:
   no quedaba ni un camino visible hacia la Calculadora salvo bajar hasta
   el pie de página. En iPhone, que es la mayoría del tráfico, eso se leía
   como «la calculadora no existe».

   La solución obvia —enlazar `movil.css` en las seis páginas— no sirve:
   ese archivo trae 400 líneas de reglas con !important (tipografía, H1 a
   26 px, rejillas, precios, márgenes) escritas para las páginas que usan
   el sistema de `bp.css`. Academia y blog tienen su propio <style> y
   habrían cambiado de aspecto entero por poner una barra.

   Así que aquí va SOLO la barra, sin nada más, y se puede enlazar en
   cualquier página sin efectos colaterales.

   Las medidas están duplicadas a propósito con `movil.css` (56 px de alto,
   el mismo corte en 640 px). `pruebas/prueba-barra-movil.js` compara los
   dos archivos y falla si se separan.
   ══════════════════════════════════════════════════════════════════════ */

/* `hidden` tiene que ganar siempre.

   El navegador oculta con una regla propia, `[hidden]{display:none}`, que
   tiene la especificidad de un atributo. Cualquier `display:flex` de hoja
   de autor con la misma especificidad le gana, y el elemento queda marcado
   como oculto y perfectamente visible: invisible al criterio, muy presente
   al dedo. Esta hoja declara `display:flex` en la barra, así que le toca
   traer la defensa. */
[hidden] { display: none !important; }

/* En escritorio la barra no existe. Se esconde por clase y no con `hidden`,
   porque `hidden` es del documento y aquí la decisión es del ancho de la
   pantalla, no del estado de la página. */
.bpnav { display: none; }

@media (max-width: 640px) {

  :root {
    --bp-barra: 56px;                              /* alto de la barra */
    --bp-safe: env(safe-area-inset-bottom, 0px);   /* franja del gesto de iOS */
  }

  /* El cuerpo deja sitio a la barra. Sin esto el último párrafo o el
     último botón de la página quedan tapados y no hay forma de tocarlos.
     `movil.css` repite esta regla con !important para ganarle al
     `padding-bottom` que index.html declara en su propia consulta. */
  body { padding-bottom: calc(var(--bp-barra) + var(--bp-safe)); }

  .bpnav {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 58;
    height: calc(var(--bp-barra) + var(--bp-safe)); padding-bottom: var(--bp-safe);
    background: #fff; border-top: 1px solid #e2e8f0;
  }
  /* 56 px de alto útil por celda: por encima de los 44 px de destino
     táctil, que es lo que pide iOS para algo que se toca de pasada. */
  .bpnav a {
    flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center;
    justify-content: center; gap: 4px; min-height: var(--bp-barra); padding: 0 2px;
    color: #5c6d85; text-decoration: none; -webkit-tap-highlight-color: transparent;
    font-family: 'Poppins', sans-serif; font-size: 11px; font-weight: 500; line-height: 1;
    white-space: nowrap;
  }
  .bpnav svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
  .bpnav a.on { color: #3a66a3; font-weight: 600; }
  .bpnav a.on svg { stroke-width: 2.1; }

  /* Lo que flota abajo sube por encima de la barra. El lanzador del
     asistente se declara en `asistente-web.css`, que se carga al final del
     cuerpo, por eso hace falta !important. */
  .bpa-lanz { bottom: calc(var(--bp-barra) + 14px + var(--bp-safe)) !important; }
  .toast { bottom: calc(var(--bp-barra) + 16px + var(--bp-safe)) !important; }
}

@media print { .bpnav { display: none !important; } }