/* =======================
   INDEX CAROUSEL & CONTAINERS
   ======================= */

/* -----------------------
   BORDES VERDES SOMBREADOS
   ----------------------- */

/* Cabañas */
.cabin-card {
  border: 2px solid #4CAF50 !important; /* verde */
  box-shadow: 0 2px 8px rgba(76, 175, 80, 0.4);
  border-radius: 8px;
  padding: 1rem;
  margin-bottom: 1rem; /* separación vertical */
  background-color: #fff;
  box-sizing: border-box;
}

/* Carruseles (general y piscina) */
.carousel-container,
.carousel-container-general {
  border: 2px solid #4CAF50 !important;
  box-shadow: 0 2px 8px rgba(76, 175, 80, 0.4);
  border-radius: 8px;
  overflow: hidden;
  max-width: 600px; /* tamaño igual al de las cabañas */
  margin: 1rem auto; /* centrado y separación vertical */
  position: relative; /* para botones absolutos */
  background-color: #fff;
  box-sizing: border-box;
}

/* Contenedor de ubicación */
#ubicacion {
  border: 2px solid #4CAF50 !important;
  box-shadow: 0 2px 8px rgba(76, 175, 80, 0.4);
  border-radius: 8px;
  padding: 10px;
  max-width: 600px; /* igual tamaño que cabañas */
  margin: 1rem auto; /* separación vertical y centrado */
  background-color: #fff;
  box-sizing: border-box;
}

#ubicacion iframe {
  width: 100%;
  border: none; /* quita borde interno */
  height: 350px;
  display: block;
}

/* Sección de contacto */
#contacto {
  border: 2px solid #4CAF50 !important;
  box-shadow: 0 2px 8px rgba(76, 175, 80, 0.4);
  border-radius: 8px;
  padding: 1rem;
  max-width: 600px;
  margin: 1rem auto; /* separación vertical */
  background-color: #fff;
  box-sizing: border-box;
}

/* -----------------------
   IMÁGENES DEL CARRUSEL
   ----------------------- */

/* Contenedor de slides */
.carousel, .carousel-general-slides {
  display: flex;
  transition: transform 0.5s ease-in-out;
  width: 100%;
}

/* Cada slide */
.carousel-slide, .carousel-slide-general {
  min-width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.carousel-slide img, .carousel-slide-general img {
  width: 100%;
  height: 350px; /* mismo tamaño que cabañas */
  object-fit: cover; /* mantiene ratio horizontal */
  display: block;
  margin: 0 auto;
}

/* -----------------------
   BOTONES DEL CARRUSEL
   ----------------------- */

/* Posición sobre el carrusel, centrados verticalmente */
.carousel-button,
.carousel-button-general {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(76, 175, 80, 0.8);
  color: #fff;
  border: none;
  padding: 0.5rem 1rem;
  cursor: pointer;
  font-size: 1.5rem;
  border-radius: 4px;
  z-index: 10;
}

.prev, .prev-general { left: 10px; }
.next, .next-general { right: 10px; }

/* -----------------------
   INDICADORES
   ----------------------- */
.carousel-indicators,
.carousel-indicators-general {
  display: flex;
  justify-content: center;
  margin-top: 0.5rem;
  gap: 5px;
}

.indicator,
.indicator-general {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: #ccc;
  cursor: pointer;
}

.indicator.active,
.indicator-general.active {
  background-color: #4CAF50;
}

/* -----------------------
   AJUSTES ADICIONALES
   ----------------------- */

/* Separación entre secciones */
section {
  margin-bottom: 1rem;
}

/* Box-sizing global para estos containers */
.carousel-container,
.carousel-container-general,
.cabin-card,
#ubicacion,
#contacto {
  box-sizing: border-box;

}

/* Asegura que el calendario pueda salir por encima de todo */
.flatpickr-calendar {
  z-index: 9999 !important;
}

/* Evita que contenedores padres corten el calendario */
.reserva-box {
  position: relative; /* ya lo tenías, pero reforzamos */
  overflow: visible !important; /* importante */
}

/* Inputs de fecha visibles y con suficiente ancho */
#entrada, #salida {
  width: 100%;
  box-sizing: border-box;
  position: relative;
  z-index: 2;
}

/* =======================
   AJUSTE FLATPICKR PARA VISIBILIDAD
   ======================= */
.reserva-box {
  position: relative; /* para que los elementos hijos z-index funcionen */
  overflow: visible !important; /* importante para que el calendario no quede recortado */
}

.reserva-box input {
  position: relative;
  z-index: 2;
}

.flatpickr-calendar {
  z-index: 9999 !important; /* se asegura de que esté por encima de todo */
}