/* Central de ajuda e tutoriais do sistema */
.help-center-overlay, .tutorial-system-overlay {
    position:fixed; inset:0; z-index:11200; display:none; place-items:center;
    padding:20px; background:rgba(15,23,42,.62); backdrop-filter:blur(6px);
}
.help-center-overlay.is-open, .tutorial-system-overlay.is-open { display:grid; }
.help-center-dialog, .tutorial-system-dialog { color:#172033; background:#fff; box-shadow:0 30px 80px rgba(15,23,42,.34); }
.help-center-dialog { position:relative; width:min(680px,100%); padding:28px; border-radius:24px; }
.help-close {
    display:grid; place-items:center; width:38px; height:38px; border:0; border-radius:50%;
    background:#f1f5f9; color:#526174; cursor:pointer; font-size:19px;
}
.help-close:hover, .help-close:focus-visible { background:#e2e8f0; color:#172033; outline:3px solid rgba(59,125,135,.2); }
.help-center-dialog > .help-close { position:absolute; top:18px; right:18px; }
.help-center-heading { display:flex; align-items:center; gap:14px; padding-right:44px; }
.help-center-icon { display:grid; place-items:center; width:54px; height:54px; border-radius:16px; background:linear-gradient(135deg,#e8f0ff,#dcf8e7); color:#3974a9; font-size:27px; }
.help-center-heading p, .tutorial-system-header p, .tutorial-detail-title p { margin:0 0 4px; color:#0e8b3d; font-size:11px; font-weight:900; letter-spacing:.08em; text-transform:uppercase; }
.help-center-heading h2 { margin:0; font-size:25px; }
.help-paths { display:grid; grid-template-columns:1fr 1fr; gap:13px; margin-top:24px; }
.help-path {
    display:flex; flex-direction:column; align-items:flex-start; min-height:218px; padding:20px;
    border:1px solid #dbe3ec; border-radius:17px; background:#fbfdff; color:#172033;
    text-align:left; cursor:pointer; box-shadow:0 6px 16px rgba(15,23,42,.05);
}
.help-path:hover, .help-path:focus-visible { border-color:#75a9b2; transform:translateY(-2px); box-shadow:0 11px 24px rgba(15,23,42,.11); outline:none; }
.help-path > span { display:grid; place-items:center; width:46px; height:46px; border-radius:13px; background:#e7effc; color:#416cac; font-size:23px; }
.help-path:nth-child(2) > span { background:#e8f8ee; color:#0e8b3d; }
.help-path strong { margin-top:17px; font-size:17px; }
.help-path small { margin-top:7px; color:#667085; font-size:13px; line-height:1.5; }
.help-path em { display:flex; align-items:center; gap:6px; margin-top:auto; padding-top:16px; color:#24768b; font-size:12px; font-style:normal; font-weight:900; }

.tutorial-system-dialog { width:min(1180px,100%); height:min(790px,94vh); overflow:hidden; border-radius:24px; display:flex; flex-direction:column; }
.tutorial-system-header { display:grid; grid-template-columns:42px minmax(0,1fr) 42px; align-items:center; gap:12px; padding:17px 20px; border-bottom:1px solid #e2e8f0; }
.tutorial-system-header h2 { margin:0; font-size:23px; }
.tutorial-header-back { display:grid; place-items:center; width:38px; height:38px; border:0; border-radius:11px; background:#edf6f7; color:#24768b; cursor:pointer; font-size:19px; }
.tutorial-header-back:hover, .tutorial-header-back:focus-visible { background:#dcecef; outline:3px solid rgba(59,125,135,.18); }
.tutorial-search-wrap { display:flex; align-items:center; gap:10px; margin:14px 20px 0; padding:11px 14px; border:1px solid #d7e0e9; border-radius:13px; background:#f8fafc; }
.tutorial-search-wrap .ph { color:#3b7d87; font-size:20px; }
.tutorial-search-wrap input { flex:1; min-width:0; border:0; outline:0; background:transparent; color:#172033; font-family:inherit; font-size:15px; font-weight:600; line-height:1.4; }
.tutorial-system-body { min-height:0; flex:1; display:grid; grid-template-columns:250px minmax(0,1fr); gap:0; margin-top:14px; border-top:1px solid #edf1f5; }
.tutorial-categories { overflow:auto; padding:13px; border-right:1px solid #e2e8f0; background:#f8fafc; }
.tutorial-category { width:100%; display:grid; grid-template-columns:34px minmax(0,1fr); align-items:center; gap:9px; padding:10px; border:0; border-radius:11px; background:transparent; color:#526174; text-align:left; cursor:pointer; }
.tutorial-category + .tutorial-category { margin-top:4px; }
.tutorial-category > .ph { display:grid; place-items:center; width:34px; height:34px; border-radius:9px; background:#edf2f7; color:#5f7085; font-size:18px; }
.tutorial-category strong, .tutorial-category small { display:block; }
.tutorial-category strong { overflow:hidden; text-overflow:ellipsis; color:inherit; font-size:13px; white-space:nowrap; }
.tutorial-category small { margin-top:2px; color:#8a96a6; font-size:10px; }
.tutorial-category:hover { background:#edf3f7; }
.tutorial-category.is-active { background:#e6f2f4; color:#174d64; }
.tutorial-category.is-active > .ph { background:#fff; color:#24768b; box-shadow:0 3px 8px rgba(15,23,42,.08); }
.tutorial-content { overflow:auto; padding:20px; background:#fff; }
.tutorial-group + .tutorial-group { margin-top:28px; }
.tutorial-group-head { display:flex; align-items:end; justify-content:space-between; gap:15px; margin-bottom:14px; }
.tutorial-group-head p { margin:0 0 4px; color:#667085; font-size:12px; }
.tutorial-group-head h3 { margin:0; color:#172033; font-size:21px; }
.tutorial-group-head > span { min-width:31px; padding:5px 9px; border-radius:999px; background:#edf2f7; color:#526174; text-align:center; font-size:11px; font-weight:900; }
.tutorial-topic-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:11px; }
.tutorial-topic { display:grid; grid-template-columns:43px minmax(0,1fr) 18px; align-items:center; gap:11px; min-height:112px; padding:14px; border:1px solid #dbe3ec; border-radius:15px; background:#fff; color:#172033; text-align:left; cursor:pointer; }
.tutorial-topic:hover, .tutorial-topic:focus-visible { border-color:#77aab3; background:#fbfeff; box-shadow:0 8px 20px rgba(15,23,42,.08); outline:none; }
.tutorial-topic-icon { display:grid; place-items:center; width:43px; height:43px; border-radius:12px; background:#e8f0ff; color:#416cac; font-size:21px; }
.tutorial-topic small, .tutorial-topic strong, .tutorial-topic em { display:block; }
.tutorial-topic small { color:#0e8b3d; font-size:9px; font-weight:900; letter-spacing:.05em; text-transform:uppercase; }
.tutorial-topic strong { margin-top:3px; font-size:14px; }
.tutorial-topic em { display:-webkit-box; overflow:hidden; margin-top:5px; color:#667085; font-size:11px; font-style:normal; line-height:1.4; -webkit-box-orient:vertical; -webkit-line-clamp:2; }
.tutorial-topic > .ph { color:#95a1b1; }
.tutorial-topic-children { display:inline-flex !important; align-items:center; gap:4px; width:max-content; margin-top:7px; padding:3px 7px; border-radius:999px; background:#e8f3f5; color:#24768b !important; font-size:9px !important; font-weight:850; text-transform:none !important; }
.tutorial-empty { display:grid; place-items:center; min-height:320px; text-align:center; color:#667085; }
.tutorial-empty > .ph { font-size:36px; color:#9aa8b7; }
.tutorial-empty h3 { margin:10px 0 3px; color:#273449; }
.tutorial-empty p { margin:0; }

.tutorial-detail { max-width:800px; margin:0 auto; }
.tutorial-detail-back { display:inline-flex; align-items:center; gap:6px; margin-bottom:18px; padding:7px 9px; border:0; border-radius:9px; background:#edf6f7; color:#24768b; font-weight:850; cursor:pointer; }
.tutorial-detail-title { display:grid; grid-template-columns:58px minmax(0,1fr); align-items:center; gap:14px; padding-bottom:18px; border-bottom:1px solid #e2e8f0; }
.tutorial-detail-title > span { display:grid; place-items:center; width:58px; height:58px; border-radius:16px; background:linear-gradient(135deg,#e8f0ff,#dcf8e7); color:#3974a9; font-size:28px; }
.tutorial-detail-title h3 { margin:0; color:#172033; font-size:24px; }
.tutorial-detail-title small { display:block; margin-top:5px; color:#667085; line-height:1.5; }
.tutorial-subtopics { margin-top:20px; padding:16px; border:1px solid #cfe0e4; border-radius:15px; background:#f6fbfc; }
.tutorial-subtopics > h4 { margin-bottom:4px !important; color:#174d64 !important; }
.tutorial-subtopics > p { margin:0 0 12px; color:#667085; font-size:12px; }
.tutorial-subtopics .tutorial-topic { background:#fff; }
.tutorial-elements { margin-top:22px; }
.tutorial-elements-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }
.tutorial-elements-grid article { padding:12px; border:1px solid #dbe3ec; border-radius:12px; background:#f8fafc; }
.tutorial-elements-grid article > span { display:inline-block; padding:3px 6px; border-radius:999px; background:#e6f2f4; color:#24768b; font-size:8px; font-weight:900; letter-spacing:.04em; text-transform:uppercase; }
.tutorial-elements-grid strong { display:block; margin-top:7px; color:#273449; font-size:12px; }
.tutorial-elements-grid p { margin:4px 0 0; color:#667085; font-size:11px; line-height:1.45; }
.tutorial-detail section { margin-top:21px; }
.tutorial-detail h4 { margin:0 0 12px; color:#273449; font-size:15px; }
.tutorial-detail ol { list-style:none; display:grid; gap:10px; margin:0; padding:0; counter-reset:tutorial-step; }
.tutorial-detail ol li { counter-increment:tutorial-step; display:grid; grid-template-columns:30px minmax(0,1fr); align-items:start; gap:10px; color:#526174; line-height:1.5; }
.tutorial-detail ol li:before { content:counter(tutorial-step); display:grid; place-items:center; width:28px; height:28px; border-radius:50%; background:#e6f2f4; color:#174d64; font-size:11px; font-weight:900; }
.tutorial-detail aside { margin-top:22px; padding:15px; border:1px solid #f0dca8; border-radius:14px; background:#fff9e9; }
.tutorial-detail aside h4 { display:flex; align-items:center; gap:7px; color:#7b570e; }
.tutorial-detail aside ul { display:grid; gap:7px; margin:0; padding-left:19px; color:#6e5a2a; font-size:12px; line-height:1.5; }
.tutorial-detail footer { display:flex; justify-content:flex-end; margin-top:20px; }
.tutorial-open-resource { display:inline-flex; align-items:center; gap:7px; padding:11px 15px; border:0; border-radius:11px; background:linear-gradient(90deg,#4f83d1,#13ae52); color:#fff; font-weight:900; cursor:pointer; }
.tutorial-open-resource:hover, .tutorial-open-resource:focus-visible { filter:brightness(.96); outline:3px solid rgba(59,125,135,.2); }

@media (max-width:820px) {
    .tutorial-system-overlay { padding:0; }
    .tutorial-system-dialog { width:100%; height:100%; max-height:none; border-radius:0; }
    .tutorial-system-body { grid-template-columns:1fr; grid-template-rows:auto minmax(0,1fr); }
    .tutorial-categories { display:flex; gap:7px; overflow:auto; padding:10px 14px; border-right:0; border-bottom:1px solid #e2e8f0; }
    .tutorial-category { flex:0 0 auto; width:auto; grid-template-columns:28px auto; padding:7px 10px; }
    .tutorial-category > .ph { width:28px; height:28px; }
    .tutorial-category small { display:none; }
    .tutorial-topic-grid { grid-template-columns:1fr; }
    .tutorial-elements-grid { grid-template-columns:1fr; }
}
@media (max-width:620px) {
    .help-center-overlay { padding:10px; }
    .help-center-dialog { padding:23px 18px 18px; border-radius:20px; }
    .help-paths { grid-template-columns:1fr; }
    .help-path { min-height:170px; }
    .tutorial-system-header { padding:13px; }
    .tutorial-system-header h2 { font-size:18px; }
    .tutorial-search-wrap { margin:10px 12px 0; }
    .tutorial-content { padding:15px 12px; }
    .tutorial-group-head { align-items:flex-start; }
    .tutorial-detail-title { grid-template-columns:47px minmax(0,1fr); }
    .tutorial-detail-title > span { width:47px; height:47px; font-size:23px; }
    .tutorial-detail-title h3 { font-size:20px; }
}
@media (prefers-reduced-motion:reduce) {
    .help-path { transition:none; }
}