/* ============================================
   ESTILOS DE PAGINACIÓN
   ============================================ */

/* Contenedor del paginador */
.dataTables_wrapper .dataTables_paginate {
    border-radius: 6px !important;
    border: 0px !important;
    margin-top: .5rem !important;
}

/* Estilos base para todos los botones de paginación (incluyendo números no seleccionados) */
.dataTables_wrapper .dataTables_paginate .paginate_button {
    border-radius: 8px !important;
    padding: 4px 12px !important;
}

/* Botones de paginación (current, previous, next) */
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.previous,
.dataTables_wrapper .dataTables_paginate .paginate_button.next {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: none;
    border-radius: 8px;
    padding: 4px 12px !important;
    cursor: pointer;
    box-shadow: none !important;
    color: var(--dtsp-text-color-paginate) !important;
    background-color: var(--pagination-bg-hover) !important;
}

/* Hover en botones de paginación */
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover,
.dataTables_wrapper .dataTables_paginate .paginate_button.previous:hover,
.dataTables_wrapper .dataTables_paginate .paginate_button.next:hover {
    background-color: var(--pagination-bg-hover) !important;
    background: var(--pagination-bg-hover) !important;
    border: 1px solid var(--pagination-border-hover) !important;
    color: var(--pagination-color-hover);
    padding: 4px 12px !important;
}

/* Botones deshabilitados */
.dataTables_wrapper .dataTables_paginate .paginate_button.current.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.previous.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.next.disabled {
    opacity: 0.5 !important;
    pointer-events: none !important;
    border-radius: 8px !important;
}

/* Botón actual/seleccionado */
.dataTables_wrapper .dataTables_paginate .paginate_button.current {
    border-radius: 8px !important;
    border: 1px solid var(--pagination-active-border) !important;
    background: var(--pagination-active-bg) !important;
    color: var(--pagination-active-color) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    border: 1px solid var(--pagination-border-hover) !important;
    background: var(--pagination-bg-hover) !important;
    color: var(--pagination-color-hover) !important;
}

/* Hover genérico en cualquier botón de paginación */
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    border: 1px solid var(--pagination-border-hover) !important;
    background: var(--pagination-bg-hover) !important;
    color: var(--pagination-color-hover) !important;
}