/* =========================================
   MOBILE.CSS — Correcciones responsive
   Breakpoints: 768px (tablet), 480px (móvil), 360px (muy pequeño)
   ========================================= */

/* ════════════════════════════════════════════
   TABLET  (≤ 768px)
   ════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* ── Orbes decorativos — reducir tamaño ── */
  .mystic-orb { width: 200px !important; height: 200px !important; opacity: 0.25 !important; }

  /* ── Toast — abajo en mobile ── */
  #toast-container {
    top: auto !important;
    bottom: var(--sp-4);
    right: var(--sp-3);
    left: var(--sp-3);
    max-width: 100% !important;
    width: auto !important;
  }

  /* ── Navbar — items con area de toque más grande ── */
  .navbar-link { min-height: 48px; display: flex; align-items: center; }

  /* ── Botones — mínimo 44px de altura para toque ── */
  .btn { min-height: 44px; }
  .btn-xl { padding: 0.9rem 1.5rem; font-size: var(--font-sm); }
  .btn-lg { padding: 0.85rem 1.5rem; }

  /* ── Botón block — texto centrado ── */
  .btn-block { justify-content: center; text-align: center; }

  /* ── Cards — sin hover transform (evita flicker táctil) ── */
  .card:hover { transform: none; }

  /* ── Sección hero stats — centrar y envolver ── */
  .hero-stats { flex-wrap: wrap !important; gap: var(--sp-5) !important; justify-content: center !important; }

  /* ── Hero section — ajuste de padding ── */
  .hero { padding-top: var(--header-height); }

  /* ── Auth card — padding reducido ── */
  .auth-card { padding: var(--sp-7) var(--sp-5); }

  /* ── Modal — ocupar más pantalla ── */
  .modal { max-width: 100% !important; margin: var(--sp-3); border-radius: var(--border-radius-lg); }
  .modal-body { padding: var(--sp-4); }
  .modal-header { padding: var(--sp-4); }

  /* ── Index: grids de 3 columnas en sección eventos ── */
  .ep-features-grid { grid-template-columns: 1fr 1fr !important; gap: var(--sp-3) !important; }

  /* ── Curso: layout principal colapsa a 1 columna ── */
  .curso-layout {
    grid-template-columns: 1fr !important;
    gap: var(--sp-6) !important;
  }

  /* ── Curso: orden — tarjeta de compra va arriba en mobile ── */
  .curso-sidebar { order: -1; }
  #panel-lateral {
    position: relative !important;
    top: auto !important;
    max-width: 100% !important;
  }
  #tarjeta-compra { max-width: 100% !important; }

  /* ── Curso hero: header con sidebar ── */
  .curso-hero-inner {
    grid-template-columns: 1fr !important;
    gap: var(--sp-6) !important;
  }

  /* ── Tabs de compra — texto ajustado ── */
  .compra-tab { font-size: 0.65rem !important; padding: var(--sp-2) var(--sp-2) !important; }

  /* ── Modulos list — mejor toque ── */
  .module-header { min-height: 56px; }
  .lesson-row { min-height: 48px; flex-wrap: wrap; gap: var(--sp-2); }

  /* ── Agendar: pasos — layout simple ── */
  .paso-inner { grid-template-columns: 1fr !important; }

  /* ── Calendario táctil — celdas más grandes ── */
  .calendar-day { min-height: 40px; font-size: var(--font-sm); }
  .time-slot { min-height: 44px; }

  /* ── Formulario de reserva ── */
  .form-row { grid-template-columns: 1fr !important; }

  /* ── Footer ── */
  .footer-bottom { flex-direction: column; gap: var(--sp-3); text-align: center; }

  /* ── Section padding reducido ── */
  .section { padding-block: var(--sp-12); }

  /* ── Ocultar columnas no esenciales en mobile ── */
  .hide-mobile { display: none !important; }

  /* ── Admin: tabla horizontal scroll ── */
  table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* ── Player lateral: va abajo en mobile ── */
  .curso-with-panel {
    flex-direction: column !important;
  }
  #panel-lateral > * { max-height: none !important; overflow: visible !important; }
}

