/* ============================================================================
   MODAL NAVIGATION — Flechas anterior / siguiente
   Desktop: flechas en los bordes del modal-container
   Móvil:   flechas ocultas, swipe con el dedo
   ============================================================================ */

.modal-nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;

  width: 28px;
  height: 88px;
  background: linear-gradient(135deg, var(--accent-burgundy, #9b2c2c), #7c2d12);
  border: none;
  color: white;
  font-size: 1rem;
  cursor: pointer;

  display: none;
  align-items: center;
  justify-content: center;

  transition: background 0.2s ease, opacity 0.2s ease;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

.modal.active .modal-nav-btn {
  display: flex;
}

.modal-nav-prev {
  left: 0;
  border-radius: 0 8px 8px 0;
}

.modal-nav-next {
  right: 0;
  border-radius: 8px 0 0 8px;
}

.modal-nav-btn:not(.nav-disabled):hover {
  background: linear-gradient(135deg, var(--accent-gold, #d4af37), #b8941f);
}

.modal-nav-btn.nav-disabled {
  opacity: 0.2;
  cursor: default;
  pointer-events: none;
}

/* ── Móvil: ocultar flechas, navegación por swipe ── */
@media (max-width: 768px) {
  .modal-nav-btn {
    display: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .modal-nav-btn { transition: none; }
}