/* StayLiquid · VORTEX AI · cabecera de mando + red de agentes (v90)
   Usa los tokens del sistema (negro + verde eléctrico por defecto) para combinar con cualquier tema.
   Colores de estado SEMÁNTICOS: verde = activo/ok, cian = trabajando, ámbar = pausa/pendiente, rojo = riesgo/parada, gris = inactivo. */
.vxc {
  --vxc-cyan: #35E0FF;
  --vxc-pane: color-mix(in srgb, var(--surface, #080A0C) 82%, #000);
  margin: 0 0 18px; border: 1px solid var(--line2, rgba(255, 255, 255, .11)); border-radius: 16px;
  background:
    radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--acc, #2EE59D) 7%, transparent), transparent 55%),
    linear-gradient(180deg, var(--surface-2, #0D1013), var(--vxc-pane));
  overflow: hidden; position: relative; isolation: isolate;
}
.vxc::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .5; pointer-events: none;
  background-image: linear-gradient(var(--line, rgba(255, 255, 255, .065)) 1px, transparent 1px), linear-gradient(90deg, var(--line, rgba(255, 255, 255, .065)) 1px, transparent 1px);
  background-size: 34px 34px; mask-image: radial-gradient(120% 120% at 50% -10%, #000, transparent 75%); }

/* ── barra superior ── */
.vxc-bar { display: flex; align-items: center; gap: 14px 18px; flex-wrap: wrap; padding: 14px 16px; border-bottom: 1px solid var(--line, rgba(255, 255, 255, .065)); }
.vxc-brand { display: flex; align-items: center; gap: 10px; }
.vxc-logo { width: 26px; height: 26px; border-radius: 7px; background: linear-gradient(140deg, var(--acc, #2EE59D), var(--vxc-cyan)); position: relative; flex: none; box-shadow: 0 0 0 1px color-mix(in srgb, var(--acc, #2EE59D) 40%, transparent), 0 6px 16px -8px var(--acc, #2EE59D); }
.vxc-logo::after { content: ""; position: absolute; inset: 7px; border-radius: 3px; background: var(--vxc-pane); }
.vxc-brand b { font: 700 15px/1 "Geist", system-ui, sans-serif; letter-spacing: .14em; color: var(--ink, #E4E7EA); }
.vxc-brand small { display: block; margin-top: 3px; font: 500 10.5px/1 "Geist Mono", ui-monospace, monospace; letter-spacing: .04em; color: var(--dim, #80878E); text-transform: uppercase; }
.vxc-sim { color: var(--warn, #F2B544); font-weight: 600; cursor: help; }

.vxc-conn { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 999px; border: 1px solid var(--line2, rgba(255, 255, 255, .11)); background: color-mix(in srgb, #000 30%, transparent); }
.vxc-conn b { font: 700 11px/1 "Geist Mono", monospace; letter-spacing: .1em; }
.vxc-age { font: 500 10.5px/1 "Geist Mono", monospace; color: var(--dim, #80878E); }
.vxc-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--dim, #80878E); flex: none; }
.vxc-conn[data-s="live"] b { color: var(--acc, #2EE59D); } .vxc-conn[data-s="live"] .vxc-dot { background: var(--acc, #2EE59D); box-shadow: 0 0 0 0 color-mix(in srgb, var(--acc, #2EE59D) 70%, transparent); animation: vxc-beat 1.9s ease-out infinite; }
.vxc-conn[data-s="connecting"] b { color: var(--vxc-cyan); } .vxc-conn[data-s="connecting"] .vxc-dot { background: var(--vxc-cyan); animation: vxc-blink 1s steps(2) infinite; }
.vxc-conn[data-s="degraded"] b { color: var(--warn, #F2B544); } .vxc-conn[data-s="degraded"] .vxc-dot { background: var(--warn, #F2B544); animation: vxc-blink 1.4s steps(2) infinite; }
.vxc-conn[data-s="offline"] b { color: var(--loss, #FF4D5E); } .vxc-conn[data-s="offline"] .vxc-dot { background: var(--loss, #FF4D5E); }

.vxc-stats { display: flex; gap: 8px; flex: 1 1 auto; flex-wrap: wrap; min-width: 0; }
.vxc-chip { flex: 1 1 128px; min-width: 112px; padding: 8px 11px; border-radius: 11px; border: 1px solid var(--line, rgba(255, 255, 255, .065)); background: color-mix(in srgb, #000 24%, transparent); }
.vxc-chip small { display: block; font: 600 9.5px/1 "Geist Mono", monospace; letter-spacing: .09em; text-transform: uppercase; color: var(--dim, #80878E); }
.vxc-chip b { display: block; margin-top: 4px; font: 700 16px/1.05 "Geist", system-ui, sans-serif; color: var(--ink, #E4E7EA); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vxc-chip b i { font-style: normal; font-size: 12px; color: var(--dim, #80878E); }
.vxc-chip span { display: block; margin-top: 3px; font: 500 10px/1.2 "Geist Mono", monospace; color: var(--soft, #A3AAB1); }
.vxc-chip.warn { border-color: color-mix(in srgb, var(--warn, #F2B544) 45%, transparent); }
.vxc-chip.warn b { color: var(--warn, #F2B544); }

.vxc-stop { flex: none; }
.vxc-btn { font: 700 11px/1 "Geist Mono", monospace; letter-spacing: .08em; text-transform: uppercase; padding: 10px 14px; border-radius: 10px; cursor: pointer; border: 1px solid; background: transparent; transition: background .15s, transform .1s; }
.vxc-btn:active { transform: translateY(1px); }
.vxc-btn.danger { color: var(--loss, #FF4D5E); border-color: color-mix(in srgb, var(--loss, #FF4D5E) 55%, transparent); }
.vxc-btn.danger:hover { background: color-mix(in srgb, var(--loss, #FF4D5E) 14%, transparent); }
.vxc-btn.ok { color: var(--acc, #2EE59D); border-color: color-mix(in srgb, var(--acc, #2EE59D) 55%, transparent); }
.vxc-btn.ok:hover { background: color-mix(in srgb, var(--acc, #2EE59D) 14%, transparent); }
.vxc-btn[disabled] { opacity: .55; cursor: default; }

.vxc-halt { padding: 9px 16px; font: 500 12px/1.4 "Geist", system-ui, sans-serif; color: var(--soft, #A3AAB1); border-bottom: 1px solid var(--line, rgba(255, 255, 255, .065)); }
.vxc-halt b { color: var(--ink, #E4E7EA); }
.vxc-halt[data-k="halt"] { background: color-mix(in srgb, var(--loss, #FF4D5E) 10%, transparent); } .vxc-halt[data-k="halt"] b { color: var(--loss, #FF4D5E); }
.vxc-halt[data-k="stale"] { background: color-mix(in srgb, var(--warn, #F2B544) 9%, transparent); } .vxc-halt[data-k="stale"] b { color: var(--warn, #F2B544); }

/* ── red de agentes ── */
.vxc-netwrap { padding: 14px 16px 16px; }
.vxc-nethead h3 { margin: 0; font: 700 13px/1.1 "Geist", system-ui, sans-serif; letter-spacing: .02em; color: var(--ink, #E4E7EA); }
.vxc-nethead p { margin: 4px 0 10px; font: 400 11.5px/1.4 "Geist", system-ui, sans-serif; color: var(--dim, #80878E); max-width: 68ch; }
.vxc-netscroll { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; }
.vxc-net { min-width: 640px; }
.vxc-svg { width: 100%; height: auto; display: block; }

.vxc-edge { stroke: var(--line2, rgba(255, 255, 255, .11)); stroke-width: 2; }
.vxc-edge.is-flow { stroke: var(--acc, #2EE59D); filter: drop-shadow(0 0 3px color-mix(in srgb, var(--acc, #2EE59D) 70%, transparent)); transition: stroke .2s; }
.vxc-flux { fill: var(--acc, #2EE59D); filter: drop-shadow(0 0 4px var(--acc, #2EE59D)); }
.vxc-node { cursor: pointer; outline: none; }
.vxc-node .vxc-core { fill: var(--surface-3, #12161A); stroke: var(--line3, rgba(255, 255, 255, .18)); stroke-width: 1.5; transition: fill .25s, stroke .25s; }
.vxc-node .vxc-ring { fill: none; stroke: transparent; stroke-width: 2; }
.vxc-node .vxc-nic { fill: var(--soft, #A3AAB1); font: 700 15px "Geist Mono", monospace; }
.vxc-node .vxc-ntitle { fill: var(--soft, #A3AAB1); font: 600 12px "Geist", system-ui, sans-serif; }
.vxc-node .vxc-nbadge { fill: transparent; font: 700 8.5px "Geist Mono", monospace; letter-spacing: .08em; }
.vxc-node .vxc-nbadge.on { }
.vxc-node:focus-visible .vxc-ring, .vxc-node.on .vxc-ring { stroke: var(--vxc-cyan); }

.vxc-node.is-idle .vxc-core { fill: var(--surface-3, #12161A); stroke: var(--line2, rgba(255, 255, 255, .11)); }
.vxc-node.is-live .vxc-core { fill: color-mix(in srgb, var(--acc, #2EE59D) 20%, var(--surface-3, #12161A)); stroke: var(--acc, #2EE59D); }
.vxc-node.is-live .vxc-nic, .vxc-node.is-live .vxc-ntitle { fill: var(--acc, #2EE59D); }
.vxc-node.is-live .vxc-ring { stroke: color-mix(in srgb, var(--acc, #2EE59D) 55%, transparent); animation: vxc-pulse 2s ease-out infinite; }
.vxc-node.is-work .vxc-core { fill: color-mix(in srgb, var(--vxc-cyan) 18%, var(--surface-3, #12161A)); stroke: var(--vxc-cyan); }
.vxc-node.is-work .vxc-nic, .vxc-node.is-work .vxc-ntitle { fill: var(--vxc-cyan); }
.vxc-node.is-risk .vxc-core { fill: color-mix(in srgb, var(--warn, #F2B544) 18%, var(--surface-3, #12161A)); stroke: var(--warn, #F2B544); }
.vxc-node.is-risk .vxc-nic, .vxc-node.is-risk .vxc-ntitle, .vxc-node.is-risk .vxc-nbadge.on { fill: var(--warn, #F2B544); }
.vxc-node.is-halt .vxc-core { fill: color-mix(in srgb, var(--loss, #FF4D5E) 20%, var(--surface-3, #12161A)); stroke: var(--loss, #FF4D5E); }
.vxc-node.is-halt .vxc-nic, .vxc-node.is-halt .vxc-ntitle, .vxc-node.is-halt .vxc-nbadge.on { fill: var(--loss, #FF4D5E); }
.vxc-node.ping .vxc-ring { stroke: var(--vxc-cyan); animation: vxc-ping .9s ease-out 1; }

/* ── inspector del agente ── */
.vxc-inspect { margin-top: 12px; border: 1px solid var(--line2, rgba(255, 255, 255, .11)); border-radius: 12px; background: color-mix(in srgb, #000 22%, transparent); padding: 13px 14px; }
.vxc-ihead { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.vxc-ihead b { font: 700 14px "Geist", system-ui, sans-serif; color: var(--ink, #E4E7EA); }
.vxc-ist { font: 700 9.5px/1 "Geist Mono", monospace; letter-spacing: .08em; text-transform: uppercase; padding: 3px 7px; border-radius: 6px; border: 1px solid var(--line2, rgba(255, 255, 255, .11)); color: var(--soft, #A3AAB1); }
.vxc-ist.is-live { color: var(--acc, #2EE59D); border-color: color-mix(in srgb, var(--acc, #2EE59D) 45%, transparent); }
.vxc-ist.is-work { color: var(--vxc-cyan); border-color: color-mix(in srgb, var(--vxc-cyan) 45%, transparent); }
.vxc-ist.is-risk { color: var(--warn, #F2B544); border-color: color-mix(in srgb, var(--warn, #F2B544) 45%, transparent); }
.vxc-ist.is-halt { color: var(--loss, #FF4D5E); border-color: color-mix(in srgb, var(--loss, #FF4D5E) 45%, transparent); }
.vxc-ix { background: none; border: none; color: var(--dim, #80878E); font-size: 20px; line-height: 1; cursor: pointer; padding: 0 4px; }
.vxc-ix:hover { color: var(--ink, #E4E7EA); }
.vxc-idesc { margin: 8px 0 10px; font: 400 12px/1.5 "Geist", system-ui, sans-serif; color: var(--soft, #A3AAB1); }
.vxc-ilast { margin: 0 0 10px; font: 500 12px/1.4 "Geist Mono", monospace; color: var(--ink, #E4E7EA); }
.vxc-ilast small { color: var(--dim, #80878E); text-transform: uppercase; font-size: 9.5px; letter-spacing: .08em; margin-right: 6px; }
.vxc-ilast span { color: var(--dim, #80878E); }
.vxc-ags { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 6px; }
.vxc-ags li { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; padding: 7px 10px; border-radius: 8px; background: color-mix(in srgb, #000 24%, transparent); border: 1px solid var(--line, rgba(255, 255, 255, .065)); }
.vxc-ak { font: 700 11px "Geist Mono", monospace; letter-spacing: .06em; color: var(--ink, #E4E7EA); min-width: 46px; }
.vxc-ar { font: 400 11.5px "Geist", system-ui, sans-serif; color: var(--soft, #A3AAB1); flex: 1 1 auto; }
.vxc-am { font: 500 10.5px "Geist Mono", monospace; color: var(--dim, #80878E); }
.vxc-inote { margin: 0; font: 400 10.5px/1.4 "Geist", system-ui, sans-serif; color: var(--dim, #80878E); }

@keyframes vxc-beat { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--acc, #2EE59D) 70%, transparent); } 70%, 100% { box-shadow: 0 0 0 7px transparent; } }
@keyframes vxc-blink { 50% { opacity: .3; } }
@keyframes vxc-pulse { 0% { stroke-opacity: .55; r: 30px; } 100% { stroke-opacity: 0; r: 36px; } }
@keyframes vxc-ping { 0% { stroke-opacity: .9; r: 26px; } 100% { stroke-opacity: 0; r: 40px; } }

@media (max-width: 640px) {
  .vxc-bar { padding: 12px; gap: 10px 12px; }
  .vxc-stats { order: 3; flex-basis: 100%; }
  .vxc-chip { flex: 1 1 44%; }
  .vxc-stop { order: 2; }
}
@media (prefers-reduced-motion: reduce) {
  .vxc-conn .vxc-dot, .vxc-node .vxc-ring, .vxc-node.ping .vxc-ring { animation: none !important; }
  .vxc-edge.is-flow { transition: none; }
}