/* ============================================================
   Nova Velocity Design System — Web Kit v1 · Agosto 2026
   Un solo archivo: tokens + base + utilidades + componentes.
   Fuentes: Google Sans Flex / Google Sans Code vía Google Fonts.
   Cárgalo con:
   <link href="https://fonts.googleapis.com/css2?family=Google+Sans+Flex:opsz,wght@6..144,100..1000&family=Google+Sans+Code:wght@300..800&display=swap" rel="stylesheet">
   <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" rel="stylesheet">
   <link rel="stylesheet" href="nova-velocity.css">
   ============================================================ */

:root {
  /* — Brand core — */
  --nv-color-nova: #0071CE;          /* identidad / wordmark */
  --nv-color-electric: #3B82F6;      /* CTA principal / interactivo */
  --nv-color-cyan: #06B6D4;          /* acento */
  --nv-gradient-signature: linear-gradient(90deg, #0071CE 0%, #3B82F6 50%, #06B6D4 100%);

  /* — Logo ramp (Pantone) — SOLO para reproducir el logo, nunca UI — */
  --nv-color-logo-285c: #0569B2; --nv-color-logo-7689c: #108AC6;
  --nv-color-logo-7688c: #4498D1; --nv-color-logo-637c: #51BFE4;

  /* — Neutrales fríos (tinte azul, nunca gris neutro) — */
  --nv-gray-950: #101318; --nv-gray-900: #171B21; --nv-gray-800: #232933;
  --nv-gray-700: #333B47; --nv-gray-600: #49525F; --nv-gray-500: #5F6977;
  --nv-gray-400: #7B8594; --nv-gray-300: #A3ADBB; --nv-gray-200: #CBD4DF;
  --nv-gray-100: #E2E8F0; --nv-gray-50: #F0F4F9;

  /* — Superficies — */
  --nv-surface: #FFFFFF; --nv-surface-dim: #F0F4F9; --nv-surface-tint: #E8F1FB;
  --nv-border: var(--nv-gray-200); --nv-border-subtle: var(--nv-gray-100);
  --nv-dark-bg: #131314; --nv-dark-surface: #1E1F20; --nv-dark-border: #35373B;
  --nv-dark-text: #F0F4F9; --nv-dark-text-secondary: #A3ADBB;

  /* — Texto — */
  --nv-text-primary: var(--nv-gray-900); --nv-text-secondary: var(--nv-gray-600);
  --nv-text-muted: var(--nv-gray-400); --nv-text-on-color: #FFFFFF;
  --nv-text-link: var(--nv-color-electric);

  /* — Gems: identidad de agentes IA (rotan por agente; NUNCA semántica) — */
  --nv-gem-quasar: #7C5AF8; --nv-gem-pulsar: #D94FD1;
  --nv-gem-ion: #0FB5A6; --nv-gem-orbit: #5B6CFF;

  /* — Semántica: estado, no decoración — */
  --nv-color-success: #1E8E3E; --nv-color-warning: #F29900;
  --nv-color-error: #D93025; --nv-color-info: var(--nv-color-electric);
  --nv-tint-success: #E6F4EA; --nv-tint-warning: #FEF3E0;
  --nv-tint-error: #FCE8E6; --nv-tint-info: #E8F1FB;

  /* — Tipografía — */
  --nv-font-display: 'Google Sans Flex', 'Helvetica Neue', Arial, sans-serif;
  --nv-font-text: 'Google Sans Flex', 'Helvetica Neue', Arial, sans-serif;
  --nv-font-mono: 'Google Sans Code', 'SF Mono', Consolas, monospace;
  --nv-type-display-xl: 500 64px/1.04 var(--nv-font-display);
  --nv-type-display: 500 45px/1.1 var(--nv-font-display);
  --nv-type-headline: 500 32px/1.15 var(--nv-font-display);
  --nv-type-title: 500 24px/1.25 var(--nv-font-display);
  --nv-type-subtitle: 500 18px/1.35 var(--nv-font-text);
  --nv-type-body-lg: 400 16px/1.55 var(--nv-font-text);
  --nv-type-body: 400 14px/1.5 var(--nv-font-text);
  --nv-type-caption: 400 12px/1.4 var(--nv-font-text);
  --nv-type-overline: 600 11px/1.3 var(--nv-font-text);
  --nv-type-code: 400 13px/1.5 var(--nv-font-mono);
  --nv-tracking-tight: -0.02em; --nv-tracking-caps: 0.08em;

  /* — Espaciado (base 4px), radios, sombras, motion — */
  --nv-space-1: 4px; --nv-space-2: 8px; --nv-space-3: 12px; --nv-space-4: 16px;
  --nv-space-5: 20px; --nv-space-6: 24px; --nv-space-8: 32px; --nv-space-10: 40px;
  --nv-space-12: 48px; --nv-space-16: 64px; --nv-space-24: 96px;
  --nv-radius-sm: 8px; --nv-radius-md: 12px; --nv-radius-lg: 16px;
  --nv-radius-xl: 28px; --nv-radius-pill: 999px;
  --nv-shadow-1: 0 1px 2px rgba(16,19,24,.06), 0 1px 3px rgba(16,19,24,.08);
  --nv-shadow-2: 0 2px 6px rgba(16,19,24,.06), 0 8px 24px rgba(16,19,24,.08);
  --nv-shadow-3: 0 12px 32px rgba(16,19,24,.14);
  --nv-ease: cubic-bezier(.2, 0, 0, 1);
  --nv-duration-fast: 150ms; --nv-duration: 250ms;
}

/* ============ Base ============ */
body.nv { margin: 0; font: var(--nv-type-body); color: var(--nv-text-primary);
  background: var(--nv-surface); -webkit-font-smoothing: antialiased; }
.nv a { color: var(--nv-text-link); text-decoration: none; }
.nv a:hover { color: var(--nv-color-nova); text-decoration: underline; }

/* ============ Utilidades tipográficas ============ */
.nv-display-xl { font: var(--nv-type-display-xl); letter-spacing: var(--nv-tracking-tight); }
.nv-display { font: var(--nv-type-display); letter-spacing: var(--nv-tracking-tight); }
.nv-headline { font: var(--nv-type-headline); letter-spacing: var(--nv-tracking-tight); }
.nv-title { font: var(--nv-type-title); }
.nv-subtitle { font: var(--nv-type-subtitle); }
.nv-body-lg { font: var(--nv-type-body-lg); }
.nv-body { font: var(--nv-type-body); }
.nv-caption { font: var(--nv-type-caption); color: var(--nv-text-muted); }
.nv-overline { font: var(--nv-type-overline); letter-spacing: var(--nv-tracking-caps);
  text-transform: uppercase; color: var(--nv-color-nova); }
.nv-code { font: var(--nv-type-code); }
.nv-grad-text { background: var(--nv-gradient-signature);
  -webkit-background-clip: text; background-clip: text; color: transparent; }
.nv-grad-rule { height: 5px; border-radius: 3px; background: var(--nv-gradient-signature); }

/* ============ Botones (pill) ============ */
.nv-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 40px; padding: 0 20px; border-radius: var(--nv-radius-pill); border: 1px solid transparent;
  font: 500 14px/1 var(--nv-font-text); cursor: pointer; text-decoration: none !important;
  transition: background var(--nv-duration-fast) var(--nv-ease),
    transform var(--nv-duration-fast) var(--nv-ease), filter var(--nv-duration-fast) var(--nv-ease); }
