/* Un monitor de escritorio completo; el recorrido se calcula desde sus bordes reales. */
.cj-monitor { width:min(100%,530px,58svh); }
.cj-monitor-screen { aspect-ratio:1.8; padding:8px; border:1px solid #626a75; border-radius:17px; background:linear-gradient(145deg,#505761,#1c2026 7%,#343b44 95%); box-shadow:0 1px 0 #ffffff30 inset,0 0 0 3px #0a0c0e,0 18px 45px -15px #000; }
.cj-monitor-desktop { inset:8px; border-radius:10px; background:radial-gradient(ellipse at 90% 100%,#395b88 0,transparent 62%),radial-gradient(ellipse at 0 0,#303c58 0,transparent 60%),#101c2c; }
.cj-desktop-head { display:flex; justify-content:space-between; align-items:center; padding:12px 16px 9px; color:#d5e0ee; font:10px var(--font-sans); }
.cj-desktop-head small { color:#92a5bf; font:8px var(--font-mono); }
.cj-monitor-window { position:absolute; inset:36px 24px 40px; border:1px solid #a8bdde30; border-radius:8px; background:#121c2ed9; box-shadow:0 16px 25px #0004; overflow:hidden; }
.cj-monitor-chrome { height:24px; border-radius:0; background:#263348; color:#b8c9df; font-size:8px; }
.cj-window-controls { color:#a7b6cb; }
.cj-monitor-work { display:grid; grid-template-columns:1fr 1.2fr; gap:12px; align-items:center; height:calc(100% - 24px); padding:12px 16px; }
.cj-work-lines { display:grid; gap:9px; }
.cj-work-lines span { height:4px; border-radius:2px; background:#839ec132; }
.cj-work-lines span:nth-child(2) { width:80%; }
.cj-work-lines span:nth-child(3) { width:57%; }
.cj-desktop-apps { display:flex; justify-content:space-around; gap:10px; margin:0; }
.cj-desktop-apps>span { color:#bdcce0; font-size:8px; gap:8px; }
.cj-desktop-apps i { width:30px; height:30px; padding:6px; border:1px solid #c0d8ff18; border-radius:8px; background:#c0d8ff09; }
.cj-desktop-apps svg { width:22px; height:22px; }
.cj-monitor-taskbar { height:25px; gap:12px; border-top:1px solid #c4ddff13; background:#152135c9; color:#8bb7f1; }
.cj-monitor-taskbar span { width:11px; height:11px; border-radius:3px; background:#849ab53d; }
.cj-monitor-edge { bottom:7px; height:2px; left:35%; right:35%; }
.cj-monitor-stand { width:14%; height:17px; background:linear-gradient(90deg,#232a33,#4e5867,#252d38); border-radius:0; }
.cj-monitor-base { width:33%; height:5px; margin:auto; border-radius:50% 50% 3px 3px; background:linear-gradient(#48515e,#202630); box-shadow:0 3px 7px #0008; }
.cj-mouse-bridge { height:22px; }
.cj-mouse-demo[data-surface=crossing] .cj-mouse-bridge { box-shadow:0 0 16px #a1c8ff; }
.cj-mouse-device { width:min(58%,285px,31svh); }
@media(max-width:899px) {
 .cj-monitor { width:min(90%,330px); }
 .cj-monitor-screen { padding:6px; border-radius:12px; }
 .cj-monitor-desktop { inset:6px; border-radius:7px; }
 .cj-desktop-head { padding:8px 10px; font-size:8px; }
 .cj-desktop-head small { font-size:6px; }
 .cj-monitor-window { inset:27px 13px 27px; border-radius:5px; }
 .cj-monitor-chrome { height:18px; font-size:7px; }
 .cj-monitor-work { height:calc(100% - 18px); grid-template-columns:1fr; padding:8px 10px; }
 .cj-work-lines { display:none; }
 .cj-desktop-apps>span { font-size:7px; gap:3px; }
 .cj-desktop-apps i { width:24px; height:24px; padding:4px; }
 .cj-desktop-apps svg { width:18px; height:18px; }
 .cj-monitor-taskbar { height:18px; }
 .cj-monitor-taskbar span { width:8px; height:8px; }
 .cj-monitor-edge { bottom:5px; }
 .cj-monitor-stand { height:12px; }
 .cj-monitor-base { height:4px; }
 .cj-mouse-bridge { height:16px; }
 .cj-mouse-device { width:min(65%,225px,28svh); }
}
@media(max-width:899px) and (max-height:740px) {
 .cj-monitor { width:min(78%,235px); }
 .cj-mouse-device { width:min(48%,18svh); }
 .cj-desktop-head { padding:6px 10px; }
 .cj-monitor-window { inset:23px 10px 22px; }
 .cj-monitor-chrome { height:15px; font-size:6px; }
 .cj-monitor-taskbar { height:14px; }
 .cj-monitor-work { height:calc(100% - 15px); padding:4px 8px; }
 .cj-desktop-apps>span { font-size:6px; }
 .cj-desktop-apps i { width:20px; height:20px; padding:2px; }
}