/* ============================================================
   Wero MX — devstudio.css
   Estilos propios del modulo Dev Studio (V1 + V2). Scopeados a .px-skin para heredar los tokens
   del tema (dark/light). NUNCA color hex crudo: todo via variables CSS del .px-skin
   (--primary/--bg-card/--text-primary/--border-color/--success/--warning/--danger/--info/
   --accent-indigo/--accent-purple). Cero dependencias externas. Cargado en index.html con ?v=.
   ============================================================ */

/* ---- Tokens locales del modulo (heredan del tema; centralizados aqui una sola vez) ---------
   Texto sobre color saturado (badges de fase/grafo) y la consola en vivo son de alto contraste
   por diseño de producto; se expresan con rgb()/variables del tema (sin hex crudo) y pueden
   sobreescribirse desde el skin (--xy-*) para adaptarse a dark/light. */
.px-skin {
    --ds-on-accent: var(--xy-text-on-accent, rgb(255 255 255));
    --ds-term-bg: var(--xy-bg-console, rgb(11 14 20));
    --ds-term-fg: var(--xy-console-fg, rgb(205 214 228));
}

/* ---- Rejilla de tarjetas de sesion --------------------------------------------------------- */
.px-skin .ds-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1rem; }
.px-skin .ds-card {
    background: var(--bg-card); border: 1px solid var(--border-color); border-left: 4px solid var(--primary);
    border-radius: var(--radius-lg); padding: 1rem 1.1rem; cursor: pointer; transition: all .18s ease;
}
.px-skin .ds-card:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,.14); border-left-color: var(--primary-light); }
.px-skin .ds-card.is-run { border-left-color: var(--primary); }
.px-skin .ds-card.is-ok { border-left-color: var(--success); }
.px-skin .ds-card.is-warn { border-left-color: var(--warning); }
.px-skin .ds-card.is-err { border-left-color: var(--danger); }
.px-skin .ds-card.is-v2 { border-left-color: var(--accent-purple); }
.px-skin .ds-card h5 { color: var(--text-primary); font-size: 1rem; font-weight: 700; margin: 0 0 .1rem; }
.px-skin .ds-card .ds-cli { color: var(--text-muted); font-size: .82rem; }
.px-skin .ds-metrics { display: flex; flex-wrap: wrap; gap: .35rem .9rem; margin-top: .6rem; }
.px-skin .ds-metric { display: flex; align-items: center; gap: .3rem; color: var(--text-secondary); font-size: .82rem; }
.px-skin .ds-metric i { color: var(--primary); opacity: .85; }

/* ---- Cabecera del dashboard en vivo -------------------------------------------------------- */
.px-skin .ds-live-head { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.25rem; }
.px-skin .ds-stat { background: var(--bg-header); border: 1px solid var(--border-color); border-radius: var(--radius);
    padding: .55rem .8rem; min-width: 96px; }
.px-skin .ds-stat .lbl { color: var(--text-muted); font-size: .68rem; text-transform: uppercase; letter-spacing: .05em; }
.px-skin .ds-stat .val { color: var(--text-primary); font-size: 1.18rem; font-weight: 700; line-height: 1.1; }
.px-skin .ds-stat i { color: var(--primary); }

/* ---- Barra de pipeline de fases ------------------------------------------------------------ */
.px-skin .ds-pipe { display: flex; align-items: stretch; gap: 0; overflow-x: auto; padding: .25rem 0; }
.px-skin .ds-phase { flex: 1 0 auto; min-width: 90px; text-align: center; position: relative; padding: .5rem .4rem; }
.px-skin .ds-phase:not(:last-child)::after { content: ""; position: absolute; top: 20px; right: -1px; width: 100%; height: 2px;
    background: var(--border-color); z-index: 0; }
.px-skin .ds-phase .dot { position: relative; z-index: 1; width: 30px; height: 30px; border-radius: 50%;
    display: inline-grid; place-items: center; background: var(--bg-header); border: 2px solid var(--border-color);
    color: var(--text-muted); margin-bottom: .3rem; }
.px-skin .ds-phase.is-done .dot { background: var(--success); border-color: var(--success); color: var(--ds-on-accent); }
.px-skin .ds-phase.is-done::after { background: var(--success); }
.px-skin .ds-phase.is-active .dot { background: var(--primary); border-color: var(--primary); color: var(--ds-on-accent);
    box-shadow: 0 0 0 4px var(--primary-soft); }
