:root{
  --principal:#37362f; --secundario:#ece5d7; --acento:#b8956a;
  --fondo:#171612; --vidrio:rgba(26,25,21,.72); --borde:rgba(255,255,255,.10); --texto:#f4efe4; --suave:#b9b2a2;
  --ok:#7ed6a2; --aviso:#f0c274; --radio:16px;
  --serif:Georgia,"Iowan Old Style","Palatino Linotype",serif;
  --sans:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--fondo);color:var(--texto);font-family:var(--sans);overflow:hidden;-webkit-tap-highlight-color:transparent}
body{touch-action:none;user-select:none;-webkit-user-select:none}
#escena{position:fixed;inset:0}
#escena canvas{display:block;width:100%;height:100%;outline:none}
button{font:inherit;color:inherit;cursor:pointer}

/* marca arriba a la izquierda */
#marca{position:fixed;left:max(16px,env(safe-area-inset-left));top:max(14px,env(safe-area-inset-top));display:flex;align-items:center;gap:12px;
  background:var(--vidrio);backdrop-filter:blur(14px) saturate(1.2);-webkit-backdrop-filter:blur(14px) saturate(1.2);border:1px solid var(--borde);border-radius:14px;padding:8px 16px 8px 8px;z-index:5;max-width:calc(100vw - 32px)}
#marca-logo{height:44px;width:auto;border-radius:8px;display:block;background:var(--secundario)}
.marca-texto{display:flex;flex-direction:column;line-height:1.15;min-width:0}
.marca-texto b{font-family:var(--serif);font-size:19px;letter-spacing:.02em;font-weight:600}
.marca-texto span{font-size:11.5px;color:var(--suave);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#hora{position:fixed;left:max(16px,env(safe-area-inset-left));top:calc(max(14px,env(safe-area-inset-top)) + 70px);z-index:5;display:flex;align-items:baseline;gap:8px;
  background:var(--vidrio);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid var(--borde);border-radius:12px;padding:6px 12px;font-variant-numeric:tabular-nums}
#hora-texto{font-size:20px;font-weight:600;letter-spacing:.03em}
#hora-dia{font-size:11px;color:var(--suave);text-transform:uppercase;letter-spacing:.1em}

/* panel del equipo */
#panel{position:fixed;right:max(14px,env(safe-area-inset-right));top:max(14px,env(safe-area-inset-top));bottom:78px;width:352px;z-index:6;display:flex;flex-direction:column;gap:10px;
  background:var(--vidrio);backdrop-filter:blur(18px) saturate(1.25);-webkit-backdrop-filter:blur(18px) saturate(1.25);border:1px solid var(--borde);border-radius:20px;padding:16px 14px 12px;
  box-shadow:0 24px 60px rgba(0,0,0,.35);overflow:hidden;transition:transform .35s cubic-bezier(.2,.8,.2,1)}
#panel-asa{display:none}
.panel-cab{display:flex;align-items:center;justify-content:space-between;padding:0 4px}
.panel-cab h2{margin:0;font-family:var(--serif);font-size:22px;font-weight:600;letter-spacing:.01em}
.vivo{font-size:11px;color:var(--ok);display:flex;align-items:center;gap:6px;text-transform:uppercase;letter-spacing:.1em}
.vivo i{width:8px;height:8px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 0 rgba(126,214,162,.6);animation:latido 1.8s infinite}
@keyframes latido{70%{box-shadow:0 0 0 9px rgba(126,214,162,0)}100%{box-shadow:0 0 0 0 rgba(126,214,162,0)}}
#kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.kpi{background:rgba(255,255,255,.05);border:1px solid var(--borde);border-radius:12px;padding:9px 10px}
.kpi b{display:block;font-size:22px;font-weight:650;font-variant-numeric:tabular-nums;line-height:1.1}
.kpi span{font-size:10.5px;color:var(--suave);text-transform:uppercase;letter-spacing:.07em}
#lista{display:flex;flex-direction:column;gap:7px;overflow:auto;min-height:0;flex:0 1 auto;scrollbar-width:thin}
.ag{display:grid;grid-template-columns:42px 1fr auto;gap:10px;align-items:center;padding:8px 10px;border-radius:14px;background:rgba(255,255,255,.045);border:1px solid transparent;cursor:pointer;transition:background .2s,border-color .2s}
.ag:hover,.ag.sel{background:rgba(255,255,255,.09);border-color:var(--acento)}
.ag .av{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;font-family:var(--serif);font-size:19px;font-weight:700;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.4);position:relative}
.ag .av::after{content:"";position:absolute;right:-1px;bottom:-1px;width:12px;height:12px;border-radius:50%;background:var(--est,var(--ok));border:2px solid #1d1c18}
.ag .n{font-weight:600;font-size:14.5px;line-height:1.2}
.ag .n small{font-weight:400;color:var(--suave);font-size:11.5px;margin-left:6px}
.ag .t{font-size:12px;color:var(--suave);line-height:1.3;margin-top:2px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ag .chip{font-size:10.5px;padding:3px 8px;border-radius:99px;background:rgba(255,255,255,.08);color:var(--texto);white-space:nowrap}
.ag .prog{grid-column:2 / 4;height:3px;border-radius:3px;background:rgba(255,255,255,.08);overflow:hidden;margin-top:1px}
.ag .prog i{display:block;height:100%;width:0;background:var(--acento);border-radius:3px}
h3.sec{margin:6px 4px 0;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--suave);font-weight:600}
#feed{list-style:none;margin:0;padding:0 2px;overflow:auto;min-height:0;flex:1 1 90px;scrollbar-width:thin;display:flex;flex-direction:column;gap:5px}
#feed li{font-size:12px;line-height:1.35;color:var(--suave);display:grid;grid-template-columns:42px 1fr;gap:6px;animation:entra .4s ease}
#feed li b{color:var(--texto);font-weight:600}
#feed li time{font-variant-numeric:tabular-nums;color:#8d8778}
@keyframes entra{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}

/* ficha del agente */
#ficha{position:fixed;left:max(16px,env(safe-area-inset-left));bottom:84px;width:340px;max-height:calc(100vh - 230px);overflow:auto;z-index:7;
  background:var(--vidrio);backdrop-filter:blur(18px) saturate(1.25);-webkit-backdrop-filter:blur(18px) saturate(1.25);border:1px solid var(--borde);border-radius:20px;padding:16px;
  box-shadow:0 24px 60px rgba(0,0,0,.4);animation:sube .35s cubic-bezier(.2,.8,.2,1);scrollbar-width:thin}
