/* Recreación didáctica inspirada en los controles de Windows 11. Sin capturas remotas. */
:root{color-scheme:light;--lime:#0067c0;--blue:#005fb8;--muted:#536173}body{background:#eff3f8;color:#202735}header{border-color:#cdd6e2}.logo{color:#243c63}.logo>span{background:#0067c0;color:white}.logo small,.os-status{color:#586477}nav button,button{background:#fff;color:#242a35;border-color:#c7cfda;border-radius:5px}button:hover{background:#eef5ff;border-color:#638ab9}button:disabled{opacity:.5}button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid #0067c0;outline-offset:4px}nav button{background:#fff}main{max-width:1320px}.brief .kicker{color:#005fb8}.brief p{color:#4c5c70}h1{font-weight:650}.workspace{background:radial-gradient(ellipse at 48% 100%,#41afff 0,transparent 55%),radial-gradient(ellipse at 80% 15%,#43a2ff 0,transparent 45%),linear-gradient(120deg,#063d9f,#0871df 55%,#06286d);border-color:#3f77c5;border-radius:8px;box-shadow:0 15px 40px #21446f29;padding-bottom:80px;min-height:570px}.workspace:before{width:660px;height:660px;border:55px solid #92d0ff3b;box-shadow:0 0 0 28px #65b7ff20,0 0 0 65px #65b7ff17;left:38%;top:6%;transform:rotate(-30deg) scaleX(.8)}.window{background:#f9f9fb;border:1px solid #a7bbd7;border-radius:8px;box-shadow:0 12px 32px #00215e44}.titlebar{background:#edf1f7;border-bottom:1px solid #dde3ed;color:#303d51;font:12px "Segoe UI",sans-serif;min-height:39px;padding:8px 15px}.window-controls{font-family:"Segoe UI",sans-serif;font-size:16px;letter-spacing:2px;color:#38414f}.app{background:#fafbfd}.desktop-center h2{font-weight:600;font-size:28px}.desktop-center p,.muted,.split p{color:#536173}.hero-icon{color:#0067c0}.badge{background:#fff5de;border-color:#d5b77e;color:#805311}.primary{color:white;background:#0067c0;border-color:#0067c0;font-weight:600}.primary:hover{background:#0054a1;color:white}.active{background:#e7f2ff!important;border-color:#0067c0!important;color:#004f94!important}.good{color:#276011}.panel{background:#f1f4f9eF;color:#273447;border-color:#bdc9d9;border-radius:8px;box-shadow:0 10px 30px #152d5033}.panel h3{font-size:16px;font-weight:600}.toggle{border-color:#d4dce6;background:white}.checklist li{border-color:#d5dce7;color:#667283}.checklist .checked{color:#216124}.dock{position:absolute;bottom:0;left:0;right:0;margin:0;min-height:58px;background:#e7f0fbeF;backdrop-filter:blur(18px);border:0;border-top:1px solid #c7d6eb;border-radius:0;padding:7px 18px;display:flex;justify-content:flex-end;box-shadow:0 -3px 12px #27518411}.dock-group{margin-left:auto;position:relative;z-index:2}.dock button{font-size:12px;border-color:transparent;background:transparent;color:#25354e;padding:8px;min-height:42px}.dock button:hover{background:#d7e7fb}.dock>span,.dock .muted{color:#34445a}.task-icons{display:flex;gap:22px;align-items:center;position:absolute;left:50%;transform:translateX(-50%);color:#0067c0;font-size:25px;pointer-events:none}.windows-mark{display:grid;width:24px;height:24px;grid-template-columns:1fr 1fr;gap:2px;flex-shrink:0}.windows-mark i{background:#0078d4;display:block}.tray-clock{line-height:1.5;text-align:right;margin-left:10px;font:11px "Segoe UI",sans-serif!important}.tabs{background:#e5edf8}.tabs button{background:#d8e3f2;border-color:transparent;color:#344152}.tabs button[aria-pressed=true]{background:#fafbfd}.toolbar{background:#f5f8fc;border-color:#d5dfec}.toolbar input,.address-display{background:white;border:1px solid #cbd6e5;border-radius:20px;color:#354151;padding:9px 17px;font:12px "Segoe UI",sans-serif;flex:1;min-width:0;overflow-wrap:anywhere}.toolbar button{background:transparent;border-color:transparent;font-size:23px}.web-checks{list-style:none;text-align:left;max-width:380px;margin:22px auto;font-size:13px;color:#5b6b7e}.web-checks li{padding:7px}.web-checks .checked{color:#216124}.laptop{max-width:380px;margin:15px auto 25px}.laptop-display{height:190px;background:#161d27;border:10px solid #3c4552;border-radius:10px 10px 3px 3px;display:grid;place-items:center;color:#8793a5;font-size:13px;box-shadow:0 8px 12px #0002}.laptop-display.on{background:linear-gradient(145deg,#05286e,#258bf0)}.laptop-display.on .windows-mark{width:54px;height:54px;gap:4px}.laptop-display.on i{background:#e0f3ff}.laptop-base{height:16px;background:linear-gradient(#bdc5d0,#8b97a6);border-radius:0 0 30px 30px;margin:0 -12px}.charge-led{display:flex;align-items:center;justify-content:center;gap:8px;font-size:12px;margin-top:20px}.led-dot{width:10px;height:10px;background:#687585;border:1px solid #48515b;border-radius:50%}.led-dot.lit{background:#65bf3f;border-color:#398a20;box-shadow:0 0 9px #71c650}.charger{border-color:#c7d4e3;background:white}.charger small{color:#536173}.charger>span{color:#0078d4}.connect-step{padding:17px 0}.connect-step p{font-size:13px}.video{color:white}.video-title{font-weight:650}.video-tools{color:#344258}.meter b{background:#a8b8ca}.meter.playing b{background:#1c8e4b}.win-flyout{position:absolute;bottom:70px;right:18px;width:355px;margin:0;padding:22px;z-index:4;background:#f2f5faF5;backdrop-filter:blur(25px);box-shadow:0 9px 40px #06285844;border-color:#c2cbd9;max-width:calc(100% - 36px)}.quick-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:24px;text-align:center;font-size:11px;color:#343c49}.quick-tile{display:grid;place-items:center;border:1px solid #c8d1de;border-radius:5px;background:white;height:48px;font-size:23px;margin-bottom:8px}.quick-tile.selected{background:#0067c0;color:white;border-color:#0067c0}.sound-slider{display:flex;align-items:center;gap:15px;margin:13px 0;min-height:44px}.sound-slider>span{font-size:21px}.sound-slider input{flex:1;min-width:0;accent-color:#0067c0}.sound-slider button{padding:7px 12px;border:0;background:transparent}.fake-slider{height:5px;flex:1;background:linear-gradient(90deg,#0067c0 65%,#8a96a8 65%);border-radius:10px}.volume-caption{font-size:11px;color:#5b687a;margin:0}.flyout-footer{border-top:1px solid #ced6e3;margin:18px -22px -22px;padding:12px 22px;display:flex;justify-content:space-between;font-size:12px;background:#e7edf5;border-radius:0 0 8px 8px}.output-list{display:grid;gap:6px}.output-list button{width:100%;text-align:left;border-color:transparent;background:transparent}.output-list button.active{border-left:3px solid #0067c0!important}.panel-head h3{margin:0}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}.zoom-menu{background:#f5f7fb;color:#24324a;border-color:#bacce3}.zoom-controls button{background:white}.login-screen{background:radial-gradient(ellipse at 50% 10%,#469ad0aa,transparent 70%),linear-gradient(145deg,#15477b,#143b68);color:white;min-height:440px}.login-screen .login{max-width:370px}.login-screen .avatar{background:#e4eefbcc;color:#738aa4;border:0;width:75px;height:75px;font-size:40px}.login h2{font-weight:400;font-size:26px}.demo-key{background:transparent;border:0;color:#e6effa;margin:8px 0 15px;padding:5px}.demo-key strong{font:16px "Segoe UI",sans-serif;color:white;font-weight:600}.demo-key small{display:block;font-size:11px;color:#ccdeef}.login label{color:#e0ebf8}.password-wrap{display:flex;position:relative}.password{padding:10px 50px 10px 13px;border:1px solid #c3d4e5;border-bottom:2px solid #0067c0;background:#fbfdff;color:#182938;border-radius:4px;font:18px "Segoe UI",sans-serif;letter-spacing:1px;min-height:48px}.eye{position:absolute;right:2px;top:2px;background:transparent;border:0;color:#33465f;min-height:44px;width:44px;padding:10px}.eye svg{width:22px;height:22px}.login-message{font-size:12px;min-height:30px;margin-top:8px;color:#d7e7f7!important}.login .primary{margin-top:4px}.login-tools button{background:#173c6255;color:#f4f8fd;border-color:#aac0d855}.osk-panel,.notes-panel{max-width:680px;margin:23px auto 0;background:#f2f4f8;color:#29394f}.keyboard{gap:5px;display:grid;grid-template-columns:repeat(10,minmax(0,1fr))}.keyboard button{min-width:0;font-size:16px;min-height:43px;padding:6px;background:#fff;border-color:#c4cfde;border-bottom-width:2px}.keyboard button[data-do="key- "],.keyboard button[data-do="backspace"]{grid-column:span 2}.osk-panel p{font-size:12px;color:#536173}.notes-panel{padding:0;overflow:hidden}.notes-panel>p,.notes-panel>small{display:block;padding:0 18px;font-size:12px;color:#536173;margin:12px 0}.notes-panel textarea{display:block;width:calc(100% - 36px);height:110px;resize:none;margin:12px 18px;padding:12px;background:white;color:#17293e;border:1px solid #c6d1df;font:23px/1.4 Consolas,monospace;letter-spacing:5px}.note-actions{display:flex;gap:8px;padding:5px 18px}.note-actions button{font-size:12px}.tab-steps{display:flex;gap:9px;margin-bottom:18px;flex-wrap:wrap}.tab-steps span{font-size:12px;border:1px solid #c5d1df;color:#69788b;padding:8px 14px;border-radius:5px;background:#f0f3f8}.tab-steps .step-now{color:#005fb8;border-color:#0067c0;background:#e7f2ff}.tab-steps .step-done{color:#23651e;border-color:#98bf95;background:#eef9eb}.mouse-area:focus{outline:0}.document{border:1px solid #d4dde9;background:white}.file-row{background:white}.keyboard-callout{background:#f0f6ff;border-color:#a6c8ef;color:#254b7a}kbd{background:white;color:#224369;border-color:#a9c4e6}.completion{background:#edf8e9;border-color:#9dc896}.completion .kicker{color:#28621f}.completion p{color:#294c28}#live{color:#875117}footer{color:#617086}.finish .hero-icon{color:#0067c0}.finish h1 span{color:#0067c0}.finish p{color:#52647c}.learned article{background:white;border-color:#c9d7e6}.learned h3{color:#0067c0}dialog{background:#f4f7fb;color:#233147;border-color:#bccde2}dialog p,dialog li{color:#52647c}.panel-head button{background:transparent}
@media(max-width:800px){.task-icons{position:static;transform:none;margin-right:auto;gap:12px}.task-icons>span:not(:first-child){display:none}.win-flyout{position:relative;width:100%;max-width:100%;right:auto;bottom:auto;margin-top:15px}.dock{padding:7px 10px}.dock-group{gap:3px}.dock .tray-clock{display:none}.workspace{padding-bottom:77px}.login-screen{padding:22px 12px}.keyboard{grid-template-columns:repeat(8,minmax(0,1fr))}.note-actions{flex-wrap:wrap}.laptop-display{height:165px}}@media(max-width:420px){.task-icons{display:none}.dock-group{margin:0}.dock button{font-size:11px}.windows-mark{width:20px;height:20px}.keyboard{grid-template-columns:repeat(6,minmax(0,1fr))}}
