/* ===================================================================================================================
   guia.css - primeiro uso guiado (tour), dicas de novidades e item T_SNAP da barra lateral no programa (frente B, 26/10/2026)
   Lógica em js/guia.js. Tudo aparece UMA vez (ou só dentro do programa) e some para sempre; nada cobre o botão principal.
   - .guia-anel ..... realce (sem bloquear o clique) em volta do elemento apontado
   - .guia-bal ...... balão (tour: Pular/Próximo; dica de novidade: Entendi), preso ao elemento por uma seta
   - html.no-programa  só no programa: mostra o item T_SNAP na barra lateral (a barra é a mesma do site; a faixa estreita de 72 px da 1.9.9 saiu em 26/10)
   =================================================================================================================== */

/* ------------------------------------------------------------------ balão do tour e das dicas */
.guia-anel { position: fixed; z-index: 90; pointer-events: none; border-radius: 12px; border: 2px solid var(--accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent), 0 0 24px color-mix(in srgb, var(--accent) 35%, transparent); transition: left .2s, top .2s, width .2s, height .2s; }
.guia-anel[hidden] { display: none; }
.guia-bal { position: fixed; z-index: 91; width: min(320px, calc(100vw - 24px)); display: grid; gap: 8px; padding: 14px 14px 12px; border-radius: var(--r-pop, 12px);
  background: var(--surface-2); border: 1px solid color-mix(in srgb, var(--accent) 50%, var(--border-2)); box-shadow: 0 18px 50px rgba(0, 0, 0, .5); color: var(--text-soft); font-size: 13px; line-height: 1.5; }
.guia-bal[hidden] { display: none; }
.guia-bal .gb-topo { display: flex; align-items: center; gap: 10px; min-width: 0; }
.guia-bal .gb-octo { width: 40px; height: 40px; flex: none; object-fit: contain; pointer-events: none; }
.guia-bal .gb-tag { margin: 0; font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--accent-text, var(--accent)); }
.guia-bal .gb-tit { margin: 0; font: 700 14.5px/1.3 var(--font-display); color: var(--text); }
.guia-bal .gb-txt { margin: 0; }
.guia-bal .gb-rodape { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.guia-bal .gb-rodape .esp { flex: 1; }
.guia-bal .gb-pontos { display: flex; gap: 5px; align-items: center; }
.guia-bal .gb-pontos i { width: 6px; height: 6px; border-radius: 50%; background: var(--border-2); }
.guia-bal .gb-pontos i.on { background: var(--accent); }
.guia-bal .gb-seta { position: absolute; width: 12px; height: 12px; background: var(--surface-2); border: 1px solid color-mix(in srgb, var(--accent) 50%, var(--border-2)); transform: rotate(45deg); }
.guia-bal[data-lado="direita"] .gb-seta { left: -7px; top: var(--seta, 24px); border-right: 0; border-top: 0; }
.guia-bal[data-lado="esquerda"] .gb-seta { right: -7px; top: var(--seta, 24px); border-left: 0; border-bottom: 0; }
.guia-bal[data-lado="abaixo"] .gb-seta { top: -7px; left: var(--seta, 24px); border-right: 0; border-bottom: 0; }
.guia-bal[data-lado="acima"] .gb-seta { bottom: -7px; left: var(--seta, 24px); border-left: 0; border-top: 0; }
.guia-bal[data-lado="centro"] .gb-seta { display: none; }
@media (max-width: 600px) { .guia-bal[data-lado="centro"] { left: 12px !important; right: 12px; bottom: calc(var(--ab-h, 62px) + 12px); top: auto !important; width: auto; } }
@media (prefers-reduced-motion: reduce) { .guia-anel { transition: none; } }
.atalhos-guia { margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--border); display: flex; align-items: center; gap: 10px; }
.atalhos-guia small { color: var(--muted); }

/* T_SNAP: só existe no programa (o item é criado por js/guia.js); cor própria como os outros apps */
:root { --c-snap: #fb923c; }
[data-theme="claro"] { --c-snap: #c2410c; }
.nc-snap { --nc: var(--c-snap); }
.nc-snap[hidden], html:not(.no-programa) .nc-snap { display: none !important; }