/* HotVal — Mapa de anunciantes (pantalla completa). */

html, body.hv-mapa-page { height: 100%; margin: 0; padding: 0; }
body.hv-mapa-page { overflow: hidden; background: #000; }

.hv-map { position: fixed; inset: 0; width: 100%; height: 100%; background: #222; }
/* Aspecto oscuro sobre los tiles claros de OSM (solo la capa de tiles). */
.hv-map .leaflet-tile-pane { filter: invert(1) hue-rotate(180deg) brightness(.92) contrast(.9) saturate(.85); }

/* Botón Volver (logo) */
.hv-map-volver {
  position: fixed; top: 14px; right: 14px; z-index: 20;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  background: var(--hv-accent, #e10032); color: #fff; text-decoration: none;
  padding: 8px 14px; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,.4);
  font-size: 12px; font-weight: 700; font-family: var(--hv-font, sans-serif);
}
.hv-map-volver svg { width: 60px; height: auto; }

/* Controles flotantes (derecha, bajo el botón Volver; el zoom de Leaflet va a la izquierda). */
.hv-map-controls { position: fixed; top: 96px; right: 14px; z-index: 1001; display: flex; flex-direction: column; gap: 10px; }
.hv-map-btn {
  width: 46px; height: 46px; border: 0; border-radius: 10px; cursor: pointer;
  background: #fff; color: #222; box-shadow: 0 2px 10px rgba(0,0,0,.35);
  display: flex; align-items: center; justify-content: center; transition: background .15s ease;
}
.hv-map-btn:hover { background: #f0f0f0; }
.hv-map-btn svg { width: 22px; height: 22px; }
.hv-map-btn.is-active { background: var(--hv-accent, #e10032); color: #fff; }

/* Panel de filtros */
.hv-map-filtros {
  position: fixed; top: 96px; right: 70px; z-index: 1002; width: 280px; max-height: 78vh;
  background: #111; color: #eee; border-radius: 12px; box-shadow: 0 6px 24px rgba(0,0,0,.5);
  display: flex; flex-direction: column; overflow: hidden; font-family: var(--hv-font, sans-serif);
}
.hv-map-filtros[hidden] { display: none; }
.hv-map-filtros__head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid rgba(255,255,255,.1); }
.hv-map-filtros__close { background: none; border: 0; color: #aaa; font-size: 24px; line-height: 1; cursor: pointer; }
.hv-map-filtros__close:hover { color: #fff; }
.hv-map-filtros__list { overflow-y: auto; padding: 8px 16px 16px; }
.hv-map-filtro { display: flex; align-items: center; gap: 10px; padding: 8px 0; font-size: 14px; cursor: pointer; }
.hv-map-filtro input { accent-color: var(--hv-accent, #e10032); width: 17px; height: 17px; }
.hv-map-filtro--oferta { padding: 12px 16px; margin: 0; border-bottom: 1px solid rgba(255,255,255,.1); color: #ffd34d; font-weight: 700; }

/* Marcador con foto circular (Leaflet divIcon). */
.leaflet-div-icon.hv-marker-icon { background: none; border: 0; }
.hv-marker { position: relative; width: 50px; height: 57px; cursor: pointer; }
.hv-marker img {
  width: 50px; height: 50px; border-radius: 50%; object-fit: cover; display: block;
  border: 3px solid #fff; box-shadow: 0 2px 6px rgba(0,0,0,.5); background: #333;
}
.hv-marker.is-on img { border-color: #1db954; }
.hv-marker::after {
  content: ""; position: absolute; left: 50%; top: 48px; transform: translateX(-50%);
  border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 8px solid #fff;
}
.hv-marker.is-on::after { border-top-color: #1db954; }

/* Popup de Leaflet: sin relleno para que la tarjeta lo llene. */
.hv-map-popup .leaflet-popup-content-wrapper { padding: 0; border-radius: 12px; overflow: hidden; background: #000; }
.hv-map-popup .leaflet-popup-content { margin: 0; width: min(350px, 90vw) !important; }
.hv-map-popup .leaflet-popup-tip { background: #000; }
/* Botón de cierre en círculo blanco (como el diseño). */
.hv-map-popup a.leaflet-popup-close-button {
  width: 28px !important; height: 28px !important; top: 8px !important; right: 8px !important; padding: 0 !important;
  background: #000 !important; border-radius: 50%; color: #fff !important;
  font: 700 18px/28px var(--hv-font, sans-serif) !important; text-align: center;
  box-shadow: 0 1px 4px rgba(0,0,0,.45);
}
.hv-map-popup a.leaflet-popup-close-button:hover { background: #222 !important; color: #fff !important; }

/* InfoWindow contenido. */
.hv-iw { width: 100%; max-width: 350px; font-family: var(--hv-font, sans-serif); background: #000; }
/* Prefijo .hv-iw + !important para ganar a Leaflet (.leaflet-popup-content p { margin:1.3em }). */
.hv-iw .hv-iw__img { width: 100%; height: 230px; object-fit: cover; display: block; background: #222; }
.hv-iw .hv-iw__body { padding: 12px 14px 14px; background: #000; }
.hv-iw .hv-iw__title { font-size: 17px; font-weight: 700; color: #fff; margin: 0 0 .4rem !important; display: flex; align-items: center; gap: 8px; }
.hv-iw .hv-iw__title img { width: 22px; height: auto; }
.hv-iw .hv-iw__horario { font-size: 14px; font-weight: 700; color: #c7c7c7; margin: 0 0 .4rem !important; }
.hv-iw .hv-iw__desde { font-size: 15px; font-weight: 700; color: #fff; margin: 0 0 .4rem !important; }
.hv-iw__actions { display: flex; gap: 10px; }
.hv-iw__btn {
  flex: 1 1 0; text-align: center; padding: 4px 12px; border-radius: 10px;
  font-size: 15px; font-weight: 700; text-decoration: none; text-transform: lowercase;
  border: 1px solid transparent;
}
/* Especificidad .hv-iw para ganar al color de enlace por defecto de Leaflet
   (.leaflet-container a), que si no pinta "ruta" en azul. */
.hv-iw .hv-iw__btn--ver,
.hv-iw .hv-iw__btn--ver:hover,
.hv-iw .hv-iw__btn--ver:focus { background: #fff; color: #000; border-color: #fff; }
.hv-iw .hv-iw__btn--ver:hover { background: #e6e6e6; }
.hv-iw .hv-iw__btn--ruta,
.hv-iw .hv-iw__btn--ruta:hover,
.hv-iw .hv-iw__btn--ruta:focus { background: transparent; color: #fff; border-color: #fff; }
.hv-iw .hv-iw__btn--ruta:hover { background: rgba(255,255,255,.12); }

/* ===== Overlay de carga ===== */
.hv-map-loading {
  position: fixed; inset: 0; z-index: 1500;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  background: rgba(0,0,0,.55); transition: opacity .3s ease;
}
.hv-map-loading.is-hidden { opacity: 0; pointer-events: none; }
.hv-map-loading__spin {
  width: 46px; height: 46px; border-radius: 50%;
  border: 4px solid rgba(255,255,255,.25); border-top-color: var(--hv-accent, #e10032);
  animation: hvMapSpin .8s linear infinite;
}
@keyframes hvMapSpin { to { transform: rotate(360deg); } }
.hv-map-loading__txt { margin: 0; color: #fff; font-family: var(--hv-font, sans-serif); font-size: 15px; font-weight: 600; }

/* Slider inferior de anuncios (wrap fijo con flechas + scroll con snap) */
.hv-map-carousel-wrap {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  display: flex; align-items: stretch; gap: 6px; padding: 10px 8px;
  background: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.78) 45%);
}
.hv-map-carousel-wrap[hidden] { display: none; }
.hv-map-carousel {
  flex: 1 1 auto; display: flex; gap: 10px; overflow-x: auto; padding: 2px 2px 6px;
  scrollbar-width: thin; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
}
.hv-map-cnav {
  flex: 0 0 auto; align-self: center; width: 40px; height: 40px; border: 0; border-radius: 50%;
  background: rgba(255,255,255,.92); color: #111; cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,.5);
  display: flex; align-items: center; justify-content: center; transition: background .15s ease;
}
.hv-map-cnav:hover { background: #fff; }
.hv-map-cnav svg { width: 22px; height: 22px; }
.hv-map-card {
  flex: 0 0 300px; scroll-snap-align: start;
  display: flex; gap: 10px; background: #1a1a1a; border-radius: 10px;
  overflow: hidden; text-decoration: none; box-shadow: 0 2px 10px rgba(0,0,0,.4); cursor: pointer;
}
.hv-map-card__img { width: 96px; height: 96px; object-fit: cover; flex: 0 0 auto; background: #333; }
.hv-map-card__body { padding: 8px 10px; min-width: 0; }
.hv-map-card__name { color: #fff; font-weight: 700; font-size: 14px; margin: 0 0 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hv-map-card__desc { color: #aaa; font-size: 12px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

@media (max-width: 640px) {
  .hv-map-volver svg { width: 44px; }
  .hv-map-filtros { left: 14px; right: 14px; width: auto; top: 70px; }
  .hv-map-cnav { display: none; } /* en móvil se pasa deslizando */
  .hv-map-card { flex: 0 0 82%; }  /* una card visible + adelanto de la siguiente */

  /* Controles flotantes: arriba centrados en fila (zoom queda a la izq., Volver a la der.). */
  .hv-map-controls {
    top: 14px; right: auto; left: 50%; transform: translateX(-50%);
    flex-direction: row;
  }

  /* Globo un pelín más estrecho en móvil; la altura de la imagen es la normal
     (230px), que con el auto-pan hay espacio de sobra. */
  .hv-iw { max-width: 300px; }
  .hv-map-popup .leaflet-popup-content { width: min(300px, 92vw) !important; }
}

/* ===== Explosión de chicas de una casa (abanico) ===== */
.leaflet-div-icon.hv-explode-icon { background: none; border: 0; }

.hv-explode-marker {
  position: relative; width: 46px; height: 52px;
  transform-origin: 50% 100%; animation: hvExplodePop .45s cubic-bezier(.22,1.2,.36,1) backwards;
}
.hv-explode-marker img {
  width: 44px; height: 44px; border-radius: 50%; object-fit: cover; display: block;
  border: 3px solid #fff; box-shadow: 0 3px 10px rgba(0,0,0,.55); background: #333;
}
.hv-explode-marker.is-on img { border-color: #1db954; }
.hv-explode-marker::after {
  content: ""; position: absolute; left: 50%; top: 42px; transform: translateX(-50%);
  border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 8px solid #fff;
}
.hv-explode-marker.is-on::after { border-top-color: #1db954; }

.hv-explode-casa {
  width: 58px; height: 58px; border-radius: 50%; overflow: hidden;
  border: 4px solid var(--hv-accent, #e10032); box-shadow: 0 0 0 0 rgba(225,0,50,.6);
  animation: hvExplodePulse 1.8s ease-out infinite; background: #111;
}
.hv-explode-casa img { width: 100%; height: 100%; object-fit: cover; display: block; }

.hv-explode-line { animation: hvExplodeDash .6s ease-out backwards; }

@keyframes hvExplodePop {
  0%   { transform: scale(.2) translateY(14px); opacity: 0; }
  100% { transform: scale(1) translateY(0); opacity: 1; }
}
@keyframes hvExplodePulse {
  0%   { box-shadow: 0 0 0 0 rgba(225,0,50,.55); }
  70%  { box-shadow: 0 0 0 18px rgba(225,0,50,0); }
  100% { box-shadow: 0 0 0 0 rgba(225,0,50,0); }
}
@keyframes hvExplodeDash { 0% { opacity: 0; } 100% { opacity: .55; } }

/* Card de casa en el slider: pista de que despliega sus chicas. */
.hv-map-card--casa { border: 1px solid rgba(225,0,50,.5); }
.hv-map-card--casa .hv-map-card__name::after {
  content: "· ver chicas"; color: var(--hv-accent, #e10032); font-weight: 700; font-size: 11px; margin-left: 4px;
}