/* Menú de las apps (rediseño 2026-10), con los colores de siempre: pestañas redondeadas, la actual rellena.
   Igual en el PC y en el móvil. Se carga después de portal.css y apps.css desde pwa_cabeza() y solo
   sobrescribe: quitar esa línea lo desactiva. (La barra de cristal abajo con animación y arrastre se probó en
   el móvil y se quitó porque iba lenta.) */
.pestanas-app { gap: 6px; padding-bottom: 18px; }
.pestanas-app a { padding: 9px 16px; border-radius: 99px; color: #cbd5e1; }
.pestanas-app a:hover { color: #fff; background: rgba(255, 255, 255, 0.08); }
.pestanas-app a.actual { background: var(--primary); color: #fff; }

/* Móvil: la cabecera mide lo mismo en todas las secciones de una app.
   - Pestañas: todas con icono y nombre debajo, del mismo ancho; nunca se desplazan de lado (al cambiar de página
     volvía al principio) ni cambian de alto.
   - Título: siempre en una línea y de alto fijo, también con el selector de mes al lado (antes bajaba a dos
     líneas en «Movimientos» o «Recordatorios»); si aun así no cabe, se corta con «…». */
@media (max-width: 760px) {
  .pestanas-app {
    display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px;
    margin-top: 16px; padding-bottom: 14px; overflow: visible;
  }
  .pestanas-app a {
    flex-direction: column; justify-content: center; gap: 3px; height: 54px; padding: 0 2px; border-radius: 14px;
    font-size: 0.68rem; letter-spacing: -0.01em;
  }
  .pestanas-app .icono { width: 20px; height: 20px; }
  .pestanas-app span, .pestanas-app a.actual span { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }

  .app-titulo { flex-wrap: nowrap; height: 40px; margin-top: 20px; gap: 10px; }
  .app-titulo h1 { min-width: 0; font-size: 1.45rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .app-titulo > :not(h1) { flex: none; }
  .selector-mes { gap: 6px; }
  .selector-mes .btn-redondo { width: 32px; height: 32px; }
  .mes-actual { font-size: 0.92rem; white-space: nowrap; }
}
/* iPhone normal o mini: algo más de sitio para los nombres largos («Movimientos») */
@media (max-width: 400px) {
  .pestanas-app { gap: 2px; }
  .pestanas-app a { font-size: 0.62rem; letter-spacing: -0.02em; }
}