/**
 * Estilos específicos para resolver problemas de carousel en edificiobarrionuevo.html
 */

/* Asegurar que los controles del carrusel estén visibles y clickeables */
#townhouseCarousel .carousel-control-prev,
#townhouseCarousel .carousel-control-next {
  width: 50px;
  height: 50px;
  background: rgba(32, 148, 117, 0.8);
  border-radius: 50%;
  top: 50%;
  transform: translateY(-50%);
  opacity: 1;
  z-index: 100; /* Z-index muy alto para asegurar visibilidad */
  cursor: pointer;
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Eliminar cualquier bloqueo de pointer-events */
#townhouseCarousel,
#townhouseCarousel *,
#townhouseCarousel .carousel-inner,
#townhouseCarousel .carousel-item,
#townhouseCarousel .carousel-control-prev,
#townhouseCarousel .carousel-control-next {
  pointer-events: auto !important;
}

/* Asegurar que el carrusel no tenga overlay invisible bloqueando clicks */
#townhouseCarousel::before,
#townhouseCarousel::after,
#townhouseCarousel .carousel-inner::before,
#townhouseCarousel .carousel-inner::after,
#townhouseCarousel .carousel-item::before,
#townhouseCarousel .carousel-item::after {
  display: none !important;
}

/* Iconos de los controles del carrusel */
#townhouseCarousel .carousel-control-prev-icon,
#townhouseCarousel .carousel-control-next-icon {
  width: 24px;
  height: 24px;
  background-size: 100%;
}

/* Asegurar que los indicadores estén clickeables */
#townhouseCarousel .carousel-indicators {
  position: absolute;
  bottom: 20px;
  z-index: 101;
}

#townhouseCarousel .carousel-indicators button {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.5);
  border: 0;
  margin: 0 5px;
  cursor: pointer;
}

#townhouseCarousel .carousel-indicators button.active {
  background-color: #209475;
}

/* Asegurar que las imágenes se contengan apropiadamente */
#townhouseCarousel .carousel-item {
  transition: transform 0.5s ease;
  height: auto;
  max-height: 600px;
  overflow: hidden;
}

#townhouseCarousel .carousel-item img {
  object-fit: contain;
  width: 100%;
  height: auto;
  max-height: 600px;
}

/* Resaltar botones al pasar el ratón */
#townhouseCarousel .carousel-control-prev:hover,
#townhouseCarousel .carousel-control-next:hover {
  background: rgba(32, 148, 117, 1);
  transform: translateY(-50%) scale(1.1);
}