/* HIPERCAPITAL FINANCE — compatibilidad móvil global (iPhone/Android)
   Se carga en toda la app. Sobrescribe estilos inline con !important para
   que el layout (hecho con grids/flex inline en React) se adapte a pantallas
   pequeñas sin scroll horizontal ni texto minúsculo. v1 2026-10-20 */

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { overflow-x: hidden; }
img, svg, video, canvas, iframe { max-width: 100%; height: auto; }
* { box-sizing: border-box; }

/* Tablet y abajo */
@media (max-width: 900px) {
  [style*="max-width: 1100"], [style*="maxWidth: 1100"] { max-width: 100% !important; }
}

/* Móvil (iPhone/Android en vertical) */
@media (max-width: 680px) {
  html, body { overflow-x: hidden !important; width: 100% !important; }

  /* nada se sale de la pantalla */
  [style*="max-width"] { max-width: 100% !important; }
  [style*="min-width"] { min-width: 0 !important; }

  /* todas las rejillas de 2+ columnas pasan a 1 columna */
  [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }

  /* las filas flex envuelven en vez de desbordar */
  [style*="display: flex"], [style*="display:flex"] { flex-wrap: wrap; }

  /* tablas: scroll horizontal propio en vez de romper el ancho */
  table { display: block !important; width: 100% !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch; }

  /* botones e inputs cómodos para el dedo */
  button, a[role="button"] { min-height: 40px; }
  input, select, textarea { font-size: 16px !important; } /* evita el zoom automático de iOS */
}

/* Móvil pequeño */
@media (max-width: 400px) {
  [style*="font-size: 44"], [style*="fontSize: 44"],
  [style*="font-size: 36"], [style*="fontSize: 36"] { font-size: 30px !important; }
}