:root{--navy:#071522;--panel:#0c2133;--panel2:#10283a;--panel3:#143449;--edge:#23445b;--cyan:#52dce9;--blue:#50bdd9;--gold:#e9aa70;--light:#e4f1f7;--muted:#8baabf;--green:#94f1b6}
*{box-sizing:border-box}body{margin:0;background:#071321;color:var(--light);font-family:'DM Sans',system-ui,sans-serif;font-size:13px}button,input{font:inherit}button{cursor:pointer}button:disabled{opacity:.4;cursor:default}.app{max-width:1980px;margin:0 auto}.topbar{height:76px;border-bottom:1px solid #214159;background:#091829;display:flex;align-items:center;justify-content:space-between;padding:0 22px;gap:14px}.brand{display:flex;align-items:center;gap:12px}.brand-symbol{display:flex;align-items:center;justify-content:center;color:#061522;background:var(--cyan);font-size:29px;font-weight:bold;border-radius:11px;height:44px;width:44px}.brand-name{font:800 23px 'Barlow Condensed',sans-serif;letter-spacing:2px}.brand-name span{color:var(--cyan)}.brand-sub{color:#7694aa;font:700 10px 'Barlow Condensed',sans-serif;letter-spacing:2px}.top-nav{display:flex;align-items:center;gap:14px}.top-pill{border:1px solid #27556b;background:#11283b;border-radius:99px;padding:9px 14px;font-size:10px;font-weight:800;letter-spacing:1.1px;color:#b0d7e4}.top-pill i,.live-dot{display:inline-block;width:7px;height:7px;background:var(--green);border-radius:50%;margin-right:6px;box-shadow:0 0 7px #79e99d7e}.top-tag{color:#82a1b6;font-size:11px;letter-spacing:1px;font-weight:700}.help-btn{color:#bdeff9;background:#10293a;border:1px solid #2b5265;border-radius:10px;padding:10px 14px;font-size:11px;font-weight:800}.help-btn:hover,.icon-btn:hover{background:#18445a}.subbar{height:49px;border-bottom:1px solid #203a4b;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:0 24px;background:#0b1c2b}.course-name{display:flex;align-items:center;gap:12px}.tiny-line,.cyan-line{display:inline-block;width:3px;height:17px;background:var(--cyan);border-radius:3px}.course-name span:not(.tiny-line){color:#7596ac;font-size:10px;font-weight:800;letter-spacing:1px}.course-name b{font-weight:800;color:#e8f6fe}.meter-top{display:flex;align-items:center;gap:11px;color:var(--cyan);font-size:11px;font-weight:800}.meter-track{height:7px;background:#1c3a51;border-radius:99px;width:170px;overflow:hidden}.meter-track div{height:100%;width:0;background:linear-gradient(90deg,#54cfe7,#adf4b1);border-radius:99px;transition:width .35s}.layout{display:grid;grid-template-columns:minmax(0,1.28fr) minmax(340px,.84fr);gap:12px;padding:12px;align-items:start}.scene-panel,.side-panel{border:1px solid var(--edge);border-radius:13px;background:var(--panel);overflow:hidden}.scene-panel{min-width:0}.panel-head{height:53px;display:flex;align-items:center;justify-content:space-between;padding:0 13px;background:#0b1c2c;border-bottom:1px solid var(--edge);gap:10px}.section-title{display:flex;align-items:center;gap:10px;white-space:nowrap}.section-title strong,.side-head strong{font:800 14px 'Barlow Condensed',sans-serif;letter-spacing:1.7px}.tiny-badge,.side-head small{font:800 10px 'Barlow Condensed',sans-serif;letter-spacing:1px;background:#203c52;color:#aac9d9;padding:5px 8px;border-radius:5px}.scene-actions{display:flex;align-items:center;gap:6px}.seg{display:flex;align-items:center;background:#081827;padding:3px;border:1px solid #315266;border-radius:9px}.seg button{background:transparent;border:0;border-radius:7px;color:#92b3c4;padding:7px 12px;font-size:11px;font-weight:800}.seg button.active{color:#eaffff;background:#12617a;box-shadow:inset 0 0 0 1px #57daea}.icon-btn{height:32px;min-width:32px;border-radius:8px;border:1px solid #325569;background:#193346;color:#c3e5f5;font-size:18px}.scene-wrap{position:relative;height:clamp(400px,61vh,685px);overflow:hidden;background:radial-gradient(ellipse at 50% 40%,#223e59 0,#0a1b2b 68%,#06111d 100%);touch-action:none}#scene{display:block;width:100%;height:100%;touch-action:none}.corner-label,.nose-label,.axis-label{position:absolute;pointer-events:none;background:#0c2537cf;border:1px solid #34556c;border-radius:6px;padding:7px 10px;font:800 10px 'Barlow Condensed',sans-serif;letter-spacing:1.2px}.corner-label{top:15px;left:14px;color:#c9ecf7}.nose-label{top:15px;right:14px;color:#f4b98e;background:#4830236b;border-color:#9b6146}.axis-label{left:15px;bottom:56px;color:#6da4b7;font-size:9px}.scene-hud{position:absolute;inset:0;pointer-events:none}.hotspot{position:absolute;pointer-events:auto;transform:translate(-50%,-50%);border-radius:100%;width:37px;height:37px;border:2px dashed #cafbef;background:#20897b55;box-shadow:0 0 0 7px #44e7d51d,0 0 22px #6bfff4c0;color:#e9fffa;font-size:19px;font-weight:900;animation:pulse 1.7s ease-in-out infinite}.hotspot:after{content:attr(data-label);position:absolute;left:50%;bottom:calc(100% + 12px);transform:translateX(-50%);white-space:nowrap;border-radius:6px;background:#092332e8;border:1px solid #68c5cb;color:#dcffff;padding:6px 9px;font:800 10px 'Barlow Condensed',sans-serif;letter-spacing:1px}.hotspot:hover{background:#45c4a199}.hotspot.wireA{border-color:#ffbd86;background:#a762396e;box-shadow:0 0 0 7px #fbb27c22,0 0 18px #ffbd86}.hotspot.wireB{border-color:#8fdcf5;background:#4178ab66;box-shadow:0 0 0 7px #8fdcf522,0 0 18px #8fdcf5}.hotspot.wireB:disabled{opacity:.7}@keyframes pulse{50%{box-shadow:0 0 0 12px #55ffdd12,0 0 16px #a1fff9aa}}.view-controls{position:absolute;right:14px;bottom:16px;display:flex;gap:4px}.view-controls button{padding:7px 9px;color:#a7c4d2;background:#112c3fcf;border:1px solid #315668;border-radius:6px;font:800 10px 'Barlow Condensed',sans-serif;letter-spacing:1px}.view-controls button.selected{color:#edfdff;border-color:#61cdda;background:#185267}.mouse-hint{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);white-space:nowrap;color:#b3d6e6;font:600 10px 'DM Sans',sans-serif;text-shadow:0 1px 4px #00111e}.render-warning{position:absolute;left:12%;right:12%;top:40%;background:#4c241e;border:1px solid #e6a078;padding:20px;border-radius:11px;font-weight:700;text-align:center}.scene-bottom{min-height:48px;padding:10px 16px;display:flex;align-items:center;justify-content:space-between;gap:13px;background:#0d2437;border-top:1px solid #24495b;font-size:11px}.scene-bottom>span{color:#c1dce7;line-height:1.5}.scene-bottom button{border:1px solid #326077;background:#13334a;color:#c2e9f2;padding:8px 11px;border-radius:7px;font-size:10px;font-weight:800;white-space:nowrap}.stages-row{display:flex;gap:5px;overflow:auto;padding:12px 13px;background:#0a1d2f;scrollbar-width:thin}.phase-item{flex:1;min-width:38px;height:7px;background:#264256;border-radius:99px;position:relative}.phase-item.done{background:#69dfc9}.phase-item.current{background:#eab883;box-shadow:0 0 9px #d89d6b77}.safety-strip{padding:10px 15px;border-top:1px solid #234354;background:#102a3a;display:flex;align-items:center;gap:12px;color:#92aebe;font-size:10px;line-height:1.65}.safety-strip strong{white-space:nowrap;color:#e7b887;font-size:10px}.right-stack{min-width:0;display:flex;flex-direction:column;gap:11px}.side-panel{border-radius:12px}.side-head{height:49px;padding:0 14px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--edge);background:#0b1c2c}.side-head>div{display:flex;gap:8px;align-items:center}.side-head strong{font-size:13px}.side-head b{color:var(--cyan);font:800 12px 'Barlow Condensed',sans-serif;letter-spacing:1px}.bank-top{padding:11px 13px 8px;display:flex;align-items:center;justify-content:space-between;gap:10px;color:#b4cddd;font:800 10px 'Barlow Condensed',sans-serif;letter-spacing:1px}.bank-top span{color:#58d6e5;font-size:9px;text-align:right}.bank-window{overflow-x:auto;scrollbar-width:none;padding:0 12px}.bank-window::-webkit-scrollbar{display:none}.bank-items{display:flex;gap:9px;padding-bottom:4px;min-height:151px}.part-card{flex:none;width:129px;height:146px;border:1px solid #31566a;border-radius:10px;background:#112b3b;color:#e4f5fb;display:flex;flex-direction:column;padding:6px;gap:5px;position:relative;text-align:left}.part-card.active{border-color:#64e6e8;box-shadow:0 0 0 1px #64e6e855 inset;background:#1b4250}.part-card.done{opacity:.55;border-color:#285e56}.part-card.locked{opacity:.56}.part-card .part-icon{display:flex;align-items:center;justify-content:center;background:#f6fbff;height:80px;border-radius:7px;color:#31596b;font-size:41px;position:relative;overflow:hidden;border:1px solid #9dc0d0;box-shadow:inset 0 0 0 1px #ffffff}.part-card .part-icon:before{display:none}.part-card .part-icon span{z-index:1;filter:none;width:100%;height:100%;display:block}.part-card b{font:800 12px 'Barlow Condensed',sans-serif;letter-spacing:.2px}.part-card small{color:#9ec5d3;font-size:9px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.part-num{position:absolute;right:8px;top:8px;background:#102b3d;color:#c9edf6;font-size:9px;padding:3px 5px;border-radius:4px;z-index:1}.bank-slider{display:flex;align-items:center;gap:10px;padding:6px 12px 12px}.bank-slider button{min-width:29px;height:26px;background:#17364a;border:1px solid #3c6579;border-radius:6px;color:#a9e7f0}.bank-slider input{width:100%;accent-color:#58dae9;height:4px}.guide-content{padding:14px}.stage-tag{color:#64e1e9;font:800 11px 'Barlow Condensed',sans-serif;letter-spacing:1.7px}h1{font-size:21px;line-height:1.18;margin:6px 0 8px;font-weight:800;letter-spacing:-.6px}.guide-content>p{margin:0 0 12px;color:#aec6d5;font-size:12px;line-height:1.55}.instruction{display:flex;align-items:center;gap:10px;border:1px solid #345d75;background:#143348;border-radius:9px;padding:10px 11px;font-size:11px;color:#d6eef6;line-height:1.4}.instruction-no{color:#73eaf1;font:800 18px 'Barlow Condensed',sans-serif}.reference{border:1px solid #315870;background:#102c42;border-radius:10px;margin-top:14px;overflow:hidden}.reference-head{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;color:#99c9d9;font:800 10px 'Barlow Condensed',sans-serif;letter-spacing:1.1px}.reference-head span{background:#1a4b5d;border-radius:5px;padding:4px 9px;color:#c2eef6}.reference-body{display:flex;gap:12px;padding:0 10px 12px;align-items:center}.ref-art{width:132px;height:116px;flex:none;border-radius:11px;background:#f7fbff;color:#2b5368;font-size:55px;display:flex;align-items:center;justify-content:center;box-shadow:inset 0 0 0 1px #a7c7d7;overflow:hidden}.ref-art svg,.part-icon svg{display:block;width:100%;height:100%}.ref-art.placeholder{background:linear-gradient(135deg,#fbffff,#b2cdd9)}.ref-details{min-width:0}.ref-details b{font-size:13px}.ref-details p{font-size:10px;line-height:1.5;color:#b9d2df;margin:6px 0 7px}.spec-chips{display:flex;flex-wrap:wrap;gap:4px}.spec-chips span{font-size:9px;padding:4px 6px;border-radius:4px;background:#23475b;color:#bfe3ea}.guide-bottom{margin-top:14px}.guide-bottom-head{display:flex;justify-content:space-between;gap:8px;align-items:center;color:#a3c7d7;font:800 10px 'Barlow Condensed',sans-serif;letter-spacing:1.1px}.guide-bottom-head b{color:#a4f3ca;font-size:11px}.progress-line{margin-top:8px;background:#1c4759;height:8px;border-radius:99px;overflow:hidden}.progress-line div{height:100%;width:0;background:linear-gradient(90deg,#52dfec,#aaf7c1);transition:width .3s}.next-note{text-align:center;font-size:10px;color:#86aebe;margin-top:9px}.hint-card{border:1px solid #36536c;border-radius:11px;background:#142d3d;padding:12px 15px}.hint-card>span{color:#e5ae76;font:800 11px 'Barlow Condensed',sans-serif;letter-spacing:1px}.hint-card p{color:#bdd1dc;font-size:11px;line-height:1.6;margin:8px 0 0}.wiring-ui,.checks-ui{margin-top:13px;border:1px solid #2f6579;border-radius:10px;padding:12px;background:#102e40}.wire-step{display:flex;justify-content:space-between;color:#a4c4d3;font:800 10px 'Barlow Condensed',sans-serif;letter-spacing:1px}.wire-step b{color:#56dae9}.wire-route{display:grid;grid-template-columns:1fr 21px 1fr;gap:5px;align-items:center;margin:10px 0}.wire-route>div{border:1px solid #34556a;background:#092233;border-radius:8px;padding:9px;min-height:61px}.wire-route small{display:block;color:#6fadb9;font-size:9px;margin-bottom:6px}.wire-route strong{font-size:10px;line-height:1.45}.route-arrow{color:#e9b783;text-align:center}.cable-type{display:flex;gap:9px;align-items:center;padding:8px;background:#092637;border-radius:8px}.swatch{height:28px;width:5px;border-radius:5px;background:#62ddea;flex:none}.cable-type b{display:block;font-size:11px}.cable-type small{display:block;color:#9abdc9;font-size:10px;line-height:1.5;margin-top:5px}.wire-actions{display:flex;gap:7px;margin-top:12px}.wire-actions button{flex:1;padding:9px 6px;font-size:10px;font-weight:800;background:#15455c;color:#e4f9fc;border:1px solid #48829a;border-radius:7px}.wire-actions button.ready{background:#187f7c;border-color:#82e4d5}.wire-state{margin-top:9px;color:#e5bb83;font-size:10px;line-height:1.4}.checks-ui>strong{font:800 12px 'Barlow Condensed',sans-serif;letter-spacing:1px;color:#90e3eb}.checks-ui p{font-size:11px;color:#b4d0dc;line-height:1.6}.checks-ui label{display:flex;gap:9px;align-items:flex-start;padding:8px 0;font-size:11px;border-bottom:1px solid #234559;color:#d5e6ee;line-height:1.45}.checks-ui input[type=checkbox]{accent-color:#53cbdc;width:16px;height:16px;flex:none}.checks-ui input[type=range]{width:100%;accent-color:#5dd5dc}.action-btn{display:block;width:100%;padding:11px;color:#072b36;background:linear-gradient(90deg,#53d5e7,#99e8b2);font-size:11px;font-weight:900;border:0;border-radius:8px;margin-top:10px}.cg-result{padding:8px;background:#092b3c;color:#d4f4e8;margin-top:8px;border-radius:5px;font-weight:800;text-align:center}.toast{position:fixed;bottom:24px;left:50%;transform:translate(-50%,15px);background:#15394a;color:#ddf8fa;border:1px solid #62c8d1;box-shadow:0 10px 45px #0008;border-radius:9px;padding:12px 20px;opacity:0;pointer-events:none;transition:all .2s;z-index:20;font-size:12px;max-width:min(480px,94vw);text-align:center}.toast.show{opacity:1;transform:translate(-50%,0)}.toast.bad{border-color:#d59577;background:#4a2929;color:#ffe4d0}footer{padding:14px 20px;color:#6c8da2;letter-spacing:.7px;font:700 10px 'Barlow Condensed',sans-serif;text-align:center}.modal-backdrop{position:fixed;inset:0;background:#00121dc9;z-index:25;display:flex;align-items:center;justify-content:center;padding:15px}.modal-backdrop[hidden]{display:none}.modal{background:#102d42;border:1px solid #3c7992;box-shadow:0 20px 90px #000c;border-radius:14px;width:min(600px,100%);padding:22px}.modal-head{display:flex;align-items:center;justify-content:space-between}.modal h2{font-size:22px;margin:0}.modal-head button{background:transparent;border:0;color:#c2e5ef;font-size:19px}.modal p{color:#bdd4df;line-height:1.7;font-size:12px}
@media(max-width:1140px){.layout{grid-template-columns:minmax(0,1fr)}.scene-wrap{height:500px}.right-stack{display:grid;grid-template-columns:1fr 1.1fr;align-items:start}.hint-card{grid-column:1/-1}.bank-items{min-height:145px}.top-tag{display:none}}
@media(max-width:690px){.topbar{height:67px;padding:0 11px}.brand-name{font-size:19px}.brand-symbol{width:36px;height:36px}.brand-sub{font-size:8px}.top-nav{display:none}.help-btn{padding:8px;font-size:10px}.subbar{padding:0 11px}.course-name>span:not(.tiny-line){display:none}.course-name b{font-size:11px}.meter-track{width:76px}.layout{padding:7px;gap:8px}.panel-head{padding:0 7px;height:49px}.section-title strong{font-size:12px}.tiny-badge{display:none}.seg button{padding:6px 7px;font-size:10px}.icon-btn{min-width:29px;height:28px}.scene-wrap{height:400px}.mouse-hint{white-space:normal;text-align:center;bottom:47px;padding:0 12px;width:100%;font-size:9px}.axis-label{display:none}.view-controls{bottom:12px;right:8px}.right-stack{display:flex}.scene-bottom{padding:10px}.scene-bottom button{font-size:9px}.reference-body{gap:8px}.ref-art{width:92px;height:92px}.safety-strip{display:block}.safety-strip strong{display:block;margin-bottom:5px}.hotspot{width:32px;height:32px}.hotspot:after{font-size:9px}.top-pill{display:none}}

/* Impedir que el carrusel amplíe la página en móviles. */
.right-stack>*{min-width:0;max-width:100%}.bank-panel{min-width:0;width:100%}.bank-window{min-width:0;max-width:100%;width:100%}.bank-items{width:max-content;max-width:none}.bank-slider{min-width:0}.bank-slider input{min-width:0}

.wire-actions button[disabled]{opacity:.45;cursor:default}.wire-state.done{color:#aaf6c5}.wire-state.wait{color:#8fd9ef}.wire-actions.complete{display:none}.action-btn.secondary{background:linear-gradient(90deg,#5bc4f2,#7be0d4);color:#082538}.reference-head.cable{color:#f2c593}.reference-head.cable span{background:#5d3c1d;color:#ffe4b8}.ref-art .wire-legend{font:700 8px sans-serif;fill:#d8edf7}
/* V1.2 - fotografías reales de producto sin tarjetas blancas */
.part-card .part-icon{background:linear-gradient(140deg,#395b6d,#112a3c)!important;overflow:hidden}
.part-card .part-icon span{display:block!important;height:100%;width:100%;z-index:1}
.ref-art{background:linear-gradient(130deg,#45687b,#1b384b)!important;overflow:hidden!important}
.photo-frame{display:block;position:relative;overflow:hidden;width:100%;height:100%;background:#f9fafb;isolation:isolate}
.photo-fallback{position:absolute;inset:0;display:grid;place-items:center;overflow:hidden}
.photo-fallback svg{width:100%;height:100%;display:block;opacity:.75}
.photo-fallback .fallback-image{max-width:90%;max-height:94%;object-fit:contain;mix-blend-mode:normal;filter:none}
.photo-img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;mix-blend-mode:normal;filter:none;opacity:0;transition:opacity .2s ease}
.photo-frame.loaded .photo-img{opacity:1}
.photo-frame.loaded .photo-fallback{opacity:0}
.photo-frame.error .photo-img{display:none}
.photo-tag{position:absolute;z-index:3;bottom:4px;left:5px;padding:2px 4px;border-radius:3px;background:#062638b5;color:#c3f3ec;font:bold 7px system-ui;letter-spacing:.4px}
.photo-frame.error .photo-tag{color:#e9d7a0}
.ref-art .photo-tag{font-size:8px;bottom:6px;left:7px}
#refPhotoSource{display:inline-block;margin-top:7px;color:#65d6e9;text-decoration:underline;font-size:9px;line-height:1.4;word-break:break-word}
#refPhotoSource[hidden]{display:none}

[hidden]{display:none!important}

.side-head-actions{display:flex;align-items:center;gap:10px}.mini-reset-btn{border:1px solid #3f7488;background:#14364a;color:#d3f2f8;padding:6px 10px;border-radius:7px;font-size:10px;font-weight:800}.mini-reset-btn:hover,.reset-top-btn:hover{background:#1a4d66}.reset-top-btn{font-size:16px}.photo-frame{background:#ffffff;padding:4px}.photo-fallback .fallback-image,.photo-img{background:#fff;border-radius:6px;padding:4px;box-shadow:none}.photo-img{filter:brightness(1.18) contrast(1.08) saturate(1.05)}.photo-frame.loaded .photo-fallback{display:none}.photo-tag{background:#ffffffd9;color:#0f3f52;border:1px solid #9fcfe0}.part-card .part-icon .photo-frame,.ref-art .photo-frame{border-radius:6px}.scene-bottom button,.mini-reset-btn{white-space:nowrap}@media(max-width:690px){.side-head-actions{gap:6px}.mini-reset-btn{padding:5px 8px;font-size:9px}}

/* ============ Miniaturas y visores de modelos 3D (v2) ============
 * La v1.5 forzaba background:#ffffff y filter:brightness(1.18) sobre cada
 * imagen del banco. Con fotografias ya claras, el resultado era el cuadro
 * blanco del que se quejaba el usuario. Las miniaturas 3D se renderizan con
 * fondo transparente, asi que necesitan fondo oscuro y ningun filtro. */
.photo-frame.model3d{background:linear-gradient(158deg,#1a3850 0%,#0b1d2b 100%);
  padding:0;border:1px solid #27536e;border-radius:7px}
.photo-frame.model3d .photo-img{background:transparent;padding:3px;filter:none;
  box-shadow:none;opacity:0;transition:opacity .25s ease}
.photo-frame.model3d.loaded .photo-img{opacity:1}
.photo-frame.model3d .photo-tag{background:#05202ed9;color:#7fe0d2;
  border:1px solid #2d6e86;letter-spacing:.5px}
.part-card.active .photo-frame.model3d{border-color:#49c6d6;
  box-shadow:0 0 0 1px #49c6d655 inset}

/* Visor giratorio del componente activo en la guia de ensamblaje */
.ref-art .part-viewer{width:100%;height:100%;display:block;cursor:grab;
  border-radius:7px;background:linear-gradient(158deg,#1a3850,#0b1d2b);
  touch-action:none}
.ref-art .part-viewer:active{cursor:grabbing}
.ref-art-3d{position:relative;border:1px solid #27536e;border-radius:8px;
  overflow:hidden}
.ref-art-3d .viewer-hint{position:absolute;bottom:5px;left:0;right:0;
  text-align:center;font:bold 8px system-ui;letter-spacing:.4px;
  color:#8fd3e0cc;pointer-events:none}

/* El emparejado de conectores reutiliza los estilos del cableado
   (.wiring-ui, .wire-route, .wire-actions): mismo aspecto, misma mecanica. */