.px-skin .ds-phase.is-fail .dot { background: var(--danger); border-color: var(--danger); color: var(--ds-on-accent); }
.px-skin .ds-phase .nm { font-size: .72rem; color: var(--text-secondary); }

/* ---- Layout central + sidebar del dashboard ------------------------------------------------ */
.px-skin .ds-cockpit { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 1rem; align-items: start; }
@media (max-width: 1100px) { .px-skin .ds-cockpit { grid-template-columns: 1fr; } }
.px-skin .ds-tabbar { display: flex; gap: .25rem; flex-wrap: wrap; border-bottom: 1px solid var(--border-color); margin-bottom: .75rem; }
.px-skin .ds-tabbar button { background: transparent; border: none; border-bottom: 2px solid transparent; color: var(--text-muted);
    padding: .45rem .8rem; font-weight: 500; font-size: .88rem; cursor: pointer; }
.px-skin .ds-tabbar button.is-active { color: var(--primary); border-bottom-color: var(--primary); }

/* ---- Oficina virtual (SVG legacy) ---------------------------------------------------------- */
.px-skin .ds-office { width: 100%; background: var(--bg-header); border: 1px solid var(--border-color);
    border-radius: var(--radius-lg); overflow: hidden; }
.px-skin .ds-office svg { display: block; width: 100%; height: auto; }

/* ---- Oficina virtual (motor Phaser + overlay HTML de directivos, Dev Studio) --------------- */
/* La oficina LLENA su contenedor por flex (sin height:100% en cadena, que se rompe dentro de flex). */
.px-skin .ds-office3 { position: relative; width: 100%; flex: 1 1 auto; min-height: 0;
    display: flex; flex-direction: column; background: var(--bg-body);
    border: 1px solid var(--border-color); border-radius: var(--radius-lg); overflow: hidden; }

/* SALA DE LIDERAZGO: overlay HTML con el SVG REAL (nativo del navegador) de cada directivo. */
.px-skin .ds-leaders-wrap { padding: .45rem .7rem .55rem; background: color-mix(in srgb, var(--primary) 7%, var(--bg-header));
    border-bottom: 1px solid var(--border-color); }
.px-skin .ds-leaders-label { font-size: .66rem; letter-spacing: 1.6px; font-weight: 700; color: var(--primary);
    opacity: .9; margin-bottom: .3rem; }
.px-skin .ds-leaders { display: flex; gap: .55rem; justify-content: center; flex-wrap: wrap; }
.px-skin .ds-leader-card { --accent: var(--primary); position: relative; display: flex; flex-direction: column;
    align-items: center; gap: 0; width: 136px; padding: .2rem .3rem .35rem; border-radius: 12px;
    background: var(--card-bg, var(--bg-secondary)); border: 1px solid var(--border-color);
    border-top: 3px solid var(--accent); box-shadow: var(--shadow-sm, 0 1px 3px rgba(0,0,0,.2)); }
.px-skin .ds-leader-av { height: 118px; display: flex; align-items: flex-end; justify-content: center; }
.px-skin .ds-leader-av svg { height: 118px; width: auto; display: block; }
.px-skin .ds-leader-name { font-weight: 700; font-size: .82rem; color: var(--text-primary); line-height: 1.15; }
.px-skin .ds-leader-role { font-size: .66rem; color: var(--text-muted); line-height: 1.15; }
.px-skin .ds-leader-state { font-size: .62rem; color: var(--text-muted); display: inline-flex; align-items: center;
    gap: .3rem; margin-top: 1px; }
