/*
 * Capa de móvil de toda la app.
 *
 * No es un rediseño: son las correcciones que salieron de MEDIR con Chromium a
 * 390×844 las 95 páginas y las 22 pantallas de dentro de index.html. Todo va
 * dentro de `max-width: 1023px`, así que el escritorio no se toca.
 *
 * Lleva `!important` a propósito en casi todo. Las páginas sueltas traen su CSS
 * en un <style> propio con selectores de dos clases (.badge.level,
 * .section-label.warmup) o estilos en línea, y sin él no ganaba nada: se
 * comprobó midiendo otra vez y seguían en 11 px.
 *
 * Lo que arregla, por orden de lo que más molesta usando el móvil:
 *
 *   1. Zonas de toque. Había 78 controles por debajo de 40 px de alto: el logo
 *      de la cabecera (36), el botón de menú y el de perfil (38), «Volver» (24
 *      de alto), el de descargar PDF de las rutinas, los desplegables de vídeo
 *      y las pastillas de las calculadoras (unidad, sexo, actividad). Apple
 *      pide 44 y Google 48; aquí todo sube a 44.
 *   2. El zoom de Safari. iOS hace zoom al enfocar un campo con letra por
 *      debajo de 16 px y la página se queda torcida al salir. Con 16 no pasa.
 *   3. Letra por debajo de 12 px en etiquetas: 11,8 en las series de los
 *      ejercicios, 11 en las categorías, 9,6 en «día/comidas». Suelo de 12.
 *   4. Rejillas que no caben. 38 comparativas de los artículos se pintaban en
 *      2, 3 y hasta 5 columnas: una página llegaba a 509 px de ancho en una
 *      pantalla de 390 y había que arrastrar de lado para leerla. A una
 *      columna. Las de auto-fit se quedan como están, que ya se adaptan solas.
 *   5. Sitio al final para que la barra fija no tape la última tarjeta.
 */

@media (max-width: 1023px) {

  /* ---- 1. Zonas de toque ------------------------------------------------ */

  .navbar-logo-link,
  .navbar a,
  header a,
  .header-menu-btn,
  .header-profile-btn,
  .icon-btn {
    min-width: 44px !important;
    min-height: 44px !important;
    justify-content: center;
  }

  /* «Volver» medía 62×24: se toca con el borde del pulgar y falla. */
  .back-link,
  .volver {
    display: inline-flex !important;
    align-items: center;
    min-height: 44px !important;
  }

  /* Botones y pastillas que se quedaban entre 22 y 39 px de alto. */
  .rutina-pdf-btn,
  .video-expand-btn,
  .supp-buy-btn,
  .supp-tab,
  .nl-card-cta,
  .cockpit-card-action,
  .unit-btn,
  .gender-btn,
  .activity-btn,
  .frame-btn,
  .cat-btn,
  .rt-level-chip,
  .vid-tab,
  .nt-date-label,
  .nt-quick-btn,
  .nt-aside-header,
  .wqa-history-btn,
  .novedades-wa-btn,
  .auth-btn,
  .primary,
  #unsubscribe-btn,
  .tab {
    min-height: 44px !important;
  }
  /* Los que son inline necesitan además centrar su texto en esa altura. */
  .cockpit-card-action,
  .nl-card-cta,
  .supp-buy-btn,
  .novedades-wa-btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
  }

  /* ---- 2. Campos: 44 de alto y 16 px de letra (el zoom de iOS) ---------- */

  input[type="text"], input[type="email"], input[type="password"],
  input[type="search"], input[type="tel"], input[type="url"],
  input[type="number"], input[type="date"], input[type="time"],
  input:not([type]),
  select, textarea {
    min-height: 44px !important;
    font-size: 16px !important;
  }
  textarea { min-height: 88px !important; }
  /* Casillas e interruptores no son campos de texto, pero sí necesitan un
     área de toque decente. */
  input[type="checkbox"], input[type="radio"] {
    min-width: 22px !important;
    min-height: 22px !important;
  }

  /* ---- 3. Suelo de 12 px para la letra ---------------------------------- */

  .ex-card-sets, .ex-card-mat, .group-label, .badge, .category-badge,
  .section-label, .lesson-status, .level-row-desc, .phase-number, .phase-days,
  .day-meals, .vers, .resource-type, .art-category-count, .score-badge,
  .evidence-badge, .cockpit-kpi-label, .calc-badge-new, .label, label,
  .cwk-label, .spice-day, .spice-desc, .nt-macro-name, .timeline-fill,
  .art-meta, .rec-meta, .activity-title, .activity-desc, .rec-filter-label {
    font-size: 12px !important;
  }
  /* Las etiquetas de la barra inferior se quedan en 11: es la medida de una
     barra de pestañas y con 12 no caben cuatro palabras como «Herramientas». */
  .bottom-nav-item span, .app-tabbar-item span { font-size: 11px !important; }

  /* ---- 4. Comparativas de los artículos, a una columna ------------------ */

  .apple-results, .before-after, .comparison-box, .comparison-grid,
  .counter-grid, .cycle-phases, .data-grid, .error-grid,
  .experiment-groups, .experiment-results, .factors-grid,
  .forbidden-list, .groups-compare, .halo-grid, .macros-grid,
  .math-compare, .mealprep-grid, .mindset-change, .permissions-grid,
  .persona-compare, .priority-foods, .protocol-rules, .restriction-row,
  .reward-grid, .satiety-phases, .scenario-options, .signals-grid,
  .social-situations, .spices-grid, .stats-comparison, .summary-grid,
  .taste-examples, .trap-list, .variety-compare, .videos-grid,
  .week-grid, .weeks-progress, .zone-compare {
    grid-template-columns: 1fr !important;
  }
  /* Un hijo de rejilla no baja de su contenido mínimo si no se le dice. */
  .apple-results > *,
  .before-after > *,
  .comparison-box > *,
  .comparison-grid > *,
  .counter-grid > *,
  .cycle-phases > *,
  .data-grid > *,
  .error-grid > *,
  .experiment-groups > *,
  .experiment-results > *,
  .factors-grid > *,
  .forbidden-list > *,
  .groups-compare > *,
  .halo-grid > *,
  .macros-grid > *,
  .math-compare > *,
  .mealprep-grid > *,
  .mindset-change > *,
  .permissions-grid > *,
  .persona-compare > *,
  .priority-foods > *,
  .protocol-rules > *,
  .restriction-row > *,
  .reward-grid > *,
  .satiety-phases > *,
  .scenario-options > *,
  .signals-grid > *,
  .social-situations > *,
  .spices-grid > *,
  .stats-comparison > *,
  .summary-grid > *,
  .taste-examples > *,
  .trap-list > *,
  .variety-compare > *,
  .videos-grid > *,
  .week-grid > *,
  .weeks-progress > *,
  .zone-compare > * {
    min-width: 0 !important;
  }
  /* En columna, la flecha entre fases apunta hacia abajo, no a la derecha. */
  .cycle-phases .cycle-phase::after { content: '\2193'; }

  /* ---- 5. Que la barra fija no tape el final ---------------------------- */
  /* Ojo: esto también lo pone js/site-nav.js en un <style> en línea, porque la
     hoja se pide por <link> y llegaba tarde en algunas páginas. */

  body { padding-bottom: 96px !important; }
}

/* Nada de esto debe salir al imprimir ni en el PDF de las rutinas. */
@media print {
  body { padding-bottom: 0 !important; }
}