/* ==========================================
   Puntos interactivos del libro (hotspots)
   Qué cubre: Punto con lupa o icono propio, popup de imagen/texto/video, animación y variantes para imágenes estrechas.
   Los genera construirPaginaHotspots (js/libro/…).
   Orden de carga: ver ESTRUCTURA.md (este archivo es el nº 8 de 12).
   Secciones:
     · PUNTOS INTERACTIVOS (estilo H5P ImageHotspots) — portada de la Misión 1
   ========================================== */

/* ==========================================
   PUNTOS INTERACTIVOS (estilo H5P ImageHotspots) — portada de la Misión 1
   ========================================== */

.hotspot-contenedor {
  position: relative;
  width: 100%;
}

.hotspot-imagen-base {
  width: 100%;
  display: block;
  border-radius: 10px;
}

/* El punto ahora es la imagen real de la lupa (con sus propios brillos y
   destellos), no un círculo de color con número — por eso sin fondo/borde
   propio, solo tamaño y posición. El pulso anima escala en vez de
   box-shadow, ya que no hay una forma de color sólido para resaltar. */
.hotspot-punto {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 46px;
  height: 46px;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  animation: atxHotspotPulso 1.8s ease-in-out infinite;
}

.hotspot-punto-icono {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 2px 6px rgba(15, 23, 42, 0.45));
}

@keyframes atxHotspotPulso {
  0%, 100% { transform: translate(-50%, -50%) scale(1); }
  50% { transform: translate(-50%, -50%) scale(1.12); }
}

.hotspot-punto:hover .hotspot-punto-icono {
  filter: drop-shadow(0 2px 10px rgba(15, 23, 42, 0.6)) brightness(1.08);
}

/* Indicador de "ya lo revisé": deja de pulsar tras el primer clic (el
   cambio a img/otros/logo-lupa-opaca.png, hecho en JS, es la señal visual
   principal) — sigue siendo clicable para reabrir el contenido las veces
   que se quiera, no es un bloqueo. La opacidad reducida del ícono es un
   refuerzo visual adicional, no reemplaza el cambio de imagen. */
.hotspot-punto.visto {
  animation: none;
}

.hotspot-punto.visto .hotspot-punto-icono {
  opacity: 0.6;
}

/* Ventana emergente de cada punto — con más "personalidad" que un modal
   genérico: franja de acento arcoíris arriba, borde grueso y sombra con
   tinte de color en vez de gris plano. max-height en vh (no en % del
   contenedor del hotspot) para que no dependa de qué tan alto se renderice
   la imagen base — así la imagen interna siempre tiene espacio real y no
   necesita scroll. */
.hotspot-popup {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(96%, 900px);
  max-height: 85vh;
  overflow-y: auto;
  background: linear-gradient(180deg, #fffdf8 0%, #fff6e6 100%);
  border: 3px solid var(--atx-accent-teal);
  border-radius: 18px;
  padding: 1.7rem 1.7rem 1.5rem;
  box-shadow: 0 0 0 6px rgba(8, 145, 178, 0.14), 0 24px 55px rgba(15, 23, 42, 0.45);
  z-index: 5;
}

.hotspot-popup::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 8px;
  border-radius: 15px 15px 0 0;
  background: linear-gradient(90deg, var(--atx-accent-teal), var(--atx-accent-amber), var(--atx-accent-pink));
}

.hotspot-popup h4 {
  margin: 0.2rem 0 0.8rem 0;
  color: var(--atx-accent-teal-dark);
  font-size: 1.2rem;
}

.hotspot-popup p {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.65;
  color: var(--atx-text-dark);
}

.hotspot-popup-imagen {
  max-width: 100%;
  max-height: 74vh;
  width: 100%;
  object-fit: contain;
  border-radius: 10px;
  margin-top: 0.6rem;
  display: block;
}

/* Hotspots sobre una imagen vertical (ej. 1024×1536): se limita su ancho para
   que no ocupe más de una pantalla de alto. */
.hotspot-estrecho {
  max-width: 560px;
  margin: 0 auto;
}

/* Los popups (y los videos) de una imagen estrecha son MÁS GRANDES que ella:
   se centran sobre la imagen y se extienden a ambos lados, hasta 860 px sin
   pasarse del ancho de la página del libro (viewport − tabla de contenido y
   márgenes). */
.hotspot-estrecho .hotspot-popup {
  width: min(860px, max(320px, calc(94vw - 360px)));
  max-height: 88vh;
}

.hotspot-estrecho .hotspot-popup-video {
  max-height: 78vh;
}

/* Popup de video (tipo 'video', Misión 3). */
.hotspot-popup-video {
  width: 100%;
  max-height: 74vh;
  margin-top: 0.6rem;
  display: block;
  border-radius: 10px;
  background: #000000;
}

.hotspot-aviso-incompleto {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(30, 27, 58, 0.85);
  color: #ffffff;
  padding: 0.5rem 1rem;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 700;
  white-space: nowrap;
  z-index: 4;
}

.hotspot-popup-cerrar {
  position: absolute;
  top: 16px;
  right: 14px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: none;
  background: var(--atx-accent-teal);
  color: #ffffff;
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 800;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.3);
  transition: transform 0.2s ease, background 0.2s ease;
  z-index: 1;
}

.hotspot-popup-cerrar:hover {
  background: var(--atx-accent-teal-dark);
  transform: rotate(90deg);
}

/* Animación del popup (ver abrirPopupHotspot/cerrarPopupHotspot en
   hotspots.js): entra deslizándose desde abajo con fade (0.3 s) y
   sale más rápido (0.2 s) antes de ocultarse. El translate(-50%, -50%) va en
   cada keyframe porque el popup ya se centra con ese transform. */
.hotspot-popup.abriendo {
  animation: atxHotspotPopupEntra 0.3s ease-out both;
}

.hotspot-popup.cerrando {
  animation: atxHotspotPopupSale 0.2s ease-in both;
  pointer-events: none;
}

@keyframes atxHotspotPopupEntra {
  from { opacity: 0; transform: translate(-50%, calc(-50% + 22px)); }
  to { opacity: 1; transform: translate(-50%, -50%); }
}

@keyframes atxHotspotPopupSale {
  from { opacity: 1; transform: translate(-50%, -50%); }
  to { opacity: 0; transform: translate(-50%, calc(-50% + 14px)); }
}

/* Icono propio de una página (iconoPunto en construirPaginaHotspots): mismo
   tamaño que la lupa (el botón fija 46 px y la imagen se ajusta con
   object-fit), sin tocar el archivo original, que es grande. */
.hotspot-punto-propio .hotspot-punto-icono {
  max-width: 46px;
  max-height: 46px;
}

@media (prefers-reduced-motion: reduce) {
  .hotspot-punto,
  .hotspot-popup.abriendo,
  .hotspot-popup.cerrando {
    animation: none;
  }
}