/* AliPlay · Portal do Professor — navegação e recursos v2 */
:root{--portal-purple:#5d36e7;--portal-ink:#281b57;--portal-line:#dedffd;--portal-bg:#f7faff}
html{scroll-behavior:smooth}
body{background:radial-gradient(1000px 430px at 85% 2%,#e8fff8,transparent 65%),#f7faff;color:#281b57;font-family:Inter,ui-sans-serif,system-ui,"Segoe UI",Arial,sans-serif}
.profShell{display:grid;grid-template-columns:162px minmax(0,1fr);max-width:1720px;min-height:100vh;margin:auto}
.profMain{min-width:0;background:transparent}
.profSidebar{position:sticky;top:0;height:100vh;padding:14px 11px 12px;background:#fff;border-right:1px solid #dfe5ff;display:flex;flex-direction:column;z-index:40;overflow-y:auto}
.sideLogo{height:70px;display:flex;align-items:center;justify-content:center;border-bottom:1px solid #edf0ff;margin-bottom:9px}.sideLogo img{width:118px;max-width:100%;height:auto;object-fit:contain}
.profSideNav{display:grid;gap:4px}.profSideNav a{display:flex;align-items:center;gap:8px;padding:8px 9px;color:#4c20db;text-decoration:none;font-size:11px;font-weight:800;border-radius:12px;line-height:1.2}
.profSideNav a:hover,.profSideNav a.active{background:#efedff}.profSideNav a.active{color:#3210cb}
.profSideNav a span{width:22px;height:22px;flex:0 0 22px;border:1.5px solid #714fff;border-radius:7px;display:grid;place-items:center;background:white;font-size:11px;color:#5832df}
.backSide{margin-top:auto;border:1px solid #ded9fb;background:#fbfaff;color:#5225db;text-align:center;text-decoration:none;border-radius:12px;padding:10px 5px;font-weight:800;font-size:11px}
.profMain>header{position:relative;top:auto;background:transparent;border:0;backdrop-filter:none;z-index:5}.profMain>header .wrap{max-width:1460px;padding:22px 22px 8px}
.profMain>header .top{align-items:center;flex-wrap:wrap;justify-content:flex-end}
.portalGreeting{margin-right:auto;font-size:25px;line-height:1.15;font-weight:900;color:#4924d5;letter-spacing:-.5px}.portalGreeting span{color:#281b57}.portalGreeting small{display:block;margin-top:5px;font-size:11px;letter-spacing:0;font-weight:650;color:#615779}
.profMain>header .sp{display:none}
.profMain>header .pill{background:#f8f6ff;border:1px solid #ded9ff;color:#5129bd;font-weight:750}
.profMain .btn{background:linear-gradient(135deg,#5833df,#626af1);border-radius:12px;box-shadow:0 8px 20px #6045da22;color:#fff;font-weight:800}
.profMain .btn.secondary{background:#fff;color:#4b21c9;border:1px solid #dbd8fa;box-shadow:none}
.portalBody{max-width:1460px;padding:4px 22px 70px}
.portalHero{margin:8px 0 27px;background:linear-gradient(110deg,#fff,#f0f7ff 55%,#eefff9);box-shadow:0 8px 26px #423f9a0d;border-color:#d9dcff;border-radius:20px}
.portalHero .heroPad{padding:30px 32px}
.portalEyebrow{font-size:10px;letter-spacing:1.15px;color:#5b3bd7;font-weight:900;text-transform:uppercase}
.portalHero .hTitle{font-size:clamp(24px,2.5vw,32px);line-height:1.12;margin:9px 0 10px;color:#241857;letter-spacing:-.6px}
.portalHero .hSub{max-width:750px;line-height:1.6;font-size:14px;color:#625a7a}
.portalHeroLinks{display:flex;flex-wrap:wrap;gap:9px;margin-top:21px}.portalHeroLinks a{font-size:12px;font-weight:800;padding:10px 14px;background:#fff;border:1px solid #dbd9ff;border-radius:12px;color:#4d25ce;text-decoration:none}
.portalHeroLinks a:first-child{color:white;background:#5d36e7;border-color:#5d36e7}
.portalSection{scroll-margin-top:24px;margin:22px 0 32px}.portalSection h2{font-size:23px;letter-spacing:-.4px;margin:7px 0 6px;color:#271859}.portalSection>p{font-size:13px;color:#736b86;margin:0 0 14px;line-height:1.55}
.portalSection .grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:13px 0 0}
.portalSection .tile{min-width:0;min-height:195px;border:1px solid #dcddff;box-shadow:0 10px 30px #3839960c;background:#fff;border-radius:20px;gap:13px;padding:22px;cursor:pointer}
.portalSection .tile:after,.portalSection .tile:before{display:none}.portalSection .tile:hover{transform:translateY(-2px);box-shadow:0 16px 35px #31248c20}
.portalSection .tile .ico{border:0;width:48px;height:48px;border-radius:14px;box-shadow:none;background:#f1edff;color:#5632da}
.portalSection .tile .tTitle{font-size:17px;color:#29195b}.portalSection .tile .tDesc{font-size:13px;line-height:1.5;color:#615d78}
.portalSection .tile .badge{font-size:10px;padding:5px 8px;color:#5d36d0;border-color:#e3ddff;background:#f9f7ff}
.tutorialSection{margin-top:32px}.tutorialTop{display:flex;align-items:end;justify-content:space-between;gap:18px;margin-bottom:14px}
.tutorialTop p{color:#716880;font-size:13px;margin:0}.tutorialSearch{font-size:11px;font-weight:800;max-width:315px;min-width:230px;color:#5d36e7}.tutorialSearch input{margin-top:6px;width:100%;border:1px solid #d9d9fb;background:#fff;padding:12px;font-size:13px;color:#271859}
.tutorialGrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.tutorialCard{background:#fff;border:1px solid #dedfff;border-radius:19px;box-shadow:0 8px 28px #5345ad0a;padding:18px;min-width:0;display:flex;flex-direction:column;gap:19px}
.tutorialHeading{display:flex;align-items:start;gap:12px}.tutorialIcon{display:grid;place-items:center;width:44px;height:44px;flex:0 0 44px;border-radius:13px;background:#f1edff;font-size:22px}
.tutorialCard h3{font-size:16px;color:#2d1a5e;margin:0 0 5px}.tutorialCard p{font-size:12px;line-height:1.5;color:#716981;margin:0}
.tutorialActions{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-top:auto}.tutorialActions .btn{font-size:11px;padding:9px 11px}
.tutorialPending{border:1px dashed #e2dffc;background:#faf9ff;color:#79718d;font-size:10px;font-weight:750;padding:8px 9px;border-radius:11px}
.tutorialNotice{flex-basis:100%;font-size:10px;color:#80602b;line-height:1.5}
.tutorialHint{border-radius:12px;background:#f4f1ff;padding:12px 14px;margin:15px 0 0!important;color:#55467d!important}
.tutorialFrame{display:block;width:100%;height:min(65vh,790px);border:1px solid #dedffd;border-radius:12px;background:white}
.tutorialVideo{width:100%;max-height:70vh;background:#10151e;border-radius:12px}
.tutorialEmpty{border:1px dashed #dbd6fb;text-align:center;border-radius:16px;padding:22px}
/* Formulários de apoio e ideias */
.portalForm{margin-top:14px}.portalForm select{width:100%;padding:10px 12px;border:1px solid #dedffd;border-radius:11px;background:white;color:#291a59}
.portalForm input[type="file"]{font-size:12px}.portalForm textarea{min-height:100px;font:inherit}
.portalFeedback{margin:12px 0 0!important;font-size:13px;font-weight:700}.portalFeedback.ok{color:#11734e}
#m.modal{z-index:1100}#m .overlay{background:rgba(28,26,62,.53);backdrop-filter:blur(3px)}#m .dialog{background:white;border-radius:20px;box-shadow:0 25px 80px #21185947;color:#281b57}
#m .head{padding:15px 20px}#m .body{padding:18px 20px}#m .dialog .note{color:#6e6685}#m label{color:#4d436c;font-weight:700}#m input,#m textarea{color:#291a59}
.mobileHeader{display:none}.sideScrim{display:none}
@media(max-width:1120px){.portalSection .grid,.tutorialGrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:820px){
 .profShell{display:block}.profSidebar{position:fixed;top:67px;left:0;width:min(292px,82vw);height:calc(100dvh - 67px);transform:translateX(-105%);transition:transform .2s ease;z-index:95;box-shadow:16px 0 30px #19154418}
 .profSidebar.mobileOpen{transform:translateX(0)}.sideScrim:not([hidden]){display:block;position:fixed;inset:67px 0 0;background:rgba(24,22,58,.56);z-index:90}
 .mobileHeader{position:sticky;top:0;z-index:100;display:flex;align-items:center;justify-content:space-between;height:67px;background:white;border-bottom:1px solid #e6e2ff;padding:8px 16px}
 .mobileHeader img{width:102px;height:auto}.mobileHeader button{border:1px solid #dbd3ff;border-radius:12px;background:#fbfaff;color:#4e24da;padding:10px 14px;font-weight:850}
 .profMain>header .wrap{padding:16px 17px 5px}.portalBody{padding:6px 17px 38px}.portalGreeting{font-size:22px}.portalHero .heroPad{padding:23px 20px}
 .portalSection .grid,.tutorialGrid{grid-template-columns:1fr}.portalSection .tile{min-height:150px}.tutorialTop{align-items:stretch;flex-direction:column}.tutorialSearch{max-width:none;min-width:0}
 #m .dialog{width:96vw;max-height:94dvh}#m .body{padding:12px}
}
@media(max-width:500px){.profMain>header .top{justify-content:flex-start}.profMain>header .pill{order:5}.portalGreeting{width:100%}.portalHero .hTitle{font-size:26px}.portalHeroLinks a{flex:1;text-align:center}.portalForm{grid-template-columns:1fr}.portalForm .full{grid-column:1}.tutorialFrame{height:68vh}}
/* Tema escuro: manter a legibilidade sem mudar as operações do Portal. */
html.dark body{background:#12152b;color:#e9e9ff}html.dark .profMain{background:#15172f}html.dark .profSidebar,html.dark .mobileHeader{background:#1f2140;border-color:#363558}
html.dark .profSideNav a{color:#ddd2ff}html.dark .profSideNav a.active,html.dark .profSideNav a:hover{background:#39315c}
html.dark .portalGreeting span,html.dark .portalHero .hTitle,html.dark .portalSection h2,html.dark .portalSection .tile .tTitle,html.dark .tutorialCard h3{color:#f1eaff}
html.dark .portalHero,html.dark .portalSection .tile,html.dark .tutorialCard{background:#242544;border-color:#434064}
html.dark .portalHero .hSub,html.dark .portalSection>p,html.dark .portalSection .tile .tDesc,html.dark .tutorialCard p{color:#cac5e1}
html.dark #m .dialog{background:#242544;color:#f1eaff}html.dark #m input,html.dark #m textarea,html.dark #m select,html.dark .tutorialSearch input{background:#181b38;color:#f1eaff;border-color:#514675}

/* ===== Biblioteca de Tutoriais · acabamento premium v60 ===== */
.tutorialSection{margin-top:36px}
.tutorialLibraryShell{
  position:relative;
  overflow:hidden;
  border:1px solid #dfe2ff;
  border-radius:28px;
  padding:26px;
  background:
    radial-gradient(720px 260px at 4% 0%,rgba(93,54,231,.10),transparent 62%),
    radial-gradient(680px 250px at 100% 2%,rgba(22,184,200,.10),transparent 60%),
    linear-gradient(180deg,#ffffff 0%,#fbfcff 100%);
  box-shadow:0 20px 60px rgba(42,35,110,.09);
}
.tutorialLibraryShell::before{
  content:"";
  position:absolute;left:28px;right:28px;top:0;height:3px;
  border-radius:0 0 999px 999px;
  background:linear-gradient(90deg,#5d36e7,#7d5cf1 34%,#20b8c9 72%,#35c990);
  opacity:.9;
}
.tutorialTop{align-items:center;margin-bottom:22px;padding:4px 2px 2px}
.tutorialIntro{min-width:0}
.tutorialTop h2{font-size:27px;margin:7px 0 7px;letter-spacing:-.65px}
.tutorialTop p{max-width:720px;font-size:13.5px;line-height:1.55;color:#6f6683}
.tutorialMetaStrip{display:flex;flex-wrap:wrap;gap:8px;margin-top:15px}
.tutorialMetaStrip span{
  display:inline-flex;align-items:center;gap:5px;
  padding:7px 10px;border-radius:999px;
  border:1px solid #e2defb;background:rgba(255,255,255,.82);
  box-shadow:0 6px 16px rgba(68,45,155,.05);
  font-size:10.5px;color:#665c7b;font-weight:650;
}
.tutorialMetaStrip b{color:#4f2fd1;font-weight:900}
.tutorialSearch{display:flex;flex-direction:column;gap:7px;max-width:330px;min-width:270px;font-size:10.5px;letter-spacing:.02em;text-transform:uppercase;color:#5c38db}
.tutorialSearch span{padding-left:3px}
.tutorialSearch input{
  margin:0;border:1px solid #dddafb!important;border-radius:14px!important;
  padding:13px 14px!important;background:rgba(255,255,255,.94)!important;
  box-shadow:0 8px 22px rgba(62,49,143,.06);
  outline:none;transition:border-color .16s ease,box-shadow .16s ease,transform .16s ease;
}
.tutorialSearch input:focus{border-color:#7a5bee!important;box-shadow:0 0 0 4px rgba(93,54,231,.10),0 10px 26px rgba(62,49,143,.09);transform:translateY(-1px)}
.tutorialGrid{gap:16px}
.tutorialCard{
  --tc:#5d36e7;--tc2:#9a82f6;
  position:relative;isolation:isolate;overflow:hidden;
  min-height:214px;padding:20px 20px 17px;
  gap:18px;border:1px solid #e1e2fb;border-radius:22px;
  background:linear-gradient(180deg,#fff 0%,#fefeff 100%);
  box-shadow:0 12px 34px rgba(47,39,118,.07);
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}
.tutorialCard::before{
  content:"";position:absolute;left:0;right:0;top:0;height:4px;
  background:linear-gradient(90deg,var(--tc),var(--tc2));
}
.tutorialCard::after{
  content:"";position:absolute;width:155px;height:155px;border-radius:50%;
  right:-72px;top:-75px;z-index:-1;
  background:radial-gradient(circle, color-mix(in srgb,var(--tc) 10%,transparent), transparent 68%);
  pointer-events:none;
}
.tutorialCard:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--tc) 28%,#dfe1fb);box-shadow:0 22px 45px rgba(45,34,122,.13)}
.tutorialCard[data-accent="blue"]{--tc:#3b82f6;--tc2:#78a9ff}
.tutorialCard[data-accent="cyan"]{--tc:#16b8c8;--tc2:#5ed8df}
.tutorialCard[data-accent="green"]{--tc:#18a874;--tc2:#59cba7}
.tutorialCard[data-accent="gold"]{--tc:#d99715;--tc2:#f4c550}
.tutorialCard[data-accent="orange"]{--tc:#e9872d;--tc2:#f6ae68}
.tutorialCard[data-accent="rose"]{--tc:#d9578f;--tc2:#ef8fb8}
.tutorialCard[data-accent="violet"]{--tc:#5d36e7;--tc2:#997ff4}
.tutorialFeatured{
  background:linear-gradient(135deg,#fff 0%,#faf7ff 55%,#f3fbff 100%);
  border-color:#d7d1ff;
}
.tutorialFeatured::before{height:5px;background:linear-gradient(90deg,#5d36e7,#8166ed 48%,#19b6c8 100%)}
.tutorialHeading{gap:14px;align-items:flex-start}
.tutorialIcon{
  width:50px;height:50px;flex:0 0 50px;border-radius:16px;
  background:linear-gradient(145deg,color-mix(in srgb,var(--tc) 14%,#fff),#fff);
  border:1px solid color-mix(in srgb,var(--tc) 17%,#e7e6fb);
  box-shadow:0 10px 22px color-mix(in srgb,var(--tc) 12%,transparent);
  font-size:24px;
}
.tutorialCopy{min-width:0;padding-top:1px}
.tutorialKicker{
  display:inline-block;margin:0 0 5px;
  color:var(--tc);font-size:9px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;
}
.tutorialCard h3{font-size:16.5px;line-height:1.22;color:#29195b;margin:0 0 6px;letter-spacing:-.15px}
.tutorialCard p{font-size:12.3px;line-height:1.52;color:#716981}
.tutorialCardFoot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:auto;padding-top:3px}
.tutorialPdfMeta{font-size:10px;color:#7c748c;font-weight:750;white-space:nowrap}
.tutorialActions{margin:0;flex:0 0 auto}
.tutorialActions .tutorialOpenBtn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  padding:9px 12px!important;border-radius:12px!important;
  background:linear-gradient(135deg,var(--tc),color-mix(in srgb,var(--tc) 76%,#8b75ff))!important;
  color:#fff!important;border:0!important;
  box-shadow:0 9px 20px color-mix(in srgb,var(--tc) 22%,transparent)!important;
  font-size:10.5px!important;font-weight:850!important;
  transition:transform .16s ease,box-shadow .16s ease,filter .16s ease;
}
.tutorialActions .tutorialOpenBtn:hover{transform:translateY(-1px);filter:saturate(1.08);box-shadow:0 12px 24px color-mix(in srgb,var(--tc) 28%,transparent)!important}
.tutorialActions .tutorialOpenBtn span{font-size:14px;line-height:1}
.tutorialPending,.tutorialNotice,.tutorialHint{display:none!important}
.tutorialEmpty{background:#fff;border-color:#d9d6f5;color:#6c6381;box-shadow:0 8px 24px rgba(50,40,120,.05)}

/* Modal de pré-visualização PDF mais elegante */
.tutorialFrame{border-radius:16px;border:1px solid #dcdcf5;box-shadow:0 12px 35px rgba(32,26,83,.08)}
#m .dialog.big:has(.tutorialFrame){background:linear-gradient(180deg,#fff,#fafbff)}
#m .dialog.big:has(.tutorialFrame) .head{background:rgba(255,255,255,.95);backdrop-filter:blur(12px)}

html.dark .tutorialLibraryShell{background:linear-gradient(180deg,#242544,#1f203a);border-color:#444266;box-shadow:0 22px 60px rgba(0,0,0,.22)}
html.dark .tutorialTop p,html.dark .tutorialPdfMeta{color:#c4bfd8}
html.dark .tutorialMetaStrip span{background:#2c2c4a;border-color:#48456d;color:#c9c5dc}
html.dark .tutorialMetaStrip b{color:#b9a8ff}
html.dark .tutorialCard{background:linear-gradient(180deg,#282947,#242542);border-color:#444368}
html.dark .tutorialFeatured{background:linear-gradient(135deg,#2b294d,#242946)}
html.dark .tutorialCard h3{color:#f1eaff}
html.dark .tutorialCard p{color:#c8c3dc}
html.dark .tutorialSearch input{background:#1d1e37!important;color:#f3edff!important;border-color:#4d496f!important}
html.dark .tutorialIcon{background:#31314f;border-color:#4a476d}

@media(max-width:1120px){
  .tutorialLibraryShell{padding:22px}
  .tutorialCard{min-height:205px}
}
@media(max-width:760px){
  .tutorialLibraryShell{padding:18px;border-radius:22px}
  .tutorialTop{align-items:stretch;flex-direction:column}
  .tutorialSearch{max-width:none;min-width:0}
  .tutorialCardFoot{align-items:flex-end}
}
@media(max-width:460px){
  .tutorialLibraryShell{padding:14px}
  .tutorialCard{padding:17px;min-height:0}
  .tutorialCardFoot{align-items:stretch;flex-direction:column}
  .tutorialActions{width:100%}
  .tutorialActions .tutorialOpenBtn{width:100%}
}