/* ════════════════════════════════════════════
   MÓVIL  (≤ 480px)
   ════════════════════════════════════════════ */
@media (max-width: 480px) {

  /* ── Orbes — ocultar en pantallas muy chicas ── */
  .mystic-orb { display: none !important; }

  /* ── Tipografía — evitar texto muy chico ── */
  body { font-size: 15px; }
  .section-title { font-size: clamp(1.6rem, 6vw, 2.2rem); }

  /* ── Navbar logo — texto más corto ── */
  .navbar-logo-text { font-size: var(--font-md); }

  /* ── Botones — padding táctil mínimo ── */
  .btn { padding: 0.8rem 1.25rem; min-height: 48px; }
  .btn-sm { min-height: 40px; padding: 0.55rem 1rem; }

  /* ── Cards — sin overflow horizontal ── */
  .card { max-width: 100%; overflow: hidden; }

  /* ── Auth card — full width ── */
  .auth-card { padding: var(--sp-6) var(--sp-4); border-radius: var(--border-radius-lg); }

  /* ── Hero metrics — 2 por fila ── */
  .hero-stats > div { min-width: 90px; }

  /* ── Index: features de 3 cols → 1 col ── */
  .ep-features-grid { grid-template-columns: 1fr !important; }

  /* ── Compra tabs — icono + texto corto ── */
  .compra-tab { font-size: 0.6rem !important; letter-spacing: 0 !important; }

  /* ── Toast — full width ── */
  #toast-container { right: var(--sp-2); left: var(--sp-2); bottom: var(--sp-3); }
  .toast { padding: var(--sp-3) var(--sp-4); }

  /* ── Modal footer — stack botones ── */
  .modal-footer { flex-direction: column; }
  .modal-footer .btn { width: 100%; }

  /* ── Agendar: header del paso ── */
  .paso-titulo { font-size: var(--font-xl); }

  /* ── Formulario: inputs más altos para toque ── */
  .form-input, .form-select, .form-textarea { padding: 0.9rem 1rem; min-height: 48px; }

  /* ── Grid 2 → 1 en 480px ── */
  .grid-2 { grid-template-columns: 1fr !important; }

  /* ── Resultado pago ── */
  .resultado-card { padding: var(--sp-8) var(--sp-5); }
  .resultado-acciones { flex-direction: column; }
  .resultado-acciones .btn { width: 100%; }
}

/* ════════════════════════════════════════════
   MUY PEQUEÑO  (≤ 360px)
   ════════════════════════════════════════════ */
@media (max-width: 360px) {
  .container { padding-inline: var(--sp-3); }
  h1 { font-size: clamp(1.5rem, 8vw, 2rem); }
  h2 { font-size: clamp(1.3rem, 7vw, 1.8rem); }
  .btn-xl { font-size: var(--font-xs); padding: 0.8rem 1rem; }
  .navbar-logo-text { display: none; } /* Solo ícono en pantallas 360 */
  .compra-tab { font-size: 0.55rem !important; }
}

/* ════════════════════════════════════════════
   UTILIDADES TÁCTILES
   ════════════════════════════════════════════ */

/* Área mínima táctil para todos los botones interactivos */
@media (hover: none) {
  .btn, button, a, [role="button"], input[type="button"], input[type="submit"] {
    -webkit-tap-highlight-color: rgba(155, 126, 222, 0.2);
  }

  /* Sin efectos hover en touch */
  .card:hover { box-shadow: none; transform: none; }
  .btn-gold:hover { box-shadow: var(--shadow-gold); transform: none; }
  .btn-primary:hover { box-shadow: var(--shadow-violet); transform: none; }

  /* Shimmer: pausar en focus para mejor UX táctil */
  .btn-shimmer-gold:active, .btn-shimmer-violet:active {
    animation-play-state: paused;
  }
}