/* =============================================================
   VivaSAT — Design Tokens (sistema global)
   Cargar antes de sat_redesign.css y de cualquier override.
   ============================================================= */

:root {
  /* ---------- Brand ---------- */
  --brand-primary:      #0F2A4A;
  --brand-primary-700:  #142F50;
  --brand-primary-600:  #1E4577;
  --brand-primary-500:  #2C5C9C;
  --brand-primary-100:  #E8EEF7;
  --brand-primary-50:   #F4F7FC;
  --brand-accent:       #E63946;
  --brand-accent-600:   #C2272F;

  /* ---------- Semantic ---------- */
  --success:    #16A34A;
  --success-bg: #DCFCE7;
  --warning:    #F59E0B;
  --warning-bg: #FEF3C7;
  --warning-fg: #92400E;
  --danger:     #DC2626;
  --danger-bg:  #FEE2E2;
  --info:       #0EA5E9;
  --info-bg:    #E0F2FE;

  /* ---------- Neutral ---------- */
  --neutral-50:  #F9FAFB;
  --neutral-100: #F3F4F6;
  --neutral-200: #E5E7EB;
  --neutral-300: #D1D5DB;
  --neutral-400: #9CA3AF;
  --neutral-500: #6B7280;
  --neutral-600: #4B5563;
  --neutral-700: #374151;
  --neutral-800: #1F2937;
  --neutral-900: #111827;

  /* ---------- Surfaces ---------- */
  --bg:             #F7F8FB;
  --surface:        #FFFFFF;
  --surface-hover:  #F4F7FC;
  --border:         #E5E7EB;
  --border-strong:  #D1D5DB;

  /* ---------- Typography ---------- */
  --font-sans: 'Inter', 'Plus Jakarta Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;

  --fs-xs:   0.75rem;
  --fs-sm:   0.875rem;
  --fs-base: 1rem;
  --fs-lg:   1.125rem;
  --fs-xl:   1.25rem;
  --fs-2xl:  1.5rem;
  --fs-3xl:  2rem;
  --fs-4xl:  2.5rem;
  --fs-5xl:  3rem;

  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  /* ---------- Spacing ---------- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;

  /* ---------- Radius ---------- */
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   16px;
  --radius-pill: 999px;

  /* ---------- Shadow ---------- */
  --shadow-xs: 0 1px 2px rgba(15, 42, 74, 0.04);
  --shadow-sm: 0 2px 4px rgba(15, 42, 74, 0.06), 0 1px 2px rgba(15, 42, 74, 0.04);
  --shadow-md: 0 8px 16px rgba(15, 42, 74, 0.08), 0 2px 4px rgba(15, 42, 74, 0.04);
  --shadow-lg: 0 20px 32px rgba(15, 42, 74, 0.10), 0 4px 8px rgba(15, 42, 74, 0.04);

  /* ---------- Layout ---------- */
  --sidebar-w: 248px;
  --sidebar-w-collapsed: 64px;
  --header-h: 64px;
  --container-max: 1440px;

  /* ---------- Transitions ---------- */
  --t-fast:   120ms cubic-bezier(.4,0,.2,1);
  --t-normal: 200ms cubic-bezier(.4,0,.2,1);
  --t-slow:   320ms cubic-bezier(.4,0,.2,1);
}

/* ---------- Modo oscuro (auto + clase manual) ---------- */
.vs-dark, html[data-theme="dark"] {
  --bg:             #0A1A30;
  --surface:        #102541;
  --surface-hover:  #1A3155;
  --border:         #2C4F80;
  --border-strong:  #4A6FA5;
  --neutral-50:  #173058;
  --neutral-100: #1A3155;
  --neutral-200: #2C4F80;
  --neutral-300: #5A7AAA;
  --neutral-400: #94A3B8;
  --neutral-500: #B0BCD0;
  --neutral-600: #C4CCD8;
  --neutral-700: #D5DCE4;
  --neutral-800: #E8ECF1;
  --neutral-900: #F1F5F9;
  --brand-primary-100: #1A3155;
  --brand-primary-50:  #142F50;
  /* Backgrounds más vibrantes para que se vean en oscuro */
  --warning-bg: #4A2E08;
  --warning-fg: #FCD34D;
  --success-bg: #0A4225;
  --info-bg:    #0E3856;
  --danger-bg:  #4A1414;
  /* Sombras se mantienen */
}

