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; }