:root{
  --gray:#C0C0C0; --blue:#000080; --white:#fff; --black:#000; --shadow:#808080;
}
.ocioteca98-container{ position:relative; min-height:600px; background:#008080; overflow:hidden; }
.ociodesk{ position:relative; width:100%; height:600px; background-size:cover; background-position:center; image-rendering:pixelated; }
.ocio-icon{ width:64px; color:#fff; font-size:12px; text-align:center; position:absolute; cursor:default; }
.ocio-icon img{ display:block; margin:0 auto 4px; image-rendering:pixelated; }
.ocio-win{ position:absolute; background:var(--gray); border:2px solid var(--black);
  box-shadow: inset -2px -2px 0 var(--white), inset 2px 2px 0 var(--shadow);
  width:420px; min-height:220px;
}
.ocio-head{ display:flex; align-items:center; justify-content:space-between; background:linear-gradient(90deg,#000080,#1084d0); color:#fff; padding:4px 6px; font-weight:bold; cursor:move; }
.ocio-body{ padding:8px; background:var(--gray); height:calc(100% - 28px); overflow:auto; }
.ocio-btn{ border:2px solid var(--black); box-shadow: inset -2px -2px 0 var(--white), inset 2px 2px 0 var(--shadow); background:var(--gray); padding:2px 6px; font-size:12px; cursor:pointer; }
.ocio-taskbar{ position:absolute; bottom:0; left:0; right:0; height:32px; background:var(--gray); display:flex; gap:6px; align-items:center; padding:3px; border-top:2px solid var(--white); box-shadow: inset 0 2px 0 var(--shadow); }
.ocio-taskbtn{ min-width:120px; padding:2px 6px; }
.ocio-small{ font-size:12px; }
.ocio-toolbar{ display:flex; gap:6px; margin-bottom:6px; }
canvas, input, textarea { image-rendering: pixelated; }