.px-skin .ds-leader-state .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--text-muted); flex: none; }
/* Estados: Trabajando (verde con pulso), Revisando (info), Espera (warning), Error (danger). */
.px-skin .ds-leader-card.is-working { border-top-color: var(--success); box-shadow: 0 0 0 1px color-mix(in srgb, var(--success) 45%, transparent); }
.px-skin .ds-leader-card.is-working .ds-leader-state { color: var(--success); }
.px-skin .ds-leader-card.is-working .ds-leader-state .dot { background: var(--success); animation: dsLeadPulse 1.6s ease-in-out infinite; }
.px-skin .ds-leader-card.is-review .ds-leader-state { color: var(--info, #38bdf8); }
.px-skin .ds-leader-card.is-review .ds-leader-state .dot { background: var(--info, #38bdf8); }
.px-skin .ds-leader-card.is-wait .ds-leader-state { color: var(--warning); }
.px-skin .ds-leader-card.is-wait .ds-leader-state .dot { background: var(--warning); }
.px-skin .ds-leader-card.is-error { border-top-color: var(--danger, #ef4444); }
.px-skin .ds-leader-card.is-error .ds-leader-state { color: var(--danger, #ef4444); }
.px-skin .ds-leader-card.is-error .ds-leader-state .dot { background: var(--danger, #ef4444); }
.px-skin .ds-leader-card.is-done .ds-leader-state { color: var(--success); }
.px-skin .ds-leader-card.is-absent { opacity: .5; filter: grayscale(.5); }
@keyframes dsLeadPulse { 0%,100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--success) 55%, transparent); } 50% { box-shadow: 0 0 0 4px transparent; } }
/* Animaciones del anime SVG full-body (viewBox 300x520, clases anime-char/px-eyes/px-mouth). CSS ORIGINAL
   VERBATIM de ProjeX (DevStudio.razor -> .rpg-sprite): sombra de profundidad + bob suave (pxIdle -2px, 3s
   fijo), parpadeo por OPACIDAD (pxBlink, velocidad via --bs del SVG) y micro-sonrisa (pxSmile). Este SVG
   DEPENDE de este CSS externo para verse bien; NO reinventar (antes: dsAnimeFloat/dsEyeBlink con scaleY que
   deformaba/aplastaba). */
.px-skin .ds-leader-av svg.anime-char {
    filter: drop-shadow(0 3px 10px rgba(0,0,0,0.3));
    animation: pxIdle 3s ease-in-out infinite;
    animation-delay: var(--idle-delay, 0s);
    shape-rendering: auto;
}
.px-skin .ds-leader-av .px-eyes { animation: pxBlink var(--bs, 4s) ease-in-out infinite; animation-delay: var(--bd, 0s); }
.px-skin .ds-leader-av .px-mouth { animation: pxSmile 6s ease-in-out infinite; animation-delay: var(--id, 1s); }
@keyframes pxBlink { 0%, 90%, 100% { opacity: 1; } 94%, 96% { opacity: 0; } }
@keyframes pxIdle { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2px); } }
@keyframes pxSmile { 0%, 85%, 100% { opacity: 1; } 90% { opacity: 0.7; } }

/* AREA DE DESARROLLO (Phaser): el contenedor mantiene el aspecto del mundo (1000x470) para que Scale.FIT llene
   sin distorsionar. NO forzar width/height:100% al <canvas> (aplastaba los avatares). */
/* El canvas Phaser LLENA todo el panel (Scale.RESIZE ajusta el mundo al contenedor; sin letterbox). */
.px-skin .ds-office3-canvas { flex: 1 1 auto; width: 100%; height: 100%; min-height: 0; position: relative; }
.px-skin .ds-office3-canvas canvas { display: block; width: 100%; height: 100%; }

/* =====================================================================================
   FILL de la SHELL de Dev Studio (V1 y V2): que el dashboard (oficina/consola/grafos) ocupe EXACTO el alto
   disponible de la ventana WebOS, SIN scroll ni hueco. La ventana (.xy-window-body) ya es flex:1 (alto
   definido); aqui hacemos que la cadena TabDocs (que por defecto es content-height) llene ese alto por flex.
   SCOPEADO a .ds-shell => NO afecta a los demas modulos que usan TabDocs. El .v2s deja de depender de
   calc(100vh) y encoge/llena por flex; el motor Phaser (Scale.RESIZE) reajusta la geometria al alto real.
   ===================================================================================== */
.px-skin.ds-shell { height: 100%; min-height: 0; display: flex; flex-direction: column; }
.ds-shell .tabdocs { flex: 1 1 auto; min-height: 0; }
.ds-shell .tabdocs-body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; overflow: auto; }
.ds-shell .tabdocs-pane.is-active { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.ds-shell .v2s:not(.v2s-fullscreen) { flex: 1 1 auto; min-height: 0; height: auto; }

/* Boton de pantalla completa (esquina superior derecha). */
.px-skin .ds-office3-fs { position: absolute; top: 10px; right: 10px; z-index: 3; width: 34px; height: 34px;
    display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; cursor: pointer;
    color: var(--text-primary); border: 1px solid var(--border-color);
    background: color-mix(in srgb, var(--bg-secondary) 82%, transparent); transition: background .15s, transform .1s; }
.px-skin .ds-office3-fs:hover { background: var(--primary); color: #fff; }
.px-skin .ds-office3-fs:active { transform: scale(.94); }

.px-skin .ds-office3-legend { position: absolute; left: 12px; bottom: 10px; z-index: 3; display: flex; flex-wrap: wrap;
    gap: .75rem; padding: .3rem .6rem; border-radius: 999px; background: color-mix(in srgb, var(--bg-secondary) 78%, transparent);
    border: 1px solid var(--border-color); font-size: .72rem; color: var(--text-muted); pointer-events: none; }
.px-skin .ds-office3-legend span { display: inline-flex; align-items: center; gap: .3rem; }

/* Pantalla completa: la oficina ocupa toda la pantalla; los directivos arriba + el canvas llena el resto. */
.px-skin.ds-office3:fullscreen,
.px-skin .ds-office3:fullscreen { width: 100vw; height: 100vh; border-radius: 0; border: none;
    display: flex; flex-direction: column; }
.ds-office3:fullscreen .ds-leaders-wrap { flex: 0 0 auto; }
.ds-office3:fullscreen .ds-office3-canvas { flex: 1 1 auto; width: 100%; height: auto; max-height: none; min-height: 0; aspect-ratio: auto; }
.ds-office3:fullscreen .ds-office3-canvas canvas { max-width: 100vw; max-height: 100%; }

/* ---- Grafos (SVG animado JS: llena el panel y CABE completo, sin cortarse abajo) ------------ */
.px-skin .ds-graph { width: 100%; min-height: 0; flex: 1 1 auto;
    /* Llena ~98% del area de trabajo (alto grande relativo al viewport) sin desbordar la pagina. */
    height: clamp(520px, 86vh, 1500px);
    display: flex; flex-direction: column;
    background: var(--bg-header); border: 1px solid var(--border-color);
    border-radius: var(--radius-lg); overflow: hidden; }
/* Contenedor interno del grafo JS: llena todo el .ds-graph. */
.px-skin .ds-graph > div { flex: 1 1 auto; min-height: 0; width: 100%; height: 100%; position: relative; }
/* El SVG llena el contenedor; viewBox = tamano exacto en px (lo fija el JS) -> nada se corta. */
.px-skin .ds-graph svg { display: block; width: 100%; height: 100%; }
/* En pantalla completa el grafo ocupa toda la altura disponible del panel. */
.px-skin .v2s-fullscreen .ds-graph,
.px-skin .ds-graph:fullscreen { height: 100%; }
.px-skin .ds-graph-modes { display: inline-flex; gap: .25rem; }
.px-skin .ds-graph-modes button { background: var(--bg-card); border: 1px solid var(--border-color); color: var(--text-secondary);
    border-radius: var(--radius); padding: .25rem .6rem; font-size: .8rem; cursor: pointer; }
.px-skin .ds-graph-modes button.is-active { background: var(--primary); border-color: var(--primary); color: var(--ds-on-accent); }

/* ---- Chat inter-agente --------------------------------------------------------------------- */
.px-skin .ds-chat { display: flex; flex-direction: column; gap: .5rem; max-height: 420px; overflow-y: auto; padding-right: .3rem; }
.px-skin .ds-msg { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius);
    padding: .45rem .6rem; }
.px-skin .ds-msg .who { font-weight: 700; font-size: .82rem; }
.px-skin .ds-msg .txt { color: var(--text-secondary); font-size: .85rem; white-space: pre-wrap; word-break: break-word; }
.px-skin .ds-msg .meta { color: var(--text-muted); font-size: .7rem; }

/* ---- Timeline ------------------------------------------------------------------------------ */
.px-skin .ds-timeline { position: relative; padding-left: 1rem; }
.px-skin .ds-timeline .ev { position: relative; padding: .3rem 0 .5rem .8rem; border-left: 2px solid var(--border-color); }
.px-skin .ds-timeline .ev::before { content: ""; position: absolute; left: -5px; top: .55rem; width: 8px; height: 8px;
    border-radius: 50%; background: var(--primary); }
.px-skin .ds-timeline .ev .d { color: var(--text-secondary); font-size: .84rem; }
.px-skin .ds-timeline .ev .t { color: var(--text-muted); font-size: .7rem; }

/* ---- Kanban del scope ---------------------------------------------------------------------- */
.px-skin .ds-kanban { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(160px, 1fr); gap: .6rem; overflow-x: auto; }
.px-skin .ds-kcol { background: var(--bg-header); border: 1px solid var(--border-color); border-radius: var(--radius); padding: .5rem; }
.px-skin .ds-kcol h6 { font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); margin: 0 0 .4rem; }
.px-skin .ds-ktask { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius);
    padding: .4rem .5rem; margin-bottom: .4rem; font-size: .82rem; color: var(--text-secondary); }

/* ---- Terminal en vivo ---------------------------------------------------------------------- */
.px-skin .ds-term { background: var(--ds-term-bg); color: var(--ds-term-fg); border-radius: var(--radius); padding: .6rem .7rem;
    font-family: ui-monospace, 'Cascadia Code', Consolas, monospace; font-size: .78rem; max-height: 260px; overflow-y: auto; }
.px-skin .ds-term .ln { white-space: pre-wrap; word-break: break-all; }

/* ---- Galeria del pool de agentes ----------------------------------------------------------- */
.px-skin .ds-pool { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1rem; }
.px-skin .ds-agent { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-lg);
    padding: 1rem; text-align: center; }
.px-skin .ds-agent.is-leader { border-color: var(--accent-purple); box-shadow: 0 0 0 1px var(--accent-purple) inset; }
.px-skin .ds-agent .ava { width: 84px; height: 84px; margin: 0 auto .5rem; border-radius: 50%; overflow: hidden;
    background: var(--bg-header); display: grid; place-items: center; }
.px-skin .ds-agent .ava svg, .px-skin .ds-agent .ava img { width: 100%; height: 100%; }
.px-skin .ds-agent .nm { font-weight: 700; color: var(--text-primary); }
.px-skin .ds-agent .rl { color: var(--text-muted); font-size: .8rem; }
.px-skin .ds-chips { display: flex; flex-wrap: wrap; gap: .25rem; justify-content: center; margin-top: .5rem; }
.px-skin .ds-chip { background: var(--primary-soft); color: var(--primary); border-radius: 99px; padding: .1rem .5rem; font-size: .72rem; }

/* ---- Avatar embebido (celda pequena) ------------------------------------------------------- */
.px-skin .ds-ava-sm { width: 34px; height: 34px; border-radius: 50%; overflow: hidden; background: var(--bg-header);
    display: inline-grid; place-items: center; flex: 0 0 auto; }
.px-skin .ds-ava-sm svg, .px-skin .ds-ava-sm img { width: 100%; height: 100%; }

/* ---- Panel del Agent Client ---------------------------------------------------------------- */
.px-skin .ds-agentcli { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-lg); padding: 1rem 1.1rem; }
.px-skin .ds-agentcli.on { border-color: var(--success); }
.px-skin .ds-agentcli.off { border-color: var(--warning); }
.px-skin .ds-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.px-skin .ds-dot.on { background: var(--success); box-shadow: 0 0 0 3px var(--success-soft); }
.px-skin .ds-dot.off { background: var(--warning); box-shadow: 0 0 0 3px var(--warning-soft); }

/* =====================================================================================
   DASHBOARD DE SESION (.v2s) — TEMA CLARO
   El markup .v2s (SesionDashboard.razor) trae acentos hex CLAROS (indigo/verde pastel)
   pensados para fondo oscuro; sobre las tarjetas blancas del tema claro quedarian ilegibles.
   Aqui, SOLO en tema claro (sin data-xy-theme=dark), se retintan a los acentos SATURADOS del
   skin (--primary/--success/--warning/--danger, que en claro son mas oscuros y legibles). El
   tema OSCURO conserva los hex claros originales del componente (no se tocan). Los fondos/bordes/
   textos base ya usan var(--bg-*/--text-*/--border-color) y adaptan solos.
   ===================================================================================== */
