.visualizador-oficina { display: flex; gap: 1rem; align-items: flex-start; flex-wrap: wrap; }
.canvas-contenedor { position: relative; flex: 1 1 400px; min-width: 200px; min-height: 400px; overflow: hidden; background: linear-gradient(145deg, var(--fondo-alterno) 0%, var(--fondo-pantalla) 100%); border-radius: var(--radio-diseno-material); box-shadow: var(--sombra-elevada), var(--sombra-inset-suave); }
#oficina-svg-container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; }
#oficina-svg-container svg { display: block; width: 100%; height: 100%; transform: perspective(600px) rotateX(62deg); transform-origin: 50% 100%; backface-visibility: hidden; }
#canvas-oficina { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: block; z-index: 2; transform: perspective(600px) rotateX(62deg); transform-origin: 50% 100%; backface-visibility: hidden; }
.panel-lateral-oficina {
    min-width: 200px; max-width: 260px; flex: 1 1 220px; padding: 1rem;
    background: rgb(from var(--fondo-elemento) r g b / 0.88); backdrop-filter: blur(16px);
    border: var(--grosor-trazo) solid rgb(from var(--texto-fuerte) r g b / 0.06); border-radius: var(--radio-diseno-material);
    box-shadow: var(--sombra-flotante); font-size: .875rem; color: var(--texto-fuerte);
}
.panel-lateral-oficina h3 { font-size: 1rem; font-weight: var(--grosor-negrita); margin-bottom: .75rem; padding-bottom: .5rem; border-bottom: var(--grosor-trazo) solid rgb(from var(--texto-fuerte) r g b / 0.06); color: var(--texto-fuerte); letter-spacing: .02em; }
.panel-agente { display: flex; align-items: center; gap: .5rem; padding: 6px 8px; border-radius: var(--radio-redondeado); transition: background var(--transicion-base), transform var(--transicion-base); cursor: default; }
.panel-agente:hover { background: rgb(from var(--color-marca) r g b / 0.08); transform: translateX(3px); }
.panel-agente .iniciales { width: 28px; height: 28px; border-radius: var(--radio-lleno); display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: var(--grosor-negrita); color: var(--texto-invertido); flex-shrink: 0; box-shadow: var(--sombra-flotante); }
.panel-agente .nombre { flex: 1; min-width: 0; }
.panel-agente .nombre strong { display: block; font-size: .8125rem; color: var(--texto-fuerte); }
.panel-agente .nombre span { display: block; font-size: .6875rem; color: var(--texto-suave); margin-top: 1px; }
.panel-agente .accion { font-size: 16px; width: 24px; text-align: center; }
.panel-agente.activo::before { content: ""; position: absolute; left: -3px; top: 50%; width: 6px; height: 6px; border-radius: var(--radio-lleno); background: var(--color-exito); transform: translateY(-50%); animation: pulse-dot 2s infinite; }
.panel-contadores { display: flex; gap: .5rem; margin: .75rem 0; flex-wrap: wrap; }
.contador { flex: 1; min-width: 60px; text-align: center; padding: .5rem; background: rgba(255,255,255,0.03); border: var(--grosor-trazo) solid rgba(255,255,255,0.05); border-radius: var(--radio-redondeado); }
.contador .numero { font-size: 1.5rem; font-weight: var(--grosor-negrita); display: block; transition: all var(--transicion-lenta); }
.contador .etiqueta { font-size: .6875rem; color: var(--texto-suave); display: block; margin-top: 2px; }
.log-actividad { margin-top: .75rem; padding-top: .5rem; border-top: var(--grosor-trazo) solid rgba(255,255,255,0.06); }
.log-item { font-size: .6875rem; color: var(--texto-suave); padding: 2px 0; display: flex; align-items: center; gap: 4px; }
.log-item strong { color: var(--texto-fuerte); }
#sse-status { padding: 4px 8px; margin-bottom: 6px; border-radius: var(--radio-redondeado); font-size: 10px; text-align: center; background: rgb(from var(--color-marca) r g b / 0.08); border: var(--grosor-trazo) solid rgb(from var(--color-marca) r g b / 0.15); color: var(--color-marca); transition: all var(--transicion-lenta); }
#sse-status.sse-ok { background: rgb(from var(--color-exito) r g b / 0.08); border-color: rgb(from var(--color-exito) r g b / 0.15); color: var(--color-exito); animation: pulse-glow 2s infinite; }
#sse-status.sse-error { background: rgb(from var(--color-peligro) r g b / 0.08); border-color: rgb(from var(--color-peligro) r g b / 0.15); color: var(--color-peligro); }
@keyframes pulse-dot { 0%,100% { opacity: 1; } 50% { opacity: 0.3; } }
@keyframes pulse-glow { 0%,100% { box-shadow: var(--sombra-pulso); } 50% { box-shadow: var(--sombra-pulso-activo); } }