/* Ajuda integrada aos temas do NoFlop; estilos restritos a este componente. */
.tutorial-dialog, .tutorial-admin {
  --help-bg:#fff; --help-surface:#f4f6f8; --help-text:#202936;
  --help-muted:#526174; --help-border:#d4dce5; --help-accent:#6740b4;
  color:var(--help-text); color-scheme:light;
}
body.dark-mode .tutorial-dialog, body.dark-mode .tutorial-admin {
  --help-bg:#1f1f1f; --help-surface:#101827; --help-text:#f1f5f9;
  --help-muted:#b3c0d1; --help-border:#3b4b60; --help-accent:#c4a7ff;
  color-scheme:dark;
}
.tutorial-dialog { box-sizing:border-box; width:min(640px, calc(100% - 24px)); max-height:90vh; max-height:90dvh; overflow:auto; border:1px solid var(--help-border); border-top:4px solid #ffb800; border-radius:16px; padding:20px; background:var(--help-bg); box-shadow:0 16px 60px #0005; }
.tutorial-dialog::backdrop { background:rgba(0,0,0,.62); }
.tutorial-dialog h2 { font-size:1.35rem; margin:0; color:var(--help-text); }
.tutorial-dialog h3 { font-size:1rem; margin:20px 0 10px; color:var(--help-text); }
.tutorial-dialog p, .tutorial-admin p { color:var(--help-muted); font-size:.925rem; line-height:1.5; margin:10px 0 16px; }
.tutorial-header { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; }
.tutorial-dialog iframe { display:block; width:100%; aspect-ratio:16/9; min-height:200px; border:0; border-radius:8px; background:#000; }
.tutorial-dialog button, .tutorial-admin button { box-sizing:border-box; min-height:44px; padding:12px 16px; border:1px solid transparent; border-radius:8px; background:#7042bd; color:#fff; font-size:15px; line-height:1.3; font-weight:600; cursor:pointer; margin:0; width:auto; }
.tutorial-dialog button:hover:not(:disabled), .tutorial-admin button:hover:not(:disabled) { background:#583296; }
.tutorial-dialog .tutorial-close, .tutorial-dialog .tutorial-back { background:var(--help-surface); border-color:var(--help-border); color:var(--help-text); flex-shrink:0; }
.tutorial-dialog .tutorial-close:hover, .tutorial-dialog .tutorial-back:hover { background:var(--help-bg); color:var(--help-accent); border-color:var(--help-accent); }
.tutorial-dialog .tutorial-tour { display:block; width:100%; text-align:left; padding:16px; }
.tutorial-tour strong, .tutorial-tour span { display:block; }
.tutorial-tour span { font-size:13px; font-weight:400; margin-top:6px; line-height:1.45; color:#fff; }
.tutorial-video-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.tutorial-dialog .tutorial-video { display:flex; align-items:center; gap:10px; width:100%; text-align:left; background:var(--help-surface); color:var(--help-text); border-color:var(--help-border); }
.tutorial-dialog .tutorial-video:hover { background:var(--help-bg); color:var(--help-accent); border-color:var(--help-accent); }
.tutorial-empty { padding:16px; border:1px dashed var(--help-border); border-radius:10px; background:var(--help-surface); }
.tutorial-dialog a { display:inline-block; padding:12px 0; color:var(--help-accent); text-decoration:underline; }
.tutorial-admin { margin-top:24px; border-top:1px solid var(--help-border); padding-top:16px; }
.tutorial-admin form { padding:16px; border:1px solid var(--help-border); border-radius:10px; margin-top:12px; background:var(--help-surface); }
.tutorial-admin label { display:block; font-weight:600; color:var(--help-text); }
body .tutorial-admin input { display:block; box-sizing:border-box; width:100%; min-width:0; min-height:46px; font-size:16px; margin:10px 0 12px; padding:12px; background:var(--help-bg); color:var(--help-text); border:1px solid var(--help-border); }
body .tutorial-admin input::placeholder { color:var(--help-muted); opacity:1; }
.tutorial-admin p[role=status] { margin:8px 0 0; }
.tutorial-admin p[role=status]:empty { display:none; }
@media(max-width:480px) {
  .tutorial-dialog { padding:16px; }
  .tutorial-video-list { grid-template-columns:1fr; }
  .tutorial-admin form { padding:12px; }
  .tutorial-admin form button { width:100%; }
}
/* Acesso contextual ao mesmo vídeo cadastrado pelo Admin. */
.secao-com-ajuda { display:flex; align-items:center; gap:10px; margin:0 0 16px; padding-right:32px; }
.secao-com-ajuda > h3 { margin:0 !important; min-width:0; }
.secao-com-ajuda .secao-info { display:inline-flex; align-items:center; justify-content:center; flex:0 0 44px; width:44px; height:44px; min-height:44px; padding:0; margin:0; border:1px solid #cbd5e1; border-radius:50%; background:#edf3fa; color:#245aa0; cursor:pointer; }
.secao-info span { display:flex; align-items:center; justify-content:center; width:20px; height:20px; border:2px solid currentColor; border-radius:50%; font:bold 14px Georgia,serif; }
body.dark-mode .secao-com-ajuda .secao-info { background:#101827; color:#93c5fd; border-color:#3b4b60; }
.secao-com-ajuda .secao-info:hover { border-color:currentColor; }
.ajuda-dialog label { display:block; font-weight:600; margin:12px 0; }
body .ajuda-dialog textarea, body .ajuda-dialog select { font-size:16px; width:100%; box-sizing:border-box; background:var(--help-surface); color:var(--help-text); border:1px solid var(--help-border); }
.ajuda-mensagem { border:1px solid var(--help-border); border-radius:10px; padding:14px; margin-top:12px; }
.ajuda-texto { white-space:pre-wrap; overflow-wrap:anywhere; }
#btn-menu-admin { position:relative; }
.ajuda-badge { display:inline-flex; justify-content:center; align-items:center; min-width:22px; min-height:22px; padding:2px 6px; margin-left:6px; background:#b91c1c; color:#fff; border:2px solid #fff; border-radius:99px; font-size:12px; font-weight:700; }
.ajuda-badge[hidden] { display:none; }
.ajuda-dialog .ajuda-honey { position:absolute; left:-10000px; width:1px; height:1px; }
.ajuda-dialog article > button { margin:4px 4px 4px 0; }
.ajuda-historico { border-top:1px solid var(--help-border); margin-top:12px; overflow-wrap:anywhere; }
body .ajuda-dialog input { background:var(--help-surface); color:var(--help-text); border-color:var(--help-border); font-size:16px; }