# 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 `