/* GUÍAS INTERACTIVAS (spotlight) — velo con "agujero" iluminado + globito de paso.
   Motor en tours.js. Todo sale de variables del sistema (colors_and_type.css);
   el z-index va como número, igual que en el resto del proyecto. */

/* El contenedor NO captura clics; solo bloquean sus hijos que lo pidan (el velo pintado
   en pasos exactos, y el globito). Así el clic atraviesa el hueco hasta el elemento real. */
.tour-root{ position:fixed; inset:0; z-index:100000; pointer-events:none; }

/* El velo cubre toda la pantalla; el agujero (fill-rule evenodd) deja pasar el
   clic al elemento resaltado. Solo la zona oscura bloquea el mouse. */
.tour-mask{ position:fixed; inset:0; width:100%; height:100%; pointer-events:none; }
.tour-dim{ fill:rgba(15,44,79,.55); pointer-events:auto; }
/* En pasos de elección el velo NO bloquea: hay que poder tocar cualquiera de la lista.
   Tampoco en los "libres" (completar un formulario) ni cuando el panel rechazó la acción
   (ej. "Poné un título"): hay que poder ir a corregirlo. */
.tour-root.elegir .tour-dim,
.tour-root.libre .tour-dim{ pointer-events:none; }
.tour-anillo{
  fill:none; pointer-events:none;
  stroke:var(--pame-teal, #0fa8b8); stroke-width:2.5;
  filter:drop-shadow(0 0 6px rgba(15,168,184,.55));
  animation:tour-latido 1.6s ease-in-out infinite;
}
@keyframes tour-latido{
  0%,100%{ stroke-opacity:1; }
  50%    { stroke-opacity:.35; }
}

/* Globito con el texto del paso. */
.tour-tip{
  position:fixed; pointer-events:auto;
  width:min(320px, calc(100vw - 28px));
  background:var(--pame-bg, #fff);
  border:1px solid var(--pame-line, #e3e8ef);
  border-radius:var(--r-md, 14px);
  box-shadow:var(--shadow-lg);
  overflow:hidden;
  animation:tour-aparecer .18s ease-out both;
}
@keyframes tour-aparecer{
  from{ opacity:0; transform:translateY(6px) scale(.98); }
  to  { opacity:1; transform:none; }
}
.tour-tip-cont{ padding:var(--sp-4, 16px) var(--sp-4, 16px) var(--sp-3, 12px); }
.tour-paso{
  display:block; font-size:var(--fs-11, 13px); font-weight:700;
  text-transform:uppercase; letter-spacing:.05em; color:var(--pame-teal, #0fa8b8);
  margin-bottom:var(--sp-1, 4px);
}
.tour-tit{ margin:0 0 var(--sp-1, 4px); font-size:var(--fs-16, 18px); color:var(--fg-1); }
.tour-txt{ margin:0; font-size:var(--fs-14, 16px); line-height:1.45; color:var(--fg-2); }
/* Aviso en rojo: falta completar el campo, o el panel no pudo hacer la acción. */
.tour-aviso{
  margin:var(--sp-2, 8px) 0 0; font-size:var(--fs-13, 15px); font-weight:600;
  line-height:var(--lh-snug); color:var(--pame-danger);
}
.tour-acc{
  display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3, 12px);
  padding:var(--sp-3, 12px) var(--sp-4, 16px);
  border-top:1px solid var(--pame-line, #e3e8ef);
  background:var(--pame-bg-soft, #f6f8fb);
}
.tour-saltar{
  background:none; border:none; cursor:pointer; padding:6px 2px;
  font:inherit; font-size:var(--fs-13, 15px); color:var(--fg-3);
}
.tour-saltar:hover{ color:var(--fg-1); text-decoration:underline; }
.tour-next{
  cursor:pointer; font:inherit; font-weight:700; font-size:var(--fs-14, 16px);
  height:var(--ctl-h, 40px); padding:0 var(--sp-4, 16px);
  border:none; border-radius:var(--r-sm, 10px);
  background:var(--pame-blue-900, #0f2c4f); color:#fff;
}
.tour-next:hover{ background:var(--pame-blue-700, #14477d); }

/* Botón "Mostrame cómo" que ofrece el asistente debajo de una respuesta. */
.tour-cta{
  display:inline-flex; align-items:center; gap:6px; margin-top:var(--sp-2, 8px);
  cursor:pointer; font:inherit; font-weight:700; font-size:var(--fs-13, 15px);
  padding:8px 14px; border-radius:var(--r-sm, 10px);
  border:1px solid var(--pame-teal, #0fa8b8);
  background:var(--pame-teal, #0fa8b8); color:#fff;
}
.tour-cta:hover{ filter:brightness(1.05); }
a.tour-cta{ text-decoration:none; }   /* en el Centro de ayuda es un link al panel (#tour=id) */