/* ============================================================================
   Valdra · Sistema de diseño — superficies

   Las formas estructurales que consumen los primitivos de static/console/ui/:
   tarjeta en reposo, tarjeta elevada, la superficie "de mando" oscura (hero y
   compositor) y el panel de cristal QUE SOLO EXISTE SOBRE ESA superficie.

   El cristal es la única excepción a la prohibición de glassmorphism de
   app.css (línea 22-24), y ya existía de facto en el hero de Inicio antes de
   este sistema (`.hm-glass`, ver UI_AUDIT.md §2). Aquí se le pone nombre y
   límite: `.vx-glass` solo se usa DENTRO de `.vx-panel-command` — nunca sobre
   una superficie clara, nunca como tarjeta de un dato normal. Fuera de esas
   cuatro piezas (los cuatro nodos IDEA→PLAN→EJECUCIÓN→RESULTADO del hero, y
   nada más), el resto de la consola sigue sin cristal, sin resplandor y sin
   segundo acento — esa regla no cambia.
   ============================================================================ */

.vx-card {
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}

.vx-card--interactive {
  cursor: pointer;
  transition: transform var(--motion-fast), box-shadow var(--motion-fast),
              border-color var(--motion-fast);
}
.vx-card--interactive:hover,
.vx-card--interactive:focus-visible {
  transform: translateY(-2px);
  box-shadow: var(--shadow-floating);
  border-color: var(--border-active);
}
.vx-card--interactive:active { transform: translateY(0); }

.vx-panel-elevated {
  background: var(--surface-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-floating);
}

/* ── La superficie de mando ────────────────────────────────────────────────
   Oscura en los DOS temas, a propósito — es la portada de un producto que se
   vende y no un panel de datos, la misma decisión que ya tomó el hero
   original (home.js, "SIEMPRE oscuro en los dos temas"). El resplandor es un
   degradado radial, nunca una imagen generada: la licencia del modelo de
   imágenes de esta plataforma es de investigación y no comercial, y esta
   consola es un producto que se vende — usarlo en la primera pantalla que ve
   cualquier cliente incumpliría esa licencia (ver docs/ui/DESIGN_SYSTEM.md). */
.vx-panel-command {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(120% 150% at 85% -12%, rgba(245,158,11,.28), transparent 55%),
    radial-gradient(90% 120% at 4% 112%, rgba(79,70,229,.20), transparent 60%),
    linear-gradient(165deg, var(--surface-command-2) 0%, var(--surface-command) 60%, #070B15 100%);
  color: var(--text-on-command);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-command);
}

.vx-glass {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--radius-md);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  color: var(--text-on-command);
}

.vx-divider {
  border: none;
  border-top: 1px solid var(--border-subtle);
  margin: 0;
}

.vx-avatar-ring {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
}

/* ============================================================================
   Componentes — la piel de cada fábrica de static/console/ui/primitives.js.
   Un tono decorativo ("tone-accent" | "tone-ai" | "tone-success" |
   "tone-warning" | "tone-danger" | "tone-neutral") solo cambia el color del
   icono/punto — nunca el fondo entero de la tarjeta, que sigue siendo
   --surface-card en los dos temas. Es la misma regla de "el color acompaña,
   nunca sustituye al texto" que ya rige en app.css.
   ============================================================================ */

/* ── IconButton ────────────────────────────────────────────────────────── */
.vx-icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; padding: 0;
  border: 1px solid var(--border-subtle); border-radius: var(--radius-md);
  background: var(--surface-card); color: var(--text-secondary);
  cursor: pointer;
  transition: background var(--motion-fast), color var(--motion-fast), border-color var(--motion-fast);
}
.vx-icon-btn.sz-sm { width: 28px; height: 28px; }
.vx-icon-btn:hover { background: var(--surface-page); color: var(--text-primary); }
.vx-icon-btn:disabled { opacity: .5; cursor: not-allowed; }
.vx-icon-btn svg { width: 16px; height: 16px; }
.vx-icon-btn.tone-ai:hover { color: var(--accent-ai); border-color: var(--accent-ai); }
.vx-icon-btn.tone-danger:hover { color: var(--accent-danger); border-color: var(--accent-danger); }

