/* ===================================================================
   OPTIMIZACIÓN LAPTOP PARA GESTIÓN DE PRODUCCIÓN
   Específicamente para laptops pequeñas (769px - 1366px)
   NO afecta optimizaciones móviles (< 768px)
   =================================================================== */

/* ========================================
   1. APLICAR SOLO EN LAPTOPS
   ======================================== */

@media (min-width: 769px) and (max-width: 1366px) {

    /* ========================================
       2. HEADER Y TÍTULO - Más compacto
       ======================================== */

    html body #production-view .page-title,
    body #production-view h1.page-title {
        font-size: 1.8rem !important;
        margin-bottom: 1rem !important;
        padding-bottom: 0.5rem !important;
        display: flex !important;
        align-items: center !important;
        flex-wrap: nowrap !important;
    }

    html body #production-view .page-title i,
    body #production-view h1.page-title i {
        font-size: 1.5rem !important;
    }

    html body #production-view .page-title .btn-link {
        font-size: 1rem !important;
        padding: 0.25rem !important;
    }

    /* ========================================
       3. GLASS CARDS - Padding reducido
       ======================================== */

    #production-view .glass-card {
        padding: 0.75rem !important;
        margin-bottom: 1rem !important;
    }

    #production-view .glass-card h3 {
        font-size: 1.3rem !important;
        margin-bottom: 0.75rem !important;
    }

    #production-view .glass-card h3 i {
        font-size: 1.2rem !important;
    }

    /* ========================================
       4. BARRA DE BÚSQUEDA Y FILTROS - Compactos
       ======================================== */

    #production-view .form-control,
    #production-view .form-select {
        padding: 0.4rem 0.6rem !important;
        font-size: 0.85rem !important;
        min-height: 38px !important;
    }

    #production-view .input-group-text {
        padding: 0.4rem 0.6rem !important;
        font-size: 0.85rem !important;
    }

    #production-view .btn {
        padding: 0.4rem 0.75rem !important;
        font-size: 0.85rem !important;
    }

    #production-view .btn i {
        font-size: 0.9rem !important;
    }

    /* Ajustar row de filtros */
    #production-view .glass-card .row.g-3 {
        gap: 0.5rem !important;
    }

    /* ========================================
       5. LISTAS DE CLICKUP - Grid optimizado
       ======================================== */

    #clickup-lists-container .clickup-list-card {
        margin-bottom: 0.75rem !important;
        padding: 0 !important;
    }

    #clickup-lists-container .clickup-list-card .card-body {
        padding: 0.75rem !important;
    }

    #clickup-lists-container .clickup-list-card h5 {
        font-size: 1rem !important;
        margin-bottom: 0.5rem !important;
    }

    #clickup-lists-container .clickup-list-card .card-text {
        font-size: 0.8rem !important;
    }

    #clickup-lists-container .clickup-list-card .badge {
        font-size: 0.75rem !important;
        padding: 0.3em 0.6em !important;
    }

    /* ========================================
       6. BOARD DE TAREAS - Headers compactos
       ======================================== */

    .board-status-header {
        padding: 0.6rem 0.75rem !important;
        font-size: 0.9rem !important;
    }

    .board-status-header h5 {
        font-size: 0.95rem !important;
        margin-bottom: 0 !important;
    }

    .board-status-header .badge {
        font-size: 0.75rem !important;
        padding: 0.3em 0.6em !important;
    }

    .board-status-header i {
        font-size: 1rem !important;
    }

    .clickup-board-section {
        margin-bottom: 0.75rem !important;
    }

    /* ========================================
       7. TARJETAS DE TAREAS - Más compactas
       ======================================== */

    .task-card-compact {
        margin-bottom: 0.6rem !important;
        padding: 0.75rem !important;
        border-radius: 8px !important;
    }

    .task-card-compact .task-custom-id,
    .task-card-compact .badge.bg-info {
        font-size: 0.85rem !important;
        padding: 0.3rem 0.6rem !important;
    }

    .task-card-compact .task-name,
    .task-card-compact h6 {
        font-size: 0.9rem !important;
        margin-bottom: 0.4rem !important;
        line-height: 1.4 !important;
    }

    .task-info-item {
        font-size: 0.8rem !important;
        padding: 0.25rem 0 !important;
        gap: 0.4rem !important;
    }

    .task-info-item i {
        font-size: 0.95rem !important;
        min-width: 20px !important;
    }

    .task-card-compact .assignee-badge,
    .task-card-compact .badge.bg-secondary {
        font-size: 0.75rem !important;
        padding: 0.25rem 0.5rem !important;
    }

    .task-card-compact .task-tag,
    .task-card-compact .badge.bg-dark {
        font-size: 0.7rem !important;
        padding: 0.2rem 0.4rem !important;
    }

    .task-card-compact .priority-badge {
        font-size: 0.75rem !important;
        padding: 0.25rem 0.5rem !important;
    }

    /* ========================================
       8. MODALES - REDUCIR TAMAÑO
       ======================================== */

    /* Modal de Ayuda - Más pequeño */
    #productionHelpModal .modal-dialog {
        max-width: 650px !important;
        margin: 1rem auto !important;
    }

    #productionHelpModal .modal-header {
        padding: 0.75rem 1rem !important;
    }

    #productionHelpModal .modal-title {
        font-size: 1.1rem !important;
    }

    #productionHelpModal .modal-body {
        padding: 1rem !important;
        font-size: 0.85rem !important;
    }

    #productionHelpModal .accordion-button {
        padding: 0.6rem 0.75rem !important;
        font-size: 0.9rem !important;
    }

    #productionHelpModal .accordion-body {
        padding: 0.75rem !important;
        font-size: 0.85rem !important;
    }

    #productionHelpModal .accordion-body ul {
        margin-bottom: 0.5rem !important;
    }

    #productionHelpModal .accordion-body li {
        margin-bottom: 0.25rem !important;
    }

    /* Modal de Detalle de Tarea */
    #taskDetailModal .modal-dialog {
        max-width: 700px !important;
        margin: 1rem auto !important;
    }

    #taskDetailModal .modal-header {
        padding: 0.75rem 1rem !important;
    }

    #taskDetailModal .modal-title {
        font-size: 1rem !important;
        line-height: 1.3 !important;
    }

    #taskDetailModal .modal-body {
        padding: 1rem !important;
        max-height: calc(100vh - 200px) !important;
        overflow-y: auto !important;
    }

    #taskDetailModal .modal-footer {
        padding: 0.75rem 1rem !important;
    }

    .task-detail-section {
        margin-bottom: 1rem !important;
        padding-bottom: 0.75rem !important;
    }

    .task-detail-section h6 {
        font-size: 0.95rem !important;
        margin-bottom: 0.5rem !important;
    }

    .custom-field-item {
        padding: 0.5rem !important;
        margin-bottom: 0.4rem !important;
    }

    .custom-field-label {
        font-size: 0.75rem !important;
        margin-bottom: 0.2rem !important;
    }

    .custom-field-value {
        font-size: 0.85rem !important;
    }

    /* Modal de Reporte de Materiales */
    .materials-report-form .modal-dialog,
    [id*="reportModal"] .modal-dialog {
        max-width: 750px !important;
        margin: 0.75rem auto !important;
    }

    .materials-report-form .modal-header,
    [id*="reportModal"] .modal-header {
        padding: 0.75rem 1rem !important;
    }

    .materials-report-form .modal-title,
    [id*="reportModal"] .modal-title {
        font-size: 1.1rem !important;
    }

    .materials-report-form .modal-body,
    [id*="reportModal"] .modal-body {
        padding: 1rem !important;
        max-height: calc(100vh - 180px) !important;
        overflow-y: auto !important;
    }

    .materials-report-form .card-header {
        padding: 0.6rem 0.75rem !important;
        font-size: 0.95rem !important;
    }

    .materials-report-form h6 {
        font-size: 0.9rem !important;
        margin-bottom: 0.6rem !important;
    }

    .materials-report-form .form-label {
        font-size: 0.8rem !important;
        margin-bottom: 0.3rem !important;
    }

    .materials-report-form .form-control,
    .materials-report-form .form-select {
        min-height: 36px !important;
        padding: 0.35rem 0.5rem !important;
        font-size: 0.85rem !important;
    }

    /* Tabla de materiales en modal */
    .materials-list table {
        font-size: 0.8rem !important;
    }

    .materials-list th,
    .materials-list td {
        padding: 0.4rem 0.5rem !important;
    }

    .materials-list .btn {
        padding: 0.3rem 0.5rem !important;
        font-size: 0.75rem !important;
    }

    /* ========================================
       9. TABLA DE REVISIÓN - Compacta
       ======================================== */

    #completed-reports-table {
        font-size: 0.8rem !important;
    }

    #completed-reports-table th,
    #completed-reports-table td {
        padding: 0.5rem 0.4rem !important;
        font-size: 0.8rem !important;
    }

    #completed-reports-table th {
        font-size: 0.85rem !important;
        font-weight: 600 !important;
    }

    #completed-reports-table .btn {
        padding: 0.3rem 0.5rem !important;
        font-size: 0.75rem !important;
    }

    /* ========================================
       10. BOTONES DE ACCIÓN
       ======================================== */

    #production-view .btn-group {
        gap: 2px !important;
    }

    #production-view .btn-sm {
        padding: 0.3rem 0.5rem !important;
        font-size: 0.75rem !important;
    }

    .status-change-button {
        padding: 0.4rem 0.6rem !important;
        font-size: 0.85rem !important;
        border-radius: 5px !important;
    }

    /* ========================================
       11. SPINNERS Y LOADING
       ======================================== */

    #production-view .spinner-border {
        width: 1.5rem !important;
        height: 1.5rem !important;
    }

    #production-view .loading-message {
        font-size: 0.85rem !important;
    }

    /* ========================================
       12. MENSAJES Y ALERTAS
       ======================================== */

    #production-view .alert {
        padding: 0.5rem 0.75rem !important;
        font-size: 0.85rem !important;
    }

    #production-view .alert i {
        font-size: 0.9rem !important;
    }

    /* ========================================
       13. TABS Y NAVEGACIÓN
       ======================================== */

    .nav-tabs .nav-link {
        padding: 0.5rem 0.75rem !important;
        font-size: 0.85rem !important;
    }

    .tab-pane {
        padding: 0.75rem 0 !important;
    }

    /* ========================================
       14. EMPTY STATES
       ======================================== */

    .empty-state {
        padding: 1.5rem 1rem !important;
    }

    .empty-state i {
        font-size: 2.5rem !important;
        margin-bottom: 0.75rem !important;
    }

    .empty-state h4 {
        font-size: 1.1rem !important;
        margin-bottom: 0.4rem !important;
    }

    .empty-state p {
        font-size: 0.85rem !important;
    }

    /* ========================================
       15. SCROLL OPTIMIZADO
       ======================================== */

    #production-view .scrollable-content {
        max-height: calc(100vh - 250px) !important;
    }

    #production-view .table-responsive {
        max-height: calc(100vh - 300px) !important;
    }

    /* Scrollbar más delgado */
    #production-view ::-webkit-scrollbar {
        width: 6px !important;
        height: 6px !important;
    }

    #production-view ::-webkit-scrollbar-track {
        background: transparent !important;
    }

    #production-view ::-webkit-scrollbar-thumb {
        background: rgba(0, 0, 0, 0.2) !important;
        border-radius: 3px !important;
    }

    #production-view ::-webkit-scrollbar-thumb:hover {
        background: rgba(0, 0, 0, 0.3) !important;
    }

}

