@font-face{font-family:"Manrope";font-weight:600;font-display:swap;src:url("fonts/manrope-600.woff2") format("woff2")}
@font-face{font-family:"Manrope";font-weight:700;font-display:swap;src:url("fonts/manrope-700.woff2") format("woff2")}
@font-face{font-family:"Manrope";font-weight:800;font-display:swap;src:url("fonts/manrope-800.woff2") format("woff2")}

/* Oficina Kurova · mundo oscuro de sala de control, tema único */
:root{
  --app:#0b1622; --navy:#0F2A44;
  --teal-d:#0B7A75; --teal:#12A39A; --teal-br:#2DD4BF; --hueso:#F6F5F2;
  --muted:#9FB3C4;
  --st-trabajando:#2DD4BF; --st-cambios:#F2B544; --st-abierto:#5AA8F0; --st-libre:#7C8D9C;
  --glass:rgba(255,255,255,.09); --glass-hi:rgba(255,255,255,.15);
  --line:rgba(255,255,255,.16);
  --r:22px;
  --font:"Manrope",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  color-scheme:dark;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{font-family:var(--font);background:var(--app);color:var(--hueso);overflow:hidden;
  -webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;
  -webkit-user-select:none;user-select:none;overscroll-behavior:none;-webkit-touch-callout:none}
button{font-family:inherit;color:inherit}
[hidden]{display:none!important}

#esc{position:fixed;inset:0;width:100%;height:100%;display:block;touch-action:none;
  background:radial-gradient(120% 90% at 50% 10%,#12304d 0%,#0d2033 45%,var(--app) 80%)}
#labels{position:fixed;inset:0;pointer-events:none;overflow:hidden}

/* --- etiquetas de agentes --- */
.lbl{position:absolute;left:0;top:0;will-change:transform,opacity;transition:opacity .25s}
.lbl .chip{display:inline-flex;align-items:center;gap:6px;transform:translate(-50%,-100%);
  /* sin backdrop-filter: sobre el 3D en movimiento provoca parpadeo */
  background:rgba(12,28,45,.86);
  border:1px solid var(--line);border-radius:999px;padding:5px 10px 5px 8px;white-space:nowrap;
  box-shadow:0 6px 18px rgba(0,0,0,.35);font-weight:800;font-size:12.5px;letter-spacing:-.01em}
.lbl .dot{width:8px;height:8px;border-radius:50%;flex:none;box-shadow:0 0 8px currentColor;background:currentColor}
.lbl.sel .chip{background:rgba(18,163,154,.35);border-color:rgba(45,212,191,.6)}
.lbl.pronto .chip{opacity:.75;font-weight:700}
.lbl.lejos .chip .nm{display:none}
.lbl.lejos .chip{padding:5px}

/* --- capa UI --- */
.ui{position:fixed;inset:0;pointer-events:none;display:flex;flex-direction:column;gap:10px;
  padding:max(12px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left))}
.glass{background:var(--glass);backdrop-filter:blur(24px) saturate(165%);-webkit-backdrop-filter:blur(24px) saturate(165%);
  border:1px solid var(--line);border-radius:var(--r);
  box-shadow:0 18px 50px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.22)}

.top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 16px 10px 10px;pointer-events:auto}
.brand{display:flex;align-items:center;gap:11px;min-width:0}
.tile{width:40px;height:40px;background:var(--navy);border-radius:12px;display:flex;align-items:center;justify-content:center;flex:none;border:1px solid rgba(255,255,255,.14)}
.tile svg{width:72%;height:72%}
.brand-txt{min-width:0}
.brand-txt b{display:block;font-weight:800;font-size:17px;letter-spacing:-.015em;line-height:1.15}
.brand-txt span{display:block;font-weight:600;font-size:12.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.brand-txt span em{font-style:normal;color:var(--st-cambios);font-weight:700}
.live{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:13px;color:var(--teal-br);flex:none;font-variant-numeric:tabular-nums}
.live .pulse{width:8px;height:8px;border-radius:50%;background:var(--teal-br);animation:pulse 2.2s infinite}
.live.off{color:var(--muted)}.live.off .pulse{background:var(--muted);animation:none}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(45,212,191,.5)}70%{box-shadow:0 0 0 9px rgba(45,212,191,0)}100%{box-shadow:0 0 0 0 rgba(45,212,191,0)}}

