/* ==========================================================================
   CAPA 1 · ADAPTADOR DASHBOARD → TOKENS DEL ECOSISTEMA
   ========================================================================== */
/* ── Tema OSCURO (por defecto) ─────────────────────────────────────────── */
:root,
[data-theme="dark"] {
  /* Superficies · 5 niveles */
  --ds-bg:               var(--c-slate-950);        /* #020617 */
  --ds-surface:          var(--c-slate-925);        /* #0A0F1E */
  --ds-surface-raised:   var(--c-slate-900);        /* #0F172A */
  --ds-surface-overlay:  var(--c-slate-800);        /* #1E293B */
  --ds-surface-hover:    var(--c-slate-700);        /* #334155 */

  /* Sombras (dark) */
  --ds-shadow-none:      0 0 0 0 transparent;
  --ds-shadow-surface:   0 1px 2px 0 rgba(0, 0, 0, 0.3);
  --ds-shadow-raised:    0 2px 4px -1px rgba(0, 0, 0, 0.4), 0 1px 2px -1px rgba(0, 0, 0, 0.2);
  --ds-shadow-overlay:   0 4px 12px -2px rgba(0, 0, 0, 0.5), 0 2px 4px -2px rgba(0, 0, 0, 0.3);
  --ds-shadow-glow:      0 0 0 1px rgba(59, 130, 246, 0.3), 0 0 16px -4px rgba(59, 130, 246, 0.15);

  /* Texto */
  --ds-text:             var(--c-slate-100);        /* #F1F5F9 */
  --ds-heading:          #FFFFFF;
  --ds-text-muted:       #A8B4C8;
  --ds-text-subtle:      #8C9CB5;
  --ds-text-on-accent:   #FFFFFF;

  /* Bordes */
  --ds-border:           var(--c-slate-800);        /* #1E293B */
  --ds-border-visible:   var(--c-slate-600);        /* #475569 */
  --ds-border-accent:    rgba(59, 130, 246, 0.3);

  /* Marca */
  --ds-brand:            #4F8CF7;                /* ↑desde #3B82F6 — más vibrante, AA 6.2:1 */
  --ds-brand-strong:     #72A6FA;                /* ↑desde #60A5FA — hover más vivo */
  --ds-brand-dim:        rgba(79, 140, 247, 0.15);
  --ds-brand-glow:       rgba(79, 140, 247, 0.25);

  /* Estados semánticos */
  --ds-ok:               #0ADD8B;                /* ↑desde #10B981 — más pop, AA 11.3:1 */
  --ds-ok-dim:           rgba(10, 221, 139, 0.15);
  --ds-ok-strong:        #06C77A;                /* hover más vivo */
  --ds-warn:             var(--c-amber-500);        /* #F59E0B */
  --ds-warn-dim:         var(--c-amber-dim);
  --ds-warn-strong:      var(--c-amber-400);        /* #FBBF24 */
  --ds-danger:           var(--c-rose-500);         /* #F43F5E */
  --ds-danger-dim:       var(--c-rose-dim);
  --ds-danger-strong:    var(--c-rose-400);         /* #FB7185 */
  --ds-info:             var(--c-blue-400);         /* #60A5FA */
  --ds-info-dim:         var(--c-blue-dim);
}

