/*
 * paginacion-circular.css — plan-segmentacion.md §2.14. En `proyectos` y `proyecto-detalle`.
 * Círculo "anterior" (outline café, 65px) + dígitos (activo café, inactivos gris-inactivo
 * #959595) + círculo "siguiente" (sólido café, 63px, ícono blanco). Asimetría prev-outline/
 * next-sólido — P16, resuelto: intencional, se implementa tal cual. Geometría exacta:
 * _dev/registro-decisiones.md, 2026-08-17.
 */

.gyo-paginacion {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 30px; /* medido: 30px prev→dígitos, 35px dígitos→next, normalizado a un solo valor */
}

.gyo-paginacion__circulo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 65px;
  height: 65px;
  border-radius: 50%;
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease, filter 0.2s ease;
}

.gyo-paginacion__circulo svg {
  width: 13px;
  height: 21px;
}

.gyo-paginacion__circulo--prev {
  border: 1px solid var(--color-cafe-claro);
  color: var(--color-cafe-claro);
}

/* Fase 3, Parte B (2026-08-18): estado hover. Sin dato del PDF — criterio propio, no vinculante
   al píxel. Mismo criterio de familia que botón-flecha/CONTACTO ("outline que se rellena"): el
   círculo "anterior" (borde café-claro, sin relleno) invierte a sólido con el mismo café-claro
   que ya usa "siguiente" — quedan iguales en hover, aunque nacen distintos (asimetría
   prev-outline/next-sólido, P16, resuelto, intencional en el estado por defecto). */
.gyo-paginacion__circulo--prev:hover {
  background-color: var(--color-cafe-claro);
  color: #FFFFFF;
}

.gyo-paginacion__circulo--next {
  width: 63px;
  height: 63px;
  background-color: var(--color-cafe-claro);
  color: #FFFFFF;
}

/* Familia "ya sólido por defecto" (mismo criterio que `.gyo-boton-outline--nav--pagina-actual`,
   header.css): no hay outline al cual invertir, así que oscurece el relleno existente en vez de
   cambiar de color. */
.gyo-paginacion__circulo--next:hover {
  filter: brightness(0.88);
}

.gyo-paginacion__digitos {
  display: flex;
  align-items: center;
  gap: 24px;
  font-size: 37px;
}

.gyo-paginacion__digitos a {
  color: var(--color-gris-inactivo);
  text-decoration: none;
  transition: color 0.2s ease;
}

.gyo-paginacion__digitos a.activo {
  color: var(--color-cafe-claro);
}

/* Familia "link de texto simple sin fondo" (mismo criterio que los links del nav, header.css):
   el hover pasa el dígito al acento del sitio — mismo color que ya tiene el dígito activo, así
   que pasar el mouse por un inactivo "previsualiza" el color que tomaría si fuera la página
   activa. */
.gyo-paginacion__digitos a:hover {
  color: var(--color-cafe-claro);
}