/* Estilos para DataTables con Bootstrap 4 */
@import url('https://fonts.googleapis.com/css2?family=Anton&family=Archivo:ital,wght@0,100..900;1,100..900&display=swap');


.dataTables_filter {
    float: left !important;
    margin-right: 20px; /* Espacio entre el filtro y el selector de longitud */
}

.dataTables_length {
    float: left !important;
    margin-right: 20px; /* Espacio entre el selector de longitud y la paginación */
}

.dataTables_paginate {
    float: right !important;
}

.dataTables_info {
    float: left !important;
}

.dataTables_wrapper {
    position: relative;
}

/* Ajustes adicionales para alinear correctamente los elementos dentro del contenedor DataTables */
div.dataTables_wrapper div.dataTables_filter {
    text-align: left !important;
}

div.dataTables_wrapper div.dataTables_length {
    text-align: left !important;
    /*float: right;*/
    /*margin-bottom: 0px;*/ /* Espacio inferior */
}

div.dataTables_wrapper div.dataTables_paginate {
    text-align: right !important;
    /*margin-top: 30px !important;
    float: none;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 3;*/
}

div.dataTables_wrapper div.dataTables_info {
    text-align: right !important;
    /*display: block;
    text-align: center;
    margin-top: 20px;
    margin-bottom: 15px;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    color: #6c757d;
    font-size: 14px;*/
}


/* Personalización de la tabla DataTables */


.dataTables_wrapper .dataTables_filter input {
    padding: 8px 12px; /* Añade padding al input de búsqueda */
    border: 1px solid #ced4da; /* Borde del input */
    border-radius: 4px; /* Borde redondeado */
    background-color: #f2f2f2; /* Color de fondo del input */
    color: #495057; /* Color del texto del input */
    font-size: 14px; /* Tamaño de fuente del input */
}


.dataTables_wrapper .dataTables_paginate .paginate_button {
    color: white; /* Color del texto del paginador */
    /*background: black;*/
    /*border: 1px solid #007bff;*/ /* Borde de los botones del paginador */
    /*padding: 8px 12px;*/ /* Espaciado interno de los botones del paginador */
    margin: 0 2px; /* Margen entre los botones del paginador */
    cursor: pointer; /* Cambia el cursor al pasar por encima */
    font-size: 14px; /* Tamaño de fuente del paginador */
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background-color: #007bff !important; /* Color de fondo al pasar el cursor */
    color: #ffffff !important; /* Cambia el color del texto al pasar el cursor */
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current {
    background-color: #007bff !important; /* Color de fondo del botón actual */
    color: #ffffff !important; /* Color del texto del botón actual */
    border: 1px solid #007bff; /* Borde del botón actual */
}

.page-item .page-link {
    color: #ffffff !important; /* Texto blanco */
    background-color: #4028a78c !important; /* Fondo verde oscuro */
    border: 1px solid #4028a78c !important; /* Borde verde oscuro */
}

.page-item.active .page-link {
    background-color: #2b2188d6 !important; /* Fondo verde intenso */
    color: #ffffff !important; /* Texto blanco */
    border: 1px solid #2b2188d6 !important; /* Borde verde intenso */
}

.page-item .page-link:hover {
    background-color: #2b2188d6 !important; /* Fondo naranja claro */
    color: #ffffff !important; /* Texto blanco */
    border: 1px solid #2b2188d6 !important; /* Borde naranja claro */
}

/* Estilos para el encabezado de la tabla */
table.dataTable thead th {
    background-color: #343a40; /* Color de fondo del encabezado */
    color: #ffffff; /* Color del texto */
    border: 1px solid #dee2e6; /* Borde */
    padding: 12px; /* Espaciado interno */
    vertical-align: middle; /* Alineación vertical */
    font-size: 14px; /* Tamaño de fuente del encabezado */
}

/* Estilos para el cuerpo de la tabla */
table.dataTable tbody td {
    border: 1px solid #dee2e6; /* Borde */
    padding: 12px; /* Espaciado interno */
    vertical-align: middle; /* Alineación vertical */
    position: relative; /* Posición relativa para el overlay */
    font-size: 14px; /* Tamaño de fuente del cuerpo */
}

/* Cambio de color para filas alternas */
table.dataTable tbody tr:nth-child(even) {
    background-color: #f2f2f2; /* Color de fondo para filas pares */
}

table.dataTable tbody tr:nth-child(odd) {
    background-color: #ffffff; /* Color de fondo para filas impares */
}

/* Estilos para el spinner de procesamiento */
div.dataTables_processing {
    position: absolute;
    top: 50%; /* Centra verticalmente en relación con el contenedor */
    left: 50%; /* Centra horizontalmente en relación con el contenedor */
    transform: translate(-50%, -50%); /* Centra exactamente */
    background-color: rgba(255, 255, 255, 0.8); /* Color de fondo del spinner */
    padding: 20px; /* Espaciado interno */
    border-radius: 5px; /* Borde redondeado */
    z-index: 100; /* Asegura que esté por encima de otros elementos */
    display: none; /* Inicialmente oculto */
}

/* Estilos para el overlay de carga */
.dataTables_processing_overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Color oscuro semi-transparente */
    z-index: 99; /* Z-index inferior al spinner para que esté detrás */
    display: none; /* Inicialmente oculto */
}

.dataTables_wrapper,
table.dataTable,
table.dataTable thead th,
table.dataTable tbody td,
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_paginate,
.dataTables_wrapper .dataTables_info {
    font-family: "Archivo", sans-serif; /* Aplica la fuente Roboto */
    font-size: 12px !important;
}