/* ============ Jeims — supervisor general (mano derecha) ============ */
/* azul "azure" propio del jefe, scoped a .jx para no pelear con el acento global */
.jx{
  --jx:#2F6BF0;
  --jx-ink:#2F6BF0;
  --jx-soft:color-mix(in srgb, var(--jx) 9%, transparent);
  --jx-line:color-mix(in srgb, var(--jx) 22%, transparent);
  --jx-glow:color-mix(in srgb, var(--jx) 18%, transparent);
  position:relative;
  display:flex;
  align-items:stretch;
  min-height:calc(100vh - 76px - 86px);
}
[data-theme="dark"] .jx{
  --jx:#78AAFF; --jx-ink:#A6C6FF;
  --jx-soft:color-mix(in srgb, var(--jx) 15%, transparent);
  --jx-line:color-mix(in srgb, var(--jx) 30%, transparent);
  --jx-glow:color-mix(in srgb, var(--jx) 26%, transparent);
}
@media (max-width:1080px){ .jx{ flex-direction:column; } }

/* ===== STAGE (Jeims central, sin caja) ===== */
.jx-stage{
  position:relative; overflow:hidden; flex:1; min-width:0;
  display:flex; flex-direction:column; align-items:center;
  padding:14px 24px 22px;
}
/* faint HUD grid */
.jx-stage::before{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.5;
  background-image:linear-gradient(var(--jx-line) 1px, transparent 1px),
                   linear-gradient(90deg, var(--jx-line) 1px, transparent 1px);
  background-size:46px 46px;
  -webkit-mask-image:radial-gradient(circle at 50% 32%, #000 0%, transparent 58%);
          mask-image:radial-gradient(circle at 50% 32%, #000 0%, transparent 58%);
  opacity:.14;
}

/* centered identity */
.jx-id{ position:relative; z-index:2; display:flex; flex-direction:column; align-items:center; gap:3px; margin-bottom:2px; }
.jx-id .jx-id-name{ font-family:var(--font-head); font-size:27px; font-weight:600; letter-spacing:-.025em; line-height:1; }
.jx-id .jx-id-sub{ font-size:12.5px; color:var(--text-3); font-weight:600; letter-spacing:.02em; }
.jx-stat{ display:inline-flex; align-items:center; gap:6px; font-size:10.5px; font-weight:600;
  color:var(--text-3); letter-spacing:.07em; text-transform:uppercase; margin-top:6px; }
.jx-stat .led{ width:6px; height:6px; border-radius:50%; background:var(--jx); flex:0 0 6px;
  animation:pulse 1.7s ease-in-out infinite; }

/* core area */
.jx-core-area{ position:relative; z-index:2; display:flex; flex-direction:column; align-items:center;
  margin-top:2px; }
.jx-corewrap{ position:relative; width:330px; height:296px; display:grid; place-items:center; }
.jx-corewrap .aicore{ width:300px; height:296px; border-radius:0; }
/* dark "viewport well" so the reactor always glows, even in light mode */
[data-theme="light"] .jx-corewrap::before{
  content:""; position:absolute; width:296px; height:296px; border-radius:50%; z-index:-2;
  background:radial-gradient(circle, #0a0d15 0%, #0c1019 46%, rgba(12,16,25,0) 72%);
}
/* soft bloom behind */
.jx-corewrap::after{
  content:""; position:absolute; width:230px; height:230px; border-radius:50%;
  background:radial-gradient(circle, var(--jx-glow) 0%, transparent 68%);
  filter:blur(14px); z-index:-1;
}
/* HUD rings */
.jx-ring{ position:absolute; border-radius:50%; border:1px solid var(--jx-line); pointer-events:none; }
.jx-ring.r1{ width:268px; height:268px; }
.jx-ring.r2{ width:330px; height:330px; border-style:dashed; opacity:.6;
  animation:jxspin 38s linear infinite; }
@keyframes jxspin{ to{ transform:rotate(360deg); } }

/* talking waveform */
.jx-wave{ display:flex; align-items:flex-end; gap:4px; height:20px; margin-top:-6px; opacity:0;
  transition:opacity .3s; }
.jx-wave.on{ opacity:1; }
.jx-wave i{ width:3px; border-radius:2px; background:var(--jx); height:6px;
  animation:jxwave 1s ease-in-out infinite; }
.jx-wave i:nth-child(2){ animation-delay:.12s } .jx-wave i:nth-child(3){ animation-delay:.24s }
.jx-wave i:nth-child(4){ animation-delay:.36s } .jx-wave i:nth-child(5){ animation-delay:.48s }
.jx-wave i:nth-child(6){ animation-delay:.6s }  .jx-wave i:nth-child(7){ animation-delay:.72s }
@keyframes jxwave{ 0%,100%{ height:5px } 50%{ height:18px } }

/* speech line */
.jx-speech{ position:relative; z-index:2; max-width:620px; text-align:center; margin-top:14px;
  min-height:58px; display:flex; align-items:center; justify-content:center; }
.jx-speech p{ font-family:var(--font-head); font-weight:500; font-size:18px; line-height:1.5;
  letter-spacing:-.01em; color:var(--text); text-wrap:balance; }
.jx-speech .cur{ display:inline-block; width:2px; height:1em; vertical-align:-2px; margin-left:2px;
  background:var(--jx); animation:jxblink 1s steps(1) infinite; }
@keyframes jxblink{ 50%{ opacity:0 } }

/* ===== SPOTLIGHT (lo que muestra mientras habla) ===== */
.jx-spot{ position:relative; z-index:2; width:100%; max-width:660px; margin-top:18px; }
.jx-card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg);
  box-shadow:var(--shadow-sm); padding:18px 20px; animation:jxrise .42s cubic-bezier(.2,.8,.2,1) both; }
[data-theme="dark"] .jx-card{ background:color-mix(in srgb,var(--jx) 6%, var(--surface-2)); }
@keyframes jxrise{ from{ transform:translateY(10px) } to{ transform:none } }
.jx-spot-h{ display:flex; align-items:center; gap:8px; margin-bottom:13px; }
.jx-spot-h .lbl{ font-size:10.5px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--jx-ink); }
.jx-spot-h .grow{ flex:1; }
.jx-spot-h .meta{ font-size:11.5px; color:var(--text-3); font-weight:600; }

