/* ==========================================================================
   SGP — Camada 14: tour guiado da tela (fatia F27)

   Três peças e nada mais:

   1. o LANÇADOR — uma faixa fina, alinhada à direita, com "Dicas desta tela".
      Discreto de propósito: a ajuda que interrompe é a ajuda que todo mundo
      aprende a fechar sem ler;
   2. o BALÃO — um `popover` nativo. Ele já nasce na camada de topo do
      navegador (acima da barra fixa, do menu lateral e de qualquer
      `overflow: hidden` de coluna), então aqui não há z-index nenhum a
      administrar. Posição fixa; as coordenadas quem escreve é o Stimulus;
   3. o RECORTE — uma moldura com sombra gigante que escurece TUDO menos o
      alvo. `pointer-events: none` é o que faz este destaque não ser uma
      cortina: o alvo continua clicável enquanto o balão fala dele.
   ========================================================================== */

:root {
  --alt-lancador-tour: 2.25rem;
}

/* ---- 1. O lançador ------------------------------------------------------ */

.tour__lancador {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--esp-2);
  min-height: var(--alt-lancador-tour);
}

.tour__formulario { display: inline-flex; margin: 0; }

.tour__botao {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-2);
  padding: var(--esp-1) var(--esp-3);
  border: 1px solid transparent;
  border-radius: var(--raio-pilula);
  background: transparent;
  color: var(--cor-texto-suave);
  font: inherit;
  font-size: var(--texto-sm);
  line-height: 1.4;
  cursor: pointer;
  transition: color var(--transicao-rapida), background var(--transicao-rapida);
}

.tour__botao:hover { color: var(--cor-acao); background: var(--cor-acao-suave); }

.tour__botao:focus-visible {
  outline: none;
  color: var(--cor-acao);
  box-shadow: var(--sombra-foco);
}

.tour__botao--secundario { color: var(--cor-texto-fraco); font-size: var(--texto-xs); }

.tour__icone { display: block; }

/* O pontinho de "você ainda não viu este". Não é badge de notificação: some
   assim que a pessoa roda o tour uma vez, e volta se ela pedir "Rever dicas". */
.tour__novo {
  width: 7px;
  height: 7px;
  border-radius: var(--raio-pilula);
  background: var(--cor-acao);
}

/* Nas telas que já ocupam a janela inteira, a faixa desconta a própria altura
   da coluna — senão o sistema inteiro ganharia uma barra de rolagem por causa
   de um botão de 36px. */
.tour ~ .tres-colunas {
  min-height: calc(100vh - var(--alt-barra-topo) - var(--alt-lancador-tour));
}

/* O mesmo desconto no esqueleto mestre-detalhe (F09). Lá a altura não é um
   piso, é TETO FECHADO (`height`, para o `overflow: auto` de cada área valer),
   então não dá para só somar: o que se ajusta é a variável de onde o teto sai.
   Sem isto o esqueleto continua pedindo a janela inteira, ganha 36px de
   lançador em cima e a página inteira passa a rolar — justamente o que a
   altura fechada de `.tela-mestre` existe para evitar.
   (Medido em /pessoas, janela de 761px: sem esta regra scrollHeight == 797 e
   clientHeight == 761 — os 36px do lançador, exatamente; com ela os dois
   fecham em 761 e a página volta a não rolar.) */
.tour ~ .tela-mestre {
  --tela-mestre-altura: calc(100vh - var(--alt-cromo) - var(--esp-6) - var(--esp-12) - var(--alt-lancador-tour));
}

/* ---- 2. O balão --------------------------------------------------------- */

.tour__balao {
  position: fixed;
  inset: auto;
  width: min(24rem, calc(100vw - var(--esp-8)));
  margin: 0;
  padding: var(--esp-4);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-md);
  background: var(--cor-fundo-elevado);
  color: var(--cor-texto);
  box-shadow: var(--sombra-lg);
}

.tour__balao:popover-open {
  display: flex;
  flex-direction: column;
  gap: var(--esp-2);
}

.tour__passo {
  margin: 0;
  font-size: var(--texto-2xs);
  font-weight: var(--peso-medio);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--cor-texto-fraco);
}

.tour__titulo {
  margin: 0;
  padding-right: var(--esp-6);
  font-size: var(--texto-lg);
  font-weight: var(--peso-semi);
}

.tour__texto {
  margin: 0;
  font-size: var(--texto-sm);
  line-height: var(--altura-solta);
  color: var(--cor-texto-suave);
}

.tour__acoes {
  display: flex;
  align-items: center;
  gap: var(--esp-2);
  margin-top: var(--esp-1);
}

.tour__espaco { flex: 1 1 auto; }

.tour__link { font-size: var(--texto-xs); color: var(--cor-acao); }

.tour__fechar {
  position: absolute;
  top: var(--esp-2);
  right: var(--esp-2);
  display: inline-flex;
  padding: var(--esp-1);
  border: 0;
  border-radius: var(--raio-pilula);
  background: transparent;
  color: var(--cor-texto-fraco);
  line-height: 0;
  cursor: pointer;
}

.tour__fechar:hover { color: var(--cor-texto); background: var(--cor-fundo-afundado); }

/* ---- 3. O recorte ------------------------------------------------------- */

.tour__recorte {
  position: fixed;
  border-radius: var(--raio-md);
  box-shadow: 0 0 0 9999px rgba(17, 22, 29, .55);
  /* O destaque NÃO é uma cortina: o alvo segue clicável por baixo dele. */
  pointer-events: none;
  transition: top var(--transicao-rapida), left var(--transicao-rapida),
              width var(--transicao-rapida), height var(--transicao-rapida);
}

.tour__recorte[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) {
  .tour__recorte { transition: none; }
}

@media (max-width: 760px) {
  .tour__balao { width: calc(100vw - var(--esp-6)); }
}

/* Ajuda não se imprime. */
@media print {
  .tour__lancador,
  .tour__balao,
  .tour__recorte { display: none !important; }
}