body,
html {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.container-cesium {
  width: 100%;
  height: 100%;
  position: relative;
}

#cesiumContainer {
  width: 100%;
  height: 100vh;
}

.navbar {
  z-index: 1000;
  background: rgba(0, 0, 0, 0.6);
  /* Para que el navbar esté siempre sobre el mapa */
}

.navbar.bg-transparent {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.cesium-viewer-toolbar {
  z-index: 1100;
  /* Superior al z-index del navbar (1000) */
}

.carousel-item img {
  max-width: 100%;
  max-height: 300px;
  object-fit: contain; /* Ajustar la imagen dentro de las dimensiones */
  margin: 0 auto;
  display: block;
}

.modal-dialog {
  max-width: 800px; /* Puedes ajustar el ancho máximo */
  margin: 1.75rem auto; /* Centrar el modal verticalmente */
}

.modal-content {
  max-height: 70vh; /* 80% de la altura de la ventana */
  overflow-y: auto; /* Habilitar el scroll vertical si es necesario */
}

/* Cambiar el color de las flechas del carrusel a negro */
.carousel-control-prev-icon,
.carousel-control-next-icon {
  background-image: none; /* Eliminar la imagen de fondo predeterminada */
  width: 30px;
  height: 30px;
}

.carousel-control-prev-icon::after,
.carousel-control-next-icon::after {
  content: ""; /* Remover cualquier contenido existente */
  display: inline-block;
  width: 100%;
  height: 100%;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

/* Flecha izquierda */
.carousel-control-prev-icon::after {
  background-image: url("data:image/svg+xml;charset=UTF8,%3Csvg xmlns%3D%22http://www.w3.org/2000/svg%22 fill%3D%22black%22 viewBox%3D%220 0 16 16%22%3E%3Cpath d%3D%22M4.646%208l5.5-5.5.708.708L6.062%208l4.792%204.792-.708.708L4.646%208z%22/%3E%3C/svg%3E");
}

/* Flecha derecha */
.carousel-control-next-icon::after {
  background-image: url("data:image/svg+xml;charset=UTF8,%3Csvg xmlns%3D%22http://www.w3.org/2000/svg%22 fill%3D%22black%22 viewBox%3D%220 0 16 16%22%3E%3Cpath d%3D%22M11.354%208l-5.5%205.5-.708-.708L9.938%208%205.146%203.208l.708-.708L11.354%208z%22/%3E%3C/svg%3E");
}

.navbar-brand {
  background-color: rgba(0, 0, 0, 0.65);
  color: #fff !important;
  padding: 1px 14px;
  margin-right: 6px;
  border-radius: 4px;
  transition: background-color 0.2s ease;
}

.navbar .nav-link {
  background-color: rgba(0, 0, 0, 0.65);
  color: #fff !important;
  padding: 1px 14px;
  margin-right: 6px;
  border-radius: 4px;
  transition: background-color 0.2s ease;
}

.navbar .nav-link:hover {
  background-color: #222;
  color: #fff;
}

.navbar .nav-link.active {
  background-color: #000;
  color: #fff;
}

/* =========================
   NAVBAR MODERNA
========================= */

.navbar {
  backdrop-filter: blur(6px);
  padding: 1rem 2rem;
}

.navbar-brand {
  font-weight: 700;
  letter-spacing: 1px;
  color: #fff !important;
}

.navbar .nav-link {
  background-color: rgba(0, 0, 0, 0.6);
  color: #fff !important;
  padding: 6px 14px;
  margin-right: 8px;
  border-radius: 8px;
  transition: all 0.2s ease;
}

.navbar .nav-link:hover {
  background-color: rgba(0, 0, 0, 0.85);
}

/* =========================
   MODAL PREMIUM
========================= */

.custom-modal {
  border-radius: 18px;
  border: none;
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(10px);
  overflow: hidden;
}

.custom-header {
  border-bottom: none;
  padding: 2rem 2rem 1rem 2rem;
}

.modal-body {
  padding: 2rem;
}

/* Precio destacado */
.precio-destacado {
  font-size: 2.2rem;
  font-weight: 700;
  color: #111;
  margin-bottom: 1.2rem;
}

/* Layout tipo portal */
.modal-layout {
  display: flex;
  gap: 2rem;
  flex-wrap: wrap;
}

.modal-images {
  flex: 1 1 60%;
}

.modal-info {
  flex: 1 1 35%;
}

/* Carrusel más grande */
.carousel-inner img {
  width: 100%;
  height: 460px;
  object-fit: cover;
  border-radius: 14px;
}

/* Sombras suaves */
.modal-content {
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
}

.info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  /* gap: 14px; */
}

.info-item {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #f8f9fa;
  padding: 5px 14px;
  border-radius: 10px;
  font-weight: 500;
  transition: 0.2s ease;
}

.info-item i {
  font-size: 18px;
  color: #0d6efd;
}

.info-item:hover {
  background: #e9ecef;
  transform: translateY(-2px);
}

.precio-destacado {
  font-size: 28px;
  font-weight: 700;
  color: #111;
  margin-bottom: 10px;
}