@font-face{font-family:'IBM Plex Sans';src:url('fonts/IBMPlexSans-Regular.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'IBM Plex Sans';src:url('fonts/IBMPlexSans-Medium.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'IBM Plex Sans';src:url('fonts/IBMPlexSans-SemiBold.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'IBM Plex Sans';src:url('fonts/IBMPlexSans-Bold.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'JetBrains Mono';src:url('fonts/JetBrainsMono-Regular.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'JetBrains Mono';src:url('fonts/JetBrainsMono-Medium.woff2') format('woff2');font-weight:500;font-display:swap}

:root{
  --papel:#ffffff; --papel-2:#f6f8fa; --papel-3:#eef1f4;
  --tinta:#0a0a0a; --tinta-2:#52525b; --tinta-3:#a1a1aa;
  --borde:#e4e4e7; --acento:#3b82f6;
  --sans:'IBM Plex Sans',sans-serif; --mono:'JetBrains Mono',monospace;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{
  background:var(--papel);color:var(--tinta);font-family:var(--sans);
  font-size:14px;line-height:1.5;display:flex;flex-direction:column;overflow:hidden;
}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}

.top{
  display:flex;align-items:center;justify-content:space-between;
  padding:.6rem 1rem;border-bottom:1px solid var(--borde);background:var(--papel);flex:0 0 auto;
}
.marca-nombre{font-weight:700;font-size:.95rem}
.marca-sub{color:var(--tinta-3);font-size:.75rem;margin-left:.5rem}
.top-info{display:flex;align-items:center;gap:.75rem}
#info-cursor{color:var(--tinta-2);font-size:.72rem}
.btn-top{
  font-family:inherit;font-size:.75rem;font-weight:500;color:var(--tinta);
  background:var(--papel-2);border:1px solid var(--borde);border-radius:6px;
  padding:.35rem .7rem;cursor:pointer;
}
.btn-top:hover{background:var(--papel-3)}

.visor{
  flex:1 1 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:var(--borde);min-height:0;
}
.pane{position:relative;background:#000;display:flex;flex-direction:column;min-height:0}
.pane-titulo{
  position:absolute;top:.4rem;left:.5rem;z-index:2;color:#e4e4e7;
  font-size:.7rem;font-weight:600;text-shadow:0 1px 3px rgba(0,0,0,.8);
  display:flex;gap:.4rem;align-items:baseline;pointer-events:none;
}
.pane-titulo .mono{color:#a1a1aa;font-weight:400}
.pane canvas{flex:1 1 auto;width:100%;height:100%;cursor:crosshair;touch-action:none}

.panel-control{
  flex:0 0 auto;display:flex;align-items:center;gap:1.5rem;flex-wrap:wrap;
  padding:.6rem 1rem;border-top:1px solid var(--borde);background:var(--papel);
}
.grupo{display:flex;align-items:center;gap:.5rem}
.grupo label{font-size:.72rem;color:var(--tinta-2);font-weight:500;white-space:nowrap}
.grupo input[type=range]{width:120px}
.grupo select{
  font-family:inherit;font-size:.75rem;color:var(--tinta);background:var(--papel);
  border:1px solid var(--borde);border-radius:6px;padding:.3rem .5rem;
}
.ayuda{font-size:.7rem;color:var(--tinta-3)}

@media (max-width:820px){
  .visor{grid-template-columns:1fr;grid-template-rows:repeat(3,1fr)}
}