/* components/pagination.css */

/* Paginación del lector
   ============================================================ */

.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 26px;
  margin: 36px 0;
  font-size: 2.4rem;
}

.pagination a {
  color: var(--icon-primary);
  font-weight: bold;
  text-decoration: none;
  cursor: pointer;
}

.pagination a:hover {
  display: inline-block;
  color: var(--hover-primary);
  transform: scale(1.2);
}

.pagination a.is-disabled {
  color: var(--state-disabled);
  pointer-events: none;
}

.pagination--flanked {
  justify-content: space-between;
  gap: 16px;
}

.pagination-side {
  display: flex;
  align-items: center;
  gap: 26px;
}

.pagination-center {
  flex: 1;
  display: flex;
  justify-content: center;
  min-width: 0;
}
.pagination--overlay .pagination-center {
  flex: 0 1 auto;
  min-width: 0;
  position: relative;
  display: flex;
  justify-content: center;
}

.pagination--overlay .pagination-side {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  gap: 14px;
  z-index: 2;
}

/* Pager numérico para listas extensas
   ============================================================ */

.pager {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 28px;
}

.pager button {
  padding: 8px 13px;
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  color: var(--text-body);
  font-family: var(--font-body);
  cursor: pointer;
}

.pager button:hover {
  border-color: var(--hover-primary);
  color: var(--hover-primary);
}

.pager button.is-active {
  background: var(--cta-primary);
  border-color: var(--cta-primary);
  color: var(--cta-primary-text);
}

/* Navegación entre capítulos
   ============================================================ */
/* se usa junto con btn-link btn-link--glow (el botón del home).
   tamaño fijo = el que tenía al pasar el mouse (el .pagination a:hover lo agrandaba 1.2x). */
.chapter-nav-back {
  margin-top: 0;
  font-size: 1.08rem;
  white-space: nowrap;
}

.pagination a.chapter-nav-back {
  color: var(--cta-primary);
  transform: none;
}

/* al rellenarse de amarillo, el texto pasa al verde oscuro (igual que el botón del home). */
.pagination a.chapter-nav-back:hover,
.pagination a.chapter-nav-back:focus-visible {
  color: var(--cta-primary-text);
  transform: none;
}

@media (max-width: 480px) {
  .chapter-nav-back {
    padding: 8px 10px;
    font-size: 0.78rem;
  }
}