/* ============================================================================
   ARQAI Design System — v1 (WO012/Sprint3)
   "Centro de Comando de IA": moderno, tecnológico, limpio, acentos neón sutiles,
   máxima legibilidad. Modo oscuro como experiencia principal.

   Fuente ÚNICA de tokens y componentes reutilizables. Las pantallas
   (index/agent_studio/landing/login) consumen estas variables y clases — no
   redefinen colores/espaciados por su cuenta. Autocontenido (sin fuentes ni
   assets externos: CSP-safe).
   Prefijo de clases: `arq-`. Prefijo de tokens: `--arq-`.
   ============================================================================ */

/* ── Tokens ──────────────────────────────────────────────────────────────── */
:root,
:root[data-theme="dark"] {
  /* Superficies (command-center: near-black navy) */
  --arq-bg:            #0a0e17;   /* fondo base de la app */
  --arq-bg-elev:       #0f1524;   /* paneles/secciones */
  --arq-surface:       #131b2e;   /* tarjetas */
  --arq-surface-2:     #1a2338;   /* tarjetas anidadas / hover */
  --arq-line:          #243049;   /* bordes sutiles */
  --arq-line-strong:   #33436a;

  /* Texto */
  --arq-ink:           #e8edf7;   /* texto principal, alto contraste */
  --arq-ink-soft:      #b3bdd4;
  --arq-muted:         #7a879f;   /* texto secundario */
  --arq-ink-invert:    #0a0e17;

  /* Acentos neón (sutiles) */
  --arq-accent:        #22d3ee;   /* cian eléctrico — acción primaria */
  --arq-accent-2:      #7c9dff;   /* azul-violeta — apoyo */
  --arq-accent-3:      #a78bfa;   /* violeta — realces */
  --arq-accent-ink:    #041016;   /* texto sobre acento */

  /* Semánticos */
  --arq-ok:            #34d399;
  --arq-warn:          #fbbf24;
  --arq-bad:           #f87171;
  --arq-info:          #38bdf8;

  /* Glow / sombras */
  --arq-glow:          0 0 0 1px rgba(34,211,238,.35), 0 6px 22px -8px rgba(34,211,238,.45);
  --arq-shadow:        0 8px 30px -12px rgba(0,0,0,.6);
  --arq-shadow-soft:   0 2px 10px -4px rgba(0,0,0,.5);

  /* Radios / espaciado / tipografía */
  --arq-r-sm: 6px;  --arq-r: 10px;  --arq-r-lg: 16px;  --arq-r-pill: 999px;
  --arq-sp-1: 4px; --arq-sp-2: 8px; --arq-sp-3: 12px; --arq-sp-4: 16px;
  --arq-sp-5: 24px; --arq-sp-6: 32px; --arq-sp-8: 48px;
  --arq-font: "Inter", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  --arq-mono: ui-monospace, "Cascadia Code", "SF Mono", Consolas, monospace;
  --arq-fs-xs: 11px; --arq-fs-sm: 13px; --arq-fs: 14px; --arq-fs-md: 16px;
  --arq-fs-lg: 20px; --arq-fs-xl: 28px; --arq-fs-2xl: 40px;
}

/* Modo claro (opcional — dark es el principal; se activa con data-theme="light") */
:root[data-theme="light"] {
  --arq-bg: #f5f7fb; --arq-bg-elev: #ffffff; --arq-surface: #ffffff;
  --arq-surface-2: #eef2f9; --arq-line: #e2e8f2; --arq-line-strong: #cbd5e6;
  --arq-ink: #0f1626; --arq-ink-soft: #33415c; --arq-muted: #64748b;
  --arq-ink-invert: #ffffff;
  --arq-accent: #0891b2; --arq-accent-2: #4f6ef7; --arq-accent-3: #7c3aed;
  --arq-accent-ink: #ffffff;
  --arq-glow: 0 0 0 1px rgba(8,145,178,.25), 0 6px 20px -10px rgba(8,145,178,.4);
  --arq-shadow: 0 8px 30px -14px rgba(15,22,38,.25);
  --arq-shadow-soft: 0 2px 10px -6px rgba(15,22,38,.2);
}

