/* Ajuda do painel: botao ? no cabecalho, janela com o tutorial de cada parte e passeio guiado (tour). */

#dlgAjuda { border:1px solid var(--b2); border-radius:18px; background:var(--card); color:var(--t); padding:0; width:min(860px, 94vw); max-height:88vh; box-shadow:var(--sombra); }
#dlgAjuda::backdrop { background:rgba(0,0,0,.5); backdrop-filter:blur(3px); }
#dlgAjuda .corpo { display:grid; grid-template-columns:200px 1fr; max-height:88vh; }
#dlgAjuda nav { border-right:1px solid var(--b); padding:16px 10px; overflow:auto; background:var(--card2); border-radius:18px 0 0 18px; }
#dlgAjuda nav h2 { font-size:15px; margin:4px 8px 10px; }
#dlgAjuda nav button { display:block; width:100%; text-align:left; background:transparent; border-color:transparent; color:var(--m); padding:7px 10px; border-radius:9px; font-size:13px; }
#dlgAjuda nav button.ativo { background:var(--card); color:var(--t); border-color:var(--b2); }
#dlgAjuda nav .rodape { margin-top:12px; padding:10px 8px 0; border-top:1px solid var(--b); display:grid; gap:6px; }
#dlgAjuda nav .rodape button { color:var(--azul2); }
#dlgAjuda article { padding:22px 26px 26px; overflow:auto; line-height:1.6; font-size:14px; }
#dlgAjuda article h3 { margin:0 0 4px; font-size:19px; }
#dlgAjuda article .onde { color:var(--m); font-size:12.5px; margin-bottom:14px; }
#dlgAjuda article ol, #dlgAjuda article ul { padding-left:20px; margin:8px 0; }
#dlgAjuda article li { margin:4px 0; }
#dlgAjuda article .regra { border-left:3px solid var(--azul); background:var(--card2); padding:8px 12px; border-radius:0 10px 10px 0; margin:10px 0; }
#dlgAjuda article kbd { font:inherit; font-size:12px; padding:1px 6px; border:1px solid var(--b2); border-radius:6px; background:var(--bg2); }
#dlgAjuda .fechar { position:absolute; right:10px; top:8px; }
@media (max-width:700px) { #dlgAjuda .corpo { grid-template-columns:1fr; } #dlgAjuda nav { border-right:0; border-bottom:1px solid var(--b); border-radius:18px 18px 0 0; display:flex; flex-wrap:wrap; gap:4px; } #dlgAjuda nav h2 { width:100%; } #dlgAjuda nav button { width:auto; } #dlgAjuda nav .rodape { width:100%; } }

/* passeio guiado */
.tour-foco { position:fixed; z-index:60; border-radius:14px; box-shadow:0 0 0 9999px rgba(3,6,14,.72), 0 0 0 3px var(--azul), 0 0 30px color-mix(in srgb, var(--azul) 50%, transparent); transition: all .35s cubic-bezier(.2,.8,.2,1); pointer-events:none; }
.tour-capa { position:fixed; inset:0; z-index:59; }
.tour-balao { position:fixed; z-index:61; width:min(360px, calc(100vw - 32px)); background:var(--card); color:var(--t); border:1px solid var(--b2); border-radius:16px; padding:16px 18px 14px; box-shadow:var(--sombra); animation: entra .25s ease-out both; }
.tour-balao .passo { font-size:11px; letter-spacing:.6px; text-transform:uppercase; color:var(--azul2); font-weight:700; }
.tour-balao h4 { margin:4px 0 6px; font-size:16px; font-family:var(--titulo); }
.tour-balao p { margin:0; font-size:13.5px; line-height:1.55; color:var(--t); }
.tour-balao .botoes { display:flex; gap:8px; justify-content:flex-end; margin-top:14px; align-items:center; }
.tour-balao .botoes .pular { margin-right:auto; color:var(--m); }
.tour-balao .seta { position:absolute; width:14px; height:14px; background:var(--card); border-left:1px solid var(--b2); border-top:1px solid var(--b2); transform:rotate(45deg); }
.tour-balao.baixo .seta { top:-8px; }
.tour-balao.cima .seta { bottom:-8px; transform:rotate(225deg); }
.tour-balao.centro .seta { display:none; }