/* ========================================
   VARIABLES GLOBALES
   ======================================== */
:root {
    --table-primary: #0d6efd;
    --table-secondary: #6c757d;
    --table-success: #198754;
    --table-danger: #dc3545;
    
    /* Sincronizado con el gris de tu menú/navbar */
    --table-header-bg: #f4f6f8;
    --table-header-text: #4a5568;
    --table-row-odd: #ffffff;
    --table-row-even: #f9fafb;
    --table-row-hover: #f0f7ff;
    --table-border: #dee2e6;
    
    --border-radius: 10px;
    --shadow-lg: 0 4px 20px rgba(0, 0, 0, 0.05);
    --transition-speed: 0.2s;
}

/* ========================================
   CONTENEDOR DE LA TABLA
   ======================================== */
.table-container {
    background: #ffffff;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-lg);
    padding: 1.25rem;
    margin: 1rem 0;
    border: 1px solid var(--table-border);
    width: 100%;
}

.table-header-section {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

.table-title {
    font-size: 1.4rem;
    font-weight: 700;
    color: #2c3e50;
    margin: 0;
}

/* ========================================
   ESTILOS DE LA TABLA (DataTables)
   ======================================== */
.table-responsive {
    border-radius: var(--border-radius);
    overflow: hidden;
}

/* Forzar reset de celdas de Bootstrap */
#tablaInfoMaestra.table > :not(caption) > * > * {
    background-color: transparent !important;
    box-shadow: none !important;
}

/* ENCABEZADO - Gris Menú */
#tablaInfoMaestra thead th {
    background-color: var(--table-header-bg) !important;
    color: var(--table-header-text) !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    font-size: 0.72rem !important;
    letter-spacing: 0.05em;
    padding: 12px 10px !important;
    border-bottom: 1px solid var(--table-border) !important;
    border-top: none !important;
    white-space: nowrap;
}

/* CUERPO Y FILAS CEBRA */
#tablaInfoMaestra tbody tr {
    transition: all var(--transition-speed);
}

#tablaInfoMaestra tbody tr:nth-child(even) {
    background-color: var(--table-row-even) !important
}

/* HOVER AZULADO */
#tablaInfoMaestra tbody tr:hover {
    background-color: var(--table-row-hover) !important;
    transition: background-color 0.2s ease;
    box-shadow: inset 4px 0 0 var(--table-primary) !important;
}

#tablaInfoMaestra tbody td {
    padding: 10px 10px !important;
    vertical-align: middle !important;
    font-size: 0.88rem;
    color: #4a5568;
    border-bottom: 1px solid var(--table-border);
    font-weight: 400;
}

/* ========================================
   SISTEMA DE DESPLIEGUE (+) RESPONSIVE
   ======================================== */
/* Botón Plus (+) */
table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control:before {
    background-color: #cbd5e0 !important; /* Gris suave para el botón + */
    font-family: "FontAwesome" !important;
    content: "\f067" !important;
    border: none !important;
    border-radius: 4px !important;
    width: 18px !important;
    height: 18px !important;
    font-size: 8px !important;
    box-shadow: none !important;
}

/* Botón Minus (-) cuando está abierto */
table.dataTable > tbody > tr.child ul.dtr-details {
    padding: 1rem;
    background: #fcfcfc;
    font-size: 0.78rem;
}

/* Estilo de los detalles que caen (Child Rows) */
table.dataTable > tbody > tr.child ul.dtr-details {
    width: 100%;
    padding: 15px;
    list-style: none;
    background: #fdfdfd;
}

table.dataTable > tbody > tr.child li {
    border-bottom: 1px solid #eee;
    padding: 8px 0;
    display: flex;
    justify-content: space-between;
}

table.dataTable > tbody > tr.child span.dtr-title {
    font-weight: 700;
    color: var(--table-header-text);
}

/* ========================================
   BOTONES DE ACCIÓN (PDF)
   ======================================== */
.table-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 5px 8px;
    border-radius: 5px;
    font-size: 11px;
    font-weight: 600;
    text-decoration: none;
    margin: 0 1px;
    transition: transform 0.1s ease;
}
.table-action-btn:hover {
    opacity: 0.95;
}

.btn-view { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); }
.btn-edit { background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); }

/* ========================================
   PAGINACIÓN DATATABLES
   ======================================== */
.dataTables_wrapper .dataTables_paginate .paginate_button {
    font-size: 0.75rem !important;
    border-radius: 5px !important;
    border: 1px solid transparent !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current {
    background: #edf2f7 !important;
    color: #2d3748 !important;
    border: 1px solid #cbd5e0 !important;
}

/* ========================================
   AJUSTES RESPONSIVE FINALES
   ======================================== */
@media (max-width: 768px) {
    .table-container {
        padding: 0.75rem;
    }
    
    #tablaInfoMaestra thead th {
        font-size: 0.75rem !important;
        padding: 0.6rem !important;
    }
}



/* Ajuste general de la fuente para la tabla de estado de cuenta */
/* 1. Fuente y Contenedor Principal */
    #tablaEstadoCuenta {
        font-family: 'Inter', 'Segoe UI', Helvetica, Arial, sans-serif;
        font-size: 12.5px; /* Un poco más pequeña para dar ese look técnico */
        border-collapse: separate;
        border-spacing: 0;
    }

    /* 2. Encabezados (Igual a la imagen: grises, pequeños y bold) */
    #tablaEstadoCuenta thead th {
        background-color: #f8f9fa;
        color: #6c757d; /* Gris de la imagen */
        font-size: 11px;
        font-weight: 700;
        text-transform: uppercase;
        padding: 10px 5px;
        border-bottom: 1px solid #dee2e6;
        vertical-align: middle;
    }

    /* 3. Celdas de Datos (Más compactas) */
    #tablaEstadoCuenta tbody td {
        padding: 8px 5px; /* Padding reducido como en la captura */
        border-bottom: 1px solid #edf0f2;
        color: #444;
        white-space: nowrap; /* Evita que los números se rompan en dos líneas */
    }

    /* 4. Estilo de los Números (Alineación perfecta) */
    #tablaEstadoCuenta tbody td:not(:nth-child(3)) {
        font-variant-numeric: tabular-nums; /* Números alineados verticalmente */
        letter-spacing: -0.2px;
    }

    /* 5. Badge de Código (Gris claro con borde) */
    .badge.bg-light {
        background-color: #f1f3f5 !important;
        color: #495057 !important;
        font-size: 10.5px;
        padding: 4px 8px;
        border-radius: 4px;
        border: 1px solid #ddd;
    }

    /* 6. Icono PDF (Azul nítido) */
    .text-primary {
        color: #0061f2 !important; /* Azul más vibrante como el de botones de búsqueda */
        font-size: 16px;
    }

    /* 7. Columna de Cliente (Bold como en la imagen) */
    .fw-bold.text-dark {
        color: #2d3436 !important;
        font-weight: 600 !important;
    }

    /* 8. Efecto Hover (Sutil) */
    #tablaEstadoCuenta tbody tr:hover {
        background-color: #f1f8ff !important;
        transition: 0.1s;
    }