/* ==========================================================================
   RECORRIDO GUIADO — estilos
   --------------------------------------------------------------------------
   Usa sólo los tokens de dashboard.css, así el tema oscuro funciona solo.
   Todo va bajo .tour-raiz para no tocar nada del resto de la app.
   ========================================================================== */

/* Por encima de todo lo que la app puede tener abierto: los modales llegan a
   250 y la paleta de comandos a 350. El recorrido tiene que quedar arriba. */
.tour-raiz {
  position: fixed;
  inset: 0;
  z-index: 400;
}

/* El recorte. La sombra de extensión enorme es la que oscurece la pantalla
   entera MENOS este rectángulo: por eso el elemento en sí es transparente y no
   necesita ningún panel alrededor.
   `pointer-events: none` deja ver el objetivo iluminado pero no clickearlo:
   el recorrido guía, no delega el manejo de la app en el medio del paso. */
.tour-recorte {
  position: absolute;
  border-radius: 8px;
  box-shadow: 0 0 0 9999px rgba(10, 8, 6, 0.72);
  border: 2px solid var(--accent);
  pointer-events: none;
  transition: top 180ms ease, left 180ms ease, width 180ms ease, height 180ms ease;
}
/* En los pasos sin objetivo se oscurece todo por igual: el recorte se lleva a
   una esquina con tamaño cero, y queda sólo la sombra. */
.tour-recorte.oculto {
  top: 50%; left: 50%;
  width: 0; height: 0;
  border-color: transparent;
  border-radius: 0;
}

.tour-card {
  position: absolute;
  width: min(400px, calc(100vw - 32px));
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 18px 20px 16px;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.4);
  transition: top 180ms ease, left 180ms ease;
}
/* Centrada sólo cambia el ancho: la posición la calcula tour.js en píxeles,
   igual que en los pasos con objetivo. Mezclar píxeles y porcentajes hacía que
   la transición no completara y la tarjeta quedara corrida. */
.tour-card-centrada {
  width: min(470px, calc(100vw - 32px));
}

.tour-paso {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 6px;
}
.tour-card h3 {
  font-family: 'Fraunces', serif;
  font-size: 19px;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 10px;
  padding-right: 22px;   /* deja lugar a la cruz */
}
.tour-texto {
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink-2);
}
.tour-texto strong { color: var(--ink); font-weight: 600; }

.tour-acciones {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 18px;
}
.tour-nav { display: flex; gap: 8px; }

.tour-btn {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 12px;
  font-weight: 500;
  padding: 7px 14px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--ink-2);
  cursor: pointer;
}
.tour-btn:hover { border-color: var(--muted); color: var(--ink); }
.tour-btn:disabled { opacity: 0.35; cursor: default; }
.tour-btn:disabled:hover { border-color: var(--border); color: var(--ink-2); }
.tour-btn.tour-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-dark-text);
  font-weight: 600;
}
.tour-btn.tour-primary:hover { filter: brightness(1.06); color: var(--on-dark-text); }
/* Salir se ve como lo que es: una salida, no una acción del recorrido. */
.tour-btn.tour-salir { border-color: transparent; color: var(--muted); }
.tour-btn.tour-salir:hover { color: var(--red); border-color: transparent; }

.tour-x {
  position: absolute;
  top: 10px; right: 12px;
  background: none;
  border: none;
  font-size: 22px;
  line-height: 1;
  color: var(--muted);
  cursor: pointer;
  padding: 2px 6px;
}
.tour-x:hover { color: var(--ink); }

/* Con el recorrido abierto no se scrollea el fondo: el recorte quedaría
   apuntando a un lugar que ya no es el del objetivo. */
body.tour-activo { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .tour-recorte, .tour-card { transition: none; }
}