/* Estilos para integrar el paginador con el modo oscuro */
.custom-pagination nav div div p {
    color: #94a3b8 !important; /* slate-400 */
    margin-right: 15px;
}

/* Página activa */
.custom-pagination nav span[aria-current="page"] span {
    background-color: #4f46e5 !important; /* indigo-600 */
    border-color: #6366f1 !important;
    color: white !important;
    z-index: 20;
}

/* Enlaces, botones de número y botones deshabilitados */
.custom-pagination nav a,
.custom-pagination nav button,
.custom-pagination nav span[aria-disabled="true"] span {
    background-color: #1e293b !important; /* slate-800 */
    border-color: #334155 !important; /* slate-700 */
    color: #cbd5e1 !important; /* slate-300 */
    text-decoration: none;
}

/* Efecto hover en botones y enlaces activos */
.custom-pagination nav a:hover,
.custom-pagination nav button:hover:not([disabled]) {
    background-color: #334155 !important;
    color: white !important;
}

/* Quitar el anillo de enfoque de Tailwind que a veces molesta en modo oscuro */
.custom-pagination nav button:focus {
    --tw-ring-opacity: 0.5;
    --tw-ring-color: #4f46e5;
}