/* ============ Agent Factory · Oficina en vivo ============ */
:root{
  --bg:#0b0e1a; --bg2:#121628; --panel:rgba(22,27,48,.78); --panel-b:rgba(255,255,255,.08);
  --txt:#eef1ff; --muted:#9aa3c7; --dim:#6b7398;
  --working:#3ddc97; --idle:#ffc857; --error:#ff4d6d; --sleep:#a78bfa; --accent:#6c8cff; --demo:#ff5fb8;
  --radius:18px;
  --font:"Outfit",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0;height:100%}
body{
  font-family:var(--font); color:var(--txt); background:
    radial-gradient(1200px 600px at 10% -10%, #24306b55, transparent 60%),
    radial-gradient(900px 500px at 110% 10%, #5b2a6e44, transparent 60%),
    linear-gradient(180deg,#0b0e1a,#090b15);
  min-height:100vh; -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
button{font-family:inherit}
#app{max-width:1680px;margin:0 auto;padding:14px 18px 18px;display:flex;flex-direction:column;gap:12px;min-height:100vh}

/* ---------------- HUD ---------------- */
.hud{
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  background:linear-gradient(180deg,rgba(32,38,70,.85),rgba(20,24,44,.85));
  border:1px solid var(--panel-b);border-radius:var(--radius);padding:10px 14px;
  box-shadow:0 10px 40px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.06);
  backdrop-filter:blur(10px);
}
.brand{display:flex;align-items:center;gap:12px;min-width:200px}
.logo{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;font-size:26px;
  background:linear-gradient(135deg,#6c8cff,#b06cff);box-shadow:0 6px 20px #6c8cff66, inset 0 1px 0 #ffffff55}
.brand h1{margin:0;font-size:20px;font-weight:800;letter-spacing:.2px}
.brand p{margin:0;font-size:12.5px;color:var(--muted);font-weight:500}
.brand p::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--working);margin-right:6px;box-shadow:0 0 8px var(--working);animation:blinkdot 2s infinite;vertical-align:1px}
.counters{display:flex;gap:8px;flex:1;justify-content:center;flex-wrap:wrap}
.counter{
  --c:var(--accent);
  display:flex;align-items:center;gap:8px;padding:7px 14px 7px 9px;border-radius:14px;
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.07);position:relative;overflow:hidden;min-width:128px
}
.counter::before{content:"";position:absolute;inset:auto 0 0 0;height:2px;background:var(--c);box-shadow:0 0 12px var(--c);opacity:.9}
.counter .ic{width:30px;height:30px;border-radius:10px;display:grid;place-items:center;background:color-mix(in srgb,var(--c) 22%,transparent);font-size:16px}
.counter b{font-size:22px;font-weight:800;color:var(--c);min-width:18px;text-align:right;font-variant-numeric:tabular-nums;display:inline-block}
.counter b.bump{animation:bump .5s cubic-bezier(.3,1.6,.5,1)}
.counter .lbl{font-size:12.5px;color:var(--muted);font-weight:600}
.c-working{--c:var(--working)}.c-idle{--c:var(--idle)}.c-error{--c:var(--error)}.c-sleep{--c:var(--sleep)}
.c-error.alert{animation:alertglow 1.4s infinite}
.hud-right{display:flex;align-items:center;gap:10px;margin-left:auto}
.pill{display:flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;padding:7px 12px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);white-space:nowrap}
.pill i{width:8px;height:8px;border-radius:50%;background:var(--muted)}
.conn-online i{background:var(--working);box-shadow:0 0 10px var(--working);animation:blinkdot 2s infinite}
.conn-retry i{background:var(--idle);box-shadow:0 0 10px var(--idle);animation:blinkdot .8s infinite}
.conn-boot i{background:var(--accent);box-shadow:0 0 10px var(--accent);animation:blinkdot .8s infinite}
.conn-demo{border-color:#ff5fb866;background:#ff5fb81a}.conn-demo i{background:var(--demo);box-shadow:0 0 10px var(--demo)}
.clock{display:flex;flex-direction:column;align-items:flex-end;line-height:1.05}
.clock b{font-family:var(--mono);font-size:16px;font-weight:600;letter-spacing:.5px}
.clock small{font-size:10.5px;color:var(--muted);text-transform:uppercase;letter-spacing:1.2px}
.btn{cursor:pointer;border:0;border-radius:12px;padding:9px 14px;font-weight:700;font-size:13px;color:#fff;
  background:linear-gradient(135deg,#6c8cff,#9b6cff);box-shadow:0 6px 18px #6c8cff55, inset 0 1px 0 #ffffff44;transition:transform .15s, box-shadow .15s}
.btn:hover{transform:translateY(-1px);box-shadow:0 10px 24px #6c8cff77}
.btn:active{transform:translateY(1px)}
.btn-demo.on{background:linear-gradient(135deg,#ff5fb8,#ff8a5f);box-shadow:0 6px 18px #ff5fb855}
.btn-small{padding:6px 10px;font-size:12px}
.btn-ghost{background:rgba(255,255,255,.08);box-shadow:none;border:1px solid rgba(255,255,255,.15)}

.demo-banner{display:flex;align-items:center;gap:12px;justify-content:center;flex-wrap:wrap;
  padding:9px 14px;border-radius:14px;font-size:13.5px;
  background:repeating-linear-gradient(-45deg,#ff5fb822 0 14px,#ff5fb810 14px 28px);border:1px solid #ff5fb866;color:#ffd6ee}
.demo-banner .tag{background:var(--demo);color:#fff;font-weight:800;letter-spacing:2px;padding:3px 9px;border-radius:8px;font-size:12px;box-shadow:0 0 16px #ff5fb8aa}
.demo-banner .btn{background:rgba(255,255,255,.12);box-shadow:none}

/* ---------------- Layout ---------------- */
.layout{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:12px;flex:1;min-height:0}
.office-panel{display:flex;flex-direction:column;gap:8px;min-width:0}
.viewport{position:relative;border-radius:var(--radius);overflow:auto;background:#05060c;
  border:1px solid var(--panel-b);box-shadow:0 20px 60px rgba(0,0,0,.5), inset 0 0 0 1px rgba(255,255,255,.03);
  scrollbar-width:thin}
.stage-wrap{position:relative;margin:0 auto}
.stage{position:absolute;left:0;top:0;transform-origin:0 0;overflow:hidden;user-select:none;-webkit-user-select:none}
.floor,.world,.bubbles,.fx{position:absolute;inset:0}
.world{z-index:1}
.ambient{position:absolute;inset:0;z-index:2;pointer-events:none;
  background:
    radial-gradient(360px 260px at 150px 200px, rgba(255,190,110,.20), transparent 70%),
    radial-gradient(500px 220px at 780px 110px, rgba(140,190,255,.16), transparent 70%),
    radial-gradient(ellipse at 50% 50%, transparent 55%, rgba(0,0,0,.42) 100%);
  mix-blend-mode:normal}
.bubbles{z-index:3;pointer-events:none}
.fx{z-index:4;pointer-events:none}
.darkness{position:absolute;inset:0;z-index:5;background:#03040a;pointer-events:none;opacity:.94;transition:opacity 1.4s ease}
.stage.lights-on .darkness{opacity:0;animation:flicker 1.1s ease}
.stage.night .ambient{background:
    radial-gradient(360px 260px at 150px 220px, rgba(255,170,90,.22), transparent 70%),
    radial-gradient(ellipse at 50% 50%, rgba(10,14,40,.18) 40%, rgba(0,0,10,.55) 100%)}

.legend{display:flex;gap:16px;flex-wrap:wrap;font-size:12px;color:var(--muted);padding:2px 6px}
.legend span{display:flex;align-items:center;gap:6px}
.legend .hint{margin-left:auto;color:var(--txt);opacity:.8}
.lg{width:10px;height:10px;border-radius:50%;display:inline-block}
.lg-working{background:var(--working);box-shadow:0 0 8px var(--working)}.lg-idle{background:var(--idle)}.lg-error{background:var(--error);box-shadow:0 0 8px var(--error)}.lg-sleep{background:var(--sleep)}

/* ---------------- Activity log ---------------- */
.log-panel{background:var(--panel);border:1px solid var(--panel-b);border-radius:var(--radius);display:flex;flex-direction:column;min-height:0;max-height:calc(100vh - 150px);position:sticky;top:12px;backdrop-filter:blur(10px);box-shadow:0 20px 50px rgba(0,0,0,.35)}
.log-head{display:flex;align-items:center;justify-content:space-between;padding:14px 16px 10px;border-bottom:1px solid var(--panel-b)}
.log-head h2{margin:0;font-size:15px;font-weight:700}
.log-count{font-size:11.5px;color:var(--muted);background:rgba(255,255,255,.06);padding:3px 8px;border-radius:999px;font-variant-numeric:tabular-nums}
.log{list-style:none;margin:0;padding:8px;overflow:auto;flex:1;scrollbar-width:thin}
.log li{display:grid;grid-template-columns:auto 1fr;gap:3px 9px;padding:8px 9px;border-radius:12px;font-size:12.8px;line-height:1.35;animation:slidein .45s cubic-bezier(.2,.9,.3,1.2)}
.log li+li{margin-top:2px}
.log li:hover{background:rgba(255,255,255,.04)}
.log .av{grid-row:span 2;width:28px;height:28px;border-radius:9px;display:grid;place-items:center;font-size:14px;background:var(--c,#444);box-shadow:inset 0 -3px 0 rgba(0,0,0,.2)}
.log .meta{display:flex;gap:7px;align-items:baseline;min-width:0}
.log .who{font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer}
.log .who:hover{text-decoration:underline}
.log time{font-family:var(--mono);font-size:10.5px;color:var(--dim);margin-left:auto;flex-shrink:0}
.log .msg{color:#cdd3f3;word-break:break-word}
.log li.err{background:linear-gradient(90deg,#ff4d6d1f,transparent)}
.log li.err .msg{color:#ff8fa3;font-weight:600}
.log li.sys .msg{color:var(--muted);font-style:italic}
.log li.good .msg{color:#8ff0c4}
.log-empty{padding:30px 20px;text-align:center;color:var(--muted);font-size:13px}
.log-empty[hidden]{display:none}

.foot{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;font-size:11.5px;color:var(--dim);padding:0 6px}
.foot code{font-family:var(--mono);color:var(--muted)}

/* ---------------- Office: decor ---------------- */
.wall{position:absolute;left:0;top:0;height:122px;
  background:linear-gradient(180deg,#2c3256 0%,#363d6b 70%,#2a2f52 100%);box-shadow:0 6px 18px rgba(0,0,0,.35)}
.wall.lounge{background:linear-gradient(180deg,#4a3346 0%,#5b3e55 70%,#43303f 100%)}
.wall::after{content:"";position:absolute;left:0;right:0;bottom:0;height:8px;background:linear-gradient(#1c2040,#14172e)}
.window{position:absolute;top:18px;width:140px;height:80px;border-radius:8px;overflow:hidden;
  border:5px solid #d9dcf0;box-shadow:0 4px 0 #9ea4c9, 0 10px 20px rgba(0,0,0,.35), inset 0 0 20px rgba(255,255,255,.2)}
.window .sky{position:absolute;inset:0;background:linear-gradient(180deg,#5bb6ff,#b8e2ff)}
.window .sky::before,.window .sky::after{content:"";position:absolute;background:#fff;border-radius:999px;opacity:.85;height:12px;width:40px;top:18px;left:-50px;box-shadow:12px -6px 0 2px #fff;animation:cloud 38s linear infinite}
.window .sky::after{top:46px;width:30px;animation-duration:52s;animation-delay:-20s;opacity:.6}
.window .city{position:absolute;left:0;right:0;bottom:0;height:34px;
  background:
   linear-gradient(#5a6b9a,#5a6b9a) 4px 10px/18px 24px no-repeat,
   linear-gradient(#6d7fae,#6d7fae) 26px 2px/22px 32px no-repeat,
   linear-gradient(#56689a,#56689a) 52px 14px/16px 20px no-repeat,
   linear-gradient(#7486b4,#7486b4) 72px 6px/26px 28px no-repeat,
   linear-gradient(#5f71a1,#5f71a1) 102px 16px/30px 18px no-repeat}
.window .mullion{position:absolute;left:50%;top:0;bottom:0;width:4px;margin-left:-2px;background:#d9dcf0}
.window .sill{position:absolute;left:-5px;right:-5px;bottom:-5px;height:6px;background:#eef0ff}
.night .window .sky{background:linear-gradient(180deg,#0b1240,#28306a)}
.night .window .sky::before,.night .window .sky::after{background:#ffffffcc;width:2px;height:2px;box-shadow:20px 10px 0 #fff,50px 30px 0 #fffa,90px 6px 0 #fff,110px 24px 0 #fff8,70px 50px 0 #fff;animation:twinkle 3s infinite;left:6px}
.night .window .city{filter:brightness(.55)}
.night .window .city::after{content:"";position:absolute;inset:0;background:
  radial-gradient(circle,#ffd86b 1px,transparent 1.5px) 0 0/7px 7px;opacity:.7;mask:linear-gradient(#000,#000)}
.dusk .window .sky{background:linear-gradient(180deg,#3a2f7a,#ff8a6b 80%,#ffc07a)}
.dawn .window .sky{background:linear-gradient(180deg,#6aa0ff,#ffc4a8)}

.wallclock{position:absolute;top:24px;width:44px;height:44px;border-radius:50%;background:radial-gradient(#fff,#e7e9f6);border:4px solid #20243f;box-shadow:0 4px 10px rgba(0,0,0,.4)}
.wallclock i{position:absolute;left:50%;bottom:50%;transform-origin:50% 100%;background:#20243f;border-radius:2px}
.wallclock .h{width:3px;height:11px;margin-left:-1.5px}.wallclock .m{width:2px;height:15px;margin-left:-1px}.wallclock .s{width:1px;height:16px;background:#ff4d6d;margin-left:-.5px}
.neon{position:absolute;top:28px;font-weight:800;font-size:15px;letter-spacing:3px;color:#ffd6f5;
  text-shadow:0 0 4px #fff,0 0 10px #ff5fb8,0 0 22px #ff5fb8,0 0 40px #ff5fb8;animation:neon 6s infinite}
.poster{position:absolute;top:22px;width:58px;height:70px;border-radius:4px;background:linear-gradient(160deg,#ffcf5c,#ff6b6b);box-shadow:0 6px 12px rgba(0,0,0,.35);display:grid;place-items:center;font-size:24px;border:3px solid #fff}
.board{position:absolute;top:20px;width:120px;height:78px;background:#f4f6ff;border:4px solid #b7bdd8;border-radius:6px;box-shadow:0 6px 14px rgba(0,0,0,.35);
  font:700 9px/1.3 var(--mono);color:#3b4ea0;padding:6px 8px;overflow:hidden}
.board i{display:block;height:4px;margin:4px 0;border-radius:2px;background:#ff6b6b;width:70%}
.board i:nth-child(3){background:#3ddc97;width:50%}.board i:nth-child(4){background:#6c8cff;width:82%}

.floor-office{position:absolute;top:122px;
  background:
    repeating-linear-gradient(90deg, rgba(0,0,0,.10) 0 2px, transparent 2px 120px),
    repeating-linear-gradient(0deg, rgba(0,0,0,.12) 0 2px, transparent 2px 30px),
    linear-gradient(180deg,#8a6a52,#7a5c46)}
.floor-office::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent 0 30px,rgba(0,0,0,0) 30px 60px),
  repeating-linear-gradient(90deg,transparent 0 60px,rgba(0,0,0,.05) 60px 62px,transparent 62px 120px);
  background-position:0 0, 0 30px}
.floor-lounge{position:absolute;top:122px;left:0;
  background:
    radial-gradient(circle at 25% 25%, rgba(255,255,255,.05) 2px, transparent 3px) 0 0/22px 22px,
    linear-gradient(180deg,#5b4a63,#4b3d53)}
.divider{position:absolute;top:122px;width:6px;background:linear-gradient(90deg,rgba(0,0,0,.25),rgba(255,255,255,.08));}
.rug{position:absolute;border-radius:50%;background:radial-gradient(ellipse,#c5527a 0 55%,#a7405f 56% 62%,#c5527a 63% 70%,#9a3657 71%);box-shadow:0 6px 18px rgba(0,0,0,.3);opacity:.92}
.mat{position:absolute;height:26px;border-radius:6px;background:repeating-linear-gradient(90deg,#3a3f5e 0 6px,#2f3350 6px 12px);box-shadow:inset 0 0 0 2px #5b6190;display:grid;place-items:center;font:800 9px var(--font);letter-spacing:3px;color:#c9cff5}
.doorframe{position:absolute;height:10px;border-radius:4px 4px 0 0;background:linear-gradient(#a5acd6,#6e76a8);box-shadow:0 -2px 8px rgba(160,180,255,.4)}
.desk-glow{position:absolute;width:240px;height:170px;border-radius:50%;pointer-events:none;opacity:0;transition:opacity .8s;
  background:radial-gradient(ellipse at center, rgba(90,200,255,.30), transparent 65%)}
.desk-glow.on{opacity:1}
.desk-glow.err{opacity:1;background:radial-gradient(ellipse at center, rgba(255,60,90,.42), transparent 65%);animation:errglow 1s infinite}

.deco{position:absolute}
.coffee{width:120px;height:70px}
.coffee .counter-top{position:absolute;left:0;right:0;bottom:0;height:30px;border-radius:6px;background:linear-gradient(#d8d2c8,#b8b0a4);box-shadow:0 8px 14px rgba(0,0,0,.35)}
.coffee .counter-top::after{content:"";position:absolute;left:0;right:0;bottom:-12px;height:12px;border-radius:0 0 6px 6px;background:#8d847a}
.coffee .machine{position:absolute;left:14px;bottom:20px;width:40px;height:50px;border-radius:8px 8px 4px 4px;background:linear-gradient(135deg,#3a3f55,#1d2033);box-shadow:inset 0 2px 0 #ffffff22}
.coffee .machine::before{content:"";position:absolute;left:8px;top:8px;width:24px;height:10px;border-radius:3px;background:#1fe0a0;box-shadow:0 0 8px #1fe0a0}
.coffee .machine::after{content:"";position:absolute;left:14px;bottom:4px;width:12px;height:9px;border-radius:0 0 4px 4px;background:#fff}
.coffee .steam{position:absolute;left:26px;bottom:72px;width:6px;height:6px;border-radius:50%;background:#fff;opacity:0;animation:steam 2.6s infinite}
.coffee .steam+.steam{left:32px;animation-delay:1.2s}
.coffee .cups{position:absolute;left:66px;bottom:24px;width:40px;height:14px;background:
  radial-gradient(circle at 6px 7px,#fff 5px,transparent 6px) 0 0/14px 14px repeat-x}
.cooler{width:36px;height:84px}
.cooler .bottle{position:absolute;left:5px;top:0;width:26px;height:30px;border-radius:10px 10px 4px 4px;background:linear-gradient(90deg,#7fd3ff,#bfeaff 50%,#7fd3ff);opacity:.9;box-shadow:inset 0 -6px 0 rgba(0,90,160,.2)}
.cooler .base{position:absolute;left:0;top:28px;width:36px;height:56px;border-radius:6px;background:linear-gradient(90deg,#e8ebf7,#fff 50%,#d4d8ea);box-shadow:0 8px 12px rgba(0,0,0,.35)}
.cooler .base::after{content:"";position:absolute;left:12px;top:12px;width:12px;height:6px;border-radius:2px;background:#4dabf7}
.plant{width:46px;height:64px}
.plant .pot{position:absolute;left:10px;bottom:0;width:26px;height:20px;border-radius:3px 3px 8px 8px;background:linear-gradient(#e07a5f,#b85a42);box-shadow:0 6px 10px rgba(0,0,0,.35)}
.plant .leaves{position:absolute;left:0;bottom:16px;width:46px;height:48px;transform-origin:50% 100%;animation:sway 5s ease-in-out infinite;
  background:
   radial-gradient(ellipse at 50% 30%,#4fbf6b 0 30%,transparent 31%),
   radial-gradient(ellipse at 22% 55%,#3aa457 0 26%,transparent 27%),
   radial-gradient(ellipse at 78% 55%,#3aa457 0 26%,transparent 27%),
   radial-gradient(ellipse at 50% 70%,#2f8f4a 0 30%,transparent 31%)}
.sofa-back{height:44px;border-radius:16px 16px 6px 6px;background:linear-gradient(#6c8cff,#4f6ae0);box-shadow:0 10px 20px rgba(0,0,0,.35), inset 0 3px 0 #ffffff33}
.sofa-front{height:40px;border-radius:10px 10px 14px 14px;background:linear-gradient(#5e7bf0,#3f57c8);box-shadow:0 10px 18px rgba(0,0,0,.4), inset 0 3px 0 #ffffff30}
.sofa-front::before,.sofa-front::after{content:"";position:absolute;top:-18px;width:26px;height:58px;border-radius:12px;background:linear-gradient(#5571e8,#3a50bb);box-shadow:inset 0 3px 0 #ffffff33}
.sofa-front::before{left:-8px}.sofa-front::after{right:-8px}
.sofa-front i{position:absolute;top:6px;width:2px;height:22px;background:rgba(0,0,0,.15)}
.ctable{width:96px;height:40px;border-radius:12px;background:linear-gradient(#c49a6c,#a77c50);box-shadow:0 10px 16px rgba(0,0,0,.35), inset 0 2px 0 #ffffff33}
.ctable::before{content:"📚";position:absolute;left:12px;top:4px;font-size:16px}
.ctable::after{content:"🍩";position:absolute;right:14px;top:6px;font-size:15px}
.arcade{width:50px;height:86px}
.arcade .cab{position:absolute;inset:0;border-radius:10px 10px 4px 4px;background:linear-gradient(135deg,#7b3fe4,#3c1d84);box-shadow:0 10px 16px rgba(0,0,0,.4)}
.arcade .scr{position:absolute;left:7px;top:10px;width:36px;height:28px;border-radius:4px;background:linear-gradient(#0a0f2e,#151d50);box-shadow:0 0 12px #6cf3ff88;overflow:hidden}
.arcade .scr::after{content:"👾";position:absolute;left:8px;top:4px;font-size:15px;animation:invader 1.6s steps(4) infinite}
.arcade .pad{position:absolute;left:5px;top:44px;width:40px;height:12px;border-radius:3px;background:#2a1460}
.arcade .pad::before{content:"";position:absolute;left:8px;top:3px;width:6px;height:6px;border-radius:50%;background:#ff5f7a;box-shadow:12px 0 #ffd35f,20px 0 #5fffb0}

/* ---------------- Desk ---------------- */
.desk{position:absolute;width:150px;height:64px;cursor:pointer}
.desk .top{position:absolute;left:0;top:0;width:150px;height:36px;border-radius:7px 7px 2px 2px;
  background:linear-gradient(180deg,#ecd0a6,#cfa775);box-shadow:inset 0 2px 0 rgba(255,255,255,.45), inset 0 -2px 0 rgba(0,0,0,.08)}
.desk .front{position:absolute;left:0;top:34px;width:150px;height:28px;border-radius:2px 2px 8px 8px;background:linear-gradient(180deg,#a97a4b,#8a5f37);box-shadow:0 12px 18px rgba(0,0,0,.35)}
.desk .plate{position:absolute;left:10px;top:8px;max-width:108px;padding:2px 7px;border-radius:5px;font-size:10px;font-weight:700;color:#3a2a18;
  background:linear-gradient(#ffe7a8,#e9c46a);box-shadow:0 1px 0 rgba(0,0,0,.25);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.desk.free .plate{background:rgba(0,0,0,.18);color:#e8d3b8;font-weight:600}
.desk .led{position:absolute;right:10px;top:11px;width:8px;height:8px;border-radius:50%;background:#3b2a1c;box-shadow:inset 0 1px 1px rgba(0,0,0,.5)}
.desk.d-working .led{background:var(--working);box-shadow:0 0 8px var(--working)}
.desk.d-idle .led{background:var(--idle);box-shadow:0 0 6px var(--idle)}
.desk.d-error .led{background:var(--error);box-shadow:0 0 10px var(--error);animation:blink .5s steps(2) infinite}
.desk.d-sleep .led{background:var(--sleep);box-shadow:0 0 6px var(--sleep);animation:blinkdot 3s infinite}
.monitor{position:absolute;left:12px;top:-34px;width:70px;height:48px}
.monitor .frame{position:absolute;left:0;top:0;width:70px;height:44px;border-radius:6px;background:linear-gradient(#2a2e48,#191c30);box-shadow:0 6px 10px rgba(0,0,0,.35);padding:4px;transform:perspective(200px) rotateY(10deg)}
.monitor .screen{position:relative;width:100%;height:100%;border-radius:3px;background:#090c18;overflow:hidden;transition:background .5s, box-shadow .5s}
.monitor .stand{position:absolute;left:30px;top:42px;width:10px;height:8px;background:#2a2e48}
.monitor .base{position:absolute;left:22px;top:48px;width:26px;height:4px;border-radius:2px;background:#2a2e48}
.screen .code{position:absolute;left:0;right:0;top:0;height:200%;opacity:0;transition:opacity .4s;
  background:
    linear-gradient(90deg,#7ee0ff 0 40%,transparent 40%) 4px 3px/60px 7px repeat-y,
    linear-gradient(90deg,transparent 0 10%,#c39bff 10% 55%,transparent 55%) 4px 6px/60px 11px repeat-y,
    linear-gradient(90deg,transparent 0 20%,#7dffb5 20% 75%,transparent 75%) 4px 1px/60px 13px repeat-y;
  background-size:60px 7px, 60px 11px, 60px 13px;filter:blur(.2px)}
.screen .icon{position:absolute;inset:0;display:grid;place-items:center;font-size:14px;opacity:0;transition:opacity .4s}
.desk.d-working .screen{background:linear-gradient(#10325a,#0a1d36);box-shadow:0 0 14px rgba(90,200,255,.7)}
.desk.d-working .screen .code{opacity:.85;animation:scrollcode 4s linear infinite}
.desk.d-idle .screen{background:linear-gradient(135deg,#3a2f7a,#1d6f8a);animation:hue 8s linear infinite}
.desk.d-idle .screen .icon{opacity:.9}
.desk.d-error .screen{animation:screenerr .6s steps(2) infinite}
.desk.d-error .screen .icon{opacity:1;color:#fff;font-weight:900;font-size:20px}
.desk.d-sleep .screen{background:#0b0d1c}
.desk.d-sleep .screen .icon{opacity:.6}
.keyboard{position:absolute;left:84px;top:14px;width:48px;height:12px;border-radius:3px;background:#f2f3fa;box-shadow:0 2px 0 #b9bdd3;
  background-image:repeating-linear-gradient(90deg,transparent 0 4px,#d3d6e6 4px 5px),repeating-linear-gradient(0deg,transparent 0 3px,#d3d6e6 3px 4px)}
.mug{position:absolute;left:136px;top:6px;width:9px;height:10px;border-radius:2px 2px 4px 4px;background:var(--mug,#ff6b6b)}
.mug::after{content:"";position:absolute;right:-4px;top:2px;width:4px;height:5px;border:2px solid var(--mug,#ff6b6b);border-left:0;border-radius:0 4px 4px 0}
.desk.selected .top{box-shadow:inset 0 2px 0 rgba(255,255,255,.45), 0 0 0 3px #fff8, 0 0 24px #9db3ff}

/* ---------------- Agents ---------------- */
.agent{position:absolute;left:0;top:0;width:60px;height:80px;will-change:transform;cursor:pointer;transition:opacity .6s, filter .6s}
.agent .shadow{position:absolute;left:11px;bottom:-4px;width:38px;height:11px;border-radius:50%;background:rgba(0,0,0,.32);filter:blur(1.5px)}
.agent .ring{position:absolute;left:-4px;bottom:-10px;width:68px;height:20px;border-radius:50%;border:2px solid var(--error);opacity:0}
.agent .body{position:absolute;inset:0;transform-origin:50% 100%}
.agent svg{display:block;overflow:visible;transition:transform .2s}
.agent.face-left svg{transform:scaleX(-1)}
.agent svg g,.agent svg path,.agent svg circle,.agent svg ellipse{transform-box:fill-box}
.agent .leg{transform-origin:50% 0}
.agent .arm{transform-origin:50% 10%}
.agent .eyes-open{transform-origin:50% 50%;animation:blinkeyes 4.5s infinite}
.agent .eyes-closed,.agent .eyes-x,.agent .mouth-o{display:none}
.agent .ant{animation:blinkdot 1.2s infinite}
.agent.walking .body{animation:bob .38s ease-in-out infinite}
.agent.walking .leg-l{animation:step .38s ease-in-out infinite}
.agent.walking .leg-r{animation:step .38s ease-in-out infinite reverse}
.agent.walking .arm-l{animation:swing .38s ease-in-out infinite}
.agent.walking .arm-r{animation:swing .38s ease-in-out infinite reverse}
.agent.typing .arm-l{animation:type .2s ease-in-out infinite alternate}
.agent.typing .arm-r{animation:type .2s ease-in-out infinite alternate-reverse}
.agent.typing .body{animation:focus 3s ease-in-out infinite}
.agent.seated .shadow,.agent.on-sofa .shadow{display:none}
.agent.seated .nametag,.agent.on-sofa .nametag{opacity:0}
.agent.st-idle.lingering .body{animation:breathe 3s ease-in-out infinite}
.agent.st-sleep .body{filter:grayscale(.55) brightness(.68) saturate(.8)}
.agent.st-sleep svg{animation:nod 3.2s ease-in-out infinite}
.agent.st-sleep .eyes-open,.agent.st-error .eyes-open,.agent.st-sleep .mouth-happy,.agent.st-error .mouth-happy{display:none}
.agent.st-sleep .eyes-closed{display:inline}
.agent.st-error .eyes-x,.agent.st-error .mouth-o{display:inline}
.agent.st-error .ring{animation:ringpulse 1.1s ease-out infinite}
.agent.st-error .body{animation:shake 2.2s ease-in-out infinite}
.agent:hover .body{filter:drop-shadow(0 0 5px #ffffffcc)}
.agent.selected .body{filter:drop-shadow(0 0 4px #fff) drop-shadow(0 0 12px #9db3ff)}
.agent.entering{animation:fadein .7s ease}
.agent.leaving{opacity:.0;transition:opacity 1.2s}
.nametag{position:absolute;top:84px;left:50%;transform:translateX(-50%);white-space:nowrap;font-size:11px;font-weight:700;color:#fff;
  padding:2px 8px 2px 6px;border-radius:999px;background:rgba(12,15,32,.78);border:1px solid rgba(255,255,255,.14);display:flex;align-items:center;gap:5px;transition:opacity .3s;max-width:150px;overflow:hidden;text-overflow:ellipsis}
.nametag .dot{width:7px;height:7px;border-radius:50%;background:var(--muted);flex-shrink:0}
.st-working .nametag .dot{background:var(--working);box-shadow:0 0 6px var(--working)}
.st-idle .nametag .dot{background:var(--idle)}
.st-error .nametag .dot{background:var(--error);box-shadow:0 0 6px var(--error)}
.st-sleep .nametag .dot{background:var(--sleep)}
.smoke{position:absolute;left:20px;top:-4px;width:20px;height:20px;pointer-events:none}
.smoke i{position:absolute;left:4px;top:0;width:12px;height:12px;border-radius:50%;background:#6b6f80;opacity:0}
.st-error .smoke i{animation:smoke 1.8s ease-out infinite}
.st-error .smoke i:nth-child(2){animation-delay:.6s;left:10px}
.st-error .smoke i:nth-child(3){animation-delay:1.2s;left:0}
.zzz{position:absolute;left:44px;top:0;pointer-events:none;font-weight:800;color:#d9ccff;text-shadow:0 0 6px #a78bfa}
.zzz span{position:absolute;opacity:0;font-size:12px}
.st-sleep .zzz span{animation:zzz 3s ease-in-out infinite}
.st-sleep .zzz span:nth-child(2){animation-delay:1s;font-size:14px}
.st-sleep .zzz span:nth-child(3){animation-delay:2s;font-size:17px}
.alertmark{position:absolute;left:50%;top:-26px;width:22px;height:22px;margin-left:-11px;border-radius:50%;background:var(--error);color:#fff;font-weight:900;display:none;place-items:center;font-size:14px;box-shadow:0 0 0 3px #fff, 0 0 16px var(--error)}
.st-error .alertmark{display:grid;animation:alertbounce .9s ease-in-out infinite}

/* ---------------- Bubbles ---------------- */
.bubble{position:absolute;left:0;top:0;will-change:transform}
.bubble .b-in{transform:translate(-50%,-100%) scale(.6);opacity:0;transition:opacity .35s, transform .35s cubic-bezier(.3,1.5,.5,1);transform-origin:50% 100%;
  max-width:178px;width:max-content;padding:6px 10px;border-radius:12px;background:#fffdf6;color:#1e2140;font-size:11.5px;font-weight:600;line-height:1.3;
  box-shadow:0 6px 16px rgba(0,0,0,.35);position:relative;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-align:center}
.bubble .b-in::after{content:"";position:absolute}
.bubble .tail{position:absolute;left:-6px;top:-7px;width:12px;height:8px;opacity:0;transition:opacity .35s;
  background:#fffdf6;clip-path:polygon(0 0,100% 0,50% 100%)}
.bubble.show .b-in{opacity:1;transform:translate(-50%,-100%) scale(1)}
.bubble.show .tail{opacity:1}
.bubble.err .b-in,.bubble.err .tail{background:#ff4d6d;color:#fff}
.bubble.err .b-in{box-shadow:0 0 0 2px #fff, 0 6px 22px rgba(255,77,109,.6)}
.bubble.emo .b-in{padding:3px 7px;font-size:15px;border-radius:999px}
.bubble .typing-dots{display:inline-flex;gap:2px;margin-left:4px;vertical-align:middle}
.bubble .typing-dots i{width:4px;height:4px;border-radius:50%;background:#6c8cff;animation:dots 1s infinite}
.bubble .typing-dots i:nth-child(2){animation-delay:.15s}.bubble .typing-dots i:nth-child(3){animation-delay:.3s}

/* ---------------- FX ---------------- */
.pop{position:absolute;left:0;top:0;width:0;height:0}
.pop .r{position:absolute;left:-30px;top:-30px;width:60px;height:60px;border-radius:50%;border:3px solid var(--c,#fff);animation:popring .9s ease-out forwards}
.pop .e{position:absolute;left:0;top:0;transform:translate(-50%,-50%);font-size:22px;animation:emote 1.6s ease-out forwards;filter:drop-shadow(0 3px 4px rgba(0,0,0,.4))}
.pop .p{position:absolute;left:-3px;top:-3px;width:6px;height:6px;border-radius:50%;background:var(--c,#fff);animation:particle .9s ease-out forwards}

/* ---------------- Empty state ---------------- */
.empty{position:absolute;inset:0;display:grid;place-items:center;z-index:10;pointer-events:none;padding:20px}
.empty[hidden]{display:none}
.empty-card{pointer-events:auto;max-width:420px;text-align:center;padding:26px 26px 22px;border-radius:22px;
  background:linear-gradient(180deg,rgba(28,33,62,.92),rgba(18,21,42,.92));border:1px solid rgba(255,255,255,.12);box-shadow:0 30px 80px rgba(0,0,0,.55);
  animation:floaty 5s ease-in-out infinite, appear .6s ease}
.empty-emoji{font-size:44px;filter:drop-shadow(0 6px 10px rgba(0,0,0,.4))}
.empty-card h2{margin:8px 0 6px;font-size:20px}
.empty-card p{margin:0 0 16px;color:var(--muted);font-size:14px;line-height:1.5}

/* ---------------- Wake overlay ---------------- */
.wake{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:20px;
  background:radial-gradient(800px 500px at 50% 30%,#1d2550,#06070f 70%);transition:opacity .8s}
.wake[hidden]{display:none}
.wake.hide{opacity:0;pointer-events:none}
.wake-inner{text-align:center;max-width:460px}
.wake h2{font-size:26px;margin:22px 0 6px;font-weight:800;background:linear-gradient(90deg,#fff,#c5d0ff,#fff);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shimmer 2.5s linear infinite}
.wake p{color:var(--muted);margin:6px 0}
#wake-msg{color:#dfe5ff;font-weight:600;min-height:1.4em}
.wake-note{font-size:12.5px;line-height:1.5;margin-top:14px!important}
.wake .btn{margin-top:16px}
.wake-bar{height:6px;border-radius:999px;background:rgba(255,255,255,.08);overflow:hidden;margin:18px auto 0;max-width:300px}
.wake-bar span{display:block;height:100%;width:40%;border-radius:999px;background:linear-gradient(90deg,#6c8cff,#b06cff,#ff5fb8);animation:indet 1.6s ease-in-out infinite}
.building{position:relative;width:170px;margin:0 auto;padding:16px 16px 0;border-radius:10px 10px 0 0;background:linear-gradient(#2a3160,#1a1f40);box-shadow:0 20px 60px rgba(0,0,0,.6)}
.building .roof{position:absolute;left:-10px;right:-10px;top:-12px;height:14px;border-radius:6px;background:#3a4380}
.building .windows{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.building .windows i{height:22px;border-radius:3px;background:#0d1028;animation:lighton 6s infinite}
.building .windows i:nth-child(1){animation-delay:.2s}.building .windows i:nth-child(2){animation-delay:1.4s}.building .windows i:nth-child(3){animation-delay:.8s}
.building .windows i:nth-child(4){animation-delay:2.2s}.building .windows i:nth-child(5){animation-delay:1.1s}.building .windows i:nth-child(6){animation-delay:.5s}
.building .windows i:nth-child(7){animation-delay:2.7s}.building .windows i:nth-child(8){animation-delay:1.8s}.building .windows i:nth-child(9){animation-delay:3.1s}
.building .windows i:nth-child(10){animation-delay:.9s}.building .windows i:nth-child(11){animation-delay:2.4s}.building .windows i:nth-child(12){animation-delay:1.6s}
.building .door{width:34px;height:40px;margin:14px auto 0;border-radius:6px 6px 0 0;background:linear-gradient(#ffc857,#ff9f43);box-shadow:0 0 20px #ffc85799}

/* ---------------- Card ---------------- */
.card-backdrop{position:fixed;inset:0;z-index:90;display:grid;place-items:center;padding:20px;background:rgba(4,6,14,.55);backdrop-filter:blur(6px);animation:fadein .25s ease}
.card-backdrop[hidden]{display:none}
.card{position:relative;width:min(520px,100%);max-height:min(86vh,760px);overflow:auto;border-radius:24px;padding:22px;
  background:linear-gradient(180deg,#1d2346,#141831);border:1px solid rgba(255,255,255,.12);
  box-shadow:0 40px 100px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.08);animation:cardin .4s cubic-bezier(.2,1.2,.3,1)}
.card::before{content:"";position:absolute;left:0;right:0;top:0;height:120px;border-radius:24px 24px 0 0;background:linear-gradient(180deg,color-mix(in srgb,var(--sc,#6c8cff) 30%,transparent),transparent);pointer-events:none}
.card-close{position:absolute;right:14px;top:14px;width:34px;height:34px;border-radius:12px;border:0;background:rgba(255,255,255,.08);color:#fff;font-size:15px;cursor:pointer;z-index:2}
.card-close:hover{background:rgba(255,255,255,.16)}
.card-head{position:relative;display:flex;gap:16px;align-items:center}
.card-avatar{width:96px;height:96px;flex-shrink:0;border-radius:26px;display:grid;place-items:center;overflow:hidden;
  background:radial-gradient(circle at 50% 30%,color-mix(in srgb,var(--sc,#6c8cff) 55%,#fff 0%),color-mix(in srgb,var(--sc,#6c8cff) 35%,#000));box-shadow:0 10px 30px rgba(0,0,0,.4), inset 0 2px 0 rgba(255,255,255,.25)}
.card-avatar svg{width:72px;height:96px;margin-top:22px}
.card-title{min-width:0}
.card-title h2{margin:0;font-size:22px;font-weight:800;word-break:break-word}
.card-title code{font-family:var(--mono);font-size:11.5px;color:var(--muted)}
.card-badges{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.badge{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;padding:4px 10px;border-radius:999px;background:rgba(255,255,255,.08)}
.badge i{width:8px;height:8px;border-radius:50%;background:currentColor;box-shadow:0 0 8px currentColor}
.badge.working{color:var(--working);background:#3ddc9722}.badge.idle{color:var(--idle);background:#ffc85722}
.badge.error{color:var(--error);background:#ff4d6d22}.badge.sleep{color:var(--sleep);background:#a78bfa22}.badge.demo{color:#fff;background:var(--demo)}
.card-task{position:relative;margin-top:18px;padding:12px 14px;border-radius:14px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.07)}
.card-task p{margin:4px 0 0;font-size:15px;font-weight:600;line-height:1.4;word-break:break-word}
/* Descripción y edición de la ficha */
.card-about{position:relative;display:flex;align-items:flex-start;gap:10px;margin-top:14px}
.card-desc{flex:1;min-width:0;margin:0;font-size:14px;line-height:1.45;color:#d7dcf5;word-break:break-word;white-space:pre-line}
.card-desc.is-empty{color:var(--dim);font-style:italic}
.card-edit{flex-shrink:0;white-space:nowrap}
.card-msg{position:relative;margin:10px 0 0;padding:8px 12px;border-radius:12px;font-size:13px;font-weight:600;animation:fadein .25s ease}
.card-msg.ok{color:var(--working);background:#3ddc971a;border:1px solid #3ddc9744}
.card-msg.info{color:var(--muted);background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08)}
.card-form{position:relative;margin-top:14px;padding:14px;border-radius:16px;display:flex;flex-direction:column;gap:12px;
  background:linear-gradient(180deg,rgba(108,140,255,.12),rgba(108,140,255,.04));border:1px solid rgba(108,140,255,.35);animation:fadein .25s ease}
.card-form[hidden]{display:none}
.cf-head{display:flex;align-items:center;gap:8px;font-size:14px}
.cf-field{position:relative;display:flex;flex-direction:column;gap:6px}
.cf-field em{font-style:normal;text-transform:none;letter-spacing:0;font-weight:500;color:var(--dim)}
.cf-field input,.cf-field textarea{width:100%;box-sizing:border-box;font:inherit;font-size:15px;color:var(--txt);padding:10px 12px;border-radius:12px;
  background:rgba(8,10,22,.55);border:1px solid rgba(255,255,255,.14);outline:none;transition:border-color .15s, box-shadow .15s}
.cf-field textarea{resize:vertical;min-height:78px;line-height:1.45}
.cf-field input:focus,.cf-field textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px #6c8cff40}
.cf-field input:disabled,.cf-field textarea:disabled{opacity:.6}
.cf-count{align-self:flex-end;font-size:11px;color:var(--dim);font-variant-numeric:tabular-nums}
.cf-error{margin:0;padding:8px 12px;border-radius:10px;font-size:13px;font-weight:600;color:#ffd0d8;background:#ff4d6d22;border:1px solid #ff4d6d55}
.cf-actions{display:flex;justify-content:flex-end;gap:8px}
.cf-actions .btn{min-width:110px}
.cf-actions .btn:disabled{opacity:.6;cursor:progress;transform:none}
@media (max-width:720px){
  .card-about{flex-direction:column;gap:8px}
  .card-edit{align-self:flex-start}
  .cf-field input,.cf-field textarea{font-size:16px}
  .cf-actions .btn{flex:1}
}
.k{font-size:11px;text-transform:uppercase;letter-spacing:1.1px;color:var(--muted);font-weight:700}
.card-stats{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}
.stat{padding:12px 14px;border-radius:14px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.07);display:flex;flex-direction:column;gap:3px;min-width:0}
.stat b{font-size:20px;font-weight:800;font-variant-numeric:tabular-nums;font-family:var(--mono);letter-spacing:-.5px}
.stat small{color:var(--muted);font-size:11.5px}
.card-h3{margin:20px 0 8px;font-size:14px;display:flex;align-items:center;gap:8px}
.card-h3 small{color:var(--muted);font-weight:500}
.history{list-style:none;margin:0;padding:0 0 0 14px;position:relative}
.history::before{content:"";position:absolute;left:4px;top:6px;bottom:6px;width:2px;background:rgba(255,255,255,.1);border-radius:2px}
.history li{position:relative;padding:6px 0 6px 12px;font-size:13px;line-height:1.4}
.history li::before{content:"";position:absolute;left:-14px;top:12px;width:10px;height:10px;border-radius:50%;background:#6c8cff;box-shadow:0 0 0 3px #141831}
.history li time{display:block;font-family:var(--mono);font-size:10.5px;color:var(--dim)}
.history li.err::before{background:var(--error);box-shadow:0 0 0 3px #141831,0 0 10px var(--error)}
.history li.err span{color:#ff8fa3;font-weight:700}
.history .none{color:var(--muted);font-style:italic}
.history .none::before{display:none}

/* ---------------- Animations ---------------- */
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-2.5px)}}
@keyframes step{0%,100%{transform:rotate(16deg)}50%{transform:rotate(-16deg)}}
@keyframes swing{0%,100%{transform:rotate(-18deg)}50%{transform:rotate(18deg)}}
@keyframes type{from{transform:translateY(0) rotate(-8deg)}to{transform:translateY(-3px) rotate(-14deg)}}
@keyframes focus{0%,100%{transform:translateY(0)}50%{transform:translateY(.8px)}}
@keyframes breathe{0%,100%{transform:scaleY(1)}50%{transform:scaleY(1.025)}}
@keyframes nod{0%,100%{transform:rotate(0) translateY(0)}50%{transform:rotate(-6deg) translateY(2px)}}
@keyframes shake{0%,70%,100%{transform:translateX(0)}74%{transform:translateX(-2px)}78%{transform:translateX(2px)}82%{transform:translateX(-2px)}86%{transform:translateX(2px)}90%{transform:translateX(0)}}
@keyframes blinkeyes{0%,94%,100%{transform:scaleY(1)}96%{transform:scaleY(.1)}}
@keyframes smoke{0%{transform:translate(0,0) scale(.4);opacity:.0}15%{opacity:.75}100%{transform:translate(6px,-34px) scale(1.8);opacity:0}}
@keyframes zzz{0%{transform:translate(0,0) scale(.6);opacity:0}20%{opacity:1}100%{transform:translate(14px,-30px) scale(1.1);opacity:0}}
@keyframes ringpulse{0%{transform:scale(.6);opacity:.95}100%{transform:scale(1.5);opacity:0}}
@keyframes alertbounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes appear{from{opacity:0;transform:scale(.6)}to{opacity:1}}
@keyframes popring{from{transform:scale(.3);opacity:1}to{transform:scale(1.8);opacity:0}}
@keyframes emote{0%{transform:translate(-50%,-50%) scale(.3);opacity:0}15%{transform:translate(-50%,-80%) scale(1.25);opacity:1}70%{opacity:1}100%{transform:translate(-50%,-190%) scale(1);opacity:0}}
@keyframes particle{from{transform:translate(0,0);opacity:1}to{transform:translate(var(--dx),var(--dy));opacity:0}}
@keyframes blink{50%{opacity:.2}}
@keyframes blinkdot{0%,100%{opacity:1}50%{opacity:.45}}
@keyframes scrollcode{from{transform:translateY(0)}to{transform:translateY(-50%)}}
@keyframes screenerr{0%{background:#ff2d55;box-shadow:0 0 18px #ff2d55}100%{background:#5a0a1a;box-shadow:0 0 4px #ff2d55}}
@keyframes errglow{50%{opacity:.35}}
@keyframes hue{to{filter:hue-rotate(360deg)}}
@keyframes cloud{from{transform:translateX(0)}to{transform:translateX(240px)}}
@keyframes twinkle{50%{opacity:.4}}
@keyframes neon{0%,18%,22%,62%,64%,100%{opacity:1}20%,63%{opacity:.45}}
@keyframes steam{0%{transform:translateY(0) scale(.6);opacity:0}30%{opacity:.6}100%{transform:translateY(-22px) scale(1.8);opacity:0}}
@keyframes sway{0%,100%{transform:rotate(-2deg)}50%{transform:rotate(2deg)}}
@keyframes invader{0%{transform:translateX(0)}50%{transform:translateX(10px)}100%{transform:translateX(0)}}
@keyframes flicker{0%{opacity:.94}10%{opacity:.3}14%{opacity:.85}22%{opacity:.15}28%{opacity:.6}40%{opacity:0}100%{opacity:0}}
@keyframes bump{0%{transform:scale(1)}40%{transform:scale(1.45)}100%{transform:scale(1)}}
@keyframes alertglow{50%{box-shadow:0 0 22px #ff4d6d88;border-color:#ff4d6d88}}
@keyframes slidein{from{opacity:0;transform:translateX(18px)}to{opacity:1;transform:none}}
@keyframes dots{0%,100%{transform:translateY(0);opacity:.4}50%{transform:translateY(-3px);opacity:1}}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes shimmer{to{background-position:-200% 0}}
@keyframes indet{0%{transform:translateX(-110%)}100%{transform:translateX(260%)}}
@keyframes lighton{0%,8%{background:#0d1028;box-shadow:none}12%,85%{background:#ffd86b;box-shadow:0 0 12px #ffd86b99}100%{background:#0d1028}}
@keyframes fadein{from{opacity:0}}
@keyframes cardin{from{opacity:0;transform:translateY(30px) scale(.94)}to{opacity:1;transform:none}}

/* ---------------- Responsive ---------------- */
@media (max-width:1100px){
  .layout{grid-template-columns:1fr}
  .log-panel{position:static;max-height:420px}
}
@media (max-width:720px){
  #app{padding:8px 8px 14px;gap:8px}
  .hud{padding:10px;gap:10px}
  .brand{min-width:0}
  .brand h1{font-size:17px}
  .logo{width:38px;height:38px;font-size:21px;border-radius:12px}
  .hud-right{gap:6px}
  .clock b{font-size:14px}
  .counters{order:3;flex:1 1 100%;width:100%;display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
  .counter{min-width:0;flex-direction:column;gap:2px;padding:7px 4px 8px;text-align:center}
  .counter .ic{width:24px;height:24px;font-size:13px}
  .counter b{font-size:19px;text-align:center}
  .counter .lbl{font-size:10.5px}
  .pill span{display:none}
  .pill{padding:8px}
  .btn-demo{padding:8px 10px;font-size:12px}
  .legend{gap:8px 12px;font-size:11px}
  .legend .hint{margin-left:0;width:100%}
  .legend .hint::after{content:" · ↔ desliza para ver toda la oficina"}
  .demo-banner{font-size:12.5px;padding:8px 10px;gap:8px}
  .card-backdrop{place-items:end center;padding:0}
  .card{width:100%;border-radius:24px 24px 0 0;max-height:88vh;animation:sheetin .35s cubic-bezier(.2,1,.3,1)}
  .card-avatar{width:76px;height:76px}
  .card-avatar svg{width:58px;height:78px;margin-top:18px}
  .stat b{font-size:17px}
  .foot{flex-direction:column}
}
@keyframes sheetin{from{transform:translateY(100%)}to{transform:none}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}
.log:empty{display:none}

/* =================== Capataz: caballero y puesto de mando =================== */
.agent.knight{width:78px;height:104px}
.agent.knight .shadow{left:12px;width:54px;height:13px;background:rgba(0,0,0,.4)}
.agent.knight .ring{left:-2px;width:82px;height:24px}
.agent.knight .body{filter:drop-shadow(0 0 5px rgba(255,205,90,.65)) drop-shadow(0 2px 2px rgba(0,0,0,.35))}
.agent.knight .aura{position:absolute;left:-30px;top:-14px;width:138px;height:132px;border-radius:50%;pointer-events:none;
  background:radial-gradient(ellipse at 50% 55%,rgba(255,214,102,.55),rgba(255,180,40,.18) 45%,transparent 68%);animation:aura 2.6s ease-in-out infinite;mix-blend-mode:screen}
.agent.knight .sparkles{position:absolute;inset:-10px -16px 0;pointer-events:none}
.agent.knight .sparkles i{position:absolute;font-style:normal;color:#ffe08a;text-shadow:0 0 6px #ffc83d;font-size:11px;opacity:0;animation:sparkle 2.8s ease-in-out infinite}
.agent.knight .sparkles i:nth-child(1){left:2px;top:30px}
.agent.knight .sparkles i:nth-child(2){right:4px;top:12px;animation-delay:.7s;font-size:9px}
.agent.knight .sparkles i:nth-child(3){right:0;top:62px;animation-delay:1.4s}
.agent.knight .sparkles i:nth-child(4){left:10px;top:4px;animation-delay:2.1s;font-size:9px}
.agent.knight .cape{transform-origin:50% 0;animation:cape 3.2s ease-in-out infinite}
.agent.knight.walking .cape{animation:capewalk .38s ease-in-out infinite}
.agent.knight .plume{transform-origin:10% 100%;animation:plume 2.4s ease-in-out infinite}
.agent.knight.walking .plume{animation-duration:.38s}
.agent.knight .smoke{left:29px;top:-2px}
.agent.knight .zzz{left:60px;top:6px}
.agent.knight .alertmark{top:-30px}
.agent.knight.st-sleep .aura{opacity:.25;animation:none}
.agent.knight.st-sleep .sparkles{display:none}
.agent.knight.st-sleep .body{filter:grayscale(.45) brightness(.72)}
.agent.knight.st-error .aura{background:radial-gradient(ellipse at 50% 55%,rgba(255,60,90,.55),transparent 65%)}
.agent.knight.typing .arm-r{animation:none}
.agent.knight.typing .arm-l{animation:command 1.6s ease-in-out infinite}
.agent.knight .nametag{top:110px}
.agent.knight.seated .nametag{opacity:0}
.nametag .rank{font-size:9.5px;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:#3a2600;
  background:linear-gradient(90deg,#b8860b,#ffe9a3,#f2c14e);padding:1px 6px;border-radius:999px;margin-left:-3px}
.agent.foreman .nametag{background:linear-gradient(180deg,rgba(60,38,4,.92),rgba(30,18,2,.92));border-color:#f2c14e;box-shadow:0 0 12px rgba(242,193,78,.45);max-width:220px}

/* bocadillo de supervisión */
.bubble.foreman-b .b-in{background:linear-gradient(180deg,#fff7dc,#ffe7a3);color:#4a3000;font-size:11.5px;padding:4px 10px;box-shadow:0 0 0 1.5px #d4a017,0 6px 16px rgba(0,0,0,.35)}
.bubble.foreman-b .tail{background:#ffe7a3}

/* Decoración del salón del trono */
.banner{position:absolute;top:0;width:38px;height:104px;background:linear-gradient(180deg,#b5172f,#7a0b1c);
  clip-path:polygon(0 0,100% 0,100% 100%,50% 86%,0 100%);box-shadow:inset 0 0 0 3px #f2c14e;display:grid;place-items:center;animation:bannersway 6s ease-in-out infinite;transform-origin:50% 0}
.banner::before{content:"";position:absolute;left:-4px;right:-4px;top:0;height:5px;background:linear-gradient(90deg,#a87406,#fff0b0,#b8860b);border-radius:3px}
.banner i{font-style:normal;color:#ffd166;font-size:20px;text-shadow:0 0 8px #ffc83d;margin-top:-10px}
.crest{position:absolute;top:8px;width:68px;height:40px;display:grid;place-items:center;font-size:24px;filter:drop-shadow(0 0 8px #ffd166)}
.carpet{position:absolute;width:52px;border-radius:4px;background:
  linear-gradient(90deg,#f2c14e 0 3px,transparent 3px calc(100% - 3px),#f2c14e calc(100% - 3px)),
  linear-gradient(180deg,#b5172f,#8d0f24);box-shadow:0 4px 10px rgba(0,0,0,.35)}
.trophy{position:absolute;top:34px;width:56px;height:56px;border-radius:12px;display:grid;place-items:center;font-size:30px;
  background:linear-gradient(180deg,#3d4577,#2a3058);box-shadow:inset 0 0 0 3px #f2c14e88,0 8px 16px rgba(0,0,0,.35)}
.dais .dais-top{position:absolute;left:0;top:0;width:256px;height:104px;border-radius:14px 14px 6px 6px;
  background:
    repeating-linear-gradient(90deg,rgba(255,255,255,.05) 0 2px,transparent 2px 32px),
    linear-gradient(180deg,#6b5bb0,#4b3d8a);
  box-shadow:inset 0 0 0 3px #f2c14e, inset 0 0 30px rgba(255,214,102,.25), 0 14px 26px rgba(0,0,0,.45)}
.dais .dais-step{position:absolute;left:50%;transform:translateX(-50%);height:14px;border-radius:0 0 6px 6px;background:linear-gradient(180deg,#5a4b9c,#3c2f73);box-shadow:inset 0 2px 0 #f2c14e,0 6px 10px rgba(0,0,0,.35)}
.dais .dais-step.s1{top:102px;width:200px}
.dais .dais-step.s2{top:116px;width:150px}
.dais .dais-plaque{position:absolute;left:50%;top:104px;transform:translateX(-50%);font:800 8.5px var(--font);letter-spacing:2px;color:#3a2600;white-space:nowrap;
  background:linear-gradient(90deg,#b8860b,#ffe9a3,#f2c14e);padding:1px 8px;border-radius:4px;box-shadow:0 2px 6px rgba(0,0,0,.4);z-index:2}
.brazier .bowl{position:absolute;left:0;bottom:0;width:26px;height:22px;border-radius:4px 4px 10px 10px;background:linear-gradient(180deg,#f2c14e,#8a6200);box-shadow:0 6px 10px rgba(0,0,0,.4)}
.brazier .flame{position:absolute;left:3px;bottom:16px;width:20px;height:28px;border-radius:50% 50% 45% 45%/60% 60% 40% 40%;
  background:radial-gradient(ellipse at 50% 75%,#fff6c2,#ffb703 40%,#fb5607 70%,transparent 72%);filter:blur(.4px);animation:flame .5s ease-in-out infinite alternate;transform-origin:50% 100%}
.brazier::after{content:"";position:absolute;left:-36px;top:-30px;width:98px;height:98px;border-radius:50%;background:radial-gradient(circle,rgba(255,170,60,.35),transparent 65%);animation:flicker2 1.4s infinite;pointer-events:none}
.throne .tback{position:absolute;left:0;top:0;width:80px;height:112px;border-radius:40px 40px 8px 8px;
  background:radial-gradient(ellipse at 50% 30%,#d7263d,#8d0f24 70%);box-shadow:inset 0 0 0 5px #f2c14e, inset 0 0 0 7px #8a6200, 0 10px 20px rgba(0,0,0,.45)}
.throne .tback::before,.throne .tback::after{content:"";position:absolute;top:-8px;width:14px;height:14px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#fff0b0,#b8860b)}
.throne .tback::before{left:-2px}.throne .tback::after{right:-2px}
.throne .tgem{position:absolute;left:32px;top:10px;width:16px;height:16px;transform:rotate(45deg);background:linear-gradient(135deg,#9ee7ff,#3a86ff);box-shadow:0 0 10px #4dabf7}
.cmd-desk{cursor:pointer}
.cmd-desk .cmd-top{position:absolute;left:0;top:0;width:184px;height:26px;border-radius:12px 12px 3px 3px;background:linear-gradient(180deg,#3b3f63,#262946);box-shadow:inset 0 0 0 2px #f2c14e, inset 0 2px 0 rgba(255,255,255,.2)}
.cmd-desk .cmd-front{position:absolute;left:0;top:24px;width:184px;height:22px;border-radius:2px 2px 10px 10px;background:linear-gradient(180deg,#2a2d4c,#1a1c33);box-shadow:inset 0 0 0 2px #b8860b,0 12px 18px rgba(0,0,0,.45);display:grid;place-items:center}
.cmd-plate{font-size:10px;font-weight:800;letter-spacing:.5px;color:#3a2600;background:linear-gradient(90deg,#b8860b,#ffe9a3,#f2c14e);padding:1px 9px;border-radius:5px;white-space:nowrap;max-width:150px;overflow:hidden;text-overflow:ellipsis}
.cmd-desk .screen-l,.cmd-desk .screen-r{position:absolute;top:-26px;width:42px;height:30px;border-radius:5px;background:#0b0f22;border:3px solid #2a2e48;box-shadow:0 6px 10px rgba(0,0,0,.35);transition:background .5s, box-shadow .5s}
.cmd-desk .screen-l{left:4px;transform:perspective(160px) rotateY(18deg)}
.cmd-desk .screen-r{right:4px;transform:perspective(160px) rotateY(-18deg)}
.cmd-desk .holo{position:absolute;left:62px;top:2px;width:60px;height:20px;border-radius:50%;opacity:0;transition:opacity .6s;
  background:radial-gradient(ellipse,rgba(110,230,255,.75),rgba(110,230,255,.1) 70%,transparent 72%);box-shadow:0 0 18px rgba(110,230,255,.6)}
.cmd-desk .holo i{position:absolute;bottom:8px;width:6px;border-radius:2px 2px 0 0;background:linear-gradient(180deg,#bff4ff,#3cc6ff);opacity:.85;animation:holobar 1.6s ease-in-out infinite alternate}
.cmd-desk .holo i:nth-child(1){left:18px;height:14px}.cmd-desk .holo i:nth-child(2){left:27px;height:22px;animation-delay:.4s}.cmd-desk .holo i:nth-child(3){left:36px;height:10px;animation-delay:.8s}
.cmd-desk.p-working .holo{opacity:1}
.cmd-desk.p-working .screen-l,.cmd-desk.p-working .screen-r{background:linear-gradient(#123d68,#0a1d36);box-shadow:0 0 14px rgba(90,200,255,.7)}
.cmd-desk.p-error .screen-l,.cmd-desk.p-error .screen-r{animation:screenerr .6s steps(2) infinite}
.cmd-desk.p-error .cmd-top{box-shadow:inset 0 0 0 2px #ff4d6d,0 0 20px #ff4d6d}
.cmd-desk.p-sleep .screen-l,.cmd-desk.p-sleep .screen-r{background:#090b18}
.cmd-desk.p-away .screen-l,.cmd-desk.p-away .screen-r{background:linear-gradient(135deg,#5b3a1a,#b8860b);opacity:.8}

/* HUD: capataz */
.foreman-hud{display:flex;align-items:center;gap:10px;padding:5px 14px 5px 6px;border-radius:16px;cursor:pointer;color:var(--txt);font-family:inherit;text-align:left;
  background:linear-gradient(135deg,rgba(242,193,78,.22),rgba(181,23,47,.18));border:1px solid rgba(242,193,78,.55);box-shadow:0 0 18px rgba(242,193,78,.18), inset 0 1px 0 rgba(255,255,255,.12);transition:transform .15s}
.foreman-hud:hover{transform:translateY(-1px)}
.fh-av{width:42px;height:42px;border-radius:12px;overflow:hidden;display:grid;place-items:center;background:radial-gradient(circle at 50% 30%,#ffe9a3,#b8860b 70%,#5a3d00);box-shadow:inset 0 0 0 2px #fff3}
.fh-av svg{width:46px;height:62px;margin-top:20px}
.fh-txt{display:flex;flex-direction:column;line-height:1.15}
.fh-txt small{font-size:9.5px;font-weight:800;letter-spacing:1.5px;color:#f2c14e}
.fh-txt b{font-size:14px}
.fh-txt span{font-size:11px;color:var(--muted)}
.fh-error{border-color:#ff4d6d;animation:alertglow 1.4s infinite}.fh-error .fh-txt span{color:#ff8fa3}
.fh-sleep .fh-av{filter:grayscale(.5) brightness(.8)}

/* Ficha del capataz */
.card.foreman{border:1px solid transparent;background:
  linear-gradient(180deg,#2a2140,#161331) padding-box,
  linear-gradient(135deg,#ffe9a3,#b8860b 30%,#f2c14e 55%,#8a6200 80%,#ffe9a3) border-box;
  box-shadow:0 40px 100px rgba(0,0,0,.6), 0 0 40px rgba(242,193,78,.25)}
.card.foreman::before{background:linear-gradient(180deg,rgba(242,193,78,.28),rgba(181,23,47,.12) 60%,transparent)}
.card.foreman .card-avatar{background:radial-gradient(circle at 50% 30%,#fff3c4,#e0a82e 55%,#7a5200);box-shadow:0 0 0 3px #f2c14e,0 0 30px rgba(242,193,78,.55),0 10px 30px rgba(0,0,0,.4);position:relative}
.card.foreman .card-avatar::after{content:"";position:absolute;inset:0;background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.55) 45%,transparent 60%);background-size:250% 100%;animation:glint 3.5s ease-in-out infinite}
.card.foreman .card-avatar{width:110px;height:110px}
.card.knight .card-avatar svg{width:102px;height:134px;margin-top:42px}
.card.foreman h2{background:linear-gradient(90deg,#fff6d6,#f2c14e,#fff6d6);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shimmer 4s linear infinite;font-size:26px}
.card-rank{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:900;letter-spacing:3px;color:#3a2600;padding:3px 12px;margin-bottom:6px;border-radius:6px;
  background:linear-gradient(90deg,#b8860b,#ffe9a3,#f2c14e,#b8860b);box-shadow:0 0 16px rgba(242,193,78,.5)}
.badge.rank{color:#3a2600;background:linear-gradient(90deg,#d4a017,#ffe9a3)}
.log li.foreman .av{background:linear-gradient(135deg,#ffe9a3,#b8860b)!important}

@keyframes aura{0%,100%{transform:scale(.92);opacity:.75}50%{transform:scale(1.06);opacity:1}}
@keyframes sparkle{0%,100%{opacity:0;transform:translateY(4px) scale(.5)}40%{opacity:1;transform:translateY(-4px) scale(1.1)}70%{opacity:0}}
@keyframes cape{0%,100%{transform:skewX(0) scaleX(1)}50%{transform:skewX(-4deg) scaleX(1.04)}}
@keyframes capewalk{0%,100%{transform:skewX(-7deg) scaleX(1.06)}50%{transform:skewX(5deg) scaleX(.97)}}
@keyframes plume{0%,100%{transform:rotate(0)}50%{transform:rotate(-7deg)}}
@keyframes command{0%,100%{transform:rotate(0)}50%{transform:rotate(-25deg)}}
@keyframes bannersway{0%,100%{transform:rotate(-1.2deg)}50%{transform:rotate(1.2deg)}}
@keyframes flame{from{transform:scale(1,1) rotate(-3deg)}to{transform:scale(.92,1.12) rotate(3deg)}}
@keyframes flicker2{0%,100%{opacity:.9}50%{opacity:.6}}
@keyframes holobar{from{transform:scaleY(.6)}to{transform:scaleY(1.15)}}
@keyframes glint{0%,60%{background-position:150% 0}100%{background-position:-100% 0}}
@media (max-width:1100px){.foreman-hud{order:2}}
@media (max-width:720px){.foreman-hud{order:4;width:100%}.fh-txt{flex-direction:row;align-items:baseline;gap:8px;flex-wrap:wrap}}