/* Espacio de trabajo inspirado en la referencia enviada por el docente. */
.lab-workspace{display:block}.lesson-intro{margin:0 0 20px;border:1px solid #31455f;border-radius:9px;background:#132238;padding:0;overflow:hidden}.lesson-intro>summary{list-style:none;display:flex;align-items:center;gap:10px;padding:15px 18px;color:#b7d0ec;font-size:12px}.lesson-intro>summary:before{content:'▸';color:#7de8d2}.lesson-intro[open]>summary:before{content:'▾'}.lesson-intro .lesson-card{border:0;border-radius:0;border-top:1px solid #31455f;padding:22px}.lesson-intro .lesson-card>p,.lesson-intro .lesson-card>ul{max-width:850px;font-size:13px}.lesson-intro .lesson-card ul{display:flex;flex-wrap:wrap;gap:10px 28px;margin-bottom:18px}.lesson-intro .lesson-card .try-box{font-size:13px;margin:15px 0}.lesson-intro .lesson-card>.button{width:auto;margin:0 10px 0 0}.lesson-intro .lesson-nav{display:inline-flex;gap:20px;margin-left:14px}.workspace-studio{border:1px solid #334861;border-radius:12px;background:#101b2d;overflow:hidden;scroll-margin-top:92px}.workspace-top{min-height:57px;padding:13px 16px;display:flex;justify-content:space-between;align-items:center;gap:16px;background:#121d30;border-bottom:1px solid #2b3e56}.workspace-title{display:flex;align-items:center;gap:10px;color:#e2f0ff;font-size:12px}.workspace-title>.icon{width:17px;height:17px;color:#6fe8df}.workspace-title>strong{font-size:12px;font-weight:600;white-space:nowrap}.workspace-title>span{border-left:1px solid #395169;padding-left:11px;color:#83a6cf;font-size:9px}.workspace-top-actions{display:flex;align-items:center;gap:17px}.workspace-top-actions .text-btn{font-size:10px;color:#b1cce9}.workspace-top-actions .text-btn .icon{width:13px;height:13px}.live-switch{display:flex;align-items:center;gap:7px;cursor:pointer;font-size:10px;color:#a6c4e4;position:relative;white-space:nowrap}.live-switch input{position:absolute;opacity:0;width:28px;height:18px;left:0;top:0;cursor:pointer}.live-switch>span{width:28px;height:16px;background:#314359;border-radius:20px;position:relative;display:block;border:1px solid #53667d;pointer-events:none}.live-switch>span:after{content:'';position:absolute;left:2px;top:2px;width:10px;height:10px;border-radius:50%;background:#cedbeb;transition:transform .15s}.live-switch input:checked+span{background:#3baf9c;border-color:#3baf9c}.live-switch input:checked+span:after{transform:translateX(12px);background:white}.live-switch input:focus-visible+span{outline:3px solid #8fe8d9;outline-offset:3px}.workspace-studio .studio-body{grid-template-columns:minmax(0,1fr) minmax(0,1fr);min-height:535px}.workspace-studio .editor-pane{background:#0b1729;min-height:535px;border-right:1px solid #2b4059}.workspace-studio .code-tabs{height:45px;min-height:45px;padding:0;border-color:#34445e;background:#18253c;gap:0;overflow-x:auto;flex-shrink:0}.workspace-studio .code-tabs button{display:flex;align-items:center;gap:7px;border-right:1px solid #30425a;padding:14px 12px;color:#9bb6d7;font-size:10px;white-space:nowrap;height:45px;flex-shrink:0}.workspace-studio .code-tabs button.active{background:#0c1c30;color:#e2efff;border-bottom:2px solid #6ce2d1}.file-dot{width:6px;height:6px;border-radius:1px;display:inline-block}.file-dot.html{background:#f59b73}.file-dot.css{background:#8ab4ff}.file-dot.js{background:#ffda70}.file-badge{font-size:7px;padding:1px 4px;line-height:1.3;border-radius:2px;font-weight:600;letter-spacing:.3px}.file-badge.html{background:#4a2b23;color:#ffbd91;border:1px solid #86513a}.file-badge.css{background:#1d355a;color:#9bc8ff;border:1px solid #315e9b}.file-badge.js{background:#403819;color:#f3d77d;border:1px solid #7e6928}.editor-meta{display:flex;justify-content:space-between;gap:10px;padding:7px 12px;background:#0b1729;border-bottom:1px solid #24364b;color:#7a9fc8;font-size:9px;height:31px;flex-shrink:0}.workspace-studio .editor-area{min-height:320px;max-height:none;flex:1;display:flex;overflow:hidden;position:relative}.workspace-studio .line-numbers{font:11px/1.9 'SFMono-Regular',Consolas,monospace;padding:16px 9px 16px 10px;max-height:none;min-width:39px;background:#0b1729;color:#53748f;overflow:hidden;border-right:1px solid #22344a;height:360px;flex-shrink:0}.code-surface{position:relative;flex:1;min-width:0;overflow:hidden;height:360px;background:#0b1729}.syntax-pre{position:absolute;left:0;top:0;min-width:100%;width:max-content;padding:16px 14px 16px 12px;margin:0;font:11px/1.9 'SFMono-Regular',Consolas,monospace;tab-size:2;white-space:pre;pointer-events:none;color:#d9eafd;transform-origin:top left}.syntax-pre code{font:inherit;white-space:inherit;tab-size:inherit;color:inherit;text-shadow:none}.workspace-studio .code-editor{position:absolute;inset:0;width:100%;height:100%;min-height:0;max-height:none;resize:none;overflow:auto;padding:16px 14px 16px 12px;margin:0;border:0;border-radius:0;background:transparent!important;color:transparent!important;-webkit-text-fill-color:transparent;caret-color:#dff7ff;font:11px/1.9 'SFMono-Regular',Consolas,monospace;tab-size:2;white-space:pre;scrollbar-color:#3b5671 #0b1729}.code-editor::selection{background:#2d668980}.code-surface:focus-within{box-shadow:inset 0 0 0 1px #355a70}.workspace-studio .editor-bottom{min-height:31px;padding:7px 10px;display:flex;gap:10px;font-size:8px;color:#80a5ce;border-top:1px solid #263c55;background:#101d30}.workspace-studio .editor-bottom #file-label{display:none}.workspace-studio .editor-bottom #cursor-label{margin-left:auto;white-space:nowrap}.editor-assist{border-top:1px solid #2c425c;background:#101d30;padding:11px 12px;min-height:86px}.assist-actions{display:flex;align-items:center;gap:15px;flex-wrap:wrap}.assist-actions button{background:none;border:0;color:#82e1dd;font-size:9px;font-weight:600;padding:0;display:flex;align-items:center;gap:5px}.assist-actions button:hover{color:#c5fff0}.assist-actions .icon{width:13px;height:13px}.explanation-inline{font-size:11px;line-height:1.85;color:#9db8d5;margin-top:12px;max-height:270px;overflow:auto;scrollbar-color:#36536c transparent;overflow-wrap:anywhere}.explanation-inline>strong{color:#c3e9f6;font-size:11px}.explanation-inline pre{font:10px/1.8 monospace;white-space:pre-wrap;background:#0a1629;border:1px solid #2b425b;padding:9px;border-radius:5px;color:#8ddfdc;overflow-wrap:anywhere;margin:8px 0}.explanation-inline p{font-size:11px;color:#a7c1dc;margin:7px 0 0;line-height:1.85}.explanation-inline details{padding:11px 0}.explanation-inline summary{font-size:11px;color:#9edfd5}.explanation-inline dt{font:10px/1.8 monospace;color:#85e1d5;margin-top:13px;white-space:pre-wrap}.explanation-inline dd{font-size:11px;color:#a5bed7;margin:6px 0 0;line-height:1.85}.explanation-inline .text-btn{margin-top:9px;font-size:10px;padding-left:0;color:#7ee1ca}.workspace-studio .preview-pane{background:#19283e;min-height:535px;overflow:hidden}.workspace-studio .preview-head{height:55px;min-height:55px;background:#1a2a42;padding:0 14px;display:flex;align-items:center;justify-content:space-between;color:#d7e9ff;font-size:10px;flex-shrink:0}.preview-actions{display:flex;align-items:center;gap:8px}.preview-actions .icon-btn[aria-pressed=true]{background:#294b54;border:1px solid #427d80;color:#a6f4e2}.preview-actions .icon-btn{padding:6px;border:1px solid transparent}.preview-actions .button{min-height:35px;font-size:10px;padding:8px 14px;margin-left:7px}.workspace-studio .viewport-wrap{padding:15px;overflow:auto;flex:none;background:#1b2a41}.workspace-studio .preview-frame{height:330px;width:100%;border:1px solid #435570;border-radius:6px;display:block;background:#f8fafc;margin:0 auto}.workspace-studio .viewport-wrap.mobile .preview-frame{width:375px;max-width:100%}.workspace-console{flex:1;min-height:135px;background:#0b1729;border-top:1px solid #32465f;overflow:hidden}.console-head{height:37px;padding:0 12px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #2b415a;background:#0b1729}.console-head strong{font-size:10px;color:#d1e6fb;font-weight:500;display:flex;align-items:center;gap:9px}.console-head strong>span{color:#6ae9d8;font:13px monospace}.console-head .text-btn{color:#7e9dbf;font-size:9px}.workspace-console .console-box,.workspace-console .console-box.visible{display:block;border:0;background:#0b1729;padding:11px 12px;font:10px/1.85 'SFMono-Regular',Consolas,monospace;color:#a7c3df;height:115px;overflow:auto;white-space:normal;scrollbar-color:#3b5671 #0b1729}.console-placeholder{font:10px/1.85 monospace;color:#698ab1;margin:0}.console-entry{display:flex;gap:10px;white-space:pre-wrap;overflow-wrap:anywhere;padding:3px 0;line-height:1.8}.console-kind{flex-shrink:0;color:#72c9c2;font-size:9px;min-width:28px}.console-entry>span:last-child{min-width:0;flex:1}.console-entry.error{color:#ffb9bc}.console-entry.error .console-kind{color:#ff8c96}.console-entry.warn{color:#edd78b}.console-entry.warn .console-kind{color:#e4c85f}.workspace-bottom{padding:11px 13px;display:flex;justify-content:space-between;align-items:center;gap:15px;min-height:61px;background:#121e31;border-top:1px solid #2d435d}.workspace-page-status{display:flex;align-items:center;gap:6px;font-size:9px;color:#8dadd0;white-space:nowrap}.workspace-page-status i{width:7px;height:7px;border-radius:50%;background:#5bceae;box-shadow:0 0 0 3px #46ac9218}.workspace-page-status.error{color:#edc08a}.workspace-page-status.error i{background:#deb377}.workspace-footer-actions{display:flex;align-items:center;gap:7px;flex-wrap:wrap;justify-content:flex-end}.workspace-footer-actions .button{font-size:10px;padding:9px 12px;min-height:35px}.workspace-footer-actions .text-btn{font-size:8px;color:#83a8ce;padding:5px;max-width:76px;line-height:1.4;text-align:center}.workspace-footer-actions .text-btn[aria-pressed=true]{color:#83e4ce}.workspace-footer-actions .button .icon{width:13px;height:13px}.workspace-next{background:#2a3c58!important;border-color:#3c536f!important;color:#d6e9ff!important}.workspace-next:hover{background:#395372!important}.check-results{background:#172338;border-top:1px solid #3b4c67;padding:17px 19px;color:#e5c88a;font-size:12px}.check-results.passed{background:#12352e;color:#a5efd2;border-color:#386b58}.check-results ul{list-style:none;padding:0;margin:13px 0;display:grid;grid-template-columns:1fr 1fr;gap:12px 20px}.check-results li{display:flex;gap:8px;font-size:11px;color:#c5d6e9}.check-results li>span{color:#edcb76}.check-results li.pass>span{color:#7ce2bd}.check-results li strong{display:block;font-size:11px;font-weight:500}.check-results li small{display:block;font-size:10px;color:#8facca;line-height:1.7;margin-top:3px}.check-results p{font-size:10px;line-height:1.8;color:#8faecb;margin:10px 0 0}.workspace-dialog{width:min(920px,calc(100% - 35px));max-width:920px;max-height:90vh;overflow:auto;padding:30px}.workspace-dialog>h2{font-size:24px}.workspace-dialog>p{font-size:12px;line-height:1.8;max-width:740px}.solution-tabs{margin:10px 0 16px}.solution-tabs button{padding:8px 14px;font-size:11px}.solution-code{font:11px/1.9 'SFMono-Regular',Consolas,monospace;color:#d8e9fb;background:#0b1729;border:1px solid #2d4660;padding:18px;border-radius:6px;max-height:50vh;overflow:auto;white-space:pre;tab-size:2}.solution-code code{font:inherit;color:inherit}.solution-code .token,.syntax-pre .token{text-shadow:none}.token.comment,.token.prolog,.token.doctype,.token.cdata{color:#6685a5}.token.punctuation{color:#8cb1d2}.token.property,.token.tag,.token.constant,.token.symbol,.token.deleted{color:#b387ff}.token.boolean,.token.number{color:#f4c978}.token.selector,.token.attr-name,.token.string,.token.char,.token.builtin,.token.inserted{color:#54ecb1}.token.operator,.token.entity,.token.url{color:#6fe4ef}.token.atrule,.token.attr-value,.token.keyword{color:#c28bff}.token.function,.token.class-name{color:#52bfff}.token.regex,.token.important,.token.variable{color:#f1d28d}.token.bold,.token.important{font-weight:600}.token.italic{font-style:italic}[hidden]{display:none!important}
@media(min-width:1600px){.workspace-studio .code-editor,.syntax-pre,.workspace-studio .line-numbers{font-size:12px}.workspace-title>strong{font-size:13px}.workspace-studio .code-tabs button{font-size:11px;padding:14px}.workspace-studio .preview-frame{height:360px}.code-surface,.workspace-studio .line-numbers{height:390px}.workspace-footer-actions .text-btn{font-size:9px;max-width:none}.workspace-footer-actions .button{font-size:11px}}
@media(max-width:1150px){.workspace-title>span{display:none}.workspace-studio .code-tabs button{font-size:9px;padding:13px 9px;gap:5px}.file-badge{font-size:6px}.workspace-bottom{align-items:flex-start;flex-direction:column;gap:10px}.workspace-footer-actions{justify-content:flex-start;width:100%}.workspace-footer-actions .text-btn{max-width:none;margin-right:3px}.workspace-top{padding:12px}.workspace-title{gap:7px}.workspace-top-actions{gap:10px}.workspace-studio .preview-head{padding:0 10px}.preview-actions{gap:3px}.preview-actions .button{margin-left:3px;padding:8px 10px}.workspace-studio .code-editor,.syntax-pre,.workspace-studio .line-numbers{font-size:10px}.workspace-studio .viewport-wrap{padding:10px}}
@media(max-width:850px){.workspace-studio .studio-body{grid-template-columns:1fr}.workspace-studio .editor-pane{border-right:0;border-bottom:1px solid #30465e;min-height:0}.workspace-studio .preview-pane{min-height:0}.workspace-studio .code-editor,.syntax-pre,.workspace-studio .line-numbers{font-size:11px}.code-surface,.workspace-studio .line-numbers{height:315px}.workspace-studio .editor-area{min-height:315px}.workspace-studio .code-tabs button{font-size:11px;padding:14px}.file-badge{font-size:7px}.workspace-studio .preview-frame{height:400px}.workspace-console{min-height:130px}.workspace-studio .viewport-wrap{padding:14px}.workspace-top-actions .text-btn{font-size:9px}.lesson-intro .lesson-card ul{display:block}.lesson-intro .lesson-card>.button{margin:0 0 10px}.lesson-intro .lesson-nav{display:flex;margin-left:0}.check-results ul{grid-template-columns:1fr}.workspace-dialog{padding:28px 20px}.workspace-footer-actions .button{font-size:10px;flex:1}.workspace-footer-actions .text-btn{font-size:9px;min-height:30px}.workspace-page-status{font-size:10px}.workspace-title>strong{font-size:12px}}
@media(max-width:480px){.workspace-title>strong{font-size:10px}.workspace-title>.icon{width:14px}.live-switch{font-size:9px;gap:5px}.workspace-top-actions{gap:8px}.workspace-top-actions .text-btn{font-size:0}.workspace-top-actions .text-btn .icon{width:15px;height:15px}.workspace-top{gap:7px;padding:12px 10px}.workspace-studio .code-tabs button{font-size:10px;padding:13px 10px}.workspace-footer-actions .button{padding:9px 8px;font-size:9px;gap:6px}.workspace-studio .code-editor,.syntax-pre,.workspace-studio .line-numbers{font-size:10px}.workspace-studio .editor-bottom{font-size:7px;gap:3px}.workspace-studio .preview-head{padding:0 10px}.assist-actions{gap:13px}.assist-actions button{font-size:9px}.workspace-bottom{padding:12px 10px}}
.workspace-studio .code-tabs{overflow-y:hidden;scrollbar-color:#3b5671 #18253c}.sidebar .brand{top:0}.sidebar{scroll-padding-top:80px}
/* La barra lateral se puede replegar sin cambiar el paso ni el editor. */
#mobile-menu{display:inline-flex;flex-shrink:0;width:34px;height:34px;border:1px solid #344e69;background:#15283d;color:#9ce8db;border-radius:7px}
#mobile-menu:hover{background:#214538;border-color:#518976;color:#c6fff1}
#mobile-menu .icon{width:19px;height:19px}
@media(min-width:651px){
  .sidebar{width:246px;transition:transform .2s ease,visibility .2s ease}
  .shell{transition:margin-left .2s ease}
  body.sidebar-collapsed{--side:0px}
  body.sidebar-collapsed .sidebar{transform:translateX(-100%);visibility:hidden;pointer-events:none}
}
@media(prefers-reduced-motion:reduce){.sidebar,.shell{transition:none!important}}