/* Oficina en vivo: la escena es un canvas con sus propios grises (pantalla de juego);
   alrededor se usan los tokens normales para que siga el modo oscuro. */
.of-grid{display:grid; grid-template-columns:minmax(0,1fr) 280px; gap:16px; align-items:start}
.of-escena{min-width:0; display:flex; justify-content:center; background:#cfcfcf; border:1px solid var(--border-strong); border-radius:var(--radius); padding:12px; overflow:hidden}
#of-canvas{display:block; image-rendering:pixelated; border-radius:4px}
.of-lado{background:var(--bg-soft); border:1px solid var(--border); border-radius:var(--radius); padding:14px 16px}
.of-lado h2{font-size:14px; margin:0 0 10px}
.of-feed{list-style:none; margin:0; padding:0; max-height:420px; overflow:auto; font-size:13px; line-height:1.4}
.of-feed li{padding:6px 0; border-top:1px solid var(--border); color:var(--text)}
.of-feed li:first-child{border-top:0}
.of-feed time{color:var(--text-dim); font-variant-numeric:tabular-nums; margin-right:4px}
.of-feed .of-vacio{color:var(--text-muted)}
.of-nota{font-size:12px; color:var(--text-muted); margin:12px 0 0}
.of-aviso,.of-yo{margin:0 0 12px; padding:10px 14px; border-radius:var(--radius-sm); border:1px solid var(--border-strong); background:var(--bg-soft); font-size:13px; display:flex; gap:12px; align-items:center; flex-wrap:wrap}
.of-yo{border-color:var(--red); background:var(--red-soft); color:var(--text)}
.of-aviso[hidden],.of-yo[hidden]{display:none}
@media (max-width:900px){ .of-grid{grid-template-columns:1fr} .of-escena{padding:8px} }
/* Escena a todo el ancho; debajo, tarjetas de pendientes y movimientos. */
.of-escena{margin-bottom:16px}
.of-vivo h2{font-size:14px; margin:0 0 10px}
.of-cards{display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:12px}
.of-card{border:1px solid var(--border); border-radius:var(--radius); padding:12px 14px; background:var(--bg-soft); min-width:0}
.of-card header{display:flex; gap:8px; align-items:center; justify-content:space-between; margin-bottom:8px}
.of-card strong{font-size:14px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.of-card ol{list-style:none; margin:0; padding:0; max-height:200px; overflow:auto; font-size:13px; line-height:1.35}
.of-card li{padding:4px 0; border-top:1px solid var(--border)}
.of-card li:first-child{border-top:0}
.of-st{display:inline-block; min-width:64px; font-size:11px; color:var(--text-dim); text-transform:uppercase; letter-spacing:.02em; margin-right:6px}
.of-card .of-vacio{margin:0; font-size:13px; color:var(--text-muted)}
.of-card footer{margin-top:8px; font-size:12px; color:var(--text-muted)}
.of-chip{font-size:11px; padding:2px 8px; border-radius:999px; border:1px solid var(--border-strong); color:var(--text-dim); white-space:nowrap}
.of-k-trabajando{color:var(--text); border-color:var(--text)}
.of-k-fuera,.of-k-sinsenal{color:var(--red); border-color:var(--red)}
.of-flash{animation:of-flash 1.6s ease-out}
@keyframes of-flash{from{box-shadow:0 0 0 3px var(--text)} to{box-shadow:0 0 0 3px transparent}}
@media (prefers-reduced-motion:reduce){ .of-flash{animation:none} }