/* Estilos exclusivos de hotel/index.php */

/* Foto del hotel: ancho completo, alto proporcional (sin recorte). El
   recorte con "object-fit: cover" + alto fijo se probó antes, pero con la
   foto real (un banner logo+fachada+habitación) el recorte descentraba el
   logo hacia la izquierda; a ancho completo se ve el banner completo. */
.hotel-tarjeta-img {
  width: 100%;
  height: auto;
  display: block;
}

/* Mientras no haya foto real: el onerror del <img> la oculta (evita el
   ícono de imagen rota) y este alto mínimo en el contenedor deja el fondo
   de color visible en su lugar, en vez de una franja vacía casi invisible. */
.hotel-tarjeta-img-wrap {
  min-height: 60px;
}

/* Aproximado en dólares junto a cada tarifa en pesos */
.hotel-precio-usd {
  display: block;
  font-size: 11px;
  font-weight: 400;
  opacity: .65;
}

/* Mapa de hoteles (Google Maps): quita el "globo" blanco por defecto del
   InfoWindow (marco, sombra y flecha) para que solo se vea la pastilla de
   color de abajo (.hotel-label), igual que se veía antes con Leaflet.
   Los nombres de clase .gm-style-iw-* son internos de la librería de
   Google Maps (no documentados oficialmente): si Google los cambia en una
   versión futura, este bloque dejaría de aplicar y volvería a verse el
   globo blanco por defecto alrededor de la pastilla (el mapa seguiría
   funcionando igual). */
#hoteles-map .gm-style-iw-c {
  padding: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}
#hoteles-map .gm-style-iw-d {
  overflow: hidden !important;
  padding: 0 !important;
}
#hoteles-map .gm-style-iw-tc::after {
  display: none !important;
}

/* Etiqueta con el nombre del hotel, que aparece al pasar el mouse sobre
   cada marcador (en vez de un popup). */
#hoteles-map .hotel-label {
  background: #758294;
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 2px 6px;
  font-size: 11px;
  font-weight: 600;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
  white-space: nowrap;
}

/* Etiqueta clicable (todos los hoteles, no el recinto del congreso) */
#hoteles-map .hotel-label-clickable {
  cursor: pointer;
}

#hoteles-map .hotel-label::before {
  border-top-color: #758294;
}

/* Etiqueta del recinto del congreso (marcador rojo) */
#hoteles-map .hotel-label-expo {
  background: #dd1652;
}

#hoteles-map .hotel-label-expo::before {
  border-top-color: #dd1652;
}

/* Resalte temporal de la tarjeta al llegar desde un marcador del mapa */
.hotel-highlight {
  box-shadow: 0 0 0 2px #dd1652 !important;
  transition: box-shadow 0.4s ease;
}

/* Botón flotante "Back to map": visible mientras el mapa no está a la
   vista (y no se está cerca del footer); ver el IntersectionObserver en
   hotel/index.php. */
#volver-al-mapa-btn {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 9999;
  background: #dd1652;
  color: #fff;
  border: 1px solid #ff6b93;
  padding: 12px 18px;
  border-radius: 30px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 0 8px 2px rgba(221, 22, 82, 0.6), 0 3px 10px rgba(0, 0, 0, 0.25);
  display: flex;
  align-items: center;
  gap: 8px;
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
  animation: hotel-btn-glow 2s ease-in-out infinite;
}

#volver-al-mapa-btn.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

#volver-al-mapa-btn:hover {
  background: #b91245;
}

@keyframes hotel-btn-glow {
  0%, 100% {
    box-shadow: 0 0 6px 1px rgba(221, 22, 82, 0.5), 0 3px 6px rgba(0, 0, 0, 0.25);
    border-color: #ff6b93;
  }
  50% {
    box-shadow: 0 0 6px 1px rgba(255, 107, 147, 0.9), 0 3px 10px rgba(0, 0, 0, 0.25);
    border-color: #ffb3c6;
  }
}