/* ========================================
   16. PANTALLAS MUY PEQUEÑAS (< 1200px)
   ======================================== */

@media (min-width: 769px) and (max-width: 1200px) {

    /* Reducir aún más para laptops muy pequeñas */
    #production-view .page-title {
        font-size: 1.6rem !important;
    }

    #production-view .glass-card {
        padding: 0.6rem !important;
    }

    #production-view .glass-card h3 {
        font-size: 1.2rem !important;
    }

    /* Modales aún más compactos */
    #productionHelpModal .modal-dialog,
    #taskDetailModal .modal-dialog,
    .materials-report-form .modal-dialog {
        max-width: 600px !important;
        margin: 0.5rem auto !important;
    }

    #taskDetailModal .modal-body,
    .materials-report-form .modal-body {
        max-height: calc(100vh - 150px) !important;
        padding: 0.75rem !important;
    }

    /* Tarjetas de tarea más compactas */
    .task-card-compact {
        padding: 0.6rem !important;
    }

    .task-card-compact .task-name,
    .task-card-compact h6 {
        font-size: 0.85rem !important;
    }

    /* Filtros en columna completa para mejor uso del espacio */
    #production-view .glass-card .col-md-6,
    #production-view .glass-card .col-md-3 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        margin-bottom: 0.5rem !important;
    }

}