.nv-btn:active { transform: scale(.98); }
.nv-btn:disabled { opacity: .45; cursor: default; }
.nv-btn--filled { background: var(--nv-color-electric); color: #fff; }
.nv-btn--filled:hover { background: var(--nv-color-nova); }
.nv-btn--gradient { background: var(--nv-gradient-signature); color: #fff; }
.nv-btn--gradient:hover { filter: brightness(1.08); }
.nv-btn--tonal { background: var(--nv-surface-tint); color: var(--nv-color-nova); }
.nv-btn--tonal:hover { background: #DAE9F7; }
.nv-btn--outline { background: transparent; color: var(--nv-color-nova); border-color: var(--nv-border); }
.nv-btn--outline:hover, .nv-btn--ghost:hover { background: var(--nv-surface-tint); }
.nv-btn--ghost { background: transparent; color: var(--nv-color-nova); }
.nv-btn--danger { background: var(--nv-color-error); color: #fff; }
.nv-btn--danger:hover { background: #B3261E; }
.nv-btn--sm { height: 32px; padding: 0 14px; font-size: 13px; }
.nv-btn--lg { height: 48px; padding: 0 26px; font-size: 15px; }

/* ============ Cards ============ */
.nv-card { background: var(--nv-surface); border: 1px solid var(--nv-border-subtle);
  border-radius: var(--nv-radius-lg); box-shadow: var(--nv-shadow-1); padding: 20px;
  position: relative; overflow: hidden; }
.nv-card--tinted { background: var(--nv-surface-dim); border-color: transparent; box-shadow: none; }
.nv-card--outlined { border-color: var(--nv-border); box-shadow: none; }
.nv-card--dark { background: var(--nv-dark-surface); border-color: var(--nv-dark-border);
  color: var(--nv-dark-text); box-shadow: none; }
.nv-card--accent::before { content: ''; position: absolute; top: 0; left: 0; right: 0;
  height: 4px; background: var(--nv-gradient-signature); }

/* ============ Badges y chips ============ */
.nv-badge { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 10px;
  border-radius: var(--nv-radius-pill); font: 600 11px/1 var(--nv-font-text); letter-spacing: .02em;
  background: var(--nv-gray-100); color: var(--nv-gray-700); }
.nv-badge--success { background: var(--nv-tint-success); color: var(--nv-color-success); }
.nv-badge--warning { background: var(--nv-tint-warning); color: #B06000; }
.nv-badge--error { background: var(--nv-tint-error); color: var(--nv-color-error); }
.nv-badge--info { background: var(--nv-tint-info); color: var(--nv-color-nova); }
.nv-badge--quasar { background: #F1EDFE; color: var(--nv-gem-quasar); }
.nv-badge--pulsar { background: #FBEAFA; color: var(--nv-gem-pulsar); }
.nv-badge--ion { background: #E3F7F4; color: var(--nv-gem-ion); }
.nv-badge--orbit { background: #EBEDFF; color: var(--nv-gem-orbit); }
.nv-badge .nv-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.nv-chip { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 14px;
  border-radius: var(--nv-radius-pill); border: 1px solid var(--nv-border);
  background: var(--nv-surface); color: var(--nv-gray-700); font: 500 13px/1 var(--nv-font-text);
  cursor: pointer; transition: background var(--nv-duration-fast) var(--nv-ease); }
.nv-chip:hover { background: var(--nv-gray-50); }
.nv-chip--selected { border-color: var(--nv-color-electric);
  background: var(--nv-surface-tint); color: var(--nv-color-nova); }

/* ============ Formularios ============ */
.nv-field { display: flex; flex-direction: column; gap: 6px; }
.nv-label { font: 500 12px/1.2 var(--nv-font-text); color: var(--nv-text-primary); }
.nv-input, .nv-select { height: 40px; padding: 0 12px; border-radius: var(--nv-radius-md);
  border: 1px solid var(--nv-border); background: var(--nv-surface);
  font: var(--nv-type-body); color: var(--nv-text-primary); outline: none;
  transition: border-color var(--nv-duration-fast) var(--nv-ease),
    box-shadow var(--nv-duration-fast) var(--nv-ease); }
.nv-input:focus, .nv-select:focus { border-color: var(--nv-color-electric);
  box-shadow: 0 0 0 3px var(--nv-surface-tint); }
.nv-input--error { border-color: var(--nv-color-error); }
.nv-helper { font: var(--nv-type-caption); color: var(--nv-text-muted); }
.nv-helper--error { color: var(--nv-color-error); }

/* ============ Tabla ============ */
.nv-table { width: 100%; border-collapse: collapse; font: var(--nv-type-body); }
.nv-table th { background: var(--nv-color-nova); color: #fff; text-align: left;
  font: 600 13px/1.3 var(--nv-font-text); padding: 10px 14px; }
.nv-table td { padding: 10px 14px; border-bottom: 1px solid var(--nv-border-subtle);
  color: var(--nv-text-secondary); }
.nv-table td:first-child { color: var(--nv-text-primary); font-weight: 500; }
.nv-table tbody tr:nth-child(even) td { background: #F6F9FC; }

/* ============ Iconos (Material Symbols Rounded) ============ */
.nv .material-symbols-rounded { font-variation-settings: 'FILL' 0, 'wght' 400; vertical-align: middle; }
.nv-icon--active { color: var(--nv-color-electric); font-variation-settings: 'FILL' 1, 'wght' 400; }