.pagy {
    /* Estilo general del contenedor de la paginación */
    @apply flex space-x-1 font-semibold text-sm text-base;
    /*
      - flex + space-x-1: coloca los elementos en fila con espacio horizontal
      - font-semibold: un poco más de grosor en la tipografía
      - text-sm: tamaño de fuente pequeño-moderado
      - text-base: color #3E3E3E (definido en tu Tailwind como "base")
    */

    a:not(.gap) {
        /* Enlaces normales (excepto .gap de pagy, si existiese) */
        @apply block rounded-lg px-3 py-1 transition-colors;
        @apply text-base bg-accent/20;
        /*
          - block: cada enlace como bloque
          - rounded-lg: esquinas redondeadas
          - px-3 py-1: padding horizontal y vertical
          - transition-colors: suaviza el cambio de color al hover
          - text-base: color texto #3E3E3E
          - bg-accent/20: fondo celeste #A1E3F8 con 20% de opacidad (si usas modo JIT de Tailwind)
        */

        &:hover {
            @apply bg-accent/40;
            /* Hover algo más intenso: #A1E3F8 con 40% opacidad */
        }

        &:not([href]) {
            /* Para los enlaces "deshabilitados" o sin href */
            @apply text-base/40 bg-white cursor-default;
            /*
              - text-base/40: gris oscuro (#3E3E3E) al 40% (un gris claro)
              - bg-white: fondo blanco
              - cursor-default: indica que no es clickeable
            */
        }

        &.current {
            /* Enlace de la página actual */
            @apply text-white bg-primary hover:bg-primary-dark;
            /*
              - text-white: texto blanco
              - bg-primary: #008080
              - hover:bg-primary-dark: #006666 en hover
            */
        }
    }

    label {
        /* Para la sección del input de salto de página (pagy combo o pagy compact) */
        @apply inline-block whitespace-nowrap bg-accent/20 rounded-lg px-3 py-0.5;
        /*
          - inline-block + whitespace-nowrap: no quiebre de línea
          - bg-accent/20: fondo celeste suave
          - rounded-lg: esquinas redondeadas
          - px-3 py-0.5: padding horizontal/vertical
        */

        input {
            @apply bg-white border-none rounded-md text-base;
            /*
              - bg-white: fondo blanco en el input
              - border-none: sin borde
              - rounded-md: leve redondeado
              - text-base: color #3E3E3E
            */
        }
    }
}