/* ========================================
   16. VISTA DE AUDITORÍA - ESTILOS GENERALES
   ======================================== */

/* Centrar contenido de todas las celdas */
#auditoria-view .table td {
    text-align: center;
    vertical-align: middle;
}

/* Excepción: valores monetarios alineados a la derecha */
#auditoria-view .table td:nth-child(6),  /* Subtotal */
#auditoria-view .table td:nth-child(7),  /* % Utilidad */
#auditoria-view .table td:nth-child(8),  /* Utilidad LPS */
#auditoria-view .table td:nth-child(9) { /* Precio Venta */
    text-align: right !important;
}

/* ========================================
   MEJORAS DE UX/UI PARA LAPTOPS
   ======================================== */

/* 1. ALTERNANCIA DE FILAS (Zebra Striping) - Mejora legibilidad */
#auditoria-view .table tbody tr:nth-child(even) {
    background-color: rgba(0, 0, 0, 0.02);
}

#auditoria-view .table tbody tr:nth-child(odd) {
    background-color: transparent;
}

/* 2. MEJORA DE CONTRASTE - Valores monetarios más visibles */
#auditoria-view .table td:nth-child(6),
#auditoria-view .table td:nth-child(7),
#auditoria-view .table td:nth-child(8),
#auditoria-view .table td:nth-child(9) {
    color: #1a1a1a;
    font-weight: 600;
    background: rgba(16, 185, 129, 0.04); /* Verde muy sutil */
}

