/*----------------------------------------
        Data Tables (Bootstrap Compatible)
------------------------------------------*/

div.dt-container .dt-paging .dt-paging-button.disabled, div.dt-container .dt-paging .dt-paging-button.disabled:hover, div.dt-container .dt-paging .dt-paging-button.disabled:active {
    color: #c2bebe;
    background-color: #f7f7f7;
    padding: .5rem;
    border-radius: var(--rounded-8px);
    font-size: 16px;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
}


div.dt-container .dt-length, div.dt-container .dt-search, div.dt-container .dt-info, div.dt-container .dt-processing, div.dt-container .dt-paging {
    color: rgb(0 0 0 / 0.3);
    font-size: 0.8rem;
    font-weight: 600 !important;
}
div.dt-container select.dt-input {
    color: #c2bebe;
    background-color: #f7f7f7;
    padding: .5rem;
    border-radius: var(--rounded-8px);
    font-size: 12px;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
    margin-right:.5rem;
    margin-top:10px;
}
table.dataTable.display > tbody > tr {
    font-weight: normal !important;
    text-align: left !important;
    font-size: var(--font-h4);
    padding-right: .5rem !important;
    padding-left: .5rem !important;
    
}

    table.dataTable.display > tbody > tr:nth-child(odd) {
        background-color: var(--light-gray);
    }

.dt-column-title {
    font-family: 'Inter', sans-serif;
    --bs-text-opacity: 1;
    color: var(--bs-secondary-color) !important;
}
table.dataTable.display > tbody tr > .sorting_1 {
    box-shadow: none;
}
table.dataTable.display > tbody > tr:nth-child(odd) > .sorting_1 {
    box-shadow: none;
}
.dataTables_length label {
    font-family: Arial, sans-serif; /* Cambia la fuente */
    font-size: 14px; /* Ajusta el tamaño si es necesario */
    font-weight: bold; /* Opcional: negrita */
    color: red !important; /* Opcional: color de texto */
}

table.dataTable thead,
table.dataTable tbody,
.dt-scroll .dt-scroll-body,
table.dataTable th,
table.dataTable tr,
table.dataTable td {
    border: none !important;
}


table.dataTable:not(.wrap-table){
    white-space: nowrap;
}

/* Estilo para el ícono de lupa */
.search-icon {
    cursor: pointer;
    margin-left: 5px;
    color: #555;
}

/* Ocultar inputs inicialmente */
thead input[type="text"] {
    display: none;
    width: 90%;
    box-sizing: border-box;
    padding: 4px;
    font-size: 0.9em;
}

    /* Mostrar input cuando tiene la clase "active" */
    thead input.active {
        display: inline-block;
    }