/* Tutoriais guiados por tela (motor em /assets/js/core/tutorial.js). Usa os tokens de base.css: segue o tema escuro. */

/* Camada transparente que impede cliques na página durante o tour. */
.tour-bloqueio{position:fixed;inset:0;z-index:1060;background:transparent}

/* Recorte: a sombra enorme escurece tudo em volta do alvo; o "buraco" deixa o alvo visível. */
.tour-recorte{position:fixed;z-index:1061;pointer-events:none;border-radius:6px;
  box-shadow:0 0 0 9999px rgba(8,12,22,.58);outline:2px solid var(--g-destaque);outline-offset:0;
  transition:left .2s ease,top .2s ease,width .2s ease,height .2s ease}
.tour-recorte.tour-sem-alvo{outline:none}
[data-theme="dark"] .tour-recorte{box-shadow:0 0 0 9999px rgba(0,0,0,.72)}

/* Balão */
.tour-balao{position:fixed;z-index:1062;left:12px;top:12px;width:350px;max-width:calc(100vw - 24px);
  background:var(--g-sup);color:var(--g-texto);border:1px solid var(--g-linha);border-radius:8px;
  box-shadow:0 .75rem 2.5rem rgba(4,9,20,.28);padding:14px 16px 12px;font-size:.92rem;line-height:1.45;
  transition:left .2s ease,top .2s ease}
.tour-balao:focus{outline:none}
.tour-balao:focus-visible{box-shadow:0 0 0 3px var(--g-foco),0 .75rem 2.5rem rgba(4,9,20,.28)}
.tour-topo{display:flex;align-items:center;gap:8px}
.tour-contador{font-size:.75rem;font-weight:600;letter-spacing:.02em;color:var(--g-destaque-texto);text-transform:uppercase}
.tour-fechar{margin-left:auto;border:0;background:transparent;color:var(--g-mut);font-size:1.35rem;line-height:1;
  padding:0 4px;cursor:pointer;border-radius:4px}
.tour-fechar:hover,.tour-fechar:focus-visible{color:var(--g-titulo);background:var(--g-realce)}
.tour-titulo{font-size:1.05rem;font-weight:700;color:var(--g-titulo);margin:.35rem 0 .35rem}
.tour-texto{margin:0 0 .7rem;white-space:pre-line}
.tour-pontos{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:.7rem}
.tour-pontos span{width:7px;height:7px;border-radius:50%;background:var(--g-linha)}
.tour-pontos span.ativo{background:var(--g-destaque);width:18px;border-radius:4px}
.tour-acoes{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.tour-acoes .espaco{flex:1}
.tour-acoes .tour-pular{padding-left:0;padding-right:0;color:var(--g-mut)}

/* Seta apontando para o alvo (--seta = distância a partir da borda do balão). */
.tour-balao::before{content:"";position:absolute;width:12px;height:12px;background:var(--g-sup);
  border:1px solid var(--g-linha);transform:rotate(45deg);display:none}
.tour-balao[data-lado="baixo"]::before{display:block;top:-7px;left:calc(var(--seta,40px) - 6px);border-right:0;border-bottom:0}
.tour-balao[data-lado="cima"]::before{display:block;bottom:-7px;left:calc(var(--seta,40px) - 6px);border-left:0;border-top:0}
.tour-balao[data-lado="direita"]::before{display:block;left:-7px;top:calc(var(--seta,30px) - 6px);border-top:0;border-right:0}
.tour-balao[data-lado="esquerda"]::before{display:block;right:-7px;top:calc(var(--seta,30px) - 6px);border-bottom:0;border-left:0}

/* Celular: o balão vira painel inferior de largura total. */
.tour-balao.tour-celular{left:0!important;right:0;top:auto!important;bottom:0;width:100%;max-width:none;
  border-radius:14px 14px 0 0;border-bottom:0;padding:14px 16px calc(14px + env(safe-area-inset-bottom));
  max-height:48vh;overflow-y:auto}
.tour-balao.tour-celular::before{display:none}
.tour-balao.tour-celular .tour-acoes .btn{min-height:38px}

/* Texto só para leitor de tela (anúncio do passo). */
.tour-anuncio{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);border:0;white-space:nowrap}

/* Embrulho neutro para dar uma âncora data-tour a um grupo de controles (ex.: seletor de unidade no título). */
.tour-alvo-inline{display:inline-flex;flex-wrap:wrap;align-items:center;gap:.35rem}
@media (max-width:600px){.page-title-actions .tour-alvo-inline{width:100%;justify-content:center}}

/* Botão "?" do cabeçalho: discreto quando a tela não tem tutorial. */
#btn-ajuda-tour.tour-sem-tutorial{opacity:.45}
#btn-ajuda-tour .tour-interrogacao{font-weight:700;font-size:1.05rem;font-style:normal;line-height:1}

@media (prefers-reduced-motion:reduce){
  .tour-recorte,.tour-balao{transition:none}
}
@media print{
  .tour-bloqueio,.tour-recorte,.tour-balao,.tour-anuncio{display:none!important}
}