/* 3. HEADERS CON MEJOR CONTRASTE */
#auditoria-view .table th {
    color: #2c3e50;
    background: rgba(99, 102, 241, 0.08);
}

/* 4. HOVER MEJORADO - Borde lateral + background */
#auditoria-view .table tbody tr:hover {
    background-color: rgba(99, 102, 241, 0.08) !important;
    box-shadow: inset 3px 0 0 #6366f1;
    cursor: pointer;
    transition: all 0.15s ease-in-out;
}

/* 5. TOOLTIPS PARA TEXTOS TRUNCADOS */
#auditoria-view .table td[title] {
    cursor: help;
    position: relative;
}

/* 6. INDICADORES VISUALES DE ESTADO - Iconos en badges */
#auditoria-view .badge.bg-warning::before {
    content: "⏳ ";
    margin-right: 2px;
}

#auditoria-view .badge.bg-success::before {
    content: "✓ ";
    margin-right: 2px;
}

#auditoria-view .badge.bg-danger::before {
    content: "⚠ ";
    margin-right: 2px;
}

#auditoria-view .badge.bg-info::before {
    content: "ℹ ";
    margin-right: 2px;
}

#auditoria-view .badge.bg-secondary::before {
    content: "○ ";
    margin-right: 2px;
}

/* ========================================
   16.5 MODAL DE COTIZACIÓN PARA REVISIÓN - OPTIMIZADO
   ======================================== */