/* Pills con buen contraste en oscuro */
html[data-theme="dark"] .vs-pill-warning { background: #4A2E08; color: #FCD34D; }
html[data-theme="dark"] .vs-pill-success { background: #0A4225; color: #4ADE80; }
html[data-theme="dark"] .vs-pill-info    { background: #0E3856; color: #60A5FA; }
html[data-theme="dark"] .vs-pill-danger  { background: #4A1414; color: #F87171; }
html[data-theme="dark"] .vs-pill-brand   { background: #1A3155; color: #93BBE9; }
html[data-theme="dark"] .dash-pill.tone-warning { background: #4A2E08; color: #FCD34D; }
html[data-theme="dark"] .dash-pill.tone-success { background: #0A4225; color: #4ADE80; }
html[data-theme="dark"] .dash-pill.tone-info    { background: #0E3856; color: #60A5FA; }
html[data-theme="dark"] .dash-pill.tone-danger  { background: #4A1414; color: #F87171; }
html[data-theme="dark"] .dash-pill.tone-brand   { background: #1A3155; color: #93BBE9; }
html[data-theme="dark"] .dash-pill.tone-neutral { background: #2C4F80; color: #C4CCD8; }
html[data-theme="dark"] .badge-completado { background: #0A4225 !important; color: #4ADE80 !important; }
html[data-theme="dark"] .badge-encurso { background: #4A2E08 !important; color: #FCD34D !important; }
html[data-theme="dark"] .badge-pendiente { background: #4A1414 !important; color: #F87171 !important; }

/* Weather widget en oscuro: fondo más sólido */
html[data-theme="dark"] .weather-widget { background: linear-gradient(135deg, #0E3856 0%, #102541 100%); }
html[data-theme="dark"] .weather-city { background: #1A3155; border-left-color: #FCD34D; color: #D5DCE4; }
html[data-theme="dark"] .weather-temp { color: #F1F5F9; }
html[data-theme="dark"] .weather-meta { color: #B0BCD0; }
html[data-theme="dark"] .weather-tip { color: #C4CCD8; }

/* Banner ámbar en oscuro: legible */
html[data-theme="dark"] .dash-banner-amber { background: #4A2E08; color: #FCD34D; border-color: #6B4416; }
html[data-theme="dark"] .dash-banner-amber .b-icon { background: #92400E; }
html[data-theme="dark"] .dash-banner-amber .b-actions .vs-btn { background: #FCD34D; color: #4A2E08; border-color: #FCD34D; }

/* Tabs activos en modo oscuro */
html[data-theme="dark"] .dash-card-tab.is-on { background: #1A3155; color: #93BBE9; }
html[data-theme="dark"] .vs-view-switch { background: #2C4F80; }
html[data-theme="dark"] .vs-view-switch button.is-on { background: #173058; color: #93BBE9; }

/* Lavanda (tone-purple): override en oscuro para mantener contraste consistente */
html[data-theme="dark"] .kpi-card-icon.tone-purple { background: #2D1B47; color: #C4B5FD; }
html[data-theme="dark"] .val-kpi.tone-purple .val-kpi-icon { background: #2D1B47; color: #C4B5FD; }
html[data-theme="dark"] .val-kpi.tone-purple .val-kpi-bar-fill { background: #A78BFA; }

/* ---------- Utilidades base ---------- */
.tabular { font-variant-numeric: tabular-nums; }
.vs-hidden { display: none !important; }