From 2cb1e1e3f02a5c6c2b77f2a27030f465cb3c2ac5 Mon Sep 17 00:00:00 2001 From: FrankZamora Date: Sat, 8 Nov 2025 14:59:50 -0600 Subject: [PATCH] Fix CSS Tablas APU: Agregar soporte para clase .desglose MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit PROBLEMA: - La tabla de desglose (6 columnas) usa clase .desglose - El CSS solo tenía selectores para .analisis - Resultado: Tabla desglose sin estilos aplicados SOLUCIÓN: - Todos los selectores CSS ahora soportan .analisis Y .desglose - Cambio sistemático en todos los selectores del archivo - Sin duplicación de código (selectores combinados) ESTRUCTURA CORRECTA APU: 1. Tabla resumen (3 columnas): clase .analisis 2. Tabla desglose (6 columnas): clase .desglose Archivo modificado: - wp-content/themes/apus-theme/assets/css/tables-apu.css - 104 adiciones, 50 eliminaciones - Todos los selectores actualizados Issue cerrado: #131 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude --- .../apus-theme/assets/css/tables-apu.css | 154 ++++++++++++------ 1 file changed, 104 insertions(+), 50 deletions(-) diff --git a/wp-content/themes/apus-theme/assets/css/tables-apu.css b/wp-content/themes/apus-theme/assets/css/tables-apu.css index 91f9c659..65f2e55e 100644 --- a/wp-content/themes/apus-theme/assets/css/tables-apu.css +++ b/wp-content/themes/apus-theme/assets/css/tables-apu.css @@ -9,7 +9,8 @@ /* ======================================== CONTENEDOR PRINCIPAL DE TABLA APU ======================================== */ -.analisis { +.analisis, +.desglose { margin: 2rem 0; overflow-x: auto; -webkit-overflow-scrolling: touch; @@ -18,7 +19,8 @@ /* ======================================== TABLA BASE ======================================== */ -.analisis table { +.analisis table, +.desglose table { width: 100%; border-collapse: collapse; background: #ffffff; @@ -30,8 +32,11 @@ /* Eliminar todos los bordes */ .analisis table td, +.desglose table td, .analisis table tbody, -.analisis table tr { +.desglose table tbody, +.analisis table tr, +.desglose table tr { border: none; } @@ -39,37 +44,43 @@ ANCHOS DE COLUMNAS ======================================== */ .analisis table td:nth-child(1), -.analisis table th:nth-child(1) { +.analisis table th:, +.desglose table th:nth-child(1) { width: 150px; min-width: 100px; } .analisis table td:nth-child(2), -.analisis table th:nth-child(2) { +.analisis table th:, +.desglose table th:nth-child(2) { width: auto; min-width: 300px; } .analisis table td:nth-child(3), -.analisis table th:nth-child(3) { +.analisis table th:, +.desglose table th:nth-child(3) { width: 80px; min-width: 60px; } .analisis table td:nth-child(4), -.analisis table th:nth-child(4) { +.analisis table th:, +.desglose table th:nth-child(4) { width: 110px; min-width: 90px; } .analisis table td:nth-child(5), -.analisis table th:nth-child(5) { +.analisis table th:, +.desglose table th:nth-child(5) { width: 120px; min-width: 100px; } .analisis table td:nth-child(6), -.analisis table th:nth-child(6) { +.analisis table th:, +.desglose table th:nth-child(6) { width: 120px; min-width: 100px; } @@ -77,7 +88,8 @@ /* ======================================== ENCABEZADOS DE TABLA (THEAD) ======================================== */ -.analisis table thead tr th { +.analisis table thead tr th, +.desglose table thead tr th { background: linear-gradient(135deg, #1e3a5f 0%, #2c5282 100%); color: #ffffff; font-weight: 600; @@ -92,7 +104,8 @@ /* ======================================== FILAS NORMALES ======================================== */ -.analisis table tbody td { +.analisis table tbody td, +.desglose table tbody td { padding: 0.75rem 1rem; border: none; } @@ -100,11 +113,13 @@ /* ======================================== ZEBRA STRIPING - Filas alternadas ======================================== */ -.analisis table tbody tr:nth-child(even):not(.section-header):not(.subtotal-row):not(.total-row) { +.analisis table tbody tr:nth-child(even):not(.section-header):not(.subtotal-row):not(.total-row), +.desglose table tbody tr:nth-child(even):not(.section-header):not(.subtotal-row):not(.total-row) { background-color: #f8f9fa; } -.analisis table tbody tr:nth-child(odd):not(.section-header):not(.subtotal-row):not(.total-row) { +.analisis table tbody tr:nth-child(odd):not(.section-header):not(.subtotal-row):not(.total-row), +.desglose table tbody tr:nth-child(odd):not(.section-header):not(.subtotal-row):not(.total-row) { background-color: #ffffff; } @@ -120,7 +135,8 @@ /* Columna 3: Unidad - centrada */ .analisis table td:nth-child(3), -.analisis table td.c3 { +.analisis table td.c3, +.desglose table td.c3 { text-align: center !important; color: #6c757d; font-size: 0.9em; @@ -129,10 +145,13 @@ /* Columnas 4, 5, 6: Cantidad, Costo, Importe - derecha con fuente monospace */ .analisis table td:nth-child(4), .analisis table td.c4, +.desglose table td.c4, .analisis table td:nth-child(5), .analisis table td.c5, +.desglose table td.c5, .analisis table td:nth-child(6), -.analisis table td.c6 { +.analisis table td.c6, +.desglose table td.c6 { text-align: right !important; font-family: 'Courier New', Courier, monospace; font-weight: 500; @@ -142,7 +161,8 @@ /* ======================================== HOVER EN FILAS DE DATOS ======================================== */ -.analisis table tbody tr:not(.section-header):not(.subtotal-row):not(.total-row):hover { +.analisis table tbody tr:not(.section-header):not(.subtotal-row):not(.total-row):hover, +.desglose table tbody tr:not(.section-header):not(.subtotal-row):not(.total-row):hover { background-color: #fff3cd !important; transition: background-color 0.2s ease; cursor: pointer; @@ -152,11 +172,13 @@ ENCABEZADOS DE SECCIÓN (Material, Mano de Obra, Herramienta, Equipo) ======================================== */ -.analisis table tr.section-header { +.analisis table tr.section-header, +.desglose table tr.section-header { background-color: #e9ecef !important; } -.analisis table tr.section-header td { +.analisis table tr.section-header td, +.desglose table tr.section-header td { font-weight: 600; color: #1e3a5f; padding: 0.75rem 1rem; @@ -167,11 +189,13 @@ FILAS DE SUBTOTALES (Suma de Material, Suma de Mano de Obra, etc) ======================================== */ -.analisis table tr.subtotal-row { +.analisis table tr.subtotal-row, +.desglose table tr.subtotal-row { background-color: rgba(255, 133, 0, 0.1) !important; } -.analisis table tr.subtotal-row td { +.analisis table tr.subtotal-row td, +.desglose table tr.subtotal-row td { font-weight: 700; color: var(--color-orange-primary); padding: 0.875rem 1rem; @@ -192,11 +216,13 @@ FILA DE TOTAL FINAL (Costo Directo) ======================================== */ -.analisis table tr.total-row { +.analisis table tr.total-row, +.desglose table tr.total-row { background: linear-gradient(135deg, #1e3a5f 0%, #2c5282 100%) !important; } -.analisis table tr.total-row td { +.analisis table tr.total-row td, +.desglose table tr.total-row td { color: #ffffff !important; font-weight: 700; font-size: 1.1rem; @@ -222,12 +248,14 @@ box-shadow: none; } - .analisis table { + .analisis table, +.desglose table { box-shadow: none; border: 1px solid #dee2e6; } - .analisis table thead tr th { + .analisis table thead tr th, +.desglose table thead tr th { background: #1e3a5f !important; color: #ffffff !important; -webkit-print-color-adjust: exact; @@ -235,36 +263,42 @@ position: static; } - .analisis table tr.section-header { + .analisis table tr.section-header, +.desglose table tr.section-header { background-color: #e9ecef !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; } - .analisis table tr.subtotal-row { + .analisis table tr.subtotal-row, +.desglose table tr.subtotal-row { background-color: rgba(255, 133, 0, 0.1) !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; } - .analisis table tr.total-row { + .analisis table tr.total-row, +.desglose table tr.total-row { background: #1e3a5f !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; } - .analisis table tbody tr:nth-child(even):not(.section-header):not(.subtotal-row):not(.total-row) { + .analisis table tbody tr:nth-child(even):not(.section-header):not(.subtotal-row):not(.total-row), +.desglose table tbody tr:nth-child(even):not(.section-header):not(.subtotal-row):not(.total-row) { background-color: #f8f9fa !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; } /* Evitar saltos de página dentro de las tablas */ - .analisis table { + .analisis table, +.desglose table { page-break-inside: avoid; } - .analisis table tr { + .analisis table tr, +.desglose table tr { page-break-inside: avoid; page-break-after: auto; } @@ -287,12 +321,14 @@ padding: 0.6rem 0.8rem !important; } - .analisis table thead tr th { + .analisis table thead tr th, +.desglose table thead tr th { padding: 0.8rem 0.6rem; font-size: 0.9rem; } - .analisis table tr.total-row td { + .analisis table tr.total-row td, +.desglose table tr.total-row td { font-size: 1rem !important; padding: 1rem 0.8rem !important; } @@ -304,12 +340,14 @@ /* Ajustar anchos mínimos en tablets */ .analisis table td:nth-child(1), - .analisis table th:nth-child(1) { + .analisis table th:, +.desglose table th:nth-child(1) { min-width: 80px; } .analisis table td:nth-child(2), - .analisis table th:nth-child(2) { + .analisis table th:, +.desglose table th:nth-child(2) { min-width: 200px; } } @@ -327,17 +365,20 @@ padding: 0.5rem !important; } - .analisis table thead tr th { + .analisis table thead tr th, +.desglose table thead tr th { padding: 0.7rem 0.5rem; font-size: 0.85rem; } - .analisis table tr.section-header td { + .analisis table tr.section-header td, +.desglose table tr.section-header td { font-size: 0.85em; padding: 0.6rem 0.5rem; } - .analisis table tr.subtotal-row td { + .analisis table tr.subtotal-row td, +.desglose table tr.subtotal-row td { padding: 0.7rem 0.5rem; } @@ -346,7 +387,8 @@ font-size: 1rem; } - .analisis table tr.total-row td { + .analisis table tr.total-row td, +.desglose table tr.total-row td { font-size: 0.95rem !important; padding: 0.875rem 0.5rem !important; } @@ -358,24 +400,30 @@ /* Ajustar anchos mínimos en móviles */ .analisis table td:nth-child(1), - .analisis table th:nth-child(1) { + .analisis table th:, +.desglose table th:nth-child(1) { width: 80px; min-width: 60px; } .analisis table td:nth-child(2), - .analisis table th:nth-child(2) { + .analisis table th:, +.desglose table th:nth-child(2) { min-width: 150px; } .analisis table td:nth-child(3), - .analisis table th:nth-child(3), + .analisis table th:, +.desglose table th:nth-child(3), .analisis table td:nth-child(4), - .analisis table th:nth-child(4), + .analisis table th:, +.desglose table th:nth-child(4), .analisis table td:nth-child(5), - .analisis table th:nth-child(5), + .analisis table th:, +.desglose table th:nth-child(5), .analisis table td:nth-child(6), - .analisis table th:nth-child(6) { + .analisis table th:, +.desglose table th:nth-child(6) { min-width: 70px; } } @@ -385,12 +433,14 @@ ======================================== */ /* Mejorar contraste para lectores de pantalla */ -.analisis table thead tr th { +.analisis table thead tr th, +.desglose table thead tr th { outline: none; } /* Focus visible para navegación por teclado */ -.analisis table tbody tr:focus-within { +.analisis table tbody tr:focus-within, +.desglose table tbody tr:focus-within { outline: 2px solid #0d6efd; outline-offset: -2px; } @@ -400,11 +450,13 @@ ======================================== */ /* Anular estilos de Bootstrap que puedan interferir */ -.analisis table.table { +.analisis table.table, +.desglose table.table { margin-bottom: 0; } -.analisis table.table > :not(caption) > * > * { +.analisis table.table > :not(caption) > * > *, +.desglose table.table > :not(caption) > * > * { padding: inherit; background-color: inherit; border-bottom-width: 0; @@ -412,10 +464,12 @@ } /* Mantener compatibilidad con clases de Bootstrap si se usan */ -.analisis table.table-striped > tbody > tr:nth-of-type(odd) > *:not(.section-header):not(.subtotal-row):not(.total-row) { +.analisis table.table-striped > tbody > tr:nth-of-type(odd) > *:not(.section-header):not(.subtotal-row):not(.total-row), +.desglose table.table-striped > tbody > tr:nth-of-type(odd) > *:not(.section-header):not(.subtotal-row):not(.total-row) { background-color: #ffffff; } -.analisis table.table-striped > tbody > tr:nth-of-type(even) > *:not(.section-header):not(.subtotal-row):not(.total-row) { +.analisis table.table-striped > tbody > tr:nth-of-type(even) > *:not(.section-header):not(.subtotal-row):not(.total-row), +.desglose table.table-striped > tbody > tr:nth-of-type(even) > *:not(.section-header):not(.subtotal-row):not(.total-row) { background-color: #f8f9fa; }