Sidebar ✅ Oculto por defecto en móvil (window.innerWidth < 1024px) ✅ Overlay oscuro cuando está abierto en móvil (se cierra al tocar fuera) ✅ Deslizable desde la izquierda con transiciones suaves ✅ Siempre visible en desktop (lg: breakpoint) Header ✅ Botón hamburguesa visible solo en móvil (lg:hidden) ✅ Logo escalable: 50px en móvil → 70px en desktop ✅ Título oculto en móvil para ahorrar espacio ✅ Indicador de sección: icono solo en móvil, texto completo en desktop ✅ Padding adaptable: 3px móvil → 4px tablet → 8px desktop Contenido Principal ✅ Sin margin-left en móvil (el sidebar es overlay) ✅ Padding responsive: 3px → 4px → 6px según tamaño ✅ Border-radius adaptable: xl en móvil → 2xl en desktop Modal de Inspección ✅ Ancho completo en móvil con padding mínimo (2px) ✅ Título responsive: lg (móvil) → xl (tablet) → 2xl (desktop) ✅ Altura máxima: 95vh móvil → 90vh desktop Navegador de Preguntas ✅ Botones más pequeños en móvil: 7px/8px círculos ✅ Overflow horizontal con scroll para muchas preguntas ✅ Números responsive: texto sm en móvil → lg en desktop ✅ Gaps reducidos: 1px móvil → 2px desktop Botones de Navegación ✅ Solo flechas en móvil (← →) ✅ Texto completo en desktop ("← Anterior", "Siguiente →") ✅ Padding y texto adaptables: text-sm móvil → text-base desktop ✅ Mejor uso del espacio horizontal Formularios ✅ Espaciado adaptive: space-y-3 móvil → space-y-6 desktop ✅ Labels y texto responsive: xs → sm → base ✅ Banner de modo IA con wrap en móvil La interfaz ahora es completamente funcional en móviles sin scroll horizontal, con todos los elementos accesibles y legibles! 📱✨
663 B
663 B