/* GARGANTUA BLACKHOLE — tema espacial pixel */
:root{
  --void:#04060d; --ink:#e8eef7; --muted:#8fa1b8;
  --panel:rgba(9,14,26,.88); --line:#23324a; --star:#cfe3ff;
  --amber:#ffb45e; --cyan:#7fd7ff; --pixel:4px;
}
*{box-sizing:border-box}[hidden]{display:none!important}
html{scroll-behavior:smooth}
body{margin:0;background:var(--void);color:var(--ink);font-family:"Courier New",ui-monospace,monospace;font-weight:700;min-height:100dvh}
.app-shell{min-height:100dvh;display:grid;grid-template-rows:auto auto 1fr}
.skip-link{position:fixed;top:8px;left:8px;z-index:100;background:#fff;color:#000;padding:12px;transform:translateY(-150%)}.skip-link:focus{transform:none}
button:focus-visible,a:focus-visible{outline:3px solid var(--cyan);outline-offset:3px}

/* ---- topbar ---- */
.topbar{min-height:64px;display:flex;align-items:center;gap:22px;padding:10px 22px;background:linear-gradient(180deg,#0a1120,#070c16);border-bottom:2px solid var(--line)}
.brand{display:flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none;font-size:18px;letter-spacing:2px}
.brand-mark{width:34px;height:34px;filter:drop-shadow(0 0 6px rgba(255,180,94,.55))}
.roster-note{margin-left:auto;font-size:11px;letter-spacing:.04em;color:var(--muted);display:flex;gap:7px;align-items:center}
.roster-note strong{color:var(--ink)}
.signal-dot{width:7px;height:7px;background:#a6a095;box-shadow:0 0 0 2px #1c2740}
.roster-note.state-live .signal-dot{background:#62c777;box-shadow:0 0 0 2px #12331f,0 0 10px rgba(98,199,119,.8)}
.soundless-control,.nav-pill,.close-detail{font:inherit;color:var(--ink);background:#101a2e;border:2px solid var(--line);box-shadow:3px 3px 0 #000;min-height:36px;cursor:pointer}
.soundless-control{font-size:10px;padding:0 12px;letter-spacing:1px}
.soundless-control:active,.nav-pill:active,.close-detail:active{transform:translate(2px,2px);box-shadow:1px 1px 0 #000}

/* ---- nav órbitas ---- */
.orbit-nav{min-height:50px;display:flex;align-items:center;gap:8px;padding:8px 22px;background:#060b14;border-bottom:2px solid var(--line);overflow:auto}
.nav-label{font-size:9px;letter-spacing:2px;color:var(--muted);margin-right:4px;white-space:nowrap}
.nav-pill{display:flex;align-items:center;gap:7px;white-space:nowrap;padding:6px 12px;font-size:11px;letter-spacing:.5px}
.nav-pill.is-active{background:#16233c;border-color:var(--cyan);color:var(--cyan)}

/* ---- mundo ---- */
.world-wrap{position:relative;overflow:hidden;min-height:62vh;background:radial-gradient(120% 90% at 50% 42%,#0a1226 0%,#05070f 55%,#030409 100%)}
.space,.hole,.orbits,.hole-label{pointer-events:none}
.space{position:absolute;inset:0}
.starfield{position:absolute;inset:-30%;background-repeat:repeat}
.starfield.far{background-image:radial-gradient(1px 1px at 12px 18px,var(--star) 50%,transparent),radial-gradient(1px 1px at 68px 42px,rgba(207,227,255,.7) 50%,transparent),radial-gradient(1px 1px at 130px 90px,var(--star) 50%,transparent),radial-gradient(1px 1px at 30px 120px,rgba(207,227,255,.6) 50%,transparent);background-size:170px 170px;animation:sky-drift 240s linear infinite,twinkle 7s ease-in-out infinite alternate}
.starfield.mid{background-image:radial-gradient(1.5px 1.5px at 40px 60px,#fff 50%,transparent),radial-gradient(1.5px 1.5px at 140px 20px,var(--star) 50%,transparent),radial-gradient(1.5px 1.5px at 90px 150px,#fff 50%,transparent);background-size:230px 230px;animation:sky-drift 180s linear infinite reverse,twinkle 5.5s ease-in-out infinite alternate}
.starfield.near{background-image:radial-gradient(2px 2px at 60px 30px,#fff 50%,transparent),radial-gradient(2px 2px at 180px 110px,var(--star) 50%,transparent),radial-gradient(2px 2px at 20px 190px,#fff 50%,transparent);background-size:320px 320px;animation:sky-drift 130s linear infinite,twinkle 4s ease-in-out infinite alternate;opacity:.9}
.nebula{position:absolute;border-radius:50%;filter:blur(60px);opacity:.16;mix-blend-mode:screen}
.nebula.n1{width:44vmin;height:30vmin;left:6%;top:12%;background:radial-gradient(closest-side,#3b2d7a,transparent)}
.nebula.n2{width:38vmin;height:26vmin;right:4%;bottom:8%;background:radial-gradient(closest-side,#0e4a5e,transparent)}

/* ---- agujero negro ---- */
.hole{position:absolute;left:50%;top:46%;width:min(44vmin,420px);height:min(44vmin,420px);transform:translate(-50%,-50%);animation:hole-breathe 9s ease-in-out infinite}
.disk{position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 10deg,#2a1608,#8a3d0c,#e08a2e,#ffd98a,#fff3cf,#ffcf7a,#b45309,#5a2a0a,#2a1608);-webkit-mask:radial-gradient(circle,transparent 33%,#000 36%,#000 63%,transparent 67%);mask:radial-gradient(circle,transparent 33%,#000 36%,#000 63%,transparent 67%);filter:blur(.6px) saturate(1.15);animation:disk-spin 16s linear infinite}
.disk::after{content:"";position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 200deg,rgba(0,0,0,.82),rgba(0,0,0,.25) 22%,transparent 40% 62%,rgba(0,0,0,.4) 82%,rgba(0,0,0,.8));mix-blend-mode:multiply}
.disk-under{position:absolute;left:8%;right:8%;top:44%;bottom:44%;border-radius:50%;background:radial-gradient(closest-side,#f8b84e,transparent 70%);filter:blur(10px);opacity:.5}
.photon-ring{position:absolute;inset:31.5%;border-radius:50%;border:2px solid #ffe9c4;box-shadow:0 0 12px 2px rgba(255,214,140,.75),0 0 34px 6px rgba(255,170,80,.35),inset 0 0 10px rgba(255,236,190,.8);animation:ring-pulse 4.5s ease-in-out infinite}
.shadow{position:absolute;inset:33.5%;border-radius:50%;background:#000;box-shadow:0 0 0 2px rgba(120,80,200,.35),inset 0 0 24px rgba(60,30,110,.55)}
.lens-top,.lens-bottom{position:absolute;left:14%;right:14%;height:26%;border:2px solid rgba(255,196,110,.5);filter:blur(.5px)}
.lens-top{top:6%;border-bottom:0;border-radius:50% 50% 0 0/100% 100% 0 0}
.lens-bottom{bottom:6%;border-top:0;border-radius:0 0 50% 50%/0 0 100% 100%}
.hole-label{position:absolute;left:50%;top:46%;transform:translate(-50%,calc(min(22vmin,210px) + 18px));text-align:center;font-size:11px;letter-spacing:3px;color:var(--muted)}
.hole-label span{font-size:9px;letter-spacing:2px;color:#5d7089}

/* ---- órbitas y bots ---- */
.orbits{position:absolute;inset:0}
.orbit-ring{--RX:26%;--RY:20%;}
.orbit-ring.ring-gargantua{--RX:19%;--RY:14%}
.orbit-ring.ring-jarvis{--RX:31%;--RY:23%}
.orbit-ring.ring-geekom{--RX:43%;--RY:32%}
.orbit-ring.ring-exterior{--RX:53%;--RY:39%}
.orbit-ring{width:calc(var(--RX) * 2);height:calc(var(--RY) * 2);position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);border:1px dashed rgba(127,215,255,.28);border-radius:50%;transition:opacity .3s}
.orbit-ring.is-dimmed{opacity:.15}
.agent-layer{position:absolute;inset:0}
[data-agent-layer="gargantua"]{animation:layer-spin 150s linear infinite}
[data-agent-layer="jarvis"]{animation:layer-spin 220s linear infinite}
[data-agent-layer="geekom"]{animation:layer-spin 300s linear infinite}
[data-agent-layer="exterior"]{animation:layer-spin 400s linear infinite}
.agent-marker{position:absolute;left:50%;top:46%;transform:translate(-50%,-50%) rotate(var(--ang,0deg)) translateX(var(--rad,30%)) rotate(calc(-1 * var(--ang,0deg)));border:0;background:transparent;padding:6px;min-width:52px;min-height:62px;cursor:pointer;color:var(--ink);font:inherit;pointer-events:auto;transition:opacity .3s}
.agent-marker:hover,.agent-marker:focus-visible{z-index:20}
.agent-marker:hover .bot-sprite{transform:translateY(-5px)}
.agent-marker[aria-selected="true"] .bot-name{background:#1d2f52;border-color:var(--cyan)}
.agent-marker.is-dimmed{opacity:.16;filter:saturate(.3)}
.upright{display:block;animation-name:layer-spin-rev;animation-timing-function:linear;animation-iteration-count:infinite}
[data-agent-layer="gargantua"] .upright{animation-duration:150s}
[data-agent-layer="jarvis"] .upright{animation-duration:220s}
[data-agent-layer="geekom"] .upright{animation-duration:300s}
[data-agent-layer="exterior"] .upright{animation-duration:400s}
.bot-sprite{position:relative;display:block;width:28px;height:34px;margin:auto;transition:transform .12s;filter:drop-shadow(3px 4px 0 rgba(0,0,0,.55)) drop-shadow(0 0 5px var(--bot));animation:bot-idle 2.4s steps(2) infinite}
.bot-sprite .head{position:absolute;display:block;left:3px;top:6px;width:22px;height:15px;background:var(--bot);border:3px solid #05070f}
.bot-sprite .head b{position:absolute;top:4px;width:3px;height:4px;background:#05070f}
.bot-sprite .head b:first-child{left:3px}
.bot-sprite .head b:last-child{right:3px}
.bot-sprite .body{position:absolute;left:6px;top:20px;width:16px;height:11px;background:var(--bot);border:3px solid #05070f}
.bot-sprite .feet{position:absolute;left:6px;top:30px;width:6px;height:4px;background:#05070f;box-shadow:10px 0 #05070f}
.bot-sprite .antennae{position:absolute;left:13px;top:1px;width:3px;height:7px;background:#05070f}
.bot-sprite .antennae:before{content:"";position:absolute;left:-2px;top:-2px;width:7px;height:4px;background:var(--bot);border:2px solid #05070f}
.bot-name{position:relative;display:inline-block;margin-top:5px;padding:1px 5px;font-size:9px;letter-spacing:.5px;background:rgba(6,10,20,.85);border:1px solid var(--line);color:var(--ink);white-space:nowrap}
.sleep-bubble{position:absolute;z-index:4;left:33px;top:-4px;display:block;padding:2px 4px;background:#fff8dc;border:2px solid #05070f;box-shadow:2px 2px 0 rgba(0,0,0,.4);font-size:9px;letter-spacing:-1px;line-height:1;color:#3f5a62;opacity:0;pointer-events:none}
.sleep-bubble::after{content:"";position:absolute;left:1px;bottom:-5px;width:4px;height:4px;background:#fff8dc;border-right:2px solid #05070f;border-bottom:2px solid #05070f}
.state-sleeping .sleep-bubble{opacity:1;animation:sleep-bubble 2.2s steps(2,end) infinite}
.agent-marker.state-working .upright .bot-sprite{animation:bot-working .55s steps(2,end) infinite;filter:drop-shadow(3px 4px 0 rgba(0,0,0,.5)) drop-shadow(0 0 7px rgba(255,212,94,.95))}
.agent-marker.state-working::after{content:"✦";position:absolute;left:37px;top:7px;color:#fff3a8;text-shadow:2px 2px 0 #000;animation:work-spark .8s steps(2,end) infinite}
.agent-marker.state-idle .upright .bot-sprite{animation:bot-idle 2.4s steps(2,end) infinite}
.agent-marker.state-sleeping .upright .bot-sprite{animation:none;transform:translateY(7px) rotate(90deg);transform-origin:50% 58%;opacity:.85}
.agent-marker.state-unknown .upright .bot-sprite{animation:none;filter:grayscale(1) drop-shadow(3px 4px 0 rgba(0,0,0,.3));opacity:.45}
.agent-marker.state-unknown::after{content:"?";position:absolute;left:40px;top:5px;width:13px;height:13px;display:grid;place-items:center;background:#151d2c;border:2px solid var(--line);font-size:9px;color:var(--muted)}

/* ---- inspector + leyenda ---- */
.inspector{position:absolute;right:18px;top:18px;width:284px;max-width:calc(100vw - 36px);background:var(--panel);border:2px solid var(--line);box-shadow:6px 6px 0 rgba(0,0,0,.45);backdrop-filter:blur(6px);padding:14px;z-index:30}
.selection-index{margin:0 0 10px;font-size:9px;letter-spacing:2px;color:var(--muted)}
.empty-inspector p{margin:0 0 8px;font-size:11px;line-height:1.5;color:var(--ink)}
.empty-inspector .hint{color:var(--muted);font-size:10px}
.detail-head{display:flex;gap:12px;align-items:center}
.detail-portrait{position:relative;flex:0 0 64px;height:76px}
.detail-portrait .bot-sprite{transform:scale(1.8);animation:none}
.detail-portrait .sleep-bubble{left:46px;top:26px}
.detail-portrait.state-working .bot-sprite{animation:detail-working .6s steps(2,end) infinite}
.detail-portrait.state-sleeping .bot-sprite{transform:scale(1.8) rotate(90deg);opacity:.85}
.detail-portrait.state-unknown .bot-sprite{filter:grayscale(1);opacity:.45}
.detail-kicker{margin:0;font-size:9px;letter-spacing:1px;color:var(--cyan)}
.detail-name{margin:2px 0;font-size:18px;letter-spacing:1px}
.detail-role{margin:0;font-size:10px;color:var(--muted)}
.detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:12px 0}
.detail-grid dt{font-size:9px;letter-spacing:1px;color:var(--muted)}
.detail-grid dd{margin:2px 0 0;font-size:11px}
#detail-status{color:var(--amber)}
.close-detail{width:100%;min-height:34px;font-size:10px;letter-spacing:1px}
.legend{position:absolute;left:18px;bottom:14px;display:flex;flex-wrap:wrap;gap:12px;align-items:center;font-size:10px;letter-spacing:.5px;color:var(--muted);background:rgba(5,8,16,.72);border:1px solid var(--line);padding:7px 12px;z-index:20}
.legend i{display:inline-block;width:8px;height:8px;border:2px solid #05070f;margin-right:5px;vertical-align:-1px}
.legend-live{background:#62c777;box-shadow:0 0 6px rgba(98,199,119,.9)}
.legend-idle{background:#7fd7ff}
.legend-sleep{background:#91a6ad;transform:rotate(25deg)}
.legend-unknown{background:#3a465c}
.legend-note{font-size:9px;letter-spacing:1px}

/* ---- keyframes ---- */
@keyframes sky-drift{to{transform:rotate(360deg)}}
@keyframes twinkle{50%{opacity:.55}}
@keyframes hole-breathe{50%{transform:translate(-50%,-50%) scale(1.015)}}
@keyframes disk-spin{to{transform:rotate(360deg)}}
@keyframes ring-pulse{50%{box-shadow:0 0 16px 3px rgba(255,214,140,.9),0 0 44px 9px rgba(255,170,80,.45),inset 0 0 14px rgba(255,236,190,.9)}}
@keyframes layer-spin{to{transform:rotate(360deg)}}
@keyframes layer-spin-rev{to{transform:rotate(-360deg)}}
@keyframes bot-idle{50%{transform:translateY(-2px)}}
@keyframes bot-working{50%{transform:translateY(-4px)}}
@keyframes detail-working{50%{transform:scale(1.8) translateY(-2px)}}
@keyframes work-spark{50%{transform:translate(2px,-3px);opacity:.45}}
@keyframes sleep-bubble{50%{transform:translate(2px,-3px)}}

/* ---- pausa y accesibilidad ---- */
.motion-paused .starfield,.motion-paused .hole,.motion-paused .disk,.motion-paused .photon-ring,.motion-paused [data-agent-layer],.motion-paused .upright,.motion-paused .bot-sprite,.motion-paused .sleep-bubble,.motion-paused .agent-marker::after{animation-play-state:paused!important}
@media (prefers-reduced-motion:reduce){
  .starfield,.hole,.disk,.photon-ring,[data-agent-layer],.upright,.sleep-bubble,.agent-marker.state-working::after,.agent-marker .bot-sprite,.detail-portrait .bot-sprite{animation:none!important}
  .agent-marker,.orbit-ring,.is-dimmed{transition:none!important}
}

/* ---- móvil ---- */
@media (max-width:900px){
  .topbar{flex-wrap:wrap;gap:10px;padding:10px 14px}
  .roster-note{margin-left:0;order:3;width:100%;font-size:10px}
  .inspector{right:10px;left:10px;top:auto;bottom:10px;width:auto}
  .legend{left:10px;bottom:auto;top:10px;max-width:calc(100vw - 20px)}
  .hole{top:44%}
  .hole-label{top:44%}
}