/* * responsive.css — Reglas base globales para móvil (Fase 10). * * Incluye también utilidades de accesibilidad disponibles en TODA la * app (`.sr-only` para texto solo para lectores de pantalla). * * Se linkea DESPUÉS del CSS inline/página de cada HTML para sobrescribir * con seguridad los casos donde el CSS local no previene overflow o * usa tamaños de input/botón inferiores al umbral táctil. * * Criterios aplicados: * - Prevenir scroll horizontal del cuando algún hijo se excede. * - Imágenes/videos/iframes nunca más anchos que su contenedor. * - Inputs/botones ≥ 44×44px (umbral táctil iOS/Apple HIG). * - Inputs con font-size 16px (iOS no hace auto-zoom si ≥16px). * - Tablas sueltas que acaban "escupiendo" contenido → permiten scroll * horizontal en vez de romper layout. * - Clase .responsive-exempt para escapar de las reglas si hace falta. */ *, *::before, *::after { box-sizing: border-box; } html, body { max-width: 100%; } body { overflow-x: hidden; } img, video, iframe, svg, canvas { max-width: 100%; height: auto; } /* Inputs y botones táctiles. Aplicamos sólo en móvil para no forzar altura 44px en headers de escritorio con botones compactos. */ @media (max-width: 600px) { input:not([type="checkbox"]):not([type="radio"]):not(.responsive-exempt), select:not(.responsive-exempt), textarea:not(.responsive-exempt), button:not(.responsive-exempt) { min-height: 44px; font-size: 16px; /* evita zoom automático de iOS */ } /* Tablas sueltas → scroll horizontal por seguridad. El proyecto ya envuelve la mayoría en `.tabla-wrapper { overflow-x: auto }`, esto cubre las que no están envueltas. */ table:not(.responsive-exempt) { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } /* Padding lateral mínimo para containers que no lo tengan. */ .container, main, section { padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); } } /* Móvil pequeño: ajustes extra para ancho típico de iPhone SE. */ @media (max-width: 480px) { /* Cards de planes y similares: stack vertical obligatorio. El proyecto ya usa flex-wrap en la mayoría; esto cubre casos residuales. */ .planes, .pricing, .cards-grid { flex-direction: column !important; gap: 16px !important; } .plan, .plan-card, .pricing-card { width: 100% !important; min-width: 0 !important; max-width: 100% !important; } } /* ── A11Y · WCAG 2.1 nivel A (texto SOLO para lectores de pantalla) ── Visualmente oculto pero leído por NVDA/JAWS/VoiceOver. Idéntico al patrón que ya existe en app-header.css; duplicado aquí para que esté disponible en páginas que no cargan app-header.css (rarísimas, pero safe-by-default). */ .sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }