# Verificación de regresión visual

## Descripción
Antes de abrir cualquier PR, inicia la aplicación localmente y toma capturas de pantalla de cada página afectada por el diff actual en anchos de escritorio y móvil. Registra cualquier problema de diseño encontrado.

## Requisitos previos
- Docker en ejecución (para la base de datos)
- Puerto 3000 disponible

## Configuración
1. Instala las dependencias: `npm install`
2. Inicia los servicios: `docker-compose up -d postgres redis`
3. Ejecuta las migraciones: `npx prisma migrate dev`
4. Carga los datos de prueba: `npm run db:seed`
5. Inicia el servidor de desarrollo: `npm run dev`
6. Espera a que aparezca "Ready on http://localhost:3000" en la terminal

## Verificaciones visuales
1. Lee el diff de git actual para identificar qué páginas están afectadas
2. Para cada página afectada:
   a. Abre la página en el navegador en http://localhost:3000/{route}
   b. Toma una captura de pantalla con un ancho de 1280px (escritorio)
   c. Redimensiona el navegador a un ancho de 375px (móvil)
   d. Toma una captura de pantalla en ancho móvil
   e. Verifica: texto superpuesto, elementos ocultos detrás de otros
      elementos, desplazamiento horizontal, botones o enlaces
      inaccesibles, imágenes o iconos faltantes, errores de consola
3. Si se encuentra algún problema, regístralo con la URL de la página, el ancho
   del viewport y una descripción del problema

## Antes de abrir el PR
1. Ejecuta `npm run lint` y corrige cualquier problema
2. Ejecuta `npm test` y confirma que todas las pruebas pasan
3. Incluye todas las capturas de pantalla en la descripción del PR
4. Si se encontraron problemas, enuméralos al inicio del cuerpo del PR

## Route-Specific Checks

### Dashboard (`/dashboard`)
- The metric cards should display in a 3-column grid on desktop
- Cards should stack to a single column on mobile
- The chart should be fully visible without horizontal scroll

### Checkout (`/checkout`)
- The "Place Order" button must be visible without scrolling
  on both desktop and mobile
- The order summary sidebar should collapse into an accordion on mobile
- The price breakdown should show subtotal, tax, and total on separate lines

### Settings (`/settings`)
- All form labels should be left-aligned with their inputs
- The "Save" button must be reachable at the bottom of the form
- Tab navigation between sections should update the URL hash