/* Modal más grande en laptops */
@media (min-width: 769px) {
    #auditoria-quotation-preview-modal .modal-dialog {
        max-width: 95% !important;
        margin: 1rem auto;
    }

    #auditoria-quotation-preview-modal .modal-body {
        padding: 1.25rem;
        font-size: 0.85rem;
    }

    #auditoria-quotation-preview-modal .card {
        margin-bottom: 1rem;
    }

    #auditoria-quotation-preview-modal .card-header {
        padding: 0.65rem 1rem;
        font-size: 0.9rem;
    }

    #auditoria-quotation-preview-modal .card-body {
        padding: 0.9rem;
        font-size: 0.82rem;
    }

    #auditoria-quotation-preview-modal .card-body p {
        margin-bottom: 0.5rem;
        line-height: 1.5;
    }

    /* Tabla de artículos más compacta */
    #auditoria-quotation-preview-modal .table {
        font-size: 0.78rem;
    }

    #auditoria-quotation-preview-modal .table th,
    #auditoria-quotation-preview-modal .table td {
        padding: 0.4rem 0.5rem;
    }

    /* Timeline de notas más compacto */
    #auditoria-quotation-preview-modal .timeline-item {
        padding: 0.75rem !important;
        font-size: 0.82rem;
    }

    /* Badges más pequeños */
    #auditoria-quotation-preview-modal .badge {
        font-size: 0.75rem;
        padding: 0.3em 0.6em;
    }

    /* Formularios compactos */
    #auditoria-quotation-preview-modal .form-control,
    #auditoria-quotation-preview-modal .form-select,
    #auditoria-quotation-preview-modal textarea {
        padding: 0.45rem 0.65rem;
        font-size: 0.82rem;
    }

    #auditoria-quotation-preview-modal .form-label {
        font-size: 0.8rem;
        margin-bottom: 0.35rem;
    }
}

/* Optimización específica para 1366x768 */
@media (min-width: 769px) and (max-width: 1366px) {
    #auditoria-quotation-preview-modal .modal-body {
        padding: 1rem;
        font-size: 0.8rem;
    }

    #auditoria-quotation-preview-modal .card-body {
        padding: 0.75rem;
        font-size: 0.78rem;
    }

    #auditoria-quotation-preview-modal .table {
        font-size: 0.72rem;
    }

    #auditoria-quotation-preview-modal .table th,
    #auditoria-quotation-preview-modal .table td {
        padding: 0.35rem 0.45rem;
    }
}

/* Optimización para laptops pequeños 1920x1080 (14-15" solamente) */
@media (min-width: 1367px) and (max-width: 1800px) {
    #auditoria-quotation-preview-modal .modal-dialog {
        max-width: 90% !important;
    }

    #auditoria-quotation-preview-modal .modal-body {
        padding: 1.5rem;
        font-size: 0.88rem;
    }

    #auditoria-quotation-preview-modal .card-body {
        padding: 1rem;
        font-size: 0.85rem;
    }

    #auditoria-quotation-preview-modal .table {
        font-size: 0.8rem;
    }
}

/* ========================================
   17. VISTA DE AUDITORÍA - LAPTOPS 1366x768 (14")
   Simula zoom 80% - elementos compactos, SIN scroll horizontal
   ======================================== */