/* overview heartbeat — versión ligera (no invasiva) */
.jx-heart{ display:flex; gap:8px; margin-bottom:11px; }
.jx-heart .hb{ flex:1; display:flex; flex-direction:column; gap:3px; padding:9px 12px; border-radius:11px;
  background:var(--surface-inset); }
.jx-heart .hb .n{ font-family:var(--font-head); font-size:20px; font-weight:600; letter-spacing:-.03em; line-height:1; }
.jx-heart .hb .k{ font-size:10.5px; font-weight:600; color:var(--text-3); display:flex; align-items:center; gap:6px; }
.jx-heart .hb .k .led{ width:7px; height:7px; border-radius:50%; }
.jx-heart .hb.run .k .led{ background:var(--jx); animation:pulse 1.4s ease-in-out infinite } .jx-heart .hb.run .n{ color:var(--jx-ink) }
.jx-heart .hb.ok .k .led{ background:var(--ok) } .jx-heart .hb.idle .k .led{ background:var(--idle) }
.jx-reads{ display:flex; flex-direction:column; gap:0; }
.jx-read{ display:flex; align-items:center; gap:11px; padding:8px 2px; border-top:1px solid var(--border); font-size:13px; color:var(--text); }
.jx-read:first-child{ border-top:0; }
.jx-read .rl{ width:8px; height:8px; border-radius:50%; flex:0 0 8px; }
.jx-read .rl.ok{ background:var(--ok) } .jx-read .rl.run{ background:var(--jx) } .jx-read .rl.idle{ background:var(--idle) }

/* metric spotlight */
.jx-metric{ display:grid; grid-template-columns:auto 1fr; gap:6px 20px; align-items:center; }
.jx-metric .mv{ font-family:var(--font-head); font-size:46px; font-weight:600; letter-spacing:-.035em; line-height:.95;
  font-variant-numeric:tabular-nums; display:flex; align-items:baseline; gap:5px; }
.jx-metric .mv small{ font-size:.4em; font-weight:500; color:var(--text-3) }
.jx-metric .mspark{ width:100%; height:54px; grid-column:2; grid-row:1 / span 2; align-self:center; }
.jx-metric .mspark path.area{ fill:var(--jx-soft) } .jx-metric .mspark path.line{ fill:none; stroke:var(--jx); stroke-width:2.4; stroke-linecap:round }
.jx-metric .mfoot{ grid-column:1; display:flex; align-items:center; gap:9px; }
.jx-metric .read{ grid-column:1 / -1; margin-top:13px; padding-top:13px; border-top:1px solid var(--border);
  display:flex; gap:9px; font-size:13px; line-height:1.5; color:var(--text-2); text-wrap:pretty; }
.jx-metric .read svg{ width:16px; height:16px; flex:0 0 16px; color:var(--jx-ink); margin-top:2px; }
.jx-metric .read b{ color:var(--text); font-weight:600; }

