/* ==================== TOUR GUIADO DE NOVIDADES ====================
   Spotlight/onboarding leve pra apresentar novidades do jornal (hoje: o
   botão de Dark Mode). Motor em public/JS/news-tour.js. Tudo prefixado
   "news-tour-"/"nt-" de propósito, pra nunca colidir com .overlay/.modal/
   .card/.active genéricos já usados em outras partes do site.

   z-index acima de tudo que já existe no jornal (o maior valor hoje é
   10002, no dropdown de busca da navbar) — ver navbar-jornal.html. */

/* 4 retângulos (cima/baixo/esquerda/direita) em volta do alvo, calculados
   em JS a partir do rect real do botão, em vez de UM único div cobrindo a
   tela inteira. Um backdrop único, mesmo com o spotlight por cima, ainda
   borra o botão real — backdrop-filter enxerga o que está atrás do PRÓPRIO
   elemento, não do que está desenhado por cima dele; o "buraco" do
   spotlight (via box-shadow) só escurecia visualmente aquela área, nunca
   removia o blur de fato. Com 4 pedaços, a área exata do botão nunca tem
   nenhum desses elementos sobrepondo — fica 100% nítida, sem embaçado. */
.news-tour-backdrop-piece {
  position: fixed;
  z-index: 20000;
  background: rgba(0, 0, 0, .35);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  /* Puramente visual — o "clicar fora fecha" é resolvido em JS comparando
     event.target, não por este elemento interceptar o clique. Isso deixa o
     botão de tema real, mesmo visualmente "por baixo", 100% clicável e
     focável normalmente durante o tour. */
  pointer-events: none;
  opacity: 0;
  transition: opacity .25s ease;
}

.news-tour-backdrop-piece.nt-visivel {
  opacity: 1;
}

.news-tour-spotlight {
  position: fixed;
  z-index: 20001;
  border-radius: 16px;
  pointer-events: none;
  /* Truque do "buraco": sombra gigante escurece tudo fora da caixa, um
     contorno dourado fino marca a borda. Sem glow largo/difuso por fora —
     numa caixa pequena (36px) isso virava um halo grande demais, ofuscando
     o ícone real do botão em vez de só indicar onde ele está. */
  box-shadow:
    0 0 0 9999px rgba(0, 0, 0, .45),
    0 0 0 2px rgba(255, 215, 0, .85);
  opacity: 0;
  transform: scale(.92);
  transition: opacity .3s ease, transform .3s ease, top .2s ease, left .2s ease, width .2s ease, height .2s ease;
}

.news-tour-spotlight.nt-visivel {
  opacity: 1;
  transform: scale(1);
}

.news-tour-card {
  --ntc-bg: #ffffff;
  --ntc-fg: #1a1a1a;
  --ntc-muted: #6b6b6b;
  --ntc-border: rgba(0, 0, 0, .08);

  position: fixed;
  z-index: 20002;
  width: min(320px, calc(100vw - 32px));
  background: var(--ntc-bg);
  color: var(--ntc-fg);
  border: 1px solid var(--ntc-border);
  border-radius: 14px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, .35);
  padding: 18px;
  font-family: -apple-system, "Segoe UI", Roboto, sans-serif;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .25s ease, transform .25s ease;
}

html.dark .news-tour-card {
  --ntc-bg: var(--nopic-surface, #1e1e1e);
  --ntc-fg: var(--nopic-fg, #e5e5e5);
  --ntc-muted: var(--nopic-muted, #9ca3af);
  --ntc-border: var(--nopic-border, #2a2a2a);
}

.news-tour-card.nt-visivel {
  opacity: 1;
  transform: translateY(0);
}

.news-tour-card__fechar {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 28px;
  height: 28px;
  border: none;
  background: transparent;
  color: var(--ntc-muted);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.news-tour-card__fechar:hover {
  background: rgba(128, 128, 128, .15);
  color: var(--ntc-fg);
}

.news-tour-card__eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #FFD700;
  margin: 0 0 6px;
}

.news-tour-card__titulo {
  font-size: 16px;
  font-weight: 700;
  margin: 0 24px 6px 0;
  color: var(--ntc-fg);
}

.news-tour-card__desc {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ntc-muted);
  margin: 0 0 16px;
}

.news-tour-card__acoes {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.news-tour-card__acao {
  background: #FFD700;
  color: #111;
  border: none;
  border-radius: 8px;
  padding: 9px 14px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.news-tour-card__acao:hover {
  filter: brightness(1.05);
}

.news-tour-card__entendi {
  background: transparent;
  color: var(--ntc-muted);
  border: 1px solid var(--ntc-border);
  border-radius: 8px;
  padding: 9px 14px;
  font-size: 13px;
  cursor: pointer;
}

.news-tour-card__entendi:hover {
  color: var(--ntc-fg);
  border-color: var(--ntc-fg);
}

@media (prefers-reduced-motion: reduce) {
  .news-tour-backdrop,
  .news-tour-spotlight,
  .news-tour-card {
    transition: none;
  }
}