# VALIDACIÓN_RESULTADOS.md
**Proyecto:** lostalo.sgecr  
**Fase:** 5 — Checklist de testing post-refactorización  
**Fecha:** 2026-04-09

---

## ORDEN DE CARGA REQUERIDO (en cada vista PHP)

```html
<link rel="stylesheet" href="css/core.css">
<link rel="stylesheet" href="css/styles_tablas.css">
<link rel="stylesheet" href="css/buttons.css">
<link rel="stylesheet" href="css/modal.css">         <!-- si la vista tiene modales -->
<link rel="stylesheet" href="css/[pagina].css">      <!-- último, solo si existe -->
```

---

## CHECKLIST POR VISTA

Para cada vista, verificar visualmente en browser:

### Checklist genérico (aplica a todas las vistas)

| # | Elemento | Qué verificar | OK |
|---|---|---|---|
| 1 | Background | `#F5F6FA` gris claro, no `#F2F2F2` | ☐ |
| 2 | Fuente | Inter cargada (no `sans-serif` genérico) | ☐ |
| 3 | `.container_report` | Card centrada con sombra sutil | ☐ |
| 4 | Encabezados `th` | Color azul `#3F7CDB`, sin fondo gris | ☐ |
| 5 | Separadores `td` | Línea punteada `dashed`, no sólida | ☐ |
| 6 | Padding `td` | `12px 8px`, no `0.4rem` comprimido | ☐ |
| 7 | Hover de fila | Fondo `#EEF2FF` suave, no gris plano | ☐ |
| 8 | Botones | Fondo blanco, borde oscuro, `border-radius: 9999px` | ☐ |
| 9 | Botones hover | Fondo `#2B4EC8` azul, no `#1f2937` oscuro | ☐ |
| 10 | Paginación activa | `#2B4EC8` azul | ☐ |
| 11 | Tooltips en tabla | Aparecen al hacer hover sobre íconos | ☐ |
| 12 | Footer | Texto muted, sin borde superior inesperado | ☐ |
| 13 | Print preview | `.actions` y `.pagination` ocultos | ☐ |

### Vistas específicas

#### empleados.php
- [ ] Columnas de tabla ajustadas (ID 90px, Nombre 180px, etc.)
- [ ] Botón editar (lápiz) sin fondo, pequeño
- [ ] Tooltip al hover sobre botón editar

#### usuarios.php
- [ ] Modal "Agregar usuario" abre correctamente
- [ ] Select tipo usuario muestra/oculta campos (`#typeSelect`, `#group_id_emp`)
- [ ] Paginación JS (`#prevPage`, `#nextPage`, `#pageInfo`) funciona
- [ ] Export Excel / captura funciona (depende de `#usersTable`)

#### feriados.php
- [ ] `.inner-container_report` ancho al 70% (vista más angosta que el resto)
- [ ] Columna ID muy angosta (20px)

#### tipos.php
- [ ] `.table-selector` visible (dropdown para cambiar entre tablas)
- [ ] Botones editar Y eliminar en misma celda, alineados

#### oficinas.php
- [ ] Layout scoped a `.page-oficinas` funciona
- [ ] Modal `#addModal`, `#editModal` abren correctamente
- [ ] Botones `.icon-btn` pequeños y redondos en columna de acciones
- [ ] Formulario de búsqueda con helper-row funciona en móvil

#### externos.php (equipos externos)
- [ ] 8 columnas visibles con scroll horizontal en tablet

#### accesoweb.php
- [ ] 5 columnas ajustadas, Descripción ancha (300px)
- [ ] Botones editar y eliminar alineados en columna acciones

#### dialibre.php
- [ ] `.inner-container_report` al 80%
- [ ] `.message-success` / `.message-error` con fondos de alerta
- [ ] Flatpickr calendar visible y estilizado
- [ ] Celdas de acciones con `display: flex` (botones alineados horizontalmente)
- [ ] Modal con botón de envío azul

#### saldo_vacaciones.php
- [ ] Tabla centrada al 75% del ancho
- [ ] Fuente de tabla más grande (16px)

