/* ============================================================================
   Tour guiado (spotlight / coach-marks) — Radicampo
   Capa oscura con un "hueco" iluminado sobre el elemento señalado + globo que
   lo explica. Sin dependencias. Respeta el tema (variables de style.css) y
   prefers-reduced-motion. Cumple la CSP ('self' + estilos inline permitidos).
   ============================================================================ */

/* Región solo para lector de pantalla (anuncia el paso). Oculta a la vista. */
.tour-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* La cortina que bloquea clics accidentales en el resto de la pantalla.
   Es transparente: el oscurecido lo pinta la enorme box-shadow de #tourSpot. */
#tourVeil {
  position: fixed;
  inset: 0;
  z-index: 9998;
  cursor: default;
}

/* El "hueco": un rectángulo transparente cuya sombra gigante oscurece todo lo
   demás y cuyo anillo resalta el elemento señalado. No captura el puntero
   (los clics caen al velo de abajo, que los bloquea). */
#tourSpot {
  position: fixed;
  z-index: 9999;
  border-radius: 12px;
  pointer-events: none;
  box-shadow:
    0 0 0 3px var(--verde),
    0 0 0 6px rgba(255, 255, 255, 0.25),
    0 0 0 9999px rgba(12, 18, 14, 0.62);
  transition: all 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Anillo que "late" para atraer la vista al elemento. */
#tourSpot::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 14px;
  border: 2px solid var(--verde);
  opacity: 0.9;
  animation: tourPulso 1.8s ease-out infinite;
}

@keyframes tourPulso {
  0%   { box-shadow: 0 0 0 0 rgba(31, 107, 67, 0.45); }
  70%  { box-shadow: 0 0 0 12px rgba(31, 107, 67, 0); }
  100% { box-shadow: 0 0 0 0 rgba(31, 107, 67, 0); }
}

/* El globo con la explicación. */
#tourGlobo {
  position: fixed;
  z-index: 10000;
  width: min(340px, calc(100vw - 32px));
  box-sizing: border-box;
  background: var(--papel);
  color: var(--tinta);
  border: 1px solid var(--linea);
  border-radius: 14px;
  padding: 18px 18px 14px;
  box-shadow: 0 18px 44px rgba(12, 18, 14, 0.34);
  transition: top 0.28s cubic-bezier(0.4, 0, 0.2, 1),
              left 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}

#tourGlobo .tour-eyebrow {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--verde);
  font-weight: 700;
  margin-bottom: 6px;
}

#tourGlobo h4 {
  margin: 0 0 8px;
  font-size: 16.5px;
  line-height: 1.3;
  color: var(--tinta);
  text-wrap: balance;
}

#tourGlobo p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--tinta);
  opacity: 0.9;
}

/* Flechita del globo hacia el elemento (se coloca por JS con clases lado-*). */
#tourGlobo .tour-flecha {
  position: absolute;
  width: 14px;
  height: 14px;
  background: var(--papel);
  border: 1px solid var(--linea);
  transform: rotate(45deg);
}
#tourGlobo.lado-abajo  .tour-flecha { top: -8px;  border-right: none; border-bottom: none; }
#tourGlobo.lado-arriba .tour-flecha { bottom: -8px; border-left: none; border-top: none; }
#tourGlobo.lado-derecha .tour-flecha { left: -8px; border-top: none; border-right: none; }
#tourGlobo.lado-izquierda .tour-flecha { right: -8px; border-bottom: none; border-left: none; }
#tourGlobo.centrado .tour-flecha { display: none; }

/* Pie: progreso + botones. */
#tourGlobo .tour-pie {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 16px;
}

#tourGlobo .tour-puntos {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
}
#tourGlobo .tour-punto {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--linea-2);
}
#tourGlobo .tour-punto.on {
  background: var(--verde);
}

#tourGlobo .tour-botones {
  display: flex;
  gap: 8px;
  align-items: center;
}

#tourGlobo button {
  font: inherit;
  cursor: pointer;
  border-radius: 9px;
  border: 1px solid transparent;
  padding: 7px 14px;
  font-size: 13px;
  font-weight: 600;
}
#tourGlobo .tour-siguiente {
  background: #166b45;   /* fijo en ambos temas: blanco sobre este verde da 6,6:1 (axe-core, WCAG AA) */
  color: #fff;
}
#tourGlobo .tour-siguiente:hover { filter: brightness(1.06); }
#tourGlobo .tour-atras {
  background: transparent;
  color: var(--tinta);
  border-color: var(--linea);
}
#tourGlobo .tour-atras:hover { background: rgba(0, 0, 0, 0.04); }
html[data-tema="oscuro"] #tourGlobo .tour-atras:hover { background: rgba(255, 255, 255, 0.06); }

/* Botón "Saltar" arriba a la derecha del globo. */
#tourGlobo .tour-saltar {
  position: absolute;
  top: 10px;
  right: 12px;
  background: transparent;
  border: none;
  color: var(--gris);
  font-size: 12px;
  padding: 2px 4px;
}
#tourGlobo .tour-saltar:hover { color: var(--tinta); text-decoration: underline; }

/* Foco visible para accesibilidad (teclado). */
#tourGlobo button:focus-visible {
  outline: 2px solid var(--verde);
  outline-offset: 2px;
}

/* Respeta a quien pidió menos movimiento. */
@media (prefers-reduced-motion: reduce) {
  #tourSpot,
  #tourGlobo { transition: none; }
  #tourSpot::after { animation: none; }
}