/* components/chevrons.css */

/* Sistema visual compartido de chevrones
   ============================================================ */

.chevron-control {
  --chevron-target-size: 52px;
  --chevron-icon-size: 40px;

  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;

  min-inline-size: var(--chevron-target-size);
  min-block-size: var(--chevron-target-size);
  padding: 0.25rem;

  background: transparent;
  border: 0;
  color: var(--icon-primary);

  font-family: var(--font-body);
  line-height: 1;
  text-decoration: none;

  cursor: pointer;
  touch-action: manipulation;

  transition: transform 0.18s ease;
}

/* Hover y foco sin el antiguo rectángulo amarillo. */
.chevron-control:hover:not(.is-disabled):not(:disabled),
.chevron-control:focus-visible:not(.is-disabled):not(:disabled) {
  transform: scale(1.12);
}

.chevron-control:active:not(.is-disabled):not(:disabled) {
  transform: scale(0.96);
}

.chevron-control:focus-visible {
  outline: none;
  box-shadow: none;
}

/* Conserva inline-flex aunque exista el hover anterior de pagination. */
.pagination a.chevron-control,
.pagination a.chevron-control:hover {
  display: inline-flex;
}

/* Estados no disponibles. */
.chevron-control.is-disabled,
.chevron-control:disabled {
  pointer-events: none;
  cursor: default;
  transform: none;
}

/* Compensa el área clickeable ampliada en la paginación superpuesta. */
.pagination--overlay .pagination-side:first-child {
  left: -142px;
}

.pagination--overlay .pagination-side:last-child {
  right: -142px;
}

@media (max-width: 640px) {
  .chevron-control {
    --chevron-target-size: 48px;
  }

  .pagination-side {
    gap: 4px;
  }

  .pagination--flanked {
    gap: 8px;
  }
}

/* Windows High Contrast: mantiene visible el foco de teclado. */
@media (forced-colors: active) {
  .chevron-control:focus-visible {
    outline: 2px solid Highlight;
    outline-offset: 2px;
  }
}

/* Imágenes de navegación: tamaño visual independiente del área clickeable */
.chevron-icon {
  display: block;
  flex: none;
  width: var(--chevron-icon-size);
  height: var(--chevron-icon-size);
  max-width: 100%;
  object-fit: contain;
  pointer-events: none;
}

.pagination .chevron-control {
  --chevron-icon-size: 42px;
}

.pagination .chevron-control:is([data-action="first"], [data-action="last"]) {
  --chevron-icon-size: 50px;
}

.chevron-control:hover:not(.is-disabled):not(:disabled) .chevron-icon,
.chevron-control:focus-visible:not(.is-disabled):not(:disabled) .chevron-icon {
  filter: brightness(1.12);
}

.chevron-control.is-disabled .chevron-icon,
.chevron-control:disabled .chevron-icon {
  opacity: 0.4;
  filter: none;
}

.lightbox-arrow {
  --chevron-icon-size: 44px;
}

.story-reader-arrow {
  --chevron-icon-size: 42px;
}

.coverflow-arrow {
  --chevron-icon-size: 44px;
}

@media (max-width: 640px) {
  .chevron-control,
  .pagination .chevron-control {
    --chevron-icon-size: 34px;
  }

  .pagination .chevron-control:is([data-action="first"], [data-action="last"]) {
    --chevron-icon-size: 42px;
  }

  .lightbox-arrow {
    --chevron-icon-size: 36px;
  }

  .story-reader-arrow {
    --chevron-icon-size: 34px;
  }

  .coverflow-arrow {
    --chevron-icon-size: 36px;
  }
}

@media (max-width: 640px) {
  /* Lightbox: la lectura se controla con swipe. */
  .lightbox-overlay .lightbox-arrow {
    display: none;
  }

  /* Reservar espacio para los controles encima de la hoja. */
  .pagination--overlay {
    margin-top: 68px;
  }

  .pagination--overlay .pagination-side {
    display: flex;
    top: -60px;
    transform: none;
    gap: 0;
  }

  .pagination--overlay .pagination-side:first-child {
    left: 0;
  }

  .pagination--overlay .pagination-side:last-child {
    right: 0;
  }

  /* En esta vista móvil, solo página anterior y siguiente. */
  .pagination--overlay [data-action="first"],
  .pagination--overlay [data-action="last"] {
    display: none;
  }
}