/* ═══════════════════════════════════════════════════════════
   TOUR GUIADO DO DEMO — só carregado com DEMO_MODE
   (base.html e o login.html de identidade do prevsis-demo).
   Camadas 1000–1002: acima da .mobile-nav (300) e do .modal-overlay
   (500), abaixo do .skip-link (9999). Cores pelos tokens, então o
   balão acompanha o tema escuro sem regra própria.
   ═══════════════════════════════════════════════════════════ */
:root{--tour-veu:rgba(28,20,16,.62)}
html.dark-mode{--tour-veu:rgba(0,0,0,.68)}

/* Botão "Tour guiado" do topo */
.tour-rever svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:680px){.tour-rever span{display:none}}

/* Camada: bloqueia cliques na página. Quem esmaece é a sombra do foco —
   ou a própria camada, quando o passo não tem alvo visível. */
.tour-camada{position:fixed;inset:0;z-index:1000}
.tour-camada--escura{background:var(--tour-veu)}
.tour-foco{position:fixed;z-index:1001;pointer-events:none;border-radius:var(--r);
  box-shadow:0 0 0 2px var(--dourado),0 0 0 200vmax var(--tour-veu);
  transition:top .25s ease,left .25s ease,width .25s ease,height .25s ease}
.tour-foco[hidden]{display:none}

/* Balão */
.tour-balao{position:fixed;z-index:1002;width:340px;max-width:calc(100vw - 32px);
  background:var(--branco);color:var(--texto);
  border:1px solid var(--borda);border-color:color-mix(in srgb,var(--dourado) 55%,transparent);
  border-radius:var(--r-lg);box-shadow:0 18px 44px rgba(0,0,0,.28);
  padding:18px 20px 14px;font-family:'Outfit',sans-serif;animation:tour-surgir .2s ease}
.tour-balao [hidden]{display:none !important}
.tour-progresso{font-size:11px;font-weight:600;letter-spacing:.8px;text-transform:uppercase;color:var(--dourado);margin-bottom:2px}
.tour-titulo{font-family:'Newsreader',serif;font-size:var(--fs-h2);font-weight:600;line-height:1.25;color:var(--vinho-dark)}
.tour-texto{font-size:var(--fs-body);line-height:1.6;color:var(--texto-mid);margin:6px 0 14px}
.tour-acoes{display:flex;align-items:center;gap:8px}
.tour-nav{display:flex;gap:8px;margin-left:auto}

/* Seta: um quadrado girado, com --tour-seta (px) definido pelo JS */
.tour-balao::before{content:'';position:absolute;width:14px;height:14px;display:none;
  background:inherit;border:inherit;transform:rotate(45deg)}
.tour-balao--direita::before{display:block;left:-8px;top:calc(var(--tour-seta,50%) - 7px);border-top:0;border-right:0}
.tour-balao--abaixo::before{display:block;top:-8px;left:calc(var(--tour-seta,50%) - 7px);border-right:0;border-bottom:0}
.tour-balao--acima::before{display:block;bottom:-8px;left:calc(var(--tour-seta,50%) - 7px);border-top:0;border-left:0}

@keyframes tour-surgir{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.tour-foco,.tour-balao{transition:none;animation:none}}

/* ── Login do prevsis-demo: balão das credenciais ──────────────
   Fundo esmaecido, cartão aceso e o balão apontando para os campos.
   Não bloqueia nada: dá para digitar sem fechar o balão. O cartão do
   login é sempre claro, então o balão também — em qualquer tema. */
.tour-login-veu{position:fixed;inset:0;background:rgba(0,0,0,.45);pointer-events:none}
.tour-login-aceso{z-index:1;outline:2px solid rgba(196,164,90,.6);outline-offset:5px}
.tour-login-campos{position:relative}
.tour-balao.tour-balao--login{position:relative;z-index:auto;width:auto;max-width:none;
  margin-bottom:16px;padding:12px 14px;background:#fff;color:#4a3a2a;
  border-color:rgba(196,164,90,.6);box-shadow:0 6px 18px rgba(0,0,0,.12)}
.tour-balao--login .tour-titulo{font-size:1.2rem;color:var(--cor-primaria,#6B1A1A)}
.tour-balao--login .tour-texto{margin:2px 0 10px;font-size:.95rem;line-height:1.5;color:#5a4632}
.tour-balao--login .tour-texto strong{color:var(--cor-primaria,#6B1A1A)}
.tour-login-preencher{background:var(--cor-primaria,#6B1A1A);color:#fff;border-color:var(--cor-primaria,#6B1A1A)}
.tour-login-preencher:hover{filter:brightness(1.12)}
/* Estreito: o balão fica no fluxo, acima dos campos, com a seta para baixo. */
.tour-balao--login::before{display:block;bottom:-8px;left:28px;border-top:0;border-left:0}
/* Largo: sobra espaço ao lado do cartão (680px), e o balão sai para a
   direita com a seta apontando para o campo Usuário. 52px = padding do
   lado do formulário (34px) + o vão até o balão (18px). */
@media (min-width:1280px){
  .tour-balao.tour-balao--login{position:absolute;left:calc(100% + 52px);top:4px;width:250px;margin:0;
    box-shadow:0 18px 44px rgba(0,0,0,.35)}
  .tour-balao--login::before{bottom:auto;top:30px;left:-8px;border-top:0;border-right:0;border-left:inherit;border-bottom:inherit}
}