#### solicitudes_baja.php (usa estilo_solicitudesbaja.css)
- [ ] `.container_report` más angosto (max-width: 75%)
- [ ] `#formPendientes` con inputs de fecha/select bien alineados
- [ ] Botones de aprobar/rechazar (`.approve`, `.reject`) no afectados
- [ ] `#tablaPendientes` visible con 10 columnas

#### admin_usuarios.php (usa admin_usuarios.css)
- [ ] Design system `body.admin-users-clean` intacto (no modificado)

---

## CHECKLIST DE REGRESIÓN JS

Confirmar que el refactor no rompe funcionalidad JS:

| Archivo JS | Selector clave | Verificar |
|---|---|---|
| usuarios.js | `#usersTable` | Export XLSX y html2canvas funcionan |
| usuarios.js | `#addModal`, `#editModal` | Modales abren/cierran |
| usuarios.js | `#typeSelect` → `#group_id_emp` | Show/hide campos dinámicos |
| usuarios.js | `.edit-btn`, `.toggle-btn` | Botones generados dinámicamente |
| baja.js | `#bajaForm`, `#btnGuardar` | Formulario de baja habilitado |
| solicitudesBajas.js | `#tablaPendientes tbody` | Clic en `.approve`/`.reject` |
| solicitudesBajas.js | `#btnBuscarPend` | Botón busca y carga tabla |
| oficinas_admin.js | `#oficinasTable` | Tabla y modales de oficinas |
| nav.php JS | `.nav-toggle`, `.nav-menu` | Menú hamburger en móvil |

---

## COMPATIBILIDAD DE VARIABLES CSS

Las variables antiguas siguen funcionando gracias a los aliases en `core.css`:

| Variable antigua | Apunta a |
|---|---|
| `--primary-color` | `var(--clr-primary)` = `#2B4EC8` |
| `--text-color` | `var(--clr-text)` = `#111827` |
| `--background-color` | `var(--clr-body-bg)` = `#F5F6FA` |
| `--border-color` | `var(--clr-border)` = `#E5E7EB` |

---

## ARCHIVOS NO MODIFICADOS

Confirmar que estos archivos están intactos:

- [ ] `login.css` — sin cambios
- [ ] `auth_forms.css` — sin cambios
- [ ] `modal.css` — sin cambios
- [ ] `mantenimiento.css` — sin cambios (diseño independiente)
- [ ] `admin_usuarios.css` — sin cambios (design system propio `--au-*`)
- [ ] `flatpickr.min.css` — vendor, intocable
- [ ] `all.min.css` — FontAwesome, intocable
- [ ] CSS inline de `nav.php` — autónomo, intocable

---

## RESUMEN DE CAMBIOS APLICADOS

| Archivo | Cambio | Riesgo real |
|---|---|---|
| `core.css` | NUEVO — centraliza :root/body/main/containers/pagination | BAJO |
| `styles_tablas.css` | th color → `#3F7CDB`, td border-bottom → dashed, padding → 12px 8px; + botones/tooltips compartidos | BAJO |
| `buttons.css` | hover → `var(--clr-primary)` en lugar de `#1f2937` | MUY BAJO |
| `empleados.css` | Reducido a 20 líneas (solo columnas) | BAJO |
| `usuarios.css` | Reducido a 20 líneas | BAJO |
| `feriados.css` | Reducido a 15 líneas | BAJO |
| `tipos.css` | Reducido a 30 líneas (+ table-selector) | BAJO |
| `oficinas.css` | Eliminado :root/body/main redundante; hover → clr-primary | BAJO |
| `externos.css` | Reducido a 25 líneas | BAJO |
| `accesoweb.css` | Reducido a 20 líneas | BAJO |
| `dialibre.css` | Reducido a ~60 líneas (+ flatpickr + alertas) | BAJO |
| `saldo_vacaciones.css` | Reducido a 20 líneas | BAJO |
| `estilo_solicitudesbaja.css` | Reducido a ~50 líneas (sin `input,select { width:100% }` global) | BAJO |

> **Nota importante:** `estilo_solicitudesbaja.css` original tenía `input, select { width: 100% }` 
> como selector global. Esto se removió — verificar que los inputs del formulario de esa vista 
> sigan luciendo correctos (los inputs dentro de `#formPendientes` tienen `width: auto` explícito,
> y los modales usan `.form-group input` scoped).