/* ── Tema CLARO ────────────────────────────────────────────────────────── */
[data-theme="light"] {
  /* Superficies · 5 niveles (claro) */
  --ds-bg:               var(--c-slate-50);         /* #F8FAFC */
  --ds-surface:          #FFFFFF;                   /* blanco */
  --ds-surface-raised:   var(--c-slate-50);         /* #F8FAFC */
  --ds-surface-overlay:  var(--c-slate-100);        /* #F1F5F9 */
  --ds-surface-hover:    var(--c-slate-200);        /* #E2E8F0 */

  /* Sombras (claro — más suaves) */
  --ds-shadow-none:      0 0 0 0 transparent;
  --ds-shadow-surface:   0 1px 3px 0 rgba(0, 0, 0, 0.06);
  --ds-shadow-raised:    0 2px 6px -1px rgba(0, 0, 0, 0.08), 0 1px 3px -1px rgba(0, 0, 0, 0.04);
  --ds-shadow-overlay:   0 4px 16px -2px rgba(0, 0, 0, 0.12), 0 2px 6px -2px rgba(0, 0, 0, 0.06);
  --ds-shadow-glow:      0 0 0 1px rgba(59, 130, 246, 0.2), 0 0 20px -4px rgba(59, 130, 246, 0.1);

  /* Texto */
  --ds-text:             var(--c-slate-800);        /* #1E293B */
  --ds-heading:          var(--c-slate-900);        /* #0F172A */
  --ds-text-muted:       var(--c-slate-600);        /* #475569 */
  --ds-text-subtle:      var(--c-slate-500);        /* #64748B */
  --ds-text-on-accent:   #FFFFFF;

  /* Bordes */
  --ds-border:           var(--c-slate-200);        /* #E2E8F0 */
  --ds-border-visible:   var(--c-slate-300);        /* #CBD5E1 */
  --ds-border-accent:    rgba(59, 130, 246, 0.25);

  /* Marca (se oscurecen ligeramente para mejor contraste sobre fondo claro) */
  --ds-brand:            #2B6CE5;                /* más vibrante sobre fondo claro, AA 5.2:1 */
  --ds-brand-strong:     #1D4ED8;
  --ds-brand-dim:        rgba(37, 99, 235, 0.1);
  --ds-brand-glow:       rgba(37, 99, 235, 0.15);

  /* Estados semánticos (más oscuros para fondo claro) */
  --ds-ok:               #059669;                /* más vivo, AA 5.5:1 */
  --ds-ok-dim:           rgba(5, 150, 105, 0.1);
  --ds-ok-strong:        #047857;
  --ds-warn:             var(--c-amber-700);        /* #B45309 — AA 5.10:1 */
  --ds-warn-dim:         rgba(180, 83, 9, 0.1);
  --ds-warn-strong:      var(--c-amber-800);        /* #92400E */
  --ds-danger:           var(--c-rose-700);         /* #BE123C — AA 5.53:1 */
  --ds-danger-dim:       rgba(190, 18, 60, 0.1);
  --ds-danger-strong:    var(--c-rose-800);         /* #9F1239 */
  --ds-info:             var(--c-blue-600);         /* #2563EB */
  --ds-info-dim:         rgba(37, 99, 235, 0.1);
}

/* ── Tokens invariantes (mismos en ambos temas) ────────────────────────── */
:root {
  /* Chart colors (usan tokens del ecosistema) */
  --ds-chart-ok:         var(--color-chart-ok);
  --ds-chart-warn:       var(--color-chart-warn);
  --ds-chart-down:       var(--color-chart-down);
  --ds-chart-idle:       var(--color-chart-idle);

  /* Zebra stripe (invariante — sutil en ambos temas) */
  --ds-zebra-stripe:     rgba(128, 128, 128, 0.04);
}

/* ==========================================================================
   CAPA 2 · TOKENS INVARIANTES (mismos valores en ambos temas)
   ========================================================================== */
:root {
  /* ── Espaciado ──────────────────────────────────────────────────────── */
  --ds-space-0: 0;
  --ds-space-1: var(--space-1);   /* 4px */
  --ds-space-2: var(--space-2);   /* 8px */
  --ds-space-3: var(--space-3);   /* 12px */
  --ds-space-4: var(--space-4);   /* 16px */
  --ds-space-5: var(--space-5);   /* 24px */
  --ds-space-6: var(--space-6);   /* 32px */
  --ds-space-7: var(--space-7);   /* 48px */
  --ds-space-8: var(--space-8);   /* 64px */

  /* ── Radios ─────────────────────────────────────────────────────────── */
  --ds-radius-none: 0;
  --ds-radius-sm:   var(--radius-sm);   /* 4px */
  --ds-radius-md:   var(--radius-md);   /* 8px */
  --ds-radius-lg:   var(--radius-lg);   /* 12px */
  --ds-radius-xl:   var(--radius-xl);   /* 16px */
  --ds-radius-full: var(--radius-full); /* 9999px */

  /* ── Tipografía ─────────────────────────────────────────────────────── */
  --ds-font:        var(--font-body);   /* Montserrat */
  --ds-font-mono:   var(--font-mono);   /* JetBrains Mono */
  --ds-font-size-xs:    0.6875rem;      /* 11px */
  --ds-font-size-sm:    0.75rem;        /* 12px */
  --ds-font-size-base:  0.875rem;       /* 14px */
  --ds-font-size-md:    1rem;           /* 16px */
  --ds-font-size-lg:    1.125rem;       /* 18px */
  --ds-font-size-xl:    1.25rem;        /* 20px */
  --ds-font-size-2xl:   1.5rem;         /* 24px */
  --ds-font-size-3xl:   2.25rem;        /* 36px */
  --ds-leading-tight:   1.25;
  --ds-leading-normal:  1.5;
  --ds-leading-relaxed: 1.625;
  --ds-font-weight-normal:   400;
  --ds-font-weight-medium:   500;
  --ds-font-weight-semibold: 600;
  --ds-font-weight-bold:     700;
  --ds-font-weight-extrabold:800;

  /* ── Motion ─────────────────────────────────────────────────────────── */
  --ds-duration-instant:    50ms;
  --ds-duration-fast:      150ms;
  --ds-duration-normal:    250ms;
  --ds-duration-slow:      400ms;
  --ds-duration-gentle:    600ms;
  --ds-easing-standard:     cubic-bezier(0.16, 1, 0.3, 1);
  --ds-easing-decelerate:   cubic-bezier(0.0, 0.0, 0.2, 1);
  --ds-easing-accelerate:   cubic-bezier(0.4, 0.0, 1, 1);
  --ds-easing-spring:       cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ── Iconos ─────────────────────────────────────────────────────────── */
  --ds-icon-xs: 12px;
  --ds-icon-sm: 14px;
  --ds-icon-md: 16px;
  --ds-icon-lg: 20px;
  --ds-icon-xl: 24px;

  /* ── Z-index ────────────────────────────────────────────────────────── */
  --z-progress:  100;
  --z-toast:     200;
  --z-tooltip:   300;
  --z-overlay:   400;
}

