# Auditoría responsive — soporteHolanda **Fecha:** 2026-07-23 **Alcance:** form público, login, layout/dashboard **Síntoma reportado:** “ligero zoom” en celular después de interactuar con el sistema --- ## Health score (técnico) | # | Dimensión | Score | Hallazgo clave | |---|-----------|------:|----------------| | 1 | Accessibility | 2/4 | Labels presentes; touch targets variables; contraste primary OK | | 2 | Performance | 3/4 | CDNs (Select2, jQuery, DT); catálogos por cadena razonables | | 3 | Responsive Design | 2/4 | Zoom iOS por inputs < 16px; tabla horizontal en móvil | | 4 | Theming | 3/4 | Tokens primary; algo de CSS hard-coded en Select2/DT | | 5 | Anti-patterns | 3/4 | UI razonable; stepper denso en pantallas muy chicas | | **Total** | | **13/20** | **Acceptable — fix P0 del zoom prioritario** | --- ## Causa del “ligero zoom” (P0) ### Qué ocurre En **iOS Safari** (y algunos Chrome Android), al enfocar un `input` / `select` / `textarea` con **`font-size` < 16px**, el navegador **hace zoom automático** para legibilidad. Al salir del campo, a veces el viewport **no vuelve del todo** al scale original → sensación de zoom residual. ### Evidencia en el código (antes del fix) | Ubicación | Problema | |-----------|----------| | `form.php` — `#storeSearch`, `#ticketReason`, `#ticketComments` | Clase Tailwind `text-sm` = **14px** | | `form.php` — Select2 `.select2-selection__rendered` | `font-size: 0.875rem` (**14px**) | | `form.php` — Select2 search interno del dropdown | Sin forzar 16px | | `login.php` — email/password | `text-sm` = **14px** | | Dashboard DT search | ~0.9375rem en theme (15px, aún < 16 en algunos browsers) | Viewport meta actual es correcto: ```html ``` **No** se recomienda `maximum-scale=1` / `user-scalable=no` (rompe accesibilidad). ### Fix aplicado 1. **Base global** en `resources/css/app.css`: form controls a **16px** (`@layer base`). 2. **Select2** a 16px (control + search dropdown + options). 3. **Form/login** campos interactivos: `text-sm` → `text-base` donde aplica. 4. **DataTables** search/length: `font-size: 16px` en `datatables-theme.css`. Tras deploy, probar en iPhone: focus en cadena → tienda → motivo → comentarios; el zoom residual debería desaparecer. --- ## Hallazgos por severidad ### P0 — Bloqueante UX móvil | ID | Issue | Ubicación | Impacto | Recomendación | |----|--------|-----------|---------|---------------| | R-01 | Auto-zoom iOS por font < 16px en inputs | form, login, Select2 | Zoom residual al interactuar | ✅ Corregido: mínimo 16px en controles | ### P1 — Importante | ID | Issue | Ubicación | Impacto | Recomendación | |----|--------|-----------|---------|---------------| | R-02 | DataTable ancho en móvil (muchas columnas) | `dashboard.php` | Scroll horizontal obligatorio | Aceptable para backoffice; opcional: columnas responsive / prioridad | | R-03 | Touch targets < 44px en iconos de acciones | botones `.btn-icon` 2rem | Difícil de pulsar | Subir a min 44×44px en `@media (pointer: coarse)` | | R-04 | Navbar botones `py-1.5` | layout/form | Altura ~32–36px | Aumentar padding en mobile | ### P2 — Menor | ID | Issue | Ubicación | Impacto | Recomendación | |----|--------|-----------|---------|---------------| | R-05 | Stepper con muchos chips en una línea | form.php | Wrap confuso en 320px | Stack vertical en `sm` o simplificar labels | | R-06 | Bootstrap 5 en dashboard vs Tailwind en shell | layout + dashboard | Posibles colisiones de estilos | Aislar DT o shadow DOM no viable; overrides ya existen | | R-07 | Dropdown sugerencias de tienda puede quedar bajo el teclado | form step store | Oculta opciones | `scrollIntoView` al abrir lista | ### P3 — Polish | ID | Issue | Ubicación | Impacto | Recomendación | |----|--------|-----------|---------|---------------| | R-08 | Safe-area iOS (notch/home bar) | footer sticky-ish | Texto muy al borde | `padding-bottom: env(safe-area-inset-bottom)` | | R-09 | `text-xs` en hints | form | OK legible | Mantener en no-interactivos | --- ## Checklist responsive (viewport) | Breakpoint | Form | Login | Dashboard | |------------|------|-------|-----------| | 320–375px | Cards apilados; Select2 full width | Card centrada OK | Stats apiladas; tabla con scroll-x | | 768px | 2 cols tipo | OK | Stats 3 cols | | ≥1280px | `max-w-8xl` | max-w-md | `max-w-8xl` | --- ## Positivos - Viewport meta correcto (sin bloquear zoom del usuario). - Layout flex column + main flex-1 (footer abajo). - Contenedor fluido con padding horizontal. - Primary consistente; botones de tipo con buen área táctil. - Formulario wizard reduce carga cognitiva por pasos. --- ## Acciones recomendadas 1. **[P0] ✅** Forzar ≥16px en todos los controles de formulario (aplicado). 2. **[P1]** Aumentar touch targets de iconos de acciones y navbar en móvil. 3. **[P1]** Evaluar columnas prioritarias en DT móvil (ocultar SAP/comentarios en <md). 4. **[P2]** Stepper más compacto en móvil. 5. **[P3]** Safe-area en footer. ### Cómo verificar el fix del zoom 1. iPhone Safari (o Chrome iOS). 2. Abrir form → elegir tipo → abrir Select2 de cadena → focus búsqueda tienda → motivo → comentarios. 3. Tras blur, el ancho de página no debe quedar “ampliado”. 4. Si el teléfono tenía zoom residual de antes, cerrar pestaña y abrir de nuevo. --- *Re-ejecutar esta auditoría tras cambios grandes de UI o nuevas librerías de formularios.*