/* chips de departamentos */
.chips{display:flex;gap:8px;overflow-x:auto;pointer-events:auto;scrollbar-width:none;
  margin:0 -12px;padding:2px 12px;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 12px,#000 calc(100% - 12px),transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 12px,#000 calc(100% - 12px),transparent 100%)}
.chips::-webkit-scrollbar{display:none}
.dchip{flex:none;display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:8px 14px 8px 10px;border-radius:999px;cursor:pointer;
  background:var(--glass);backdrop-filter:blur(20px) saturate(160%);-webkit-backdrop-filter:blur(20px) saturate(160%);
  border:1px solid var(--line);font-weight:700;font-size:13.5px;transition:background .2s,border-color .2s,transform .12s}
.dchip .sw{width:12px;height:12px;border-radius:4px;flex:none;border:1px solid rgba(255,255,255,.25)}
.dchip .n{font-size:11.5px;font-weight:800;color:var(--muted);background:rgba(255,255,255,.08);border-radius:999px;padding:1px 7px}
.dchip.soon{color:var(--muted)}
.dchip[aria-pressed="true"]{background:rgba(45,212,191,.2);border-color:rgba(45,212,191,.55)}
.dchip:active{transform:scale(.96)}
@media (hover:hover){.dchip:hover{background:var(--glass-hi)}}

/* controles de cámara */
.ctrls{position:absolute;right:max(12px,env(safe-area-inset-right));top:50%;transform:translateY(-50%);
  display:flex;flex-direction:column;gap:2px;padding:5px;pointer-events:auto;border-radius:18px}
.cbtn{appearance:none;width:44px;height:44px;border:0;border-radius:13px;background:transparent;cursor:pointer;
  font-size:21px;font-weight:700;line-height:1;display:flex;align-items:center;justify-content:center;transition:background .2s,transform .12s}
.cbtn:active{transform:scale(.92)}
.cbtn[aria-pressed="true"]{background:rgba(45,212,191,.24);color:var(--teal-br)}
@media (hover:hover){.cbtn:hover{background:var(--glass-hi)}}
.cbtn:focus-visible,.dchip:focus-visible,.x:focus-visible{outline:2px solid var(--teal-br);outline-offset:2px}

/* abajo */
.bottom{margin-top:auto;display:flex;flex-direction:column;align-items:flex-start;gap:10px;width:100%;max-width:440px}
.legend{display:flex;flex-wrap:wrap;gap:6px 14px;padding:10px 14px;pointer-events:auto;border-radius:18px}
.legend .it{display:flex;align-items:center;gap:7px;font-weight:600;font-size:12.5px}
.legend .d{width:10px;height:10px;border-radius:50%;flex:none;background:currentColor;box-shadow:0 0 8px currentColor}
.legend .c{font-weight:800;color:var(--muted);font-variant-numeric:tabular-nums}

.x{appearance:none;position:absolute;top:10px;right:10px;width:36px;height:36px;border-radius:50%;border:1px solid var(--line);
  background:rgba(255,255,255,.07);font-size:20px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center}

.sheet{position:relative;width:100%;padding:16px 16px 14px;pointer-events:auto;border-radius:24px;
  animation:subir .32s cubic-bezier(.2,.9,.25,1)}
@keyframes subir{from{opacity:0;transform:translateY(16px) scale(.98)}to{opacity:1;transform:none}}
.sh-head{display:flex;align-items:center;gap:12px;padding-right:40px}
.avatar{width:46px;height:46px;border-radius:15px;flex:none;position:relative;border:1px solid rgba(255,255,255,.2);
  background:linear-gradient(160deg,rgba(255,255,255,.25),rgba(255,255,255,0) 60%),var(--c,#12A39A)}
.avatar::after{content:"";position:absolute;right:-3px;bottom:-3px;width:14px;height:14px;border-radius:50%;background:var(--s,#2DD4BF);border:3px solid #13263a}
.sh-tit h2{font-size:19px;font-weight:800;letter-spacing:-.02em;line-height:1.15}
.sh-tit p{font-size:13px;font-weight:600;color:var(--muted);margin-top:2px}
.sh-meta{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.pill{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:800;padding:5px 10px;border-radius:999px;
  background:rgba(255,255,255,.08);border:1px solid var(--line)}
.pill::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--s,#fff)}
.pill.dep::before{border-radius:3px;background:var(--c,#fff)}
.sh-lbl{margin-top:14px;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.sh-enc{margin-top:4px;font-size:15px;font-weight:600;line-height:1.5;-webkit-user-select:text;user-select:text}
.sh-sala{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.sh-sala button{appearance:none;cursor:pointer;font-size:12.5px;font-weight:700;padding:7px 11px;border-radius:12px;
  background:rgba(255,255,255,.06);border:1px solid var(--line);display:inline-flex;align-items:center;gap:6px;min-height:34px}
.sh-sala button::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--s,#fff)}
.sh-sala button[aria-current="true"]{background:rgba(45,212,191,.18);border-color:rgba(45,212,191,.5)}

.install{position:relative;padding:12px 52px 12px 14px;font-size:13px;font-weight:600;color:var(--muted);pointer-events:auto;border-radius:16px;line-height:1.45}
.install b{color:var(--hueso)}
.install .x{top:50%;transform:translateY(-50%);width:32px;height:32px}

.carga{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;gap:12px;font-weight:700;color:var(--muted);transition:opacity .4s}
.carga.fuera{opacity:0;pointer-events:none}
.spin{width:18px;height:18px;border-radius:50%;border:2.5px solid rgba(255,255,255,.15);border-top-color:var(--teal-br);animation:gira .8s linear infinite}
@keyframes gira{to{transform:rotate(360deg)}}

@media (max-width:600px){
  .ctrls{top:auto;bottom:calc(max(12px,env(safe-area-inset-bottom)) + 0px);transform:none}
  .bottom{max-width:calc(100% - 66px)}
  .brand-txt b{font-size:16px}
}
@media (prefers-reduced-motion:reduce){
  .live .pulse,.spin{animation:none}
  .sheet{animation:none}
}