/* ──────────────────────────────────────────────────────────────────────────
   TOUR GUIADO — motor visual (spotlight + balão + lista por setor).
   Convive com o chat: o botão mora no MESMO rodapé da sidebar (#tourLauncher,
   irmão do #chatLauncher) e reusa a linguagem do .swc-lbtn pra não destoar.
   NUNCA abre sozinho: só por clique no ▶ (decisão do Rafael até ele revisar).
   ────────────────────────────────────────────────────────────────────────── */

/* ── Botão no rodapé da sidebar ──
   Reusa .swc-lbtn do chat (mesma caixa do sino). Aqui só o que é do tour: SEM flex-grow e
   sem texto, pra não forçar largura e vazar da sidebar (foi o que quebrou na 1ª versão). */
.swt-lbtn { flex: 0 0 auto; }
.swt-lbtn[disabled] { opacity: .45; cursor: default; }

/* ── Menu com os tours disponíveis (abre pra cima, ancorado no botão) ── */
.swt-pop {
  position: fixed; z-index: 4000; width: 316px; max-height: 60vh; overflow: auto;
  background: #14343b; color: #eaf3f4; border: 1px solid rgba(255,255,255,.12);
  border-radius: 12px; box-shadow: 0 18px 44px rgba(0,0,0,.42); padding: 10px;
}
.swt-pop h4 { font-size: 12.5px; margin: 2px 4px 8px; color: #bfe0e2; font-weight: 700; letter-spacing: .3px; }
.swt-grp { font-size: 10px; text-transform: uppercase; letter-spacing: .6px; color: #7fa6ab; margin: 9px 4px 4px; font-weight: 700; }
.swt-item {
  display: flex; align-items: flex-start; gap: 9px; width: 100%; text-align: left;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); color: inherit;
  border-radius: 9px; padding: 8px 10px; margin-bottom: 6px; cursor: pointer; font: inherit;
  transition: background .15s;
}
.swt-item:hover { background: rgba(255,255,255,.12); }
.swt-item .swt-play { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%; background: #2fd6c3; color: #08292e;
  display: inline-flex; align-items: center; justify-content: center; font-size: 10px; margin-top: 1px; }
.swt-item b { display: block; font-size: 12.8px; font-weight: 700; line-height: 1.25; }
.swt-item span { display: block; font-size: 11.2px; color: #9fc0c4; margin-top: 2px; line-height: 1.3; }
.swt-vazio { font-size: 12px; color: #9fc0c4; padding: 10px 6px; line-height: 1.45; }

/* ── Spotlight: 4 divs escurecem o redor do alvo (buraco real, sem clip-path) ── */
.swt-mask { position: fixed; z-index: 4100; background: rgba(6,26,30,.62); transition: all .18s ease; }
.swt-ring {
  position: fixed; z-index: 4101; border-radius: 10px; pointer-events: none;
  box-shadow: 0 0 0 3px #2fd6c3, 0 0 0 9px rgba(47,214,195,.22); transition: all .18s ease;
}

/* ── Balão do passo ── */
.swt-bal {
  position: fixed; z-index: 4102; width: 330px; max-width: calc(100vw - 24px);
  background: #fff; color: #16292c; border-radius: 12px; box-shadow: 0 20px 48px rgba(0,0,0,.34);
  padding: 14px 15px 12px; font-size: 13px; line-height: 1.5;
}
.swt-bal .swt-passo { font-size: 10.5px; text-transform: uppercase; letter-spacing: .5px; color: #7c9296; font-weight: 700; }
.swt-bal h3 { font-size: 15px; margin: 3px 0 6px; color: #0f4a52; line-height: 1.3; }
.swt-bal p { margin: 0 0 4px; color: #34474a; }
.swt-bal p + p { margin-top: 7px; }
.swt-acts { display: flex; align-items: center; gap: 8px; margin-top: 12px; }
.swt-dots { display: flex; gap: 4px; margin-right: auto; }
.swt-dot { width: 6px; height: 6px; border-radius: 50%; background: #d3dede; }
.swt-dot.on { background: #2fd6c3; }
.swt-btn { border: 1px solid #cfdcde; background: #fff; color: #24484f; border-radius: 8px; padding: 6px 12px;
  font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.swt-btn:hover { background: #f2f8f8; }
.swt-btn.pri { background: #14606a; border-color: #14606a; color: #fff; }
.swt-btn.pri:hover { background: #0f4a52; }
.swt-x { position: absolute; top: 9px; right: 10px; border: 0; background: none; color: #9aacae; cursor: pointer;
  font-size: 16px; line-height: 1; padding: 2px 4px; }
.swt-x:hover { color: #16292c; }
.swt-nota { margin-top: 9px; padding-top: 8px; border-top: 1px solid #eef3f3; font-size: 11.5px; color: #7c9296; }

@media (max-width: 720px) {
  .swt-bal { width: calc(100vw - 24px); }
  .swt-pop { width: calc(100vw - 24px); }
}