/* Oficina 3D: lienzo WebGL + capa HTML de etiquetas accesibles */
.iso3d{
  --o-accent:oklch(0.64 0.2 38);
  --o-accent-ink:oklch(0.47 0.16 38);
  --o-accent-soft:oklch(0.95 0.035 50);
  --o-ink:oklch(0.29 0.014 70);
  --o-muted:oklch(0.56 0.018 70);
  --o-paper:oklch(0.995 0.003 80);
  --o-line:oklch(0.9 0.012 75);
  --o-ok:oklch(0.64 0.14 152);
  --o-busy:oklch(0.74 0.15 72);
  --o-away:oklch(0.74 0.01 70);
  --o-ease:cubic-bezier(.22,1,.36,1);
  position:relative;height:clamp(520px,76vh,980px);overflow:hidden;isolation:isolate;
  background:radial-gradient(120% 90% at 50% 40%,oklch(0.99 0.006 80),oklch(0.965 0.01 75));
  user-select:none;-webkit-user-select:none
}
.iso3d-stage{position:absolute;inset:0}
.iso3d-stage canvas{display:block;width:100%!important;height:100%!important;cursor:grab;touch-action:pan-y}
.iso3d.zoomed .iso3d-stage canvas{touch-action:none}
.iso3d.panning .iso3d-stage canvas{cursor:grabbing}
.iso3d-layer{position:absolute;inset:0;pointer-events:none;z-index:2}
.iso3d-layer>*{pointer-events:auto;position:absolute;left:0;top:0;will-change:transform}

/* etiquetas de zona */
.iso3d-zone{display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 8px 0 13px;border-radius:17px;border:1px solid var(--o-line);background:var(--o-paper);color:var(--o-ink);font-weight:600;font-size:12.5px;line-height:1;font-family:inherit;white-space:nowrap;cursor:pointer;
  box-shadow:0 1px 0 oklch(1 0 0 / .8) inset,0 6px 16px -6px oklch(0.35 0.04 60 / .28),0 2px 4px oklch(0.35 0.04 60 / .08);transition:background .2s,border-color .2s,color .2s,box-shadow .25s var(--o-ease)}