/* ── StatusBadge ───────────────────────────────────────────────────────── */
.vx-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 9px; border-radius: 999px;
  font-size: var(--font-size-xs); font-weight: var(--font-weight-medium);
  background: var(--surface-page); color: var(--text-secondary);
  border: 1px solid var(--border-subtle);
}
.vx-badge-dot { width: 6px; height: 6px; border-radius: 999px; background: currentColor; }
.vx-badge.tone-success { color: var(--accent-success); background: color-mix(in srgb, var(--accent-success) 12%, transparent); border-color: transparent; }
.vx-badge.tone-warning { color: var(--accent-warning); background: color-mix(in srgb, var(--accent-warning) 12%, transparent); border-color: transparent; }
.vx-badge.tone-danger  { color: var(--accent-danger);  background: color-mix(in srgb, var(--accent-danger) 12%, transparent);  border-color: transparent; }
.vx-badge.tone-ai       { color: var(--accent-ai);      background: var(--accent-ai-soft); border-color: transparent; }
.vx-badge.tone-neutral  { color: var(--text-muted); }

/* ── SectionHeader ─────────────────────────────────────────────────────── */
.vx-section-header {
  display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s4, 16px);
  margin-bottom: var(--s3, 12px);
}
.vx-section-title { margin: 0; color: var(--text-primary); }
.vx-section-action {
  background: none; border: none; padding: 2px 4px; cursor: pointer;
  font-size: var(--font-size-sm); font-weight: var(--font-weight-medium);
  color: var(--accent-primary); text-decoration: none; white-space: nowrap;
  border-radius: var(--radius-sm);
}
.vx-section-action:hover { text-decoration: underline; }

/* ── AgentAvatar ───────────────────────────────────────────────────────── */
.vx-avatar {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 999px; flex-shrink: 0;
  background: var(--accent-ai-soft); color: var(--accent-ai);
  font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold);
  overflow: hidden;
}
.vx-avatar.sz-sm { width: 26px; height: 26px; font-size: 10px; }
.vx-avatar.sz-lg { width: 44px; height: 44px; font-size: var(--font-size-sm); }
.vx-avatar img { width: 100%; height: 100%; object-fit: cover; }
.vx-avatar-dot {
  position: absolute; right: -1px; bottom: -1px;
  width: 9px; height: 9px; border-radius: 999px;
  background: var(--text-muted); border: 2px solid var(--surface-card);
}
.vx-avatar.is-online .vx-avatar-dot { background: var(--accent-success); }

/* ── MetricCard ────────────────────────────────────────────────────────── */
.vx-metric-card {
  position: relative; display: flex; flex-direction: column; gap: 4px;
  padding: var(--s4, 16px); text-align: left; width: 100%;
  font: inherit; color: inherit;
}
.vx-metric-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: var(--radius-md);
  background: var(--accent-primary-soft); color: var(--accent-primary);
  margin-bottom: 2px;
}
.vx-metric-card.tone-ai .vx-metric-icon { background: var(--accent-ai-soft); color: var(--accent-ai); }
.vx-metric-card.tone-success .vx-metric-icon { background: color-mix(in srgb, var(--accent-success) 14%, transparent); color: var(--accent-success); }
.vx-metric-card.tone-warning .vx-metric-icon { background: color-mix(in srgb, var(--accent-warning) 14%, transparent); color: var(--accent-warning); }
.vx-metric-card.tone-danger  .vx-metric-icon { background: color-mix(in srgb, var(--accent-danger) 14%, transparent);  color: var(--accent-danger); }
.vx-metric-value { font-size: var(--font-size-2xl); font-weight: var(--font-weight-bold); line-height: 1; color: var(--text-primary); }
.vx-metric-label { margin: 0; font-size: var(--font-size-sm); color: var(--text-secondary); }
.vx-metric-hint { margin: 0; font-size: var(--font-size-xs); color: var(--text-muted); }
.vx-metric-delta {
  position: absolute; top: var(--s4, 16px); right: var(--s4, 16px);
  font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold);
}
.vx-metric-delta.tone-up   { color: var(--accent-success); }
.vx-metric-delta.tone-down { color: var(--accent-danger); }
.vx-metric-delta.tone-flat { color: var(--text-muted); }
.vx-spark { position: absolute; right: var(--s3, 12px); bottom: var(--s3, 12px); overflow: visible; }
.vx-spark-line { fill: none; stroke: var(--accent-primary); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.vx-spark.is-flat .vx-spark-line { opacity: .35; }
.vx-spark-dot { fill: var(--accent-primary); }
.vx-metric-card.tone-ai .vx-spark-line { stroke: var(--accent-ai); }
.vx-metric-card.tone-ai .vx-spark-dot { fill: var(--accent-ai); }

/* ── ActionCard ────────────────────────────────────────────────────────── */
.vx-action-card {
  display: flex; align-items: center; gap: var(--s3, 12px);
  padding: 12px var(--s4, 16px); text-align: left; width: 100%;
  font: inherit; color: inherit;
}
.vx-action-icon {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 36px; height: 36px; border-radius: var(--radius-md);
  background: var(--accent-primary-soft); color: var(--accent-primary);
  transition: transform var(--motion-fast);
}
.vx-action-card:hover .vx-action-icon { transform: scale(1.06); }
.vx-action-title { display: block; font-size: var(--font-size-base); font-weight: var(--font-weight-medium); color: var(--text-primary); }
.vx-action-subtitle { display: block; font-size: var(--font-size-xs); color: var(--text-muted); }
.vx-action-indicator {
  display: inline-flex; flex-shrink: 0; color: var(--text-muted);
  transition: transform var(--motion-fast);
}
.vx-action-card:hover .vx-action-indicator { transform: translateX(3px); color: var(--accent-primary); }
.vx-action-card.is-locked { opacity: .6; cursor: pointer; }
.vx-action-card.is-locked .vx-action-icon { background: var(--surface-page); color: var(--text-muted); }
.vx-action-card.is-locked:hover .vx-action-indicator { transform: none; color: var(--text-muted); }

/* ── CommandChip ───────────────────────────────────────────────────────── */
.vx-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: 999px; cursor: pointer;
  font-size: var(--font-size-sm); font-weight: var(--font-weight-medium);
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14);
  color: var(--text-on-command); transition: background var(--motion-fast), border-color var(--motion-fast);
}
.vx-chip:hover { background: rgba(255,255,255,.13); border-color: rgba(255,255,255,.24); }
.vx-chip svg { width: 13px; height: 13px; }

