:root {
  --bg-0:#05070a; --bg-1:#0a0d12; --bg-2:#0c1016; --bg-3:#11151b;
  --line:#1a1f28; --line-soft:rgba(34,40,50,.5);
  --cyan:#1f7bc8; --cyan-2:#2a8ae0; --cyan-3:#5fb8ff; --cyan-glow:rgba(42,138,224,.18);
  --green:#4ac28a; --red:#ff6b6b; --gold:#e8b257;
  --fg-0:#f6f6f4; --fg-1:#e9edf2; --fg-2:#8a93a2; --fg-3:#5b6370; --fg-4:#3d434d;
  --font-display:'Space Grotesk',system-ui,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,monospace;
  --radius:10px; --radius-sm:6px;
}
*{box-sizing:border-box;margin:0;padding:0;}
html,body{background:var(--bg-0);color:var(--fg-1);font-family:var(--font-display);height:100%;-webkit-font-smoothing:antialiased;}
body::before{content:'';position:fixed;inset:0;background:radial-gradient(ellipse at top,rgba(31,123,200,.07) 0%,transparent 55%);pointer-events:none;z-index:0;}
::selection{background:var(--cyan);color:var(--bg-0);}

/* HEADER */
header{background:linear-gradient(180deg,#070a10 0%,var(--bg-0) 100%);border-bottom:1px solid var(--line);padding:14px 26px;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:100;height:60px;}
.brand{display:flex;align-items:center;gap:16px;}
.brand-logo{font-family:var(--font-display);font-weight:700;font-size:1.25rem;letter-spacing:-.5px;}
.brand-logo .ia{color:var(--cyan-3);}
.brand-divider{width:1px;height:24px;background:var(--line);}
.brand-module{font-family:var(--font-mono);font-size:.68rem;color:var(--fg-2);letter-spacing:2px;text-transform:uppercase;}
.brand-module::before{content:'▸ ';color:var(--cyan-3);}
.header-meta{display:flex;align-items:center;gap:14px;font-family:var(--font-mono);font-size:.72rem;color:var(--fg-3);}
.status-dot{width:9px;height:9px;border-radius:50%;background:var(--fg-4);}
.status-dot.online{background:var(--green);box-shadow:0 0 8px var(--green);animation:blink 2.8s infinite;}
.status-dot.offline{background:var(--red);box-shadow:0 0 8px var(--red);}
.status-dot.checking{background:var(--gold);box-shadow:0 0 8px var(--gold);animation:blink 1.2s infinite;}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.4}}

/* LAYOUT */
main{display:grid;grid-template-columns:260px 1fr;gap:10px;padding:10px;height:calc(100vh - 60px);min-height:640px;position:relative;z-index:1;}
.panel{background:var(--bg-2);border:1px solid var(--line);border-radius:var(--radius);display:flex;flex-direction:column;overflow:hidden;}

/* SIDEBAR */
.sidebar{padding:0;}
.sidebar-head{padding:14px 16px;border-bottom:1px solid var(--line);}
.sidebar-head h2{font-size:.78rem;font-family:var(--font-mono);letter-spacing:2px;color:var(--fg-2);text-transform:uppercase;}
.sidebar-head h2::before{content:'◆ ';color:var(--cyan-3);}
#agentList{flex:1;overflow-y:auto;padding:8px;}
.agent-row{display:flex;align-items:center;gap:10px;padding:11px 12px;border-radius:var(--radius-sm);margin-bottom:5px;background:var(--bg-1);border:1px solid transparent;transition:all .25s;}
.agent-row[data-status="running"]{border-color:var(--cyan);background:var(--cyan-glow);}
.agent-row[data-status="completed"]{border-color:rgba(74,194,138,.4);}
.agent-row[data-status="failed"]{border-color:rgba(255,107,107,.4);}
.agent-idx{font-family:var(--font-mono);font-weight:600;font-size:.9rem;flex:0 0 auto;width:22px;}
.agent-info{flex:1;min-width:0;}
.agent-name{font-size:.82rem;font-weight:600;color:var(--fg-0);}
.agent-role{font-size:.68rem;color:var(--fg-3);font-family:var(--font-mono);}
.agent-status{font-family:var(--font-mono);font-size:.75rem;flex:0 0 auto;color:var(--fg-4);}
.agent-status.s-running{color:var(--cyan-3);animation:blink 1s infinite;}
.agent-status.s-completed{color:var(--green);}
.agent-status.s-failed{color:var(--red);}

/* CONTROLS */
.controls{padding:12px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:8px;}
.btn{display:flex;align-items:center;justify-content:center;gap:8px;font-family:var(--font-display);font-size:.82rem;font-weight:600;padding:10px 14px;border-radius:var(--radius-sm);cursor:pointer;border:1px solid var(--line);background:transparent;color:var(--fg-2);transition:all .18s;}
.btn:hover{border-color:var(--cyan);color:var(--cyan-3);background:var(--bg-3);}
.btn-primary{background:var(--cyan);border:none;color:var(--bg-0);}
.btn-primary:hover{background:var(--cyan-2);color:var(--bg-0);}
.btn-demo{border-color:var(--gold);color:var(--gold);}
.btn-demo:hover{background:rgba(232,178,87,.1);color:var(--gold);}
.btn-download{border-color:var(--green);color:var(--green);}
.btn-download:hover{background:rgba(74,194,138,.1);color:var(--green);}
.btn-download:disabled{opacity:.4;cursor:not-allowed;border-color:var(--line);color:var(--fg-4);background:transparent;}
.img-preview{display:block;margin-top:8px;border:1px solid var(--line);border-radius:var(--radius-sm);overflow:hidden;text-decoration:none;transition:border-color .18s;}
.img-preview:hover{border-color:var(--green);}
.img-preview img{width:100%;max-height:130px;object-fit:contain;display:block;background:var(--bg-0);}
.img-preview-cap{display:block;padding:6px 8px;font-family:var(--font-mono);font-size:.62rem;color:var(--fg-3);text-align:center;letter-spacing:.5px;}
.btn-gallery{border-color:var(--cyan-3);color:var(--cyan-3);}
.btn-gallery:hover{background:var(--cyan-glow);color:var(--cyan-3);}