@media (min-width: 769px) and (max-width: 1366px) {

    /* Título compacto */
    #auditoria-view .page-title {
        font-size: 1.3rem;
        margin-bottom: 0.7rem;
    }

    #auditoria-view .glass-card {
        padding: 0.65rem;
        margin-bottom: 0.8rem;
    }

    /* Tabla compacta - SIN scroll horizontal */
    #auditoria-view .table-responsive {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        margin-bottom: 0.9rem;
    }

    #auditoria-view .table {
        font-size: 0.68rem;
        table-layout: auto;
        min-width: 100%; /* Ajustar al ancho disponible */
        width: 100%;
    }

    #auditoria-view .table th,
    #auditoria-view .table td {
        padding: 0.32rem 0.22rem !important;
        white-space: nowrap;
        vertical-align: middle;
        line-height: 1.25;
    }

    /* Headers compactos */
    #auditoria-view .table th {
        font-size: 0.69rem;
        font-weight: 600;
        padding: 0.36rem 0.24rem !important;
    }

    /* Columnas que pueden tener texto más largo */
    #auditoria-view .table th:nth-child(3), /* Proyecto */
    #auditoria-view .table td:nth-child(3) {
        max-width: 120px;
        white-space: normal;
        word-wrap: break-word;
    }

    #auditoria-view .table th:nth-child(4), /* Cliente */
    #auditoria-view .table td:nth-child(4) {
        max-width: 105px;
        white-space: normal;
        word-wrap: break-word;
    }

    #auditoria-view .table th:nth-child(12), /* Notas */
    #auditoria-view .table td:nth-child(12) {
        max-width: 85px;
        white-space: normal;
    }

    /* Valores monetarios */
    #auditoria-view .table td:nth-child(6),
    #auditoria-view .table td:nth-child(7),
    #auditoria-view .table td:nth-child(8),
    #auditoria-view .table td:nth-child(9) {
        font-size: 0.68rem !important;
        font-weight: 500;
    }

    /* Badges compactos */
    #auditoria-view .badge {
        font-size: 0.57rem !important;
        padding: 0.22em 0.38em !important;
        white-space: nowrap;
        line-height: 1.15;
    }

    #auditoria-view .badge.fs-6 {
        font-size: 0.57rem !important;
        padding: 0.24em 0.4em !important;
    }

    /* Botones compactos */
    #auditoria-view .btn-sm {
        padding: 0.25rem 0.32rem;
        font-size: 0.62rem;
        line-height: 1.15;
        white-space: nowrap;
    }

    #auditoria-view .btn-sm i {
        font-size: 0.65rem;
        margin-right: 0.12rem;
    }

    /* Botones en columnas Editar y Acciones */
    #auditoria-view .table td:nth-child(13) .btn-sm,
    #auditoria-view .table td:nth-child(14) .btn-sm {
        padding: 0.22rem 0.3rem;
        font-size: 0.6rem;
        display: block;
        width: 100%;
        margin-bottom: 0.18rem;
    }

    #auditoria-view .table td:nth-child(14) .btn-sm:last-child {
        margin-bottom: 0;
    }

    /* Contenedor de botones verticales */
    #auditoria-view .table td:nth-child(14) .btn-group-vertical {
        display: flex !important;
        flex-direction: column !important;
        gap: 0.18rem !important;
        width: 100%;
    }

    #auditoria-view .table td:nth-child(14) .btn-group-vertical .btn {
        margin: 0 !important;
        width: 100%;
    }

    /* Filtros compactos */
    #auditoria-view .form-select,
    #auditoria-view .form-control {
        padding: 0.36rem 0.52rem;
        font-size: 0.76rem;
        min-height: 34px;
    }

    #auditoria-view .row.mb-4 {
        margin-bottom: 0.8rem !important;
    }

    /* Paginación compacta */
    #auditoria-pagination-container .pagination {
        margin-bottom: 0;
    }

    #auditoria-pagination-container .page-link {
        padding: 0.32rem 0.48rem;
        font-size: 0.72rem;
    }

    /* Scroll personalizado */
    #auditoria-view .table-responsive::-webkit-scrollbar {
        height: 7px;
    }

    #auditoria-view .table-responsive::-webkit-scrollbar-track {
        background: rgba(0, 0, 0, 0.05);
        border-radius: 3px;
    }

    #auditoria-view .table-responsive::-webkit-scrollbar-thumb {
        background: rgba(99, 102, 241, 0.32);
        border-radius: 3px;
    }

    #auditoria-view .table-responsive::-webkit-scrollbar-thumb:hover {
        background: rgba(99, 102, 241, 0.48);
    }

    /* Hover en filas */
    #auditoria-view .table tbody tr:hover {
        background-color: rgba(var(--bs-primary-rgb), 0.035);
        transition: background-color 0.15s ease-in-out;
    }

    /* Modal compacto */
    #auditoriaReviewModal .modal-dialog {
        max-width: 800px;
    }

    #auditoriaReviewModal .modal-body {
        font-size: 0.8rem;
        padding: 0.95rem;
    }

    #auditoriaReviewModal .glass-card {
        padding: 0.75rem;
    }

    #auditoriaReviewModal .form-label {
        font-size: 0.76rem;
        margin-bottom: 0.32rem;
    }

    #auditoriaReviewModal .form-control,
    #auditoriaReviewModal textarea {
        font-size: 0.78rem;
        padding: 0.36rem 0.52rem;
    }
}

