/**
 * ============================================
 * ESTILOS PERSONALIZADOS PARA DATATABLES
 * SIGARN — Idéntico a SALP, colores SIGARN
 * ============================================
 */

/* ============================================
   BOTÓN PERSONALIZADO PARA CONTROL RESPONSIVE
   ============================================ */

/* Celda del control - Layout vertical (botón arriba, contenido abajo) */
table.dataTable.dtr-inline.collapsed>tbody>tr>td.dtr-control,
table.dataTable.dtr-inline.collapsed>tbody>tr>th.dtr-control {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    padding: 8px !important;
    vertical-align: top !important;
}

/* Botón VER MAS - btn-primary btn-block */
table.dataTable.dtr-inline.collapsed>tbody>tr>td.dtr-control:before,
table.dataTable.dtr-inline.collapsed>tbody>tr>th.dtr-control:before {
    content: 'VER MAS' !important;
    font-family: 'Lexend', sans-serif !important;
    display: block !important;
    width: 100% !important;
    padding: 0.25rem 0.5rem !important;
    font-size: 0.875rem !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
    text-align: center !important;
    white-space: nowrap !important;
    letter-spacing: 0.5px !important;
    border: none !important;
    border-radius: 0.2rem !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    position: relative !important;
    order: -1 !important;
    color: #fff !important;
    background-color: var(--color-principal) !important;
}

/* Hover */
table.dataTable.dtr-inline.collapsed>tbody>tr>td.dtr-control:hover:before,
table.dataTable.dtr-inline.collapsed>tbody>tr>th.dtr-control:hover:before {
    background-color: #c41720 !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15) !important;
    transform: translateY(-1px) !important;
}

/* Fila expandida - Botón CERRAR */
table.dataTable.dtr-inline.collapsed>tbody>tr.parent>td.dtr-control:before,
table.dataTable.dtr-inline.collapsed>tbody>tr.parent>th.dtr-control:before {
    content: 'CERRAR' !important;
    display: block !important;
    width: 100% !important;
    padding: 0.25rem 0.5rem !important;
    font-size: 0.875rem !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
    text-align: center !important;
    white-space: nowrap !important;
    border: none !important;
    border-radius: 0.2rem !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
    cursor: pointer !important;
    position: relative !important;
    order: -1 !important;
    color: #fff !important;
    background-color: var(--color-principal) !important;
}

/* Contenido de la celda - no dispara expansión */
table.dataTable.dtr-inline.collapsed>tbody>tr>td.dtr-control>*:not(:before),
table.dataTable.dtr-inline.collapsed>tbody>tr>td.dtr-control .btn,
table.dataTable.dtr-inline.collapsed>tbody>tr>td.dtr-control .badge {
    pointer-events: none !important;
    order: 1 !important;
}

/* Solo el botón :before debe expandir */
table.dataTable.dtr-inline.collapsed>tbody>tr>td.dtr-control {
    cursor: default !important;
}
table.dataTable.dtr-inline.collapsed>tbody>tr>td.dtr-control:before {
    cursor: pointer !important;
    pointer-events: auto !important;
}

/* ============================================
   CONTENEDOR DE DETALLES EXPANDIDOS
   ============================================ */

