/* MP360 · Ayres de Cardales — tooltip MP360 (desktop, hover)
 *
 * Una superficie, tres variantes:
 *   [data-variant="lote"]   Lote N · estado · metadatos
 *   [data-variant="poi"]    rótulo opcional + descripción del lugar / acción
 *   [data-variant="texto"]  texto original exacto del hotspot (fallback)
 *
 * Superficie "liquid": vidrio translúcido claro con desenfoque contenido,
 * brillo especular superior y borde suave. Texto oscuro de la escala primaria.
 *
 * Legibilidad: el vidrio nunca baja de ~72% de blanco. Sobre un píxel negro
 * del panorama, el fondo efectivo queda cerca de #B3B3B3 y --primary-900 da
 * más de 7:1; sobre cielo claro, más de 12:1. Sin backdrop-filter, la
 * superficie pasa a casi opaca.
 *
 * Tipografía: Inter (--mp360-font-ui) con pesos reales 400/500/600 cargados
 * en mp360-fuentes.css; nunca 700. Tracking --mp360-ui-tracking (15–20 px) y
 * --mp360-ui-tracking-sm (14 px). Sin compensaciones ópticas de Josefin.
 * Texto funcional ≥ 14px.
 *
 * No intercepta el puntero: pointer-events none en todo el árbol.
 */

.mp360-root .mp360-lottip {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 30;
  pointer-events: none;
  will-change: transform;
}

.mp360-lottip[hidden],
.mp360-lottip [hidden] { display: none !important; }

.mp360-lottip * { pointer-events: none; }

/* Segunda defensa: sin hover real el componente no existe en el layout. */
@media (hover: none), (pointer: coarse) {
  .mp360-root .mp360-lottip { display: none !important; }
}

.mp360-lottip__glass {
  position: relative;
  box-sizing: border-box;
  width: max-content;
  /* ancho: los tres metadatos de un lote entran en una fila en desktop */
  max-width: min(22.5rem, calc(100vw - 24px));
  padding: 12px 16px 11px;
  border-radius: var(--radius-tooltip);
  overflow: hidden;
  color: var(--primary-900);
  font-family: var(--mp360-font-ui);
  font-synthesis: none;
  font-optical-sizing: auto;
  background:
    linear-gradient(165deg, rgba(255, 255, 255, 0.84) 0%, rgba(236, 247, 251, 0.72) 100%);
  -webkit-backdrop-filter: blur(18px) saturate(165%);
  backdrop-filter: blur(18px) saturate(165%);
  border: 1px solid rgba(255, 255, 255, 0.72);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    inset 0 -1px 0 rgba(45, 86, 97, 0.10),
    0 12px 32px -10px rgba(10, 28, 33, 0.50),
    0 2px 6px rgba(10, 28, 33, 0.16);

  /* salida: breve y sin rebote */
  opacity: 0;
  transform: translate3d(0, var(--tip-shift, 6px), 0) scale(0.96);
  transform-origin: var(--tip-origin-x, 50%) var(--tip-origin-y, 100%);
  transition:
    opacity 0.14s cubic-bezier(0.4, 0, 1, 1),
    transform 0.16s cubic-bezier(0.4, 0, 1, 1);
}

.mp360-lottip[data-variant="lote"] .mp360-lottip__glass { min-width: 11.5rem; }

.mp360-lottip[data-variant="texto"] .mp360-lottip__glass {
  max-width: min(20rem, calc(100vw - 24px));
  padding: 9px 14px 10px;
}

/* POI: una frase de 8–20 palabras → 2–3 líneas a ~19rem */
.mp360-lottip[data-variant="poi"] .mp360-lottip__glass {
  max-width: min(19.5rem, calc(100vw - 24px));
  padding: 10px 14px 11px;
}

/* Brillo especular: una sola banda superior, sin animación. */
.mp360-lottip__glass::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 55%;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0) 100%);
  pointer-events: none;
}

.mp360-lottip[data-placement="below"] .mp360-lottip__glass {
  --tip-shift: -6px;
  --tip-origin-y: 0%;
}

