/* ============================================================
   UPD TOUR 4A — Deep Zoom (DZI) + Hotspots interactivos
   ============================================================ */

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { width: 100%; height: 100%; overflow: hidden; }
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  color: #fff; user-select: none; -webkit-user-select: none;
  /* Letterbox con gradiente sutil de la marca UPD.
     En vez de negro puro, usamos un gradiente radial centrado con tinte
     amarillo (color de marca #FFB81C) sobre un fondo azul oscuro. Asi las
     franjas laterales (cuando la imagen 1.585 no llena el canvas 1.78) se
     ven como un fondo de marca, no como un bug. */
  background:
    radial-gradient(ellipse 70% 50% at 50% 40%, rgba(255,184,28,0.10) 0%, transparent 65%),
    radial-gradient(ellipse 50% 60% at 50% 50%, rgba(80,140,210,0.06) 0%, transparent 70%),
    linear-gradient(180deg, #0a1424 0%, #0d1b2e 40%, #0a1424 100%);
}
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
kbd { font-family: ui-monospace, monospace; font-size: 11px; padding: 1px 6px; border-radius: 3px; background: rgba(255,255,255,0.15); border: 1px solid rgba(255,255,255,0.25); }

/* ===== LOADER ===== */
.loader { position: fixed; inset: 0; z-index: 1000; background: linear-gradient(135deg, #001F3F 0%, #003D7A 100%); display: flex; align-items: center; justify-content: center; transition: opacity 600ms ease; }
.loader.hidden { opacity: 0; pointer-events: none; }
.loader-inner { text-align: center; max-width: 460px; padding: 24px; }
.loader-mark { margin-bottom: 24px; animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.1); } }
.loader h1 { font-size: 22px; font-weight: 700; letter-spacing: -0.5px; margin-bottom: 8px; }
.loader p { font-size: 13px; color: rgba(255,255,255,0.7); }
.loader-bar { margin-top: 20px; height: 4px; background: rgba(255,255,255,0.15); border-radius: 999px; overflow: hidden; }
.loader-bar-fill { height: 100%; width: 0%; background: linear-gradient(90deg, #FFB81C, #FFD66B); transition: width 200ms ease; }
.loader-percent { font-size: 12px; margin-top: 10px; color: #FFB81C; font-weight: 700; font-variant-numeric: tabular-nums; }

/* ===== TOUR ===== */
.tour { position: fixed; inset: 0; z-index: 10; opacity: 0; pointer-events: none; transition: opacity 500ms ease; }
.tour.active { opacity: 1; pointer-events: auto; }

/* OSD canvas: full viewport (1.78 aspect en pantallas 16:9).
   Contain mode: la imagen (1.58 aspect) se muestra a 1.13x del fit
   (configurado en script.js con minZoomImageRatio: 1.13).
   Asi la imagen SIEMPRE cubre el canvas completo:
   - En width: 1.13 * 1.58 = 1.78 = viewport aspect (cubre perfecto)
   - En height: overflow por arriba/abajo, pero el pan se limita
   Resultado: NUNCA se ven franjas negras ni a los lados ni arriba/abajo. */
/* OSD stage: el contenedor se ajusta al viewport del navegador MENOS la altura
   de la bottombar (--bottombar-h). Asi la imagen queda en la parte SUPERIOR
   del viewport, los pines (que estan en la parte inferior de la imagen) quedan
   arriba del bottombar, y la franja inferior (entre la imagen y el bottombar)
   queda en negro. El usuario indico que esa franja negra inferior esta OK. */
:root { --bottombar-h: 110px; }
.osd-stage {
  position: fixed; top: 0; left: 0; width: 100vw;
  height: calc(100vh - var(--bottombar-h));
  /* El stage ahora es transparente para que el gradiente del body se vea
     a través de las franjas (cuando la imagen no llena el canvas). */
  background: transparent; overflow: visible;
}
.openseadragon-canvas { outline: none !important; cursor: grab; }
.openseadragon-canvas:active { cursor: grabbing; }

.vignette {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(0,0,0,0.35) 0%, transparent 18%, transparent 80%, rgba(0,0,0,0.4) 100%);
  z-index: 5;
}
/* Override: el vignette ahora vive DENTRO de .osd-stage (no dentro de .tour),
   asi no oscurece la zona del bottombar que esta debajo del OSD stage. */

/* ===== TOP BAR ===== */
.topbar {
  position: absolute; top: 0; left: 0; right: 0;
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 28px; z-index: 20; color: #fff;
  pointer-events: none;
}
.topbar-close { display: flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px; background: rgba(255,255,255,0.12); backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,0.18); font-size: 13px; font-weight: 600; transition: all 200ms ease; pointer-events: auto; }
.topbar-close[hidden] { display: none; }
.topbar-close:hover { background: rgba(255,255,255,0.2); }
.topbar-brand { display: flex; align-items: center; gap: 12px; }
.topbar-dot { width: 10px; height: 10px; border-radius: 50%; background: #FFB81C; box-shadow: 0 0 12px rgba(255,184,28,0.7); animation: dot-pulse 2s ease-in-out infinite; }
@keyframes dot-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }
.topbar-brand div { display: flex; flex-direction: column; line-height: 1.15; }
.topbar-brand strong { font-size: 14px; font-weight: 700; }
.topbar-brand span { font-size: 11px; color: rgba(255,255,255,0.7); }
.topbar-counter { display: flex; align-items: baseline; gap: 4px; font-variant-numeric: tabular-nums; padding: 10px 16px; border-radius: 999px; background: rgba(255,255,255,0.12); backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,0.18); }
.topbar-counter strong { font-size: 18px; font-weight: 800; color: #FFB81C; }
.topbar-counter span { font-size: 14px; color: rgba(255,255,255,0.7); }

/* ===== FLECHAS ===== */
/* Flechas mas pequenas (40px) y con hit-area minima para evitar clicks
   accidentales cuando el usuario quiere arrastrar la imagen. Solo se
   muestran al hacer hover en su propia hit-area (no en todo el tour). */
.nav-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,0.10); backdrop-filter: blur(12px); border: 1.5px solid rgba(255,255,255,0.25); color: #fff; display: flex; align-items: center; justify-content: center; z-index: 15; transition: all 220ms ease; opacity: 0; pointer-events: none; }
.nav-arrow::before { content: ''; position: absolute; inset: -12px; border-radius: 50%; }
/* El hit-area se activa con su propio :hover (no con .tour:hover) */
.nav-arrow:hover, .nav-arrow:focus { opacity: 1; pointer-events: auto; background: rgba(255,255,255,0.22); }
.nav-prev { left: 24px; }
.nav-next { right: 24px; }
.nav-arrow:disabled { opacity: 0.2; cursor: not-allowed; pointer-events: none; }

