:root{
  --bg:#141922; --panel:#1b222d; --panel-2:#222b38; --line:#2e3949;
  --ink:#eef1f5; --ink-2:#b7c0cc; --muted:#7d8898;
  --x:#2dd4de; --ok:#7cc77a; --warn:#f3a712; --bad:#e4572e;
  --sans:"IBM Plex Sans",-apple-system,"Segoe UI",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  --pixel:"Silkscreen","IBM Plex Mono",monospace;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{height:100%;margin:0}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:14px}
#app{display:grid;grid-template-columns:1fr 380px;height:100%}
#stage{position:relative;display:flex;align-items:center;justify-content:center;padding:16px;overflow:hidden}
#game{max-width:100%;max-height:calc(100% - 30px);image-rendering:pixelated;border-radius:6px;box-shadow:0 20px 60px rgba(0,0,0,.45);background:#0f141b}
#help{position:absolute;bottom:10px;left:0;right:0;text-align:center;color:var(--muted);font-size:12px}
#help b{color:var(--ink-2);font-family:var(--mono)}
#hint{position:absolute;top:24px;left:50%;transform:translateX(-50%);background:var(--x);color:#06262a;font-weight:600;padding:8px 14px;border-radius:999px;font-size:13px;box-shadow:0 8px 24px rgba(45,212,222,.35)}

