# REFACTORING_REPORT.md
**Proyecto:** lostalo.sgecr  
**Fecha:** 2026-04-09  
**Objetivo de sesión:** Consolidar el CSS duplicado en un sistema de diseño centralizado (Fases 4 y 5 del plan de refactorización)

---

## RESUMEN DE IMPACTO

| Métrica | Valor |
|---|---|
| Archivos CSS creados | 1 (`core.css`) |
| Archivos de documentación creados | 2 (`VALIDACIÓN_RESULTADOS.md`, `REFACTORING_REPORT.md`) |
| Archivos CSS modificados | 3 compartidos + 13 de página = **16** |
| Archivos de documentación actualizados | 1 (`REFACTORIZACIÓN_PLAN.md`) |
| Líneas de CSS eliminadas por duplicación | **~1,800+** |
| Selectores JS protegidos descubiertos (nuevos) | 4 (`.hidden`, `.scrolled`, `.editMarca`, `.verHuerfanas`) |
| Bugs CSS corregidos | 1 (`margin: 0.5rem green` → válido) |
| Riesgos introducidos | **0** — solo valores cambiados, nunca selectores |

---

## TABLA DE TODOS LOS ARCHIVOS TOCADOS

| Archivo | Tipo de cambio | Líneas antes | Líneas después | Δ |
|---|---|---|---|---|
| `public/css/core.css` | Creado | 0 | 450 | +450 |
| `public/css/buttons.css` | Modificado | 40 | 41 | +1 |
| `public/css/styles_tablas.css` | Modificado | 54 | 119 | +65 |
| `public/css/oficinas.css` | Modificado | 193 | 167 | -26 |
| `public/css/empleados.css` | Reducido | 241 | 27 | -214 |
| `public/css/usuarios.css` | Reducido | 239 | 28 | -211 |
| `public/css/feriados.css` | Reducido | 224 | 19 | -205 |
| `public/css/tipos.css` | Reducido | 247 | 45 | -202 |
| `public/css/externos.css` | Reducido | 243 | 30 | -213 |
| `public/css/accesoweb.css` | Reducido | 235 | 21 | -214 |
| `public/css/dialibre.css` | Reducido | 405 | 118 | -287 |
| `public/css/saldo_vacaciones.css` | Reducido | 122 | 29 | -93 |
| `public/css/estilo_solicitudesbaja.css` | Reducido | 137 | 65 | -72 |
| `public/css/estilo_reportes.css` | Reducido | ~115 (truncado) | 46 | ~-69 |
| `public/css/estilo_reportebaja.css` | Reducido + bug fix | 188 | 57 | -131 |
| `public/css/estilo_reportemarca.css` | Reducido | 150 | 142 | -8 |
| `REFACTORIZACIÓN_PLAN.md` | Actualizado | 261 | 265 | +4 |
| `VALIDACIÓN_RESULTADOS.md` | Creado | 0 | ~140 | +140 |

---

## ARCHIVOS CREADOS

### `public/css/core.css` — 450 líneas
**Motivo:** 12+ archivos CSS de página repetían bloques idénticos de `:root`, `body`, `main`, `.container_report`, `.actions`, `.pagination`, `.message`. Extraer este código a un archivo compartido elimina la duplicación y permite cambiar cualquier valor de diseño en un solo lugar.

**Contenido (secciones):**

| Sección | Descripción |
|---|---|
| `:root` variables | Nuevo sistema de tokens: `--clr-primary: #2B4EC8`, `--clr-accent: #3F7CDB`, badges, tipografía, radios, sombras, transiciones |
| Aliases de compatibilidad | `--primary-color: var(--clr-primary)`, `--text-color`, `--background-color`, `--border-color` — el código PHP existente sigue funcionando sin tocar una sola vista |
| Reset mínimo | `box-sizing: border-box` universal |
| `body` | Fondo `#F5F6FA`, fuente Inter, flex column |
| `main` | Flex, `justify-content: center`, `align-items: flex-start` |
| `.container_report` | Card central, max-width 1200px, sombra sutil, border-radius 8px |
| `.inner-container_report` | Contenedor interno estándar al 95% |
| `.container` / `.inner-container` | Variante para páginas de login/index |
| `.actions` | Barra de búsqueda + botones superior a tabla |
| `.pagination` | Paginación con estado activo en `#2B4EC8` |
| `.message` | Mensaje de resultado centrado |
| `.button-container` | Contenedor de botones flex |
| `.badge` + variantes | Sistema de badges: `.badge-pending` (ámbar), `.badge-active` (verde), `.badge-inactive` (gris) |
| Elementos de formulario | `label`, `.form-group`, `.form-row` |
| Tipografía | `h1` (28px/700), `h2` (20px/700), `.breadcrumb` |
| `footer` | Footer estándar |
| `.sr-only` | Utilidad accesibilidad |
| `@media (max-width: 992px)` | Responsive: containers al 95% |
| `@media (max-width: 600px)` | Responsive: flex columna en acciones, h1/h2 reducidos |
| `@media print` | Oculta .actions, .pagination, .message, .button-container |

