/* =========================================================
   GALLERY SCROLL NAV — CSS SIMPLE
   ========================================================= */

.gsn-gallery-container {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
}

@media(min-width:1025px){
	.gsn-gallery-container {
	  flex-direction: row-reverse;
	}	
}

/* ===== Imagen principal ===== */

.gsn-main {
  width: 100%;
}

.gsn-main-inner {
  width: 100%;
/*  aspect-ratio: 1;*/
  overflow: hidden;
  border: 1px solid #ffffff; /* blanco, como tenías */
}

.gsn-main-image {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
/*  aspect-ratio: 1;*/
}

/* ===== Thumbnails ===== */

.gsn-thumbs {
  display: flex;
  flex-direction: row;
  gap: 8px;
  overflow-x: auto;
  overflow-y: hidden;
}

@media(max-width:1024px){
	.gsn-thumbs-wrapper {
	  width: 100%;
	}
}

@media(min-width:1025px){
	.gsn-thumbs-wrapper {
		width: 180px; /* o el ancho que necesites */
		min-width: 180px; /* o el ancho que necesites */		
		overflow: hidden; /* muy importante */
	}	
	.gsn-thumbs {
		flex-direction: column;
		overflow-x: hidden;
		overflow-y: auto;
		height: 100%;
	}
}

/* =========================================================
   SCROLLBAR MINIMALISTA PARA gsn-thumbs
   ========================================================= */

/* Ocultar scrollbar en WebKit (Chrome, Safari, Edge) */
.gsn-thumbs::-webkit-scrollbar {
  display: none;
}

/* Ocultar scrollbar en Firefox */
.gsn-thumbs {
  scrollbar-width: none;
}

/* Ocultar scrollbar en IE/Edge antiguo */
.gsn-thumbs {
  -ms-overflow-style: none;
}



.gsn-thumb {
  flex: 0 0 auto;
  width: 100px;
  height: 100px;
  aspect-ratio: 1;
  border: 1px solid #ffffff; /* borde blanco por defecto */
  cursor: pointer;
  overflow: hidden;
}

@media(min-width:1025px){
	.gsn-thumb {
  	  width: 180px;
	  height: 180px;
	}
}

.gsn-thumb-inner {
  width: 100%;
  height: 100%;
}

.gsn-thumb img {
	width: 100%!important;
	height: 100%!important;
	object-position: center!important;
	object-fit: cover!important;
	-webkit-user-drag: none;
	user-select: none;
	pointer-events: none; /* importante para que el drag se agarre del contenedor, no de la imagen */
}

/* Hover: borde gris claro (sin efectos raros) */
.gsn-thumb:hover {
  border-color: #ffffff; /* JONA era #e5e5e5 */
}

/* Thumb seleccionado: mismo gris claro */
.gsn-thumb.is-active {
  border-color: #ffffff; /* JONA era #e5e5e5 */
}

.gsn-thumbs {
  cursor: grab;
}

.gsn-thumbs.gsn-thumbs-dragging {
  cursor: grabbing;
}