/* ── WorkspaceCard ─────────────────────────────────────────────────────── */
.vx-work-card { position: relative; overflow: hidden; }
.vx-work-thumb {
  aspect-ratio: 16 / 10; display: flex; align-items: center; justify-content: center;
  background: var(--surface-page); color: var(--text-muted);
  border-bottom: 1px solid var(--border-subtle);
}
.vx-work-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vx-work-body { padding: var(--s3, 12px); display: flex; flex-direction: column; gap: 4px; }
.vx-work-title { margin: 0; font-size: var(--font-size-base); font-weight: var(--font-weight-medium); color: var(--text-primary); }
.vx-work-menu { position: absolute; top: 8px; right: 8px; }

/* ── El menú flotante "⋮" — WorkspaceCard y ActivityTimeline lo comparten ── */
.vx-menu {
  position: absolute; top: 100%; right: 0; margin-top: 4px; z-index: 20;
  display: flex; flex-direction: column; min-width: 160px; padding: 4px;
  background: var(--surface-elevated); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md); box-shadow: var(--shadow-floating);
}
.vx-menu button {
  display: block; width: 100%; text-align: left; padding: 7px 10px; border: none;
  background: none; border-radius: var(--radius-sm); cursor: pointer;
  font-size: var(--font-size-sm); color: var(--text-primary);
}
.vx-menu button:hover { background: var(--surface-page); }

/* ── ActivityTimeline ──────────────────────────────────────────────────── */
.vx-timeline-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.vx-timeline-row {
  display: flex; align-items: flex-start; gap: var(--s3, 12px);
  padding: 10px 2px; border-bottom: 1px solid var(--border-subtle);
}
.vx-timeline-row:last-child { border-bottom: none; }
.vx-timeline-time { flex-shrink: 0; width: 52px; padding-top: 2px; font-size: var(--font-size-xs); color: var(--text-muted); }
.vx-timeline-icon {
  flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 999px;
  background: color-mix(in srgb, var(--accent-success) 14%, transparent); color: var(--accent-success);
}
.vx-timeline-icon.tone-danger { background: color-mix(in srgb, var(--accent-danger) 14%, transparent); color: var(--accent-danger); }
.vx-timeline-body { flex: 1 1 auto; min-width: 0; }
.vx-timeline-title { margin: 0; font-size: var(--font-size-base); color: var(--text-primary); }
.vx-timeline-sub { display: block; margin-top: 2px; font-size: var(--font-size-xs); color: var(--text-muted); }
.vx-empty-hint {
  margin: 0; padding: var(--s5, 20px) var(--s3, 12px); text-align: center;
  font-size: var(--font-size-sm); color: var(--text-muted);
}

/* ============================================================================
   AIComposer — el cuadro de mando. Vive sobre `.vx-panel-command` (fondo
   oscuro) casi siempre, pero se apoya en sus propias variables `--text-on-
   command*` para que un montaje "denso" sobre una superficie clara — otra
   vista, más adelante — también se lea bien sin duplicar la hoja entera.
   ============================================================================ */

.vx-composer { position: relative; display: flex; flex-direction: column; gap: var(--s3, 12px); }

