/** * Tablas APU - Análisis de Precios Unitarios * Estilos específicos para tablas de construcción * * @package Apus_Theme * @since 1.0.0 */ /* ======================================== CONTENEDOR PRINCIPAL DE TABLA APU ======================================== */ .analisis, .desglose { margin: 2rem 0; overflow-x: auto; -webkit-overflow-scrolling: touch; } /* ======================================== TABLA BASE ======================================== */ .analisis table, .desglose table { width: 100%; border-collapse: collapse; background: #ffffff; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08); border-radius: 8px; border: none; border-spacing: 0; /* CRITICO: table-layout fixed previene CLS El navegador calcula anchos basado en primera fila, no recalcula cuando carga más contenido */ table-layout: fixed; } /* Eliminar todos los bordes */ .analisis table td, .desglose table td, .analisis table tbody, .desglose table tbody, .analisis table tr, .desglose table tr { border: none; } /* ======================================== ANCHOS DE COLUMNAS ======================================== */ .analisis table td: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:, .desglose table th:nth-child(2) { width: auto; min-width: 300px; } .analisis table td: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:, .desglose table th:nth-child(4) { width: 110px; min-width: 90px; } .analisis table td: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:, .desglose table th:nth-child(6) { width: 120px; min-width: 100px; } /* ======================================== ENCABEZADOS DE TABLA (THEAD) ======================================== */ .analisis table thead tr th, .desglose table thead tr th { background: linear-gradient(135deg, #1e3a5f 0%, #2c5282 100%); color: #ffffff; font-weight: 600; text-align: center !important; padding: 1rem; border: none; position: sticky; top: 0; z-index: 10; } /* ESPECIAL: Primera fila de .analisis cuando NO tiene (para tablas de resumen que solo tienen
) */ .analisis table tbody tr:first-child td { background: linear-gradient(135deg, #1e3a5f 0%, #2c5282 100%); color: #ffffff; font-weight: 600; text-align: center !important; padding: 1rem; border: none; } /* Esquinas redondeadas superiores para primera fila de .analisis */ .analisis table tbody tr:first-child td:first-child { border-top-left-radius: 8px; } .analisis table tbody tr:first-child td:last-child { border-top-right-radius: 8px; } /* ======================================== FILAS NORMALES ======================================== */ .analisis table tbody td, .desglose table tbody td { padding: 0.75rem 1rem; border: none; } /* ======================================== ZEBRA STRIPING - Filas alternadas ======================================== */ .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), .desglose table tbody tr:nth-child(odd):not(.section-header):not(.subtotal-row):not(.total-row) { background-color: #ffffff; } /* ======================================== ALINEACIÓN DE COLUMNAS ======================================== */ /* Columnas 1 y 2: Clave y Descripción - izquierda */ .analisis table td:nth-child(1), .analisis table td:nth-child(2) { text-align: left; } /* Columna 3: Unidad - centrada Fase 4.4 Accesibilidad: Color #495057 (ratio 7.0:1) en lugar de #6c757d */ .analisis table td:nth-child(3), .analisis table td.c3, .desglose table td.c3 { text-align: center !important; color: #495057; font-size: 0.9em; } /* Columnas 4, 5, 6 en .analisis: Cantidad, Costo, Importe - con fuente monospace */ .analisis table td:nth-child(4), .analisis table td.c4, .analisis table td:nth-child(5), .analisis table td.c5, .analisis table td:nth-child(6), .analisis table td.c6 { text-align: right !important; font-family: 'Courier New', Courier, monospace; font-weight: 500; color: #1e3a5f; } /* Columnas 4, 5, 6 en .desglose: Cantidad, Costo, Importe - SIN fuente monospace */ .desglose table td.c4, .desglose table td.c5, .desglose table td.c6 { text-align: right !important; font-weight: 500; color: #1e3a5f; } /* ======================================== HOVER EN FILAS DE DATOS ======================================== */ .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; } /* ======================================== ENCABEZADOS DE SECCIÓN (Material, Mano de Obra, Herramienta, Equipo) ======================================== */ .analisis table tr.section-header, .desglose table tr.section-header { background-color: #e9ecef !important; } .analisis table tr.section-header td, .desglose table tr.section-header td { font-weight: 600; color: #1e3a5f; padding: 0.75rem 1rem; border: none !important; } /* ======================================== FILAS DE SUBTOTALES (Suma de Material, Suma de Mano de Obra, etc) Fase 4.4 Accesibilidad: Color oscuro para contraste WCAG AA (4.5:1) ======================================== */ .analisis table tr.subtotal-row, .desglose table tr.subtotal-row { background-color: rgba(255, 133, 0, 0.15) !important; } .analisis table tr.subtotal-row td, .desglose table tr.subtotal-row td { font-weight: 700; color: #1e3a5f; padding: 0.875rem 1rem; border: none !important; } .analisis table tr.subtotal-row td:nth-child(2) { font-style: italic; } .analisis table tr.subtotal-row td.c6, .analisis table tr.subtotal-row td:nth-child(6) { font-size: 1.05rem; color: #1e3a5f; } /* ======================================== FILA DE TOTAL FINAL (Costo Directo) ======================================== */ .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, .desglose table tr.total-row td { color: #ffffff !important; font-weight: 700; font-size: 1.1rem; padding: 1.125rem 1rem !important; border: none !important; text-transform: uppercase; letter-spacing: 0.5px; } .analisis table tr.total-row td.c6, .analisis table tr.total-row td:nth-child(6) { font-size: 1.25rem; letter-spacing: 0.5px; } /* ======================================== ESTILOS PARA IMPRESIÓN ======================================== */ @media print { .analisis { margin: 1rem 0; overflow: visible; box-shadow: none; } .analisis table, .desglose table { box-shadow: none; border: 1px solid #dee2e6; } .analisis table thead tr th, .desglose table thead tr th { background: #1e3a5f !important; color: #ffffff !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; position: static; } .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, .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, .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), .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, .desglose table { page-break-inside: avoid; } .analisis table tr, .desglose table tr { page-break-inside: avoid; page-break-after: auto; } /* No mostrar hover en impresión */ .analisis table tbody tr:hover { background-color: inherit !important; } } /* ======================================== RESPONSIVE - TABLETS (768px - 991px) ======================================== */ @media (max-width: 991px) { .analisis { font-size: 0.9rem; } .analisis table td { padding: 0.6rem 0.8rem !important; } .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, .desglose table tr.total-row td { font-size: 1rem !important; padding: 1rem 0.8rem !important; } .analisis table tr.total-row td.c6, .analisis table tr.total-row td:nth-child(6) { font-size: 1.15rem !important; } /* Ajustar anchos mínimos en tablets */ .analisis table td:nth-child(1), .analisis table th:, .desglose table th:nth-child(1) { min-width: 80px; } .analisis table td:nth-child(2), .analisis table th:, .desglose table th:nth-child(2) { min-width: 200px; } } /* ======================================== RESPONSIVE - MÓVILES (max 767px) ======================================== */ @media (max-width: 767px) { .analisis { font-size: 0.85rem; margin: 1.5rem 0; } .analisis table td { padding: 0.5rem !important; } .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, .desglose table tr.section-header td { font-size: 0.85em; padding: 0.6rem 0.5rem; } .analisis table tr.subtotal-row td, .desglose table tr.subtotal-row td { padding: 0.7rem 0.5rem; } .analisis table tr.subtotal-row td.c6, .analisis table tr.subtotal-row td:nth-child(6) { font-size: 1rem; } .analisis table tr.total-row td, .desglose table tr.total-row td { font-size: 0.95rem !important; padding: 0.875rem 0.5rem !important; } .analisis table tr.total-row td.c6, .analisis table tr.total-row td:nth-child(6) { font-size: 1.1rem !important; } /* Ajustar anchos mínimos en móviles */ .analisis table td: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:, .desglose table th:nth-child(2) { min-width: 150px; } .analisis table td:nth-child(3), .analisis table th:, .desglose table th:nth-child(3), .analisis table td:nth-child(4), .analisis table th:, .desglose table th:nth-child(4), .analisis table td:nth-child(5), .analisis table th:, .desglose table th:nth-child(5), .analisis table td:nth-child(6), .analisis table th:, .desglose table th:nth-child(6) { min-width: 70px; } } /* ======================================== ACCESIBILIDAD ======================================== */ /* Mejorar contraste para lectores de pantalla */ .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, .desglose table tbody tr:focus-within { outline: 2px solid #0d6efd; outline-offset: -2px; } /* ======================================== COMPATIBILIDAD CON BOOTSTRAP ======================================== */ /* Anular estilos de Bootstrap que puedan interferir */ .analisis table.table, .desglose table.table { margin-bottom: 0; } .analisis table.table > :not(caption) > * > *, .desglose table.table > :not(caption) > * > * { padding: inherit; background-color: inherit; border-bottom-width: 0; box-shadow: none; } /* 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), .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), .desglose table.table-striped > tbody > tr:nth-of-type(even) > *:not(.section-header):not(.subtotal-row):not(.total-row) { background-color: #f8f9fa; }