/* STAT CHIP */
.stat-chip{font-family:var(--font-mono);font-size:.72rem;color:var(--cyan-3);background:var(--cyan-glow);border:1px solid var(--line);padding:3px 9px;border-radius:20px;}

/* MODAL GALERÍA */
.modal-overlay{position:fixed;inset:0;background:rgba(5,7,10,.85);backdrop-filter:blur(4px);z-index:1000;display:flex;align-items:center;justify-content:center;padding:24px;}
.modal{background:var(--bg-1);border:1px solid var(--line);border-radius:14px;width:min(1100px,96vw);max-height:92vh;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.6);}
.modal-head{display:flex;align-items:center;gap:14px;padding:16px 20px;border-bottom:1px solid var(--line);flex-wrap:wrap;}
.modal-head h2{font-size:1rem;font-weight:600;white-space:nowrap;}
.modal-head h2 span{color:var(--cyan-3);}
#gallerySearch{flex:1;min-width:180px;background:var(--bg-0);border:1px solid var(--line);border-radius:var(--radius-sm);padding:8px 12px;color:var(--fg-1);font-family:var(--font-display);font-size:.82rem;}
#gallerySearch:focus{outline:none;border-color:var(--cyan);}
.modal-close{background:transparent;border:1px solid var(--line);color:var(--fg-2);width:34px;height:34px;border-radius:var(--radius-sm);cursor:pointer;font-size:1rem;transition:all .18s;}
.modal-close:hover{border-color:var(--red);color:var(--red);}
.modal-body{flex:1;overflow-y:auto;padding:18px 20px;display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:16px;}
.modal-empty{padding:60px 20px;text-align:center;color:var(--fg-3);font-family:var(--font-mono);font-size:.82rem;}
.gcard{background:var(--bg-2);border:1px solid var(--line);border-radius:10px;overflow:hidden;transition:border-color .18s,transform .18s;display:flex;flex-direction:column;}
.gcard:hover{border-color:var(--cyan);transform:translateY(-2px);}
.gcard-img{width:100%;aspect-ratio:9/16;object-fit:cover;background:var(--bg-0);display:block;}
.gcard-info{padding:9px 10px;display:flex;flex-direction:column;gap:4px;}
.gcard-type{font-family:var(--font-mono);font-size:.6rem;letter-spacing:1px;text-transform:uppercase;color:var(--red);font-weight:600;}
.gcard-title{font-size:.78rem;font-weight:600;color:var(--fg-0);line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.gcard-meta{font-family:var(--font-mono);font-size:.62rem;color:var(--fg-3);}
.gcard-actions{display:flex;gap:6px;padding:0 10px 10px;}
.gcard-btn{flex:1;text-align:center;font-family:var(--font-mono);font-size:.64rem;padding:6px;border-radius:5px;border:1px solid var(--line);color:var(--fg-2);text-decoration:none;cursor:pointer;transition:all .15s;}
.gcard-btn:hover{border-color:var(--green);color:var(--green);}

/* STAGE (canvas + log) */
.stage{display:flex;flex-direction:column;}
.stage-head{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--line);}
.stage-title{font-size:1.05rem;font-weight:600;letter-spacing:-.3px;}
.stage-title .accent{color:var(--cyan-3);font-weight:400;}
.stage-meta{display:flex;align-items:center;gap:14px;font-family:var(--font-mono);font-size:.72rem;color:var(--fg-3);}
.stage-meta .elapsed{color:var(--cyan-3);}
#officeWrap{flex:1;position:relative;background:var(--bg-0);min-height:400px;}
#officeCanvas{width:100%;height:100%;display:block;image-rendering:pixelated;}

/* LOG */
.log{height:104px;border-top:1px solid var(--line);background:var(--bg-1);display:flex;flex-direction:column;}
.log-head{padding:7px 14px;font-family:var(--font-mono);font-size:.64rem;letter-spacing:1.5px;color:var(--fg-3);text-transform:uppercase;border-bottom:1px solid var(--line-soft);}
#logFeed{flex:1;overflow-y:auto;padding:8px 14px;font-family:var(--font-mono);font-size:.72rem;line-height:1.7;}
.log-line{color:var(--fg-2);}
.log-ts{color:var(--fg-4);margin-right:8px;}
.log-sys{color:var(--fg-2);}
.log-agent{color:var(--cyan-3);}
.log-ok{color:var(--green);}
.log-warn{color:var(--gold);}
.log-err{color:var(--red);}

/* SCROLLBARS */
::-webkit-scrollbar{width:8px;height:8px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:var(--line);border-radius:4px;}
::-webkit-scrollbar-thumb:hover{background:var(--fg-4);}

/* RESPONSIVE */
@media(max-width:820px){
  main{grid-template-columns:1fr;grid-template-rows:auto 1fr;}
  .sidebar{max-height:240px;}
}