/* ==========================================================================
   HGW WELLNESS — AJUSTES RESPONSIVE (archivo separado)
   Se carga DESPUÉS de styles.css, así que todas las reglas de aquí son
   ajustes específicos que refinan el sistema de diseño existente para
   pantallas pequeñas — no lo reemplazan ni lo duplican. No se repite
   ninguna regla ya definida en styles.css; solo se agregan
   sobreescrituras puntuales dentro de media queries.

   Cubre, como mínimo, los anchos de referencia pedidos en la auditoría:
   320px, 360px, 375px, 390px, 414px, tablet y escritorio (este último ya
   queda cubierto por defecto en styles.css, así que aquí solo se afinan
   los tramos móvil y tablet).
   ========================================================================== */

/* --------------------------------------------------------------------------
   TABLET (641px–860px)
   La barra lateral ya se comporta como menú deslizable desde 860px hacia
   abajo (definido en styles.css). Aquí solo se afinan proporciones de
   grillas para que no se vean ni muy apretadas ni con demasiado espacio
   vacío en el rango intermedio de tablet.
   -------------------------------------------------------------------------- */
@media (max-width: 860px) and (min-width: 641px) {
  .clients-grid,
  .products-grid,
  .products-mini-grid { grid-template-columns: repeat(2, 1fr); }
}

/* --------------------------------------------------------------------------
   MÓVIL GENERAL (≤ 480px)
   Cubre celulares pequeños y grandes (320–414px y similares). Refuerza
   con valores explícitos las grillas que en pantallas muy angostas
   quedaban al límite con auto-fit/minmax, reduce paddings para
   aprovechar mejor el ancho disponible, y mejora el tamaño táctil de
   botones e inputs, sin ocultar ninguna función.
   -------------------------------------------------------------------------- */
@media (max-width: 480px) {
  /* Tarjetas y catálogos: una sola columna garantizada, sin depender
     del cálculo de auto-fit/minmax que a 320px queda muy al límite. */
  .clients-grid,
  .products-grid,
  .products-mini-grid,
  .plan-grid { grid-template-columns: 1fr; }

  .quick-actions { grid-template-columns: 1fr 1fr; gap: var(--sp-2); }

  /* Paneles, modales y tarjeta de login: menos padding lateral para
     ganar ancho real de contenido en pantallas de 320–375px. */
  .panel { padding: var(--sp-4); }
  .modal-head, .modal-body, .modal-foot { padding-left: var(--sp-4); padding-right: var(--sp-4); }
  .login-card { padding: var(--sp-6) var(--sp-5); }
  .greeting-card { padding: var(--sp-5); }

  /* Botones e inputs con más alto para facilitar el toque táctil. */
  .btn { padding: 12px 16px; }
  .field input, .field select, .field textarea { padding: 11px 12px; }

  /* Wizard: la fila de 6 pasos ("1. Básica" … "6. Resumen") puede no
     caber en 320–360px de ancho. En vez de recortar texto (lo que
     estaba ocurriendo), se convierte en una franja con desplazamiento
     horizontal controlado, igual que ya se hace con las tablas. */
  .wizard-steps-labels {
    flex-wrap: nowrap; justify-content: flex-start; gap: var(--sp-4);
    overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 4px;
  }
  .wizard-steps-labels span { white-space: nowrap; flex-shrink: 0; }

  /* Historial de seguimientos: la fecha en columna fija apretaba el
     contenido en pantallas angostas; se apila para dar más aire. */
  .timeline-item { flex-direction: column; gap: 4px; }
  .timeline-date { min-width: 0; }

  /* Tarjeta de plan semanal: algo menos de relleno interno. */
  .plan-day-card { padding: var(--sp-3); }

  /* Encabezado del perfil del cliente: acciones a ancho completo para
     que "Editar" y "Generar plan" sean fáciles de tocar. */
  .profile-head-actions { width: 100%; }
  .profile-head-actions .btn { flex: 1; }
}

/* --------------------------------------------------------------------------
   TABLAS EN MÓVIL (todas las pantallas ≤ 860px)
   Se conserva el patrón de contenedor con desplazamiento horizontal
   controlado (.table-wrap { overflow-x: auto }) ya definido en
   styles.css — no se elimina ninguna columna ni información. Aquí solo
   se agrega inercia táctil para que ese scroll se sienta nativo en
   iOS/Android.
   -------------------------------------------------------------------------- */
@media (max-width: 860px) {
  .table-wrap { -webkit-overflow-scrolling: touch; }
}

/* --------------------------------------------------------------------------
   CELULARES MUY PEQUEÑOS (≤ 360px) — 320px / 340px / 360px
   Últimos ajustes finos para el extremo más angosto de la matriz de
   pruebas pedida.
   -------------------------------------------------------------------------- */
@media (max-width: 360px) {
  .views { padding: var(--sp-3); }
  .login-screen { padding: var(--sp-3); }
  .login-card { padding: var(--sp-5) var(--sp-4); }
  .greeting-card h2 { font-size: 21px; }
  .stat-value { font-size: 24px; }
  .codigo-box { font-size: 17px; padding: 10px 14px; }
}