@layer components {
    /* Contenedor principal de la paginación */
    .pagy {
        @apply flex items-center justify-center space-x-2 my-8 font-sans text-sm;
    }

    /* Botones normales y números */
    .pagy a, .pagy span.current, .pagy span.gap {
        @apply flex items-center justify-center min-w-[2rem] px-3 py-1.5 rounded-lg border border-gray-300 bg-white text-gray-700 transition-colors shadow-sm;
    }

    /* Hover en botones activos */
    .pagy a:hover {
        @apply bg-gray-50 border-gray-400 text-gray-900;
    }

    /* Página actual activa (Con el color de SabiA Core) */
    .pagy span.current, .pagy a.current {
        @apply bg-[#056B70] text-white border-[#056B70] shadow-md pointer-events-none;
    }

    /* Puntos suspensivos (saltos grandes de páginas) */
    .pagy span.gap {
        @apply border-transparent bg-transparent text-gray-500 pointer-events-none shadow-none;
    }

    /* Botones deshabilitados (Ej: "Anterior" cuando estás en la página 1) */
    .pagy a:not([href]), .pagy a.disabled {
        @apply opacity-50 bg-gray-100 text-gray-400 pointer-events-none border-gray-200 shadow-none;
    }
}