/* Estilos personalizados para la página de carga*/

/* === 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;
}

/* Logo animado (fade + zoom) */
#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));
}

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

/* Ocultamiento al cargar */
#preloader.fade-out {
  opacity: 0;
  visibility: hidden;
}

/* === ANIMACIONES === */

/* Movimiento suave del fondo degradado */
@keyframes gradientMove {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Logo aparece y hace zoom sutil */
@keyframes logoFadeZoom {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  60% {
    opacity: 1;
    transform: scale(1.05);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/* Texto sube suavemente */
@keyframes textFade {
  0% { opacity: 0; transform: translateY(10px); }
  100% { opacity: 1; transform: translateY(0); }
}



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

/* Efectos visuales para el mapa interactivo */
[data-edificio] {
  cursor: pointer;
  transition: fill 0.25s ease-in-out;
}

[data-edificio]:hover {
  fill: #9c0f38; /* Color más claro al pasar el mouse */
}


/* Estilos para el buscador */
#buscador {
  position: relative;
  z-index: 10;
}
.form-control {
  position: relative;
  z-index: 1;
}

.list-group.position-absolute {
  z-index: 1000;
  top: 100%;       /* coloca las sugerencias debajo del input */
  left: 0;
  max-height: 220px;
  overflow-y: auto;
  border-top-left-radius: 0;  /* estética: esquina superior sin redondear */
  border-top-right-radius: 0;
}

.list-group-item.active {
  background-color: #0d6efd;
  color: white;
}

mark {
  background-color: #fffed5;
  padding: 0;
}

/* ---------- Imagen: forzar aspecto cuadrado y evitar estiramiento ---------- */
#img-container {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;        /* fuerza un cuadrado. Si no lo soporta el navegador, la altura fallback abajo actúa */
  height: 100%;              /* fallback/valor inicial (ajusta a lo que necesites) */
  overflow: hidden;
}

#img-edificio {
  width: 100%;
  height: 100%;
  object-fit: cover;          /* mantiene aspecto cubriendo el área sin deformar */
  display: block;
  border-radius: .25rem 0 0 .25rem; /* mantiene rounded-start visual; ajusta si tu diseño lo necesita */
}

/* ---------- Loader overlay centrado ---------- */
#img-loader {
  position: absolute;
  inset: 0;                   /* top:0; right:0; bottom:0; left:0; */
  display: none;              /* se muestra/oculta por JS */
  justify-content: center;
  align-items: center;
  background-color: rgba(255,255,255,0.6);
  z-index: 10;
}

/* spinner */
#img-loader::after {
  content: "";
  width: 36px;
  height: 36px;
  border: 4px solid #1c6bff;
  border-top-color: transparent;
  border-radius: 50%;
  animation: girar 1s linear infinite;
}

@keyframes girar {
  to { transform: rotate(360deg); }
}

/* ---------- Animación de la tarjeta: no ocultar con opacity ---------- */
/* Antes: .card.cambiando { transform: scale(0.98); opacity: 0; } */
/* Ahora: solo escalamos ligeramente; no usamos opacity (para que el loader siga visible) */
.card {
  transition: transform 0.28s ease; /* mantén similar comportamiento */
}
.card.cambiando {
  transform: scale(0.98);
}

/* Si quieres un "fade" solo del contenido textual, aplica a .card-body */
/* (opcional) */
.card.cambiando .card-body {
  opacity: 0.6;
  transition: opacity 0.28s ease;
}