.vx-composer-box {
  position: relative; display: flex; align-items: flex-end; gap: var(--s2, 8px);
  padding: 14px 14px 14px 16px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-floating);
  transition: box-shadow var(--motion-base), border-color var(--motion-base);
}
/* El halo al enfocar: una insinuación, nunca un borde grueso — la regla
   explícita del dueño. Un anillo de 3px muy suave del acento de IA. */
.vx-composer.is-focused .vx-composer-box {
  border-color: color-mix(in srgb, var(--accent-ai) 55%, transparent);
  box-shadow: var(--shadow-floating), 0 0 0 3px var(--accent-ai-soft);
}
.vx-composer.is-dragging .vx-composer-box {
  border-color: var(--accent-ai); border-style: dashed;
}
.vx-composer.is-loading .vx-composer-box { opacity: .85; }

.vx-composer-spark {
  display: inline-flex; flex-shrink: 0; padding-bottom: 9px;
  color: var(--accent-ai);
}
/* min-height: 0 anula el `textarea { min-height: 96px }` global de app.css:
   el compositor nace de una línea y crece con autoGrow() en ai-composer.js. */
.vx-composer-textarea {
  flex: 1 1 auto; min-width: 0; min-height: 0; resize: none; max-height: 220px;
  background: none; border: none; outline: none;
  color: var(--text-on-command); font: inherit; font-size: var(--font-size-md);
  line-height: var(--line-height-base); padding: 6px 0;
}
.vx-composer-textarea::placeholder { color: var(--text-on-command-muted); }

.vx-composer-toolbar { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.vx-composer-toolbar .vx-icon-btn {
  background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.14); color: var(--text-on-command-muted);
}
.vx-composer-toolbar .vx-icon-btn:hover { background: rgba(255,255,255,.12); color: var(--text-on-command); }
.vx-composer.is-listening .vx-composer-toolbar .vx-icon-btn.tone-ai {
  background: var(--accent-ai); border-color: var(--accent-ai); color: #fff;
}

.vx-composer-send {
  display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0;
  padding: 9px 16px; border: none; border-radius: var(--radius-lg); cursor: pointer;
  background: var(--accent-primary); color: #fff;
  font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold);
  transition: background var(--motion-fast), transform var(--motion-fast);
}
.vx-composer-send:hover { background: var(--accent-primary-hover); transform: translateY(-1px); }
.vx-composer-send:disabled { opacity: .6; cursor: progress; transform: none; }
.vx-composer-send svg { width: 15px; height: 15px; }
@media (max-width: 640px) { .vx-composer-send-label { display: none; } }

.vx-composer-progress {
  position: relative; height: 2px; overflow: hidden;
  border-radius: 999px; background: rgba(255,255,255,.08);
}
.vx-composer-progress i {
  position: absolute; top: 0; bottom: 0; width: 30%;
  background: linear-gradient(90deg, transparent, var(--accent-ai), transparent);
  border-radius: 999px;
}
@media (prefers-reduced-motion: no-preference) {
  .vx-composer-progress i { animation: vx-progress-slide 1.1s var(--ease-standard) infinite; }
}

.vx-composer-drop {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-xl); background: rgba(79,70,229,.14);
  color: var(--text-on-command); font-size: var(--font-size-sm); font-weight: var(--font-weight-medium);
  pointer-events: none;
}

.vx-composer-attachments { display: flex; align-items: center; gap: var(--s2, 8px); flex-wrap: wrap; }
.vx-composer-attachment button {
  margin-left: 6px; border: none; background: none; color: inherit; cursor: pointer;
  font-size: var(--font-size-md); line-height: 1;
}

.vx-composer-chips { display: flex; flex-wrap: wrap; gap: var(--s2, 8px); }

.vx-composer-suggest {
  position: absolute; left: 16px; right: 16px; bottom: calc(100% + 8px); z-index: 30;
  display: flex; flex-direction: column; padding: 6px; max-height: 220px; overflow: auto;
  background: var(--surface-command-2); border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--radius-md); box-shadow: var(--shadow-floating);
}
.vx-composer-suggest-item {
  display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: none;
  background: none; border-radius: var(--radius-sm); cursor: pointer; text-align: left;
  color: var(--text-on-command); font-size: var(--font-size-sm);
}
.vx-composer-suggest-item:hover { background: rgba(255,255,255,.08); }

/* Variante compacta, para montarse fuera de Inicio (otra vista, un modal). */
.vx-composer.is-dense .vx-composer-box { padding: 10px 10px 10px 12px; border-radius: var(--radius-lg); }
.vx-composer.is-dense .vx-composer-textarea { font-size: var(--font-size-base); }