/* ── Base ────────────────────────────────────────────────────────────────── */
.arq * { box-sizing: border-box; }
.arq {
  font-family: var(--arq-font);
  color: var(--arq-ink);
  background: var(--arq-bg);
  font-size: var(--arq-fs);
  line-height: 1.5;
}
/* Fondo con textura sutil de "command center" (rejilla + glow radial) */
.arq-bg-grid {
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(124,157,255,.10), transparent 60%),
    radial-gradient(900px 500px at 0% 100%, rgba(34,211,238,.08), transparent 55%),
    linear-gradient(var(--arq-bg), var(--arq-bg));
}

/* ── Logo ────────────────────────────────────────────────────────────────── */
.arq-logo { display: inline-flex; align-items: center; gap: 10px; font-weight: 800;
  letter-spacing: .5px; font-size: var(--arq-fs-lg); color: var(--arq-ink); }
.arq-logo .arq-logo-mark { width: 26px; height: 26px; flex: 0 0 auto; }
.arq-logo .arq-logo-text { background: linear-gradient(90deg, var(--arq-accent), var(--arq-accent-3));
  -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ── Header / navegación ─────────────────────────────────────────────────── */
.arq-header {
  display: flex; align-items: center; gap: var(--arq-sp-3);
  padding: var(--arq-sp-3) var(--arq-sp-5);
  background: linear-gradient(180deg, rgba(19,27,46,.9), rgba(15,21,36,.75));
  border-bottom: 1px solid var(--arq-line);
  backdrop-filter: blur(8px); position: sticky; top: 0; z-index: 50;
}
.arq-header .arq-sub { color: var(--arq-muted); font-size: var(--arq-fs-sm); }
.arq-nav { display: flex; gap: var(--arq-sp-1); align-items: center; }
.arq-nav a { color: var(--arq-ink-soft); text-decoration: none; padding: 6px 12px;
  border-radius: var(--arq-r-sm); font-size: var(--arq-fs-sm); }
.arq-nav a:hover { background: var(--arq-surface-2); color: var(--arq-ink); }
.arq-nav a.active { color: var(--arq-accent); background: rgba(34,211,238,.08); }

/* ── Botones ─────────────────────────────────────────────────────────────── */
.arq-btn {
  font-family: inherit; font-size: var(--arq-fs-sm); font-weight: 600;
  padding: 8px 16px; border-radius: var(--arq-r-sm); border: 1px solid transparent;
  cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
  transition: transform .06s ease, box-shadow .15s ease, background .15s ease;
}
.arq-btn:active { transform: translateY(1px); }
.arq-btn:disabled { opacity: .5; cursor: not-allowed; }
.arq-btn-primary { background: linear-gradient(90deg, var(--arq-accent), var(--arq-accent-2));
  color: var(--arq-accent-ink); }
.arq-btn-primary:hover { box-shadow: var(--arq-glow); }
.arq-btn-ghost { background: transparent; color: var(--arq-ink-soft); border-color: var(--arq-line-strong); }
.arq-btn-ghost:hover { background: var(--arq-surface-2); color: var(--arq-ink); border-color: var(--arq-accent); }
.arq-btn-danger { background: transparent; color: var(--arq-bad); border-color: rgba(248,113,113,.4); }
.arq-btn-danger:hover { background: rgba(248,113,113,.12); }

/* ── Cards / paneles ─────────────────────────────────────────────────────── */
.arq-card {
  background: var(--arq-surface); border: 1px solid var(--arq-line);
  border-radius: var(--arq-r-lg); padding: var(--arq-sp-5); box-shadow: var(--arq-shadow-soft);
}
.arq-card-title { font-weight: 700; font-size: var(--arq-fs-md); margin: 0 0 var(--arq-sp-3); }
.arq-card--glow { border-color: rgba(34,211,238,.3); box-shadow: var(--arq-glow); }

/* ── Formularios ─────────────────────────────────────────────────────────── */
.arq-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--arq-sp-4); }
.arq-label { font-size: var(--arq-fs-sm); color: var(--arq-ink-soft); font-weight: 600; }
.arq-input, .arq-select, .arq-textarea {
  font-family: inherit; font-size: var(--arq-fs); color: var(--arq-ink);
  background: var(--arq-bg-elev); border: 1px solid var(--arq-line-strong);
  border-radius: var(--arq-r-sm); padding: 9px 12px; width: 100%;
}
.arq-input:focus, .arq-select:focus, .arq-textarea:focus {
  outline: none; border-color: var(--arq-accent); box-shadow: 0 0 0 3px rgba(34,211,238,.15);
}
.arq-input::placeholder { color: var(--arq-muted); }
.arq-textarea { min-height: 96px; resize: vertical; }