#side{background:var(--panel);border-left:1px solid var(--line);display:flex;flex-direction:column;min-height:0}
.brand{display:flex;gap:12px;align-items:center;padding:16px 18px;border-bottom:1px solid var(--line)}
.logo{width:34px;height:34px;border-radius:9px;background:var(--x);color:#06262a;font-family:var(--pixel);display:grid;place-items:center;font-size:18px}
.logo.big{width:52px;height:52px;font-size:28px;border-radius:12px;margin-bottom:6px}
.title{font-weight:600;font-size:15px}
.sub{color:var(--muted);font-size:12px}
#xcard{display:flex;gap:12px;align-items:center;margin:14px 18px 6px;padding:12px;background:var(--panel-2);border:1px solid var(--line);border-radius:10px}
.xavatar{width:36px;height:36px;border-radius:50%;background:radial-gradient(circle at 50% 38%,#f1c7a8 0 30%,transparent 31%),linear-gradient(#2a2f3a 0 30%,var(--x) 30%);flex:none;box-shadow:0 0 0 2px var(--x)}
.xname{font-weight:600}.xname span{color:var(--muted);font-weight:400;font-size:12px;margin-left:4px}
#xstatus{color:var(--x);font-size:12.5px;font-family:var(--mono);line-height:1.35}
.tabs{display:flex;gap:4px;padding:10px 18px 0;border-bottom:1px solid var(--line)}
.tab{background:none;border:0;color:var(--muted);font:inherit;font-weight:500;padding:8px 10px;border-bottom:2px solid transparent;cursor:pointer}
.tab.on{color:var(--ink);border-color:var(--x)}
#pending{background:var(--warn);color:#2a1d00;border-radius:999px;padding:0 7px;font-size:11px;font-weight:600;margin-left:4px}
.pane{flex:1;overflow-y:auto;padding:10px 18px;min-height:0}
.fi{display:grid;grid-template-columns:42px 1fr;gap:8px;padding:6px 0;font-size:13px;color:var(--ink-2);line-height:1.4;border-bottom:1px solid rgba(46,57,73,.5)}
.fi time{font-family:var(--mono);font-size:11px;color:var(--muted);padding-top:1px}
.fi.xoraya{color:var(--x)}.fi.delegate{color:#cfe9ff}.fi.done{color:var(--ok)}.fi.error{color:#ff9b84}.fi.order{color:var(--ink)}.fi.people{color:var(--muted)}

.job{background:var(--panel-2);border:1px solid var(--line);border-radius:10px;padding:12px;margin:8px 0}
.job h4{margin:6px 0 4px;font-size:14px;line-height:1.35}
.job .meta{color:var(--muted);font-size:12px}
.chip{display:inline-block;font-family:var(--mono);font-size:10.5px;letter-spacing:.04em;text-transform:uppercase;padding:2px 7px;border-radius:4px;background:#2f3a4a;color:var(--ink-2);margin-right:4px}
.chip.en_cola{background:#334155}.chip.en_marcha{background:var(--x);color:#06262a}
.chip.pendiente{background:var(--warn);color:#2a1d00}.chip.validado{background:var(--ok);color:#0d2a0c}
.chip.rechazado,.chip.error,.chip.interrumpido{background:#5b2a22;color:#ffd2c8}
.chip.d{background:transparent;border:1px solid var(--line)}
.res{margin-top:8px;font-size:13px;color:var(--ink-2);line-height:1.5;white-space:normal;max-height:260px;overflow:auto;padding-right:4px}
.res b{color:var(--ink)}
.files{margin-top:6px;font-size:12px}.files a{color:var(--x)}
.acts{display:flex;gap:8px;margin-top:10px}
.acts button{flex:1}

#chat{padding:12px 18px;border-top:1px solid var(--line)}
input,textarea{width:100%;background:#121820;border:1px solid var(--line);color:var(--ink);border-radius:8px;padding:10px 12px;font:inherit}
input:focus,textarea:focus,button:focus-visible{outline:2px solid var(--x);outline-offset:1px}
button{background:var(--x);color:#06262a;border:0;border-radius:8px;padding:10px 14px;font:inherit;font-weight:600;cursor:pointer}
button.ghost{background:transparent;color:var(--ink-2);border:1px solid var(--line)}
button.bad{background:#3a2420;color:#ffb8a8}

.overlay{position:fixed;inset:0;background:rgba(8,11,16,.72);backdrop-filter:blur(4px);display:grid;place-items:center;padding:16px;z-index:10}
.card{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:26px;width:min(420px,100%);display:flex;flex-direction:column;gap:8px}
.card.wide{width:min(560px,100%)}
.card h1{font-family:var(--pixel);font-weight:400;font-size:22px;margin:4px 0}
.card p{color:var(--ink-2);margin:0 0 8px;line-height:1.5}
.card label{font-size:12px;color:var(--muted);margin-top:6px}
.colors{display:flex;gap:8px;margin:8px 0}
.colors button{width:28px;height:28px;border-radius:50%;padding:0;border:2px solid transparent}
.colors button.on{border-color:#fff}
.err{color:#ff9b84;font-size:13px}
.otitle{font-family:var(--pixel);font-size:18px;color:var(--x)}
.osub{font-size:13px}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin:4px 0}
.chips button{background:var(--panel-2);color:var(--ink-2);border:1px solid var(--line);font-weight:400;font-size:12px;padding:6px 10px;border-radius:999px}
.row{display:flex;gap:8px;justify-content:flex-end;margin-top:8px}

@media (max-width:900px){
  #app{grid-template-columns:1fr;grid-template-rows:auto 1fr}
  #stage{padding:8px}
  #game{max-height:52vh}
  #help{display:none}
}

#chat{display:flex;gap:8px}
.mic{display:inline-flex;align-items:center;gap:6px;background:var(--panel-2);color:var(--ink-2);border:1px solid var(--line);padding:8px 10px;border-radius:8px;font-weight:500;font-size:12px}
.mic.rec{background:#e4572e;color:#fff;border-color:#e4572e;animation:pulse 1s infinite}
@keyframes pulse{50%{box-shadow:0 0 0 6px rgba(228,87,46,.25)}}
@media (prefers-reduced-motion:reduce){.mic.rec{animation:none}}
.olabel{display:flex;justify-content:space-between;align-items:end;margin-top:6px}
.olabel label{margin:0}
button.sm{padding:6px 10px;font-size:12px}
.dhead{display:flex;gap:10px;align-items:flex-start;padding:4px 0 10px;border-bottom:1px solid var(--line);position:sticky;top:-10px;background:var(--panel);z-index:1}
.dtitle{font-weight:600;line-height:1.3}
.dsub{color:var(--x);font-family:var(--mono);font-size:12px;margin-top:2px}
.le{padding:7px 0;font-size:13px;line-height:1.5;color:var(--ink-2);border-bottom:1px solid rgba(46,57,73,.45);white-space:pre-wrap;word-break:break-word}
.le .w{display:block;font-family:var(--mono);font-size:10.5px;color:var(--muted);margin-bottom:2px}
.le.tool{font-family:var(--mono);font-size:12px;color:#cfe9ff}
.le.tool .tx:before{content:"● ";color:var(--x)}
.le.done{color:var(--ok)}.le.done .tx:before{content:"✓ "}
#dempty{color:var(--muted);padding:14px 0;line-height:1.5}
.job .acts.more{margin-top:8px}
#game{cursor:pointer}

/* --- chat con Xoraya --- */
.threadhead{display:flex;justify-content:space-between;align-items:center;color:var(--muted);font-size:12px;padding:2px 0 8px}
button.link{background:none;border:0;color:var(--x);font:inherit;cursor:pointer;padding:0}
.m-user{margin:14px 0 6px auto;max-width:86%;background:#24364a;border:1px solid #2f4a63;border-radius:12px 12px 2px 12px;padding:8px 12px;width:fit-content}
.m-user.other{margin-left:0;margin-right:auto;border-radius:12px 12px 12px 2px;background:var(--panel-2);border-color:var(--line)}
.m-user .who{font-size:11px;color:var(--muted);margin-bottom:2px}
.m-x{background:var(--panel-2);border:1px solid var(--line);border-radius:12px;padding:10px 14px;margin-bottom:6px}
.m-x .top{display:flex;gap:6px;align-items:center;margin-bottom:4px;flex-wrap:wrap}
.m-x .xn{font-weight:600;color:var(--x);font-size:13px}
.md{font-size:13.5px;line-height:1.55;color:var(--ink-2);overflow-wrap:anywhere}
.md h1,.md h2,.md h3,.md h4{color:var(--ink);font-size:14px;margin:12px 0 4px}
.md p{margin:6px 0}
.md ul,.md ol{margin:4px 0;padding-left:20px}
.md li{margin:2px 0}
.md strong{color:var(--ink)}
.md code{font-family:var(--mono);font-size:12px;background:#121820;padding:1px 4px;border-radius:4px}
.md table{border-collapse:collapse;width:100%;font-size:12.5px;margin:8px 0;display:block;overflow-x:auto}
.md th,.md td{border-bottom:1px solid var(--line);padding:5px 8px 5px 0;text-align:left;vertical-align:top}
.md th{color:var(--muted);font-weight:500}
.md a{color:var(--x)}
.usage{margin-top:8px;font-family:var(--mono);font-size:11px;color:var(--muted)}
.working{display:flex;gap:8px;align-items:center;color:var(--x);font-family:var(--mono);font-size:12px}
.dots:after{content:"";animation:dots 1.2s steps(4) infinite}
@keyframes dots{0%{content:""}25%{content:"."}50%{content:".."}75%{content:"..."}}

.chip.pendiente{background:var(--warn);color:#2a1d00}.chip.validado,.chip.respondido{background:#2c4a2c;color:#bfe8bd}
.chip.rechazado,.chip.error,.chip.interrumpido{background:#5b2a22;color:#ffd2c8}
.chip.d{background:transparent;border:1px solid var(--line)}
.empty{color:var(--muted);line-height:1.5;padding:10px 0}
#chat{display:flex;flex-direction:column;gap:8px}
.seg{display:flex;gap:4px}
.seg button{flex:1;background:transparent;color:var(--muted);border:1px solid var(--line);border-radius:6px;padding:5px;font:500 12px var(--sans);cursor:pointer}
.seg button.on{background:var(--panel-2);color:var(--ink);border-color:var(--x)}
.chatrow{display:flex;gap:8px}
#side{min-width:0}
#app{grid-template-columns:1fr 420px}