---

### `VALIDACIÓN_RESULTADOS.md` — ~140 líneas
**Motivo:** Crear un checklist completo para validar visualmente cada vista después del refactor, incluye pruebas de regresión JS.

**Contenido:**
- Orden de carga requerido de CSS en cada PHP
- Checklist genérico (13 puntos) aplicable a todas las vistas
- Checklist específico por vista (empleados, usuarios, feriados, tipos, oficinas, externos, accesoweb, dialibre, saldo_vacaciones, solicitudes_baja, admin_usuarios)
- Tabla de regresión JS: 9 archivos JS × selectores clave a verificar
- Tabla de compatibilidad de variables CSS (alias antiguo → nuevo)
- Lista de archivos confirmados como no modificados
- Tabla resumen de todos los cambios aplicados con nivel de riesgo

---

## ARCHIVOS MODIFICADOS — CSS COMPARTIDO

### `public/css/buttons.css`
**Tipo:** Modificación de valor (conservador — sin cambio de selectores)

**Qué se cambió:**
```css
/* ANTES */
button:hover {
    background-color: #1f2937;
    color: white;
}

/* DESPUÉS */
button:hover {
    background-color: var(--clr-primary);
    border-color: var(--clr-primary);
    color: white;
}
```

**Motivo:** El design reference muestra botones con hover en azul `#2B4EC8`, no en oscuro `#1f2937`. Se añade también `border-color` para que el borde no quede en contraste cuando el fondo cambia.

---

### `public/css/styles_tablas.css`
**Tipo:** Modificación + adición de patrones compartidos  
**Líneas:** 54 → 119

**Qué se cambió en selectores existentes:**

