/* Paleta y navegación inspiradas en la referencia JS Aula del docente. */
:root{--purple:#70e0d0;--purple-dark:#a5f1e5;--lilac:#183732;--ink:#e4edfb;--muted:#9fb3ce;--line:#293b54;--paper:#080f1e;--side:246px;--panel:#111d30;--panel-high:#192a40;--study:#a60df2}body{background:var(--paper);color:var(--ink)}a:hover{color:#b2fff0}.sidebar{background:#0f1728;border-color:#26374e;padding:17px 12px 20px;scrollbar-color:#344d66 #0f1728;scrollbar-width:thin}.brand{padding:0 0 22px;gap:10px;font-size:18px;letter-spacing:-.4px;position:sticky;top:-17px;background:#0f1728;z-index:4;min-height:57px}.brand-icon{width:39px;height:42px;background:linear-gradient(145deg,#70e5c6,#62c5f0);color:#0d2c41;border-radius:12px;font:700 19px monospace;flex-shrink:0}.brand-word{font-size:17px;font-weight:700;line-height:1.3;color:#edf6ff}.brand-word strong{color:#6febd2}.brand-sub{font-size:7px;color:#83a3ca;letter-spacing:1.1px;margin-top:2px}.course-label{color:#85a2c7;padding:4px 3px 15px;font-size:8px;font-weight:700;letter-spacing:1.5px}.sidebar nav{gap:4px}.sidebar nav a{font-size:11px;min-height:37px;padding:9px 10px;color:#a5bddc;border:1px solid transparent}.sidebar nav a.active{background:#173530;color:#d7fff5;border-color:#315f58}.sidebar nav a:hover{background:#192a40;color:#e6f6ff}.nav-label{padding:21px 4px 10px;font-size:8px;color:#819cbd;font-weight:700;letter-spacing:1.2px}.nav-num{border-color:#42786a;background:#173b36;color:#75e8d1}.nav-dot{background:#506780}.sidebar-step-list{display:flex;flex-direction:column;gap:4px;margin:3px 0 0}.sidebar-lesson{display:flex;align-items:center;gap:10px;text-align:left;border:1px solid transparent;background:none;border-radius:9px;min-height:56px;padding:10px 9px;color:#c2d5f1;width:100%}.sidebar-lesson:hover{background:#17273c}.sidebar-lesson.active{background:#1a3d36;border-color:#32675c}.nav-step-index{width:28px;height:29px;border:1px solid #447b6e;background:#173d36;color:#8ce9d6;border-radius:8px;display:grid;place-items:center;font:600 10px 'Space Grotesk';flex-shrink:0}.sidebar-lesson.active .nav-step-index{background:#77e3d0;color:#0d3439;border-color:#77e3d0}.nav-step-text{min-width:0;flex:1}.nav-step-text strong{font-size:11px;line-height:1.4;display:block;font-weight:600;color:#d6e5fb}.nav-step-text small{display:block;color:#83a6ce;font-size:8px;line-height:1.5;margin-top:3px}.nav-step-done{color:#74e3c6;font-size:13px}.sidebar-lesson.complete .nav-step-index{border-color:#68b89c}.side-progress{padding:27px 8px 21px;margin-top:20px;color:#a7bedb}.side-progress strong{color:#7bead3}.progress-track{background:#21364a}.side-progress small{color:#839bb9}.side-bottom{border-color:#293b51;color:#8da8c7}.side-bottom strong{color:#b3cce6}.mini-b{background:#183e36;color:#77e5cd}.status-dot{background:#64d7b2}.topbar{position:sticky;top:0;z-index:20;background:#10192beF;backdrop-filter:blur(12px);height:75px;padding:0 25px;border-color:#2a3a51;gap:13px}.breadcrumb{display:none}.top-course-nav{display:flex;align-items:center;gap:5px;flex:1;white-space:nowrap}.top-course-nav a{display:flex;align-items:center;gap:7px;padding:11px 12px;border-radius:9px;font-size:10px;font-weight:600;color:#a9c4e7}.top-course-nav a .icon{width:15px;height:15px;color:#69dac8}.top-course-nav a.active{background:#1b3049;color:#e5f6ff}.top-course-nav a:hover{background:#1c2c43;color:#d6fff5}.lesson-count{color:#6bdece;font-size:9px}.top-actions{gap:8px;flex-shrink:0}.topbar .button{font-size:10px;min-height:34px;padding:8px 11px}.topbar .text-btn{color:#9bb9dd;font-size:10px;padding:7px}.study-toggle{background:#9f00f2!important;border-color:#9f00f2!important;color:#fff!important;box-shadow:0 5px 19px #9b00ed24}.study-toggle .icon{color:#fff}.header-help{border-color:#31465f!important;background:#101a2d!important;color:#bbd0ea!important}.topbar .icon-btn{color:#9cbedc}.button{background:#152338;border-color:#31465f;color:#b9cfe9}.button:hover{background:#1c324a;color:#e5fff8;border-color:#47716c}.button.primary{background:#86e6d7;border-color:#86e6d7;color:#0c3037;box-shadow:none}.button.primary:hover{background:#abf0e4;color:#0c3037}.text-btn{color:#a0bedb}.text-btn:hover{color:#7ff1d5}.icon-btn{color:#9cb9d7}.icon-btn:hover{background:#21374e;color:#86edda}.hero h1{color:#f0f5ff}.hero h1 em{color:#68ddc9}.hero p,.page-head p{color:#a0b8d4}.hero-meta{color:#8aabce}.art-grid{background-image:radial-gradient(#2e526a .8px,transparent .8px)}.art-orbit{border-color:#244659}.art-code{background:#101f34;border:1px solid #2a415c;box-shadow:0 22px 60px #0004;color:#c0d8f2}.window-top{border-color:#ffffff10}.window-top span{color:#809fbf}.tok{color:#70e4cc}.tok2{color:#7ac6ef}.tok3{color:#e1d69d}.art-result{background:#172c40;border-color:#38536a;box-shadow:0 12px 35px #0005;color:#d6e9fb}.art-input{border-color:#35526b;color:#92acc8;background:#122237}.art-result-header span{color:#74d4b7}.art-submit{background:#7ae3d0;color:#0b313c}.float-b{background:#133a37;color:#7af0d0;border-color:#0f1d30;box-shadow:0 6px 20px #0002}.section-head p,.section-head .section-aside{color:#8ba7c5}.course-card,.info-card,.article-panel,.framework-card,.resource-link,.lesson-card{background:#111e31;border-color:#2b4059}.course-card:hover{background:#14253a;border-color:#4d9f91;box-shadow:0 8px 25px #0002}.course-card h3,.info-card h3,.article-panel h2,.framework-card h3{color:#e3efff}.course-card p,.info-card p{color:#a0b9d5}.course-icon{background:#1a3f39;color:#77e8d1}.course-icon.mint{background:#153742;color:#7fd5ed}.badge,.badge.purple{background:#20364e;color:#99c7eb}.badge.green{background:#1b4039;color:#92e2cb}.class-tags span,code.inline{border-color:#35516a;background:#182c42;color:#a4c8e9}.course-bottom{border-color:#2b4057;color:#89a9cb}.course-link{color:#79e8d1}.path-strip{border-color:#2d4b61;background:#122738}.path-strip>.icon{color:#73ddca}.path-strip p{color:#8eabc8}.path-strip a{color:#82e5cf}.site-footer{border-color:#263950;color:#7d9abc}.site-footer>span:first-child{color:#8dabc9}.footer-sep{color:#546e8a}.page-head h1{color:#eaf2ff}.info-card>span:first-child{color:#7ddcca}.note{background:#102d33;border-color:#5ac7b7;color:#a4cccf}.note.mint{background:#13382f;border-color:#70c6a2;color:#a4d5c1}.article-panel p,.article-panel li{color:#a2bbd7}.learning-table td{color:#adc4df;border-color:#2b4059}.learning-table th{background:#192c43;color:#80dcca;border-color:#314a64}.learning-table code{color:#88e5d2}.learning-table strong{color:#d9edff}summary{color:#c5ddf5}details{border-color:#2b3d56}details p{color:#9fbad8}.segmented{background:#0c182b;border:1px solid #293f57}.segmented button{color:#8da9c8}.segmented button.active{background:#234535;color:#a3f1dc;box-shadow:none}.filter-chips button{background:#142238;border-color:#2c415b;color:#a9c3df}.filter-chips button.active{background:#7be1cd;border-color:#7be1cd;color:#0c333b}.search-box{background:#122036;color:#dfebfa;border-color:#344c66}.framework-logo{background:#1d3048!important;color:#8fe6d4!important}.framework-card small{color:#82a5ca}.framework-card p{color:#9eb9d7}.framework-card .when{color:#b3cde7}.framework-card a{color:#7be6d1;border-color:#2c425c}.grid-demo div{background:#153a36;border-color:#327566;color:#8be6d2}.grid-caption{color:#8eb0cf}.jquery-demo{background:#101d31;border-color:#36546d}.jquery-output{background:#20314c;color:#b4d9f4}.jquery-output.highlight{background:#1b4639;color:#93f1ce}.code-block{background:#0b1729;color:#76e7e6;border:1px solid #2a425d}.code-label{color:#9cb8d7}.source-note,.small-muted{color:#86a3c5}.source-note a{color:#73decc}.lab-heading p{color:#9bb9d8}.stepper{background:#101f33;border-color:#30475f}.step-btn{border-color:#2a4058;color:#9db6d1}.step-btn:hover{background:#1a3045}.step-btn.active{background:#194039;color:#a3ffe6}.step-btn.active:after{background:#71e7cc}.step-num{border-color:#3d5f73;color:#95c7d6}.step-btn.active .step-num{background:#75e1ca;border-color:#75e1ca;color:#0c343c}.step-btn.complete .step-num{color:#8aebc6;border-color:#549d85}.lesson-card p,.lesson-card li{color:#9fbad8}.lesson-card h2{color:#e5f2ff}.lesson-card code{color:#87e7d5}.try-box{background:#142b3d;border-color:#2d5064;color:#b2c8e0}.try-box strong{color:#86e6cf}.lesson-nav button{color:#94b6d9}.lesson-nav span{color:#7996ba}.studio{background:#0e1a2c;border-color:#2d4860}.studio-toolbar{background:#162940;border-color:#30475f}.studio-label{color:#96b9dd}.studio .segmented button.active{background:#264b45;color:#b7ffe9}.editor-pane{background:#0b1729}.code-tabs{border-color:#293e58}.code-tabs button{color:#8cabcf}.code-tabs button.active{color:#7ff2da;border-color:#78e3ce}.editor-status{color:#8aabce}.code-editor{color:#94edf0;background:#0b1729;caret-color:#70f4db}.line-numbers{color:#53748f;background:#0b1729}.editor-bottom{color:#7899bc;border-color:#29405a}.preview-pane{background:#101a2b}.preview-head{background:#14263b;border-color:#2a435d;color:#9ac0df}.preview-frame{background:#0b1424;border-color:#344d67}.lab-footnote{color:#7898ba}.console-box{background:#401f34;color:#ffc1ce;border-color:#7d3c59}.beginner-banner{background:#102f30;border-color:#2d6f62}.beginner-banner strong{color:#a6f4df}.beginner-banner p{color:#9bbfc4}.lab-support{background:#142537;border-color:#2b4b60}.lab-support summary{color:#9ce9da}.lab-support p{color:#a1bdd7}.step-guide{background:#111d30;border-color:#2d455f}.guide-heading{background:#102738;border-color:#2a435b}.guide-heading p{color:#aec5df}.guide-heading h2{color:#e6f2ff}.responsibility-grid{border-color:#2d435c}.responsibility-grid span{color:#7bded0}.responsibility-grid p{color:#afc7e0}.teaching-section{border-color:#2d435c}.teaching-section>p{color:#a5bfdb}.teaching-section h3{color:#e4f1ff}.teaching-section h4{color:#bbd7f4}.teaching-tasks li{color:#b1c9e2}.teaching-tasks li:before{background:#174139;border-color:#3b806e;color:#8debd3}.line-explanations dt{color:#81e8d5}.line-explanations dt code{background:#0e182b;color:#87ece0;border:1px solid #263e58}.line-explanations>div{border-color:#2b4059}.line-explanations dd{color:#b0c8e2}.expected-result{background:#14382f;border-color:#2e6553}.expected-result .icon{color:#78e5be}.expected-result p{color:#a0dec5}.beginner-glossary div{border-color:#376b65}.beginner-glossary dt{color:#91e5d3}.beginner-glossary dd{color:#a8c1dc}.understanding-check{background:#19243b;border-color:#394a68}.understanding-check p{color:#b7cee9}.guide-bottom{background:#102236}.guide-bottom p{color:#91afce}.teaching-analogy{background:#132f37;border-color:#59c5b5}.teaching-analogy strong{color:#9ce9da}.teaching-code{background:#0b1729;color:#80e9e6;border:1px solid #29435d}.lesson-guide-button{color:#8ae9d3}.challenge{border-color:#29425b}.challenge p{color:#a7c0dc}.resource-link strong{color:#d4e6fc}.resource-link small{color:#8eaccf}.resource-link .icon,.resource-link>span:last-child{color:#77e4d0}.resource-link:hover{background:#172c42;border-color:#4c8e85}dialog{background:#122038;color:#dfedff;border-color:#3b516f}dialog p{color:#abc4e1}dialog::backdrop{background:#020713b3}.guide-list li{border-color:#2d425d}.guide-list li strong{color:#8ce8d4}.guide-list li span{color:#a2bddc}.dialog-close{color:#b3d4ee}#toast{background:#1a3e36;color:#c8ffeb;border:1px solid #3e7968}.study-overview-panel{background:#1b0c35;border:1px solid #63328e;border-radius:14px;padding:20px;margin-bottom:26px;color:#e9d9ff;scroll-margin-top:90px}.study-panel-head{display:flex;gap:11px;align-items:center;border-bottom:1px solid #552477;padding-bottom:14px;margin-bottom:15px}.study-icon{background:#a23fee;color:#f7e7ff;border-radius:8px;width:33px;height:33px;display:grid;place-items:center;flex-shrink:0}.study-icon .icon{width:20px;height:20px}.study-panel-head strong{font-size:12px;letter-spacing:.3px;color:#edceff}.study-panel-head p{font-size:10px;color:#c69bec;margin:2px 0 0}.study-level{margin-left:auto;white-space:nowrap;background:#3a155d;border:1px solid #6b2c9c;padding:4px 9px;border-radius:20px;font-size:9px;color:#dcb8ff}.study-panel-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.study-panel-grid>div{background:#100a24;border:1px solid #422163;border-radius:10px;padding:14px}.study-panel-grid h2{font-size:10px;letter-spacing:.7px;color:#d4b4f4;margin:0 0 8px;font-family:'DM Sans'}.study-panel-grid p{font-size:12px;line-height:1.9;color:#d7e3ff;margin:0}.study-reflection{padding:15px 0 13px;border-bottom:1px solid #4b2367}.study-reflection>strong,.study-mistakes>strong{font-size:9px;letter-spacing:.7px;color:#d2b7ef}.study-reflection p{margin:7px 0 0;padding:9px 12px;border:1px solid #422260;border-radius:6px;background:#14102c;color:#d3e2ff;font-size:12px;line-height:1.8}.study-mistakes{padding-top:13px}.study-mistakes>strong{color:#e8d676}.study-mistakes ul{padding:0 0 0 17px;margin:8px 0;color:#dfdbf0;font-size:11px;line-height:1.9}.study-mistakes li::marker{color:#dfcc70}.study-read-more{background:none;border:0;padding:6px 0 0;color:#c996ef;font-size:10px;text-align:left}.study-read-more:hover{color:#f2d9ff}.lab-heading,.studio{scroll-margin-top:94px}.step-guide{scroll-margin-top:94px}
@media(min-width:1600px){.top-course-nav a{font-size:12px;padding:12px 15px}.topbar .button{font-size:11px;padding:9px 14px}.topbar{padding:0 30px}.study-panel-grid p{font-size:13px}.study-panel-head strong{font-size:13px}.study-reflection p{font-size:13px}}
@media(max-width:1250px){.top-course-nav a{padding:9px 8px;font-size:9px;gap:5px}.top-actions .header-help{display:none}.topbar{padding:0 20px;gap:8px}.topbar .text-btn{font-size:0}.topbar .text-btn .icon{width:18px;height:18px}.topbar .button{font-size:9px;padding:8px 9px}.study-level{display:none}}
@media(max-width:950px){.top-course-nav a:nth-child(3),.top-course-nav a:nth-child(4){display:none}.study-panel-grid{grid-template-columns:1fr}.study-panel-head strong{font-size:11px}.topbar{gap:7px}.top-actions{gap:5px}.sidebar{box-shadow:none}}
@media(max-width:650px){:root{--side:0px}.sidebar{width:246px;box-shadow:20px 0 70px #0006;z-index:40}.topbar{height:63px;padding:0 13px}.top-course-nav{gap:1px}.top-course-nav a{font-size:9px;padding:8px 6px}.top-course-nav a .icon{display:none}.top-course-nav a:first-child{display:none}.topbar .study-toggle{font-size:9px;padding:8px 10px;gap:6px}.topbar .study-toggle .icon{width:13px;height:13px}.topbar .text-btn{padding:5px}.top-actions .text-btn .icon{width:17px;height:17px}.study-overview-panel{padding:16px;border-radius:10px}.study-panel-head strong{font-size:10px}.study-panel-head p{font-size:9px}.study-panel-grid p{font-size:12px}.study-reflection p{font-size:12px}.study-mistakes ul{font-size:11px}.brand-word{font-size:17px}.side-progress{margin-top:15px}.lab-heading,.studio,.step-guide{scroll-margin-top:80px}}
#study-overview{scroll-margin-top:94px}
@media(max-width:650px){#study-overview{scroll-margin-top:80px}}