/* ==========================================================================
   MOTION · Prefers-reduced-motion (desde F1)
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  :root {
    --ds-duration-instant: 0ms;
    --ds-duration-fast:    0ms;
    --ds-duration-normal:  0ms;
    --ds-duration-slow:    0ms;
    --ds-duration-gentle:  0ms;
  }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   RESET
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  background: var(--ds-bg);
  color: var(--ds-text);
  font-family: var(--ds-font);
  font-size: var(--ds-font-size-base);
  line-height: var(--ds-leading-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   UTILIDADES
   ========================================================================== */
.ds-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;
}
.ds-hidden { display: none !important; }

/* ── Estados de datos ──────────────────────────────────────────────────── */
.ds-loading {
  display: flex; align-items: center; justify-content: center;
  padding: var(--ds-space-7); min-height: 200px;
}
.ds-error {
  display: flex; flex-direction: column; align-items: center;
  gap: var(--ds-space-3); padding: var(--ds-space-7);
  color: var(--ds-text-muted); min-height: 200px; text-align: center;
}
.ds-empty {
  display: flex; flex-direction: column; align-items: center;
  gap: var(--ds-space-2); padding: var(--ds-space-7);
  color: var(--ds-text-subtle); min-height: 160px; text-align: center;
}

/* ── Spinner ───────────────────────────────────────────────────────────── */
.ds-spinner {
  width: 28px; height: 28px;
  border: 2.5px solid var(--ds-border);
  border-top-color: var(--ds-brand);
  border-radius: var(--ds-radius-full);
  animation: ds-spin 0.7s linear infinite;
}
@keyframes ds-spin { to { transform: rotate(360deg); } }

/* ── Pulse animations ──────────────────────────────────────────────────── */
@keyframes ds-pulse-ring {
  0%   { box-shadow: 0 0 0 0 var(--ds-danger-dim); }
  70%  { box-shadow: 0 0 0 6px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}
@keyframes ds-pulse-glow {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.35; }
}

/* ── Barra de progreso ─────────────────────────────────────────────────── */
#ds-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 3px;
  background: transparent; z-index: var(--z-progress);
  transition: background var(--ds-duration-normal) var(--ds-easing-standard);
}
#ds-progress.loading {
  background: linear-gradient(90deg, transparent 0%, var(--ds-brand) 50%, transparent 100%);
  background-size: 60% 100%;
  animation: ds-progress-slide 1.2s ease-in-out infinite;
}
@keyframes ds-progress-slide {
  0%   { background-position: -100% 0; }
  100% { background-position: 200% 0; }
}

/* ── Foco visible (a11y) ──────────────────────────────────────────────── */
:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ── Transición de vista ──────────────────────────────────────────────── */
@keyframes ds-view-enter {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.ds-view-enter {
  animation: ds-view-enter var(--ds-duration-normal) var(--ds-easing-decelerate) forwards;
}