/*
 * public/cursos/movil.css — Ajustes móviles comunes a todos los cursos FL369.
 * Cada curso se diseñó para escritorio; esto lo hace legible en el móvil sin
 * tocar su diseño: una columna, nada que se salga de la pantalla, sin zoom.
 */
html { -webkit-text-size-adjust: 100%; }
img, video, iframe, svg, canvas { max-width: 100%; height: auto; }

@media (max-width: 760px) {
  html, body { overflow-x: hidden; max-width: 100vw; overscroll-behavior-x: none; }
  *, *::before, *::after { box-sizing: border-box; }

  /* Cuadrículas escritas en línea (3-4 columnas fijas) → una columna */
  [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
  [style*="display:flex"], [style*="display: flex"] { flex-wrap: wrap; }

  /* Textos: se parten en lugar de salirse */
  h1, h2, h3, h4, p, li, td, th, blockquote, a { overflow-wrap: anywhere; word-break: normal; }
  h1 { font-size: clamp(30px, 9vw, 44px) !important; line-height: 1.08 !important; }
  h2 { font-size: clamp(24px, 7vw, 34px) !important; line-height: 1.15 !important; }

  /* Código y tablas: desplazamiento propio, nunca ensanchan la página */
  pre, code { white-space: pre-wrap; overflow-wrap: anywhere; }
  pre { overflow-x: auto; }
  table { display: block; max-width: 100%; overflow-x: auto; }

  /* Campos a 16 px: iOS no hace zoom al tocarlos */
  input, textarea, select { font-size: 16px !important; }

  /* Tarjetas y etiquetas con ancho fijo (cursos de agentes) */
  [class*="card"], [class*="layer"], [class*="grid"] { max-width: 100%; min-width: 0; }
  [class*="layer"] { flex-wrap: wrap; }
  [class*="-tag"], .tag { max-width: 100%; white-space: normal; }
}