/* Contenedor principal de detalles */
.detalles-responsive {
    background-color: #f8f9fa;
    padding: 15px;
    border-left: 3px solid var(--color-principal);
    margin: 10px 0;
    border-radius: 4px;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* Fila de detalles (child row) */
table.dataTable.dtr-inline.collapsed>tbody>tr>td.child,
table.dataTable.dtr-inline.collapsed>tbody>tr>th.child,
table.dataTable.dtr-inline.collapsed>tbody>tr.child td {
    padding: 0.75rem !important;
    background-color: #f8f9fa;
}

/* Contenedor de campos dentro de child row */
table.dataTable tr.child div.row {
    margin: 0.5rem 0;
}

/* ============================================
   CAMPOS INDIVIDUALES EN DETALLES
   ============================================ */

/* Cada campo individual */
.campo-responsive {
    padding: 10px 0;
    border-bottom: 1px solid #e9ecef;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
}

.campo-responsive:last-child {
    border-bottom: none;
}

/* Label del campo */
.label-responsive,
.campo-responsive strong {
    color: #495057;
    font-weight: 600;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    min-width: 120px;
    margin-right: 10px;
}

/* Valor del campo */
.valor-responsive,
.campo-responsive span {
    color: #212529;
    font-size: 0.95rem;
    flex: 1;
}

/* Campos con botones o badges */
.valor-responsive .btn,
.campo-responsive .btn {
    margin: 2px;
}

.valor-responsive .badge,
.campo-responsive .badge {
    margin: 2px;
}

/* ============================================
   RESPONSIVE GRID LAYOUT
   ============================================ */

/* Layout de grid para campos en 2 columnas */
table.dataTable tr.child div.row>div {
    padding: 0.5rem;
    border-bottom: 1px solid #e9ecef;
}

table.dataTable tr.child div.row>div:last-child {
    border-bottom: none;
}

/* Ajustes para columnas */
.col-sm-6.campo-responsive,
.col-md-4.campo-responsive {
    padding: 10px;
}

/* ============================================
   CONTROLES DE DATATABLES
   ============================================ */

/* Selector de cantidad de registros */
.dataTables_length select {
    margin: 0 5px;
    padding: 4px 8px;
}

/* Campo de búsqueda */
.dataTables_filter input {
    margin-left: 5px;
    padding: 4px 8px;
    border-radius: 4px;
    border: 1px solid #ced4da;
}

/* Info de registros */
.dataTables_info {
    padding-top: 8px;
    font-size: 0.9rem;
}

/* Paginación */
.dataTables_paginate {
    padding-top: 8px;
}

/* ============================================
   RESPONSIVE - MÓVIL
   ============================================ */

@media (max-width: 768px) {

    /* Ocultar indicadores en móvil si se auto-expande */
    table.dataTable.dtr-inline.collapsed.auto-expand>tbody>tr>td.dtr-control:before,
    table.dataTable.dtr-inline.collapsed.auto-expand>tbody>tr>th.dtr-control:before {
        content: '';
        display: none;
    }

    /* Ajustar padding en móvil */
    .detalles-responsive {
        padding: 10px;
    }

    .campo-responsive {
        padding: 8px 0;
        flex-direction: column;
    }

    .label-responsive,
    .campo-responsive strong {
        min-width: auto;
        margin-bottom: 4px;
        font-size: 0.8rem;
    }

    .valor-responsive,
    .campo-responsive span {
        font-size: 0.9rem;
        width: 100%;
    }

    /* Controles centrados en móvil */
    .dataTables_length,
    .dataTables_filter {
        text-align: center;
        margin-bottom: 10px;
    }

    .dataTables_filter input {
        width: 100%;
        max-width: 300px;
    }

    /* Paginación centrada */
    .dataTables_paginate {
        text-align: center;
        margin-top: 15px;
    }

    .dataTables_paginate .pagination {
        justify-content: center;
        flex-wrap: wrap;
    }

    /* Info centrada */
    .dataTables_info {
        text-align: center;
        margin: 10px 0;
        font-size: 0.85rem;
    }
}

/* ============================================
   TABLETS
   ============================================ */

@media (min-width: 577px) and (max-width: 991px) {
    .campo-responsive {
        display: flex;
        flex-direction: row;
    }

    .label-responsive,
    .campo-responsive strong {
        min-width: 100px;
    }
}

/* ============================================
   ANIMACIONES
   ============================================ */

/* Transición suave al expandir/contraer */
table.dataTable tbody tr {
    transition: background-color 0.2s ease;
}

.detalles-responsive {
    animation: slideDown 0.3s ease-out;
}

@keyframes slideDown {
    from {
        opacity: 0;
        max-height: 0;
        padding-top: 0;
        padding-bottom: 0;
    }

    to {
        opacity: 1;
        max-height: 500px;
        padding-top: 15px;
        padding-bottom: 15px;
    }
}

/* ============================================
   CELDAS COMPACTAS — GLOBAL
   ============================================ */

/* Reducir padding en todas las celdas de DataTables */
table.dataTable thead th,
table.dataTable thead td,
table.dataTable tbody th,
table.dataTable tbody td,
table.dataTable tfoot th,
table.dataTable tfoot td,
.table th,
.table td {
    padding: 2px 6px !important;
    vertical-align: middle !important;
}

/* ============================================
   HOVER CON COLOR PRINCIPAL
   ============================================ */

.table-hover tbody tr:hover {
    background-color: rgba(237, 27, 36, 0.1) !important;
}

/* ============================================
   COMPATIBILIDAD CON ADMINLTE 3
   ============================================ */

/* Ajustes para card-body */
.card-body .dataTables_wrapper {
    padding: 0;
}

/* Ajustes para tablas dentro de cards */
.card .table-responsive>.dataTables_wrapper {
    padding: 0;
}

/* Encabezados de tabla con color personalizado */
.card-body table th {
    font-weight: 600;
}

/* ============================================
   MEJORAS VISUALES ADICIONALES
   ============================================ */

/* Separador visual entre secciones de detalles */
.detalles-responsive+.detalles-responsive {
    margin-top: 15px;
}

/* Bordes suaves en campos */
.campo-responsive {
    border-radius: 2px;
}

/* Highlight de campos al hacer hover */
.campo-responsive:hover {
    background-color: rgba(237, 27, 36, 0.05);
}

/* Mejorar legibilidad de badges en detalles */
.valor-responsive .badge,
.campo-responsive .badge {
    font-size: 0.85rem;
    padding: 0.35rem 0.6rem;
}

/* Botones más compactos en detalles expandidos */
.valor-responsive .btn-sm,
.campo-responsive .btn-sm {
    padding: 0.25rem 0.5rem;
    font-size: 0.8rem;
}

/* ============================================
   ESTILOS PARA ESTADOS ESPECIALES
   ============================================ */

/* Sin datos */
.dataTables_empty {
    text-align: center;
    padding: 2rem !important;
    color: #6c757d;
    font-style: italic;
}

/* Procesando */
.dataTables_processing {
    background-color: rgba(255, 255, 255, 0.9) !important;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* ============================================
   FIN DE ARCHIVO
   ============================================ */