/* mobile.css — Mobile single-responsive overrides
   ─────────────────────────────────────────────────
   Status: VIGENTE
   Updated: 2026-05-09 (migración H1.0-H1.4 single-responsive,
            ADR DECISIONS/2026-05-09_MOBILE_SINGLE_RESPONSIVE.md)
   Cargado por: login.html, index.html, plans.html, beta-apply.html,
                register-beta.html, profile.html, settings.html,
                payment-success.html, admin.html, beta-admin.html

   Breakpoints:
   - 1024px: tablet apaisado / laptop pequeño (cuando se justifique)
   - 768px:  tablet vertical / phablet (default mobile entry-point)
   - 480px:  smartphone vertical
   - 390px:  smartphones pequeños

   Criterios WCAG 2.2 AA aplicados:
   - 1.4.4 Resize text: viewport sin user-scalable=no (verificado en HTML).
   - 1.4.10 Reflow: contenido legible a 320px sin scroll horizontal.
   - 2.5.5 Target size: botones/links táctiles ≥44×44px en mobile.
   - 1.4.3 Contrast: NO se altera color (token system mantiene 4.5:1).
*/

/* ============================================================
   TABLET / PHABLET (≤768px)
   Aplicado a TODAS las páginas (login, app, admin, beta, etc.)
   ============================================================ */
@media (max-width: 768px) {

  /* ---- Inputs: prevenir auto-zoom iOS (font-size mínimo 16px) ---- */
  input,
  select,
  textarea,
  .input {
    font-size: 16px !important;
  }

  /* ---- Touch targets globales WCAG 2.5.5 ---- */
  button,
  .btn,
  .btn-primary,
  .btn-secondary,
  .btn-ghost,
  .btn-ghost-magic,
  .nav-item,
  .tab-btn,
  a.button,
  input[type="submit"],
  input[type="button"] {
    min-height: 44px;
    min-width: 44px;
  }

  /* ---- Imágenes responsive ---- */
  img {
    max-width: 100%;
    height: auto;
  }

  /* ---- Tablas overflow ---- */
  table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }
  .table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* ---- Contenedores principales ancho 100% ---- */
  .container,
  .page-container,
  .form-container {
    max-width: 100% !important;
    padding-left: 16px;
    padding-right: 16px;
  }

  /* ---- Navegación: stack vertical en mobile ---- */
  nav.main-nav,
  .top-nav,
  .navbar {
    flex-direction: column;
    align-items: stretch;
  }
}

/* ============================================================
   SMARTPHONE (≤480px)
   ============================================================ */
@media (max-width: 480px) {
  /* Container fixes (legacy) */
  .lab-bench,
  .constructora-layout {
    min-width: 100% !important;
    width: 100% !important;
    padding: 8px !important;
  }

  /* Card stacking */
  #thermal-cards-grid,
  .thermal-cards-grid,
  .envelope-grid,
  .chart-grid-3,
  .grid,
  .grid-2,
  .grid-3,
  .pricing-grid,
  .plans-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  /* Touch targets refuerzo (44px minimum) */
  .btn,
  .nav-item,
  .tab-btn,
  .btn-ghost,
  .btn-ghost-magic {
    min-height: 44px !important;
    padding: 12px 16px !important;
  }

  /* Typography scaling — hero / KPIs */
  .value-lg {
    font-size: 28px !important;
  }
  .value-md {
    font-size: 18px !important;
  }
  h1 {
    font-size: 1.75rem !important;
    line-height: 1.2 !important;
  }
  h2 {
    font-size: 1.4rem !important;
  }

  /* Condensation cards */
  .condensation-results.mobile-stack {
    display: block;
  }

  /* Canvas + media full-width */
  canvas {
    max-width: 100%;
  }

  /* Modales fullscreen mobile */
  .modal-content,
  .dialog {
    width: calc(100vw - 24px) !important;
    max-width: calc(100vw - 24px) !important;
    margin: 12px !important;
  }
}

/* ============================================================
   SMALL SMARTPHONE (≤390px)
   ============================================================ */
@media (max-width: 390px) {
  .value-lg {
    font-size: 24px !important;
  }
  .value-md {
    font-size: 16px !important;
  }
  h1 {
    font-size: 1.5rem !important;
  }
}