#ficha[hidden]{display:none}
@keyframes sube{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
#ficha-cerrar{position:absolute;right:10px;top:8px;width:32px;height:32px;border-radius:50%;border:0;background:rgba(255,255,255,.08);font-size:20px;line-height:1}
.ficha-cab{display:flex;gap:12px;align-items:center;margin-bottom:10px;padding-right:30px}
#ficha-avatar{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;font-family:var(--serif);font-size:26px;font-weight:700;color:#fff;flex:none;text-shadow:0 1px 2px rgba(0,0,0,.4)}
#ficha h2{margin:0;font-family:var(--serif);font-size:22px;font-weight:600}
#ficha-rol{margin:2px 0 0;font-size:12.5px;color:var(--suave)}
#ficha-estado{display:inline-flex;align-items:center;gap:7px;font-size:12px;padding:4px 10px;border-radius:99px;background:rgba(255,255,255,.08);margin-bottom:8px}
#ficha-estado i{width:8px;height:8px;border-radius:50%;background:var(--est,var(--ok))}
#ficha-desc{font-size:13px;line-height:1.45;color:#d9d3c5;margin:4px 0 8px}
#ficha-ahora{font-size:13.5px;line-height:1.4;background:rgba(255,255,255,.06);border-left:3px solid var(--acento);padding:8px 10px;border-radius:8px}
#ficha-tareas{list-style:none;margin:6px 0 10px;padding:0;display:flex;flex-direction:column;gap:6px}
#ficha-tareas li{display:grid;grid-template-columns:20px 1fr auto;gap:8px;font-size:12.5px;line-height:1.35;align-items:start}
#ficha-tareas li .ic{font-size:13px;text-align:center;color:var(--suave)}
#ficha-tareas li.hecha{color:#8d8778}
#ficha-tareas li.hecha .ic{color:var(--ok)}
#ficha-tareas li.curso{color:var(--texto)}
#ficha-tareas li.curso .ic{color:var(--acento)}
#ficha-tareas li small{color:#8d8778;font-size:11px;white-space:nowrap}
#ficha-metricas{display:grid;grid-template-columns:1fr 1fr;gap:8px}
#ficha-metricas div{background:rgba(255,255,255,.05);border-radius:10px;padding:8px 10px}
#ficha-metricas b{display:block;font-size:17px}
#ficha-metricas span{font-size:10.5px;color:var(--suave);text-transform:uppercase;letter-spacing:.07em}
.ficha-pie{margin-top:12px}
.btn{width:100%;padding:10px 14px;border-radius:12px;border:1px solid var(--acento);background:rgba(255,255,255,.04);font-weight:600;font-size:13px}
.btn.on{background:var(--acento);color:#1c1a16}

/* etiquetas sobre los agentes */
#etiquetas{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:3}
.etq{position:absolute;left:0;top:0;display:flex;flex-direction:column;align-items:center;gap:4px;will-change:transform;pointer-events:none}
.etq .burbuja{max-width:210px;background:rgba(250,246,238,.96);color:#26241f;border-radius:12px;padding:6px 10px;font-size:12px;line-height:1.3;text-align:center;font-weight:500;box-shadow:0 6px 18px rgba(0,0,0,.28);position:relative;transition:opacity .25s}
.etq .burbuja::after{content:"";position:absolute;left:50%;bottom:-5px;width:10px;height:10px;background:inherit;transform:translateX(-50%) rotate(45deg);border-radius:2px}
.etq .nombre{display:flex;align-items:center;gap:6px;background:rgba(20,19,16,.82);color:#fff;border-radius:99px;padding:3px 10px 3px 4px;font-size:12px;font-weight:650;letter-spacing:.01em;white-space:nowrap;border:1px solid rgba(255,255,255,.14)}
.etq .nombre i{width:16px;height:16px;border-radius:50%;display:block;border:2px solid rgba(255,255,255,.7)}
.etq.sel .nombre{background:var(--acento);color:#1c1a16}
.etq.oculta{opacity:0}

/* mandos de cámara */
#mandos{position:fixed;left:50%;bottom:max(16px,env(safe-area-inset-bottom));transform:translateX(-50%);z-index:6;display:flex;gap:6px;
  background:var(--vidrio);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid var(--borde);border-radius:99px;padding:6px}
#mandos button{width:44px;height:44px;border-radius:50%;border:0;background:rgba(255,255,255,.06);font-size:20px;line-height:1;transition:background .15s}
#mandos button:hover{background:rgba(255,255,255,.16)}
#mandos #btn-vel{font-size:13px;font-weight:700;width:52px;border-radius:99px}

#cargando{position:fixed;inset:0;z-index:50;background:radial-gradient(circle at 50% 40%,#2a2822,#13120f);display:grid;place-items:center;transition:opacity .6s}
#cargando.fuera{opacity:0;pointer-events:none}
.cargando-caja{text-align:center;width:min(320px,80vw)}
.aro{width:46px;height:46px;border-radius:50%;border:3px solid rgba(255,255,255,.14);border-top-color:var(--acento);margin:0 auto 16px;animation:gira 1s linear infinite}
@keyframes gira{to{transform:rotate(360deg)}}
#cargando p{margin:0 0 12px;color:var(--suave);font-size:14px}
.barra{height:4px;background:rgba(255,255,255,.1);border-radius:4px;overflow:hidden}
.barra i{display:block;height:100%;width:0;background:var(--acento);transition:width .3s}
#aviso{position:fixed;left:50%;top:18px;transform:translateX(-50%);z-index:60;background:#5a2a24;color:#fff;padding:10px 16px;border-radius:12px;font-size:13px;max-width:90vw}
#fps{position:fixed;left:8px;bottom:8px;z-index:60;font:11px/1.3 ui-monospace,Consolas,monospace;background:rgba(0,0,0,.6);color:#9f9;padding:4px 7px;border-radius:6px;white-space:pre}

/* modo grabación */
body.cine #mandos{display:none}
#cierre{position:fixed;inset:0;z-index:20;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center;background:linear-gradient(180deg,rgba(12,11,9,.0),rgba(12,11,9,.78));opacity:0;pointer-events:none;transition:opacity .8s;padding:0 8vw}
#cierre.on{opacity:1}
#cierre img{height:min(16vh,120px);border-radius:12px;background:var(--secundario)}
#cierre b{font-family:var(--serif);font-size:clamp(26px,7vw,46px);font-weight:600;line-height:1.15}
#cierre span{font-size:clamp(14px,3.6vw,20px);color:var(--suave)}

/* móvil */
@media (max-width:760px){
  body.con-ficha #marca,body.con-ficha #hora{opacity:0;pointer-events:none}
  #marca,#hora{transition:opacity .3s}
  #panel{top:auto;left:0;right:0;bottom:0;width:auto;max-height:58vh;border-radius:22px 22px 0 0;padding:6px 12px calc(10px + env(safe-area-inset-bottom));transform:translateY(calc(100% - 118px));border-bottom:0}
  #panel.abierto{transform:none}
  #panel-asa{display:block;width:100%;height:22px;background:none;border:0;padding:0}
  #panel-asa span{display:block;width:42px;height:4px;border-radius:4px;background:rgba(255,255,255,.3);margin:6px auto}
  #panel:not(.abierto) #lista,#panel:not(.abierto) #feed,#panel:not(.abierto) h3.sec{display:none}
  #panel:not(.abierto) .panel-cab{display:none}
  #mandos{bottom:auto;top:max(14px,env(safe-area-inset-top));left:auto;right:max(12px,env(safe-area-inset-right));transform:none;flex-direction:column;border-radius:26px}
  #mandos button{width:40px;height:40px;font-size:18px}
  #marca{padding:6px 12px 6px 6px;max-width:calc(100vw - 76px)}
  #marca-logo{height:36px}.marca-texto b{font-size:16px}
  #hora{top:calc(max(14px,env(safe-area-inset-top)) + 58px);padding:4px 10px}#hora-texto{font-size:17px}
  #ficha{left:0;right:0;bottom:0;width:auto;max-height:62vh;border-radius:22px 22px 0 0;padding-bottom:calc(16px + env(safe-area-inset-bottom))}
  .kpi b{font-size:19px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

.ejemplo{margin:6px 4px 8px;font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--suave);opacity:.9}
.ejemplo::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--oro,#b8956a);margin-right:7px;vertical-align:1px}

/* 13/11: el equipo es DECORATIVO: nada que sugiera trabajo real (estado «Trabajando», tareas, actividad en directo, burbujas con tareas, punto de «en línea»). */
#feed,#feed-titulo,#ficha [hidden]{display:none!important}
.ag .t,.ag .chip,.ag .prog,.ag .av::after,.etq .burbuja{display:none!important}
#kpis{grid-template-columns:1fr}