/* ── Tablas ──────────────────────────────────────────────────────────────── */
.arq-table { width: 100%; border-collapse: collapse; font-size: var(--arq-fs-sm); }
.arq-table th { text-align: left; color: var(--arq-muted); font-weight: 600;
  padding: 10px 12px; border-bottom: 1px solid var(--arq-line); text-transform: uppercase;
  letter-spacing: .4px; font-size: var(--arq-fs-xs); }
.arq-table td { padding: 11px 12px; border-bottom: 1px solid var(--arq-line); }
.arq-table tr:hover td { background: var(--arq-surface-2); }

/* ── Badges / pills / estados ────────────────────────────────────────────── */
.arq-badge { display: inline-flex; align-items: center; gap: 5px; font-size: var(--arq-fs-xs);
  font-weight: 700; padding: 3px 10px; border-radius: var(--arq-r-pill); }
.arq-badge--ok   { background: rgba(52,211,153,.14); color: var(--arq-ok); }
.arq-badge--warn { background: rgba(251,191,36,.14); color: var(--arq-warn); }
.arq-badge--bad  { background: rgba(248,113,113,.14); color: var(--arq-bad); }
.arq-badge--info { background: rgba(56,189,248,.14); color: var(--arq-info); }
.arq-badge--accent { background: rgba(34,211,238,.12); color: var(--arq-accent); }
/* Punto de estado con glow (command center) */
.arq-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.arq-dot--live { background: var(--arq-ok); box-shadow: 0 0 8px var(--arq-ok); }
.arq-dot--idle { background: var(--arq-muted); }

/* ── Iconografía (stroke uniforme, hereda color) ─────────────────────────── */
.arq-icon { width: 18px; height: 18px; stroke: currentColor; fill: none;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; vertical-align: -3px; }

/* ── Utilidades ──────────────────────────────────────────────────────────── */
.arq-mono { font-family: var(--arq-mono); }
.arq-muted { color: var(--arq-muted); }
.arq-hint { color: var(--arq-muted); font-size: var(--arq-fs-sm); }
.arq-row { display: flex; gap: var(--arq-sp-3); align-items: center; }
.arq-spacer { margin-left: auto; }

/* ── Accesibilidad ───────────────────────────────────────────────────────── */
.arq :focus-visible { outline: 2px solid var(--arq-accent); outline-offset: 2px; }
.arq-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
@media (prefers-reduced-motion: reduce) {
  .arq *, .arq *::before, .arq *::after { transition: none !important; animation: none !important; }
}

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 720px) {
  .arq-header { padding: var(--arq-sp-3) var(--arq-sp-4); flex-wrap: wrap; }
  .arq-nav { flex-wrap: wrap; row-gap: var(--arq-sp-2); }
  .arq-card { padding: var(--arq-sp-4); }
  .arq-hide-sm { display: none !important; }
}