/* Motor de tutoriais guiados da GEGE-IA ("coach marks") — pedido Jonatan
   12/08/2026. Tela escurecida + recorte iluminado no elemento + balão da GEGE
   que explica cada passo. Funciona em qualquer tela (carregado global no
   core/base.html). */

/* Recorte iluminado: a "escuridão" é o box-shadow gigante deste retângulo.
   pointer-events:none → o clique passa direto pro elemento real embaixo. */
#gegeTourSpot {
  position: fixed;
  z-index: 20000;
  border-radius: 10px;
  pointer-events: none;
  box-shadow: 0 0 0 9999px rgba(15, 23, 42, .74);
  transition: top .25s ease, left .25s ease, width .25s ease, height .25s ease;
}
#gegeTourSpot::after {                 /* anel pulsante p/ chamar o olho */
  content: "";
  position: absolute; inset: -4px;
  border: 2px solid #22c55e;
  border-radius: 12px;
  animation: gtPulse 1.6s ease-in-out infinite;
}
@keyframes gtPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, .55); }
  50%      { box-shadow: 0 0 0 8px rgba(34, 197, 94, 0); }
}

#gegeTourBubble {
  position: fixed;
  z-index: 20001;
  width: min(340px, calc(100vw - 32px));
  background: #ffffff;
  color: #1f2937;
  border-radius: 16px;
  box-shadow: 0 14px 46px rgba(0, 0, 0, .38);
  padding: 14px 16px 12px;
  font-size: .92rem;
  line-height: 1.45;
  animation: gtIn .2s ease;
}
@keyframes gtIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

#gegeTourBubble .gt-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
#gegeTourBubble .gt-av { width: 30px; height: 30px; border-radius: 50%; flex: 0 0 auto; }
#gegeTourBubble .gt-title { font-weight: 700; font-size: .9rem; flex: 1 1 auto; color: #0f172a; }
#gegeTourBubble .gt-close {
  background: none; border: none; cursor: pointer; font-size: 1rem;
  line-height: 1; padding: 2px 4px; border-radius: 6px; color: #64748b;
}
#gegeTourBubble .gt-close:hover { background: #f1f5f9; }
#gegeTourBubble .gt-body { margin: 0 0 10px; }
#gegeTourBubble .gt-body strong { color: #0f172a; }
#gegeTourBubble .gt-foot { display: flex; align-items: center; gap: 8px; }
#gegeTourBubble .gt-progress { font-size: .78rem; color: #94a3b8; flex: 1 1 auto; }
#gegeTourBubble .gt-hint { font-size: .82rem; color: #16a34a; font-weight: 600; flex: 1 1 auto; }
#gegeTourBubble .gt-next {
  background: #16a34a; color: #fff; border: none; border-radius: 9px;
  padding: 6px 14px; font-weight: 600; font-size: .85rem; cursor: pointer;
}
#gegeTourBubble .gt-next:hover { background: #15803d; }

/* seta do balão apontando pro recorte */
#gegeTourBubble::before {
  content: ""; position: absolute; width: 14px; height: 14px;
  background: #fff; transform: rotate(45deg);
}
#gegeTourBubble.gt-arrow-up::before    { top: -7px;    left: 24px; }
#gegeTourBubble.gt-arrow-down::before  { bottom: -7px; left: 24px; }
#gegeTourBubble.gt-arrow-left::before  { left: -7px;   top: 24px; }
#gegeTourBubble.gt-arrow-right::before { right: -7px;  top: 24px; }