1. Abre la aplicación (http://localhost:3000)
2. Presiona F12 para abrir DevTools
3. Presiona Ctrl+Shift+M (Windows) o Cmd+Shift+M (Mac)
4. Abre el selector de dispositivo (primera opción en la esquina superior izquierda)
5. Selecciona diferentes dispositivos:
- iPhone 12 Pro (390px)
- iPhone SE (375px)
- Samsung Galaxy S10 (360px)
- iPad (768px)
6. Gira la pantalla (Ctrl+Shift+M nuevamente)
1. Presiona F12
2. Presiona Ctrl+Shift+M (Windows) o Cmd+Shift+M (Mac)
3. Abre el menú de dispositivos (esquina superior derecha)
4. Selecciona dispositivos predefinidos
5. Prueba diferentes tamaños
- Encabezado se ajusta a tamaño más pequeño
- Estadísticas muestran 2 columnas
- Tabla NO está visible
- Se muestran tarjetas individuales en su lugar
- Cada tarjeta muestra: Nombre, NIE, Grado, Sección, Encargado, Teléfono
- Botones de acciones están verticales y son pequeños
- Buscador ocupa ancho completo
- Botón "Matricular Nuevo" ocupa ancho completo
- Tabla comienza a mostrarse
- Spacing aumenta
- Sidebar es más ancho
- Tabla completamente visible
- Todas las columnas se ven sin scroll
- Sidebar completamente expandido
- Sidebar está oculto por defecto
- Se ve botón hamburguesa en la esquina superior izquierda
- Al hacer clic, sidebar se abre a pantalla completa
- Hay un overlay semi-transparente detrás
- Al hacer clic fuera, sidebar se cierra
- Sidebar mide w-16 (ancho reducido)
- Se ven solo iconos, no texto
- Main content se desplaza hacia la derecha
- Botón hamburguesa no se ve (lg:hidden)
- Sidebar completamente expandido (w-64)
- Se ve texto + icono de cada opción
- "Bienvenido, [nombre]" está encima
- Botón "Cerrar Sesión" está debajo, a ancho completo
- Cards de resumen son 2 por 2
- Acciones rápidas se muestran como lista en 1 columna
- Textos son pequeños (text-xs, text-sm)
- Cards son 2x2 o 2x1
- Botón logout está al lado del título
- Cards son 4 columnas en fila
- Layout original se ve normal
- Filtros (Mes/Año) están en columna (uno debajo del otro)
- Estadísticas son 2 columnas
- Gráficos ocupan ancho completo
- Gráficos tienen altura menor (más comprimidos)
- Los labels de gráficos pueden estar rotados
- Filtros siguen en columna
- Estadísticas pueden ser 2 columnas
- Gráficos pueden estar lado a lado
- Filtros en una fila horizontal
- Estadísticas 4 columnas
- Gráficos lado a lado en 2 columnas
- Mayor espacio vertical
- Tabla NO está visible
- Se muestran tarjetas de pagos individuales
- Cada tarjeta muestra los datos (Estudiante, Mes, Monto, etc)
- Botones de acciones están al final de la tarjeta
- Scroll vertical para ver más pagos
- Comienza a verse tabla
- Puede haber scroll horizontal si es necesario
- Tabla visible completamente
- Sin scroll horizontal
1. En móvil, escribir en el buscador
2. Las tarjetas deben filtrar en tiempo real
3. Botones de acciones deben funcionar
1. Click en hamburguesa
2. Sidebar debe abrirse suavemente
3. Overlay debe oscurecer el fondo
4. Click en overlay debe cerrar sidebar
5. Click en un menú item debe ir a la página
1. En móvil, abrir un modal
2. Modal debe ocupar el ancho disponible (90% max)
3. Inputs deben estar adaptados
4. Botones deben estar a ancho completo
┌────────────────────────────────────────┐
│ MÓVIL PEQUEÑO │
│ 320px - 375px │
│ iPhone SE, iPhone 12 mini │
│ │
│ MÓVIL GRANDE │
│ 375px - 428px │
│ iPhone 12 Pro, Samsung A51 │
│ │
│ TABLET │
│ 640px - 1024px │
│ iPad, Galaxy Tab │
│ │
│ DESKTOP │
│ 1024px+ │
│ Laptops, desktops │
└────────────────────────────────────────┘
| Problema | Cómo Detectar | Solución |
|---|---|---|
| Scroll horizontal innecesario | Abrir DevTools móvil, scrollear horizontalmente | Tabla debe estar oculta (hidden md:block) |
| Texto cortado | Comparar longitud de texto | Tipografía debe ser escalable |
| Solapamiento de elementos | Ver elementos sobre otros | Revisar z-index y overflow |
| Botones muy pequeños | Intentar hacer click en móvil | Botones deben tener min 44px |
| Tabla ilegible | Zoom en móvil | Cambiar a vista de tarjetas |
✅ Interfaz intuitiva sin scroll horizontal ✅ Texto legible sin zoom ✅ Botones fáciles de presionar (touchable) ✅ Sidebar colapsable ✅ Tablas convertidas a tarjetas ✅ Formularios con inputs grandes ✅ Espaciado confortable
✅ Interfaz completa y detallada ✅ Tablas normales con todas las columnas ✅ Sidebar expandido ✅ Gráficos grandes y detallados ✅ Múltiples columnas de contenido ✅ Espaciado generoso
Para verificar que todo funciona:
1. Abre DevTools (F12)
2. Activa responsive mode (Ctrl+Shift+M)
3. Selecciona iPhone 12 Pro
4. Navega por cada página:
- /admin (Dashboard)
- /admin/usuarios
- /secretaria/dashboard
- /secretaria/estudiantes
- /secretaria/pagos
- /secretaria/reportes
5. Prueba abrir/cerrar sidebar
6. Prueba filtrar datos
7. Prueba responsive en tablet (iPad)
8. Prueba responsive en desktop
Tiempo estimado: 5-10 minutos
# En tu PC, encuentra tu IP local
# Windows: ipconfig
# Mac/Linux: ifconfig
# En tu teléfono, abre:
# http://[IP-DE-TU-PC]:3000
# Ejemplo:
# http://192.168.1.100:3000✅ PASÓ si:
- Todos los elementos son visibles sin scroll horizontal
- Texto es legible sin zoom
- Botones son clickeables (44px mínimo)
- Tablas se convierten a tarjetas en móvil
- Sidebar es colapsable
- Formularios se adaptan bien
- No hay elementos superpuestos
❌ FALLÓ si:
- Hay scroll horizontal
- Texto cortado o ilegible
- Botones muy pequeños
- Tablas desbordadas
- Sidebar ocupa todo en móvil
- Elementos superpuestos
Si encuentras algo que no funciona:
1. Toma screenshot de DevTools
2. Anota el tamaño de pantalla (ej: 375px)
3. Describe qué ves vs. qué esperabas
4. Indica en qué página ocurre
¡Gracias por probar la responsividad! 🎉