.pagy {
  display: flex;
  justify-content: center;
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  color: #1e3a8a; /* blue-900 */
  gap: 0.25rem;
}

/* Botones generales */
.pagy a:not(.gap) {
  display: block;
  text-decoration: none;
  border-radius: 0.5rem;
  background-color: #e0f2fe; /* blue-100 */
  padding: 0.375rem 0.75rem;
  color: #1e40af; /* blue-800 */
  transition: background-color 0.2s, color 0.2s, transform 0.1s;
}

.pagy a:not(.gap):hover {
  background-color: #bfdbfe; /* blue-200 */
  color: #1d4ed8; /* blue-600 */
  transform: translateY(-1px);
}

.pagy a:not(.gap):focus {
  outline: 2px solid #3b82f6; /* blue-500 */
  outline-offset: 2px;
}

/* Disabled links */
.pagy a:not(.gap):not([href]) {
  cursor: not-allowed;
  background-color: #f1f5f9; /* slate-100 */
  color: #94a3b8; /* slate-400 */
  pointer-events: none;
}

/* Activo (página actual) */
.pagy a:not(.gap).current {
  background-color: #2563eb; /* blue-600 */
  color: white;
  font-weight: 600;
  pointer-events: none;
}

/* Label (goto input/select) */
.pagy label {
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  border-radius: 0.5rem;
  background-color: #f0f9ff; /* blue-50 */
  padding: 0.125rem 0.75rem;
  color: #1e40af; /* blue-800 */
}

.pagy label input {
  line-height: 1.5rem;
  border-radius: 0.375rem;
  border: 1px solid #cbd5e1; /* slate-300 */
  background-color: #fff;
  margin-left: 0.25rem;
  padding: 0 0.25rem;
  width: 3rem;
}

.dark .pagy {
  color: #c4b5fd; /* violet-300 */
}

.dark .pagy a:not(.gap) {
  background-color: rgb(30 41 59); /* slate-800 */
  color: #e2e8f0; /* slate-200 */
}

.dark .pagy a:not(.gap):hover {
  background-color: rgb(46 16 101 / 0.55); /* violet-950 */
  color: #c4b5fd; /* violet-300 */
}

.dark .pagy a:not(.gap):focus {
  outline-color: #8b5cf6; /* violet-500 */
}

.dark .pagy a:not(.gap):not([href]) {
  background-color: rgb(15 23 42); /* slate-900 */
  color: #64748b; /* slate-500 */
}

.dark .pagy a:not(.gap).current {
  background-color: #7c3aed; /* violet-600 */
  color: white;
}

.dark .pagy label {
  background-color: rgb(30 41 59 / 0.70); /* slate-800 */
  color: #e2e8f0; /* slate-200 */
}

.dark .pagy label input {
  border-color: #475569; /* slate-600 */
  background-color: #0f172a; /* slate-900 */
  color: #f1f5f9; /* slate-100 */
}