/* entrada: opacidad rápida y escala con un asentamiento mínimo */
.mp360-lottip.is-open .mp360-lottip__glass {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
  transition:
    opacity 0.2s var(--mp360-ease-out),
    transform 0.3s var(--mp360-ease-liquid);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .mp360-lottip__glass { background: rgba(255, 255, 255, 0.96); }
}

/* ---------------- variantes: qué bloque existe ---------------- */

.mp360-lottip[data-variant="texto"] .mp360-lottip__head,
.mp360-lottip[data-variant="texto"] .mp360-lottip__meta,
.mp360-lottip[data-variant="texto"] .mp360-lottip__rotulo,
.mp360-lottip[data-variant="poi"] .mp360-lottip__head,
.mp360-lottip[data-variant="poi"] .mp360-lottip__meta,
.mp360-lottip[data-variant="lote"] .mp360-lottip__rotulo,
.mp360-lottip[data-variant="lote"] .mp360-lottip__text { display: none; }

/* ---------------- variante lote ---------------- */

.mp360-lottip__head {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.mp360-lottip__title {
  font-size: 20px;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: var(--mp360-ui-tracking);
  white-space: nowrap;
  color: var(--primary-900);
}

.mp360-lottip__estado {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: none;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  /* mayúsculas sostenidas: tracking positivo leve (excepción del contrato UI) */
  letter-spacing: 0.02em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--primary-800);
}

/* Mismo código visual que el marcador: refuerza la relación sin depender solo
   del color (el estado también va escrito). */
.mp360-lottip__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  box-sizing: border-box;
  flex: none;
}
.mp360-lottip__estado[data-visual="available"] .mp360-lottip__dot {
  background: var(--lot-available-circle);
  border: 1.5px solid var(--lot-available-number);
}
.mp360-lottip__estado[data-visual="unavailable"] .mp360-lottip__dot {
  background: var(--lot-unavailable-circle);
  border: 1.5px solid var(--lot-unavailable-circle);
}

/* Metadatos: grupos indivisibles con separador. El recorte horizontal del
   contenedor oculta el separador del primer grupo de cada línea, así un
   quiebre nunca deja "·" colgando al inicio. */
.mp360-lottip__meta {
  position: relative;
  margin: 7px 0 0;
  overflow: hidden;
}

.mp360-lottip__meta-list {
  --tip-sep: 18px;
  display: flex;
  flex-wrap: wrap;
  row-gap: 1px;
  margin: 0 0 0 calc(-1 * var(--tip-sep));
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: var(--mp360-ui-tracking-sm);
  color: var(--primary-800);
}

.mp360-lottip__dato {
  position: relative;
  padding-left: var(--tip-sep);
  white-space: nowrap;
}

.mp360-lottip__sep {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--tip-sep);
  text-align: center;
  font-weight: 600;
  color: var(--primary-600);
}

/* ---------------- variante texto (fallback) ---------------- */

.mp360-lottip__text {
  position: relative;
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: var(--mp360-ui-tracking);
  color: var(--primary-900);
  /* respeta saltos de línea del texto original (p. ej. "Montana Farm\n…") */
  white-space: pre-line;
  overflow-wrap: break-word;
  text-wrap: balance;
}

/* ---------------- variante poi ---------------- */

/* Rótulo: solo cuando el hotspot no muestra el nombre del lugar. */
.mp360-lottip__rotulo {
  position: relative;
  margin: 0 0 3px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: var(--mp360-ui-tracking);
  color: var(--primary-900);
  overflow-wrap: break-word;
}

/* Descripción: una frase; se lee, no se escanea → peso de lectura y
   `pretty` en vez de `balance` para evitar viudas sin estrechar la caja. */
.mp360-lottip[data-variant="poi"] .mp360-lottip__text {
  font-size: 15px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: var(--mp360-ui-tracking);
  white-space: normal;
  text-wrap: pretty;
}

.mp360-lottip[data-variant="poi"][data-rotulo="si"] .mp360-lottip__text {
  font-size: 14px;
  letter-spacing: var(--mp360-ui-tracking-sm);
  color: var(--primary-800);
}

@media (prefers-reduced-motion: reduce) {
  .mp360-lottip__glass,
  .mp360-lottip.is-open .mp360-lottip__glass {
    transform: none;
    transition: opacity 0.12s linear;
  }
}