/* === PANTALLA DE CARGA === */
#preloader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #0d6efd, #1B396A, #0d6efd);
  background-size: 300% 300%;
  animation: gradientMove 6s ease-in-out infinite;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  transition: opacity 0.8s ease, visibility 0.8s ease;
}

#preloader-logo {
  width: 120px;
  height: 120px;
  opacity: 0;
  animation: logoFadeZoom 2s ease-in-out forwards;
  filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.6));
}

#preloader p {
  font-size: 1.1rem;
  letter-spacing: 1px;
  opacity: 0;
  animation: textFade 2s ease-in-out 0.8s forwards;
}

#preloader.fade-out {
  opacity: 0;
  visibility: hidden;
}

@keyframes gradientMove {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes logoFadeZoom {
  0% { opacity: 0; transform: scale(0.8); }
  60% { opacity: 1; transform: scale(1.05); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes textFade {
  0% { opacity: 0; transform: translateY(10px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* === FIN PANTALLA DE CARGA === */

/* ===== Hero Section ===== */
.hero-section {
  height: 300px;
  border-radius: 12px;
  position: relative;
  overflow: hidden;
}

.hero-img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  filter: brightness(80%);
  transition: filter 0.3s ease;
}



.hero-overlay {
  background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,0.65) 100%);
}

/* ===== Popover Mapa ===== */
.popover {
  max-width: none;
}

.popover img {
  width: 100%;
  height: auto;
}

@media (min-width: 768px) {
  .popover img { max-width: 250px; }
}

@media (max-width: 767px) {
  .popover {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    z-index: 1060;
    width: 90%;
    max-width: 380px;
    text-align: center;
  }
}

/* ===== Secciones de Edificio ===== */
#info-general .card { border-radius: 1rem; }

#datos-generales .bg-light {
  transition: 0.3s ease;
}

#datos-generales .bg-light:hover {
  background-color: var(--bs-hover-bg, #f8f9fa);
  box-shadow: 0 0 10px rgba(0,0,0,0.05);
}

/* ===== Acordeón ===== */
.accordion-button { font-weight: 600; }
.accordion-body { background-color: var(--bs-body-bg); }

/* ===== Archivos Disponibles ===== */
#lista-archivos { margin-top: 10px; }

.archivo-item {
  display: flex;
  align-items: center;
  padding: 10px;
  border: 1px solid var(--bs-border-color);
  border-radius: 10px;
  margin-bottom: 8px;
  background-color: var(--bs-body-bg);
  color: var(--bs-body-color);
  box-shadow: 0 0 6px rgba(0,0,0,0.05);
  transition: background-color 0.3s, box-shadow 0.3s;
}



.archivo-item img {
  width: 30px;
  height: 30px;
  margin-right: 10px;
}

.archivo-item a.btn {
  margin-left: 10px;
}

/* ===== Indicaciones ===== */
.indicacion-item {
  display: flex;
  align-items: center;
  justify-content: space-between; /* separa el wrapper de icono+texto y el botón */
  padding: 8px 12px;
  border: 1px solid var(--bs-border-color);
  border-radius: 8px;
  margin-bottom: 8px;
  background-color: var(--bs-body-bg);
  color: var(--bs-body-color);
  transition: background-color 0.3s, box-shadow 0.3s;
}

.indicacion-item:hover {
  background-color: var(--bs-body-hover-bg, #f8f9fa); /* usa color dinámico según tema */
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

/* Wrapper que contiene icono + texto */
.indicacion-texto-wrapper {
  display: flex;
  align-items: center;
  gap: 8px; /* separación entre icono y texto */
}

/* Icono */
.indicacion-icono {
  width: 30px;
  height: 30px;
}

/* Texto */
.indicacion-texto {
  font-weight: 500;
  text-align: left;
}

/* Botón */
.indicacion-boton {
  white-space: nowrap;
}

/* ===== Style Burbuja (Bubbles) ===== */
#bubble-card {
  background-color: var(--bs-body-bg);
  color: var(--bs-body-color);
  border-radius: 0.75rem;
  box-shadow: 0 6px 20px rgba(0,0,0,0.06);
  overflow: hidden;
  margin: 1rem auto;
  width: 100%;
  max-width: 1100px;
}

#bubble-card .card-header {
  background-color: var(--bs-primary);
  color: var(--bs-white);
  padding: .75rem 1rem;
  border-bottom: none;
  font-size: 1.05rem;
  font-weight: 600;
}

#bubble-container {
  width: 100%;
  height: clamp(300px, 45vw, 60vh);
  position: relative;
  padding: .5rem;
}

#bubble-container svg {
  width: 100%;
  height: 100%;
  display: block;
}

.node circle {
  fill: #69b3a2;
  stroke: #fff;
  stroke-width: 2px;
  cursor: pointer;
  transition: transform .18s ease-out, stroke-width .12s;
  transform-origin: center center;
}

.node circle:hover {
  stroke: #0b5ed7;
  stroke-width: 3px;
  transform: scale(1.05);
}

.node text {
  font-size: 0.8rem;
  font-weight: 600;
  text-anchor: middle;
  fill: white;
  pointer-events: none;
  text-shadow: 0 1px 2px rgba(0,0,0,0.4);
  user-select: none;
  dominant-baseline: middle;
}

.node.high-force circle { fill: #105df5; }
.node.medium-force circle { fill: #4060a0; }
.node.low-force circle { fill: #2e2f33; }

@media (max-width: 576px) {
  #bubble-card { max-width: 96%; }
  #bubble-container { height: clamp(250px, 65vw, 55vh); }
  .node text { font-size: 10px; }
}

/* Galería de imágenes */
#galeria {
  scrollbar-width: thin;
  scrollbar-color: var(--bs-primary) var(--bs-body-bg);
}

#galeria::-webkit-scrollbar {
  height: 8px;
}

#galeria::-webkit-scrollbar-thumb {
  background-color: var(--bs-primary);
  border-radius: 4px;
}

#galeria img {
  max-height: 150px;
  border-radius: 0.5rem;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  transition: transform 0.3s;
}

#galeria img:hover {
  transform: scale(1.05);
}

.galeria-slide {
  height: 400px;
  object-fit: cover;
  border-radius: 10px;
}



@media (max-width: 768px) {
  .galeria-slide {
    height: 250px;
  }
}