/* ========================================
   18. OPTIMIZACIÓN PARA LAPTOPS PEQUEÑOS 1920x1080 (14-15")
   Simula zoom 80% - elementos más pequeños, cabe más contenido
   SOLO para laptops pequeños, NO para monitores de escritorio
   ======================================== */

@media (min-width: 1367px) and (max-width: 1800px) {

    /* Título y contenedores compactos */
    #auditoria-view .page-title {
        font-size: 1.35rem;
        margin-bottom: 0.8rem;
    }

    #auditoria-view .glass-card {
        padding: 0.7rem;
        margin-bottom: 0.9rem;
    }

    /* Tabla compacta - SIN scroll horizontal */
    #auditoria-view .table-responsive {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        margin-bottom: 0.9rem;
    }

    #auditoria-view .table {
        font-size: 0.72rem;
        min-width: 100%; /* Ajustar al ancho disponible */
        width: 100%;
        table-layout: auto;
    }

    #auditoria-view .table th,
    #auditoria-view .table td {
        padding: 0.35rem 0.25rem !important;
        line-height: 1.3;
        white-space: nowrap;
    }

    /* Headers compactos */
    #auditoria-view .table th {
        font-size: 0.73rem;
        font-weight: 600;
        padding: 0.38rem 0.28rem !important;
    }

    /* Badges compactos */
    #auditoria-view .badge {
        font-size: 0.6rem !important;
        padding: 0.25em 0.45em !important;
        line-height: 1.2;
    }

    #auditoria-view .badge.fs-6 {
        font-size: 0.6rem !important;
        padding: 0.27em 0.48em !important;
    }

    /* Valores monetarios compactos */
    #auditoria-view .table td:nth-child(6),
    #auditoria-view .table td:nth-child(7),
    #auditoria-view .table td:nth-child(8),
    #auditoria-view .table td:nth-child(9) {
        font-size: 0.72rem !important;
        font-weight: 500;
    }

    /* Columnas con anchos optimizados - NO usar width fijo */
    #auditoria-view .table th:nth-child(3), /* Proyecto */
    #auditoria-view .table td:nth-child(3) {
        max-width: 130px;
        white-space: normal;
        word-wrap: break-word;
    }

    #auditoria-view .table th:nth-child(4), /* Cliente */
    #auditoria-view .table td:nth-child(4) {
        max-width: 110px;
        white-space: normal;
        word-wrap: break-word;
    }

    #auditoria-view .table th:nth-child(12), /* Notas */
    #auditoria-view .table td:nth-child(12) {
        max-width: 90px;
        white-space: normal;
    }

    /* Botones compactos */
    #auditoria-view .btn-sm {
        padding: 0.28rem 0.38rem;
        font-size: 0.65rem;
        line-height: 1.2;
    }

    #auditoria-view .btn-sm i {
        font-size: 0.68rem;
        margin-right: 0.15rem;
    }

    /* Botones en columnas de acción */
    #auditoria-view .table td:nth-child(13) .btn-sm,
    #auditoria-view .table td:nth-child(14) .btn-sm {
        padding: 0.25rem 0.35rem;
        font-size: 0.63rem;
        margin-bottom: 0.2rem;
    }

    /* Filtros compactos */
    #auditoria-view .form-select,
    #auditoria-view .form-control {
        padding: 0.38rem 0.55rem;
        font-size: 0.78rem;
        min-height: 36px;
    }

    #auditoria-view .row.mb-4 {
        margin-bottom: 0.85rem !important;
    }

    /* Paginación compacta */
    #auditoria-pagination-container .page-link {
        padding: 0.38rem 0.55rem;
        font-size: 0.75rem;
    }

    /* Scroll delgado */
    #auditoria-view .table-responsive::-webkit-scrollbar {
        height: 8px;
    }

    #auditoria-view .table-responsive::-webkit-scrollbar-thumb {
        background: rgba(99, 102, 241, 0.35);
    }

    /* Modal compacto */
    #auditoriaReviewModal .modal-dialog {
        max-width: 850px;
    }

    #auditoriaReviewModal .modal-body {
        font-size: 0.82rem;
        padding: 1rem;
    }

    #auditoriaReviewModal .glass-card {
        padding: 0.8rem;
    }

    #auditoriaReviewModal .form-label {
        font-size: 0.78rem;
        margin-bottom: 0.35rem;
    }

    #auditoriaReviewModal .form-control,
    #auditoriaReviewModal textarea {
        font-size: 0.8rem;
        padding: 0.38rem 0.55rem;
    }

    /* Hover en filas */
    #auditoria-view .table tbody tr:hover {
        background-color: rgba(var(--bs-primary-rgb), 0.04);
        transition: background-color 0.15s ease-in-out;
    }
}

