/* Keep modal visuals consistent */
#imageModal .modal-header { border-bottom: none; }
#imageModal .modal-content { border-radius: 0; }

/* Image area */
#imageModal .carousel-item { background: #000; } /* neutral backdrop */
#imageModal .zoom-wrap {
  position: relative;
  overflow: hidden; /* hide panning overflow */
}
#imageModal .carousel-item img.zoomable {
  max-height: calc(100vh - 180px);
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
  transition: transform 0.02s linear; /* smoother dragging */
  touch-action: none; /* allow custom gestures */
}
/* On very small screens, reduce header footprint */
@media (max-width: 575.98px) {
  #imageModal .modal-dialog { margin: 0.5rem; }
  #imageModal .modal-header .btn-group .btn { padding: .15rem .35rem; }
}

/* Permite pan/zoom sobre la imagen sin que el navegador “robe” los gestos */
.modal img.zoomable { touch-action: none; cursor: grab; }
.modal img.zoomable:active { cursor: grabbing; }

/* El carrusel puede desplazar vertical (para no bloquear scroll de la página) */
.modal .carousel-inner { touch-action: pan-y; }

/* La imagen con zoom maneja sus propios gestos (pan/zoom) */
.modal img.zoomable {
  touch-action: none;   /* clave para móvil */
  cursor: grab;
}
.modal img.zoomable:active { cursor: grabbing; }