.iso3d-zone svg{width:16px;height:16px;fill:none;stroke:var(--o-accent);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.iso3d-count{display:grid;place-items:center;min-width:20px;height:20px;padding:0 5px;border-radius:10px;background:oklch(0.95 0.01 75);color:var(--o-muted);font-size:10.5px;font-weight:700}
.iso3d-zone:hover,.iso3d-zone.hover{border-color:oklch(0.82 0.09 45);box-shadow:0 1px 0 oklch(1 0 0 / .8) inset,0 10px 22px -8px oklch(0.55 0.15 40 / .35)}
.iso3d-zone.selected{background:var(--o-accent-soft);border-color:oklch(0.82 0.1 45);color:var(--o-accent-ink)}
.iso3d-zone.selected .iso3d-count{background:var(--o-accent);color:#fff}
.iso3d-zone.minor{height:28px;gap:6px;padding:0 6px 0 10px;font-size:11px;font-weight:600}
.iso3d-zone.minor svg{width:13px;height:13px}
.iso3d-zone.minor .iso3d-count{min-width:17px;height:17px;font-size:9.5px}
.iso3d-zone:disabled{opacity:.5;cursor:not-allowed}
.iso3d-zone:focus-visible,.iso3d-pin:focus-visible,.iso3d-controls button:focus-visible{outline:2px solid var(--o-accent);outline-offset:3px}

/* fichas de personas y especialistas */
.iso3d-pin{display:block;border:0;background:none;padding:0;cursor:pointer;font-family:inherit}
.iso3d-avatar{position:relative;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--c,#73886d);color:#fff;font-weight:800;font-size:11px;line-height:1;font-family:inherit;letter-spacing:.02em;
  box-shadow:0 0 0 3px var(--o-paper),0 8px 16px -4px oklch(0.3 0.04 60 / .4);transition:transform .25s var(--o-ease)}
.iso3d-pin:hover .iso3d-avatar{transform:translateY(-3px) scale(1.06)}
.iso3d-pin.me .iso3d-avatar{box-shadow:0 0 0 3px var(--o-paper),0 0 0 5.5px var(--o-accent),0 8px 16px -4px oklch(0.3 0.04 60 / .4)}
.iso3d-pin.me .iso3d-avatar::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:2px solid var(--o-accent);animation:iso3d-pulse 2.4s var(--o-ease) infinite}
@keyframes iso3d-pulse{from{opacity:.8;transform:scale(1)}to{opacity:0;transform:scale(1.55)}}
.iso3d-dot{position:absolute;right:-2px;bottom:-1px;width:11px;height:11px;border-radius:50%;background:var(--o-ok);box-shadow:0 0 0 2.5px var(--o-paper)}
.iso3d-dot.busy{background:var(--o-busy)}.iso3d-dot.away{background:var(--o-away)}
.iso3d-call{position:absolute;left:-6px;top:-5px;display:grid;place-items:center;width:18px;height:18px;border-radius:50%;background:var(--o-accent);box-shadow:0 0 0 2px var(--o-paper)}
.iso3d-call svg{width:10px;height:10px;fill:none;stroke:#fff;stroke-width:2.4;stroke-linecap:round}
.iso3d-avatar.bot{background:var(--o-paper);color:var(--o-accent);box-shadow:0 0 0 1px oklch(0.85 0.06 50),0 0 0 3.5px var(--o-paper),0 8px 16px -4px oklch(0.3 0.04 60 / .35)}
.iso3d-avatar.bot{width:26px;height:26px}
.iso3d-avatar.bot svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.iso3d-avatar.bot.working{background:var(--o-accent);color:#fff;animation:iso3d-work 1.2s ease-in-out infinite alternate}
.iso3d-avatar.bot.pending{color:var(--o-muted);filter:grayscale(1);opacity:.75}
@keyframes iso3d-work{to{box-shadow:0 0 0 3.5px var(--o-paper),0 0 0 8px oklch(0.64 0.2 38 / .25),0 8px 16px -4px oklch(0.3 0.04 60 / .35)}}
/* gemelo digital: ficha pequeña en el color de su persona */
.iso3d-avatar.twin{width:24px;height:24px;background:var(--o-paper);color:var(--c);font-size:9px;box-shadow:0 0 0 1.5px var(--c),0 0 0 3.5px var(--o-paper),0 6px 12px -4px oklch(0.3 0.04 60 / .35)}
.iso3d-twin-badge{position:absolute;right:-7px;top:-7px;display:grid;place-items:center;width:15px;height:15px;border-radius:50%;background:var(--c);box-shadow:0 0 0 2px var(--o-paper)}
.iso3d-twin-badge svg{width:9px;height:9px;fill:none;stroke:#fff;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.iso3d-pin.twin .iso3d-name{background:var(--o-paper);color:var(--o-ink);box-shadow:0 0 0 1px var(--o-line)}
.iso3d-name{position:absolute;left:50%;bottom:calc(100% + 7px);translate:-50% 0;padding:4px 8px;border-radius:7px;background:oklch(0.25 0.012 60 / .88);color:#fff;font-weight:600;font-size:10.5px;line-height:1;font-family:inherit;white-space:nowrap;opacity:0;transform:translateY(-4px);transition:opacity .18s,transform .25s var(--o-ease);pointer-events:none}
.iso3d-pin.bot .iso3d-name{background:var(--o-paper);color:var(--o-accent-ink);box-shadow:0 0 0 1px oklch(0.86 0.06 50)}
.iso3d-pin:hover .iso3d-name,.iso3d-pin:focus-visible .iso3d-name,.iso3d-pin.me .iso3d-name,.iso3d-pin.working .iso3d-name{opacity:1;transform:none}

/* controles y ficha */
.iso3d-controls{position:absolute;right:14px;bottom:14px;z-index:4;display:flex;flex-direction:column;border-radius:12px;overflow:hidden;background:var(--o-line);gap:1px;box-shadow:0 8px 20px -6px oklch(0.3 0.04 60 / .3)}
.iso3d-controls button{width:36px;height:36px;display:grid;place-items:center;padding:0;border:0;background:var(--o-paper);color:var(--o-ink);cursor:pointer}
.iso3d-controls button:hover{background:var(--o-accent-soft);color:var(--o-accent-ink)}
.iso3d-controls svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.iso3d:fullscreen{height:100vh;width:100vw;border-radius:0}
.iso3d::backdrop{background:oklch(0.975 0.006 80)}
.iso3d-tip{position:absolute;left:0;top:0;z-index:5;pointer-events:none;display:grid;gap:3px;max-width:220px;padding:10px 12px;border-radius:11px;background:oklch(0.25 0.012 60 / .95);color:#fff;font-size:11.5px;line-height:1.35;opacity:0;transition:opacity .15s;box-shadow:0 12px 28px -10px oklch(0.2 0.02 60 / .5)}
.iso3d-tip.show{opacity:1}
.iso3d-tip strong{font-size:12.5px}
.iso3d-tip span{color:oklch(0.87 0.02 70)}

@media (max-width:760px){.iso3d{height:clamp(420px,72vh,760px)}.iso3d-controls button{width:44px;height:44px}.iso3d-zone{height:30px;font-size:11px;padding:0 6px 0 10px}.iso3d-zone svg{display:none}}
@media (prefers-reduced-motion:reduce){.iso3d-avatar,.iso3d-name,.iso3d-zone{transition:none}.iso3d-pin.me .iso3d-avatar::after,.iso3d-avatar.bot.working{animation:none}}