/* attention list */
.jx-attn{ display:flex; flex-direction:column; gap:0; }
.jx-attn-row{ display:flex; align-items:center; gap:12px; padding:11px 2px; border-top:1px solid var(--border); }
.jx-attn-row:first-child{ border-top:0 }
.jx-attn-row .sev{ width:9px; height:9px; border-radius:50%; flex:0 0 9px; }
.jx-attn-row .sev.now{ background:var(--warn); box-shadow:0 0 0 4px var(--warn-soft) }
.jx-attn-row .sev.soon{ background:var(--jx); box-shadow:0 0 0 4px var(--jx-soft) }
.jx-attn-row .at{ flex:1; min-width:0 }
.jx-attn-row .at .t{ font-size:13.5px; font-weight:500; color:var(--text); }
.jx-attn-row .at .m{ font-size:11.5px; color:var(--text-3); margin-top:1px }

/* approvals */
.jx-appr{ display:flex; flex-direction:column; gap:9px; }
.jx-appr-row{ display:flex; align-items:center; gap:12px; padding:11px 12px; border-radius:13px;
  background:var(--surface-inset); border:1px solid transparent; transition:.18s; }
.jx-appr-row.done{ background:var(--ok-soft); border-color:color-mix(in srgb,var(--ok) 26%,transparent) }
.jx-appr-row .ic{ width:36px; height:36px; flex:0 0 36px; border-radius:11px; display:flex; align-items:center; justify-content:center;
  background:var(--surface); color:var(--jx-ink); border:1px solid var(--border); }