/* ========================================
   19. PANTALLAS GRANDES (DESKTOP >= 1801px)
   Elementos más grandes para monitores grandes, 2K, 4K
   Incluye monitores de 24"+, pantallas 1920x1080 en monitores grandes,
   pantallas QHD (2560x1440), UHD (3840x2160)
   ======================================== */

@media (min-width: 1801px) {

    #auditoria-view .page-title {
        font-size: 1.8rem;
        margin-bottom: 1rem;
    }

    #auditoria-view .glass-card {
        padding: 1rem;
    }

    #auditoria-view .table {
        font-size: 0.85rem;
        min-width: auto;
        width: 100%;
    }

    #auditoria-view .table th,
    #auditoria-view .table td {
        padding: 0.5rem 0.4rem !important;
        line-height: 1.4;
    }

    #auditoria-view .table th {
        font-size: 0.85rem;
        font-weight: 600;
    }

    /* Badges más grandes y legibles */
    #auditoria-view .badge {
        font-size: 0.7rem !important;
        padding: 0.3em 0.6em !important;
        line-height: 1.3;
    }

    #auditoria-view .badge.fs-6 {
        font-size: 0.7rem !important;
        padding: 0.35em 0.65em !important;
    }

    /* Botones más grandes */
    #auditoria-view .btn-sm {
        padding: 0.35rem 0.5rem;
        font-size: 0.75rem;
        line-height: 1.4;
    }

    #auditoria-view .btn-sm i {
        font-size: 0.8rem;
        margin-right: 0.25rem;
    }

    /* Valores monetarios más grandes */
    #auditoria-view .table td:nth-child(6),
    #auditoria-view .table td:nth-child(7),
    #auditoria-view .table td:nth-child(8),
    #auditoria-view .table td:nth-child(9) {
        font-size: 0.9rem !important;
        font-weight: 500;
    }

    /* Filtros más espaciados */
    #auditoria-view .form-select,
    #auditoria-view .form-control {
        padding: 0.5rem 0.75rem;
        font-size: 0.9rem;
        min-height: 42px;
    }

    #auditoria-view .row.mb-4 {
        margin-bottom: 1.25rem !important;
    }

    /* Paginación más grande */
    #auditoria-pagination-container .page-link {
        padding: 0.5rem 0.75rem;
        font-size: 0.9rem;
    }

    /* Modal más espaciado */
    #auditoriaReviewModal .modal-body {
        font-size: 0.95rem;
        padding: 1.5rem;
    }

    #auditoriaReviewModal .glass-card {
        padding: 1rem;
    }

    #auditoriaReviewModal .form-label {
        font-size: 0.9rem;
        margin-bottom: 0.5rem;
    }

    #auditoriaReviewModal .form-control,
    #auditoriaReviewModal textarea {
        font-size: 0.9rem;
        padding: 0.5rem 0.75rem;
    }
}