/* Barra de navegación inferior móvil (fase 1). Fichero propio: NO toca
   Bootstrap ni style-v2. Solo se carga cuando el flag MOBILE_NAV_ENABLED
   permite pintar la barra (ver base.html + includes/mobile_bottom_nav.html).

   Colores de la maqueta aprobada: azul de marca #126EF8, oro #FFD51F,
   texto #15263B, barra blanca con esquinas superiores redondeadas.
   Los tamaños y colores de los SVG van ADEMÁS en el atributo `style` del
   propio svg, porque otras hojas de la web los pisaban en el móvil. */

.pbc-mnav {
  display: none; /* escritorio: no existe */
}

@media (max-width: 767.98px) {
  /* EL DESLIZAR ES NUESTRO, NO DEL NAVEGADOR (Guille, 18/08/2026: "el swipe
     está un poco loco, me lleva a otros lugares"). Chrome en Android usa el
     desliz horizontal para ir ATRÁS y ADELANTE en el historial, y eso pisaba
     el gesto de cambiar de pestaña: el dedo iba a Clases y el navegador te
     devolvía a la pantalla anterior, que podía ser cualquiera. Con esto el
     gesto del historial se apaga en la app y solo queda el nuestro, que va
     entre las cinco pestañas de la barra y nada más. */
  html, body { overscroll-behavior-x: none; }

  .pbc-mnav {
    display: flex;
    align-items: flex-end;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1030;
    background: #ffffff;
    border-top: 1px solid #e8edf4;
    border-radius: 18px 18px 0 0;
    box-shadow: 0 -3px 14px rgba(21, 38, 59, 0.08);
    /* PWA/iOS: respeta la barra de gestos de abajo */
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }

  .pbc-mnav-item {
    flex: 1 1 0;
    min-width: 0;
    min-height: 58px; /* objetivo táctil holgado */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 3px;
    padding: 8px 2px 9px;
    text-decoration: none;
    color: #126EF8;
    -webkit-tap-highlight-color: transparent;
  }
  .pbc-mnav-item:hover,
  .pbc-mnav-item:focus { text-decoration: none; color: #126EF8; }

  /* Refuerzo por si el `style` del svg no llegara: nunca gigantes ni negros */
  .pbc-mnav-item svg {
    width: 26px !important;
    height: 26px !important;
    max-width: 26px !important;
    fill: none;
    flex-shrink: 0;
  }
  .pbc-mnav-label {
    font-size: 11px;
    line-height: 1.15;
    font-weight: 600;
    color: #126EF8;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
  }
  /* Pestaña activa: azul más oscuro para distinguirla */
  .pbc-mnav-item.is-active .pbc-mnav-label { color: #086BC9; }

  /* Pestaña activa: píldora azul pálido detrás del icono. IGUAL en las cinco
     pestañas (Guille 14/08/2026). Clases tenía baldosa llena + raya dorada y
     por eso la barra sobresalía justo en esa pantalla. */
  .pbc-mnav-item.is-active .pbc-mnav-ico-wrap {
    background: #E4EFFF;
    border-radius: 13px;
    padding: 5px 15px;
  }

  /* Badge rojo de no leídos del chat (arriba a la derecha del bocadillo) */
  .pbc-mnav-ico-wrap { position: relative; display: inline-flex; }
  .pbc-mnav-badge {
    position: absolute;
    top: -6px;
    right: -8px;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    border-radius: 999px;
    background: #e53935;
    border: 2px solid #ffffff;
    box-sizing: content-box;
    color: #fff;
    font-size: 10px;
    line-height: 17px;
    font-weight: 700;
    text-align: center;
  }

  /* Con la barra de abajo NO hace falta la burbuja flotante de chat: el Chat ya
     tiene su pestaña. Se oculta solo (no se quita del HTML) para que el sondeo
     que enciende el puntito del menú siga funcionando. */
  .cmty-fab-wrap { display: none !important; }

  /* Que la barra no tape el final del contenido (la clase la pone el script
     de la barra solo cuando está visible). safe-area incluida. */
  body.has-pbc-mnav {
    padding-bottom: calc(74px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

/* A 320px de ancho sigue cabiendo: etiquetas un pelín más pequeñas */
@media (max-width: 359.98px) {
  .pbc-mnav-label { font-size: 9.5px; }
  .pbc-mnav-item.is-active .pbc-mnav-ico-wrap { padding: 5px 11px; }
}