[data-theme="dark"] .jx-appr-row .ic{ background:var(--surface-2) }
.jx-appr-row .ic svg{ width:18px; height:18px }
.jx-appr-row .ab{ flex:1; min-width:0 }
.jx-appr-row .ab .who{ font-size:10.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--text-3) }
.jx-appr-row .ab .t{ font-size:13px; font-weight:600; color:var(--text); margin-top:1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.jx-appr-row .ab .m{ font-size:11.5px; color:var(--text-3); margin-top:1px }
.jx-appr-row .acts{ display:flex; gap:7px; flex:0 0 auto }
.jx-mini{ height:32px; padding:0 13px; border-radius:9px; border:1px solid var(--border-2); background:var(--surface);
  color:var(--text-2); font:700 12px var(--font-body); cursor:pointer; transition:.15s; display:inline-flex; align-items:center; gap:6px; white-space:nowrap }
.jx-mini:hover{ color:var(--text); border-color:var(--text-3) }
.jx-mini.go{ background:var(--jx); color:#fff; border-color:var(--jx) }
[data-theme="dark"] .jx-mini.go{ color:#0a0c12 }
.jx-mini.go:hover{ opacity:.88 }
.jx-mini svg{ width:13px; height:13px; stroke-width:2.4 }
.jx-appr-row .doneflag{ display:inline-flex; align-items:center; gap:6px; color:var(--ok); font-size:12px; font-weight:700 }
.jx-appr-row .doneflag svg{ width:14px; height:14px; stroke-width:3 }

/* agent order control */
.jx-order .oh{ display:flex; align-items:center; gap:12px; margin-bottom:13px }
.jx-order .oh .oic{ width:40px; height:40px; flex:0 0 40px; border-radius:12px; display:flex; align-items:center; justify-content:center;
  background:var(--jx-soft); color:var(--jx-ink) }
.jx-order .oh .oic svg{ width:20px; height:20px }
.jx-order .oh .on{ font-family:var(--font-head); font-size:15px; font-weight:600; letter-spacing:-.01em }
.jx-order .oh .or{ font-size:11.5px; color:var(--text-3); margin-top:1px }
.jx-order .oh .ost{ margin-left:auto }
.jx-order .obar{ height:4px; border-radius:999px; background:var(--track); overflow:hidden; position:relative; margin-bottom:11px }
.jx-order .obar i{ position:absolute; inset:0; width:36%; border-radius:999px; background:var(--jx); animation:slide 1.7s cubic-bezier(.4,0,.2,1) infinite }
.jx-order.paused .obar i{ animation:none; width:48%; background:var(--idle); opacity:.6 }
.jx-order .ometric{ font-size:12px; color:var(--text-2); font-weight:600; margin-bottom:13px }
.jx-order .octrl{ display:flex; gap:8px }
.jx-order .octrl .jx-mini{ flex:1; justify-content:center; height:38px }
.jx-order .octrl .jx-mini.active{ background:var(--jx-soft); border-color:var(--jx-line); color:var(--jx-ink) }

/* ===== chips + composer ===== */
.jx-foot{ position:relative; z-index:2; width:100%; max-width:660px; margin-top:auto; padding-top:20px; }
.jx-chips{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-bottom:12px }
.jx-chip{ height:34px; padding:0 14px; border-radius:999px; border:1px solid var(--border-2); background:var(--surface);
  color:var(--text-2); font:600 12.5px var(--font-body); cursor:pointer; transition:.15s; display:inline-flex; align-items:center; gap:7px }
.jx-chip:hover{ color:var(--jx-ink); border-color:var(--jx-line); background:var(--jx-soft) }
.jx-chip svg{ width:14px; height:14px }
.jx-composer{ display:flex; align-items:center; gap:9px; background:var(--surface);
  border:1px solid var(--border-2); border-radius:15px; padding:7px 7px 7px 8px; box-shadow:var(--shadow-sm);
  transition:border-color .15s, box-shadow .15s }
[data-theme="dark"] .jx-composer{ background:var(--surface-2) }
.jx-composer:focus-within{ border-color:var(--jx-line); box-shadow:0 0 0 3px var(--jx-soft) }
.jx-mic{ width:40px; height:40px; flex:0 0 40px; border-radius:11px; border:0; cursor:pointer;
  display:flex; align-items:center; justify-content:center; background:var(--surface-inset); color:var(--text-2); transition:.15s }
.jx-mic:hover{ color:var(--jx-ink) }
.jx-mic.live{ background:var(--jx); color:#fff }
[data-theme="dark"] .jx-mic.live{ color:#0a0c12 }
.jx-mic.live{ box-shadow:0 0 0 0 var(--jx-glow); animation:jxmic 1.4s ease-out infinite }
@keyframes jxmic{ 0%{ box-shadow:0 0 0 0 var(--jx-glow) } 70%{ box-shadow:0 0 0 12px transparent } 100%{ box-shadow:0 0 0 0 transparent } }
.jx-mic svg{ width:19px; height:19px }
.jx-composer input{ flex:1; border:0; background:transparent; outline:0; color:var(--text); font:500 14px var(--font-body); padding:0 4px }
.jx-composer input::placeholder{ color:var(--text-3) }
.jx-send{ width:40px; height:40px; flex:0 0 40px; border-radius:11px; border:0; cursor:pointer;
  display:flex; align-items:center; justify-content:center; background:var(--jx); color:#fff; transition:.15s }
[data-theme="dark"] .jx-send{ color:#0a0c12 }
.jx-send:hover:not(:disabled){ opacity:.88 } .jx-send:disabled{ opacity:.4; cursor:default }
.jx-send svg{ width:18px; height:18px }

/* ===== RIGHT RAIL (desplegable) ===== */
.jx-rail{ flex:0 0 386px; margin-left:var(--gap); min-width:0; min-height:0; overflow:hidden;
  transition:flex-basis .42s cubic-bezier(.4,0,.1,1), margin-left .42s cubic-bezier(.4,0,.1,1), opacity .3s ease; }
.jx-rail.col{ flex-basis:0; margin-left:0; opacity:0; pointer-events:none; }
.jx-rail-inner{ width:386px; height:100%; display:flex; flex-direction:column; min-height:0;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-xl); box-shadow:var(--shadow-sm); overflow:hidden; }
.jx-rail-tabs{ display:flex; align-items:center; gap:4px; padding:11px 10px 0; }
.jx-rail-tabs button.tab{ flex:1; height:40px; border:0; background:transparent; color:var(--text-2);
  font:700 13px var(--font-body); border-radius:11px 11px 0 0; cursor:pointer; transition:.15s; position:relative;
  display:inline-flex; align-items:center; justify-content:center; gap:7px }
.jx-rail-tabs button.tab svg{ width:15px; height:15px }
.jx-rail-tabs button.tab:hover{ color:var(--text) }
.jx-rail-tabs button.tab.on{ color:var(--jx-ink) }
.jx-rail-tabs button.tab.on::after{ content:""; position:absolute; left:14px; right:14px; bottom:0; height:2.5px;
  border-radius:2px; background:var(--jx) }
.jx-rail-collapse{ width:34px; height:34px; flex:0 0 34px; border:0; background:transparent; color:var(--text-3);
  border-radius:9px; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:.15s; margin-bottom:4px }
.jx-rail-collapse:hover{ background:var(--surface-inset); color:var(--text) }
.jx-rail-collapse svg{ width:18px; height:18px }
/* launcher when collapsed */
.jx-rail-open{ position:absolute; top:0; right:0; z-index:6; display:inline-flex; align-items:center; gap:9px;
  height:42px; padding:0 16px; border-radius:13px; border:1px solid var(--border); background:var(--surface);
  color:var(--text-2); font:700 12.5px var(--font-body); cursor:pointer; box-shadow:var(--shadow-md); transition:.16s;
  animation:jxrise .35s cubic-bezier(.2,.8,.2,1) both }
.jx-rail-open:hover{ color:var(--jx-ink); border-color:var(--jx-line) }
.jx-rail-open svg{ width:16px; height:16px }
.jx-rail-body{ flex:1; overflow-y:auto; padding:14px 14px 16px; border-top:1px solid var(--border); }
.jx-rail-cap{ font-size:11.5px; color:var(--text-3); font-weight:600; padding:2px 4px 12px; line-height:1.5; text-wrap:pretty }

/* reports */
.jx-report{ display:grid; grid-template-columns:38px 1fr auto; gap:12px; align-items:center;
  padding:13px 12px; border-radius:13px; cursor:pointer; transition:.15s; border:1px solid transparent }
.jx-report:hover{ background:var(--surface-inset); border-color:var(--border) }
.jx-report .ic{ width:38px; height:38px; border-radius:11px; display:flex; align-items:center; justify-content:center;
  background:var(--jx-soft); color:var(--jx-ink) }
.jx-report .ic svg{ width:18px; height:18px }
.jx-report .rb{ min-width:0 }
.jx-report .rb .rt{ font-size:13.5px; font-weight:600; letter-spacing:-.01em; color:var(--text); line-height:1.25; text-wrap:pretty }
.jx-report .rb .rs{ font-size:11.5px; color:var(--text-3); margin-top:3px; line-height:1.4; text-wrap:pretty }
.jx-report .rb .rmeta{ display:flex; align-items:center; gap:8px; margin-top:7px }
.jx-report .rb .rtag{ font-size:10px; font-weight:700; letter-spacing:.03em; text-transform:uppercase; color:var(--jx-ink);
  background:var(--jx-soft); padding:3px 8px; border-radius:999px }
.jx-report .rb .rwhen{ font-size:11px; color:var(--text-3); font-weight:600 }
.jx-report .rspark{ width:60px; height:30px; align-self:center }
.jx-report .rspark path.line{ fill:none; stroke:var(--jx); stroke-width:2; stroke-linecap:round; opacity:.85 }
.jx-rail-body .sep{ height:1px; background:var(--border); margin:5px 12px }

/* dailies */
.jx-daily{ border:1px solid var(--border); border-radius:14px; padding:14px 15px; margin-bottom:11px; transition:.18s }
.jx-daily.today{ border-color:var(--jx-line); background:var(--jx-soft) }
.jx-daily .dh{ display:flex; align-items:baseline; gap:8px; margin-bottom:8px }
.jx-daily .dh .dd{ font-family:var(--font-head); font-size:14px; font-weight:600; letter-spacing:-.01em }
.jx-daily.today .dh .dd{ color:var(--jx-ink) }
.jx-daily .dh .dn{ font-size:11px; color:var(--text-3); font-weight:600 }
.jx-daily .dh .dtag{ margin-left:auto; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.04em;
  color:var(--jx-ink); background:var(--surface); padding:3px 8px; border-radius:999px; border:1px solid var(--jx-line) }
.jx-daily .dhead{ font-size:13.5px; font-weight:600; color:var(--text); line-height:1.35; text-wrap:pretty; margin-bottom:3px }
.jx-daily .dmini{ font-size:12px; color:var(--text-3); font-weight:500; line-height:1.4 }
.jx-daily .dbul{ display:flex; flex-direction:column; gap:0; margin-top:8px }
.jx-daily .db{ display:flex; align-items:flex-start; gap:10px; padding:8px 0; border-top:1px solid color-mix(in srgb,var(--jx) 14%,transparent) }
.jx-daily .db .led{ width:7px; height:7px; border-radius:50%; flex:0 0 7px; margin-top:5px }
.jx-daily .db .led.ok{ background:var(--ok) } .jx-daily .db .led.warn{ background:var(--warn) } .jx-daily .db .led.run{ background:var(--jx) }
.jx-daily .db .bt{ font-size:12.5px; font-weight:600; color:var(--text); line-height:1.3 }
.jx-daily .db .bm{ font-size:11px; color:var(--text-3); margin-top:1px }
.jx-daily .dread{ display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:600; color:var(--jx-ink); margin-top:10px }
.jx-daily .dread svg{ width:13px; height:13px }

@media (prefers-reduced-motion:reduce){
  .jx-ring.r2,.jx-wave i,.jx-status .led,.jx-mic.live{ animation:none !important }
}