.xy-desktop:not([data-xy-theme="dark"]) .px-skin .v2s-status.prep { color: var(--primary); background: var(--primary-soft); }
.xy-desktop:not([data-xy-theme="dark"]) .px-skin .v2s-status.run,
.xy-desktop:not([data-xy-theme="dark"]) .px-skin .v2s-status.done { color: var(--success); background: var(--success-soft); }
.xy-desktop:not([data-xy-theme="dark"]) .px-skin .v2s-status.fail { color: var(--danger); background: var(--danger-soft); }
.xy-desktop:not([data-xy-theme="dark"]) .px-skin .v2s-status.pause { color: var(--warning); background: var(--warning-soft); }
.xy-desktop:not([data-xy-theme="dark"]) .px-skin .v2s-ctab.on { color: var(--primary); border-bottom-color: var(--primary); background: var(--primary-soft); }
.xy-desktop:not([data-xy-theme="dark"]) .px-skin .v2s-timer,
.xy-desktop:not([data-xy-theme="dark"]) .px-skin .v2s-timer i,
.xy-desktop:not([data-xy-theme="dark"]) .px-skin .v2s-stat i,
.xy-desktop:not([data-xy-theme="dark"]) .px-skin .v2s-lm,
.xy-desktop:not([data-xy-theme="dark"]) .px-skin .v2s-lm i { color: var(--primary); }
.xy-desktop:not([data-xy-theme="dark"]) .px-skin .v2s-activity,
.xy-desktop:not([data-xy-theme="dark"]) .px-skin .v2s-progress-pct { color: var(--success); }
.xy-desktop:not([data-xy-theme="dark"]) .px-skin .v2s-eta { color: var(--warning); }
.xy-desktop:not([data-xy-theme="dark"]) .px-skin .v2s-agent-badge.on { color: var(--success); background: var(--success-soft); }
.xy-desktop:not([data-xy-theme="dark"]) .px-skin .v2s-agent-badge.off { color: var(--warning); background: var(--warning-soft); }
.xy-desktop:not([data-xy-theme="dark"]) .px-skin .v2s-phase.active .v2s-phase-icon { color: var(--primary); border-color: var(--primary); background: var(--primary-soft); }
.xy-desktop:not([data-xy-theme="dark"]) .px-skin .v2s-phase.active .v2s-phase-name { color: var(--primary); }
.xy-desktop:not([data-xy-theme="dark"]) .px-skin .v2s-phase.done .v2s-phase-icon { color: var(--success); border-color: var(--success); background: var(--success-soft); }
.xy-desktop:not([data-xy-theme="dark"]) .px-skin .v2s-phase.done .v2s-phase-name { color: var(--success); }
.xy-desktop:not([data-xy-theme="dark"]) .px-skin .v2s-phase-line.active { background: var(--primary); }
.xy-desktop:not([data-xy-theme="dark"]) .px-skin .v2s-phase-line.done { background: var(--success); }
.xy-desktop:not([data-xy-theme="dark"]) .px-skin .v2s-agent-table td.center { color: var(--primary); }
.xy-desktop:not([data-xy-theme="dark"]) .px-skin .v2s-agent-table tr.done td { color: var(--success); }
.xy-desktop:not([data-xy-theme="dark"]) .px-skin .v2s-agent-table tr.active td { color: var(--warning); }
.xy-desktop:not([data-xy-theme="dark"]) .px-skin .v2a-summary { color: var(--text-primary); background: var(--primary-soft); border-left-color: var(--primary); }
.xy-desktop:not([data-xy-theme="dark"]) .px-skin .v2s-ctrl.restart { color: var(--primary); background: var(--primary-soft); }
.xy-desktop:not([data-xy-theme="dark"]) .px-skin .v2s-ctrl.resume { color: var(--success); background: var(--success-soft); }
.xy-desktop:not([data-xy-theme="dark"]) .px-skin .v2s-ctrl.cancel,
.xy-desktop:not([data-xy-theme="dark"]) .px-skin .v2s-ctrl.pause { color: var(--danger); background: var(--danger-soft); }
/* superficies casi-transparentes que en claro desaparecerian: darles un tinte legible */
.xy-desktop:not([data-xy-theme="dark"]) .px-skin .v2s-msg,
.xy-desktop:not([data-xy-theme="dark"]) .px-skin .v2s-task-card,
.xy-desktop:not([data-xy-theme="dark"]) .px-skin .v2s-mcard,
.xy-desktop:not([data-xy-theme="dark"]) .px-skin .v2s-perf-row { background: var(--bg-header); }
.xy-desktop:not([data-xy-theme="dark"]) .px-skin .v2s-live-metrics { background: var(--primary-soft); border-color: var(--primary-soft); }