/* ===== BOTTOM BAR (controles y titulo en la parte inferior) ===== */
/* La barra vive en la parte inferior del viewport con un fondo oscuro
   para que no se mezcle con el plano del campus ni con los pines. */
.bottombar { position: fixed; bottom: 0; left: 0; right: 0; display: flex; align-items: center; justify-content: space-between; padding: 16px 32px; z-index: 20; gap: 24px; background: linear-gradient(0deg, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.4) 80%, rgba(0,0,0,0) 100%); backdrop-filter: blur(8px); border-top: 1px solid rgba(255,255,255,0.1); }
.bottombar-info { max-width: 700px; color: #fff; }
.info-tag { display: inline-block; padding: 4px 10px; border-radius: 999px; background: rgba(255,184,28,0.18); border: 1px solid rgba(255,184,28,0.4); color: #FFB81C; font-size: 10px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; margin-bottom: 4px; transition: all 220ms ease; }
.info-tag.deportivo { background: rgba(199,62,44,0.2); border-color: rgba(199,62,44,0.5); color: #FF8A78; }
.info-tag.servicios { background: rgba(255,184,28,0.18); border-color: rgba(255,184,28,0.4); color: #FFB81C; }
.info-tag.académico,
.info-tag.academico { background: rgba(80,140,210,0.18); border-color: rgba(80,140,210,0.4); color: #87B0E5; }
.info-tag.intro { background: rgba(255,255,255,0.15); border-color: rgba(255,255,255,0.3); color: #fff; }
#info-title { font-size: clamp(18px, 2vw, 24px); font-weight: 800; letter-spacing: -0.5px; margin-bottom: 2px; text-shadow: 0 2px 16px rgba(0,0,0,0.4); }
#info-subtitle { font-size: 12px; color: rgba(255,255,255,0.85); text-shadow: 0 1px 8px rgba(0,0,0,0.4); }
.bottombar-controls { display: flex; align-items: center; gap: 8px; }
.ctrl-btn { width: 44px; height: 44px; border-radius: 50%; background: rgba(255,255,255,0.12); backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,0.2); color: #fff; display: flex; align-items: center; justify-content: center; transition: all 200ms ease; }
.ctrl-btn:hover { background: rgba(255,255,255,0.22); }
.ctrl-btn:active { transform: scale(0.92); }
.ctrl-btn.active { background: #FFB81C; color: #003D7A; border-color: #FFB81C; }
.ctrl-play { background: #FFB81C; color: #003D7A; border-color: #FFB81C; }
.ctrl-play:hover { background: #FFD66B; }

/* ===== MINIMAPA ===== */
.minimap { position: absolute; left: 28px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 8px; padding: 16px 12px; background: rgba(0,0,0,0.35); backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,0.12); border-radius: 16px; z-index: 15; max-height: 70vh; }
.minimap-label { font-size: 9px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: rgba(255,255,255,0.6); text-align: center; margin-bottom: 4px; }
.minimap-dots { display: flex; flex-direction: column; gap: 6px; }
.minimap-dot { width: 28px; height: 6px; border-radius: 999px; background: rgba(255,255,255,0.25); border: 0; padding: 0; cursor: pointer; transition: all 220ms ease; }
.minimap-dot:hover { background: rgba(255,255,255,0.5); }
.minimap-dot.active { background: #FFB81C; width: 36px; box-shadow: 0 0 12px rgba(255,184,28,0.6); }
.minimap-dot.visited { background: rgba(255,184,28,0.4); }

/* ===== HOTSPOTS OVERLAY ===== */
.hotspot-pin {
  position: absolute; z-index: 25; pointer-events: auto;
  transform: translate(-50%, -50%);
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(255,184,28,0.95); border: 3px solid #fff;
  color: #003D7A; font-size: 13px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0,0,0,0.4), 0 0 0 4px rgba(255,184,28,0.3);
  transition: transform 220ms cubic-bezier(.2,1.2,.4,1), box-shadow 220ms ease, opacity 220ms ease;
  font-family: 'Inter', sans-serif;
  /* Estado base: opacidad baja para no distraer */
  opacity: 0.35;
  filter: saturate(0.6) brightness(0.95);
  animation: pin-pop 400ms cubic-bezier(.2,1.4,.4,1) backwards;
}
@keyframes pin-pop { from { transform: translate(-50%, -50%) scale(0); } to { transform: translate(-50%, -50%) scale(1); } }

/* Hover: pin se ilumina y agranda */
.hotspot-pin:hover {
  transform: translate(-50%, -50%) scale(1.35);
  z-index: 26;
  opacity: 1;
  filter: saturate(1.2) brightness(1.1);
  box-shadow: 0 6px 20px rgba(0,0,0,0.55), 0 0 0 7px rgba(255,184,28,0.55), 0 0 18px rgba(255,184,28,0.35);
}

/* Active: pin seleccionado (clickeado) */
.hotspot-pin.active {
  transform: translate(-50%, -50%) scale(1.4);
  z-index: 27;
  opacity: 1;
  filter: saturate(1.3) brightness(1.15);
  background: #FF6B35 !important; color: #fff !important;
  box-shadow: 0 8px 22px rgba(0,0,0,0.6), 0 0 0 9px rgba(255,107,53,0.5), 0 0 22px rgba(255,107,53,0.4);
}

/* Variantes de color por categoria */
.hotspot-pin.deportivo { background: #FF6B35; }
.hotspot-pin.servicios { background: #FFD66B; }
.hotspot-pin.académico,
.hotspot-pin.academico { background: #5B8FD6; color: #fff; }
.hotspot-pin.accesos { background: #87B0E5; color: #003D7A; }
.hotspot-pin.especial { background: #C586FF; color: #fff; }

/* Colores específicos fila 1 (referencia visual) */
.hotspot-pin.peatonal { background: #06B6D4; color: #fff; box-shadow: 0 4px 12px rgba(0,0,0,0.4), 0 0 0 4px rgba(6,182,212,0.35); }
.hotspot-pin.peatonal:hover { box-shadow: 0 6px 20px rgba(0,0,0,0.55), 0 0 0 7px rgba(6,182,212,0.6), 0 0 18px rgba(6,182,212,0.4); }
.hotspot-pin.estacionamiento-izq { background: #F97316; color: #fff; box-shadow: 0 4px 12px rgba(0,0,0,0.4), 0 0 0 4px rgba(249,115,22,0.35); }
.hotspot-pin.estacionamiento-izq:hover { box-shadow: 0 6px 20px rgba(0,0,0,0.55), 0 0 0 7px rgba(249,115,22,0.6), 0 0 18px rgba(249,115,22,0.4); }
.hotspot-pin.entrada-principal { background: #C2410C; color: #fff; box-shadow: 0 4px 12px rgba(0,0,0,0.4), 0 0 0 4px rgba(194,65,12,0.35); }
.hotspot-pin.entrada-principal:hover { box-shadow: 0 6px 20px rgba(0,0,0,0.55), 0 0 0 7px rgba(194,65,12,0.6), 0 0 18px rgba(194,65,12,0.4); }
.hotspot-pin.estacionamiento-der { background: #B45309; color: #fff; box-shadow: 0 4px 12px rgba(0,0,0,0.4), 0 0 0 4px rgba(180,83,9,0.35); }
.hotspot-pin.estacionamiento-der:hover { box-shadow: 0 6px 20px rgba(0,0,0,0.55), 0 0 0 7px rgba(180,83,9,0.6), 0 0 18px rgba(180,83,9,0.4); }
.hotspot-pin.parqueadero-estudiantil { background: #C8A2C8; color: #fff; box-shadow: 0 4px 12px rgba(0,0,0,0.4), 0 0 0 4px rgba(200,162,200,0.4); }
.hotspot-pin.parqueadero-estudiantil:hover { box-shadow: 0 6px 20px rgba(0,0,0,0.55), 0 0 0 7px rgba(200,162,200,0.7), 0 0 18px rgba(200,162,200,0.5); }

/* Fila 2 — pines 06, 07, 08 (escena 1) */
.hotspot-pin.zona-6-7 { background: #4ADE80; color: #003D7A; box-shadow: 0 4px 12px rgba(0,0,0,0.4), 0 0 0 4px rgba(74,222,128,0.4); }
.hotspot-pin.zona-6-7:hover { box-shadow: 0 6px 20px rgba(0,0,0,0.55), 0 0 0 7px rgba(74,222,128,0.7), 0 0 18px rgba(74,222,128,0.5); }
.hotspot-pin.zona-8 { background: #84CC16; color: #003D7A; box-shadow: 0 4px 12px rgba(0,0,0,0.4), 0 0 0 4px rgba(132,204,22,0.4); }
.hotspot-pin.zona-8:hover { box-shadow: 0 6px 20px rgba(0,0,0,0.55), 0 0 0 7px rgba(132,204,22,0.7), 0 0 18px rgba(132,204,22,0.5); }

/* Fila 3 — pines 09, 12, 15, 17, 23 (escena 1) */
.hotspot-pin.zona-9 { background: #3B82F6; color: #fff; box-shadow: 0 4px 12px rgba(0,0,0,0.4), 0 0 0 4px rgba(59,130,246,0.4); }
.hotspot-pin.zona-9:hover { box-shadow: 0 6px 20px rgba(0,0,0,0.55), 0 0 0 7px rgba(59,130,246,0.7), 0 0 18px rgba(59,130,246,0.5); }
.hotspot-pin.zona-12 { background: #F97316; color: #fff; box-shadow: 0 4px 12px rgba(0,0,0,0.4), 0 0 0 4px rgba(249,115,22,0.4); }
.hotspot-pin.zona-12:hover { box-shadow: 0 6px 20px rgba(0,0,0,0.55), 0 0 0 7px rgba(249,115,22,0.7), 0 0 18px rgba(249,115,22,0.5); }
.hotspot-pin.zona-15 { background: #6B7C32; color: #fff; box-shadow: 0 4px 12px rgba(0,0,0,0.4), 0 0 0 4px rgba(107,124,50,0.4); }
.hotspot-pin.zona-15:hover { box-shadow: 0 6px 20px rgba(0,0,0,0.55), 0 0 0 7px rgba(107,124,50,0.7), 0 0 18px rgba(107,124,50,0.5); }
.hotspot-pin.zona-17 { background: #722F37; color: #fff; box-shadow: 0 4px 12px rgba(0,0,0,0.4), 0 0 0 4px rgba(114,47,55,0.4); }
.hotspot-pin.zona-17:hover { box-shadow: 0 6px 20px rgba(0,0,0,0.55), 0 0 0 7px rgba(114,47,55,0.7), 0 0 18px rgba(114,47,55,0.5); }
.hotspot-pin.zona-23 { background: #B19CD9; color: #003D7A; box-shadow: 0 4px 12px rgba(0,0,0,0.4), 0 0 0 4px rgba(177,156,217,0.4); }
.hotspot-pin.zona-23:hover { box-shadow: 0 6px 20px rgba(0,0,0,0.55), 0 0 0 7px rgba(177,156,217,0.7), 0 0 18px rgba(177,156,217,0.5); }
.hotspot-pin.zona-20 { background: #0EA5E9; color: #fff; box-shadow: 0 4px 12px rgba(0,0,0,0.4), 0 0 0 4px rgba(14,165,233,0.4); }
.hotspot-pin.zona-20:hover { box-shadow: 0 6px 20px rgba(0,0,0,0.55), 0 0 0 7px rgba(14,165,233,0.7), 0 0 18px rgba(14,165,233,0.5); }
.hotspot-pin.zona-28 { background: #B5C99A; color: #003D7A; box-shadow: 0 4px 12px rgba(0,0,0,0.4), 0 0 0 4px rgba(181,201,154,0.4); }
.hotspot-pin.zona-28:hover { box-shadow: 0 6px 20px rgba(0,0,0,0.55), 0 0 0 7px rgba(181,201,154,0.7), 0 0 18px rgba(181,201,154,0.5); }
.hotspot-pin.zona-27 { background: #5B21B6; color: #fff; box-shadow: 0 4px 12px rgba(0,0,0,0.4), 0 0 0 4px rgba(91,33,182,0.4); }
.hotspot-pin.zona-27:hover { box-shadow: 0 6px 20px rgba(0,0,0,0.55), 0 0 0 7px rgba(91,33,182,0.7), 0 0 18px rgba(91,33,182,0.5); }
.hotspot-pin.zona-26 { background: #D946EF; color: #fff; box-shadow: 0 4px 12px rgba(0,0,0,0.4), 0 0 0 4px rgba(217,70,239,0.4); }
.hotspot-pin.zona-26:hover { box-shadow: 0 6px 20px rgba(0,0,0,0.55), 0 0 0 7px rgba(217,70,239,0.7), 0 0 18px rgba(217,70,239,0.5); }
.hotspot-pin.zona-24 { background: #F472B6; color: #003D7A; box-shadow: 0 4px 12px rgba(0,0,0,0.4), 0 0 0 4px rgba(244,114,182,0.4); }
.hotspot-pin.zona-24:hover { box-shadow: 0 6px 20px rgba(0,0,0,0.55), 0 0 0 7px rgba(244,114,182,0.7), 0 0 18px rgba(244,114,182,0.5); }
.hotspot-pin.zona-25 { background: #0D9488; color: #fff; box-shadow: 0 4px 12px rgba(0,0,0,0.4), 0 0 0 4px rgba(13,148,136,0.4); }
.hotspot-pin.zona-25:hover { box-shadow: 0 6px 20px rgba(0,0,0,0.55), 0 0 0 7px rgba(13,148,136,0.7), 0 0 18px rgba(13,148,136,0.5); }
.hotspot-pin.zona-29 { background: #1F2937; color: #fff; box-shadow: 0 4px 12px rgba(0,0,0,0.4), 0 0 0 4px rgba(31,41,55,0.4); }
.hotspot-pin.zona-29:hover { box-shadow: 0 6px 20px rgba(0,0,0,0.55), 0 0 0 7px rgba(31,41,55,0.7), 0 0 18px rgba(31,41,55,0.5); }
.hotspot-pin.zona-30 { background: #EF4444; color: #fff; box-shadow: 0 4px 12px rgba(0,0,0,0.4), 0 0 0 4px rgba(239,68,68,0.4); }
.hotspot-pin.zona-30:hover { box-shadow: 0 6px 20px rgba(0,0,0,0.55), 0 0 0 7px rgba(239,68,68,0.7), 0 0 18px rgba(239,68,68,0.5); }
.hotspot-pin.zona-31 { background: #6366F1; color: #fff; box-shadow: 0 4px 12px rgba(0,0,0,0.4), 0 0 0 4px rgba(99,102,241,0.4); }
.hotspot-pin.zona-31:hover { box-shadow: 0 6px 20px rgba(0,0,0,0.55), 0 0 0 7px rgba(99,102,241,0.7), 0 0 18px rgba(99,102,241,0.5); }
.hotspot-pin.zona-34 { background: #9333EA; color: #fff; box-shadow: 0 4px 12px rgba(0,0,0,0.4), 0 0 0 4px rgba(147,51,234,0.4); }
.hotspot-pin.zona-34:hover { box-shadow: 0 6px 20px rgba(0,0,0,0.55), 0 0 0 7px rgba(147,51,234,0.7), 0 0 18px rgba(147,51,234,0.5); }
.hotspot-pin.zona-36 { background: #A5F3FC; color: #003D7A; box-shadow: 0 4px 12px rgba(0,0,0,0.4), 0 0 0 4px rgba(165,243,252,0.4); }
.hotspot-pin.zona-36:hover { box-shadow: 0 6px 20px rgba(0,0,0,0.55), 0 0 0 7px rgba(165,243,252,0.7), 0 0 18px rgba(165,243,252,0.5); }
.hotspot-pin.zona-37 { background: #78350F; color: #fff; box-shadow: 0 4px 12px rgba(0,0,0,0.4), 0 0 0 4px rgba(120,53,15,0.4); }
.hotspot-pin.zona-37:hover { box-shadow: 0 6px 20px rgba(0,0,0,0.55), 0 0 0 7px rgba(120,53,15,0.7), 0 0 18px rgba(120,53,15,0.5); }
.hotspot-pin.zona-39 { background: #C2A878; color: #003D7A; box-shadow: 0 4px 12px rgba(0,0,0,0.4), 0 0 0 4px rgba(194,168,120,0.4); }
.hotspot-pin.zona-39:hover { box-shadow: 0 6px 20px rgba(0,0,0,0.55), 0 0 0 7px rgba(194,168,120,0.7), 0 0 18px rgba(194,168,120,0.5); }
.hotspot-pin.zona-38 { background: #F59E0B; color: #003D7A; box-shadow: 0 4px 12px rgba(0,0,0,0.4), 0 0 0 4px rgba(245,158,11,0.4); }
.hotspot-pin.zona-38:hover { box-shadow: 0 6px 20px rgba(0,0,0,0.55), 0 0 0 7px rgba(245,158,11,0.7), 0 0 18px rgba(245,158,11,0.5); }
.hotspot-pin.zona-40 { background: #84CC16; color: #003D7A; box-shadow: 0 4px 12px rgba(0,0,0,0.4), 0 0 0 4px rgba(132,204,22,0.4); }
.hotspot-pin.zona-40:hover { box-shadow: 0 6px 20px rgba(0,0,0,0.55), 0 0 0 7px rgba(132,204,22,0.7), 0 0 18px rgba(132,204,22,0.5); }

/* Animacion de pulso: solo cuando hover/active (cuando esta apagado, no pulsa) */
.hotspot-pin::after {
  content: ''; position: absolute; inset: -8px; border-radius: 50%;
  border: 2px solid currentColor;
  opacity: 0;
  transition: opacity 220ms ease;
}
.hotspot-pin:hover::after,
.hotspot-pin.active::after {
  opacity: 0.5;
  animation: pin-pulse 2s ease-out infinite;
}
@keyframes pin-pulse { 0% { transform: scale(0.8); opacity: 0.6; } 100% { transform: scale(1.5); opacity: 0; } }

.hotspots-hidden .hotspot-pin { opacity: 0; pointer-events: none; transform: translate(-50%, -50%) scale(0.5); }

/* ===== HOTSPOT PANEL (lateral derecho) ===== */
.hotspot-panel {
  position: absolute; top: 80px; right: 24px;
  width: 340px; max-height: 70vh;
  background: rgba(10,14,26,0.94); backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 16px; padding: 24px;
  z-index: 25;
  overflow-y: auto;
  transform: translateX(120%);
  transition: transform 350ms cubic-bezier(.2,.7,.3,1);
}
.hotspot-panel.open { transform: translateX(0); }
.hotspot-panel-empty { text-align: center; padding: 16px 8px; color: rgba(255,255,255,0.7); }
.hotspot-panel-icon { font-size: 42px; margin-bottom: 12px; }
.hotspot-panel-empty h3 { font-size: 16px; color: #FFB81C; margin-bottom: 6px; font-weight: 700; }
.hotspot-panel-empty p { font-size: 13px; line-height: 1.5; }

.hotspot-panel-content { }
.hpc-tag { display: inline-block; padding: 4px 12px; border-radius: 999px; font-size: 10px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; margin-bottom: 8px; }
.hpc-tag.deportivo { background: rgba(255,107,53,0.2); color: #FF6B35; }
.hpc-tag.servicios { background: rgba(255,184,28,0.2); color: #FFB81C; }
.hpc-tag.académico, .hpc-tag.academico { background: rgba(91,143,214,0.2); color: #87B0E5; }
.hpc-tag.accesos { background: rgba(135,176,229,0.2); color: #87B0E5; }
.hpc-tag.especial { background: rgba(197,134,255,0.2); color: #C586FF; }
.hpc-tag.intro { background: rgba(255,255,255,0.15); color: #fff; }
.hpc-tag.zona-6-7 { background: rgba(74,222,128,0.2); color: #4ADE80; }
.hpc-tag.zona-8 { background: rgba(132,204,22,0.2); color: #84CC16; }
.hpc-tag.zona-9 { background: rgba(59,130,246,0.2); color: #3B82F6; }
.hpc-tag.zona-12 { background: rgba(249,115,22,0.2); color: #F97316; }
.hpc-tag.zona-15 { background: rgba(107,124,50,0.2); color: #6B7C32; }
.hpc-tag.zona-17 { background: rgba(114,47,55,0.2); color: #722F37; }
.hpc-tag.zona-23 { background: rgba(177,156,217,0.2); color: #B19CD9; }
.hpc-tag.zona-20 { background: rgba(14,165,233,0.2); color: #0EA5E9; }
.hpc-tag.zona-28 { background: rgba(181,201,154,0.2); color: #B5C99A; }
.hpc-tag.zona-27 { background: rgba(91,33,182,0.2); color: #5B21B6; }
.hpc-tag.zona-26 { background: rgba(217,70,239,0.2); color: #D946EF; }
.hpc-tag.zona-24 { background: rgba(244,114,182,0.2); color: #F472B6; }
.hpc-tag.zona-25 { background: rgba(13,148,136,0.2); color: #0D9488; }
.hpc-tag.zona-29 { background: rgba(31,41,55,0.2); color: #1F2937; }
.hpc-tag.zona-30 { background: rgba(239,68,68,0.2); color: #EF4444; }
.hpc-tag.zona-31 { background: rgba(99,102,241,0.2); color: #6366F1; }
.hpc-tag.zona-34 { background: rgba(147,51,234,0.2); color: #9333EA; }
.hpc-tag.zona-36 { background: rgba(165,243,252,0.2); color: #0E7490; }
.hpc-tag.zona-37 { background: rgba(120,53,15,0.2); color: #78350F; }
.hpc-tag.zona-39 { background: rgba(194,168,120,0.2); color: #92692E; }
.hpc-tag.zona-38 { background: rgba(245,158,11,0.2); color: #F59E0B; }
.hpc-tag.zona-40 { background: rgba(132,204,22,0.2); color: #65A30D; }
.hpc-id { font-size: 11px; color: rgba(255,255,255,0.5); margin-bottom: 4px; font-weight: 600; }
.hpc-title { font-size: 20px; font-weight: 800; color: #fff; margin-bottom: 6px; line-height: 1.2; }
.hpc-desc { font-size: 13px; color: rgba(255,255,255,0.8); line-height: 1.5; margin-top: 12px; }
.hpc-actions { display: flex; gap: 8px; margin-top: 16px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,0.1); }
.hpc-btn { flex: 1; padding: 10px 14px; border-radius: 8px; font-size: 12px; font-weight: 600; background: rgba(255,184,28,0.15); border: 1px solid rgba(255,184,28,0.3); color: #FFB81C; text-align: center; transition: all 180ms ease; cursor: pointer; }
.hpc-btn:hover { background: rgba(255,184,28,0.25); }
.hpc-btn.primary { background: #FFB81C; color: #003D7A; border-color: #FFB81C; }
.hpc-btn.primary:hover { background: #FFD66B; }

@media (max-width: 900px) { .hotspot-panel { top: 70px; right: 12px; left: 12px; width: auto; max-height: 60vh; } }

/* ===== HOTSPOT COUNTER (badge) ===== */
.hotspot-counter {
  position: absolute; top: 80px; left: 50%; transform: translateX(-50%);
  z-index: 22;
  pointer-events: none;
  display: flex; align-items: center; gap: 8px;
  padding: 8px 16px; border-radius: 999px;
  background: rgba(0,0,0,0.6); backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.12);
  font-size: 12px; color: rgba(255,255,255,0.85);
  animation: hint-fade 600ms ease 800ms backwards;
}
.hotspot-counter .dot { width: 8px; height: 8px; border-radius: 50%; background: #FFB81C; box-shadow: 0 0 8px rgba(255,184,28,0.6); }
.hotspot-counter strong { color: #FFB81C; font-weight: 800; }
.hotspot-counter[hidden] { display: none; }

/* ===== HINT INICIAL ===== */
.hint { position: absolute; bottom: 22%; left: 50%; transform: translateX(-50%); padding: 12px 18px; border-radius: 10px; background: rgba(0,0,0,0.55); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,0.12); z-index: 18; animation: hint-fade 400ms ease 400ms backwards; pointer-events: auto; cursor: pointer; transition: opacity 300ms; }
.hint:hover { opacity: 0.6; }
.hint-inner { display: flex; flex-direction: column; gap: 8px; }
.hint-row { display: flex; align-items: center; gap: 10px; }
.hint-row span:not(.key) { font-size: 13px; color: rgba(255,255,255,0.85); }
.key { display: inline-flex; align-items: center; justify-content: center; min-width: 30px; height: 30px; padding: 0 10px; border-radius: 6px; background: rgba(255,255,255,0.15); border: 1px solid rgba(255,255,255,0.2); font-size: 12px; font-weight: 700; }
@keyframes hint-fade { from { opacity: 0; transform: translateX(-50%) translateY(8px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } }

/* ===== OSD NAVIGATOR ===== */
.openseadragon-container .navigator { border: 1px solid rgba(255,255,255,0.2) !important; border-radius: 8px !important; background: rgba(0,0,0,0.7) !important; }

/* ===== RESPONSIVE ===== */
@media (max-width: 900px) {
  .topbar { padding: 14px 16px; }
  .topbar-brand strong { font-size: 12px; }
  .topbar-brand span { display: none; }
  .topbar-counter { padding: 8px 12px; }
  .topbar-counter strong { font-size: 15px; }
  .nav-arrow { width: 40px; height: 40px; }
  .nav-prev { left: 16px; } .nav-next { right: 16px; }
  .bottombar { padding: 18px 18px 20px; flex-direction: column; align-items: stretch; gap: 14px; }
  .bottombar-controls { justify-content: center; }
  .minimap { display: none; }
  #info-title { font-size: 20px; }
}
@media (max-width: 600px) { .topbar-close span { display: none; } .topbar-close { padding: 10px; } .hint { display: none; } }

/* ============================================================
   UPD TOUR — Estilos especificos (limpio, sin Smart Tour)
   ============================================================ */