| Propiedad | Antes | Después | Motivo |
|---|---|---|---|
| `th color` | `var(--text-color)` (oscuro) | `var(--clr-accent)` (#3F7CDB azul) | Design reference: encabezados de tabla en azul accent |
| `th background-color` | `rgba(245,245,245,1)` gris | `transparent` | Design reference: sin fondo en encabezados |
| `th font-weight` | `600` | `500` | Design reference: peso medio para labels de tabla |
| `td border-bottom` | `1px solid var(--border-color)` | `1px dashed var(--clr-border)` | Design reference: separadores punteados, no sólidos |
| `td padding` | `0.4rem` | `12px 8px` | Design reference: más espacio vertical en celdas |
| `td font-size` | `0.75rem` (hardcoded) | `var(--font-size-sm)` | Usar token de diseño |
| `tr:hover` selector | `tr:hover { background-color }` | `tr:hover td { background-color: var(--clr-primary-light) }` | Selector más específico; color de hover suave (#EEF2FF) |

**Qué se agregó** (patrones compartidos que antes se repetían en 8+ archivos de página):

```css
/* Botones icono transparentes dentro de celdas */
table td button.edit-btn,
table td button.delete-btn,
table td button.toggle-btn,
table td .edit-btn,
table td .delete-btn { ... }

/* Tooltips data-tooltip en botones de tabla */
table td [data-tooltip]::after { ... }
table td [data-tooltip]:hover::after { opacity: 1; visibility: visible; }
```

**Motivo:** Estos estilos estaban literalmente copiados (~40 líneas cada uno) en cada archivo de página. Moverlos a `styles_tablas.css` elimina ~320 líneas de duplicación sin cambiar ningún selector.

---

### `public/css/oficinas.css`
**Tipo:** Modificación — eliminación de bloque duplicado al inicio + actualización de color  
**Líneas:** 193 → 167

**Qué se eliminó** (bloque al inicio del archivo):
```css
:root { --primary-color: ...; --text-color: ...; --bg: ...; --border: ...; }
* { box-sizing: border-box; }
body { background: var(--bg); color: ...; font-family: sans-serif; ... }
main { flex: 1; display: flex; ... }
```

**Qué se cambió:**
```css
/* ANTES */
.page-oficinas .button-container button:hover { background: #1f2937; color: #fff; }

/* DESPUÉS */
.page-oficinas .button-container button:hover { background: var(--clr-primary); border-color: var(--clr-primary); color: #fff; }
```

**Motivo:** El bloque `:root/body/main` al inicio era idéntico al de los otros 12 archivos y ahora lo provee `core.css`. Todo lo demás en `oficinas.css` ya está correctamente scoped a `.page-oficinas` (no necesitaba cambios).

---

## ARCHIVOS REDUCIDOS — CSS DE PÁGINA

El patrón aplicado a todos fue idéntico: **eliminar el bloque duplicado** que cada archivo tenía copiado, **conservar únicamente el contenido único** de cada página.

### Bloque eliminado de cada archivo (era idéntico en todos)
```css
:root { --primary-color: #2563eb; --text-color: #1f2937; --background-color: #F2F2F2; --border-color: #e5e7eb; }
body { background-color: var(--background-color); color: var(--text-color); line-height: 1.5; font-size: 14px; padding: 1rem 2.5%; font-family: sans-serif; display: flex; flex-direction: column; min-height: 100vh; margin: 0; }
main { flex: 1; display: flex; justify-content: center; align-items: center; padding: 20px; }
.container_report { max-width: 1200px; margin: 2.5rem auto; padding: 1.5rem; background-color: white; border-radius: 8px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); width: 90%; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.inner-container_report { width: Xpx; margin: 0 auto; padding: 1rem; background-color: white; border-radius: 8px; display: flex; flex-direction: column; align-items: center; gap: 20px; }
.actions { ... }
.actions .search-form { ... }
.actions .search-form input[type="text"] { ... }
.actions .search-form button { ... }
.pagination { ... }
.pagination a, .pagination strong { ... }
.pagination a:hover { ... }
.pagination strong { background-color: #2563eb; ... }
.message { ... }
@media print { .actions, .pagination, .message { display: none !important; } .container_report { box-shadow: none; } .inner-container_report { width: 100%; } }
```
**~120–150 líneas eliminadas** de cada archivo de página.

---

### Detalle de contenido CONSERVADO por archivo

#### `public/css/empleados.css` (241 → 27 líneas)
- `.employees-table { table-layout: fixed }`
- 7 reglas de ancho de columna (nth-child 1–7): ID 90px, Nombre 180px, Puesto 120px, Salario 100px, Correo 180px, Estatus 50px, Acciones 40px

#### `public/css/usuarios.css` (239 → 28 líneas)
- Override: `.inner-container_report { width: 85% }` (este archivo usaba 85%, distinto del 95% de core.css)
- `.users-table { table-layout: fixed }`
- 7 reglas de ancho de columna: ID 70px, Usuario 150px, Vinculado 200px, Tipo 100px, Rol 100px, Estado 80px, Acciones 80px

#### `public/css/feriados.css` (224 → 19 líneas)
- Override: `.inner-container_report { width: 70% }` (tabla angosta)
- `.holidays-table { table-layout: fixed }`
- 4 reglas de ancho: ID 20px, Fecha 80px, Nombre 200px, Editar 30px

#### `public/css/tipos.css` (247 → 45 líneas)
- `.table-selector` (selector de tabla dropdown — único de esta vista)
- `.table-selector form`, `.table-selector label`, `.table-selector select`
- `.tipos-table { table-layout: fixed }`
- 3 reglas de ancho: Código 90px, Nombre 300px, Acciones 60px
- `.tipos-table td .edit-btn, .delete-btn { display: inline-flex; margin-right: 5px }` (dos botones en misma celda)

#### `public/css/externos.css` (243 → 30 líneas)
- `.equipos-table { table-layout: fixed }`
- 8 reglas de ancho: ID 60px, Nombre 150px, Token 200px, Estado 80px, F.Registro 120px, Últ.Acceso 120px, Ubicación 150px, Acciones 40px

#### `public/css/accesoweb.css` (235 → 21 líneas)
- `.accesos-table { table-layout: fixed }`
- 5 reglas de ancho: ID 90px, Archivo 180px, Nivel 120px, Descripción 300px, Acciones 60px

#### `public/css/dialibre.css` (405 → 118 líneas)
- Override: `.inner-container_report { width: 80% }`
- `.message-success` / `.message-error` — variantes de alerta (fondos verde/rojo)
- `.days-off-table { table-layout: fixed }` + 8 columnas
- `table.days-off-table tbody tr td:nth-child(8) { display: flex !important }` — celda de acciones con botones alineados
- `.days-off-table td button.edit-btn, .delete-btn { display: inline-flex !important }` — override de estilos compartidos
- Estilos flatpickr (`.flatpickr-calendar`, `.calendar-invisible`, `.flatpickr-day.selected`)
- Estilos de botón dentro del modal (`.popup-content button`)
- Estilos de input/select dentro de `.form-group` scoped al modal

#### `public/css/saldo_vacaciones.css` (122 → 29 líneas)
- `.table-container { display: flex; justify-content: center }` — tabla centrada
- `.saldo-table { width: 75%; table-layout: fixed; margin: 0 auto }`
- Font-size override para esta tabla: `16px`
- 3 reglas de ancho: ID 70px, Nombre 180px, Saldo 30px
- Print: `.saldo-table { margin: 0 auto }`

#### `public/css/estilo_solicitudesbaja.css` (137 → 65 líneas)
- Override: `.container_report { max-width: 75% }` + `.inner-container_report { width: 70% }`
- `.modulo-container_Report` — contenedor único de esta vista
- `#formPendientes` — formulario de filtros con fechas y selects
- `#formPendientes input[type="date"], select { width: auto }` — inputs de ancho automático
- `.botones { justify-content: flex-start }` — botones a la izquierda
- 10 reglas de ancho de columna (nth-child 1–10) sin selector de tabla (tabla sin clase específica)

> **Eliminación importante:** Se removió `input, select { width: 100% }` que era un selector GLOBAL que podía interferir con otros CSS al cargar junto a ellos.

#### `public/css/estilo_reportes.css` (~115 truncado → 46 líneas)
> Nota: el archivo original estaba incompleto/truncado en el servidor.

- Override: `.inner-container_report { width: 70% }`
- `.modulo-container_Report { width: 90% }`
- `#formReport` — formulario de filtros de reporte
- `#formReport label`, `#formReport input[type="date"]`, `#formReport select`
- `#formReport button { width: auto; padding: 10px 20px; margin-top: 22px }`

#### `public/css/estilo_reportebaja.css` (188 → 57 líneas)
- Override: `.inner-container_report { width: 70% }`
- `.modulo-container_Report` — con **corrección de bug** (ver abajo)
- `#formReport` — idéntico a estilo_reportes.css
- 9 reglas `max-width` de columna (nth-child 1–9)

> **Bug corregido:** `.modulo-container_Report { margin: 0.5rem green }` — `green` no es un valor válido de margin. Corregido a `margin: 0.5rem 0`. El mismo bug existía en `estilo_reportemarca.css` y fue corregido también.

#### `public/css/estilo_reportemarca.css` (150 → 142 líneas)
Este archivo tiene el menor ahorro porque tenía más contenido único:
- Override: `.inner-container_report { width: 70% }`
- `.modulo-container_Report` (bug corregido)
- `#formReport { flex-wrap: nowrap; overflow-x: auto }` — variante que fuerza una sola fila
- `.botones` — grupo de botones centrado con estilos de píldora
- `#btnAgregarMarca` — botón primary azul (background: var(--clr-primary))
- `#tablaResultados` — tabla con `table-layout: fixed` + 8 columnas con `white-space: nowrap; text-overflow: ellipsis`
- `.modal` / `.modal.hidden` / `.modal-content` / `.modal-actions` — **JS-PROTECTED**: reporteMarcas.js hace `modal.classList.add('hidden')` y `modal.classList.remove('hidden')`. La regla `.modal.hidden { display: none }` debe existir para que el toggle funcione.

---

## ARCHIVOS DE DOCUMENTACIÓN ACTUALIZADOS

### `REFACTORIZACIÓN_PLAN.md`
**Tipo:** Actualización menor  
**Líneas:** 261 → 265 (+4)

**Qué se agregó:** 4 selectores JS-protegidos descubiertos por el agente de auditoría JS que corrió en background:

```
.hidden    → reporteMarcas.js: modal.classList.add/remove('hidden')
.hidden    → resumenMarcas.js: modal.classList.add/remove('hidden')
.scrolled  → titulos_script.js: header.classList.add/remove('scrolled')
.editMarca → reporteMarcas.js: e.target.classList.contains('editMarca')
```

**Motivo:** Estos selectores no estaban en la lista original de protegidos. Agregarlos asegura que futuras refactorizaciones no los renombren accidentalmente.

---

## ARCHIVOS NO MODIFICADOS (confirmados)

| Archivo | Motivo de no tocar |
|---|---|
| `public/css/login.css` | Completamente scoped a `body.login-minimal`, sin duplicación |
| `public/css/auth_forms.css` | Scoped, sin duplicación |
| `public/css/modal.css` | Pequeño, limpio, sin duplicación |
| `public/css/mantenimiento.css` | Diseño completamente independiente (anterior al sistema), no sigue el patrón template |
| `public/css/admin_usuarios.css` | Sistema de diseño propio scoped a `body.admin-users-clean` con variables `--au-*` propias |
| `public/css/estilo_titulos.css` | Define h1/h2/footer — aunque core.css también los define, la especificidad es manejable |
| `public/css/styles_baja.css` | Usa `.container` + `.inner-container` (variante, no `.container_report`), requiere análisis separado |
| `public/css/styles_admin.css` | Tiene su propio :root + `.container`, requiere análisis separado |
| `public/css/styles_marca.css` | Tiene `prefers-color-scheme: dark` y sistema propio, requiere análisis separado |
| `public/css/index.css` | Scoped a login/index, sin duplicación con páginas de gestión |
| `public/css/fonts.css` | Solo `@font-face`, intocable |
| `public/css/flatpickr.min.css` | Vendor, intocable |
| `public/css/all.min.css` | FontAwesome vendor, intocable |
| `public/php/nav.php` (inline `<style>`) | 530+ líneas inline autónomas con JS propio, completamente aisladas |

---

## NOTAS DE COMPATIBILIDAD

### Variables CSS — retrocompatibilidad garantizada
Core.css define aliases que mapean los nombres viejos a los nuevos tokens:

```css
--primary-color:    var(--clr-primary);    /* #2B4EC8 — antes #2563eb */
--text-color:       var(--clr-text);       /* #111827 — antes #1f2937 */
--background-color: var(--clr-body-bg);    /* #F5F6FA — antes #F2F2F2 */
--border-color:     var(--clr-border);     /* #E5E7EB — sin cambio */
```

Ningún archivo PHP de vistas necesita actualizarse para que los colores funcionen.

### Selectores — sin renombrar ninguno
Los 31 IDs y 13 clases JS-protegidas identificados en `REFACTORIZACIÓN_PLAN.md` no fueron tocados. Los nombres de clases en archivos PHP tampoco cambiaron.

---

## ACCIÓN PENDIENTE (no realizada en esta sesión)

Para que `core.css` tenga efecto, cada vista PHP debe cargar los CSS en este orden:

```html
<!-- En el <head> de cada vista PHP que usa las clases de core.css -->
<link rel="stylesheet" href="css/fonts.css">
<link rel="stylesheet" href="css/core.css">       ← AGREGAR PRIMERO
<link rel="stylesheet" href="css/styles_tablas.css">
<link rel="stylesheet" href="css/buttons.css">
<link rel="stylesheet" href="css/modal.css">      ← solo si hay modales
<link rel="stylesheet" href="css/[pagina].css">   ← último
```

Las vistas PHP afectadas son: `empleados.php`, `usuarios.php`, `feriados.php`, `tipos.php`, `oficinas.php`, `externos.php`, `accesoweb.php`, `dialibre.php`, `saldo_vacaciones.php`, y las vistas de solicitudes/reportes.

> Hasta que se agregue este `<link>`, los archivos CSS de página reducidos NO funcionarán correctamente (faltará el :root, body, main, etc. que ahora vive en core.css).
