/* ════════════════════════════════════════════════════════════════════════════
   VECTOR · Tema "Magnitud × Dirección", variante dark
   Mismo vocabulario cromático, superficies invertidas.
   ════════════════════════════════════════════════════════════════════════════
   Versión: 2026-05-23 · B0 redesign (esqueleto, valores exactos para B4)
   ════════════════════════════════════════════════════════════════════════════ */

:root[data-theme="magnitud_direccion_dark"] {

  /* Primitivos, misma escala petróleo/ámbar, sin cambio */
  --vxp-teal-50:  #EAF2F4;
  --vxp-teal-100: #CCDDE2;
  --vxp-teal-200: #9CBFC9;
  --vxp-teal-300: #6BA1AF;
  --vxp-teal-400: #3D8595;
  --vxp-teal-500: #1B6577;
  --vxp-teal-600: #0E3F4D;
  --vxp-teal-700: #0A2F3A;
  --vxp-teal-800: #061F26;
  --vxp-teal-900: #031216;

  --vxp-amber-50:  #FAEFD9;
  --vxp-amber-100: #F5DBA8;
  --vxp-amber-300: #E6AC49;
  --vxp-amber-500: #C77700;
  --vxp-amber-600: #A66200;
  --vxp-amber-700: #834D00;

  /* Surfaces dark */
  --vx-surface-page:        #0D1117;
  --vx-surface-1:           #161B22;
  --vx-surface-2:           #1F2733;
  --vx-surface-3:           #2A3545;
  --vx-surface-inverted:    #F6F7F9;
  --vx-surface-inverted-on: #0F1E2D;

  /* Brand, el petróleo se aclara para contraste sobre dark */
  --vx-brand-primary:        var(--vxp-teal-400);
  --vx-brand-primary-hover:  var(--vxp-teal-300);
  --vx-brand-primary-active: var(--vxp-teal-500);
  --vx-brand-primary-soft:   rgba(14, 63, 77, .25);
  --vx-brand-primary-on:     #FFFFFF;

  --vx-brand-accent:         var(--vxp-amber-300);
  --vx-brand-accent-hover:   var(--vxp-amber-100);
  --vx-brand-accent-soft:    rgba(199, 119, 0, .18);
  --vx-brand-accent-on:      #0F1E2D;

  --vx-brand-gradient: linear-gradient(135deg, var(--vxp-teal-700) 0%, var(--vxp-teal-600) 100%);

  /* Borders dark */
  --vx-border-soft:    rgba(200, 220, 240, .08);
  --vx-border-default: rgba(200, 220, 240, .14);
  --vx-border-strong:  rgba(200, 220, 240, .24);
  --vx-border-focus:   var(--vxp-teal-400);

  /* Text dark */
  --vx-text-strong:     #E8EEF4;
  --vx-text-default:    #C5D0DC;
  --vx-text-muted:      #A7B4C2;
  --vx-text-subtle:     #8494A5;
  --vx-text-inverted:   #0F1E2D;
  --vx-text-link:       var(--vxp-teal-300);
  --vx-text-link-hover: var(--vxp-teal-200);

  /* Estados */
  --vx-status-success:        #22C987;
  --vx-status-success-soft:   rgba(15, 123, 92, .20);
  --vx-status-success-strong: #3ADBAA;

  --vx-status-warning:        #D4870A;
  --vx-status-warning-soft:   rgba(160, 90, 0, .20);
  --vx-status-warning-strong: #F0A030;

  --vx-status-danger:         #E0506A;
  --vx-status-danger-soft:    rgba(161, 41, 74, .20);
  --vx-status-danger-strong:  #F07090;

  --vx-status-info:           #4A9FD5;
  --vx-status-info-soft:      rgba(26, 111, 176, .20);
  --vx-status-info-strong:    #6DB8E8;

  /* Alias legacy, mismas propiedades redirigidas a v2 dark */
  --mag:  var(--vx-brand-primary);
  --ora:  var(--vx-brand-accent);
  --grad: var(--vx-brand-gradient);
  --bg:   var(--vx-surface-page);
  --sur:  var(--vx-surface-1);
  --sur2: var(--vx-surface-2);
  --hov:  var(--vx-surface-3);
  --bdr:  var(--vx-border-soft);
  --bdr2: var(--vx-border-default);
  --bdr3: var(--vx-border-strong);
  --tx:   var(--vx-text-strong);
  --tx1:  var(--vx-text-default);
  --tx2:  var(--vx-text-muted);
  --tx3:  var(--vx-text-subtle);
  --r:    var(--vx-radius-lg);
  --rsm:  var(--vx-radius-md);
  --pill: var(--vx-radius-pill);
  --sh-sm: var(--vx-shadow-1);
  --sh-md: var(--vx-shadow-3);
  --sh-lg: var(--vx-shadow-4);
  --ease: var(--vx-ease-inout);
  --nav-w:           var(--vx-nav-w);
  --nav-w-collapsed: var(--vx-nav-w-collapsed);
  --bar-h:           var(--vx-topbar-h);
  --ok:    var(--vx-status-success);
  --ok-bg: var(--vx-status-success-soft);
  --wn:    var(--vx-status-warning);
  --wn-bg: var(--vx-status-warning-soft);
  --er:    var(--vx-status-danger);
  --er-bg: var(--vx-status-danger-soft);
  --in:    var(--vx-status-info);
  --in-bg: var(--vx-status-info-soft);
  --ac:    var(--vx-brand-primary);
  --ac-bg: var(--vx-brand-primary-soft);
}

/* ── Alias del shell v2 en oscuro (auditoría de tableros 2026-09-29) ─────────
   main.css define una segunda familia de tokens para el shell (--text,
   --text-muted, --bg-surface, --bg-subtle, --border...) que apunta a la escala
   neutra clara (--n-*) y este tema no la redefinía. Resultado: migas, encabezados,
   rótulos y filtros quedaban en #637588 sobre fondo oscuro (3.5:1) y con bloques
   #EBEDF1 claros en medio del oscuro. Se redirigen a los tokens oscuros v2. */
:root[data-theme="magnitud_direccion_dark"] {
  --bg-page:      var(--vx-surface-page);
  --bg-surface:   var(--vx-surface-1);
  --bg-subtle:    var(--vx-surface-2);
  --bg-hover:     rgba(232, 238, 244, 0.06);

  --text-strong:  var(--vx-text-strong);
  --text:         var(--vx-text-default);
  --text-muted:   var(--vx-text-muted);
  --text-subtle:  var(--vx-text-subtle);

  --border:       var(--vx-border-default);
  --border-soft:  var(--vx-border-soft);
}